/* Subpages of procestest.nl (voorbeelden, privacy, 404). Tokens and base components follow the landing page. */
:root{--bg:#fff;--surface:#fff;--fg:#1c1c1c;--muted:#6b6b6b;--soft:#f5f5f5;--line:#e4e4e4;--accent:#1c1c1c;--on-accent:#fff;--red:#b23e3e;--orange:#936619;--ease:cubic-bezier(.22,1,.36,1);color-scheme:light}
html[data-theme=dark]{--bg:#0b0b0b;--surface:#141414;--fg:#eee;--muted:#a3a3a3;--soft:#202020;--line:#303030;--accent:#eee;--on-accent:#111;--red:#f19b97;--orange:#e5bf78;color-scheme:dark}
@media(prefers-color-scheme:dark){html:not([data-theme=light]){--bg:#0b0b0b;--surface:#141414;--fg:#eee;--muted:#a3a3a3;--soft:#202020;--line:#303030;--accent:#eee;--on-accent:#111;--red:#f19b97;--orange:#e5bf78;color-scheme:dark}}
*{box-sizing:border-box}html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .3s,color .3s}
button,input{font:inherit;color:inherit}button{cursor:pointer;border:0;background:none}a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}h1,h2,h3,p,ol,ul{margin:0}ol,ul{padding:0;list-style:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
@media(max-width:480px){.wrap{padding:0 16px}}

/* Navigation and footer (as on the landing page) */
.nav{position:sticky;top:0;z-index:50;height:64px;display:flex;align-items:center;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.scrolled{border-bottom-color:var(--line)}.nav .wrap{position:relative;display:flex;align-items:center;width:100%}
.brand{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:650;letter-spacing:-.035em}.brand .logo{width:24px;height:24px;display:block;flex:none}
.nav-links{display:flex;gap:32px;position:absolute;left:50%;transform:translateX(-50%)}.nav-links a{font-size:13px;font-weight:500;color:var(--muted);transition:color .2s}.nav-links a:hover,.nav-links a[aria-current]{color:var(--fg)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.toggle{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;color:var(--muted);transition:background .2s,color .2s}.toggle:hover{background:var(--soft);color:var(--fg)}
footer{border-top:1px solid var(--line);padding:40px 0}.foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}.foot .brand .logo{width:18px;height:18px}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:12px;color:var(--muted)}.foot-links a:hover{color:var(--fg)}.foot-v{font-size:11px;color:var(--muted)}
@media(max-width:760px){.nav-links{display:none}}

/* Buttons and small type */
.primary{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:40px;padding:10px 20px;border-radius:8px;background:var(--accent);color:var(--on-accent);font-size:13px;font-weight:600;white-space:nowrap;transition:background .3s,color .3s,transform .22s var(--ease)}
.primary:hover{background:color-mix(in srgb,var(--accent) 88%,var(--muted))}.primary:active{transform:translateY(1px)}
.secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:10px 18px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:13px;font-weight:600;white-space:nowrap;transition:background .2s,border-color .2s}.secondary:hover{background:var(--soft)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--line);border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.note{margin-top:14px;font-size:12px;color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--fg)}.dot.aandacht,.dot.geblokkeerd{background:var(--orange)}.dot.gefaald{background:var(--red)}
.reveal{opacity:0;transform:translateY(8px);transition:opacity .42s var(--ease),transform .42s var(--ease)}.reveal.in{opacity:1;transform:none}
.grid-bg{position:absolute;inset:0;z-index:0;background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:22px 22px;opacity:.5;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000,transparent);mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000,transparent);pointer-events:none}
section{padding:96px 0}@media(max-width:760px){section{padding:64px 0}}
.sec-h{max-width:560px}.sec-h h2{margin-top:12px;font-size:clamp(26px,3.2vw,36px);line-height:1.1;font-weight:650;letter-spacing:-.04em}.sec-h p{margin-top:12px;color:var(--muted);font-size:15px}

