/* FeedMender, feedmender.com
   Classic, quiet, document-like. Palette taken from the logo:
   gold #C1914A, green #0F9D58, lens blue #659EE9. */

:root{
  --paper:#faf9f7;
  --paper-2:#f3f1ec;
  --white:#ffffff;
  --ink:#1a1917;
  --ink-2:#4a4740;
  --muted:#78746b;
  --rule:#e0dbd1;
  --rule-2:#cfc8ba;

  --accent:#245ba6;
  --accent-soft:#659ee9;
  --gold:#c1914a;
  --green:#0f9d58;
  --green-ink:#0d7040;

  --blocked:#a8261c;
  --risk:#8a5c00;
  --under:#3f5772;
  --ok:var(--green-ink);

  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --wrap:1060px;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
/* every anchor target has to clear the sticky header, or the heading you
   clicked ends up behind it */
[id]{scroll-margin-top:106px}
@media (max-width:620px){ [id]{scroll-margin-top:88px} }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;margin:0}
p{margin:0}
/* tight horizontal padding so a comma after an inline code chip does not
   float away from it */
code{font-family:var(--mono);font-size:.86em;background:var(--paper-2);padding:.12em .18em;border-radius:2px;color:var(--ink-2);white-space:nowrap}
a{color:var(--accent)}

/* ── header ───────────────────────────────────────────── */
.site-head{border-bottom:1px solid var(--rule);background:rgba(250,249,247,.93);backdrop-filter:saturate(140%) blur(6px);position:sticky;top:0;z-index:20}
.head-inner{display:flex;align-items:center;justify-content:space-between;height:88px;gap:24px}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-family:var(--serif);font-size:24px;letter-spacing:-.01em}
.brand-mark{display:block;width:58px;height:51px;object-fit:contain;flex:none}
.site-nav{display:flex;align-items:center;gap:24px}
.site-nav a{color:var(--ink-2);text-decoration:none;font-size:15.5px}
.site-nav a:hover{color:var(--ink)}
.site-nav a.btn{color:var(--paper)}

