/* Kewl Method button standard. Added to every page at build by buttons.py.
   Primary: mono outline pill. On dark: oat outline. Image: prices and free things.
   Secondary: underlined text link. Labels end with an arrow (added at build). */
:root{--kb-ink:#111b1b;--kb-oat:#f5f2e9;--kb-ease:cubic-bezier(.23,1,.32,1)}

.km-btn,.hero-cta,.sv-btn,.bb-btn,.bb-btn-line,.hd-btn,.hd-btn-line,.wg-btn,.cp-btn-ghost,
.btn--ink,.fc-btn,.q-btn,.pill,.km-cta-btn,
.km-btn--dark,.bb-btn-light,.bb-btn-ghost-l,.hd-btn-ghost,.hd-btn-light,.wg-btn-light,.fc-btn-1,
.km-btn--image,.sv-btn-1,.sv-btn-light{
  display:inline-flex!important;align-items:center;justify-content:center;gap:.5em;
  font-family:"Roboto Mono",ui-monospace,monospace!important;font-size:14px!important;
  font-weight:500!important;letter-spacing:.08em!important;text-transform:none!important;
  line-height:1.2!important;padding:16px 28px!important;min-height:50px;height:auto!important;
  border-radius:999px!important;border:1px solid var(--kb-ink)!important;
  background:transparent!important;color:var(--kb-ink)!important;text-decoration:none!important;
  white-space:nowrap;cursor:pointer;
  transition:background-color .3s var(--kb-ease),color .3s var(--kb-ease),border-color .3s var(--kb-ease),transform .16s var(--kb-ease)!important}
.km-btn:hover,.hero-cta:hover,.sv-btn:hover,.bb-btn:hover,.bb-btn-line:hover,.hd-btn:hover,.hd-btn-line:hover,
.wg-btn:hover,.cp-btn-ghost:hover,.btn--ink:hover,.fc-btn:hover,.q-btn:hover,.pill:hover,.km-cta-btn:hover{
  background:var(--kb-ink)!important;color:var(--kb-oat)!important}

/* on dark backgrounds */
.km-btn--dark,.bb-btn-light,.bb-btn-ghost-l,.hd-btn-ghost,.hd-btn-light,.wg-btn-light,.fc-btn-1,.hero-cta{
  border-color:var(--kb-oat)!important;color:var(--kb-oat)!important}
.km-btn--dark:hover,.bb-btn-light:hover,.bb-btn-ghost-l:hover,.hd-btn-ghost:hover,.hd-btn-light:hover,
.wg-btn-light:hover,.fc-btn-1:hover,.hero-cta:hover{background:var(--kb-oat)!important;color:var(--kb-ink)!important}
/* hd-btn-light / hero-cta sit on light sections on some pages */
.hd-btn-light[data-on="light"],.km-on-light .hero-cta{border-color:var(--kb-ink)!important;color:var(--kb-ink)!important}

/* image button: prices and free things (the Services page style) */
.km-btn--image,.sv-btn-1,.sv-btn-light{
  border-color:var(--kb-ink)!important;color:var(--kb-oat)!important;
  background:linear-gradient(#111b1b,#111b1b),url('/images/roberta-sant-anna-mkSLfe1EvbA.webp') 0 0/cover no-repeat!important;
  transition:background-position .4s var(--kb-ease),transform .16s var(--kb-ease)!important}
.km-btn--image:hover,.sv-btn-1:hover,.sv-btn-light:hover{
  background:linear-gradient(#111b1b4d,#111b1b4d),url('/images/roberta-sant-anna-mkSLfe1EvbA.webp') 0 -114px/cover no-repeat!important;
  color:var(--kb-oat)!important}

.km-btn:active,.hero-cta:active,.sv-btn:active,.bb-btn:active,.hd-btn:active,.wg-btn:active,.q-btn:active,
.km-cta-btn:active,.sv-btn-1:active,.sv-btn-light:active,.fc-btn:active,.btn--ink:active{transform:scale(.97)}

/* secondary: underlined text link */
.km-link,.sv-textlink{font-family:"Roboto Mono",ui-monospace,monospace;font-size:14px;letter-spacing:.04em;
  color:inherit;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.km-link:hover,.sv-textlink:hover{text-decoration-thickness:2px}

.km-arrow{display:inline-block;transition:transform .3s var(--kb-ease)}
a:hover>.km-arrow,button:hover>.km-arrow{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.km-arrow{transition:none}}

/* the arrow comes from buttons.py; drop older CSS arrows */
.hero-cta::after,.sv-btn::after,.sv-btn-1::after,.sv-btn-light::after,.bb-btn::after,.bb-btn-line::after,.bb-btn-light::after,
.bb-btn-ghost-l::after,.hd-btn::after,.hd-btn-line::after,.hd-btn-ghost::after,.hd-btn-light::after,.wg-btn::after,
.fc-btn::after,.fc-btn-1::after,.q-btn::after,.pill::after,.km-cta-btn::after,.sv-textlink::after{content:none!important}

/* hover: the home hero interaction. Sage fill rises from below, label turns ink. */
.km-btn,.sv-btn,.bb-btn,.bb-btn-line,.hd-btn,.hd-btn-line,.wg-btn,.cp-btn-ghost,.btn--ink,.fc-btn,.q-btn,.pill,.km-cta-btn,
.km-btn--dark,.bb-btn-light,.bb-btn-ghost-l,.hd-btn-ghost,.hd-btn-light,.wg-btn-light,.fc-btn-1{position:relative;overflow:hidden;isolation:isolate}
.km-btn::before,.sv-btn::before,.bb-btn::before,.bb-btn-line::before,.hd-btn::before,.hd-btn-line::before,.wg-btn::before,
.cp-btn-ghost::before,.btn--ink::before,.fc-btn::before,.q-btn::before,.pill::before,.km-cta-btn::before,
.km-btn--dark::before,.bb-btn-light::before,.bb-btn-ghost-l::before,.hd-btn-ghost::before,.hd-btn-light::before,.wg-btn-light::before,.fc-btn-1::before{
  content:"";position:absolute;inset:0;z-index:-1;background:#a8b096;border-radius:18%;transform:translateY(101%);
  transition:transform .45s cubic-bezier(.23,1,.32,1)}
.km-btn:hover::before,.sv-btn:hover::before,.bb-btn:hover::before,.bb-btn-line:hover::before,.hd-btn:hover::before,
.hd-btn-line:hover::before,.wg-btn:hover::before,.cp-btn-ghost:hover::before,.btn--ink:hover::before,.fc-btn:hover::before,.q-btn:hover::before,
.pill:hover::before,.km-cta-btn:hover::before,.km-btn--dark:hover::before,.bb-btn-light:hover::before,.bb-btn-ghost-l:hover::before,
.hd-btn-ghost:hover::before,.hd-btn-light:hover::before,.wg-btn-light:hover::before,.fc-btn-1:hover::before{transform:translateY(0)}
.km-btn:hover,.sv-btn:hover,.bb-btn:hover,.bb-btn-line:hover,.hd-btn:hover,.hd-btn-line:hover,.wg-btn:hover,.cp-btn-ghost:hover,
.btn--ink:hover,.fc-btn:hover,.q-btn:hover,.pill:hover,.km-cta-btn:hover,.km-btn--dark:hover,.bb-btn-light:hover,.bb-btn-ghost-l:hover,
.hd-btn-ghost:hover,.hd-btn-light:hover,.wg-btn-light:hover,.fc-btn-1:hover{background:transparent!important;color:#111b1b!important}
@media (prefers-reduced-motion:reduce){.km-btn::before,.hero-cta::before,.bb-btn::before,.hd-btn::before,.wg-btn::before,.q-btn::before{transition:none}}

.hero-cta .cta-fill{transition:transform .45s cubic-bezier(.23,1,.32,1)}

/* light backgrounds: dark version of the hero interaction. Ink fill rises, label turns oat. */
.km-light{border-color:#111b1b!important;color:#111b1b!important}
.km-light::before{background:#111b1b!important}
.km-light:hover{color:#f5f2e9!important}
.hero-cta.km-light .cta-fill{background:#111b1b}
.hero-cta.km-light .cta-label,.hero-cta.km-light .cta-label *{color:#111b1b;transition:color .45s cubic-bezier(.23,1,.32,1)}
.hero-cta.km-light:hover .cta-label,.hero-cta.km-light:hover .cta-label *{color:#f5f2e9}

/* solid oat hero button (Insights "See Host Direct"): keep its oat fill and ink label */
.hero-cta.main_btn{background:#f5f2e9!important;border-color:#f5f2e9!important}
.hero-cta.main_btn .cta-label,.hero-cta.main_btn .cta-label *,.hero-cta.main_btn .km-arrow{color:#111b1b!important}