/* ==========================================================================
   Home page skin: the kore.co design language applied to the restaurant home.
   Content and markup stay as they are; this sheet loads after style.css and
   re-tunes type scale, header proportions, buttons, cards and spacing to the
   tokens used on kore.co (new_kore_website: assets/css/core.css).
   ========================================================================== */

:root {
  --kk-blue: #10537e;
  --kk-cyan: #00b4e5;
  --kk-ink: #0b1524;
  --kk-ink-2: #2a3a4f;
  --kk-muted: #5c6b80;
  --kk-line: #e7ecf3;
  --kk-line-2: #dde5ef;
  --kk-paper: #fbfcfe;
  --kk-paper-2: #f4f7fb;
  --kk-r: 18px;
  --kk-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --kk-font-display: "Neuzeit Grotesk Bold", "Neuzeit Grotesk", sans-serif;
  --kk-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  font-family: var(--kk-font-body);
  font-size: 17px;
  line-height: 1.62;
  color: var(--kk-ink);
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ header
   kore.co header: 76px, quiet ink nav, one dark pill CTA. The restaurant
   header keeps its structure; this shrinks and calms it. */
.header {
  padding: 0;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--kk-line);
}

.header .wrapper {
  height: 64px;
  gap: 18px;
}

.header .header-logo img {
  height: 34px;
  width: auto;
  object-fit: contain;
}

/* Optical sizing, not box sizing. These files bake in different amounts of
   transparent padding, so one shared `height` renders visibly unequal marks:
   measured against its own canvas, header-logo.svg is 98.7% artwork,
   OnlineOrdering and merchant_processing are 100%, reservations_blue is 93.2%
   -- and Ireview_Color is only 68.5%, which is why it read as much smaller
   than the rest at the same 34px. The heights below are each 34 / that
   fraction, so every logo's visible artwork lands at ~34px. Keyed off the
   filename: change a logo file and this correction needs remeasuring. */
.header .header-logo img[src*="Ireview_Color"] {
  height: 50px;
}

.header .header-logo img[src*="reservations_blue"] {
  height: 36px;
}

/* Same correction in the drawer. The 30px base restates what the markup used
   to carry inline (style.css asks for 36px, but the inline height won, so 30px
   is the size this has always rendered at); it moves here so these two
   overrides can reach it. */
.mobile-nav__header img {
  height: 30px;
}

.mobile-nav__header img[src*="Ireview_Color"] {
  height: 44px;
}

.mobile-nav__header img[src*="reservations_blue"] {
  height: 32px;
}

.header .wrapper .left_list ul {
  gap: 2px;
}

.header .wrapper .left_list ul li {
  font-family: var(--kk-font-body);
  font-size: 0.93rem;
}

.header .wrapper .left_list ul li a,
.header .wrapper .left_list ul li .dropdown-trigger {
  font-family: var(--kk-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--kk-ink-2);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: currentColor;
  padding: 8px 13px;
  border-radius: 10px;
  transition: color 0.25s var(--kk-ease), background-color 0.25s var(--kk-ease);
}

.header .wrapper .left_list ul li a:hover,
.header .wrapper .left_list ul li .dropdown-trigger:hover {
  -webkit-text-fill-color: currentColor;
  color: var(--kk-ink);
  background: var(--kk-paper-2);
}

/* cyan underline instead of the gradient bar */
.header .wrapper .left_list ul li a::after {
  left: 13px;
  right: 13px;
  bottom: 3px;
  height: 2px;
  background: var(--kk-cyan);
  border-radius: 2px;
}

.header .wrapper .left_list ul li a.is-current {
  color: var(--kk-ink);
  background: none;
  -webkit-text-fill-color: currentColor;
}

.header .right-buttons {
  gap: 10px !important;
  align-items: center;
}

.header .right-buttons .ask_button {
  font-family: var(--kk-font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--kk-ink);
  height: 38px;
  padding: 0 16px;
  border: 1.5px solid var(--kk-line-2);
  border-radius: 999px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.header .right-buttons .ask_button:hover {
  border-color: var(--kk-cyan);
  background: #fff;
  color: var(--kk-ink);
}

.header .right-buttons .get_free_quote_btn {
  font-family: var(--kk-font-body);
  font-size: 0.88rem;
  font-weight: 600;
  height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--kk-ink);
  border-color: var(--kk-ink);
  display: inline-flex;
  align-items: center;
}

.header .right-buttons .get_free_quote_btn:hover {
  background: var(--kk-blue);
  border-color: var(--kk-blue);
}

