/* Design B: "chapter and exhibit".
   One pattern for both products. Every section is a chapter: numeral, kicker, h2, lead, then ONE exhibit plate with
   the same chrome (Example tag, title, replay) and the same choreography (a sequence that plays once, replays on demand).
   Product modifiers: .b-pk = light plates, .b-tn = deep-green plates. Nothing else changes. */

.b-pk{--ex-bg:var(--surface);--ex-bar:var(--tint-2);--ex-fg:var(--ink);--ex-chip:var(--tint-1);--ex-mut:var(--muted);--ex-tag-bg:var(--paper);--accent:var(--green);--ex-btn:var(--paper)}
.b-tn-unused{--ex-bg:var(--deep);--ex-bar:var(--deep-2);--ex-fg:var(--paper);--ex-chip:var(--deep-2);--ex-mut:var(--on-deep);--ex-tag-bg:var(--paper);--accent:var(--terra-lite);--ex-btn:var(--paper);--focus:var(--terra)}
.b-tn .ex :focus-visible{outline-color:var(--terra-lite)}

/* ---------- chapter ---------- */
.ch{padding-block:var(--s-9)}
.alt{background:var(--tint-1)}
.ch-head{display:grid;grid-template-columns:96px minmax(0,6fr) minmax(0,5fr);gap:var(--s-5) var(--s-6);align-items:end;margin-bottom:var(--s-7)}
.ch-no{font-size:72px;line-height:.85;font-style:italic;letter-spacing:-.03em;color:var(--terra)}
.ch-no{align-self:start;margin-top:26px}
.ch-head .lead{max-width:30em}
.ch-head .kicker{margin-bottom:var(--s-3)}
@media (max-width:1000px){.ch{padding-block:var(--s-8)}.ch-head{grid-template-columns:1fr;gap:var(--s-4);margin-bottom:var(--s-6)}.ch-no{font-size:44px}}

/* hero chapter */
.ch-hero{padding-top:var(--s-6)}
.hero-text{max-width:900px;margin:0 auto var(--s-8);text-align:center;display:grid;justify-items:center;gap:var(--s-4)}
.hero-text .h1{margin-block:var(--s-2)}
.b-tn .hero-text .h1{font-size:clamp(52px,7vw,100px)}
.hero-promise{font-size:var(--fs-xl);line-height:1.2;letter-spacing:-.012em}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);justify-content:center;align-items:center;margin-top:var(--s-3)}
.trust{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-5);justify-content:center;font-size:var(--fs-sm);color:var(--muted);margin-top:var(--s-3)}
.trust li{display:flex;align-items:center;min-height:32px}

/* ---------- exhibit plate ---------- */
.ex{margin:0;background:var(--ex-bg);color:var(--ex-fg);border-radius:var(--radius-lg);overflow:hidden}
.ex-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);padding:var(--s-2) var(--s-3) var(--s-2) var(--s-5);min-height:60px;background:var(--ex-bar);font-size:var(--fs-sm)}
.ex-tag{padding:4px 12px;border-radius:99px;background:var(--ex-tag-bg);color:var(--ink);font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em}
.ex-title{flex:1 1 220px;color:var(--ex-mut)}
.ex-aside{color:var(--ex-mut);font-size:var(--fs-xs)}
.ex-replay{min-height:44px;padding:0 18px;border:0;border-radius:10px;background:var(--ex-btn);color:var(--ink);font-weight:600;font-size:var(--fs-sm)}
.ex-replay[aria-pressed=true]{background:var(--terra);color:var(--paper)}
.ex-cap{padding:var(--s-4) var(--s-5) 0;color:var(--ex-mut)}
.ex-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s-2) var(--s-5);padding:var(--s-4) var(--s-5) var(--s-5);color:var(--ex-mut);font-size:var(--fs-sm)}
.ex-foot .serif{font-size:var(--fs-lg);color:var(--ex-fg)}
.ex .kicker,.ex .small{color:var(--ex-mut)}
.legend{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5)}
.legend b{color:var(--terra);margin-right:6px}
.b-tn .legend b{color:var(--terra-lite)}