/* Example: one centered column, as the pilot page */
.ex-hero{position:relative;padding:72px 0 0;text-align:center}
.ex-hero .wrap{position:relative;z-index:1}
.back{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--muted);transition:color .2s}.back:hover{color:var(--fg)}
.ex-hero h1{max-width:820px;margin:20px auto 0;font-size:clamp(38px,5.6vw,64px);line-height:1.02;font-weight:650;letter-spacing:-.045em;text-wrap:balance}
.ex-hero h1 span{display:block;margin-top:.3em;font-size:.56em;line-height:1.12;letter-spacing:-.035em;color:var(--muted)}
.lead{max-width:520px;margin-top:22px;color:var(--muted);font-size:17px;text-wrap:pretty}
.ex-hero .lead{margin:22px auto 0}
.ex-hero .ctas{justify-content:center;margin-top:30px}
@media(max-width:480px){.ex-hero{padding-top:48px}.ex-hero .ctas>*{flex:1 1 100%}}
.ex-sec{padding:120px 0 0}.ex-demo{padding-top:152px}
.ex-final{margin-top:120px;padding:120px 0}.ex-related{padding:0 0 120px}.ex-related .cards{margin-top:40px}
@media(max-width:760px){.ex-sec{padding-top:88px}.ex-demo{padding-top:112px}.ex-final{margin-top:88px;padding:88px 0}.ex-related{padding-bottom:88px}}
/* Centered section heading and column, shared by the example and pilot pages */
.c-head{max-width:560px;margin:0 auto;text-align:center}
.c-head h2{font-size:clamp(28px,4vw,40px);line-height:1.1;font-weight:650;letter-spacing:-.04em;text-wrap:balance}
.c-head p{margin-top:14px;color:var(--muted);font-size:16px;text-wrap:pretty}
.c-col{max-width:600px;margin:40px auto 0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.run{border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden;box-shadow:0 30px 80px -40px color-mix(in srgb,var(--fg) 30%,transparent)}
.run-h{display:flex;align-items:center;gap:9px;height:52px;padding:0 16px;border-bottom:1px solid var(--line)}.run-h .logo{width:20px;height:20px}.run-h b{font-size:14px;font-weight:650;letter-spacing:-.03em}
.run-h small{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.run-b{display:flex;flex-direction:column;padding:20px 18px 18px}
.ask{position:relative;align-self:flex-end;max-width:92%;padding:11px 14px;border-radius:14px 14px 4px 14px;background:var(--soft);font-size:13.5px;line-height:1.55}
.chead{display:flex;justify-content:space-between;margin:22px 0 12px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums}
.checks li{position:relative;padding:0 0 12px 30px;font-size:13.5px;font-weight:600;line-height:19px;transition:color .3s}
.checks li small{display:block;margin-top:1px;font-size:12px;font-weight:500;color:var(--muted)}
.checks li.let,.checks li.blok{color:var(--orange)}
.ic{position:absolute;left:0;top:0;width:19px;height:19px;overflow:visible}
.ic circle{fill:none;stroke:currentColor;stroke-width:1.5;transform-box:fill-box;transform-origin:center;transition:stroke .3s}
.ic path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16;stroke-dashoffset:0;transition:stroke-dashoffset .4s var(--ease) .1s}
.verdict{margin-top:8px;padding:14px 15px;border:1px solid var(--line);border-radius:12px;transition:opacity .42s var(--ease),transform .42s var(--ease)}
.vh{display:flex;align-items:center;gap:9px}.vh b{font-size:15px;letter-spacing:-.03em}.vh small{margin-left:auto;font-size:11.5px;color:var(--muted);white-space:nowrap}
.badge{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;flex:none;font-size:13px;font-weight:700;color:var(--on-accent);background:var(--accent)}
.verdict.geblokkeerd .badge,.verdict.aandacht .badge{color:var(--orange);background:color-mix(in srgb,var(--orange) 14%,var(--surface))}.verdict.geblokkeerd b,.verdict.aandacht b{color:var(--orange)}
.badge svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.verdict p{margin-top:10px;padding:10px 12px;border-radius:8px;background:var(--soft);font-size:12.5px;line-height:1.5}
/* Played once when the card comes into view; without JS or with reduced motion it shows the end state. */
.js .run:not(.played) .checks li:not(.on){color:var(--muted)}
.js .run:not(.played) .checks li:not(.on) circle{stroke:var(--line)}
.js .run:not(.played) .checks li:not(.on) path{stroke-dashoffset:16}
.js .run:not(.played) .checks li.cur circle{stroke:var(--fg);stroke-dasharray:3.2 2.7;animation:spin 3s linear infinite}
.js .run:not(.played) .verdict:not(.on){opacity:0;transform:translateY(8px)}
@keyframes spin{to{transform:rotate(360deg)}}

/* Example: what Procestest did */
.flow{counter-reset:s}
.flow li{position:relative;padding:4px 0 26px 48px;font-size:15px;font-weight:500;counter-increment:s}
.flow li:before{content:counter(s);position:absolute;left:0;top:0;display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--line);border-radius:50%;background:var(--surface);font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.flow li:after{content:"";position:absolute;left:15px;top:34px;bottom:4px;width:1px;background:var(--line)}.flow li:last-child:after{display:none}.flow li:last-child{padding-bottom:0}

/* Example: what stood out, marked like the checks (~ attention, ! blocked, i information) */
.finds{display:grid;gap:16px}
.find{position:relative;padding:22px 24px 22px 58px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.find .ic{left:24px;top:25px;color:var(--muted)}.find.aandachtspunt .ic,.find.blokkade .ic{color:var(--orange)}
.find h3{font-size:17px;line-height:1.35;font-weight:650;letter-spacing:-.02em}
.find p{margin-top:8px;color:var(--muted);font-size:14.5px}

/* Example: variants to copy */
.variants{border-top:1px solid var(--line)}
.variants li{display:flex;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
.variants q{flex:1;font-size:15px;quotes:none}
.copy{display:inline-flex;align-items:center;gap:7px;flex:none;min-height:34px;padding:6px 12px;border:1px solid var(--line);border-radius:8px;font-size:12px;font-weight:600;color:var(--muted);transition:color .2s,border-color .2s,background .2s}
.copy:hover{color:var(--fg);border-color:var(--muted)}.copy.done{color:var(--fg)}
.copy svg{flex:none}

/* Closing call to action */
.final{text-align:center;border-top:1px solid var(--line)}
.final h2{max-width:760px;margin:0 auto;font-size:clamp(30px,4.4vw,52px);line-height:1.05;font-weight:650;letter-spacing:-.045em;text-wrap:balance}
.final p{margin:18px auto 0;max-width:440px;color:var(--muted)}.final .ctas{justify-content:center;margin-top:30px}

/* Example cards (overview and related) */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:20px}
.card{display:flex;flex-direction:column;padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--surface);transition:border-color .25s,transform .35s var(--ease)}
.card:hover{border-color:var(--muted);transform:translateY(-2px)}
.card-top{display:flex;align-items:center;gap:12px}.card-top .meta{font-size:12.5px;font-weight:500;color:var(--muted)}
.card h3{margin-top:14px;font-size:20px;line-height:1.25;font-weight:650;letter-spacing:-.03em}
.card .kop{margin-top:6px;color:var(--muted);font-size:14px}
.card .ask{align-self:stretch;max-width:none;margin-top:20px;font-size:13px}.card .ask span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-foot{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:20px;font-size:12.5px;font-weight:600;color:var(--muted)}
.card-foot .go{margin-left:auto;transition:transform .3s var(--ease),color .2s}.card:hover .go{transform:translateX(3px);color:var(--fg)}
.card[hidden]{display:none}

/* Overview */
.ov-hero{position:relative;padding:88px 0 48px;text-align:center}
.ov-hero .wrap{position:relative;z-index:1}
.ov-hero h1{max-width:820px;margin:0 auto;font-size:clamp(38px,6vw,68px);line-height:1.02;font-weight:650;letter-spacing:-.045em;text-wrap:balance}
.ov-hero h1 span{display:block;color:var(--muted)}
.ov-hero .lead{margin:22px auto 0;max-width:500px}
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:40px auto 0}
.filters button{min-height:34px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;font-size:13px;font-weight:600;color:var(--muted);transition:color .2s,background .2s,border-color .2s}
.filters button:hover{color:var(--fg)}.filters button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.ov-list{padding-top:24px}