.header .right-buttons .sign_in_btn {
  font-family: var(--kk-font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--kk-ink-2);
  background: none;
  border: 0;
  height: 38px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.header .right-buttons .sign_in_btn:hover {
  color: var(--kk-ink);
}

/* ------------------------------------------------------------------- hero
   kore.co order: eyebrow-less centered display headline, muted lede, a dark
   pill and a quiet pill, then the product wall underneath on plain white. */
.performance-section--hero {
  background: #fff;
  border-radius: 0;
  margin-top: 0;
  padding: clamp(46px, 5.4vw, 84px) 0 0;
  text-align: center;
}

.performance-section--hero h3.title {
  display: block;
  font-family: var(--kk-font-display);
  font-weight: 400; /* the Bold alias face carries the weight */
  font-size: clamp(2.5rem, 5.6vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0 auto;
  max-width: 20ch;
}

.performance-section--hero p {
  font-family: var(--kk-font-body);
  font-size: clamp(1.02rem, 1.3vw, 1.2rem);
  line-height: 1.6;
  color: var(--kk-muted);
  max-width: 62ch;
  margin: 18px auto 0;
}

.performance-section--hero .performance_actions {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 14px;
}

.performance-section--hero .performance_actions button.free_quote,
.performance-section--hero .performance_actions a.learn_more {
  font-family: var(--kk-font-body);
  font-size: 0.96rem;
  font-weight: 600;
  padding: 14px 26px;
  border-radius: 999px;
  transition: background-color 0.3s var(--kk-ease), color 0.3s var(--kk-ease),
    border-color 0.3s var(--kk-ease);
}

.performance-section--hero .performance_actions button.free_quote {
  background: var(--kk-ink);
  color: #fff;
  border: 1.5px solid var(--kk-ink);
}

.performance-section--hero .performance_actions button.free_quote:hover {
  background: var(--kk-blue);
  border-color: var(--kk-blue);
}

.performance-section--hero .performance_actions a.learn_more {
  background: #fff;
  color: var(--kk-ink);
  border: 1.5px solid var(--kk-line-2);
}

.performance-section--hero .performance_actions a.learn_more:hover {
  border-color: var(--kk-cyan);
  color: var(--kk-ink);
}

/* the wall sits between hero copy and the feature cards */
.performance-videocards-wrap {
  margin-top: clamp(30px, 4vw, 52px);
}

.performance-section--features {
  background: #fff;
  border-radius: 0;
  padding: clamp(44px, 3.8vw, 38px) 0;
  /* .performance-section pulls itself up 130px with a white background and
     z-index 22, an overlap the old Lottie card wall was designed around. Left
     in, it covers the bottom of the hero shot, which reads as the photo being
     cut off with square corners. */
  margin-top: 0;
}

/* --------------------------------------------------------------- sections
   kore.co halves the space between sections and lets borders, not shadows,
   do the separating. */
.kk-rates,
.platform-features-section,
.automation-section,
.kk-fees,
.restaurant-packages-section,
.testimonials-section,
.contact-section,
.faq-section {
  padding: clamp(44px, 3.8vw, 58px) 0;
}

/* ------------------------------------------------------------- type scale
   Section headings drop to the kore.co k-h2 clamp; card titles to k-h3. */
.pf-title,
.main-text,
.testimonials-title,
.stay-connected__title,
.rp-title,
.faq-title,
.kk-fees__title,
.contact-heading {
  font-family: var(--kk-font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.028em;
  color: var(--kk-ink);
}

.pf-features-label,
.rp-card-name,
.resource-card__title,
.contact-form-title {
  font-family: var(--kk-font-display);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.7vw, 1.55rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.rp-subtitle {
  font-size: clamp(1.02rem, 1.3vw, 1.2rem);
  color: var(--kk-muted);
}

/* ---------------------------------------------------------------- buttons
   Every call to action becomes a kore.co pill: 999px radius, quiet ink or
   brand fill, no shadows, no lifts. */
.rp-btn-get-started,
.get_started_btn,
.contact-submit-btn,
.stay-connected__btn,
.resource-card__btn,
.rp-toggle-btn {
  border-radius: 999px;
  font-family: var(--kk-font-body);
  font-weight: 600;
  box-shadow: none;
}

.rp-btn-get-started:hover,
.get_started_btn:hover,
.contact-submit-btn:hover,
.stay-connected__btn:hover,
.resource-card__btn:hover,
.rp-toggle-btn:hover {
  transform: none;
  box-shadow: none;
}

/* ------------------------------------------------------------------ cards
   Flat: 1px line border, 18px radius, no elevation. */
.features-card,
.testimonial-card,
.resource-card,
.compact-box {
  border-radius: var(--kk-r);
  border: 1px solid var(--kk-line);
  box-shadow: none;
}

.features-card:hover,
.testimonial-card:hover,
.resource-card:hover {
  box-shadow: none;
  transform: none;
  border-color: var(--kk-line-2);
}

/* ==================================================================== v2
   Section-level corrections after the first visual pass. */

/* packages heading was still brand blue */
.restaurant-packages-section .rp-title {
  color: var(--kk-ink);
}

.restaurant-packages-section .rp-subtitle {
  color: var(--kk-muted);
}

/* platform tabs become kore.co pills */
.platform-features-section .pf-tab {
  font-family: var(--kk-font-body);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--kk-ink-2);
  border: 1.5px solid var(--kk-line-2);
  border-radius: 999px;
  padding: 9px 18px;
}

.platform-features-section .pf-tab:hover {
  color: var(--kk-ink);
  border-color: var(--kk-cyan);
  background: #fff;
}

.platform-features-section .pf-tab.active {
  background: var(--kk-ink);
  border-color: var(--kk-ink);
  color: #fff;
}

/* automation CTA becomes a dark pill */
.automation-section .automation-card .get_started_btn {
  border-radius: 999px;
  background: var(--kk-ink);
  color: #fff;
  font-family: var(--kk-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 13px 26px;
  border: 0;
}

.automation-section .automation-card .get_started_btn:hover {
  background: var(--kk-blue);
  color: #fff;
}

/* collaboration: the small label becomes a kore.co eyebrow pill */
.performance-section .collaboration_box .collaboration_container .left h5 {
  display: inline-flex;
  align-items: center;
  font-family: var(--kk-font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kk-blue);
  padding: 7px 14px;
  border-radius: 999px;
  background: #eef4f9;
  border: 1px solid #d3e3ef;
  margin-bottom: 14px;
}

.performance-section .collaboration_box .collaboration_container .left h4 {
  font-family: var(--kk-font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  letter-spacing: -0.02em;
  color: var(--kk-ink);
}

/* the testimonial panel is a solid brand card: no hairline on dark */
.testimonial-card {
  border: 0;
}

/* FAQ: quiet Inter questions at the kore.co size */
.faq-section .faq-question {
  font-family: var(--kk-font-body);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--kk-ink);
  padding: 18px 0;
}

.faq-section .faq-question .faq-icon svg {
  width: 24px;
  height: 24px;
}

.faq-section .faq-subtitle {
  color: var(--kk-muted);
}

/* footer: kore.co paper, ink headings, muted links */
.footer {
  background-image: none;
  background: var(--kk-paper);
  border-top: 1px solid var(--kk-line);
}

.footer .footer-links__heading {
  font-family: var(--kk-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--kk-ink);
  margin-bottom: 14px;
}

.footer a {
  color: var(--kk-ink-2);
}

.footer a:hover {
  color: var(--kk-ink);
}

.footer .stay-connected__btn {
  background: var(--kk-ink);
  border: 1.5px solid var(--kk-ink);
  color: #fff;
}

.footer .stay-connected__btn:hover {
  background: var(--kk-blue);
  border-color: var(--kk-blue);
  color: #fff;
}

.footer input[type="email"],
.footer input[type="text"] {
  border-radius: 999px;
  border: 1px solid var(--kk-line-2);
  background: #fff;
}

/* ==================================================================== v3 */

/* contact heading was still brand blue */
.contact-section .contact-heading {
  color: var(--kk-ink);
}

/* the package card CTA is an unclassed anchor styled by its parent */
.restaurant-packages-section .compact-box a,
.restaurant-packages-section .rp-btn-get-started {
  border-radius: 999px;
  font-family: var(--kk-font-body);
  font-weight: 600;
  background: var(--kk-ink);
  border-color: var(--kk-ink);
  color: #fff;
}

.restaurant-packages-section .compact-box a:hover,
.restaurant-packages-section .rp-btn-get-started:hover {
  background: var(--kk-blue);
  border-color: var(--kk-blue);
  color: #fff;
}

/* "Features:" label inside the platform panels: quiet caps, kore.co style */
.platform-features-section .pf-features-label {
  font-family: var(--kk-font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kk-muted);
}

/* Below 1330px the original header collapses to hamburger + logo and hides
   the two pill CTAs; the skin's display:inline-flex above must not undo it. */
@media (max-width: 1330px) {
  .header .right-buttons .ask_button,

  .header .wrapper {
    height: auto;
    min-height: 58px;
    gap: 12px;
  }
}

/* ==================================================================== v4
   Hero rebuilt to match kore.co's home hero one-to-one: tinted grid
   background with drifting orbs, the Kore AI badge, an ink headline with
   the gradient phrase, and the exact k-btn geometry with the sheen sweep. */

.performance-section--hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #f7fbff 0%, #ffffff 44%);
  padding: clamp(44px, 5vw, 84px) 0 0;
}

.performance-section--hero .container {
  position: relative;
  z-index: 2;
}

.kk-grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(11, 21, 36, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 21, 36, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 78%);
}

.kk-orbs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: radial-gradient(118% 96% at 50% 42%, #000 38%, transparent 88%);
  mask-image: radial-gradient(118% 96% at 50% 42%, #000 38%, transparent 88%);
}

.kk-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  will-change: transform;
  animation: kkOrbDrift 22s ease-in-out infinite alternate;
}

.kk-orb--a {
  width: 520px;
  height: 520px;
  top: -180px;
  left: -120px;
  background: radial-gradient(circle, rgba(0, 180, 229, 0.4), transparent 70%);
}

.kk-orb--b {
  width: 620px;
  height: 620px;
  top: 60px;
  right: -220px;
  background: radial-gradient(circle, rgba(16, 83, 126, 0.3), transparent 70%);
  animation-delay: -7s;
}

@keyframes kkOrbDrift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(40px, -30px, 0) scale(1.08); }
  100% { transform: translate3d(-30px, 26px, 0) scale(0.96); }
}

/* the Kore AI badge: the pill is the button, the line after it is a statement */
.kk-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px 7px 7px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--kk-line-2);
  font-size: 0.82rem;
  color: var(--kk-ink-2);
  margin-bottom: 24px;
}

.kk-hero-badge > span {
  padding-right: 8px;
}


.kk-hero-badge__btn {
  background: var(--kk-ink);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 4px 12px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 0.32s var(--kk-ease);
}

.kk-hero-badge__btn:hover {
  background: var(--kk-blue);
}

/* ink headline, gradient phrase: exactly the kore.co treatment */
.performance-section--hero h3.title {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: initial;
  color: var(--kk-ink);
  font-size: clamp(2.45rem, 5.4vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.038em;
  text-wrap: balance;
  max-width: none;
}

.kk-grad {
  background: linear-gradient(100deg, var(--kk-blue) 0%, var(--kk-cyan) 52%, #7ad0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .kk-grad {
    background: none;
    color: var(--kk-cyan);
    -webkit-text-fill-color: currentColor;
  }
}

.performance-section--hero p {
  margin-top: 24px;
}

.performance-section--hero .performance_actions {
  margin-top: 18px;
  flex-wrap: wrap;
  gap: 12px;
}

/* the exact k-btn: 999px pill, 12px 20px at the large size, sheen sweep,
   icon nudge on hover, no lift and no shadow */
.performance-section--hero .performance_actions button.free_quote,
.performance-section--hero .performance_actions a.learn_more {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 20px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: 999px;
}

.performance-section--hero .performance_actions button.free_quote > *,
.performance-section--hero .performance_actions a.learn_more > * {
  position: relative;
  z-index: 1;
}

.performance-section--hero .performance_actions button.free_quote::after,
.performance-section--hero .performance_actions a.learn_more::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left 0.62s var(--kk-ease);
}