/* flow: question -> context -> answer */
.flow{display:grid;grid-template-columns:minmax(0,.85fr) auto minmax(0,1.1fr) auto minmax(0,1.1fr);gap:var(--s-3);padding:var(--s-5);align-items:start}
.arrow{align-self:center;font-size:24px;color:var(--accent)}
.stage{background:var(--ex-chip);border-radius:20px;padding:var(--s-5);display:grid;gap:var(--s-3);align-content:start;min-width:0}
.stage-k{display:flex;align-items:center;gap:var(--s-2);font-weight:600;font-size:var(--fs-sm)}
.stage-k>span:not(.pill){font-weight:400;color:var(--ex-mut)}
.stage-k img{width:22px;height:22px}
.pill{margin-left:auto;padding:3px 10px;border-radius:99px;background:var(--surface);color:var(--green);font-size:var(--fs-xs);font-weight:700}
.bubble{font-size:var(--fs-lg);line-height:1.35}
.b-pk .bubble{padding:12px 16px;border-radius:16px 16px 16px 4px;background:var(--surface)}
.b-tn .bubble{font-size:var(--fs-xl);line-height:1.2;font-style:italic}
.stage-h{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);font-size:var(--fs-lg)}
.sum{color:var(--ex-mut)}
.ans-h{font-size:var(--fs-xl);line-height:1.2;letter-spacing:-.012em}
.ans-l{display:grid;gap:var(--s-2)}
.ans-l li{display:grid;grid-template-columns:34px 1fr}
.ans-l .mono{color:var(--terra)}
.b-tn .ans-l .mono{color:var(--terra-lite)}
.mem{display:grid;gap:var(--s-2)}
.mem li{display:grid;grid-template-columns:26px 1fr;gap:var(--s-3);align-items:center;padding:10px var(--s-3);border-radius:12px;background:var(--ex-bg);font-size:var(--fs-sm);font-weight:600;line-height:1.35}
.mem i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--green);color:var(--paper);font-size:12px;font-style:normal;font-weight:700}
.b-tn .mem i{background:var(--terra-lite);color:var(--deep)}
.withheld li{background:transparent;color:var(--ex-mut)}
.withheld li i{background:var(--surface);color:var(--muted)}
.withheld .mono{grid-column:2;font-weight:400}
.perm{display:flex;gap:var(--s-2)}.perm span{color:var(--green);font-weight:700}
.send{justify-self:start;display:inline-grid;min-width:96px;min-height:44px;place-items:center;padding:0 22px;border-radius:10px;background:var(--paper);color:var(--ink);font:600 15px/1 var(--sans);box-shadow:0 3px 0 #1f2c25;margin-bottom:3px}
.send>span{grid-area:1/1}.send-b{visibility:hidden}
.tabs .tablist{display:none;gap:4px;padding:4px;border-radius:12px;background:var(--surface);width:max-content;margin-bottom:var(--s-3)}
.has-tabs .tablist{display:flex}.has-tabs .tab-h{display:none}
.tab-h{font:600 var(--fs-xs)/1.5 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ex-mut);margin:0 0 var(--s-2)}
.tablist button{min-height:44px;padding:0 var(--s-4);border:0;border-radius:9px;background:transparent;font-size:var(--fs-sm);font-weight:600;color:var(--muted)}
.tablist button span{font-family:var(--mono);margin-left:6px}
.tablist button[aria-selected=true]{background:var(--ink);color:var(--paper)}
.tabpanel[hidden]{display:none}
.tabpanel .small{margin-top:var(--s-3)}
@media (max-width:1000px){
  .flow{grid-template-columns:1fr;padding:var(--s-3)}
  .arrow{justify-self:center;transform:rotate(90deg)}
}

/* tools strip */
.tools{margin-top:var(--s-8);text-align:center;display:grid;gap:var(--s-3);justify-items:center}
.tools ul{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-2) var(--s-6);font:400 clamp(22px,2.6vw,32px)/1.2 var(--serif);letter-spacing:-.015em}
.ul{text-decoration:underline;text-underline-offset:3px}

/* problem */
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);padding:var(--s-5)}
.cols3 article{background:var(--ex-chip);border-radius:20px;padding:var(--s-6);display:grid;gap:var(--s-3);align-content:start}
.cols3 p{color:var(--ex-mut)}
@media (max-width:860px){.cols3{grid-template-columns:1fr;padding:var(--s-3)}}

