/* Second Lens — v2
   Palette and type are deliberately narrow: one ink, one red, one grey.

   --ink and --red are the two colours on the brand sheet and they are what the
   logo is drawn in. The brand red is bright, which is right for a mark and
   wrong for small text: white on #E63946 is only 4.17:1, under the 4.5:1 that
   body-sized text needs. So the red exists three times over.

     --red          the brand red. Logo, and display type 19px and up, where
                    the 3:1 large-text threshold applies and it clears it.
     --red-ui       darkened, for button fills and small red text.
                    4.91:1 on white.
     --red-on-ink   lightened, for small red text on --ink. 4.52:1.

   Do not use --red for anything small. Do not add a fourth. */

:root{
  --ink:#0D1B2A;
  --black:var(--ink);        /* retained: existing rules still say --black */
  --red:#E63946;
  --red-ui:#DD1C2A;
  --red-on-ink:#E84753;
  --grey:#6E7076;
  --hair:#DCDCDE;
  --white:#FFFFFF;
  --wrap:1060px;
  --pad:30px;
}

/* Fonts are self-hosted, see assets/fonts/LICENCE.txt for why and under what
   licence. Latin subset only, which covers every character on the site.
   Inter's latin file is variable, so one file serves 400, 500 and 600. */
@font-face{
  font-family:'Archivo Black';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(/assets/fonts/archivo-black-latin.woff2) format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(/assets/fonts/inter-latin.woff2) format('woff2');
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--white);
  color:var(--black);
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%}
a{color:var(--black)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}

.skip{position:absolute;left:-9999px;top:0;background:var(--black);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:0}
/* The header is sticky, so jumping to an anchor parks the target underneath
   it. Clear it, or the skip link lands on content hidden behind the header. */
#main,:target{scroll-margin-top:100px}
@media(max-width:760px){#main,:target{scroll-margin-top:86px}}

:focus-visible{outline:3px solid var(--red);outline-offset:2px}

/* ---------- header ---------- */
.site-head{border-bottom:2px solid var(--black);position:sticky;top:0;background:var(--white);z-index:100}
/* The header's inner div carries .wrap and .head-in. Both are single-class
   selectors, so whichever comes later wins the padding shorthand: a bare
   `padding:16px 0` here silently wiped .wrap's side padding and left the
   logo and nav 30px outboard of every other element on the page. Keep
   --pad on the horizontal axis. */
.head-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px var(--pad)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.brand-name{font-family:'Archivo Black',Impact,sans-serif;font-size:17px;text-transform:uppercase;letter-spacing:-.015em;line-height:1}
.brand-sub{display:block;font-family:'Inter',sans-serif;font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--red-ui);margin-top:3px}
/* 150 x 100 viewBox, of which the lens itself is the right ~60%. Sized so the
   lens reads a little larger than the two lines of wordmark beside it, which
   is the proportion on the brand sheet. Trimmed back on small screens, where
   the header is sticky and every pixel of it costs viewport. */
.mark{width:66px;height:44px;flex:none;color:var(--ink)}

.nav-toggle{display:none;background:none;border:2px solid var(--black);padding:8px 12px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;border-radius:2px}

