/* SPEC v2.5 sections workstream: competitor (after repvive's "Your Competitor vs You") and how we
   work (after repvive's three illustrated cards). Markup: brands/dijidis/site/sections.py.
   The markup is the final state. sections.js adds .sx-on to a unit when it scrolls into view (the
   CSS loops below start), .sx-off when it leaves (they pause), and .armed plus beat classes on the
   how-we-work art while a story plays. Without JS, or under prefers-reduced-motion (site.css stops
   every animation and transition, and sections.js never arms), each illustration holds its final
   frame. .cx-you's ::before belongs to brand.css (the neon edge). */

.cx, .hw {
  --ok: #5BD69B;
  --ok-text: #7BE3AE;
  --bad: #FF6B5E;
  --amber: #FFB547;
  --mute: #8E95B8;
}
.sx-off, .sx-off * { animation-play-state: paused !important; }

/* ------------------------------------------------------------ competitor: head and columns */

.cx-head { max-width: 780px; margin-bottom: 56px; }
.cx-head .sec-title { max-width: 18ch; margin-bottom: 22px; font-size: clamp(2.1rem, 4.6vw, 3.5rem); line-height: 1.04; }
.cx-head .lede { margin: 0; }

.cx-grid { display: grid; gap: 28px; }
.cx-col { position: relative; min-width: 0; }
.cx-you { padding: 28px 22px 30px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(7, 12, 36, 0.82), rgba(10, 18, 51, 0.7)); }
@media (min-width: 768px) { .cx-you { padding: 36px 40px 40px; } }
@media (min-width: 960px) {
  .cx-grid { grid-template-columns: 1fr 1fr; gap: 0; align-items: start; }
  .cx-them { padding: 8px 48px 8px 0; border-right: 1px solid var(--line); }
  .cx-you { margin: 32px 0 0 48px; }
}

