/* ==========================================================================
   HADDON — sub-page styles
   Loaded after main.css. Reuses its tokens, buttons, cards, accordion and
   motion layer; adds only what the sub-pages need on top.
   ========================================================================== */

/* ---------- breadcrumbs ---------- */
.crumbs{
  display:flex;align-items:center;gap:10px;margin-bottom:26px;
  font-size:.8rem;color:var(--muted);
}
.crumbs a{color:var(--muted);transition:color .22s var(--ease)}
.crumbs a:hover{color:var(--blue)}
.crumbs span[aria-hidden]{opacity:.5}

/* ---------- page hero ---------- */
.phero{
  position:relative;overflow:hidden;
  padding:calc(var(--hdr) + clamp(48px,7vw,96px)) 0 clamp(52px,7vw,92px);
}
.phero__wash{
  position:absolute;top:-34%;left:52%;translate:-50% 0;
  width:min(1000px,120%);aspect-ratio:1.7/1;pointer-events:none;
  background:
    radial-gradient(closest-side,rgba(30,136,255,.18),transparent 70%) 28% 42%/60% 72% no-repeat,
    radial-gradient(closest-side,rgba(122,60,242,.16),transparent 70%) 72% 56%/58% 68% no-repeat;
  filter:blur(30px);
  animation:drift 30s ease-in-out infinite alternate;
}
html[data-theme="light"] .phero__wash{opacity:.62}
.phero__in{position:relative}
.phero__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,64px);align-items:center;
}
.phero__h1{
  font-size:clamp(2.1rem,4.4vw,3.5rem);font-family:var(--ff-d);font-weight:500;
  letter-spacing:-.04em;line-height:1.06;
}
.phero__h1 .ln{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.phero__h1 .ln>span{display:block;transform:translateY(115%);transition:transform 1s var(--ease)}
.phero__h1.is-in .ln>span{transform:none}
.phero__h1.is-in .ln:nth-child(1)>span{transition-delay:.05s}
.phero__h1.is-in .ln:nth-child(2)>span{transition-delay:.14s}
.phero__h1.is-in .ln:nth-child(3)>span{transition-delay:.23s}
.phero__lede{
  margin-top:22px;max-width:52ch;font-size:var(--fs-lede);color:var(--txt-2);line-height:1.75;
}
.phero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

/* ---------- section rhythm ---------- */
.psec{padding:var(--pad) 0}
.psec--alt{background:var(--bg-2);border-block:1px solid var(--line)}
.psec .gets__grid li h3:only-child{margin-bottom:0}
.psec .phase__out:empty{display:none}
.psec .phase{grid-template-columns:64px minmax(0,1fr)}

/* ---------- signals ---------- */
.signals{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,18px)}
.signals li{
  display:flex;align-items:flex-start;gap:14px;
  padding:clamp(18px,2vw,24px);border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--surf);
  font-size:.95rem;color:var(--txt-2);line-height:1.6;
  transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.signals li:hover{border-color:var(--line-2);transform:translateY(-2px)}
.signals__tick{
  position:relative;flex:none;width:20px;height:20px;border-radius:50%;
  background:var(--grad);margin-top:1px;
}
.signals__tick::after{
  content:'';position:absolute;inset:0;margin:auto;width:8px;height:4.5px;
  border-left:1.6px solid #fff;border-bottom:1.6px solid #fff;
  transform:rotate(-45deg) translate(.5px,-1px);
}

/* ---------- related ---------- */
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px)}
.relcard{
  position:relative;display:block;padding:clamp(22px,2.4vw,30px);
  border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surf);
  transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.relcard:hover{border-color:var(--line-2);transform:translateY(-3px)}
.relcard__kicker{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.relcard h3{font-size:1.2rem;margin-bottom:10px}
.relcard p{font-size:.89rem;color:var(--txt-2);line-height:1.6}
.relcard__go{
  display:block;width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2);
  margin-top:18px;position:relative;transition:.3s var(--ease);
}
.relcard__go::after{
  content:'';position:absolute;inset:0;margin:auto;width:6px;height:6px;
  border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;
  transform:rotate(45deg) translate(-1px,1px);
}
.relcard:hover .relcard__go{background:var(--grad);border-color:transparent;color:#fff}

/* ---------- sectors ---------- */
.sectors{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px)}
.sector{
  position:relative;padding:clamp(22px,2.4vw,28px);border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--surf);
  scroll-margin-top:calc(var(--hdr) + 24px);
  transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.sector:hover{border-color:var(--line-2);transform:translateY(-3px)}
