/* InboxKit finish for the older page families (founder 2026-11-09: "the beautiful inboxkit finish on every page").
   Reference: /ai-video-house-call/ and the homepage. Loaded after style.css / tool-kit.css by scripts/ik-finish.py,
   which also puts a family class on <body>, so nothing here reaches the hand-built pages:
     .ika  article family (guides, best-ai, compare, tools, hubs, legal) built on style.css
     .ikt  trade landing pages (/plumbing/ and friends) built by build-trade-pages.py with their own inline CSS
   Traits: one headline colour, tight 800 type, 1px #e2e8f0 borders instead of shadows, bordered cards, tables and
   FAQs, bordered stat strips, pill buttons that never wrap, hairline-separated sections, generous whitespace. */

:root { --ik-line: #e2e8f0; --ik-soft: #f8fafc; --ik-ink: #0f172a; --ik-body: #475569; --ik-teal: #0f766e; --ik-teal-d: #115e59; }

/* ---------------------------------------------------------------- shared: buttons and the plan choice */
.ika .btn-primary, .ikt .btn-primary { border-radius: 999px; box-shadow: none; white-space: nowrap; }
.ika .btn-primary:hover, .ikt .btn-primary:hover { transform: none; box-shadow: none; }
.ika .btn-secondary { border-radius: 999px; white-space: nowrap; background: var(--card, #fff); }
.ika .btn-secondary:hover { transform: none; box-shadow: none; }

body .uvc { background: var(--bg, #fff); border-top: 1px solid var(--ik-line); padding: 72px 16px; }
body .uvc h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; color: var(--ik-ink); }
body .uvc-sub { font-size: 1.05rem; color: var(--ik-body); }
body .uvc-card { border-radius: 18px; padding: 26px; border: 1px solid var(--ik-line); }
body .uvc-card.pick { border: 1px solid var(--ik-teal); box-shadow: 0 0 0 3px rgba(15,118,110,.08); }
body .uvc-tag { text-transform: none; letter-spacing: 0; font-size: .82rem; }
body .uvc-name { font-family: 'Sora', sans-serif; font-weight: 800; letter-spacing: -.02em; font-size: 1.35rem; }
body .uvc-btn { border-radius: 999px; padding: 13px 18px; }
@media (prefers-color-scheme: dark) {
  /* The rest of the site is light-only; keep this block light with it. */
  body .uvc { background: #fff; }
  body .uvc h2, body .uvc-name { color: var(--ik-ink); }
  body .uvc-sub, body .uvc-card p.d, body .uvc-price { color: var(--ik-body); }
  body .uvc-card { background: #fff; border-color: var(--ik-line); }
  body .uvc-btn.alt { background: #fff; color: var(--ik-teal); border-color: var(--ik-teal); }
  body .uvc-all a { color: var(--ik-teal); }
}

/* "Still deciding?" strip (inline-styled by upgrade-all-pages.py) */
body aside[aria-label="Before you decide"] { border-radius: 16px !important; padding: 22px 24px !important; border-color: var(--ik-line) !important; background: var(--ik-soft); }
body aside[aria-label="Before you decide"] h2 { font-weight: 800; letter-spacing: -.02em; }

/* CTA row under the article headline and the playbook card (both added by ik-finish.py) */
.ik-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 26px 0 0; }
.ik-cta .ik-go { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 999px; background: var(--ik-teal); color: #fff !important; font-weight: 600; font-size: 1rem; white-space: nowrap; text-decoration: none !important; }
.ik-cta .ik-go:hover { background: var(--ik-teal-d); }
.ik-cta .ik-alt { font-weight: 600; color: var(--ik-ink) !important; white-space: nowrap; text-decoration: none !important; border-bottom: 1px solid var(--ik-line); padding-bottom: 2px; }
.ik-cta .ik-alt:hover { border-color: var(--ik-teal); }
.ik-risk { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; padding: 0; margin: 14px 0 0 !important; font-size: .9rem; color: var(--text-dim, #64748b); }
.ik-risk li { display: inline-flex; align-items: center; gap: 6px; margin: 0 !important; }
.ik-risk li::before { content: ""; width: 9px; height: 5px; margin: 0 3px 3px 2px; border-left: 2px solid var(--ik-teal); border-bottom: 2px solid var(--ik-teal); transform: rotate(-45deg); flex: none; }
.ik-magnet { display: grid; grid-template-columns: 1fr auto; gap: 18px 28px; align-items: center; border: 1px solid var(--ik-line); border-radius: 18px; padding: 24px 26px; margin: 40px 0 8px; background: var(--ik-soft); }
.ik-magnet b { display: block; font-family: 'Sora', sans-serif; font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--ik-ink); margin-bottom: 6px; }
.ik-magnet p { margin: 0 !important; font-size: .98rem !important; color: var(--ik-body) !important; }
.ik-magnet small { display: block; margin-top: 8px; font-size: .85rem; color: var(--text-dim, #64748b); }
.ik-magnet .ik-go { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--ik-teal); color: var(--ik-teal) !important; background: #fff; font-weight: 600; white-space: nowrap; text-decoration: none !important; }
.ik-magnet .ik-go:hover { background: var(--ik-teal); color: #fff !important; }
@media (max-width: 640px) { .ik-magnet { grid-template-columns: 1fr; padding: 20px; } .ik-magnet .ik-go { justify-content: center; } }

/* ---------------------------------------------------------------- article family */
.ika .wrap.breadcrumb { max-width: 760px; }
.ika .eyebrow { text-transform: none; letter-spacing: 0; font-size: .85rem; font-weight: 600; color: var(--ik-ink); background: var(--card, #fff); border: 1px solid var(--ik-line); padding: 5px 12px 5px 9px; display: inline-flex; align-items: center; gap: 8px; }
.ika .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #14b8a6; box-shadow: 0 0 0 4px rgba(20,184,166,.18); flex: none; }
.ika .article-head { padding-top: 48px; padding-bottom: 48px; }
.ika .article-head h1 { font-size: clamp(2.25rem, 4.8vw, 3.4rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; margin-bottom: 18px; color: var(--ik-ink); }
.ika .article-head h1 span, .ika .article-head h1 em { color: inherit; }
.ika .article-head .dek { font-size: 1.18rem; line-height: 1.55; color: var(--ik-body); margin-top: 14px; }
.ika .article-head .updated { margin-bottom: 4px !important; }
.ika .article-meta { flex-wrap: wrap; gap: 6px 16px; }
.ika .quick-answer { background: var(--ik-soft); border: 1px solid var(--ik-line); border-left: 1px solid var(--ik-line); border-radius: 16px; padding: 18px 20px; margin: 18px 0 6px; }
.ika .quick-answer p { font-size: 1.02rem; }
.ika .share-bar { gap: 6px; margin-top: 22px; }
.ika .share-bar a, .ika .share-bar button { min-height: 36px; padding: 7px 12px; font-size: .8rem; font-weight: 600; color: var(--ik-body); }
@media (pointer: coarse) { .ika .share-bar a, .ika .share-bar button { min-height: 44px; } }

.ika .answer-box { box-shadow: none; border: 1px solid var(--ik-line); border-radius: 16px; background: var(--ik-soft); padding: 24px 26px; }
.ika .wrap > .answer-box { max-width: 712px; margin-left: auto; margin-right: auto; }
.ika .answer-box .label { text-transform: none; letter-spacing: 0; font-size: .85rem; color: var(--ik-teal); }

.ika section { padding: 72px 0; }
.ika .prose h2 { font-size: clamp(1.55rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.12; margin: 56px 0 14px; color: var(--ik-ink); }
.ika .prose > h2:first-child { margin-top: 0; }
.ika .prose h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -.015em; margin: 32px 0 10px; }
.ika .prose p, .ika .prose ul, .ika .prose ol { color: var(--ik-body); font-size: 1.06rem; line-height: 1.7; }
.ika .prose li { margin-bottom: 10px; }
.ika .prose a:not([class]) { color: var(--ik-teal-d); text-decoration: underline; text-underline-offset: 2px; }
.ika .prose img { max-width: 100%; height: auto; }

/* Tables: one rounded bordered shell, generous cells, header on a soft band; phones scroll inside the shell. */
.ika .prose table, .ika table.prose-table, .ika table.tbl { border-collapse: separate !important; border-spacing: 0; border: 1px solid var(--ik-line); border-radius: 16px; overflow: hidden; background: var(--card, #fff); margin: 24px 0 !important; font-size: .97rem; width: 100%; }
.ika .prose table th, .ika .prose table td, .ika table.prose-table th, .ika table.prose-table td { padding: 14px 16px !important; border: 0 !important; border-top: 1px solid var(--ik-line) !important; text-align: left; vertical-align: top; }
.ika .prose table thead th, .ika table.prose-table thead th, .ika .prose table tr:first-child th { border-top: 0 !important; background: var(--ik-soft); color: var(--ik-ink); font-weight: 700; font-size: .9rem; }
.ika .prose table tr, .ika table.prose-table tr { border: 0 !important; }
.ika .prose table td { color: var(--ik-body); }
.ika .prose table td:first-child { color: var(--ik-ink); font-weight: 600; }
.ika div[style*="overflow-x:auto"], .ika div[style*="overflow-x: auto"] { border-radius: 16px; max-width: 100%; }
@media (max-width: 640px) {
  .ika .prose table { font-size: .9rem; }
  .ika .prose table th, .ika .prose table td { padding: 10px 10px !important; overflow-wrap: anywhere; }
}

/* FAQs as bordered cards */
.ika .faq-item { border: 1px solid var(--ik-line) !important; border-radius: 16px; padding: 20px 22px; margin: 0 0 12px; background: var(--card, #fff); }
.ika .faq-item h3 { font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: 8px; }
.ika .faq-item p { color: var(--ik-body); font-size: 1rem; line-height: 1.65; }
.ika .guide-faq .wrap { max-width: 760px; }
.ika .guide-faq h2, .ika section > .wrap > h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
.ika details { border: 1px solid var(--ik-line); border-radius: 16px; padding: 0 20px; margin-bottom: 12px; background: var(--card, #fff); }
.ika details > summary { font-weight: 600; cursor: pointer; min-height: 56px; padding: 16px 0; list-style-position: inside; }

/* Cards: hairline borders, no lift */
.ika .cluster-card, .ika .pillar { box-shadow: none; border-radius: 16px; border-color: var(--ik-line); }
.ika .cluster-card:hover, .ika .pillar:hover { transform: none; box-shadow: none; border-color: var(--ik-teal); }
.ika .cluster-card h4 { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.ika .pillar .num { background: var(--card, #fff); border: 1px solid var(--ik-line); color: var(--ik-ink); border-radius: 10px; }
.ika .lc-card { box-shadow: none; border-radius: 18px; border-color: var(--ik-line); }
.ika .lc-results { border: 1px solid var(--ik-teal); box-shadow: 0 0 0 3px rgba(15,118,110,.08); }
.ika .lc-big > div { background: var(--ik-soft); border: 1px solid var(--ik-line); border-radius: 14px; }
.ika .lc-big .v { color: var(--ik-ink); font-weight: 800; letter-spacing: -.02em; }
.ika .formula { border-radius: 14px; background: var(--ik-soft); }

/* Conversion block: a light bordered panel instead of the dark slab */
.ika .uv-cta { background: var(--ik-soft); color: var(--ik-ink); border: 1px solid var(--ik-line); border-radius: 20px; padding: 32px 30px; }
.ika .uv-cta h2 { color: var(--ik-ink); font-size: clamp(1.45rem, 2.6vw, 1.9rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
.ika .uv-cta p, .ika .uv-cta li { color: var(--ik-body); }
.ika .uv-cta li::before { color: var(--ik-teal); }
.ika .uv-cta .uv-btn { background: var(--ik-teal); color: #fff; border-radius: 999px; padding: 13px 20px; white-space: nowrap; }
.ika .uv-cta .uv-btn.alt { background: #fff; color: var(--ik-ink); border: 1px solid var(--ik-line); }
.ika .uv-cta .uv-btn.alt:hover { border-color: var(--ik-teal); }
.ika .uv-cta .uv-src, .ika .uv-cta .uv-src a { color: #64748b; }
@media (max-width: 640px) { .ika .uv-cta { padding: 24px 20px; } }

/* Stat strip (cells written by ik-finish.py only where a page already cites the numbers) */
.ik-stats { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--ik-line); border-radius: 18px; overflow: hidden; background: var(--card, #fff); margin: 8px 0 10px; }
.ik-stats div { padding: 22px 22px 20px; border-left: 1px solid var(--ik-line); }
.ik-stats div:first-child { border-left: 0; }
.ik-stats b { display: block; font-family: 'Sora', sans-serif; font-size: 2.2rem; line-height: 1; letter-spacing: -.03em; font-weight: 800; color: var(--ik-ink); white-space: nowrap; margin-bottom: 8px; }
.ik-stats span { font-size: .95rem; color: var(--ik-body); line-height: 1.45; display: block; }
.ik-src { font-size: .78rem; color: var(--text-dim, #64748b); margin: 0 0 18px; }
.ik-src a { color: inherit; text-decoration: underline; }
.ik-stats.n2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .ik-stats, .ik-stats.n2 { grid-template-columns: 1fr; } .ik-stats div { border-left: 0; border-top: 1px solid var(--ik-line); } .ik-stats div:first-child { border-top: 0; } }

/* Phones: nothing may push the page wider than the screen */
@media (max-width: 760px) {
  .ika .article-head .article-meta { font-size: .8rem; }
  .ika pre, .ika code { white-space: pre-wrap; overflow-wrap: anywhere; }
  .ika .prose, .ika .article-head, .ika .lc { overflow-wrap: break-word; }
}

/* ---------------------------------------------------------------- trade family */
.ikt .eyebrow { background: #fff; color: var(--ik-ink); border: 1px solid var(--ik-line); font-size: .85rem; padding: 5px 12px 5px 9px; display: inline-flex; align-items: center; gap: 8px; }
.ikt .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #14b8a6; box-shadow: 0 0 0 4px rgba(20,184,166,.18); flex: none; }
.ikt h1 { font-weight: 800; letter-spacing: -.035em; line-height: 1.03; }
.ikt h1 .accent { color: inherit; }
@media (min-width: 720px) { .ikt h1 { font-size: clamp(2.6rem, 4.4vw, 3.5rem); } .ikt h2 { font-size: clamp(1.9rem, 3.2vw, 2.5rem); } }
.ikt h2 { font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
.ikt .lead { font-size: 1.15rem; line-height: 1.55; }
.ikt .btn { border-radius: 999px; white-space: nowrap; }
.ikt .btn-primary { box-shadow: none; }
.ikt .btn-ghost { border-width: 1px; }
.ikt .ik-fw { margin-top: 14px; font-size: .95rem; }
.ikt .ik-fw a { font-weight: 600; color: var(--ik-ink); text-decoration: none; border-bottom: 1px solid var(--ik-line); padding-bottom: 2px; white-space: nowrap; }
.ikt .ik-fw a:hover { border-color: var(--ik-teal); }
.ikt .ticks li::before { width: 9px; height: 5px; border-radius: 0; background: none; box-shadow: none; border-left: 2px solid var(--ik-teal); border-bottom: 2px solid var(--ik-teal); transform: rotate(-45deg); margin: 0 3px 3px 2px; }
/* Hairline-separated sections on white instead of grey bands */
.ikt main > section { border-top: 1px solid var(--ik-line); }
.ikt main > section.hero { border-top: 0; }
.ikt .alt { background: var(--bg, #fff); }
.ikt .sub { font-size: 1.08rem; }
/* Numbers as one bordered strip */
.ikt .stats { gap: 0; border: 1px solid var(--ik-line); border-radius: 18px; overflow: hidden; background: #fff; }
.ikt .stat { border: 0; border-radius: 0; padding: 26px 26px 22px; border-top: 1px solid var(--ik-line); }
.ikt .stat:first-child { border-top: 0; }
@media (min-width: 720px) { .ikt .stat { border-top: 0; border-left: 1px solid var(--ik-line); } .ikt .stat:first-child { border-left: 0; } }
.ikt .stat b { font-size: 2.5rem; font-weight: 800; letter-spacing: -.03em; color: var(--ik-ink); line-height: 1; margin-bottom: 10px; white-space: nowrap; }
.ikt .stat p { color: var(--ik-body); }
/* Bordered cards, no shadows */
.ikt .does li, .ikt .ctrl div, .ikt .price-card, .ikt .anchor, .ikt details, .ikt .lc-card, .ikt .vid-chip { box-shadow: none; border-radius: 16px; }
.ikt .does li { padding: 22px 22px 22px 66px; }
.ikt .does li::before { border-radius: 10px; background: #fff; border: 1px solid var(--ik-line); color: var(--ik-ink); width: 32px; height: 32px; left: 18px; top: 19px; }
.ikt .does li.top { border: 1px solid var(--ik-teal); box-shadow: 0 0 0 3px rgba(15,118,110,.08); }
.ikt .core li { border-radius: 12px; }
.ikt .price-card.featured { border: 1px solid var(--ik-teal); box-shadow: 0 0 0 3px rgba(15,118,110,.08); }
.ikt details { padding: 0 20px; }
.ikt .calc-cta { background: var(--ik-soft); color: var(--ik-ink); border: 1px solid var(--ik-line); border-radius: 20px; }
.ikt .calc-cta h2 { color: var(--ik-ink); }
.ikt .calc-cta p { color: var(--ik-body); }
.ikt .play-btn { box-shadow: none; }
.ikt .sticky-cta { box-shadow: none; }
body.ika aside[aria-label="Before you decide"] { max-width: 712px !important; }
@media (max-width: 640px) { .ika .article-head .dek { font-size: 1.06rem; } .ika .article-head { padding-top: 32px; padding-bottom: 36px; } }
.ika .uv-cta h2, .ika .lc-card h2, .ika .lc-card h3 { margin-top: 0; }