/* Text pages (privacy) and 404 */
.doc{max-width:720px;padding:72px 0 96px}
.doc h1{margin-top:14px;font-size:clamp(34px,5vw,52px);line-height:1.05;font-weight:650;letter-spacing:-.045em}
.doc .lead{margin-top:16px}
.doc h2{margin-top:48px;font-size:20px;font-weight:650;letter-spacing:-.025em}
.doc p,.doc ul{margin-top:12px;color:var(--muted);font-size:15px}.doc ul{padding-left:20px;list-style:disc}.doc li{margin-top:6px}
.doc a{text-decoration:underline;text-underline-offset:3px}.doc strong{color:var(--fg);font-weight:600}
.lost{position:relative;min-height:calc(100vh - 64px - 120px);display:grid;place-items:center;text-align:center;padding:80px 0}
.lost .wrap{position:relative;z-index:1}.lost h1{margin-top:16px;font-size:clamp(36px,6vw,64px);line-height:1.02;font-weight:650;letter-spacing:-.045em}
.lost p{margin:18px auto 0;max-width:420px;color:var(--muted)}.lost .ctas{justify-content:center;margin-top:30px}

/* Pilot: the sign-up page shared on LinkedIn. One centered column: hero, a real test, what happens next, the form. */
html:has(.pl-hero){scroll-behavior:smooth}.pl-sec{scroll-margin-top:64px}
.pl-hero{position:relative;padding:120px 0 0;text-align:center}
.pl-hero .wrap{position:relative;z-index:1}
/* Each headline line fits on one line from a 375px phone up; the product name never breaks at its hyphen. */
.pl-hero h1{max-width:820px;margin:0 auto;font-size:clamp(32px,8.2vw,60px);line-height:1.04;font-weight:650;letter-spacing:-.045em}
.pl-hero h1>span:last-child{display:block;color:var(--muted)}.nw{white-space:nowrap}
.pl-hero .lead{max-width:500px;margin:24px auto 0;font-size:18px;text-wrap:balance}
.pl-hero .ctas{justify-content:center;margin-top:32px}
.pl-hero .primary,.pl-card .primary{min-height:48px;padding:12px 26px;font-size:14px}
.pl-hero .note{margin-top:16px;font-size:13px}.pl-hero .note b{color:var(--fg);font-weight:600}
@media(max-width:480px){.pl-hero{padding-top:72px}.pl-hero .ctas>*{flex:1 1 100%}}
.pl-sec{padding:128px 0}.pl-sec+.pl-sec{padding-top:0}
@media(max-width:760px){.pl-sec{padding:88px 0}.pl-sec+.pl-sec{padding-top:0}}
/* A little more room between the hero and the demo, so the page is calm on arrival. */
#test{padding-top:184px}@media(max-width:760px){#test{padding-top:120px}}
.demo .run{max-width:600px;margin:48px auto 0;border-radius:18px}
.demo-note{max-width:420px;margin:18px auto 0;text-align:center;font-size:12px;line-height:1.6;color:var(--muted)}
/* The run card as a chat, styled like the front-page demo. First a small panel with only the header and a large
   input box, which comes into focus; after sending, the panel grows to the full report (height set by the script),
   the input box becomes the small follow-up field, the task moves up and the checks follow. */