/* ── buttons ──────────────────────────────────────────── */
.btn{
  display:inline-block;border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  font:inherit;font-size:15px;line-height:1;padding:11px 18px;border-radius:3px;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s;
}
.btn:hover{background:#000;border-color:#000}
.btn:disabled{cursor:not-allowed;opacity:.55}
.btn-sm{padding:10px 16px;font-size:15px}
.btn-lg{padding:14px 26px;font-size:16px}
.btn-quiet{background:transparent;color:var(--ink-2);border-color:var(--rule-2)}
.btn-quiet:hover{background:transparent;color:var(--ink);border-color:var(--ink)}

/* ── hero ─────────────────────────────────────────────── */
.hero{padding:70px 0 64px}
.hero-grid{display:grid;grid-template-columns:1.22fr .78fr;gap:44px;align-items:center}
.eyebrow{font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
h1{font-size:42px;line-height:1.14}
.lede{margin-top:22px;max-width:56ch;font-size:17.5px;color:var(--ink-2)}

.claims{list-style:none;margin:22px 0 0;padding:0}
.claims li{position:relative;padding-left:26px;font-size:15.5px;color:var(--ink-2);margin-top:7px}
.claims li::before{
  content:"✓";position:absolute;left:0;top:0;color:var(--green);
  font-size:14px;font-weight:700;line-height:1.62;
}

/* hero artwork */
.hero-art{margin:0}
.hero-art svg{display:block;width:100%;height:auto;max-width:460px;margin-left:auto}
.art-lbl{font-family:var(--sans);font-size:10.5px;letter-spacing:.12em;fill:var(--muted)}
.art-lbl-ok{fill:var(--green-ink)}
.art-k{font-family:var(--mono);font-size:11px;fill:var(--muted)}
.art-v{font-family:var(--sans);font-size:13px;fill:var(--ink)}
.art-bad{fill:var(--blocked)}
.art-quiet{fill:var(--muted)}
.art-dot-bad{fill:var(--blocked)}
.art-dot-warn{fill:#c8901f}
.art-tick{fill:none;stroke:var(--green-ink);stroke-width:1.8;stroke-linecap:square}
.art-dash{fill:none;stroke:var(--rule-2);stroke-width:1.8;stroke-linecap:square}
.art-tag{font-family:var(--mono);font-size:10.5px;fill:var(--blocked);letter-spacing:.06em}
.art-mid{font-family:var(--sans);font-size:11.5px;fill:var(--gold)}
.art-foot{font-family:var(--sans);font-size:11.5px;fill:var(--muted)}

/* ── dropzone ─────────────────────────────────────────── */
.stage{margin-top:44px;position:relative}
.dropzone{
  border:1px dashed var(--rule-2);border-radius:30px;background:var(--white);
  padding:48px 32px 26px;text-align:center;cursor:pointer;
  transition:border-color .15s,background .15s;
}
.dropzone:hover,.dropzone:focus-visible{border-color:var(--accent);outline:none}
.dropzone.is-over{border-color:var(--accent);border-style:solid;background:#f6f9fd}
.drop-icon{color:var(--rule-2);margin-bottom:10px}
.dropzone:hover .drop-icon,.dropzone.is-over .drop-icon{color:var(--accent)}
.drop-title{font-family:var(--serif);font-size:24px}
.drop-sub{margin-top:6px;font-size:14px;color:var(--muted);font-family:var(--mono);letter-spacing:.01em}
.drop-actions{margin-top:22px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.scan-consent{max-width:620px;margin:12px auto 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.scan-consent a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.scan-consent a:hover{color:var(--accent)}
/* Currency, country and language. Quiet by design: they carry defaults that
   most visitors never touch, and a loud form here would compete with the
   thing we actually want them to do. */
.drop-settings{
  margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:6px 10px;font-size:13.5px;color:var(--muted);
}
.drop-settings label{margin-left:8px}
.drop-settings label:first-child{margin-left:0}
.drop-settings select{
  font:inherit;font-size:13.5px;color:var(--ink-2);background:var(--white);
  border:1px solid var(--rule-2);border-radius:3px;padding:4px 6px;cursor:pointer;
}
.drop-settings select:hover{border-color:var(--ink-2)}
.drop-settings select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

.drop-msg{margin-top:18px;font-size:14.5px;color:var(--blocked);background:#fdf3f2;border:1px solid #f0d8d4;border-radius:3px;padding:9px 14px;display:inline-block}
.drop-note{margin-top:26px;font-size:12.5px;color:var(--muted);border-top:1px solid var(--rule);padding-top:14px}

/* ── scan panel ───────────────────────────────────────── */
.scan,.done{
  position:relative;
  background:var(--white);border:1px solid var(--rule-2);border-radius:30px;overflow:hidden;
  animation:rise .3s ease both;
}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.scan-head{display:flex;align-items:center;gap:12px;padding:18px 30px 16px;border-bottom:1px solid var(--rule)}
.pill{
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--gold);
  border:1px solid currentColor;border-radius:2px;padding:2px 7px;line-height:1.5;flex:none;
}
.scan-file{font-family:var(--mono);font-size:13px;color:var(--ink-2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scan-status{font-size:13.5px;color:var(--muted);flex:none;font-variant-numeric:tabular-nums}

.bar{height:2px;background:var(--rule)}
.bar-fill{display:block;height:2px;width:0;background:var(--accent-soft);transition:width .5s linear}

/* the mark wanders across the data while the scan runs, like a lens passing
   over the rows. Not a circle: the two axes run at different rates so the path
   never quite repeats itself. Two rules to delete if it gets in the way. */
.scan-lens{
  position:absolute;top:30%;left:6%;width:172px;height:151px;object-fit:contain;
  opacity:.14;pointer-events:none;
  animation:drift 13s ease-in-out infinite;
}
@keyframes drift{
  0%   {left:6%;  top:30%}
  18%  {left:28%; top:56%}
  35%  {left:52%; top:34%}
  52%  {left:76%; top:58%}
  68%  {left:88%; top:36%}
  82%  {left:56%; top:52%}
  92%  {left:24%; top:32%}
  100% {left:6%;  top:30%}
}

.scan-body{
  padding:16px 30px 24px;height:384px;overflow-y:auto;scrollbar-width:none;
  font-size:14.5px;line-height:1.55;
}
.scan-body::-webkit-scrollbar{display:none}

.step{display:flex;gap:11px;align-items:baseline;padding:5px 0}
.step-mark{flex:none;width:16px;text-align:center;color:var(--green-ink);font-size:13px;line-height:1.5}
.step-mark.busy{color:var(--accent-soft)}
.step-text{flex:1;min-width:0}
.step-text b{font-weight:600}
.step-note{color:var(--muted);font-size:13.5px}
.step-map{
  font-family:var(--mono);font-size:12.5px;color:var(--ink-2);background:var(--paper-2);
  border-radius:3px;padding:8px 11px;margin-top:7px;display:block;
  white-space:pre;overflow-x:auto;
}

.row{display:flex;gap:11px;align-items:baseline;padding:3px 0 3px 27px}
.dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--green);margin-top:.45em}
.dot.bad{background:var(--blocked)}
.dot.warn{background:#d9a12a}
.row-name{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52%}
.row-issue{color:var(--muted);font-size:13.5px;flex:1;min-width:0}
.row-issue code{background:none;padding:0;color:var(--ink-2)}
.more{padding:4px 0 8px 27px;color:var(--muted);font-size:13.5px}

/* ── result panel ─────────────────────────────────────── */
.done-head{display:flex;gap:14px;align-items:flex-start;padding:26px 30px 20px}
.done-tick{color:var(--green-ink);flex:none;line-height:0;margin-top:2px}
.done-head h3{font-size:21px;line-height:1.2}
.done-sub{margin-top:3px;font-size:14.5px;color:var(--muted)}
.done-stats{
  margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--rule);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.done-stats > div{background:var(--white);padding:15px 30px}
.done-stats dt{font-size:13px;color:var(--muted)}
.done-stats dd{margin:2px 0 0;font-family:var(--serif);font-size:23px;line-height:1.2;font-variant-numeric:tabular-nums}
.done-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:20px 30px 24px}
.done-note{font-size:13.5px;color:var(--muted);flex:1;min-width:220px}
.checkout-country{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted)}
.checkout-country select{font:inherit;color:var(--ink);background:var(--white);border:1px solid var(--rule-2);border-radius:3px;padding:9px 28px 9px 10px}
.checkout-message{width:100%;font-size:13.5px;color:var(--muted)}
.order-page{min-height:calc(100vh - 89px);display:grid;place-items:start center;padding:72px 20px;background:var(--paper)}
.order-card{width:min(680px,100%);background:var(--white);border:1px solid var(--rule);padding:34px}
.order-card h1{font-size:32px;margin:4px 0 10px}
.order-progress{margin:28px 0;height:5px}
.order-progress .bar-fill{width:10%;transition:width .25s ease}
.order-bar-error{background:#b4342a}
.order-downloads{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 24px}
.stage-note{margin-top:14px;font-size:13.5px;color:var(--muted)}

/* ── findings ─────────────────────────────────────────── */
section{border-top:1px solid var(--rule)}
.hero{border-top:0}
.findings,.how,.checks,.limits,.pricing,.install,.faq{padding:66px 0}
.sec-head{max-width:66ch}
.sec-head h2{font-size:31px;line-height:1.2}
.sec-sub{margin-top:10px;color:var(--ink-2);font-size:16.5px}

.demo-note{
  margin-top:30px;font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gold);
}
.tally{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:10px}
.tally-item{background:var(--paper);padding:18px 20px}
.tally-num{display:block;font-family:var(--serif);font-size:29px;line-height:1.1;font-variant-numeric:tabular-nums}
.tally-label{display:block;font-size:13px;color:var(--muted);margin-top:4px}

.cards{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.card{background:var(--paper);padding:17px 20px 18px;display:flex;gap:16px;align-items:flex-start;opacity:0;transform:translateY(14px)}
.card.in{animation:slide .5s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes slide{to{opacity:1;transform:none}}
.card-n{font-family:var(--serif);font-size:22px;line-height:1.25;font-variant-numeric:tabular-nums;min-width:3.4ch;text-align:right;color:var(--ink)}
.card-body{flex:1;min-width:0;display:block}
.card-title{display:block;font-size:15.5px;font-weight:600;line-height:1.4}
.card-title code{background:none;padding:0;font-size:.94em;color:inherit}
.card-act{display:block;font-size:14px;color:var(--muted);margin-top:3px}
.card-act code{background:none;padding:0;color:var(--ink-2)}
.chip{display:inline-block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;padding:2px 7px;border-radius:2px;border:1px solid currentColor;margin-bottom:7px;line-height:1.5}
.chip.blocked{color:var(--blocked)}
.chip.risk{color:var(--risk)}
.chip.under{color:var(--under)}
.chip.repaired{color:var(--ok)}
.cards-foot{margin-top:16px;font-size:13.5px;color:var(--muted)}

/* ── how ──────────────────────────────────────────────── */
.steps{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.steps li{border-top:2px solid var(--ink);padding-top:16px}
.step-n{display:block;font-family:var(--mono);font-size:12px;color:var(--muted);margin-bottom:8px}
.steps h3{font-size:19px;line-height:1.3}
.steps p{margin-top:9px;font-size:15.5px;color:var(--ink-2)}
.honesty{margin-top:40px;border-left:2px solid var(--gold);padding:2px 0 2px 20px;max-width:78ch}
.honesty p{font-size:15.5px;color:var(--ink-2)}
.honesty p + p{margin-top:14px}

/* ── checks ───────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:34px}
.check{background:var(--paper);padding:20px}
.check h3{font-size:16.5px;line-height:1.3}
.check p{margin-top:8px;font-size:14.5px;color:var(--ink-2)}

/* ── limits ───────────────────────────────────────────── */
.limits{background:var(--paper-2)}
.limit-list{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:22px 40px;max-width:900px}
.limit-list li{font-size:15.5px;color:var(--ink-2);border-top:1px solid var(--rule-2);padding-top:12px}
.limit-list strong{color:var(--ink);font-weight:600}

/* ── pricing ──────────────────────────────────────────── */
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:34px}
.tier{background:var(--paper);padding:22px 20px;display:flex;flex-direction:column;gap:10px}
.tier-size{font-size:14px;color:var(--muted)}
.tier-price{font-family:var(--serif);font-size:34px;line-height:1}
.tier-note{margin-top:16px;font-size:14.5px;color:var(--ink-2);max-width:70ch}
.tier-cta{margin-top:28px}

/* ── installing ───────────────────────────────────────── */
.install{background:var(--paper-2)}
.install-list{list-style:none;margin:14px 0 0;padding:0;max-width:76ch}
.install-list li{
  display:flex;gap:18px;align-items:flex-start;
  border-top:1px solid var(--rule-2);padding-top:16px;margin-top:16px;
}
.install-n{
  font-family:var(--mono);font-size:12.5px;color:var(--gold);flex:none;
  width:2ch;text-align:right;line-height:1.75;font-variant-numeric:tabular-nums;
}
.install-list h4{margin:0;font-family:var(--sans);font-size:16px;font-weight:600;line-height:1.4}
.install-list p{margin-top:5px;font-size:15.5px;color:var(--ink-2)}
.install-list em{font-style:normal;font-weight:600;color:var(--ink)}

/* ── faq ──────────────────────────────────────────────── */
/* Thirteen questions in one run is a wall. Two groups: what you want to know
   before handing over a file, and what you want to know once you have a result. */
.qa-head{
  font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold);margin:44px 0 0;max-width:78ch;
}
.qa-head:first-of-type{margin-top:30px}
.qa{margin:14px 0 0;max-width:78ch}
.qa dt{font-weight:600;font-size:16px;border-top:1px solid var(--rule);padding-top:16px}
.qa dd{margin:5px 0 20px;color:var(--ink-2);font-size:15.5px}
/* one answer runs to three paragraphs; the rest are a single one */
.qa dd p{margin:0}
.qa dd p + p{margin-top:11px}

/* ── footer ───────────────────────────────────────────── */
.site-foot{border-top:1px solid var(--rule);padding:28px 0;font-size:13.5px;color:var(--muted)}
.foot-inner{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.foot-brand{display:flex;align-items:center;gap:10px;color:var(--muted);text-decoration:none}
.foot-brand:hover{color:var(--ink)}
.foot-brand img{display:block;width:58px;height:51px;object-fit:contain}
.foot-links{display:flex;gap:20px}
.foot-links a{color:var(--muted);text-decoration:none}
.foot-links a:hover{color:var(--ink)}

/* ── responsive ───────────────────────────────────────── */
@media (max-width:900px){
  /* four link labels plus a button do not fit without wrapping, and a wrapped
     nav reads worse than no nav */
  .site-nav a:not(.btn){display:none}
  h1{font-size:38px;max-width:none}
  .hero-grid{grid-template-columns:1fr;gap:38px}
  .hero-art svg{max-width:440px;margin:0}
  .grid,.tiers{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr;gap:26px}
  .tally{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr}
  .limit-list{grid-template-columns:1fr}
  .done-stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .site-nav a:not(.btn){display:none}
  .hero{padding:52px 0 44px}
  h1{font-size:31px;max-width:none}
  .lede{font-size:16.5px}
  .grid,.tiers,.tally{grid-template-columns:1fr}
  .dropzone{padding:34px 18px 20px}
  .drop-title{font-size:20px}
  .drop-sub{font-size:12.5px}
  .drop-actions{margin-top:18px}
  .head-inner{height:72px}
  .brand{font-size:20px;gap:9px}
  .brand-mark{width:44px;height:39px}
  .dropzone,.scan,.done{border-radius:20px}
  .scan-body{height:340px;font-size:13.5px;padding:14px 18px 18px}
  .scan-head{padding:14px 18px}
  .scan-file{display:none}
  .step-map{font-size:11.5px}
  .done-head,.done-foot{padding-left:20px;padding-right:20px}
  .done-stats > div{padding-left:20px;padding-right:20px}
  .real-groups{padding:0 20px}
  /* one pair per row, otherwise a label ends up on the line above the select
     it belongs to */
  .drop-settings{
    display:grid;grid-template-columns:auto auto;justify-content:center;
    align-items:center;gap:8px 10px;font-size:13px;
  }
  .drop-settings label{margin-left:0;text-align:right}
  .row-name{max-width:100%}
  .row{flex-wrap:wrap;padding-left:19px}
  .done-stats{grid-template-columns:1fr}
  .findings,.how,.checks,.limits,.pricing,.install,.faq{padding:48px 0}
  .sec-head h2{font-size:26px}
}

/* under 400px the header cannot hold the brand and a button side by side,
   and the upload frame is a thumb-length below anyway */
@media (max-width:400px){
  .site-nav a.btn{display:none}
  .head-inner{height:64px}
  .brand{font-size:19px}
  .brand-mark{width:40px;height:35px}
  .foot-inner{flex-direction:column;align-items:flex-start;gap:14px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ── link-styled button ───────────────────────────────────────────────
   The demo is now a secondary path rather than the only one, so it needs
   to read as a link inside a sentence instead of competing with the real
   upload button. */
.linky{
  background:none;border:0;padding:0;font:inherit;color:inherit;
  text-decoration:underline;text-underline-offset:2px;cursor:pointer;
}
.linky:hover{opacity:.7}

/* ── the delete-my-file control ───────────────────────────────────────
   Deliberately quiet but always present. A merchant who wants their file
   gone should not have to hunt for it or take our word for the six hours. */
.forget{
  background:none;border:0;padding:0;font:inherit;color:inherit;
  text-decoration:underline;text-underline-offset:2px;cursor:pointer;opacity:.65;
}
.forget:hover{opacity:1}
.forget[disabled]{text-decoration:none;cursor:default;opacity:.5}

/* ── real findings ────────────────────────────────────────────────────
   Replaces nothing; this is new. The demo never had per-group output
   because it never had a scan behind it. */
/* The card is inset 30px everywhere else and has a 30px radius, so groups
   flush against the edge collide with the corner. Empty on the demo, hence
   the :empty rule rather than a fixed gap. */
.real-groups{padding:0 30px}
.real-groups:not(:empty){padding-top:22px}
.rg{border:1px solid var(--rule,#dcdcd8);border-radius:2px;margin:0 0 10px;background:#fff}
.rg-head{display:flex;gap:12px;align-items:baseline;padding:12px 14px;cursor:pointer}
.rg-head:hover{background:#fafaf8}
.rg-label{font-weight:600;flex:1}
.rg-count{font-variant-numeric:tabular-nums;opacity:.75;font-size:.92em}
/* One badge per severity present, worst first. They wrap on a narrow
   screen rather than squeezing the group name. */
.rg-sevs{display:flex;flex-wrap:wrap;gap:5px;flex:0 0 auto;max-width:52%}
.rg-sev{font-size:.72em;letter-spacing:.06em;text-transform:uppercase;
        padding:2px 7px;border:1px solid currentColor;border-radius:2px;
        white-space:nowrap;font-variant-numeric:tabular-nums}
.rg-sev.error{color:#a1231b}.rg-sev.warning{color:#8a5a00}.rg-sev.quality{color:#4a4a4a}
.rg-sev.note{color:#6b6b6b}
.rg-body{padding:0 14px 12px;display:none}
.rg.is-open .rg-body{display:block}
.rg-action{margin:0 0 10px;opacity:.8;font-size:.94em}
.rg-issue{display:grid;grid-template-columns:1fr auto;gap:4px 14px;
          padding:8px 0;border-top:1px solid var(--rule,#ececea)}
.rg-issue-msg{font-size:.94em}
.rg-issue-n{font-variant-numeric:tabular-nums;opacity:.7;font-size:.9em;white-space:nowrap}
.rg-issue-eg{grid-column:1/-1;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
             font-size:.82em;opacity:.6;overflow-wrap:anywhere}
.scan-err{padding:14px;border:1px solid #a1231b;border-radius:2px;color:#a1231b}

/* The result card when the scan did not happen. */
.done-tick.bad { color: #b4342a; }

/* ══════════════════════════════════════════════════════════════════════
   Standalone pages (added when the single page was split into many).
   Everything above this line belongs to the home page and is unchanged.
   These rules style the content pages: how-it-works, what-we-check, the
   error pages, checks, pricing, install, about, privacy, terms.
   ══════════════════════════════════════════════════════════════════════ */

/* ── page hero, quieter than the home page hero ───────────────────────── */
.page-hero{padding:56px 0 40px}
.page-hero .eyebrow{margin-bottom:16px}
.page-hero h1{font-size:36px;line-height:1.16;max-width:20ch}
.page-hero .lede{margin-top:20px;max-width:64ch}
@media (max-width:620px){ .page-hero{padding:40px 0 30px} .page-hero h1{font-size:28px} }

/* breadcrumb above a page title */
.crumb{font-size:13px;color:var(--muted);margin-bottom:18px}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--ink)}
.crumb span{color:var(--rule-2);margin:0 7px}

/* ── prose, the reading column on the content pages ───────────────────── */
.prose{max-width:74ch}
.prose > * + *{margin-top:16px}
.prose h2{font-size:25px;line-height:1.22;margin-top:42px}
.prose h3{font-size:19px;line-height:1.3;margin-top:30px}
.prose h2 + p, .prose h3 + p{margin-top:10px}
.prose p{color:var(--ink-2)}
.prose ul,.prose ol{margin-top:12px;padding-left:22px;color:var(--ink-2)}
.prose li{margin-top:7px}
.prose li > strong{color:var(--ink)}
.prose a{text-underline-offset:2px}
.prose .lead-in{color:var(--ink);font-weight:600}
.section-lead{font-size:18px;color:var(--ink-2);max-width:70ch}

/* a labelled definition run, reused from the home page faq styling but
   available on any page */
.deflist{margin:16px 0 0;max-width:74ch}
.deflist dt{font-weight:600;font-size:16px;border-top:1px solid var(--rule);padding-top:16px}
.deflist dd{margin:5px 0 20px;color:var(--ink-2)}
.deflist dd p + p{margin-top:11px}

/* ── a callout box, used for the legal-review notice and short asides ─── */
.callout{
  border:1px solid var(--rule-2);border-left:3px solid var(--gold);
  background:var(--white);border-radius:3px;padding:16px 20px;margin-top:22px;
  font-size:15px;color:var(--ink-2);max-width:74ch;
}
.callout strong{color:var(--ink)}
.callout.warn{border-left-color:var(--blocked)}

/* ── the four error pages: a fixed run of labelled blocks ─────────────── */
.err-block{border-top:1px solid var(--rule);padding-top:22px;margin-top:34px;max-width:76ch}
.err-block h2{font-size:22px;line-height:1.25}
.err-block .err-kicker{
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);margin-bottom:9px;
}
.err-block p{margin-top:12px;color:var(--ink-2)}
.err-block ul{margin-top:12px;padding-left:22px;color:var(--ink-2)}
.err-block li{margin-top:7px}

/* the list of checks that bear on an error page, pulled from our own codes */
.applies{list-style:none;margin:14px 0 0;padding:0;display:grid;
  grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.applies li{background:var(--paper);padding:12px 15px;font-size:14px}
.applies code{background:none;padding:0;color:var(--ink);white-space:normal}
.applies .applies-sev{display:block;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-top:3px}
@media (max-width:620px){ .applies{grid-template-columns:1fr} }

/* ── checks.html, the generated table ─────────────────────────────────── */
.checks-count{font-size:16px;color:var(--ink-2);max-width:74ch;margin-bottom:8px}
.ck-group{border-top:0;margin-top:40px}
.ck-group h2{font-size:22px;display:flex;align-items:baseline;gap:12px}
.ck-n{font-family:var(--mono);font-size:13px;color:var(--muted);font-weight:400}
.ck-action{margin-top:8px;color:var(--ink-2);font-size:15px;max-width:74ch}
.ck-table-wrap{overflow-x:auto;margin-top:16px}
.ck-table{width:100%;border-collapse:collapse;font-size:14px}
.ck-table th{text-align:left;font-family:var(--sans);font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  font-weight:600;padding:8px 12px;border-bottom:1px solid var(--rule-2)}
.ck-table td{padding:8px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
.ck-code code,.ck-attr code{background:none;padding:0;white-space:normal;overflow-wrap:anywhere}
.ck-code code{color:var(--ink)}
.ck-attr code{color:var(--ink-2)}
.ck-sev{white-space:nowrap}
.ck-sev .chip{margin-bottom:0}

/* ── expanded footer, several columns of links ────────────────────────── */
.site-foot-full{border-top:1px solid var(--rule);background:var(--paper-2)}
.foot-cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px;padding:44px 0 20px}
.foot-col h4{font-family:var(--sans);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 12px}
.foot-col a{display:block;color:var(--ink-2);text-decoration:none;font-size:14.5px;margin-top:8px}
.foot-col a:first-of-type{margin-top:0}
.foot-col a:hover{color:var(--ink)}
.foot-about{font-size:14px;color:var(--muted);max-width:34ch}
.foot-about .foot-brand{margin-bottom:12px;color:var(--ink);font-family:var(--serif);font-size:20px}
.foot-about .foot-brand img{width:44px;height:39px}
.foot-legal{border-top:1px solid var(--rule);padding:16px 0 26px;font-size:13px;
  color:var(--muted);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-legal-links a{color:var(--muted);text-decoration:none;margin-left:16px}
.foot-legal-links a:first-child{margin-left:0}
.foot-legal-links a:hover{color:var(--ink)}
@media (max-width:480px){ .foot-legal-links a{margin-left:0;margin-right:14px} }
@media (max-width:820px){ .foot-cols{grid-template-columns:1fr 1fr;gap:28px} }
@media (max-width:480px){ .foot-cols{grid-template-columns:1fr} }

/* pages whose body is mostly reading benefit from a little more air at the
   foot of the last section before the footer */
.page-main{padding-bottom:56px}

/* ── cookie consent ────────────────────────────────────────────────────
   Injected by cookie-consent.js. Modelled on the marketinkx.com banner,
   restyled in this site's own idiom: paper, ink, one gold accent. */
.fm-consent,.fm-consent *{box-sizing:border-box}
.fm-consent{font-family:var(--sans);color:var(--ink)}
.fm-consent[hidden]{display:none!important}
.fm-consent [hidden]{display:none!important}
.fm-consent a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.fm-consent-banner{position:fixed;z-index:999999;left:50%;bottom:18px;transform:translateX(-50%);
  width:min(1060px,calc(100% - 32px));background:var(--white);border:1px solid var(--rule-2);
  border-radius:14px;box-shadow:0 18px 60px rgba(26,25,23,.16);padding:20px 22px}
.fm-consent-banner__inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center}
.fm-consent-title{font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.2;margin:0 0 6px}
.fm-consent-copy{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin:0;max-width:640px}
.fm-consent-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.fm-consent-button{appearance:none;border:1px solid var(--ink);background:var(--white);color:var(--ink);
  border-radius:3px;min-height:42px;padding:0 16px;font:600 13.5px/1 var(--sans);cursor:pointer;
  transition:background .15s,color .15s,border-color .15s}
.fm-consent-button:hover{border-color:#000}
.fm-consent-button--primary{background:var(--ink);color:var(--paper)}
.fm-consent-button--primary:hover{background:#000}
.fm-consent-button--quiet{border-color:transparent;padding-inline:8px;color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.fm-consent-button:focus-visible,.fm-consent-close:focus-visible,
.fm-consent-switch input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.fm-consent-backdrop{position:fixed;z-index:1000000;inset:0;background:rgba(26,25,23,.45);
  display:grid;place-items:center;padding:20px}
.fm-consent-dialog{position:relative;width:min(560px,100%);max-height:min(720px,calc(100vh - 40px));
  overflow:auto;background:var(--white);border-radius:14px;box-shadow:0 24px 80px rgba(26,25,23,.28);padding:28px}
.fm-consent-dialog h2{font-family:var(--serif);font-size:24px;font-weight:600;line-height:1.15;margin:0 42px 8px 0}
.fm-consent-dialog>p{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0 0 20px}
.fm-consent-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border:1px solid var(--rule-2);
  border-radius:50%;background:var(--white);color:var(--ink);font-size:19px;line-height:1;cursor:pointer}
.fm-consent-close:hover{border-color:var(--ink)}
.fm-consent-option{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;
  padding:16px 0;border-top:1px solid var(--rule)}
.fm-consent-option h3{font-family:var(--sans);font-size:15px;font-weight:600;line-height:1.3;margin:0 0 4px}
.fm-consent-option p{font-size:13px;line-height:1.55;color:var(--ink-2);margin:0}
.fm-consent-switch{position:relative;display:block;width:48px;height:28px;flex:none}
.fm-consent-switch input{position:absolute;opacity:0;pointer-events:none}
.fm-consent-switch span{position:absolute;inset:0;border-radius:999px;background:var(--rule-2);cursor:pointer;transition:background .15s}
.fm-consent-switch span::after{content:'';position:absolute;width:22px;height:22px;top:3px;left:3px;
  border-radius:50%;background:var(--white);box-shadow:0 2px 7px rgba(0,0,0,.2);transition:transform .15s}
.fm-consent-switch input:checked+span{background:var(--green-ink)}
.fm-consent-switch input:checked+span::after{transform:translateX(20px)}
.fm-consent-switch input:disabled+span{opacity:.55;cursor:not-allowed}
.fm-consent-dialog__actions{display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap;
  padding-top:20px;border-top:1px solid var(--rule)}
.fm-consent-status{font-size:12.5px;color:var(--muted);margin-right:auto;align-self:center}
@media (max-width:900px){
  .fm-consent-banner__inner{grid-template-columns:1fr}
  .fm-consent-actions{justify-content:flex-start}
}
@media (max-width:620px){
  .fm-consent-banner{bottom:10px;width:calc(100% - 20px);padding:18px}
  .fm-consent-banner__inner{gap:14px}
  .fm-consent-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .fm-consent-button{width:100%}
  .fm-consent-button--quiet{grid-column:1/-1;min-height:36px}
  .fm-consent-dialog{padding:24px 20px}
  .fm-consent-dialog__actions{display:grid;grid-template-columns:1fr}
  .fm-consent-status{margin:0 0 3px}
}
@media (prefers-reduced-motion:reduce){
  .fm-consent-button,.fm-consent-switch span,.fm-consent-switch span::after{transition:none}
}

/* ── errors hub ────────────────────────────────────────────────────────
   The list on /errors/: one row per error message, label right. */
.err-cta{margin-top:22px}
.hub-list{list-style:none;margin:14px 0 0;padding:0}
.hub-list li{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:10px 0;border-top:1px solid var(--rule)}
.hub-list li:first-child{border-top:0}
.hub-list li a{font-weight:600}
.hub-list li span{color:var(--muted);font-size:13px;white-space:nowrap}
@media (max-width:560px){
  .hub-list li{flex-direction:column;gap:2px}
}


/* ── mobile menu ──────────────────────────────────────────
   The header links vanish under 900px; this is how they come back. The
   hamburger, the drawer and the overlay are created by nav.js from the links
   already in the header, so there is no menu markup to keep in step per page.
   The drawer slides in from the right over a dimmed page. */
.nav-toggle{
  display:none;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
  background:none;border:0;padding:12px 10px;cursor:pointer;
}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px}
.nav-overlay{
  position:fixed;inset:0;z-index:30;background:rgba(26,24,21,.35);
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
}
.nav-overlay.is-open{opacity:1;visibility:visible}
.site-menu{
  position:fixed;top:0;right:0;bottom:0;z-index:31;
  width:min(78vw,320px);overflow-y:auto;
  background:var(--paper);border-left:1px solid var(--rule-2);
  box-shadow:-12px 0 40px rgba(26,24,21,.12);
  padding:10px 0 24px;
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.site-menu.is-open{transform:translateX(0)}
.menu-close{
  display:block;margin:6px 14px 10px auto;
  font:inherit;font-size:26px;line-height:1;color:var(--ink-2);
  background:none;border:0;padding:6px 10px;cursor:pointer;
}
.menu-close:hover{color:var(--ink)}
.site-menu a{
  display:block;padding:12px 28px;color:var(--ink);text-decoration:none;
  font-size:16.5px;border-top:1px solid var(--rule);
}
.menu-close+a{border-top:0}
.site-menu a:hover{color:var(--accent)}
.site-menu a.btn{display:inline-block;margin:14px 28px 0;padding:11px 18px;color:var(--paper);border-top:0}
/* language dropdown at the foot of the drawer, built by nav.js: a closed
   row showing the current language, a caret on the right, and the other
   language unfolding underneath */
.menu-lang{margin-top:18px;border-top:1px solid var(--rule-2)}
.menu-lang-toggle{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:12px 28px;font:inherit;font-size:16.5px;line-height:1.62;
  color:var(--ink);background:none;border:0;cursor:pointer;text-align:left;
}
.menu-lang-toggle:hover{color:var(--accent)}
.menu-lang-caret{width:12px;height:8px;flex:none;margin-left:auto;color:var(--ink-2);transition:transform .2s}
.menu-lang-toggle:hover .menu-lang-caret{color:var(--accent)}
.menu-lang-toggle.is-open .menu-lang-caret{transform:rotate(180deg)}
.site-menu .menu-lang-row{
  display:flex;align-items:center;gap:11px;
  padding:12px 28px;font-size:16.5px;color:var(--ink);text-decoration:none;
  border-top:1px solid var(--rule);
}
.site-menu a.menu-lang-row:hover{color:var(--accent)}
.menu-lang-flag{
  width:21px;height:15px;flex:none;border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(26,24,21,.14);
}
/* desktop language dropdown at the far right of the header, built by
   nav.js from the same switcher link: flag + language code + caret */
.lang-dd{position:relative}
.lang-dd-toggle{
  display:flex;align-items:center;gap:8px;padding:6px 2px;
  font:inherit;font-size:14.5px;color:var(--ink-2);
  background:none;border:0;cursor:pointer;
}
.lang-dd-toggle:hover{color:var(--ink)}
.lang-dd-toggle .menu-lang-caret{margin-left:0}
.lang-dd-toggle.is-open .menu-lang-caret{transform:rotate(180deg)}
.lang-dd-list{
  position:absolute;top:calc(100% + 10px);right:0;z-index:25;
  background:var(--white);border:1px solid var(--rule-2);border-radius:3px;
  box-shadow:0 10px 30px rgba(26,24,21,.1);
  padding:4px 0;
}
.site-nav .lang-dd-list a{
  display:flex;align-items:center;gap:8px;padding:8px 14px;
  font-size:14.5px;color:var(--ink);text-decoration:none;white-space:nowrap;
}
.site-nav .lang-dd-list a:hover{color:var(--accent)}
html.menu-open{overflow:hidden}
@media (max-width:900px){
  .nav-toggle{display:inline-flex}
  .lang-dd{display:none}
}
@media (min-width:901px){
  .site-menu,.nav-overlay{display:none}
}
@media (max-width:620px){
  .site-menu a{padding:12px 20px}
  .site-menu a.btn{margin:14px 20px 0}
  .site-menu .menu-lang-row,.menu-lang-toggle{padding:12px 20px}
}
@media (prefers-reduced-motion:reduce){
  .site-menu,.nav-overlay,.menu-lang-caret{transition:none}
}