/* =========================================================
   CASE STUDY: Docket. Extends main.css + case-study.css.
   The hero, intro, build notes and stack stay in the portfolio look;
   everything inside .dk is set in the app's own brand
   (canvas, slab, panel and one lime; DM Sans and DM Mono).
   ========================================================= */

/* ---------- hero: the app's panel stack, with three phones fanned out ---------- */
.dk-hero .cs-hero-paint{background:#141a18;overflow:hidden}
.dk-hero .cs-hero-paint::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,8,10,.62) 0%,rgba(8,8,10,.15) 52%,rgba(8,8,10,0) 70%)}
.dk-hero-panel{position:absolute;border-radius:clamp(36px,4vw,64px);right:-6vw;overflow:hidden}
.dk-hero-panel.p1{background:#2a3531;width:62vw;height:150%;top:-30%;right:-4vw}
.dk-hero-panel.p2{background:#3b4d47;width:48vw;height:58%;top:6%;right:-2vw}
.dk-hero-panel.p3{background:#bce35b;width:48vw;height:52%;top:56%;right:-2vw}
.dk-hero-panel b{position:absolute;font:500 clamp(160px,22vw,360px)/.8 "DM Sans",sans-serif;letter-spacing:-.06em;white-space:nowrap}
.dk-hero-panel.p2 b{color:#edf0eb;opacity:.14;right:-.04em;top:-.06em}
.dk-hero-panel.p3 b{color:#1e2623;opacity:.16;left:.06em;bottom:-.18em}
.dk-hero .cs-h1{font-size:clamp(40px,6.2vw,104px)}
.dk-hero .cs-h1 .dk-lime{color:#bce35b}
.dk-hero .cs-kick{background:#bce35b}
.dk-hero .cs-live{background:#bce35b}
.dk-hero .cs-live:hover{color:#bce35b}
.dk-hero .cs-live:hover .cs-live-dot{background:#bce35b}
.dk-hero .cs-live-arrow{transition:transform .3s var(--ease)}
.dk-hero .cs-live:hover .cs-live-arrow{transform:translate(3px,3px)}
.dk-hero .cs-hero-in{position:relative;z-index:1}
.dk-hero-phones{position:absolute;z-index:0;right:clamp(10px,4vw,90px);bottom:-6%;width:clamp(300px,34vw,560px);height:92%;pointer-events:none}
.dk-hero-phones .hp{position:absolute;bottom:0;width:44%;translate:var(--px,0) var(--py,0);transition:translate .8s cubic-bezier(.2,.8,.2,1);
  animation:dkPhoneIn 1.1s cubic-bezier(.2,.8,.2,1) both}
.dk-hero-phones .hp-1{left:0;bottom:-6%;--r:-9deg;animation-delay:.9s}
.dk-hero-phones .hp-2{left:28%;bottom:8%;--r:0deg;z-index:2;width:46%;animation-delay:1s}
.dk-hero-phones .hp-3{right:0;bottom:-10%;--r:8deg;animation-delay:1.1s}
.dk-hero-phones .hp{transform:rotate(var(--r))}
@keyframes dkPhoneIn{from{opacity:0;transform:translateY(80px) rotate(var(--r))}to{opacity:1;transform:translateY(0) rotate(var(--r))}}
@media (max-width:900px){.dk-hero-phones{opacity:.45;width:min(78vw,420px);right:-18vw}}
@media (max-width:620px){.dk-hero-phones{display:none}.dk-hero-panel.p1{width:90vw}.dk-hero-panel.p2,.dk-hero-panel.p3{width:70vw;right:-20vw}}

/* ---------- phone frame ---------- */
.dk-phone{position:relative;aspect-ratio:390/844;border-radius:13.5%/6.3%;padding:3.2%;background:#1e2623;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 40px 70px -30px rgba(10,16,14,.65),0 14px 24px -14px rgba(10,16,14,.4)}
.dk-phone::before{content:"";position:absolute;z-index:3;left:50%;top:3.6%;width:27%;height:3.1%;translate:-50% 0;border-radius:99px;background:#0d1110}
.dk-phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;border-radius:10.8%/5%;background:#e9e9e3}

/* ================= the app's world ================= */
.dk{
  --canvas:#e9e9e3;--surface:#fafaf8;--sunken:#f1f1ec;--ink:#252f2c;--muted:#5f6a65;--line:#d9dad3;--line-strong:#7e8883;
  --slab:#252f2c;--panel:#465a54;--slab-2:#2a3531;--slab-muted:#a9b6b0;--lime:#bce35b;--on-lime:#1e2623;--lime-soft:#e4f3be;--lime-ink:#2e6b4a;
  --clay:#a84720;--clay-soft:#f6e3d9;--sky:#2f5f8a;--sky-soft:#dde8f1;
  --f-sans:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--f-mono:"DM Mono",ui-monospace,Menlo,monospace;
  --r-panel:clamp(36px,4.4vw,64px);
  position:relative;color:var(--ink);font-family:var(--f-sans);font-weight:400;background:var(--canvas);
  font-variant-numeric:tabular-nums;font-optical-sizing:auto}
.dk ::selection{background:var(--lime);color:var(--on-lime)}
.dk :focus-visible{outline:2px solid var(--lime-ink);outline-offset:3px}
.dk .mono{font-family:var(--f-mono);letter-spacing:.02em}
#docket{margin-top:clamp(64px,8vw,112px);background:#08080a}

/* sections are panels that stack: each one rides over the one before */
.dk-sec{position:relative;padding-block:clamp(84px,9vw,140px) clamp(120px,12vw,180px);border-radius:var(--r-panel) var(--r-panel) 0 0;margin-top:calc(var(--r-panel) * -1);background:var(--sb,var(--canvas))}
.dk-sec:first-child{margin-top:0}
.dk-surface{--sb:var(--surface)}
.dk-canvas{--sb:var(--canvas)}
.dk-panel{--sb:var(--panel);color:#edf0eb}
.dk-slab{--sb:var(--slab);color:#edf0eb}
.dk-lime-sec{--sb:var(--lime);color:var(--on-lime)}
.dk-out{height:var(--r-panel);background:var(--lime);border-radius:0 0 var(--r-panel) var(--r-panel)}
.dk-sec + .dk-out{margin-top:-1px}

/* type + bits */
.dk-head{margin-bottom:clamp(40px,5vw,72px);max-width:880px;position:relative;z-index:2}
.dk-head-split{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:24px clamp(32px,5vw,80px);align-items:end;max-width:none}
.dk-head-split .dk-lede{margin:0 0 8px}
.dk-center{text-align:center;margin-inline:auto}
.dk-center .dk-lede{margin-inline:auto}
.dk-h2{font:400 clamp(40px,5.4vw,82px)/1.02 var(--f-sans);letter-spacing:-.045em;margin:22px 0 0;color:inherit;text-wrap:balance}
.dk-h3{font:400 clamp(28px,3vw,44px)/1.05 var(--f-sans);letter-spacing:-.035em;margin:18px 0 0;text-wrap:balance}
.dk-lede{font:400 clamp(16px,1.3vw,19px)/1.6 var(--f-sans);color:var(--muted);max-width:46ch;margin:20px 0 0;text-wrap:pretty}
.dk-panel .dk-lede,.dk-slab .dk-lede{color:var(--slab-muted)}
.dk-lime-sec .dk-lede{color:#3b4a2a}
.dk-pill{display:inline-block;background:var(--lime);color:var(--on-lime);border-radius:999px;padding:0 .3em .04em;line-height:1.05;letter-spacing:-.04em;transform:rotate(-2deg)}
.dk-lime-sec .dk-pill{background:var(--slab);color:var(--lime)}
.dk-tag{display:inline-flex;align-items:center;gap:8px;font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  padding:9px 14px;border-radius:999px;background:var(--slab);color:#edf0eb}
.dk-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime)}
.dk-tag.t-lime{background:var(--lime);color:var(--on-lime)}
.dk-tag.t-lime::before{background:var(--on-lime)}
.dk-tag.t-slab{background:var(--slab);color:var(--lime)}
.dk-mini{font:500 12px/1.3 var(--f-sans);color:var(--muted);margin:0}
.dk-panel .dk-mini,.dk-slab .dk-mini{color:var(--slab-muted)}
.dk-note{font:400 12px/1.4 var(--f-mono);letter-spacing:.02em;color:var(--lime-ink)}
.dk-panel .dk-note,.dk-slab .dk-note{color:var(--lime)}
.dk-card{background:var(--surface);color:var(--ink);border-radius:28px;padding:clamp(18px,2vw,26px)}
.dk-card .dk-mini{color:var(--muted)}

/* chips (status) */
.dk-chip{display:inline-flex;align-items:center;gap:6px;font:500 12.5px/1 var(--f-sans);padding:7px 11px;border-radius:999px;white-space:nowrap;
  background:var(--sunken);color:var(--muted)}
.dk-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.dk-chip[data-s="sent"]{background:var(--sky-soft);color:var(--sky)}
.dk-chip[data-s="accepted"],.dk-chip[data-s="paid"]{background:var(--lime-soft);color:var(--lime-ink)}
.dk-chip[data-s="converted"]{background:#e3e9e6;color:var(--panel)}
.dk-chip[data-s="overdue"]{background:var(--clay-soft);color:var(--clay)}
.dk-chip[data-s="declined"]{background:var(--sunken);color:var(--line-strong)}
.l-slab .dk-chip[data-s="draft"]{background:rgba(255,255,255,.1);color:#d5ddd8}

/* buttons */
.dk-btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 22px;border-radius:999px;font:500 15px/1 var(--f-sans);white-space:nowrap}
.b-slab{background:var(--slab);color:#edf0eb}
.b-lime{background:var(--lime);color:var(--on-lime)}
.b-line{border:1.5px solid var(--line-strong);color:var(--ink)}
.b-clay{border:1.5px solid var(--clay);color:var(--clay)}

/* ---------- tour ---------- */
.dk-theatre{display:grid;grid-template-columns:minmax(260px,380px) minmax(0,1fr);gap:clamp(36px,6vw,110px);align-items:center}
.dk-stage{position:relative}
.dk-stage::before{content:"";position:absolute;inset:8% -14% 4%;border-radius:var(--r-panel);background:var(--canvas);z-index:0}
.dk-phone.big{z-index:1;max-width:380px;margin-inline:auto}
#dk-tv img{position:absolute;inset:3.2%;width:93.6%;height:93.6%;opacity:0;transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1);transform:scale(1.02)}
#dk-tv img.on{opacity:1;transform:none}
#dk-tv{padding:0}
.dk-play{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dk-play button{all:unset;box-sizing:border-box;position:relative;overflow:hidden;width:100%;cursor:pointer;display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:start;
  padding:18px 22px 20px;border-radius:24px;background:transparent;transition:background .3s}
.dk-play button:hover{background:var(--sunken)}
.dk-play button[aria-pressed="true"]{background:var(--slab);color:#edf0eb}
.dk-play .n{font:500 13px/1.6 var(--f-mono);color:var(--muted)}
.dk-play button[aria-pressed="true"] .n{color:var(--lime)}
.dk-play b{display:block;font:400 clamp(22px,2vw,28px)/1.1 var(--f-sans);letter-spacing:-.03em}
.dk-play small{display:block;font-size:14.5px;line-height:1.5;color:var(--muted);margin-top:6px;max-height:0;opacity:0;transition:max-height .5s ease,opacity .4s ease}
.dk-play button[aria-pressed="true"] small{max-height:120px;opacity:1;color:var(--slab-muted)}
.dk-play .pr{position:absolute;left:22px;right:22px;bottom:10px;height:3px;border-radius:3px;background:rgba(255,255,255,.12);opacity:0}
.dk-play button[aria-pressed="true"] .pr{opacity:1}
.dk-play .pr::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--lime);transform-origin:left;transform:scaleX(var(--p,0))}

/* ---------- build ---------- */
.dk-build{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,64px);align-items:start}
.dk-builder{display:grid;gap:14px;min-width:0}
.dk-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dk-field{display:grid;gap:7px;font:500 12.5px/1.2 var(--f-sans);color:var(--muted);min-width:0}
.dk-field input,.dk-field select,.dk-field textarea{font:400 16px/1.3 var(--f-sans);color:var(--ink);background:var(--sunken);border:0;border-radius:18px;
  padding:14px 16px;width:100%;min-width:0;-webkit-appearance:none;appearance:none}
.dk-field select{background:var(--sunken) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23252f2c' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center;padding-right:40px;cursor:pointer}
.dk-field textarea{resize:vertical;min-height:96px;line-height:1.5}
.dk-field.on-dark{color:var(--slab-muted)}
.dk-field.on-dark textarea{background:var(--slab-2);color:#edf0eb;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.dk-catalogue{display:grid;gap:10px;padding:4px 2px}
.dk-catalogue .dk-note{margin-left:8px}
.dk-chips{display:flex;flex-wrap:wrap;gap:8px}
.dk-chips button{all:unset;box-sizing:border-box;cursor:pointer;display:inline-grid;gap:2px;padding:11px 15px 12px;border-radius:18px;background:var(--slab-2);color:#edf0eb;
  transition:background .25s,transform .25s cubic-bezier(.34,1.56,.64,1)}
.dk-chips button:hover{background:#2f3b37;transform:translateY(-2px)}
.dk-chips button:active{transform:scale(.96)}
.dk-chips button b{font:500 14.5px/1.2 var(--f-sans)}
.dk-chips button small{font:400 12px/1.2 var(--f-mono);color:var(--slab-muted)}
.dk-chips button.pop{animation:dkPop .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes dkPop{0%{background:var(--lime);color:var(--on-lime);transform:scale(.94)}100%{background:var(--slab-2)}}
.dk-lines ol{list-style:none;margin:10px 0 0;padding:0}
.dk-lines li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line);animation:dkIn .35s ease both}
.dk-lines li:first-child{border-top:0}
.dk-lines li .nm b{display:block;font:400 16px/1.25 var(--f-sans)}
.dk-lines li .nm small{display:block;font:400 12.5px/1.3 var(--f-mono);color:var(--muted);margin-top:3px}
.dk-lines li .amt{font:400 16px/1 var(--f-sans);min-width:86px;text-align:right}
.dk-step{display:inline-flex;align-items:center;background:var(--sunken);border-radius:999px}
.dk-step button{all:unset;cursor:pointer;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;font:500 18px/1 var(--f-sans);color:var(--ink)}
.dk-step button:hover{background:var(--line)}
.dk-step span{min-width:22px;text-align:center;font:500 14px/1 var(--f-mono)}
.dk-empty{font-size:14px;color:var(--muted);padding:14px 0 4px;margin:0}
@keyframes dkIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* the document card: the app's own panel stack */
.dk-doc{position:sticky;top:96px;display:grid}
.dk-layer{position:relative;border-radius:36px;padding:26px 28px}
.dk-layer + .dk-layer{margin-top:-36px;padding-top:58px}
.l-surface{background:var(--surface);color:var(--ink);z-index:3}
.l-slab{background:var(--slab);color:#edf0eb;z-index:2;box-shadow:0 0 0 1px rgba(255,255,255,.04) inset}
.l-lime{all:unset;box-sizing:border-box;position:relative;border-radius:36px;margin-top:-36px;padding:58px 28px 26px;background:var(--lime);color:var(--on-lime);z-index:1;
  display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;transition:filter .2s}
.l-lime:hover{filter:brightness(1.04)}
.l-lime:hover .dk-circle{transform:translateX(4px)}
.l-lime:focus-visible{outline:3px solid #edf0eb;outline-offset:3px}
.dk-doc-title{font:400 clamp(26px,2.4vw,34px)/1.08 var(--f-sans);letter-spacing:-.035em;margin:12px 0 0;overflow-wrap:anywhere}
.dk-doc-meta{font:400 13px/1.4 var(--f-sans);color:var(--muted);margin:10px 0 0}
.l-slab .dk-doc-meta{color:var(--slab-muted)}
.dk-slab-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.l-slab .dk-mini{color:var(--slab-muted)}
.dk-hero-amt{font:300 clamp(56px,6.6vw,92px)/1 var(--f-sans);letter-spacing:-.06em;margin:12px 0 0;display:flex;align-items:flex-start}
.dk-hero-amt sup{font-size:.42em;letter-spacing:-.02em;margin:.12em 0 0 .04em;line-height:1}
.dk-hero-amt.bump{animation:dkBump .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes dkBump{0%{transform:scale(.97)}60%{transform:scale(1.02)}100%{transform:none}}
.dk-next-txt b{display:block;font:500 clamp(19px,1.6vw,22px)/1.2 var(--f-sans);letter-spacing:-.02em}
.dk-next-txt small{display:block;font:400 13px/1.4 var(--f-sans);opacity:.75;margin-top:4px}
.dk-circle{flex:none;width:52px;height:52px;border-radius:50%;background:var(--slab);display:grid;place-items:center;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.dk-circle svg{width:22px;height:22px;fill:none;stroke:#edf0eb;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.dk-rail{list-style:none;margin:22px 4px 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.dk-rail li{font:500 11px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--slab-muted);padding-top:12px;position:relative}
.dk-rail li::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;border-radius:4px;background:rgba(255,255,255,.14);transition:background .4s}
.dk-rail li.on{color:#edf0eb}
.dk-rail li.on::before{background:var(--lime)}
.dk-toast{position:absolute;left:50%;bottom:-62px;translate:-50% 0;background:var(--slab);color:#edf0eb;font:500 14px/1 var(--f-sans);padding:13px 18px;border-radius:999px;
  white-space:nowrap;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s;pointer-events:none;box-shadow:0 12px 30px -12px rgba(0,0,0,.5)}
.dk-toast.show{opacity:1;transform:none}
.dk-toast-fixed{position:fixed;left:50%;bottom:28px;z-index:80}
.dk-panel .dk-toast{background:var(--surface);color:var(--ink)}
.dk-burst{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:visible}
.dk-burst i{position:absolute;width:10px;height:10px;border-radius:3px;background:var(--lime);left:var(--x);top:var(--y);animation:dkBurst 1s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes dkBurst{to{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}

/* ---------- chase ---------- */
.dk-chase{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,380px);gap:clamp(32px,6vw,110px);align-items:start}
.dk-chase-ctl{display:grid;gap:18px;min-width:0}
.dk-owing{display:grid;gap:8px;margin-top:-8px}
.dk-owing button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 16px;border-radius:24px;
  background:var(--slab-2);transition:background .25s,box-shadow .25s}
.dk-owing button[aria-checked="true"]{background:var(--surface);color:var(--ink);box-shadow:0 0 0 3px var(--lime)}
.dk-owing .t b{display:block;font:500 16px/1.2 var(--f-sans)}
.dk-owing .t small{display:block;font-size:12px;color:var(--slab-muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-owing button[aria-checked="true"] .t small{color:var(--muted)}
.dk-owing .a{display:grid;justify-items:end;gap:6px}
.dk-owing .a b{font:400 17px/1 var(--f-sans)}
.dk-tile{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--slab);color:#edf0eb;font:500 14px/1 var(--f-sans)}
.dk-owing button[aria-checked="false"] .dk-tile{background:#3b4a45}
.dk-seg{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border-radius:999px;background:var(--slab-2);justify-self:start;min-width:240px}
.dk-seg button{all:unset;box-sizing:border-box;cursor:pointer;text-align:center;padding:11px 20px;border-radius:999px;font:500 14px/1 var(--f-sans);color:var(--slab-muted);transition:background .25s,color .25s}
.dk-seg button[aria-checked="true"],.dk-seg button[aria-selected="true"]{background:var(--lime);color:var(--on-lime)}
.dk-seg.light{background:var(--surface)}
.dk-seg.light button{color:var(--muted)}
.dk-seg.light button[aria-selected="true"]{background:var(--slab);color:#edf0eb}
.dk-tokens{display:flex;flex-wrap:wrap;gap:6px;margin-top:-6px}
.dk-tokens button{all:unset;cursor:pointer;font:400 12.5px/1 var(--f-mono);padding:8px 11px;border-radius:999px;background:var(--slab-2);color:var(--lime);box-shadow:inset 0 0 0 1px rgba(188,227,91,.25)}
.dk-tokens button:hover{background:#33403b}
.dk-chase-out{display:grid;justify-items:center;gap:16px}
.dk-msgphone{width:100%;max-width:340px;padding:0;overflow:hidden;background:#0d1110}
.dk-msgphone > div{position:absolute;inset:3.2%;border-radius:10.8%/5%;overflow:hidden}
.dk-lock{background:linear-gradient(170deg,#3b4d47 0%,#252f2c 60%,#1b2320 100%);color:#edf0eb;display:flex;flex-direction:column;align-items:center;padding:20% 6% 0;z-index:1;
  transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.dk-lock.away{opacity:0;transform:translateY(-8%);pointer-events:none}
.dk-time{font:300 clamp(56px,6vw,76px)/1 var(--f-sans);letter-spacing:-.04em;margin:0}
.dk-date{font:400 14px/1 var(--f-sans);opacity:.8;margin:8px 0 0}
.dk-notif{margin-top:auto;margin-bottom:30%;width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-radius:20px;
  background:rgba(250,250,248,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:dkNotif 4.5s ease infinite}
.dk-notif-ic{width:36px;height:36px;border-radius:9px;background:var(--lime);position:relative}
.dk-notif-ic::after{content:"";position:absolute;inset:10px 9px;border-radius:3px;background:var(--slab)}
.dk-notif b{display:block;font:500 13px/1.2 var(--f-sans)}
.dk-notif small{display:block;font:400 13px/1.3 var(--f-sans);opacity:.85}
.dk-notif em{font:400 11px/1 var(--f-sans);font-style:normal;opacity:.6;align-self:start}
@keyframes dkNotif{0%,8%{opacity:0;transform:translateY(-14px)}16%,100%{opacity:1;transform:none}}
.dk-sms{color:var(--ink);background:#fafaf8;display:flex;flex-direction:column;padding:16% 5% 6%}
.dk-sms-to{font:400 13px/1 var(--f-sans);color:var(--muted);margin:0;padding-bottom:12px;border-bottom:1px solid var(--line)}
.dk-sms-to b{color:var(--ink);font-weight:500}
.dk-bubble{align-self:flex-end;margin:auto 0 14px;max-width:86%;background:var(--slab);color:#edf0eb;font:400 14.5px/1.45 var(--f-sans);padding:12px 15px;border-radius:20px 20px 6px 20px;
  white-space:pre-wrap;overflow-wrap:anywhere}
.dk-bubble mark,.dk-mail-body mark{background:var(--lime);color:var(--on-lime);border-radius:5px;padding:0 3px}
.dk-sms-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;padding:8px 8px 8px 16px;border-radius:999px;background:var(--sunken);font:400 13px/1 var(--f-sans);color:var(--line-strong)}
.dk-sms-bar i{width:30px;height:30px;border-radius:50%;background:var(--lime);display:grid;place-items:center}
.dk-sms-bar svg{width:16px;height:16px;fill:none;stroke:var(--on-lime);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dk-mail{color:var(--ink);background:#fafaf8;padding:16% 6% 6%;display:flex;flex-direction:column;gap:0}
.dk-mail[hidden]{display:none}
.dk-mail-row{display:grid;grid-template-columns:62px 1fr;gap:8px;font:400 13px/1.3 var(--f-sans);margin:0;padding:10px 0;border-bottom:1px solid var(--line);min-width:0}
.dk-mail-row span{color:var(--muted)}
.dk-mail-row b{font-weight:500;overflow-wrap:anywhere}
.dk-mail-body{font:400 14px/1.6 var(--f-sans);margin:14px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.dk-mail-att{margin:auto 0 0;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:var(--sunken);font:400 13px/1 var(--f-mono)}
.dk-mail-att i{font:500 10px/1 var(--f-mono);font-style:normal;background:var(--clay);color:#fff;padding:6px 6px;border-radius:6px}
.dk-note-out{text-align:center;max-width:30ch}

/* ---------- paperwork ---------- */
.dk-paper{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,110px);align-items:center}
.dk-paper-txt{display:grid;gap:28px;align-content:start}
.dk-ticks{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.dk-ticks li{position:relative;padding:14px 0 14px 36px;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--muted)}
.dk-ticks li b{color:var(--ink);font-weight:500}
.dk-ticks li::before{content:"";position:absolute;left:0;top:13px;width:22px;height:22px;border-radius:50%;background:var(--lime)}
.dk-ticks li::after{content:"";position:absolute;left:7px;top:19px;width:8px;height:5px;border-left:2px solid var(--on-lime);border-bottom:2px solid var(--on-lime);transform:rotate(-45deg)}
.dk-sheet-wrap{position:relative;display:grid;justify-items:center;gap:18px}
.dk-sheet-wrap::before{content:"";position:absolute;inset:6% -8% 14%;border-radius:var(--r-panel);background:var(--panel);transform:rotate(3deg);z-index:0}
.dk-sheet{position:relative;z-index:1;width:min(100%,600px);aspect-ratio:210/297;background:#fff;border-radius:6px;transform:rotate(-1.6deg);overflow:hidden;
  box-shadow:0 30px 60px -28px rgba(10,16,14,.55),0 4px 12px -6px rgba(10,16,14,.25);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.dk-sheet:hover{transform:rotate(0) scale(1.01)}
.dk-sheet .pg{position:absolute;left:0;top:0;width:794px;height:1123px;transform-origin:0 0;transform:scale(var(--k,.75));font-family:Arial,Helvetica,sans-serif;font-size:13px;color:#111;padding:40px 44px;
  font-variant-numeric:normal;letter-spacing:0}
.dk-sheet .pg table{width:100%;border-collapse:collapse}
.dk-sheet .pg thead tr{background:#1a1a2e;color:#fff;text-align:left}
.dk-sheet .pg.swap{animation:dkSwap .45s ease}
@keyframes dkSwap{from{opacity:0;transform:scale(var(--k,.75)) translateY(10px)}to{opacity:1}}
.dk-note-sheet{position:relative;z-index:1;color:#edf0eb !important;background:var(--slab);padding:9px 14px;border-radius:999px}

/* ---------- brand ---------- */
.dk-swatches{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}
.dk-swatches button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:4px;padding:10px 10px 14px;border-radius:24px;background:var(--canvas);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.dk-swatches button:hover{transform:translateY(-4px)}
.dk-swatches i{display:block;aspect-ratio:1/1.1;border-radius:16px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(37,47,44,.1);margin-bottom:8px}
.dk-swatches b{font:500 14px/1.2 var(--f-sans);padding-inline:4px}
.dk-swatches span{font:400 12px/1.2 var(--f-mono);color:var(--muted);padding-inline:4px}
.dk-brandrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-top:14px}
.dk-brandrow .dk-card{background:var(--canvas);padding:clamp(22px,2.6vw,36px)}
.dk-type{display:grid;gap:10px;align-content:start;position:relative}
.dk-t-display{font:400 clamp(44px,5vw,72px)/1 var(--f-sans);letter-spacing:-.05em;margin:0 0 18px;outline:none;overflow-wrap:anywhere}
.dk-t-display:focus{box-shadow:0 3px 0 var(--lime)}
.dk-t-amt{font:300 clamp(48px,5vw,72px)/1 var(--f-sans);letter-spacing:-.06em;margin:0 0 18px}
.dk-t-amt sup{font-size:.42em;letter-spacing:-.02em;vertical-align:.95em}
.dk-t-mono{font:400 15px/1.4 var(--f-mono);margin:0}
.dk-try{position:absolute;right:28px;top:26px;margin:0;transform:rotate(-3deg)}
.dk-comps{display:grid;gap:12px;align-content:start}
.dk-comp-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.dk-radii i{display:block;width:56px;height:56px;background:var(--slab);border-radius:var(--r) 0 0 0}
.dk-radii i:nth-child(2){background:var(--panel)}
.dk-radii i:nth-child(3){background:var(--lime)}
.dk-radii i:nth-child(4){background:var(--line-strong)}
.dk-mini-stack{display:grid;max-width:340px}
.dk-mini-stack i{display:block;height:58px;border-radius:24px}
.dk-mini-stack i + i{margin-top:-24px}
.dk-mini-stack .s1{background:var(--surface);position:relative;z-index:3;box-shadow:0 1px 0 rgba(0,0,0,.04)}
.dk-mini-stack .s2{background:var(--panel);position:relative;z-index:2}
.dk-mini-stack .s3{background:var(--lime);position:relative;z-index:1}
.dk-dark{margin-top:14px;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,360px);gap:clamp(30px,6vw,100px);align-items:center;
  background:var(--slab);color:#edf0eb;border-radius:var(--r-panel);padding:clamp(28px,4vw,64px) clamp(24px,5vw,80px)}
.dk-dark .dk-lede{color:var(--slab-muted)}
.dk-dark .dk-tag{background:var(--lime);color:var(--on-lime)}
.dk-dark .dk-tag::before{background:var(--on-lime)}
.dk-compare{user-select:none;touch-action:pan-y;width:100%}
.dk-compare img{position:absolute;inset:3.2%;width:93.6%;height:93.6%}
.dk-compare img.top{clip-path:inset(0 0 0 var(--x))}
.dk-compare{padding:0}
.dk-handle{position:absolute;top:3.2%;bottom:3.2%;left:calc(3.2% + var(--x) * .936);width:2px;margin-left:-1px;background:var(--lime);z-index:4;pointer-events:none}
.dk-handle i{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:var(--lime);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.dk-handle i::before,.dk-handle i::after{content:"";position:absolute;top:50%;width:7px;height:7px;margin-top:-4px;border-left:2px solid var(--on-lime);border-bottom:2px solid var(--on-lime)}
.dk-handle i::before{left:11px;transform:rotate(45deg)}
.dk-handle i::after{right:11px;transform:rotate(-135deg)}
.dk-compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;z-index:5;-webkit-appearance:none;appearance:none}
.dk-compare:has(input:focus-visible) .dk-handle i{outline:2px solid #fff;outline-offset:3px}

/* ---------- more screens ---------- */
.dk-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2.4vw,36px);align-items:start;outline:none}
.dk-strip figure{margin:0;display:grid;gap:18px;justify-items:center;text-align:center;min-width:0}
.dk-strip .dk-phone{width:100%;max-width:260px}
.dk-strip .tilt-l{transform:rotate(-3deg)}
.dk-strip .tilt-r{transform:rotate(3deg)}
.dk-strip figure:nth-child(even){margin-top:56px}
.dk-strip figcaption{font:500 14px/1.35 var(--f-sans);color:var(--on-lime);max-width:20ch}

/* ---------- outro ---------- */
.dk-outro{position:relative;background:var(--canvas);padding-block:clamp(80px,9vw,140px);margin-top:clamp(64px,8vw,112px)}
.dk-ostack{display:grid;max-width:1080px;margin-inline:auto}
.dk-ostack .dk-layer{border-radius:var(--r-panel);padding:clamp(30px,4vw,60px) clamp(26px,4.4vw,68px)}
.dk-ostack .dk-layer + .dk-layer{margin-top:calc(var(--r-panel) * -1);padding-top:calc(var(--r-panel) + clamp(24px,3vw,44px))}
.dk-ostack .l-lime{text-decoration:none}
.dk-ostack .l-surface{text-align:left}
.dk-wordmark{font:500 clamp(28px,2.6vw,38px)/1 var(--f-sans);letter-spacing:-.05em;margin:0;display:inline-flex;align-items:flex-start;gap:6px}
.dk-wordmark i{width:10px;height:10px;border-radius:50%;background:var(--lime);margin-top:3px}
.dk-outro .dk-h2{font-size:clamp(44px,6.4vw,100px);margin-top:clamp(18px,2vw,30px)}
.dk-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,40px);margin:0}
.dk-facts dt{font:500 11.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}
.dk-facts dd{margin:12px 0 0;font:400 clamp(15px,1.2vw,18px)/1.45 var(--f-sans);color:#edf0eb}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .dk-swatches{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dk-strip{grid-template-columns:repeat(5,minmax(200px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 4px 30px;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}
  .dk-strip figure{scroll-snap-align:center}
}
@media (max-width:960px){
  .dk-head-split{grid-template-columns:1fr}
  .dk-theatre{grid-template-columns:1fr}
  .dk-stage{max-width:320px;width:100%;margin-inline:auto}
  .dk-play{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dk-play small{display:none}
  .dk-play button{grid-template-columns:1fr;gap:4px;padding:14px 16px 18px}
  .dk-play .pr{left:16px;right:16px}
  .dk-build{grid-template-columns:1fr}
  .dk-doc{position:relative;top:auto}
  .dk-chase{grid-template-columns:1fr}
  .dk-paper{grid-template-columns:1fr}
  .dk-brandrow{grid-template-columns:1fr}
  .dk-dark{grid-template-columns:1fr}
  .dk-dark .dk-compare{max-width:320px;width:100%;margin-inline:auto}
  .dk-facts{grid-template-columns:1fr}
}
@media (max-width:560px){
  .dk-row2{grid-template-columns:1fr}
  .dk-play{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .dk-play button{padding:12px 12px 16px;border-radius:18px}
  .dk-play b{font-size:16px}
  .dk-play .n{font-size:11px}
  .dk-play .pr{left:12px;right:12px;bottom:7px}
  .dk-layer{padding:22px 22px}
  .dk-layer + .dk-layer,.l-lime{padding-top:54px}
  .dk-lines li{grid-template-columns:minmax(0,1fr) auto;row-gap:8px}
  .dk-lines li .amt{grid-column:2;grid-row:1}
  .dk-lines li .dk-step{grid-column:1;grid-row:2;justify-self:start}
  .dk-swatches{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .dk-swatches button{padding:6px 6px 10px;border-radius:18px}
  .dk-swatches i{border-radius:12px;margin-bottom:4px}
  .dk-swatches b{font-size:12px;padding-inline:2px}
  .dk-swatches span{font-size:9.5px;padding-inline:2px}
  .dk-try{position:static;transform:none}
  .dk-seg{min-width:0;justify-self:stretch}
  .dk-owing button{grid-template-columns:auto minmax(0,1fr)}
  .dk-owing .a{grid-column:1 / -1;grid-auto-flow:column;justify-content:space-between;align-items:center}
  .dk-strip figure:nth-child(even){margin-top:0}
}
@media (prefers-reduced-motion:reduce){
  .dk-hero-phones .hp,.dk-notif,.dk-lines li,.dk-chips button.pop,.dk-hero-amt.bump,.dk-sheet .pg.swap{animation:none}
  #dk-tv img,.dk-lock,.dk-play small{transition:none}
}