/* ========================================================================== lx.css -- the direction-07 section grammar, shared by every page that uses it. Extracted from the homepage on 2026-07-30 so pricing, consent, accessibility monitoring, about and free-scan can be laid out in the same components instead of each carrying a copy. Everything is scoped under .lx so css/style.min.css keeps owning the shared header, nav sheet and footer. A page opts in with: ...

...

========================================================================== */ /* ------------------------------------------------------------------------ Homepage: approved direction 07 (litigation spine). Every page rule is scoped under .lx so the shared header, nav sheet and footer keep rendering from css/style.min.css. The only unscoped rules are the token block, the @font-face set, and body.home-lx -- the body rule exists so the shared header and footer pick up Satoshi on this page instead of sitting in system type next to a Satoshi page. Palette: Ink Navy / Signal Blue / Bone. Status colour is reserved and never decorative, and never travels without a glyph (WCAG 1.4.1). ------------------------------------------------------------------------ */ :root{ /* ---- CORE ---------------------------------------------------------- */ --ink-navy:#0B2545; /* logo, headers, nav, dark surfaces */ --signal-blue:#12508C; /* every link, button and CTA */ --bone:#F7F4EF; /* dominant page surface */ /* ---- STATUS. reserved, never decorative ---------------------------- */ --pass:#0B5236; --review:#8A5300; --fail:#8C1D18; /* ---- STATUS TINTS. badge and pill backgrounds only ------------------ */ --pass-bg:#E6F0EA; --review-bg:#F7EEDD; --fail-bg:#F7E7E6; /* ---- WARM NEUTRAL RAMP --------------------------------------------- */ --n-50:#FBFAF7; /* card surface on bone */ --n-100:#F7F4EF; /* same as bone */ --n-200:#E8E4DB; /* hairline borders, dividers, recessed bands */ --n-300:#C4BFB3; /* disabled */ --n-500:#8A857A; /* placeholder text only */ --n-700:#5C584F; /* secondary text */ --n-900:#3D3A34; /* body text. never #000 */ /* White is permitted only as text on --signal-blue, --ink-navy and the three status colours. It is never a page or card surface here. */ --white:#FFFFFF; --navy-a05:rgba(11,37,69,.05); --navy-a07:rgba(11,37,69,.07); --navy-a14:rgba(11,37,69,.14); --navy-a16:rgba(11,37,69,.16); --navy-a35:rgba(11,37,69,.35); --navy-a42:rgba(11,37,69,.42); --blue-a28:rgba(18,80,140,.28); --blue-a30:rgba(18,80,140,.30); --fail-a06:rgba(140,29,24,.06); --on-navy-a62:rgba(255,255,255,.62); --on-navy-a68:rgba(255,255,255,.68); --on-navy-a42:rgba(255,255,255,.42); --on-navy-a16:rgba(255,255,255,.16); --bone-a70:rgba(247,244,239,.70); --bone-a85:rgba(247,244,239,.85); --slice-scrim:linear-gradient(180deg,rgba(247,244,239,.10),rgba(247,244,239,.94) 62%); --hero-scrim:radial-gradient(72% 62% at 50% 46%, rgba(247,244,239,.94), rgba(247,244,239,.72) 52%, rgba(247,244,239,.50) 78%),linear-gradient(180deg, rgba(247,244,239,.86), rgba(247,244,239,.30) 34%, rgba(247,244,239,.92)); --font:"Satoshi","SF Pro Display",-apple-system,'Helvetica Neue',sans-serif; --mono:"Geist Mono",'SF Mono',ui-monospace,monospace; --ease:cubic-bezier(.22,1,.36,1);--pad:clamp(20px,4.4vw,64px); } /* the shared header is sticky at 68px, so anchor targets need clearance or every in-page jump lands underneath it. */ html{scroll-behavior:smooth;scroll-padding-top:84px} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} /* Only the surface and the typeface belong on body: colour, size and leading would ride into the shared header and footer and make this page's chrome a different size from every other page's. Those live on .lx. */ body.lx-page{background:var(--bone);font-family:var(--font)} .lx{overflow-x:hidden;width:100%;max-width:100%;color:var(--ink-navy);font-size:17px;line-height:1.6} .lx button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent} .lx :focus-visible{outline:2px solid var(--signal-blue);outline-offset:3px;border-radius:4px} .lx .wrap{max-width:1280px;margin:0 auto;padding-inline:var(--pad);padding-block:0} .lx section{padding-block:clamp(112px,15vw,208px)} .lx h1,.lx h2{margin:0;font-weight:900;letter-spacing:-.042em;line-height:1.0;text-wrap:balance;color:var(--ink-navy)} .lx h1{font-size:clamp(42px,6.4vw,94px);max-width:17ch} .lx h2{font-size:clamp(34px,5vw,76px);max-width:20ch} .lx h3{margin:0;font-weight:700;font-size:clamp(18px,1.8vw,23px);letter-spacing:-.02em;line-height:1.22;color:var(--ink-navy)} .lx .lede{font-size:clamp(18px,1.5vw,21px);line-height:1.62;color:var(--n-900);max-width:36em;margin:30px 0 0} .lx .lede + .lede{margin-top:16px} .lx .lede b{color:var(--ink-navy);font-weight:700} /* 14.5px read as a footnote in three places that are not footnotes: the closing line under the practice-owner panels, the two paragraphs under the gate demo, and the receipt caption. 17px sits deliberately below .lede (18-21px) and well above .sources li (12.5px), which stays small because it IS a footnote. */ .lx .small{font-size:17px;line-height:1.7;color:var(--n-700);max-width:42em;margin:26px 0 0} .lx sup a{color:var(--signal-blue);text-decoration:none;font-size:.62em;font-weight:700;padding-left:2px} .lx sup a:hover{text-decoration:underline} .lx .lx-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} .lx .pill-img{display:inline-block;vertical-align:middle;width:clamp(64px,7.5vw,124px);height:clamp(34px,4vw,58px);border-radius:999px;background-size:cover;background-position:center;margin:0 .18em;filter:grayscale(1) contrast(1.12)} /* buttons */ .lx .pill-btn{display:inline-flex;align-items:center;gap:10px;padding:9px 9px 9px 18px;border-radius:999px;border:0;background:var(--ink-navy);color:var(--white);font-weight:700;font-size:14px;text-decoration:none;transition:transform .35s var(--ease),background-color .35s var(--ease)} .lx .pill-btn .knob{width:28px;height:28px;border-radius:999px;background:var(--on-navy-a16);display:grid;place-items:center;transition:transform .35s var(--ease)} .lx .pill-btn .knob svg{width:12px;height:12px} @media(hover:hover) and (pointer:fine){.lx .pill-btn:hover .knob{transform:translate(2px,-1px)}} .lx .pill-btn:active{transform:scale(.98)} .lx .pill-btn.lg{padding:13px 13px 13px 26px;font-size:16px} .lx .pill-btn.lg .knob{width:38px;height:38px} .lx .pill-btn.inv{background:var(--n-50);color:var(--ink-navy);border:1px solid var(--navy-a14)} .lx .pill-btn.inv .knob{background:var(--navy-a07)} @media(hover:hover) and (pointer:fine){.lx .pill-btn.inv:hover{background:var(--n-200)}} /* hero. the shared header is a 68px sticky bar, not the mockup's floating pill, so the hero starts below it and takes the remaining viewport. */ /* padding-top is small because the 68px sticky header already sits above the hero; the mockup used 74px there because its nav was a pill floating over the photograph. */ /* An explicit full-width column, not place-items:center. With a shrink-to-fit grid item, Chromium sizes the item from the h1's text-wrap:balance intrinsic width and the headline collapses to four narrow lines instead of two. */ .lx .hero{position:relative;min-height:calc(100dvh - 68px);display:grid;grid-template-columns:minmax(0,1fr);align-content:center;justify-items:stretch;text-align:center;overflow:hidden;padding-block:clamp(56px,6vw,88px) clamp(112px,15vw,208px)} .lx .hero-bg{position:absolute;inset:0;z-index:0} .lx .hero-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06) brightness(1.06)} .lx .hero-bg::after{content:"";position:absolute;inset:0;background:var(--hero-scrim)} /* width:100% is load-bearing. place-items:center makes the grid item shrink-to-fit, and without this the h1 gets the width of the button row instead of the container and the headline breaks to four lines. */ .lx .hero-inner{position:relative;z-index:1;width:100%;padding-block:clamp(80px,12vw,150px)} .lx .hero h1{margin-inline:auto} .lx .hero .lede{margin-inline:auto;max-width:32em;text-align:center} .lx .hero-actions{display:flex;gap:12px;justify-content:center;margin-top:42px;flex-wrap:wrap} @media(max-width:820px){.lx .hero{min-height:auto}} /* marquee */ .lx .marquee{border-block:1px solid var(--n-200);background:var(--n-200);overflow:hidden;padding-block:20px} .lx .marquee-track{display:flex;gap:56px;width:max-content;animation:lx-slide 38s linear infinite} .lx .marquee span{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--n-700);white-space:nowrap;display:flex;align-items:center;gap:56px} .lx .marquee span::after{content:"";width:5px;height:5px;border-radius:999px;background:var(--signal-blue);opacity:.5} @keyframes lx-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.lx .marquee-track{animation:none}} /* scrub */ .lx .scrub{font-size:clamp(26px,3.7vw,52px);font-weight:700;letter-spacing:-.035em;line-height:1.2;max-width:22ch;margin:0} .lx .scrub w{display:inline-block;opacity:.12;transition:opacity .25s linear} .lx .scrub w.lit{opacity:1} @media(prefers-reduced-motion:reduce){.lx .scrub w{opacity:1}} /* pinned split */ .lx .pin-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,80px);align-items:start} .lx .pin-left{position:sticky;top:22vh;align-self:start} .lx .pin-right{display:flex;flex-direction:column;gap:16px} @media(max-width:900px){.lx .pin-wrap{grid-template-columns:1fr}.lx .pin-left{position:static}} .lx .fall{border:1px solid var(--n-200);border-radius:20px;overflow:hidden;background:var(--n-50)} .lx .fall-h{display:flex;justify-content:space-between;gap:14px;padding:15px 20px;background:var(--n-200);border-bottom:1px solid var(--n-200);font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--n-700)} .lx .fall ul{list-style:none;margin:0;padding:0} .lx .fall li{padding:16px 20px;border-bottom:1px solid var(--n-200)} .lx .fall li:last-child{border-bottom:0} .lx .fall .top{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:10px} .lx .fall .who{font-family:var(--mono);font-size:12.5px;color:var(--n-900)} .lx .fall .ms{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--fail);font-variant-numeric:tabular-nums} .lx .fall .track{height:4px;border-radius:999px;background:var(--n-200);position:relative;overflow:hidden} .lx .fall .fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:999px;background:linear-gradient(90deg,var(--signal-blue),var(--fail));transition:width 1s var(--ease)} .lx .fall li.go .fill{width:var(--w)} @media(prefers-reduced-motion:reduce){.lx .fall .fill{transition:none}} /* bento */ .lx .bento{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-flow:dense;gap:16px;margin:56px 0 0} .lx .tile{border-radius:22px;overflow:hidden;border:1px solid var(--n-200);background:var(--n-50);display:flex;flex-direction:column;transition:transform .7s var(--ease)} .lx .tile.s7{grid-column:span 7}.lx .tile.s5{grid-column:span 5}.lx .tile.s4{grid-column:span 4}.lx .tile.s6{grid-column:span 6} .lx .tile .body{padding:26px 28px 30px;display:flex;flex-direction:column;gap:13px;flex:1} .lx .tile .cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal-blue)} .lx .tile p{margin:0;font-size:15px;line-height:1.55;color:var(--n-900)} .lx .tile .fig-n{font-size:clamp(38px,4.6vw,62px);font-weight:900;letter-spacing:-.05em;line-height:.95;display:block} .lx .tile .fig-n--range{font-size:clamp(28px,3vw,40px);letter-spacing:-.035em;line-height:1.02;white-space:nowrap} .lx .tile .who-n{font-size:13.5px;font-weight:700;color:var(--ink-navy);margin-top:2px} .lx .tile .when{font-family:var(--mono);font-size:11px;color:var(--n-700);letter-spacing:.06em} .lx .tile.dark{background:var(--ink-navy);color:var(--white);border-color:transparent} .lx .tile.dark p{color:var(--on-navy-a68)} .lx .tile.dark .cap{color:var(--on-navy-a62)} .lx .tile.dark .who-n{color:var(--white)} .lx .tile.dark .when{color:var(--on-navy-a42)} /* signal blue on ink navy is 1.87:1. The footnote marker inside a dark tile has to leave the link colour behind or it is invisible. */ .lx .tile.dark sup a{color:var(--white)} .lx .tile.sand{background:var(--n-200);border-color:transparent} .lx .tile.sand .cap{color:var(--n-900)} @media(max-width:900px){.lx .bento{grid-template-columns:1fr}.lx .tile.s7,.lx .tile.s5,.lx .tile.s4,.lx .tile.s6{grid-column:span 1}} /* the law stack */ .lx .stack{margin:56px 0 0;border-top:2px solid var(--ink-navy)} .lx .law{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,3vw,44px);align-items:baseline;padding:30px 0;border-bottom:1px solid var(--n-200)} .lx .law .n{font-family:var(--mono);font-size:11px;color:var(--signal-blue);font-weight:500;letter-spacing:.1em} .lx .law h3{font-size:clamp(19px,2.1vw,27px)} .lx .law .cite{font-family:var(--mono);font-size:11px;color:var(--n-700);letter-spacing:.05em;white-space:nowrap} .lx .law p{margin:10px 0 0;font-size:15.5px;line-height:1.55;color:var(--n-900);max-width:52em;grid-column:2} @media(max-width:760px){ .lx .law{grid-template-columns:auto 1fr;gap:14px} .lx .law .cite{grid-column:2;white-space:normal;margin-top:6px} .lx .law p{grid-column:1 / -1} } .lx .caveat{margin:40px 0 0;padding:26px 28px;border-radius:20px;background:var(--n-200);border:1px solid var(--n-200)} .lx .caveat .cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--n-700);display:block;margin-bottom:12px} .lx .caveat p{margin:0;font-size:15.5px;line-height:1.6;color:var(--n-900);max-width:58em} .lx .caveat p + p{margin-top:12px} .lx .caveat q{font-style:italic} /* horizontal accordion */ .lx .haccord{display:flex;gap:10px;margin:52px 0 0;height:min(58vh,480px)} .lx .slice{position:relative;flex:1;min-width:0;border-radius:22px;overflow:hidden;border:1px solid var(--n-200);background:var(--n-50);cursor:pointer;transition:flex .8s var(--ease)} .lx .slice.open{flex:3.1} .lx .slice img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.12);transition:filter .8s var(--ease)} .lx .slice.open img{filter:grayscale(.15) contrast(1.04)} .lx .slice::after{content:"";position:absolute;inset:0;background:var(--slice-scrim)} .lx .slice .content{position:absolute;inset:auto 0 0 0;z-index:2;padding:24px} .lx .slice .vert{writing-mode:vertical-rl;transform:rotate(180deg);font-weight:700;font-size:16px;letter-spacing:-.01em;white-space:nowrap;transition:opacity .4s var(--ease)} .lx .slice.open .vert{opacity:0;position:absolute} .lx .slice .full{opacity:0;transition:opacity .5s var(--ease) .18s;pointer-events:none} .lx .slice.open .full{opacity:1;pointer-events:auto} .lx .slice .full h3{margin-bottom:12px} .lx .slice .full ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .lx .slice .full li{font-size:14.5px;line-height:1.45;color:var(--n-900);padding-left:16px;position:relative} .lx .slice .full li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:999px;background:var(--signal-blue);opacity:.5} .lx .slice .full li b{color:var(--ink-navy);font-weight:700} @media(max-width:900px){ .lx .haccord{flex-direction:column;height:auto;gap:14px} .lx .slice{flex:none;height:auto;min-height:150px}.lx .slice.open{flex:none} .lx .slice .vert{display:none} .lx .slice .full{opacity:1;pointer-events:auto;position:static} .lx .slice .content{position:relative;padding:22px} .lx .slice img{position:absolute;height:100%} } /* gate */ .lx .gate{max-width:40em;margin:44px 0 0;border:1px solid var(--n-200);border-radius:22px;overflow:hidden;background:var(--n-50)} .lx .gate-h{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:17px 22px;background:var(--n-200);border-bottom:1px solid var(--n-200);flex-wrap:wrap} .lx .gate-h .t{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--n-700)} .lx .chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;padding:6px 13px;border-radius:999px;background:var(--review-bg);color:var(--review);white-space:nowrap;transition:background-color .35s var(--ease),color .35s var(--ease)} .lx .chip.off{background:var(--ink-navy);color:var(--white)} .lx .gate ul{list-style:none;margin:0;padding:0} /* each row is its own button now (a patient can answer per company, which is what the widget actually records), so the padding moves off the li and onto the button -- otherwise the hit area would be smaller than the row. */ .lx .gate li{display:block;padding:0;border-bottom:1px solid var(--n-200)} .lx .gate li .row{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;padding:15px 22px;background:none;border:0;border-radius:0;font:inherit;color:inherit;text-align:left;cursor:pointer;transition:background-color .3s var(--ease)} @media(hover:hover) and (pointer:fine){.lx .gate li .row:hover{background:var(--n-200)}} .lx .gate li .row:focus-visible{outline:2px solid var(--signal-blue);outline-offset:-3px} .lx .gate .nm{font-size:15px;font-weight:500} /* WCAG 1.4.1: status is never carried by colour alone. every state pairs its colour with a glyph. */ .lx .ti{width:14px;height:14px;flex:none} .lx .gate .st{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;transition:color .3s var(--ease)} .lx .st[data-s="held"]{color:var(--review)} .lx .st[data-s="released"]{color:var(--pass)} .lx .st[data-s="blocked"]{color:var(--fail)} .lx .gate-f{display:flex;gap:10px;padding:18px 22px;flex-wrap:wrap} /* receipt */ .lx .rcpt-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(24px,3.6vw,54px);align-items:start;margin:48px 0 0} .lx .rcpt{border:1px solid var(--n-200);border-radius:22px;overflow:hidden;background:var(--n-50)} .lx .rcpt .rh{padding:20px 24px;border-bottom:1px solid var(--n-200)} .lx .rcpt .rh b{display:block;font-size:15.5px;font-weight:700} .lx .rcpt .rh span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--n-700);margin-top:6px} .lx .rcpt dl{margin:0} .lx .rcpt .r{display:flex;justify-content:space-between;gap:18px;padding:12px 24px;border-bottom:1px solid var(--n-200);font-size:14.5px} .lx .rcpt dt{margin:0;color:var(--n-700)} .lx .rcpt dd{margin:0;font-family:var(--mono);font-size:12.5px;text-align:right;font-variant-numeric:tabular-nums} .lx .rcpt .r.flag{background:var(--fail-a06)} .lx .rcpt .r.pass dd{display:inline-flex;align-items:center;gap:7px;color:var(--pass)} .lx .rcpt .r.flag dd{display:inline-flex;align-items:center;gap:7px;color:var(--fail);font-weight:500} .lx .rcpt .rf{padding:14px 24px;font-family:var(--mono);font-size:10px;color:var(--n-700);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap} /* the caption belongs to the receipt, so it now lives in the receipt column */ .lx .rcpt-main{min-width:0} .lx .rcpt-side img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:22px;filter:grayscale(.7) contrast(1.06)} @media(max-width:880px){.lx .rcpt-grid{grid-template-columns:1fr}} /* "What we won't do" used to be a 24ch column with the whole right half of the screen empty, which read as a phone layout stretched onto a desktop. The list now sits beside its own reason, and the width cap is gone so each item holds one line instead of breaking into two or three. */ .lx .nos-wrap{display:grid;grid-template-columns:1.62fr 1fr;gap:clamp(32px,4.4vw,64px);align-items:start} .lx .nos-wrap .lede{margin-top:48px;max-width:34em} @media(max-width:900px){ .lx .nos-wrap{grid-template-columns:1fr;gap:0} .lx .nos-wrap .lede{margin-top:30px} } .lx .nos{list-style:none;margin:48px 0 0;padding:0;border-top:2px solid var(--ink-navy)} /* Sized so each refusal holds ONE line in the two-column layout. The old 58px against a 24ch column broke every item across 2-3 lines, which is what made the section read like a phone screen. The statement still outweighs everything around it; it just no longer wraps. */ .lx .nos li{font-size:clamp(26px,3.05vw,43px);font-weight:900;letter-spacing:-.045em;line-height:1.08;padding:26px 0;border-bottom:1px solid var(--n-200)} @media(max-width:900px){.lx .nos li{font-size:clamp(26px,6.4vw,40px)}} /* research cards. the featured images are 1200x630 brand title cards, not photography, so they deliberately get none of the grayscale/contrast treatment applied to photos on this page, which would wreck the type. */ .lx .research-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:52px 0 0} .lx .rcard{display:flex;flex-direction:column;border:1px solid var(--n-200);border-radius:22px;overflow:hidden;background:var(--n-50);text-decoration:none;color:inherit;transition:transform .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease)} @media(hover:hover) and (pointer:fine){ .lx .rcard:hover{transform:translateY(-3px);border-color:var(--blue-a30);box-shadow:0 18px 44px -28px var(--navy-a42)} } /* height:auto is load-bearing. these imgs carry width/height attributes, so without it the 630 attribute wins, aspect-ratio never applies, and the baked-in headline gets cropped into nonsense. */ .lx .rcard img{width:100%;height:auto;aspect-ratio:1200/630;object-fit:contain;display:block;background:var(--signal-blue);border-bottom:1px solid var(--n-200)} .lx .rcard .body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1} .lx .rcard .cat{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal-blue)} .lx .rcard .t{font-weight:700;font-size:17.5px;line-height:1.28;letter-spacing:-.022em} .lx .rcard .s{font-size:14.5px;line-height:1.55;color:var(--n-900);flex:1;margin:0} .lx .rcard .d{font-family:var(--mono);font-size:11px;color:var(--n-700);letter-spacing:.05em} .lx .research-more{display:inline-flex;align-items:center;gap:8px;margin:28px 0 0;font-size:14.5px;font-weight:600;color:var(--signal-blue);text-decoration:none;border-bottom:1px solid var(--blue-a28);padding-bottom:2px} .lx .research-more:hover{border-color:var(--signal-blue)} @media(max-width:900px){.lx .research-grid{grid-template-columns:1fr}} /* scope of monitoring. a compliance buyer wants coverage on the homepage and pricing on a page of its own. */ .lx .scope-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--n-200);border:1px solid var(--n-200);border-radius:22px;overflow:hidden;margin:52px 0 0} .lx .scope-item{background:var(--n-50);padding:clamp(26px,3.2vw,42px)} .lx .scope-item .n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--signal-blue);display:block;margin-bottom:16px} .lx .scope-item h3{margin-bottom:12px;max-width:22ch} .lx .scope-item p{margin:0;font-size:15.5px;line-height:1.58;color:var(--n-900);max-width:38em} @media(max-width:760px){.lx .scope-grid{grid-template-columns:1fr}} .lx .scan{display:flex;align-items:center;gap:8px;max-width:34em;margin:40px 0 0;padding:8px 8px 8px 22px;background:var(--n-50);border:1px solid var(--navy-a16);border-radius:999px} .lx .scan input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:16px;color:var(--ink-navy);padding:13px 0} .lx .scan input:focus{outline:none} .lx .scan input::placeholder{color:var(--n-700)} .lx .scan:focus-within{border-color:var(--signal-blue)} @media(max-width:560px){.lx .scan{flex-direction:column;align-items:stretch;border-radius:24px;padding:14px}.lx .scan .pill-btn{justify-content:center}} /* colophon. the mockup carried this in its own