.run.chat{display:flex;flex-direction:column;transition:height .9s var(--ease),filter .45s cubic-bezier(.33,0,.2,1),opacity .45s cubic-bezier(.33,0,.2,1)}
.run.chat .run-b{flex:1 1 auto;min-height:0;overflow:hidden}
.js .run.chat:not(.sent) .run-b{display:none}
.js .run.chat:not(.live){filter:blur(4px);opacity:.55}
.run.instant,.run.instant *{transition:none!important}
.run .composer{flex:none;padding:14px}
.run .cbox{display:flex;align-items:flex-end;gap:10px;padding:12px 12px 12px 16px;border:1px solid color-mix(in srgb,var(--fg) 26%,var(--line));border-radius:14px;transition:border-color .5s}
.run.sent .cbox{border-color:var(--line)}
.run .ctext{flex:1;min-width:0;min-height:76px;font-size:16px;line-height:1.55;transition:min-height .8s var(--ease),font-size .5s var(--ease)}
.run.sent .ctext{min-height:24px;font-size:13px}
@media(max-width:560px){.run .ctext{font-size:15px}
 /* On a phone the chat stays compact: the checks without their page names, tighter spacing. */
 .run.chat .run-b{padding:16px 14px 12px}.run.chat .checks li small{display:none}.run.chat .checks li{padding-bottom:10px}
 .run.chat .chead{margin:16px 0 10px}.run.chat .verdict{margin-top:6px;padding:12px}.run.chat .verdict p{margin-top:8px;font-size:12px}
 .run.chat .composer{padding:10px 14px 14px}}