/* arriving from the menu should be obvious — a ring plus a single pulse */
.sector:target{border-color:var(--blue);animation:sectorArrive 1.6s var(--ease)}
@keyframes sectorArrive{
  0%{box-shadow:0 0 0 0 rgba(30,136,255,.45)}
  60%{box-shadow:0 0 0 9px rgba(30,136,255,0)}
  100%{box-shadow:0 0 0 0 rgba(30,136,255,0)}
}
.sector h3{font-size:1.1rem;margin-bottom:9px}
.sector>p{font-size:.88rem;color:var(--txt-2);line-height:1.6}
.sector__list{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:grid;gap:7px}
.sector__list li{position:relative;padding-left:15px;font-size:.82rem;color:var(--muted)}
.sector__list li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--blue)}

/* ---------- closing CTA ---------- */
.pcta{position:relative;overflow:hidden;padding:clamp(72px,9vw,120px) 0;text-align:center}
.pcta__wash{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(closest-side,rgba(30,136,255,.16),transparent 70%) 30% 50%/56% 130% no-repeat,
    radial-gradient(closest-side,rgba(122,60,242,.14),transparent 70%) 70% 50%/56% 130% no-repeat;
  filter:blur(34px);
}
.pcta__in{position:relative;display:flex;flex-direction:column;align-items:center}
.pcta__in p{margin-top:18px;max-width:52ch;color:var(--txt-2);font-size:var(--fs-lede);line-height:1.7}
.pcta__btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:30px}

/* homepage service headings link through to their full page */
.card__link{position:relative;transition:color .22s var(--ease)}
.card__link::after{
  content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease);
}
.card:hover .card__link{color:var(--blue)}
.card:hover .card__link::after{transform:scaleX(1)}

/* ==========================================================================
   HERO MOTIFS
   Each page gets a miniature working interface rather than an abstract shape:
   a cursor clicking, rows re-sorting, a skeleton resolving, a toggle flipping.
   Markup lives in content/motifs.mjs.
   ========================================================================== */
.motif{
  position:relative;aspect-ratio:4/3;max-height:400px;
  border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--surf);
  box-shadow:0 2px 6px rgba(0,0,0,.16),0 20px 46px -24px rgba(0,0,0,.55);
}

/* --- shared chrome and primitives --- */
.mo-bar{
  height:28px;display:flex;align-items:center;gap:5px;padding:0 11px;
  border-bottom:1px solid var(--line);background:var(--bg-2);
}
.mo-bar>i{width:7px;height:7px;border-radius:50%;background:var(--line-2);flex:none}
.mo-url{
  margin-left:9px;padding:3px 10px;border-radius:5px;background:var(--bg);
  color:var(--muted);font-size:9px;letter-spacing:.04em;white-space:nowrap;
}
.mo-body{position:relative;height:calc(100% - 28px);padding:14px;overflow:hidden}
.motif--mobile .mo-body{height:100%}

.mo-line{display:block;height:7px;width:var(--w,100%);border-radius:4px;background:var(--line-2);opacity:.5}
.mo-block{display:block;height:34px;border-radius:8px;background:var(--line)}
.mo-chip{display:inline-block;height:13px;width:34px;border-radius:99px;background:var(--line-2);opacity:.55}
.mo-chip--cta{background:var(--grad);opacity:1}
.mo-cursor{
  position:absolute;width:13px;height:13px;z-index:6;pointer-events:none;
  border-radius:52% 52% 54% 3px;background:#fff;box-shadow:0 2px 7px rgba(0,0,0,.5);
}

/* ── 01 research · session playback, notes tagged as it runs ───────────── */
.mo-research{display:flex;flex-direction:column;gap:11px}
.mo-player{
  position:relative;flex:1;border-radius:9px;overflow:hidden;
  border:1px solid var(--line);background:var(--bg-2);
}
.mo-rec{
  position:absolute;left:10px;top:10px;width:7px;height:7px;border-radius:50%;
  background:#F87171;animation:moRec 1.5s steps(1) infinite;
}
@keyframes moRec{0%,60%{opacity:1}61%,100%{opacity:.2}}
.mo-face{
  position:absolute;left:50%;top:46%;translate:-50% -50%;
  width:30%;aspect-ratio:1;border-radius:50%;background:var(--grad);opacity:.32;
}
.mo-scrub{position:absolute;left:10px;right:10px;bottom:10px;height:3px;border-radius:3px;background:var(--line-2)}
.mo-scrub em{display:block;height:100%;width:0;border-radius:3px;background:var(--grad);animation:moScrub 5s linear infinite}
@keyframes moScrub{to{width:100%}}
.mo-notes{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;height:32%}
.mo-note{
  border-radius:5px;background:var(--grad);opacity:0;
  animation:moNote 5s var(--ease) infinite;animation-delay:var(--d);
}
@keyframes moNote{
  0%{opacity:0;transform:translateY(9px) scale(.92)}
  7%,86%{opacity:.92;transform:none}
  95%,100%{opacity:0;transform:translateY(-5px)}
}