.performance-section--hero .performance_actions button.free_quote:hover::after,
.performance-section--hero .performance_actions a.learn_more:hover::after {
  left: 130%;
}

.performance-section--hero .performance_actions button.free_quote svg,
.performance-section--hero .performance_actions a.learn_more svg {
  transition: transform 0.32s var(--kk-ease);
}

.performance-section--hero .performance_actions button.free_quote:hover svg {
  transform: translateX(3px);
}

/* The hero tint has faded to plain white by the time it reaches this row, so
   kore's own --line-2 ring (1.13:1 on white) leaves the pill with no readable
   edge -- worst on a phone, where it takes up most of the screen. A quarter of
   the ink instead: still quiet next to the solid pill, but the shape reads. */
.performance-section--hero .performance_actions a.learn_more {
  background: #fff;
  color: var(--kk-ink);
  border: 0;
  box-shadow: inset 0 0 0 1.5px rgba(11, 21, 36, 0.34);
}

.performance-section--hero .performance_actions a.learn_more:hover {
  box-shadow: inset 0 0 0 1.5px var(--kk-ink);
  color: var(--kk-ink);
}

@media (max-width: 576px) {
  .kk-hero-badge > span {
    font-size: 0.76rem;
  }
}

/* ==================================================================== v5 */

:root {
  --kk-muted-2: #8593a6;
}

/* nav: 13px, and every item centered on one line */
.header .wrapper .left_list ul {
  align-items: center;
}

.header .wrapper .left_list ul li {
  display: flex;
  align-items: center;
  font-size: 13px;
}

.header .wrapper .left_list ul li a,
.header .wrapper .left_list ul li .dropdown-trigger {
  font-size: 13px;
  line-height: 1.2;
  margin: 0;
  padding: 8px 12px;
}

/* ---------------------------------------------------------- footer, kore.co
   Left brand column carries the logo, tagline, newsletter and socials; the
   link columns get small uppercase gray headings; the bottom bar splits
   copyright left, legal right. */
.footer .footer-links__brand {
  max-width: 430px;
}

.footer .footer-links__tagline {
  color: var(--kk-muted);
  font-size: 0.95rem;
}

.footer .stay-connected__title {
  font-family: var(--kk-font-display);
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: var(--kk-ink);
  margin: 22px 0 12px;
}

.footer .stay-connected__form {
  gap: 10px;
  flex-wrap: nowrap;
}

.footer .stay-connected__input-wrap {
  min-width: 0;
}

.footer .stay-connected__input {
  height: 46px;
  border-radius: 999px;
  padding: 0 18px;
  font-size: 0.95rem;
}

.footer .stay-connected__btn {
  height: 46px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--kk-cyan);
  border: 0;
  color: #fff;
  font-size: 0.95rem;
  flex: none;
}

.footer .stay-connected__btn:hover {
  background: #009fcb;
  color: #fff;
}

.footer .footer-links__socials {
  margin-top: 24px;
}

.footer .footer-links__heading {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kk-muted-2);
  margin-bottom: 16px;
}

.footer .footer-links__list li {
  margin-bottom: 10px;
  font-size: 0.95rem;
}

.footer .footer-links__list a,
.footer .footer-links__list span {
  color: var(--kk-ink-2);
}

.footer .footer-links__list a:hover {
  color: var(--kk-blue);
}

.footer .footer_right_grid {
  gap: clamp(28px, 5vw, 90px);
}

.footer .terms_conditions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
  border-top: 1px solid var(--kk-line);
  padding: 20px 28px;
  font-size: 0.9rem;
  color: var(--kk-muted);
}

.footer .terms_conditions span {
  margin-right: auto;
}

.footer .terms_conditions a {
  color: var(--kk-ink-2);
}

@media (max-width: 576px) {
  .footer .stay-connected__form {
    flex-wrap: wrap;
  }
}

/* bottom bar sits on the same paper as the rest of the footer */
.footer .terms_conditions {
  background: transparent;
}

/* background-clip: text only paints the content box; with line-height 1.02
   the "y" descender fell outside it and rendered transparent. The padding
   extends the painted area under the tail, the margin gives the space back. */
.kk-grad {
  display: inline-block;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

/* the old fixed button height squeezed the pills to 40px; kore's are 52px
   (12px padding + text line + border) */
.performance-section--hero .performance_actions button.free_quote,
.performance-section--hero .performance_actions a.learn_more {
  height: auto;
  min-height: 0;
  line-height: 1.62;
}

/* ==================================================================== v6
   Footer brought to the kore.co arrangement: brand pitch under the logo,
   newsletter with no heading, socials as text links in the bottom bar. */

.footer .footer-links__logo {
  height: 36px;
  width: auto;
}

.footer .footer-links__tagline {
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--kk-muted);
}

.footer .footer-links__pitch {
  margin-top: 6px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--kk-muted);
  max-width: 46ch;
}

.footer .stay-connected__form {
  margin-top: 22px;
}

.footer .terms_conditions {
  font-size: 0.86rem;
  gap: 14px 28px;
}

.footer .kk-footer-social,
.footer .kk-footer-legal {
  display: flex;
  align-items: center;
  gap: 18px;
}

.footer .kk-footer-social a,
.footer .kk-footer-legal a {
  color: var(--kk-ink-2);
}

.footer .kk-footer-social a:hover,
.footer .kk-footer-legal a:hover {
  color: var(--kk-blue);
}

/* kore keeps the bar clear of the floating back-to-top button */
.footer .terms_conditions {
  padding-right: 110px;
}

/* ==================================================================== v7
   Footer brand spacing and link hover matched to kore.co exactly. */

.footer .footer-links__logo {
  height: 30px;
}

.footer .footer-links__tagline {
  margin: 6px 0 0;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
}

.footer .footer-links__pitch {
  margin: 8px 0 0;
}

.footer .footer-links__list li {
  font-size: 0.92rem;
  margin-bottom: 12px;
}

.footer .footer-links__list a {
  display: inline-block;
  width: fit-content;
  transition: color 0.32s var(--kk-ease), transform 0.32s var(--kk-ease);
}

.footer .footer-links__list a:hover {
  color: var(--kk-blue);
  transform: translateX(3px);
}

.footer .kk-footer-social a,
.footer .kk-footer-legal a {
  transition: color 0.32s var(--kk-ease);
}

/* bottom bar aligns with the footer container, like kore's k-footer__bottom */
.footer .terms_conditions {
  display: block;
  padding: 0;
}

.footer .terms_conditions__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  padding-top: 22px;
  padding-bottom: 22px;
  padding-right: 104px;
}

/* the divider follows the container width too */
.footer .terms_conditions {
  border-top: 0;
}

.footer .terms_conditions__inner {
  border-top: 1px solid var(--kk-line);
}

/* ==================================================================== v8
   Pre-footer CTA card, ported from kore.co's k-cta. */

.kk-cta {
  padding: clamp(20px, 2vw, 30px) 0 clamp(60px, 7vw, 110px);
}

.kk-cta__card {
  position: relative;
  overflow: hidden;
  border-radius: 34px;
  background: var(--kk-paper);
  border: 1px solid var(--kk-line);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 0;
  align-items: stretch;
}

.kk-cta__body {
  position: relative;
  z-index: 2;
  padding: clamp(34px, 4.2vw, 64px);
  align-self: center;
}

.kk-cta__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kk-muted-2);
}

.kk-cta__eyebrow::after {
  content: "";
  height: 1px;
  width: 46px;
  background: var(--kk-line-2);
}

.kk-cta__title {
  font-family: var(--kk-font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
  line-height: 1.07;
  margin: 18px 0 16px;
  letter-spacing: -0.032em;
  text-wrap: balance;
  color: var(--kk-ink);
}

.kk-cta__text {
  color: var(--kk-muted);
  max-width: 48ch;
}

.kk-cta__who {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 26px;
  flex-wrap: wrap;
}

.kk-cta__faces {
  display: flex;
}

.kk-cta__faces img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--kk-paper);
  background: var(--kk-paper-2);
}

.kk-cta__faces img + img {
  margin-left: -11px;
}

.kk-cta__wholine {
  font-size: 0.86rem;
  color: var(--kk-muted);
}

