/* =====================================================================================
   Kall8 marketing site — site.css
   -------------------------------------------------------------------------------------
   Layered on top of Bootstrap 5.1 and the shared tokens/chrome from Kall8.Web.Shared
   (k8-tokens.css defines the colours, type, focus rings, buttons; k8-chrome.css styles the
   header and footer, which Kall8.Web.Signup renders too). Everything marketing-only lives
   here, so nothing below changes the signup site:

     0. Site tokens (card radii, elevation, section rhythm)
     1. Base, type and utilities
     2. Buttons (sizes, motion, the white CTA button)
     3. Hero, breadcrumbs, answer card
     4. Homepage doors (the three equal entry cards)
     5. Trust bar, number search, tiles, strip
     6. Plan cards and billing toggle
     7. Tables, FAQ accordion, comparison
     8. Calculator
     9. Forms (lead forms, LOA), contact band
    10. CTA panel, steps, testimonials, legal, misc pages
    11. Header / footer touches for this site, cookie consent
    12. Reveal animation (below the fold only) and reduced motion

   Contrast rules from k8-tokens.css still apply: the brand green #9AB13F is decorative
   (fills, rules, accents, backgrounds behind dark text); green text uses --k8-green-text.
   ===================================================================================== */

/* 0. Site tokens ------------------------------------------------------------------------- */
:root {
    --k8-radius-xl: 20px;               /* cards, doors, plan cards */
    --k8-radius-2xl: 24px;              /* CTA panel */
    --k8-shadow-card: 0 1px 2px rgba(17, 24, 39, .04), 0 6px 20px rgba(17, 24, 39, .06);
    --k8-shadow-door: 0 12px 32px rgba(17, 24, 39, .08);
    --k8-shadow-lift: 0 18px 40px rgba(17, 24, 39, .12);
    --k8-shadow-green: 0 16px 40px rgba(111, 138, 26, .18);
    --k8-section-y: clamp(3.5rem, 7vw, 5.5rem);
    --k8-ease-out: cubic-bezier(.2, .7, .2, 1);
    --k8-check-bg: var(--k8-green-text);

    /* AA text green for this site. k8-tokens.css documents #6F8A1A as 4.6:1 on white, but it measures 3.94:1 (3.55:1 on
       --k8-green-soft), below WCAG AA for the links, active nav item, header phone and outline buttons that use it.
       #5F7812 is 5.0:1 on white and 4.5:1 on --k8-green-soft; hover #4D600C is 7.0:1. The shared token (also used by
       Kall8.Web.Signup) is not changed from here. */
    --k8-green-text: #5F7812;
    --k8-green-text-hover: #4D600C;
    --bs-link-color-rgb: 95, 120, 18;
    --bs-link-hover-color-rgb: 77, 96, 12;
}

/* 1. Base, type and utilities ------------------------------------------------------------ */
html { scroll-padding-top: calc(var(--k8-header-height) + 12px); }
body { font-size: 1rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
/* Raleway defaults to old-style figures; prices, phone numbers and step counters read better with lining figures. */
body, h1, h2, h3, h4, h5, h6, .btn { font-variant-numeric: lining-nums; }
img { max-width: 100%; height: auto; }
h1 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.08; }
h2 { font-size: clamp(1.65rem, 3.2vw, 2.75rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; }
h3 { font-size: 1.25rem; letter-spacing: -.01em; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
.h4, .h5, .h6 { letter-spacing: -.005em; }

.k8-section { padding: var(--k8-section-y) 0; }
.k8-section--alt { background: var(--k8-bg-alt); }
.k8-section--soft { position: relative; isolation: isolate; overflow: hidden; background: var(--k8-green-soft); }
.k8-section--soft::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 92% 10%, rgba(255, 255, 255, .7) 0, rgba(255, 255, 255, 0) 38%), radial-gradient(circle at 4% 100%, rgba(154, 177, 63, .16) 0, rgba(154, 177, 63, 0) 40%); pointer-events: none; }
.k8-section--tight { padding: 2rem 0; }
/* Two white bands in a row read as one: the second drops its top padding so the gap stays one section tall. */
:is(.k8-section:not(.k8-section--alt, .k8-section--soft), .k8-faq, .k8-compare-snippet) + :is(.k8-section:not(.k8-section--alt, .k8-section--soft, .k8-section--tight), .k8-faq, .k8-compare-snippet, .k8-cta-band) { padding-top: 0; }
.k8-section-title { margin-bottom: 1.75rem; }
.k8-section-title:has(+ .k8-section-intro, + p), .k8-faq-head .k8-section-title { margin-bottom: .875rem; }
.k8-section-intro { max-width: 760px; font-size: 1.125rem; color: var(--k8-grey-600); margin-bottom: 2.25rem; }
.k8-eyebrow { font-family: var(--k8-font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .8125rem; color: var(--k8-green-text); margin-bottom: .75rem; }
.k8-optional { font-weight: 400; color: var(--k8-text-muted); }
.k8-muted { color: var(--k8-text-muted); }
.k8-small { font-size: .875rem; }
.k8i { vertical-align: -.2em; flex: none; }
.k8-prose { max-width: 780px; }
/* A prose container keeps the page grid (left edge in line with the hero) and limits the line length of its children. */
.container.k8-prose { max-width: var(--k8-container-max); }
.container.k8-prose > * { max-width: 780px; }
.k8-prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 2.5rem; margin-bottom: .875rem; }
.k8-prose > h2:first-child, .k8-prose > :first-child { margin-top: 0; }
.k8-prose h3 { margin-top: 1.5rem; }
.k8-prose p, .k8-prose li { font-size: 1.0625rem; line-height: 1.7; }
.k8-prose ul, .k8-prose ol { padding-left: 1.25rem; }
.k8-prose li { margin-bottom: .4rem; }
.k8-prose li::marker { color: var(--k8-green-text); font-weight: 700; }
.k8-note { border: 1px solid var(--k8-green-soft-2); border-left: 6px solid var(--k8-green); background: var(--k8-green-soft); padding: 1.25rem 1.5rem; border-radius: 16px; }
.k8-note--warn { border-color: #FDE68A; border-left-color: var(--k8-amber); background: #FEF3C7; }
/* Check lists: a white tick in a green dot (chevrons, used for "choose them if", sit in a grey dot). */
.k8-list-check { list-style: none; padding-left: 0; }
.k8-list-check li { display: flex; gap: .625rem; align-items: flex-start; margin-bottom: .625rem; }
.k8-list-check .k8i { width: 20px; height: 20px; padding: 3px; margin-top: .2rem; border-radius: 50%; color: var(--k8-white); background: var(--k8-check-bg); stroke-width: 3; }
.k8-list-check .k8i-chevron-right { color: var(--k8-grey-700); background: var(--k8-grey-200); }
.k8-pill { display: inline-block; padding: .2em .7em; border-radius: var(--k8-radius-pill); background: var(--k8-grey-100); font-size: .8rem; font-weight: 700; color: var(--k8-grey-700); }

/* 2. Buttons ------------------------------------------------------------------------------ */
.btn-k8, .btn-k8-solid, .btn-k8-outline, .btn-k8-dark, .btn-k8-white { transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .2s ease, transform .2s var(--k8-ease-out); }
.btn-k8:hover, .btn-k8-solid:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(111, 138, 26, .28); }
.btn-k8-dark:hover, .btn-k8-white:hover, .btn-k8-outline:hover { transform: translateY(-1px); }
.btn-k8:active, .btn-k8-solid:active, .btn-k8-dark:active, .btn-k8-white:active, .btn-k8-outline:active { transform: none; box-shadow: none; }
.btn .k8i-arrow-right { transition: transform .2s var(--k8-ease-out); }
.btn:hover .k8i-arrow-right, a:hover > .btn .k8i-arrow-right { transform: translateX(3px); }
.btn-lg { min-height: 54px; padding: .75rem 1.5rem; font-size: 1.0625rem; }
.btn-sm { padding: .375rem .875rem; }
/* White button for the soft-green CTA panel (dark text, 13:1). Bootstrap 5.1 has no --bs-btn-* API, so real properties. */
.btn-k8-white { color: var(--k8-dark); background-color: var(--k8-white); border-color: var(--k8-grey-300); font-family: var(--k8-font-heading); font-weight: 700; border-radius: var(--k8-radius); }
.btn-k8-white:hover, .btn-k8-white:focus { color: var(--k8-dark); background-color: var(--k8-white); border-color: var(--k8-green-text); }
.btn-k8-white:focus { box-shadow: 0 0 0 .25rem rgba(154, 177, 63, .45); }

