/* Townlit Digital light theme: replaces the dark blue/purple areas with the light blue look.
   Loaded last on every page so it wins over the older styles. */
:root{--tl-ink:#0d1433;--tl-muted:#4b5878;--tl-blue:#1f6bff;--tl-violet:#5b4dff;--tl-line:rgba(13,20,51,.14);
  --tl-sky:radial-gradient(60% 70% at 72% 50%,#ffffff 0%,#eef3ff 45%,#e3eafb 100%);
  --tl-grid:none;
  --od-brand-blue:#eef3ff}

/* Home hero with the moving template screenshots */
.odw-motion-home .motion-hero,.hero{background:var(--tl-sky)!important;color:var(--tl-ink)}
.hero:after{background:var(--tl-grid);background-size:56px 56px;opacity:.9}
.odw-motion-home .motion-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--tl-grid);background-size:56px 56px;pointer-events:none}
.motion-hero .motion-veil,.motion-veil{background:linear-gradient(90deg,rgba(244,247,255,.96),rgba(244,247,255,.9) 48%,rgba(244,247,255,.35) 78%,rgba(244,247,255,.15))!important}
.motion-field{opacity:1}
.motion-screen{background:#fff;border-color:#fff;box-shadow:0 22px 44px rgba(31,58,140,.18),0 0 0 1px var(--tl-line)}
.motion-hero h1,.hero h1{color:var(--tl-ink)}
.motion-hero h1 span,.hero h1 span{color:var(--tl-blue);background:linear-gradient(90deg,#1f6bff,#3a8dff 45%,#7b4dff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.motion-hero .eyebrow,.hero .eyebrow{color:var(--tl-blue)}
.motion-hero .launch-offer-badge{background:#fff;color:var(--tl-ink);border:1px solid var(--tl-line);box-shadow:0 4px 14px rgba(31,58,140,.08)}
.motion-copy .hero-includes,.hero .hero-includes,.motion-copy .ownership-benefit,.motion-copy .hero-scope-detail,.hero p{color:var(--tl-ink)}
.hero-includes span,.motion-copy .ownership-benefit small{color:var(--tl-muted)}
.hero-checklist li{color:var(--tl-ink)}
.hero-checklist li>span:first-child{color:var(--tl-blue)}
.hero-scope-detail a,.motion-copy .ownership-benefit a,.motion-copy a.text-link,.hero .text-link{color:#1747c8}
.hero-actions .text-link{border-color:var(--tl-line)}
.motion-hero .hero-actions .gold,.hero .gold{background:linear-gradient(180deg,#ffe08f,#ffc34d);color:#1a1530;box-shadow:0 8px 20px rgba(245,165,36,.28)}
.reference-discovery a:focus-visible,.hero-scope-detail a:focus-visible{outline-color:var(--tl-blue)}
.motion-hero .motion-pause{background:#fff;color:var(--tl-ink);border-color:var(--tl-line)}

/* Mobile: the screenshots sit behind the text, so the veil is a little stronger */
@media(max-width:800px){.motion-hero .motion-veil,.motion-veil{background:linear-gradient(180deg,rgba(244,247,255,.93),rgba(244,247,255,.9) 60%,rgba(244,247,255,.82))!important}}

/* "Have a website you love?" strip and other blue buttons */
.reference-offer-strip a,.reference-offer .rf-cta{background:linear-gradient(90deg,#1f6bff,#5b4dff);color:#fff}
.reference-offer-strip a:hover{background:linear-gradient(90deg,#1a5ee6,#4f42e6)}
.reference-offer .rf-badge{background:#e7eeff;color:#1747c8}

/* Home pricing section: light instead of the dark tech backdrop */
body.odw-motion-home #pricing.agency-pricing{background:var(--tl-sky);color:var(--tl-ink)}
body.odw-motion-home #pricing.agency-pricing::before{content:"";position:absolute;inset:0;z-index:0;background:var(--tl-grid);background-size:56px 56px;pointer-events:none}
.pricing-tech-backdrop{background:transparent}
.pricing-tech-texture,.pricing-tech-stage-art{display:none}
.pricing-tech-logo{opacity:.07}
body.odw-motion-home #pricing.agency-pricing h2,body.odw-motion-home #pricing.agency-pricing p,body.odw-motion-home #pricing.agency-pricing strong{color:var(--tl-ink)}
body.odw-motion-home #pricing.agency-pricing .agency-eyebrow{color:var(--tl-blue)}
body.odw-motion-home #pricing.agency-pricing .home-price-fine,body.odw-motion-home #pricing.agency-pricing .launch-early-note,body.odw-motion-home #pricing.agency-pricing .agency-limit-note{color:var(--tl-muted)}

/* Contact sections and notes */
.contact,.agency-contact{background:var(--tl-sky);color:var(--tl-ink);border-top:1px solid var(--tl-line)}
.contact h2,.contact p,.agency-contact h2,.agency-contact p{color:var(--tl-ink)}
.agency-contact .agency-eyebrow{color:var(--tl-blue)}
.agency-contact a,.contact a{color:#1747c8}
.agency-contact .agency-limit-note{color:var(--tl-muted)}
.preview-note{background:#eef3ff;color:var(--tl-ink);border-top:1px solid var(--tl-line)}

/* Hero details that were light-on-dark */
.hero .launch-offer-badge,.motion-hero .launch-offer-badge{color:#1747c8!important;background:#fff!important;border-color:#c9d6f5!important}
.hero .hero-includes strong{color:var(--tl-ink)!important}
.hero .ownership-benefit strong{color:var(--tl-ink)!important}
.hero .ownership-benefit small{color:var(--tl-muted)!important}
.hero .ownership-benefit a{color:#1747c8!important}

/* SEO Care package cards */
.seo-packages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:30px 0 22px}
.seo-package{background:#fff;border:1px solid var(--tl-line);border-radius:14px;padding:24px 22px;box-shadow:0 10px 28px rgba(31,58,140,.08);min-width:0}
.seo-package:nth-child(2){border:2px solid var(--tl-blue)}
.seo-package-name{margin:0;font-weight:750;color:#1747c8;font-size:15px}
.seo-package-price{margin:8px 0 14px;color:var(--tl-ink)}
.seo-package-price strong{font-size:44px;letter-spacing:-.03em;line-height:1}
.seo-package-price span{margin-left:6px;color:var(--tl-muted)}
.seo-package ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.seo-package li{position:relative;padding-left:22px;font-size:15px;line-height:1.45;color:var(--tl-ink)}
.seo-package li:before{content:"✓";position:absolute;left:0;color:var(--tl-blue);font-weight:800}
.seo-package li.seo-plus{padding-left:0;font-weight:700}
.seo-package li.seo-plus:before{content:none}
@media(max-width:900px){.seo-packages{grid-template-columns:1fr}}

/* SEO Care: first 90 days */
.seo-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:24px 0}
.seo-steps article{border-left:3px solid var(--tl-blue);padding:4px 0 4px 16px;min-width:0}
.seo-steps h3{margin:0 0 6px;font-size:20px;color:var(--tl-ink)}
.seo-steps p{margin:0;color:var(--tl-muted);line-height:1.5}
@media(max-width:900px){.seo-steps{grid-template-columns:1fr}}