/* ===== M22 DATA ===== */

/* 1 opening */
.d-hero{position:relative;padding:calc(var(--nav-h) + clamp(70px,9vw,130px)) 0 clamp(80px,9vw,130px);overflow:hidden}
.d-glow{position:absolute;right:-16vw;top:-22vw;width:62vw;height:62vw;border-radius:50%;background:radial-gradient(circle,rgba(255,106,61,.13),transparent 62%);pointer-events:none}
.d-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,6vw,96px);align-items:center}
.d-copy h1{margin:26px 0 28px;max-width:12ch}
.d-copy .serif{color:var(--signal)}
.d-copy .lede{color:#B5B2AB;margin-bottom:36px}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:22px}

.d-demo{border-radius:22px;background:#141312;border:1px solid var(--line-2);overflow:hidden;box-shadow:0 60px 120px -50px rgba(0,0,0,.9)}
.d-demo-bar{display:flex;align-items:center;gap:14px;padding:13px 16px;border-bottom:1px solid var(--line)}
.lights{display:flex;gap:6px}.lights i{width:10px;height:10px;border-radius:50%;background:#2c2b28}
.d-state{color:var(--mute);transition:color .4s}
.d-demo.clean .d-state{color:var(--signal)}
.d-msgs{display:grid;gap:18px;padding:24px 22px}
.d-msg{display:grid;gap:6px}
.d-who{font-size:14px;font-weight:600;letter-spacing:-.01em}
.d-msg p{margin:0;font-size:15.5px;line-height:1.55;color:#D9D6CF}
.r{position:relative;display:inline-block;border-radius:5px;transition:background .45s,color .45s,padding .45s}
.r::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;border-radius:5px;background:rgba(255,106,61,.55);transition:width .45s var(--ease)}
.r.sweep::after{width:100%}
.r.done{background:rgba(255,106,61,.14);color:var(--signal-2);padding:0 6px;font-family:var(--f-mono);font-size:.86em;letter-spacing:.02em}
.r.done::after{width:0;transition:none}
.d-foot{display:flex;align-items:center;gap:10px;padding:14px 22px;border-top:1px dashed var(--line-2);color:var(--mute);text-transform:none;letter-spacing:.02em;font-size:12px}
.d-foot i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--signal)}

/* 2 anonymised first */
.d-anon{padding:clamp(100px,12vw,170px) 0;border-radius:32px 32px 0 0}
.d-anon-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,100px);align-items:start}
.d-anon h2{margin:24px 0 26px;max-width:11ch}
.d-anon .serif{color:var(--signal-ink)}
.d-anon-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.d-anon-list li{display:grid;grid-template-columns:52px 1fr;gap:0;padding:24px 0;border-bottom:1px solid var(--line)}
.d-anon-list .num{padding-top:.4em;color:var(--signal-ink)}
.d-anon-list p{margin:0;font-size:clamp(1.15rem,1.6vw,1.45rem);line-height:1.35;letter-spacing:-.02em;font-weight:500;color:var(--ink)}

/* 3 what this is */
.d-what{padding:clamp(100px,12vw,170px) 0 clamp(70px,8vw,110px)}
.d-what-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,100px);align-items:start}
.d-what h2{margin-top:24px;max-width:14ch}
.d-what-copy p{margin:0 0 22px;font-size:clamp(1.05rem,1.3vw,1.22rem);line-height:1.65;color:#B5B2AB;max-width:36em}
.d-what-copy p:first-child{color:var(--text)}

/* 4 kinds of data */
.d-kinds{padding:0 0 clamp(100px,12vw,170px)}
.d-kinds h2{margin:24px 0 clamp(40px,5vw,64px);max-width:20ch}
.d-kinds-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.d-kind{padding:clamp(24px,3vw,38px);border-radius:22px;border:1px solid var(--line)}
.d-kind .mono{display:block;margin-bottom:20px}
.d-kind ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.d-kind li{position:relative;padding-left:26px;font-size:16.5px;line-height:1.4}
.d-yes{background:var(--ink-2)}
.d-yes .mono{color:var(--signal)}
.d-yes li::before{content:"";position:absolute;left:0;top:.42em;width:9px;height:9px;border-radius:50%;background:var(--signal)}
.d-no .mono{color:var(--mute)}
.d-no li{color:var(--mute)}
.d-no li::before{content:"";position:absolute;left:0;top:.62em;width:11px;height:1.5px;background:var(--mute-2)}

/* 5 how it works */
.d-how{padding:clamp(100px,12vw,160px) 0;background:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.d-how h2{margin:24px 0 clamp(40px,5vw,64px)}
.d-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-2)}
.d-steps li{position:relative;padding:30px 24px 0 0}
.d-steps li + li{padding-left:24px;border-left:1px solid var(--line)}
.d-steps li::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--signal)}
.d-steps li + li::before{left:24px}
.d-steps .num{color:var(--signal)}
.d-steps h3{margin:14px 0 10px;font-size:clamp(1.2rem,1.7vw,1.5rem);font-weight:600;letter-spacing:-.03em;line-height:1.15}
.d-steps p{margin:0;font-size:15.5px;line-height:1.55;color:var(--mute)}

