/* =====================================================================================================
   Meterknot Clarity v0.8 (2026-10-04, MTKN-MC · Website Main Builder): the page's own CSS. v0.8, "the ring is the session"
   (approved 2026-10-04): the header and the agenda one scene with the ring held in place; the Snapshot's rows carry their
   quarters; the request's ring closes as the four required fields are completed. The seven inner-page rules (ruled 2026-10-03), the plan for the Clarity and Scorecard pair (approved
   2026-10-03). One lime moment per view: the light's rest on an eyebrow diamond; the submit chip turns lime only when the form is
   complete; the band's chip is the footer's (documented). Scoped under the section ids.
   ===================================================================================================== */

/* ---------- the kit: the travelling light and the intro's pre-state ---------- */
#sys-light{position:fixed;top:0;left:0;width:130px;height:130px;margin:-65px 0 0 -65px;z-index:40;pointer-events:none;opacity:0;will-change:transform}
#sys-light .lw,#sys-light .ll{position:absolute;inset:0;border-radius:50%;transition:opacity .8s var(--ease)}
#sys-light .lw{background:radial-gradient(circle,rgba(255,255,255,0.8) 0%,rgba(233,240,246,0.28) 14%,rgba(183,197,208,0.1) 34%,rgba(183,197,208,0.03) 58%,rgba(183,197,208,0) 85%);filter:blur(3px)}
#sys-light .ll{background:radial-gradient(circle,rgba(226,246,190,0.9) 0%,rgba(163,217,78,0.32) 13%,rgba(163,217,78,0.1) 33%,rgba(163,217,78,0.03) 56%,rgba(163,217,78,0) 82%);filter:blur(3px);opacity:0}
#sys-light.rest .lw{opacity:0}
#sys-light.rest .ll{opacity:1}
@media (max-width:900px){ #sys-light{display:none} }
.mk-pre #clhead .ch-lede,.mk-pre .cs-rail .cl-ring{opacity:0}

/* ---------- rhythm ---------- */
#clhead .wrap,#clwork .wrap,#clleave .wrap,#cldebrief .wrap,#request .wrap{max-width:none}
#clwork,#clleave,#cldebrief,#request{padding:clamp(100px,13vh,180px) 0}
#clwork .eyebrow,#clleave .eyebrow,#cldebrief .eyebrow,#request .eyebrow{margin:0}
#clwork h2.stmt,#clleave h2.stmt,#cldebrief h2.stmt,#request h2.stmt{margin-top:clamp(18px,2vw,30px);font-size:clamp(40px,min(6vw,11vh),150px);line-height:1;letter-spacing:-0.03em}
.cl-snap .fk,.db-card .fk,.rq-panel .fk{position:absolute;width:12px;height:12px;opacity:0.85;z-index:2;pointer-events:none}
.cl-snap .fk::before,.db-card .fk::before,.rq-panel .fk::before{content:"";position:absolute;width:12px;height:1px;background:rgba(183,197,208,0.6);top:0;left:0}
.cl-snap .fk::after,.db-card .fk::after,.rq-panel .fk::after{content:"";position:absolute;width:1px;height:12px;background:rgba(183,197,208,0.6);top:0;left:0}
.fk.k1{top:-1px;left:-1px}
.fk.k2{top:-1px;right:-1px;transform:scaleX(-1)}
.fk.k3{bottom:-1px;left:-1px;transform:scaleY(-1)}
.fk.k4{bottom:-1px;right:-1px;transform:scale(-1,-1)}
.sp-tag{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--meta-3);border:1px solid var(--hairline-2);padding:4px 8px}@media (min-width:2561px){.sp-tag{font-size:max(12px, min(calc(12.00px + (100vw - 2560px) * 0.00234), 15.00px))}}

