/* kit/components.css — the homepage's reusable parts, under kit class names (k-*).
   Every declaration is taken from the homepage: the source rule is named above each block
   (file:line under super-site/, or the element measured on /hero-c by kit/tools/measure.mjs).
   Values use kit/tokens.css variables where one exists. kit/tools/component-diff.mjs renders the demo
   page (kit/demo) next to /hero-c and compares every part's computed style, 1440 and 390, in each state.
   Pages use these classes as they are. They never restyle a k-* class from page.css: if a page needs a
   different shape, that shape belongs to the donor and gets its own pg-<slug>-* class. */

@font-face{font-family:"Special Gothic Condensed One";src:url(/kit/fonts/special-gothic-condensed-one-latin.woff2) format("woff2");font-weight:400 700;font-display:fallback}   /* d/c/css/c.css (C's quote mark face) */

/* ------------------------------------------------------------------ motion shared by the parts */
@keyframes k-pulse{0%{box-shadow:0 0 0 0 var(--pulse-color,#0009)}70%{box-shadow:0 0 0 6px #0000}to{box-shadow:0 0 #0000}}   /* base.css:34 pulse-dot-colored */
@keyframes k-marquee{0%{transform:translate(0)}to{transform:translateX(var(--marquee-shift,-50%))}}                           /* base.css:57 marquee */

/* ================================================================== 1. BUTTONS */
/* primary + secondary: hero-shared.css:14-21 (.hv .hv-btn / .hv-btn-ghost); focus ring = base.css:12 :focus-visible */
.k-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--btn-h);padding:var(--btn-pad);border-radius:var(--radius-pill);
  font:var(--btn-font);text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer;
  border:1px solid transparent;background:var(--accent);color:var(--accent-ink);
  transition:background-color .2s ease-out,border-color .2s ease-out,color .2s ease-out,transform .12s ease-out}
.k-btn:hover{background:var(--accent-hover)}
.k-btn--ghost{border:1px solid transparent;background-color:color-mix(in srgb,currentColor 10%,transparent);color:inherit}
.k-btn--ghost:hover,.k-btn--ghost:focus-visible{border-color:transparent;background-color:color-mix(in srgb,currentColor 16%,transparent)}
.k-btn:active{transform:scale(.97)}
.k-btn:focus-visible,.k-btn-sm:focus-visible,.k-btn-icon:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.k-btn-row{display:flex;flex-wrap:wrap;gap:10px}   /* hero-c.css:48 .hvc-ctas gap */

/* small outline button: spotlight.css:149-162 + super.css:285-288 (#spotlight .sp-cta) */
.k-btn-sm{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:var(--btn-sm-h);padding:var(--btn-sm-pad);border-radius:9999px;
  border:1px solid rgba(255,255,255,.22);background:transparent;color:#fff;font:400 14px/20px var(--font-sans);text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:color .2s,border-color .2s}
.k-btn-sm svg{width:14px;height:14px;flex:none;transition:transform .2s}
.k-btn-sm:hover,.k-btn-sm:focus-visible{color:var(--accent);border-color:var(--accent)}
.k-btn-sm:hover svg{transform:translateX(4px)}

/* round icon button: cta.css:57-59 + super.css:105,388-394 (#cta .cta-submit); ghost twin: industries arrows (.ib-arrow, measured) */
.k-btn-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;padding:0;border:0;border-radius:9999px;
  background:var(--accent);color:var(--accent-ink);cursor:pointer;transition:background-color .2s ease-out,color .2s ease-out,transform .16s ease-out}
.k-btn-icon svg{width:16px;height:16px;transition:transform .2s ease-out}
.k-btn-icon:hover{background:var(--accent-hover);color:var(--accent-ink)}
.k-btn-icon:hover svg{transform:translateX(4px)}
.k-btn-icon:active{transform:scale(.97)}
.k-btn-icon--ghost{background:rgba(255,255,255,.06);color:rgba(255,255,255,.85);transition:background .15s,color .15s,opacity .15s}
.k-btn-icon--ghost:hover{background:rgba(255,255,255,.12);color:#fff}

/* ================================================================== 2. EYEBROW (the orange square) */
/* base.css:32-33 (.eyebrow + ::before), reduced motion base.css:61 */
.k-eyebrow{display:flex;align-items:center;gap:8px;margin:0;font-family:var(--font-mono);font-size:var(--eyebrow);font-weight:400;line-height:var(--eyebrow-lh);
  letter-spacing:var(--eyebrow-ls);text-transform:uppercase;color:var(--accent)}
.k-eyebrow::before{content:"";width:6px;height:6px;flex:none;border-radius:2px;background:var(--accent);animation:k-pulse 2s ease-out infinite;--pulse-color:var(--pulse-accent)}
.k-eyebrow--center{justify-content:center}
@media (prefers-reduced-motion:reduce){.k-eyebrow::before{animation:none}}

/* ================================================================== 3. HEADINGS */
/* display: hero-c.css:30-31 (.hvc-h1, .hvc-px); phones hero-c.css:56 */
.k-display{margin:0;color:var(--fg);font:var(--display-w) var(--display)/var(--display-lh) var(--font-sans);letter-spacing:var(--display-ls);text-wrap:balance}
/* phones: hero-c.css:56 — carried by the --display / --display-lh tokens below 810px */
.k-px{font-family:var(--font-pixel);font-weight:400;font-size:1.04em;letter-spacing:-.01em}   /* the one pixel word in a display line */
.k-accent{color:var(--accent)}   /* the one orange word: super.css:79 (.u-text-accent), measured on the Solutions h2 "Gnar" */
/* section heading: super.css:74-76, 80 */
.k-h2{margin:0;color:var(--fg);font:var(--h2-w) var(--h2)/var(--h2-lh) var(--font-sans);letter-spacing:var(--h2-ls);text-transform:none;text-wrap:balance}
/* card title: super.css:84 (.approach-c h3) */
.k-h3{margin:0;color:var(--fg);font:var(--h3-w) var(--h3)/var(--h3-lh) var(--font-sans);letter-spacing:var(--h3-ls)}
/* small title: super.css:299 + industries.css .ib-label (measured 20px/24px, -.2px) */
.k-h4{margin:0;color:var(--fg);font:var(--h4-w) var(--h4)/var(--h4-lh) var(--font-sans);letter-spacing:-.01em}

/* ================================================================== 4. BODY TEXT */
.k-lede{margin:0;font:400 var(--body)/var(--body-lh) var(--font-sans);color:var(--fg-body)}               /* super.css:171-172 (ledes, section intros) */
.k-body{margin:0;font:400 var(--body)/var(--body-card-lh) var(--font-sans);color:var(--fg-card)}         /* super.css:85 (card copy) */
.k-small{margin:0;font:400 var(--small)/var(--small-lh) var(--font-sans);color:var(--fg-small)}           /* super.css:245 (.ib-copy) */
.k-caption{margin:0;font:400 var(--caption)/20px var(--font-sans);color:var(--fg-caption)}                /* spotlight.css:183 (.sp-foot), measured */
.k-mono{font-family:var(--font-mono);font-size:12px;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.72)}   /* hero-c.css:20 */

/* ================================================================== 5. CARD */
/* industries.css:168-230 + super.css:245,276,299 (#industriesBento .ib-cell): plate, hairline, 14px radius, caret slides in on hover */
.k-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:16px;overflow:hidden;padding:20px 22px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-1);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.08);
  color:#fff;font:400 16px/24px var(--font-sans);text-decoration:none;cursor:pointer;transition:background-color .1s linear}
