/* ============================================================
   KUSTOM KO — theme layer (site pages)  v30
   Loaded LAST. Presentation only. No layout logic, IDs, handlers
   or calculations are touched. Remove the data-kk-future tags to
   restore the original page exactly.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap");

:root{
  --kkf-marine:#0b241d;--kkf-marine-2:#123a2e;
  --kkf-mint:#04734f;--kkf-mint-deep:#05845e;--kkf-sky:#37b98c;--kkf-sky-deep:#067a58;
  --kkf-paper:#ffffff;--kkf-ink:#0f2a22;
  --kkf-glass:rgba(255,255,255,.95);--kkf-glass-line:rgba(15,42,34,.12);
  --kkf-display:"Space Grotesk",Inter,system-ui,sans-serif;
  --kkf-body:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --kk-shadow:0 20px 56px rgba(7,32,31,.10);
}
html{background:var(--kkf-paper)}
body{font-family:var(--kkf-body)!important;background:transparent!important;-webkit-font-smoothing:antialiased}
.kk-page{background:transparent!important}

/* Ambient drafting-sheet backdrop (canvas injected by JS, sits behind everything) */
.kkf-backdrop{position:fixed;inset:0;z-index:0;pointer-events:none;
  /* Plain white. Nothing is drawn behind the page any more: no canvas, no
     green and blue glow, and no off-white paper tint. */
  background:#fff}
.kkf-backdrop canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
body>*{position:relative;z-index:1}
body>.kkf-backdrop{z-index:0}

/* Typography: one display face for headlines and prices, Inter for everything else */
h1,h2,h3,.kk-title,.hero h1,.section-head h2,.story h2,.cta h2,.fit-copy h2,.kk-price,.price-choice h3{font-family:var(--kkf-display)!important;letter-spacing:-.03em}
h1,.kk-title,.hero h1{font-weight:700!important;line-height:1}

/* Header: marine control bar */
.kk-header,header.kk-header{background:rgba(255,255,255,.96)!important;backdrop-filter:blur(14px)!important;border-bottom:1px solid #e2ece8!important;box-shadow:none!important;color:#0f2a22!important}
.kk-header .kk-brand,.kk-header .kk-brand-copy strong{color:#0f2a22!important}
.kk-header .kk-brand-copy small{color:#5f736b!important}
.kk-header .kk-logo-wrap{background:#fff!important;border:1px solid #e2ece8!important;box-shadow:none!important}
.kk-header .kk-link,.kk-header .kk-dropbtn{color:#3f5a51!important;font-weight:600!important}
.kk-header .kk-link:hover,.kk-header .kk-dropbtn:hover,.kk-header .kk-dropdown.open>.kk-dropbtn{color:#fff!important}
.kk-header .kk-link:after,.kk-header .kk-dropbtn:after{background:linear-gradient(90deg,var(--kkf-mint),var(--kkf-sky))!important}
.kk-header .kk-btn{background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.18)!important;color:#eaf5f1!important;box-shadow:none!important}
.kk-header .kk-btn:hover{background:rgba(255,255,255,.12)!important;border-color:rgba(59,212,155,.5)!important}
.kk-header .kk-btn.primary{background:linear-gradient(110deg,var(--kkf-mint),var(--kkf-sky))!important;border-color:transparent!important;color:#fff!important;font-weight:800!important}
.kk-header .kk-mobile-toggle{background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.18)!important;color:#eaf5f1!important}
.kk-header .kk-menu{background:#0a2a2a!important;border:1px solid rgba(59,212,155,.22)!important;box-shadow:0 30px 70px rgba(0,0,0,.45)!important}
.kk-header .kk-menu a,.kk-header .kk-menu b{color:#eaf5f1!important}
.kk-header .kk-menu small{color:rgba(217,240,231,.62)!important}
.kk-header .kk-menu a:hover{background:rgba(255,255,255,.07)!important}
.kk-header .kk-mobile-panel{background:#0a2a2a!important;border-top:1px solid rgba(59,212,155,.2)!important}
.kk-header .kk-mobile-panel a{color:#eaf5f1!important}
.kk-header .kk-mobile-panel a:hover{background:rgba(255,255,255,.07)!important}
/* Measured on the live page: the panel behind these headings is
   rgb(255,255,255) and this colour composites to rgb(234,247,242) on it -
   a contrast ratio of 1.10:1, which is why the reporter saw no "Products"
   or "Pricing" headings at all. The light tint belongs to a dark header
   surface; this panel is white, so the heading takes a colour that works
   on white: 6.08:1, still clearly secondary to the 12.16:1 menu items. */
.kk-header .kk-mobile-panel .section{color:#55665f!important}
.kk-product-tabs{background:rgba(255,255,255,.6)!important;border-bottom:1px solid var(--kkf-glass-line)!important}

/* Hero band on the home and product pages: the one bold move on the page */
section.hero:has(.hero-visual,.hero-stage){position:relative;isolation:isolate;overflow:hidden;background:#fff!important;border-bottom:1px solid #e2ece8!important}
section.hero:has(.hero-visual,.hero-stage):before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;pointer-events:none;background-image:none;-webkit-mask-image:radial-gradient(70% 80% at 40% 30%,#000 30%,transparent 80%);mask-image:radial-gradient(70% 80% at 40% 30%,#000 30%,transparent 80%)}
section.hero:has(.hero-visual,.hero-stage):after{content:"";position:absolute;z-index:-1;inset:-30% -20% auto;height:80%;pointer-events:none;background:none;filter:none}
/* Copy column becomes light; mock windows and floating cards keep their own ink */
section.hero:has(.hero-visual,.hero-stage) .hero-grid>.reveal:first-child,section.hero:has(.hero-visual,.hero-stage) .hero-copy{color:#0f2a22}
section.hero:has(.hero-visual,.hero-stage) .hero-grid>.reveal:first-child h1,section.hero:has(.hero-visual,.hero-stage) .hero-copy h1{color:#0f2a22!important}
section.hero:has(.hero-visual,.hero-stage) .hero-grid>.reveal:first-child h1 span,section.hero:has(.hero-visual,.hero-stage) .hero-copy h1 span{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;-webkit-text-fill-color:currentColor!important;color:var(--kk-accent,#05845e)!important}
section.hero:has(.hero-visual,.hero-stage) .hero-grid>.reveal:first-child p,section.hero:has(.hero-visual,.hero-stage) .hero-copy p,section.hero:has(.hero-visual,.hero-stage) .lead{color:#3f5a51!important}
section.hero:has(.hero-visual,.hero-stage) .hero-grid>.reveal:first-child p b,section.hero:has(.hero-visual,.hero-stage) .hero-copy p b{color:#0f2a22}
section.hero:has(.hero-visual,.hero-stage) .eyebrow,section.hero:has(.hero-visual,.hero-stage) .hero-badge{color:var(--kkf-mint)!important}
section.hero:has(.hero-visual,.hero-stage) .eyebrow:before{background:linear-gradient(90deg,var(--kkf-mint),var(--kkf-sky))!important}
section.hero:has(.hero-visual,.hero-stage) .hero-badge{background:rgba(59,212,155,.1)!important;border-color:rgba(59,212,155,.35)!important}
section.hero:has(.hero-visual,.hero-stage) .microproof span,section.hero:has(.hero-visual,.hero-stage) .micro span{color:#3f5a51!important;border-color:rgba(255,255,255,.16)!important;background:rgba(255,255,255,.04)!important}
section.hero:has(.hero-visual,.hero-stage) .micro span i{background:var(--kkf-mint)!important}
section.hero:has(.hero-visual,.hero-stage) .btn.dark,section.hero:has(.hero-visual,.hero-stage) .btn.primary,section.hero:has(.hero-visual,.hero-stage) .btn.green,section.hero:has(.hero-visual,.hero-stage) .btn.blue{background:linear-gradient(110deg,var(--kkf-mint),var(--kkf-sky))!important;border-color:transparent!important;color:#fff!important;box-shadow:0 12px 30px rgba(59,212,155,.28)!important}
section.hero:has(.hero-visual,.hero-stage) .btn:not(.dark):not(.primary):not(.green):not(.blue){background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.2)!important;color:#fff!important}
section.hero:has(.hero-visual,.hero-stage) .btn:not(.dark):not(.primary):not(.green):not(.blue):hover{background:rgba(255,255,255,.12)!important}
section.hero:has(.hero-visual,.hero-stage) .hero-visual,section.hero:has(.hero-visual,.hero-stage) .hero-stage,section.hero:has(.hero-visual,.hero-stage) .app-shell,section.hero:has(.hero-visual,.hero-stage) .runway-window,section.hero:has(.hero-visual,.hero-stage) .float-card,section.hero:has(.hero-visual,.hero-stage) .hero-panel{color:var(--kkf-ink)}
section.hero:has(.hero-visual,.hero-stage) .hero-visual{box-shadow:none!important}
section.hero:has(.hero-visual,.hero-stage) .app-shell,section.hero:has(.hero-visual,.hero-stage) .runway-window{box-shadow:0 0 0 1px rgba(16,52,42,.06),0 30px 70px rgba(16,52,42,.13)!important}
section.hero:has(.hero-visual,.hero-stage) .float-card{box-shadow:0 20px 50px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.1)!important}

/* Glass surfaces (assigned at runtime by computed style on light, rounded, bordered panels) */
.kkf-glass{background:var(--kkf-glass)!important;border-color:var(--kkf-glass-line)!important;backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 16px 44px rgba(7,32,31,.07)!important;transition:box-shadow .3s,border-color .3s}
.kkf-glass.kkf-hover{border-color:rgba(14,60,52,.26)!important;box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 22px 56px rgba(7,32,31,.12)!important}
.kkf-section-clear{background:transparent!important}

/* Buttons: one gradient family, no motion */
.kk-btn,.btn,.kk-mini-action{font-family:var(--kkf-body);transition:box-shadow .2s,border-color .2s,background .2s}
.kk-btn:not(.primary):hover,.btn:not(.dark):not(.primary):not(.green):not(.blue):hover,.kk-mini-action:hover{border-color:rgba(21,138,98,.6);box-shadow:0 0 0 3px rgba(59,212,155,.12)}
.kk-btn.primary,.btn.primary,.btn.green,.btn.dark,.register{background:linear-gradient(110deg,var(--kkf-mint-deep),var(--kkf-sky-deep))!important;color:#fff!important;border-color:transparent!important;box-shadow:0 10px 26px rgba(21,138,98,.22)!important}
.btn.blue{background:linear-gradient(110deg,var(--kkf-sky-deep),#50e4b8)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 10px 26px rgba(50,202,157,.24)!important}
.kk-btn.primary:hover,.btn.primary:hover,.btn.green:hover,.btn.blue:hover,.btn.dark:hover,.register:hover{box-shadow:0 14px 34px rgba(21,138,98,.3)!important}

/* Forms */
.kk-input,.kk-select,.kk-textarea{background:rgba(255,255,255,.85)!important;border:1px solid rgba(14,60,52,.2)!important;border-radius:12px!important;transition:border-color .2s,box-shadow .2s}
.kk-input:focus,.kk-select:focus,.kk-textarea:focus{background:#fff!important;border-color:var(--kkf-mint-deep)!important;box-shadow:0 0 0 4px rgba(59,212,155,.16)!important}
.kk-status{background:rgba(59,212,155,.14)!important;color:#0f6f4e!important;border:1px solid rgba(59,212,155,.35)}
.kk-choice.selected{border-color:rgba(21,138,98,.6)!important;box-shadow:0 0 0 3px rgba(59,212,155,.14)!important}
.kk-choice.runway.selected{border-color:rgba(50,202,157,.6)!important;box-shadow:0 0 0 3px rgba(55,185,140,.16)!important}

/* Tables */
.kk-table-wrap{background:var(--kkf-glass)!important;border-color:var(--kkf-glass-line)!important}
.kk-table th{background:rgba(7,32,31,.06)!important}
.kk-table tbody tr:hover{background:rgba(59,212,155,.08)}

/* KPI numbers in display type */
.hero-metric b,.run-mini-kpis b,.ready-kpis b,.visual-summary b,.kpi strong,.kk-ready-kpis b,.kk-price{font-family:var(--kkf-display)!important;font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* Dark bands: same marine family as the hero so the page reads as one system */
.cta,.fit-shell,.slp-final-cta{background:#fff!important;border-top:1px solid #e2ece8!important;border-bottom:1px solid #e2ece8!important}
.price-choice.slp{box-shadow:inset 0 3px var(--kkf-mint-deep)!important}
.price-choice.run{box-shadow:inset 0 3px var(--kkf-sky-deep)!important}
.kk-auth-card:before,.kk-work-card:before{background:linear-gradient(90deg,var(--kkf-mint),var(--kkf-sky))!important}

/* Accessibility */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--kkf-mint-deep)!important;outline-offset:3px}
::selection{background:rgba(59,212,155,.35)}

/* Floating/orbit cards in the hero are opaque so their muted text keeps contrast */
section.hero:has(.hero-visual,.hero-stage) .float-card,section.hero:has(.hero-visual,.hero-stage) .orbit-card{background:#fff!important}


/* ===================================================================
   v61 - readable on white, and sections that separate without going dark
   =================================================================== */
:root{
  --kk-tint:#f4faf7;          /* KUSTOM KO, for shared pages          */
  --kk-tint-line:#e2ece8;
}
.kk-product-slp{--kk-tint:#f3faf6;--kk-tint-line:#dfeee7;--kk-accent:#05845e}
.kk-product-runway{--kk-tint:#f5f5fd;--kk-tint-line:#e4e3f6;--kk-accent:#4a41c9}
:root{--kk-accent:#05845e}

/* --- the header, which is white now ------------------------------- */
/* A sticky bar with a backdrop-filter is recomposited on every paint, and
   clicking anything in it makes it flash. It was there to blur a dark
   translucent bar over moving content; the bar is solid white now, so the
   filter buys nothing and costs a flicker. */
.kk-header,header.kk-header{
  background:#fff!important;backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  transition:none!important;will-change:auto!important}
.kk-header *{transition-property:color,background-color,border-color!important}

.kk-header .kk-btn{
  background:#fff!important;color:#17352c!important;
  border:1px solid #cfe2da!important;box-shadow:none!important}
.kk-header .kk-btn:hover{border-color:#8fbcac!important;background:#f4fbf8!important}
.kk-header .kk-mobile-toggle{
  background:#fff!important;color:#17352c!important;border:1px solid #cfe2da!important}
.kk-header .kk-menu,.kk-header .kk-mobile-panel{
  background:#fff!important;border:1px solid #e2ece8!important;
  box-shadow:0 18px 44px -20px rgba(8,35,28,.22)!important}
.kk-header .kk-menu a,.kk-header .kk-menu b,.kk-header .kk-mobile-panel a{
  color:#17352c!important}
.kk-header .kk-menu small,.kk-header .kk-mobile-panel small{color:#5f736b!important}
.kk-header .kk-menu a:hover{background:var(--kk-tint)!important}
.kk-header .kk-link:hover,.kk-header .kk-dropbtn:hover,
.kk-header .kk-dropdown.open>.kk-dropbtn{color:#04734f!important}
.kk-product-runway .kk-header .kk-link:hover,
.kk-product-runway .kk-header .kk-dropdown.open>.kk-dropbtn{color:#4a41c9!important}

/* --- the hero and the closing bands ------------------------------- */
section.hero h1,section.hero h2,section.hero h3,
.cta h1,.cta h2,.cta h3,.fit-shell h2,.fit-shell h3,
.slp-final-cta h2,.slp-final-cta h3{color:#0f2a22!important}
section.hero p,section.hero .lead,section.hero li,
.cta p,.cta li,.fit-shell p,.fit-shell li,
.slp-final-cta p,.slp-final-cta li{color:#3f5a51!important}
section.hero p b,section.hero strong,.cta p b,.cta strong{color:#0f2a22!important}
section.hero small,.cta small,.fit-shell small,.slp-final-cta small{color:#5f736b!important}

/* A button that was white text on nothing is a button nobody can see. */
section.hero a.btn,section.hero button.btn,
.cta a.btn,.cta button.btn,.fit-shell a.btn,.slp-final-cta a.btn{
  border:1px solid #cfe2da!important}
section.hero a.btn:not(.primary):not(.green):not(.blue):not(.register):not(.dark),
.cta a.btn:not(.primary):not(.green):not(.blue):not(.register):not(.dark),
.fit-shell a.btn:not(.primary):not(.green):not(.blue):not(.register):not(.dark),
.slp-final-cta a.btn:not(.primary):not(.green):not(.blue):not(.register):not(.dark){
  background:#fff!important;background-image:none!important;
  color:#17352c!important;box-shadow:none!important}
section.hero a.btn:not(.primary):hover,.cta a.btn:not(.primary):hover{
  border-color:#8fbcac!important;background:var(--kk-tint)!important}

/* The accent word in the headline reads deeper on white than the light
   green that was chosen to glow on a dark band. */
section.hero h1 span{
  background:none!important;-webkit-text-fill-color:currentColor!important;
  color:#04734f!important}
.kk-product-runway section.hero h1 span{color:#4a41c9!important}

/* Sections that were dark and are now white: their own text follows. The
   .intelligence band and the hero's feature chips were both written in
   near-white, and one eyebrow carries an inline colour that only
   !important can reach. */
section.intelligence,section.intelligence h2,section.intelligence h3{color:#0f2a22!important}
section.intelligence p,section.intelligence li,section.intelligence .lead{color:#3f5a51!important}
section.intelligence .eyebrow,section.hero .eyebrow,
.cta .eyebrow,.fit-shell .eyebrow,.slp-final-cta .eyebrow{color:#04734f!important}
.kk-product-runway section.intelligence .eyebrow,
.kk-product-runway section.hero .eyebrow{color:#4a41c9!important}
section.hero .hero-copy>div>span,section.hero .hero-badge,
section.hero [class*="feat"] span,section.hero .hero-copy span{color:#3f5a51!important}
/* written for a dark hero, at 74% white */
section.hero span,section.hero .hero-points,section.hero .hero-points *{
  color:#3f5a51!important}
section.hero h1 span{color:#04734f!important}
.kk-product-runway section.hero h1 span{color:#4a41c9!important}
section.intelligence small,section.intelligence .data-chip{color:#3f5a51!important}
section.intelligence [class*="chip"],section.hero [class*="chip"]{
  background:var(--kk-tint)!important;border:1px solid var(--kk-tint-line)!important;
  color:#17352c!important}
section.intelligence small,.int-visual small,.hero-stage small{color:#5f736b!important}

/* the ".micro" row under the hero buttons was 74% white for a dark band */
.micro,.micro span,.micro b,section.hero .micro span{color:#3f5a51!important}
.micro i{background:#05845e!important}
.kk-product-runway .micro i{background:#4a41c9!important}

/* --- a Runway page's primary action is Runway's colour ------------- */
/* This is the whole point of keeping the two apart: on a Runway page the
   button that takes you into Runway should not be SLP green. */
.kk-product-runway .btn.primary,.kk-product-runway .kk-btn.primary,
.kk-product-runway .btn.green,.kk-product-runway .btn.blue,
.kk-product-runway .register,.kk-product-runway .btn.dark{
  background:linear-gradient(110deg,#4a41c9,#3a32a8)!important;
  color:#fff!important;border-color:transparent!important;
  box-shadow:0 10px 26px rgba(74,65,201,.22)!important}
.kk-product-runway .btn.primary:hover,.kk-product-runway .register:hover{
  background:linear-gradient(110deg,#3a32a8,#2f2890)!important}
.kk-product-runway a:not(.btn):not(.kk-btn):hover{color:#4a41c9!important}
.kk-product-slp .btn.primary,.kk-product-slp .kk-btn.primary,
.kk-product-slp .btn.green,.kk-product-slp .register{
  background:linear-gradient(110deg,#05845e,#04684a)!important;
  box-shadow:0 10px 26px rgba(5,132,94,.22)!important}

/* The hero has its own button rule at section.hero:has(...) .btn depth,
   which outranks a plain .kk-product-* .btn. These match that depth so a
   Runway hero's button is Runway's colour and an SLP hero's is SLP's. */
.kk-product-runway section.hero:has(.hero-visual,.hero-stage) .btn.primary,
.kk-product-runway section.hero:has(.hero-visual,.hero-stage) .btn.blue,
.kk-product-runway section.hero:has(.hero-visual,.hero-stage) .btn.dark,
.kk-product-runway section.hero:has(.hero-visual,.hero-stage) .btn.green,
.kk-product-runway .cta .btn.primary,.kk-product-runway .slp-final-cta .btn.primary{
  background:linear-gradient(110deg,#4a41c9,#3a32a8)!important;
  color:#fff!important;border-color:transparent!important;
  box-shadow:0 10px 26px rgba(74,65,201,.22)!important}
.kk-product-slp section.hero:has(.hero-visual,.hero-stage) .btn.primary,
.kk-product-slp section.hero:has(.hero-visual,.hero-stage) .btn.blue,
.kk-product-slp section.hero:has(.hero-visual,.hero-stage) .btn.dark,
.kk-product-slp section.hero:has(.hero-visual,.hero-stage) .btn.green{
  background:linear-gradient(110deg,#05845e,#04684a)!important;
  color:#fff!important;border-color:transparent!important;
  box-shadow:0 10px 26px rgba(5,132,94,.22)!important}
/* and the same depth for the faint row beneath them */
section.hero:has(.hero-visual,.hero-stage) .micro,
section.hero:has(.hero-visual,.hero-stage) .micro span,
section.hero:has(.hero-visual,.hero-stage) .micro b{color:#3f5a51!important}
.kk-product-runway section.hero:has(.hero-visual,.hero-stage) .micro i,
.kk-product-runway .micro i{background:#4a41c9!important}
.kk-product-slp section.hero:has(.hero-visual,.hero-stage) .micro i{background:#05845e!important}

/* On the shared home page the two decks sit side by side, so each one's
   button should be its own product's colour - that is the whole point of
   showing them together. */
.product-card.run .btn,.product-card.run a.btn.blue,
section.hero .product-card.run .btn{
  background:linear-gradient(110deg,#4a41c9,#3a32a8)!important;
  color:#fff!important;border-color:transparent!important;
  box-shadow:0 10px 26px rgba(74,65,201,.22)!important}
.product-card.slp .btn,.product-card.slp a.btn{
  background:linear-gradient(110deg,#05845e,#04684a)!important;
  color:#fff!important;border-color:transparent!important;
  box-shadow:0 10px 26px rgba(5,132,94,.22)!important}
.product-card.run .product-tag{color:#4a41c9!important}
.product-card.slp .product-tag{color:#04734f!important}

/* --- a Runway page should have no green on it ---------------------- */
.kk-product-runway .eyebrow,.kk-product-runway a.active,
.kk-product-runway a.runway,.kk-product-runway .active.runway,
.kk-product-runway [class*="accent"],.kk-product-runway .kk-subnav a.active{
  color:#4a41c9!important}
.kk-product-runway a.active,.kk-product-runway .kk-subnav a.active{
  background:#edecfd!important;border-color:#e4e3f6!important}
.kk-product-slp a.active,.kk-product-slp .kk-subnav a.active{
  color:#04734f!important;background:#e8f5ef!important;border-color:#dfeee7!important}

/* --- card text was set for a dense dashboard, not a page ----------- */
/* 11-12px is a control label; a card someone reads needs body size. */
.kk-card p,.kk-card li,.product-card p,.product-card li,
.kk-card .sub,.product-card .sub,.value-card p,.int-card p,
[class*="-card"] p,[class*="-card"] li{
  font-size:14.5px!important;line-height:1.6!important;color:#3f5a51!important}
[class*="-card"] h3,[class*="-card"] h4,.kk-card h3,.kk-card h4{
  font-size:16.5px!important;line-height:1.3!important;color:#0f2a22!important}
[class*="-card"] small,.kk-card small{font-size:12.5px!important;color:#5f736b!important}
/* the little stat tiles inside the product decks */
.mini-stat b,.mini-stat strong,[class*="stat"] b{font-size:17px!important}
[class*="stat"] small,[class*="stat"] .lbl{font-size:11px!important;letter-spacing:.06em!important}

/* --- the primary button's hover is deliberate, not a flicker ------- */
.btn.primary,.kk-btn.primary,.register,.btn.green,.btn.blue{
  transition:filter .15s ease,box-shadow .15s ease!important}
.btn.primary:hover,.kk-btn.primary:hover,.register:hover,
.btn.green:hover,.btn.blue:hover{filter:brightness(.94)!important}

/* Text sitting ON a coloured mark is not page text: the muted ink above
   would be applied to the label inside the green SLP disc and turn it to
   mud. These keep their light colour. */
section.hero .hero-core small,section.hero .hero-core b,
section.hero [class*="core"] small,section.hero [class*="core"] b,
.hero-core small,.hero-core b,.orbit-core small,.orbit-core b{
  color:#eafff7!important}

/* --- a hero illustration sits ON the page, not in a box ------------ */
/* The shared glass treatment was wrapping the hero diagrams in a panel
   with a border and a shadow, so the orbit on What is SLP read as a
   framed picture rather than part of the page. */
section.hero .hero-visual,section.hero .hero-stage,
section.hero .hero-visual.kkf-glass,section.hero .hero-stage.kkf-glass,
.hero-visual,.hero-stage{
  background:transparent!important;border:0!important;
  box-shadow:none!important;backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important}

/* --- separation without a dark fill -------------------------------- */
/* Every other band takes a warm tint of its product's colour and a
   hairline, so the page has rhythm and the sections have edges. */
.cta,.fit-shell,.slp-final-cta{
  background:var(--kk-tint)!important;
  border-top:1px solid var(--kk-tint-line)!important;
  border-bottom:1px solid var(--kk-tint-line)!important}
section.hero:has(.hero-visual,.hero-stage){
  border-bottom:1px solid var(--kk-tint-line)!important}


/* ===================================================================
   v66 - readable everywhere, measured rather than judged by eye
   =================================================================== */
/* The brand green is a fine fill and a marginal text colour: 4.70 on
   white, and under 4.5 as soon as it sits on its own tint. As TYPE it
   steps down; as a button background it does not. */
.eyebrow,.kk-eyebrow,a.active,.product-tag,
.study-signals b,.int-card b,[class*="step"] b,[class*="num"]{
  color:#04734f!important}
.kk-product-runway .eyebrow,.kk-product-runway .kk-eyebrow,
.kk-product-runway a.active,.kk-product-runway .product-tag{color:#4a41c9!important}
.product-card.run .product-tag{color:#4a41c9!important}
.btn,.kk-btn,.register,.btn.primary{color:#fff}

/* Small print is the text most often on a tint, so it takes the darker
   of the two muted values. */
small,.sub,.field-note,figcaption,.kk-site-footer small,
.ready-signals small,.study-signals small{color:#52665e!important}

/* A link that was white on a dark band is invisible on a light one. */
.contact a,.contact-email,.contact .btn,
section.contact a,.slp-final-cta a:not(.btn),.cta a:not(.btn){
  color:#04734f!important}
.kk-product-runway .contact a,.kk-product-runway .cta a:not(.btn){color:#4a41c9!important}

/* The REL legend and diagram captions were between 1.2 and 1.5 to 1. */
.rel-legend,.rel-legend span,.rel-note,.diagram-note,
[class*="legend"] span,[class*="legend"] small{color:#52665e!important}

/* Footer links and headings. */
.kk-site-footer a{color:#17352c!important}
.kk-site-footer a:hover{color:#04734f!important}
.kk-site-footer h4,.kk-site-footer b{color:#0f2a22!important}
.kk-site-footer small,.kk-site-footer span{color:#52665e!important}

/* --- every band that was dark, wherever it was declared ------------ */
/* Each page carries its own <style>, and the dark bands were declared in
   several of them under different class names. Rather than chase nine
   files, the bands are named once here. Device mockups (.app-shell,
   .demo-shell) are deliberately dark screens and are left alone. */
section.dark,.dark,.fit-shell,.slp-final-cta,.cta,
section.contact,.contact,section.intelligence,.intelligence,
.decision-grid,.consultant-value-card{
  background:var(--kk-tint,#f4faf7)!important;
  color:#17352c!important;
  border-top:1px solid var(--kk-tint-line,#e2ece8)!important}
:is(section.dark,.dark,.fit-shell,.slp-final-cta,.cta,.contact,.intelligence,.decision-grid) :is(h1,h2,h3,h4,h5,b,strong){
  color:#0f2a22!important}
:is(section.dark,.dark,.fit-shell,.slp-final-cta,.cta,.contact,.intelligence,.decision-grid) :is(p,li,span,small,em){
  color:#3f5a51!important}
:is(section.dark,.dark,.fit-shell,.slp-final-cta,.cta,.contact,.intelligence,.decision-grid) small{
  color:#52665e!important}
/* the cards inside them were dark-on-dark */
:is(section.dark,.dark,.decision-grid,.intelligence) :is(.decision-card,.int-card,[class*="-card"]){
  background:#fff!important;border:1px solid var(--kk-tint-line,#e2ece8)!important}

/* A filled button carries white type. Two of them were set to a near
   black that measured 3.59 against their own green. */
.btn.primary,.kk-btn.primary,.btn.green,.btn.blue,.btn.dark,.register,
.btn.primary *,.kk-btn.primary *,.register *{color:#fff!important}

/* --- the last of it, each measured ---------------------------------- */
/* A filled button carries white type. The page rule set #062120 on it,
   which measured 2.87 against the green behind it. */
a.kk-btn.primary,a.btn.primary,button.kk-btn.primary,button.btn.primary,
a.register,button.register,.kk-btn.primary,.btn.primary,
a.kk-btn.primary *,a.btn.primary *,.register *{color:#fff!important}

/* A .kk-btn outside the header kept the header's white fill and the
   header's white type with it. */
.kk-btn:not(.primary),a.kk-btn:not(.primary){
  background:#fff!important;color:#17352c!important;
  border:1px solid #cfe2da!important}

/* Small type sitting ON a filled mark is not page text. */
.optimize-badge,.optimize-badge *,.locked,.locked *,
.hero-core small,.hero-core b,.orbit-core small,.orbit-core b,
[class*="badge"] small,[class*="badge"] b,
.mini-app-head small,.app-window small,.screen-chip,.screen-chip *{
  color:#fff!important}

/* Step numbers and active pills sit on a tint, so they take the
   stepped-down green - or indigo on a Runway page. */
.num,.dot,.step b,.g b,.app-nav.on,[class*="num"] b,
.kk-tag,.kk-tag.slp,.screen-number{color:#04734f!important}
.kk-product-runway :is(.num,.dot,.step b,.app-nav.on,.kk-tag,.screen-number),
.kk-tag.runway{color:#3a32a8!important}

/* The proof line under the hero buttons, on every page rather than only
   the ones whose hero matched the earlier selector. */
.microproof,.microproof span,.micro,.micro span,.micro b{color:#3f5a51!important}
.microproof span:before,.micro i{color:#04734f!important}
.kk-product-runway :is(.microproof span:before,.micro i){color:#3a32a8!important}

/* --- inside the fake app screens on the marketing pages ------------ */
/* These mocks carry their own scoped styles and the sweeps above carry
   !important, so a mock's own correct colour loses to them. Each case is
   named here explicitly.

   [class*="live"] used to appear below and has been removed: it also
   matched .live-demo-body, which turned every label inside the SLP walk-
   through white on a white card - eight of them, at 1.0 to 1. A substring
   selector cannot tell a live status chip from a live demo, so the chips
   are named instead. */

/* Small type ON a filled mark is not page text - it is white. Measured
   against the mark behind it: the SLP green 4.70, the deep green 5.88,
   the locked-zone green 11.90, the Runway hub 5.47. */
html body .optimize-badge,html body .optimize-badge *,
html body .locked,html body .locked *,
html body .orbit-core small,html body .orbit-core b,
html body .pipeline-core small,html body .pipeline-core b,
html body .map-core small,html body .map-core b,
html body .chip.hub small,html body .chip.hub b,
html body .mini-app-head small,html body .app-window small,
html body .app-head small,html body .live-chip,html body .live-chip *{
  color:#fff!important}

/* The Runway hub orb: white needed 4.5 and the gradient only gave it 4.55
   at the blue end and 3.85 at the violet one. Stepped down along its own
   hue, white now measures 5.47 and 5.58. */
html body .chip.hub{
  background:linear-gradient(150deg,#2a62d8,#6f4fd6)!important}

/* Numerals and icon tiles sit on a mint tint, where the brand green read
   4.04 to 4.19. The stepped-down green measures 5.04, 5.13 and 5.24 on
   the three tints in use, and 5.87 on white. */
html body :is(.node-icon,.export-icon,.system-points b,.quick-card>b,
              .live-demo-nav button b,.step-num,.num-chip){
  color:#04734f!important}

/* Runway's own two: the chip numerals were the brand blue on near-white
   at 4.46, and the window caption was #668091 at 4.07. Both step down
   along their own hue - 5.34 and 4.87. */
html body .signal-chip b{color:#2a63d6!important}
html body .fake-top b{color:#5c7382!important}

/* The final CTA's button was white-on-dark when the band was dark. The
   band is a light tint now and the button is filled green, so its near
   black ink measured 2.16 against its own fill. */
html body .slp-final-cta .btn.primary,
html body .slp-final-cta .btn.primary *{
  color:#fff!important;background:var(--kkf-mint-deep,#04734f)!important;
  border-color:transparent!important}

/* kk-future-app.css declares the header button at .kk-header .kk-btn
   .primary too, and that file is not part of this pass, so the white ink
   is re-stated here above its specificity. */
html body .kk-header .kk-btn.primary,
html body .kk-header .kk-btn.primary *{color:#fff!important}

body .app-nav.on,body .side-item.on,body .nav-item.on,
body [class*="side-item"].on,body [class*="app-nav"].on{
  color:#04734f!important;background:#e8f5ef!important}
body.kk-product-runway :is(.app-nav.on,.side-item.on,.nav-item.on){
  color:#3a32a8!important;background:#edecfd!important}
body a.btn.primary,body a.btn.primary *{color:#fff!important}

/* --- the shadow that was drawing a card ----------------------------- */
/* section.hero .hero-visual carried box-shadow: a 12% white ring plus a
   45%-black, 90px drop. On a dark hero that lifts a device off the page.
   On a white one it paints a large grey rectangle behind an open diagram
   - the "graphic card" with nothing drawing it.
   .hero-visual is a field of floating cards, not a device: it gets no
   shadow at all and merges into the page. The two real devices keep a
   lift, restated for a light page instead of a dark one. */
/* --- an eyebrow is an accent, not body text ------------------------- */
/* The band sweep above recolours every span inside a recoloured band, and
   it caught the two section eyebrows that sit in one. Readable but wrong:
   the eyebrow is the one line on the section that carries the product's
   colour. Restated above the sweep's specificity, per product. */
html body :is(section.dark,.dark,.cta,.intelligence,.fit-shell,
              .slp-final-cta,.contact,.decision-grid) .eyebrow,
html body .eyebrow.eyebrow{color:#04734f!important}
html body.kk-product-runway :is(section.dark,.dark,.cta,.intelligence,.fit-shell,
              .contact,.decision-grid) .eyebrow,
html body.kk-product-runway .eyebrow.eyebrow{color:#4a41c9!important}

/* --- the hero's second button had no edge -------------------------- */
/* It was drawn for a dark hero: a 6% white wash with a 20% white edge and
   white type. The hero is white, so "Contact KUSTOM KO" and "See how they
   connect" were bare text with nothing around them - the only two buttons
   on the site with no shape at all. */
html body section.hero .btn:not(.dark):not(.primary):not(.green):not(.blue),
html body section.hero:has(.hero-visual,.hero-stage) .btn:not(.dark):not(.primary):not(.green):not(.blue){
  background:#fff!important;
  border:1px solid #cfe2da!important;
  color:#17352c!important}
html body.kk-product-runway section.hero .btn:not(.dark):not(.primary):not(.green):not(.blue){
  border-color:#d5dbf2!important}
html body section.hero .btn:not(.dark):not(.primary):not(.green):not(.blue):hover{
  border-color:#8fbcac!important;background:#f4fbf8!important}

/* --- the three-pixel bar across the top of every page --------------- */
/* .kk-header carried border-top:3px solid #10201b - a near-black rule
   capping every page above the logo. That is the dark-header impression
   the brief asked not to create, and the header already separates itself
   from the page with its own hairline underneath. */
html body .kk-header,html body header.kk-header{border-top:0!important}

/* --- Runway's boxes, which live in its own stylesheets -------------- */
/* Same story as the SLP pages: these were drawn as glass for a dark band
   and the band is light now, so the box is white on white. Runway's
   stylesheets are not part of this pass, so the light-band form is
   declared here instead of edited there.
   The white grid overlay on .dark::before is deliberately NOT restored -
   the drafting grid was asked to go, and invisible is where it should
   stay. */
html body :is(.journey-nav button,.journey-screen,.dark .visual,
              .dark .chip,.cta .chip,.dark .flow-node,.visual.timeline-visual){
  border-color:var(--line,#dde4ef)!important}
html body :is(.journey-nav button,.dark .visual,.visual.timeline-visual){
  background-color:#fff!important}
/* The selected step takes ITS OWN product's colour. This rule matched
   .journey-nav button on both products at first, which put Runway's
   indigo on an SLP page - the two are kept apart deliberately. */
html body .journey-nav button.on{
  background:#fff!important;border-color:#8fbcac!important;
  box-shadow:0 6px 18px rgba(16,52,42,.10)!important}
html body.kk-product-runway .journey-nav button.on{
  border-color:#9a93e6!important;
  box-shadow:0 6px 18px rgba(30,28,80,.10)!important}

/* --- a tint only separates when what precedes it does not ----------- */
/* Five tinted bands ran together on the home page and read as one block.
   The class list below is not a guess: it is every full-width band that
   measured as tinted on any of the twenty-six pages, so the alternation
   cannot drift out of step with whatever the bands are called.

   The chain is what makes it alternate rather than collapse. A plain
   "tint after tint goes white" rule turns a run of four into one tint
   and three whites. Each level here is one longer and therefore one step
   more specific than the last, so the second band goes white, the third
   goes back to tint, the fourth white again, and so on. */
/* The bands did not agree on a tint: three different near-whites
   appeared on one Runway page (a cyan-grey gradient, an indigo, a
   green-grey), which is what made the run read as drift rather than
   rhythm. Every band that keeps a tint now takes the one tint its
   product owns. Sections explicitly cleared to white keep that.
   This sits one element-selector below the chain below it, so the
   chain still decides WHICH bands keep the tint. */
:is(.dark,.light,.soft,.tinted,.cta,.connect,.pricing,.intelligence,.contact,.fit-shell,.slp-final-cta,.video-section,.deck-section,.runway-faq):not(.kkf-section-clear){
  background-image:none!important;
  background-color:var(--kk-tint,#f4faf7)!important}

html :is(.dark,.light,.soft,.tinted,.cta,.connect,.pricing,.intelligence,.contact,.fit-shell,.slp-final-cta,.video-section,.deck-section,.runway-faq)
 + :is(.dark,.light,.soft,.tinted,.cta,.connect,.pricing,.intelligence,.contact,.fit-shell,.slp-final-cta,.video-section,.deck-section,.runway-faq){background:#fff!important;background-image:none!important;border-top:1px solid var(--kk-tint-line,#e2ece8)!important}
html :is(.dark,.light,.soft,.tinted,.cta,.connect,.pricing,.intelligence,.contact,.fit-shell,.slp-final-cta,.video-section,.deck-section,.runway-faq)
 + :is(.dark,.light,.soft,.tinted,.cta,.connect,.pricing,.intelligence,.contact,.fit-shell,.slp-final-cta,.video-section,.deck-section,.runway-faq)
 + :is(.dark,.light,.soft,.tinted,.cta,.connect,.pricing,.intelligence,.contact,.fit-shell,.slp-final-cta,.video-section,.deck-section,.runway-faq){background:var(--kk-tint,#f4faf7)!important;background-image:none!important;border-top:1px solid var(--kk-tint-line,#e2ece8)!important}
html :is(.dark,.light,.soft,.tinted,.cta,.connect,.pricing,.intelligence,.contact,.fit-shell,.slp-final-cta,.video-section,.deck-section,.runway-faq)
 + :is(.dark,.light,.soft,.tinted,.cta,.connect,.pricing,.intelligence,.contact,.fit-shell,.slp-final-cta,.video-section,.deck-section,.runway-faq)
 + :is(.dark,.light,.soft,.tinted,.cta,.connect,.pricing,.intelligence,.contact,.fit-shell,.slp-final-cta,.video-section,.deck-section,.runway-faq)
 + :is(.dark,.light,.soft,.tinted,.cta,.connect,.pricing,.intelligence,.contact,.fit-shell,.slp-final-cta,.video-section,.deck-section,.runway-faq){background:#fff!important;background-image:none!important;border-top:1px solid var(--kk-tint-line,#e2ece8)!important}
html :is(.dark,.light,.soft,.tinted,.cta,.connect,.pricing,.intelligence,.contact,.fit-shell,.slp-final-cta,.video-section,.deck-section,.runway-faq)
 + :is(.dark,.light,.soft,.tinted,.cta,.connect,.pricing,.intelligence,.contact,.fit-shell,.slp-final-cta,.video-section,.deck-section,.runway-faq)
 + :is(.dark,.light,.soft,.tinted,.cta,.connect,.pricing,.intelligence,.contact,.fit-shell,.slp-final-cta,.video-section,.deck-section,.runway-faq)
 + :is(.dark,.light,.soft,.tinted,.cta,.connect,.pricing,.intelligence,.contact,.fit-shell,.slp-final-cta,.video-section,.deck-section,.runway-faq)
 + :is(.dark,.light,.soft,.tinted,.cta,.connect,.pricing,.intelligence,.contact,.fit-shell,.slp-final-cta,.video-section,.deck-section,.runway-faq){background:var(--kk-tint,#f4faf7)!important;background-image:none!important;border-top:1px solid var(--kk-tint-line,#e2ece8)!important}
html :is(.dark,.light,.soft,.tinted,.cta,.connect,.pricing,.intelligence,.contact,.fit-shell,.slp-final-cta,.video-section,.deck-section,.runway-faq)
 + :is(.dark,.light,.soft,.tinted,.cta,.connect,.pricing,.intelligence,.contact,.fit-shell,.slp-final-cta,.video-section,.deck-section,.runway-faq)
 + :is(.dark,.light,.soft,.tinted,.cta,.connect,.pricing,.intelligence,.contact,.fit-shell,.slp-final-cta,.video-section,.deck-section,.runway-faq)
 + :is(.dark,.light,.soft,.tinted,.cta,.connect,.pricing,.intelligence,.contact,.fit-shell,.slp-final-cta,.video-section,.deck-section,.runway-faq)
 + :is(.dark,.light,.soft,.tinted,.cta,.connect,.pricing,.intelligence,.contact,.fit-shell,.slp-final-cta,.video-section,.deck-section,.runway-faq)
 + :is(.dark,.light,.soft,.tinted,.cta,.connect,.pricing,.intelligence,.contact,.fit-shell,.slp-final-cta,.video-section,.deck-section,.runway-faq){background:#fff!important;background-image:none!important;border-top:1px solid var(--kk-tint-line,#e2ece8)!important}
html :is(.dark,.light,.soft,.tinted,.cta,.connect,.pricing,.intelligence,.contact,.fit-shell,.slp-final-cta,.video-section,.deck-section,.runway-faq)
 + :is(.dark,.light,.soft,.tinted,.cta,.connect,.pricing,.intelligence,.contact,.fit-shell,.slp-final-cta,.video-section,.deck-section,.runway-faq)
 + :is(.dark,.light,.soft,.tinted,.cta,.connect,.pricing,.intelligence,.contact,.fit-shell,.slp-final-cta,.video-section,.deck-section,.runway-faq)
 + :is(.dark,.light,.soft,.tinted,.cta,.connect,.pricing,.intelligence,.contact,.fit-shell,.slp-final-cta,.video-section,.deck-section,.runway-faq)
 + :is(.dark,.light,.soft,.tinted,.cta,.connect,.pricing,.intelligence,.contact,.fit-shell,.slp-final-cta,.video-section,.deck-section,.runway-faq)
 + :is(.dark,.light,.soft,.tinted,.cta,.connect,.pricing,.intelligence,.contact,.fit-shell,.slp-final-cta,.video-section,.deck-section,.runway-faq)
 + :is(.dark,.light,.soft,.tinted,.cta,.connect,.pricing,.intelligence,.contact,.fit-shell,.slp-final-cta,.video-section,.deck-section,.runway-faq){background:var(--kk-tint,#f4faf7)!important;background-image:none!important;border-top:1px solid var(--kk-tint-line,#e2ece8)!important}

/* The footer sits at the bottom of every one of those runs. It reads as a
   footer from its rule line and its content, so it does not need a tint of
   its own - and without one, the band above it can keep its. */
footer.kk-site-footer,body footer.kk-site-footer{
  background:#fff!important;background-image:none!important;
  border-top:1px solid var(--kk-tint-line,#e2ece8)!important}

/* ------------------------------------------------------------------
   A primary button never loses its fill on hover.

   .kk-header .kk-btn:hover forced background:#f4fbf8 with !important,
   which also cleared the gradient behind it. On a page with no product
   class the primary button then rendered white text on near-white -
   measured at 1.0:1. The label simply vanished on hover, on every page,
   because the header is on every page.

   Secondary buttons keep their pale wash. Primary ones darken slightly
   and take a ring, so the hover reads clearly without the fill going.
   ------------------------------------------------------------------ */
.kk-header .kk-btn.primary,
.kk-header .kk-btn.primary:hover,
.kk-header .kk-btn.primary:focus-visible{
  background:linear-gradient(110deg,var(--kk-green),var(--kk-blue))!important;
  color:#fff!important;border-color:transparent!important}
.kk-header .kk-btn.primary:hover,
.kk-header .kk-btn.primary:focus-visible{
  filter:brightness(.93)!important;
  box-shadow:0 0 0 3px rgba(21,138,98,.26),0 10px 26px rgba(21,138,98,.22)!important}

.kk-product-runway .kk-header .kk-btn.primary,
.kk-product-runway .kk-header .kk-btn.primary:hover,
.kk-product-runway .kk-header .kk-btn.primary:focus-visible{
  background:linear-gradient(110deg,#4a41c9,#3a32a8)!important}
.kk-product-runway .kk-header .kk-btn.primary:hover,
.kk-product-runway .kk-header .kk-btn.primary:focus-visible{
  box-shadow:0 0 0 3px rgba(74,65,201,.26),0 10px 26px rgba(74,65,201,.22)!important}

/* The same promise for every other filled button on the page: the label
   stays white, whatever a later rule does to the background. */
.btn.primary:hover,.btn.primary:focus-visible,
.btn.green:hover,.btn.green:focus-visible,
.btn.blue:hover,.btn.blue:focus-visible,
.register:hover,.register:focus-visible,
.kk-btn.primary:hover,.kk-btn.primary:focus-visible{color:#fff!important}

/* Keyboard users get the same ring everywhere, not just on primaries. */
.kk-btn:focus-visible,.btn:focus-visible{
  outline:none;box-shadow:0 0 0 3px rgba(21,138,98,.34)!important}

/* ------------------------------------------------------------------
   Choosing a plan has to look like a choice.

   .kk-plan-option.selected and .kk-plan-option:hover shared one rule -
   the same faint border and a 7%-opacity ring. So the selection did move
   when you clicked, and there was no way to see that it had. Hover is now
   a hint; selected is a decision, with a filled tick and a tinted card.
   ------------------------------------------------------------------ */
.kk-plan-option{position:relative;transition:border-color .14s ease,background .14s ease,box-shadow .14s ease}
.kk-plan-option:hover:not(.selected){
  border-color:#a9c9bc!important;background:#fbfdfc!important;box-shadow:none!important}

.kk-plan-option.selected{
  border-color:var(--kk-green,#04734f)!important;
  border-width:2px!important;
  background:var(--kk-green-soft,#e8f5ef)!important;
  box-shadow:0 0 0 3px rgba(4,115,79,.16)!important}
.kk-plan-option.selected b{color:#0a3b2a!important}
.kk-plan-option.selected span{color:#2c5a49!important}

/* the tick, drawn rather than shipped as an image */
.kk-plan-option.selected:before{
  content:"";position:absolute;top:10px;right:10px;width:20px;height:20px;
  border-radius:50%;background:var(--kk-green,#04734f);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M5.5 12.5l4 4 9-9' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size:15px 15px;background-position:center;background-repeat:no-repeat}

.kk-plan-option.runway.selected{
  border-color:var(--kk-blue,#4a41c9)!important;
  background:var(--kk-blue-soft,#edecfd)!important;
  box-shadow:0 0 0 3px rgba(74,65,201,.16)!important}
.kk-plan-option.runway.selected b{color:#221c66!important}
.kk-plan-option.runway.selected span{color:#463f86!important}
.kk-plan-option.runway.selected:before{background-color:var(--kk-blue,#4a41c9)}

/* ------------------------------------------------------------------
   A pressed button, and the wait after it.
   ------------------------------------------------------------------ */
.kk-btn.is-busy,#checkoutAction.is-busy{
  filter:brightness(.88)!important;
  box-shadow:0 0 0 3px rgba(21,138,98,.3), inset 0 2px 6px rgba(0,0,0,.18)!important;
  transform:translateY(1px)!important;cursor:progress!important}

.kk-await-pay{
  margin-top:14px;padding:14px 16px;border-radius:12px;
  border:1px solid #d8c48f;background:#fffaf0;color:#5c4611;
  display:flex;flex-direction:column;gap:6px;font-size:12.5px}
.kk-await-pay b{font-size:13px;font-weight:700}
.kk-await-pay span{font-weight:500;color:#7a6428;line-height:1.5}
.kk-await-actions{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.kk-await-actions button{
  min-height:38px;padding:0 14px;border-radius:9px;cursor:pointer;
  border:1px solid #d8c48f;background:#fff;color:#5c4611;
  font:700 12.5px/1 inherit}
.kk-await-actions button:first-child{
  background:#5c4611;border-color:#5c4611;color:#fff}
.kk-await-actions button:hover{filter:brightness(.95)}