/* ==========================================================================
   Leadways v4 — shared components
   Stage (agent lineups), Scene (agent + interface), pills, team blueprints,
   agent → automation → system flow, tablet grid fixes.
   ========================================================================== */

/* ---------- Pills ---------- */
.pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.pill{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:rgba(255,255,255,.04);font:600 .78rem/1 var(--sans);letter-spacing:.04em;color:#e6dfd3;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.pill:nth-child(odd){rotate:-1.2deg}.pill:nth-child(even){rotate:1deg}
.pill .dots{display:inline-flex;gap:3px}
.pill .dots i{width:6px;height:6px;border-radius:50%;background:var(--c)}
.pill .live{width:7px;height:7px;border-radius:50%;background:#5ec38f;box-shadow:0 0 0 3px rgba(94,195,143,.18)}

/* ---------- Stage: one scale, one floor, no overlap ---------- */
/* Each figure: height = var(--h) * var(--k). --k per agent keeps heads consistent. */
.stage-row{--h:min(420px,44vw);position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;justify-items:center;width:100%;max-width:980px;margin:0 auto;padding-bottom:18px}
.stage-row::before{content:"";position:absolute;left:4%;right:4%;bottom:14px;height:1px;background:linear-gradient(90deg,transparent,rgba(214,181,111,.45) 20%,rgba(214,181,111,.45) 80%,transparent)}
.stage-row::after{content:"";position:absolute;left:8%;right:8%;bottom:-30px;height:70px;background:radial-gradient(ellipse 50% 50% at 50% 30%,rgba(198,167,96,.13),transparent 70%);pointer-events:none}
.stage-fig{position:relative;margin:0;height:var(--h);display:flex;flex-direction:column;justify-content:flex-end;align-items:center;transition:filter .7s var(--ease-out),transform .7s var(--ease-out)}
.stage-fig img{position:relative;z-index:1;height:calc(100% * var(--k,1));width:auto;max-width:none;filter:drop-shadow(0 18px 22px rgba(0,0,0,.45))}
.stage-fig::before{content:"";position:absolute;z-index:0;bottom:6%;left:50%;width:120%;height:70%;translate:-50% 0;border-radius:50%;background:radial-gradient(ellipse at 50% 60%,color-mix(in srgb,var(--c) 26%,transparent),transparent 65%);opacity:0;transition:opacity .7s}
.stage-fig::after{content:"";position:absolute;z-index:0;bottom:-6px;left:50%;width:58%;height:16px;translate:-50% 0;border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.65),transparent 70%)}
.stage-fig figcaption{position:absolute;bottom:-34px;font:700 .72rem/1 var(--sans);letter-spacing:.2em;color:var(--faint);transition:color .5s}
.stage-fig[data-a=iris]{--k:.955}.stage-fig[data-a=max]{--k:.955}.stage-fig[data-a=aria]{--k:.97}.stage-fig[data-a=ops]{--k:1}.stage-fig[data-a=core]{--k:.99}
.stage-row.is-live .stage-fig{filter:brightness(.62) saturate(.85)}
.stage-row.is-live .stage-fig.is-on{filter:none;transform:translateY(-4px)}
.stage-row .stage-fig.is-on::before,.stage-row:not(.is-live) .stage-fig:hover::before{opacity:1}
.stage-fig.is-on figcaption{color:var(--c)}
.light .stage-fig figcaption{color:var(--ink-faint)}
.light .stage-row::before{background:linear-gradient(90deg,transparent,rgba(21,19,24,.18) 20%,rgba(21,19,24,.18) 80%,transparent)}
.light .stage-fig::after{background:radial-gradient(ellipse at center,rgba(60,40,20,.28),transparent 70%)}