.site-nav{display:flex;align-items:center;gap:17px}
.site-nav a{text-decoration:none;font-size:14.5px;font-weight:500;white-space:nowrap}
.site-nav a:hover{color:var(--red-ui)}
.site-nav a[aria-current="page"]{border-bottom:2px solid var(--red);padding-bottom:2px}
.nav-cta{background:var(--red-ui);color:#fff !important;padding:10px 16px;border-radius:2px;font-weight:600 !important}
.nav-cta:hover{background:var(--black);color:#fff !important}

/* Two mobile navs. The base rules are the no-JavaScript one: the links stack
   in the flow of a header that stops being sticky, because a stacked nav
   pinned to the top would eat the whole viewport. main.js adds .js to <html>
   before first paint, and the .js rules then collapse the same markup behind
   the Menu button. Scoping it this way, rather than with a <noscript><style>,
   is deliberate: the site CSP is style-src 'self' with no 'unsafe-inline',
   so an inline style block would be dropped on the live site while still
   working in local preview.

   This breakpoint is 1060px while the layout ones below are 900px, and the
   two are not meant to match. 1060 is --wrap: eight nav items plus the CTA
   only fit beside the brand once the header is at its full width, and at
   anything narrower they overflowed and scrolled the page sideways, which
   they did with seven items too. Measure before lowering it. main.js has the
   same number in its resize listener. */
@media(max-width:1060px){
  .site-head{position:static}
  .head-in{flex-wrap:wrap}
  .site-nav{flex:1 0 100%;flex-direction:column;align-items:stretch;gap:0;padding:4px 0 12px}
  .site-nav a{padding:14px 0;border-bottom:1px solid var(--hair);font-size:17px}
  .nav-cta{margin-top:14px;text-align:center;border-bottom:none}

  .js .site-head{position:sticky}
  .js .nav-toggle{display:block}
  .js .site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--white);border-bottom:2px solid var(--black);padding:8px var(--pad) 20px}
  .js .site-nav.open{display:flex}
}

/* ---------- credibility strip ---------- */
/* Sits below the sticky header and scrolls away with the page. Deliberately
   NOT sticky: the header already costs 78px of a 664px phone viewport, and
   pinning another 37px would also mean raising the scroll-margin-top above,
   which is tuned to the header height and feeds every in-page anchor.
   The ink merges with .site-head's 2px bottom border at rest and separates
   once scrolled. That reads as a plinth under the header, and is intended. */