/* review card */
.card-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.card-main{padding:var(--s-6);display:grid;gap:var(--s-4);align-content:start}
.card-side{padding:var(--s-6);background:var(--ex-chip);display:grid;gap:var(--s-3);align-content:start}
.card-top{display:flex;justify-content:space-between;align-items:center}
.state{padding:4px 12px;border-radius:99px;background:var(--tint-1);color:var(--green);font-size:var(--fs-xs);font-weight:700}
.state[data-s=restrict],.state[data-s=reject]{background:#f3ddd5;color:var(--terra-deep)}
.claim{font-size:var(--fs-xl);font-weight:400;line-height:1.2;letter-spacing:-.012em}
.edit{display:grid;gap:var(--s-2);font-size:var(--fs-sm);font-weight:600}
.edit textarea{width:100%;padding:12px 14px;border:0;border-radius:12px;background:var(--tint-2);font:400 18px/1.4 var(--serif);color:var(--ink);resize:vertical}
.q{padding:var(--s-4) var(--s-5);background:var(--surface);color:var(--ink);border-radius:12px}
.q p{font:italic 400 var(--fs-lg)/1.4 var(--serif)}
.q footer{margin-top:4px;color:var(--muted)}
.scope{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);margin:var(--s-2) 0 0}
.scope dt{font-size:var(--fs-xs);color:var(--ex-mut)}
.scope dd{margin:0;font-weight:600;font-size:var(--fs-sm);line-height:1.35}
.decide{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.decide .btn-quiet[aria-pressed=true]{background:var(--ink);color:var(--paper);box-shadow:0 3px 0 var(--green)}
.impact{padding:var(--s-3) var(--s-4);background:var(--ex-chip);border-radius:10px;font-size:var(--fs-sm);line-height:1.5}
@media (max-width:900px){.card-grid{grid-template-columns:1fr}.card-main,.card-side{padding:var(--s-5)}}

/* steps */
.steps4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3);padding:var(--s-5)}
.steps4 li{background:var(--ex-chip);border-radius:20px;padding:var(--s-5);display:grid;gap:var(--s-2);align-content:start;position:relative}
.sn{font-size:56px;line-height:1;color:var(--terra);font-style:italic;letter-spacing:-.03em}
.steps4 small{margin-top:var(--s-2)}
.steps4 p{color:var(--ex-mut);font-size:var(--fs-sm)}
.steps4 .h3{font-size:var(--fs-lg)}
.ex-sub{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,4fr);gap:var(--s-5);padding:var(--s-6);margin:0 var(--s-5) var(--s-5);background:var(--ex-chip);border-radius:20px;align-items:center}
.ex-sub>div>*+*{margin-top:var(--s-3)}
.ex-sub p:not(.kicker){color:var(--ex-mut)}
.chain{display:grid;gap:var(--s-1);justify-items:start}
.chain li{padding:10px 18px;border-radius:99px;background:var(--ex-bg);font-weight:600;font-size:var(--fs-sm)}
.chain .down{background:none;padding:0 0 0 22px;color:var(--terra);line-height:1}
@media (max-width:1000px){.steps4{grid-template-columns:repeat(2,minmax(0,1fr))}.ex-sub{grid-template-columns:1fr}}
@media (max-width:560px){.steps4{grid-template-columns:1fr;padding:var(--s-3)}.ex-sub{margin:0 var(--s-3) var(--s-3);padding:var(--s-5)}}

/* connections */
.conns{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s-3);padding:var(--s-5)}
.conns article{grid-column:span 2;background:var(--ex-chip);border-radius:20px;padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-3)}
.conns .portable{grid-column:span 4}
.conns h3{font:600 var(--fs-md)/1.35 var(--sans)}
.conns article p{color:var(--ex-mut);font-size:var(--fs-sm)}
.conns .foot{margin-top:auto;padding-top:var(--s-2);color:var(--ex-fg);font-weight:600}
.c-top{display:flex;justify-content:space-between;align-items:center}
.c-glyph{font:400 26px/1 var(--serif);color:var(--green)}
.tag{padding:4px 10px;border-radius:99px;background:var(--surface);font-size:var(--fs-xs);font-weight:600;color:var(--muted)}
.tag-pilot{background:var(--green);color:var(--paper)}
.portable .btn{align-self:flex-start}
@media (max-width:1000px){.conns{grid-template-columns:repeat(2,minmax(0,1fr))}.conns article{grid-column:span 1}.conns .portable{grid-column:1/-1}}
@media (max-width:560px){.conns{grid-template-columns:1fr;padding:var(--s-3)}}

