/* /kh/business presentation overrides for shared content-business.html markup.
   Wording stays in the partial; this file only restyles for the cream theme. */

body.kh-biz-page main > section {
  padding-top: 0;
  padding-bottom: 0;
}

body.kh-biz-page .container {
  max-width: 1180px;
  width: 100%;
  padding-left: 28px;
  padding-right: 28px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

body.kh-biz-page {
  overflow-x: clip;
}

body.kh-biz-page h2 {
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 42px);
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: #171512;
}

body.kh-biz-page .eyebrow {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6E6759;
}

body.kh-biz-page .lead {
  color: #6E6759;
  font-weight: 500;
  font-size: 15.5px;
  line-height: 1.55;
}

/* -- Hero -- */
body.kh-biz-page .hero {
  padding: 70px 0 60px;
  background: transparent;
  min-height: 0;
  overflow-x: clip;
}

body.kh-biz-page .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 50px;
  align-items: center;
}

@media (max-width: 900px) {
  body.kh-biz-page .hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

body.kh-biz-page .hero h1 {
  font-weight: 800;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 16px 0 20px;
  color: #171512;
  overflow-wrap: anywhere;
}

body.kh-biz-page .hero .lead {
  font-size: 17px;
  max-width: 460px;
  margin-bottom: 30px;
}

/* Global phone stays in the shared partial; KH uses the mockup gradient card. */
body.kh-biz-page .hero .biz-hero-phone {
  display: none;
}

body.kh-biz-page .hero .biz-hero-visual {
  display: block;
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 360px;
  box-sizing: border-box;
  border-radius: 22px;
  background: #171512; /* ink bezel, same weight as screenshot frames */
  border: 10px solid #171512;
  overflow: hidden;
}

body.kh-biz-page .hero .biz-hero-visual .hero-visual__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 12px;
}

body.kh-biz-page .hero .biz-hero-visual .chip {
  position: absolute;
  z-index: 1;
  background: rgba(23, 21, 18, 0.85);
  color: #F5F1E6;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 99px;
  letter-spacing: 0.03em;
}

body.kh-biz-page .hero .biz-hero-visual .c1 {
  top: 24px;
  left: 24px;
}

body.kh-biz-page .hero .biz-hero-visual .c2 {
  top: 24px;
  right: 24px;
}

body.kh-biz-page .hero .biz-hero-visual .card-mock {
  position: absolute;
  z-index: 1;
  bottom: 50px;
  left: 24px;
  right: 24px;
  background: #F5F1E6;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 20px 40px -20px rgba(23, 21, 18, 0.4);
}

body.kh-biz-page .hero .biz-hero-visual .pname {
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 4px;
  color: #171512;
}

body.kh-biz-page .hero .biz-hero-visual .pmeta {
  font-size: 11.5px;
  color: #6E6759;
  font-weight: 600;
}

body.kh-biz-page .hero .biz-hero-visual[data-tone="light"] .chip {
  background: rgba(245, 241, 230, 0.92);
  color: #171512;
}

/* Page-level safety net against wide media / calc remnants */

/* -- Pain -- */
body.kh-biz-page .biz-pain {
  background: #ECE4CF;
  padding: 56px 0;
  margin-bottom: 80px;
}

body.kh-biz-page .biz-pain .section-panel {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

body.kh-biz-page .biz-pain h2 {
  margin-bottom: 32px;
  max-width: 900px;
}

body.kh-biz-page .biz-pain .feature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 820px) {
  body.kh-biz-page .biz-pain .feature-grid {
    grid-template-columns: 1fr;
  }
}

