/* Shared visual system. Keep the existing charcoal, orange and status colors. */
:root {
  --kb-canvas: #0c0c0f;
  --kb-surface: #16161b;
  --kb-surface-raised: #1c1c22;
  --kb-line: #323238;
  --kb-orange: #f97316;
  --kb-orange-soft: rgba(249, 115, 22, .12);
  --kb-muted: #b3b3be;
  --kb-radius: 1.5rem;
  --kb-shadow: 0 18px 48px rgba(0, 0, 0, .18);
}

html { scroll-padding-top: 9rem; }
body {
  background-color: var(--kb-canvas) !important;
  text-rendering: optimizeLegibility;
}
::selection { background: #9a3412; color: #fff; }
:is(a, button, input, summary):focus-visible {
  outline: 2px solid #fb923c;
  outline-offset: 5px;
}
:is(button, summary) { cursor: pointer; }
:is(main, section, article, .grid) { min-width: 0; }
main :is(h1, h2, h3) { text-wrap: balance; }
main p { text-wrap: pretty; }

/* Navigation, offer strip and mobile menu. */
body #main-header .header-offer {
  background: linear-gradient(100deg, #7c2d12, #c2410c 50%, #7c2d12);
  box-shadow: none;
  border-bottom: 1px solid rgba(251, 146, 60, .2);
}
body #main-header > nav {
  background: rgba(12, 12, 15, .94);
  border-color: rgba(255, 255, 255, .09);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
}
body #main-header .nav-link {
  padding-block: .6rem;
  font-size: .82rem;
  color: #d4d4dc;
}
body #main-header .nav-link:hover { color: #fb923c; }
body #main-header .header-cta {
  background: linear-gradient(135deg, #fb923c, #ea580c);
  border: 1px solid rgba(253, 186, 116, .25);
  box-shadow: 0 6px 18px rgba(234, 88, 12, .2);
  color: #17120d;
}
body #main-header #mobile-menu { background: #16161b; }
body #main-header #mobile-menu a:not(:last-child) {
  padding: .7rem .9rem;
  border-radius: .8rem;
  background: rgba(255, 255, 255, .025);
}