.kk-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.kk-cta__btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 20px;
  border-radius: 999px;
  font-family: var(--kk-font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.62;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.32s var(--kk-ease), color 0.32s var(--kk-ease), box-shadow 0.34s var(--kk-ease);
}

.kk-cta__btn > * {
  position: relative;
  z-index: 1;
}

.kk-cta__btn::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left 0.62s var(--kk-ease);
}

.kk-cta__btn:hover::after {
  left: 130%;
}

.kk-cta__btn--dark {
  background: var(--kk-ink);
  color: #fff;
  border: 1.5px solid var(--kk-ink);
}

.kk-cta__btn--dark:hover {
  background: var(--kk-blue);
  border-color: var(--kk-blue);
  color: #fff;
}

.kk-cta__btn--dark svg {
  transition: transform 0.32s var(--kk-ease);
}

.kk-cta__btn--dark:hover svg {
  transform: translateX(3px);
}

.kk-cta__btn--white {
  background: #fff;
  color: var(--kk-ink);
  border: 0;
  box-shadow: inset 0 0 0 1.5px var(--kk-line-2);
}

.kk-cta__btn--white:hover {
  box-shadow: inset 0 0 0 1.5px var(--kk-ink);
}

.kk-cta__points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.84rem;
  color: var(--kk-muted-2);
}

.kk-cta__points li {
  display: flex;
  align-items: center;
}

.kk-cta__media {
  position: relative;
  z-index: 1;
  min-height: 340px;
}

.kk-cta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 980px) {
  .kk-cta__card {
    grid-template-columns: 1fr;
  }

  .kk-cta__media {
    min-height: 240px;
    order: -1;
  }
}

/* kore.co tilt (the inline script sets --rx/--ry) */
[data-tilt] {
  transform-style: preserve-3d;
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.5s var(--kk-ease);
}

[data-tilt].is-tilting {
  transition: transform 0.12s linear;
}

/* ==================================================================== v9
   The shared stylesheet now carries the kore FAQ cards; the earlier skin
   rules for the flat list must not fight them. */
.faq-section .faq-question {
  padding: 20px 24px;
  font-family: var(--kk-font-display);
  font-weight: 400;
  font-size: 1.04rem;
  letter-spacing: -0.015em;
}

/* ==================================================================== v10
   The skin's h2 group must not blow the FAQ eyebrow pill back up. */
.faq-title {
  font-family: var(--kk-font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.4;
  color: var(--kk-blue);
}

.faq-section .faq-subtitle {
  font-family: var(--kk-font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.028em;
  color: var(--kk-ink);
}

/* ==================================================================== v11
   Header CTA at kore's small-button size: the original selector was more
   specific, so this one matches it. */
.header .right-buttons button.get_free_quote_btn {
  font-size: 0.86rem;
  font-weight: 600;
  height: 38px;
  padding: 0 20px;
  line-height: 1;
}

/* ==================================================================== v12
   kore's k-btn hover on every remaining call to action: the diagonal light
   sheen sweeps across, the fill shifts, nothing lifts. */

.automation-section .automation-card .get_started_btn,
.restaurant-packages-section .compact-box a,
.restaurant-packages-section .rp-btn-get-started,
.header .right-buttons .get_free_quote_btn,
.contact-section .contact-submit-btn,
.footer .stay-connected__btn,
.resource-card__btn {
  position: relative;
  overflow: hidden;
  transition: background-color 0.32s var(--kk-ease), color 0.32s var(--kk-ease),
    border-color 0.32s var(--kk-ease);
}

.automation-section .automation-card .get_started_btn::after,
.restaurant-packages-section .compact-box a::after,
.restaurant-packages-section .rp-btn-get-started::after,
.header .right-buttons .get_free_quote_btn::after,
.contact-section .contact-submit-btn::after,
.footer .stay-connected__btn::after,
.resource-card__btn::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left 0.62s var(--kk-ease);
}

.automation-section .automation-card .get_started_btn:hover::after,
.restaurant-packages-section .compact-box a:hover::after,
.restaurant-packages-section .rp-btn-get-started:hover::after,
.header .right-buttons .get_free_quote_btn:hover::after,
.contact-section .contact-submit-btn:hover::after,
.footer .stay-connected__btn:hover::after,
.resource-card__btn:hover::after {
  left: 130%;
}

/* the dark fills shift to brand blue on hover, like kore's k-btn--dark */
.contact-section .contact-submit-btn:hover {
  background: var(--kk-blue);
  border-color: var(--kk-blue);
  color: #fff;
  transform: none;
  box-shadow: none;
}

/* ==================================================================== v13
   Resource cards rebuilt as kore's ind-card: photo fills the card, a dark
   gradient anchors the bottom, title sits bottom-left with an arrow link,
   and the card lifts while the photo zooms on hover. */

.resource-card {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 26px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 26px;
  color: #fff;
  isolation: isolate;
  transform-origin: 50% 0;
  transition: transform 0.5s cubic-bezier(0.16, 0.84, 0.3, 1);
}

.resource-card:hover {
  transform: translateY(-6px) scale(1.02);
  border: 0;
  box-shadow: none;
}

.resource-card .resource-card__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  transition: transform 1.2s cubic-bezier(0.16, 0.84, 0.3, 1);
}

.resource-card:hover .resource-card__bg {
  transform: scale(1.06);
}

.resource-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(11, 21, 36, 0.05) 20%, rgba(11, 21, 36, 0.78) 74%, rgba(7, 16, 25, 0.94));
  transition: opacity 0.55s cubic-bezier(0.16, 0.84, 0.3, 1);
}

.resource-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: linear-gradient(180deg, rgba(11, 21, 36, 0.3) 0%, rgba(11, 21, 36, 0.86) 60%, rgba(7, 16, 25, 0.96));
  transition: opacity 0.55s cubic-bezier(0.16, 0.84, 0.3, 1);
}

.resource-card:hover::before {
  opacity: 1;
}

.resource-card .resource-card__title {
  color: #fff;
  font-size: 1.5rem;
  text-align: left;
  margin: 0 0 10px;
  position: static;
}

/* the pill becomes kore's quiet arrow link */
.resource-card .resource-card__btn {
  width: auto;
  padding: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--kk-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
}

.resource-card .resource-card__btn::after {
  content: "\2192";
  position: static;
  inset: auto;
  width: auto;
  background: none;
  transform: none;
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.32s var(--kk-ease);
}

.resource-card:hover .resource-card__btn::after,
.resource-card .resource-card__btn:hover::after {
  left: auto;
  transform: translateX(3px);
}

.resource-card .resource-card__btn:hover {
  background: none;
  color: #fff;
}

/* the title was a flex:1 centered band; kore anchors it above the link */
.resource-card .resource-card__title {
  flex: 0 0 auto;
  display: block;
  width: auto;
  justify-content: flex-start;
}

/* ==================================================================== v14
   kore's dark buttons keep their color on hover; the sheen sweep alone
   carries the state. Undo the blue shifts added earlier. */
.performance-section--hero .performance_actions button.free_quote:hover,
.header .right-buttons .get_free_quote_btn:hover,
.automation-section .automation-card .get_started_btn:hover,
.restaurant-packages-section .compact-box a:hover,
.restaurant-packages-section .rp-btn-get-started:hover,
.kk-cta__btn--dark:hover,
.contact-section .contact-submit-btn:hover,
.footer .stay-connected__btn:hover,
.kk-hero-badge__btn:hover {
  background: var(--kk-ink);
  border-color: var(--kk-ink);
  color: #fff;
}

/* the footer subscribe is cyan, so it holds cyan */
.footer .stay-connected__btn,
.footer .stay-connected__btn:hover {
  background: var(--kk-cyan);
  border-color: var(--kk-cyan);
}

/* ==================================================================== v15
   The FAQ block was carrying twice the section air. */
.faq-section {
  padding: clamp(26px, 2.4vw, 38px) 0;
}

/* the Learn More arrow points down (it scrolls to a section) and nudges down */
.performance-section--hero .performance_actions a.learn_more:hover svg {
  transform: translateY(3px);
}

/* the legacy underline kept width:100%, pushing it past the pill's edge;
   left/right insets size it now */
.header .wrapper .left_list ul li a::after {
  width: auto;
  bottom: 4px;
}

/* ==================================================================== v16
   Restaurant Packages laid out like kore's plan card on online-ordering:
   paper section, centered head with a Pricing eyebrow, one narrow card. */

