/* V4: the board's must-fixes, on top of the shared story.css */

/* hero: say what we do on the first screen */
.hero-sub{font:400 clamp(17px,1.5vw,20px)/1.45 var(--sans);color:var(--em-d);max-width:54ch;text-wrap:balance;margin:18px 0 0}
.motion .hero-sub{margin:14px auto 0}
html.motion .v4 #s1{clip-path:inset(46% 8% 6% 8% round 2px)}
@media (max-width:700px){
  html.motion .v4 #s1{clip-path:inset(38% 4% 8% 4% round 2px)}
  .motion .hero-sub{font-size:16px;margin-top:10px}
}
@media (max-height:760px) and (min-width:701px){html.motion .v4 #s1{clip-path:inset(50% 8% 5% 8% round 2px)}}

/* the search is labelled as an example */
.search-label{color:var(--em);margin:0 0 14px;display:inline-block;border:1px solid var(--em);padding:5px 9px;font-size:10.5px}
.res-src{opacity:1;color:#3d5a47}
.res-snip{color:#2f3d33}

/* verdict: full strength */
.verdict-sub{color:var(--paper);font-size:clamp(20px,2.4vw,30px)}

/* questions first, terms second */
.def-q{font:500 italic clamp(20px,1.9vw,25px)/1.3 var(--serif);color:var(--em-d);margin-bottom:12px;min-height:2.6em}
.def-abbr{font-size:clamp(40px,4vw,56px)}

/* on record */
.proof{padding:clamp(72px,12vh,140px) 0;background:var(--em);color:var(--paper)}
.proof .kicker{color:var(--gold-l)}
.proof .h2{color:var(--paper)}
.proof .lede{color:#E6DCC0}
.proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center}
.ba{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.ba-item{padding:22px 24px;border:1px solid rgba(236,225,198,.4)}
.ba-before{background:rgba(0,0,0,.12)}
.ba-after{background:var(--paper);color:var(--em-d);border-color:var(--paper)}
.ba-k{display:block;color:var(--gold-l)}
.ba-after .ba-k{color:var(--em)}
.ba-t{font:500 clamp(22px,2.2vw,30px)/1.25 var(--serif);margin:10px 0 12px}
.ba-tag{display:inline-block;padding:4px 8px;border:1px solid currentColor;font-size:10.5px}
.ba-before .ba-tag{color:var(--gold-l)}

/* what the audit gives you */
.what{padding:clamp(72px,12vh,140px) 0}
.what-list{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(28px,4vw,64px);border-top:2px solid var(--em)}
.what-list li{display:grid;grid-template-columns:56px 1fr;gap:16px;padding:24px 0;border-bottom:1px solid var(--line)}
.what-n{font:500 34px/1 var(--serif);color:var(--gold)}
.what-list h3{font:500 clamp(21px,1.9vw,25px)/1.25 var(--serif);margin:0 0 8px;color:var(--em-d)}
.what-list p{margin:0;font-size:16px;line-height:1.6}
.sample{margin:40px 0 0;background:var(--paper-2);border:1px solid var(--em);padding:20px 22px}
.sample-k{color:var(--em);display:block;margin-bottom:14px}
.sample-row{display:grid;grid-template-columns:1.2fr .8fr 1.6fr 1.2fr;gap:20px}
.sample-h{display:block;color:#3d5a47;font-size:10px;margin-bottom:6px}
.sample-row p{margin:0;font-size:15px;line-height:1.5}
.sample-tests{display:flex;flex-wrap:wrap;gap:6px}
.t-x{font:600 12px/1 var(--sans);padding:5px 7px;background:#F1D9C9;color:#7A2B0F;border-radius:2px}
.what-foot{margin:32px 0 0;max-width:62ch;font:500 clamp(19px,1.8vw,23px)/1.45 var(--serif);color:var(--em-d)}

/* rules and data */
.rules{padding:clamp(72px,12vh,140px) 0;border-top:1px solid var(--em);background:var(--paper-2)}
.rules-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px)}
.rules-h{color:var(--em);margin:0 0 6px;padding-bottom:12px;border-bottom:2px solid var(--em);font-weight:400}
.rules-list{list-style:none;margin:0;padding:0}
.rules-list li{padding:14px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.55}

/* about */
.cv-k{color:var(--em);margin:26px 0 0}
.v4 .cv{margin-top:10px;gap:12px}
.cv li{line-height:1.5}
.cv b{font-weight:600}
.cv li span{display:block;text-transform:none;letter-spacing:0;font:400 14px/1.4 var(--sans);color:#3d5a47}

/* FAQ */
.faq{padding:clamp(72px,12vh,140px) 0;border-top:1px solid var(--em)}
.faq-list{border-top:2px solid var(--em);max-width:880px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;font:500 clamp(19px,1.8vw,23px)/1.35 var(--serif);color:var(--em-d)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:16px;font:400 26px/1 var(--sans);color:var(--em)}
.faq details[open] summary::after{content:"−"}
.faq summary:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.faq details p{margin:0 0 22px;max-width:64ch;font-size:16.5px;line-height:1.65}

/* CTA in brand colour */
.btn{background:var(--em);color:var(--paper)}
.btn:hover{background:var(--em-d)}
.audit-note{margin:16px 0 0;font-size:15px;color:#3d5a47;max-width:46ch}

/* footer with company details */
.foot-co{font-style:normal;display:flex;flex-direction:column;gap:2px;font-size:14px;line-height:1.7;color:#D9CFB3;flex-basis:100%}
.foot-co a{color:#D9CFB3}

@media (max-width:860px){
  .proof-grid,.what-list,.rules-grid{grid-template-columns:1fr}
  .sample-row{grid-template-columns:1fr 1fr}
  .def-q{min-height:0}
}
@media (max-width:520px){.sample-row{grid-template-columns:1fr}}