/* ═══════════════════════════════════════════════════════════════════════
   Lotly 2026 theme — light, Lotly orange, Outfit, pill buttons, rounded
   cards. Loaded LAST by includes/header.php so it restyles the existing
   header/footer/newsletter markup without touching their behaviour
   (login modal, mobile sidebar, Resources dropdown, consent banner).
   New page layouts use the .lt2-* classes below.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --lt-orange: #FEA327;
  --lt-orange-ink: #B45309;      /* orange text on white (4.5:1) */
  --lt-cream: #FFFCF5;
  --lt-cream-2: #FFF6E6;
  --lt-cream-3: #FFF1D6;
  --lt-tile: #FFFAEB;
  --lt-tile-border: #FCEBC7;
  --lt-ink: #1C1C1C;
  --lt-muted: #57534E;
  --lt-line: #EEECE8;
  --lt-sand: #FAF8F4;
  --lt-radius: 24px;
}

body { color: var(--lt-ink); }

/* ── Buttons (site-wide) ─────────────────────────────────────────────── */
.btn-yellow, .btn-demo, .lt2-btn {
  background: var(--lt-orange) !important;
  border: 1px solid var(--lt-orange) !important;
  color: var(--lt-ink) !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  padding: 12px 24px;
  box-shadow: none;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .15s ease, box-shadow .2s ease;
}
.btn-yellow:hover, .btn-demo:hover, .lt2-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(254,163,39,.35) !important;
  color: var(--lt-ink) !important;
  background: var(--lt-orange) !important;
}
.lt2-btn-lg { padding: 16px 30px; font-size: 17px; }
.lt2-btn-ghost {
  background: #fff; color: var(--lt-ink); border: 1px solid var(--lt-line);
  border-radius: 999px; padding: 12px 24px; font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px; transition: background .2s, border-color .2s;
}
.lt2-btn-ghost:hover { background: var(--lt-cream-2); border-color: #FCD9A0; color: var(--lt-ink); }
.lt2-btn-dark { background: var(--lt-ink); color: #fff; border-radius: 999px; padding: 16px 28px; font-weight: 600; text-decoration: none; display: inline-flex; }
.lt2-btn-dark:hover { color: #fff; transform: translateY(-1px); }

/* ── Header ──────────────────────────────────────────────────────────── */
header {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255,255,255,.97);
  /* no backdrop-filter: it makes header a containing block, so the fixed mobile sidebar inside it renders on screen */
  border-bottom: 1px solid #F3F1EE;
}
.lt-navbar { background: transparent; min-height: 72px; padding: 14px 20px; }
.nav-center .nav-links { align-items: center; gap: 4px; }
.nav-center .nav-links li { margin: 0; }
.nav-center .nav-links a {
  color: var(--lt-muted); font-size: 15px; font-weight: 500;
  padding: 8px 14px; border-radius: 999px; display: inline-block;
}
.nav-center .nav-links a:hover { color: var(--lt-ink); background: var(--lt-cream-2); }
.nav-center .nav-links a.active-menu,
.nav-center .nav-links li.active-menu > a { color: var(--lt-ink) !important; font-weight: 600; background: var(--lt-cream-3); }
.nav-links .nav-resources > a { padding-bottom: 8px; margin-bottom: 0; }
.nav-links .nav-resources-menu { border-radius: 18px; border-color: var(--lt-line); padding: 8px; box-shadow: 0 18px 40px rgba(28,28,28,.10); min-width: 220px; }
.nav-links .nav-resources-menu li a { border-radius: 12px; padding: 10px 14px; font-size: 15px; }
.nav-links .nav-resources-menu li a:hover { background: var(--lt-cream-2); color: var(--lt-ink); }
.btn-demo { padding: 11px 20px; font-size: 15px; min-height: 0; }
header .btn-custom, header .nav-right .btn-outline-dark {
  width: auto; border-radius: 999px !important; border: 1px solid var(--lt-line) !important;
  padding: 10px 18px; font-weight: 600 !important; font-size: 15px; color: var(--lt-ink);
}
header .btn-custom:hover, header .nav-right .btn-outline-dark:hover { background: var(--lt-cream-2) !important; color: var(--lt-ink) !important; border-color: #FCD9A0 !important; }
.hamburger, .hamburger i { color: var(--lt-ink); }
.sidebar-links a:hover { color: var(--lt-orange-ink); }

/* ── Newsletter ─────────────────────────────────────────────────────── */
.news-letter-col { background: transparent !important; padding: 0 0 72px !important; min-height: 0; }
.news-letter-col > .container {
  max-width: 1200px; background: var(--lt-cream-2); border: 1px solid #FCE3BA;
  border-radius: 28px; padding: 36px 40px;
}
.news-letter-col h2 { font-size: 30px; font-weight: 600; letter-spacing: -.8px; margin-bottom: 4px; }
.news-letter-col .sign-col p { color: var(--lt-muted); margin: 0; }
.news-letter-col .form-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.news-letter-col .input-icon-group { background: #fff; border: 1px solid #F3E2C2; border-radius: 999px; padding: 6px; gap: 8px !important; }
.news-letter-col .input-icon-group img { left: 1.1rem; }
.news-letter-col .icon-input { border: 0 !important; box-shadow: none !important; background: transparent; }
.news-letter-col .btn-yellow { padding: 10px 24px; flex: 0 0 auto; }
.news-letter-col .disclaimer { display: block; font-size: 12px; margin-top: 10px !important; color: var(--lt-muted) !important; }
.news-letter-col .disclaimer a { color: var(--lt-ink); }

/* ── Footer ─────────────────────────────────────────────────────────── */
footer { background: var(--lt-sand); color: var(--lt-ink); border-top: 1px solid #F0ECE4; padding: 56px 20px 32px; }
.footer-col h5 { color: var(--lt-orange-ink); font-weight: 600; font-size: 15px; margin-bottom: 14px; }
.footer-col-1 a, .footer-col-1 li { color: var(--lt-ink); font-size: 15px; }
.footer-col-2 a, .footer-col-3 a, .footer-col-4 a, .footer-col-5 a { color: #44403C; font-size: 15px; }
.footer-col-2 a:hover, .footer-col-3 a:hover, .footer-col-4 a:hover, .footer-col-5 a:hover, .footer-col-1 a:hover { color: var(--lt-orange-ink); }
.footer-col-2 li, .footer-col-3 li, .footer-col-4 li, .footer-col-5 li { padding: 5px 0; }
footer .social-icons a {
  width: 40px; height: 40px; border-radius: 999px; background: var(--lt-ink);
  display: inline-flex; align-items: center; justify-content: center;
}
footer .social-icons img { width: 18px; height: 18px; }
footer .footer-family { border-top-color: #EAE5DA !important; }
footer .footer-family span { color: var(--lt-muted) !important; }
footer .footer-family a { color: #44403C !important; }
footer .footer-family a strong { color: var(--lt-ink) !important; }

/* ── Page building blocks ───────────────────────────────────────────── */
.lt2 { color: var(--lt-ink); }
.lt2-wrap { max-width: 1200px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.lt2-hero { padding-top: 88px; padding-bottom: 40px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.lt2-h1 { margin: 0; font-size: 76px; line-height: 1.04; font-weight: 600; letter-spacing: -2.8px; max-width: 1000px; }
.lt2-h2 { margin: 0; font-size: 48px; line-height: 1.05; font-weight: 600; letter-spacing: -1.6px; }
.lt2-h3 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -.6px; }
.lt2-sub { margin: 0; font-size: 19px; line-height: 1.55; color: var(--lt-muted); max-width: 720px; }
.lt2-muted { color: var(--lt-muted); }
.lt2-ink { color: var(--lt-orange-ink); }
.lt2-section { padding-top: 40px; padding-bottom: 40px; }
.lt2-center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.lt2-card {
  background: #fff; border: 1px solid var(--lt-line); border-radius: var(--lt-radius); padding: 28px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
a.lt2-card, button.lt2-card { color: var(--lt-ink); text-decoration: none; text-align: left; font: inherit; cursor: pointer; }
.lt2-card.is-link:hover, a.lt2-card:hover, button.lt2-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(180,83,9,.10); border-color: #FCD9A0; }
.lt2-card-cream { background: var(--lt-cream); border-color: #FCE3BA; }
.lt2-icon {
  width: 64px; height: 64px; border-radius: 18px; background: var(--lt-tile); border: 1px solid var(--lt-tile-border);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: transform .25s ease;
}
.lt2-icon img { width: 46px; height: 46px; }
.lt2-icon.sm { width: 56px; height: 56px; border-radius: 16px; }
.lt2-icon.sm img { width: 40px; height: 40px; }
.lt2-card:hover .lt2-icon { transform: scale(1.06) rotate(-2deg); }
.lt2-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; padding: 8px 14px; border-radius: 999px; background: var(--lt-cream-2); color: var(--lt-ink); }
.lt2-badge { font-size: 11px; font-weight: 700; background: var(--lt-orange); border-radius: 999px; padding: 2px 8px; color: var(--lt-ink); letter-spacing: .3px; }
.lt2-pill-btn {
  font: inherit; font-size: 15px; font-weight: 500; padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--lt-line); background: #fff; color: var(--lt-ink); cursor: pointer; text-decoration: none;
  transition: background .2s, border-color .2s;
}
.lt2-pill-btn:hover { background: var(--lt-cream-2); border-color: #FCD9A0; color: var(--lt-ink); }
.lt2-pill-btn.is-on, .lt2-pill-btn[aria-selected="true"], .lt2-pill-btn[aria-pressed="true"] { background: var(--lt-orange); border-color: var(--lt-orange); font-weight: 600; }
.lt2-grid { display: grid; gap: 16px; }
.lt2-grid-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 500px), 1fr)); }
.lt2-grid-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.lt2-grid-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.lt2-cta { border-top: 1px solid #F3F1EE; padding-top: 88px; padding-bottom: 96px; }
.lt2-banner { border-radius: 32px; background: var(--lt-orange); padding: 52px 48px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }

/* ── Motion: hero rises in; sections rise as they scroll into view ───── */
@keyframes lt2rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.lt2-hero > * { animation: lt2rise .7s cubic-bezier(.2,.7,.2,1) both; }
.lt2-hero > *:nth-child(2) { animation-delay: .08s; }
.lt2-hero > *:nth-child(3) { animation-delay: .16s; }
.lt2-hero > *:nth-child(4) { animation-delay: .24s; }
@supports (animation-timeline: view()) {
  .lt2-reveal { animation: lt2rise linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; }
}
@media (prefers-reduced-motion: reduce) {
  .lt2-hero > *, .lt2-reveal { animation: none !important; }
  .lt2-card, .lt2-icon, .btn-yellow, .btn-demo, .lt2-btn { transition: none !important; }
}

/* ── Small screens ──────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .lt2-h1 { font-size: 52px; letter-spacing: -1.6px; }
  .lt2-h2 { font-size: 36px; }
}
@media (max-width: 575.98px) {
  .lt2-wrap { padding-left: 16px; padding-right: 16px; }
  .lt2-hero { padding-top: 48px; gap: 18px; }
  .lt2-h1 { font-size: 38px; letter-spacing: -1px; }
  .lt2-h2 { font-size: 30px; }
  .lt2-sub { font-size: 17px; }
  .lt2-card { padding: 22px; }
  .lt2-banner { padding: 32px 24px; }
  .news-letter-col > .container { padding: 28px 20px; }
  .lt2-cta { padding-top: 56px; padding-bottom: 64px; }
}

/* ── Pricing page ───────────────────────────────────────────────────── */
.lt-pricing-page-header { max-width: 1000px; padding: 88px 16px 24px; }
.lt-pricing-page-header h1 { font-size: 76px; font-weight: 600; letter-spacing: -2.8px; line-height: 1.04; }
.lt-pricing-page-header p { font-size: 19px !important; color: var(--lt-muted) !important; margin-top: 18px !important; }
.lt-pricing-page-header > * { animation: lt2rise .7s cubic-bezier(.2,.7,.2,1) both; }
.lt-pricing-page-header > *:nth-child(2) { animation-delay: .08s; }
.lt-ptab-sticky { top: 72px; background: rgba(255,255,255,.92); border-bottom: 0; padding: 12px 16px; }
.lt-ptab-bar { gap: 8px; }
.lt-ptab-btn {
  border: 1px solid var(--lt-line); border-radius: 999px; padding: 10px 18px; margin: 0;
  color: var(--lt-ink); font-size: 15px; background: #fff; transition: background .2s, border-color .2s;
}
.lt-ptab-btn:hover { color: var(--lt-ink); background: var(--lt-cream-2); border-color: #FCD9A0; }
.lt-ptab-btn:focus-visible { border-radius: 999px; background: var(--lt-cream-2); color: var(--lt-ink); }
.lt-ptab-btn.is-active { background: var(--lt-orange); border-color: var(--lt-orange); color: var(--lt-ink); font-weight: 600; }
.lt-ptab-panel__title { font-size: 40px; font-weight: 600; letter-spacing: -1.2px; }
.lt-ptab-panel__title-pill { background: var(--lt-cream-3) !important; color: var(--lt-ink) !important; border-radius: 999px; }
.lotly-pricing-card { border: 1px solid #FCE3BA; background: var(--lt-cream); border-radius: 32px; box-shadow: none; }
.lp-calc { border-radius: 24px; }
.lp-cycle-btn { border-radius: 999px; }
.lp-cycle-btn.is-active { background: var(--lt-orange); color: var(--lt-ink); }
.lp-cycle-save { color: var(--lt-orange-ink); }
.lp-tier { border-radius: 20px; border: 1px solid var(--lt-line); background: #fff; }
.lp-tier.is-active { border-color: var(--lt-orange); background: var(--lt-cream); }
.lp-tier-badge { background: var(--lt-cream-3); color: var(--lt-orange-ink); border-radius: 999px; }
.lp-slider { accent-color: var(--lt-orange); }
.lotly-pricing-feature { border-radius: 18px; border-color: var(--lt-line); }
.lotly-pricing-feature:hover, .lotly-pricing-feature.open { border-color: #FCD9A0; background: #fff; }
.lotly-pricing-feature-icon { background: var(--lt-tile); border-radius: 12px; }
.lotly-pricing-feature-icon i { color: var(--lt-orange-ink); }
.lt-ptab-card { border-radius: 24px; border-color: var(--lt-line); padding: 28px; }
.lt-ptab-card:hover { border-color: #FCD9A0; box-shadow: 0 18px 40px rgba(180,83,9,.10); transform: translateY(-3px); }
.lt-ptab-card.is-featured { border: 1px solid var(--lt-orange); background: var(--lt-cream); box-shadow: none; }
.lt-ptab-card.is-featured::before { color: var(--lt-ink); }
.lt-ptab-card__price-amount { letter-spacing: -1.4px; }
/* AI tab: names only (descriptions stay in the markup for search, not shown) */
.lt-ptab-ai-list { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.lt-ptab-ai-row { border-radius: 20px; border-color: var(--lt-line); padding: 18px 20px; cursor: default; }
.lt-ptab-ai-row:hover { background: #fff; border-color: #FCD9A0; }
.lt-ptab-ai-row .lt-ptab-ai-desc, .lt-ptab-ai-row .lt-ptab-ai-arrow { display: none !important; }
.lt-ptab-ai-icon { background: var(--lt-tile); color: var(--lt-orange-ink); border-radius: 10px; }
@media (max-width: 991.98px) { .lt-pricing-page-header h1 { font-size: 52px; letter-spacing: -1.6px; } }
@media (max-width: 575.98px) { .lt-pricing-page-header { padding-top: 48px; } .lt-pricing-page-header h1 { font-size: 38px; letter-spacing: -1px; } .lt-ptab-sticky { top: 64px; } }
@media (prefers-reduced-motion: reduce) { .lt-pricing-page-header > * { animation: none !important; } }

/* ── Shared contact cards (includes/contact-card.php: Pricing, FAQ, Contact, Support) ── */
.reach-card { border: 1px solid var(--lt-line) !important; border-radius: 22px !important; background: #fff !important; box-shadow: none !important; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.reach-card:hover { border-color: #FCD9A0 !important; box-shadow: 0 18px 40px rgba(180,83,9,.10) !important; transform: translateY(-3px); }

/* Product cards: let the header row wrap on narrow phones */
.lt2-area-card > span:first-child { flex-wrap: wrap; }
@media (max-width: 575.98px) { .lt2-area-card .lt2-h3 { font-size: 22px; } .lt2-area-card > span:first-child > .lt2-ink { display: none; } }

/* ═══ Resource hubs + blog (seo-hubs.css / blog.css load AFTER this file, so these rules
   carry an extra `html body` for specificity) ═══ */
html body .hub-page, html body .blog-page { background: #fff; }
html body .hub-hero, html body .blog-hero { padding-top: 88px; }
html body .hub-hero h1, html body .blog-hero h1 { font-weight: 600; font-size: clamp(38px, 6vw, 68px); letter-spacing: -2.2px; line-height: 1.04; }
html body .hub-hero h1 em, html body .blog-hero h1 em { color: inherit; font-style: normal; }
html body .hub-hero .eyebrow, html body .blog-hero .eyebrow {
  display: inline-block; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600;
  color: var(--lt-orange-ink); background: var(--lt-cream-3); border-radius: 999px; padding: 6px 14px; margin-bottom: 18px;
}
html body .hub-hero p, html body .blog-hero p { color: var(--lt-muted); }
html body .hub-hero > *, html body .blog-hero > * { animation: lt2rise .7s cubic-bezier(.2,.7,.2,1) both; }
html body .hub-breadcrumbs a:hover { color: var(--lt-orange-ink); }

/* cards */
html body .compare-tile, html body .state-tile, html body .calc-card, html body .glossary-card,
html body .blog-card, html body .blog-feature, html body .data-stat, html body .glossary-related-card,
html body .blog-related-card, html body .blog-sidebar-card {
  border: 1px solid var(--lt-line); border-radius: 24px; box-shadow: none; background: #fff;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
html body .compare-tile:hover, html body .state-tile:hover, html body .calc-card:hover, html body .glossary-card:hover,
html body .blog-card:hover, html body .blog-feature:hover, html body .glossary-related-card:hover, html body .blog-related-card:hover {
  transform: translateY(-3px); box-shadow: 0 18px 40px rgba(180,83,9,.10); border-color: #FCD9A0;
}
html body .data-stat { background: var(--lt-cream); border-color: #FCE3BA; }
html body .compare-tile .vs, html body .state-tile .abbr { color: var(--lt-orange-ink); }
html body .calc-card-icon { background: var(--lt-tile); border-radius: 14px; color: var(--lt-orange-ink); }

/* chips, tabs, A–Z */
html body .blog-chip, html body .glossary-azindex a, html body .state-topic-tabs a { border-radius: 999px; border-color: var(--lt-line); }
html body .blog-chip.is-active, html body .state-topic-tabs a.is-active { background: var(--lt-orange); border-color: var(--lt-orange); color: var(--lt-ink); }
html body .glossary-azindex a:hover, html body .blog-chip:hover { background: var(--lt-cream-2); border-color: #FCD9A0; color: var(--lt-ink); }

/* buttons */
html body .calc-btn, html body .blog-sidebar-card a.blog-cta, html body .blog-end-cta .btn, html body .glossary-cta .btn {
  background: var(--lt-orange); color: var(--lt-ink); border-radius: 999px; font-weight: 600;
}
html body .calc-btn:hover, html body .blog-sidebar-card a.blog-cta:hover, html body .blog-end-cta .btn:hover, html body .glossary-cta .btn:hover {
  background: var(--lt-orange); color: var(--lt-ink); box-shadow: 0 8px 20px rgba(254,163,39,.35);
}
html body .calc-btn-secondary { border-radius: 999px; }

/* navy CTA blocks -> Lotly orange */
html body .hub-footer-cta-inner, html body .glossary-cta, html body .blog-cta-banner {
  background: var(--lt-orange); color: var(--lt-ink); border-radius: 32px; box-shadow: none;
}
html body .hub-footer-cta-inner::after, html body .blog-cta-banner::after { display: none; }
html body .hub-footer-cta-inner h3, html body .glossary-cta h3, html body .blog-cta-banner h3 { color: var(--lt-ink); font-weight: 600; letter-spacing: -.6px; }
html body .hub-footer-cta-inner p, html body .glossary-cta p, html body .blog-cta-banner p { color: var(--lt-ink); }
html body .hub-footer-cta-inner .btn, html body .blog-cta-banner .btn { background: var(--lt-ink); color: #fff; }
html body .hub-footer-cta-inner .btn:hover, html body .blog-cta-banner .btn:hover { background: #000; color: #fff; }

/* comparison table */
html body .compare-table-wrap { border-radius: 24px; border-color: var(--lt-line); }
html body .compare-table th.col-header.is-lotly { background: var(--lt-cream-3); color: var(--lt-ink); }
html body .compare-table td.is-win { background: var(--lt-cream); }
html body .compare-winner__badge { background: var(--lt-orange); color: var(--lt-ink); }

/* calculator results */
html body .calc-result { border-radius: 24px; border-color: #FCE3BA; background: var(--lt-cream); }

@media (prefers-reduced-motion: reduce) { html body .hub-hero > *, html body .blog-hero > * { animation: none !important; } }

/* ═══ Content + form pages (FAQ, Contact, Company, Support, Integrations, Demo, Status,
   Manufactured Housing). Page CSS files load after this one -> `html body` prefix. ═══ */
html body .page-heading, html body .pricing-title h1, html body .demo-page h1 {
  font-size: clamp(38px, 6vw, 72px) !important; font-weight: 600 !important; letter-spacing: -2.4px; line-height: 1.04;
  color: var(--lt-ink) !important; margin-top: 64px !important; margin-bottom: 14px;
  animation: lt2rise .7s cubic-bezier(.2,.7,.2,1) both;
}
html body .pricing-title h2, html body .pricing-title h3 { font-weight: 600; letter-spacing: -.8px; }
html body .pricing-title p, html body .sub-text { font-size: 18px; color: var(--lt-muted) !important; }
html body .lt-card-text { color: #44403C; line-height: 1.7; }
html body main .card[style*="FFFAEB"] { background: #fff !important; border: 1px solid var(--lt-line) !important; border-radius: 24px !important; }

/* FAQ accordion */
html body .lt-accordion { display: flex; flex-direction: column; gap: 10px; }
html body .lt-accordion-item { border: 1px solid var(--lt-line); border-radius: 20px; background: #fff; overflow: hidden; transition: border-color .2s, background .2s; }
html body .lt-accordion-item:hover { border-color: #FCD9A0; }
html body .lt-accordion-header { font-size: 18px; font-weight: 600; padding: 20px 24px; color: var(--lt-ink); }
html body .lt-accordion-content { color: #44403C; font-size: 16px; line-height: 1.65; }
html body .lt-accordion-header .lt-icon { color: var(--lt-orange-ink); }

/* Contact / Support / Integrations forms */
html body .contact-form, html body .support-form-wrapper, html body .integration-form-card, html body .integration-confirm-card, html body .booking-widget {
  border: 1px solid var(--lt-line) !important; border-radius: 28px !important; box-shadow: none !important; background: #fff;
}
html body .form-control, html body .form-select, html body .booking-input, html body .booking-tz-select {
  border-radius: 14px !important; border-color: #E7E5E4 !important; color: var(--lt-ink) !important; font-weight: 400 !important; min-height: 46px;
}
html body .form-control:focus, html body .form-select:focus, html body .booking-input:focus { border-color: var(--lt-orange) !important; box-shadow: 0 0 0 4px rgba(254,163,39,.18) !important; }
html body .features-list li { font-size: 16px; padding: 6px 0; }
html body .support-card { border: 1px solid var(--lt-line) !important; border-radius: 24px !important; box-shadow: none !important; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
html body .support-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(180,83,9,.10) !important; border-color: #FCD9A0 !important; }
html body .support-card-icon { background: var(--lt-tile) !important; color: var(--lt-orange-ink) !important; border-radius: 16px !important; }
html body .support-card-link, html body .troubleshoot-link { color: var(--lt-orange-ink) !important; }
html body .integration-card { border: 1px solid var(--lt-line) !important; border-radius: 22px !important; box-shadow: none !important; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
html body .integration-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(180,83,9,.10) !important; border-color: #FCD9A0 !important; }
html body .integration-category { color: var(--lt-orange-ink) !important; }
html body .integrations-section-label { background: var(--lt-cream-3); color: var(--lt-ink); border-radius: 999px; display: inline-block; padding: 6px 14px; font-weight: 600; }

/* Demo booking */
html body .booking-nav-btn { border-radius: 999px !important; border: 1px solid var(--lt-line) !important; }
html body .booking-submit-btn { background: var(--lt-orange) !important; color: var(--lt-ink) !important; border-radius: 999px !important; font-weight: 600 !important; border: 0 !important; }

/* Status */
html body .status-card { border: 1px solid var(--lt-line) !important; border-radius: 24px !important; box-shadow: none !important; overflow: hidden; }
html body .status-header { background: var(--lt-cream) !important; border-bottom: 1px solid #F1EFEC !important; }

/* ═══ Legal pages (terms, privacy, accessibility, sms-terms, …: inline <style> blocks) ═══ */
html body .legal-body h2, html body .legal-body h3, html body .legal-body strong { color: var(--lt-ink); }
html body .legal-body h2 { font-weight: 600; font-size: 26px; letter-spacing: -.5px; padding-top: 20px; border-top: 1px solid #F1EFEC; }
html body .legal-body .callout { background: var(--lt-cream); border-left: 0; border: 1px solid #FCE3BA; border-radius: 16px; }
html body .legal-body .important { border-left: 0; border: 1px solid #F5C6C6; border-radius: 16px; }
html body .legal-toc { border: 1px solid var(--lt-line); border-radius: 22px; padding: 16px; background: var(--lt-cream); top: 96px; }
html body .legal-toc h4 { color: var(--lt-orange-ink); }
html body .legal-toc a { border-left: 0; border-radius: 10px; font-size: 14px; color: #44403C; }
html body .legal-toc a:hover, html body .legal-toc a.active { background: var(--lt-cream-2); color: var(--lt-ink); }
html body main > .container > .text-center > h1.bold { font-size: clamp(38px, 5vw, 60px) !important; font-weight: 600; letter-spacing: -1.8px !important; }

/* Phone overflow fixes (pre-existing on the old site too) */
/* Scoped to the old-template pages (Company, MH): the redesigned pages use main.lt2, and the
   Home dashboard image there must keep its own max-width (this rule shrank it to 480px). */
html body main:not(.lt2) img.img-fluid[style*="max-width"] { max-width: min(100%, 480px) !important; height: auto; }
html body .data-section table { display: block; max-width: 100%; overflow-x: auto; }
html body .compare-table th.col-header { background: var(--lt-sand); color: var(--lt-ink); }
html body .compare-table th.col-header.is-lotly { background: var(--lt-orange); color: var(--lt-ink); }

/* Inline SVG icons that replaced the Font Awesome glyphs in the shared header */
.hamburger svg, .sidebar-header .close-btn svg { display: block; }

/* Tablet header: the full nav + Demo/Login need ~1000px but the hamburger only started below 768px,
   so 768-1023px scrolled sideways on every page. Use the hamburger + sidebar up to 1023px. */
@media (max-width: 1023.98px) {
  header .nav-center, header .nav-right { display: none !important; }
  header .hamburger { display: block !important; }
}

/* ── Accessibility: WCAG 2.1 AA text contrast (axe-core scan of 18 live pages, 2026-10-21) ──
   Colour only; no layout changes. Lotly orange (#FEA327) stays for fills, buttons and icons, but
   as TEXT on white it measures 2.0:1, so text uses the darker brand ink. */
:root { --lt-orange-ink: #9A4407; }             /* was #B45309: 4.49:1 on the cream chips, now >= 6:1 */
html body .sidebar .sidebar-links a, html body .sidebar .sidebar-resources-toggle { color: var(--lt-ink) !important; }
html body .sidebar .sidebar-links a.active-menu, html body .sidebar .sidebar-links a:hover { color: var(--lt-orange-ink) !important; }
html body main p a:not([class*="btn"]):not(.lt2-card),
html body main li > a:not([class*="btn"]):not(.lt2-card):not(.lt2-pill-btn),
html body main a[href^="tel:"] { color: var(--lt-orange-ink); }
html body main p a:not([class*="btn"]):not(.lt2-card) { text-decoration: underline; text-underline-offset: 2px; }
html body strong[style*="#b07000"] { color: var(--lt-orange-ink) !important; }
html body .blog-meta, html body .blog-meta span, html body .data-stat .source { color: var(--lt-muted) !important; }
html body .blog-cat-pill { color: var(--lt-ink) !important; }
html body .learn-more, html body .calc-card .arrow, html body .data-stat .num, html body #lpCalcHeading { color: var(--lt-orange-ink) !important; }
html body .lp-slider-scale span, html body .lp-tier-rate > span, html body .booking-slots-placeholder p { color: #6B7280 !important; }
html body .lp-cycle-save { color: var(--lt-ink) !important; }
html body .blog-sidebar-card a.blog-cta, html body a.blog-cta { color: var(--lt-ink) !important; }
/* Consent / policy links set .text-decoration-none (Bootstrap !important) and sit outside <main> on some pages */
html body p a.text-decoration-none:not([class*="btn"]) { color: var(--lt-orange-ink) !important; text-decoration: underline !important; text-underline-offset: 2px; }
html body .data-section p a, html body .data-body p a { color: var(--lt-orange-ink) !important; }
html body .blog-section-head .sub, html body .blog-sidebar-card .sub, html body .blog-popular-meta { color: var(--lt-muted) !important; }
html body .booking-cal-header span { color: #6B7280 !important; }
html body main section p[style*="#888"] { color: var(--lt-muted) !important; }
html body a.text-decoration-none[href="/privacy"], html body a.text-decoration-none[href="/terms"] { color: var(--lt-orange-ink) !important; text-decoration: underline !important; text-underline-offset: 2px; }

/* Per-state note in the key-facts panel (e.g. Hawaii has essentially no parks) */
html body .state-facts-note { margin: 14px 0 0; padding: 12px 16px; border-radius: 14px; background: var(--lt-cream-2); border: 1px solid #FCE3BA; color: var(--lt-ink); font-size: 15px; line-height: 1.5; }