.restaurant-packages-section {
  background: var(--kk-paper);
}

.kk-eyebrow-pill {
  display: flex;
  width: fit-content;
  margin: 0 auto 16px;
  align-items: center;
  font-family: var(--kk-font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kk-blue);
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #d3e3ef;
}

.restaurant-packages-section .rp-title {
  text-align: center;
  margin-bottom: 8px;
}

.restaurant-packages-section .rp-subtitle {
  text-align: center;
  font-size: 1rem;
  margin-bottom: clamp(28px, 3vw, 40px);
}

.restaurant-packages-section .compact-box {
  max-width: 470px;
  margin-left: auto;
  margin-right: auto;
  background: #fff;
  border: 1px solid var(--kk-line);
  border-radius: 26px;
  box-shadow: none;
  padding: 30px;
}

.restaurant-packages-section .compact-box .row {
  display: block;
}

.restaurant-packages-section .compact-box .row > [class*="col-"] {
  width: 100%;
  max-width: 100%;
  flex: none;
  padding: 0;
}

.restaurant-packages-section .compact-accent {
  border: 0;
  padding: 0;
}

.restaurant-packages-section .compact-accent h3 {
  font-family: var(--kk-font-display);
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--kk-ink);
}

.restaurant-packages-section .compact-accent p {
  font-size: 0.82rem;
  color: var(--kk-muted-2);
  margin: 3px 0 0;
}

.restaurant-packages-section .compact-border {
  display: none;
}

.restaurant-packages-section .compact-price-box {
  background: none;
  border: 0;
  padding: 0;
  margin: 18px 0 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.restaurant-packages-section .compact-price {
  order: 1;
  font-family: var(--kk-font-display);
  font-weight: 400;
  font-size: 2.6rem;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--kk-ink);
}

.restaurant-packages-section .compact-monthly {
  order: 2;
  color: var(--kk-muted);
  font-size: 0.88rem;
}

.restaurant-packages-section .compact-starting {
  order: 3;
  width: 100%;
  font-size: 0.82rem;
  color: var(--kk-muted-2);
  margin-top: 6px;
}

.restaurant-packages-section .compact-right {
  margin-top: 22px;
  padding: 0;
}

.restaurant-packages-section .compact-right h4 {
  font-family: var(--kk-font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kk-muted-2);
  margin: 0 0 12px;
}

.restaurant-packages-section .compact-right .check-list {
  display: grid;
  gap: 11px;
  margin: 0;
}

.restaurant-packages-section .compact-right .check-list li {
  font-size: 0.91rem;
  color: var(--kk-ink-2);
}

.restaurant-packages-section .compact-right .no_checkmark {
  font-size: 0.85rem;
  color: var(--kk-muted);
}

.restaurant-packages-section .compact-right .no_checkmark b {
  font-weight: 600;
  color: var(--kk-ink-2);
}

/* the card CTA is kore's ghost pill */
.restaurant-packages-section .compact-box a,
.restaurant-packages-section .compact-box a:hover {
  background: #fff;
  color: var(--kk-ink);
  border: 1.5px solid var(--kk-line-2);
  border-radius: 999px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  margin-top: 20px;
}

.restaurant-packages-section .compact-box a:hover {
  border-color: var(--kk-ink);
}

/* v16 fixups: the legacy selectors carry more specificity, so these match
   their paths exactly to win the cascade */
.restaurant-packages-section .compact-box .compact-left .compact-accent {
  padding-left: 0;
  border-left: 0;
}

.restaurant-packages-section .compact-box .compact-left .compact-accent h3 {
  font-family: var(--kk-font-display);
  font-size: 1.2rem;
  color: var(--kk-ink);
}

.restaurant-packages-section .compact-box .compact-price-box {
  margin-top: 18px;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.restaurant-packages-section .compact-box .compact-price-box .compact-price {
  order: 1;
  font-family: var(--kk-font-display);
  font-size: 2.6rem;
  letter-spacing: -0.04em;
  color: var(--kk-ink);
}

.restaurant-packages-section .compact-box .compact-price-box .compact-monthly {
  order: 2;
  font-family: var(--kk-font-body);
  font-size: 0.88rem;
  color: var(--kk-muted);
  margin-left: 0;
}

.restaurant-packages-section .compact-box .compact-price-box .compact-starting {
  order: 3;
  width: 100%;
  font-family: var(--kk-font-body);
  font-size: 0.82rem;
  color: var(--kk-muted-2);
  margin: 4px 0 0;
}

.restaurant-packages-section .compact-box .check-list li {
  font-family: var(--kk-font-body);
  font-size: 0.91rem;
  color: var(--kk-ink-2);
}

.restaurant-packages-section .compact-box .check-list li:not(:last-child) {
  margin-bottom: 11px;
}

/* ==================================================================== v17
   The packages are kore's plan grid: four equal cards, "Most popular" flag
   on Main Course, taglines under the buttons, one shared add-on line. */

:root {
  --kk-accent: #0f766e;
}

.kk-plans {
  display: grid;
  grid-template-columns: minmax(0, 470px);
  justify-content: center;
  gap: 18px;
  align-items: stretch;
}

/* all four cards open into one row */
.kk-plans:has(.rp-expanded.open) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.restaurant-packages-section .rp-expanded {
  display: none;
  max-height: none;
  overflow: visible;
}

.restaurant-packages-section .rp-expanded.open {
  display: contents;
}

.kk-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px;
  background: #fff;
  border: 1px solid var(--kk-line);
  border-radius: 26px;
}

.kk-plan--best {
  border-color: var(--kk-accent);
}

.kk-plan__flag {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--kk-accent);
  color: #fff;
  font-family: var(--kk-font-body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.kk-plan__name {
  font-family: var(--kk-font-display);
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  color: var(--kk-ink);
  margin: 0;
}

.kk-plan__tier {
  font-size: 0.8rem;
  color: var(--kk-muted-2);
  margin: 3px 0 0;
}

.kk-plan__price {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 18px 0 3px;
}

.kk-plan__price b {
  font-family: var(--kk-font-display);
  font-weight: 400;
  font-size: 2.4rem;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--kk-ink);
}

.kk-plan__price span {
  color: var(--kk-muted);
  font-size: 0.85rem;
}

.kk-plan__note {
  font-size: 0.8rem;
  color: var(--kk-muted-2);
  margin: 0;
}

.kk-plan__label {
  font-family: var(--kk-font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--kk-muted-2);
  margin: 18px 0 0;
}

.restaurant-packages-section .kk-plan__list {
  flex: 1;
  align-content: start;
  margin: 14px 0 0;
}

.restaurant-packages-section .kk-plan__list li {
  text-align: left;
}

.restaurant-packages-section .check-list li.kk-plan__small {
  font-size: 0.78rem;
  color: var(--kk-muted-2);
  padding-left: 0;
}

.kk-plan__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  margin-top: 20px;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid var(--kk-line-2);
  color: var(--kk-ink);
  font-family: var(--kk-font-body);
  font-size: 0.93rem;
  font-weight: 600;
  transition: border-color 0.32s var(--kk-ease), background-color 0.32s var(--kk-ease);
}

.kk-plan__btn:hover {
  border-color: var(--kk-ink);
  color: var(--kk-ink);
}

.kk-plan__btn--accent {
  background: var(--kk-accent);
  border-color: var(--kk-accent);
  color: #fff;
}

.kk-plan__btn--accent:hover {
  background: #0d635c;
  border-color: #0d635c;
  color: #fff;
}

.kk-plan__quote {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--kk-muted);
  text-align: center;
  margin: 14px 0 0;
}

/* every card reserves the tagline slot, so the four buttons share one line */
.kk-plan__quote {
  min-height: 3.6rem;
}

.kk-plans-fine {
  text-align: center;
  font-size: 0.85rem;
  color: var(--kk-muted);
  margin: 18px 0 0;
}

@media (max-width: 1100px) {
  .kk-plans:has(.rp-expanded.open) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .kk-plans,
  .kk-plans:has(.rp-expanded.open) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==================================================================== v18
   Product-page CTAs (.trx-btn) take the kore pill: 999px radius, sheen
   sweep, ink primary, hairline ghost. */

.trx-btn.trx-btn {
  position: relative;
  overflow: hidden;
  font-family: var(--kk-font-body);
  font-size: 0.96rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
  padding: 15px 24px;
  border-radius: 999px;
}

.trx-btn.trx-btn::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left 0.62s var(--kk-ease);
}