/* Home: all twelve sections share spacing, surface and type rules. */
.home-page main > section {
  padding-block: clamp(4rem, 7vw, 6.5rem);
  border-color: rgba(255, 255, 255, .065);
  background-color: var(--kb-canvas);
}
.home-page main > section:nth-child(even) {
  background: linear-gradient(145deg, #151519, #101013);
}
.home-page main > section > .container { max-width: 76rem; }
.home-page main > section h2:not(.hero-subheadline) { line-height: 1.5; }
.home-page main > section > .container > :is(.text-center, .max-w-3xl) > h2 {
  font-size: clamp(1.65rem, 3.3vw, 2.65rem);
  max-width: 27ch;
  margin-inline: auto;
}
.home-page main :is(.text-zinc-400, .text-slate-400) { color: var(--kb-muted); }
.home-page main :is(.text-zinc-500, .text-zinc-600) { color: #9696a3; }
.home-page main .font-light { font-weight: 400; }
.home-page main > section.home-hero {
  min-height: auto;
  padding-top: 10.5rem;
  padding-bottom: 4.5rem;
  background:
    radial-gradient(ellipse at 80% 15%, rgba(249, 115, 22, .1), transparent 55%),
    radial-gradient(ellipse at 0% 85%, rgba(249, 115, 22, .05), transparent 40%),
    var(--kb-canvas);
}
.home-hero > .container > .grid { gap: 3.5rem; align-items: center; }
.home-page .hero-headline {
  font-size: clamp(2rem, 3.8vw, 3.45rem);
  line-height: 1.45;
  letter-spacing: -.035em;
  margin-block: 1.3rem;
}
.home-page .hero-subheadline { font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.9; }
.home-page .hero-summary { margin-bottom: 1.6rem; font-size: .95rem; }
.hero-visual { display: grid; gap: 1.25rem; min-width: 0; }
.hero-scene {
  position: relative;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(251, 146, 60, .25);
  border-radius: 1.75rem;
  background: #18181b;
  box-shadow: var(--kb-shadow);
}
.hero-scene img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.hero-scene::after {
  content: "";
  position: absolute;
  inset: 35% 0 0;
  background: linear-gradient(transparent, rgba(12, 12, 15, .95));
  pointer-events: none;
}
.hero-scene figcaption {
  position: absolute;
  z-index: 1;
  inset-inline: 1.5rem;
  bottom: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
}
.hero-scene figcaption span {
  padding: .3rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(251, 146, 60, .4);
  background: rgba(12, 12, 15, .7);
  color: #fdba74;
  font-size: .7rem;
  white-space: nowrap;
}
.home-page #profit-leaks {
  padding: 1.5rem;
  border-color: var(--kb-line);
  background: linear-gradient(140deg, #1c1c22, #141418);
  box-shadow: var(--kb-shadow);
}
.home-page #profit-leaks > .flex { padding-bottom: 1rem; }
.home-page #profit-leaks .space-y-3 > div {
  padding: .85rem 1rem;
  border-color: rgba(255, 255, 255, .07);
  background: rgba(0, 0, 0, .17);
}
.home-page #profit-leaks p.text-xs { line-height: 1.9; }
.home-page .hero-conversion-card {
  background: linear-gradient(145deg, #222026, #16161b);
  border-color: rgba(251, 146, 60, .4);
  box-shadow: 0 12px 38px rgba(0, 0, 0, .2);
  border-radius: 1.5rem;
}
.home-page .phone-field { background: #0c0c0f; border-color: #52525b; }
.home-page .primary-action { color: #17120d; font-weight: 800; }
.home-page .hero-secondary-actions a {
  padding: .8rem 1rem;
  background: transparent;
  border-color: var(--kb-line);
}
.home-page .hero-guide-links a { line-height: 1.9; }
.home-page #what-is-kasbran { padding-block: 3.5rem; }
.home-page #what-is-kasbran ul li {
  padding: .5rem .85rem;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 999px;
}

/* Types, invoices, features, release, steps, coverage, testimonials, articles,
   solutions and subscriptions. No content is collapsed or hidden. */
.home-page main .grid > :is(article, a.rounded-2xl, div.border.rounded-2xl, div.border.rounded-3xl) {
  background: linear-gradient(145deg, #1b1b21, #141418);
  border-color: var(--kb-line);
  border-radius: var(--kb-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.home-page :is(#carwash-types, #features, #release-1-2-0) .grid > :is(article, div) {
  padding: 1.6rem;
}
.home-page #features .grid > div:first-child {
  background: linear-gradient(140deg, rgba(249, 115, 22, .13), #19191f);
  border-color: rgba(249, 115, 22, .35);
}
.home-page #features .grid p { font-size: .86rem; line-height: 2; }
.home-page #carwash-types article h3 { font-size: 1.1rem; line-height: 1.85; }
.home-page .release-feature-card p { line-height: 2; }
.home-page #local-coverage details {
  border: 1px solid var(--kb-line);
  background: var(--kb-surface);
  border-radius: 1rem;
  padding: 1rem 1.2rem;
}
.home-page #local-coverage details[open] { border-color: rgba(249, 115, 22, .45); }
.home-page #articles article { padding: 1.5rem; }
.home-page #articles article h3 { font-size: 1.05rem; line-height: 1.85; }
.home-page #articles article p { font-size: .86rem; line-height: 2; }
.home-page #articles nav a { min-height: 2.6rem; display: inline-flex; align-items: center; }
.home-page #sales-pages .grid > a { display: flex; flex-direction: column; }
.home-page #sales-pages .grid > a b { margin-top: auto; padding-top: 1.25rem; }
.home-page #pricing .grid > div { padding: 1.75rem 1.4rem; }
.home-page #pricing .grid > div > div > .border-y { border-color: var(--kb-line); }
.home-page #pricing .grid > div h3 { font-size: 1.25rem; }
.home-page #pricing .grid > div p.text-3xl { font-size: clamp(1.8rem, 2.4vw, 2.2rem); }
.home-page #pricing .grid > div > a { min-height: 3rem; display: grid; place-items: center; }
.home-page footer {
  padding-block: 3.5rem;
  border-color: var(--kb-line);
  background: linear-gradient(180deg, #151519, #0c0c0f);
}
.home-page footer :is(.text-zinc-600, .text-zinc-700) { color: #a1a1aa; }
.home-page footer a { padding: .5rem .65rem; }

/* Articles: readable editorial canvas, tables, sources and related links. */
.blog-page main { padding-top: 10rem; }
.blog-page main > .container { max-width: 76rem; }
.blog-page main :is(.article-content, :has(> .article-content):not(.container)) {
  background: var(--kb-surface);
  border: 1px solid var(--kb-line);
  border-radius: 1.75rem;
  box-shadow: var(--kb-shadow);
}
.blog-page main :has(> .article-content):not(.container) > .article-content {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.blog-page .article-content { color: #d4d4dc; line-height: 2.15; }
.blog-page .article-content h1 {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.blog-page .article-content h2 {
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  line-height: 1.7;
  margin-top: 2.75rem;
  border-color: rgba(249, 115, 22, .25);
}
.blog-page .article-content h3 { line-height: 1.8; }
.blog-page .article-content :is(.text-gray-500, .text-zinc-500) { color: #a1a1aa; }
.blog-page .article-content > nav { font-size: .8rem; line-height: 2; }
.blog-page .article-content .answer-first {
  padding: 1.35rem 1.5rem;
  background: linear-gradient(135deg, rgba(249, 115, 22, .1), rgba(249, 115, 22, .03));
  border: 1px solid rgba(249, 115, 22, .25);
  border-inline-start: 3px solid #f97316;
  border-radius: 1.1rem;
}
.blog-page .article-content img { border-radius: 1.25rem; }
.blog-page .article-content table { background: #111115; border-radius: .85rem; }
.blog-page .article-content :is(th, td) {
  padding: .9rem 1rem;
  border-color: var(--kb-line);
  line-height: 1.9;
}
.blog-page .article-content th { background: #25252c; color: #fdba74; }
.blog-page .article-content tbody tr:nth-child(even) { background: rgba(255, 255, 255, .025); }
.blog-page .article-content :is(details, blockquote, aside) { border-color: var(--kb-line); }
.blog-page .article-content a:not([class]) { text-underline-offset: .3em; }
.blog-page footer { border-color: var(--kb-line); background: #101013; }

/* Sales pages keep their existing green accents within the dark brand palette. */
.sales-page { --sales-line: #35404e; --sales-muted: #b1bdcc; }
.sales-page .sales-hero { padding-top: 10rem; }
.sales-page .sales-hero h1 { font-size: clamp(2.2rem, 4.4vw, 4.4rem); line-height: 1.4; }
.sales-page .sales-hero h1 em { white-space: normal; }
.sales-page .sales-hero-grid { gap: 3rem; }
.sales-page :is(.shift-console, .pain-card, .price-card, .case-card, .sales-link) {
  border-radius: 1.4rem;
  border-color: var(--sales-line);
  box-shadow: var(--kb-shadow);
}
.sales-page .sales-section { padding-block: clamp(3.5rem, 6vw, 5rem); }
.sales-page .section-heading h2 { line-height: 1.6; text-wrap: balance; }
.sales-page .feature-point { border-radius: 1rem; padding: 1.2rem; }
.sales-page .sales-faq details { border-radius: 1rem; background: rgba(255, 255, 255, .025); }
.sales-page .sales-faq details[open] { border-color: rgba(16, 185, 129, .5); }
.sales-page .roi-box {
  border-radius: 1.75rem;
  background: linear-gradient(135deg, #142c2b, #102033);
  box-shadow: var(--kb-shadow);
}
.sales-page .sales-cta-band { border-radius: 1.75rem; }
.sales-page .sales-cta { border-radius: .9rem; }
.sales-page .sales-footer { border-top: 1px solid var(--sales-line); padding-block: 2.5rem; }

/* Both article drawers use the same finish as page cards. */
body #kasbran-sidebar-root :is(.ks-sidebar, .ks-mobile-sheet) {
  background: linear-gradient(160deg, #1c1c22, #111115);
  border-color: #3a3a43;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}
body #kasbran-sidebar-root .ks-article-link { border-radius: .85rem; }
body #kasbran-sidebar-root .ks-article-link[aria-current="page"] {
  background: rgba(249, 115, 22, .12);
  border-color: rgba(249, 115, 22, .4);
}

@media (hover: hover) {
  .home-page main .grid > :is(article, a.rounded-2xl, div.border.rounded-2xl, div.border.rounded-3xl):hover {
    transform: translateY(-4px);
    border-color: rgba(249, 115, 22, .4);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .22);
  }
}
@media (min-width: 1024px) {
  .home-page #features .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) and (min-width: 768px) {
  body #main-header .brand-description { display: none; }
  body #main-header .brand-type { display: none; }
  body #main-header .brand-link + div { gap: .85rem; }
  body #main-header .header-cta { padding-inline: .8rem; font-size: .75rem; }
}
@media (max-width: 1023px) {
  .home-hero > .container > .grid { gap: 2.5rem; }
  .home-page .hero-copy { max-width: 42rem; margin-inline: auto; }
  .hero-visual { max-width: 42rem; width: 100%; margin-inline: auto; }
}
@media (max-width: 640px) {
  html { scroll-padding-top: 8rem; }
  .home-page main > section.home-hero { padding-top: 8.5rem; padding-bottom: 3rem; }
  .home-page main > section { padding-block: 3.25rem; }
  .home-page .hero-headline { font-size: clamp(1.9rem, 7.8vw, 2.5rem); line-height: 1.55; }
  .home-page .hero-summary { font-size: .88rem; line-height: 2.1; }
  .home-page .hero-eyebrow { font-size: .65rem; line-height: 1.9; }
  .home-page #profit-leaks { padding: 1.15rem; }
  .hero-scene { border-radius: 1.25rem; }
  .hero-scene figcaption { inset-inline: 1rem; bottom: .9rem; font-size: .78rem; }
  .hero-scene figcaption span { font-size: .6rem; }
  .home-page :is(#carwash-types, #features, #release-1-2-0) .grid > :is(article, div) { padding: 1.3rem; }
  .home-page #what-is-kasbran ul { gap: .6rem; }
  .home-page #pricing .grid { gap: 1rem; }
  .blog-page main :is(.article-content, :has(> .article-content):not(.container)) { border-radius: 1.2rem; }
  .blog-page main :has(> .article-content):not(.container) > .article-content { border: 0; }
  .blog-page main > .container > .article-content { padding: 1.15rem !important; }
  .blog-page .article-content .answer-first { padding: 1rem; }
  .blog-page .article-content :is(th, td) { padding: .8rem; }
  .sales-page .sales-hero { padding-top: 8.5rem; }
  .sales-page .sales-hero-grid { gap: 2rem; }
  .sales-page .sales-hero h1 { line-height: 1.5; }
  .sales-page .sales-cta-band { border-radius: 1.25rem; }
  .sales-page .thermal-receipt { transform: none; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}