/* ---------- Scene: an agent standing in front of their own interface ---------- */
.scene{--c:var(--gold);position:relative;overflow:hidden;isolation:isolate;aspect-ratio:5/4;border-radius:var(--r-xl);border:1px solid var(--line);
  background:radial-gradient(ellipse 70% 60% at 28% 85%,color-mix(in srgb,var(--c) 30%,transparent),transparent 70%),radial-gradient(ellipse 60% 50% at 80% 10%,rgba(238,215,159,.08),transparent 70%),linear-gradient(180deg,#141018,#0a090c)}
.light .scene{border-color:var(--line-ink);background:radial-gradient(ellipse 70% 60% at 28% 85%,color-mix(in srgb,var(--c) 26%,transparent),transparent 70%),linear-gradient(180deg,#efe7da,#e4d9c8)}
.scene::after{content:"";position:absolute;inset:auto 0 0;height:22%;z-index:3;background:linear-gradient(transparent,rgba(0,0,0,.35));pointer-events:none}
.light .scene::after{background:linear-gradient(transparent,rgba(120,90,50,.12))}
.scene-ui{position:absolute;z-index:1;right:5%;top:9%;width:66%;filter:drop-shadow(0 26px 40px rgba(0,0,0,.45));transform:perspective(1400px) rotateY(-8deg) rotateX(2deg);transform-origin:right center;transition:transform .8s var(--ease-out)}
.scene-ui--phone{width:34%;right:12%;top:7%}
.scene:hover .scene-ui{transform:perspective(1400px) rotateY(-4deg)}
.scene-agent{position:absolute;z-index:2;left:4%;bottom:0;height:92%;width:auto;max-width:none;filter:drop-shadow(16px 18px 26px rgba(0,0,0,.45))}
.scene-tag{position:absolute;z-index:4;left:18px;bottom:16px;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--r-pill);background:rgba(10,9,12,.78);border:1px solid var(--line-2);backdrop-filter:blur(10px);font:700 .72rem/1 var(--sans);letter-spacing:.14em;color:#fff}
.scene-tag i{width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}

/* ---------- Team blueprints ---------- */
.bp{max-width:1080px;margin:0 auto}
.bp-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:28px}
.bp-tabs button{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:12px;border:1px solid var(--line-2);background:transparent;font:600 .9rem/1 var(--sans);color:#e6dfd3;transition:all var(--d1)}
.bp-tabs button span{display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:6px;background:rgba(255,255,255,.08);font-size:.72rem}
.bp-tabs button[aria-selected=true]{background:var(--text);border-color:var(--text);color:var(--ink)}
.bp-tabs button[aria-selected=true] span{background:rgba(21,19,24,.1)}
.light .bp-tabs button{border-color:rgba(21,19,24,.16);color:var(--ink)}
.light .bp-tabs button[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.bp-group{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(18px,3vw,36px);align-items:start}
.bp-group[hidden]{display:none}
.bp-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.bp-row{width:100%;display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid transparent;border-radius:14px;background:rgba(255,255,255,.04);color:inherit;text-align:left;transition:background .25s,transform .25s var(--ease-out),border-color .25s}
.light .bp-row{background:#f1eadf}
.bp-row:hover{transform:translateX(3px)}
.bp-row[aria-expanded=true]{background:var(--text);color:var(--ink)}
.light .bp-row[aria-expanded=true]{background:var(--ink);color:var(--cream)}
.bp-ic{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.07)}
.light .bp-ic{background:#fff}
.bp-row[aria-expanded=true] .bp-ic{background:rgba(21,19,24,.08)}
.light .bp-row[aria-expanded=true] .bp-ic{background:rgba(255,255,255,.12)}
.bp-ic svg,.bp-arr{width:19px;height:19px;fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.light .bp-ic svg,.light .bp-arr{stroke:var(--wine-2)}
.bp-row[aria-expanded=true] .bp-arr{stroke:currentColor}
.bp-label{flex:1;font-weight:700;font-size:.95rem;letter-spacing:-.01em}
.bp-faces{display:flex}
.bp-faces .avatar{width:24px;height:24px;box-shadow:0 0 0 1.5px var(--bg),0 0 0 2.5px var(--c)}
.light .bp-faces .avatar{box-shadow:0 0 0 1.5px #f1eadf,0 0 0 2.5px var(--c)}
.bp-faces .avatar+.avatar{margin-left:-6px}
.bp-arr{flex:none;opacity:.55;transition:transform .25s,opacity .25s}
.bp-row:hover .bp-arr,.bp-row[aria-expanded=true] .bp-arr{opacity:1;transform:translate(2px,-2px)}
.bp-panel{position:sticky;top:calc(var(--nav-h) + 20px);padding:clamp(22px,3vw,32px);border-radius:var(--r-lg);border:1px solid rgba(214,181,111,.4);background:radial-gradient(ellipse 80% 50% at 100% 0%,rgba(122,30,30,.32),transparent 70%),linear-gradient(180deg,#151218,#0d0c10);color:var(--text);box-shadow:var(--shadow-2);animation:bpIn .5s var(--ease-out)}
@keyframes bpIn{from{opacity:0;transform:translateY(10px)}}
.bp-eyebrow{margin:0;font:700 var(--fs-micro)/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.bp-title{margin:8px 0 0;font:600 clamp(1.6rem,2.4vw,2.1rem)/1.05 var(--serif)}
.bp-situation{margin:10px 0 0;color:var(--muted);font-size:.95rem;line-height:1.55}
.bp-block{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.bp-h{margin:0 0 10px;font:700 var(--fs-micro)/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.bp-team{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.bp-team li{display:flex;gap:12px;align-items:center;font-size:.92rem;line-height:1.45;color:#ddd5c8}
.bp-team b{display:block;font-size:.74rem;letter-spacing:.16em;color:var(--c)}
.bp-auto{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.bp-auto li{padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--line);font-size:.88rem;color:#ece5da}
.bp-auto i{font-style:normal;color:var(--gold);margin:0 4px}
.bp-system{margin:0;font-size:.92rem;color:#ece5da}
.bp-handover{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.bp-handover li{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r-pill);border:1px solid rgba(214,181,111,.35);font-size:.82rem;font-weight:600}
.bp-handover li+li::before{content:"→";margin-left:-2px;margin-right:4px;color:var(--gold)}
.bp-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.bp-start{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--muted)}
.bp-start b{color:var(--text)}
.bp-start a{color:var(--gold-2);text-decoration:underline;text-underline-offset:3px}
.bp-start-faces{display:flex}.bp-start-faces .avatar{width:26px;height:26px}.bp-start-faces .avatar+.avatar{margin-left:-7px}

/* ---------- Agent → automation → system ---------- */
.ams{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;align-items:stretch;position:relative}
.ams-step{position:relative;display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:var(--r-lg);border:1px solid var(--line-ink);background:var(--cream-card);box-shadow:var(--shadow-ink)}
.ams-step+.ams-step{margin-left:34px}
.ams-step+.ams-step::before{content:"";position:absolute;left:-34px;top:50%;width:34px;height:2px;background:linear-gradient(90deg,var(--gold),var(--wine-2))}
.ams-step+.ams-step::after{content:"";position:absolute;left:-8px;top:calc(50% - 4px);border:5px solid transparent;border-left:7px solid var(--wine-2)}
.ams-k{font:700 var(--fs-micro)/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#7d6230}
.ams-step h3{font:600 1.35rem/1.1 var(--serif)}
.ams-step>p{margin:0;font-size:.9rem;line-height:1.55;color:var(--ink-muted)}
.ams-ui{margin-top:auto;border-radius:14px;background:#fff;border:1px solid var(--line-ink);padding:12px;display:grid;gap:8px;font-size:.82rem;color:#3d373e}
.ams-ui .row{display:flex;align-items:center;gap:8px}
.ams-ui .row b{margin-left:auto;font-size:.74rem;font-weight:700;padding:3px 8px;border-radius:99px;background:#eef6f1;color:#2f7a55}
.ams-ui .row b.wait{background:#fbf3e3;color:#8a6420}
.ams-ui .tick{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:#eef6f1;color:#2f7a55;font-size:.74rem;font-weight:700;flex:none}
.ams-ui .tool{font-size:.74rem;color:var(--ink-faint);margin-left:4px}
.ams-ui .quote{padding:10px;border-radius:10px;background:#f6f1e9;font-style:italic;color:#4a444b}
.ams-ui .head{display:flex;align-items:center;gap:8px;font-weight:700}
.ams-ui .head .avatar{width:26px;height:26px}
.ams-ui .status{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center}
.ams-ui .status span:nth-child(odd){color:var(--ink-muted)}
.ams-ui .status em{font-style:normal;font-weight:700;color:var(--ink)}

/* ---------- Tablet grid fixes (no 2 + 1 orphans) ---------- */
@media (max-width:960px) and (min-width:761px){
  .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:960px){
  .bp-group{grid-template-columns:1fr}
  .bp-panel{position:static}
  .ams{grid-template-columns:1fr}
  .ams-step+.ams-step{margin-left:0;margin-top:30px}
  .ams-step+.ams-step::before{left:50%;top:-30px;width:2px;height:30px;background:linear-gradient(var(--gold),var(--wine-2))}
  .ams-step+.ams-step::after{left:calc(50% - 4px);top:-8px;border:5px solid transparent;border-top:7px solid var(--wine-2)}
}
@media (max-width:760px){
  .stage-row{--h:300px}
  .stage-fig figcaption{font-size:.72rem;letter-spacing:.12em}
  .scene{aspect-ratio:4/5}
  .scene-ui{width:84%;right:-4%;top:6%}
  .scene-ui--phone{width:48%;right:6%}
  .scene-agent{height:70%;left:2%}
  .bp-faces{display:none}
  .bp-tabs{gap:6px}
  .bp-tabs button{height:38px;padding:0 12px;font-size:.84rem}
}
@media (prefers-reduced-motion:reduce){.bp-panel{animation:none}}

/* closing block: the team on one floor */
.closing-team{display:block;height:auto;align-self:end}
.closing-team .stage-row{--h:clamp(230px,26vw,330px);padding-bottom:0}
.closing-team .stage-row::after{display:none}
.closing-team .stage-fig figcaption{display:none}
@media (max-width:960px){.closing-team .stage-row{--h:min(64vw,300px);max-width:520px}}

/* ---------- v6: blueprint selector — same layout, clearer choices ---------- */
.bp-tabs{align-items:center;gap:6px;width:max-content;max-width:100%;margin:0 auto 28px;padding:6px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid var(--line-2)}
.light .bp-tabs{background:#fffaf2;border-color:rgba(21,19,24,.14);box-shadow:0 10px 26px rgba(52,38,20,.08)}
.bp-by{padding:0 10px 0 8px;font:700 var(--fs-micro)/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted)}
.bp-tabs button{height:44px;border:0;border-radius:11px;font-size:.95rem}
.light .bp-tabs button:not([aria-selected=true]):hover{background:rgba(21,19,24,.06)}
.light .bp-tabs button[aria-selected=true]{background:linear-gradient(180deg,#221c22,#151218);box-shadow:0 6px 16px rgba(21,19,24,.25)}
.bp-tabs button[aria-selected=true] span{background:var(--gold);color:var(--ink)}
.bp-row{position:relative;border-color:rgba(21,19,24,.08)}
.light .bp-row{background:#f4eee4}
.light .bp-row:hover{background:#efe6d9;border-color:rgba(21,19,24,.14)}
.bp-row[aria-expanded=true]::before{content:"";position:absolute;left:-1px;top:12px;bottom:12px;width:3px;border-radius:3px;background:linear-gradient(var(--gold),var(--wine-2))}
.bp-label{font-size:1rem}
.bp-panel{max-height:calc(100vh - var(--nav-h) - 40px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(214,181,111,.55) transparent}
.bp-panel::-webkit-scrollbar{width:8px}
.bp-panel::-webkit-scrollbar-track{background:transparent;margin:18px 0}
.bp-panel::-webkit-scrollbar-thumb{border:0;border-radius:8px;background:linear-gradient(180deg,rgba(238,215,159,.7),rgba(156,46,62,.7))}
.bp-situation{color:#e6dfd3;font-size:1rem}
.bp-gain{display:grid;gap:6px;margin:20px 0 0;padding:14px 16px;border-radius:12px;background:linear-gradient(135deg,rgba(198,167,96,.14),rgba(122,30,30,.16));border:1px solid rgba(214,181,111,.3);font:600 1.08rem/1.35 var(--serif);color:#f6f1e9}
.bp-gain span{font:700 var(--fs-micro)/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.bp-meet{display:inline-flex;align-items:center;height:38px;padding:0 14px;border-radius:11px;border:1px solid var(--c);background:color-mix(in srgb,var(--c) 18%,transparent);font-size:.86rem;font-weight:700;color:#fff;transition:background var(--d1)}
.bp-meet:hover,.bp-meet:focus-visible{background:var(--c)}
.bp-note{margin:18px 0 0;text-align:center;font-size:.8rem;color:var(--ink-faint)}
@media (max-width:960px){.bp-panel{max-height:none;overflow:visible}}
@media (max-width:640px){
  .bp-tabs{width:100%;justify-content:center}
  .bp-by{width:100%;text-align:center;padding:6px 0 4px}
  .bp-tabs button{flex:1;justify-content:center;padding:0 8px}
}

/* ---------- v7: blueprint panel — situation, problem, answer, what changes ---------- */
.bp-sp{display:grid;gap:10px;margin-top:12px}
.bp-sp p{margin:0;font-size:.94rem;line-height:1.5;color:#e6dfd3}
.bp-sp span{display:block;margin-bottom:3px;font:700 var(--fs-micro)/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.bp-sp p+p{padding-left:12px;border-left:2px solid rgba(156,46,62,.7);color:#d6cec1}
.bp-sp p+p span{color:#e59aa6}
.bp-answer{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.bp-a{display:flex;gap:12px;align-items:center;font-size:.9rem;line-height:1.45;color:#ddd5c8}
.bp-a b{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--c,var(--gold))}
.bp-a .avatar{width:34px;height:34px}
.bp-a-ic{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid var(--line-2)}
.bp-a-ic svg{width:18px;height:18px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bp-a--auto{--c:#e59aa6}.bp-a--auto .bp-a-ic svg{stroke:#e59aa6}
.bp-a--system{--c:#e9e1d3}.bp-a--system .bp-a-ic svg{stroke:#e9e1d3}
.bp-gain{margin-top:16px}

/* =====================================================================
   v12 · "Your team, by trade" — compact. Choices as one row of pills; the panel takes the full width at its
   natural height (no inner scroll) and reads left to right: the need → our answer → what changes.
   ===================================================================== */
.bp-group{grid-template-columns:1fr;gap:18px}
.bp-list{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.bp-list li{display:contents}
.bp-row{width:auto;gap:10px;padding:7px 14px 7px 7px;border-radius:999px}
.bp-row:hover{transform:none}
.bp-ic{width:30px;height:30px;border-radius:50%}
.bp-ic svg{width:16px;height:16px}
.bp-label{flex:none;font-size:.9rem}
.bp-faces,.bp-arr{display:none}
.bp-panel{position:static;max-height:none;overflow:visible;padding:clamp(20px,2.4vw,30px) clamp(20px,2.6vw,34px)}
.bp-title{font-size:clamp(1.45rem,2vw,1.8rem)}
.bp-cols{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:clamp(18px,2.4vw,34px);margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.bp-col .bp-h{margin-bottom:8px}
.bp-need{margin:0;font-size:.95rem;line-height:1.55;color:#e6dfd3}
.bp-answer{gap:12px}
.bp-a{align-items:flex-start;font-size:.9rem;line-height:1.45}
.bp-a .avatar,.bp-a-ic{width:30px;height:30px}
.bp-gain{display:block;margin:0;padding:0;border:0;background:none;font:600 1.12rem/1.35 var(--serif);color:#f3ead9}
.bp-col--gain{padding-left:clamp(14px,1.6vw,22px);border-left:2px solid rgba(214,181,111,.45)}
.bp-foot{margin-top:18px;padding-top:14px}
@media (max-width:960px){.bp-cols{grid-template-columns:1fr 1fr}.bp-col--gain{grid-column:1/-1}}
@media (max-width:640px){
  .bp-list{justify-content:flex-start}
  .bp-row{padding:6px 12px 6px 6px}.bp-label{font-size:.86rem}
  .bp-cols{grid-template-columns:1fr;gap:16px}
  .bp-col--gain{grid-column:auto}
}
.bp-row[aria-expanded=true]::before{display:none}
.bp-row{max-width:100%}.bp-label{flex:0 1 auto;min-width:0;white-space:normal;text-align:left}

/* =====================================================================
   v13 · "Your team, by trade" box — proposition 2. Light half: the visitor's problem.
   Dark half: the Leadways answer, the benefit, the pieces doing the work, where to start.
   A gold arrow sits on the seam. Natural height, no inner scroll.
   ===================================================================== */
.bp-panel.bp-panel--split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);padding:0;overflow:hidden;border-radius:26px;background:none;box-shadow:0 30px 70px rgba(40,26,14,.2)}
.bx-l{position:relative;display:flex;flex-direction:column;padding:clamp(24px,2.6vw,32px) clamp(22px,2.8vw,36px);background:var(--cream-card);color:var(--ink)}
.bx-r{position:relative;display:flex;flex-direction:column;padding:clamp(24px,2.6vw,32px) clamp(22px,2.8vw,36px) clamp(20px,2.2vw,26px);background:radial-gradient(ellipse 80% 60% at 100% 0%,rgba(122,30,30,.34),transparent 60%),#0f0d12;color:var(--text)}
.bx-h{margin:0;font:700 var(--fs-micro)/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.bx-l .bx-h{color:var(--wine-2)}
.bx-r .bx-h{color:var(--gold-2)}
.bx-ic{display:grid;place-items:center;width:44px;height:44px;margin-bottom:16px;border-radius:12px;background:#f3dfdf}
.bx-ic svg{width:21px;height:21px;fill:none;stroke:var(--wine-2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bx-pain{margin:10px 0 0;font:600 clamp(1.5rem,2.3vw,1.9rem)/1.15 var(--serif);color:var(--ink);text-wrap:balance}
.bx-sector{margin:auto 0 0;padding-top:22px;font:500 .86rem/1.4 var(--sans);letter-spacing:0;color:var(--ink-muted)}
.bx-seam{position:absolute;left:-22px;top:clamp(34px,3.4vw,42px);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 6px var(--cream-card)}
.bx-seam svg{width:20px;height:20px;fill:none;stroke:#231c12;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bx-fix{margin:12px 0 0;font-size:1.1rem;line-height:1.45;color:#f6efe3}
.bx-win{display:flex;align-items:flex-start;gap:10px;margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);font:600 1.18rem/1.3 var(--serif);color:var(--gold-2)}
.bx-tick{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(79,174,138,.18);color:#7fd1b0;font:700 .8rem/1 var(--sans)}
.bx-with{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 0;font-size:.84rem;color:var(--muted)}
.bx-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 5px;border-radius:999px;border:1px solid var(--line-2);color:#e6dfd3;font-size:.8rem;line-height:1.2}
.bx-tag b{font-weight:700;letter-spacing:.06em;color:#fff}
.bx-tag .avatar{width:20px;height:20px;box-shadow:0 0 0 1.5px #0f0d12,0 0 0 2.5px var(--c)}
.bx-tag svg{width:15px;height:15px;margin-left:3px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bx-tag--auto svg{stroke:#e59aa6}.bx-tag--system svg{stroke:#e9e1d3}
.bx-r .bp-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.bx-with+.bp-foot{margin-top:16px}
@media (max-width:760px){
  .bp-panel.bp-panel--split{grid-template-columns:1fr;border-radius:22px}
  .bx-l{padding:22px 20px 26px}.bx-r{padding:30px 20px 20px}
  .bx-pain{font-size:clamp(1.38rem,5.6vw,1.6rem)}
  .bx-sector{padding-top:14px}
  .bx-seam{left:50%;top:-22px;translate:-50% 0}.bx-seam svg{transform:rotate(90deg)}
}
.bp-panel.bp-panel--split[hidden]{display:none}
.bx-r .link{color:var(--gold-2)}.bx-r .link:hover{color:#fff}