:root{
  --bg:#FCFCFA; --ink:#0D0E12; --grey:#63666F; --line:#E8E8E3;
  --red:#F0362B; --red-soft:#FEECEA; --blue:#2554E8; --blue-soft:#EAF0FE; --green:#0E9F6E;
  --acc:#63666F; --acc-soft:#F3F4F0; --acc-ink:#0D0E12;
  --dark:#101014;
  --disp:'Bricolage Grotesque',sans-serif; --sans:'Inter',sans-serif; --mono:'JetBrains Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px}
a{color:inherit;text-decoration:none}
section{padding:120px 0}
h2{font-family:var(--disp);font-weight:800;font-size:clamp(34px,4.6vw,56px);line-height:1.04;letter-spacing:-.025em;margin-bottom:22px}
.lead{font-size:18px;color:var(--grey);max-width:56ch}

/* annotation primitives — язык продукта как язык страницы */
.ann{position:relative;display:inline-block;white-space:nowrap}
.ann::before{content:"";position:absolute;inset:-.06em -.14em;border:3px solid var(--red);border-radius:.18em;pointer-events:none}
.ann .apin{position:absolute;top:-.42em;right:-.6em;width:.62em;height:.62em;min-width:26px;min-height:26px;border-radius:50% 50% 50% 6%;background:var(--red);color:#fff;font-family:var(--disp);font-weight:800;font-size:.32em;display:flex;align-items:center;justify-content:center;transform:rotate(8deg);box-shadow:0 .1em .3em rgba(240,54,43,.4)}
.alabel{position:absolute;background:var(--red);color:#fff;font-family:var(--mono);font-size:12px;font-weight:600;padding:5px 10px;border-radius:8px;white-space:nowrap}
.alabel::after{content:"";position:absolute;width:8px;height:8px;background:var(--red);transform:rotate(45deg);left:14px;top:-4px}

/* multiplayer cursor */
.cursor{position:absolute;display:flex;align-items:flex-start;gap:2px;pointer-events:none}
.cursor svg{width:18px;height:18px}
.cursor .ctag{font-family:var(--mono);font-size:11px;font-weight:600;color:#fff;border-radius:99px;padding:3px 9px;margin-top:12px}

nav{display:flex;justify-content:space-between;align-items:center;padding:26px 0}
.logo{font-family:var(--disp);font-weight:800;font-size:22px;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.logo i{position:relative;width:25px;height:25px;border-radius:8px;background:var(--ink);flex:none;font-style:normal}
.logo i::after{content:"";position:absolute;right:-4px;top:-4px;width:11px;height:11px;border-radius:50%;background:var(--red);border:2.5px solid var(--bg)}
.navlinks{display:flex;gap:28px;align-items:center;font-size:14.5px;font-weight:500;color:var(--grey)}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:600;font-size:16px;padding:14px 26px;border-radius:99px}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#000}
.btn-line{border:1.5px solid var(--ink)}
.btn.sm{font-size:14px;padding:9px 18px}

/* hero */
.hero{padding:96px 0 60px;position:relative}
.kick{font-family:var(--mono);font-size:13px;color:var(--grey);margin-bottom:26px}
.kick b{color:var(--green);font-weight:600}
h1{font-family:var(--disp);font-weight:800;font-size:clamp(52px,8.6vw,108px);line-height:.98;letter-spacing:-.035em;max-width:12ch}
.hero .sub{margin:34px 0 38px;font-size:19px;color:var(--grey);max-width:52ch}
.hero .sub code{font-family:var(--mono);font-size:15px;background:var(--blue-soft);color:var(--blue);padding:2px 7px;border-radius:6px}
.cta-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.agents{margin-top:44px;display:flex;gap:26px;align-items:center;flex-wrap:wrap;font-size:14px;color:var(--grey)}
.agents b{color:var(--ink);font-weight:600;font-size:15px}

/* problem — вычёркивание */
.problem{border-top:1px solid var(--line)}
.strike-list{margin-top:44px;display:grid;gap:6px}
.strike{font-family:var(--disp);font-weight:600;font-size:clamp(22px,3.4vw,38px);letter-spacing:-.02em;color:#B9BAB4;position:relative;width:fit-content;line-height:1.35}
.strike::after{content:"";position:absolute;left:-.2em;right:-.2em;top:52%;height:4px;background:var(--red);border-radius:2px;transform:rotate(-1.2deg)}
.strike:nth-child(2)::after{transform:rotate(.9deg)}
.strike:nth-child(3)::after{transform:rotate(-.7deg)}
.strike:nth-child(4)::after{transform:rotate(1.1deg)}
.keep{font-family:var(--disp);font-weight:800;font-size:clamp(26px,4vw,44px);letter-spacing:-.02em;margin-top:30px}
.keep .u{box-shadow:inset 0 -0.35em var(--blue-soft)}

/* how — три огромных шага */
.how .step{display:grid;grid-template-columns:auto 1fr 1.1fr;gap:40px;align-items:center;padding:64px 0;border-top:1px solid var(--line)}
.how .step:first-of-type{border-top:none}
.bignum{font-family:var(--disp);font-weight:800;font-size:clamp(80px,10vw,150px);line-height:.8;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:2.5px var(--ink)}
.step h3{font-family:var(--disp);font-weight:800;font-size:clamp(24px,3vw,34px);letter-spacing:-.02em;margin-bottom:12px}
.step p{color:var(--grey);font-size:16px;max-width:42ch}
.shot{border-radius:20px;border:1px solid var(--line);background:#fff;box-shadow:0 30px 70px rgba(13,14,18,.09);aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;color:var(--grey);text-align:center;padding:14px;position:relative;overflow:hidden}
.shot .alabel{top:14px;left:16px;z-index:2}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}

/* context — тёмная панель, mono только внутри кода */
.ctx{background:var(--dark);color:#EDEEF2;border-radius:32px;margin:0 28px;padding:100px 0}
.ctx .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}
.ctx h2{color:#fff}
.ctx .lead{color:#9C9EA8}
.card{background:#17181D;border:1px solid #26272E;border-radius:18px;padding:26px 28px;font-family:var(--mono);font-size:13.5px;line-height:2.1}
.card .k{color:#6E7078;display:inline-block;min-width:90px}
.card .sel{color:#6C8CFF}.card .warn{color:#FF6B61}.card .ok{color:#3DD68C}
.card .hr{height:1px;background:#26272E;margin:12px 0}
.card .sent{display:flex;align-items:center;gap:9px;color:#3DD68C}
.card .sent i{width:8px;height:8px;border-radius:50%;background:#3DD68C;box-shadow:0 0 12px #3DD68C}
.loopline{margin-top:26px;font-size:15px;color:#9C9EA8}
.loopline b{color:#fff;font-weight:600}
.acc{display:flex;gap:10px;margin-top:18px}
.acc span{font-family:var(--disp);font-weight:600;font-size:14px;border-radius:99px;padding:9px 18px}
.acc .a1{background:#3DD68C;color:#06281A}
.acc .a2{border:1.5px solid #3A3B42;color:#EDEEF2}

/* board — реальный Task Board */
.board{padding-top:120px}
.board .win{margin-top:38px;border-radius:22px;border:1px solid var(--line);background:#fff;box-shadow:0 40px 90px rgba(13,14,18,.12);overflow:hidden;position:relative}
.board .bar{display:flex;align-items:center;gap:8px;padding:13px 18px;border-bottom:1px solid var(--line);background:#F6F6F2}
.board .bar s{width:11px;height:11px;border-radius:50%;background:#DADAD2;display:block}
.board .bar .u{margin-left:10px;font-family:var(--mono);font-size:12px;color:var(--grey)}
.board .win img{display:block;width:100%}
.board .alabel{top:70px;left:34px}

/* personas — три гигантские цитаты без коробок */
.who .p-row{padding:70px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:220px 1fr;gap:40px;align-items:start}
.who .p-row:first-of-type{border-top:none}
.p-role{font-family:var(--mono);font-size:13px;font-weight:600;padding-top:14px}
.p-role.r1{color:var(--blue)}.p-role.r2{color:var(--red)}.p-role.r3{color:var(--green)}
.p-quote{font-family:var(--disp);font-weight:800;font-size:clamp(26px,4vw,44px);line-height:1.08;letter-spacing:-.025em;margin-bottom:18px}
.p-body{color:var(--grey);font-size:16.5px;max-width:58ch}

/* privacy как манифест */
.priv p.manifesto{font-family:var(--disp);font-weight:600;font-size:clamp(20px,2.6vw,28px);line-height:1.4;letter-spacing:-.015em;max-width:34ch}
.priv .manifesto b{background:var(--red-soft);border-radius:4px;padding:0 .12em}
.priv ul{margin-top:34px;columns:2;gap:60px;list-style:none;max-width:760px}
.priv li{padding:10px 0;border-bottom:1px solid var(--line);font-size:15px;break-inside:avoid}
.priv li::before{content:"✓ ";color:var(--green);font-family:var(--mono);font-weight:600}

/* faq */
.faq-grid{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:0 60px;max-width:980px}
.qa{padding:26px 0;border-bottom:1px solid var(--line)}
.qa h4{font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:-.015em;margin-bottom:8px}
.qa p{color:var(--grey);font-size:15.5px;max-width:52ch}
.qa a{border-bottom:1px solid var(--grey)}

/* final */
.final{text-align:center;padding:150px 0 130px;position:relative}
.final h2{font-size:clamp(44px,7vw,84px);max-width:14ch;margin:0 auto 20px}
.final p{color:var(--grey);font-size:17px;margin-bottom:36px}

/* footer — светлый, воздушный
   .footgrid сама сетка колонок объявлена в use-case.css (сайт-широкое правило,
   см. комментарий там) — не заводи здесь свою копию */
footer{border-top:1px solid var(--line);padding:74px 0 40px}
.footbrand .logo{margin-bottom:16px}
.footbrand p{color:var(--grey);font-size:15px;max-width:300px;margin-bottom:22px;line-height:1.55}
.footcol h5{font-family:var(--disp);font-weight:800;font-size:14.5px;margin-bottom:16px;letter-spacing:-.01em}
.footcol a{display:block;color:var(--grey);font-size:15px;margin-bottom:12px}
.footcol a:hover{color:var(--ink)}
.footbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;border-top:1px solid var(--line);margin-top:54px;padding-top:26px;font-family:var(--mono);font-size:13px;color:var(--grey)}
.footbar a:hover{color:var(--ink)}

@media(max-width:880px){
  .how .step{grid-template-columns:1fr}
  .ctx .wrap{grid-template-columns:1fr}
  .who .p-row{grid-template-columns:1fr;gap:10px}
  .priv ul{columns:1}
  .faq-grid{grid-template-columns:1fr}
  .cursor{display:none}
  .navlinks a:not(.btn){display:none}
}
@media(prefers-reduced-motion:no-preference){
  .apin{animation:drop .5s .4s cubic-bezier(.2,1.4,.4,1) backwards}
  @keyframes drop{from{transform:rotate(8deg) translateY(-18px);opacity:0}}
}

/* ===== HOA-05 · MCP pipeline (embedded component, prefix .hoa5) ===== */
.hoa5{
  --hoa5-T:9s;
  --hoa5-ink:#0D0E12; --hoa5-grey:#63666F; --hoa5-line:#E8E8E3; --hoa5-card:#fff;
  --hoa5-red:#F0362B; --hoa5-blue:#2554E8; --hoa5-green:#0E9F6E;
  --hoa5-dark:#17181D; --hoa5-dline:#26272E;
  --hoa5-sans:'Inter',sans-serif; --hoa5-mono:'JetBrains Mono',monospace;
  max-width:880px;margin:0 auto;font-family:var(--hoa5-sans);color:var(--hoa5-ink);
}
.hoa5 *{margin:0;padding:0;box-sizing:border-box}
.hoa5-row{position:relative;display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:64px;align-items:center}
.hoa5-track{position:absolute;left:12%;right:12%;top:50%;height:2px;background:repeating-linear-gradient(90deg,var(--hoa5-line) 0 8px,transparent 8px 16px);z-index:0}
.hoa5-pk{position:absolute;top:50%;left:12%;width:12px;height:12px;border-radius:50%;background:var(--hoa5-blue);box-shadow:0 0 0 5px rgba(37,84,232,.15),0 0 16px rgba(37,84,232,.5);transform:translate(-50%,-50%);opacity:0;animation:hoa5-pk var(--hoa5-T) infinite;z-index:2}
@keyframes hoa5-pk{
  0%,6%{opacity:0;left:12%}
  9%{opacity:1}
  30%{left:50%}
  33%{opacity:0;left:50%}
  38%{opacity:1;left:50%}
  58%{left:88%;opacity:1}
  61%,100%{opacity:0;left:88%}
}
.hoa5-pk.back{background:var(--hoa5-green);box-shadow:0 0 0 5px rgba(14,159,110,.15),0 0 16px rgba(14,159,110,.5);animation-name:hoa5-pkb}
@keyframes hoa5-pkb{
  0%,70%{opacity:0;left:88%}
  73%{opacity:1}
  92%{left:12%;opacity:1}
  95%,100%{opacity:0;left:12%}
}
.hoa5-node{position:relative;background:var(--hoa5-card);border:1px solid var(--hoa5-line);border-radius:16px;padding:18px;text-align:center;z-index:1;transition:none}
.hoa5-node h4{font-size:13.5px;font-weight:700;margin-top:10px}
.hoa5-node p{font-family:var(--hoa5-mono);font-size:10.5px;color:var(--hoa5-grey);margin-top:4px}
.hoa5-n1{animation:hoa5-n1 var(--hoa5-T) infinite}
.hoa5-n2{animation:hoa5-n2 var(--hoa5-T) infinite}
.hoa5-n3{animation:hoa5-n3 var(--hoa5-T) infinite}
@keyframes hoa5-n1{0%,5%{box-shadow:none}8%{box-shadow:0 0 0 3px rgba(240,54,43,.18),0 14px 34px rgba(13,14,18,.08)}14%{box-shadow:none}90%{box-shadow:none}93%{box-shadow:0 0 0 3px rgba(14,159,110,.2)}98%,100%{box-shadow:none}}
@keyframes hoa5-n2{0%,29%{box-shadow:none}33%{box-shadow:0 0 0 3px rgba(37,84,232,.18),0 14px 34px rgba(13,14,18,.08)}40%{box-shadow:none}100%{box-shadow:none}}
@keyframes hoa5-n3{0%,57%{box-shadow:none}61%{box-shadow:0 0 0 3px rgba(14,159,110,.2),0 14px 34px rgba(13,14,18,.08)}72%{box-shadow:none}100%{box-shadow:none}}
.hoa5-minipage{width:74px;height:52px;border:1px solid var(--hoa5-line);border-radius:9px;margin:0 auto;position:relative;background:#FBFBF8}
.hoa5-minipage i{position:absolute;left:8px;top:8px;right:8px;height:6px;border-radius:3px;background:#F0F0EA;font-style:normal}
.hoa5-minipage b{position:absolute;left:26px;top:22px;width:20px;height:20px;border-radius:50% 50% 50% 4px;background:var(--hoa5-red);color:#fff;font-family:var(--hoa5-mono);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}
.hoa5-term{width:150px;margin:0 auto;background:var(--hoa5-dark);border:1px solid var(--hoa5-dline);border-radius:10px;padding:9px 11px;font-family:var(--hoa5-mono);font-size:8.5px;line-height:1.9;text-align:left;color:#B9BFCC}
.hoa5-term .sel{color:#6C8CFF}.hoa5-term .warn{color:#FF6B61}
.hoa5-agent{width:52px;height:52px;border-radius:14px;background:var(--hoa5-ink);color:#fff;font-family:var(--hoa5-mono);font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto;position:relative}
.hoa5-fixed{position:absolute;top:-12px;right:-34px;font-family:var(--hoa5-mono);font-size:10px;font-weight:600;color:#fff;background:var(--hoa5-green);border-radius:99px;padding:4px 10px;opacity:0;transform:translateY(6px);animation:hoa5-fixed var(--hoa5-T) infinite}
@keyframes hoa5-fixed{
  0%,62%{opacity:0;transform:translateY(6px) scale(.9)}
  66%{opacity:1;transform:none}
  90%{opacity:1}
  95%,100%{opacity:0}
}
.hoa5-proto{position:absolute;left:50%;top:calc(50% + 16px);transform:translateX(-50%);font-family:var(--hoa5-mono);font-size:10px;color:var(--hoa5-grey);letter-spacing:.08em;z-index:1;background:var(--bg);padding:0 8px}
.hoa5-cap{position:relative;height:22px;margin-top:34px;text-align:center;font-family:var(--hoa5-mono);font-size:12px}
.hoa5-cap span{position:absolute;left:0;right:0;opacity:0}
.hoa5-c1{color:var(--hoa5-blue);animation:hoa5-c1 var(--hoa5-T) infinite}
.hoa5-c2{color:var(--hoa5-green);animation:hoa5-c2 var(--hoa5-T) infinite}
@keyframes hoa5-c1{0%,8%{opacity:0}12%{opacity:1}58%{opacity:1}62%,100%{opacity:0}}
@keyframes hoa5-c2{0%,64%{opacity:0}68%{opacity:1}92%{opacity:1}96%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .hoa5-pk{display:none}
  .hoa5-n1,.hoa5-n2,.hoa5-n3{animation:none}
  .hoa5-fixed{opacity:1;transform:none;animation:none}
  .hoa5-c1{display:none}
  .hoa5-c2{opacity:1;animation:none}
}
@media(max-width:720px){
  .hoa5-row{grid-template-columns:1fr;gap:30px}
  .hoa5-track,.hoa5-pk,.hoa5-proto{display:none}
}
/* d1-scoped polish for the embed */
.mcp .hoa5{margin-top:56px}
.mcp .hoa5-node h4{font-family:var(--disp);letter-spacing:-.01em;font-size:15px}

/* ===== HPT · step-1 "Point" animation — product-faithful pin + popover =====
   Palette/geometry mirror the extension content script (shared/tokens.ts +
   content/pins.ts): navy #2e3d62, severity red #ef4444, pin 28px teardrop
   rotate(45°), popover white/#e5e7eb r14 with the real shadow. */
.hpt{
  --hp-T:10s;
  --hp-ink:#111827; --hp-mut:#6b7280; --hp-sub:#9ca3af; --hp-line:#e5e7eb;
  --hp-soft:#f9fafb; --hp-navy:#2e3d62; --hp-red:#ef4444;
  --hp-sans:'Inter',sans-serif; --hp-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  position:absolute;inset:0;font-family:var(--hp-sans);text-align:left;
}
.hpt-l1{position:absolute;left:28px;top:30px;width:38%;height:13px;border-radius:7px;background:#EFEFEA}
.hpt-l2{position:absolute;left:28px;top:55px;width:24%;height:9px;border-radius:5px;background:#F4F4EF}
.hpt-img{position:absolute;left:28px;top:84px;width:44%;bottom:96px;border-radius:12px;background:linear-gradient(135deg,#F6F6F2,#ECECE6)}
.hpt-cta{position:absolute;left:28px;bottom:34px;padding:11px 24px;border-radius:10px;background:#DFE3EA;color:#fff;font-weight:600;font-size:13.5px;line-height:1}
.hpt-outline{position:absolute;left:22px;bottom:28px;width:134px;height:48px;border:2px solid var(--hp-navy);background:rgba(46,61,98,.12);opacity:0;animation:hpt-out var(--hp-T) infinite}
@keyframes hpt-out{0%,14%{opacity:0}18%,30%{opacity:1}36%,100%{opacity:0}}
.hpt-pin{position:absolute;left:136px;bottom:56px;width:28px;height:28px;border-radius:50% 50% 50% 4px;background:var(--hp-red);border:2px solid #fff;box-shadow:0 4px 12px rgba(15,23,42,.2);transform:rotate(45deg);display:flex;align-items:center;justify-content:center;opacity:0;animation:hpt-pin var(--hp-T) infinite}
.hpt-pin span{transform:rotate(-45deg);color:#fff;font-size:10px;font-weight:700;line-height:1}
.hpt-pin::after{content:"";position:absolute;inset:-2px;border-radius:inherit;animation:hpt-ring 1.8s ease-out infinite}
@keyframes hpt-pin{0%,25%{opacity:0;transform:rotate(45deg) translate(-10px,-10px) scale(.5)}31%{opacity:1;transform:rotate(45deg) scale(1.12)}34%{transform:rotate(45deg) scale(1)}96%{opacity:1}100%{opacity:0}}
@keyframes hpt-ring{0%{box-shadow:0 0 0 0 rgba(239,68,68,.5)}100%{box-shadow:0 0 0 10px rgba(239,68,68,0)}}
.hpt-pop{position:absolute;right:16px;top:26px;width:252px;background:#fff;border:1px solid var(--hp-line);border-radius:14px;box-shadow:0 16px 40px rgba(17,24,39,.16);padding:12px 14px;opacity:0;animation:hpt-pop var(--hp-T) infinite}
@keyframes hpt-pop{0%,33%{opacity:0;transform:translateY(8px) scale(.97)}38%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
.hpt-sev{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:#fff;background:var(--hp-red);border-radius:999px;padding:4px 10px;line-height:1}
.hpt-sev i{font-style:normal;font-size:8px;opacity:.85}
.hpt-body{font-size:12.5px;color:var(--hp-ink);line-height:1.45;margin-top:9px;opacity:0;animation:hpt-el var(--hp-T) infinite;animation-delay:0s}
.hpt-author{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:11px;color:var(--hp-mut);opacity:0;animation:hpt-el2 var(--hp-T) infinite}
.hpt-author i{width:17px;height:17px;border-radius:50%;background:var(--hp-navy);color:#fff;font-style:normal;font-size:8px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none}
.hpt-chip{display:flex;justify-content:space-between;gap:8px;margin-top:10px;background:var(--hp-soft);border:1px solid var(--hp-line);border-radius:8px;padding:7px 9px;font-family:var(--hp-mono);font-size:10px;color:var(--hp-mut);opacity:0;animation:hpt-el3 var(--hp-T) infinite}
.hpt-chip b{font-weight:400;color:var(--hp-sub);flex:none}
.hpt-reply{display:flex;align-items:center;gap:7px;margin-top:10px;opacity:0;animation:hpt-el4 var(--hp-T) infinite}
.hpt-reply span{flex:1;font-size:11.5px;color:var(--hp-sub);border:1px solid var(--hp-line);border-radius:999px;padding:7px 12px;background:var(--hp-soft);line-height:1}
.hpt-reply b{width:26px;height:26px;border-radius:50%;background:var(--hp-navy);color:#fff;font-weight:400;font-size:12px;display:flex;align-items:center;justify-content:center;flex:none}
@keyframes hpt-el {0%,42%{opacity:0;transform:translateY(4px)}47%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes hpt-el2{0%,50%{opacity:0;transform:translateY(4px)}55%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes hpt-el3{0%,57%{opacity:0;transform:translateY(4px)}62%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes hpt-el4{0%,64%{opacity:0;transform:translateY(4px)}69%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
.hpt-cur{position:absolute;right:34%;bottom:12%;opacity:0;animation:hpt-cur var(--hp-T) infinite;z-index:3}
.hpt-cur svg{width:17px;height:17px;fill:var(--hp-ink)}
@keyframes hpt-cur{
  0%{opacity:0;transform:translate(120px,10px)}
  6%{opacity:1}
  18%{transform:translate(-192px,0px)}
  26%{transform:translate(-192px,0px) scale(.85)}
  29%{transform:translate(-192px,0px) scale(1)}
  40%{transform:translate(-80px,60px);opacity:1}
  46%,100%{opacity:0;transform:translate(-80px,60px)}
}
@media(prefers-reduced-motion:reduce){
  .hpt-outline,.hpt-cur{display:none}
  .hpt-pin,.hpt-pop,.hpt-body,.hpt-author,.hpt-chip,.hpt-reply{animation:none;opacity:1;transform:rotate(0)}
  .hpt-pin{transform:rotate(45deg)}
  .hpt-pin::after{animation:none}
}

/* ===== HBD · Task Board live mock — mirrors web/app (Board/SiteList/CommentCard) =====
   52px top bar, 212px→190px sidebar, comments column 40%, severity groups,
   unread amber bar → AI ✓ resolved → ✓ Accept. Palette = shared/tokens.ts. */
.hbd{
  --hb-T:12s;
  --hb-ink:#111827; --hb-mut:#6b7280; --hb-sub:#9ca3af;
  --hb-line:#e5e7eb; --hb-bgm:#f3f4f6; --hb-soft:#f9fafb;
  --hb-navy:#2e3d62; --hb-red:#ef4444; --hb-redt:#dc2626;
  --hb-grn:#10b981; --hb-grnt:#047857; --hb-amber:#F5A623;
  --hb-sel:#eef1f7; --hb-unread:#fffdf6;
  --hb-sans:'Inter',sans-serif; --hb-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  position:relative;height:472px;background:#fff;font-family:var(--hb-sans);color:var(--hb-ink);text-align:left;overflow:hidden;
}
.hbd-top{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;border-bottom:1px solid var(--hb-line);font-size:12px}
.hbd-mark{position:relative;width:21px;height:21px;border-radius:6px;background:#0F1320;flex:none}
.hbd-mark::before{content:"";position:absolute;left:5px;top:5px;width:11px;height:11px;border:1.6px solid #fff;border-radius:2px}
.hbd-mark::after{content:"";position:absolute;right:-2.5px;top:-2.5px;width:7px;height:7px;border-radius:50%;background:var(--hb-amber)}
.hbd-word{font-size:13px;font-weight:600}
.hbd-origin{font-size:12.5px;font-weight:600;margin-left:4px}
.hbd-pill{border-radius:999px;background:var(--hb-bgm);padding:2px 7px;font-size:10.5px;font-weight:600;color:var(--hb-mut);line-height:1.4}
.hbd-role{border-radius:999px;background:rgba(16,185,129,.15);color:var(--hb-grnt);padding:2px 8px;font-size:10.5px;font-weight:600;line-height:1.4}
.hbd-sp{flex:1}
.hbd-btn{border:1px solid var(--hb-line);border-radius:8px;padding:5px 11px;font-size:11.5px;font-weight:600;color:var(--hb-ink);line-height:1;white-space:nowrap}
.hbd-btn i{font-style:normal;font-size:9px;font-weight:700;color:var(--hb-mut);border:1px solid var(--hb-line);border-radius:4px;padding:1px 4px;margin-left:3px}
.hbd-btn.pri{background:var(--hb-navy);border-color:var(--hb-navy);color:#fff}
.hbd-body{display:flex;height:calc(100% - 46px)}
.hbd-side{width:186px;flex:none;border-right:1px solid var(--hb-line);padding:10px;overflow:hidden}
.hbd-side h6{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--hb-sub);margin:8px 6px 5px}
.hbd-side h6:first-child{margin-top:2px}
.hbd-site{display:flex;align-items:center;gap:7px;border-radius:7px;padding:6px 8px;font-size:12px;color:var(--hb-ink)}
.hbd-site i{width:6px;height:6px;border-radius:50%;background:var(--hb-grn);flex:none}
.hbd-site i.b{background:var(--hb-navy)}
.hbd-site em{font-style:normal;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbd-site .hbd-pill{padding:1px 6px;font-size:10px}
.hbd-site.on{background:var(--hb-bgm);font-weight:600;box-shadow:inset 3px 0 0 var(--hb-navy)}
.hbd-prev{flex:1;min-width:0;background:var(--hb-soft);position:relative;overflow:hidden}
.hbd-page{position:absolute;inset:22px;background:#fff;border:1px solid var(--hb-line);border-radius:10px;box-shadow:0 4px 12px rgba(15,23,42,.06);overflow:hidden}
.hbd-page .pl1{position:absolute;left:20px;top:22px;width:44%;height:11px;border-radius:6px;background:#EFEFEA}
.hbd-page .pl2{position:absolute;left:20px;top:43px;width:30%;height:8px;border-radius:4px;background:#F4F4EF}
.hbd-page .pim{position:absolute;left:20px;right:20px;top:66px;height:34%;border-radius:8px;background:linear-gradient(135deg,#F6F6F2,#ECECE6)}
.hbd-page .pcta{position:absolute;left:20px;bottom:26px;width:118px;height:34px;border-radius:8px;background:#DFE3EA}
.hbd-spot{position:absolute;left:14px;bottom:20px;width:130px;height:46px;border:2px solid var(--hb-amber);border-radius:3px;box-shadow:0 0 0 9999px rgba(15,19,32,.18)}
.hbd-ppin{position:absolute;left:132px;bottom:52px;width:24px;height:24px;border-radius:50% 50% 50% 4px;background:var(--hb-red);border:2px solid #fff;box-shadow:0 4px 12px rgba(15,23,42,.2);transform:rotate(45deg);display:flex;align-items:center;justify-content:center}
.hbd-ppin span{transform:rotate(-45deg);color:#fff;font-size:8.5px;font-weight:700}
.hbd-ppin u{position:absolute;top:-6px;right:-6px;width:14px;height:14px;border-radius:50%;background:var(--hb-navy);border:2px solid #fff;color:#fff;font-size:6px;font-weight:800;text-decoration:none;display:flex;align-items:center;justify-content:center;transform:rotate(-45deg);opacity:0;animation:hbd-ppin var(--hb-T) infinite}
@keyframes hbd-ppin{0%,45%{opacity:0;transform:rotate(-45deg) scale(.5)}49%,95%{opacity:1;transform:rotate(-45deg) scale(1)}98%,100%{opacity:0}}
.hbd-com{flex:0 0 42%;border-left:1px solid var(--hb-line);display:flex;flex-direction:column;overflow:hidden}
.hbd-comhead{display:flex;align-items:center;gap:7px;padding:10px 12px;border-bottom:1px solid var(--hb-line)}
.hbd-comhead b{font-size:13.5px;font-weight:600}
.hbd-comhead span{font-size:12px;color:var(--hb-sub)}
.hbd-comhead .md{margin-left:auto;border:1px solid var(--hb-line);border-radius:7px;padding:3px 9px;font-size:10.5px;font-weight:600;color:var(--hb-mut)}
.hbd-group{display:flex;align-items:center;gap:7px;padding:10px 12px 4px;font-size:10px;font-weight:700;letter-spacing:.05em;color:var(--hb-sub)}
.hbd-group i{width:9px;height:9px;border-radius:50%;background:var(--hb-red);flex:none}
.hbd-group i.y{background:#f59e0b}
.hbd-group b{font-weight:400}
.hbd-card{position:relative;border-top:1px solid var(--hb-line);padding:8px 12px 9px;font-size:11px}
.hbd-crow{display:flex;align-items:center;gap:6px;color:var(--hb-sub);font-size:10px}
.hbd-sev{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;color:var(--hb-redt)}
.hbd-sev i{width:7px;height:7px;border-radius:50%;background:var(--hb-red)}
.hbd-sev.y{color:#b45309}.hbd-sev.y i{background:#f59e0b}
.hbd-kind{border-radius:4px;background:var(--hb-bgm);padding:1px 5px;font-size:8.5px;letter-spacing:.05em;text-transform:uppercase}
.hbd-date{margin-left:auto;white-space:nowrap}
.hbd-new{border-radius:999px;background:var(--hb-amber);color:#3a2c06;padding:1px 6px;font-size:8px;font-weight:800;text-transform:uppercase}
.hbd-ai{border-radius:4px;background:var(--hb-sel);color:var(--hb-navy);padding:1px 6px;font-size:9px;font-weight:600;white-space:nowrap}
.hbd-acc{border-radius:4px;background:#ecfdf5;color:var(--hb-grnt);padding:1px 6px;font-size:9px;font-weight:600;white-space:nowrap}
.hbd-title{margin-top:4px;font-size:12px;font-weight:600;color:var(--hb-ink);line-height:1.35;padding-right:52px}
.hbd-thumb{position:absolute;right:12px;top:26px;width:42px;height:42px;border-radius:7px;border:1px solid var(--hb-line);background:linear-gradient(135deg,#F1F1EC,#E2E2DB)}
.hbd-meta{display:flex;align-items:center;gap:5px;margin-top:5px;font-size:10px;color:var(--hb-sub)}
.hbd-meta i{width:14px;height:14px;border-radius:50%;background:var(--hb-navy);color:#fff;font-style:normal;font-size:7px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none}
.hbd-meta code{font-family:var(--hb-mono);font-size:9.5px;background:var(--hb-soft);border-radius:4px;padding:1px 5px;color:var(--hb-mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbd-foot{display:flex;gap:10px;margin-top:6px;font-size:10.5px;font-weight:600;color:var(--hb-navy)}
.hbd-foot span{color:var(--hb-mut)}
/* animated card lifecycle: new → AI resolved → accepted */
.hbd-card.anim{animation:hbd-card var(--hb-T) infinite}
@keyframes hbd-card{
  0%,3%{opacity:0;transform:translateY(-6px);background:var(--hb-unread);box-shadow:inset 3px 0 0 var(--hb-amber)}
  7%{opacity:1;transform:none}
  38%{background:var(--hb-unread);box-shadow:inset 3px 0 0 var(--hb-amber)}
  46%,62%{background:#fff;box-shadow:inset 3px 0 0 transparent}
  66%,95%{background:#fff;box-shadow:inset 3px 0 0 transparent;opacity:1}
  99%,100%{opacity:0;transform:translateY(-6px)}
}
.hbd-card.anim .hbd-new{animation:hbd-new var(--hb-T) infinite}
@keyframes hbd-new{0%,38%{opacity:1}44%,100%{opacity:0}}
.hbd-thread{display:flex;gap:6px;align-items:flex-start;margin-top:7px;max-height:0;opacity:0;overflow:hidden;animation:hbd-thread var(--hb-T) infinite}
.hbd-thread i{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--hb-navy);color:var(--hb-navy);font-style:normal;font-size:8px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none;background:#fff}
.hbd-thread p{font-size:10.5px;color:var(--hb-ink);line-height:1.4}
@keyframes hbd-thread{0%,38%{max-height:0;opacity:0}44%,95%{max-height:44px;opacity:1}99%,100%{max-height:0;opacity:0}}
.hbd-badge-ai{opacity:0;animation:hbd-bai var(--hb-T) infinite}
@keyframes hbd-bai{0%,42%{opacity:0}47%,62%{opacity:1}66%,100%{opacity:0}}
.hbd-badge-acc{opacity:0;animation:hbd-bacc var(--hb-T) infinite;position:absolute;left:0;top:0}
@keyframes hbd-bacc{0%,64%{opacity:0}68%,95%{opacity:1}99%,100%{opacity:0}}
.hbd-badges{position:relative}
.hbd-actions{display:flex;gap:6px;margin-top:7px;max-height:0;opacity:0;overflow:hidden;animation:hbd-act var(--hb-T) infinite}
.hbd-actions b{border-radius:7px;background:var(--hb-grn);color:#fff;font-size:10.5px;font-weight:600;padding:5px 12px;line-height:1;box-shadow:0 1px 2px rgba(15,23,42,.08)}
.hbd-actions span{border-radius:7px;border:1px solid var(--hb-line);color:var(--hb-mut);font-size:10.5px;font-weight:600;padding:5px 12px;line-height:1;background:#fff}
@keyframes hbd-act{
  0%,42%{max-height:0;opacity:0}
  48%,60%{max-height:30px;opacity:1}
  62%{max-height:30px;opacity:1}
  68%,100%{max-height:0;opacity:0}
}
.hbd-actions.pressed b{animation:hbd-press var(--hb-T) infinite}
@keyframes hbd-press{0%,55%{background:var(--hb-grn);transform:none}58%{background:var(--hb-grnt);transform:scale(.96)}61%,100%{background:var(--hb-grn);transform:none}}
.hbd-cur{position:absolute;right:15%;bottom:18%;z-index:4;opacity:0;animation:hbd-cur var(--hb-T) infinite;pointer-events:none}
.hbd-cur svg{width:16px;height:16px;fill:var(--hb-ink)}
@keyframes hbd-cur{
  0%,44%{opacity:0;transform:translate(30px,60px)}
  49%{opacity:1}
  55%{transform:translate(-249px,-178px)}
  57%{transform:translate(-249px,-178px) scale(.85)}
  60%{transform:translate(-249px,-178px) scale(1);opacity:1}
  66%,100%{opacity:0;transform:translate(-220px,-150px)}
}
@media(prefers-reduced-motion:reduce){
  .hbd-card.anim,.hbd-card.anim .hbd-new,.hbd-thread,.hbd-badge-ai,.hbd-badge-acc,.hbd-actions,.hbd-actions.pressed b,.hbd-ppin u{animation:none}
  .hbd-card.anim{background:#fff}
  .hbd-thread{max-height:44px;opacity:1}
  .hbd-badge-ai,.hbd-ppin u{opacity:1}
  .hbd-actions{max-height:30px;opacity:1}
  .hbd-new,.hbd-badge-acc,.hbd-cur{display:none}
}
@media(max-width:880px){
  .hbd-prev{display:none}
  .hbd-com{flex:1}
  .hbd-side{width:150px}
}

/* ===== HCX · step-2 "context comes along" — Details card assembles itself =====
   Mirrors the web CommentCard Details block: 9px uppercase section labels,
   mono values, environment grid, console error in dangerText. */
.hcx{
  --hc-T:9s;
  --hc-ink:#111827; --hc-mut:#6b7280; --hc-sub:#9ca3af; --hc-line:#e5e7eb;
  --hc-soft:#f9fafb; --hc-navy:#2e3d62; --hc-red:#ef4444; --hc-redt:#dc2626;
  --hc-sans:'Inter',sans-serif; --hc-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  position:absolute;inset:0;font-family:var(--hc-sans);text-align:left;
}
.hcx-card{position:absolute;left:26px;right:26px;top:30px;background:#fff;border:1px solid var(--hc-line);border-radius:14px;box-shadow:0 16px 40px rgba(17,24,39,.12);padding:13px 15px}
.hcx-top{display:flex;align-items:center;gap:7px;font-size:10px;color:var(--hc-sub);padding-right:52px}
.hcx-kind{border-radius:4px;background:#f3f4f6;padding:1px 6px;font-size:8.5px;letter-spacing:.05em;text-transform:uppercase}
.hcx-sev{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;color:var(--hc-redt)}
.hcx-sev i{width:7px;height:7px;border-radius:50%;background:var(--hc-red)}
.hcx-date{margin-left:auto}
.hcx-title{margin-top:5px;font-size:13px;font-weight:600;color:var(--hc-ink);padding-right:52px}
.hcx-author{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:10.5px;color:var(--hc-sub)}
.hcx-author i{width:15px;height:15px;border-radius:50%;background:var(--hc-navy);color:#fff;font-style:normal;font-size:7px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.hcx-thumb{position:absolute;right:15px;top:13px;width:42px;height:42px;border-radius:7px;border:1px solid var(--hc-line);background:linear-gradient(135deg,#F1F1EC,#E2E2DB)}
.hcx-sec{margin-top:9px;opacity:0}
.hcx-sec h6{font-size:8.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--hc-sub);margin-bottom:3px}
.hcx-sec code{display:block;font-family:var(--hc-mono);font-size:10px;color:var(--hc-mut);line-height:1.5}
.hcx-sec code.err{color:var(--hc-redt)}
.hcx-sec dl{display:grid;grid-template-columns:64px 1fr;gap:1px 10px;font-size:10px;line-height:1.5}
.hcx-sec dt{color:var(--hc-sub)}
.hcx-sec dd{font-family:var(--hc-mono);color:var(--hc-mut)}
.hcx-sec.s1{animation:hcx-s1 var(--hc-T) infinite}
.hcx-sec.s2{animation:hcx-s2 var(--hc-T) infinite}
.hcx-sec.s3{animation:hcx-s3 var(--hc-T) infinite}
.hcx-sec.s4{animation:hcx-s4 var(--hc-T) infinite}
@keyframes hcx-s1{0%,12%{opacity:0;transform:translateY(5px);background:transparent}17%{opacity:1;transform:none;background:#fffdf6}24%{background:transparent}93%{opacity:1}98%,100%{opacity:0}}
@keyframes hcx-s2{0%,25%{opacity:0;transform:translateY(5px);background:transparent}30%{opacity:1;transform:none;background:#fffdf6}37%{background:transparent}93%{opacity:1}98%,100%{opacity:0}}
@keyframes hcx-s3{0%,38%{opacity:0;transform:translateY(5px);background:transparent}43%{opacity:1;transform:none;background:#fffdf6}50%{background:transparent}93%{opacity:1}98%,100%{opacity:0}}
@keyframes hcx-s4{0%,53%{opacity:0;transform:translateY(5px);background:transparent}58%{opacity:1;transform:none;background:#fffdf6}65%{background:transparent}93%{opacity:1}98%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.hcx-sec{animation:none;opacity:1;transform:none}}

/* ===== HCN · step-3 "your agent takes it" — one command, typed & copied =====
   Mirrors the Connect-agent menu: mono command box, per-client rows, Copy. */
.hcn{
  --hn-T:9s;
  --hn-ink:#111827; --hn-mut:#6b7280; --hn-sub:#9ca3af; --hn-line:#e5e7eb;
  --hn-soft:#f9fafb; --hn-navy:#2e3d62; --hn-grn:#10b981; --hn-grnt:#047857;
  --hn-sans:'Inter',sans-serif; --hn-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  position:absolute;inset:0;font-family:var(--hn-sans);text-align:left;
}
.hcn-card{position:absolute;left:26px;right:26px;top:26px;background:#fff;border:1px solid var(--hn-line);border-radius:14px;box-shadow:0 16px 40px rgba(17,24,39,.12);padding:12px 14px}
.hcn-row{display:flex;align-items:center;gap:8px;padding:7px 0}
.hcn-row + .hcn-row{border-top:1px solid var(--hn-line)}
.hcn-row b{font-size:12px;font-weight:600;color:var(--hn-ink)}
.hcn-row code{font-family:var(--hn-mono);font-size:9.5px;color:var(--hn-sub)}
.hcn-ic{width:22px;height:22px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:10px;color:#fff;flex:none}
.hcn-ic.cl{background:#D97757}
.hcn-ic.cu{background:#111}
.hcn-ic.cx{background:#0ea37f}
.hcn-copy{margin-left:auto;position:relative;font-size:11px;font-weight:600}
.hcn-copy em,.hcn-copy u{font-style:normal;text-decoration:none;border:1px solid var(--hn-line);border-radius:7px;padding:4px 10px;background:#fff;color:var(--hn-navy)}
.hcn-copy u{position:absolute;right:0;top:-4px;color:var(--hn-grnt);background:#ecfdf5;border-color:#c8ebdc;white-space:nowrap;opacity:0;animation:hcn-copied var(--hn-T) infinite}
.hcn-copy em{animation:hcn-copy var(--hn-T) infinite;display:inline-block}
@keyframes hcn-copy{0%,60%{opacity:1}64%,96%{opacity:0}100%{opacity:1}}
@keyframes hcn-copied{0%,60%{opacity:0;transform:scale(.94)}64%,93%{opacity:1;transform:none}97%,100%{opacity:0}}
.hcn-copy2{margin-left:auto;font-size:10.5px;font-weight:600;color:var(--hn-mut)}
.hcn-cmd{margin:2px 0 9px;background:var(--hn-soft);border:1px solid var(--hn-line);border-radius:9px;padding:8px 10px;font-family:var(--hn-mono);font-size:9.5px;line-height:1.65;color:var(--hn-ink)}
.hcn-cmd span{display:block;overflow:hidden;white-space:nowrap;width:0}
.hcn-cmd .t1{animation:hcn-t1 var(--hn-T) infinite}
.hcn-cmd .t2{animation:hcn-t2 var(--hn-T) infinite}
.hcn-cmd .t3{animation:hcn-t3 var(--hn-T) infinite}
@keyframes hcn-t1{0%,5%{width:0}20%,96%{width:44ch}100%{width:44ch}}
@keyframes hcn-t2{0%,20%{width:0}35%,96%{width:46ch}100%{width:46ch}}
@keyframes hcn-t3{0%,35%{width:0}50%,96%{width:45ch}100%{width:45ch}}
.hcn-status{display:flex;align-items:center;gap:6px;margin-top:9px;font-family:var(--hn-mono);font-size:9.5px;color:var(--hn-grnt);opacity:0;animation:hcn-st var(--hn-T) infinite}
.hcn-status i{width:7px;height:7px;border-radius:50%;background:var(--hn-grn);box-shadow:0 0 8px rgba(16,185,129,.6)}
@keyframes hcn-st{0%,68%{opacity:0}73%,94%{opacity:1}98%,100%{opacity:0}}
.hcn-cur{position:absolute;right:20%;bottom:14%;z-index:3;opacity:0;animation:hcn-cur var(--hn-T) infinite}
.hcn-cur svg{width:16px;height:16px;fill:var(--hn-ink)}
@keyframes hcn-cur{
  0%,48%{opacity:0;transform:translate(60px,60px)}
  53%{opacity:1}
  58%{transform:translate(28px,-203px)}
  61%{transform:translate(28px,-203px) scale(.85)}
  64%{transform:translate(28px,-203px) scale(1);opacity:1}
  70%,100%{opacity:0;transform:translate(46px,-185px)}
}
@media(prefers-reduced-motion:reduce){
  .hcn-cmd span{animation:none}
  .hcn-cmd .t1{width:44ch}.hcn-cmd .t2{width:46ch}.hcn-cmd .t3{width:45ch}
  .hcn-copy em,.hcn-copy u{animation:none}
  .hcn-copy u{display:none}
  .hcn-status{animation:none;opacity:1}
  .hcn-cur{display:none}
}

/* ===== /for/* subpage additions ===== */
.subhero{padding:84px 0 64px;position:relative}
.eyebrow{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:26px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:26px;height:3px;background:currentColor;border-radius:2px;flex:none}
.eyebrow.dev{color:var(--blue)} .eyebrow.des{color:var(--red)} .eyebrow.team{color:var(--green)}
.subhero h1{font-size:clamp(44px,7.2vw,92px)}
.subhero .sub{margin:30px 0 36px;font-size:19px;color:var(--grey);max-width:54ch}
.subhero .sub code{font-family:var(--mono);font-size:15px;background:var(--blue-soft);color:var(--blue);padding:2px 7px;border-radius:6px}

/* moment = how-step without the big number */
.moment{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:center;padding:64px 0;border-top:1px solid var(--line)}
.moments .moment:first-of-type{border-top:none}
.moment h3{font-family:var(--disp);font-weight:800;font-size:clamp(24px,3vw,34px);letter-spacing:-.02em;margin-bottom:12px}
.moment p{color:var(--grey);font-size:16px;max-width:44ch}
.moment.flip>.shot{order:-1}

/* cross-persona cards */
.xwho{border-top:1px solid var(--line)}
.xgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:38px}
.xcard{border:1px solid var(--line);border-radius:18px;padding:26px 28px;display:block;transition:border-color .15s}
.xcard:hover{border-color:var(--ink)}
.xcard .xk{font-family:var(--mono);font-size:12px;font-weight:600;display:block;margin-bottom:10px}
.xcard h4{font-family:var(--disp);font-weight:800;font-size:20px;letter-spacing:-.02em;margin-bottom:6px}
.xcard p{color:var(--grey);font-size:14.5px}
.xcard .go{display:inline-block;margin-top:14px;font-family:var(--disp);font-weight:600;font-size:14.5px;border-bottom:2px solid var(--ink)}

@media(max-width:880px){
  .moment{grid-template-columns:1fr}
  .moment.flip>.shot{order:0}
  .xgrid{grid-template-columns:1fr}
}

/* ===== persona theming (accent takeover + role switcher) =====
   Each /for/* page declares its role on <body>; every "annotation-language"
   primitive (frame, pin, label, strike, underline) follows the role color. */
body.p-dev{--acc:#2554E8;--acc-soft:#EAF0FE;--acc-ink:#1A3BAA}
body.p-des{--acc:#F0362B;--acc-soft:#FEECEA;--acc-ink:#B3271F}
body.p-team{--acc:#0E9F6E;--acc-soft:#E5F5EE;--acc-ink:#0A7A55}

body[class*="p-"] .ann::before{border-color:var(--acc)}
body[class*="p-"] .apin{background:var(--acc);box-shadow:0 .1em .3em color-mix(in srgb,var(--acc) 40%,transparent)}
body[class*="p-"] .alabel{background:var(--acc)}
body[class*="p-"] .alabel::after{background:var(--acc)}
body[class*="p-"] .strike::after{background:var(--acc)}
body[class*="p-"] .keep .u{box-shadow:inset 0 -0.35em var(--acc-soft)}
body[class*="p-"] .subhero .sub code{background:var(--acc-soft);color:var(--acc-ink)}
body[class*="p-"] .eyebrow{color:var(--acc-ink)}

/* tinted hero band — the "different room" cue */
.heroband{background:linear-gradient(180deg,var(--acc-soft) 0%,var(--bg) 88%);border-bottom:1px solid var(--line)}

/* role switcher — makes "one of three roles" explicit */
.roleswitch{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:99px;padding:5px;margin-bottom:30px}
.roleswitch a{font-family:var(--disp);font-weight:600;font-size:13.5px;color:var(--grey);border-radius:99px;padding:7px 16px;display:inline-flex;align-items:center;gap:7px}
.roleswitch a i{width:8px;height:8px;border-radius:50%;font-style:normal;flex:none}
.roleswitch a .d1{background:#2554E8}.roleswitch a .d2{background:#F0362B}.roleswitch a .d3{background:#0E9F6E}
.roleswitch a.on{background:var(--ink);color:#fff}
.roleswitch a.on i{background:#fff !important}
@media(max-width:880px){.roleswitch a{padding:7px 11px;font-size:12.5px}}