/* ==========================================================================
   story sections · #promise (CONTENT.md §2) and #desktop (CONTENT.md §5).
   Every rule is scoped under #promise or #desktop.
   Illustrations are sized in "design px": --k = 1 design px, derived from the
   illustration's own width with container query units, so each vignette
   scales as one picture (no reflow inside it).
   Palette: apricot accent, violet = working, gold (--ok) = done. No green/teal.
   ========================================================================== */

:is(#promise,#desktop){
  --st-body:#b5aca5;      /* body copy on charcoal */
  --st-line:#3a3936;      /* hairlines */
  --st-card:#222120;      /* illustration frame */
  --st-panel:#1b1a19;     /* teammate panel */
  --st-raise:#262422;     /* raised rows inside panels */
  --st-dim:#4a4643;       /* pending rings */
  --st-paper:#eae3dd;     /* document paper */
  --st-paper-2:#ddd4cc;
  --st-paper-ln:#d2c8bf;
  --st-paper-ink:#1a1918;
  --st-paper-mut:#655c55;  /* >= 4.5:1 on paper */
  position:relative;
  background:var(--bg);
  color:var(--fg);
}

/* ---------- shared: scroll reveal ---------- */
:is(#promise,#desktop).st-armed [data-pr-reveal]{opacity:0;transform:translate3d(0,28px,0)}
:is(#promise,#desktop).st-armed [data-pr-reveal].is-in{
  opacity:1;transform:none;
  transition:opacity .9s var(--ease-out) var(--d,0ms),transform 1.1s var(--ease-out) var(--d,0ms);
}

/* ---------- shared: Lexi mark + step icons ---------- */
:is(#promise,#desktop) .pr-mark__bg{fill:var(--accent)}
:is(#promise,#desktop) .pr-mark__l{fill:none;stroke:var(--accent-ink);stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round}
:is(#promise,#desktop) .pr-mark__o{fill:var(--accent-ink)}

:is(#promise,#desktop) .pr-ring{fill:none;stroke:var(--st-dim);stroke-width:1.4;transition:fill .35s var(--ease),stroke .35s var(--ease)}
:is(#promise,#desktop) .pr-spin{fill:none;stroke:var(--violet);stroke-width:1.7;stroke-linecap:round;stroke-dasharray:9 29;opacity:0;transform-box:fill-box;transform-origin:center}
:is(#promise,#desktop) .pr-tick{fill:none;stroke:var(--accent-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:10;stroke-dashoffset:10;transition:stroke-dashoffset .4s var(--ease-out) .12s}
:is(#promise,#desktop) .is-active .pr-ring{stroke:rgba(155,156,255,.25)}
:is(#promise,#desktop) .is-active .pr-spin{opacity:1;animation:st-spin .9s linear infinite;animation-play-state:paused}
:is(#promise,#desktop) .is-playing .is-active .pr-spin{animation-play-state:running}
:is(#promise,#desktop) .is-done .pr-ring{fill:var(--ok);stroke:var(--ok)}
:is(#promise,#desktop) .is-done .pr-tick{stroke-dashoffset:0}
@keyframes st-spin{to{transform:rotate(360deg)}}
@keyframes st-blink{0%,45%{opacity:1}50%,95%{opacity:0}100%{opacity:1}}

/* ==========================================================================
   #promise
   ========================================================================== */
#promise{padding:clamp(88px,10vw,152px) 0 clamp(72px,8vw,128px)}

#promise .pr-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end}
#promise .pr-title{grid-column:1 / span 7}
#promise .pr-line{display:block;text-wrap:balance}
#promise .pr-lede{grid-column:9 / span 4;max-width:36ch;font-size:17px;line-height:1.55;color:var(--st-body);padding-bottom:.35em}

#promise .pr-beats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px;margin-top:clamp(56px,6.2vw,96px);counter-reset:none}
#promise .pr-beat{display:flex;flex-direction:column;min-width:0}
#promise .pr-beat__rule{position:relative;display:flex;align-items:center;height:40px;margin-bottom:24px;border-bottom:1px solid var(--st-line)}
#promise .pr-beat__rule::after{content:"";position:absolute;left:0;bottom:-1px;width:56px;height:1px;background:var(--accent);transform-origin:left}
#promise.st-armed .pr-beat__rule::after{transform:scaleX(0)}
#promise.st-armed .pr-beat.is-in .pr-beat__rule::after{transform:scaleX(1);transition:transform 1.2s var(--ease-out) calc(var(--d,0ms) + 350ms)}
#promise .pr-beat__num{font-size:12px;line-height:1;color:var(--taupe)}

#promise .pr-beat__copy{margin-top:28px;padding-right:24px}
#promise .pr-beat__title{font-size:24px;line-height:1.2;font-weight:600;letter-spacing:-.01em;color:var(--fg)}
#promise .pr-beat__text{margin-top:10px;max-width:34ch;font-size:16px;line-height:1.5;color:var(--st-body)}

/* vignette frame */
#promise .pr-vig{
  position:relative;container-type:inline-size;aspect-ratio:4 / 3;overflow:hidden;border-radius:var(--r);
  background:radial-gradient(110% 80% at 85% -10%,rgba(255,143,90,.09),transparent 60%),var(--st-card);
  box-shadow:inset 0 0 0 1px rgba(234,227,221,.05);
}
#promise .pr-vig__in{--k:calc(100cqw / 400);position:absolute;inset:0;font-size:calc(13 * var(--k));line-height:1.4}
#promise .pr-illus{position:absolute;z-index:6;top:calc(12 * var(--k));right:calc(14 * var(--k));font-size:max(9px,calc(10 * var(--k)));line-height:1;color:var(--taupe);opacity:.85}

/* --- beat 1: document + docked launcher --- */
#promise .pr-doc{
  position:absolute;left:calc(26 * var(--k));top:calc(34 * var(--k));width:calc(300 * var(--k));height:calc(290 * var(--k));
  border-radius:calc(10 * var(--k));background:var(--st-paper);color:var(--st-paper-ink);overflow:hidden;
  box-shadow:0 calc(18 * var(--k)) calc(40 * var(--k)) rgba(0,0,0,.4);
}
#promise .pr-doc__bar{display:flex;align-items:center;gap:calc(10 * var(--k));height:calc(26 * var(--k));padding:0 calc(10 * var(--k));background:var(--st-paper-2)}
#promise .pr-doc__dots{display:flex;gap:calc(4 * var(--k))}
#promise .pr-doc__dots i{width:calc(6 * var(--k));height:calc(6 * var(--k));border-radius:50%;background:#bfb3a9}
#promise .pr-doc__name{font-size:calc(10.5 * var(--k));color:#554c46}
#promise .pr-doc__body{padding:calc(16 * var(--k)) calc(20 * var(--k))}
#promise .pr-doc__h{font-size:calc(17 * var(--k));line-height:1.2;font-weight:700;letter-spacing:-.01em}
#promise .pr-doc__meta{margin-top:calc(4 * var(--k));margin-bottom:calc(10 * var(--k));font-size:calc(8.5 * var(--k));color:var(--st-paper-mut)}
#promise .pr-doc__ln{display:block;width:var(--w,80%);height:calc(5 * var(--k));margin-top:calc(8 * var(--k));border-radius:99px;background:var(--st-paper-ln)}
#promise .pr-doc__ln--dim{opacity:.6}
#promise .pr-doc__type{min-height:calc(3 * 11.5 * 1.45 * var(--k));margin:calc(10 * var(--k)) 0 calc(4 * var(--k));font-size:calc(11.5 * var(--k));line-height:1.45}
#promise .pr-caret{display:inline-block;width:calc(1.6 * var(--k));height:calc(13 * var(--k));margin-left:1px;vertical-align:calc(-2 * var(--k));background:var(--accent);border-radius:1px}
#promise .is-playing .pr-caret{animation:st-blink 1.05s steps(1) infinite}
#promise .is-typing .pr-caret{animation:none}

#promise .pr-dock{
  position:absolute;right:0;top:calc(122 * var(--k));display:flex;align-items:center;
  width:calc(44 * var(--k));height:calc(52 * var(--k));padding-left:calc(10 * var(--k));
  border-radius:calc(14 * var(--k)) 0 0 calc(14 * var(--k));background:#2b2927;
  box-shadow:inset 1px 0 0 rgba(234,227,221,.08),inset 0 1px 0 rgba(234,227,221,.06),0 calc(10 * var(--k)) calc(24 * var(--k)) rgba(0,0,0,.45);
}
#promise .pr-dock .pr-mark{width:calc(24 * var(--k));height:calc(24 * var(--k))}
#promise .pr-dock::before{content:"";position:absolute;left:calc(6 * var(--k));top:calc(4 * var(--k));width:max(7px,calc(8 * var(--k)));height:max(7px,calc(8 * var(--k)));border-radius:22%;background:var(--accent)} /* status symbol: presence (active), blinks while playing */
#promise .is-playing .pr-dock::before{animation:status-sq-blink 1.6s var(--ease) infinite}

/* --- beat 2: task panel with steps --- */
#promise .pr-panel{
  position:absolute;left:calc(50 * var(--k));top:calc(38 * var(--k));width:calc(300 * var(--k));padding:calc(14 * var(--k)) calc(16 * var(--k));
  border-radius:calc(12 * var(--k));background:var(--st-panel);box-shadow:inset 0 0 0 1px var(--st-line),0 calc(18 * var(--k)) calc(40 * var(--k)) rgba(0,0,0,.35);
}
#promise .pr-panel__head{display:flex;align-items:center;gap:calc(8 * var(--k));height:calc(22 * var(--k))}
#promise .pr-panel .pr-mark{width:calc(20 * var(--k));height:calc(20 * var(--k));flex:none}
#promise .pr-panel__name{font-size:calc(13 * var(--k));font-weight:600}
#promise .pr-status{display:inline-flex;align-items:center;gap:calc(6 * var(--k));height:calc(20 * var(--k));margin-left:auto;padding:0 calc(8 * var(--k));border-radius:99px;font-size:calc(9 * var(--k));background:rgba(155,156,255,.13);color:var(--violet);transition:background-color .4s var(--ease),color .4s var(--ease)}
#promise .pr-status .status-sq{--status-c:currentColor} /* status symbol: working = violet, done = gold */
#promise .is-playing .pr-status:not(.is-done) .status-sq{animation:status-sq-blink 1.6s var(--ease) infinite}
#promise .pr-status.is-done{background:rgba(255,210,138,.14);color:var(--ok)}
#promise .pr-panel__ask{display:flex;align-items:baseline;gap:calc(8 * var(--k));margin-top:calc(12 * var(--k));padding:calc(8 * var(--k)) calc(10 * var(--k));border-radius:calc(8 * var(--k));background:var(--st-raise);font-size:calc(12 * var(--k));color:var(--fg)}
#promise .pr-panel__ask .mono{font-size:calc(9 * var(--k));color:var(--taupe)}
#promise .pr-steps{margin-top:calc(8 * var(--k))}
#promise .pr-step{display:flex;align-items:center;gap:calc(9 * var(--k));height:calc(24 * var(--k));color:#d2cac3;opacity:.62;transition:opacity .4s var(--ease)}
#promise .pr-step.is-active,#promise .pr-step.is-done{opacity:1}
#promise .pr-step__ic{flex:none;width:calc(14 * var(--k));height:calc(14 * var(--k))}
#promise .pr-step__ic svg{width:100%;height:100%;overflow:visible}
#promise .pr-step__k{flex:none;width:calc(70 * var(--k));font-size:calc(9 * var(--k));color:var(--taupe)}
#promise .pr-step__t{font-size:calc(11.5 * var(--k));white-space:nowrap}
#promise .pr-meter{display:flex;align-items:center;gap:calc(10 * var(--k));margin-top:calc(10 * var(--k))}
#promise .pr-meter__bar{position:relative;flex:1;height:calc(3 * var(--k));border-radius:99px;background:#2e2c2a;overflow:hidden}
#promise .pr-meter__bar i{position:absolute;inset:0;background:var(--accent);border-radius:inherit;transform-origin:left;transform:scaleX(var(--p,0));transition:transform .6s var(--ease-out)}
#promise .pr-meter__n{font-size:calc(9 * var(--k));color:var(--taupe);white-space:nowrap}

/* --- beat 3: review card --- */
#promise .pr-review{
  position:absolute;left:calc(50 * var(--k));top:calc(38 * var(--k));width:calc(300 * var(--k));padding:calc(14 * var(--k)) calc(14 * var(--k)) calc(14 * var(--k));
  border-radius:calc(12 * var(--k));background:var(--st-panel);box-shadow:inset 0 0 0 1px var(--st-line),0 calc(18 * var(--k)) calc(40 * var(--k)) rgba(0,0,0,.35);
  transition:box-shadow .5s var(--ease);
}
#promise .pr-review.is-approved{box-shadow:inset 0 0 0 1px rgba(255,210,138,.45),0 calc(18 * var(--k)) calc(40 * var(--k)) rgba(0,0,0,.35)}
#promise .pr-review__flag{position:relative;display:flex;align-items:center;gap:calc(7 * var(--k));height:calc(16 * var(--k));font-size:calc(9.5 * var(--k));color:var(--accent)}
#promise .pr-review__flag .status-sq{--status-c:currentColor;transition:background-color .4s} /* needs approval = accent, approved = gold */
#promise .pr-review__sw{position:relative;display:block;flex:1;height:calc(16 * var(--k));line-height:calc(16 * var(--k));overflow:hidden}
#promise .pr-review__ask,#promise .pr-review__ok{position:absolute;left:0;top:0;white-space:nowrap;transition:opacity .35s var(--ease),transform .55s var(--ease-out)}
#promise .pr-review__ok{color:var(--ok);opacity:0;transform:translateY(100%)}
#promise .is-approved .pr-review__flag .status-sq{--status-c:var(--ok)}
#promise .is-approved .pr-review__ask{opacity:0;transform:translateY(-100%)}
#promise .is-approved .pr-review__ok{opacity:1;transform:none}
#promise .pr-invite{margin-top:calc(10 * var(--k));padding:calc(12 * var(--k)) calc(14 * var(--k)) calc(14 * var(--k));border-radius:calc(9 * var(--k));background:var(--st-raise)}
#promise .pr-invite__k{font-size:calc(9 * var(--k));color:var(--taupe)}
#promise .pr-invite__t{margin-top:calc(6 * var(--k));font-size:calc(15 * var(--k));line-height:1.2;font-weight:600}
#promise .pr-invite__when{margin-top:calc(3 * var(--k));font-size:calc(11 * var(--k));color:var(--st-body)}
#promise .pr-invite__who{display:flex;gap:calc(6 * var(--k));margin:calc(10 * var(--k)) 0 calc(4 * var(--k))}
#promise .pr-chip{display:inline-flex;align-items:center;gap:calc(5 * var(--k));height:calc(20 * var(--k));padding:0 calc(8 * var(--k)) 0 calc(2 * var(--k));border-radius:99px;background:#33302d;font-size:calc(10.5 * var(--k))}
#promise .pr-chip b{display:grid;place-items:center;width:calc(16 * var(--k));height:calc(16 * var(--k));border-radius:50%;font-size:calc(8.5 * var(--k));font-weight:600;color:var(--ink);background:var(--violet)}
#promise .pr-chip + .pr-chip b{background:var(--sky)}
#promise .pr-invite .pr-doc__ln{background:#35322f;height:calc(4 * var(--k))}
#promise .pr-review__acts{display:flex;justify-content:flex-end;gap:calc(8 * var(--k));margin-top:calc(12 * var(--k))}
#promise .pr-act{position:relative;display:inline-flex;align-items:center;justify-content:center;height:calc(30 * var(--k));padding:0 calc(14 * var(--k));border-radius:calc(6 * var(--k));font-size:calc(10.5 * var(--k));line-height:1;transition:background-color .35s var(--ease),color .35s var(--ease),transform .18s var(--ease)}
#promise .pr-act--edit{background:#2e2c2a;color:var(--fg)}
#promise .pr-act--go{min-width:calc(96 * var(--k));background:var(--accent);color:var(--accent-ink);overflow:hidden}
#promise .pr-act__a,#promise .pr-act__b{transition:opacity .3s var(--ease),transform .45s var(--ease-out)}
#promise .pr-act__b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:calc(5 * var(--k));opacity:0;transform:translateY(60%)}
#promise .pr-act__b svg{width:calc(12 * var(--k));height:calc(12 * var(--k));fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#promise .pr-act.is-press{transform:scale(.94)}
#promise .is-approved .pr-act--go{background:var(--ok);color:var(--ink)}
#promise .is-approved .pr-act__a{opacity:0;transform:translateY(-60%)}
#promise .is-approved .pr-act__b{opacity:1;transform:none}
#promise .is-approved .pr-act--edit{opacity:.45}
#promise .pr-cursor{
  position:absolute;z-index:5;left:0;top:0;width:calc(17 * var(--k));height:calc(19 * var(--k));overflow:visible;
  fill:var(--cream);stroke:#181818;stroke-width:1.2;stroke-linejoin:round;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));
  opacity:0;transform:translate3d(var(--cx,300px),var(--cy,300px),0);
  transition:transform 1s cubic-bezier(.45,0,.2,1),opacity .4s var(--ease);
}
#promise .pr-cursor.is-on{opacity:1}

/* ---------- #promise responsive ---------- */
@media (max-width:1024px){
  #promise .pr-title{grid-column:1 / -1}
  #promise .pr-lede{grid-column:1 / span 8;margin-top:24px;padding-bottom:0}
  #promise .pr-beats{grid-template-columns:minmax(0,1fr);row-gap:56px}
  #promise .pr-beat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:32px;align-items:center}
  #promise .pr-beat__rule{grid-column:1 / -1}
  #promise .pr-vig{grid-column:2;grid-row:2}
  #promise .pr-beat__copy{grid-column:1;grid-row:2;margin-top:0}
}
@media (max-width:640px){
  #promise .pr-lede{grid-column:1 / -1;font-size:16px}
  #promise .pr-beats{row-gap:48px}
  #promise .pr-beat{display:flex;align-items:stretch}
  #promise .pr-beat__rule{margin-bottom:20px}
  #promise .pr-beat__copy{margin-top:20px;padding-right:0}
  #promise .pr-beat__title{font-size:21px}
}

/* ==========================================================================
   #desktop
   ========================================================================== */
#desktop{padding:clamp(88px,10vw,152px) 0 clamp(88px,10vw,152px)}
#desktop .dk-line{display:block;text-wrap:balance}
#desktop .dk-grid{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:24px;
  grid-template-areas:"copy stage" "switch stage";grid-template-rows:auto 1fr;
  margin-top:clamp(48px,5.6vw,80px);
}
#desktop .dk-copy{grid-area:copy;padding-right:clamp(0px,3vw,48px)}
#desktop .dk-lede{max-width:34ch;font-size:18px;line-height:1.55;color:var(--st-body)}
#desktop .dk-cta{margin-top:32px}

/* state switcher */
#desktop .dk-switch{grid-area:switch;align-self:end;padding-right:clamp(0px,3vw,48px);padding-top:48px}
#desktop .dk-switch__head{display:flex;align-items:center;justify-content:space-between;height:32px;margin-bottom:8px}
#desktop .dk-switch__label{font-size:12px;line-height:1;color:var(--taupe)}
#desktop .dk-play{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 10px;margin-right:-10px;border-radius:var(--r-sm);font-family:var(--font-mono);font-size:11px;font-weight:500;text-transform:uppercase;color:var(--taupe);transition:color .2s var(--ease),background-color .2s var(--ease)}
#desktop .dk-play:hover{color:var(--fg);background:var(--surface-2)}
#desktop .dk-play[hidden]{display:none}
#desktop .dk-play__play{display:none}
#desktop .dk-play[data-paused] .dk-play__play{display:block}
#desktop .dk-play[data-paused] .dk-play__pause{display:none}

#desktop .dk-tab{
  position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);row-gap:6px;width:100%;
  padding:18px 0 20px;text-align:left;color:var(--taupe);border-radius:0;
  transition:color .3s var(--ease);
}
#desktop .dk-tab:focus-visible{outline-offset:-2px;border-radius:var(--r-sm)}
#desktop .dk-tab__bar{position:absolute;left:0;right:0;top:0;height:1px;background:var(--st-line);overflow:hidden}
#desktop .dk-tab__bar i{position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(0)}
#desktop .dk-tab[aria-selected="true"] .dk-tab__bar i{transform:scaleX(1)}
#desktop .dk-tab__num{grid-column:1;font-size:12px;line-height:20px;color:#a39891} /* inactive: >= 4.5:1 on the panel; active state is carried by the accent number, bar and name */
#desktop .dk-tab__name{grid-column:2;font-size:13px;line-height:20px;transition:color .3s var(--ease)}
#desktop .dk-tab__desc{grid-column:2;font-size:15px;line-height:1.45;color:#9a8f87;transition:color .3s var(--ease)}
#desktop .dk-tab:hover .dk-tab__name{color:var(--fg)}
#desktop .dk-tab[aria-selected="true"] .dk-tab__name{color:var(--fg)}
#desktop .dk-tab[aria-selected="true"] .dk-tab__num{color:var(--accent)}
#desktop .dk-tab[aria-selected="true"] .dk-tab__desc{color:var(--st-body)}

/* stage */
#desktop .dk-stage{grid-area:stage;position:relative;container-type:inline-size;border-radius:12px}
#desktop .dk-stage:focus-visible{outline-offset:4px;border-radius:12px}
#desktop .dk-screen{position:relative;aspect-ratio:800 / 540;overflow:hidden;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(234,227,221,.06)}
#desktop .dk-screen__in{
  --k:calc(100cqw / 800);position:absolute;inset:0;font-size:calc(13 * var(--k));line-height:1.4;
  background:
    radial-gradient(55% 65% at 88% 8%,rgba(255,143,90,.18),transparent 62%),
    radial-gradient(45% 55% at 6% 100%,rgba(155,156,255,.12),transparent 62%),
    linear-gradient(160deg,#1f1d1c 0%,#141312 100%);
}
#desktop .dk-screen__in::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(0,0,0,.25));z-index:1}
#desktop .dk-illus{position:absolute;z-index:8;top:calc(16 * var(--k));right:calc(18 * var(--k));font-size:max(9px,calc(10 * var(--k)));line-height:1;color:var(--taupe);opacity:.85}

#desktop .dk-win{position:absolute;overflow:hidden;border-radius:calc(10 * var(--k));box-shadow:0 calc(22 * var(--k)) calc(50 * var(--k)) rgba(0,0,0,.45)}
#desktop .dk-win__bar{display:flex;align-items:center;gap:calc(10 * var(--k));height:calc(28 * var(--k));padding:0 calc(12 * var(--k))}
#desktop .dk-win__dots{display:flex;gap:calc(5 * var(--k))}
#desktop .dk-win__dots i{width:calc(7 * var(--k));height:calc(7 * var(--k));border-radius:50%;background:#4a4643}
#desktop .dk-win__name{font-size:calc(11 * var(--k));color:var(--taupe)}

#desktop .dk-win--cal{left:calc(32 * var(--k));top:calc(36 * var(--k));width:calc(300 * var(--k));height:calc(208 * var(--k));background:#1d1c1b;box-shadow:inset 0 0 0 1px #33302d,0 calc(22 * var(--k)) calc(50 * var(--k)) rgba(0,0,0,.45)}
#desktop .dk-win--cal .dk-win__bar{background:#232120}
#desktop .dk-cal{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:calc(22 * var(--k)) repeat(4,calc(30 * var(--k)));gap:calc(4 * var(--k));padding:calc(10 * var(--k)) calc(12 * var(--k))}
#desktop .dk-cal__d{font-size:calc(9 * var(--k));color:var(--taupe);align-self:center}
#desktop .dk-cal__e{grid-column:var(--c);grid-row:calc(var(--r) + 1) / span var(--h);padding:calc(5 * var(--k)) calc(7 * var(--k));border-radius:calc(5 * var(--k));font-size:calc(9.5 * var(--k));line-height:1.2;color:#cfc6bf;background:#2a2725;box-shadow:inset calc(2 * var(--k)) 0 0 var(--taupe-2)}
#desktop .dk-cal__e--v{background:rgba(155,156,255,.14);box-shadow:inset calc(2 * var(--k)) 0 0 var(--violet)}
#desktop .dk-cal__e--s{background:rgba(124,184,255,.12);box-shadow:inset calc(2 * var(--k)) 0 0 var(--sky)}

#desktop .dk-win--doc{left:calc(170 * var(--k));top:calc(176 * var(--k));width:calc(390 * var(--k));height:calc(400 * var(--k));background:var(--st-paper);color:var(--st-paper-ink)}
#desktop .dk-win--doc .dk-win__bar{background:var(--st-paper-2)}
#desktop .dk-win--doc .dk-win__dots i{background:#bfb3a9}
#desktop .dk-win--doc .dk-win__name{color:#554c46}
#desktop .dk-doc{padding:calc(22 * var(--k)) calc(28 * var(--k))}
#desktop .dk-doc__h{font-size:calc(22 * var(--k));line-height:1.15;font-weight:700;letter-spacing:-.015em}
#desktop .dk-doc__meta{margin-top:calc(5 * var(--k));font-size:calc(9.5 * var(--k));color:var(--st-paper-mut)}
#desktop .dk-doc__list{margin:calc(16 * var(--k)) 0 calc(10 * var(--k))}
#desktop .dk-doc__list li{position:relative;padding-left:calc(16 * var(--k));font-size:calc(12.5 * var(--k));line-height:2}
#desktop .dk-doc__list li::before{content:"";position:absolute;left:0;top:calc(11 * var(--k));width:calc(5 * var(--k));height:calc(5 * var(--k));border-radius:1px;background:var(--accent)}
#desktop .dk-doc__ln{display:block;width:var(--w,80%);height:calc(6 * var(--k));margin-top:calc(11 * var(--k));border-radius:99px;background:var(--st-paper-ln)}

/* the launcher */
/* Anchored to the RIGHT EDGE at mid-height (never the bottom corners, where the
   site's help widget / mobile dock float). The collapsed icon is vertically
   centred; the panel grows around it (top + size animate together).
   --dk-top: collapsed top, --dk-ptop: panel top, --dk-h1/--dk-h2: panel heights
   per state (hug their content). */
#desktop .dk-screen__in{--dk-r:calc(24 * var(--k));--dk-top:calc(242 * var(--k));--dk-ptop:calc(130 * var(--k));--dk-h1:calc(272 * var(--k));--dk-h2:calc(282 * var(--k))}
#desktop .dk-l,#desktop .dk-halo,#desktop .dk-click{position:absolute;z-index:4;right:var(--dk-r);top:var(--dk-top)}
#desktop .dk-l{
  width:calc(56 * var(--k));height:calc(56 * var(--k));overflow:hidden;border-radius:calc(18 * var(--k));
  background:#242221;
  box-shadow:inset 0 0 0 1px rgba(234,227,221,.09),0 calc(24 * var(--k)) calc(60 * var(--k)) rgba(0,0,0,.55);
  transition:width .64s var(--ease-out),height .64s var(--ease-out),top .64s var(--ease-out),border-radius .64s var(--ease-out),background-color .5s var(--ease);
}
#desktop .dk-halo{width:calc(56 * var(--k));height:calc(56 * var(--k));border-radius:calc(18 * var(--k));pointer-events:none;box-shadow:0 0 0 calc(1.5 * var(--k)) rgba(255,143,90,.55);opacity:0}
#desktop .is-playing[data-state="0"] .dk-halo{animation:dk-halo 2.6s var(--ease-out) infinite}
@keyframes dk-halo{0%{opacity:.9;transform:scale(1)}80%,100%{opacity:0;transform:scale(1.45)}}
#desktop .dk-l__mark{position:absolute;left:calc(16 * var(--k));top:calc(16 * var(--k));width:calc(24 * var(--k));height:calc(24 * var(--k));transition:transform .64s var(--ease-out)}
#desktop [data-state="0"] .dk-l__mark{transform:scale(1.17)}
#desktop .dk-l__head{position:absolute;left:calc(50 * var(--k));top:calc(16 * var(--k));width:calc(254 * var(--k));height:calc(24 * var(--k));display:flex;align-items:center;gap:calc(8 * var(--k));opacity:0;transition:opacity .3s var(--ease)}
#desktop .dk-l__name{font-size:calc(14 * var(--k));font-weight:600}
#desktop .dk-pill{position:absolute;right:0;top:calc(2 * var(--k));display:inline-flex;align-items:center;gap:calc(6 * var(--k));height:calc(20 * var(--k));padding:0 calc(9 * var(--k));border-radius:99px;font-size:calc(9.5 * var(--k));opacity:0;transform:translateY(30%);transition:opacity .35s var(--ease),transform .45s var(--ease-out)}
#desktop .dk-pill--work{background:rgba(155,156,255,.14);color:var(--violet)}
#desktop .dk-pill .status-sq{--status-c:currentColor} /* status symbol: working = violet, done = gold */
#desktop .is-playing .dk-pill--work .status-sq{animation:status-sq-blink 1.6s var(--ease) infinite}
#desktop .dk-pill--done{background:rgba(255,210,138,.14);color:var(--ok)}

#desktop .dk-v{position:absolute;top:calc(54 * var(--k));right:0;width:calc(320 * var(--k));padding:0 calc(16 * var(--k));opacity:0;transform:translate3d(0,calc(10 * var(--k)),0);visibility:hidden;transition:opacity .3s var(--ease),transform .5s var(--ease-out),visibility 0s linear .3s}

/* state: active / completed => panel */
#desktop :is([data-state="1"],[data-state="2"]) .dk-l{top:var(--dk-ptop);width:calc(320 * var(--k));height:var(--dk-h1);border-radius:calc(16 * var(--k));background:var(--st-panel)}
#desktop [data-state="2"] .dk-l{height:var(--dk-h2)}
#desktop :is([data-state="1"],[data-state="2"]) .dk-l__head{opacity:1;transition-delay:.22s}
#desktop [data-state="1"] .dk-pill--work,#desktop [data-state="2"] .dk-pill--done{opacity:1;transform:none;transition-delay:.3s}
#desktop [data-state="1"] .dk-v--active,#desktop [data-state="2"] .dk-v--done{opacity:1;transform:none;visibility:visible;transition:opacity .45s var(--ease) .26s,transform .7s var(--ease-out) .26s,visibility 0s}

/* active view */
#desktop .dk-ask{padding:calc(10 * var(--k)) calc(12 * var(--k)) calc(12 * var(--k));border-radius:calc(10 * var(--k));background:var(--st-raise)}
#desktop .dk-ask__who{display:block;font-size:calc(9 * var(--k));line-height:1;color:var(--taupe)}
#desktop .dk-ask__t{min-height:calc(13.5 * 1.4 * var(--k));margin-top:calc(6 * var(--k));font-size:calc(13.5 * var(--k));line-height:1.4;color:var(--fg)}
#desktop .dk-caret{display:none;width:calc(1.6 * var(--k));height:calc(15 * var(--k));margin-left:1px;vertical-align:calc(-3 * var(--k));background:var(--accent);border-radius:1px}
#desktop .is-typing .dk-caret{display:inline-block}
#desktop .dk-ctx{display:inline-flex;align-items:center;gap:calc(6 * var(--k));height:calc(22 * var(--k));margin-top:calc(10 * var(--k));padding:0 calc(8 * var(--k));border-radius:calc(6 * var(--k));font-size:calc(9 * var(--k));color:#cfc6bf;background:#2f2c2a;transition:opacity .4s var(--ease)}
#desktop .dk-ctx svg{width:calc(11 * var(--k));height:calc(11 * var(--k));fill:none;stroke:currentColor;stroke-width:1.3;stroke-linejoin:round}
#desktop .is-typing .dk-ctx{opacity:.35}
#desktop .dk-steps{margin-top:calc(12 * var(--k))}
#desktop .dk-step{display:flex;align-items:center;gap:calc(10 * var(--k));height:calc(30 * var(--k));font-size:calc(12.5 * var(--k));color:#d2cac3;opacity:.4;transition:opacity .4s var(--ease)}
#desktop .dk-step.is-active,#desktop .dk-step.is-done{opacity:1}
#desktop .dk-step__ic{flex:none;width:calc(15 * var(--k));height:calc(15 * var(--k))}
#desktop .dk-step__ic svg{width:100%;height:100%;overflow:visible}
#desktop .dk-prog{position:relative;display:block;height:calc(3 * var(--k));margin-top:calc(12 * var(--k));border-radius:99px;background:#2e2c2a;overflow:hidden}
#desktop .dk-prog i{position:absolute;inset:0;border-radius:inherit;background:var(--accent);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .7s var(--ease-out)}

/* completed view */
#desktop .dk-done__t{font-size:calc(17 * var(--k));line-height:1.25;font-weight:600;letter-spacing:-.005em}
#desktop .dk-done__k{margin-top:calc(5 * var(--k));font-size:calc(9 * var(--k));color:var(--taupe)}
#desktop .dk-done__list{margin-top:calc(12 * var(--k))}
#desktop .dk-done__list li{display:flex;align-items:center;gap:calc(10 * var(--k));height:calc(34 * var(--k));border-top:1px solid #2e2c2a;font-size:calc(12.5 * var(--k));color:#d9d1ca}
#desktop .dk-done__list b{margin-left:auto;font-size:calc(9 * var(--k));font-weight:500;color:var(--taupe)}
#desktop .dk-box{flex:none;width:calc(13 * var(--k));height:calc(13 * var(--k));border-radius:calc(3 * var(--k));box-shadow:inset 0 0 0 calc(1.3 * var(--k)) var(--taupe-2)}
#desktop .dk-done__foot{display:flex;align-items:center;justify-content:space-between;margin-top:calc(14 * var(--k));padding-top:calc(14 * var(--k));border-top:1px solid #2e2c2a}
#desktop .dk-open{display:inline-flex;align-items:center;gap:calc(7 * var(--k));height:calc(32 * var(--k));padding:0 calc(12 * var(--k));border-radius:calc(7 * var(--k));font-size:calc(10.5 * var(--k));background:var(--accent);color:var(--accent-ink)}
#desktop .dk-open svg{width:calc(11 * var(--k));height:calc(9 * var(--k));fill:currentColor}
#desktop .dk-done__n{font-size:calc(9 * var(--k));color:var(--taupe)}
#desktop [data-state="2"] .dk-done__list li{animation:dk-row .6s var(--ease-out) both}
#desktop [data-state="2"] .dk-done__list li:nth-child(1){animation-delay:.36s}
#desktop [data-state="2"] .dk-done__list li:nth-child(2){animation-delay:.44s}
#desktop [data-state="2"] .dk-done__list li:nth-child(3){animation-delay:.52s}
@keyframes dk-row{from{opacity:0;transform:translateY(calc(8 * var(--k)))}to{opacity:1;transform:none}}

/* demo cursor + click ripple */
#desktop .dk-cursor{
  position:absolute;z-index:6;left:0;top:0;width:calc(18 * var(--k));height:calc(20 * var(--k));overflow:visible;
  fill:var(--cream);stroke:#181818;stroke-width:1.2;stroke-linejoin:round;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));
  opacity:0;transform:translate3d(var(--cx,0px),var(--cy,0px),0);
  transition:transform 1.05s cubic-bezier(.45,0,.2,1),opacity .4s var(--ease);
}
#desktop .dk-cursor.is-on{opacity:1}
#desktop .dk-click{z-index:5;width:calc(56 * var(--k));height:calc(56 * var(--k));border-radius:calc(18 * var(--k));background:rgba(255,143,90,.35);opacity:0;pointer-events:none}
#desktop .dk-click.is-on{animation:dk-click .55s var(--ease-out)}
@keyframes dk-click{0%{opacity:.8;transform:scale(.7)}100%{opacity:0;transform:scale(1.3)}}

/* ---------- #desktop responsive ---------- */
@media (max-width:1024px){
  #desktop .dk-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "switch" "stage";grid-template-rows:auto}
  #desktop .dk-copy,#desktop .dk-switch{padding-right:0}
  #desktop .dk-switch{padding-top:48px;padding-bottom:20px}
  #desktop .dk-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px}
  #desktop .dk-tab{grid-template-columns:32px minmax(0,1fr)}
}
@media (max-width:640px){
  #desktop .dk-lede{font-size:16px}
  #desktop .dk-cta{margin-top:24px}
  #desktop .dk-switch{padding-top:40px;padding-bottom:16px}
  #desktop .dk-tabs{column-gap:12px}
  #desktop .dk-tab{display:flex;flex-direction:column;gap:4px;padding:14px 0 4px}
  #desktop .dk-tab__num{line-height:16px}
  #desktop .dk-tab__name{font-size:12px;line-height:16px}
  #desktop .dk-tab__desc{display:none}
  #desktop .dk-screen{aspect-ratio:400 / 548}
  #desktop .dk-screen__in{--k:calc(100cqw / 400);--dk-r:calc(14 * var(--k));--dk-top:calc(246 * var(--k));--dk-ptop:calc(262 * var(--k));--dk-h1:calc(276 * var(--k));--dk-h2:calc(280 * var(--k))}
  #desktop .dk-win--cal{display:none}
  #desktop .dk-win--doc{left:calc(20 * var(--k));top:calc(22 * var(--k));width:calc(300 * var(--k));height:calc(548 * var(--k))}
  #desktop .dk-doc{padding:calc(18 * var(--k)) calc(20 * var(--k))}
  #desktop :is([data-state="1"],[data-state="2"]) .dk-l{width:calc(330 * var(--k))}
  #desktop .dk-l__head{width:calc(264 * var(--k))}
  #desktop .dk-v{width:calc(330 * var(--k))}
  #desktop .dk-illus{top:calc(12 * var(--k));right:calc(16 * var(--k))}
}

/* ==========================================================================
   QA motion switch (?motion). The site-wide reduced-motion rule in base.css
   forces every animation/transition duration to ~0 with !important. When
   js/promise.js sees ?motion it adds html.st-motion, and the rules below
   restore this file's real durations for #promise and #desktop ONLY, so the
   morph and vignettes can be reviewed on a machine that reduces motion.
   Without ?motion, reduced-motion users keep the calm static state.
   ========================================================================== */
html.st-motion :is(#promise,#desktop).st-armed [data-pr-reveal].is-in{transition-duration:.9s,1.1s!important}
html.st-motion :is(#promise,#desktop) .pr-ring{transition-duration:.35s!important}
html.st-motion :is(#promise,#desktop) .pr-tick{transition-duration:.4s!important}
html.st-motion :is(#promise,#desktop) .is-active .pr-spin{animation-duration:.9s!important;animation-iteration-count:infinite!important}
html.st-motion #promise.st-armed .pr-beat.is-in .pr-beat__rule::after{transition-duration:1.2s!important}
html.st-motion #promise .is-playing .pr-caret{animation-duration:1.05s!important;animation-iteration-count:infinite!important}
html.st-motion #promise .is-playing .pr-dock::before{animation-duration:1.6s!important;animation-iteration-count:infinite!important}
html.st-motion #promise :is(.pr-status,.pr-review__flag .status-sq,.pr-step){transition-duration:.4s!important}
html.st-motion #promise .is-playing .pr-status:not(.is-done) .status-sq{animation-duration:1.6s!important;animation-iteration-count:infinite!important}
html.st-motion #promise .pr-meter__bar i{transition-duration:.6s!important}
html.st-motion #promise .pr-review{transition-duration:.5s!important}
html.st-motion #promise :is(.pr-review__ask,.pr-review__ok){transition-duration:.35s,.55s!important}
html.st-motion #promise .pr-act{transition-duration:.35s,.35s,.18s!important}
html.st-motion #promise :is(.pr-act__a,.pr-act__b){transition-duration:.3s,.45s!important}
html.st-motion #promise .pr-cursor{transition-duration:1s,.4s!important}

html.st-motion #desktop :is(.dk-tab,.dk-tab__name,.dk-tab__desc){transition-duration:.3s!important}
html.st-motion #desktop .dk-l{transition-duration:.64s,.64s,.64s,.64s,.5s!important}
html.st-motion #desktop .is-playing[data-state="0"] .dk-halo{animation-duration:2.6s!important;animation-iteration-count:infinite!important}
html.st-motion #desktop .dk-l__mark{transition-duration:.64s!important}
html.st-motion #desktop .dk-l__head{transition-duration:.3s!important}
html.st-motion #desktop .dk-pill{transition-duration:.35s,.45s!important}
html.st-motion #desktop .is-playing .dk-pill--work .status-sq{animation-duration:1.6s!important;animation-iteration-count:infinite!important}
html.st-motion #desktop .dk-v{transition-duration:.3s,.5s,0s!important}
html.st-motion #desktop :is([data-state="1"] .dk-v--active,[data-state="2"] .dk-v--done){transition-duration:.45s,.7s,0s!important}
html.st-motion #desktop :is(.dk-ctx,.dk-step){transition-duration:.4s!important}
html.st-motion #desktop .dk-prog i{transition-duration:.7s!important}
html.st-motion #desktop [data-state="2"] .dk-done__list li{animation-duration:.6s!important}
html.st-motion #desktop .dk-cursor{transition-duration:1.05s,.4s!important}
html.st-motion #desktop .dk-click.is-on{animation-duration:.55s!important}