.trx-btn.trx-btn:hover::after {
  left: 130%;
}

.trx-btn.trx-btn--primary {
  background: var(--kk-ink);
  border-color: var(--kk-ink);
  color: #fff;
}

.trx-btn.trx-btn--primary:hover {
  background: var(--kk-ink);
  border-color: var(--kk-ink);
}

.trx-btn.trx-btn--ghost {
  background: #fff;
  color: var(--kk-ink);
  border-color: var(--kk-line-2);
}

.trx-btn.trx-btn--ghost:hover {
  border-color: var(--kk-ink);
  background: #fff;
}

/* ==================================================================== v19
   kore's tagline reserve, done kore's way: an empty tagline collapses, but
   while the four cards sit in a row every card holds a 4.5em slot so the
   buttons stay level. A lone collapsed card reserves nothing. */
.kk-plan__quote {
  min-height: 0;
}

.kk-plan__quote:empty {
  display: none;
}

@media (min-width: 621px) {
  .kk-plans:has(.rp-expanded.open) .kk-plan__quote {
    display: block;
    min-height: 4.5em;
  }
}

/* ==================================================================== v20
   Sign In carries no hover effect at all. */
.header .right-buttons .sign_in_btn:hover,
.header .right-buttons .sign_in_btn:focus {
  background: none;
  background-color: transparent;
  color: var(--kk-ink-2);
}

/* ==================================================================== v21
   Product-page heroes at the home hero's scale (the fixed 80px was far past
   home's clamp). Doubled class outranks the page stylesheets loading later. */
body:not(.howto-page) .trx-hero__title.trx-hero__title {
  font-family: var(--kk-font-display);
  font-size: clamp(2.45rem, 5.4vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.038em;
}

body:not(.howto-page) .trx-hero__sub.trx-hero__sub {
  font-family: var(--kk-font-body);
  font-size: clamp(1.02rem, 1.3vw, 1.2rem);
  line-height: 1.6;
  color: var(--kk-muted);
  max-width: 62ch;
}

/* ==================================================================== v22
   Product-page stat bands become kore's metrics: left-aligned columns with a
   2px top rule, gradient figures, bold labels. Doubled classes outrank the
   page stylesheets that load after this one. */
.trx-band.trx-band {
  background: #fff;
  padding: clamp(44px, 3.8vw, 58px) 0;
}

.trx-band .trx-band__grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(20px, 3vw, 44px);
}

.trx-band .trx-band__item {
  align-items: flex-start;
  text-align: left;
  padding: 26px 0 0;
  border-top: 2px solid var(--kk-line);
  transition: border-color 0.32s var(--kk-ease);
}

.trx-band .trx-band__item + .trx-band__item {
  border-left: 0;
}

.trx-band .trx-band__item:hover {
  border-top-color: var(--kk-cyan);
}

.trx-band .trx-band__num {
  font-family: var(--kk-font-display);
  font-size: clamp(1.9rem, 2.9vw, 2.7rem);
  line-height: 0.92;
  letter-spacing: -0.05em;
  margin-bottom: 0;
  background: linear-gradient(115deg, var(--kk-ink) 8%, var(--kk-blue) 52%, var(--kk-cyan) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding-bottom: 0.08em;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .trx-band .trx-band__num {
    background: none;
    color: var(--kk-ink);
    -webkit-text-fill-color: currentColor;
  }
}

.trx-band .trx-band__label {
  font-family: var(--kk-font-display);
  font-size: 1.05rem;
  letter-spacing: -0.015em;
  color: var(--kk-ink);
  margin-top: 14px;
  max-width: none;
}

/* ==================================================================== v23
   Product heroes carry the same backdrop as the home hero: the blue-white
   tint with kore's 64px grid fading down from the top. */
body:not(.howto-page) .trx-hero.trx-hero {
  background: linear-gradient(180deg, #f7fbff 0%, #ffffff 44%);
}

body:not(.howto-page) .trx-hero.trx-hero::before {
  background-image:
    linear-gradient(to right, rgba(11, 21, 36, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 21, 36, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 78%);
}

/* ==================================================================== v24
   kore keeps elevation off: the hero tablet sits flat, no drop shadow. */
.trx-ipad.trx-ipad {
  box-shadow: none;
}

/* ==================================================================== v25
   Header arranged like kore: logo first on the left, nav beside it, and the
   quote button with Sign In together on the right. Desktop only; the
   sub-1330px grid (hamburger | logo) stays as it is. */
@media (min-width: 1330.02px) {
  .header .wrapper {
    justify-content: flex-start;
    gap: 26px;
  }

  .header .header-logo {
    order: -1;
  }

  .header .right-buttons {
    margin-left: auto;
  }
}

/* ==================================================================== v26
   The What We Offer trigger takes the same centered cyan underline as the
   nav links, replacing the off-center gradient bar. */
.header .wrapper .left_list ul li .dropdown-trigger {
  position: relative;
}

.header .wrapper .left_list ul li .dropdown-trigger::after {
  left: 13px;
  right: 13px;
  bottom: 4px;
  width: auto;
  height: 2px;
  background: var(--kk-cyan);
  border-radius: 2px;
}

/* ==================================================================== v27
   Mobile header: logo on the left, hamburger on the right, no Sign In. */
@media (max-width: 1330px) {
  .header .wrapper {
    grid-template-columns: 1fr auto;
  }

  .header .header-logo {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .header .wrapper .hamburger {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .header .right-buttons {
    display: none;
  }
}

/* bootstrap's d-flex on the element is !important, so this must be too */
@media (max-width: 1330px) {
  .header .right-buttons {
    display: none !important;
  }
}

/* ==================================================================== v28
   kore's scroll reveal: elements rise 28px and fade in on kore's soft
   decelerate, with per-element --rd delays scaled exactly like kore's.
   Gated on .js-kk (set by script) so nothing hides without JavaScript. */
.js-kk .kk-reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 0.62s cubic-bezier(0.16, 0.84, 0.3, 1),
    transform 0.68s cubic-bezier(0.16, 0.84, 0.3, 1);
  transition-delay: calc(var(--rd, 0ms) * 0.62);
  will-change: opacity, transform;
}

.js-kk .kk-reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-kk .kk-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==================================================================== v29
   The gray band tone (#f5f5f7) becomes kore's paper everywhere it is used:
   .trx-status, .trx-dash, .trx-sources and every other section or tile on
   the token. html:root outranks the page sheets' plain :root. */
html .tr-page,
html .oo-page,
html .rr-page,
html .vx-page,
html .mp-page,
html .hw-page,
html [class*="-page"] {
  --trx-bg2: #fbfcfe;
}

/* ==================================================================== v30
   Testimonials become kore's quote cards: white bordered cards in a slider,
   quote mark, five gold stars, hairline, monogram + name + role, with round
   ghost arrows underneath. */
.testimonials-swiper .swiper-slide {
  height: auto;
  display: flex;
}

.kk-quote {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  border: 1px solid var(--kk-line);
  border-radius: 18px;
  padding: 26px;
}

.kk-quote__mark {
  font-family: var(--kk-font-display);
  font-size: 2.2rem;
  line-height: 0.6;
  color: #b9cbdd;
  margin-bottom: 16px;
}

.kk-quote__text {
  flex: 1;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--kk-ink-2);
  margin: 0 0 18px;
}

.kk-quote__stars {
  display: flex;
  gap: 3px;
  margin-bottom: 14px;
}

.kk-quote__stars svg {
  fill: #feba01;
}

.kk-quote__who {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--kk-line);
  padding-top: 14px;
}

.kk-quote__mono {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--mono, var(--kk-cyan));
  color: #fff;
  font-family: var(--kk-font-body);
  font-size: 0.85rem;
  font-weight: 700;
}

.kk-quote__who > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.kk-quote__name {
  font-family: var(--kk-font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--kk-ink);
}

.kk-quote__role {
  font-size: 0.78rem;
  color: var(--kk-muted);
}

.kk-quotes-nav {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.kk-slider-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--kk-line-2);
  background: #fff;
  color: var(--kk-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 0.25s var(--kk-ease), color 0.25s var(--kk-ease), border-color 0.25s var(--kk-ease);
}

.kk-slider-btn:hover {
  background: var(--kk-ink);
  border-color: var(--kk-ink);
  color: #fff;
}

/* the slide is a column flex box, so the card has to claim its full height,
   otherwise every card stops at its own content and the row steps */
.testimonials-swiper .swiper-wrapper {
  align-items: stretch;
}

.testimonials-swiper .swiper-slide .kk-quote {
  flex: 1 1 auto;
  height: 100%;
}

/* A longer role wraps to three lines and makes that card's footer taller,
   which lifted its stars and name out of line with the row. The footer box is
   a fixed height, top-anchored, so every card's attribution starts on the
   same line however many lines the role runs to. */
.kk-quote__who {
  min-height: 80px;
  align-items: flex-start;
}

/* Pin the stars + attribution to the card floor as one group, rather than
   letting the quote text flex: the text absorbing the slack left each card's
   stars at its own height, so the row of stars stepped by a few pixels. */
.kk-quote__text {
  flex: 0 1 auto;
}

.kk-quote__stars {
  margin-top: auto;
}


/* ==================================================================== v31
   Eliminate fees: was a 5:1 photo band with two lines of white type laid
   over it. Rebuilt in the kore card language: the claim is shown rather
   than asserted, in a panel that puts the two cases on the same scale, and
   the photograph runs as a strip at its own proportions instead of being
   cropped to a sliver behind the text. */
.kk-fees__card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--kk-line);
  border-radius: 34px;
}