.cx-label { margin: 0 0 4px; font-family: var(--font); font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--text-2); }
.cx-big { display: flex; align-items: center; gap: 0.22em; margin: 0 0 6px; font-family: var(--display, var(--font));
  font-size: clamp(3.4rem, 7.4vw, 5.6rem); font-weight: 750; line-height: 1; letter-spacing: -0.035em; color: #fff; }
.cx-you .cx-big span { color: var(--bad); opacity: 0.72; }
.cx-glyph { width: 0.5em; height: 0.5em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; }
.cx-glyph.ok { color: var(--ok); filter: drop-shadow(0 0 10px rgba(91, 214, 155, 0.45)); }
.cx-glyph.bad { color: var(--bad); opacity: 0.85; }

.cx-art { margin: 6px 0 20px; max-width: 500px; }
.cx-svg { width: 100%; height: auto; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.cx-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cx-list li { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line);
  font-size: 1.04rem; line-height: 1.4; }
.cx-mk { width: 20px; height: 20px; flex: none; }
.cx-them .cx-mk { color: var(--ok); }
.cx-you .cx-mk { color: var(--mute); width: 18px; height: 18px; margin: 0 1px; }
.cx-foot { display: flex; align-items: center; gap: 12px; margin: 26px 0 0; font-family: var(--display, var(--font));
  font-size: clamp(1.25rem, 2.2vw, 1.5rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
.cx-fic { width: 24px; height: 24px; flex: none; }
.cx-them .cx-foot { color: #fff; }
.cx-them .cx-fic { color: var(--ok); }
.cx-you .cx-foot { color: var(--bad); }

/* ------------------------------------------------------------ competitor: the drawings */

.cx-ground { stroke: rgba(201, 204, 224, 0.35); stroke-width: 2; }
.cx-body { fill: #22305F; stroke: rgba(201, 204, 224, 0.5); stroke-width: 1.5; }
.cx-sign, .cx-roof { fill: #43528A; }
.lit .cx-st0 { fill: #E58AC4; }
.lit .cx-st1 { fill: #F6D3EA; }
.cx-win { fill: rgba(255, 210, 122, 0.3); stroke: rgba(238, 240, 250, 0.8); stroke-width: 1.6; }
.cx-mull { stroke: rgba(238, 240, 250, 0.8); stroke-width: 1.4; }
.cx-win-glow { fill: rgba(255, 210, 122, 0.22); filter: blur(7px); }
.cx-door-light { fill: #FFD27A; fill-opacity: 0.9; stroke: rgba(238, 240, 250, 0.8); stroke-width: 1.5; }
.cx-spill { fill: rgba(255, 210, 122, 0.16); }
.dark .cx-body { fill: #141B3C; stroke: rgba(201, 204, 224, 0.22); }
.dark .cx-sign, .dark .cx-roof { fill: #252D55; }
.dark .cx-st0 { fill: #2B3463; }
.dark .cx-st1 { fill: #1C2349; }
.dark .cx-win { fill: #090E26; stroke: rgba(201, 204, 224, 0.3); }
.dark .cx-mull { stroke: rgba(201, 204, 224, 0.3); }
.cx-door { fill: #0F1538; stroke: rgba(201, 204, 224, 0.3); stroke-width: 1.5; }
.cx-knob { fill: rgba(201, 204, 224, 0.5); }

/* The line of customers */
.cx-fig { stroke: #EEF0FA; stroke-width: 2.2; }
.cx-fig circle { fill: var(--ground); }
.cx-l1, .cx-l2 { transform-box: fill-box; }
.cx-l1 { transform-origin: 100% 0; }
.cx-l2 { transform-origin: 0 0; }

/* The phone */
.cx-tile { fill: rgba(255, 255, 255, 0.06); stroke: rgba(201, 204, 224, 0.5); stroke-width: 1.5; }
.cx-handset { stroke: #EEF0FA; stroke-width: 1.9; }
.cx-hand, .cx-ans, .cx-say, .cx-miss { transform-box: fill-box; transform-origin: center; }
.cx-ring { stroke-width: 2.2; opacity: 0; }
.up .cx-tile { fill: rgba(91, 214, 155, 0.16); stroke: var(--ok); }
.up .cx-handset { stroke: var(--ok); }
.up .cx-ring { stroke: var(--ok); }
.cx-ok-fill { fill: var(--ok); }
.cx-ok-tick { stroke: #0A1233; stroke-width: 4; }
.cx-bubble { fill: #1E2A5A; stroke: rgba(201, 204, 224, 0.45); stroke-width: 1.2; }
.cx-dot { fill: #EEF0FA; transform-box: fill-box; transform-origin: center; }
.down .cx-tile { fill: rgba(255, 107, 94, 0.08); stroke: rgba(255, 107, 94, 0.55); }
.down .cx-ring { stroke: var(--bad); opacity: 0.75; }
.cx-bad-fill { fill: var(--bad); }
.cx-n { fill: #fff; stroke: none; font: 700 12.5px var(--font); text-anchor: middle; }
.cx-n.n1, .cx-n.n2 { opacity: 0; }

/* Bookings ticked off, payments coming in */
.cx-cal-b { fill: #1B2756; stroke: rgba(201, 204, 224, 0.5); stroke-width: 1.5; }
.cx-cal-h { fill: var(--accent); }
.cx-cal-r { stroke: #EEF0FA; stroke-width: 2; }
.cx-cell { fill: rgba(255, 255, 255, 0.05); stroke: rgba(201, 204, 224, 0.3); stroke-width: 1; }
.cx-tk { stroke: var(--ok); stroke-width: 4.4; }
.cx-tk path { stroke-dasharray: 22; stroke-dashoffset: 0; }
.cx-coin circle { fill: #FFD27A; stroke: #A8600F; stroke-width: 1.4; }
.cx-coin text { fill: #7A4A0C; stroke: none; font: 800 10px var(--font); text-anchor: middle; }
.cx-coin.c1 { transform: translateY(-20px); }
.cx-coin.c2 { transform: translateY(-38px); }

/* Unread mail at the door, wind, a tumbleweed */
.cx-env rect { fill: #E4E6F2; stroke: #5D6488; stroke-width: 1.4; }
.cx-env path { stroke: #5D6488; stroke-width: 1.4; }
.cx-unread { fill: var(--bad); stroke: #0A1233; stroke-width: 1.5; }
.cx-wind { stroke: rgba(201, 204, 224, 0.4); stroke-width: 1.6; stroke-dasharray: 10 9; }
.cx-roll { transform: translateX(226px); }
.cx-spin { stroke: #D9BC7E; stroke-width: 1.4; transform-box: fill-box; transform-origin: center; }

/* ------------------------------------------------------------ competitor: motion, only once in view */

.sx-on .cx-queue { animation: cxWalk 2.4s linear infinite; }
.sx-on .cx-fig.back { animation: cxFigIn 2.4s linear infinite; }
.sx-on .cx-fig.front { animation: cxFigOut 2.4s linear infinite; }
.sx-on .cx-l1 { animation: cxLeg 0.4s ease-in-out infinite alternate; }
.sx-on .cx-l2 { animation: cxLeg 0.4s ease-in-out infinite alternate-reverse; }
.sx-on .cx-bob { animation: cxBob 0.4s ease-in-out infinite alternate; }
@keyframes cxWalk { from { transform: translateX(0); } to { transform: translateX(36px); } }
@keyframes cxFigIn { 0% { opacity: 0; } 45%, 100% { opacity: 1; } }
@keyframes cxFigOut { 0%, 40% { opacity: 1; } 85%, 100% { opacity: 0; } }
@keyframes cxLeg { from { transform: rotate(18deg); } to { transform: rotate(-18deg); } }
@keyframes cxBob { from { transform: translateY(0); } to { transform: translateY(-1.6px); } }

/* Answered: rings, then turns green with a check and a typing bubble (6 s loop) */
.sx-on .up .cx-hand { animation: cxShakeUp 6s ease-in-out infinite; }
.sx-on .up .cx-ring { animation: cxRingUp 6s ease-out infinite; }
.sx-on .up .cx-ring.r2 { animation-delay: 0.15s; }
.sx-on .up .cx-tile { animation: cxTileUp 6s ease infinite; }
.sx-on .up .cx-handset { animation: cxHandUp 6s ease infinite; }
.sx-on .cx-ans { animation: cxAns 6s ease infinite; }
.sx-on .cx-say { animation: cxSay 6s ease infinite; }
.sx-on .cx-dot { animation: cxDot 1s ease-in-out infinite; }
.sx-on .cx-dot.d2 { animation-delay: 0.15s; }
.sx-on .cx-dot.d3 { animation-delay: 0.3s; }
@keyframes cxShakeUp {
  0%, 25%, 100% { transform: rotate(0); }
  2%, 6%, 10%, 14%, 18%, 22% { transform: rotate(-14deg); }
  4%, 8%, 12%, 16%, 20%, 24% { transform: rotate(14deg); } }
@keyframes cxRingUp { 0% { opacity: 0; } 4% { opacity: 1; } 11% { opacity: 0; } 13% { opacity: 1; } 20%, 100% { opacity: 0; } }
@keyframes cxTileUp {
  0%, 26%, 96%, 100% { fill: rgba(255, 255, 255, 0.06); stroke: rgba(201, 204, 224, 0.5); }
  31%, 90% { fill: rgba(91, 214, 155, 0.16); stroke: #5BD69B; } }
@keyframes cxHandUp { 0%, 26%, 96%, 100% { stroke: #EEF0FA; } 31%, 90% { stroke: #5BD69B; } }
@keyframes cxAns { 0%, 27% { opacity: 0; transform: scale(0.3); } 31% { opacity: 1; transform: scale(1.25); }
  34%, 90% { opacity: 1; transform: scale(1); } 95%, 100% { opacity: 0; transform: scale(1); } }
@keyframes cxSay { 0%, 33% { opacity: 0; transform: translate(-6px, 6px) scale(0.6); } 39%, 90% { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: none; } }
@keyframes cxDot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-2.5px); opacity: 1; } }

/* Ticks drawn one at a time; coins rising */
.sx-on .cx-tk path { animation: cxTick 6s ease infinite both; }
.sx-on .cx-tk.t1 path { animation-delay: 0.45s; }
.sx-on .cx-tk.t2 path { animation-delay: 0.9s; }
.sx-on .cx-tk.t3 path { animation-delay: 1.35s; }
.sx-on .cx-tk.t4 path { animation-delay: 1.8s; }
.sx-on .cx-tk.t5 path { animation-delay: 2.25s; }
@keyframes cxTick { 0%, 8% { stroke-dashoffset: 22; opacity: 1; } 15%, 80% { stroke-dashoffset: 0; opacity: 1; } 88%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.sx-on .cx-coin { animation: cxCoin 3s ease-out infinite both; }
.sx-on .cx-coin.c1 { animation-delay: 1s; }
.sx-on .cx-coin.c2 { animation-delay: 2s; }
@keyframes cxCoin { 0% { opacity: 0; transform: translateY(14px); } 15% { opacity: 1; } 70% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-62px); } }

/* Nobody answers: three rings a loop, the missed badge counts 1, 2, 3 (7.5 s loop) */
.sx-on .down .cx-hand { animation: cxShakeDn 2.5s ease-in-out infinite; }
.sx-on .down .cx-ring { animation: cxRingDn 2.5s ease-out infinite; }
.sx-on .down .cx-ring.r2 { animation-delay: 0.15s; }
.sx-on .cx-miss { animation: cxMiss 7.5s ease infinite; }
.sx-on .cx-n.n1 { animation: cxN1 7.5s step-end infinite; }
.sx-on .cx-n.n2 { animation: cxN2 7.5s step-end infinite; }
.sx-on .cx-n.n3 { animation: cxN3 7.5s step-end infinite; }
@keyframes cxShakeDn {
  0%, 40%, 100% { transform: rotate(0); }
  4%, 12%, 20%, 28%, 36% { transform: rotate(-14deg); }
  8%, 16%, 24%, 32% { transform: rotate(14deg); } }
@keyframes cxRingDn { 0% { opacity: 0; } 8% { opacity: 1; } 20% { opacity: 0; } 26% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes cxMiss {
  0%, 12% { transform: scale(0); } 14%, 47%, 81% { transform: scale(1.3); }
  17%, 45%, 50%, 79%, 84%, 100% { transform: scale(1); } }
@keyframes cxN1 { 0% { opacity: 0; } 14% { opacity: 1; } 47%, 100% { opacity: 0; } }
@keyframes cxN2 { 0% { opacity: 0; } 47% { opacity: 1; } 81%, 100% { opacity: 0; } }
@keyframes cxN3 { 0% { opacity: 0; } 81% { opacity: 1; } }

/* Mail drops onto the doorstep, one by one, and piles up unread (8 s loop) */
.sx-on .cx-env { animation: cxEnv0 8s ease-in infinite; }
.sx-on .cx-env.e1 { animation-name: cxEnv1; }
.sx-on .cx-env.e2 { animation-name: cxEnv2; }
.sx-on .cx-env.e3 { animation-name: cxEnv3; }
@keyframes cxEnv0 { 0%, 5% { transform: translateY(-90px); opacity: 0; } 6% { opacity: 1; } 11% { transform: translateY(0); }
  13% { transform: translateY(-5px); } 15%, 88% { transform: translateY(0); opacity: 1; } 95%, 100% { transform: translateY(0); opacity: 0; } }
@keyframes cxEnv1 { 0%, 17% { transform: translateY(-90px); opacity: 0; } 18% { opacity: 1; } 23% { transform: translateY(0); }
  25% { transform: translateY(-5px); } 27%, 88% { transform: translateY(0); opacity: 1; } 95%, 100% { transform: translateY(0); opacity: 0; } }
@keyframes cxEnv2 { 0%, 29% { transform: translateY(-90px); opacity: 0; } 30% { opacity: 1; } 35% { transform: translateY(0); }
  37% { transform: translateY(-5px); } 39%, 88% { transform: translateY(0); opacity: 1; } 95%, 100% { transform: translateY(0); opacity: 0; } }
@keyframes cxEnv3 { 0%, 41% { transform: translateY(-90px); opacity: 0; } 42% { opacity: 1; } 47% { transform: translateY(0); }
  49% { transform: translateY(-5px); } 51%, 88% { transform: translateY(0); opacity: 1; } 95%, 100% { transform: translateY(0); opacity: 0; } }
.sx-on .cx-unread { animation: cxUnread 1.6s ease-in-out infinite; }
@keyframes cxUnread { 50% { fill: #FF9A8F; } }

.sx-on .cx-wind { animation: cxWind 1.8s linear infinite; }
.sx-on .cx-wind.w2 { animation-duration: 2.3s; }
.sx-on .cx-wind.w3 { animation-duration: 2s; }
@keyframes cxWind { to { stroke-dashoffset: -38; } }
.sx-on .cx-roll { animation: cxRoll 9s linear infinite; }
.sx-on .cx-hop { animation: cxHop 0.55s ease-out infinite alternate; }
.sx-on .cx-spin { animation: cxSpin 1s linear infinite; }
@keyframes cxRoll { 0% { transform: translateX(-30px); } 60%, 100% { transform: translateX(512px); } }
@keyframes cxHop { from { transform: translateY(0); } to { transform: translateY(-11px); } }
@keyframes cxSpin { to { transform: rotate(360deg); } }

/* Lists and the lines under them, once in view */
.sx-on .cx-big span { animation: cxBig 0.7s cubic-bezier(.2, .8, .2, 1) both 0.15s; }
.sx-on .cx-glyph { animation: cxPop 0.6s cubic-bezier(.3, 1.6, .5, 1) both 0.55s; }
.sx-on .cx-glyph-tick { stroke-dasharray: 10; animation: cxDraw 0.6s ease both 0.9s; }
.sx-on.cx-you .cx-glyph { animation: cxPop 0.6s cubic-bezier(.3, 1.6, .5, 1) both 0.55s, cxBuzz 3s ease-in-out infinite 1.4s; }
.sx-on .cx-list li { animation: cxLi 0.55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 120ms + 0.35s); }
.sx-on .cx-mk { animation: cxPop 0.5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--i, 0) * 120ms + 0.6s); }
.sx-on .cx-foot { animation: cxLi 0.6s cubic-bezier(.2, .8, .2, 1) both 0.95s; }
.sx-on.cx-them .cx-fic { animation: cxBuzz 2.6s ease-in-out infinite 1.6s; }
.sx-on.cx-you .cx-fic { animation: cxPop 0.5s cubic-bezier(.3, 1.6, .5, 1) both 1.1s; }
@keyframes cxBig { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }
@keyframes cxPop { from { opacity: 0; transform: scale(0.3); } }
@keyframes cxDraw { from { stroke-dashoffset: 10; } to { stroke-dashoffset: 0; } }
@keyframes cxLi { from { opacity: 0; transform: translateX(-12px); } }
@keyframes cxBuzz { 0%, 16%, 100% { transform: rotate(0); } 3%, 9% { transform: rotate(-12deg); } 6%, 12% { transform: rotate(12deg); } }

/* ------------------------------------------------------------ how we work: three illustrated cards */

.hw-grid { display: grid; gap: 20px; max-width: 520px; margin: 0 auto; }
@media (min-width: 900px) { .hw-grid { grid-template-columns: repeat(3, 1fr); max-width: none; gap: 24px; } }
.hw-cell { display: flex; min-width: 0; }
.hw-card { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 14px; border-radius: 22px;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .35s ease, box-shadow .35s ease; }
.hw-card:hover { transform: translateY(-6px); border-color: rgba(229, 138, 196, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 34px 70px -34px rgba(172, 80, 143, 0.55); }
.hw-copy { padding: 22px 12px 12px; }
.hw-copy h3 { margin-bottom: 10px; font-size: clamp(1.2rem, 1.7vw, 1.35rem); }
.hw-copy p { margin: 0; color: var(--text-2); }

.hw-art { position: relative; display: flex; align-items: center; justify-content: center; height: 250px;
  border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.05);
  background: radial-gradient(90% 80% at 50% 0%, rgba(73, 118, 177, 0.2), transparent 70%), rgba(7, 12, 36, 0.45); }
.hw-chat { background: radial-gradient(80% 80% at 80% 100%, rgba(172, 80, 143, 0.22), transparent 70%),
  radial-gradient(80% 70% at 10% 0%, rgba(73, 118, 177, 0.16), transparent 70%), rgba(7, 12, 36, 0.45); }
.hw-follow { background: radial-gradient(70% 70% at 50% 100%, rgba(91, 214, 155, 0.12), transparent 70%),
  radial-gradient(90% 80% at 50% 0%, rgba(172, 80, 143, 0.16), transparent 70%), rgba(7, 12, 36, 0.45); }
.hw-stage { position: relative; width: 248px; height: 224px; flex: none; }
.hw-g { width: 18px; height: 18px; display: block; }

/* inbox: five channels fly into one tray, which counts them and sorts them */
.hw-src, .hw-fly { position: absolute; top: 0; left: calc(var(--x) * 53.5px); width: 34px; height: 34px;
  display: grid; place-items: center; border-radius: 10px; color: var(--text); }
.hw-src { background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.8); }
.hw-fly { z-index: 3; opacity: 0; background: var(--accent); color: #fff; border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 22px rgba(229, 138, 196, 0.7); }
.hw-fly.go { opacity: 1; transform: translate(calc(3px - var(--x) * 53.5px), calc(91px + var(--s) * 24px)) scale(0.59);
  transition: transform .62s cubic-bezier(.5, 0, .3, 1), opacity .15s ease; }
.hw-fly.go.land { opacity: 0; transition: opacity .18s ease; }
.hw-tray { position: absolute; left: 0; right: 0; top: 62px; height: 162px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(24, 34, 79, 0.95), rgba(18, 27, 66, 0.95)); border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.8); }
.hw-tray-h { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px 0 10px; color: var(--text-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.hw-tray-h .hw-g { width: 16px; height: 16px; }
.hw-bar { flex: 1; height: 6px; max-width: 70px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); }
.hw-sorti { margin-left: auto; color: var(--accent-text); }
.hw-count { height: 20px; min-width: 24px; padding: 0 7px; overflow: hidden; border-radius: var(--pill); background: var(--accent);
  color: #fff; font: 700 12px/20px var(--mono); text-align: center; }
.hw-digits { display: flex; flex-direction: column; transform: translateY(calc(var(--c, var(--n)) * -20px));
  transition: transform .35s cubic-bezier(.3, 1.5, .5, 1); }
.hw-digits span { height: 20px; }
.hw-row { position: absolute; left: 8px; right: 8px; top: calc(36px + var(--to) * 24px); height: 20px; display: flex; align-items: center;
  gap: 8px; padding: 0 6px 0 2px; border-radius: 6px; background: rgba(255, 255, 255, 0.04); }
.hw-ri { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: rgba(255, 255, 255, 0.09); color: var(--text); }
.hw-ri .hw-g { width: 13px; height: 13px; }
.hw-sk { flex: 1; display: flex; gap: 6px; }
.hw-sk i { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.2); width: 58%; }
.hw-sk i + i { width: 26%; background: rgba(255, 255, 255, 0.1); }
.hw-tag { width: 30px; height: 9px; border-radius: var(--pill); background: var(--mute); transition: background .4s ease, width .4s ease; }
.g-urgent .hw-tag { background: var(--bad); }
.g-lead .hw-tag { background: var(--blue-text); }
.g-follow .hw-tag { background: var(--amber); }
.g-urgent { box-shadow: inset 0 0 0 1px rgba(255, 107, 94, 0.55), 0 0 16px -4px rgba(255, 107, 94, 0.6); }
.g-spam { opacity: 0.45; }

.armed .hw-fly { transform: none; }
.armed .hw-row { transform: translateY(calc(var(--d) * 24px)); opacity: 1; box-shadow: none;
  transition: transform .35s ease, opacity .3s ease, box-shadow .5s ease; }
.armed .hw-row:not(.on) { opacity: 0; transform: translateY(calc(var(--d) * 24px)) translateX(-12px); }
.armed .hw-row.on { animation: hwLand .5s ease-out; }
.armed:not(.sorted) .hw-tag { width: 18px; background: rgba(255, 255, 255, 0.16); }
.armed:not(.sorting) .hw-sorti { opacity: 0; }
.armed.sorting .hw-sorti { animation: hwSortIc .6s ease-in-out infinite alternate; }
.armed.sorted .hw-sorti { animation: none; }
.armed.sorted .hw-row { transform: none; transition: transform .95s cubic-bezier(.65, 0, .25, 1), opacity .4s ease, box-shadow .5s ease .9s; }
.armed.sorted .g-urgent { box-shadow: inset 0 0 0 1px rgba(255, 107, 94, 0.55), 0 0 16px -4px rgba(255, 107, 94, 0.6); }
.armed.sorted .g-spam { opacity: 0.45; }
.armed.out .hw-row { opacity: 0; transition: opacity .5s ease; }
.armed .hw-count.bump { animation: hwBump .35s ease; }
@keyframes hwLand { 0% { background: rgba(229, 138, 196, 0.35); } 100% { background: rgba(255, 255, 255, 0.04); } }
@keyframes hwSortIc { from { transform: translateY(-2px); } to { transform: translateY(2px); } }
@keyframes hwBump { 50% { transform: scale(1.22); box-shadow: 0 0 16px rgba(229, 138, 196, 0.8); } }

/* chat: the question, our AI assistant typing, the answer */
.hw-chat .hw-stage { width: 272px; height: auto; display: flex; flex-direction: column; gap: 14px; }
.hw-msg { display: flex; align-items: flex-end; gap: 9px; }
.hw-msg.out { justify-content: flex-end; }
.hw-av { position: relative; display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--text-2); }
.hw-av .hw-g { width: 17px; height: 17px; }
.hw-av.ai { background: linear-gradient(135deg, var(--glow-blue), var(--accent)); border-color: rgba(255, 255, 255, 0.3); color: #fff;
  box-shadow: 0 0 18px -4px rgba(229, 138, 196, 0.6); }
.hw-ai { position: absolute; right: -8px; bottom: -6px; padding: 1px 5px; border-radius: var(--pill); background: #fff; color: var(--ground);
  font: 800 10.5px/1.4 var(--mono); letter-spacing: 0.04em; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }
.hw-bub { margin: 0; max-width: 196px; padding: 9px 13px; font-size: 0.9rem; line-height: 1.35; font-weight: 550; }
.hw-msg.in .hw-bub { background: #EEF0FA; color: var(--ground); border-radius: 15px 15px 15px 4px;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.9); }
.hw-msg.out .hw-bub { background: linear-gradient(135deg, #8E3F78, var(--accent) 55%, #7B438C); color: #fff;
  border-radius: 15px 15px 4px 15px; box-shadow: 0 14px 30px -14px rgba(172, 80, 143, 0.9); }
.hw-slot { display: grid; justify-items: end; align-items: end; }
.hw-slot > * { grid-area: 1 / 1; }
.hw-typing { display: flex; gap: 4px; margin: 0; padding: 12px 14px; border-radius: 15px 15px 4px 15px; opacity: 0;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.12); }
.hw-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text); }
.hw-kb { display: grid; place-items: center; }

.armed .hw-msg.in, .armed .hw-msg.out .hw-bub { transition: opacity .35s ease, transform .45s cubic-bezier(.3, 1.4, .5, 1); transform-origin: 0 100%; }
.armed .hw-msg.out .hw-bub { transform-origin: 100% 100%; }
.armed .hw-msg.in:not(.on), .armed .hw-msg.out .hw-bub:not(.on) { opacity: 0; transform: translateY(10px) scale(0.92); }
.armed .hw-typing { transition: opacity .25s ease; }
.armed .hw-typing.on { opacity: 1; }
.armed .hw-typing.on i { animation: hwType 1s ease-in-out infinite; }
.armed .hw-typing.on i:nth-child(2) { animation-delay: .15s; }
.armed .hw-typing.on i:nth-child(3) { animation-delay: .3s; }
.armed .hw-av.ai.think { animation: hwThink 1.1s ease-in-out infinite; }
.armed .hw-av.ai.think .hw-kb { animation: hwKb 1.1s ease-in-out infinite; }
.armed.out .hw-msg { opacity: 0; transition: opacity .5s ease; }
@keyframes hwType { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes hwThink { 50% { box-shadow: 0 0 0 6px rgba(229, 138, 196, 0.18), 0 0 26px rgba(229, 138, 196, 0.8); } }
@keyframes hwKb { 50% { transform: scale(1.15); } }

/* follow-up: a timeline of nudges lighting one by one, then booked */
.hw-track { position: absolute; left: 34px; right: 34px; top: 99px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); }
.hw-fill { display: block; height: 100%; width: calc(var(--p, 1) * 100%); border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-text) 70%, var(--ok)); box-shadow: 0 0 12px rgba(229, 138, 196, 0.7); }
.hw-nodes { list-style: none; margin: 0; padding: 0; }
.hw-node { position: absolute; top: 81px; left: calc(34px + var(--n) * 90px); width: 0; display: flex; flex-direction: column; align-items: center; }
.hw-dotc { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; color: #fff;
  background: rgba(172, 80, 143, 0.28); border: 2px solid var(--accent-text);
  box-shadow: 0 0 0 5px rgba(172, 80, 143, 0.14), 0 0 22px rgba(229, 138, 196, 0.5); }
.hw-day { margin-top: 8px; font: 600 12.5px/1 var(--mono); color: var(--text); white-space: nowrap; }
.hw-ping { position: absolute; top: -36px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px;
  background: #EEF0FA; color: var(--accent); opacity: 0; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.9); }
.hw-ping .hw-g { width: 15px; height: 15px; }
.hw-done { position: absolute; left: 50%; bottom: 12px; display: flex; align-items: center; gap: 8px; margin: 0;
  padding: 8px 16px 8px 12px; border-radius: var(--pill); transform: translateX(-50%); white-space: nowrap;
  background: rgba(91, 214, 155, 0.16); border: 1px solid rgba(91, 214, 155, 0.55); color: var(--ok-text);
  font-weight: 700; font-size: 0.95rem; box-shadow: 0 0 28px -6px rgba(91, 214, 155, 0.55); }
.hw-done .hw-g { width: 17px; height: 17px; }

.armed .hw-fill { width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, var(--accent), var(--accent-text));
  transition: width 1.3s linear; }
.armed.done .hw-fill { background: linear-gradient(90deg, var(--accent), var(--accent-text) 70%, var(--ok)); }
.armed .hw-dotc { transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, color .35s ease; }
.armed .hw-node:not(.on) .hw-dotc { background: #121B42; border-color: rgba(255, 255, 255, 0.18); box-shadow: none; color: var(--mute); }
.armed .hw-node:not(.on) .hw-day { color: var(--mute); }
.armed .hw-node.on .hw-dotc { animation: hwNode .5s cubic-bezier(.3, 1.6, .5, 1); }
.armed .hw-node.on .hw-ping { animation: hwPing 1.5s ease both; }
.armed .hw-done { transition: opacity .3s ease, transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.armed:not(.done) .hw-done { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.6); }
.armed.out .hw-done, .armed.out .hw-fill { opacity: 0; transition: opacity .5s ease; }
@keyframes hwNode { 0% { transform: scale(0.7); } 100% { transform: scale(1); } }
@keyframes hwPing { 0% { opacity: 0; transform: translateY(12px) scale(0.6); } 20% { opacity: 1; transform: translateY(0) scale(1.05); }
  30%, 70% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-14px); } }

@media (prefers-reduced-motion: reduce) {
  .hw-card:hover { transform: none; }
}