/* Checklist hub + checklist pages, Website look (B3). Tokens and shared parts come from web.css. */
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-family:var(--num);font-variant-numeric:tabular-nums lining-nums}
[hidden]{display:none!important}

/* page head */
.cl-head{padding-bottom:48px}
.cl-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.cl-facts{list-style:none;display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:30px;font-size:14.5px;color:var(--ink-2)}
.cl-facts b{font-size:22px;font-weight:600;color:var(--ink);margin-right:7px}

/* hub cards */
.clx{padding:8px 0 96px}
.clx-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.clx-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:40px;text-decoration:none;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.clx-card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -36px rgba(60,40,20,.4);border-color:#D9CCBA}
.clx-tag{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:6px 11px;border-radius:999px;background:var(--red-soft);color:var(--red)}
.clx-n{display:flex;align-items:baseline;gap:10px;font-size:clamp(84px,9vw,124px);font-weight:600;line-height:.9;letter-spacing:-.02em;margin:34px 0 8px}
.clx-n small{font:500 18px/1 var(--sans);letter-spacing:0;color:var(--muted)}
.clx-card h2{font-size:clamp(34px,3.2vw,44px);margin:6px 0 12px}
.clx-card p{color:var(--ink-2);max-width:30em}
.clx-meta{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0}
.clx-meta span{font-size:13.5px;color:var(--ink-2);background:var(--paper);border-radius:999px;padding:7px 13px}
.clx-meta b{font-weight:600;color:var(--ink)}
.clx-go{margin-top:30px;padding-top:24px;border-top:1px solid var(--line);font-weight:500;color:var(--red);display:flex;gap:10px;align-items:center}
.clx-card:hover .arrow{transform:translateX(4px)}
.clx-how{padding-bottom:110px}
.clx-band{padding:64px}
.clx-band h2{font-size:clamp(38px,4.4vw,60px);margin:14px 0 40px}
.clx-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.clx-steps li{background:var(--card);border-radius:22px;padding:28px}
.clx-steps li > .n{font-size:30px;font-weight:600;color:var(--red);line-height:1}
.clx-steps h3{font-size:30px;margin:18px 0 8px}
.clx-steps p{color:var(--ink-2);font-size:16px}

/* checklist page — layout mirrors the standalone CRO Checklist app: centered head, category pills, one card per category */
.cl{padding:0 0 40px}
.cl > .wrap{max-width:1044px}
.cl-hc{text-align:center}
.cl-hc h1,.cl-hc .lede{margin-left:auto;margin-right:auto}
.cl-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:20px;height:20px;flex:none}

/* category pills */
.cl-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:8px 0 72px}
.cl-nav a{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px 22px;font:500 16px/1 var(--sans);color:var(--ink);text-decoration:none;transition:border-color .2s,color .2s,box-shadow .25s var(--ease)}
.cl-nav a .ic{width:18px;height:18px;color:var(--red)}
.cl-nav a:hover{border-color:var(--red);color:var(--red);box-shadow:0 14px 30px -24px rgba(60,40,20,.5)}

/* category card */
.cl-sec{background:var(--card);border:1px solid var(--line);border-radius:24px;overflow:hidden;margin-bottom:56px;scroll-margin-top:96px;box-shadow:0 24px 50px -44px rgba(60,40,20,.35)}
.cl-sh{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--paper);padding:22px 32px}
.cl-st{display:flex;align-items:center;gap:12px;min-width:0}
.cl-st > .ic{color:var(--red)}
.cl-st h2{font-size:34px;line-height:1;padding-right:12px}
.cl-prog{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--ink-2);white-space:nowrap}
.cl-prog .num{font:600 15px var(--num);color:var(--ink)}
.cl-prog b{font-weight:600}
.cl-pb{display:block;width:100px;height:5px;border-radius:99px;background:var(--line);overflow:hidden}
.cl-pb i{display:block;height:100%;width:var(--p,0%);background:var(--red);border-radius:inherit;transition:width .6s var(--ease)}
.cl-acts{display:flex;gap:14px;flex:none}
.cl-rb{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:var(--red-soft);color:var(--red);cursor:pointer;transition:background .2s}
.cl-rb .ic{width:17px;height:17px}
.cl-rb:hover{background:var(--hl)}
.cl-rb:focus-visible,.cl-exp:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.cl-sec.is-hidden{margin-bottom:56px}