/* 6 privacy and the law */
.d-law{padding:clamp(100px,12vw,160px) 0}
.d-law-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,100px);align-items:start}
.d-law h2{margin-top:24px;max-width:12ch}
.d-law-list{list-style:none;margin:0;padding:0}
.d-law-list li{position:relative;padding:20px 0 20px 30px;border-top:1px solid var(--line);font-size:clamp(1.02rem,1.25vw,1.18rem);line-height:1.5;color:#3A3834}
.d-law-list li::before{content:"";position:absolute;left:0;top:1.75em;width:10px;height:10px;border-radius:50%;background:var(--signal)}

/* 7 questions */
.d-faq{padding:clamp(100px,12vw,160px) 0}
.d-faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,100px);align-items:start}
.d-faq h2{margin-top:24px;max-width:12ch}
.d-faq-list{border-top:1px solid var(--line-2)}
.d-faq-list details{border-bottom:1px solid var(--line);padding:22px 0}
.d-faq-list summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;font-weight:560;font-size:clamp(1.05rem,1.3vw,1.2rem);letter-spacing:-.015em}
.d-faq-list summary::-webkit-details-marker{display:none}
.d-faq-list summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M9 14h10M14 9v10' stroke='%23EEECE7' stroke-width='1.6'/%3E%3C/svg%3E") center/100% no-repeat;transition:transform .4s var(--ease),background-color .3s,border-color .3s}
.d-faq-list details[open] summary::after{transform:rotate(45deg);background-color:var(--signal);border-color:var(--signal)}
.d-faq-list details p{margin:14px 0 0;max-width:40em;font-size:16px;line-height:1.65;color:#B5B2AB}

/* 8 who we are */
.d-who-sec{padding:0 0 clamp(110px,13vw,180px)}
.d-who-grid{border-top:1px solid var(--line);padding-top:clamp(70px,8vw,110px)}
.d-who-sec h2{margin:24px 0 26px}
.d-who-sec .serif{color:var(--signal)}
.d-who-sec .lede{margin-bottom:34px;max-width:42em}

@media (max-width:980px){
  .d-grid,.d-anon-grid,.d-what-grid,.d-law-grid,.d-faq-grid{grid-template-columns:1fr}
  .d-steps{grid-template-columns:1fr 1fr;row-gap:36px}
  .d-steps li:nth-child(3){padding-left:0;border-left:0}
  .d-steps li:nth-child(3)::before{left:0}
}
@media (max-width:640px){
  .d-kinds-grid,.d-steps{grid-template-columns:1fr}
  .d-steps li + li{padding-left:0;border-left:0}
  .d-steps li + li::before{left:0}
  .d-msgs{padding:20px 16px}
}
.d-contact{display:inline-flex;flex-direction:column;gap:8px;margin:0 0 34px;padding:18px 22px;border-radius:16px;border:1px solid var(--line-2);background:var(--ink-2)}
.d-contact .mono{color:var(--mute)}
.d-contact p{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px}
.d-contact b{font-size:1.25rem;font-weight:600;letter-spacing:-.025em}
.d-contact a{font-size:15.5px;color:var(--text);text-decoration:underline;text-decoration-color:var(--signal);text-underline-offset:4px}

/* 1b fit check */
.d-check{padding:clamp(90px,11vw,150px) 0;background:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.d-check-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,96px);align-items:start}
.d-check-copy h2{margin:24px 0 26px;max-width:11ch}
.d-check-copy .serif{color:var(--signal)}
.d-check-copy .lede{color:#B5B2AB;margin-bottom:30px}
.d-check-points{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.d-check-points li{position:relative;padding-left:22px;font-size:15.5px;color:var(--mute)}
.d-check-points li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--signal)}