.kk-fees__top {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(26px, 3.4vw, 54px);
  align-items: center;
  padding: clamp(28px, 3.4vw, 52px);
}

.kk-fees__eyebrow {
  margin: 0 0 16px;
}

.kk-fees__title {
  margin: 0 0 14px;
  text-wrap: balance;
}

.kk-fees__text {
  color: var(--kk-muted);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 46ch;
  margin: 0;
}

.kk-fees__foot {
  margin-top: clamp(20px, 2.2vw, 28px);
}

.kk-fees__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--kk-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--kk-ink);
}

.kk-fees__link svg {
  transition: transform 0.32s var(--kk-ease);
}

.kk-fees__link:hover {
  color: var(--kk-blue);
}

.kk-fees__link:hover svg {
  transform: translateX(3px);
}

.kk-fees__note {
  margin: 10px 0 0;
  font-size: 0.8rem;
  color: var(--kk-muted-2);
}

/* ---- the comparison panel ---- */
.kk-fees__panel {
  background: var(--kk-paper);
  border: 1px solid var(--kk-line);
  border-radius: 22px;
  padding: clamp(20px, 2.2vw, 28px);
}

.kk-fees__panel-cap {
  display: block;
  font-family: var(--kk-font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kk-muted-2);
  margin-bottom: 20px;
}

.kk-fees__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 14px;
  align-items: baseline;
}

.kk-fees__row + .kk-fees__row {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--kk-line);
}

.kk-fees__label {
  font-family: var(--kk-font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kk-muted-2);
}

.kk-fees__num {
  font-family: var(--kk-font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.4vw, 2.2rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--kk-ink-2);
  text-align: right;
  padding-bottom: 0.06em;
}

/* The track is one whole ticket and the fill is the part that stays with
   the restaurant, so both cases can be read against the same scale. */
.kk-fees__bar {
  grid-column: 1 / -1;
  display: block;
  height: 8px;
  margin: 14px 0 10px;
  border-radius: 999px;
  background: #e9eef4;
  overflow: hidden;
}

.kk-fees__bar i {
  display: block;
  height: 100%;
  width: var(--keep);
  border-radius: inherit;
  background: #b9c6d4;
}

.kk-fees__bar--kore i {
  background: linear-gradient(90deg, var(--kk-blue), var(--kk-cyan));
}

/* Grow the bars as the card arrives, but only where the reveal script runs:
   with no JavaScript they simply start at full width. */
.js-kk .kk-fees__bar i {
  width: 0;
  transition: width 1.05s cubic-bezier(0.16, 0.84, 0.3, 1) 0.3s;
}

.js-kk .kk-fees__card.is-in .kk-fees__bar i {
  width: var(--keep);
}

.kk-fees__keep {
  grid-column: 1 / -1;
  font-family: var(--kk-font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--kk-ink);
}

.kk-fees__row--kore .kk-fees__keep {
  color: var(--kk-blue);
}

/* ---- the photograph, at its own proportions ---- */
.kk-fees__media {
  aspect-ratio: 1920 / 357;
  min-height: 150px;
}

.kk-fees__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  display: block;
}

@media (max-width: 900px) {
  .kk-fees__top {
    grid-template-columns: 1fr;
  }
}


/* ==================================================================== v32
   Rates / savings. Was a photo band with two claims taking it in turns
   behind a rotating animation, so only one was ever readable, then a flat
   pair of figures. Now the claim is something you can test: the slider runs
   the same arithmetic as the merchant-processing calculator (a typical 2.9%
   against Kore's 1.8%, over twelve months), and it opens on the $60k/month
   restaurant the headline claim is written about, where it lands on the
   $7,920 that claim rounds to. */
.kk-rates__head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 24px clamp(32px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(28px, 3vw, 44px);
}

.kk-rates__head .kk-eyebrow-pill {
  margin: 0 0 16px;
}

.kk-rates__title {
  font-family: var(--kk-font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.028em;
  color: var(--kk-ink);
  margin: 0;
  text-wrap: balance;
}

.kk-rates__lede {
  margin: 0;
  color: var(--kk-muted);
  font-size: 1rem;
  line-height: 1.6;
}

.kk-rates__card {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--kk-line);
  border-radius: 34px;
  overflow: hidden;
}

/* ---- the slider side ---- */
.kk-calc {
  padding: clamp(26px, 3vw, 44px);
}

.kk-calc__volrow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
}

.kk-calc__vollabel {
  font-family: var(--kk-font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kk-muted-2);
}

.kk-calc__vol {
  font-family: var(--kk-font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--kk-ink);
}

/* The filled part of the track is painted with a gradient stop that JS moves
   through --p, so the slider reads as a progress bar rather than a control
   with a separate fill element. */
.kk-calc__range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  margin: 18px 0 0;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--kk-blue), var(--kk-cyan)) 0 / var(--p, 26%) 100% no-repeat,
    #e9eef4;
  cursor: pointer;
}

.kk-calc__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--kk-cyan);
  cursor: grab;
}

.kk-calc__range::-webkit-slider-thumb:active {
  cursor: grabbing;
  border-color: var(--kk-blue);
}

.kk-calc__range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--kk-cyan);
  cursor: grab;
}

.kk-calc__range:focus-visible {
  outline: 2px solid var(--kk-cyan);
  outline-offset: 4px;
}

.kk-calc__bars {
  margin-top: clamp(26px, 3vw, 36px);
  display: grid;
  gap: 20px;
}

.kk-calc__barhead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 14px;
  margin-bottom: 10px;
}

.kk-calc__barname {
  font-family: var(--kk-font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--kk-ink-2);
}

.kk-calc__barname em {
  font-style: normal;
  font-weight: 500;
  color: var(--kk-muted-2);
  margin-left: 6px;
}

.kk-calc__bar--kore .kk-calc__barname {
  color: var(--kk-blue);
}

.kk-calc__baryear {
  font-family: var(--kk-font-display);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--kk-ink);
}

.kk-calc__track {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: #eef2f7;
  overflow: hidden;
}

/* The Kore bar is shorter by the ratio of the two rates, so the gap left in
   its track is the money that stays in the restaurant. */
.kk-calc__track i {
  display: block;
  height: 100%;
  width: var(--w, 100%);
  border-radius: inherit;
  background: #c3ced9;
  transition: width 0.75s cubic-bezier(0.16, 0.84, 0.3, 1);
}

.kk-calc__bar--kore .kk-calc__track {
  background: color-mix(in srgb, var(--kk-cyan) 12%, #fff);
}

.kk-calc__bar--kore .kk-calc__track i {
  background: linear-gradient(90deg, var(--kk-blue), var(--kk-cyan));
}

.js-kk .kk-rates__card .kk-calc__track i {
  width: 0;
}

.js-kk .kk-rates__card.is-in .kk-calc__track i {
  width: var(--w, 100%);
  transition-delay: 0.25s;
}

/* ---- the result side ---- */
.kk-calc__result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(26px, 3vw, 44px);
  background: var(--kk-paper);
  border-left: 1px solid var(--kk-line);
}

