/* ---- Kova proof band (portal reel) ---- */
.section-proof .kova-reel { position: relative; max-width: 980px; margin: 0 auto; }
.section-proof .kova-reel-track { position: relative; }

.section-proof .kova-shot {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .5s cubic-bezier(.16,1,.3,1);
}
.section-proof .kova-shot.is-active { position: relative; opacity: 1; visibility: visible; }

.section-proof .kova-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  background: #131311;
  border: 1px solid #2F2F2C;
  box-shadow: 0 30px 60px rgba(0,0,0,.22);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.section-proof .kova-frame-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 34px;
  background: #1A1A18; border-bottom: 1px solid #2F2F2C;
}
.section-proof .kova-frame-bar::before {
  content: ""; position: absolute; top: 13px; left: 14px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #3A3A36;
  box-shadow: 14px 0 0 #3A3A36, 28px 0 0 #3A3A36;
}
.section-proof .kova-shot-ph {
  font-family: "Inter", sans-serif; font-size: 15px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--role); opacity: .85;
}
.section-proof figcaption {
  margin-top: 18px; text-align: center; font-size: 15px; color: #71717A;
}
.section-proof .kova-reel-dots {
  display: flex; gap: 10px; justify-content: center; margin-top: 22px;
}
.section-proof .kova-dot {
  width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0;
  background: #D4D4D8; cursor: pointer; transition: all .3s ease;
}
.section-proof .kova-dot.is-active { background: #FFA163; transform: scale(1.25); }
@media (max-width: 767px) {
  .section-proof .kova-frame { aspect-ratio: 4 / 3; border-radius: 12px; }
  .section-proof figcaption { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .section-proof .kova-shot { transition: none; }
}

/* ---- Kova features (two rows) ---- */
.section-features-kova .kova-row { margin-top: 56px; }
.section-features-kova .kova-row:first-of-type { margin-top: 0; }
.section-features-kova .kova-row-head { margin-bottom: 24px; }
.section-features-kova .kova-row-label {
  font-family: "Inter", sans-serif;
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: #FFA163; margin: 0 0 6px;
}
.section-features-kova .kova-row-sub { margin: 0; color: #71717A; font-size: 15px; }

.section-features-kova .kova-card {
  height: 100%;
  padding: 28px 24px;
  border-radius: 16px;
  background: #fff;
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1);
}
/* NOTE: no `border` or `box-shadow` above. This selector is (0,2,0) and the
   template surface treatment further down is `.kova-card` at (0,1,0) - any
   shadow declared here silently beat it, which is why these cards rendered
   flat while every other card on the site got the 3D lip and highlight. */
.section-features-kova .kova-card:hover {
  transform: translateY(-4px);
}
/* Equal-height cards. The bootstrap col stretches to the row height, but that
   height is resolved by the flex algorithm rather than specified, so a child
   `height: 100%` doesn't resolve against it - card 2 (two lines of copy)
   rendered 223px against its 245px column. Making the col a flex container
   gives the card a real box to fill. */
/* Scoped to .row.g-4 specifically - the OTHER row in this section (the Kova
   Method swiper, .row with no g-4, col-lg-5/col-lg-7) got caught by the
   original untargeted [class*="col-"] selector. Its columns aren't meant to
   be flex containers - one holds a Swiper carousel that measures its own
   width on init, and forcing display:flex on its ancestor column collapsed
   that width, blowing the slide out full-bleed off the right edge. */
.section-features-kova .row.g-4 > [class*="col-"] { display: flex; }
.section-features-kova .row.g-4 > [class*="col-"] > .kova-card { width: 100%; }
.section-features-kova .kova-card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin-bottom: 18px;
}
.section-features-kova .kova-card-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: rgba(255,161,99,.12); color: #FFA163;
}
.section-features-kova .kova-card-ico svg { width: 22px; height: 22px; }
/* Card pill: the template's own .tf-btn surface, sized down for a card.
   Only geometry is overridden here - background, shadow stack and the
   animate-btn shine come straight from the template so it matches the
   header CTA and every other button on the site. */
.section-features-kova .kova-card-tag {
  flex-shrink: 0; min-width: 142px; margin-top: 2px;
  padding: 11px 20px; font-size: 14px; line-height: 20px;
  text-decoration: none; white-space: nowrap;
}
/* .tf-btn's stack ends in 41px/33px and 100px/80px drops sized for a hero CTA;
   under a small in-card button they pool into a grey blob. Dropped those two,
   deepened the bottom lip to 4px and brightened the top edge so the 3D reads
   at this scale. */