/* 3. Hero, breadcrumbs, answer card ------------------------------------------------------- */
.k8-hero { position: relative; isolation: isolate; overflow: hidden; min-height: 420px; display: flex; align-items: center; padding: clamp(3rem, 6vw, 4.5rem) 0; background: linear-gradient(180deg, var(--k8-green-soft) 0%, #F7F9EF 60%, #FBFCF7 100%); }
/* Decoration only: a soft brand-green glow and a dot grid fading out from the top-right corner. */
.k8-hero::before { content: ""; position: absolute; z-index: -1; top: -260px; right: -180px; width: 720px; height: 720px; border-radius: 50%; background: radial-gradient(circle, rgba(154, 177, 63, .26) 0%, rgba(154, 177, 63, 0) 65%); pointer-events: none; }
.k8-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background-image: radial-gradient(rgba(111, 138, 26, .22) 1.2px, transparent 1.6px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse 55% 75% at 100% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse 55% 75% at 100% 0%, #000 0%, transparent 70%); pointer-events: none; }
.k8-hero--compact { min-height: 260px; padding: clamp(2.5rem, 5vw, 3.5rem) 0; }
.k8-hero-title { max-width: 900px; margin-bottom: 1rem; }
.k8-hero-lead { max-width: 740px; font-size: clamp(1.075rem, 1.5vw, 1.25rem); line-height: 1.6; color: var(--k8-grey-600); margin-bottom: 1.75rem; }
.k8-hero .k8-eyebrow { display: inline-flex; align-items: center; gap: .5rem; padding: .375rem .875rem; background: rgba(255, 255, 255, .8); border: 1px solid var(--k8-green-soft-2); border-radius: var(--k8-radius-pill); box-shadow: var(--k8-shadow-sm); margin-bottom: 1.125rem; }
.k8-hero .k8-eyebrow::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--k8-green); box-shadow: 0 0 0 3px rgba(154, 177, 63, .25); }
.k8-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.5rem; }
.k8-hero-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.k8-hero-actions .btn-k8-outline { background-color: rgba(255, 255, 255, .7); }
.k8-proof { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; font-size: .875rem; color: var(--k8-grey-700); }
.k8-proof li { display: inline-flex; align-items: center; gap: .45rem; padding: .375rem .875rem .375rem .5rem; background: rgba(255, 255, 255, .85); border: 1px solid var(--k8-grey-200); border-radius: var(--k8-radius-pill); font-weight: 500; }
.k8-proof .k8i { width: 18px; height: 18px; padding: 3px; border-radius: 50%; color: var(--k8-white); background: var(--k8-green-text); stroke-width: 3.2; }
.k8-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
.k8-hero-main > :last-child { margin-bottom: 0; }
.k8-hero-main:not(:only-child) > :last-child { margin-bottom: 1.5rem; }
/* Full-size heroes: the proof points become a frosted card beside the copy. */
@media (min-width: 992px) {
    .k8-hero--split .k8-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); column-gap: clamp(2.5rem, 5vw, 5rem); }
    .k8-hero--split .k8-hero-main > :last-child { margin-bottom: 0; }
    .k8-hero--split .k8-proof { flex-direction: column; flex-wrap: nowrap; gap: 0; padding: .5rem 1.5rem; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(229, 231, 235, .9); border-top: 6px solid var(--k8-green); border-radius: var(--k8-radius-xl); box-shadow: var(--k8-shadow-door); }
    .k8-hero--split .k8-proof li { gap: .875rem; padding: 1rem 0; background: none; border: 0; border-bottom: 1px solid var(--k8-grey-200); border-radius: 0; font-family: var(--k8-font-heading); font-weight: 700; font-size: 1.0625rem; line-height: 1.3; color: var(--k8-heading); }
    .k8-hero--split .k8-proof li:last-child { border-bottom: 0; }
    .k8-hero--split .k8-proof .k8i { width: 34px; height: 34px; padding: 8px; box-shadow: 0 0 0 5px rgba(154, 177, 63, .18); }
}
.k8-breadcrumbs { font-size: .875rem; margin-bottom: 1.25rem; }
.k8-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin: 0; }
.k8-breadcrumbs li { color: var(--k8-grey-600); }
.k8-breadcrumbs li + li::before { content: ""; display: inline-block; width: .4rem; height: .4rem; margin: 0 .55rem .1rem .2rem; border-top: 1.5px solid var(--k8-grey-400); border-right: 1.5px solid var(--k8-grey-400); transform: rotate(45deg); }
.k8-breadcrumbs a { text-decoration: none; font-weight: 500; }
.k8-breadcrumbs a:hover { text-decoration: underline; }
/* The direct answer that opens commercial pages, as a card that rises over the bottom edge of the hero. */
.k8-answer { position: relative; z-index: 1; padding: clamp(2rem, 4vw, 2.75rem) 0 .5rem; }
.k8-hero:has(+ .k8-answer) { padding-bottom: calc(clamp(2.5rem, 5vw, 3.5rem) + 2.5rem); }
.k8-hero:has(+ .k8-answer) + .k8-answer { margin-top: -2.5rem; padding-top: 0; }
.k8-answer-card { display: flex; gap: 1.25rem; align-items: flex-start; max-width: 1000px; padding: 1.75rem 2rem; background: var(--k8-white); border: 1px solid var(--k8-grey-200); border-radius: var(--k8-radius-xl); box-shadow: var(--k8-shadow-door); }
.k8-answer-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--k8-green-soft); color: var(--k8-green-text); }
.k8-answer-icon .k8i { width: 22px; height: 22px; }
.k8-answer-body { min-width: 0; }
.k8-answer-text { font-size: clamp(1.05rem, 1.4vw, 1.1875rem); line-height: 1.7; color: var(--k8-grey-800); margin-bottom: .875rem; }
.k8-answer-text strong { color: var(--k8-heading); }
.k8-answer-meta { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0; font-size: .8125rem; color: var(--k8-text-muted); }
.k8-answer-meta span + span::before { content: "\00b7"; margin-right: 1.25rem; }
.k8-last-updated { font-size: .875rem; color: var(--k8-text-muted); }
@media (max-width: 575.98px) {
    .k8-answer-card { flex-direction: column; gap: .875rem; padding: 1.25rem; }
    .k8-answer-meta span + span::before { display: none; }
    .k8-answer-meta { flex-direction: column; }
    .k8-hero-actions .btn { flex: 1 1 100%; }
    .k8-hero::before { width: 420px; height: 420px; top: -180px; right: -200px; }
}