.k-card-title{position:relative;z-index:1;display:flex;align-items:center;gap:6px;font:600 var(--h4)/var(--h4-lh) var(--font-sans);letter-spacing:-.01em;color:#fff;transition:color .2s ease-out}
.k-card-caret{display:flex;flex:none;overflow:hidden;width:14px;height:14px;color:rgba(255,255,255,.8)}
.k-card-caret svg{display:block;width:14px;height:14px;transform:translateX(-100%);transition:transform .15s linear}
.k-card:hover .k-card-caret svg,.k-card:focus-visible .k-card-caret svg{transform:translateX(0)}
.k-card-copy{position:relative;z-index:1;font:400 var(--small)/var(--small-lh) var(--font-sans);color:var(--fg-small);transition:color .1s linear}
.k-cards{display:flex;flex-wrap:wrap;gap:12px}   /* demo grid only; the donor sets the real grid */
.k-cards>.k-card{width:min(260px,78vw);height:180px}   /* industries.css:176-177 */
@media (prefers-reduced-motion:reduce){.k-card,.k-card-caret svg{transition:none}}

/* ================================================================== 6. LOGO MARQUEE */
/* hero.css:74-83 (#logoBar), super.css:360 (pause on hover). Three copies of the row, shift -33.3333% */
.k-logos{position:relative;width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000,#000 8% 92%,#0000);mask-image:linear-gradient(90deg,#0000,#000 8% 92%,#0000)}
.k-logos-track{--marquee-shift:-33.3333%;display:flex;align-items:center;width:max-content;animation:40s linear infinite k-marquee}
.k-logos img{--logo-h:20px;height:var(--logo-h);width:auto;flex-shrink:0;margin-right:134px;opacity:.85}
.k-logos img.lg-whoop{height:calc(var(--logo-h) * .84)}
.k-logos img.lg-kolide{height:calc(var(--logo-h) * 1.2)}
.k-logos img.lg-fitbit{height:calc(var(--logo-h) * 1.08)}
.k-logos img.lg-salsify{height:calc(var(--logo-h) * 1.2)}
.k-logos img.lg-ezcater{height:calc(var(--logo-h) * 1.04)}
.k-logos img.lg-mgb{height:calc(var(--logo-h) * .92)}
.k-logos img.lg-vermont{height:calc(var(--logo-h) * 1.2)}
.k-logos img.lg-aarp{height:calc(var(--logo-h) * 1)}
.k-logos img.lg-systemone{height:calc(var(--logo-h) * 1.24)}
/* phones: hero.css:282-283 (compact layout, core.js switches below 810px) */
@media (max-width:809px){.k-logos{-webkit-mask-image:linear-gradient(90deg,#0000,#000 6% 94%,#0000);mask-image:linear-gradient(90deg,#0000,#000 6% 94%,#0000)}.k-logos img{--logo-h:15px;margin-right:68px}}
.k-logos:hover .k-logos-track,.k-logos:focus-within .k-logos-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.k-logos-track{animation:none}}

/* ================================================================== 7. TESTIMONIAL */
/* C's hear-it card: d/c/css/c.css (.cVFpSu .bnjOQO .iCsUOh .dddkav .gZkgCQ .gPAKTy .jfUYFn .hLpoQM) with the homepage's
   type swap super.css:42-45, 87-90, 277, 300, 407-409, 441 */
.k-quote{box-sizing:border-box;width:100%;min-height:28.8125rem;border:1px solid rgba(255,255,255,.12);background:transparent;transition:border-color .2s ease-out}
@media (max-width:1024px){.k-quote{min-height:18.5rem}}
.k-quote:hover{border-color:rgba(250,85,57,.5)}
.k-quote-link{display:flex;flex-direction:column;gap:clamp(3rem,5.25vw,5.25rem);height:100%;box-sizing:border-box;
  padding:clamp(1.5rem,1.7vw,1.75rem) clamp(1.5rem,3.2vw,3.28125rem) clamp(1.5rem,1.7vw,1.75rem) clamp(1.5rem,2.5vw,2.625rem);color:inherit;text-decoration:none}
.k-quote-author{display:flex;align-items:center;gap:1.4rem}
.k-quote-author img{width:3.875rem;height:3.875rem;object-fit:cover;flex:0 0 auto}
.k-quote-who{display:flex;flex-direction:column;gap:2px}
.k-quote-name{font:600 1.25rem/1.2 var(--font-sans);color:#fff}   /* no transition: super.css:409 swaps the colour instantly */
.k-quote:hover .k-quote-name{color:var(--accent)}
.k-quote-role{max-width:17rem;font:400 12px/120% var(--font-sans);color:rgba(255,255,255,.62)}
.k-quote-role p{margin:0}
.k-quote-co{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
@media (max-width:1024px){.k-quote-role{max-width:100%}}
.k-quote-body{display:flex;flex-direction:column;gap:.35rem}
.k-quote-mark{display:block;position:relative;top:.12em;font:700 clamp(5rem,12.4vw,12.375rem)/49% "Special Gothic Condensed One","Arial Narrow",sans-serif;color:var(--accent)}
.k-quote-text{max-width:100%;font:400 var(--body)/var(--body-lh) var(--font-sans);letter-spacing:.02em;color:rgba(255,255,255,.82);white-space:pre-line;text-wrap:pretty}
.k-quote-text p{margin:0}

/* ================================================================== 8. STAT */
/* languages.css:75-81 (#languages .lg-num, .lg-lbl); spotlight's 64px numerals use .k-stat-num--sm */
.k-stat{display:flex;flex-direction:column}
.k-stat-num{font-family:var(--font-pixel);font-weight:400;font-size:64px;line-height:1;letter-spacing:-.03em;color:#fff;white-space:nowrap}
@media (min-width:810px){.k-stat-num{font-size:var(--stat)}}
.k-stat-num.k-stat-num--sm{font-size:64px}
.k-stat-label{font:400 20px/1.375 var(--font-sans);color:#fff;white-space:nowrap}

/* ================================================================== 9. CTA BAND */
/* cta.css (block, canvas mask, copy stack, pill) + super.css:97-105, 171-172, 211-214, 334, 346-347, 388-394.
   The digit field is drawn by kit/components/js/cta-field.js (verbatim homepage cta.js); build-page adds it when the
   body contains id="ctaField". Keep the ids and the cta-* hook classes: the script finds its parts by them. */
.k-cta{position:relative;isolation:isolate;z-index:1;overflow:hidden}
.k-cta-inner{position:relative;overflow:hidden}
.k-cta-field{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.k-cta-canvas{position:absolute;inset:0;width:100%;height:100%;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 11%,#000 100%),linear-gradient(to right,transparent 0,#000 4%,#000 96%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 11%,#000 100%),linear-gradient(to right,transparent 0,#000 4%,#000 96%,transparent 100%)}
.k-cta-body{position:relative;z-index:10}
.k-cta-wrap{width:100%;max-width:2000px;margin:0 auto;padding:0 20px;box-sizing:border-box}
@media (min-width:810px){.k-cta-wrap{padding:0 44px}}
.k-cta-copy{position:relative;z-index:10;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:20px;padding:0 20px;text-align:left}
@media (min-width:768px){.k-cta-copy{align-items:center;justify-content:center;padding-left:44px;padding-right:44px;text-align:center}.k-cta-copy .k-eyebrow{justify-content:center}}
.k-cta-copy .k-h2{max-width:56rem}
@media (min-width:768px){.k-cta-copy .k-h2{margin-inline:auto}}
@media (min-width:810px){.k-cta-copy .k-h2{max-width:64rem}}
.k-cta-copy .k-lede{max-width:900px;margin-bottom:40px;text-wrap:balance}
.k-cta-form{width:100%;max-width:460px;margin-inline:auto}
.k-cta-pill{display:flex;align-items:center;padding:6px 6px 6px 20px;border-radius:9999px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
  -webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px);transition:box-shadow .15s cubic-bezier(.4,0,.2,1)}
.k-cta-pill:focus-within{box-shadow:0 0 0 2px var(--accent)}
.k-cta-input{min-width:0;flex:1 1 auto;align-self:stretch;border:0;background:transparent;font:400 14px/1.4 var(--font-sans);color:#fff;outline:none}
.k-cta-input::placeholder{color:rgba(255,255,255,.55)}
.k-cta-input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:809px){.k-cta-input{font-size:16px}}   /* super.css:334: 16px stops iOS zooming on focus */
.k-cta-copy .k-eyebrow::before{--pulse-color:currentColor}   /* cta.css:36 */
.k-cta-status{min-height:0;margin-top:0;font:400 11px/16.5px var(--font-mono);letter-spacing:.00625rem;text-transform:uppercase;color:var(--accent);opacity:0;transform:translateY(4px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.k-cta-form.is-sent .k-cta-status{opacity:1;transform:translateY(0);margin-top:12px}
@media (prefers-reduced-motion:reduce){.k-cta-status{transition:none}}

/* ================================================================== 10. PROOF ROW (badges) */
/* hero-c.css:19-27 (.hvc-proof: Clutch rating + orange-dot claims) */
.k-proof{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 32px;margin:0;padding:0;list-style:none;color:rgba(255,255,255,.72);font:400 12px/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase}
.k-proof--start{justify-content:flex-start}   /* left-aligned variant (not on the homepage, which centres it) */
.k-proof li{display:inline-flex;align-items:center;gap:10px}
.k-proof a{display:inline-block;padding:5px 0;margin:-5px 0;color:inherit;text-decoration:underline;text-decoration-color:#fa5539;text-decoration-thickness:1px;text-underline-offset:4px;transition:color .2s ease-out,text-decoration-color .2s ease-out}
.k-proof a:hover{color:#fff;text-decoration-color:var(--accent)}
.k-proof .k-stars svg{display:block;width:74px;height:13px}
.k-proof .k-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
@media (max-width:809px){.k-proof{gap:10px 18px;font-size:11px}}

/* ================================================================== 11. FORM FIELDS */
/* B's contact form on the homepage: d/b/css/b.css (.hsr) + super.css:290-346, measured (#contact .hsr-f).
   The fields are light controls; they sit on the contact block's white form card. */
.k-form{padding:6px 0 0;font:400 14px/19.6px var(--font-sans);letter-spacing:-.329143px;color:rgb(51,71,91)}
.k-form-row{display:grid;grid-template-columns:1fr 1fr;gap:0 6.2%}
@media (max-width:767px){.k-form-row{grid-template-columns:1fr}}
.k-field{display:block;margin:0 0 18px;cursor:default}
.k-field>span{display:block;margin:0 0 7px;font:500 14px/19.6px var(--font-sans);letter-spacing:-.329143px;color:var(--accent-ink)}
.k-field>span i{font-style:normal;color:rgb(194,55,29)}
.k-field input,.k-field select,.k-field textarea{box-sizing:border-box;display:block;width:100%;height:40px;padding:0 16px;border:1px solid rgb(203,214,226);border-radius:22px;
  background-color:rgb(245,248,250);font:400 16px/16px var(--font-sans);color:rgb(51,71,91)}
/* select: b.css select chevron + super.css:294 colour; measured 0 34px 0 16px */
.k-field select{appearance:none;-webkit-appearance:none;padding:0 34px 0 16px;color:rgb(91,107,123);cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2333475b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:10px 10px}
.k-field textarea{height:66px;padding:10px 16px}   /* measured #contact textarea */
.k-field input::placeholder,.k-field textarea::placeholder{color:rgb(91,107,123)}   /* super.css:294 */
.k-field input:focus-visible,.k-field select:focus-visible,.k-field textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}   /* super.css:346 */
.k-field small{display:block;margin:-2px 0 8px;font:400 13px/16.9px var(--font-sans);letter-spacing:-.329143px;color:rgb(91,107,123)}   /* super.css:295, measured */
/* the white card the fields sit on: d/b/css/b.css .contact-cta-right, measured on /hero-c (B scales its spacing with the
   viewport; the kit pins the two measured states: 1440 = 20.57px radius, 27.43px padding; 390 = 10.88px radius, 29.02/10.88px padding) */
.k-form-card{box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;gap:27.4286px;padding:27.4286px;border-radius:20.5714px;background:#fff;color:rgb(24,27,34)}
@media (max-width:767px){.k-form-card{gap:29.0233px;padding:29.0233px 10.8837px 10.8837px;border-radius:10.8837px}}