/* qurus hero card for brentmilliken.com.
   Source: qurus.ch hero stage (qurus-site/src/index.html), via the 03.11.2026 handover bundle.
   Re-scoped under .qh with a CSS parser: the bundle's copy had ".qh" written into @media and @keyframes, which broke the loop.
   CSS only. Fonts self-hosted in /qurus/fonts (SIL Open Font Licence, see the OFL files). */
@font-face{font-family:'Schibsted Grotesk';src:url(/qurus/fonts/sg.woff2) format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(/qurus/fonts/pm4.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(/qurus/fonts/pm5.woff2) format('woff2');font-weight:500;font-display:swap}
.qh{
  --paper:#FAF9F7; --paper-warm:#F0EEE9; --surface:#FFFFFF; --rule:#DCD8D0; --border-strong:#6B6E75;
  --ink:#141517; --ink-2:#2C2F33; --text-body:#4A4D53; --text-muted:#5C5F66;
  --dark-muted:#B4B7BD; --dark-label:#8A8D93; --dark-rule:#3A3D42;
  --thread:#C8102E; --thread-text:#9E0F26; --thread-dark:#FF5A66;
  --check-bg:#F7EFDF; --check-dot:#B7791F; --check-text:#6B4A12;
  --ok-bg:#E7EFE9; --ok-text:#3F6B4E;
  --shadow-shot:0 30px 60px -40px rgba(20,21,23,.35);
  --font-sans:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-serif:"Newsreader",Georgia,serif;
  --gutter:16px; --folio:88px; --max:1264px;
  --hit:#FBEDEE; --check-border:#E6D3AE; --chip-border:#CFC9BE; --t1:#E4E3E0; --t2:#F6DADD; --header-bg:rgba(250,249,247,.96); --band:#141517;
  color-scheme:light;
  font-family:var(--font-sans);color:var(--ink);-webkit-font-smoothing:antialiased}
.qh *,.qh *::before,.qh *::after{box-sizing:border-box}
.qh h4,.qh p,.qh figure{margin:0}
.qh .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.qh .label{font-family:var(--font-mono);font-size:13px;line-height:1.3;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
.qh .tag{display:inline-block;flex:none;padding:1px;background:var(--ink);clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,0 100%)}
.qh .tag>span{display:block;background:var(--surface);clip-path:polygon(0 0,calc(100% - 6.5px) 0,100% 6.5px,100% 100%,0 100%);
  padding:2px 10px 2px 8px;font-family:var(--font-mono);font-size:13px;color:var(--ink)}
/* Hero stage (02.11.2026): a 15-second loop of the product in four steps. 1 The client adds records on
   their phone; 2 they reach the lawyer's timeline out of order and sort into date order; 3 exhibit numbers
   and one "To check"; 4 the playbook for the case type and court shows what is missing,the lawyer asks,and the request reaches the client's phone. Every element's resting style is the last frame,so reduced
   motion and paused show the finished file. Invented sample case. */
.qh .stage{margin:40px 0 0;max-width:600px}
.qh .stage-pause{position:absolute;opacity:0;width:1px;height:1px}
.qh .stagehead{display:flex;align-items:flex-end;gap:6px;margin:0 0 18px}
.qh .steps{flex:1;min-width:0;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.qh .steps .s1{--c:var(--ink);--t:var(--t1)}.qh .steps .s2{--c:var(--thread-text);--t:var(--t2)}.qh .steps .s3{--c:var(--check-text);--t:var(--check-bg)}.qh .steps .s4{--c:var(--ok-text);--t:var(--ok-bg)}
.qh .steps li{min-width:0}
.qh .steps i{display:block;height:3px;border-radius:2px;background:var(--rule);overflow:hidden;margin-bottom:8px}
.qh .steps i::before{content:"";display:block;height:100%;background:var(--c);transform-origin:0 50%}
.qh .steps span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:999px;padding:5px 3px;
  font-size:10px;font-weight:600;letter-spacing:0;text-align:center;background:var(--t);color:var(--c);transition:none}
.qh .steps span b{display:none;font-weight:inherit}
.qh .steps .s4 span{background:var(--c);color:var(--surface)}
.qh .anim{--h:58px;position:relative;min-height:300px}
.qh .phone{position:absolute;left:0;top:0;width:188px;height:380px;transform:scale(.74);transform-origin:0 0;z-index:2;
  background:#141517;border-radius:32px;padding:9px;box-shadow:0 28px 50px -24px rgba(20,21,23,.55)}
.qh .phone .notch{position:absolute;left:50%;top:15px;width:54px;height:14px;margin-left:-27px;border-radius:8px;background:#141517;z-index:3}
.qh .pscreen{position:relative;height:100%;border-radius:24px;background:var(--paper);padding:38px 12px 12px;overflow:hidden}
.qh .pbody{height:100%;display:flex;flex-direction:column;gap:7px}
.qh .pscreen .label{font-size:10px}
.qh .pscreen h4{margin:2px 0 0;font-size:16px;line-height:1.15;font-weight:600;letter-spacing:-.01em}
.qh .pscreen .who{margin:0 0 6px;font-size:11px;color:var(--text-muted)}
.qh .prow{position:relative;display:grid;grid-template-columns:24px 1fr 18px;gap:8px;align-items:center;background:var(--surface);
  border:1px solid var(--rule);border-radius:10px;padding:8px}
.qh .prow svg{width:24px;height:24px;display:block}
.qh .prow b{display:block;font-size:12px;line-height:1.2;font-weight:600}
.qh .prow small{display:block;font-size:10px;line-height:1.2;color:var(--text-muted);margin-top:1px}
.qh .prow .bar{display:block;height:3px;margin-top:5px;border-radius:2px;background:var(--rule);overflow:hidden}
.qh .prow .bar i{display:block;height:100%;background:var(--ink);transform-origin:0 50%}
.qh .prow .ok{width:18px;height:18px;border-radius:50%;background:var(--ok-bg);color:var(--ok-text);font-size:11px;line-height:18px;text-align:center;font-weight:700}
.qh .tapring{position:relative}
.qh .tapring::after{content:"";position:absolute;left:14px;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;
  border:2px solid var(--ink);opacity:0;pointer-events:none}
.qh .psend{margin-top:auto;border-radius:20px;background:var(--ink);color:var(--surface);font-size:11px;font-weight:500;text-align:center;padding:9px 6px}
.qh .pnote{position:absolute;left:8px;right:8px;top:34px;z-index:2;background:var(--surface);border-radius:14px;padding:10px 12px;
  box-shadow:0 12px 24px -10px rgba(20,21,23,.45);border:1px solid var(--rule);font-size:11px;line-height:1.3}
.qh .pnote .label{display:block;font-size:9px;color:var(--thread-text)}
.qh .pnote b{display:block;margin-top:3px;font-size:13px;font-weight:600}
.qh .pnote .add{display:inline-block;margin-top:8px;padding:4px 12px;border-radius:12px;background:var(--ink);color:var(--surface);font-weight:500}
.qh .lcard{position:relative;margin:28px 0 0 124px;background:var(--surface);border:1px solid var(--rule);border-radius:12px;
  box-shadow:var(--shadow-shot);padding:14px 14px 12px}
.qh .lcard .head{display:flex;justify-content:space-between;gap:8px;align-items:center;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.qh .lcard .head b{font-weight:600;font-size:14px;white-space:nowrap}
.qh .lcard .head b span{display:none}
.qh .step{position:relative;flex:none;display:inline-grid;font-size:11px;font-weight:600;letter-spacing:.02em;line-height:1}
.qh .step>span{grid-area:1/1;display:inline-flex;align-items:center;gap:6px;justify-self:end;background:var(--ink);color:var(--surface);
  border-radius:999px;padding:6px 10px 6px 8px;white-space:nowrap;opacity:0}
.qh .step>span::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7}
.qh .step .t2{background:var(--thread)}.qh .step .t3{background:var(--check-text)}.qh .step .t4{background:var(--ok-text)}
.qh .step>.t4{opacity:1}
.qh .lrows{position:relative;height:calc(var(--h) * 3);margin-top:4px}
.qh .lrows::before{content:"";position:absolute;left:4px;top:18px;bottom:calc(var(--h) - 18px);border-left:1.25px solid var(--thread);transform-origin:50% 0}
.qh .lrow{position:absolute;left:0;right:0;height:var(--h);padding:9px 0 0 18px}
.qh .lrow::before{content:"";position:absolute;left:0;top:14px;width:9px;height:9px;border-radius:50%;background:var(--surface);border:1.25px solid var(--thread)}
.qh .lrow.c{top:0}.qh .lrow.a{top:var(--h)}.qh .lrow.b{top:calc(var(--h) * 2)}
.qh .lrow .l1{display:flex;justify-content:space-between;align-items:center;gap:8px}
.qh .lrow .d{font-family:var(--font-mono);font-size:12px;color:var(--text-body);font-variant-numeric:tabular-nums slashed-zero;white-space:nowrap}
.qh .lrow .d span{display:none;color:var(--text-muted)}
.qh .lrow .w{margin-top:3px;font-size:14px;line-height:1.3;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qh .lrow .tag>span{font-size:11px;padding:1px 8px 1px 6px}
.qh .pill{display:inline-block;margin-left:6px;padding:0 6px;border-radius:4px;background:var(--check-bg);color:var(--check-text);font-size:11px;font-weight:600;vertical-align:1px}
.qh .lpanel{display:grid;margin-top:6px}
.qh .lpanel>*{grid-area:1/1;min-width:0}
.qh .lfoot{align-self:start;display:flex;gap:8px;align-items:flex-start;background:var(--check-bg);color:var(--check-text);border-radius:6px;padding:8px 10px;font-size:12px;line-height:1.4;opacity:0}
.qh .lfoot .dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--check-dot);margin-top:6px}
.qh .pb{border:1px solid var(--rule);border-radius:8px;padding:9px 10px 6px;font-size:12px;line-height:1.3}
.qh .pb .label{font-size:10px;color:var(--thread-text)}
.qh .pb .pbh b{display:block;margin:2px 0 4px;font-size:13px;font-weight:600;overflow-wrap:anywhere}
.qh .pb .soon{float:right;border:1px solid var(--thread-text);color:var(--thread-text);border-radius:999px;padding:0 6px;font-size:9px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;line-height:15px}
.qh .pbr{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:24px;border-top:1px solid var(--rule)}
.qh .pbr .m{color:var(--ok-text);font-weight:700;margin-right:6px}
.qh .pbr.miss .m{color:var(--check-dot)}
.qh .pbr.miss>span:first-child{font-weight:600}
.qh .askchip{position:relative;display:inline-grid;flex:none}
.qh .askchip>span{grid-area:1/1;justify-self:end;border-radius:4px;padding:3px 8px;font-size:11px;font-weight:600;white-space:nowrap}
.qh .askchip .a0{background:var(--ink);color:var(--surface);opacity:0}
.qh .askchip .a1{background:var(--ok-bg);color:var(--ok-text)}
.qh .askchip::after{content:"";position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:2px solid var(--ink);opacity:0}
.qh .stage .cap{margin-top:14px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:var(--font-mono);font-size:13px;color:var(--text-muted)}
.qh .pausebtn{position:relative;flex:none;display:grid;place-items:center;width:32px;height:32px;margin:0 0 -4px 4px;border:1px solid var(--rule);border-radius:50%;cursor:pointer;color:var(--ink);font-size:9px;letter-spacing:0}
.qh .pausebtn::after{content:"";position:absolute;inset:-6px}
.qh .pausebtn:hover{background:var(--paper-warm)}
.qh .pausebtn .p2,.qh .stage-pause:checked~.stagehead .p1{display:none}
.qh .stage-pause:checked~.stagehead .p2{display:inline}
.qh .stage-pause:focus-visible~.stagehead .pausebtn{outline:2px solid var(--ink);outline-offset:2px}
/* Pause freezes the loop where it is (every part,pseudo-elements too); Play carries on from there. */
.qh .stage-pause:checked~.anim *,.qh .stage-pause:checked~.anim *::before,.qh .stage-pause:checked~.anim *::after,.qh .stage-pause:checked~.stagehead *,.qh .stage-pause:checked~.stagehead *::before{animation-play-state:paused!important}
@media (min-width:480px){
  .qh .anim{--h:62px;min-height:400px}
  .qh .phone{transform:none}
  .qh .lcard{margin:40px 0 0 172px;padding:16px 18px 14px}
  .qh .lrow .d span,.qh .lcard .head b span{display:inline}
  .qh .lrow .d{font-size:13px}.qh .lrow .w{font-size:15px}
  .qh .lfoot{font-size:13px}
  .qh .steps span{font-size:12px;padding:6px 10px}
  .qh .steps span b{display:inline}
}
/* the loop: 15 s,every timing as a share of it (1% = 0.15 s). Each step's chip lights up 0.5 s
   before the step moves,so the viewer knows what comes next; the playbook gets the most time. */
.qh .anim .pbody,.qh .anim .lbody{animation:qfade 15s linear infinite}
.qh .steps .s1 i::before{animation:qseg1 15s linear infinite}.qh .steps .s2 i::before{animation:qseg2 15s linear infinite}
.qh .steps .s3 i::before{animation:qseg3 15s linear infinite}.qh .steps .s4 i::before{animation:qseg4 15s linear infinite}
.qh .steps .s1 span{animation:qact1 15s linear infinite}.qh .steps .s2 span{animation:qact2 15s linear infinite}
.qh .steps .s3 span{animation:qact3 15s linear infinite}.qh .steps .s4 span{animation:qact4 15s linear infinite}
.qh .step .t1{animation:qact1o 15s linear infinite}.qh .step .t2{animation:qact2o 15s linear infinite}
.qh .step .t3{animation:qact3o 15s linear infinite}.qh .step .t4{animation:qact4o 15s linear infinite}
.qh .r1 .bar i{animation:qbar1 15s linear infinite}.qh .r2 .bar i{animation:qbar2 15s linear infinite}.qh .r3 .bar i{animation:qbar3 15s linear infinite}
.qh .r1 .ok{animation:qok1 15s linear infinite}.qh .r2 .ok{animation:qok2 15s linear infinite}.qh .r3 .ok{animation:qok3 15s linear infinite}
.qh .r1::after{animation:qtap1 15s linear infinite}.qh .r2::after{animation:qtap2 15s linear infinite}.qh .r3::after{animation:qtap3 15s linear infinite}
.qh .psend{animation:qsend 15s linear infinite}
.qh .lrow.a{animation:qrowA 15s ease-out infinite}.qh .lrow.b{animation:qrowB 15s ease-out infinite}.qh .lrow.c{animation:qrowC 15s ease-out infinite}
.qh .lrows::before{animation:qline 15s ease-out infinite}
.qh .lrow.c .tag{animation:qtagC 15s ease-out infinite}.qh .lrow.a .tag{animation:qtagA 15s ease-out infinite}.qh .lrow.b .tag{animation:qtagB 15s ease-out infinite}
.qh .pill{animation:qchk 15s ease-out infinite}.qh .lfoot{animation:qnote 15s ease-out infinite}
.qh .pb{animation:qpb 15s ease-out infinite}.qh .pbr.p1{animation:qpb1 15s ease-out infinite}.qh .pbr.p2{animation:qpb2 15s ease-out infinite}.qh .pbr.p3{animation:qpb3 15s ease-out infinite}
.qh .askchip .a0{animation:qask0 15s linear infinite}.qh .askchip .a1{animation:qask1 15s linear infinite}.qh .askchip::after{animation:qasktap 15s linear infinite}
.qh .pnote{animation:qpnote 15s ease-out infinite}
@keyframes qfade{0%{opacity:0}2%,95%{opacity:1}99%,100%{opacity:0}}
@keyframes qseg1{0%{transform:scaleX(0);opacity:1}27%,96%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes qseg2{0%,27%{transform:scaleX(0);opacity:1}41%,96%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes qseg3{0%,41%{transform:scaleX(0);opacity:1}58%,96%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes qseg4{0%,58%{transform:scaleX(0);opacity:1}93%,96%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes qact1{0%,26.5%{background:var(--c);color:var(--surface)}27.5%,100%{background:var(--t);color:var(--c)}}
@keyframes qact2{0%,26.5%{background:var(--t);color:var(--c)}27.5%,40.5%{background:var(--c);color:var(--surface)}41.5%,100%{background:var(--t);color:var(--c)}}
@keyframes qact3{0%,40.5%{background:var(--t);color:var(--c)}41.5%,57.5%{background:var(--c);color:var(--surface)}58.5%,100%{background:var(--t);color:var(--c)}}
@keyframes qact4{0%,57.5%{background:var(--t);color:var(--c)}58.5%,100%{background:var(--c);color:var(--surface)}}
@keyframes qact1o{0%,27%{opacity:1;transform:none}28.5%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes qact2o{0%,27%{opacity:0;transform:translateY(4px)}28.5%,41%{opacity:1;transform:none}42.5%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes qact3o{0%,41%{opacity:0;transform:translateY(4px)}42.5%,58%{opacity:1;transform:none}59.5%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes qact4o{0%,58%{opacity:0;transform:translateY(4px)}59.5%,100%{opacity:1;transform:none}}
@keyframes qbar1{0%,4.5%{transform:scaleX(0)}11%,100%{transform:scaleX(1)}}
@keyframes qbar2{0%,11.5%{transform:scaleX(0)}18%,100%{transform:scaleX(1)}}
@keyframes qbar3{0%,18.5%{transform:scaleX(0)}25%,100%{transform:scaleX(1)}}
@keyframes qok1{0%,11%{opacity:0;transform:scale(.4)}12.5%,100%{opacity:1;transform:none}}
@keyframes qok2{0%,18%{opacity:0;transform:scale(.4)}19.5%,100%{opacity:1;transform:none}}
@keyframes qok3{0%,25%{opacity:0;transform:scale(.4)}26.5%,100%{opacity:1;transform:none}}
@keyframes qtap1{0%,3.5%{opacity:0;transform:scale(.6)}5%{opacity:.45;transform:scale(1)}8.5%,100%{opacity:0;transform:scale(1.5)}}
@keyframes qtap2{0%,10.5%{opacity:0;transform:scale(.6)}12%{opacity:.45;transform:scale(1)}15.5%,100%{opacity:0;transform:scale(1.5)}}
@keyframes qtap3{0%,17.5%{opacity:0;transform:scale(.6)}19%{opacity:.45;transform:scale(1)}22.5%,100%{opacity:0;transform:scale(1.5)}}
@keyframes qsend{0%,25%{opacity:0;transform:translateY(6px)}27.5%,100%{opacity:1;transform:none}}
@keyframes qrowA{0%,11.5%{opacity:0;transform:translate(-14px,calc(var(--h) * -1))}14%,30.5%{opacity:1;transform:translate(0,calc(var(--h) * -1))}37%,100%{opacity:1;transform:none}}
@keyframes qrowB{0%,18.5%{opacity:0;transform:translate(-14px,calc(var(--h) * -1))}21%,30.5%{opacity:1;transform:translate(0,calc(var(--h) * -1))}37%,100%{opacity:1;transform:none}}
@keyframes qrowC{0%,25.5%{opacity:0;transform:translate(-14px,calc(var(--h) * 2))}28%,30.5%{opacity:1;transform:translate(0,calc(var(--h) * 2))}37%,100%{opacity:1;transform:none}}
@keyframes qline{0%,35%{transform:scaleY(0)}41%,100%{transform:scaleY(1)}}
@keyframes qtagC{0%,44.5%{opacity:0;transform:scale(.5)}46.5%,100%{opacity:1;transform:none}}
@keyframes qtagA{0%,47%{opacity:0;transform:scale(.5)}49%,100%{opacity:1;transform:none}}
@keyframes qtagB{0%,49.5%{opacity:0;transform:scale(.5)}51.5%,100%{opacity:1;transform:none}}
@keyframes qchk{0%,52%{opacity:0;transform:translateY(3px)}54.5%,100%{opacity:1;transform:none}}
@keyframes qnote{0%,54%{opacity:0;transform:translateY(4px)}56.5%,61.5%{opacity:1;transform:none}63%,100%{opacity:0;transform:none}}
@keyframes qpb{0%,63%{opacity:0;transform:translateY(6px)}65.5%,100%{opacity:1;transform:none}}
@keyframes qpb1{0%,67%{opacity:0}69%,100%{opacity:1}}
@keyframes qpb2{0%,70.5%{opacity:0}72.5%,100%{opacity:1}}
@keyframes qpb3{0%,74%{opacity:0}76%,100%{opacity:1}}
@keyframes qask0{0%,76%{opacity:0}77%,81.5%{opacity:1}82.5%,100%{opacity:0}}
@keyframes qask1{0%,81.5%{opacity:0}82.5%,100%{opacity:1}}
@keyframes qasktap{0%,79%{opacity:0;transform:scale(.6)}80.5%{opacity:.45;transform:scale(1)}84%,100%{opacity:0;transform:scale(1.5)}}
@keyframes qpnote{0%,84%{opacity:0;transform:translateY(-16px)}87.5%,100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.qh .stage .anim *,.qh .stage .anim *::before,.qh .stage .anim *::after,.qh .stage .steps *,.qh .stage .steps *::before{animation:none!important}.qh .pausebtn,.qh .stage-pause{display:none}}

/* Placement on brentmilliken.com: the card is light-only, so it always sits on its own paper panel. */
.qh-panel{background:#FAF9F7;border-radius:16px;padding:24px;color-scheme:light}
.qh-panel .qh .stage{margin:0;max-width:600px}
@media (max-width:480px){.qh-panel{padding:16px 12px}}
/* Home page card: under 480 px the paper panel runs to the card's edges, so the stage gets the width it needs (about 330 px at 375). */
@media (max-width:480px){.qh-panel--bleed{margin:-16px -16px 0;border-radius:18px 18px 0 0;padding:18px 6px 12px}}
/* Under 400 px the French chip ("Demander à Marc L.") is wider than the card; let it wrap instead of overflowing. */
@media (max-width:400px){.qh-panel .qh .askchip .a0{white-space:normal;text-align:right;max-width:7em}.qh-panel .qh .askchip>span{align-self:center}}