/* 4. Homepage doors ------------------------------------------------------------------------ */
.k8-hero--home { min-height: 0; padding: clamp(3rem, 7vw, 5rem) 0 clamp(3.5rem, 7vw, 6rem); background: linear-gradient(180deg, var(--k8-green-soft) 0%, var(--k8-white) 78%); }
.k8-hero--home::before { top: -320px; right: auto; left: 50%; width: 1100px; height: 760px; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(154, 177, 63, .22) 0%, rgba(154, 177, 63, 0) 62%); }
.k8-hero--home::after { -webkit-mask-image: radial-gradient(ellipse 70% 45% at 50% 0%, #000 0%, transparent 75%); mask-image: radial-gradient(ellipse 70% 45% at 50% 0%, #000 0%, transparent 75%); }
.k8-hero-head { max-width: 920px; margin: 0 auto; text-align: center; }
.k8-hero--home .k8-hero-title { font-size: clamp(2.35rem, 5.4vw, 4rem); line-height: 1.05; margin-inline: auto; margin-bottom: 1.125rem; }
.k8-hero--home .k8-hero-lead { margin-inline: auto; margin-bottom: 0; max-width: 720px; }
.k8-doors { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); align-items: stretch; margin-top: clamp(2.25rem, 4.5vw, 3.5rem); }
@media (min-width: 768px) {
    .k8-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .k8-doors > .k8-door--search, .k8-doors--single > .k8-door:first-child { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
    .k8-doors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .k8-doors > .k8-door--search, .k8-doors--single > .k8-door:first-child { grid-column: auto; }
    .k8-doors--single { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
.k8-door { position: relative; display: flex; flex-direction: column; gap: 1.125rem; min-width: 0; padding: 2.25rem 2rem 2rem; background: var(--k8-white); border: 2px solid var(--k8-grey-200); border-top: 8px solid var(--k8-green); border-radius: var(--k8-radius-xl); box-shadow: var(--k8-shadow-door); color: var(--k8-text); text-decoration: none; transition: border-color .2s ease, box-shadow .25s ease, transform .25s var(--k8-ease-out); }
a.k8-door:hover, a.k8-door:focus-visible { color: var(--k8-text); text-decoration: none; border-color: var(--k8-green); transform: translateY(-4px); box-shadow: var(--k8-shadow-lift); }
a.k8-door:hover .btn-k8 { background-color: var(--k8-green-dark); border-color: var(--k8-green-dark); }
.k8-door-head { display: flex; align-items: center; gap: .75rem; }
.k8-door-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border-radius: 12px; background: var(--k8-green-soft); color: var(--k8-green-text); }
.k8-door-icon .k8i { width: 24px; height: 24px; }
.k8-door-kicker { font-family: var(--k8-font-heading); font-weight: 700; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--k8-green-text); }
.k8-door-title { margin: 0; min-height: 2.4em; font-size: clamp(1.5rem, 2.3vw, 1.875rem); font-weight: 800; line-height: 1.2; letter-spacing: -.015em; color: var(--k8-heading); }
.k8-door-slot { min-height: 4.75rem; display: flex; flex-direction: column; justify-content: flex-end; }
.k8-door-price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .4rem; row-gap: .25rem; margin: 0; }
.k8-door-from, .k8-door-per, .k8-door-price-sub { font-size: .9375rem; color: var(--k8-grey-600); }
.k8-door-amount { font-family: var(--k8-font-heading); font-weight: 800; font-size: clamp(2.35rem, 3.4vw, 2.75rem); line-height: 1; letter-spacing: -.02em; color: var(--k8-heading); }
.k8-door-price-sub { flex-basis: 100%; }
.k8-door-list { flex: 1; display: flex; flex-direction: column; gap: .625rem; margin: 0; padding: 1.125rem 0 0; border-top: 1px solid var(--k8-grey-200); list-style: none; }
.k8-door-list li { display: flex; gap: .625rem; font-size: 1rem; line-height: 1.5; color: var(--k8-grey-800); }
.k8-door-list .k8i { width: 20px; height: 20px; padding: 3px; margin-top: .15rem; border-radius: 50%; color: var(--k8-white); background: var(--k8-green-text); stroke-width: 3; }
.k8-door-cta { width: 100%; display: flex; align-items: center; justify-content: center; gap: .5rem; }
/* The reserved title/price heights only line doors up side by side; a door alone on its row (phones, or the search
   spanning both tablet columns) drops them. */
@media (max-width: 575.98px) {
    .k8-door { padding: 1.75rem 1.25rem 1.25rem; }
    .k8-door-title { min-height: 0; }
    .k8-door-slot { min-height: 0; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    .k8-doors > .k8-door--search .k8-door-title, .k8-doors > .k8-door--search .k8-door-slot { min-height: 0; }
}

/* 5. Trust bar, number search, tiles, strip ------------------------------------------------ */
.k8-trustbar { background: var(--k8-dark); color: var(--k8-white); padding: 1.25rem 0; }
.k8-trustbar-list { display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: center; margin: 0; font-family: var(--k8-font-heading); font-weight: 700; font-size: .9375rem; }
@media (min-width: 992px) { .k8-trustbar-list { justify-content: space-between; } }
@media (max-width: 575.98px) { .k8-trustbar-list { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; font-size: .875rem; } }
.k8-trustbar-list li { display: inline-flex; align-items: center; gap: .5rem; }
.k8-trustbar-list a { color: var(--k8-white); text-underline-offset: 3px; }
.k8-trustbar-list a:hover { color: var(--k8-green-soft-2); }
.k8-trustbar a:focus-visible { outline-color: var(--k8-white); }
.k8-trustbar .k8i { color: var(--k8-green); width: 20px; height: 20px; }
.k8-trustbar-widget { min-width: 200px; }

.k8-search { position: relative; background: var(--k8-white); border: 2px solid var(--k8-grey-200); border-top: 8px solid var(--k8-green); border-radius: var(--k8-radius-xl); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--k8-shadow-door); }
.k8-search-title { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 800; margin-bottom: 1rem; }
.k8-search-tabs { display: inline-flex; background: var(--k8-grey-100); border-radius: var(--k8-radius-pill); padding: .25rem; margin-bottom: 1.25rem; }
.k8-search-tabs button { border: 0; background: transparent; min-height: 40px; padding: .4rem 1.25rem; border-radius: var(--k8-radius-pill); font-family: var(--k8-font-heading); font-weight: 700; color: var(--k8-grey-600); transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; }
.k8-search-tabs button:hover { color: var(--k8-heading); }
.k8-search-tabs button.is-active { background: var(--k8-white); color: var(--k8-heading); box-shadow: var(--k8-shadow-sm); }
.k8-search-label { display: block; font-family: var(--k8-font-heading); font-size: .875rem; font-weight: 700; margin-bottom: .375rem; color: var(--k8-grey-700); }
.k8-search-row { display: flex; gap: .625rem; }
.k8-search .form-control-lg, .k8-search .form-select-lg { min-height: 54px; border-radius: var(--k8-radius); border-color: var(--k8-grey-300); font-size: 1.0625rem; }
.k8-search .form-control:focus, .k8-search .form-select:focus { border-color: var(--k8-green-text); box-shadow: 0 0 0 .25rem rgba(154, 177, 63, .25); }
.k8-search-row .btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; white-space: nowrap; padding-inline: 1.75rem; }
.k8-search-row--local { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 576px) { .k8-search-row--local { grid-template-columns: 1fr 1.3fr 1fr auto; align-items: end; } }
.k8-search-submit .btn { width: 100%; justify-content: center; }
.k8-search-hint { font-size: .875rem; color: var(--k8-text-muted); margin: .875rem 0 0; }
.k8-search--compact { padding: 1rem; box-shadow: none; }
@media (max-width: 575.98px) { .k8-search-row:not(.k8-search-row--local) { flex-direction: column; } }
/* The search as the third homepage door: full-width tabs, stacked fields, the button pinned to the bottom. */
.k8-search--door { padding: 2.25rem 2rem 2rem; border-top-color: var(--k8-green); }
.k8-search--door .k8-search-tabs { display: flex; width: 100%; margin: 0; }
.k8-search--door .k8-search-tabs button { flex: 1; min-height: 44px; font-size: .9375rem; }
.k8-search--door .k8-search-panel { flex: 1; display: flex; flex-direction: column; }
.k8-search--door .k8-search-form { flex: 1; display: flex; flex-direction: column; gap: .625rem; padding-top: 1.125rem; border-top: 1px solid var(--k8-grey-200); }
.k8-search--door .k8-search-label { margin-bottom: 0; }
.k8-search--door .k8-search-hint { margin: 0; line-height: 1.5; }
.k8-search--door .k8-search-go { width: 100%; display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: auto; }
.k8-search-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .625rem; }
.k8-search-fields > div { display: flex; flex-direction: column; gap: .375rem; min-width: 0; }
.k8-search-fields > .k8-search-field--wide { grid-column: 1 / -1; }
@media (max-width: 575.98px) { .k8-search--door { padding: 1.75rem 1.25rem 1.25rem; } }