/* ── 02 ui · element dragged, snapping to a guide ──────────────────────── */
.mo-canvas{
  background-color:var(--bg-2);
  background-image:
    repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 22px),
    repeating-linear-gradient(0deg,var(--line) 0 1px,transparent 1px 22px);
}
.mo-guide{position:absolute;background:var(--blue);opacity:0;animation:moGuide 4.4s var(--ease) infinite}
.mo-guide--v{left:16%;top:0;bottom:0;width:1px}
.mo-guide--h{top:24%;left:0;right:0;height:1px}
@keyframes moGuide{0%,24%{opacity:0}32%,64%{opacity:.7}72%,100%{opacity:0}}
.mo-art{
  position:absolute;left:16%;top:24%;width:54%;height:46%;
  padding:11px;border-radius:9px;background:var(--surf);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:8px;
  animation:moSnap 4.4s var(--ease) infinite;
}
.mo-art .mo-block{height:auto;flex:1;background:var(--grad);opacity:.55;border-radius:6px}
.mo-sel{
  position:absolute;left:calc(16% - 4px);top:calc(24% - 4px);
  width:calc(54% + 8px);height:calc(46% + 8px);
  border:1.5px solid var(--blue);border-radius:11px;
  animation:moSnap 4.4s var(--ease) infinite;
}
.mo-sel i{position:absolute;width:6px;height:6px;border-radius:1px;background:var(--blue)}
.mo-sel i:nth-child(1){left:-3.5px;top:-3.5px}
.mo-sel i:nth-child(2){right:-3.5px;top:-3.5px}
.mo-sel i:nth-child(3){left:-3.5px;bottom:-3.5px}
.mo-sel i:nth-child(4){right:-3.5px;bottom:-3.5px}
@keyframes moSnap{0%{transform:translate(17px,9px)}30%,70%{transform:none}100%{transform:translate(17px,9px)}}
.motif--ui .mo-cursor{left:62%;top:58%;animation:moSnap 4.4s var(--ease) infinite}

/* ── 03 system · one token moves, every component follows ──────────────── */
.mo-system{display:flex;flex-direction:column;gap:12px}
.mo-token{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  border-radius:9px;border:1px solid var(--line);background:var(--bg-2);
}
.mo-swatch{width:18px;height:18px;border-radius:5px;background:var(--grad);flex:none;animation:moHue 5s var(--ease) infinite}
@keyframes moHue{0%,100%{filter:hue-rotate(0deg)}50%{filter:hue-rotate(55deg)}}
.mo-token .mo-line{flex:1}
.mo-slider{position:relative;width:38%;height:3px;border-radius:3px;background:var(--line-2);flex:none}
.mo-slider em{
  position:absolute;top:50%;translate:0 -50%;width:11px;height:11px;border-radius:50%;
  background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.45);animation:moSlide 5s var(--ease) infinite;
}
@keyframes moSlide{0%,100%{left:6%}50%{left:76%}}
.mo-comps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex:1}
.mo-comp{border-radius:7px;background:var(--grad);opacity:.85;animation:moHue 5s var(--ease) infinite;animation-delay:var(--d)}