/* Trinity teaser plate (PersonaKit page) */
.tease{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:var(--s-7);padding:clamp(28px,5vw,72px);background:var(--deep);color:var(--paper);align-items:center}
.tease-copy>*+*{margin-top:var(--s-4)}
.tease-card{background:var(--deep-2);border-radius:var(--radius);padding:var(--s-6);display:grid;gap:var(--s-4);min-height:300px;align-content:space-between}
.tease-card .star{font-size:28px;color:var(--terra-lite)}
.tease-card p{font-size:clamp(34px,4vw,52px);line-height:1.05;letter-spacing:-.02em}
.tease .kicker,.tease .small{color:var(--on-deep)}
@media (max-width:860px){.tease{grid-template-columns:1fr}.tease-card{min-height:0}}

/* pilot / invitation */
.pilot .wrap{text-align:center;display:grid;justify-items:center;gap:var(--s-4)}
.pilot-mark{width:84px;height:84px}
.includes{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-2) var(--s-3)}
.includes li{padding:8px 16px;border-radius:99px;background:var(--tint-1);font-size:var(--fs-sm);font-weight:600}
.pilot.alt .includes li{background:var(--surface)}

/* chapter dots (>=1280px) */
.dots{display:none}
@media (min-width:1280px){
  .dots{display:grid;position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:20;gap:0}
  .dots a{position:relative;display:grid;place-items:center;width:44px;height:30px}
  .dots a::before{content:"";width:10px;height:10px;border-radius:50%;background:#bcc5af}
  .dots a.cur::before{background:var(--terra);transform:scale(1.3)}
  .dots span{position:absolute;right:40px;white-space:nowrap;padding:6px 12px;border-radius:8px;background:var(--ink);color:var(--paper);font-size:var(--fs-xs);font-weight:600;opacity:0;pointer-events:none;visibility:hidden}
  .dots a:hover span,.dots a:focus-visible span{opacity:1;visibility:visible}
}

/* ---------- choreography: plays once, replays on demand ---------- */
.seq>:nth-child(1){--n:0}.seq>:nth-child(2){--n:1}.seq>:nth-child(3){--n:2}.seq>:nth-child(4){--n:3}
.seq>:nth-child(5){--n:4}.seq>:nth-child(6){--n:5}.seq>:nth-child(7){--n:6}.seq>:nth-child(8){--n:7}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .ex[data-io]:not(.is-in) .seq>*{opacity:0;transform:translateY(14px)}
  .seq>*{transition:opacity .6s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--base,0s) + var(--n,0)*.13s)}
  .seq .seq{--base:.5s}
  .flow>.arrow{transition:opacity .5s var(--ease) .3s}
  .ex[data-io]:not(.is-in) .arrow{opacity:0}
  .ex[data-io]:not(.is-in) .ex-foot{opacity:0}
  .ex-foot{transition:opacity .6s var(--ease) 1.2s}
  .ex[data-io]:not(.is-in) .tease-card{opacity:0;transform:translateY(14px)}
  .tease-card{transition:opacity .8s var(--ease) .4s,transform .8s var(--ease) .4s}

  /* product moments */
  .b-pk .ex.is-in .mem i{animation:b-pop .5s var(--ease) both}
  .b-pk .ex.is-in .mem li:nth-child(1) i{animation-delay:1s}.b-pk .ex.is-in .mem li:nth-child(2) i{animation-delay:1.2s}
  .b-pk .ex.is-in .mem li:nth-child(3) i{animation-delay:1.4s}.b-pk .ex.is-in .mem li:nth-child(4) i{animation-delay:1.6s}
  .ex.all,.ex.all *{animation-duration:.01s!important;animation-delay:0s!important;transition-duration:.01s!important;transition-delay:0s!important}

  @keyframes b-pop{from{transform:scale(0)}60%{transform:scale(1.25)}to{transform:scale(1)}}

  .qa-labels label,.faq-grid summary i{transition:background .2s,color .2s,transform .25s var(--ease)}
  .dots a::before{transition:transform .2s,background .2s}
  .dots span{transition:opacity .15s}
}