.k8-tiles { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .k8-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .k8-tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .k8-tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .k8-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.k8-tile { position: relative; background: var(--k8-white); border: 1px solid var(--k8-grey-200); border-radius: var(--k8-radius-xl); padding: 1.75rem; box-shadow: var(--k8-shadow-card); }
.k8-tile--featured { border: 2px solid var(--k8-green); border-top-width: 8px; box-shadow: var(--k8-shadow-green); }
/* Equal heights only for a tile that is alone in its Bootstrap column. Grid wrappers (.k8-tiles, .k8-split, .k8-choose,
   .k8-fairuse-numbers) stretch their tiles on their own. A blanket height:100% made every tile stacked in one column as
   tall as the whole column, so the second one ran out of its section over the next band (/about, /transfer-your-number,
   /microsoft-teams-direct-routing, every /local-numbers/area-code page). */
.row > [class*="col"] > .k8-tile:only-child { height: 100%; }
/* Bootstrap's .g-5 pulls a row 1.5rem past each side of the container, which had only 0.75rem of padding: that made
   /about, /agents, /contact and /transfer-your-number scroll sideways by 12px below the lg breakpoint and, because
   .k8-container is 1200px wide (not Bootstrap's 960/1140) and fills the viewport up to 1200px, up to 1223px too. The
   page gutters in section 11 now give the container 1.5rem from 768px; phones keep a container-safe gutter. */
@media (max-width: 767.98px) { .row.g-5 { --bs-gutter-x: 1.5rem; } }
/* Tiles that end in a price or a "more" link keep it on the bottom edge, so a row of tiles lines up. */
.k8-tile--link, .k8-tile:has(> .k8-tile-price, > .k8-tile-more) { display: flex; flex-direction: column; }
.k8-tile--link { text-decoration: none; color: var(--k8-text); transition: border-color .2s ease, box-shadow .25s ease, transform .25s var(--k8-ease-out); }
.k8-tile--link:hover, .k8-tile--link:focus-visible { color: var(--k8-text); text-decoration: none; border-color: var(--k8-green); transform: translateY(-4px); box-shadow: inset 0 5px 0 var(--k8-green), var(--k8-shadow-lift); }
.k8-tile-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: var(--k8-green-soft); color: var(--k8-green-text); margin-bottom: 1rem; transition: background-color .2s ease, color .2s ease; }
.k8-tile-icon .k8i { width: 24px; height: 24px; }
.k8-tile--link:hover .k8-tile-icon { background: var(--k8-green); color: var(--k8-dark); }
.k8-tile h2.h5, .k8-tile h3 { margin-bottom: .625rem; }
.k8-tile h3, .k8-tile .k8-tile-title { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; margin-bottom: .625rem; }
.k8-tile p { margin-bottom: .625rem; color: var(--k8-grey-600); }
.k8-tile .table-responsive { margin-top: .25rem; }
.k8-tile-price { margin-top: auto; padding-top: .75rem; font-family: var(--k8-font-heading); font-weight: 800; color: var(--k8-heading); }
p.k8-tile-price { margin-bottom: .5rem; }
.k8-tile-more { display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start; margin-top: auto; padding-top: .5rem; font-family: var(--k8-font-heading); font-weight: 700; color: var(--k8-green-text); text-decoration: none; }
.k8-tile-price + .k8-tile-more { margin-top: 0; padding-top: 0; }
a.k8-tile-more:hover { color: var(--k8-green-text-hover); text-decoration: underline; }
.k8-tile-more::after { content: ""; width: 1em; height: 1em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .2s var(--k8-ease-out); }
.k8-tile--link:hover .k8-tile-more::after, a.k8-tile-more:hover::after { transform: translateX(3px); }

/* "Every number includes": icon chips. */
.k8-strip { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin: 1.75rem 0 0; padding: 0; }
.k8-strip li { display: inline-flex; align-items: center; gap: .625rem; padding: .5rem 1.125rem .5rem .5rem; background: var(--k8-white); border: 1px solid var(--k8-grey-200); border-radius: var(--k8-radius-pill); box-shadow: var(--k8-shadow-sm); font-family: var(--k8-font-heading); font-weight: 700; font-size: .9375rem; color: var(--k8-heading); }
.k8-strip .k8i { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: var(--k8-green-soft); color: var(--k8-green-text); }

