/* edenlens.com — one stylesheet for every page. Generated pages link this rather than
   inlining it, so a visitor moving between pages pays for it once. */
:root{color-scheme:dark;
--bg:#04110d;--bg-deep:#020a07;--card:#0b1d16;--panel:#0b1d16;--field:#10271d;
--ink:#f3f6f1;--ink2:#aebbb4;--grey:#8b9a93;
--hair:rgba(161,197,178,.18);--track:#172b22;
/* --hair is decoration: section rules, table rows, card outlines. WCAG 1.4.11 does not
   ask those to reach 3:1 and forcing them there makes the page noisy. --edge is the
   boundary of an actual control, where 1.4.11 does apply. Measured 3.19:1 against the
   field interior (#10271d) and 3.89:1 against the page ground (#04110d), so it passes on
   whichever side of the line you sample. --hair was 1.47:1 against the field. */
--edge:#5f756a;--edge-strong:#8aa398;
--green:#31d384;--green-bright:#43e79a;--link:#43e79a;
--cream:#f4f0e7;--amber:#e0a92b;--red:#ff6b60}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:17px;line-height:1.47;letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
.wrap{max-width:1040px;margin:0 auto;padding:0 28px}
.narrow{max-width:36em}
a{color:var(--link)}
img{max-width:100%;height:auto}
.method-figure{margin:28px 0 8px}
.method-figure img{display:block;border-radius:10px;border:1px solid var(--hair)}
.method-figure figcaption{font-size:.9em;color:var(--grey);margin-top:10px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:60;background:var(--green);color:#04110d;padding:8px 14px;border-radius:8px}
:focus-visible{outline:2px solid var(--green-bright);outline-offset:3px;border-radius:6px}

nav.nav{position:sticky;top:0;z-index:20;background:rgba(4,17,13,.86);backdrop-filter:saturate(1.7) blur(14px);border-bottom:1px solid var(--hair)}
nav.nav .wrap{display:flex;align-items:center;gap:22px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}
nav.nav .brand{font-weight:700;color:#fff;text-decoration:none;margin-right:auto;display:flex;align-items:center;gap:9px;font-size:16px}
nav.nav ul{display:flex;gap:20px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
nav.nav a{color:var(--ink2);text-decoration:none;font-size:14.5px}
nav.nav a:hover,nav.nav a[aria-current]{color:#fff}
nav.nav a.cta,nav.nav a.cta:hover{color:#04110d}
.cta{font-size:13px;font-weight:600;color:#04110d;background:var(--green);border-radius:980px;padding:9px 15px;min-height:44px;display:inline-flex;align-items:center;text-decoration:none;white-space:nowrap}
.cta .short{display:none}
/* Mobile navigation.
   The links used to be display:none under 720px with nothing put in their place, so all six
   measured zero width on a phone and the Fix library was reachable only from the footer.
   The menu is a progressive enhancement, but the collapse is applied in CSS at first paint, not
   by the script afterwards. Keying it on a body class the script added meant the list rendered
   wrapped (tall header), then collapsed once app.js ran, and everything below jumped up: a
   0.31 layout shift on roughly half of mobile loads (Lighthouse, 19 Sep 2026). With JavaScript
   off, a <noscript> style in each page's head restores the wrapped list — the same "a redundant
   control beats an unreachable one" rule the sticky CTA already follows. */
.navtoggle{display:none;font:inherit;font-size:14px;font-weight:600;align-items:center;gap:8px;
  background:transparent;color:var(--ink);border:1px solid var(--edge);border-radius:980px;
  padding:8px 14px;min-height:44px;cursor:pointer;white-space:nowrap}
.navtoggle:hover{border-color:var(--edge-strong)}
.navtoggle .bars{display:inline-block;width:15px;height:11px;position:relative}
.navtoggle .bars:before,.navtoggle .bars:after,.navtoggle .bars i{content:"";position:absolute;left:0;
  width:100%;height:1.6px;background:currentColor;border-radius:2px}
.navtoggle .bars:before{top:0}.navtoggle .bars i{top:4.7px}.navtoggle .bars:after{bottom:0}

@media(max-width:720px){
  .cta .long{display:none}.cta .short{display:inline}
  .navtoggle{display:inline-flex}
  nav.nav ul{
    display:none;flex:1 0 100%;flex-direction:column;gap:0;
    margin:10px -28px 2px;padding:6px 28px 10px;border-top:1px solid var(--hair)}
  nav.nav ul.open{display:flex}
  nav.nav ul{order:10}   /* visually last: the row of brand, Menu and CTA stays put when the list opens,
                            so Close is where Menu was and the CTA does not vanish */
  body.nav-menu-managed nav.nav ul li{border-bottom:1px solid var(--hair)}
  body.nav-menu-managed nav.nav ul li:last-child{border-bottom:0}
  body.nav-menu-managed nav.nav ul a{display:block;padding:13px 2px;font-size:16px}
  /* With the extension pill in the bar, the wordmark gives way to the mark alone (still read
     out by screen readers) and the pills tighten, so brand, Chrome, Menu and Check fit on one
     row down to 320px. */
  nav.nav.has-ext .brand{gap:0}
  nav.nav.has-ext .brand .brand-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  nav.nav.has-ext .wrap{gap:6px}
  nav.nav.has-ext .cta{padding:9px 12px}
  nav.nav.has-ext .navtoggle{padding:8px 10px}
  nav.nav.has-ext li.menu-only{display:none}
  /* The extension entry is the first thing in the phone menu and looks like the header's
     Chrome pill, so it is not a plain eighth row at the bottom of the list. */
  body.nav-menu-managed nav.nav ul li.menu-only{order:-1;padding:10px 0 12px;border-bottom:1px solid var(--hair)}
  body.nav-menu-managed nav.nav ul li:has(+ li.menu-only){border-bottom:0}
  body.nav-menu-managed nav.nav ul li.menu-only a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;
    border-radius:980px;font-weight:600;color:var(--green);background:transparent;box-shadow:inset 0 0 0 1.5px var(--green)}
}
@media(max-width:520px){
  nav.nav ul{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}
}

h1{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;font-size:52px;line-height:1.07;letter-spacing:-.018em;font-weight:600;margin:0 0 18px;max-width:15em}
h2{font-size:34px;line-height:1.12;letter-spacing:-.012em;font-weight:600;margin:0 0 16px;max-width:18em}
h3{font-size:20px;font-weight:600;margin:30px 0 6px;letter-spacing:-.008em}
h4{font-size:16px;font-weight:600;margin:0 0 5px}
p{margin:0 0 15px}
.eyebrow{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--green);font-weight:600;margin:0 0 12px}
.lede{font-size:21px;line-height:1.381;color:var(--ink2);max-width:34em;margin:0 0 24px}
section{padding:72px 0;border-top:1px solid var(--hair)}
section.hero{border-top:0;padding:80px 0 60px}
.prose{max-width:36em}.prose h2{font-size:28px;margin:40px 0 10px}.prose h3{font-size:19px}
.small{font-size:14px;color:var(--grey)}
.btn{font:inherit;font-size:17px;font-weight:600;color:#04110d;background:var(--green);border:0;border-radius:980px;padding:13px 24px;cursor:pointer;text-decoration:none;display:inline-block}
.btn.secondary{background:transparent;color:var(--ink);border:1px solid var(--edge)}
.btn.secondary:hover,.field:hover{border-color:var(--edge-strong)}
.field{background:var(--field);border:1px solid var(--edge);border-radius:12px;padding:13px 16px;color:var(--ink);font:inherit;min-width:min(340px,100%)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:15px;margin:22px 0}
.card{background:var(--card);border:1px solid var(--hair);border-radius:16px;padding:20px 22px}
.card p{color:var(--ink2);font-size:15.5px;margin:0}
.card h3{font-size:16px;font-weight:600;margin:0 0 5px;letter-spacing:-.005em}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:3px 10px;border-radius:999px;border:1px solid currentColor}
.p-fail,.p-bad{color:var(--red)}
.p-part,.p-warn{color:var(--amber)}
.p-pass,.p-good{color:var(--green)}
.p-grey{color:var(--grey)}
.fixgrid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:18px 0}
@media(max-width:760px){.fixgrid{grid-template-columns:1fr}h1{font-size:38px}h2{font-size:27px}}
pre{background:var(--bg-deep);border:1px solid var(--hair);border-radius:14px;padding:16px 18px;overflow-x:auto;
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.62;color:#cfe8dc;margin:0}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;background:var(--bg-deep);border:1px solid var(--hair);padding:1px 6px;border-radius:5px}
pre code{background:0;border:0;padding:0}
pre .c{color:#6b8a7c}pre .k{color:#43e79a}pre .s{color:#e5d3a1}pre .d{color:#ff6b60}
.lbl{font-size:12px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;margin:0 0 7px}
.lbl.before{color:var(--red)}.lbl.after{color:var(--green)}
.note{border-left:3px solid var(--green);background:var(--card);padding:15px 19px;border-radius:0 12px 12px 0;margin:22px 0}
.note.w{border-left-color:var(--amber)}.note.r{border-left-color:var(--red)}
.note p:first-child{margin-top:0}.note p:last-child{margin-bottom:0}
.test{background:rgba(49,211,132,.09);border:1px solid rgba(49,211,132,.32);border-radius:12px;padding:14px 18px;margin:18px 0}
.test b{color:var(--green)}
ol.steps{padding-left:0;counter-reset:s;list-style:none}
ol.steps li{counter-increment:s;position:relative;padding-left:40px;margin:14px 0}
ol.steps li:before{content:counter(s);position:absolute;left:0;top:1px;width:26px;height:26px;border-radius:50%;
background:var(--green);color:#04110d;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}
table{border-collapse:collapse;width:100%;margin:16px 0;font-size:15px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--hair);vertical-align:top}
th{font-size:12.5px;letter-spacing:.03em;color:var(--grey);font-weight:600}
td.num,td.n{font-variant-numeric:tabular-nums;white-space:nowrap}
.factbox{border:1px solid var(--hair);border-radius:14px;padding:18px 22px;margin:22px 0}
.factbox dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0;font-size:15px}
.factbox dt{color:var(--grey)}.factbox dd{margin:0}
.pricetag{font-size:30px;font-weight:600;margin:0 0 2px;letter-spacing:-.01em}
.qa{max-width:44em;margin:0 0 30px}.qa h2{font-size:25px;margin:0 0 10px}.qa p{margin:0}
.wrapscroll{overflow-x:auto}
.ctable tr.us td{background:rgba(49,211,132,.08)}
.srcnote{font-size:13px;color:var(--grey);margin:6px 0 0}
footer{border-top:1px solid var(--hair);padding:38px 0 64px;color:var(--grey);font-size:14px}
footer .brand{color:#fff;text-decoration:none;display:flex;align-items:center;gap:9px;font-weight:700;margin-bottom:14px}
footer ul{display:flex;gap:18px;list-style:none;margin:0 0 14px;padding:0;flex-wrap:wrap}
footer a{color:var(--ink2);text-decoration:none}
footer a:hover{color:#fff}
footer ul a{display:inline-flex;align-items:center;min-height:44px}  /* 44 px targets on every width (W10) */
/* Result card, rendered by app.js */
#result .prob{border-left:3px solid var(--red);background:var(--card);border-radius:0 12px 12px 0;padding:15px 19px;margin:12px 0}
#result .prob.warn{border-left-color:var(--amber)}
#result .prob .area{font-size:13px;color:var(--grey);margin-left:8px}
#result .fixlink{margin:12px 0 0}
.plain{list-style:none;padding:0}.plain li{padding-left:18px;position:relative;margin:6px 0}
.plain li:before{content:"›";position:absolute;left:0;color:var(--green)}

/* --------------------------------------------------------------------------
   Progress gauge. Shown in the result slot while the check runs, so the work
   is legible instead of instantaneous. The ring carries no number: the stages
   are a known sequence, not a measurement, and a percentage would imply one.
   -------------------------------------------------------------------------- */
.gauge{display:flex;align-items:center;gap:22px;background:var(--card);border:1px solid var(--hair);
  border-radius:16px;padding:22px 24px;flex-wrap:wrap}
.gauge svg{width:104px;height:104px;flex:0 0 auto}
.gauge .g-track{fill:none;stroke:var(--track);stroke-width:9}
.gauge .g-arc{fill:none;stroke:var(--green);stroke-width:9;stroke-linecap:butt;
  transition:stroke-dashoffset .5s cubic-bezier(.4,0,.2,1)}
.gauge .g-text{min-width:0;flex:1 1 220px}
.gauge .g-stage{font-size:19px;font-weight:600;margin:0 0 4px;letter-spacing:-.01em}
.gauge .g-detail{font-size:15px;color:var(--ink2);margin:0 0 8px}
.gauge .g-steps{font-size:13px;color:var(--grey);margin:0;font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){.gauge .g-arc{transition:none}}
@media(max-width:520px){
  .gauge{gap:16px;padding:18px 18px}
  .gauge svg{width:72px;height:72px}
  .gauge .g-stage{font-size:17px}
  .gauge .g-detail{font-size:14.5px}
}

/* --------------------------------------------------------------------------
   Declared presence. One row per profile the page links to, with what happened
   when it was opened, so the reader can see the work was actually done.
   -------------------------------------------------------------------------- */
.presence{background:var(--card);border:1px solid var(--hair);border-radius:16px;padding:18px 22px;margin:12px 0}
.presence.none{border-left:3px solid var(--amber)}
.presence .p-lead{margin:0 0 12px}
.plist{list-style:none;margin:0 0 12px;padding:0}
.pitem{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 0;border-bottom:1px solid var(--hair)}
.pitem:last-child{border-bottom:0}
.pplat{font-weight:600;min-width:104px}
.phost{color:var(--ink2);text-decoration:none;font-size:14.5px;word-break:break-all}
.phost:hover{color:var(--link)}
.pstate{font-size:12.5px;font-weight:600;padding:2px 9px;border-radius:999px;border:1px solid currentColor;white-space:nowrap}
.s-ok{color:var(--green)}.s-warn{color:var(--amber)}.s-bad{color:var(--red)}
.s-unknown,.s-unchecked{color:var(--grey)}
@media(max-width:520px){.pplat{min-width:0;flex:1 0 100%}}

/* --------------------------------------------------------------------------
   iPhone. A flex item will not shrink below its content unless told to, which
   is how a 340px field ends up forcing a sideways scroll on a 390px screen.
   -------------------------------------------------------------------------- */
.row{width:100%}
.row .field{flex:1 1 220px;min-width:0}
.row .btn{flex:0 0 auto}
/* Turnstile host: a gap from the form, and height reserved so the widget's arrival does not push
   the status line down (it renders ~65px tall). */
.turnstile{margin:8px 0 0}
.turnstile:not(:empty){margin:14px 0 0}
@media(max-width:520px){
  .row{flex-direction:column;align-items:stretch}
  /* flex-basis follows the main axis. Once .row turns column, the 220px basis set above
     stops being a width and becomes a height, which is how the one field the whole site
     funnels into ended up a 220px slab on every phone. Reset it to the content height. */
  .row .field{flex:1 1 auto}
  .row .btn{width:100%}
  h1{font-size:34px}
  h2{font-size:25px}
  .wrap{padding-left:20px;padding-right:20px}
  section{padding:52px 0}
  section.hero{padding:44px 0 40px}
  .lede{font-size:19px}
  pre{font-size:12px;padding:13px 14px}
  .factbox dl{grid-template-columns:1fr;gap:2px 0}
  .factbox dt{margin-top:8px}
  table{font-size:14px}
  th,td{padding:8px 9px}
}
/* Anything that can be wider than the screen scrolls inside itself, never the page. */
.wrapscroll,table{max-width:100%}
body{overflow-x:hidden}

/* The sticky-bar button appears once the form has scrolled out of sight. Only applied
   when the script is managing it, so a no-JS page keeps a working button. */
body.nav-cta-managed .cta.is-hidden{opacity:0;pointer-events:none;transform:translateY(-4px)}
body.nav-cta-managed .cta{transition:opacity .22s ease,transform .22s ease}
@media(prefers-reduced-motion:reduce){body.nav-cta-managed .cta{transition:none}}

/* Comparison table conclusion row: the plain-language point of the table, so a reader
   (or an assistant lifting the table) gets the conclusion and not only the numbers. */
.ctable tfoot .conclusion td{background:#f6f7f8;border-top:2px solid #d2d2d7;padding:14px 12px;
  font-size:.95rem;line-height:1.5;text-align:left}
@media(prefers-color-scheme:dark){.ctable tfoot .conclusion td{background:#14211d;border-top-color:#2c3a35}}

/* Method page: pillar and result definitions. */
dl.pillars{margin:18px 0 26px;display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:10px 22px}
dl.pillars dt{font-weight:600;color:var(--ink)}
dl.pillars dd{margin:0;color:var(--ink2)}
@media(max-width:520px){dl.pillars{grid-template-columns:1fr;gap:4px 0}dl.pillars dd{margin-bottom:12px}}
.pitem .pnote{flex-basis:100%;color:var(--grey);margin-top:2px}
.pdf-form{display:inline}

/* Order pages and service Buy buttons (23 Sep 2026). */
.buy-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:20px 0 8px}
.order-summary th{width:7.5em;text-align:left;vertical-align:top}
.lbl{display:block;font-weight:600;margin:18px 0 8px}
.buy-site{width:100%;max-width:480px}
fieldset.start{border:0;padding:0;margin:20px 0 6px}
fieldset.start legend{font-weight:600;padding:0;margin-bottom:8px}
.choice{display:flex;gap:12px;align-items:flex-start;margin:10px 0;padding:14px 16px;border:1px solid var(--edge);border-radius:12px;background:var(--card);cursor:pointer}
.choice:hover{border-color:var(--edge-strong)}
.choice input{margin-top:5px;flex:0 0 auto;accent-color:var(--green)}
.model-form p{margin:6px 0}
@media(max-width:560px){.buy-actions .btn{width:100%;text-align:center}}

/* Search and share previews in the free-check result (23 Sep 2026). The search card is drawn
   light, as a result page is, so the owner recognises it at a glance. */
.pv-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:12px 0;align-items:start}
@media(max-width:760px){.pv-grid{grid-template-columns:1fr}}
.pv-card{background:var(--card);border:1px solid var(--hair);border-radius:14px;padding:16px}
.pv-label{font-size:14px;font-weight:600;color:var(--grey);margin:0 0 10px}
.serp{background:#fff;color:#202124;border-radius:10px;padding:14px 16px;font-family:Arial,Helvetica,sans-serif}
.serp-site{font-size:13px;color:#202124;margin-bottom:4px;overflow-wrap:anywhere}.serp-site span{color:#5f6368}
.serp-title{font-size:19px;line-height:1.3;color:#1a0dab;margin-bottom:4px;overflow-wrap:anywhere}
.serp-desc{font-size:14px;line-height:1.45;color:#4d5156;overflow-wrap:anywhere}
.og{background:#f0f2f5;color:#050505;border-radius:10px;overflow:hidden;border:1px solid #dadde1;font-family:Helvetica,Arial,sans-serif}
.og-img{display:block;width:100%;aspect-ratio:1.91/1;object-fit:cover;background:#dadde1}
.og-none{display:flex;align-items:center;justify-content:center;color:#65676b;font-size:14px}
.og-body{padding:10px 12px 12px}
.og-host{font-size:12px;color:#65676b;letter-spacing:.02em;overflow-wrap:anywhere}
.og-title{font-size:16px;font-weight:600;line-height:1.3;margin:3px 0;overflow-wrap:anywhere}
.og-desc{font-size:14px;color:#65676b;line-height:1.35;overflow-wrap:anywhere}
.pv-notes{margin:12px 0 4px;padding-left:18px;font-size:15px}.pv-notes li{margin:5px 0}
.pv-ok{margin-top:10px}
#result .ev{font-size:13px;color:var(--grey);margin-top:8px;overflow-wrap:anywhere}

/* Input helpers under the free-check box (23 Sep 2026): a suggestion from the page the visitor
   came from, paste from the clipboard, and dictation. Each appears only where it works. */
.check-helpers{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.helper{font:inherit;font-size:14px;color:var(--ink);background:transparent;border:1px solid var(--edge);border-radius:980px;padding:10px 16px;min-height:44px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.helper:hover{border-color:var(--edge-strong)}
.helper[aria-pressed="true"]{border-color:var(--green);color:var(--green)}
.helper svg{flex:0 0 auto}
.check-helpers[hidden],.helper[hidden],.helper-status[hidden]{display:none}
.helper-status{margin:8px 0 0;color:var(--ink2)}
@media(max-width:560px){.helper{font-size:13.5px;padding:10px 14px}}

/* What each declared profile shows (23 Sep 2026). */
.pcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin:8px 0 10px}
.pcard{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--hair);border-radius:12px;padding:12px 14px;color:var(--ink);text-decoration:none}
.pcard:hover{border-color:var(--edge-strong)}
.pc-img{width:48px;height:48px;border-radius:50%;flex:0 0 48px;object-fit:cover;background:var(--track)}
.pc-none{display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--grey)}
.pc-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.pc-plat{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
.pc-name{font-weight:600;overflow-wrap:anywhere}
.pc-handle,.pc-facts{font-size:14px;color:var(--ink2);overflow-wrap:anywhere}
.pc-bio{font-size:14px;overflow-wrap:anywhere}
.pc-rating{font-size:14px;font-weight:600;color:var(--ink)}.pc-attr{font-weight:400;color:var(--grey)}
.pcard .pstate{font-size:13px;margin-top:6px;white-space:normal;align-self:flex-start;max-width:100%;line-height:1.35}

/* Pricing page: the three EdenLens offers before the competitor table (25 Sep 2026). */
.offers{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:15px;margin:18px 0 10px}
.offer h3{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:0}
.offer-price{font-size:22px;font-weight:600;letter-spacing:-.01em}
.offer ul{margin:10px 0 14px}.offer li{margin:5px 0}
.offer p:last-child{margin-bottom:0;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.scrollnote{display:none}
@media(max-width:760px){.scrollnote{display:block}}

/* Order reference on the order pages (25 Sep 2026). */
.order-ref-card{margin:0 0 22px}
.order-ref-big{font-size:26px;font-weight:600;letter-spacing:.04em;font-variant-numeric:tabular-nums;margin:0 0 8px}
.order-ref-card[hidden]{display:none}
.js-only{display:none}
body.js .js-only{display:inline}

/* The example result under the hero (25 Sep 2026): one finding, its repair, its test. */
.example-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:15px;margin:22px 0 18px}
.ex p{margin:8px 0}.ex .lbl{margin:0 0 6px}
.lbl.verify{color:var(--green)}
.ex-code summary{cursor:pointer;color:var(--green);font-weight:600;margin:8px 0 4px}
.ex-code pre{margin:8px 0;max-width:100%;overflow-x:auto;font-size:12.5px}
.pill.bad{border-color:var(--red);color:var(--red)}.pill.ok{border-color:var(--green);color:var(--green)}

/* Focused result view (25 Sep 2026): summary and actions first, sections fold below. */
#result .res-head h3{margin:0 0 4px}
#result .band{border-left:3px solid var(--green);background:var(--card);border-radius:0 12px 12px 0;padding:15px 19px;margin:14px 0}
#result .band.has-problems{border-left-color:var(--amber)}
#result .band strong{font-size:18px}
#result .band p{margin:8px 0 0}#result .band .cov{color:var(--ink2);font-size:14px}
#result .cta-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0 6px}
#result .cta-row.top .btn{min-height:44px}
@media(max-width:560px){#result .cta-row .btn,#result .cta-row form{width:100%}#result .cta-row form .btn{width:100%}}
.rsec{border:1px solid var(--hair);border-radius:12px;margin:12px 0;background:transparent}
.rsec summary{list-style:none;cursor:pointer;padding:14px 18px;font-weight:600;font-size:17px;display:flex;align-items:center;gap:10px;min-height:44px}
.rsec summary::-webkit-details-marker{display:none}
.rsec summary::before{content:"\203A";display:inline-block;color:var(--green);font-size:22px;line-height:1;transition:transform .15s ease}
.rsec[open] summary::before{transform:rotate(90deg)}
@media(prefers-reduced-motion:reduce){.rsec summary::before{transition:none}}
.rsec-body{padding:0 18px 16px}
.rsec-body h4.sub{margin:18px 0 8px;font-size:16px}
#result .readings{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
#result .readings .r{background:var(--card);border:1px solid var(--hair);border-radius:12px;padding:12px 14px}
#result .readings h4{margin:0 0 6px}
#result .evt{font-size:13px}#result .evt td,#result .evt th{padding:5px 7px;vertical-align:top}
.ev-appendix{margin:12px 0}.ev-appendix summary{cursor:pointer;color:var(--green);font-weight:600;padding:10px 0;min-height:44px;display:flex;align-items:center}

/* The mark is an E built from arcs; at nav size it needs a touch more room than the old square. */
nav.nav .brand img,footer .brand img{width:26px;height:26px}
@media(max-width:520px){nav.nav .brand img{width:24px;height:24px}}


/* ==========================================================================
   Redesign, 6 October 2026. Approved from the design review of the same date.
   The chrome is Liquid Glass (the bar, the phone toolbar); the result is a cream
   sheet, the token file's one inversion; every status carries its word.
   ========================================================================== */
:root{
  --glass:rgba(10,26,20,.58);--glass-edge:rgba(255,255,255,.12);--glass-hi:rgba(255,255,255,.18);
  --s-ink:#12241c;--s-ink2:#4a5a52;--s-muted:#6b7a72;--s-hair:rgba(0,0,0,.10);--cream-deep:#ece7db;
  --s-pass:#087044;--s-mixed:#9b6700;--s-fail:#af352d;--s-na:#66746d;--s-adv:#2a5aa3;
  --ease:cubic-bezier(.2,.8,.2,1)}
h1,h2,h3,h4{text-wrap:balance}
p{text-wrap:pretty}

/* the bar: one glass row on every width */
nav.nav{background:transparent;border-bottom:0;padding-top:env(safe-area-inset-top)}
nav.nav .wrap{background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  border:1px solid var(--glass-edge);border-top:0;border-radius:0 0 18px 18px;box-shadow:inset 0 1px 0 var(--glass-hi),0 12px 32px rgba(0,0,0,.35);
  gap:14px;padding:6px 10px 6px 16px;min-height:56px}
nav.nav .brand{min-height:40px}
nav.nav ul a{padding:10px 12px;border-radius:999px;min-height:44px;display:inline-flex;align-items:center}
nav.nav ul a:hover,nav.nav a[aria-current]{background:rgba(255,255,255,.06)}
.cta{padding:9px 14px}
@media(max-width:720px){
  nav.nav .wrap{gap:8px;padding:6px 8px 6px 12px;border-radius:0 0 16px 16px}
  nav.nav .brand{font-size:15px}
  .navtoggle{padding:8px 11px}
  .cta{padding:9px 13px}
  nav.nav ul{margin:8px -8px 2px -12px;padding:6px 12px 10px 12px}
  nav.nav ul a{min-height:0;border-radius:0;background:transparent}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){nav.nav .wrap,.fab{background:#0a1a14}}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){nav.nav .wrap,.fab{background:#0a1a14;-webkit-backdrop-filter:none;backdrop-filter:none}}

/* hero */
.kicker{color:var(--green);font-weight:600;font-size:17px;margin:0 0 16px}
section.hero{padding:72px 0 56px}
/* The hero is a centred block (independent HIG review, 6 Oct 2026): short copy centred, the
   long company paragraph left-aligned inside a centred 66-character column, so nothing sits
   alone against the left edge while the right two thirds stay empty (U14, W03). */
section.hero .wrap{text-align:center}
section.hero h1{margin-left:auto;margin-right:auto}
section.hero .lede{margin:16px auto 24px}
section.hero .check{margin:32px auto 0}
section.hero .check-helpers{justify-content:center}
section.hero .helper-status{text-align:center}
section.hero #check-status{margin:8px 0 0}
section.hero #check-status:empty{display:none}
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 24px;margin:16px auto 0;font-size:16px;line-height:1.5;color:var(--grey);max-width:none}
.operator{max-width:66ch;margin:32px auto 0;text-align:left;font-size:16px;line-height:1.5;color:var(--grey)}
.operator a{color:var(--link)}
.pipeline p,.offer p{font-size:16px}
#start .wrap{text-align:center}
#start .lede{margin-left:auto;margin-right:auto}
.red{max-width:36em}
.check .field{min-height:54px;font-size:19px;border-radius:14px;padding:0 18px}
.check .btn{min-height:54px;font-size:18px;padding:0 26px;display:inline-flex;align-items:center;justify-content:center}
.trust{margin:14px 0 0!important;max-width:44em}
.examples{margin:24px 0 0}
.examples .ex-lead{font-size:16px;color:var(--ink2);margin:0 0 8px}
.examples .chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
@media(min-width:900px){.examples .chips{flex-wrap:nowrap}}
.chip{font:inherit;font-size:15px;font-weight:600;color:var(--ink);background:var(--card);border:1px solid var(--hair);border-radius:999px;padding:0 14px;min-height:44px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;text-align:left}
.chip:hover{border-color:var(--edge-strong)}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--red);display:inline-block;flex:0 0 auto}
.chip i.ok{background:var(--green)}
.chip[aria-pressed="true"]{border-color:var(--green);color:var(--green)}
#result{margin-top:28px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.btn.sm{font-size:14.5px;padding:9px 16px;min-height:40px;display:inline-flex;align-items:center}

/* the sheet */
#result .sheet{position:relative;background:var(--cream);color:var(--s-ink);border-radius:28px;padding:0 0 26px;
  box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.35);overflow:clip}
@media(prefers-reduced-motion:no-preference){
  #result .sheet{transition:opacity .5s var(--ease),transform .6s var(--ease)}
  @starting-style{#result .sheet{opacity:0;transform:translateY(18px)}}
}
#result .sheet a{color:#0b4f8a}
#result .sheet .small,#result .sheet .ev,#result .sheet .pc-plat,#result .sheet .pc-handle,#result .sheet .pv-label,#result .sheet .pnote,#result .sheet .pc-attr{color:var(--s-muted)}
#result .sheet .ev{font-size:13px;margin-top:8px}
#result .sheet p{color:inherit}
#result .sheet .sh{padding:30px 36px 0;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline}
#result .sheet .sh h3{font-size:26px;letter-spacing:-.015em;margin:0;flex:1 1 auto}
#result .sheet .sh .meta{font-size:14px;color:var(--s-muted);flex:1 1 100%;margin:0}
#result .sheet .verdict{margin:18px 36px 0;padding:18px 22px;border-radius:18px;background:#fff;border:1px solid var(--s-hair);display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 16px;align-items:start}
#result .sheet .verdict .w{grid-column:1;grid-row:1}
#result .sheet .verdict b{grid-column:2;grid-row:1}
#result .sheet .verdict .w{font-size:13px;font-weight:700;letter-spacing:.02em;padding:4px 10px;border-radius:999px;border:1.5px solid currentColor;margin-top:3px;white-space:nowrap}
#result .sheet .verdict b{font-size:20px;letter-spacing:-.012em;display:block;line-height:1.3}
#result .sheet .verdict p{margin:4px 0 0;color:var(--s-ink2);font-size:15.5px;grid-column:2}
#result .sheet .verdict .cov{font-size:14px;color:var(--s-muted)}
#result .sheet .verdict .cleared{grid-column:2;margin:8px 0 0;padding-left:18px;font-size:14.5px;color:var(--s-ink2);columns:2;column-gap:24px}
#result .sheet .verdict .cleared li{margin:3px 0;break-inside:avoid}
.w-pass{color:var(--s-pass)}.w-mixed{color:var(--s-mixed)}.w-fail{color:var(--s-fail)}.w-na{color:var(--s-na)}.w-adv{color:var(--s-adv)}
#result .sheet .word{font-size:12.5px;font-weight:700;letter-spacing:.02em;padding:3px 9px;border-radius:999px;border:1.5px solid currentColor;white-space:nowrap;display:inline-block;line-height:1.3}
#result .sheet .pill,#result .sheet .pstate{border-color:currentColor}
#result .sheet .p-good,#result .sheet .s-ok{color:var(--s-pass)}#result .sheet .p-warn,#result .sheet .s-warn{color:var(--s-mixed)}#result .sheet .p-bad,#result .sheet .s-bad{color:var(--s-fail)}#result .sheet .p-grey,#result .sheet .s-unknown,#result .sheet .s-unchecked{color:var(--s-na)}
#result .sheet .problems{list-style:none;margin:22px 36px 0;padding:0}
#result .sheet .prob{border-top:1px solid var(--s-hair);padding:20px 0 18px;background:transparent;border-left:0;border-radius:0;margin:0}
#result .sheet .prob:first-child{border-top:0}
#result .sheet .prob .head{display:grid;grid-template-columns:34px minmax(0,1fr);gap:4px 14px;align-items:start}
#result .sheet .rank{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;color:#fff;background:currentColor}
#result .sheet .rank{color:var(--s-fail)}
#result .sheet .rank.w-mixed{color:var(--s-mixed)}#result .sheet .rank.w-adv{color:var(--s-adv)}#result .sheet .rank.w-na{color:var(--s-na)}#result .sheet .rank.w-pass{color:var(--s-pass)}
#result .sheet .rank::before{content:"";position:absolute}
#result .sheet .prob .head > .rank{position:relative;text-indent:0}
#result .sheet .prob .head > .rank{color:#fff;background:var(--s-fail)}
#result .sheet .prob .head > .rank.w-mixed{background:var(--s-mixed)}#result .sheet .prob .head > .rank.w-adv{background:var(--s-adv)}#result .sheet .prob .head > .rank.w-na{background:var(--s-na)}#result .sheet .prob .head > .rank.w-pass{background:var(--s-pass)}
#result .sheet .prob h4{font-size:19px;letter-spacing:-.012em;line-height:1.3;margin:0}
#result .sheet .prob .tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0 0;font-size:13.5px;color:var(--s-muted)}
#result .sheet .prob .why{grid-column:2;margin:10px 0 0;color:var(--s-ink2);font-size:16px}
#result .sheet .prob .ev,#result .sheet .prob .fix,#result .sheet .prob .fixlink{grid-column:2}
#result .sheet .fix{margin:12px 0 0;border:1px solid var(--s-hair);border-radius:14px;background:#fff}
#result .sheet .fix summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:12px 16px;min-height:48px;font-weight:600;color:var(--s-pass)}
#result .sheet .fix summary::-webkit-details-marker{display:none}
#result .sheet .fix summary::after{content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-left:auto;flex:0 0 auto;transition:transform .2s var(--ease)}
#result .sheet .fix[open] summary::after{transform:rotate(-135deg)}
#result .sheet .fix .body{padding:2px 16px 16px;border-top:1px solid var(--s-hair)}
#result .sheet .fix .steps{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:12px 0 0}
#result .sheet .fix .lbl{font-size:12.5px;font-weight:700;letter-spacing:.02em;margin:0 0 6px;text-transform:none;display:block}
#result .sheet .fix .lbl.before{color:var(--s-fail)}#result .sheet .fix .lbl.after{color:var(--s-pass)}
#result .sheet .fix .lbl.now{color:var(--s-ink);margin-top:14px}
#result .sheet .fix .lbl.ok{color:var(--s-pass)}
#result .sheet .fix .lbl.example{color:var(--s-muted);margin-top:18px;padding-top:14px;border-top:1px solid var(--s-hair)}
#result .sheet .fix .lbl.after + .small,#result .sheet .fix .lbl.example + .small{margin:0 0 8px;font-size:13.5px}
#result .sheet .fix .facts{list-style:none;margin:0 0 6px;padding:0;font-size:14px;color:var(--s-ink2)}
#result .sheet .fix .facts li{padding:5px 0;border-bottom:1px solid var(--s-hair);overflow-wrap:anywhere}
#result .sheet .fix .facts li:last-child{border-bottom:0}
#result .sheet .fix .facts b{color:var(--s-ink);font-weight:600}
#result .sheet .fix .fid{font-size:12px;color:var(--s-muted);margin-right:4px}
#result .sheet .fix pre + .lbl{margin-top:14px}
.proof-lead{margin:12px 0 0}
.proof-links{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0}
.proof-links .btn.sm{min-height:40px;white-space:normal;text-align:left;line-height:1.25}
#result .sheet .proof-links .btn.secondary{color:var(--s-ink);border-color:rgba(0,0,0,.22);background:#fff}
#result .sheet .proof-links .btn.secondary:hover{background:rgba(0,0,0,.04)}
#result .sheet .fix pre{margin:0;background:#12241c;color:#d9eadf;border:0;border-radius:12px;padding:12px 14px;font-size:12.5px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
#result .sheet .fix .prove{margin:12px 0 0;padding:12px 14px;border-radius:12px;background:rgba(8,112,68,.08);border:1px solid rgba(8,112,68,.25);font-size:15px}
#result .sheet .fix .prove b{color:var(--s-pass)}
#result .sheet .fix .more{margin:12px 0 0;font-size:14.5px}
#result .sheet .fixlink{margin:12px 0 0}
#result .sheet .further{margin:14px 36px 0;font-size:14.5px;color:var(--s-ink2)}
#result .sheet .cta-row.top{margin:22px 36px 0;padding:18px 0 0;border-top:1px solid var(--s-hair)}
#result .sheet .cta-row.top .btn{min-height:46px;display:inline-flex;align-items:center}
#result .sheet .btn.secondary{color:var(--s-ink);border-color:rgba(0,0,0,.22)}
#result .sheet .btn.secondary:hover{background:rgba(0,0,0,.04)}
#result .sheet #pdf-status,#result .sheet .cta-row + .small{margin:10px 36px 0;font-size:13.5px}
#result .sheet .ssec{margin:28px 36px 0;padding-top:24px;border-top:1px solid var(--s-hair)}
#result .sheet .ssec h4{font-size:20px;letter-spacing:-.012em;margin:0 0 6px}
#result .sheet .ssec h4.sub{font-size:16px;margin:18px 0 8px}
#result .sheet .ssec .lead{color:var(--s-ink2);margin:0 0 14px;font-size:15.5px}
#result .sheet .idrow{display:block;margin:0 0 8px}
#result .sheet .idrow .word{margin:0 0 6px}
#result .sheet .idrow p{margin:4px 0 0;color:var(--s-ink2);font-size:15.5px}
#result .sheet .presence,#result .sheet .pcard,#result .sheet .pv-card,#result .sheet .readings .r,#result .sheet .rd{background:#fff;border-color:var(--s-hair);color:var(--s-ink)}
#result .sheet .presence.none{border-left:3px solid var(--s-mixed)}
#result .sheet .pitem{border-color:var(--s-hair)}
#result .sheet .phost{color:var(--s-ink2)}
#result .sheet .pc-img{background:var(--cream-deep)}
#result .sheet .pc-handle,#result .sheet .pc-facts,#result .sheet .pc-bio{color:var(--s-ink2)}
#result .sheet .found{list-style:none;margin:12px 0 0;padding:0}
#result .sheet .found li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;padding:12px 0;border-top:1px solid var(--s-hair);align-items:start}
#result .sheet .found li:first-child{border-top:0;padding-top:0}
#result .sheet .found b{font-size:16px}
#result .sheet .found p{grid-column:2;margin:2px 0 0;color:var(--s-ink2);font-size:15px}
#result .sheet .found .ev{grid-column:2;margin:4px 0 0}
#result .sheet .readings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:12px 0 0}
#result .sheet .rd{border:1px solid var(--s-hair);border-radius:14px;padding:14px 16px}
#result .sheet .rd .top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
#result .sheet .rd .top b{font-size:17px}
#result .sheet .rd .cnt{font-size:14px;color:var(--s-ink2);font-variant-numeric:tabular-nums}
#result .sheet .strip{display:flex;gap:4px;margin:10px 0 10px}
#result .sheet .strip i{flex:1 1 0;height:9px;border-radius:3px;background:var(--cream-deep)}
#result .sheet .strip i.on{background:var(--s-pass)}
#result .sheet .rd ul{list-style:none;margin:0;padding:0;font-size:13.5px;color:var(--s-ink2)}
#result .sheet .rd li{display:flex;gap:8px;align-items:flex-start;padding:3px 0}
#result .sheet .rd li b{flex:0 0 2.2em;font-size:12px;font-weight:700;letter-spacing:.02em;margin-top:2px}
#result .sheet .rd li b.y{color:var(--s-pass)}#result .sheet .rd li b.n{color:var(--s-fail)}
#result .sheet .rd .ask{font-size:13.5px;color:var(--s-muted);margin:8px 0 0}
#result .sheet .pv-grid{margin:12px 0 0}
#result .sheet .pv-notes{color:var(--s-ink2)}
#result .sheet .cov{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;align-items:center;list-style:none;margin:12px 0 0;padding:0}
#result .sheet .cov li{display:contents}
#result .sheet .cov li > span{padding:10px 0;border-top:1px solid var(--s-hair);font-size:15px;color:var(--s-ink2)}
#result .sheet .cov li > em{padding:10px 0;border-top:1px solid var(--s-hair);font-style:normal;font-size:13.5px;color:var(--s-muted);text-align:right;white-space:nowrap}
#result .sheet .cov li:first-child > span,#result .sheet .cov li:first-child > em{border-top:0}
#result .sheet .ev-appendix{margin:20px 36px 0}
#result .sheet .ev-appendix summary{color:var(--s-pass)}
#result .sheet .evt th,#result .sheet .evt td{border-color:var(--s-hair)}
#result .sheet .evt th{color:var(--s-muted)}
#result .sheet .evt td:nth-child(3){overflow-wrap:anywhere}
#result .sheet .note,#result .sheet .claims{background:#fff;border-color:var(--s-hair)}
#result .sheet .cta,#result .sheet .cta:hover{color:#04110d}

/* floating action bar (phones) */
.fab{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:50;
  display:none;align-items:center;gap:6px;padding:6px;border-radius:999px;width:auto;max-width:calc(100% - 24px);
  background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  border:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 var(--glass-hi),0 12px 32px rgba(0,0,0,.35)}
.fab.show{display:flex;flex-direction:column;align-items:stretch;gap:4px}
.fab[hidden]{display:none}
.fab-row{display:flex;align-items:center;justify-content:center;gap:6px}
.fab-note{margin:0;padding:6px 14px 2px;font-size:13px;line-height:1.35;color:var(--ink2);text-align:center}
.fab-note[hidden]{display:none}
.fab .btn{flex:0 1 auto;min-height:48px;font-size:15px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.fab .btn.secondary{flex:0 0 auto;color:var(--ink);background:rgba(255,255,255,.08);border-color:var(--glass-edge);gap:6px;padding:0 14px;white-space:nowrap}
.fab .btn.secondary svg{width:18px;height:18px;flex:0 0 auto}
.fab .btn.secondary[hidden]{display:none}
.fab .btn[disabled]{opacity:.7}
.fab .ico{flex:0 0 48px;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid var(--glass-edge);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font:inherit}
.fab .ico[hidden]{display:none}
.fab .ico svg{width:20px;height:20px}
@media(prefers-reduced-motion:no-preference){
  .fab{transition:opacity .25s var(--ease),transform .3s var(--ease)}
  @starting-style{.fab.show{opacity:0;transform:translate(-50%,10px)}}
}

/* marketing sections */
.two{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:start}
.five{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.five li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;color:var(--ink2)}
.five li b{color:var(--ink);display:block}
.five li svg{width:22px;height:22px;margin-top:2px;flex:0 0 auto;color:var(--green)}
.eye{background:var(--card);border:1px solid var(--hair);border-radius:22px;padding:18px;margin:0}
.eye svg{display:block;width:100%;height:auto}
.eye figcaption{font-size:13.5px;color:var(--grey);margin:10px 0 0}
.pipeline{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.pipeline li{padding:22px 24px 22px 0;border-top:2px solid var(--track);position:relative}
.pipeline li::before{content:"";position:absolute;top:-2px;left:0;width:48px;height:2px;background:var(--green)}
.pipeline .disc{font-size:13.5px;color:var(--green);font-weight:700;margin:0 0 6px}
.pipeline h3{margin:0 0 8px}
.pipeline p{color:var(--ink2);font-size:15.5px;margin:0}
.pattern{margin:26px 0 0;padding:16px 20px;border-left:3px solid var(--amber);background:var(--card);border-radius:0 12px 12px 0;color:var(--ink2);max-width:46em}
.offers{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:14px;margin:26px 0 0}
.offer{background:var(--card);border:1px solid var(--hair);border-radius:22px;padding:26px 28px}
.offer.lead{border-color:rgba(49,211,132,.45)}
.offer .price{font-size:30px;font-weight:600;letter-spacing:-.015em;margin:4px 0 2px}
.offer .per{font-size:14px;color:var(--grey);margin:0 0 12px}
.offer p{color:var(--ink2);font-size:15.5px}
.offer .row{gap:10px 16px}
.red{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px;max-width:46em}
.red li{padding:14px 18px;background:var(--card);border:1px solid var(--hair);border-radius:14px;color:var(--ink2)}
.red li b{color:var(--ink)}
footer{padding-bottom:calc(72px + env(safe-area-inset-bottom))}

@media(max-width:734px){
  section.hero{padding:28px 0 40px}
  .examples{margin-top:16px}
  .trust{gap:2px 16px;font-size:16px}
  #result .sheet{border-radius:22px;margin-left:-4px;margin-right:-4px}
  #result .sheet .sh,#result .sheet .verdict,#result .sheet .problems,#result .sheet .further,#result .sheet .cta-row.top,#result .sheet #pdf-status,#result .sheet .cta-row + .small,#result .sheet .ssec,#result .sheet .ev-appendix{margin-left:18px;margin-right:18px}
  #result .sheet .sh{padding:22px 0 0}
  #result .sheet .cta-row.top{display:none}
  #result .sheet .fix .steps{grid-template-columns:1fr}
  #result .sheet .readings{grid-template-columns:1fr}
  #result .sheet .verdict .cleared{columns:1}
  #result .sheet .cov{grid-template-columns:1fr}
  #result .sheet .cov li > em{text-align:left;padding-top:0;border-top:0;margin-top:-6px}
  .two{grid-template-columns:1fr;gap:28px}
  .pipeline{grid-template-columns:1fr}
  .pipeline li{padding:18px 0}
  .offers{grid-template-columns:1fr}
  footer{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}
@media(max-width:420px){
  #result .sheet .verdict{grid-template-columns:1fr;gap:8px}
  #result .sheet .verdict .w{grid-row:1}
  #result .sheet .verdict b{grid-column:1;grid-row:2}
  #result .sheet .verdict p,#result .sheet .verdict .cleared,#result .sheet .verdict .cov{grid-column:1}
  #result .sheet .verdict .w{justify-self:start}
  #result .sheet .prob .head{grid-template-columns:30px minmax(0,1fr)}
  #result .sheet .rank{width:30px;height:30px;font-size:14px}
}
@media print{nav.nav,.fab{display:none!important}#result .sheet{box-shadow:none}}

/* Independent HIG review, 6 Oct 2026: measured at 1440 px and corrected (W01, W03, W06, W10). */
.operator{max-width:36em}                       /* 87 characters a line at 66ch; 36em at 16 px is about 74 */
.narrow{max-width:35em}                         /* 77 characters at 36em; 35em is about 74 */
.pipeline li > p:not(.disc),.offer > p:not(.price):not(.per){font-size:16px}   /* reading text, 16 px floor */
.helper,.chip{font-size:16px}                   /* one size for the hero's secondary controls */
.check .field,.check .btn{font-size:17px}       /* the body size: four sizes in the hero view, not seven */
footer .brand{min-height:44px}                  /* a link is a target */
@media(min-width:1000px){.trust{gap:4px 16px}.trust span{white-space:nowrap}}   /* the four promises on one line */
@media(max-width:600px){.trust{display:block;text-align:center}.trust span{display:block}}   /* one promise per line on a phone */
.trust{max-width:none!important;margin:16px 0 0!important}   /* an earlier .trust rule capped it at 44em (704 px), which forced a second line */
.operator{max-width:35em}                                    /* 76 characters measured at 36em; 35em is 74 */

/* The verification card (6 Oct 2026): in flow and taking no space while the widget is idle;
   when Run is pressed it becomes a small fixed card over a dimmed page, the challenge runs in
   it, and it closes on the token. */
.ts-card{margin:0;outline:none;height:0;overflow:hidden;visibility:hidden}   /* closed: rendered, invisible, no space */
body.ts-open .ts-card{height:auto;overflow:visible;visibility:visible}
.ts-card .ts-title,.ts-card #ts-note{display:none}
body.ts-open::before{content:"";position:fixed;inset:0;background:rgba(2,10,7,.62);z-index:55}
body.ts-open .ts-card{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:60;width:min(calc(100% - 32px),400px);
  background:var(--card);border:1px solid var(--edge);border-radius:18px;padding:18px 20px 14px;box-shadow:0 30px 80px rgba(0,0,0,.5);text-align:center}
body.ts-open .ts-card .ts-title{display:block;font-size:19px;font-weight:600;margin:0 0 12px;letter-spacing:-.01em}
body.ts-open .ts-card #ts-note{display:block;margin:12px 0 0}
body.ts-open .ts-card .turnstile{margin:0;display:flex;justify-content:center}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){body.ts-open::before{background:rgba(2,10,7,.85)}}

/* #why as a split (6 Oct 2026, evening): statement left, copy right, stacked under 900 px.
   Long text stays left-aligned (U07); the block no longer sits at the left edge of the column. */
.split{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:20px 48px;align-items:start}
.split .kicker{margin-bottom:12px}
.split h2{max-width:none;margin-bottom:0}
.split .lede{margin:0 0 20px;max-width:none}
.split .narrow{max-width:none}
.split-body{max-width:32em}                     /* 77 characters measured at the full column; 32em at 17 px is about 74 */
@media(max-width:900px){.split{grid-template-columns:1fr;gap:12px}.split h2{margin-bottom:8px}}

/* ---- extension section, added 15 Oct 2026 ---- */

  .xwrap{display:grid;grid-template-columns:340px minmax(0,1fr);gap:26px 40px;align-items:start;margin:28px 0 14px}
  .xshot{width:100%;max-width:340px;border-radius:18px;border:1px solid var(--hair);
         box-shadow:0 26px 64px rgba(0,0,0,.55);display:block}
  .xshot-cap{margin:12px 2px 0;font-size:14px;color:var(--grey);line-height:1.4}
  .xperm{background:var(--card);border:1px solid var(--hair);border-radius:16px;overflow:hidden}
  .xperm-head{padding:19px 22px 15px;border-bottom:1px solid var(--hair)}
  .xperm-head h3{margin:0 0 5px;font-size:18px}
  .xperm-head p{margin:0;color:var(--grey);font-size:14px}
  .xperm table{width:100%;border-collapse:collapse;font-size:15.5px}
  .xperm td{padding:12px 22px;border-bottom:1px solid var(--hair);color:var(--ink2);vertical-align:top;line-height:1.42}
  .xperm tr:last-child td{border-bottom:0}
  .xperm td:first-child{color:var(--ink);width:37%;font-weight:600}
  .xperm .val-no{color:var(--green)}
  .xperm code{font-size:.93em;background:var(--field);padding:1px 5px;border-radius:5px}
  .xperm-foot{padding:18px 22px 20px;display:flex;flex-wrap:wrap;gap:13px;align-items:center;
              border-top:1px solid var(--hair);background:var(--field)}
  .xperm-foot .btn{padding:12px 22px;text-decoration:none}
  .xperm-foot p{margin:0;font-size:14.5px;color:var(--grey)}
  @media (max-width:860px){
    .xwrap{grid-template-columns:1fr}
    .xshot{margin:0 auto;max-width:300px}
    .xperm td:first-child{width:42%}
  }

/* Add to Chrome, beside the free check CTA. Secondary by design: the free check is the primary
   action and stays solid green. Shown only to desktop Chromium browsers by app.js, because the
   extension cannot be installed anywhere else and offering it there would be a dead button.
   The [hidden] rule is not redundant: .cta sets display:inline-flex, which beats the browser's
   own [hidden]{display:none} on specificity, so without this the button shows regardless. */
.cta-ext{background:transparent;color:var(--green);box-shadow:inset 0 0 0 1.5px var(--green)}
nav.nav a.cta-ext{color:var(--green)}
nav.nav a.cta-ext:hover{background:var(--green);color:#04110d}
.cta[hidden],.cta-ext[hidden]{display:none}

/* The header wrap is capped at 1040px, so a wider screen never buys room: adding a second button
   pushed "Run my free check" onto a second row. Measured at 1040: brand 109 + menu 677 + Chrome
   130 + check 154 + gaps = about 100px over. The menu carries 120px of pure gap, so the space is
   taken from there and from the link padding, and only when the Chrome button is actually shown.
   Anyone not on a Chromium desktop sees the header exactly as before. */
.nav.has-ext #nav-links{gap:10px}
.nav.has-ext #nav-links a{padding-left:9px;padding-right:9px}
.nav.has-ext .wrap{gap:12px}

/* ============ Coverage bar: the signature mark (edenlens-report-graphics §2.1) ============
   Forty segments, one per criterion, register order, equal widths: CSS grid, never flex, so the
   picture cannot lie about proportion. Five states, each carried by a word as well as a colour.
   Under 735px (Apple's small breakpoint) the bar reflows to four rows of ten, so every segment
   is at least 35px wide and meets the 24px target minimum (WCAG 2.5.8) with room to spare. */
.cov{--cov-card:#0e1a14;--cov-hair:rgba(214,232,223,.14);--cov-pass:#31d384;--cov-mixed:#f2b43c;
  --cov-fail:#ff6b60;--cov-counted:#3f7a5c;--cov-unread:#1c2b23;--cov-hatch:#2a4034;--cov-ink2:#b9cbc2;--cov-grey:#8aa196;
  background:var(--cov-card);border:1px solid var(--cov-hair);border-radius:18px;padding:24px 24px 20px;margin:28px 0;color:#f3f8f5}
.cov[hidden]{display:none}
.cov-eyebrow{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--cov-grey);font-weight:700;margin:0 0 8px}
.cov-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 18px;margin:0}
.cov-count{font-size:30px;font-weight:600;letter-spacing:-.02em;margin:0;line-height:1.1}
.cov-count b{font-weight:600}
.cov-sub{font-size:14.5px;color:var(--cov-ink2);margin:0;max-width:34rem}
.cov-bar{display:grid;grid-template-columns:repeat(40,1fr);gap:2px;margin:18px 0 10px;height:54px}
.cov .seg{min-width:0;height:100%;border-radius:2px;position:relative;cursor:pointer;border:0;padding:0;margin:0;
  background:var(--cov-unread);transition:transform .16s ease,box-shadow .16s ease}
.cov .seg:hover,.cov .seg:focus-visible{transform:translateY(-4px);box-shadow:0 6px 18px rgba(0,0,0,.45);outline:none}
.cov .seg:focus-visible,.cov .seg.is-current{box-shadow:0 0 0 2px #fff}
.cov .seg.pass{background:var(--cov-pass)}
.cov .seg.mixed{background:linear-gradient(180deg,var(--cov-mixed) 0 46%,var(--cov-card) 46% 58%,var(--cov-mixed) 58%)}  /* notch: readable without colour */
.cov .seg.fail{background:repeating-linear-gradient(135deg,var(--cov-fail),var(--cov-fail) 7px,#7a2a24 7px,#7a2a24 10px)}  /* broad stripe, unlike unread's fine hatch */
.cov .seg.counted{background:var(--cov-counted);box-shadow:inset 0 0 0 1px rgba(214,232,223,.18)}
.cov .seg.unread{background:repeating-linear-gradient(135deg,var(--cov-unread),var(--cov-unread) 3px,var(--cov-hatch) 3px,var(--cov-hatch) 6px);
  box-shadow:inset 0 0 0 1px rgba(214,232,223,.22)}
.cov .seg.gate::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-8px;width:5px;height:5px;border-radius:50%;background:var(--cov-ink2)}
.cov-legend{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13.5px;color:var(--cov-ink2);margin:18px 0 0;padding:0;list-style:none}
.cov-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:7px;vertical-align:-1px;background:var(--cov-unread)}
.cov-legend .lg-pass i{background:var(--cov-pass)}.cov-legend .lg-mixed i{background:linear-gradient(180deg,var(--cov-mixed) 0 46%,var(--cov-card) 46% 58%,var(--cov-mixed) 58%)}.cov-legend .lg-fail i{background:repeating-linear-gradient(135deg,var(--cov-fail),var(--cov-fail) 3px,#7a2a24 3px,#7a2a24 4.5px)}
.cov-legend .lg-counted i{background:var(--cov-counted);box-shadow:inset 0 0 0 1px rgba(214,232,223,.18)}
.cov-legend .lg-unread i{background:repeating-linear-gradient(135deg,var(--cov-unread),var(--cov-unread) 2px,var(--cov-hatch) 2px,var(--cov-hatch) 4px);box-shadow:inset 0 0 0 1px rgba(214,232,223,.22)}
.cov-legend .lg-gate i{width:5px;height:5px;border-radius:50%;background:var(--cov-ink2);margin:0 11px 0 4px;vertical-align:1px}
.cov-detail{margin-top:18px;padding-top:16px;border-top:1px solid var(--cov-hair);min-height:6.5em}
.cov-did{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--cov-grey);font-weight:700;margin:0 0 4px}
.cov-dt{font-size:19px;font-weight:600;letter-spacing:-.01em;margin:0 0 8px;line-height:1.25}
.cov-pill{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;padding:4px 12px;border-radius:999px;border:1px solid currentColor;margin:0 0 10px;color:var(--cov-ink2)}
.cov-pill i{width:7px;height:7px;border-radius:50%;background:currentColor}
.cov-pill.pass{color:var(--cov-pass)}.cov-pill.mixed{color:var(--cov-mixed)}.cov-pill.fail{color:var(--cov-fail)}
.cov-pill.counted{color:#8fd4b3}.cov-pill.unread{color:var(--cov-ink2)}
.cov-why{font-size:15px;line-height:1.5;color:#e4eee8;margin:0 0 6px;max-width:46rem}
.cov-ev{font-size:12.5px;color:var(--cov-grey);margin:0}
.cov-hero{margin:26px 0 22px}
@media(max-width:734px){
  .cov{padding:18px 16px 16px;border-radius:14px}
  .cov-count{font-size:26px}
  .cov-bar{grid-template-columns:repeat(10,1fr);grid-auto-rows:44px;height:auto;gap:3px 2px}
  .cov .seg.gate::after{bottom:-6px}
  .cov-detail{min-height:0}
}
/* A menu entry that exists only inside the collapsed Menu, never duplicating the header button. */
@media(min-width:721px){nav.nav li.menu-only{display:none}}

/* The header wrap is 1040px, so the two full-length buttons only fit at 1100px and up. Measured
   at 1024: 113px tall with the Chrome button, 57px without. Between the collapse point and 1100px
   both buttons use their short labels; the full name stays on the link for screen readers. */
@media(min-width:721px) and (max-width:1100px){
  .nav.has-ext .cta .long{display:none}
  .nav.has-ext .cta .short{display:inline}
}

/* "What you receive" figure on the Pro Review and order pages: what the money buys, at a glance.
   Product description, not data, so it carries no values. The guide tile is the emphasised one. */
.get{margin:26px 0 8px}
.get-head{font-size:15px;color:var(--ink2);margin:0 0 12px}
.prose .get-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.prose .get-list li{background:var(--card);border:1px solid var(--hair);border-radius:16px;padding:18px 18px 16px;margin:0}
.prose .get-list li.key{border-color:rgba(49,211,132,.6);background:#0e2419}
.get-list svg{width:28px;height:28px;color:var(--green);display:block;margin-bottom:10px}
.prose .get-list p{font-size:15px;color:var(--ink2);margin:0}
.prose .get-list p.get-t{font-size:16.5px;font-weight:600;color:var(--ink);margin:0 0 4px}
.get-tag{display:inline-block;font-size:12px;font-weight:600;color:#04110d;background:var(--green);border-radius:980px;padding:2px 9px;margin-left:4px;vertical-align:2px;white-space:nowrap}
@media(max-width:520px){.prose .get-list{grid-template-columns:1fr}}

/* Two journeys (the "what changed" figure) and the review process strip, 18 Oct 2026. Built in CSS,
   no image, so the text is read by crawlers and screen readers in the same order a reader sees it. */
.journeys{display:grid;gap:14px;margin:6px 0 10px;grid-column:1/-1}
.split .narrow.wide{grid-column:1/-1;max-width:40em}
.journey{border:1px solid var(--hair);border-radius:14px;padding:18px 20px;background:var(--card)}
.journey.dark{background:#0d2a1c;border-color:rgba(49,211,132,.35)}
.j-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 14px;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);font-weight:700}
.journey.dark .j-head{color:#9bd9b6}
.j-steps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.j-steps li{background:rgba(255,255,255,.06);border:1px solid var(--hair);border-radius:10px;padding:10px 16px;font-weight:600;font-size:15px;color:var(--ink)}
.j-steps li+li::before{content:"\2192";margin-right:8px;color:var(--grey);font-weight:400}
.journey.dark .j-steps li{background:#e8f5ec;color:#0b2a1b;border-color:transparent}
.journey.dark .j-steps li:nth-child(2){background:var(--green);color:#04110d}
.process{list-style:none;margin:24px 0 8px;padding:12px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;border:1px solid var(--hair);border-radius:12px;font-size:14.5px;font-weight:600}
.process li+li::before{content:"\2192";margin-right:10px;color:var(--green);font-weight:400}
.howto{list-style:none;margin:26px 0 24px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;text-align:left}
.howto li{border:1px solid var(--hair);border-radius:14px;padding:18px 20px;background:var(--card)}
.howto .disc{font-size:26px;font-weight:700;color:var(--green);margin:0 0 6px;line-height:1}
.howto h3{margin:0 0 6px;font-size:17px}
.howto p{margin:0;color:var(--ink2);font-size:15.5px}
@media(max-width:734px){.howto{grid-template-columns:1fr}.j-steps li{padding:8px 12px;font-size:14px}}

/* Alternating bands, 18 Oct 2026. Every second topic sits on a cream band and the page returns to the
   dark base for the next, so a reader can see where one subject ends and the next begins. The band
   re-maps the colour tokens inside it, so every component (cards, offers, pipeline, kicker, links,
   buttons) restyles itself without a second set of rules. Contrast on cream: ink 13.9:1, ink2 7.6:1,
   muted 5.0:1, link #0a5c38 7.4:1, green #087044 5.3:1. Images and the dark inset figures stay dark
   on purpose: they are the "machine's view" and read as a screen on a desk. */
section.band{background:var(--cream);color:var(--s-ink);border-top:0;
  --ink:var(--s-ink);--ink2:var(--s-ink2);--grey:var(--s-muted);--hair:var(--s-hair);--card:#ffffff;--panel:#ffffff;
  --field:#ffffff;--track:rgba(18,36,28,.16);--link:#0a5c38;--green:#087044;--green-bright:#0a8a52;--amber:#9b6700}
section.band+section{border-top:0}
section.band h2,section.band h3{color:var(--s-ink)}
section.band .btn{background:#087044;color:#fff}
section.band .btn.secondary{background:transparent;color:#087044;box-shadow:inset 0 0 0 1.5px #087044}
section.band .field{background:#fff;color:var(--s-ink);border:1px solid rgba(18,36,28,.25)}
section.band .field::placeholder{color:var(--s-muted)}
section.band .offer.lead{border-color:rgba(8,112,68,.55)}
section.band .pattern{background:#fff;border-left-color:#9b6700}
section.band .note{background:#fff}
section.band .pipeline li{border-top-color:var(--track)}
section.band .pipeline li::before{background:#087044}
section.band .j-steps li{background:#fff}
/* The "machine's view" figure keeps its dark screen inside a cream band: its SVG labels are light. */
section.band .eye{background:#0b1d16;border-color:rgba(161,197,178,.18)}
section.band .eye figcaption{color:#aebbb4}
/* Sectioned prose pages (method, compare): the section supplies the vertical rhythm, so the first
   heading in a section carries no extra top margin; the keyed card keeps its emphasis on cream. */
section > .wrap > h2:first-child,section > .prose > h2:first-child{margin-top:0}
section.band .get-list li.key{background:#e8f5ec;border-color:rgba(8,112,68,.6)}
/* FAQ: each question is its own full-width section so the bands alternate; the text column stays at
   44em inside it, and the rhythm is tighter than a topic section because the questions are short. */
section.qa{max-width:none;margin:0;padding:44px 0}
section.qa .wrap{max-width:46em}

/* On-site order form (18 Oct 2026) and the result sheet's decision panel. */
.order-fields{display:grid;gap:6px;margin:18px 0 8px;max-width:480px}
.order-fields .lbl{margin-top:10px}.order-fields .opt{font-weight:400;color:var(--grey)}
.order-form .status{min-height:1.4em;font-size:15px;margin:8px 0 0;color:var(--ink2)}.order-form .status.bad{color:var(--red)}
.order-form.sent .order-fields,.order-form.sent .js-only-block,.order-form.sent .buy-site,.order-form.sent .start,.order-form.sent .lbl{display:none}
.order-form.sent .status{font-size:17px;color:var(--ink);font-weight:600}
body:not(.js) .js-only-block{display:none}
#result .next{margin:26px 36px 0;padding:20px 22px;border:1px solid var(--s-hair);border-radius:16px;background:rgba(255,255,255,.55)}
#result .next h3{margin:0 0 12px;font-size:19px}
#result .next-rows{margin:0;display:grid;gap:12px}
#result .next-rows div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:4px 18px;padding-top:12px;border-top:1px solid var(--s-hair)}
#result .next-rows dt{font-weight:600;color:var(--s-ink)}
#result .next-rows dd{margin:0;color:var(--s-ink2);font-size:15.5px}
#result .next .small{margin:14px 0 0;color:var(--s-muted)}
@media(max-width:734px){#result .next{margin:22px 16px 0}#result .next-rows div{grid-template-columns:1fr}}

/* Fix library: a ledger of rows rather than a grid of equal tiles (18 Oct 2026). Title and tag on
   the left, the one-line reading and the link on the right, a hairline between rows. The order is
   the order to start in, hence the index. */
.fixlist{list-style:none;margin:22px 0 8px;padding:0}
.fixlist li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:6px 28px;padding:18px 0;border-top:1px solid var(--hair);align-items:start}
.fixlist li:last-child{border-bottom:1px solid var(--hair)}
.fx-t{font-size:18px;font-weight:600;line-height:1.3}
.fx-t a{color:var(--ink);text-decoration:none}.fx-t a:hover{text-decoration:underline}
.fx-n{display:inline-block;min-width:2.2em;color:var(--green);font-variant-numeric:tabular-nums;font-size:14px;font-weight:700;letter-spacing:.04em}
.fx-t .pill{margin-left:8px;vertical-align:middle}
.fx-d p{margin:0 0 6px;color:var(--ink2);font-size:16px}
.fx-go{font-size:15px;font-weight:600}
@media(max-width:734px){.fixlist li{grid-template-columns:1fr;gap:6px}.fx-n{min-width:2em}}

/* 19 Oct 2026: the first screen, simplified. One question, one sentence, the form, four promises;
   a real result beside it. Everything else moved below. */
section.hero .hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:36px 56px;align-items:center;text-align:left}
section.hero .hero-grid h1{margin-left:0;margin-right:0;max-width:11em}
section.hero .hero-grid .lede{margin:16px 0 24px}
section.hero .hero-grid .check{margin:28px 0 0}
section.hero .hero-grid .check-helpers{justify-content:flex-start}
section.hero .hero-grid .helper-status{text-align:left}
section.hero .hero-grid .trust{justify-content:flex-start}
.hero-proof{min-width:0}
.hero-proof .cov-hero{margin:0}
.hero-proof .examples{margin:16px 0 0}
.hero-proof .examples .chips{justify-content:flex-start;flex-wrap:wrap}
.hero-proof .chip{font-size:14.5px;min-height:40px}
section.hero .hero-grid+.wrap{text-align:left}
@media(max-width:900px){section.hero .hero-grid{grid-template-columns:1fr;gap:28px}}
@media(max-width:600px){section.hero .hero-grid .trust{display:block;text-align:left}}
/* three questions, as a ledger: the card grid is the one layout the owner said reads as a machine */
.three{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--hair)}
.three li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:8px 16px;padding:18px 0;border-bottom:1px solid var(--hair);align-items:start}
.three .n{font-size:15px;font-weight:700;color:var(--green);letter-spacing:.06em;padding-top:4px}
.three h3{margin:0;font-size:21px;line-height:1.3}
.three p{margin:6px 0 0;color:var(--ink2);font-size:16px;max-width:38em}
.three .tag{display:block;margin-top:6px;font-size:13.5px;color:var(--grey)}
.get{margin:36px 0 0;background:var(--card);border:1px solid var(--hair);border-radius:22px;padding:24px 28px}
.get h3{margin:0 0 12px;font-size:21px}
.get ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 28px}
.get li{position:relative;padding-left:18px;color:var(--ink2);font-size:16px;line-height:1.5}
.get li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--green)}
#who{padding-top:0}
@media(max-width:700px){.get ul{grid-template-columns:1fr}.three li{grid-template-columns:40px minmax(0,1fr)}}
.hero-proof .cov-why,.hero-proof .cov-ev{display:none}   /* the first screen shows the segment and its word; the reasoning lives in the full example and the result */

/* 19 Oct 2026: the three-line card and the before-and-after strip on the first screen */
.cov-three{margin:14px 0 0;display:grid;gap:12px}
.cov-three>div{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:4px 14px;align-items:start;padding-top:12px;border-top:1px solid var(--cov-hair)}
.cov-three dt{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--cov-grey);font-weight:700;padding-top:3px}
.cov-three dd{margin:0;font-size:15px;line-height:1.5;color:#e4eee8}
.cov-three dd b{color:#fff;font-weight:600}
.cov-three ul{margin:6px 0 0;padding:0;list-style:none}
.cov-three li{position:relative;padding-left:16px;color:#e4eee8}
.cov-three li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--cov-fail)}
.cov-open{font:inherit;font-size:15px;font-weight:600;color:var(--link);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.strip{margin:14px 0 0;padding:14px 18px 12px;background:var(--card);border:1px solid var(--hair);border-radius:16px}
.strip[hidden]{display:none}
.strip-row{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);gap:10px;align-items:center}
.s-lab{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);font-weight:700;margin:0 0 2px}
.s-n{font-size:17px;font-weight:600;margin:0;line-height:1.25;color:var(--ink)}
.s-sub{font-size:13px;color:var(--grey);margin:2px 0 0}
.s-arrow{width:28px;height:2px;background:var(--green);position:relative;justify-self:center}
.s-arrow::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left-color:var(--green);border-right:0}
.s-fixed{margin:10px 0 0;font-size:13.5px;color:var(--ink2);line-height:1.5}
.s-fixed span{white-space:nowrap}
.s-note{margin:6px 0 0;font-size:13.5px;color:var(--grey)}
@media(max-width:420px){.cov-three>div{grid-template-columns:1fr}.strip-row{grid-template-columns:1fr}.s-arrow{transform:rotate(90deg);margin:4px auto}}