/* ── 04 website · skeleton resolves, nav hovered, page scrolls ─────────── */
.mo-site{display:flex;flex-direction:column;padding:0}
.mo-nav{display:flex;align-items:center;gap:9px;padding:10px 13px;border-bottom:1px solid var(--line)}
.mo-dot{width:13px;height:13px;border-radius:4px;background:var(--grad);flex:none}
.mo-navlink{width:24px;height:5px;border-radius:3px;background:var(--line-2);opacity:.55}
.mo-nav .mo-chip{margin-left:auto}
.mo-nav .mo-navlink:nth-child(3){animation:moNavHover 5s var(--ease) infinite}
@keyframes moNavHover{0%,28%{background:var(--line-2);opacity:.55}36%,58%{background:var(--blue);opacity:1}66%,100%{background:var(--line-2);opacity:.55}}
.mo-scrollarea{
  flex:1;padding:13px;display:flex;flex-direction:column;gap:10px;
  animation:moPageScroll 6s cubic-bezier(.65,.05,.36,1) infinite;
}
@keyframes moPageScroll{0%,28%{transform:translateY(0)}58%,82%{transform:translateY(-26px)}100%{transform:translateY(0)}}
.mo-hero{height:48px;border-radius:9px;background:var(--grad);opacity:.9;flex:none}
.mo-tri{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mo-tri span{height:30px;border-radius:7px;background:var(--line)}
.mo-site::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 34%,rgba(255,255,255,.13) 50%,transparent 66%);
  transform:translateX(-100%);animation:moShimmer 6s var(--ease) infinite;
}
@keyframes moShimmer{0%{transform:translateX(-100%)}24%,100%{transform:translateX(100%)}}
.motif--website .mo-cursor{animation:moCursorNav 5s var(--ease) infinite}
@keyframes moCursorNav{
  0%{left:62%;top:72%;transform:scale(1)}
  30%{left:31%;top:11%;transform:scale(1)}
  36%{transform:scale(.78)}
  42%{transform:scale(1)}
  78%,100%{left:62%;top:72%;transform:scale(1)}
}