/* rows: guideline | implementation | impact | chevron */
.cl-colh,.cl-row{display:grid;grid-template-columns:minmax(0,1fr) 140px 140px 96px;gap:0 16px;align-items:center}
.cl-colh{padding:14px 32px;font-size:12.5px;font-weight:600;color:var(--muted)}
.cl-colh span:first-child{padding-left:38px}
.cl-list{list-style:none}
.cl-item{border-top:1px solid var(--line);scroll-margin-top:110px}
.cl-row{padding:20px 32px}
.cl-name{display:flex;align-items:baseline;gap:16px;cursor:pointer;font-size:17px;line-height:1.45;color:var(--ink);min-width:0}
.cl-chk{position:relative;flex:none;width:22px;height:22px;top:4px}
.cl-tick{position:absolute;inset:-8px;width:38px;height:38px;opacity:0;margin:0;cursor:pointer;z-index:1}
.cl-box{position:absolute;inset:0;border:1.5px solid #B9B6B0;border-radius:6px;background:#fff;transition:background .2s,border-color .2s}
.cl-box::after{content:"";position:absolute;left:6.5px;top:2.5px;width:5.5px;height:11px;border:solid #fff;border-width:0 2.2px 2.2px 0;transform:rotate(45deg) scale(0);transition:transform .25s var(--ease)}
.cl-tick:checked + .cl-box{background:var(--red);border-color:var(--red)}
.cl-tick:checked + .cl-box::after{transform:rotate(45deg) scale(1)}
.cl-tick:focus-visible + .cl-box{outline:2px solid var(--red);outline-offset:3px}
.cl-item.pop .cl-box{animation:cl-pop .45s var(--ease)}
@keyframes cl-pop{0%{transform:scale(1)}35%{transform:scale(1.25)}70%{transform:scale(.94)}100%{transform:scale(1)}}
.cl-name .tx{background:linear-gradient(var(--muted),var(--muted)) no-repeat 0 60%/0 1px;transition:background-size .4s var(--ease),color .3s}
.cl-item:has(.cl-tick:checked) .tx{color:var(--muted);background-size:100% 1px}
.cl-tl{display:none}
.tag{display:inline-block;font:700 12.5px/18px var(--num);letter-spacing:.1em;text-transform:uppercase;border-radius:6px;padding:3px 9px}
.t-good{color:var(--up);background:#E3F1E8}
.t-mid{color:#7A5A0C;background:#F6EBCB}
.t-bad{color:var(--down);background:var(--red-soft)}
.cl-item:has(.cl-tick:checked) .tag{color:var(--muted);background:var(--paper)}
.cl-exp{justify-self:end;display:grid;place-items:center;width:36px;height:36px;border:0;background:none;color:var(--ink-2);cursor:pointer;border-radius:50%}
.cl-exp:hover{background:var(--paper);color:var(--ink)}
.cl-exp .ic{width:22px;height:22px;transition:transform .3s var(--ease)}
.cl-exp[aria-expanded=true] .ic{transform:rotate(180deg)}
.cl-html{background:var(--bg);padding:30px 70px 34px;font-size:16px;line-height:1.6;color:var(--ink-2);overflow-wrap:anywhere;border-top:1px solid var(--line)}
.cl-html > * + *{margin-top:.8em}
.cl-html h4{font:700 12px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:1.6em}
.cl-html h4:first-child{margin-top:0}
.cl-html img{display:block;max-width:min(100%,720px);height:auto;border-radius:12px;border:1px solid var(--line);margin:12px auto 18px;background:#fff}
.cl-html a{color:var(--red)}
.cl-html strong{color:var(--ink);font-weight:600}
.cl-html blockquote{border-left:2px solid var(--hl);padding-left:14px}
.cl-html ul,.cl-html ol{padding-left:1.2em}

/* locked rows */
.cl-lk{display:grid;place-items:center;color:var(--muted)}
.cl-lk .ic{width:16px;height:16px}
.cl-item:has(.cl-locked) .cl-name{cursor:default;color:var(--ink-2)}
.cl-item:has(.cl-locked) .tag{opacity:.75}
.cl-locked{justify-self:end;display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--red);text-decoration:none;background:var(--red-soft);border-radius:999px;padding:7px 12px 7px 10px}
.cl-locked .ic{width:14px;height:14px}
.cl-sticky svg{width:15px;height:15px}
.cl-lockwrap{position:relative}
.cl-sticky{position:sticky;bottom:20px;z-index:5;display:flex;width:max-content;max-width:calc(100% - 32px);margin:0 auto;align-items:center;gap:8px;background:var(--red);color:#fff;text-decoration:none;font:500 15px/1 var(--sans);padding:15px 22px;border-radius:999px;box-shadow:0 18px 40px -16px rgba(192,57,43,.55);transition:background .25s}
.cl-sticky:hover{background:var(--red-h)}

/* unlock gate */
.cl-gate{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;background:var(--paper);border-radius:36px;padding:64px;margin:40px 0 30px;scroll-margin-top:90px}
.cl-lock{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--card);color:var(--red);box-shadow:0 12px 30px -18px rgba(60,40,20,.4);margin-bottom:22px}
.cl-lock svg{width:24px;height:24px}
.cl-gate h2{font-size:clamp(40px,4.6vw,62px);margin:12px 0 16px}
.cl-gate-p{color:var(--ink-2);font-size:17px;max-width:28em}
.cl-inside{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:26px}
.cl-inside li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;background:var(--card);border-radius:12px;padding:10px 14px;font-size:14px;color:var(--ink-2)}
.cl-inside b{font:600 15px var(--num);color:var(--red)}
.cl-note{display:inline-block;margin-top:24px;transform:rotate(-3deg)}
.cl-form{padding:32px;gap:16px;box-shadow:0 30px 60px -40px rgba(60,40,20,.45)}
.cl-form h3{font-size:32px;margin-bottom:4px}
.cl-form .muted{font-size:14.5px}
.cl-fs{border:0;padding:0;margin:0;min-width:0}
.cl-fs legend{margin-bottom:8px}
.cl-form .choices{grid-template-columns:1fr 1fr}
.cl-form .consent a{color:var(--red)}
.cl-submit{justify-content:center;width:100%;border:0;cursor:pointer;padding:17px 22px}

/* page CTA spacing */
.cl ~ .cta{padding-top:90px}

@media (prefers-reduced-motion:reduce){
  .cl-item.pop .cl-box{animation:none}
  .clx-card,.cl-nav a,.cl-pb i,.cl-box::after,.cl-name .tx,.cl-exp .ic{transition:none}
}
@media (max-width:900px){
  .clx-grid,.clx-steps{grid-template-columns:1fr}
  .clx-band{padding:44px 28px}
  .cl-gate{grid-template-columns:1fr;gap:36px;padding:44px 32px}
  .cl-colh{display:none}
  /* tags move under the guideline, labelled, like the app on mobile */
  .cl-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n e" "a a" "b b";gap:0 12px}
  .cl-name{grid-area:n}
  .cl-row > :last-child{grid-area:e;align-self:start}
  .cl-tg{display:flex;align-items:center;gap:8px;padding-left:38px;margin-top:8px}
  .cl-tg + .cl-tg{grid-area:b;margin-top:6px}
  .cl-tg:first-of-type{grid-area:a}
  .cl-tl{display:block;width:118px;font-size:12.5px;color:var(--muted)}
  .cl-tl::after{content:":"}
}
@media (max-width:600px){
  .cl-head{padding:36px 0 36px}
  .clx-card{padding:28px 24px}
  .clx-band{padding:36px 20px;border-radius:24px}
  .clx-steps li{padding:22px}
  .cl-nav{gap:10px;margin:0 0 48px}
  .cl-nav a{padding:11px 15px;font-size:14px;border-radius:12px}
  .cl-sec{border-radius:20px;margin-bottom:36px}
  .cl-sh{padding:16px 16px 16px 20px}
  .cl-st h2{font-size:27px;padding-right:0}
  .cl-prog{display:none}
  .cl-acts{gap:8px}
  .cl-rb{width:32px;height:32px}
  .cl-row{padding:16px 16px 18px 20px}
  .cl-name{font-size:16px;gap:14px}
  .cl-tg{padding-left:36px}
  .cl-tl{width:104px}
  .cl-html{padding:22px 20px 26px}
  .cl-more a{padding:16px 20px}
  .cl-gate{padding:32px 18px;border-radius:26px}
  .cl-inside{grid-template-columns:1fr}
  .cl-form{padding:22px 18px}
}
@media (max-width:359px){.cl-rb-x{display:none}}
.eyebrow .n{font-size:14px;font-weight:700;letter-spacing:.06em}
.cl-form .choice i{font-style:normal;margin-left:.3em}
.cl-gate{scroll-margin-top:110px}
.cl-more{border-top:1px solid var(--line)}
.cl-more a{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:18px 32px;background:var(--bg);text-decoration:none;color:var(--ink-2);font-size:15px}
.cl-more a > .ic{width:16px;height:16px;color:var(--red)}
.cl-more b{font-size:18px;color:var(--ink)}
.cl-more a:hover .cl-more-go{text-decoration:underline}
.cl-more-go{margin-left:auto;color:var(--red);font-weight:600}