/* 6. Plan cards and billing toggle -------------------------------------------------------- */
.k8-cycle { display: inline-flex; align-items: center; background: var(--k8-grey-100); border: 1px solid var(--k8-grey-200); border-radius: var(--k8-radius-pill); padding: .25rem; margin: 0 auto 2.25rem; }
.k8-plans { text-align: center; }
.k8-plans .row { text-align: left; }
.k8-cycle label { cursor: pointer; display: inline-flex; align-items: center; min-height: 42px; padding: .45rem 1.35rem; border-radius: var(--k8-radius-pill); font-family: var(--k8-font-heading); font-weight: 700; color: var(--k8-grey-600); transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; }
.k8-cycle label:hover { color: var(--k8-heading); }
.k8-cycle input:checked + label { background: var(--k8-white); color: var(--k8-heading); box-shadow: var(--k8-shadow-sm); }
.k8-cycle input:focus-visible + label { outline: 3px solid var(--k8-focus); outline-offset: 2px; }
.k8-cycle-save { display: inline-block; font-size: .6875rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--k8-dark); background: var(--k8-green); padding: .2em .55em; border-radius: var(--k8-radius-pill); margin-left: .45rem; }
.k8-plan { position: relative; height: 100%; display: flex; flex-direction: column; background: var(--k8-white); border: 2px solid var(--k8-grey-200); border-top: 8px solid var(--k8-green); border-radius: var(--k8-radius-xl); padding: 2rem 1.625rem 1.5rem; box-shadow: var(--k8-shadow-card); transition: box-shadow .25s ease, transform .25s var(--k8-ease-out), border-color .2s ease; }
.k8-plan:hover { box-shadow: var(--k8-shadow-door); transform: translateY(-3px); }
.k8-plan--popular { border-color: var(--k8-green); background: linear-gradient(180deg, #FAFCF3 0%, var(--k8-white) 38%); box-shadow: var(--k8-shadow-green); }
.k8-plan--popular:hover { box-shadow: 0 22px 48px rgba(111, 138, 26, .24); }
.k8-plan--addon { background: var(--k8-bg-alt); border-style: dashed; border-top-style: solid; border-top-color: var(--k8-grey-300); box-shadow: none; }
.k8-plan-badge { position: absolute; top: -1.25rem; left: 50%; transform: translateX(-50%); padding: .35em .95em; white-space: nowrap; box-shadow: 0 4px 12px rgba(111, 138, 26, .3); }
.k8-plan-name { font-size: 1.5rem; font-weight: 800; margin-bottom: .2rem; }
.k8-plan-tagline { color: var(--k8-grey-600); font-size: .9375rem; margin-bottom: 1rem; min-height: 1.4em; }
/* Four cards in a row: taglines wrap to one or two lines, so reserve two and the prices line up. */
@media (min-width: 1200px) { .col-xl-3 > .k8-plan .k8-plan-tagline, .col-xl-3 > .k8-plan .k8-plan-cycle-note { min-height: 3.2em; } }
.k8-plan-price { display: flex; align-items: baseline; flex-wrap: wrap; margin-bottom: .35rem; line-height: 1; }
.k8-plan-amount { font-family: var(--k8-font-heading); font-weight: 800; font-size: 2.75rem; letter-spacing: -.025em; color: var(--k8-heading); }
.k8-plan-per { color: var(--k8-grey-600); font-size: .9375rem; margin-left: .25rem; }
.k8-plan-cycle-note { font-size: .8125rem; color: var(--k8-grey-600); margin-bottom: .35rem; min-height: 1.2em; }
.k8-plan-fees { font-size: .75rem; color: var(--k8-text-muted); margin-bottom: 1rem; }
.k8-plan-minutes { padding: .625rem .875rem; background: var(--k8-green-soft); border: 1px solid var(--k8-green-soft-2); border-radius: 10px; font-size: .9375rem; color: var(--k8-grey-800); margin-bottom: 1rem; }
.k8-plan-minutes strong { color: var(--k8-heading); }
.k8-plan-features { flex: 1; margin-bottom: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--k8-grey-200); font-size: .9375rem; }
.k8-plan-features li { display: flex; gap: .55rem; align-items: flex-start; margin-bottom: .5rem; color: var(--k8-grey-800); }
.k8-plan-features .k8i { width: 18px; height: 18px; padding: 3px; margin-top: .15rem; border-radius: 50%; color: var(--k8-white); background: var(--k8-green-text); stroke-width: 3.2; }
.k8-plan-fairuse { font-size: .8125rem; color: var(--k8-grey-600); margin-bottom: 1rem; }
.k8-plan > .btn { min-height: 50px; display: flex; align-items: center; justify-content: center; font-size: 1.0625rem; }
.k8-plan-guarantee { font-size: .75rem; color: var(--k8-text-muted); text-align: center; margin: .75rem 0 0; }
.k8-plans-fineprint { font-size: .8125rem; color: var(--k8-text-muted); text-align: center; margin: 1.5rem auto 0; max-width: 48rem; }
/* The pricing page fine print (#fine-print): the only place usage rates are quoted; set small and low on the page. */
.k8-fineprint-band { padding: 0; }
.k8-fineprint-band .k8-container > * { max-width: 780px; }
.k8-fineprint-title { font-family: var(--k8-font-heading); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--k8-grey-600); margin: 0 0 .5rem; padding-top: 1.25rem; border-top: 1px solid var(--k8-grey-200); }
.k8-fineprint { margin: 0; padding-left: 1rem; font-size: .8125rem; line-height: 1.6; color: var(--k8-text-muted); }
.k8-fineprint li { margin-bottom: .2rem; }
.k8-fineprint a { color: inherit; }
.k8-plans--compact .k8-plan { padding: 1.75rem 1.375rem 1.25rem; }
.k8-plans--compact .k8-plan-amount { font-size: 2.25rem; }
.k8-number-pricing { background: var(--k8-white); border: 1px solid var(--k8-grey-200); border-radius: var(--k8-radius-xl); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--k8-shadow-card); }
.k8-split { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .k8-split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 7. Tables, FAQ, comparison -------------------------------------------------------------- */
.k8-table { --bs-table-bg: var(--k8-white); border-collapse: separate; border-spacing: 0; border: 1px solid var(--k8-grey-200); border-radius: 16px; overflow: hidden; font-size: .9375rem; color: var(--k8-grey-800); }
.k8-table > :not(:first-child) { border-top: 0; }
/* Bootstrap 5.1 paints the rule under the header in currentColor (near-black) with a (0,3,0) selector. */
.k8-table > :not(:last-child) > :last-child > * { border-bottom-color: var(--k8-grey-200); }
.k8-table > :not(caption) > * > * { padding: .875rem 1rem; border-bottom-color: var(--k8-grey-200); vertical-align: top; }
.k8-table.table-sm > :not(caption) > * > * { padding: .5rem .75rem; }
.k8-table thead th { background: var(--k8-grey-50); font-family: var(--k8-font-heading); font-weight: 700; font-size: .875rem; color: var(--k8-heading); white-space: nowrap; border-bottom: 1px solid var(--k8-grey-200); }
.k8-table tbody tr:last-child > * { border-bottom-width: 0; }
.k8-table tbody tr > * { transition: background-color .15s ease; }
.k8-table tbody tr:hover > *:not(.k8-compare-us):not(.k8-best) { background-color: #FAFBF6; }
.k8-table tbody th { color: var(--k8-heading); }
.k8-table--compare th[scope=row] { width: 20%; font-family: var(--k8-font-heading); font-weight: 700; }
/* Wide comparisons (six or more columns, e.g. /compare/best-toll-free-number-services with eight providers): nowrap headers
   sized every column to the provider name, squeezed the Kall8 column to two words a line and still scrolled sideways at
   1440px. Denser type, wrapping headers and a wider Kall8 column fit the container; phones scroll as before. */
.k8-table--compare:has(thead th:nth-child(6)) { font-size: .8125rem; line-height: 1.45; }
.k8-table--compare:has(thead th:nth-child(6)) > :not(caption) > * > * { padding: .625rem .5rem; }
.k8-table--compare:has(thead th:nth-child(6)) thead th { white-space: normal; font-size: .8125rem; }
.k8-table--compare:has(thead th:nth-child(6)) th[scope=row] { width: auto; min-width: 6.5rem; }
.k8-table--compare:has(thead th:nth-child(6)) .k8-compare-us { min-width: 12rem; }
/* Phones: tables with three or more columns already scroll sideways inside .table-responsive, but the columns were squeezed
   to a word or two per line (the add-ons Details column made one row 180px tall). Give the cells a readable width. */
@media (max-width: 575.98px) {
    .k8-table:has(thead th:nth-child(3)) > tbody > tr > td { min-width: 8.5rem; }
    .k8-table:has(thead th:nth-child(3)) > tbody > tr > td:last-child { min-width: 12rem; }
    .k8-table:has(thead th:nth-child(3)) > tbody > tr > th[scope=row] { min-width: 6.5rem; }
    .k8-table:has(thead th:nth-child(3)) > tbody > tr > td.k8-small { min-width: 14rem; }
    .k8-table.k8-table--compare:has(thead th:nth-child(3)) > tbody > tr > td:nth-child(2) { min-width: 12rem; }
}
.k8-compare-us, .k8-compare-us > td, .k8-compare-us > th { background-color: var(--k8-green-soft) !important; }
.k8-table thead th.k8-compare-us { box-shadow: inset 0 4px 0 var(--k8-green); color: var(--k8-green-text-hover); }
.k8-compare-source { font-size: .8125rem; color: var(--k8-text-muted); }
.k8-compare-source a { margin-right: .5rem; }
.k8-compare-snippet { padding: var(--k8-section-y) 0; }
.k8-best { font-weight: 800; color: var(--k8-green-text-hover); background-color: var(--k8-green-soft) !important; }

.k8-faq { padding: var(--k8-section-y) 0; }
.k8-faq-grid { display: grid; gap: 1.25rem 3.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) {
    .k8-faq-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); align-items: start; }
    .k8-faq-head { position: sticky; top: calc(var(--k8-header-height) + 1.5rem); }
}
.k8-faq-head .k8-section-intro { margin-bottom: 0; }
.k8-accordion { display: flex; flex-direction: column; gap: .75rem; }
.k8-accordion .accordion-item { background: var(--k8-white); border: 1px solid var(--k8-grey-200); border-radius: 14px; overflow: hidden; box-shadow: var(--k8-shadow-sm); transition: border-color .2s ease, box-shadow .2s ease; }
.k8-accordion .accordion-item:not(:first-of-type) { border-top: 1px solid var(--k8-grey-200); }
.k8-accordion .accordion-item:has(.accordion-button:not(.collapsed)) { border-color: var(--k8-green); box-shadow: var(--k8-shadow-card); }
.k8-accordion .accordion-button { gap: 1rem; padding: 1.125rem 1.25rem; font-family: var(--k8-font-heading); font-weight: 700; font-size: 1.0625rem; line-height: 1.35; color: var(--k8-heading); background: var(--k8-white); box-shadow: none; border-radius: 0 !important; }
.k8-accordion .accordion-button:hover { color: var(--k8-green-text-hover); }
.k8-accordion .accordion-button:not(.collapsed) { background: var(--k8-white); color: var(--k8-heading); box-shadow: none; }
.k8-accordion .accordion-button:focus { box-shadow: none; }
.k8-accordion .accordion-button::after,
.k8-accordion .accordion-button:not(.collapsed)::after { width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 50%; background-color: var(--k8-green-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F7812' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-size: 1rem; background-position: center; background-repeat: no-repeat; filter: none; transition: transform .25s var(--k8-ease-out), background-color .2s ease; }
.k8-accordion .accordion-button:not(.collapsed)::after { background-color: var(--k8-green); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2937' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.k8-accordion .accordion-body { padding: 0 1.25rem 1.25rem; color: var(--k8-grey-700); line-height: 1.7; }
.k8-accordion .accordion-body p:last-child { margin-bottom: 0; }
.k8-faq-cats { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 0; }
.k8-faq-cats a { display: inline-flex; align-items: center; min-height: 40px; padding: .4rem 1rem; border-radius: var(--k8-radius-pill); background: var(--k8-white); border: 1px solid var(--k8-grey-200); box-shadow: var(--k8-shadow-sm); text-decoration: none; font-family: var(--k8-font-heading); font-weight: 700; font-size: .9375rem; color: var(--k8-grey-800); transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.k8-faq-cats a:hover { background: var(--k8-green-soft); border-color: var(--k8-green); color: var(--k8-green-text-hover); }
.k8-choose { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .k8-choose { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 8. Calculator ------------------------------------------------------------------------------ */
.k8-calc { background: var(--k8-white); border: 2px solid var(--k8-grey-200); border-top: 8px solid var(--k8-green); border-radius: var(--k8-radius-xl); padding: clamp(1.25rem, 3vw, 2.25rem); box-shadow: var(--k8-shadow-door); }
/* minmax(0, …) + min-width:0: a plain 1fr track grows to its widest item's min-content, which pushed the calculator
   29px (390px screen) to 59px (360px) past the edge of the phone viewport on /pricing. */
.k8-calc-grid { display: grid; gap: 1.5rem 2rem; grid-template-columns: minmax(0, 1fr); }
.k8-calc-grid > * { min-width: 0; }
@media (min-width: 992px) { .k8-calc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }
.k8-calc-inputs label { font-weight: 700; font-size: .9375rem; }
.k8-calc-inputs > label { font-family: var(--k8-font-heading); color: var(--k8-heading); }
.k8-calc-inputs legend { font-family: var(--k8-font-heading); font-weight: 700; color: var(--k8-heading); }
.k8-calc-range { display: flex; align-items: center; gap: .75rem; margin-top: .375rem; }
.k8-calc-range input[type=range] { flex: 1; min-width: 0; accent-color: var(--k8-green-text); }
.k8-calc-range input[type=number] { width: 7.5rem; min-height: 48px; font-family: var(--k8-font-heading); font-weight: 700; }
.k8-calc .form-check-input:checked { background-color: var(--k8-green-text); border-color: var(--k8-green-text); }
.k8-calc-result { background: var(--k8-green-soft); border: 1px solid var(--k8-green-soft-2); border-radius: 16px; padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.k8-calc-plan { font-family: var(--k8-font-heading); font-weight: 800; font-size: 1.5rem; color: var(--k8-heading); margin-bottom: .25rem; }
.k8-calc-total { font-family: var(--k8-font-heading); font-weight: 800; font-size: clamp(2.25rem, 4vw, 3rem); letter-spacing: -.02em; line-height: 1; margin: .25rem 0 .5rem; color: var(--k8-heading); }
.k8-calc-total-suffix { display: inline-block; margin-left: .375rem; font-family: var(--k8-font-body); font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--k8-grey-600); }
.k8-calc-lines { font-size: .9375rem; margin: 1rem 0; }
.k8-calc-lines li { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px dashed rgba(111, 138, 26, .35); }
.k8-calc-vs { margin-top: 1.25rem; }
.k8-calc-vs table { margin-bottom: .5rem; }
.k8-calc-foot { font-size: .78rem; color: var(--k8-text-muted); }
.k8-calc-lines li > span:last-child { text-align: right; }
/* Phones: less nested padding, and a readable Basis column (the comparison table scrolls sideways inside .table-responsive). */
@media (max-width: 575.98px) {
    .k8-calc { padding: 1rem; }
    .k8-calc-result { padding: 1.125rem 1rem; }
    .k8-calc-vs .k8-table td:nth-child(3), .k8-calc-vs .k8-table th:nth-child(3) { min-width: 11rem; }
}

/* 9. Forms, contact band -------------------------------------------------------------------- */
.k8-lead-form .form-label { font-family: var(--k8-font-heading); font-weight: 700; font-size: .9rem; color: var(--k8-grey-800); margin-bottom: .35rem; }
.k8-lead-form .form-control, .k8-lead-form .form-select { min-height: 48px; border-color: var(--k8-grey-300); border-radius: var(--k8-radius); }
.k8-lead-form textarea.form-control { min-height: 0; }
.k8-lead-form .form-control:focus, .k8-lead-form .form-select:focus { border-color: var(--k8-green-text); box-shadow: 0 0 0 .25rem rgba(154, 177, 63, .25); }
.k8-lead-form .form-check-input:checked { background-color: var(--k8-green-text); border-color: var(--k8-green-text); }
.k8-lead-form .is-invalid { border-color: var(--k8-red); }
.k8-field-error { color: var(--k8-red); font-size: .8125rem; margin-top: .3rem; min-height: 0; }
.k8-field-error:empty { display: none; }
.k8-lead-status { border-radius: 12px; padding: .875rem 1rem; margin-bottom: 1rem; }
.k8-lead-status--ok { background: var(--k8-green-soft); border: 1px solid var(--k8-green); }
.k8-lead-status--err { background: #FEE2E2; border: 1px solid var(--k8-red); }
.k8-lead-actions { margin-top: 1.25rem; }
.k8-lead-actions .btn { min-height: 50px; padding-inline: 1.75rem; font-size: 1.0625rem; }
.k8-lead-privacy { font-size: .8125rem; color: var(--k8-text-muted); margin: .75rem 0 0; }
.k8-lead-title { font-size: clamp(1.35rem, 2vw, 1.625rem); font-weight: 800; margin-bottom: .375rem; }
.k8-lead-intro { color: var(--k8-grey-600); margin-bottom: 1.25rem; }
.k8-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.k8-contact-band { background: var(--k8-bg-alt); border-top: 1px solid var(--k8-grey-200); padding: var(--k8-section-y) 0; }
.k8-contact-title { font-size: clamp(1.75rem, 3.2vw, 2.5rem); margin-bottom: .875rem; }
.k8-contact-lead { font-size: 1.0625rem; color: var(--k8-grey-600); margin-bottom: 1.5rem; }
.k8-contact-list li { display: flex; gap: .75rem; align-items: center; margin-bottom: .875rem; }
.k8-contact-list .k8i { width: 42px; height: 42px; padding: 10px; border-radius: 12px; color: var(--k8-green-text); background: var(--k8-white); border: 1px solid var(--k8-grey-200); box-shadow: var(--k8-shadow-sm); }
.k8-contact-list a { font-weight: 700; }
.k8-section:not(.k8-section--alt, .k8-section--soft) .k8-contact-list .k8i { background: var(--k8-green-soft); border-color: var(--k8-green-soft-2); box-shadow: none; }
.k8-form-card { background: var(--k8-white); border: 1px solid var(--k8-grey-200); border-top: 6px solid var(--k8-green); border-radius: var(--k8-radius-xl); padding: clamp(1.25rem, 3vw, 2.25rem); box-shadow: var(--k8-shadow-door); }
.k8-upload { border: 2px dashed var(--k8-grey-300); border-radius: 12px; padding: 1rem; background: var(--k8-grey-50); transition: border-color .15s ease, background-color .15s ease; }
.k8-upload:hover, .k8-upload:focus-within { border-color: var(--k8-green); background: var(--k8-green-soft); }

/* 10. CTA panel, steps, testimonials, legal, misc ----------------------------------------- */
.k8-cta-band { padding: var(--k8-section-y) 0; }
.k8-cta-panel { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 1.75rem; padding: clamp(2.5rem, 6vw, 4rem) clamp(1.25rem, 5vw, 4rem); border-radius: var(--k8-radius-2xl); background: var(--k8-green-soft); text-align: center; }
/* Decoration only: two soft rings behind the panel copy. */
.k8-cta-panel::before, .k8-cta-panel::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.k8-cta-panel::before { width: 340px; height: 340px; top: -170px; left: -110px; border: 48px solid rgba(154, 177, 63, .14); }
.k8-cta-panel::after { width: 420px; height: 420px; bottom: -250px; right: -140px; background: radial-gradient(circle, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 70%); border: 1px solid rgba(154, 177, 63, .25); }
.k8-cta-title { margin: 0 0 .75rem; color: var(--k8-heading); }
.k8-cta-text { margin: 0 auto; max-width: 640px; font-size: 1.125rem; color: var(--k8-grey-700); }
.k8-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.k8-cta-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 56px; min-width: 220px; padding-inline: 1.75rem; }
@media (max-width: 575.98px) {
    .k8-cta-actions { width: 100%; flex-direction: column; }
    .k8-cta-actions .btn { width: 100%; min-width: 0; }
}
.k8-steps { counter-reset: step; display: grid; gap: 2rem 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .k8-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .k8-prose .k8-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.k8-step { counter-increment: step; position: relative; min-height: 3rem; padding-left: 4.25rem; }
.k8-step::before { content: counter(step); position: absolute; left: 0; top: 0; width: 3rem; height: 3rem; border-radius: 50%; background: var(--k8-green); color: var(--k8-dark); font-family: var(--k8-font-heading); font-weight: 800; font-size: 1.25rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 6px rgba(154, 177, 63, .18); }
.k8-step h3, .k8-prose .k8-step h3 { font-size: 1.3125rem; margin: .45rem 0 .5rem; }
.k8-step p, .k8-prose .k8-step p { margin: 0; font-size: 1rem; color: var(--k8-grey-600); line-height: 1.6; }
.k8-prose .k8-steps { padding-left: 0; }
.k8-testimonials { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .k8-testimonials { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.k8-testimonial { margin: 0; background: var(--k8-white); border: 1px solid var(--k8-grey-200); border-radius: var(--k8-radius-xl); padding: 2rem; height: 100%; display: flex; flex-direction: column; box-shadow: var(--k8-shadow-card); }
.k8-testimonial > .k8i { width: 44px; height: 44px; padding: 11px; border-radius: 12px; color: var(--k8-green-text); background: var(--k8-green-soft); }
.k8-testimonial blockquote { flex: 1; margin: 1.125rem 0 1.25rem; font-size: 1.0625rem; line-height: 1.7; color: var(--k8-grey-800); }
.k8-testimonial blockquote p { margin: 0; }
.k8-testimonial figcaption { display: flex; align-items: center; gap: .75rem; padding-top: 1.125rem; border-top: 1px solid var(--k8-grey-200); }
.k8-testimonial footer { font-size: .9375rem; color: var(--k8-grey-600); }
.k8-testimonial footer strong { color: var(--k8-heading); font-family: var(--k8-font-heading); }
.k8-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--k8-green); color: var(--k8-dark); font-family: var(--k8-font-heading); font-weight: 800; font-size: .9375rem; letter-spacing: .02em; }
/* Legal, thank-you and error pages have no hero: give their first band the same soft top. */
.k8-section:has(> .k8-legal, > .k8-thanks, > .k8-error) { background: linear-gradient(180deg, var(--k8-green-soft) 0, var(--k8-white) 320px); }
.k8-legal { max-width: 860px; }
.k8-legal h1 { margin-bottom: 1rem; }
.k8-legal h2 { font-size: 1.3125rem; font-weight: 700; letter-spacing: -.01em; margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--k8-grey-200); }
.k8-legal h3 { font-size: 1.0625rem; margin-top: 1.25rem; }
.k8-legal p { text-align: left; line-height: 1.7; }
.k8-legal .ps-3, .k8-legal .ps-5 { margin-bottom: .75rem; }
.k8-legal-new { margin-top: 2.25rem; border: 1px solid var(--k8-green-soft-2); border-left: 6px solid var(--k8-green); background: #FBFCF6; padding: .25rem 1.5rem 1rem; border-radius: 16px; }
.k8-legal-new > h2:first-child { border-top: 0; }
.k8-error { text-align: center; padding: 2rem 0; }
.k8-error-code { font-family: var(--k8-font-heading); font-weight: 800; font-size: clamp(5rem, 14vw, 8rem); line-height: 1; letter-spacing: -.04em; color: var(--k8-green); margin-bottom: 1rem; }
.k8-error p:has(> .btn) { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.k8-thanks { max-width: 760px; }
.k8-thanks .lead { font-size: 1.1875rem; color: var(--k8-grey-600); }
.k8-thanks-next { padding-left: 1.25rem; }
.k8-thanks-next li { margin-bottom: .6rem; }
.k8-thanks-next li::marker { color: var(--k8-green-text); font-weight: 700; }
.k8-thanks p:has(> .btn), .k8-error p:has(> .btn) { display: flex; flex-wrap: wrap; gap: .5rem; }
.k8-area-list { columns: 2; column-gap: 2rem; }
@media (min-width: 768px) { .k8-area-list { columns: 4; } }
.k8-area-list li { break-inside: avoid; margin-bottom: .45rem; }
.k8-area-list a { text-decoration: none; font-weight: 500; }
.k8-area-list a:hover { text-decoration: underline; }
.k8-rates-nav { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.5rem; }
.k8-rates-nav a { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; min-height: 2.5rem; padding: .3rem .5rem; background: var(--k8-white); border: 1px solid var(--k8-grey-200); border-radius: 10px; text-decoration: none; font-family: var(--k8-font-heading); font-weight: 700; color: var(--k8-grey-800); transition: background-color .15s ease, border-color .15s ease; }
.k8-rates-nav a:hover { background: var(--k8-green-soft); border-color: var(--k8-green); color: var(--k8-green-text-hover); }
.k8-rates-letter { margin-top: 2.25rem; }
.k8-fairuse-numbers { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .k8-fairuse-numbers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.k8-fairuse-numbers .k8-tile { border-top: 6px solid var(--k8-green); }
.k8-fairuse-numbers .k8-tile strong { display: block; margin-bottom: .25rem; font-family: var(--k8-font-heading); font-size: 2.25rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--k8-heading); }
/* One column per list: two text columns inside each third of the page wrapped most titles onto two or three lines. */
.k8-sitemap .row ul { columns: 1; }
.k8-sitemap h2 { padding-bottom: .5rem; border-bottom: 2px solid var(--k8-green-soft-2); }
.k8-verdict { position: relative; background: var(--k8-green-soft); border: 1px solid var(--k8-green-soft-2); border-left: 6px solid var(--k8-green); border-radius: var(--k8-radius-xl); padding: 1.5rem 1.75rem; font-size: 1.125rem; line-height: 1.65; color: var(--k8-grey-800); }
.k8-story-placeholder { border: 2px dashed var(--k8-amber); background: #FFFBEB; padding: 1rem 1.25rem; border-radius: var(--k8-radius-lg); }
.k8-stores { display: flex; flex-wrap: wrap; gap: .5rem; }
.k8-stores a { display: inline-flex; align-items: center; gap: .4rem; }
.k8-agent-example { background: var(--k8-white); border: 1px solid var(--k8-grey-200); border-top: 6px solid var(--k8-green); border-radius: var(--k8-radius-xl); padding: clamp(1.25rem, 3vw, 1.75rem); box-shadow: var(--k8-shadow-card); }

/* 11. Header / footer touches for this site, cookie consent -------------------------------- */
/* Page gutters. Bootstrap's 12px sits too close to 20px-radius cards, and .k8-container (1200px) meets the viewport edge
   on every screen narrower than 1248px, so give it 16px on phones and 24px up to the width where the page gets margins. */
.k8-container { padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 768px) { .k8-container { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1248px) { .k8-container { padding-left: .75rem; padding-right: .75rem; } }
@media (min-width: 992px) {
    /* Frosted sticky header on desktop; the shadow appears once the page scrolls (site.js adds .is-scrolled). */
    .k8-header { background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); box-shadow: none; transition: box-shadow .2s ease; }
    .k8-header.is-scrolled { box-shadow: var(--k8-shadow-md); }
}
/* Mobile header bar. The shared bar (logo 134px + tap-to-call 155px + "Menu" 87px) wrapped to two rows (86px) on every
   phone narrower than 430px, and the menu button was 32px tall. Keep one row under 64px with 44px tap targets: tighter
   logo spacing, an icon-only menu button below 430px (aria-label "Toggle navigation" stays), and an icon-only call link
   below 360px (aria-label "Call <number>" stays). */
@media (max-width: 991.98px) {
    .k8-brand { margin-right: .5rem; }
    .k8-mobile-actions { gap: .375rem; }
    .k8-toggler { min-width: 44px; min-height: 44px; justify-content: center; }
    .k8-phone--mobile { min-height: 44px; }
}
@media (max-width: 429.98px) {
    .k8-brand img { height: 30px; }
    .k8-toggler-label { display: none; }
    .k8-phone--mobile { padding-left: .375rem; padding-right: .375rem; gap: .3rem; }
    .k8-phone--mobile .k8-phone-text { font-size: .875rem; }
}
@media (max-width: 359.98px) {
    .k8-phone--mobile { min-width: 44px; justify-content: center; }
    .k8-phone--mobile .k8-phone-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}
/* Touch targets: default and small buttons are 35-38px tall; on phones give every button at least 44px. */
@media (max-width: 575.98px) {
    .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .k8-plan > .btn, .k8-door-cta, .k8-search-go { display: flex; }
}
/* The contact band (or the page's last band) supplies the space above the dark footer. */
.k8-footer { margin-top: 0; }
.k8-consent { position: fixed; z-index: 1050; background: var(--k8-white); left: 1rem; right: 1rem; bottom: 1rem; max-width: 1140px; margin: 0 auto; border: 1px solid var(--k8-grey-200); border-radius: 16px; box-shadow: 0 20px 50px rgba(17, 24, 39, .18); padding: 1rem 0; }
.k8-consent-inner { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.k8-consent-title { font-family: var(--k8-font-heading); font-weight: 700; margin: 0 0 .25rem; color: var(--k8-heading); }
.k8-consent-text { margin: 0; font-size: .9rem; color: var(--k8-grey-600); max-width: 760px; }
.k8-consent-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
@media (max-width: 575.98px) {
    .k8-consent { left: .5rem; right: .5rem; bottom: .5rem; }
    .k8-consent-actions { width: 100%; }
    .k8-consent-actions .btn { flex: 1 1 0; }
}

/* 12. Reveal (site.js adds is-visible; only below-the-fold elements start hidden) ------------ */
.k8-reveal.k8-reveal--pending { opacity: 0; transform: translateY(18px); }
.k8-reveal.is-visible { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s var(--k8-ease-out); }
.k8-tiles > .k8-reveal.is-visible:nth-child(3n+2), .k8-testimonials > .k8-reveal.is-visible:nth-child(3n+2) { transition-delay: .08s; }
.k8-tiles > .k8-reveal.is-visible:nth-child(3n), .k8-testimonials > .k8-reveal.is-visible:nth-child(3n) { transition-delay: .16s; }
/* Once revealed, a link tile's hover lift uses its own quick transition, not the reveal's delay and duration. */
.k8-tile--link.k8-reveal.is-visible:hover, .k8-tile--link.k8-reveal.is-visible:focus-visible { transition: border-color .2s ease, box-shadow .25s ease, transform .25s var(--k8-ease-out); transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
    .k8-reveal.k8-reveal--pending { opacity: 1; transform: none; }
    .k8-reveal.is-visible { transition: none; }
    .k8-door, .k8-tile--link, .k8-plan, .btn-k8, .btn-k8-solid, .btn-k8-outline, .btn-k8-dark, .btn-k8-white, .btn .k8i-arrow-right, .k8-tile-more::after { transition: none; }
    a.k8-door:hover, a.k8-door:focus-visible, .k8-tile--link:hover, .k8-tile--link:focus-visible, .k8-plan:hover, .btn:hover, .btn:hover .k8i-arrow-right { transform: none; }
}