body.kh-biz-page .biz-pain .feature-card {
  background: #FBF8F0;
  border-radius: 16px;
  padding: 24px 22px 26px;
  border: none;
  border-top: 3px solid var(--pc, #E1492F);
  box-shadow: none;
}

body.kh-biz-page .biz-pain .feature-card:nth-child(1) { --pc: #E1492F; }
body.kh-biz-page .biz-pain .feature-card:nth-child(2) { --pc: #F0A63A; }
body.kh-biz-page .biz-pain .feature-card:nth-child(3) { --pc: #218071; }

body.kh-biz-page .biz-pain .feature-icon {
  display: inline-flex;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  background: var(--pc);
  color: #171512;
  font-size: 16px;
}

body.kh-biz-page .biz-pain .feature-card p {
  color: #6E6759;
  font-size: 14.5px;
  line-height: 1.55;
  font-weight: 600;
  margin: 0;
}

/* -- Offers -- */
body.kh-biz-page .biz-offers {
  padding-bottom: 84px;
}

body.kh-biz-page .biz-offers h2 {
  margin-bottom: 28px;
}

body.kh-biz-page .biz-offers .feature-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 980px) {
  body.kh-biz-page .biz-offers .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  body.kh-biz-page .biz-offers .feature-grid {
    grid-template-columns: 1fr;
  }
}

body.kh-biz-page .biz-offers .feature-card {
  border-radius: 16px;
  padding: 24px 22px 26px;
  border: none;
  box-shadow: none;
}

body.kh-biz-page .biz-offers .feature-card:nth-child(1) {
  background: linear-gradient(150deg, #FFC9B8, #E1492F 130%);
}
body.kh-biz-page .biz-offers .feature-card:nth-child(2) {
  background: linear-gradient(150deg, #FFE6B8, #F0A63A 130%);
}
body.kh-biz-page .biz-offers .feature-card:nth-child(3) {
  background: linear-gradient(150deg, #B8E5DC, #218071 130%);
}
body.kh-biz-page .biz-offers .feature-card:nth-child(4) {
  background: linear-gradient(150deg, #E9F0C4, #9CB23E 130%);
}

body.kh-biz-page .biz-offers .feature-card h3 {
  font-weight: 800;
  font-size: 17px;
  margin: 0 0 8px;
  color: #171512;
}

body.kh-biz-page .biz-offers .feature-card p {
  color: rgba(23, 21, 18, 0.72);
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: 600;
  margin: 0;
}

/* -- Cost calculator -- */
body.kh-biz-page .savings-calc-section {
  padding-bottom: 90px;
}

body.kh-biz-page .savings-calc-section > .container > h2 {
  margin-bottom: 12px;
}

body.kh-biz-page .savings-calc-section > .container > .lead {
  max-width: 640px;
  margin-bottom: 32px;
}

body.kh-biz-page .savings-calc {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

body.kh-biz-page .savings-calc__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 26px;
  border: none;
  background: transparent;
}

body.kh-biz-page .savings-calc__tab {
  font-weight: 700;
  font-size: 13.5px;
  padding: 10px 20px;
  border-radius: 99px;
  border: 1.5px solid rgba(23, 21, 18, 0.12);
  cursor: pointer;
  background: transparent;
  color: #171512;
  font-family: inherit;
  min-height: auto;
}

body.kh-biz-page .savings-calc__tab.is-active,
body.kh-biz-page .savings-calc__tab[aria-selected="true"] {
  background: #171512;
  color: #F5F1E6;
  border-color: #171512;
}

body.kh-biz-page .savings-calc__layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
}

@media (max-width: 860px) {
  body.kh-biz-page .savings-calc__layout {
    grid-template-columns: 1fr;
  }
}

body.kh-biz-page .savings-calc__inputs,
body.kh-biz-page .savings-calc__result {
  background: #FBF8F0;
  border-radius: 18px;
  padding: 28px 26px;
  box-shadow: none;
}

body.kh-biz-page .savings-calc__inputs {
  border: 3px solid rgba(23, 21, 18, 0.18); /* thick neutral */
}

body.kh-biz-page .savings-calc__result {
  border: 3px solid #218071; /* thick jade */
}

/* Flatten nested result card so only one outline shows */
body.kh-biz-page .savings-calc__result-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

body.kh-biz-page .savings-calc__inputs h3,
body.kh-biz-page .savings-calc__result h3 {
  color: #171512;
}

body.kh-biz-page .savings-calc__label,
body.kh-biz-page .savings-calc__breakdown li,
body.kh-biz-page .savings-calc__breakdown-total,
body.kh-biz-page .savings-calc__bar-label,
body.kh-biz-page .savings-calc__nomnote-desc,
body.kh-biz-page .savings-calc__callout,
body.kh-biz-page .savings-calc__footnote {
  color: #6E6759;
}

body.kh-biz-page .savings-calc__value,
body.kh-biz-page .savings-calc__breakdown li strong,
body.kh-biz-page .savings-calc__breakdown-total strong,
body.kh-biz-page .savings-calc__savings {
  color: #171512;
}

body.kh-biz-page .savings-calc__bar-track {
  background: #ECE4CF;
  border-radius: 99px;
  height: 10px;
}

body.kh-biz-page .savings-calc__bar-fill--muted {
  background: #B7AE99;
}

body.kh-biz-page .savings-calc__bar-fill:not(.savings-calc__bar-fill--muted) {
  background: linear-gradient(90deg, #F0A63A, #E1492F);
}

body.kh-biz-page .savings-calc__savings em {
  color: #218071;
  font-style: normal;
  font-weight: 800;
}

body.kh-biz-page .savings-calc__badge {
  color: #171512;
  background: #F0A63A;
}

/* -- VendorOS -- */
body.kh-biz-page .biz-vendoros {
  padding: 70px 0;
  background: #ECE4CF;
  margin-bottom: 0;
}

body.kh-biz-page .biz-vendoros .showcase-row {
  gap: 50px;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

@media (max-width: 900px) {
  body.kh-biz-page .biz-vendoros .showcase-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

body.kh-biz-page .biz-vendoros .iphone-frame {
  --iphone-frame: #171512; /* ink */
  width: min(280px, 100%);
  max-width: 280px;
  margin: 0 auto;
  border-radius: 44px;
  background: var(--iphone-frame);
  border: none;
  box-shadow: 0 24px 48px -16px rgba(23, 21, 18, 0.35);
  padding: 10px;
  height: auto;
  min-height: 0;
  display: block;
  overflow: hidden;
}

body.kh-biz-page .biz-vendoros .iphone-frame__screen {
  width: 100%;
  max-width: none;
  aspect-ratio: 1206 / 2622; /* vendorOS_sc.webp native 1206×2622 */
  background: transparent;
  margin: 0;
  overflow: hidden;
  border-radius: 34px;
  line-height: 0;
}

body.kh-biz-page .biz-vendoros .preview-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 34px;
  box-shadow: none;
  display: block;
}

body.kh-biz-page .biz-vendoros p {
  color: #6E6759;
  font-size: 15.5px;
  line-height: 1.6;
  font-weight: 500;
  max-width: 460px;
}

body.kh-biz-page .biz-brand-strip {
  background: #ECE4CF;
  padding: 0 0 70px;
  margin-bottom: 80px;
}

body.kh-biz-page .biz-brand-strip .section-panel {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

body.kh-biz-page .biz-brand-strip .biz-brand-tagline {
  color: #171512;
  font-weight: 700;
}

/* -- How it works -- */
body.kh-biz-page .biz-how {
  padding-bottom: 84px;
}

body.kh-biz-page .biz-how h2 {
  margin-bottom: 34px;
}

body.kh-biz-page .biz-how .step-num {
  font-weight: 800;
  font-size: 38px;
  color: #F0A63A;
  background: transparent;
  border: none;
  width: auto;
  height: auto;
  letter-spacing: -0.02em;
}

body.kh-biz-page .biz-how .step h3 {
  color: #171512;
  font-weight: 800;
}

body.kh-biz-page .biz-how .step p {
  color: #6E6759;
  font-weight: 600;
}

/* -- Free banner -- */
body.kh-biz-page .biz-free {
  margin: 0 auto 84px;
  max-width: 1124px;
  width: calc(100% - 56px);
  background: #171512;
  color: #F5F1E6;
  border-radius: 22px;
  padding: 44px 40px !important;
  text-align: center;
}

body.kh-biz-page .biz-free .container {
  padding: 0;
  max-width: none;
}

body.kh-biz-page .biz-free h2 {
  color: #F5F1E6;
  margin-bottom: 12px;
  font-size: clamp(24px, 3vw, 32px);
}

body.kh-biz-page .biz-free .lead {
  color: #D8D2C4;
  max-width: 600px;
  margin: 0 auto;
}

/* -- FAQ -- */
body.kh-biz-page .biz-faq-section {
  padding-bottom: 90px;
}

body.kh-biz-page .biz-faq-section .section-panel {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

body.kh-biz-page .biz-faq-section h2 {
  margin-bottom: 26px;
}

body.kh-biz-page .faq-item {
  border-bottom: 1px solid rgba(23, 21, 18, 0.12);
  padding: 20px 0;
  background: transparent;
  border-radius: 0;
  margin: 0;
  border-left: none;
  border-right: none;
  border-top: none;
}

body.kh-biz-page .faq-question {
  color: #171512;
  font-weight: 700;
  font-size: 15.5px;
  background: transparent;
  border: none;
  padding: 0;
}

body.kh-biz-page .faq-icon {
  color: #E1492F;
}

body.kh-biz-page .faq-answer > p {
  color: #6E6759;
  font-weight: 500;
  max-width: 640px;
}

/* -- Final CTA -- */
body.kh-biz-page .waitlist-section {
  background: transparent;
  text-align: center;
  padding: 0 0 90px;
}

body.kh-biz-page .waitlist-section h2 {
  color: #171512;
  margin-bottom: 14px;
}

body.kh-biz-page .waitlist-section .lead {
  margin: 0 auto 26px;
  text-align: center;
  max-width: 460px;
}

body.kh-biz-page .waitlist-section .biz-telegram-btn {
  width: auto;
  display: inline-flex;
  margin: 0 auto;
}

body.kh-biz-page .waitlist-section .social-proof-line {
  margin-top: 16px;
  font-size: 12.5px;
  color: #6E6759;
  font-weight: 600;
}