.kk-calc__reskeep {
  margin-top: 0;
  font-size: 0.9rem;
  color: var(--kk-muted);
}

.kk-calc__save {
  font-family: var(--kk-font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.045em;
  margin: 6px 0 6px;
  padding-bottom: 0.08em;
  font-variant-numeric: tabular-nums;
}

.kk-calc__peryear {
  font-size: 0.9rem;
  color: var(--kk-ink-2);
}

.kk-rates__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-family: var(--kk-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--kk-ink);
}

.kk-rates__link svg {
  transition: transform 0.32s var(--kk-ease);
}

.kk-rates__link:hover {
  color: var(--kk-blue);
}

.kk-rates__link:hover svg {
  transform: translateX(3px);
}

.kk-calc__note {
  margin: 16px 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--kk-muted-2);
}

@media (max-width: 980px) {
  .kk-rates__head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .kk-rates__card {
    grid-template-columns: 1fr;
  }

  .kk-calc__result {
    border-left: 0;
    border-top: 1px solid var(--kk-line);
  }
}
/* ==================================================================== v33
   Hero shot. Replaced the 13.8MB Lottie card wall that held up first paint,
   and now runs the tablet clip on a loop. The frame only clips: it carries the
   radius and the overflow, and the media sizes itself, so the box lands on the
   media's own proportions. No border on the frame: with one, the clip (padding
   box) and the border (border box) disagree by a subpixel on fractional device
   pixel ratios, which reads as one corner being squarer than the others. */
.kk-heroshot {
  padding: clamp(26px, 3.4vw, 46px) 0 0;
}

/* Two apps, one row. Both clips are 16:9 at the same size, so the cards line
   up without either being forced to a ratio. */
.kk-heroshot__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  align-items: start;
}

.kk-heroshot__frame {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  line-height: 0;
  background: var(--kk-paper);
}

.kk-heroshot__video {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.7s cubic-bezier(0.16, 0.84, 0.3, 1);
}

/* A slow push in on hover, so the card answers the pointer without moving the
   grid around it. */
@media (hover: hover) {
  .kk-heroshot__frame:hover .kk-heroshot__video {
    transform: scale(1.035);
  }
}

/* The scrim covers the lower half of the clip, so the caption always has
   something to sit on whatever the footage is doing underneath it. */
.kk-heroshot__scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(11, 21, 36, 0.92) 0%,
    rgba(11, 21, 36, 0.74) 34%,
    rgba(11, 21, 36, 0.34) 68%,
    rgba(11, 21, 36, 0) 100%
  );
}

.kk-heroshot__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(16px, 2.2vw, 34px);
  z-index: 2;
  padding: 0 clamp(14px, 2vw, 28px);
  text-align: center;
  line-height: 1.15;
}

/* The cards run the full header width, so these clamps cap higher than a
   boxed container would want. */
.kk-heroshot__caplead {
  margin: 0;
  font-family: var(--kk-font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.9vw, 2.15rem);
  letter-spacing: -0.03em;
  color: #fff;
}

.kk-heroshot__capsub {
  margin: clamp(6px, 0.7vw, 11px) 0 0;
  font-family: var(--kk-font-body);
  font-size: clamp(0.78rem, 0.95vw, 1.05rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.84);
}

/* ---- entrances ----
   The frame fades up once the clip can play, and the caption animates in over
   it, replaying on every loop of the video (see index.js) so the text keeps
   time with footage that never stops. Both are gated on .js-kk, which the
   reveal script only sets when it is safe to animate, so with no JavaScript
   the clip and the caption are simply there. */
.js-kk .kk-heroshot__frame {
  opacity: 0;
}

.js-kk .kk-heroshot__frame.is-shown {
  animation: kkHeroIn 1.1s cubic-bezier(0.16, 0.84, 0.3, 1) both;
  /* index.js numbers the cards, so the second one follows the first in. */
  animation-delay: calc(var(--card-i, 0) * 150ms);
}

@keyframes kkHeroIn {
  from {
    opacity: 0;
    transform: scale(1.06);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- caption reveal ----
   index.js splits the lead into words, each in a mask of its own; the words
   rise out of those masks in sequence with the blur clearing as they land, and
   the second line follows once the last word is home. Driven by scroll: the
   script replays it whenever the shot comes back into view, and on every loop
   of the clip, so the text is never already finished when you arrive. */
.js-kk .kk-heroshot__caplead,
.js-kk .kk-heroshot__capsub {
  opacity: 0;
}

.js-kk .kk-heroshot__cap.is-in .kk-heroshot__caplead {
  opacity: 1;
}

.kk-heroshot__caplead .kk-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.09em; /* room for descenders inside the mask */
}

.kk-heroshot__caplead .kk-w > i {
  display: inline-block;
  font-style: normal;
}

.js-kk .kk-heroshot__caplead .kk-w > i {
  opacity: 0;
  transform: translate3d(0, 108%, 0);
}

.js-kk .kk-heroshot__cap.is-in .kk-heroshot__caplead .kk-w > i {
  animation: kkWordUp 0.95s cubic-bezier(0.16, 0.84, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 85ms);
}

@keyframes kkWordUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 108%, 0) skewY(4deg);
    filter: blur(9px);
  }
  55% {
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

.js-kk .kk-heroshot__cap.is-in .kk-heroshot__capsub {
  animation: kkSubIn 0.9s cubic-bezier(0.16, 0.84, 0.3, 1) both;
  animation-delay: calc(var(--sub-i, 3) * 85ms + 140ms);
}

@keyframes kkSubIn {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    letter-spacing: 0.16em;
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: none;
    letter-spacing: normal;
    filter: blur(0);
  }
}

/* Below this the two clips are too small side by side to read the captions,
   so they stack and each gets the full width back. */
@media (max-width: 992px) {
  .kk-heroshot__grid {
    grid-template-columns: 1fr;
  }

  .kk-heroshot__caplead {
    font-size: clamp(1.25rem, 4vw, 1.9rem);
  }

  .kk-heroshot__capsub {
    font-size: clamp(0.82rem, 2vw, 1rem);
  }
}

@media (max-width: 640px) {
  .kk-heroshot__frame {
    border-radius: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-kk .kk-heroshot__frame,
  .js-kk .kk-heroshot__frame.is-shown,
  .js-kk .kk-heroshot__caplead,
  .js-kk .kk-heroshot__capsub,
  .js-kk .kk-heroshot__caplead .kk-w > i {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }
}

/* Store links sit in the caption over the footage, so they carry an underline
   to read as links against a moving background rather than relying on colour. */
.kk-heroshot__caplink {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255, 255, 255, 0.5);
  transition:
    color 0.25s var(--kk-ease),
    text-decoration-color 0.25s var(--kk-ease);
}

.kk-heroshot__caplink:hover,
.kk-heroshot__caplink:focus-visible {
  color: var(--kk-cyan);
  text-decoration-color: var(--kk-cyan);
}

/* Not a link: it is the customer's own site, so there is no one URL to point
   at. It matches the store links in weight and colour to keep the line even,
   but skips the underline, which is this page's link affordance. */
.kk-heroshot__capstrong {
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}

/* Just above the stack point the cards are narrow enough that the longer of
   the two lines wraps while the shorter one does not, and the caption block is
   bottom-anchored -- so without a reserve the two titles end up sitting a line
   apart. Reserving two lines on both keeps them level through that band. Past
   1160px both lines clear a single line with room to spare, so the reserve
   comes off and the caption sits back where it does on a wide screen. */
@media (min-width: 993px) and (max-width: 1160px) {
  .kk-heroshot__capsub {
    min-height: 3em;
  }

  .kk-heroshot__cap {
    bottom: clamp(12px, 1.3vw, 22px);
  }
}

/* The orbs are sized in fixed px, which reads as a soft accent on a wide
   screen but swallows a phone: a 620px blob over a ~420px hero puts a blue
   wash right under the button row, so both pills lose their ground. Shrunk
   and pulled up here, they stay behind the headline and the buttons keep a
   clean white field. */
@media (max-width: 700px) {
  .kk-orb {
    opacity: 0.34;
    filter: blur(52px);
  }

  .kk-orb--a {
    width: 300px;
    height: 300px;
    top: -130px;
    left: -90px;
  }

  .kk-orb--b {
    width: 290px;
    height: 290px;
    top: 10px;
    right: -140px;
  }
}