.run .ph{color:var(--muted)}
.caret{display:inline-block;width:1px;height:15px;margin-left:1px;background:var(--fg);vertical-align:middle;animation:blink 1s step-end infinite}@keyframes blink{50%{opacity:0}}
.run .send{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--soft);color:var(--muted);transition:background .25s,color .25s,transform .14s,width .6s var(--ease),height .6s var(--ease)}
.run .send.ready{background:var(--accent);color:var(--on-accent)}.run .send.pressed{transform:scale(.9)}
.run.sent .send{width:28px;height:28px;border-radius:8px}
.run.chat .ask,.run.chat .chead,.run.chat .checks li,.run.chat .run-h small{transition:opacity .42s var(--ease),transform .42s var(--ease),color .3s}
.js .run.chat:not(.asked) .ask,.js .run.chat:not(.shown) .chead,.js .run.chat:not(.shown) .checks li{opacity:0;transform:translateY(6px)}
.js .run.chat:not(.played) .run-h small{opacity:0}

.journey{max-width:520px;margin:48px auto 0}
.journey li{position:relative;padding:0 0 36px 60px}.journey li:last-child{padding-bottom:0}
.journey li:before,.journey li:after{content:"";position:absolute;left:18px;top:44px;bottom:8px;width:1px;background:var(--line)}
.journey li:after{background:var(--fg);transform:scaleY(0);transform-origin:top;transition:transform .6s var(--ease)}
.journey li:last-child:before,.journey li:last-child:after{display:none}
.jn{position:absolute;top:0;left:0;z-index:1;display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:var(--surface);font-size:13px;font-weight:650;color:var(--muted);font-variant-numeric:tabular-nums;transition:background .4s,color .4s,border-color .4s}
.journey h3{padding-top:6px;font-size:18px;font-weight:650;letter-spacing:-.025em}
.journey p{margin-top:6px;color:var(--muted);font-size:15px}
.journey li.on .jn{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.journey li.on:after{transform:none}
.js .journey li h3,.js .journey li p{transition:opacity .5s var(--ease)}
.js .journey li:not(.on) h3,.js .journey li:not(.on) p{opacity:.45}

.pl-card{max-width:520px;margin:40px auto 0;padding:32px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:0 30px 80px -40px color-mix(in srgb,var(--fg) 30%,transparent)}
@media(max-width:480px){.pl-card{padding:24px 20px}}
.pl-card .fields{display:grid;gap:16px}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}.fld label{font-size:13px;font-weight:600}.fld label span{font-weight:400;color:var(--muted)}
.fld input{width:100%;min-height:44px;padding:10px 13px;border:1px solid var(--line);border-radius:9px;background:var(--surface);font-size:16px;line-height:1.4;transition:border-color .2s,box-shadow .2s}
.fld input::placeholder{color:var(--muted);opacity:.7}
.fld input:focus{outline:none;border-color:var(--fg);box-shadow:0 0 0 3px color-mix(in srgb,var(--fg) 10%,transparent)}
.fld [aria-invalid=true]{border-color:var(--red)}.fld [aria-invalid=true]:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 16%,transparent)}
.ferr{font-size:12.5px;color:var(--red)}.ferr:empty{display:none}
.pl-card .primary{width:100%;margin-top:24px}.pl-card .primary[disabled]{opacity:.6;cursor:progress}
.pl-fine{margin-top:14px;font-size:12px;color:var(--muted);text-align:center;text-wrap:pretty}.pl-fine a{text-decoration:underline;text-underline-offset:3px}.pl-fine.bad{color:var(--red)}
.pl-done{display:flex;flex-direction:column;align-items:center;text-align:center;animation:plin .5s var(--ease) both}.pl-done[hidden]{display:none}
@keyframes plin{from{opacity:0;transform:translateY(8px)}}
.pl-badge{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--accent);color:var(--on-accent)}
.pl-badge svg,.pl-next svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.pl-badge svg{width:24px;height:24px;stroke-width:2.4;stroke-dasharray:20;stroke-dashoffset:20;animation:draw .5s var(--ease) .35s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.pl-done h3{margin-top:20px;font-size:26px;font-weight:650;letter-spacing:-.035em}.pl-done h3:focus{outline:none}
.pl-done>p{max-width:400px;margin-top:10px;color:var(--muted);font-size:15px}.pl-done>p b{color:var(--fg);font-weight:600;overflow-wrap:anywhere}
.pl-next{align-self:stretch;margin-top:28px;padding-top:20px;border-top:1px solid var(--line);display:grid;gap:12px;text-align:left}
.pl-next li{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:500;color:var(--muted)}
.pl-next li.ok{color:var(--fg)}.pl-next svg{width:20px;height:20px;padding:3px;border-radius:50%;background:var(--accent);color:var(--on-accent);stroke-width:3}
.pl-next i{flex:none;width:20px;height:20px;border:1px dashed var(--line);border-radius:50%}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}