.fc{position:relative;border-radius:24px;background:#0F0F0E;border:1px solid var(--line-2);padding:clamp(24px,3vw,40px);box-shadow:0 60px 120px -50px rgba(0,0,0,.9);min-height:460px}
.fc-ns{margin:0;color:var(--mute)}
.fc-screen{display:none}
.fc-screen.on{display:block;animation:fcIn .5s var(--ease)}
@keyframes fcIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.fc-screen:focus{outline:none}
.fc-k{display:block;color:var(--mute-2);margin-bottom:22px}
.fc-field{display:grid;gap:10px;margin-bottom:20px}
.fc-field>span{font-size:15.5px;font-weight:500;letter-spacing:-.01em}
.fc select,.fc input[type=text],.fc input[type=email],.fc input[type=tel]{width:100%;height:52px;padding:0 16px;border-radius:12px;border:1px solid var(--line-2);background:#1A1918;color:var(--text);font:inherit;font-size:16px;outline:none;transition:border-color .25s}
.fc select{appearance:none;-webkit-appearance:none;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 5l4 4 4-4' fill='none' stroke='%238E8B84' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:14px}
.fc select:focus,.fc input:focus{border-color:var(--signal)}
.fc-meter{display:flex;align-items:center;gap:16px;margin:8px 0 26px;padding:16px 18px;border-radius:14px;background:#1A1918;border:1px dashed var(--line-2)}
.fc-bars{display:grid;grid-template-columns:repeat(3,26px);gap:5px;flex:none}
.fc-bars i{height:10px;border-radius:3px;background:#2A2926;transition:background .4s}
.fc-bars.big{grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:22px}
.fc-bars.big i{height:14px;border-radius:4px}
[data-fit="low"] .fc-bars i:nth-child(1),.fc-bars[data-fit="low"] i:nth-child(1){background:#C9C6BF}
[data-fit="medium"] .fc-bars i:nth-child(-n+2),.fc-bars[data-fit="medium"] i:nth-child(-n+2){background:var(--signal-2)}
[data-fit="high"] .fc-bars i,.fc-bars[data-fit="high"] i{background:var(--signal)}
.fc-meter-t{font-size:15px;color:var(--mute)}
[data-fit="high"] .fc-meter-t,[data-fit="medium"] .fc-meter-t{color:var(--text)}
.fc-go:disabled,.fc-next:disabled{opacity:.4;pointer-events:none}
.fc-prog{height:3px;border-radius:3px;background:#2A2926;overflow:hidden;margin-bottom:18px}
.fc-prog i{display:block;height:100%;width:0;background:var(--signal);transition:width .5s var(--ease)}
.fc-step fieldset{border:0;margin:0;padding:0;min-width:0}
.fc-q{display:block;margin:0 0 8px;padding:0;font-size:clamp(1.3rem,2vw,1.7rem);font-weight:600;letter-spacing:-.035em;line-height:1.15}
.fc-hint{margin:0 0 22px;color:var(--mute);font-size:15px}
.fc-opts{display:grid;gap:10px}
.fc-opt{position:relative;display:flex;align-items:center;gap:14px;min-height:54px;padding:12px 16px;border-radius:12px;border:1px solid var(--line-2);background:#1A1918;cursor:pointer;transition:border-color .25s,background .25s}
.fc-opt:hover{border-color:rgba(238,236,231,.35)}
.fc-opt input{position:absolute;opacity:0;width:1px;height:1px}
.fc-opt span{position:relative;padding-left:32px;font-size:15.5px;line-height:1.35}
.fc-opt span::before{content:"";position:absolute;left:0;top:50%;width:18px;height:18px;margin-top:-9px;border:1.5px solid var(--line-2);border-radius:50%;transition:all .25s}
.fc-opt input[type=checkbox]+span::before{border-radius:5px}
.fc-opt input:checked+span::before{border-color:var(--signal);background:var(--signal);box-shadow:inset 0 0 0 3px #1A1918}
.fc-opt:has(input:checked){border-color:var(--signal);background:rgba(255,106,61,.08)}
.fc-opt input:focus-visible+span{outline:2px solid var(--signal);outline-offset:6px;border-radius:4px}
.fc-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:26px}
.fc-back{font-size:15px;color:var(--mute);padding:10px 4px}
.fc-back:hover{color:var(--text)}
.fc-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fc-use{margin:4px 0 0;font-size:13.5px;line-height:1.55;color:var(--mute)}
.fc-use a{color:var(--text);text-decoration:underline;text-decoration-color:var(--signal);text-underline-offset:3px}
.fc-err{margin:14px 0 0;color:#FF8F7A;font-size:14.5px}
.fc-send.busy{opacity:.6;pointer-events:none}
.fc-fit{margin:0 0 12px;font-size:clamp(2rem,3.6vw,3rem);font-weight:600;letter-spacing:-.05em;line-height:1}
.fc-result[data-fit] .fc-fit{color:var(--text)}
.fc-msg{margin:0 0 18px;font-size:17px;line-height:1.55;color:#D9D6CF;max-width:34em}
.fc-note{margin:0 0 18px;padding:14px 16px;border-radius:12px;background:#1A1918;border-left:3px solid var(--signal);font-size:14.5px;line-height:1.55;color:var(--mute)}
.fc-next{margin:0;font-size:15.5px;color:var(--text)}
.fc-next a{text-decoration:underline;text-decoration-color:var(--signal);text-underline-offset:3px}
@media (max-width:980px){.d-check-grid{grid-template-columns:1fr}.fc{min-height:0}}

/* UK / US switch on the M22 Data pages */
.d-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.d-region{display:inline-flex;padding:3px;border-radius:99px;border:1px solid var(--line-2);background:rgba(255,255,255,.03)}
.d-region a{min-width:44px;padding:6px 14px;border-radius:99px;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-align:center;color:var(--mute);transition:color .25s,background .25s}
.d-region a:hover{color:var(--text)}
.d-region a[aria-current="page"]{background:var(--text);color:var(--void)}