/* ── 05 webapp · filter clicked, chart re-renders, rows re-sort ────────── */
.mo-app{display:flex;gap:11px;padding:12px}
.mo-side{width:20%;display:flex;flex-direction:column;gap:6px;flex:none}
.mo-navrow{height:9px;border-radius:4px;background:var(--line)}
.mo-navrow.is-on{background:var(--grad);opacity:.9}
.mo-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
.mo-filters{display:flex;gap:5px}
.motif--webapp .mo-chip:nth-child(1){animation:moChipOff 5s var(--ease) infinite}
.motif--webapp .mo-chip:nth-child(2){animation:moChipOn 5s var(--ease) infinite}
@keyframes moChipOn{0%,36%{background:var(--line-2);opacity:.55}46%,92%{background:#1E88FF;opacity:1}100%{background:var(--line-2);opacity:.55}}
@keyframes moChipOff{0%,36%{background:#1E88FF;opacity:1}46%,92%{background:var(--line-2);opacity:.55}100%{background:#1E88FF;opacity:1}}
.mo-cols{
  display:flex;align-items:flex-end;gap:5px;flex:1;min-height:0;
  padding:9px;border-radius:8px;border:1px solid var(--line);background:var(--bg-2);
}
.mo-cols em{
  flex:1;border-radius:3px 3px 1px 1px;background:var(--grad);
  height:calc(var(--h) * 100%);transform-origin:50% 100%;
  animation:moReRender 5s var(--ease) infinite;animation-delay:var(--d);
}
@keyframes moReRender{0%,38%{transform:scaleY(1)}46%{transform:scaleY(.12)}60%,100%{transform:scaleY(1)}}
.mo-rows{display:flex;flex-direction:column;gap:5px;flex:none}
.mo-row{height:8px;border-radius:4px;background:var(--line)}
.mo-row:nth-child(1){animation:moSortA 5s var(--ease) infinite}
.mo-row:nth-child(3){animation:moSortB 5s var(--ease) infinite}
@keyframes moSortA{0%,44%{transform:translateY(0)}58%,100%{transform:translateY(26px)}}
@keyframes moSortB{0%,44%{transform:translateY(0)}58%,100%{transform:translateY(-26px)}}
.motif--webapp .mo-cursor{animation:moCursorFilter 5s var(--ease) infinite}
@keyframes moCursorFilter{
  0%{left:72%;top:78%;transform:scale(1)}
  34%{left:40%;top:19%;transform:scale(1)}
  40%{transform:scale(.78)}
  46%{transform:scale(1)}
  82%,100%{left:72%;top:78%;transform:scale(1)}
}

/* ── 06 mobile · refresh spinner, list loads, toast, tab switch ────────── */
.mo-phone{display:grid;place-items:center;padding:12px}
.mo-device{
  position:relative;width:46%;height:94%;border-radius:18px;overflow:hidden;
  border:1px solid var(--line-2);background:var(--bg-2);
  box-shadow:0 10px 30px -14px rgba(0,0,0,.6);
}
.mo-notch{position:absolute;left:50%;top:7px;translate:-50% 0;width:32%;height:4px;border-radius:99px;background:var(--line-2)}
.mo-spinner{
  position:absolute;left:50%;top:17%;translate:-50% 0;width:14px;height:14px;border-radius:50%;
  border:2px solid var(--line-2);border-top-color:var(--blue);
  animation:moSpin .9s linear infinite,moSpinFade 5s var(--ease) infinite;
}
@keyframes moSpin{to{transform:rotate(360deg)}}
@keyframes moSpinFade{0%,13%{opacity:1}21%,100%{opacity:0}}
.mo-feed{position:absolute;left:9%;right:9%;top:27%;display:flex;flex-direction:column;gap:6px}
.mo-item{height:16px;border-radius:5px;background:var(--line);opacity:0;animation:moItemIn 5s var(--ease) infinite;animation-delay:var(--d)}
.mo-item:first-child{background:var(--grad);opacity:0}
@keyframes moItemIn{0%,16%{opacity:0;transform:translateY(7px)}25%,90%{opacity:.9;transform:none}98%,100%{opacity:0}}
.mo-toast{
  position:absolute;left:10%;right:10%;bottom:23%;height:15px;border-radius:7px;
  background:var(--grad);opacity:0;animation:moToast 5s var(--ease) infinite;
}
@keyframes moToast{0%,58%{opacity:0;transform:translateY(11px)}66%,84%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(11px)}}
.mo-tabs{
  position:absolute;left:0;right:0;bottom:0;height:22px;
  display:flex;align-items:center;justify-content:space-around;
  border-top:1px solid var(--line);background:var(--surf);
}
.mo-tabs i{width:13px;height:4px;border-radius:3px;background:var(--line-2)}
.mo-tabs i:nth-child(1){animation:moTabA 5s steps(1) infinite}
.mo-tabs i:nth-child(2){animation:moTabB 5s steps(1) infinite}
@keyframes moTabA{0%,55%{background:#1E88FF}56%,100%{background:var(--line-2)}}
@keyframes moTabB{0%,55%{background:var(--line-2)}56%,100%{background:#1E88FF}}

/* ── 07 audit · a scan sweeps, numbered findings drop in ───────────────── */
.mo-audit{display:flex;flex-direction:column;gap:11px}
.mo-audit .mo-block{flex:1}
.mo-pin{
  position:absolute;left:var(--x);top:var(--y);width:19px;height:19px;border-radius:50%;
  background:var(--grad);color:#fff;text-align:center;
  font:600 9px/19px var(--ff-b);opacity:0;
  box-shadow:0 2px 9px rgba(30,136,255,.55);
  animation:moPin 5s var(--ease) infinite;animation-delay:var(--d);
}
@keyframes moPin{
  0%{opacity:0;transform:scale(.4) translateY(-9px)}
  9%{opacity:1;transform:scale(1.18) translateY(0)}
  15%,86%{opacity:1;transform:scale(1)}
  95%,100%{opacity:0;transform:scale(.6)}
}
.mo-sweep{
  position:absolute;left:0;right:0;height:2px;background:var(--blue);
  box-shadow:0 0 18px 4px rgba(30,136,255,.5);
  animation:moSweep 5s cubic-bezier(.65,.05,.36,1) infinite;
}
@keyframes moSweep{0%{top:0;opacity:0}6%{opacity:1}48%{top:100%;opacity:1}56%,100%{top:100%;opacity:0}}

/* ── 08 redesign · a real before/after handle dragged across ───────────── */
.mo-compare{padding:0}
.mo-old,.mo-new{
  position:absolute;inset:0;padding:18px;
  display:flex;flex-direction:column;justify-content:center;gap:11px;
}
.mo-old{background:var(--bg-2)}
.mo-old .mo-line{background:var(--line-2);opacity:.4}
.mo-old .mo-block{background:var(--line);border-radius:4px}
.mo-new{background:var(--surf);clip-path:inset(0 0 0 92%);animation:moWipe 6s var(--ease) infinite}
.mo-new .mo-line{background:var(--grad);opacity:.9;height:8px}
.mo-new .mo-block{background:var(--grad);opacity:.75;border-radius:10px}
@keyframes moWipe{0%{clip-path:inset(0 0 0 92%)}45%,58%{clip-path:inset(0 0 0 12%)}100%{clip-path:inset(0 0 0 92%)}}
.mo-handle{position:absolute;top:0;bottom:0;width:2px;background:var(--blue);left:92%;animation:moHandle 6s var(--ease) infinite;z-index:3}
@keyframes moHandle{0%{left:92%}45%,58%{left:12%}100%{left:92%}}
.mo-handle i{
  position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:21px;height:21px;border-radius:50%;background:var(--blue);
  box-shadow:0 2px 9px rgba(0,0,0,.45);
}

/* ── 09 partner · a sprint board where work keeps moving ───────────────── */
.mo-board{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.mo-col{
  display:flex;flex-direction:column;gap:7px;padding:9px;
  border-radius:8px;border:1px solid var(--line);background:var(--bg-2);
}
.mo-collbl{height:5px;width:58%;border-radius:3px;background:var(--line-2);opacity:.6}
.mo-tkt{height:21px;border-radius:6px;background:var(--line);opacity:0;animation:moTkt 5s var(--ease) infinite;animation-delay:var(--d)}
@keyframes moTkt{0%{opacity:0;transform:translateY(7px)}9%,90%{opacity:1;transform:none}100%{opacity:0}}
.mo-tkt--move{background:var(--grad);opacity:1;animation:moTktMove 5s var(--ease) infinite}
@keyframes moTktMove{
  0%,18%{transform:translate(-106%,0);opacity:1}
  38%,58%{transform:none;opacity:1}
  78%,100%{transform:translate(106%,-28px);opacity:1}
}
.mo-tkt--done{background:#2BD98A;opacity:.85}

/* ── 10 new product · a cursor clicking through a prototype flow ───────── */
.mo-flow{display:flex;align-items:center;justify-content:center;gap:7px}
.mo-screen{
  position:relative;width:26%;height:72%;padding:9px;
  border-radius:9px;border:1px solid var(--line);background:var(--bg-2);
  display:flex;flex-direction:column;gap:7px;opacity:.32;
  animation:moScreenStep 6s var(--ease) infinite;animation-delay:calc(var(--i) * 1.7s);
}
.mo-screen>i{height:5px;border-radius:3px;background:var(--line-2);opacity:.6}
.mo-screen .mo-chip{margin-top:auto;height:11px;width:74%}
@keyframes moScreenStep{
  0%,3%{opacity:.3;border-color:var(--line)}
  9%,27%{opacity:1;border-color:var(--blue)}
  33%,100%{opacity:.3;border-color:var(--line)}
}
.mo-arrow{position:relative;width:13px;height:1.5px;background:var(--line-2);flex:none;animation:moArrow 6s var(--ease) infinite;animation-delay:calc(var(--i) * 1.7s + .55s)}
.mo-arrow::after{
  content:'';position:absolute;right:-1px;top:50%;translate:0 -50%;
  border:3.5px solid transparent;border-left-color:currentColor;color:var(--line-2);
}
@keyframes moArrow{0%,7%{background:var(--line-2)}13%,25%{background:#1E88FF}31%,100%{background:var(--line-2)}}
.motif--newproduct .mo-cursor{animation:moCursorFlow 6s var(--ease) infinite}
@keyframes moCursorFlow{
  0%,9%{left:25%;top:68%;transform:scale(1)}
  13%{transform:scale(.76)}
  17%{transform:scale(1)}
  36%,43%{left:51%;top:68%;transform:scale(1)}
  47%{transform:scale(.76)}
  51%{transform:scale(1)}
  72%,100%{left:77%;top:68%;transform:scale(1)}
}

/* ── 11 spreadsheet · a grid resolving into a validated form ───────────── */
.mo-sheet{padding:0}
.mo-grid{
  position:absolute;inset:14px;display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:1fr;gap:3px;animation:moGridOut 6s var(--ease) infinite;
}
.mo-grid span{border:1px solid var(--line);border-radius:2px;background:var(--bg-2)}
@keyframes moGridOut{0%,32%{opacity:1;transform:none}50%,100%{opacity:0;transform:scale(.94)}}
.mo-form{
  position:absolute;inset:14px;display:flex;flex-direction:column;justify-content:center;
  gap:11px;opacity:0;animation:moFormIn 6s var(--ease) infinite;
}
@keyframes moFormIn{0%,36%{opacity:0;transform:translateY(11px)}54%,92%{opacity:1;transform:none}100%{opacity:0}}
.mo-field{
  position:relative;display:block;height:25px;border-radius:7px;
  border:1px solid var(--line);background:var(--bg-2);
}
.mo-field em{
  position:absolute;left:10px;top:50%;translate:0 -50%;
  height:5px;width:0;border-radius:3px;background:var(--line-2);
  animation:moType 6s var(--ease) infinite;
}
.mo-field:nth-of-type(2) em{animation-delay:.25s}
@keyframes moType{0%,42%{width:0}58%,100%{width:44%}}
.mo-valid{
  align-self:flex-start;display:inline-flex;align-items:center;
  height:17px;padding:0 11px 0 22px;border-radius:99px;position:relative;
  background:rgba(43,217,138,.16);
}
.mo-valid::before{
  content:'';position:absolute;left:9px;top:50%;width:7px;height:4px;
  border-left:1.6px solid #2BD98A;border-bottom:1.6px solid #2BD98A;
  transform:translateY(-70%) rotate(-45deg);
}

/* ── 12 internal tools · rows selected, bulk bar slides up ─────────────── */
.mo-admin{display:flex;flex-direction:column;gap:7px}
.mo-arow{
  display:flex;align-items:center;gap:10px;height:23px;padding:0 11px;flex:none;
  border-radius:7px;border:1px solid var(--line);background:var(--bg-2);
}
.mo-arow em{flex:1;height:5px;border-radius:3px;background:var(--line-2);opacity:.55}
.mo-check{
  position:relative;width:12px;height:12px;border-radius:3px;flex:none;
  border:1.5px solid var(--line-2);
  animation:moCheck 5s var(--ease) infinite;animation-delay:var(--d);
}
.mo-check::after{
  content:'';position:absolute;left:2px;top:2.5px;width:6px;height:3px;
  border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;
  transform:rotate(-45deg);opacity:0;
  animation:moCheckTick 5s var(--ease) infinite;animation-delay:var(--d);
}
@keyframes moCheck{0%,4%{background:transparent;border-color:var(--line-2)}10%,72%{background:#1E88FF;border-color:#1E88FF}80%,100%{background:transparent;border-color:var(--line-2)}}
@keyframes moCheckTick{0%,6%{opacity:0}12%,72%{opacity:1}80%,100%{opacity:0}}
.mo-bulk{
  position:absolute;left:14px;right:14px;bottom:12px;height:27px;border-radius:9px;
  background:var(--grad);display:flex;align-items:center;justify-content:center;gap:9px;
  opacity:0;animation:moBulk 5s var(--ease) infinite;
}
.mo-bulk i{width:28px;height:6px;border-radius:3px;background:rgba(255,255,255,.65)}
@keyframes moBulk{0%,24%{opacity:0;transform:translateY(15px)}34%,70%{opacity:1;transform:none}80%,100%{opacity:0;transform:translateY(15px)}}
.motif--internal .mo-cursor{animation:moCursorCheck 5s var(--ease) infinite}
@keyframes moCursorCheck{
  0%{left:74%;top:82%;transform:scale(1)}
  12%{left:13%;top:12%;transform:scale(1)}
  16%{transform:scale(.78)}20%{transform:scale(1)}
  30%{left:13%;top:34%;transform:scale(1)}
  34%{transform:scale(.78)}38%{transform:scale(1)}
  48%{left:13%;top:56%;transform:scale(1)}
  52%{transform:scale(.78)}56%{transform:scale(1)}
  84%,100%{left:74%;top:82%;transform:scale(1)}
}

/* ── 13 portal · sign in, the account opens ────────────────────────────── */
.mo-portal{padding:0}
.mo-login{
  position:absolute;inset:16px;display:flex;flex-direction:column;
  justify-content:center;align-items:center;gap:10px;
  animation:moLoginOut 6.5s var(--ease) infinite;
}
@keyframes moLoginOut{0%,38%{opacity:1;transform:none}50%,100%{opacity:0;transform:scale(.96)}}
.mo-lock{position:relative;width:26px;height:21px;border-radius:6px;background:var(--grad);margin-bottom:4px}
.mo-lock i{
  position:absolute;left:50%;top:-10px;translate:-50% 0;
  width:14px;height:12px;border:2.5px solid var(--blue);border-bottom:0;border-radius:99px 99px 0 0;
  animation:moUnlock 6.5s var(--ease) infinite;
}
@keyframes moUnlock{0%,28%{transform:translateY(0) rotate(0)}40%,100%{transform:translateY(-4px) rotate(10deg)}}
.mo-login .mo-field{width:72%}
.mo-login .mo-field em{animation-name:moTypeShort}
@keyframes moTypeShort{0%,8%{width:0}22%,100%{width:52%}}
.mo-login .mo-chip{height:15px;width:46%}
.mo-account{
  position:absolute;inset:16px;display:flex;flex-direction:column;gap:9px;
  opacity:0;animation:moAccountIn 6.5s var(--ease) infinite;
}
@keyframes moAccountIn{0%,44%{opacity:0;transform:translateY(11px)}56%,92%{opacity:1;transform:none}100%{opacity:0}}
.mo-acard{height:32px;border-radius:8px;background:var(--grad);opacity:.85}
.mo-acard:nth-child(2){opacity:.45}

/* ── 14 industries · a segmented control switching the pane beneath ────── */
.mo-sectors{display:flex;flex-direction:column;gap:13px}
.mo-seg{
  position:relative;display:flex;gap:4px;padding:4px;flex:none;
  border-radius:99px;border:1px solid var(--line);background:var(--bg-2);
}
.mo-seg>i{position:relative;z-index:1;flex:1;height:15px;border-radius:99px}
.mo-segpill{
  position:absolute;top:4px;left:4px;width:calc(33.33% - 4px);height:calc(100% - 8px);
  border-radius:99px;background:var(--grad);animation:moSeg 6s var(--ease) infinite;
}
@keyframes moSeg{0%,25%{transform:translateX(0)}33%,58%{transform:translateX(100%)}66%,92%{transform:translateX(200%)}100%{transform:translateX(0)}}
.mo-panes{position:relative;flex:1}
.mo-pane{
  position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;opacity:0;
  animation:moPane 6s var(--ease) infinite;animation-delay:calc(var(--i) * 2s);
}
.mo-pane>i{flex:1;border-radius:7px;background:var(--line)}
.mo-pane>i:first-child{background:var(--grad);opacity:.85}
@keyframes moPane{0%{opacity:0;transform:translateY(9px)}4%,28%{opacity:1;transform:none}33%,100%{opacity:0;transform:translateY(-6px)}}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .phero__grid{grid-template-columns:1fr}
  .motif{order:-1;max-width:460px;width:100%}
  .related,.sectors{grid-template-columns:1fr 1fr}
  .psec .phase{grid-template-columns:48px 1fr}
}
@media (max-width:720px){
  .signals{grid-template-columns:1fr}
  .related,.sectors{grid-template-columns:1fr}
  .mo-url{display:none}
}

@media (prefers-reduced-motion:reduce){
  .motif *{animation:none!important;transition:none!important}
  /* leave the interfaces legible in their resolved state */
  .mo-note,.mo-item,.mo-tkt,.mo-pin,.mo-pane,.mo-comp{opacity:1!important;transform:none!important}
  .mo-scrub em{width:62%!important}
  .mo-field em{width:44%!important}
  .mo-new{clip-path:inset(0 0 0 50%)!important}
  .mo-handle{left:50%!important}
  .mo-login,.mo-grid{opacity:0!important}
  .mo-account,.mo-form{opacity:1!important}
  .mo-sweep,.mo-spinner,.mo-site::after{display:none!important}
  .phero__h1 .ln>span{transform:none!important}
}

/* ---------- long-form prose ---------- */
.prose{max-width:68ch}
.prose > p{
  color:var(--txt-2);font-size:clamp(1rem,1.15vw,1.14rem);line-height:1.85;
}
.prose > p + p{margin-top:20px}
.pull{
  margin-top:34px;padding:24px 0 24px 28px;position:relative;
  font-family:var(--ff-d);font-weight:300;
  font-size:clamp(1.15rem,1.9vw,1.55rem);line-height:1.45;letter-spacing:-.025em;
  color:var(--txt);
}
.pull::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;border-radius:2px;
  background:var(--grad);
}

/* ---------- mistakes ---------- */
.mistakes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}
.mistakes li{
  display:flex;flex-direction:column;gap:14px;
  padding:clamp(22px,2.4vw,30px);border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--surf);
  transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.mistakes li:hover{border-color:var(--line-2);transform:translateY(-3px)}
.mistakes__x{
  position:relative;flex:none;width:22px;height:22px;border-radius:50%;
  background:rgba(248,113,113,.14);
}
.mistakes__x::before,.mistakes__x::after{
  content:'';position:absolute;inset:0;margin:auto;width:9px;height:1.6px;
  border-radius:2px;background:#F87171;
}
.mistakes__x::before{transform:rotate(45deg)}
.mistakes__x::after{transform:rotate(-45deg)}
.mistakes h3{font-size:1.05rem;margin-bottom:9px}
.mistakes p{font-size:.89rem;color:var(--txt-2);line-height:1.65}

@media (max-width:1024px){.mistakes{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.mistakes{grid-template-columns:1fr}}

/* ---------- branded icons on sub-pages ---------- */
.phero__badge{
  display:inline-grid;place-items:center;width:52px;height:52px;border-radius:15px;
  margin-bottom:20px;color:var(--blue);
  background:linear-gradient(140deg,rgba(30,136,255,.18),rgba(122,60,242,.18));
}
.phero__badge .ico{width:26px;height:26px}
.relcard__ico{display:block;color:var(--blue);margin-bottom:14px;opacity:.9;transition:transform .3s var(--ease)}
.relcard:hover .relcard__ico{transform:translateY(-2px) rotate(-5deg)}

/* breadcrumb links were 21px tall on a phone — under the 24px target minimum */
.crumbs a{min-height:28px;display:inline-flex;align-items:center}