/* ---------- C1 · header: the H1 and the ring ---------- */
#clhead{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-start;padding:clamp(120px,15vh,180px) 0 clamp(50px,7vh,90px)}
#clhead > .wrap{width:100%}
#clhead .ch-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr);column-gap:clamp(40px,5vw,120px);align-items:center}
#clhead h1.ch-h1{margin-top:clamp(18px,2.2vw,32px);font-size:clamp(52px,min(9.6vw,15.5vh),240px);line-height:0.98;letter-spacing:-0.03em;font-weight:700;color:#fff;max-width:none;text-wrap:balance}
#clhead .ch-dek{margin-top:clamp(22px,3vh,36px);font-size:clamp(18px,1.45vw,25px);line-height:1.55;color:var(--blue-100);font-weight:300;max-width:30.5em}@media (min-width:2561px){#clhead .ch-dek{font-size:max(clamp(18px,1.45vw,25px), min(calc(25.00px + (100vw - 2560px) * 0.00195), 27.50px))}}
#clhead .ch-go{margin-top:clamp(28px,4vh,48px)}
.ch-slot{width:100%;max-width:500px;justify-self:center;aspect-ratio:25 / 27}
.cl-ring{position:relative;width:100%;max-width:500px;justify-self:center}
/* the scene: the ring lives on a rail over the header's right column (phones: from under the header to the agenda's end) and is
   held in place while the agenda scrolls past it */