.section-features-kova .kova-card-tag,
.section-features-kova .kova-card-tag:hover {
  box-shadow:
    0px -4px 0px 0px #000 inset,
    0px 1.5px 0px 0px rgba(255,255,255,.42) inset,
    0px 2.77px 2.21px 0px rgba(0,0,0,.14),
    0px 6.65px 5.32px 0px rgba(0,0,0,.15),
    0px 12.52px 10.02px 0px rgba(0,0,0,.15);
}
.section-features-kova .kova-card-tag:hover { color: #fff; }
.section-features-kova .kova-card-t {
  font-family: "Inter", sans-serif;
  font-size: 18px; font-weight: 600; margin: 0 0 8px; color: #09090B;
}
.section-features-kova .kova-card-d { margin: 0; font-size: 15px; line-height: 1.5; color: #52525B; }
@media (max-width: 575px) {
  .section-features-kova .kova-row { margin-top: 40px; }
  .section-features-kova .kova-card { padding: 22px 20px; }
  .section-features-kova .kova-card-tag { font-size: 13px; padding: 10px 16px; min-width: 128px; }
}
@media (prefers-reduced-motion: reduce) {
  .section-features-kova .kova-card-tag { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .section-features-kova .kova-card { transition: none; }
  .section-features-kova .kova-card:hover { transform: none; }
}

/* ---- Kova portal showcase ---- */
.section-portals .kova-portal-intro {
  max-width: 620px; margin: 16px auto 0; color: #71717A; font-size: 16px;
}
.section-portals .kova-portal {
  height: 100%;
  padding: 32px 30px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-top: 3px solid var(--role);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1);
}
.section-portals .kova-portal:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 48px rgba(0,0,0,.12);
}
.section-portals .kova-portal-tag {
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--role);
  background: color-mix(in srgb, var(--role) 12%, transparent);
  padding: 5px 12px; border-radius: 999px; margin-bottom: 14px;
}
.section-portals .kova-portal-t {
  font-family: "Inter", sans-serif;
  font-size: 24px; font-weight: 600; margin: 0 0 10px; color: #09090B;
}
.section-portals .kova-portal-d { margin: 0 0 18px; color: #52525B; font-size: 15px; line-height: 1.55; }
.section-portals .kova-portal-list { list-style: none; padding: 0; margin: 0 0 24px; }
.section-portals .kova-portal-list li {
  position: relative; padding-left: 22px; margin-bottom: 8px;
  font-size: 14.5px; color: #3F3F46;
}
.section-portals .kova-portal-list li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--role);
}
.section-portals .kova-portal-frame {
  position: relative; aspect-ratio: 16 / 9; border-radius: 12px;
  background: #131311; border: 1px solid #2F2F2C; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.section-portals .kova-portal-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 26px;
  background: #1A1A18; border-bottom: 1px solid #2F2F2C;
}
.section-portals .kova-portal-bar::before {
  content: ""; position: absolute; top: 9px; left: 12px;
  width: 7px; height: 7px; border-radius: 50%; background: #3A3A36;
  box-shadow: 12px 0 0 #3A3A36, 24px 0 0 #3A3A36;
}
.section-portals .kova-portal-ph {
  font-family: "Inter", sans-serif; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--role); opacity: .85;
}
@media (max-width: 575px) {
  .section-portals .kova-portal { padding: 26px 22px; border-radius: 16px; }
  .section-portals .kova-portal-t { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .section-portals .kova-portal { transition: none; }
  .section-portals .kova-portal:hover { transform: none; }
}

/* ---- Kova closing CTA ---- */
.section-cta-kova .kova-cta {
  text-align: center;
  padding: 72px 32px;
  border-radius: 24px;
  background: linear-gradient(135deg, #FF9857, #FFB980);
  box-shadow: 0 30px 60px rgba(255,110,26,.18);
}
.section-cta-kova .kova-cta-t {
  font-family: "Inter", sans-serif;
  font-size: clamp(32px, 5vw, 56px); font-weight: 600;
  color: #131311; margin: 0 0 12px; letter-spacing: -.01em;
}
.section-cta-kova .kova-cta-d {
  margin: 0 auto 28px; max-width: 520px;
  color: rgba(19,19,17,.75); font-size: 17px;
}

@media (max-width: 575px) {
  .section-cta-kova .kova-cta { padding: 48px 22px; border-radius: 18px; }
}

/* ---- Why Kova / people ---- */
.section-why-kova .kova-why-intro { max-width: 640px; margin: 16px auto 0; color: #71717A; font-size: 16px; }
.section-why-kova .kova-person {
  height: 100%; text-align: center; padding: 32px 24px; border-radius: 20px;
  background: #fff; border: 1px solid rgba(0,0,0,.06);
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1);
}
.section-why-kova .kova-person:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.10); }
.section-why-kova .kova-person.is-reserved { border-style: dashed; background: transparent; }
.section-why-kova .kova-person-photo {
  width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 50%;
  background: linear-gradient(135deg, #FF9857, #FFB980);
  display: flex; align-items: center; justify-content: center;
  font-family: "Inter", sans-serif; font-size: 30px; font-weight: 600; color: #131311;
}
.section-why-kova .is-reserved .kova-person-photo { background: #F4F4F5; color: #A1A1AA; }
.section-why-kova .kova-person-n { font-family: "Inter", sans-serif; font-size: 20px; font-weight: 600; margin: 0 0 4px; color: #09090B; }
.section-why-kova .is-reserved .kova-person-n { color: #A1A1AA; }
.section-why-kova .kova-person-r { margin: 0 0 10px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #FFA163; }
.section-why-kova .kova-person-b { margin: 0; font-size: 15px; color: #52525B; line-height: 1.55; }
.section-why-kova .kova-method {
  margin-top: 56px; padding: 40px 36px; border-radius: 20px;
  background: #fff; border: 1px solid rgba(0,0,0,.06); text-align: center;
}
.section-why-kova .kova-method-t { font-family: "Inter", sans-serif; font-size: 24px; font-weight: 600; margin: 0 0 12px; color: #09090B; }
.section-why-kova .kova-method-d { max-width: 720px; margin: 0 auto 20px; color: #52525B; font-size: 16px; line-height: 1.6; }
.section-why-kova .kova-method-link { color: #FF6E1A; font-weight: 600; }
@media (max-width: 575px) { .section-why-kova .kova-method { padding: 30px 22px; } }

/* ---- platform strip ---- */
.kova-platform { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.kova-platform span { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: #52525B; }
.kova-platform svg { width: 18px; height: 18px; color: #FF6E1A; }

/* ---- Ask Kova modal ---- */
.kova-ask-overlay {
  position: fixed; inset: 0; z-index: 9999; display: none;
  background: rgba(9,9,11,.55); backdrop-filter: blur(4px);
  align-items: center; justify-content: center; padding: 20px;
}
.kova-ask-overlay.is-open { display: flex; }
.kova-ask {
  width: 100%; max-width: 520px; max-height: 82vh; display: flex; flex-direction: column;
  background: #fff; border-radius: 20px; overflow: hidden;
  box-shadow: 0 40px 90px rgba(0,0,0,.35);
}
.kova-ask-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; background: linear-gradient(135deg, #FF9857, #FFB980);
  font-family: "Inter", sans-serif; font-weight: 600; font-size: 18px; color: #131311;
}
.kova-ask-close {
  border: 0; background: transparent; font-size: 26px; line-height: 1;
  color: #131311; cursor: pointer; padding: 0 4px;
}
.kova-ask-note { padding: 10px 20px; font-size: 12.5px; color: #71717A; border-bottom: 1px solid rgba(0,0,0,.06); }
.kova-ask-log { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; min-height: 220px; }
.kova-ask-msg { max-width: 85%; padding: 10px 14px; border-radius: 14px; font-size: 15px; line-height: 1.5; white-space: pre-wrap; }
.kova-ask-msg.is-kova { background: #F4F4F5; color: #18181B; align-self: flex-start; border-bottom-left-radius: 4px; }
.kova-ask-msg.is-user { background: #FFA163; color: #131311; align-self: flex-end; border-bottom-right-radius: 4px; }
.kova-ask-form { display: flex; gap: 10px; padding: 14px 16px; border-top: 1px solid rgba(0,0,0,.06); }
.kova-ask-in {
  flex: 1; border: 1px solid rgba(0,0,0,.12); border-radius: 999px;
  padding: 10px 16px; font-size: 15px; outline: none;
}
.kova-ask-in:focus { border-color: #FFA163; box-shadow: 0 0 0 3px rgba(255,161,99,.2); }
.kova-ask-send {
  border: 0; border-radius: 999px; padding: 10px 20px; cursor: pointer;
  background: #131311; color: #fff; font-weight: 600; font-size: 14px;
}
@media (max-width: 575px) {
  .kova-ask-overlay { padding: 0; align-items: flex-end; }
  .kova-ask { max-width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; }
}

/* ---- Permanent "Talk to Kova" chat box (homepage) ----
   Replaces the old trust-strip band. Piping only for now: shares the
   Ask Kova modal's /api/ask request and bubble classes (kova-chat-embed.js),
   so it lights up the moment ANTHROPIC_API_KEY is set - no separate
   backend work needed here.
   v2: dark 3D card (per Jose's screenshot ref) with a disclosure/accept
   gate in front of the chat, matching the lip + gloss treatment used on
   .tf-btn.is-brand elsewhere on the site. */
.kova-chat-embed { padding: 40px 0; }
.kova-chat-embed-inner {
  /* Light neumorphic frame - same construction as .featured-works-item:
     pale shell, 12px padding, inset bottom lip + white top highlight */
  position: relative; margin: 0 auto; padding: 12px;
  background-color: var(--neutral-100, #F4F4F5);
  border-radius: 40px;
  box-shadow:
    0px -8px 0px 0px #EAEAEA inset,
    0px 4px 0px 0px rgba(255, 255, 255, 0.6) inset,
    0px 7.77px 2.21px 0px rgba(0, 0, 0, 0.0588235294),
    0px 3px 3px 0px rgba(0, 0, 0, 0.1019607843);
}

/* ---- header + short description above the card ---- */
.kova-chat-intro { max-width: 560px; margin: 0 auto 30px; }
.kova-chat-intro-title {
  font-family: "Inter", sans-serif; font-weight: 600;
  font-size: clamp(26px, 3.4vw, 34px); line-height: 1.2; color: #09090B;
  margin: 10px 0 12px;
}
.kova-chat-intro-lead { font-size: 16px; line-height: 1.6; color: #52525B; margin: 0; }

/* ---- template featured-works card as the chat gate ----
   Card/dots/pill styles live in styles.css (vendor). Here: spacing,
   button-element reset for the mouse-follow pill, and a touch fallback. */
.kova-chat-embed .featured-works-list { margin-bottom: 40px; }
.kova-chat-embed .view-project { border: 0; cursor: pointer; font-family: inherit; }
@media (hover: none) {
  .kova-chat-embed .featured-works-item .image .view-project {
    opacity: 1; visibility: visible;
  }
}

/* ---- chat: revealed on accept, dark inner panel inside the light frame ---- */
.kova-chat-embed-chat {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  border-radius: 32px; overflow: hidden;
  /* Fallback only. JS measures the gate card on accept and sets an inline
     height so the chat lands at exactly the same size, no page jump. */
  min-height: 420px;
  background:
    radial-gradient(120% 100% at 50% -20%, rgba(255,161,99,.16) 0%, rgba(255,161,99,0) 62%),
    linear-gradient(0deg, #131311, #131311);
  box-shadow:
    0px -3px 0px 0px #000 inset,
    0px 1px 0px 0px rgba(255,255,255,.14) inset;
  animation: kova-chat-fadeup .32s var(--spring, cubic-bezier(.34,1.56,.64,1)) both;
}
@keyframes kova-chat-fadeup { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.kova-chat-embed-head {
  padding: 18px 22px; background: linear-gradient(135deg, #FF9857, #FFB980);
}
.kova-chat-embed-title {
  display: block; font-family: "Inter", sans-serif; font-weight: 600;
  font-size: 18px; color: #131311;
}
.kova-chat-embed-sub { display: block; font-size: 13px; color: rgba(19,19,17,.75); margin-top: 2px; }
.kova-chat-embed-log {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 24px 26px; display: flex; flex-direction: column; gap: 10px;
}
.kova-chat-embed-form { display: flex; gap: 10px; padding: 16px 18px; border-top: 1px solid rgba(255,255,255,.08); }
/* Two-class specificity (0,0,2,0) is required here: the vendor rule
   `form input[type=text]` in styles.css scores 0,0,1,2 and otherwise wins,
   forcing near-black text, zero side padding, and a bottom-border underline. */
.kova-chat-embed-form .kova-chat-embed-in {
  flex: 1; width: auto;
  background-color: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px; padding: 12px 20px; font-size: 15px; line-height: 24px;
  outline: none; color: #F4F4F5;
  box-shadow: 0px 2px 4px 0px rgba(0,0,0,.35) inset;
}
.kova-chat-embed-form .kova-chat-embed-in::placeholder { color: #8A8A93; }
.kova-chat-embed-form .kova-chat-embed-in:focus {
  border-color: #FFA163;
  box-shadow: 0px 2px 4px 0px rgba(0,0,0,.35) inset, 0 0 0 3px rgba(255,161,99,.25);
}
.kova-chat-embed-send {
  /* tf-btn 3D construction in brand orange: top gloss, inset lip, soft drops */
  border: 0; border-radius: 99px; padding: 12px 24px; cursor: pointer;
  color: #131311; font-weight: 600; font-size: 14px;
  background:
    radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 100%),
    linear-gradient(0deg, #FFA163, #FFA163);
  box-shadow:
    0px -3px 0px 0px #D97C3B inset,
    0px 1px 0px 0px rgba(255,255,255,.5) inset,
    0px 3px 3px 0px rgba(0,0,0,.14),
    0px 2.77px 2.21px 0px rgba(0,0,0,.12);
}
.kova-chat-embed-send:hover {
  background:
    radial-gradient(62.56% 62.56% at 50% -13%, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 100%),
    linear-gradient(0deg, #FFA163, #FFA163);
}
.kova-chat-embed-send:disabled { opacity: .55; cursor: default; }
.kova-chat-embed-note { padding: 10px 22px 16px; font-size: 12px; color: rgba(255,255,255,.4); text-align: center; }
@media (max-width: 575px) {
  .kova-chat-embed { padding: 28px 0; }
  .kova-chat-embed-inner { border-radius: 24px; padding: 8px; }
  .kova-chat-embed-chat { border-radius: 16px; }
  .kova-chat-intro { margin-bottom: 22px; }
  .kova-chat-intro-lead { font-size: 15px; }
  .kova-chat-embed .featured-works-list { margin-bottom: 26px; }
  .kova-chat-embed-log { min-height: 260px; max-height: 320px; }
}

/* ---- inner page shell ---- */
.kova-page-hero { padding-top: 160px; padding-bottom: 56px; }
.kova-page-head { max-width: 720px; }
.kova-page-title {
  font-family: "Inter", sans-serif; font-weight: 600;
  font-size: clamp(34px, 5vw, 54px); line-height: 1.08; letter-spacing: -.01em;
  color: #09090B; margin: 12px 0 18px;
}
.kova-page-lead { font-size: 18px; line-height: 1.6; color: #52525B; margin: 0; }

/* ---- safety blocks ---- */
.section-safety { padding-top: 0; }
.section-safety .container { max-width: 820px; }
.kova-safety-block {
  padding: 28px 30px; margin-bottom: 16px; border-radius: 16px;
  background: #fff; border: 1px solid rgba(0,0,0,.06);
  border-left: 3px solid #FFA163;
}
.kova-safety-block h2 {
  font-family: "Inter", sans-serif; font-size: 21px; font-weight: 600;
  margin: 0 0 10px; color: #09090B;
}
.kova-safety-block p { margin: 0; font-size: 16px; line-height: 1.65; color: #3F3F46; }
.kova-safety-block.is-note { border-left-color: #A1A1AA; background: #F7F7F6; }
.kova-safety-cta {
  margin-top: 40px; padding: 44px 36px; border-radius: 20px; text-align: center;
  background: linear-gradient(135deg, #FF9857, #FFB980);
}
.kova-safety-cta h2 { font-family: "Inter", sans-serif; font-size: 26px; font-weight: 600; margin: 0 0 8px; color: #131311; }
.kova-safety-cta p { margin: 0 0 22px; color: rgba(19,19,17,.75); }

.kova-inline-link { display: block; margin-top: 14px; color: #131311; text-decoration: underline; font-size: 15px; }
@media (max-width: 575px) {
  .kova-page-hero { padding-top: 120px; }
  .kova-safety-block { padding: 22px 20px; }
  .kova-safety-cta { padding: 32px 22px; }
}

/* ---- module topic pages ---- */
.section-topic { padding-top: 0; }
.section-topic .container { max-width: 860px; }
.kova-topic-block {
  padding: 30px 32px; margin-bottom: 16px; border-radius: 18px;
  background: #fff; border: 1px solid rgba(0,0,0,.06);
}
.kova-topic-block h2 {
  font-family: "Inter", sans-serif; font-size: 23px; font-weight: 600;
  margin: 0 0 12px; color: #09090B;
}
.kova-topic-block p { margin: 0; font-size: 16.5px; line-height: 1.68; color: #3F3F46; }
.kova-topic-safety {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 26px; padding: 20px 24px; border-radius: 14px;
  background: rgba(255,161,99,.09); border: 1px solid rgba(255,161,99,.28);
}
.kova-topic-safety .kova-shield { color: #FF6E1A; font-size: 13px; line-height: 1.7; }
.kova-topic-safety p { margin: 0; font-size: 15px; line-height: 1.6; color: #52525B; }
.kova-topic-safety a { color: #FF6E1A; font-weight: 600; white-space: nowrap; }
.kova-topic-next { margin-top: 48px; text-align: center; }
.kova-topic-next h2 { font-family: "Inter", sans-serif; font-size: 22px; font-weight: 600; margin: 0 0 18px; color: #09090B; }
.kova-topic-links { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.kova-topic-links a {
  padding: 10px 22px; border-radius: 999px; font-size: 15px; font-weight: 600;
  background: #fff; border: 1px solid rgba(0,0,0,.1); color: #09090B;
  transition: all .25s ease;
}
.kova-topic-links a:hover { border-color: #FFA163; color: #FF6E1A; }
.mt-24 { margin-top: 24px; }
@media (max-width: 575px) { .kova-topic-block { padding: 24px 20px; } }

/* ---- feature cards as links ---- */
.section-features-kova .kova-features-intro { max-width: 700px; margin: 16px auto 0; color: #71717A; font-size: 16px; }
.section-features-kova .kova-card.is-link { display: block; text-decoration: none; }
.section-features-kova .kova-card-more {
  display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 600; color: #FF6E1A;
}
.section-features-kova .kova-card-more::after { content: " \2192"; }

/* ---- explore band ---- */
.section-explore { background: rgba(0,0,0,.02); }
.kova-explore {
  display: block; height: 100%; padding: 26px 24px; border-radius: 16px;
  background: #fff; border: 1px solid rgba(0,0,0,.06); text-decoration: none;
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1);
}
.kova-explore:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.10); }
.kova-explore h3 { font-family: "Inter", sans-serif; font-size: 17px; font-weight: 600; margin: 0 0 8px; color: #09090B; }
.kova-explore p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.5; color: #52525B; }
.kova-explore span { font-size: 14px; font-weight: 600; color: #FF6E1A; }
.kova-explore.is-accent { border-color: rgba(255,161,99,.5); background: rgba(255,161,99,.06); }
.mb-40 { margin-bottom: 40px; }

/* ---- portals page ---- */
.section-roles { padding-top: 0; }
.section-roles .container { max-width: 860px; }
.kova-role {
  padding: 32px 34px; margin-bottom: 20px; border-radius: 20px;
  background: #fff; border: 1px solid rgba(0,0,0,.06); border-top: 3px solid var(--role);
}
.kova-role-tag {
  display: inline-block; font-family: "Inter", sans-serif; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--role);
  background: color-mix(in srgb, var(--role) 12%, transparent);
  padding: 5px 12px; border-radius: 999px; margin-bottom: 12px;
}
.kova-role h2 { font-family: "Inter", sans-serif; font-size: 25px; font-weight: 600; margin: 0 0 4px; color: #09090B; }
.kova-role-sub { margin: 0 0 14px; font-size: 15px; color: var(--role); font-weight: 600; }
.kova-role-intro { margin: 0 0 20px; font-size: 16.5px; line-height: 1.65; color: #3F3F46; }
.kova-role-h { font-family: "Inter", sans-serif; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #71717A; margin: 0 0 10px; }
.kova-role-list { list-style: none; padding: 0; margin: 0 0 22px; }
.kova-role-list li { position: relative; padding-left: 22px; margin-bottom: 8px; font-size: 15.5px; color: #3F3F46; }
.kova-role-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--role); }
.kova-role-sees { padding: 18px 20px; border-radius: 12px; background: rgba(0,0,0,.03); }
.kova-role-sees h3 { font-family: "Inter", sans-serif; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #71717A; margin: 0 0 8px; }
.kova-role-sees p { margin: 0; font-size: 15px; line-height: 1.6; color: #52525B; }
@media (max-width: 575px) { .kova-role { padding: 24px 20px; } }
.kova-portals-more { display: inline-block; font-weight: 600; color: #FF6E1A; font-size: 16px; }
.kova-portals-more::after { content: " \2192"; }
.mt-40 { margin-top: 40px; }

/* role colour retired on the site — orange only; roles distinguished by number */
.kova-role-num {
  display: block; font-family: "Inter", sans-serif; font-size: 13px;
  letter-spacing: .18em; color: #A1A1AA; margin-bottom: 8px;
}

/* ============================================================
   Template surface treatment — adopted from Aigocy
   Restores the 3D card/button language on Kova components.
   ============================================================ */

/* Raised light card: soft shadow + dark bottom lip + white top highlight */
.kova-card,
.kova-portal,
.kova-explore,
.kova-topic-block,
.kova-safety-block,
.kova-role,
.section-why-kova .kova-person,
.section-why-kova .kova-method {
  border: 0 !important;
  background: #fff;
  box-shadow:
    0px 7.77px 16px 0px rgba(0, 0, 0, 0.0588235294),
    0px 3px 3px 0px rgba(0, 0, 0, 0.1019607843),
    0px -8px 0px 0px rgba(0, 0, 0, 0.0509803922) inset,
    0px 4px 0px 0px rgba(255, 255, 255, 0.6) inset;
}

/* Keep the accent edges that carry meaning, as inset rules not borders */
.kova-safety-block {
  box-shadow:
    inset 3px 0 0 0 #FFA163,
    0px 7.77px 16px 0px rgba(0, 0, 0, 0.0588235294),
    0px 3px 3px 0px rgba(0, 0, 0, 0.1019607843),
    0px -8px 0px 0px rgba(0, 0, 0, 0.0509803922) inset;
}
.kova-safety-block.is-note { box-shadow: inset 3px 0 0 0 #A1A1AA, 0px 3px 3px 0px rgba(0,0,0,.06); }
.kova-role {
  box-shadow:
    inset 0 3px 0 0 var(--role),
    0px 7.77px 16px 0px rgba(0, 0, 0, 0.0588235294),
    0px 3px 3px 0px rgba(0, 0, 0, 0.1019607843),
    0px -8px 0px 0px rgba(0, 0, 0, 0.0509803922) inset;
}
.kova-portal {
  box-shadow:
    inset 0 3px 0 0 var(--role),
    0px 7.77px 16px 0px rgba(0, 0, 0, 0.0588235294),
    0px 3px 3px 0px rgba(0, 0, 0, 0.1019607843),
    0px -8px 0px 0px rgba(0, 0, 0, 0.0509803922) inset;
}

/* Hover: lift and deepen, keeping the lip */
.kova-card:hover,
.kova-portal:hover,
.kova-explore:hover,
.section-why-kova .kova-person:hover {
  box-shadow:
    0px 18px 40px 0px rgba(0, 0, 0, 0.10),
    0px 3px 3px 0px rgba(0, 0, 0, 0.10),
    0px -8px 0px 0px rgba(0, 0, 0, 0.0509803922) inset,
    0px 4px 0px 0px rgba(255, 255, 255, 0.6) inset;
}

/* Brand button: template's gloss + lip, wearing Kova Orange */
.tf-btn.is-brand,
.section-cta-kova .kova-cta .tf-btn,
.kova-safety-cta .tf-btn {
  background:
    radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 100%),
    linear-gradient(0deg, #131311, #131311);
  box-shadow:
    0px -3px 0px 0px #000 inset,
    0px 1px 0px 0px rgba(255,255,255,.30) inset,
    0px 2.77px 2.21px 0px rgba(0,0,0,.12),
    0px 6.65px 5.32px 0px rgba(0,0,0,.13),
    0px 12.52px 10.02px 0px rgba(0,0,0,.13),
    0px 22.34px 17.87px 0px rgba(0,0,0,.14);
  color: #fff;
}

/* accordion "Learn more" link inside template services component */
.section-services .kova-acc-more {
  display: inline-block; margin-top: 14px; font-weight: 600; font-size: 15px; color: #FF6E1A;
}

/* ---- v7: mid-page CTA doors ---- */
.section-midcta { padding: 0 0 40px; }
.kova-midcta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap; padding: 28px 36px; border-radius: 20px; background: #fff;
  box-shadow: 0px 7.77px 16px rgba(0,0,0,.06), 0px 3px 3px rgba(0,0,0,.10),
              0px -8px 0px rgba(0,0,0,.05) inset, 0px 4px 0px rgba(255,255,255,.6) inset;
}
.kova-midcta p { margin: 0; font-family: "Inter", sans-serif; font-size: 19px; font-weight: 600; color: #09090B; }

/* ---- v7: safety lens band ---- */
.section-safetylens { padding: 20px 0 80px; }
.kova-safetylens { text-align: center; padding: 44px 32px; border-radius: 20px; background: rgba(255,161,99,.07); }
.kova-safetylens h2 { font-family: "Inter", sans-serif; font-size: 28px; font-weight: 600; margin: 0 0 20px; color: #09090B; }
.kova-safetylens-lead { max-width: 620px; margin: 0 auto 20px; font-size: 16px; line-height: 1.6; color: #3F3F46; }
.kova-safetylens-facts { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.kova-safetylens-facts span { padding: 9px 18px; border-radius: 999px; background: #fff; font-size: 14.5px; color: #3F3F46; }
.kova-safetylens-link { font-weight: 600; color: #FF6E1A; }

/* ---- dark band treatment (template .box-black, per Jose Aug 11) ----
   The vendor's dark panel with its light-sweep effects. Extended to run
   from the safeguarding section all the way to the footer, so every
   component below needs a dark variant - all scoped under .box-black so
   the light-theme originals are untouched and still serve other pages. */
.section-safetylens.is-dark { padding: 0 0 96px; }
/* Vertical rhythm inside the dark band. The band stacks four sections with
   no dividers between them, so on a single flat background they run
   together - the safeguarding block, Role Switcher, How-it-works, and FAQ
   need real air to read as separate sections rather than one long scroll.
   NOTE: these sections carry bootstrap's .pt-0, which is
   `padding-top: 0 !important` - a padding-top here is silently dropped no
   matter the specificity. Top spacing has to be margin.
   Scoped to .box-black so the light-mode versions of these sections
   elsewhere on the site keep their own spacing. */
.box-black .section-testimonials { margin-top: 56px; padding-bottom: 168px; }
.box-black .section-process { margin-top: 32px; }
@media (max-width: 767px) {
  .box-black .section-testimonials { margin-top: 32px; padding-bottom: 96px; }
  .box-black .section-process { margin-top: 16px; }
}
.box-black {
  position: relative;
  padding: 96px 0 0;
  /* 3D depth in the template's neumorphic language, inverted for dark.
     Same construction as .tf-btn / .featured-works-item: a hard bottom
     lip, a bright top edge highlight, then stacked soft drops. */
  box-shadow:
    0px -10px 0px 0px rgba(0,0,0,.6) inset,
    0px 2px 0px 0px rgba(255,255,255,.16) inset,
    0px 2.77px 2.21px 0px rgba(0,0,0,.12),
    0px 6.65px 5.32px 0px rgba(0,0,0,.13),
    0px 12.52px 10.02px 0px rgba(0,0,0,.14),
    0px 22.34px 17.87px 0px rgba(0,0,0,.14),
    0px 41.78px 33.42px 0px rgba(0,0,0,.15);
}
/* Top and bottom glows. These replace the vendor's light-top.png /
   light-bot.png, which ship as solid #8EA4BB placeholder fills - the
   real artwork is not in the template package (same as
   featured-works-1.jpg). Built in CSS instead so they scale, need no
   asset, and can wear brand orange. */
.box-black::before, .box-black::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  width: min(880px, 92%); height: 180px; pointer-events: none; z-index: 0;
}
.box-black::before {
  top: 0;
  background: radial-gradient(ellipse at 50% 0%,
    rgba(255,161,99,.20) 0%, rgba(255,161,99,.07) 38%, rgba(255,161,99,0) 72%);
}
.box-black::after {
  bottom: 0;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(255,161,99,.14) 0%, rgba(255,161,99,.05) 40%, rgba(255,161,99,0) 74%);
}
/* The light-sweep art is absolutely positioned over the panel and must
   never intercept clicks on the content beneath it. */
.box-black .light-box { pointer-events: none; }
.box-black > [class*="section-"] { position: relative; z-index: 1; }

/* headings: the light-mode gradient (#61666A->#292C2E) is invisible on black */
.box-black .heading-title.text-gradient-3 {
  background: linear-gradient(95.5deg, #FFFFFF 1.91%, #A1A1AA 60%);
  -webkit-background-clip: text; background-clip: text;
}
.box-black .kova-sec-title, .box-black .heading-title { color: #FAFAFA; }
.box-black .kova-portals-more { color: #FFA163; }

/* safeguarding band */
.box-black .kova-safetylens { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.box-black .kova-safetylens h2 { color: #FAFAFA; }
.box-black .kova-safetylens-lead { color: #A1A1AA; }
.box-black .kova-safetylens-facts span {
  background: rgba(255,255,255,.07); color: #D4D4D8; border: 1px solid rgba(255,255,255,.12);
}
.box-black .kova-safetylens-link { color: #FFA163; }

/* role switcher tabs */
.box-black .kova-tabs button {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #D4D4D8;
}
.box-black .kova-tabs button:hover { border-color: #FFA163; color: #FFA163; }
.box-black .kova-tabs button.is-active { background: #FAFAFA; color: #131311; border-color: #FAFAFA; }
.box-black .kova-tour-copy h3, .box-black .kova-tour-bullets strong { color: #FAFAFA; }
.box-black .kova-tour-bullets li { border-top-color: rgba(255,255,255,.1); }
.box-black .kova-tour-bullets span { color: #A1A1AA; }

/* testimonials */
.box-black .kova-testimonial {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0px -8px 0px 0px rgba(0,0,0,.35) inset, 0px 4px 0px 0px rgba(255,255,255,.06) inset;
}
.box-black .kova-testimonial p.body { color: #D4D4D8; }
.box-black .kova-testimonial .meta strong { color: #FAFAFA; }

/* mid-page CTA card */
.box-black .kova-midcta {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0px -8px 0px 0px rgba(0,0,0,.35) inset, 0px 4px 0px 0px rgba(255,255,255,.06) inset;
}
.box-black .kova-midcta p { color: #FAFAFA; }

/* How it works cards */
.box-black .process-card {
  background-color: #18181B;
  box-shadow:
    0px -8px 0px 0px rgba(0,0,0,.5) inset,
    0px 4px 0px 0px rgba(255,255,255,.06) inset,
    0px 7.77px 16px 0px rgba(0,0,0,.2);
}
.box-black .process-card .content .title { color: #FAFAFA; }
.box-black .process-card .content .title::after {
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.18) 50%, rgba(255,255,255,0) 100%);
}
.box-black .process-card .bot .time { border-color: rgba(255,255,255,.18); color: #D4D4D8; }
.box-black .process-card .text-secondary { color: #A1A1AA !important; }
.box-black .process-card .bot .number .text-neutral-400 { color: #D4D4D8 !important; }
.box-black .process-card .bot .number .text-neutral-200 { color: #52525B !important; }
.box-black .group-btn-slider .nav-prev-swiper,
.box-black .group-btn-slider .nav-next-swiper { color: #FAFAFA; }

/* Role Switcher (vendor "What Our Clients Say" component, repurposed) */
/* Nav buttons carry BOTH .btn-slider (testimonial-specific) AND
   .nav-prev-swiper/.nav-next-swiper (the sitewide component, same one the
   Kova Method carousel uses) - exactly as the vendor's own markup does.
   That sitewide component is a self-contained white-circle/dark-icon button
   that inverts to dark-circle/white-icon on hover, regardless of page
   background. The existing ".box-black .group-btn-slider .nav-prev-swiper"
   rule above (pre-dating this section) forces it white always, for whatever
   other dark-band carousel it was written for - here it makes the icon
   invisible against its own light resting-state circle. Reset to the
   vendor's default two-tone behavior, scoped to just this component so the
   pre-existing rule is left alone for whatever it already serves. */
.box-black .swiper-testimonial_wrap .group-btn-slider .nav-prev-swiper,
.box-black .swiper-testimonial_wrap .group-btn-slider .nav-next-swiper { color: var(--secondary); }
.box-black .swiper-testimonial_wrap .group-btn-slider .nav-prev-swiper:hover,
.box-black .swiper-testimonial_wrap .group-btn-slider .nav-next-swiper:hover { color: var(--white); }
.box-black .testimonials-pagination { color: rgba(255,255,255,.25); }
.box-black .testimonials-pagination .swiper-pagination-current { color: #FAFAFA; }
/* The vendor's source images were square; ours are wide product screenshots.
   aspect-ratio:1 forced a 636px-tall square that cropped the dashboard's
   right edge mid-content AND stretched the whole row to 636px, leaving a
   ~140px dead gap in the left column (measured). 16/10 shows the actual
   screenshot and brings the row down to a sane height. */
.box-black .testimonial-image img { aspect-ratio: 16 / 10; object-position: top left; }
.box-black .testimonial-image { padding: 20px; border-radius: 28px; }
/* Left column: the vendor's space-between assumed a tall 5-star + long-quote
   block. Our copy is short, so space-between just manufactured dead air
   between the heading and the slide. Pack the content and let the column
   size to it. */
.box-black .section-testimonials .col-left { justify-content: flex-start; }
.box-black .section-testimonials .heading-section { margin-bottom: 32px; }
.box-black .section-testimonials .row { align-items: center; }
/* Per-role slide icon as a tinted badge, matching the card-icon treatment
   used elsewhere on the site. As a bare 20px glyph it read as a stray
   artifact floating in the gap rather than an intentional label. */
.box-black .swiper-testimonial .top-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255,255,255,.06); font-size: 18px; margin-bottom: 20px;
}
.box-black .top-icon.is-director { color: #60A5FA; }
.box-black .top-icon.is-coach { color: #FFA163; }
.box-black .top-icon.is-player { color: #34D399; }
.box-black .top-icon.is-parent { color: #C084FC; }

/* FAQ */
.box-black .kova-faq-row, .box-black .kova-faq-row:first-child { border-color: rgba(255,255,255,.1); }
.box-black .kova-faq-q { color: #FAFAFA; }
.box-black .kova-faq-a p { color: #A1A1AA; }
.box-black .kova-faq-a p a { color: #FFA163; }

@media (max-width: 767px) {
  .box-black { padding: 64px 0 0; }
  .section-safetylens.is-dark { padding: 0 0 64px; }
}

/* ---- v7: also built in ---- */
.kova-also { height: 100%; padding: 26px 24px; border-radius: 16px; background: #fff;
  box-shadow: 0px 3px 3px rgba(0,0,0,.06), 0px -6px 0px rgba(0,0,0,.04) inset, 0px 3px 0px rgba(255,255,255,.6) inset; }
.kova-also h3 { font-family: "Inter", sans-serif; font-size: 17px; font-weight: 600; margin: 0 0 8px; color: #09090B; }
.kova-also p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #52525B; }

/* ---- v7: tighten the proof band ---- */
.section-proof .kova-reel { max-width: 820px; }
.section-proof .kova-frame { aspect-ratio: 16/9; }

/* ---- v7 nav: dropdown affordance + room for longer labels ---- */
.menu-item.has-child > .item-link { display: inline-flex; align-items: center; gap: 6px; }
.menu-item.has-child > .item-link::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .25s ease;
  opacity: .65;
}
.menu-item.has-child:hover > .item-link::after {
  transform: rotate(-135deg) translate(-2px, -2px);
  opacity: 1;
}
.sub-menu { min-width: 232px; }
.sub-menu li > a { white-space: nowrap; }

/* ---- Kova wordmark (interim: replaces the template logo until the PNG lands) ---- */
.kova-wordmark {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: .10em;
  color: #131311;
  line-height: 1;
  display: inline-block;
}
.kova-wordmark::after { content: "8"; color: #FFA163; }
.kova-wordmark.is-light { color: #fff; }
footer .kova-wordmark { font-size: 24px; }

/* ---- v8 nav: single-word items, job name inside the dropdown ---- */
.sub-menu-head {
  padding: 12px 18px 8px;
  font-family: "Inter", sans-serif;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: #A1A1AA; border-bottom: 1px solid rgba(0,0,0,.06); margin-bottom: 6px;
  pointer-events: none;
}
/* roomier assessment pill so the right side breathes */
header .tf-btn.d-lg-flex { padding-left: 34px; padding-right: 34px; letter-spacing: .01em; }

/* ---- v8 header polish ---- */
/* wider nav pill, lighter weight, breathing room after the wordmark */
header .box-navigation, header .wrap-header { max-width: none; }
.nav-menu-main > .menu-item > .item-link { font-weight: 500; letter-spacing: .005em; }
.logo-site { margin-right: 34px; }
header .tf-btn.d-lg-flex {
  padding-left: 30px; padding-right: 30px;
  white-space: nowrap; font-weight: 600;
}
.nav-menu-main { gap: 70px; }

/* ---- hero: retire the template's stock photo ---- */
.section-hero .hero-image {
  background-image: none;
  background: linear-gradient(180deg, #F4F3F1 0%, #EDECEC 100%);
}

/* ---- header: stop the Assessment CTA collapsing into a circle ----
   .tf-btn carries overflow:hidden, which zeroes a flex item's automatic
   minimum size. Once the 7-item nav outgrows the pill, the CTA is what
   shrinks - down to roughly its own height, so border-radius:99px renders
   it as a circle and the nowrap label spills out and gets clipped. */
header .header-inner > .logo-site,
header .header-inner > .tf-btn,
header .header-inner > .mobile-menu { flex-shrink: 0; }
header .header-inner > .box-navigation { flex-shrink: 0; }

/* The template pins the pill at 807px via `.tf-header.header2 .header-inner`
   (3 classes). The old `header .header-inner` override lost on specificity and
   never applied - which is why 6 nav items, Log in and the CTA collided. */
.tf-header .header-inner,
.tf-header.header2 .header-inner { max-width: 1180px; }

/* Relieve the pressure between the mobile breakpoint and a roomy desktop,
   so nothing has to shrink in the first place. Nav gap stays at the same
   30px used everywhere else (v9 below) so the rhythm doesn't shift at
   this breakpoint - only the CTA's own padding tightens up. */
@media (min-width: 992px) and (max-width: 1399px) {
  header .tf-btn.d-lg-flex { padding-left: 22px; padding-right: 22px; }
}

/* ---- v9 header: even rhythm now that Log in is gone ----
   header-inner uses justify-content:space-between (template), pinned to
   an explicit width so the logo sits flush at the left edge and
   Assessment flush at the right, with the nav riding in the middle.
   v11 (1150px) read as too wide with the nav items clustered tight in
   the middle of a lot of empty space. v12 per Jose: narrower pill
   (920px, ~20% down) plus nav-menu-main's own item gap widened
   30px -> 70px, so Product/Safety/Pricing/About spread out in proportion
   to the pill instead of bunching up next to two oversized flanking
   gaps. */
@media (min-width: 992px) {
  .tf-header .header-inner,
  .tf-header.header2 .header-inner {
    max-width: 94vw;
    width: 1080px;
    justify-content: space-between;
    gap: 20px;
    transition: width .35s var(--ease-out-expo, cubic-bezier(.19,1,.22,1));
  }
  .logo-site { margin-right: 0; }
}

/* ---- v14 header: compact on scroll ----
   Wider pill (1080px) at rest per Jose. Once scrolled past the top of the
   page, .tf-header gets .is-scrolled (assets/js/kova.js) and the pill eases
   back down to the v12 width (920px) that was already tuned and approved -
   a smaller footprint once the hero isn't in view anymore. */
@media (min-width: 992px) {
  .tf-header.is-scrolled .header-inner {
    width: 920px;
  }
}

/* ---- v13 header: back to original height per Jose ----
   v9/v10 trimmed the pill's height by shrinking the Assessment CTA's
   vertical padding (14px -> 11px -> 7px) and header-inner's own vertical
   padding (8px -> 6px -> 4px). Reverting both to the template's original
   values - the pill is back to its natural, un-trimmed height. */

/* ---- v9 header: make position:sticky actually stick ----
   The template set `position: sticky` with no offset. Per spec, sticky
   with no top/right/bottom/left is a no-op - it behaves like static
   positioning. The pill scrolled away with the page instead of persisting
   at the top like a floating nav is supposed to. */
header { top: 20px; }

/* ---- real logo replaces the interim text wordmark ----
   Swapped in CSS rather than across 22 spans in 11 files. The text stays in
   the DOM for screen readers and is pushed off-screen. Also kills the ::after
   "8" - the brand users see is Kova; the 8 belongs to the domain only. */
.kova-wordmark {
  width: 86px;
  height: 34px;
  background: url("../images/logo/kova-wordmark-charcoal.png") no-repeat left center;
  background-size: contain;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0;
}
.kova-wordmark::after { content: none; }
.kova-wordmark.is-light {
  background-image: url("../images/logo/kova-wordmark-white.png");
}

/* Offcanvas header sits on charcoal - use the white mark there too. */
.canvas_head .kova-wordmark,
.canvas_center .kova-wordmark,
.canvas_foot .kova-wordmark {
  background-image: url("../images/logo/kova-wordmark-white.png");
}

/* Footer watermark: the template intends a full-bleed decorative band.
   The v8 footer drops the WORDMARK into that slot, which doesn't work:
   .footer-image is 1296px wide but .kova-logo-img.is-footer pins the
   height to 28px, and object-fit:cover then scales the 700x276 logo to
   1296x511 and shows only its top 28px - i.e. the sliced-off tops of the
   K-O-V-A letterforms, reading as random white and orange chevrons.
   Hidden rather than deleted from 20 files; the footer already carries a
   correctly-sized wordmark in .kova-footer-brand. Remove this rule to
   restore it if a real full-bleed band asset ever lands. */
footer.kova-footer-v8 .footer-image { display: none; }

footer .footer-image .kova-wordmark {
  width: 100%;
  height: 220px;
  background-position: center top;
  opacity: .06;
}

/* ---- hero video ---- */
.section-hero .hero-image { overflow: hidden; }
.kova-hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 40px;
}
/* readability scrim so the headline always holds against the footage */
.kova-hero-scrim {
  position: absolute; inset: 0; border-radius: 40px;
  background: linear-gradient(180deg, rgba(237,236,236,.72) 0%, rgba(237,236,236,.55) 45%, rgba(237,236,236,.86) 100%);
}
.section-hero .container { position: relative; z-index: 2; }
@media (max-width: 767px) {
  .kova-hero-video, .kova-hero-scrim { border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .kova-hero-video { display: none; }
}

/* Hero subhead: the whole line, not just the payoff phrase, at one
   tone. Before this the paragraph inherited body's near-black default
   (#09090B) while .kova-hero-emphasis explicitly set #3C3A3A on "time
   with the player" - two visibly different blacks in one sentence.
   #3C3A3A per Jose - dark charcoal, distinct from both KOVA-02 brand
   oranges and the video's own warm/orange tones (animated logo mark,
   golden-hour lighting) - now sets the whole paragraph. */
.section-hero .content-wrap .text { color: #3C3A3A; }
/* Whole phrase reads at body size now (was 1.3em, then flattened per
   Jose so nothing in the line sizes up); "the player" (nested span) is
   underlined instead of caps, per Jose. */
.kova-hero-emphasis {
  letter-spacing: .02em;
  text-shadow: 0 2px 14px rgba(237,236,236,.65);
}
.kova-hero-emphasis-underline {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}

/* ---- real Kova wordmark ---- */
.kova-logo-img { height: 30px; width: auto; display: block; }
.kova-logo-img.is-footer { height: 28px; }
@media (max-width: 767px) { .kova-logo-img { height: 26px; } }

/* ---- hero title gradient: descender clipping fix ----
   text-display-2's line-height (96px) exactly equals its font-size, so
   -webkit-background-clip: text on .text-gradient-1 crops tight to the
   line box, cutting the descenders on g/y/p ("growing", "your",
   "player"). styles.css's own .text-gradient-3 already carries this
   same padding-bottom/margin-bottom compensation elsewhere; .text-
   gradient-1 never got it. em-based so it scales with the responsive
   font-size steps (96/60/32px). Padding on these inline elements paints
   without pushing the following line down; the negative margin cancels
   any box-model effect on the flex-item usage (title2). Only used in
   the hero (2 spans), so scoped narrowly is safe. */
.section-hero .text-gradient-1 {
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}

/* ---- hero: vertically centred, no eyebrow ---- */
.section-hero .content-wrap.is-centered {
  min-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 90px;
  padding-bottom: 120px;
}
@media (max-width: 767px) {
  .section-hero .content-wrap.is-centered {
    min-height: calc(100vh - 32px);
    padding-top: 80px;
    padding-bottom: 100px;
  }
}


/* ---- v7: assessment page ---- */
.section-assessment { padding-top: 0; }
.section-assessment .container { max-width: 1080px; }
.kova-assess-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 991px) { .kova-assess-grid { grid-template-columns: 1fr; } }

.kova-assess-form {
  padding: 36px 38px; border-radius: 20px; background: #fff;
  box-shadow:
    0px 7.77px 16px 0px rgba(0,0,0,.0588235294),
    0px 3px 3px 0px rgba(0,0,0,.1019607843),
    0px -8px 0px 0px rgba(0,0,0,.0509803922) inset,
    0px 4px 0px 0px rgba(255,255,255,.6) inset;
}
@media (max-width: 575px) { .kova-assess-form { padding: 26px 22px; } }

.kova-disclosure {
  display: flex; gap: 12px; align-items: flex-start;
  margin-bottom: 28px; padding: 16px 20px; border-radius: 12px;
  background: rgba(255,161,99,.09); border: 1px solid rgba(255,161,99,.28);
}
.kova-disclosure .kova-shield { color: #FF6E1A; font-size: 13px; line-height: 1.7; flex-shrink: 0; }
.kova-disclosure p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #52525B; }

.kova-field { margin-bottom: 20px; }
.kova-field label {
  display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: #09090B;
}
.kova-field input, .kova-field select {
  width: 100%; padding: 13px 16px; border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12); font-size: 15px; color: #18181B;
  background: #fff; outline: none; transition: border-color .2s ease, box-shadow .2s ease;
  font-family: inherit; appearance: none;
}
.kova-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2371717A' stroke-width='1.6' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px;
}
.kova-field input:focus, .kova-field select:focus {
  border-color: #FFA163; box-shadow: 0 0 0 3px rgba(255,161,99,.18);
}
.kova-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 575px) { .kova-field-row { grid-template-columns: 1fr; } }

.kova-assess-consent { margin: 4px 0 0; font-size: 13px; color: #A1A1AA; }
.kova-assess-consent a { color: #71717A; text-decoration: underline; }

.kova-assess-rail-card {
  padding: 30px 30px; border-radius: 20px; background: #fff; margin-bottom: 20px;
  box-shadow: 0px 3px 3px rgba(0,0,0,.06), 0px -6px 0px rgba(0,0,0,.04) inset, 0px 3px 0px rgba(255,255,255,.6) inset;
}
.kova-assess-rail-card h3 { font-family: "Inter", sans-serif; font-size: 18px; font-weight: 600; margin: 0 0 16px; color: #09090B; }
.kova-assess-rail-card .list-text.type-check { margin-bottom: 18px; }
.kova-assess-eta { margin: 0; font-size: 14px; color: #71717A; }

.kova-preview-frame {
  position: relative; aspect-ratio: 4 / 3; border-radius: 14px; margin-top: 14px;
  background: #131311; border: 1px solid #2F2F2C; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.kova-preview-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 28px;
  background: #1A1A18; border-bottom: 1px solid #2F2F2C;
}
.kova-preview-bar::before {
  content: ""; position: absolute; top: 10px; left: 13px;
  width: 7px; height: 7px; border-radius: 50%; background: #3A3A36;
  box-shadow: 13px 0 0 #3A3A36, 26px 0 0 #3A3A36;
}
.kova-preview-ph { font-family: "Inter", sans-serif; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #FFA163; opacity: .8; }

/* ---- v7: assessment confirm ---- */
.section-confirm { padding-top: 0; }
.section-confirm .container { max-width: 720px; text-align: center; }
.kova-confirm-check {
  width: 64px; height: 64px; margin: 0 auto 24px; border-radius: 50%;
  background: linear-gradient(135deg, #FF9857, #FFB980);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: #131311; font-weight: 700;
}
.kova-confirm-t { font-family: "Inter", sans-serif; font-weight: 600; font-size: clamp(28px, 4vw, 38px); margin: 0 0 14px; color: #09090B; }
.kova-confirm-d { font-size: 17px; line-height: 1.6; color: #52525B; max-width: 560px; margin: 0 auto; }
.kova-confirm-divider { border: none; border-top: 1px solid rgba(0,0,0,.08); margin: 48px 0 40px; }
.kova-confirm-while { font-family: "Inter", sans-serif; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: #71717A; margin: 0 0 20px; }
.kova-confirm-links { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.kova-confirm-links a {
  padding: 10px 22px; border-radius: 999px; font-size: 15px; font-weight: 600;
  background: #fff; border: 1px solid rgba(0,0,0,.1); color: #09090B; text-decoration: none;
  transition: all .25s ease;
}
.kova-confirm-links a:hover { border-color: #FFA163; color: #FF6E1A; }
@media (max-width: 575px) { .kova-confirm-divider { margin: 36px 0 30px; } }

/* ---- v7: coming-soon legal stub pages ---- */
.section-legal-stub { padding-top: 0; }
.section-legal-stub .container { max-width: 640px; text-align: center; }
.kova-legal-badge {
  display: inline-block; padding: 6px 16px; border-radius: 999px; margin-bottom: 18px;
  background: rgba(255,161,99,.12); color: #FF6E1A; font-size: 13px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}

/* ---- legal document prose ----
   Long-form counsel-drafted text. Measure capped ~72ch: these run 5+ pages
   and full container width would be unreadable. Inter throughout (KOVA-02:
   Inter is shared everywhere); no Bebas here - legal prose is the one place
   the athletic display face would read as wrong. */
/* Legal hero shares the document's exact column. .kova-page-head is a
   720px box with no auto-margin - fine for the left-aligned heroes on the
   other 14 pages that use it, but centering text inside it (as the first
   pass did) centers on the BOX, not the page: title landed at center 388
   while the body centered at 640. Matching 760px + auto margins puts the
   title's left edge flush with the body's, which is what a legal document
   wants anyway. */
.kova-page-head.is-legal { max-width: 760px; margin: 0 auto; text-align: left; }
.kova-page-head.is-legal .kova-legal-meta { justify-content: flex-start; }
.kova-legal-doc { max-width: 760px; margin: 0 auto; padding: 8px 0 96px; }
.kova-legal-doc p,
.kova-legal-doc li {
  font-family: "Inter", sans-serif; font-size: 16px; line-height: 1.72;
  color: #3F3F46; margin: 0 0 16px;
}
.kova-legal-doc h2 {
  font-family: "Inter", sans-serif; font-size: 22px; font-weight: 600;
  color: #09090B; margin: 44px 0 14px; letter-spacing: -.01em;
  padding-top: 20px; border-top: 1px solid rgba(0,0,0,.08);
}
.kova-legal-doc h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.kova-legal-doc h3 {
  font-family: "Inter", sans-serif; font-size: 17px; font-weight: 600;
  color: #09090B; margin: 26px 0 10px;
}
.kova-legal-doc strong { color: #18181B; font-weight: 600; }
.kova-legal-doc ul { margin: 0 0 18px; padding-left: 22px; }
.kova-legal-doc li { margin-bottom: 9px; }
.kova-legal-doc li::marker { color: #FFA163; }
.kova-legal-doc a { color: #FF6E1A; text-decoration: underline; text-underline-offset: 2px; }
/* Blockquotes carry the "when this is shown" framing and the consent
   checkbox statements - the parts a parent most needs to notice. */
.kova-legal-doc blockquote {
  margin: 0 0 20px; padding: 18px 22px; border-radius: 12px;
  background: rgba(255,161,99,.07); box-shadow: inset 3px 0 0 0 #FFA163;
}
.kova-legal-doc blockquote p:last-child { margin-bottom: 0; }
.kova-legal-meta {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  margin-top: 18px; font-size: 14px; color: #71717A;
}
.kova-legal-meta span { padding: 7px 14px; border-radius: 999px; background: rgba(0,0,0,.04); }
.kova-legal-related {
  max-width: 760px; margin: 0 auto; padding: 28px 0 0; border-top: 1px solid rgba(0,0,0,.08);
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.kova-legal-related span { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #71717A; }
.kova-legal-related a {
  padding: 8px 16px; border-radius: 999px; background: #fff; color: #09090B;
  font-size: 14px; font-weight: 600; text-decoration: none;
  box-shadow: 0px 3px 3px rgba(0,0,0,.06), 0px -4px 0px rgba(0,0,0,.04) inset;
}
.kova-legal-related a:hover { color: #FF6E1A; }
@media (max-width: 767px) {
  .kova-legal-doc { padding-bottom: 64px; }
  .kova-legal-doc h2 { font-size: 20px; margin-top: 34px; }
  .kova-legal-doc p, .kova-legal-doc li { font-size: 15.5px; }
}

/* ============================================================
   v8: unified nav/footer restructure + new page components
   ============================================================ */

/* ---- new footer (Brand / Product / Company / Legal / Access) ---- */
footer.kova-footer-v8 { background: #131311; padding-top: 0; }
.kova-footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 32px; padding: 64px 0 40px; border-top: 1px solid rgba(255,255,255,.08);
}
.kova-footer-brand p { margin: 14px 0 0; color: rgba(255,255,255,.5); font-size: 14.5px; line-height: 1.55; max-width: 260px; }
.kova-footer-col h4 {
  font-family: "Inter", sans-serif; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.4); margin: 0 0 16px; font-weight: 600;
}
.kova-footer-col { display: flex; flex-direction: column; gap: 10px; }
.kova-footer-col a { color: rgba(255,255,255,.72); font-size: 14.5px; text-decoration: none; transition: color .2s ease; }
.kova-footer-col a:hover { color: #FFA163; }
/* Footer Access link: "LOG IN" carries brand orange, the destination
   stays muted like every other footer link. Whole line is one anchor. */
.kova-footer-col a .kova-footer-login { color: #FFA163; font-weight: 600; letter-spacing: .04em; }
.kova-footer-bottom {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding: 24px 0 40px; border-top: 1px solid rgba(255,255,255,.08);
}
.kova-footer-bottom p { margin: 0; color: rgba(255,255,255,.4); font-size: 14px; }
.kova-footer-bottom .action-go-top { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.6); text-decoration: none; font-size: 14px; font-weight: 600; }
.kova-footer-bottom .action-go-top:hover { color: #FFA163; }
@media (max-width: 991px) {
  .kova-footer-grid { grid-template-columns: 1fr 1fr; }
  .kova-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 575px) {
  .kova-footer-grid { grid-template-columns: 1fr; padding: 48px 0 32px; gap: 28px; }
}

/* ---- reusable tab switcher (product tour, role switcher, product page) ---- */
.kova-tabs { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 40px; }
.kova-tabs button {
  padding: 11px 22px; border-radius: 999px; border: 1px solid rgba(0,0,0,.1);
  background: #fff; color: #52525B; font-size: 15px; font-weight: 600; cursor: pointer;
  transition: all .2s ease;
}
.kova-tabs button:hover { border-color: #FFA163; color: #FF6E1A; }
.kova-tabs button.is-active { background: #131311; color: #fff; border-color: #131311; }

.kova-tab-panel { display: none; }
.kova-tab-panel.is-active { display: block; }

.kova-tour-layout { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; }
.kova-tour-copy-eyebrow { font-family: "Inter", sans-serif; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #FFA163; margin: 0 0 10px; }
.kova-tour-copy h3 { font-family: "Inter", sans-serif; font-size: 26px; font-weight: 600; margin: 0 0 18px; color: #09090B; }
.kova-tour-bullets { list-style: none; padding: 0; margin: 0; }
.kova-tour-bullets li { padding: 12px 0; border-top: 1px solid rgba(0,0,0,.06); }
.kova-tour-bullets li:first-child { border-top: 0; }
.kova-tour-bullets strong { display: block; font-size: 15.5px; color: #09090B; margin-bottom: 2px; }
.kova-tour-bullets span { font-size: 14.5px; color: #71717A; }
@media (max-width: 991px) { .kova-tour-layout { grid-template-columns: 1fr; } .kova-tour-layout .kova-preview-frame { order: -1; } }

/* ---- product tour: reuses vendor .list-tags pill style (scoped to `a`
   in styles.css) on <span> instead of dead href="#" anchors ---- */
.section-services .list-tags .tags-item {
  display: flex; align-items: center; padding: 7px 15px; border-radius: 99px;
  color: var(--neutral-300, #D4D4D8);
  background: var(--neutral-700, #3F3F46);
  border: 1px solid var(--neutral-600, #52525B);
}

/* ---- product tour: bigger preview image + click-to-zoom ----
   Vendor default is 416x240, position:absolute/bottom:0 against
   .container (>=992px), position:unset in flow below (<=991px).
   The taller image needs more reserved space in .col-left, but ONLY
   at >=992px - below that the vendor already drops it into flow and
   the extra margin would be dead space. */
@media (min-width: 992px) {
  .section-services .col-left { margin-bottom: 340px; }
}
.services-image { max-width: 560px; height: 320px; }
.services-image.is-zoomable { cursor: pointer; }
/* Do NOT set position here at >=992px: it would override the vendor's
   position:absolute (lower specificity) and drop the image out of its
   bottom-anchored slot. The absolute positioning already establishes
   the containing block ::after needs. Below 992px the vendor sets
   position:unset, so ::after needs an explicit anchor. */
@media (max-width: 991px) {
  .services-image.is-zoomable { position: relative; }
}
.services-image.is-zoomable::after {
  content: "\e948"; /* icon-search-solid glyph, verified in assets/icon/icomoon/style.css */
  font-family: "icomoon" !important;
  font-style: normal; font-weight: normal; line-height: 1; speak: never;
  position: absolute; top: 14px; right: 14px; z-index: 1;
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: #fff; border-radius: 50%;
  background: rgba(19,19,17,.55); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .2s ease;
}
.services-image.is-zoomable:hover::after,
.services-image.is-zoomable:focus-visible::after { opacity: 1; }
.services-image.is-zoomable:focus-visible { outline: 2px solid #FFA163; outline-offset: 3px; }
@media (max-width: 991px) {
  .services-image { max-width: 100%; height: 300px; }
}
@media (max-width: 767px) {
  .services-image { height: 240px; }
}

/* ---- product tour: fullscreen lightbox ---- */
.kova-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 40px; background: rgba(9,9,11,.92); backdrop-filter: blur(6px);
  animation: kova-lightbox-in .18s ease both;
}
.kova-lightbox[hidden] { display: none; }
@keyframes kova-lightbox-in { from { opacity: 0; } to { opacity: 1; } }
.kova-lightbox img {
  max-width: min(1100px, 100%); max-height: 88vh;
  border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.5);
  object-fit: contain;
}
.kova-lightbox-close {
  position: absolute; top: 20px; right: 20px;
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.1); color: #fff; font-size: 16px;
  transition: background .2s ease;
}
.kova-lightbox-close:hover { background: rgba(255,255,255,.2); }

/* ---- process-card icon: vendor default is red-orange (#EA2B16/#FF3B26),
   recolored to Kova brand orange (#FFA163). Applies to every process-card
   on the page (How it works + Six Dimensions share this vendor class). ---- */
.process-card .icon {
  background: linear-gradient(180deg, #E8823D 0%, #FFA163 100%);
  box-shadow: 0px 3.44px 5.57px 0px rgba(0,0,0,.0862745098),
    0px 22.91px 37.08px 0px rgba(255,161,99,.1647058824),
    0px 76px 123px 0px rgba(255,161,99,.0509803922),
    0px 5.05px 8.18px 0px rgba(255,161,99,.1019607843),
    0px 16.98px 27.47px 0px rgba(255,161,99,.0470588235),
    0px 56px 83px 0px rgba(255,161,99,.2509803922),
    0px 14px 34px 0px rgba(255,161,99,.2509803922),
    0px 1px 2px 0px rgba(255,161,99,.4),
    0px -3px 0px 0px rgba(0,0,0,.0588235294) inset,
    0px 1px 0px 0px rgba(255,255,255,.6) inset;
}

/* ---- statement band (between the chat section and the Kova Method) ----
   Deliberately a <p>, not an <h2>: at 45 words it would wreck the heading
   outline, and the real H2s on this page are the section titles. Styled at
   display scale so it reads as a statement, not body copy. */
.kova-statement { padding: 8px 0 72px; text-align: center; }
.kova-statement p {
  max-width: 940px; margin: 0 auto;
  font-family: "Inter", sans-serif; font-weight: 500;
  font-size: clamp(22px, 2.5vw, 32px); line-height: 1.38; letter-spacing: -0.015em;
  color: #09090B;
}
.kova-statement p .hl { color: #FFA163; }
@media (max-width: 767px) {
  .kova-statement { padding: 4px 0 48px; }
  .kova-statement p { font-size: 20px; line-height: 1.42; }
}

/* ---- testimonials ---- */
.kova-testimonial { height: 100%; padding: 32px 30px; border-radius: 20px; background: #fff;
  box-shadow: 0px 7.77px 16px rgba(0,0,0,.06), 0px 3px 3px rgba(0,0,0,.10), 0px -8px 0px rgba(0,0,0,.05) inset, 0px 4px 0px rgba(255,255,255,.6) inset; }
.kova-testimonial .quote-mark { font-family: "Inter", sans-serif; font-size: 40px; color: #FFA163; line-height: 1; display: block; margin-bottom: 8px; }
.kova-testimonial p.body { font-size: 16.5px; line-height: 1.6; color: #3F3F46; margin: 0 0 22px; font-style: italic; }
.kova-testimonial .author { display: flex; align-items: center; gap: 12px; }
.kova-testimonial .avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #FF9857, #FFB980);
  display: flex; align-items: center; justify-content: center;
  font-family: "Inter", sans-serif; font-weight: 600; color: #131311; font-size: 15px;
}
.kova-testimonial .meta strong { display: block; font-size: 14.5px; color: #09090B; }
.kova-testimonial .meta span { font-size: 13px; color: #A1A1AA; }

/* ---- FAQ accordion (homepage + pricing) ---- */
.kova-faq-list { max-width: 820px; margin: 0 auto; }
.kova-faq-row { border-bottom: 1px solid rgba(0,0,0,.08); }
.kova-faq-row:first-child { border-top: 1px solid rgba(0,0,0,.08); }
.kova-faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 22px 4px; background: none; border: 0; text-align: left; cursor: pointer;
  font-family: "Inter", sans-serif; font-size: 16.5px; font-weight: 600; color: #09090B;
}
.kova-faq-q .chev { transition: transform .25s ease; color: #A1A1AA; flex-shrink: 0; margin-left: 16px; }
.kova-faq-row.is-open .kova-faq-q .chev { transform: rotate(180deg); color: #FF6E1A; }
.kova-faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.kova-faq-row.is-open .kova-faq-a { max-height: 400px; }
.kova-faq-a p { margin: 0; padding: 0 4px 22px; font-size: 15.5px; line-height: 1.6; color: #52525B; }

/* ---- comparison table (product page) ---- */
.kova-swap { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 900px; margin: 0 auto; }
.kova-swap-col { padding: 30px 32px; border-radius: 18px; }
.kova-swap-col.is-today { background: #F7F7F6; border: 1px solid rgba(0,0,0,.06); }
.kova-swap-col.is-kova { background: rgba(255,161,99,.07); border: 1px solid rgba(255,161,99,.25); }
.kova-swap-col h4 { font-family: "Inter", sans-serif; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 18px; }
.kova-swap-col.is-today h4 { color: #A1A1AA; }
.kova-swap-col.is-kova h4 { color: #FF6E1A; }
.kova-swap-col ul { list-style: none; padding: 0; margin: 0; }
.kova-swap-col li { padding: 14px 0; border-top: 1px solid rgba(0,0,0,.07); font-size: 15px; color: #3F3F46; line-height: 1.5; }
.kova-swap-col li:first-child { border-top: 0; }
@media (max-width: 767px) { .kova-swap { grid-template-columns: 1fr; } }

/* ---- feature comparison table (pricing page) ---- */
.kova-compare-table { width: 100%; border-collapse: collapse; max-width: 900px; margin: 0 auto; background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0px 7.77px 16px rgba(0,0,0,.06), 0px 3px 3px rgba(0,0,0,.10); }
.kova-compare-table th, .kova-compare-table td { padding: 16px 20px; text-align: left; font-size: 14.5px; border-bottom: 1px solid rgba(0,0,0,.06); }
.kova-compare-table thead th { font-family: "Inter", sans-serif; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #71717A; background: #F7F7F6; }
.kova-compare-table td:first-child, .kova-compare-table th:first-child { font-weight: 600; color: #09090B; }
.kova-compare-table td:not(:first-child), .kova-compare-table th:not(:first-child) { color: #52525B; text-align: center; }
.kova-compare-table tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 767px) { .kova-compare-table { font-size: 13px; } .kova-compare-table th, .kova-compare-table td { padding: 12px 10px; } }

/* ---- assessment-style right-rail card, reused for contact page ---- */
.kova-contact-direct { text-align: center; margin-top: -6px; margin-bottom: 32px; }
.kova-contact-direct a { color: #FF6E1A; font-weight: 600; font-size: 16px; }

/* ============================================================
   v9 sections: solid section headers + Kova Path strip
   (no gradient-clip text; pills tinted so they read on white)
   ============================================================ */
.kova-sec-title {
  font-family: "Inter", sans-serif; font-weight: 600;
  font-size: clamp(26px, 4vw, 38px); line-height: 1.15;
  letter-spacing: -.01em; color: #09090B; margin: 12px 0 0;
}
.kova-sec-lead { max-width: 640px; margin: 16px auto 0; color: #71717A; font-size: 16px; line-height: 1.6; }
.kova-path-strip { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.kova-path-strip span {
  padding: 9px 18px; border-radius: 999px;
  background: rgba(255,161,99,.14); border: 1px solid rgba(255,161,99,.35);
  font-size: 14.5px; font-weight: 600; color: #131311;
}
.kova-path-strip span:last-child { background: #FFA163; border-color: #FFA163; }
.kova-path-note { max-width: 600px; margin: 14px auto 0; font-size: 15px; color: #71717A; }

/* left-aligned lead under a heading-section (template rhythm) */
.kova-lead-left { max-width: 720px; margin: -40px 0 48px; color: #71717A; font-size: 16.5px; line-height: 1.6; }
@media (max-width: 767px) { .kova-lead-left { margin-top: -24px; } }

/* ============================================================
   Promises page (v2) — nine promises, three groups
   The old design was a flat stack of 15 identical left-bordered
   blocks: nothing signalled that some promises matter more than
   others, and the numbering ran 1-15 across four different headers
   so the count read as a checklist rather than a commitment.
   ============================================================ */
.section-promises { padding-top: 0; }
.section-promises .container { max-width: 940px; }
/* Hero shares the content column. Same trap as the legal pages:
   .kova-page-head is a 720px box with no auto-margin, so it sat at the
   page container's edge (left 28) while the promises column centered
   at 182 - a 154px step between the H1 and everything under it. */
.kova-page-hero.is-promises .container { max-width: 940px; }
.kova-page-hero.is-promises .kova-page-head { max-width: 100%; }

/* Group header: oversized ghost numeral + rule, so the three groups
   read as chapters rather than more list items. */
.kova-promise-group { margin-bottom: 72px; }
.kova-promise-group-head {
  display: flex; align-items: baseline; gap: 16px;
  padding-bottom: 18px; margin-bottom: 28px;
  border-bottom: 1px solid rgba(0,0,0,.1);
}
.kova-promise-group-n {
  font-family: "Inter", sans-serif; font-size: 15px; font-weight: 600;
  letter-spacing: .12em; color: #FFA163; flex-shrink: 0;
}
.kova-promise-group-head h2 {
  font-family: "Inter", sans-serif; font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 600; letter-spacing: -.015em; color: #09090B; margin: 0;
}

/* Cards: the template's raised-white surface (same language as
   .kova-card etc.) rather than the old flat left-border blocks. */
.kova-promise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.kova-promise {
  position: relative; padding: 28px 24px 26px; border-radius: 16px; background: #fff;
  box-shadow:
    0px 7.77px 16px 0px rgba(0,0,0,.0588),
    0px 3px 3px 0px rgba(0,0,0,.102),
    0px -8px 0px 0px rgba(0,0,0,.051) inset,
    0px 4px 0px 0px rgba(255,255,255,.6) inset;
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1);
}
.kova-promise:hover {
  transform: translateY(-4px);
  box-shadow:
    0px 18px 40px 0px rgba(0,0,0,.10),
    0px 3px 3px 0px rgba(0,0,0,.10),
    0px -8px 0px 0px rgba(0,0,0,.051) inset,
    0px 4px 0px 0px rgba(255,255,255,.6) inset;
}
.kova-promise-n {
  display: block; font-family: "Inter", sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: .14em; color: #FFA163; margin-bottom: 14px;
}
.kova-promise h3 {
  font-family: "Inter", sans-serif; font-size: 17.5px; font-weight: 600;
  line-height: 1.3; letter-spacing: -.01em; color: #09090B; margin: 0 0 10px;
}
.kova-promise p { margin: 0; font-size: 15px; line-height: 1.6; color: #52525B; }

/* "What we haven't done yet" — deliberately NOT a white card. It is
   the one section that is not a promise, so it gets the inverted
   charcoal surface to sit apart from the nine above it. */
.kova-honest {
  padding: 40px 40px 42px; border-radius: 20px; background: #131311;
  margin: 8px 0 72px;
  box-shadow:
    0px -10px 0px 0px rgba(0,0,0,.6) inset,
    0px 2px 0px 0px rgba(255,255,255,.14) inset,
    0px 12.52px 10.02px 0px rgba(0,0,0,.14);
}
.kova-honest-label {
  display: inline-block; font-family: "Inter", sans-serif; font-size: 12.5px;
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: #FFA163; margin-bottom: 16px;
}
.kova-honest-lead {
  font-family: "Inter", sans-serif; font-size: 20px; font-weight: 600;
  color: #FAFAFA; margin: 0 0 12px; letter-spacing: -.01em;
}
.kova-honest p:last-child { margin: 0; font-size: 15.5px; line-height: 1.7; color: rgba(255,255,255,.62); }

.kova-promise-faq { margin-bottom: 64px; }
.kova-promise-faq .kova-sec-title { text-align: center; margin-bottom: 28px; }

@media (max-width: 991px) {
  .kova-promise-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .kova-promise-grid { grid-template-columns: 1fr; }
  .kova-promise-group { margin-bottom: 52px; }
  .kova-honest { padding: 30px 24px 32px; }
  .kova-honest-lead { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .kova-promise { transition: none; }
  .kova-promise:hover { transform: none; }
}

/* ---- contact page: quick links under the left column ----
   The vendor's contact layout puts a .tf-social-1 row here. Kova has no
   public social accounts yet, so rather than ship dead icons the slot
   carries real next-steps instead. Swap back to .tf-social-1 when the
   accounts exist. */
.kova-contact-links { display: flex; flex-wrap: wrap; gap: 10px; }
.kova-contact-links a {
  padding: 10px 20px; border-radius: 999px; font-size: 14.5px; font-weight: 600;
  background: #fff; color: #09090B; text-decoration: none;
  box-shadow: 0px 3px 3px rgba(0,0,0,.06), 0px -4px 0px rgba(0,0,0,.04) inset,
              0px 2px 0px rgba(255,255,255,.6) inset;
  transition: color .25s ease, transform .25s cubic-bezier(.16,1,.3,1);
}
.kova-contact-links a:hover { color: #FF6E1A; transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .kova-contact-links a { transition: none; } }

/* ---- mobile horizontal-scroll fix ----
   .swiper-box-shadow uses padding:20px; margin:-20px so card shadows can
   escape the swiper's overflow:hidden. At mobile widths the column's side
   padding is only 12px, so the -20px margin pushes the box 8px past the
   viewport (measured: swiper right edge 398 on a 390 screen) and the whole
   page pans sideways. overflow-x:clip on html kills the scroll without
   creating a new scroll container the way overflow-x:hidden on body can. */
html { overflow-x: clip; }

/* ---- skip link (a11y) ----
   Off-screen until focused, then pinned top-left. Keyboard users
   otherwise have to tab the whole nav on every page to reach content. */
.kova-skip {
  position: absolute; left: -9999px; top: 0; z-index: 9999;
  padding: 12px 20px; border-radius: 0 0 12px 0;
  background: #131311; color: #FFA163; font-weight: 600; text-decoration: none;
  /* The template sets `transition: all .3s` on links, which made this
     visibly slide ~9999px across the viewport on focus. Off-screen
     positioning must be instant. */
  transition: none;
}
.kova-skip:focus { left: 0; }
#wrapper:focus { outline: none; }

/* ============================================================
   Interior page hero band (audit #1)
   The template gives every interior page a full-bleed rounded image
   behind the title (.section-hero.v1 > .hero-image). Our 14 interior
   pages shipped as bare text on flat grey, which is the single biggest
   reason they don't feel like the template.
   Opt-in via .has-hero-image so any page can stay text-only.
   ============================================================ */
.kova-page-hero.has-hero-image { position: relative; }
.kova-page-hero.has-hero-image .kova-hero-band {
  position: absolute; inset: 16px 16px 0 16px;
  border-radius: 40px; overflow: hidden;
  background: #131311;
}
.kova-page-hero.has-hero-image .kova-hero-band img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Scrim keeps the title legible whatever the photo does. Bottom is
   heavier because the lead paragraph sits low in the band. */
.kova-page-hero.has-hero-image .kova-hero-band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(19,19,17,.55) 0%, rgba(19,19,17,.42) 40%, rgba(19,19,17,.78) 100%);
}
.kova-page-hero.has-hero-image .container { position: relative; z-index: 2; }
/* Text inverts on the dark band. */
.kova-page-hero.has-hero-image .kova-page-title { color: #FAFAFA; }
.kova-page-hero.has-hero-image .kova-page-lead { color: rgba(255,255,255,.72); }
.kova-page-hero.has-hero-image .heading-sub { color: #FFA163; }
.kova-page-hero.has-hero-image .kova-legal-badge {
  background: rgba(255,161,99,.16); color: #FFC08A;
}
.kova-page-hero.has-hero-image .kova-legal-meta { color: rgba(255,255,255,.6); }
.kova-page-hero.has-hero-image .kova-legal-meta span { background: rgba(255,255,255,.08); }
/* Breathing room so the band isn't cropped tight to the text. */
.kova-page-hero.has-hero-image { padding-top: 190px; padding-bottom: 104px; }
@media (max-width: 767px) {
  .kova-page-hero.has-hero-image { padding-top: 132px; padding-bottom: 64px; }
  .kova-page-hero.has-hero-image .kova-hero-band { inset: 8px 8px 0 8px; border-radius: 24px; }
}

/* ---- Radar: six dimensions on the template's "All Features in One" ---- */
/* Vendor .section-features (3 + centre + 3, with the animated bracket lines)
   was unused on this site. Only the centre tile needed real work: it ships a
   hardcoded #EA2B16 -> #FF3B26 red with a matching red glow stack, none of
   which reads from a var. Rebuilt in Kova orange. --brand is already #FFA163,
   so the electric pulse on .side-line-main is on-brand with no override. */
.kova-dimensions .features-center {
  background:
    linear-gradient(180deg, #F58A3C 0%, #FFA163 100%),
    radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 100%);
  box-shadow:
    0px -3px 0px 0px rgba(0,0,0,.06) inset,
    0px 1px 0px 0px rgba(255,255,255,.6) inset,
    0px 3.44px 5.57px 0px rgba(0,0,0,.09),
    0px 22.91px 37.08px 0px rgba(255,140,60,.17),
    0px 56px 83px 0px rgba(255,140,60,.25),
    0px 14px 34px 0px rgba(255,140,60,.25),
    0px 1px 2px 0px rgba(255,140,60,.4);
}
/* Template markup uses <h6> for the item title. Swapped to <h3> so the page
   keeps a clean h1 > h2 > h3 outline after the a11y pass; the size the
   template intended is restored here rather than inherited from h3. */
.kova-dimensions .features-item .title {
  font-family: "Inter", sans-serif;
  font-size: 20px; line-height: 1.3; color: #09090B; margin-bottom: 8px;
}
.kova-dimensions .features-item p { margin: 0; font-size: 15px; line-height: 1.5; color: #52525B; }
@media (max-width: 991px) {
  .kova-dimensions .features-item .title { font-size: 18px; }
}
/* The features grid deliberately breaks out to the full 1320px container -
   it is the widest moment on the page. The heading above it should not:
   held at 860px so it lines up with every other section title on radar.html. */
.kova-dimensions > .container > .text-center { max-width: 860px; margin-left: auto; margin-right: auto; }

/* The bracket lines assume the template's .box-white panel: their inner fill
   is hardcoded to --neutral-50 (#FAFAFA), which matches that panel exactly so
   only the #D4D4D8 outline shows. On radar.html the section sits on the page
   body (--body #EDECEC), so that fill rendered as two solid white slabs.
   Retinted to the surface it actually sits on. */
.kova-dimensions .side-line-main .link-break-line::after { background: var(--body); }

/* ---- Radar brackets: pulse inward, synchronised, and actually visible ---- */
/* All six pulses are now the IDENTICAL object: a 3px x 76px glowing bar with
   its bright head at the leading edge. Two structural fixes over the previous
   attempt:

   1) VISIBILITY. The bracket's ::after fill paints on top of its siblings
      (pseudo-elements paint last at the same stacking level), so the vendor's
      vertical pulses only ever showed through the ~1px border sliver - that,
      not gradient falloff, is why Your Game / Recovery looked far brighter.
      The vertical bars now sit at the bracket's centre-facing edge with
      z-index: 1, riding ON the border line instead of under the fill.

   2) ARRIVAL. A bar's animated property (left/top) trails its bright head by
      the bar's own 76px length, so the horizontal pulses visually reached the
      centre early. Every end position is now calc(50% - 76px): the HEAD lands
      at exactly 50% on every axis, on the same keyframe.

   All four keyframe sets share identical percentages, one duration, zero
   delay, linear easing - simultaneous departure and arrival by construction;
   pulses with less distance simply move slower.

   Rotation note: .link-break-line.right is rotated 180deg, so the same
   .top/.bottom keyframes and gradients mirror automatically - unchanged from
   the vendor's own approach. */
.kova-dimensions { --kova-pulse: hsl(24 95% 52%); }

.kova-dimensions .side-line-main .simu-electric,
.kova-dimensions .side-line-main .link-break-line .item {
  animation-duration: 2.2s;
  animation-delay: 0s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: normal;
  border-radius: 3px;
  filter: drop-shadow(0 0 4px rgba(249, 109, 16, .85)) drop-shadow(0 0 10px rgba(249, 109, 16, .45));
}

/* Horizontal pair (Your Game / Recovery) - a bar on the centre line. */
.kova-dimensions .side-line-main .simu-electric { height: 3px; width: 76px; }
.kova-dimensions .side-line-main .simu-electric.left {
  background: linear-gradient(to left, var(--kova-pulse) 0%, transparent 100%);
  animation-name: kovaPulseInLeft;
}
.kova-dimensions .side-line-main .simu-electric.right {
  background: linear-gradient(to right, var(--kova-pulse) 0%, transparent 100%);
  animation-name: kovaPulseInRight;
}

/* Vertical quads (the four bracket runs) - the same bar, riding the bracket's
   centre-facing border line, above the ::after fill. Overrides the vendor's
   full-width radial blob (left:0; right:0; width:100%).
   The bracket's overflow:hidden clips the outward half of the drop-shadow
   glow, so the bars carry one extra glow layer the open-air horizontal pair
   doesn't need - equal PERCEIVED intensity, not equal declarations. */
.kova-dimensions .side-line-main .link-break-line .item {
  left: auto;
  right: 0;
  margin-right: 0;
  width: 3px;
  height: 76px;
  z-index: 1;
  filter: drop-shadow(0 0 4px rgba(249, 109, 16, .85)) drop-shadow(0 0 4px rgba(249, 109, 16, .7)) drop-shadow(0 0 10px rgba(249, 109, 16, .45));
}
.kova-dimensions .side-line-main .link-break-line .item.top {
  background: linear-gradient(to bottom, transparent 0%, var(--kova-pulse) 100%);
  animation-name: kovaPulseInTop;
}
.kova-dimensions .side-line-main .link-break-line .item.bottom {
  background: linear-gradient(to top, transparent 0%, var(--kova-pulse) 100%);
  animation-name: kovaPulseInBottom;
}

/* One shared timeline: enter 0-6, travel to 62, arrive bright, quick fade,
   rest to 100. Horizontal pulses stop with the HEAD at the tile edge -
   .features-center is 208px wide, so the edge sits at 50% - 104px and the
   bar's position trails its head by 76px: calc(50% - 180px). The verticals'
   50% is the bracket midpoint - the visible junction with the centre line -
   so nothing disappears behind the tile; every arrival happens in the open,
   all on the same 62% keyframe. */
@keyframes kovaPulseInLeft {
  0%   { left: -90px; opacity: 0; }
  6%   { opacity: 1; }
  62%  { left: calc(50% - 180px); opacity: 1; }
  70%  { left: calc(50% - 180px); opacity: 0; }
  100% { left: calc(50% - 180px); opacity: 0; }
}
@keyframes kovaPulseInRight {
  0%   { right: -90px; opacity: 0; }
  6%   { opacity: 1; }
  62%  { right: calc(50% - 180px); opacity: 1; }
  70%  { right: calc(50% - 180px); opacity: 0; }
  100% { right: calc(50% - 180px); opacity: 0; }
}
@keyframes kovaPulseInTop {
  0%   { top: -90px; opacity: 0; }
  6%   { opacity: 1; }
  62%  { top: calc(50% - 76px); opacity: 1; }
  70%  { top: calc(50% - 76px); opacity: 0; }
  100% { top: calc(50% - 76px); opacity: 0; }
}
@keyframes kovaPulseInBottom {
  0%   { bottom: -90px; opacity: 0; }
  6%   { opacity: 1; }
  62%  { bottom: calc(50% - 76px); opacity: 1; }
  70%  { bottom: calc(50% - 76px); opacity: 0; }
  100% { bottom: calc(50% - 76px); opacity: 0; }
}

/* The centre hub dots light up in the same orange - they are the arrival point. */
.kova-dimensions .side-line-main .link-break-center::before,
.kova-dimensions .side-line-main .link-break-center::after {
  background: var(--kova-pulse);
  box-shadow: 0 0 8px rgba(249, 109, 16, .55);
}
@media (prefers-reduced-motion: reduce) {
  .kova-dimensions .side-line-main .link-break-line .item,
  .kova-dimensions .side-line-main .simu-electric { animation: none; opacity: 0; }
}

/* Pricing footnote: the per-academy framing and the platform fee, stated
   up front rather than discovered at checkout. */
.kova-price-note {
  max-width: 720px; margin: 34px auto 0; text-align: center;
  font-size: 14.5px; line-height: 1.65; color: #71717A;
}
.kova-price-switch { margin-top: 18px; }
.kova-price-switch label {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font-size: 15px; font-weight: 600; color: #3F3F46;
}
.kova-price-switch em { font-style: normal; color: #FF6E1A; }
/* Three-up pricing: the template's .heading lays the price and CTA on one
   row, which fits at two columns but collides at three once the annual
   figures ($2,490) widen. Stack them in this layout. */
.section-pricing .pricing-item .heading {
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
}
.section-pricing .pricing-item .heading .tf-btn { width: 100%; justify-content: center; }