.usp{background:var(--ink);color:#fff}
.usp p{margin:0;padding:9px 0;font-size:13px;line-height:1.4;font-weight:500}
/* the secondary clause: #B0B2B7 is already the site's on-ink secondary */
.usp .sec{color:#B0B2B7}
.usp .sec::before{content:" "}
/* drops at the same breakpoint where the nav collapses, so the header and the
   strip change at the same moment rather than one after the other */
@media(max-width:900px){
  .usp p{font-size:13px;padding:8px 0}
  .usp .sec{display:none}
}
@media(max-width:390px){.usp p{font-size:12.5px;padding:7px 0}}

/* ---------- typography ---------- */
h1,h2,h3{letter-spacing:-.025em}
.h-xl{font-family:'Archivo Black',Impact,sans-serif;font-size:clamp(40px,7.6vw,94px);line-height:.94;letter-spacing:-.04em;margin:0;text-transform:uppercase}
.h-lg{font-family:'Archivo Black',Impact,sans-serif;font-size:clamp(26px,4.4vw,44px);line-height:1;text-transform:uppercase;margin:0 0 26px}
.h-md{font-family:'Archivo Black',Impact,sans-serif;font-size:clamp(22px,3.4vw,32px);line-height:1.05;text-transform:uppercase;margin:0 0 20px}
.red{color:var(--red)}
.lede{font-size:20px;line-height:1.5;max-width:52ch;margin:28px 0 0}
.prose p{max-width:66ch;font-size:17px;line-height:1.65}
.grey{color:var(--grey)}

/* ---------- sections ---------- */
/* There are two band surfaces, white and ink, and no tinted third. A near
   white wash is the house style of every generated template on the internet,
   and the 2px rule between bands already does the separating. If a page reads
   flat, promote a band to --ink rather than reintroducing a tint. */
.band{padding:64px 0;border-top:2px solid var(--black)}
.band--first{border-top:none;padding-top:56px}
.band--ink{background:var(--black);color:#fff;border-top:none}
.band--ink h2,.band--ink h3{color:#fff}
.band--ink p{color:#B0B2B7}
.band--ink a{color:#fff}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--red-ui);color:#fff;text-decoration:none;font-weight:600;padding:16px 30px;font-size:16px;border-radius:2px;border:none;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--black);color:#fff}
.btn--ghost{background:transparent;color:var(--black);border:2px solid var(--black);padding:14px 28px}
.btn--ghost:hover{background:var(--black);color:#fff}
.btn-row{margin-top:34px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.textlink{font-weight:600;text-decoration:none;border-bottom:2px solid var(--red);padding-bottom:2px}
.textlink:hover{color:var(--red-ui)}

/* ---------- two-column feature ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:2px solid var(--black);margin-top:40px}
.duo > div{padding:22px 30px 0 0}
.duo > div + div{padding:22px 0 0 30px;border-left:1px solid var(--hair)}
.duo h2,.duo h3{font-family:'Archivo Black',Impact,sans-serif;font-size:19px;text-transform:uppercase;margin:0 0 8px;letter-spacing:-.025em}
.duo p{margin:0;font-size:16px;line-height:1.55;color:var(--grey)}
.band--ink .duo{border-top-color:#33353A}
.band--ink .duo > div + div{border-left-color:#33353A}

/* ---------- agenda / step rows ---------- */
.panel{background:var(--black);color:#fff;padding:40px 40px 44px}
.panel h2,.panel h3{color:#fff}
.panel .rows{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid #33353A}
.panel .rows > div{padding:20px 20px 0 0;border-right:1px solid #33353A}
.panel .rows > div:last-child{border-right:none;padding-right:0}
.panel .tick{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--red-on-ink);margin-bottom:9px}
/* Row headings. h3 where the panel's own title is the section h2, h4 where the
   panel sits under an h3. Both must look identical. */
.panel .rows h3,.panel h4{font-size:17px;margin:0 0 7px;font-weight:600;
  font-family:'Inter',system-ui,sans-serif;letter-spacing:normal;text-transform:none}
.panel p{margin:0;color:#B0B2B7;font-size:15px;line-height:1.55}

/* ---------- yes/no split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:0}
.split > div{padding:0 34px 0 0}
.split > div + div{padding:0 0 0 34px;border-left:1px solid var(--hair)}
.split-h{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin:0 0 18px}
.split-h.no{color:var(--red-ui)}
.split ul{list-style:none;margin:0;padding:0}
.split li{font-size:17px;line-height:1.45;padding:14px 0;border-bottom:1px solid var(--hair)}
.split li b{display:block;font-weight:600}
.split li span{color:var(--grey);font-size:14.5px}

/* Vertical spacer between a prose intro and the block under it. Was an inline
   style attribute, which the Content-Security-Policy silently strips. */
.gap{height:28px}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
/* Four cards in a three-column grid leaves an orphan on its own row. Any
   grid with an even number of cards uses this instead. */
.cards--pair{grid-template-columns:repeat(2,1fr)}
/* and a single card should not sit at a third of the width */
.cards--one{grid-template-columns:1fr}
/* pushed to the bottom of the card, and roomy enough for the two steps
   a demo card offers */
.card-cta{margin-top:auto;padding-top:20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
/* needs .card to outrank `.card p{margin:0;font-size:15px}` above */
.card .demo-note{margin:12px 0 0;color:var(--grey);font-size:13.5px;line-height:1.5;
  border-top:1px solid var(--hair);padding-top:12px}
.card{border:2px solid var(--black);padding:26px 24px 28px;display:flex;flex-direction:column}
.card h3{font-family:'Archivo Black',Impact,sans-serif;font-size:17px;text-transform:uppercase;margin:0 0 10px}
.card p{margin:0;color:var(--grey);font-size:15px;line-height:1.6}
.card .pill{display:inline-block;background:var(--black);color:#fff;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;margin-bottom:14px;align-self:flex-start}
.card .fee{margin-top:auto;padding-top:16px;font-weight:600;font-size:15px}

/* ---------- mistakes list ---------- */
.miss{border-top:2px solid var(--black)}
.miss > div{display:grid;grid-template-columns:1fr 1fr;gap:0 34px;padding:20px 0;border-bottom:1px solid var(--hair);align-items:start}
.miss h3{margin:0 0 4px;font-size:17px;font-weight:600;font-family:inherit;text-transform:none;letter-spacing:-.01em}
.miss .fix{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--red-ui);font-weight:600;display:block;margin-bottom:5px}
.miss p{margin:0;color:var(--grey);font-size:15.5px;line-height:1.55}

/* ---------- facts table ---------- */
.bio{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px}
.bio p{font-size:17px;line-height:1.65;margin:0 0 16px}
.facts{border-top:2px solid var(--black)}
.facts > div{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid var(--hair);font-size:15px}
.facts > div span:first-child{color:var(--grey)}
.facts > div span:last-child{font-weight:600;text-align:right}

/* ---------- FAQ ---------- */
details{border-bottom:1px solid var(--hair)}
details:first-of-type{border-top:2px solid var(--black)}
summary{cursor:pointer;padding:18px 0;font-weight:600;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:baseline}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';color:var(--red);font-size:24px;line-height:1;flex:none;font-weight:400}
details[open] summary::after{content:'\2013'}
details p{margin:0 0 22px;color:var(--grey);font-size:16.5px;line-height:1.62;max-width:74ch}

/* ---------- form ---------- */
.form{max-width:640px}
.field{margin-bottom:22px}
.field label{display:block;font-size:14px;font-weight:600;letter-spacing:.03em;margin-bottom:7px}
.field .hint{display:block;font-weight:400;color:var(--grey);font-size:14px;margin-top:-4px;margin-bottom:8px}
/* Required fields say so up front, rather than at the moment you press send.
   The word is spelled out, not an asterisk, so a screen reader says it too. */
.field .req{font-weight:400;color:var(--grey);letter-spacing:0;text-transform:none}
.field .opt{font-weight:400;color:var(--grey);letter-spacing:0;text-transform:none}
.formnote{font-size:14.5px;margin-top:18px;max-width:60ch}
.field input,.field textarea,.field select{
  width:100%;font:inherit;font-size:16px;padding:13px 14px;border:2px solid var(--black);border-radius:2px;background:var(--white);color:var(--black)
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:3px solid var(--red);outline-offset:1px}
.hp{position:absolute;left:-9999px}

/* ---------- footer ---------- */
.site-foot{background:var(--black);color:#B0B2B7;padding:54px 0 40px;margin-top:0;border-top:1px solid #33353A}
/* Where a page ends on a dark band, the band and the footer merged into one
   undifferentiated slab. The footer is not a sibling of the band, it sits
   outside <main>, so this cannot be an adjacent-sibling rule. An unconditional
   hairline works instead: against a light band above it is invisible, against
   a dark one it separates the two. */
/* and stop the band's CTA sitting right on top of the footer's */
.band--ink:last-of-type{padding-bottom:52px}
.site-foot a{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px}
.site-foot h2{font-family:'Archivo Black',Impact,sans-serif;color:#fff;font-size:clamp(20px,3vw,28px);text-transform:uppercase;margin:0 0 14px;letter-spacing:-.02em}
.site-foot h3{color:#fff;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 14px}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{padding:6px 0;font-size:15px}
.site-foot p{font-size:15.5px;line-height:1.6;margin:0 0 20px;max-width:40ch}
.legal{border-top:1px solid #33353A;margin-top:40px;padding-top:22px;font-size:13.5px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .panel .rows{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  body{font-size:16.5px}
  .mark{width:54px;height:36px}
  .band{padding:48px 0}
  .duo,.split,.cards,.bio,.panel .rows,.foot-grid{grid-template-columns:1fr}
  .duo > div,.split > div{padding:0 0 24px}
  .duo > div + div,.split > div + div{padding:24px 0 0;border-left:none;border-top:1px solid var(--hair)}
  .band--ink .duo > div + div{border-top-color:#33353A}
  .panel{padding:28px 24px 32px}
  .panel .rows > div{border-right:none;border-bottom:1px solid #33353A;padding:20px 0}
  .panel .rows > div:last-child{border-bottom:none}
  .miss > div{grid-template-columns:1fr;gap:10px}
  .lede{font-size:18px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* The ten vendor questions are the page someone prints and forwards to whoever
   is selling to them, so printing has to produce something worth sending.
   Dark bands invert to white, blocks do not split across pages, and the
   footer's attribution line survives so a loose printout says where it came
   from. */
@media print{
  .site-head,.nav-toggle,.btn-row,.foot-grid,.skip,.usp{display:none}
  body{font-size:11pt;background:#fff;color:#000}
  .wrap{max-width:none;padding:0}
  .band{padding:16pt 0;border-top:none}
  .band--first{padding-top:0}
  .band--ink,.panel,.card,.ratebox{background:#fff !important}
  .band--ink,.band--ink h2,.band--ink h3,.band--ink a,
  .panel,.panel h2,.panel h3,.panel h4{color:#000 !important}
  .band--ink p,.panel p{color:#333 !important}
  .panel,.card{border:1pt solid #999}
  .panel .rows > div{border-color:#999}
  .card .pill{background:#000 !important;color:#fff !important}
  .check > li,.card,.miss > div,.split li,details{break-inside:avoid}
  h1,h2,h3{break-after:avoid}
  /* a closed <details> cannot be forced open from CSS, so a printed FAQ shows
     the questions and only the answers that were open on screen */
  details{border-bottom:1pt solid #ccc}
  summary::after{display:none}
  .site-foot{background:#fff !important;color:#000 !important;
    border-top:1pt solid #999;padding:8pt 0 0}
  .legal{border-top:none;margin-top:0;font-size:9pt}
}

/* ---------- v2: checklist + credential strip ---------- */
/* Two variants share this: an <ol> of vendor questions, where the numbering
   is functional because the list gets sent to a supplier and referred to by
   number, and a plain <ul> where it would only be decoration. Numerals are
   Inter and grey, never display type, and never zero padded. */
.check{border-top:2px solid var(--black);margin:8px 0 0;padding:0;list-style:none;counter-reset:vq}
.check > li{display:grid;grid-template-columns:1fr;gap:0 18px;padding:16px 0;border-bottom:1px solid var(--hair);font-size:16.5px;line-height:1.5}
ol.check > li{grid-template-columns:28px 1fr;counter-increment:vq}
ol.check > li::before{content:counter(vq) ".";color:var(--grey);font-weight:600;font-size:15.5px;padding-top:1px}
.check span.note{display:block;color:var(--grey);font-size:14.5px;margin-top:4px}

.creds{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:2px solid var(--black);margin-top:36px}
.creds > div{padding:22px 24px;border-right:1px solid var(--hair)}
.creds > div:last-child{border-right:none}
.creds b{display:block;font-family:'Archivo Black',Impact,sans-serif;font-size:15px;text-transform:uppercase;margin-bottom:7px;letter-spacing:-.01em}
.creds p{margin:0;font-size:15px;line-height:1.55;color:var(--grey)}

.ratebox{border:2px solid var(--black);padding:24px 26px;margin-top:34px;background:var(--white)}
.ratebox b{font-family:'Archivo Black',Impact,sans-serif;font-size:17px;text-transform:uppercase;display:block;margin-bottom:8px}
.ratebox p{margin:0;font-size:16px;line-height:1.6;color:var(--grey);max-width:70ch}
.card .rate{font-size:13.5px;color:var(--grey);font-weight:400;margin-top:4px}

@media(max-width:760px){.creds{grid-template-columns:1fr}.creds > div{border-right:none;border-bottom:1px solid var(--hair)}}

/* ---------- product pages ---------- */
/* A statistic card. Same card, bigger number. */
.card--stat h3{font-family:'Archivo Black',Impact,sans-serif;font-size:38px;
  line-height:1;letter-spacing:-.03em;margin:0 0 10px;text-transform:none}
/* .creds is a three-up bold-title-plus-paragraph block. It is bordered for the
   white bands, so recolour it when it sits on ink. */
.band--ink .creds{border-color:#33353A}
.band--ink .creds > div{border-right-color:#33353A}
.band--ink .creds b{color:#fff}
.band--ink .creds p{color:#B0B2B7}
@media(max-width:760px){.band--ink .creds > div{border-bottom-color:#33353A}}
/* source and disclaimer lines under a section */
.prose p.src{font-size:14.5px;color:var(--grey);line-height:1.55}
.band--ink .prose p.src{color:#8D9199}
p.note{font-size:14.5px;margin:18px 0 0}