.cl-scene{position:relative}
.cs-rail{position:absolute;top:0;bottom:0;left:0;width:0;z-index:3;pointer-events:none;visibility:hidden}
.cs-rail.ready{visibility:visible}
/* reduced motion: the header's text waits for the fonts (no reflow at load) */
.mk-fw #clhead .ch-lede{visibility:hidden}
.cs-stick{position:sticky;top:20vh}
.cs-rail .cl-ring{max-width:none}
.rg-svg{display:block;width:100%;height:auto;overflow:visible}
.rg-base{fill:none;stroke:rgba(183,197,208,0.22);stroke-width:1.2}
.rg-arc{fill:none;stroke:#fff;stroke-width:1.6;stroke-dasharray:1 1;stroke-dashoffset:var(--ro,0);opacity:0.9}
.rg-node rect{fill:var(--blue-900);stroke:var(--blue-300);stroke-width:1.4;transition:fill .5s var(--ease),stroke .5s var(--ease)}
.rg-node.on rect{fill:#fff;stroke:#fff}
.rg-lab{font-family:var(--mono);font-size:calc(var(--rlf,18) * 1px);font-weight:500;letter-spacing:0.16em;text-transform:uppercase;fill:var(--meta-2);transition:fill .5s var(--ease)}
.rg-lab.on{fill:#fff}
.cl-ring .rg-cap{margin-top:clamp(14px,2vh,22px);text-align:center;font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:var(--meta-2)}@media (min-width:2561px){.cl-ring .rg-cap{font-size:max(13px, min(calc(13.00px + (100vw - 2560px) * 0.00254), 16.25px))}}
.rg-hand line{stroke:rgba(255,255,255,0.55);stroke-width:1.2}
.rg-hand circle{fill:#fff;filter:drop-shadow(0 0 6px rgba(255,255,255,0.8))}
.rg-hand{opacity:var(--ho,0);transition:opacity .6s var(--ease)}

/* ---------- C2 · the agenda: four beats read past the held ring ---------- */
#clwork .ag-wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr);column-gap:clamp(40px,5vw,120px)}
#clwork .ag-col{grid-column:1;min-width:0}
#clwork .ag-beats{list-style:none;margin:clamp(48px,8vh,110px) 0 0;padding:0}
#clwork .ag-beat{position:relative;min-height:clamp(280px,44vh,520px);padding-top:clamp(22px,3vh,36px);border-top:1px solid var(--hairline);transition:opacity .55s var(--ease)}
#clwork .ag-beat::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:100%;background:#fff;box-shadow:0 0 10px rgba(255,255,255,0.45);transform-origin:left center;transform:scaleX(var(--bp,0))}
#clwork .ag-ix{display:block;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0.12em;color:var(--meta-3)}@media (min-width:2561px){#clwork .ag-ix{font-size:max(12px, min(calc(12.00px + (100vw - 2560px) * 0.00234), 15.00px))}}
#clwork .ag-lab{display:block;margin-top:clamp(12px,1.8vh,20px);font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:var(--meta-2);transition:color .5s var(--ease)}@media (min-width:2561px){#clwork .ag-lab{font-size:max(13px, min(calc(13.00px + (100vw - 2560px) * 0.00254), 16.25px))}}
#clwork .ag-beat p{margin-top:clamp(14px,2vh,24px);font-size:clamp(28px,min(3vw,5.6vh),60px);line-height:1.15;font-weight:600;letter-spacing:-0.022em;color:#fff;max-width:20ch;text-wrap:balance}
#clwork .ag-beat.on .ag-lab{color:#fff}
#clwork .ag-beats.pre .ag-beat{opacity:0.24}
#clwork .ag-beats.pre .ag-beat.past{opacity:0.5}
#clwork .ag-beats.pre .ag-beat.on{opacity:1}
#clwork .ag-tail{height:var(--tail,0px)}

/* ---------- C3 · what you leave with: the Snapshot and the copy ---------- */
#clleave .lv-grid{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);column-gap:clamp(40px,5vw,120px);align-items:center;margin-top:clamp(40px,6vh,80px)}
.cl-snap{position:relative;border:1px solid var(--hairline-2);background:rgba(6,27,45,0.55);padding:clamp(20px,2.4vw,40px)}
.cl-snap .sn-head{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--meta-2)}@media (min-width:2561px){.cl-snap .sn-head{font-size:max(12px, min(calc(12.00px + (100vw - 2560px) * 0.00234), 15.00px))}}
.cl-snap .sn-rows{list-style:none;margin:clamp(18px,2.4vh,28px) 0 0;padding:0;border-top:1px solid var(--hairline)}
.cl-snap .sn-row,.cl-snap .sn-next{position:relative;display:grid;grid-template-columns:36px minmax(0,0.38fr) minmax(0,1fr) 14px;column-gap:16px;align-items:center;min-height:clamp(48px,6.4vh,62px);border-bottom:1px solid var(--hairline);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.cl-snap .sn-q{display:block;width:34px;height:34px}
.sq-svg{display:block;width:100%;height:100%;overflow:visible}
.sq-base{fill:none;stroke:rgba(183,197,208,0.2);stroke-width:22}
.sq-arc{fill:none;stroke:#fff;stroke-width:46;stroke-dasharray:1 1;stroke-dashoffset:0;transition:stroke-dashoffset .7s var(--ease)}
.cl-snap.pre .sn-row:not(.in) .sq-arc,.cl-snap.pre .sn-next:not(.in) .sq-arc{stroke-dashoffset:1}
.cl-snap .sn-lab{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--blue-100)}@media (min-width:2561px){.cl-snap .sn-lab{font-size:max(12px, min(calc(12.00px + (100vw - 2560px) * 0.00234), 15.00px))}}
.cl-snap .sn-lines{position:relative;height:22px}
.cl-snap .sn-lines i{position:absolute;left:0;height:1px;background:rgba(183,197,208,0.4)}
.cl-snap .sn-lines i:nth-child(1){top:4px;width:92%}.cl-snap .sn-lines i:nth-child(2){top:11px;width:78%}.cl-snap .sn-lines i.s{top:17px;width:46%;height:2px;background:var(--lime);transform-origin:0 50%;transition:transform .7s var(--ease) .15s}.cl-snap.pre .sn-row:not(.in) .sn-lines i.s{transform:scaleX(0)}.cl-snap .sn-row:nth-child(1) .sn-lines i.s{width:58%}.cl-snap .sn-row:nth-child(2) .sn-lines i.s{width:34%}.cl-snap .sn-row:nth-child(3) .sn-lines i.s{width:70%}.cl-snap .sn-row:nth-child(4) .sn-lines i.s{width:24%}.cl-snap .sn-row:last-child{border-bottom:0} /* R-10 */
.cl-snap .sn-mark{width:10px;height:10px;transform:rotate(45deg);border:1px solid #fff;background:#fff;transition:background .4s var(--ease)}
.cl-snap .sn-next{border-bottom:0;margin-top:clamp(10px,1.4vh,16px);border-top:1px solid rgba(255,255,255,0.5)}
.cl-snap .sn-next .sn-lab{color:#fff}
.cl-snap .sn-opts{display:flex;flex-wrap:wrap;gap:10px}
.cl-snap .sn-opt{font-size:clamp(14px,1vw,16px);font-weight:600;color:#fff;border:1px solid rgba(255,255,255,0.6);padding:6px 12px;transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)}@media (min-width:2561px){.cl-snap .sn-opt{font-size:max(clamp(14px,1vw,16px), min(calc(16.00px + (100vw - 2560px) * 0.00313), 20.00px))}}
.cl-snap .sn-opt.on{background:#fff;color:var(--blue-900)}
.cl-snap.pre .sn-row:not(.in),.cl-snap.pre .sn-next:not(.in){opacity:0.22;transform:translateY(6px)}
.cl-snap.pre .sn-mark{background:transparent}
.cl-snap.pre .in .sn-mark{background:#fff}
#clleave .lv-text{font-size:clamp(18px,1.4vw,24px);line-height:1.6;color:var(--blue-100);max-width:46ch}@media (min-width:2561px){#clleave .lv-text{font-size:max(clamp(18px,1.4vw,24px), min(calc(24.00px + (100vw - 2560px) * 0.00188), 26.40px))}}
#clleave .lv-text b{color:#fff;font-weight:600}
#clleave .lv-text a,#cldebrief .db-text a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,0.4);text-underline-offset:4px}
#clleave .lv-text a:hover,#cldebrief .db-text a:hover{text-decoration-color:#fff}
#clleave .lv-hold{margin-top:clamp(28px,4vh,48px);font-size:clamp(30px,3vw,56px);line-height:1.1;font-weight:700;letter-spacing:-0.02em;color:#fff;max-width:16ch}@media (min-width:2561px){#clleave .lv-hold{font-size:max(clamp(30px,3vw,56px), min(calc(56.00px + (100vw - 2560px) * 0.00438), 61.60px))}}

/* ---------- C4 · the debrief: copy above, the hand-off across ---------- */
#cldebrief .db-text{margin-top:clamp(26px,4vh,44px);max-width:52ch;font-size:clamp(18px,1.4vw,24px);line-height:1.6;color:var(--blue-100)}@media (min-width:2561px){#cldebrief .db-text{font-size:max(clamp(18px,1.4vw,24px), min(calc(24.00px + (100vw - 2560px) * 0.00188), 26.40px))}}
#cldebrief .db-flow{display:grid;grid-template-columns:minmax(0,0.62fr) minmax(0,0.5fr) minmax(0,0.56fr);align-items:center;column-gap:clamp(12px,1.5vw,28px);margin-top:clamp(44px,7vh,90px)}
.db-card{position:relative;border:1px solid var(--hairline-2);background:rgba(6,27,45,0.55);padding:clamp(18px,2vw,30px)}
.db-card .dc-head{display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--meta-2)}@media (min-width:2561px){.db-card .dc-head{font-size:max(12px, min(calc(12.00px + (100vw - 2560px) * 0.00234), 15.00px))}}
.db-card .dc-band{display:flex;align-items:center;gap:14px;margin-top:clamp(16px,2.2vh,24px);font-size:clamp(18px,1.5vw,26px);font-weight:600;color:#fff}@media (min-width:2561px){.db-card .dc-band{font-size:max(clamp(18px,1.5vw,26px), min(calc(26.00px + (100vw - 2560px) * 0.00203), 28.60px))}}
.db-card .dc-meter{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;width:110px}
.db-card .dc-meter i{height:6px;background:rgba(183,197,208,0.2)}
.db-card .dc-meter i.on{background:#fff}
.db-card .dc-row{display:flex;flex-direction:column;gap:6px;margin-top:clamp(14px,2vh,20px);padding-top:clamp(12px,1.6vh,16px);border-top:1px solid var(--hairline)}
.db-card .dc-lab{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--meta-3)}@media (min-width:2561px){.db-card .dc-lab{font-size:max(12px, min(calc(12.00px + (100vw - 2560px) * 0.00234), 15.00px))}}
.db-card .dc-val{font-size:clamp(16px,1.2vw,20px);font-weight:500;color:var(--blue-100)}@media (min-width:2561px){.db-card .dc-val{font-size:max(clamp(16px,1.2vw,20px), min(calc(20.00px + (100vw - 2560px) * 0.00156), 22.00px))}}
.db-card .dc-con .dc-lab,.db-card .dc-con .dc-val{color:#fff}
.db-path{display:block;width:100%;height:120px;overflow:visible}
.db-line{fill:none;stroke:#fff;stroke-width:1.4;stroke-dasharray:1 1;stroke-dashoffset:var(--dl,0);opacity:0.85}
.db-ring{position:relative;justify-self:start;width:100%;max-width:420px}
.db-ring .rg-arc{stroke-dashoffset:var(--dr,0);transition:stroke .5s var(--ease)}.db-ring.done .rg-arc{stroke:var(--lime);opacity:1}.db-ring.done .rg-node.on rect{fill:var(--lime);stroke:var(--lime)} /* R-12 */
.db-tok{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;font-size:13px;font-weight:600;color:var(--blue-900);background:#fff;padding:5px 9px;opacity:var(--to,1);box-shadow:0 0 18px rgba(255,255,255,0.35)}@media (min-width:2561px){.db-tok{font-size:max(13px, min(calc(13.00px + (100vw - 2560px) * 0.00254), 16.25px))}}

/* ---------- C5 + C6 · the request ---------- */
#request .rq-grid{display:grid;grid-template-columns:minmax(0,0.42fr) minmax(0,0.58fr);column-gap:clamp(40px,5vw,120px);row-gap:clamp(30px,4vh,48px);align-items:start}
#request .rq-head{position:sticky;top:clamp(110px,16vh,170px)}
#request .rq-ring{margin-top:clamp(30px,5vh,56px);width:min(300px,100%)}
.fr-svg{display:block;width:100%;height:auto;overflow:visible}
.fr-base{fill:none;stroke:rgba(183,197,208,0.22);stroke-width:2.2;transition:stroke .6s var(--ease)}
.fr-q{fill:none;stroke:#fff;stroke-width:4;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset .7s var(--ease)}
.fr-q.on{stroke-dashoffset:0}
.fr-node rect{fill:var(--blue-900);stroke:var(--blue-300);stroke-width:2.4;transition:fill .4s var(--ease),stroke .4s var(--ease)}
.fr-node.on rect{fill:#fff;stroke:#fff}
.fr-lab{font-family:var(--mono);font-size:24px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;fill:var(--meta-3);transition:fill .4s var(--ease)}@media (min-width:2561px){.fr-lab{font-size:max(24px, min(calc(24.00px + (100vw - 2560px) * 0.00188), 26.40px))}}
.fr-lab.on{fill:#fff}
.fr-hand{opacity:0;transition:opacity .4s var(--ease)}
.fr-hand line{stroke:rgba(255,255,255,0.55);stroke-width:2.4}
.fr-hand circle{fill:#fff;filter:drop-shadow(0 0 8px rgba(255,255,255,0.8))}
.rq-ring.closed .fr-base{stroke:rgba(255,255,255,0.45)}
@media (prefers-reduced-motion:reduce){ .fr-q,.fr-node rect,.fr-lab,.sq-arc,#clwork .ag-beat{transition:none} }
#request .rq-main{grid-column:2;min-width:0}
#request .rq-act{display:flex;align-items:center;gap:18px}
#request .rq-ring.rq-ring-s{display:none;width:58px;margin-top:0;flex:none}
.rq-panel{position:relative;border:1px solid var(--hairline-2);background:rgba(6,27,45,0.55);padding:clamp(24px,3vw,48px)}
.rq-form[hidden]{display:none}
.rq-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(18px,2vw,32px);row-gap:clamp(18px,2.6vh,26px)}
.rq-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.rq-wide,.rq-send{grid-column:1 / -1}
.rq-field label{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--meta-2)}@media (min-width:2561px){.rq-field label{font-size:max(13px, min(calc(13.00px + (100vw - 2560px) * 0.00254), 16.25px))}}
.rq-field .rq-opt{margin-left:8px;color:var(--meta-3);letter-spacing:0.1em;text-transform:none}
.rq-field input{width:100%;min-height:48px;padding:12px 2px;background:transparent;border:0;border-bottom:1px solid rgba(183,197,208,0.45);color:#fff;font:inherit;font-size:clamp(17px,1.2vw,20px);border-radius:0;transition:border-color .3s var(--ease)}@media (min-width:2561px){.rq-field input{font-size:max(clamp(17px,1.2vw,20px), min(calc(20.00px + (100vw - 2560px) * 0.00156), 22.00px))}}
.rq-field input:focus{outline:none;border-bottom-color:#fff;box-shadow:0 1px 0 0 #fff}
.rq-field input:focus-visible{outline:1px solid rgba(255,255,255,0.7);outline-offset:4px}
.rq-field.ok input{border-bottom-color:rgba(255,255,255,0.8)}
.rq-field.bad input{border-bottom-color:var(--ui-danger,#E5484D)}
.rq-err{min-height:0;font-size:14px;line-height:1.4;color:var(--ui-danger,#FF8A8A)}@media (min-width:2561px){.rq-err{font-size:max(14px, min(calc(14.00px + (100vw - 2560px) * 0.00273), 17.50px))}}
.rq-err:empty{display:none}
.rq-send{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:clamp(8px,1.4vh,16px)}
.rq-btn .chip{background:var(--lime);transition:background .4s var(--ease),color .4s var(--ease)}
.rq-form.valid .rq-btn{background:var(--lime);border-color:var(--lime);color:var(--blue-900)}
.rq-form.valid .rq-btn .chip{background:var(--blue-900);color:var(--lime)}
.rq-btn[aria-busy="true"]{opacity:0.7;pointer-events:none}
.rq-btn[aria-busy="true"] .chip{animation:rqspin 0.9s linear infinite}
@media (prefers-reduced-motion:reduce){ .rq-btn[aria-busy="true"] .chip{animation:none} }
@keyframes rqspin{to{transform:rotate(360deg)}}
.rq-micro{font-size:clamp(15px,1.05vw,17px);line-height:1.6;color:var(--blue-100)}@media (min-width:2561px){.rq-micro{font-size:max(clamp(15px,1.05vw,17px), min(calc(17.00px + (100vw - 2560px) * 0.00332), 21.25px))}}
.rq-privacy{font-size:13.5px;line-height:1.6;color:var(--meta-2);max-width:60ch}@media (min-width:2561px){.rq-privacy{font-size:max(13.5px, min(calc(13.50px + (100vw - 2560px) * 0.00264), 16.88px))}}
.rq-privacy a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(183,197,208,0.5)}
.rq-done,.rq-fail{padding:clamp(10px,2vh,24px) 0}
.rq-done .rq-done-h{font-size:clamp(30px,3vw,52px);font-weight:700;letter-spacing:-0.02em;color:#fff}@media (min-width:2561px){.rq-done .rq-done-h{font-size:max(clamp(30px,3vw,52px), min(calc(52.00px + (100vw - 2560px) * 0.00406), 57.20px))}}
.rq-done p + p{margin-top:16px;font-size:clamp(17px,1.2vw,20px);line-height:1.6;color:var(--blue-100)}@media (min-width:2561px){.rq-done p + p{font-size:max(clamp(17px,1.2vw,20px), min(calc(20.00px + (100vw - 2560px) * 0.00156), 22.00px))}}
.rq-fail{position:relative;margin:0 0 clamp(18px,2.6vh,28px);padding:16px 0 16px 22px;border-left:2px solid var(--ui-danger,#E5484D)}
.rq-fmark{position:absolute;left:-7px;top:22px;width:12px;height:12px;transform:rotate(45deg);background:var(--ui-danger,#E5484D)}
.rq-fail p{font-size:clamp(17px,1.2vw,20px);line-height:1.6;color:#fff}@media (min-width:2561px){.rq-fail p{font-size:max(clamp(17px,1.2vw,20px), min(calc(20.00px + (100vw - 2560px) * 0.00156), 22.00px))}}
.rq-fail a{color:#fff;text-decoration:underline}
#request .rq-cross{margin-top:clamp(28px,4vh,44px);font-size:clamp(16px,1.15vw,19px);color:var(--blue-100)}@media (min-width:2561px){#request .rq-cross{font-size:max(clamp(16px,1.15vw,19px), min(calc(19.00px + (100vw - 2560px) * 0.00371), 23.75px))}}
#request .rq-cross .tlink{margin:0;display:inline;font-size:inherit;color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,0.4)}

/* ---------- large screens: the mono micro-layer grows ---------- */
@media (min-width:1441px){
  .sp-tag,.cl-snap .sn-head,.cl-snap .sn-lab,.db-card .dc-head,.db-card .dc-lab,#clwork .ag-ix{font-size:min(calc(8.2px + 0.27vw), 15px)}@media (min-width:2561px){.sp-tag,.cl-snap .sn-head,.cl-snap .sn-lab,.db-card .dc-head,.db-card .dc-lab,#clwork .ag-ix{font-size:max(min(calc(8.2px + 0.27vw), 15px), min(calc(15.00px + (100vw - 2560px) * 0.00293), 18.75px))}}
}
/* ---------- narrow desktops and tablets: the splits hold to 960 px ---------- */
@media (max-width:1199px){
  #clhead h1.ch-h1{font-size:clamp(52px,min(8.4vw,15.5vh),240px)}
  #cldebrief .db-flow{grid-template-columns:minmax(0,0.9fr) minmax(0,0.5fr) minmax(0,0.5fr)}
}
@media (max-width:959px){
  #clhead .ch-grid{grid-template-columns:minmax(0,1fr);row-gap:48px}
  .ch-slot{max-width:240px;justify-self:start}
  .rg-lab{letter-spacing:0.08em}
  #clwork .ag-wrap{grid-template-columns:minmax(0,1fr)}
  #clwork .ag-beat{min-height:clamp(260px,40vh,420px)}
  #clwork .ag-beat p{font-size:clamp(26px,5vw,40px)}
  #request .rq-ring{width:min(240px,70%)}
  #clleave .lv-grid{grid-template-columns:minmax(0,1fr);row-gap:44px}
  #cldebrief .db-flow{grid-template-columns:minmax(0,1fr);row-gap:0;max-width:560px}
  .db-path{height:80px;transform:rotate(90deg);transform-origin:center;width:80px;justify-self:center}
  .db-ring{justify-self:center;max-width:220px}
  #request .rq-grid{grid-template-columns:minmax(0,1fr)}
  #request .rq-head{position:static}
  #request .rq-main{grid-column:1}
}
/* ---------- phones ---------- */
@media (max-width:900px){
  #clwork,#clleave,#cldebrief,#request{padding:clamp(56px,10vw,80px) 0}
  #clhead{min-height:0;padding:clamp(110px,26vw,140px) 0 48px}
  #clhead h1.ch-h1{font-size:clamp(44px,13vw,72px)}
  #clwork h2.stmt,#clleave h2.stmt,#cldebrief h2.stmt,#request h2.stmt{font-size:clamp(34px,10vw,56px)}
  #clwork .ag-beat p{font-size:clamp(24px,7vw,34px)}
  #clwork .ag-beat{min-height:30vh}
  #request .rq-ring.rq-ring-s{display:block;width:48px}
  #request .rq-act{gap:12px;flex-wrap:wrap}
  #request .rq-btn{font-size:17px;white-space:nowrap;max-width:100%}
  #request .rq-head .rq-ring{display:none}
  .rg-lab{letter-spacing:0.08em}
  .rq-form{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:359px){
  #request .rq-btn{white-space:normal}
}

/* L-11 (Sotiris 2026-10-07, 07:53, option 1): the next step lands lime once the Snapshot is assembled: its closed ring, its rule and its label (R1) */
.cl-snap:has(.sn-opt.on + .sn-opt.on) .sn-next .sq-arc{stroke:var(--lime);transition:stroke .5s var(--ease)}
/* R-11: the rule above Next step stays white (L-11 lime withdrawn there) */
.cl-snap:has(.sn-opt.on + .sn-opt.on) .sn-next .sn-lab{color:var(--lime);transition:color .5s var(--ease)}
/* joint pass: the label column is never narrower than its longest label (BOTTLENECKS ran into the lines at 390 px) */
.cl-snap .sn-row{grid-template-columns:36px minmax(102px,0.38fr) minmax(0,1fr) 14px}
@media (min-width:1441px){.cl-snap .sn-row{grid-template-columns:36px minmax(calc(8.5 * min(calc(8.2px + 0.27vw), 15px)),0.38fr) minmax(0,1fr) 14px}}
/* joint pass: L-08 after sending, the receipt carries the lime (R2, as Contact); the panel takes focus without a ring */
.rq-done .rq-done-h{color:var(--lime)}
.rq-done:focus,.rq-fail:focus{outline:none}

/* (2026-10-09, A6): running text on phones at 16 px or more */
@media (max-width:900px){.rq-micro{font-size:16px}}

/* B8 (2026-10-10, ruled "option A 10%"): from 2560 px wide, text under 16 px 10% larger; each line repeats a rule above with its own context */
@media (min-width:2560px){.cl-ring .rg-cap{font-size:calc(13px * 1.1)}}
@media (min-width:2560px){@media (min-width:2561px){.cl-ring .rg-cap{font-size:calc(max(13px, min(calc(13.00px + (100vw - 2560px) * 0.00254), 16.25px)) * 1.1)}}}
@media (min-width:2560px){#clwork .ag-lab{font-size:calc(13px * 1.1)}}
@media (min-width:2560px){@media (min-width:2561px){#clwork .ag-lab{font-size:calc(max(13px, min(calc(13.00px + (100vw - 2560px) * 0.00254), 16.25px)) * 1.1)}}}
@media (min-width:2560px){.db-tok{font-size:calc(13px * 1.1)}}
@media (min-width:2560px){@media (min-width:2561px){.db-tok{font-size:calc(max(13px, min(calc(13.00px + (100vw - 2560px) * 0.00254), 16.25px)) * 1.1)}}}
@media (min-width:2560px){.fr-lab{font-size:calc(24px * 1.1)}}
@media (min-width:2560px){@media (min-width:2561px){.fr-lab{font-size:calc(max(24px, min(calc(24.00px + (100vw - 2560px) * 0.00188), 26.40px)) * 1.1)}}}
@media (min-width:2560px){.rq-field label{font-size:calc(13px * 1.1)}}
@media (min-width:2560px){@media (min-width:2561px){.rq-field label{font-size:calc(max(13px, min(calc(13.00px + (100vw - 2560px) * 0.00254), 16.25px)) * 1.1)}}}
@media (min-width:2560px){.rq-privacy{font-size:calc(13.5px * 1.1)}}
@media (min-width:2560px){@media (min-width:2561px){.rq-privacy{font-size:calc(max(13.5px, min(calc(13.50px + (100vw - 2560px) * 0.00264), 16.88px)) * 1.1)}}}
@media (min-width:2560px){@media (min-width:1441px){#clwork .ag-ix{font-size:calc(min(calc(8.2px + 0.27vw), 15px) * 1.1)}}}
@media (min-width:2560px){@media (min-width:1441px){.cl-snap .sn-head{font-size:calc(min(calc(8.2px + 0.27vw), 15px) * 1.1)}}}
@media (min-width:2560px){@media (min-width:1441px){.cl-snap .sn-lab{font-size:calc(min(calc(8.2px + 0.27vw), 15px) * 1.1)}}}
@media (min-width:2560px){@media (min-width:1441px){.db-card .dc-head{font-size:calc(min(calc(8.2px + 0.27vw), 15px) * 1.1)}}}
@media (min-width:2560px){@media (min-width:1441px){.db-card .dc-lab{font-size:calc(min(calc(8.2px + 0.27vw), 15px) * 1.1)}}}
@media (min-width:2560px){@media (min-width:1441px){.sp-tag{font-size:calc(min(calc(8.2px + 0.27vw), 15px) * 1.1)}}}
@media (min-width:2560px){@media (min-width:1441px){@media (min-width:2561px){#clwork .ag-ix{font-size:calc(max(min(calc(8.2px + 0.27vw), 15px), min(calc(15.00px + (100vw - 2560px) * 0.00293), 18.75px)) * 1.1)}}}}
@media (min-width:2560px){@media (min-width:1441px){@media (min-width:2561px){.cl-snap .sn-head{font-size:calc(max(min(calc(8.2px + 0.27vw), 15px), min(calc(15.00px + (100vw - 2560px) * 0.00293), 18.75px)) * 1.1)}}}}
@media (min-width:2560px){@media (min-width:1441px){@media (min-width:2561px){.cl-snap .sn-lab{font-size:calc(max(min(calc(8.2px + 0.27vw), 15px), min(calc(15.00px + (100vw - 2560px) * 0.00293), 18.75px)) * 1.1)}}}}
@media (min-width:2560px){@media (min-width:1441px){@media (min-width:2561px){.db-card .dc-head{font-size:calc(max(min(calc(8.2px + 0.27vw), 15px), min(calc(15.00px + (100vw - 2560px) * 0.00293), 18.75px)) * 1.1)}}}}
@media (min-width:2560px){@media (min-width:1441px){@media (min-width:2561px){.db-card .dc-lab{font-size:calc(max(min(calc(8.2px + 0.27vw), 15px), min(calc(15.00px + (100vw - 2560px) * 0.00293), 18.75px)) * 1.1)}}}}
@media (min-width:2560px){@media (min-width:1441px){@media (min-width:2561px){.sp-tag{font-size:calc(max(min(calc(8.2px + 0.27vw), 15px), min(calc(15.00px + (100vw - 2560px) * 0.00293), 18.75px)) * 1.1)}}}}