/* The public sales pages: home, what-we-check, comparison, sample-report, faqs. */
:root { color-scheme: light; --navy: #074882; --ink: #0e2440; --muted: #4f5f70; --teal: #1b7480; --tint: #eaf6f5; --paper: #f5f8fa; --line: #dce5ea; --white: #fff; --amber: #8a5a00; --amber-bg: #fdf3dc; --red: #a93226; --red-bg: #fbeae8; --green: #1a6b3a; }
/* fixed2054 - A LITTLE COLOR THAT MEANS SOMETHING. User 2026-11-03: "lets add a little ops of color the the page and
   images or graphcs that can help respent whats on the page i need to think like who my ratet maret is", then chose
   all five pages and one color per family of areas. A color always means the same areas: icons, bars and chips.
   --ac and --ac-bg carry text and icons (4.5:1 or more); --ac-fill is the brighter shade for bars (3:1 or more). */
:root { --c-purple: #534ab7; --c-purple-bg: #eeedfe; --c-blue: #185fa5; --c-blue-bg: #e6f1fb; --c-teal: #0f6e56; --c-teal-bg: #e1f5ee; --c-amber: #854f0b; --c-amber-bg: #faeeda; --c-green: #3b6d11; --c-green-bg: #eaf3de; --c-coral: #993c1d; --c-coral-bg: #faece7; }
[data-area="ada"], [data-area="mobile"], [data-area="ux"] { --ac: var(--c-purple); --ac-bg: var(--c-purple-bg); --ac-fill: #7f77dd; }
[data-area="seo"], [data-area="ai_readiness"] { --ac: var(--c-blue); --ac-bg: var(--c-blue-bg); --ac-fill: #378add; }
[data-area="local"] { --ac: var(--c-teal); --ac-bg: var(--c-teal-bg); --ac-fill: #1d9e75; }
[data-area="performance"], [data-area="technical"] { --ac: var(--c-amber); --ac-bg: var(--c-amber-bg); --ac-fill: #ba7517; }
[data-area="security"] { --ac: var(--c-green); --ac-bg: var(--c-green-bg); --ac-fill: #639922; }
[data-area="conversion"], [data-area="trust"], [data-area="content"], [data-area="design"] { --ac: var(--c-coral); --ac-bg: var(--c-coral-bg); --ac-fill: #d85a30; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--white); color: var(--ink); font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
h1, h2, h3 { line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: clamp(28px, 4vw, 40px); }
h3 { font-size: 18px; }
p { margin: 0; }
a { color: var(--navy); }
svg { display: block; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
section { padding: 72px 0; scroll-margin-top: 72px; }
.lede { color: var(--muted); font-size: 19px; max-width: 640px; margin-top: 14px; }
.fine { color: var(--muted); font-size: 15px; max-width: 760px; margin-top: 20px; }
.sub { color: var(--muted); font-size: 15px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--white); padding: 8px 12px; z-index: 20; }
.skip:focus { left: 8px; }
.tint { background: var(--paper); }

.top { position: sticky; top: 0; z-index: 10; background: var(--white); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 18px; min-height: 64px; }
.logo { display: block; flex: none; }
.logo img { display: block; height: 38px; width: auto; }
.top nav { display: flex; gap: 20px; margin-left: auto; font-size: 15px; }
.top nav a { color: var(--ink); text-decoration: none; padding: 4px 0 6px; }
.top nav a:hover { box-shadow: inset 0 -2px 0 var(--line); }
.top nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--navy); color: var(--navy); font-weight: 600; }
.top-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.login { font-size: 15px; font-weight: 600; padding: 9px 12px; text-decoration: none; }
.login:hover { text-decoration: underline; }
.btn { display: inline-block; border: 0; border-radius: 8px; background: var(--navy); color: var(--white); font: inherit; font-weight: 700; padding: 13px 20px; text-align: center; text-decoration: none; cursor: pointer; }
.btn:hover { background: #053764; }
.btn-small { font-size: 15px; padding: 9px 14px; }
.menu { display: none; border-top: 1px solid var(--line); background: var(--paper); font-size: 15px; }
.menu .wrap { display: flex; flex-wrap: wrap; gap: 4px 18px; padding-top: 8px; padding-bottom: 8px; }
.menu a { color: var(--ink); }
.menu a[aria-current="page"] { color: var(--navy); font-weight: 700; }
footer nav a, .menu a { display: inline-block; min-height: 24px; line-height: 24px; }
@media (max-width: 860px) { .top nav { display: none; } .top-actions { margin-left: auto; } .menu { display: block; } section, .cat, .sub-h { scroll-margin-top: 130px; } }
@media (max-width: 420px) { .logo img { height: 26px; } .top .wrap { gap: 8px; } .top-actions { gap: 4px; } .login { padding: 9px 6px; } .btn-small { padding: 9px 10px; font-size: 14px; } }
@media (max-width: 340px) { .btn-small { display: none; } }

.hero { background: var(--ink); color: var(--white); padding: 64px 0 72px; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.eyebrow { color: #a6ddda; font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.hero h1 { font-size: clamp(36px, 5.4vw, 58px); }
.hero .lede { color: #d4dee8; }
.sample-link { color: var(--white); font-weight: 700; }
.hero-more { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; color: #d4dee8; font-size: 15px; }
@media (max-width: 960px) { .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; } .hero { padding: 44px 0 56px; } }

.page-head { background: var(--ink); color: var(--white); padding: 52px 0; }
.page-head h1 { font-size: clamp(32px, 5vw, 48px); max-width: 780px; }
.page-head .lede { color: #d4dee8; }
.page-head .actions a:not(.btn) { color: var(--white); }

.cta { margin-top: 28px; }
.cta .btn { font-size: 19px; padding: 16px 28px; }
.cta-note { color: #d4dee8; font-size: 14px; margin-top: 12px; }

.sheet { background: var(--white); color: var(--ink); border-radius: 12px; overflow: hidden; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3); }
.sheet-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 14px 18px; border-bottom: 1px solid var(--line); font-weight: 700; }
.sheet-tag { flex: none; font-size: 12px; font-weight: 700; color: var(--amber); background: var(--amber-bg); border-radius: 999px; padding: 3px 10px; }
.tabs { display: flex; border-bottom: 1px solid var(--line); }
.tabs[hidden] { display: none; }
.tabs button { flex: 1 1 0; background: none; border: 0; border-bottom: 3px solid transparent; color: var(--muted); font: inherit; font-size: 15px; font-weight: 600; padding: 11px 6px; cursor: pointer; }
.tabs button[aria-selected="true"] { border-bottom-color: var(--navy); color: var(--navy); }
.panel { padding: 16px 18px; }
.panel[hidden] { display: none; }
.panel h3 { margin-bottom: 4px; }
.sheet-foot { background: var(--tint); font-size: 14px; padding: 12px 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }

.score { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: center; margin-top: 12px; }
.ring { position: relative; width: 112px; height: 112px; }
.ring-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.ring-text strong { font-size: 32px; }
.ring-text span { font-size: 12px; color: var(--muted); }
.mini { display: grid; grid-template-columns: minmax(0, 1fr) 52px; gap: 2px 8px; align-items: center; font-size: 14px; margin-bottom: 8px; }
.mini:last-child { margin-bottom: 0; }
.mini-name { grid-column: 1 / -1; }
.mini-track { height: 8px; background: var(--line); border-radius: 0 4px 4px 0; }
.mini-fill { display: block; height: 100%; width: calc(var(--v) * 1%); background: var(--ac-fill, var(--navy)); border-radius: 0 4px 4px 0; }
.mini-val { text-align: right; color: var(--muted); }
@media (max-width: 420px) { .score { grid-template-columns: minmax(0, 1fr); justify-items: center; } .score > :last-child { width: 100%; } }

.find { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.find:last-child { border-bottom: 0; }
.find-title { font-size: 15px; font-weight: 700; }
.find-meta { margin: 3px 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--muted); }
.find p { color: var(--muted); }
.pill { flex: none; font-size: 13px; font-weight: 700; border-radius: 999px; padding: 2px 9px; }
.pill.bad { color: var(--red); background: var(--red-bg); }
.pill.warn { color: var(--amber); background: var(--amber-bg); }
.next { list-style: none; margin: 10px 0 0; padding: 0; font-size: 15px; }
.next li { padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.next li:last-child { border-bottom: 0; }
.next strong { display: block; color: var(--ink); }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.stat strong { display: block; font-size: clamp(38px, 6vw, 60px); line-height: 1.05; color: var(--navy); letter-spacing: -0.02em; }
.stat span { color: var(--muted); }
@media (max-width: 600px) { .stats { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 40px; }
.trio-art { color: var(--navy); background: var(--tint); border-radius: 12px; display: flex; align-items: center; justify-content: center; height: 150px; margin-bottom: 16px; }
.tint .trio-art { background: var(--white); }
.trio-word { font-size: 26px; font-weight: 700; color: var(--navy); }
.trio h3 { margin-top: 2px; }
.trio p { color: var(--muted); margin-top: 8px; }
@media (max-width: 760px) { .trio { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 40px; list-style: none; padding: 0; counter-reset: step; }
.steps li { counter-increment: step; border-top: 3px solid var(--navy); padding-top: 16px; }
.steps li::before { content: counter(step); display: block; font-size: 15px; font-weight: 700; color: var(--teal); margin-bottom: 6px; }
.steps p { color: var(--muted); margin-top: 8px; }
@media (max-width: 760px) { .steps { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; }
.two.top-align { align-items: start; }
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.ticks strong { color: var(--ink); }
.numbered li { display: flex; gap: 12px; align-items: baseline; color: var(--ink); }
.num { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: var(--white); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; transform: translateY(2px); }
@media (max-width: 860px) { .two { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* Single series, so the title names it and no legend box is needed. */
.bars { list-style: none; margin: 28px 0 0; padding: 0; }
.bars a { position: relative; display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; align-items: center; padding: 5px 0; color: var(--ink); text-decoration: none; font-size: 15px; border-radius: 4px; }
.bars a:hover { background: var(--paper); }
.bar-cell { display: flex; align-items: center; gap: 8px; }
.bar-fill { display: block; flex: none; height: 16px; width: calc((100% - 34px) * var(--v) / var(--max)); background: var(--ac-fill, var(--navy)); border-radius: 0 4px 4px 0; }
.bar-val { font-weight: 700; }
.tip { display: none; position: absolute; left: 182px; right: 0; top: 100%; z-index: 5; background: var(--ink); color: var(--white); border-radius: 8px; padding: 8px 10px; font-size: 14px; }
.bars a:hover .tip, .bars a:focus-visible .tip { display: block; }
@media (max-width: 600px) { .bars a { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 6px 0; } .tip { left: 0; } }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.filters[hidden] { display: none; }
.filters button { background: var(--white); border: 1px solid #8a9aa8; border-radius: 999px; color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; padding: 7px 14px; cursor: pointer; }
.filters button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; align-items: start; }
.cat { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--white); scroll-margin-top: 80px; }
.cat[hidden] { display: none; }
.cat summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: 12px; list-style: none; }
.cat summary::-webkit-details-marker { display: none; }
.cat-icon { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--ac-bg, var(--tint)); color: var(--ac, var(--navy)); display: flex; align-items: center; justify-content: center; }
.cat-n { margin-left: auto; color: var(--muted); font-weight: 400; font-size: 15px; white-space: nowrap; }
.cat-open { color: var(--muted); font-weight: 400; transition: transform .15s; }
.cat[open] .cat-open { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .cat-open { transition: none; } }
.cat p { color: var(--muted); font-size: 16px; margin-top: 10px; }
.cat .limit { font-size: 15px; border-left: 3px solid var(--line); padding-left: 10px; }
@media (max-width: 760px) { .cats { grid-template-columns: minmax(0, 1fr); } }

.band { background: var(--navy); color: var(--white); padding: 56px 0; }
.band .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: center; }
.band .lede { color: #d9e6f2; }
.btn-light { background: var(--white); color: var(--navy); justify-self: start; }
.btn-light:hover { background: var(--tint); }
@media (max-width: 860px) { .band .wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
.card { display: block; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; color: var(--ink); text-decoration: none; background: var(--white); }
.card:hover { border-color: var(--navy); }
.card-art { background: var(--tint); color: var(--navy); display: flex; align-items: center; justify-content: center; height: 130px; }
.card-text { padding: 16px 18px 18px; }
.card-text p { color: var(--muted); font-size: 16px; margin-top: 6px; }
@media (max-width: 760px) { .cards { grid-template-columns: minmax(0, 1fr); } }

.glance { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 15px; }
.glance th, .glance td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: center; }
.glance thead th { font-size: 14px; border-bottom: 2px solid var(--ink); vertical-align: bottom; }
.glance tbody th { text-align: left; font-weight: 600; }
.glance .ours { background: var(--tint); }
.dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--navy); vertical-align: middle; }
.dot.full { background: var(--navy); }
.dot.part { background: linear-gradient(90deg, var(--navy) 50%, transparent 50%); }
.dot.none { border-color: #8a9aa8; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 16px; color: var(--muted); font-size: 15px; }
.legend .dot { margin-right: 6px; }
@media (max-width: 600px) {
  .glance { font-size: 13px; table-layout: fixed; }
  .glance th, .glance td { padding: 8px 2px; overflow-wrap: anywhere; }
  .glance thead th { font-size: 11px; }
  .glance thead th:first-child, .glance tbody th { width: 30%; }
}

.compare { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 14px; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 12px; border-bottom: 1px solid var(--line); }
.compare thead th { border-bottom: 2px solid var(--ink); font-size: 15px; }
.compare tbody th { font-size: 15px; width: 15%; }
.compare .ours { background: var(--tint); }
.compare .none { color: var(--muted); font-style: italic; }
@media (max-width: 960px) {
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
  .compare thead { position: absolute; left: -9999px; }
  .compare tbody tr { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 16px; overflow: hidden; }
  .compare tbody th { background: var(--paper); font-size: 16px; width: auto; }
  .compare td::before { content: attr(data-tool); display: block; color: var(--ink); font-style: normal; font-weight: 700; }
  .compare td:last-child { border-bottom: 0; }
}
.sub-h { font-size: 24px; margin: 44px 0 10px; scroll-margin-top: 72px; }
.tools { margin-top: 20px; align-items: start; }
.tools .sub { margin-top: 6px; }
.sources { columns: 2; column-gap: 40px; padding-left: 20px; margin: 14px 0 0; font-size: 15px; }
.sources li { margin-bottom: 6px; break-inside: avoid; }
@media (max-width: 760px) { .sources { columns: 1; } }

.faq { max-width: 760px; }
.faq details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq summary { cursor: pointer; font-weight: 700; }
.faq p { color: var(--muted); margin-top: 8px; }

.final { background: var(--ink); color: var(--white); }
.final .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: center; }
.final .lede { color: #d4dee8; }
@media (max-width: 860px) { .final .wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

.notice { background: var(--amber-bg); color: var(--amber); font-weight: 600; padding: 12px 0; }
.report-page { background: var(--paper); padding: 40px 0 56px; }
.report-page h1 { font-size: clamp(32px, 5vw, 46px); }
/* fixed2053 - the real overview and full audit for a made-up business, each shown as a half-size page. */
.samples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.sample { display: flex; flex-direction: column; gap: 14px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 24px; }
.sample h2 { font-size: 24px; }
.sample p { color: var(--muted); }
.sample .btn { align-self: flex-start; }
.peek { position: relative; height: 400px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--white); }
.peek > div { height: 100%; }
.peek iframe { display: block; width: 200%; height: 200%; border: 0; transform: scale(0.5); transform-origin: 0 0; }
.peek-open { position: absolute; inset: 0; }
.peek::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: linear-gradient(rgba(255, 255, 255, 0), var(--white)); pointer-events: none; }
@media (max-width: 760px) { .samples { grid-template-columns: minmax(0, 1fr); } .peek { height: 340px; } }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 28px; }

/* fixed2054 - who it is for, area chips, how findings are sorted, and the two reports' colors. */
.trades { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; }
.trades li { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); font-size: 15px; font-weight: 600; padding: 6px 14px 6px 10px; }
.trades svg { width: 18px; height: 18px; flex: none; color: var(--teal); }
.page-head .trades li { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .24); color: var(--white); }
.page-head .trades svg { color: #a6ddda; }
.lx-hero .trades { justify-content: center; margin-top: 28px; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.chip, .area-chip { display: inline-block; border-radius: 999px; font-size: 13px; font-weight: 700; padding: 2px 10px; }
.area-chip { color: var(--ac, var(--ink)); background: var(--ac-bg, var(--paper)); }
.chip.first { color: var(--red); background: var(--red-bg); }
.chip.soon { color: var(--amber); background: var(--amber-bg); }
.chip.later { color: var(--c-green); background: var(--c-green-bg); }
.sample-overview { border-top: 5px solid var(--c-teal); }
.sample-full { border-top: 5px solid var(--c-coral); }
.sample h2 { display: flex; align-items: center; gap: 12px; }
.sample-icon { flex: none; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.sample-icon svg { width: 24px; height: 24px; }
.sample-overview .sample-icon { color: var(--c-teal); background: var(--c-teal-bg); }
.sample-full .sample-icon { color: var(--c-coral); background: var(--c-coral-bg); }

footer { padding: 28px 0; font-size: 14px; color: var(--muted); }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot-line { flex-basis: 100%; }

/* fixed2032 - THE HOME PAGE AT A NATIONAL LEVEL. User 2026-11-01: "lets take the home page up a level lets make
   it as national and polshed as possible", then chose the premium brand direction. Scoped to body.lux, so the
   other sales pages keep their look. System fonts on purpose: no outside font to wait for. */
.lux { --ink: #0b1c33; --line: #e3e9ee; --paper: #f6f8fa; font-size: 18px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.lux h1, .lux h2 { font-weight: 650; letter-spacing: -0.028em; line-height: 1.06; color: var(--ink); }
.lux h1, .lux h2, .lx-lede, .lux .lede, .lx-note { text-wrap: balance; }
.lux h2 { font-size: clamp(32px, 4.4vw, 52px); max-width: 780px; }
.lux .menu a { text-decoration: none; }
.lux h3 { font-weight: 650; letter-spacing: -0.01em; }
.lux section { padding: 112px 0; }
.lux .lede { font-size: 20px; line-height: 1.5; }
.lux .fine { font-size: 15px; }
.lux .btn { border-radius: 10px; padding: 15px 26px; transition: background-color .15s, box-shadow .15s; box-shadow: 0 1px 2px rgba(11, 28, 51, .18), 0 6px 18px rgba(7, 72, 130, .18); }
.lux .btn-small { padding: 10px 16px; box-shadow: none; }
.lux .top { background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); }
.lux .top .wrap { min-height: 72px; }
.lux .top nav { gap: 28px; }
.lux .wrap { max-width: 1180px; padding: 0 24px; }

.lx-hero { padding: 104px 0 72px; text-align: center; background: radial-gradient(900px 420px at 50% -60px, #e4f1f4 0%, rgba(228, 241, 244, 0) 72%); }
.lx-eyebrow { color: var(--teal); font-size: 15px; font-weight: 650; letter-spacing: .02em; margin-bottom: 20px; }
.lx-hero h1 { font-size: clamp(44px, 7.4vw, 88px); max-width: 980px; margin: 0 auto; }
.lx-lede { color: var(--muted); font-size: clamp(19px, 2vw, 22px); line-height: 1.5; max-width: 700px; margin: 28px auto 0; }
.lx-cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 28px; margin-top: 36px; }
.lx-link { font-weight: 650; color: var(--navy); }
.lx-note { color: var(--muted); font-size: 15px; margin-top: 18px; }

.lx-stage { background: linear-gradient(180deg, var(--white) 0, var(--white) 200px, var(--ink) 200px); padding-bottom: 88px; }
.lx-stage .sheet { max-width: 1040px; margin: 0 auto; border-radius: 18px; border: 1px solid var(--line); box-shadow: 0 2px 6px rgba(11, 28, 51, .06), 0 28px 70px rgba(11, 28, 51, .26); }
.lx-stage .sheet-head { align-items: center; padding: 16px 24px; font-size: 16px; }
.lx-stage .lx-sheet-title { font-size: 16px; font-weight: 700; letter-spacing: normal; line-height: 1.5; color: inherit; margin: 0; max-width: none; }
.lx-stage .lx-sheet-title::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--teal); margin-right: 10px; vertical-align: 1px; }
.lx-stage .tabs { padding: 0 12px; }
.lx-stage .tabs button { flex: 0 1 auto; padding: 14px 18px; }
.lx-stage .panel { padding: 36px 40px 40px; min-height: 356px; }
.lx-stage .panel h3 { font-size: 26px; letter-spacing: -0.02em; }
.lx-stage .score { grid-template-columns: 208px minmax(0, 1fr); gap: 56px; margin-top: 28px; }
.lx-stage .ring { width: 208px; height: 208px; }
.lx-stage .ring svg { width: 100%; height: 100%; }
.lx-stage .ring-text strong { font-size: 60px; font-weight: 650; letter-spacing: -0.03em; }
.lx-stage .ring-text span { font-size: 14px; margin-top: 4px; }
.lx-stage .mini { font-size: 16px; margin-bottom: 18px; }
.lx-stage .mini-track, .lx-stage .mini-fill { height: 8px; border-radius: 4px; }
.lx-stage #panel-findings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; align-content: start; }
.lx-stage #panel-findings[hidden] { display: none; }
.lx-stage #panel-findings h3 { grid-column: 1 / -1; margin-bottom: 12px; }
.lx-stage .find { padding: 16px 0; border-bottom: 1px solid var(--line); border-top: 0; }
.lx-stage .next { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.lx-stage .next li { border: 0; border-top: 2px solid var(--navy); padding: 16px 0 0; }
.lx-stage .sheet-foot { padding: 14px 24px; }
.lx-stage .stats { max-width: 1040px; margin: 72px auto 0; gap: 40px; }
.lx-stage .stat strong { color: var(--white); font-size: clamp(52px, 7vw, 84px); font-weight: 650; letter-spacing: -0.035em; }
.lx-stage .stat span { color: #c5d3e0; font-size: 18px; }

.lx-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; margin-top: 64px; }
.lx-trio > div { border-top: 1px solid var(--line); padding-top: 28px; }
.lx-icon { display: block; color: var(--navy); margin-bottom: 20px; }
.lx-word { font-size: 15px; font-weight: 650; color: var(--teal); margin-bottom: 8px; }
.lx-trio h3 { font-size: 22px; line-height: 1.25; }
.lx-trio p { color: var(--muted); margin-top: 12px; }

.lux #scope h3 { font-size: 15px; font-weight: 650; color: var(--muted); }
.lx-sticky { position: sticky; top: 112px; }
.lux .bars { margin-top: 18px; }
.lux .bars a { padding: 10px 8px; grid-template-columns: 210px minmax(0, 1fr); border-radius: 8px; border-bottom: 0; }
.lux .bars a:hover { background: var(--white); }
.lux .bar-fill { height: 8px; border-radius: 4px; }
.lux .bar-val { font-weight: 650; font-size: 15px; }
.lux .tip { left: 226px; }

.lx-drawing svg { border-radius: 14px; box-shadow: 0 2px 6px rgba(11, 28, 51, .05), 0 22px 50px rgba(11, 28, 51, .12); }
.lux .ticks { margin-top: 28px; }
.lux .ticks li { padding: 16px 0; }
.lux .num { background: var(--teal); }

.lx-dark { background: var(--ink); color: var(--white); }
.lx-dark h2 { color: var(--white); }
.lx-dark .lx-trio > div { border-top-color: rgba(255, 255, 255, .18); }
.lx-dark .lx-icon { color: #a6ddda; }
.lx-dark .lx-trio p { color: #c5d3e0; }
.lx-dark .btn { margin-top: 56px; }

.lux .steps { gap: 56px; margin-top: 64px; }
.lux .steps li { border-top: 1px solid var(--line); padding-top: 28px; }
.lux .steps li::before { font-size: 44px; font-weight: 650; letter-spacing: -0.03em; color: var(--navy); line-height: 1; margin-bottom: 20px; }
.lux .steps h3 { font-size: 22px; }

.lx-links { margin-top: 44px; border-top: 1px solid var(--line); }
.lx-links a { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr) auto; gap: 8px 40px; align-items: baseline; padding: 26px 8px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.lx-links h3 { font-size: 22px; }
.lx-links p { color: var(--muted); }
.lx-go { color: var(--navy); font-size: 22px; transition: transform .15s; }
.lx-links a:hover h3 { color: var(--navy); }
.lx-links a:hover .lx-go { transform: translateX(4px); }

.lx-final { text-align: center; }
.lx-final h2, .lx-final .lede { margin-left: auto; margin-right: auto; }
.lx-final .btn { margin-top: 36px; }

.lux footer { background: var(--white); border-top: 1px solid var(--line); padding: 44px 0; }
.lux footer .wrap { align-items: center; gap: 18px 32px; }
.lux footer nav { gap: 8px 26px; }
.lux footer a { color: var(--muted); }
.lux footer a:hover { color: var(--navy); }
.lux footer .logo img { height: 34px; }

/* AMOTI CO-BRAND. User 2026-11-02: "co brand this is the company thats selling webready just use on home page for now".
   Beside the logo while the top bar has room, then a slim strip under it, and always in the footer. */
.lx-cobrand, .lx-cobrand-strip, .lx-cobrand-foot { display: flex; align-items: center; gap: 8px; flex: none; color: var(--muted); font-size: 13px; }
.lx-cobrand { padding-left: 18px; border-left: 1px solid var(--line); }
.lx-cobrand img { display: block; height: 44px; width: auto; }
.lx-cobrand-strip { display: none; justify-content: center; padding: 8px 16px; background: var(--white); border-bottom: 1px solid var(--line); }
.lx-cobrand-strip img { display: block; height: 40px; width: auto; }
.lx-cobrand-foot img { display: block; height: 56px; width: auto; }
@media (max-width: 1180px) { .lx-cobrand { display: none; } .lx-cobrand-strip { display: flex; } }

/* fixed2035 - THE CONFIDENT HOME PAGE. Styles for the ADA facts and the named comparison, same scope as above. */
.lx-stage .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lx-big { display: block; font-size: clamp(36px, 4vw, 48px); font-weight: 650; letter-spacing: -0.03em; line-height: 1.05; color: var(--navy); margin-bottom: 14px; }
.lux #ada .fine, .lux #versus .fine { max-width: none; }
.lux #versus { scroll-margin-top: 64px; }
.lux #versus .compare { background: var(--white); margin-top: 44px; }
.lux #versus .compare .ours { background: var(--tint); }
.lux #versus .btn, .lux #ada .btn, .lux #how .btn { margin-right: 4px; }

/* fixed2054 - the three jobs and the five details take the colors of their areas. */
.lx-trio [data-area] .lx-icon { color: var(--ac); background: var(--ac-bg); border-radius: 14px; padding: 12px; box-sizing: content-box; }
.lx-trio [data-area] .lx-word { color: var(--ac); }
.lux .num[data-area] { background: var(--ac); }

@media (prefers-reduced-motion: reduce) { .lux .btn, .lx-go { transition: none; } .lx-links a:hover .lx-go { transform: none; } }
@media (max-width: 960px) {
  .lux section { padding: 80px 0; }
  .lx-trio, .lux .steps { gap: 36px; }
  .lx-stage .panel { padding: 28px 24px 32px; min-height: 0; }
  .lx-stage .score { grid-template-columns: 170px minmax(0, 1fr); gap: 32px; }
  .lx-stage .ring { width: 170px; height: 170px; }
  .lx-stage .ring-text strong { font-size: 48px; }
  .lx-sticky { position: static; }
}
@media (max-width: 760px) {
  .lux { font-size: 17px; }
  .lux .wrap { padding: 0 16px; }
  .lux section { padding: 64px 0; }
  .lx-hero { padding: 56px 0 44px; }
  .lx-cta .btn { width: 100%; text-align: center; }
  .lx-stage { background: linear-gradient(180deg, var(--white) 0, var(--white) 120px, var(--ink) 120px); padding-bottom: 56px; }
  .lx-stage .sheet-head { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 18px; }
  .lx-stage .tabs { padding: 0; }
  .lx-stage .tabs button { flex: 1 1 0; padding: 12px 6px; }
  .lx-stage .panel { padding: 22px 18px 24px; }
  .lx-stage .panel h3 { font-size: 22px; }
  .lx-stage .score { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 24px; }
  .lx-stage .score > :last-child { width: 100%; }
  .lx-stage #panel-findings, .lx-stage .next { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lx-stage .next li { margin-top: 16px; }
  .lx-stage .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; margin-top: 44px; }
  .lx-stage .stat strong { font-size: 44px; }
  .lx-stage .stat span { font-size: 14px; display: block; line-height: 1.3; margin-top: 4px; }
  .lx-trio, .lux .steps { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .lux .bars a { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 8px 0; }
  .lux .tip { left: 0; }
  .lx-links a { grid-template-columns: minmax(0, 1fr) auto; }
  .lx-links p { grid-column: 1; }
  .lx-go { grid-column: 2; grid-row: 1; }
  .lx-final .btn { width: 100%; text-align: center; }
}