/* Design C3: one composition. PersonaKit and Trinity are the two ends of a single moving diagram.
   Colours come from the theme variables below; ?stage=light|ink|green previews them. */
.s3{--bg:#eaeee0;--fg:var(--ink);--mut:var(--muted);--card:var(--surface);--disc:var(--surface);
  --ok-bg:var(--green);--ok-fg:var(--paper);--no-bg:var(--sage);--no-fg:var(--paper);--bl-bg:var(--terra-deep);--bl-fg:var(--paper);
  --gate:var(--terra);--glow:rgba(181,75,50,.4);--mk-bg:var(--terra);--mk-fg:#fff;--mk-line:rgba(41,45,39,.28);--dash:rgba(65,99,69,.45);
  --pill-bg:rgba(41,45,39,.08);--pill-fg:var(--muted);--tray:rgba(255,255,255,.55);--sees-bg:var(--surface);--sees-line:var(--green);--sees-pill-bg:var(--green);--sees-pill-fg:var(--paper);--shadow:0 1px 0 #dfe5d2,0 44px 70px -50px rgba(31,44,37,.5)}
.s3[data-theme=ink]{--bg:#292d27;--fg:var(--paper);--mut:var(--on-deep);--card:rgba(255,255,255,.08);--disc:var(--paper);
  --ok-bg:var(--paper);--ok-fg:var(--ink);--no-bg:rgba(255,255,255,.16);--no-fg:var(--on-deep);--bl-bg:var(--terra-lite);--bl-fg:var(--ink);
  --gate:var(--terra-lite);--glow:rgba(225,173,140,.5);--mk-bg:var(--terra-lite);--mk-fg:var(--ink);--mk-line:rgba(255,255,255,.35);--dash:rgba(201,210,192,.4);
  --pill-bg:rgba(255,255,255,.1);--pill-fg:var(--on-deep);--tray:rgba(255,255,255,.06);--sees-bg:rgba(255,255,255,.1);--sees-line:var(--terra-lite);--sees-pill-bg:var(--paper);--sees-pill-fg:var(--ink);--shadow:0 44px 70px -48px rgba(41,45,39,.7)}
.s3[data-theme=green]{--bg:#416345;--fg:var(--paper);--mut:#d8e0cf;--card:rgba(0,0,0,.16);--disc:var(--paper);
  --ok-bg:var(--paper);--ok-fg:var(--ink);--no-bg:rgba(255,255,255,.18);--no-fg:#e6ecdd;--bl-bg:var(--terra-lite);--bl-fg:var(--ink);
  --gate:var(--terra-lite);--glow:rgba(225,173,140,.5);--mk-bg:var(--terra-lite);--mk-fg:var(--ink);--mk-line:rgba(255,255,255,.4);--dash:rgba(255,255,255,.4);
  --pill-bg:rgba(255,255,255,.14);--pill-fg:#e6ecdd;--tray:rgba(0,0,0,.14);--sees-bg:rgba(0,0,0,.2);--sees-line:var(--terra-lite);--sees-pill-bg:var(--paper);--sees-pill-fg:var(--ink);--shadow:0 44px 70px -48px rgba(31,44,37,.7)}

.team3 .sec-head{margin-bottom:var(--s-5)}
.s3{display:grid;gap:var(--s-4);padding:var(--s-5);border-radius:var(--radius-lg);background:var(--bg);color:var(--fg);box-shadow:var(--shadow)}
.s3-ask{padding:14px 20px;border-radius:var(--radius);background:var(--card);font:400 clamp(20px,2.1vw,27px)/1.3 var(--serif)}
.s3-ask span{display:block;margin-bottom:4px;font:600 12px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.s3 mark{background:transparent;color:inherit;border-radius:6px;padding:0 4px;box-shadow:inset 0 -2px 0 var(--mk-line)}
.s3 mark.on{background:var(--mk-bg);color:var(--mk-fg);box-shadow:none}
.s3:not([data-theme]) .s3-ask{background:var(--surface)}

.s3-lane{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s-5);align-items:center}
.s3-end{display:grid;justify-items:center;gap:2px;min-width:92px}
.s3-end .disc{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:var(--disc);margin-bottom:6px;box-shadow:0 10px 20px -12px rgba(0,0,0,.45)}
.s3-end .disc img{width:54px;height:54px;object-fit:contain}
.s3-end b{font:600 15px/1.2 var(--sans)}
.s3-end small{font:400 13px/1.2 var(--sans);color:var(--mut)}
.s3-tn.is-got .disc{box-shadow:0 0 0 10px var(--glow)}

.s3-track{position:relative;height:110px;overflow:hidden}
.s3-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:repeating-linear-gradient(90deg,var(--dash) 0 8px,transparent 8px 16px)}
.s3-gate{position:absolute;left:66%;top:6px;bottom:6px;width:4px;border-radius:4px;background:var(--gate);box-shadow:0 0 20px 2px var(--glow);z-index:2}
.s3-gate em{position:absolute;top:50%;left:12px;transform:translateY(-50%);white-space:nowrap;padding:6px 10px;border-radius:999px;background:var(--card);color:var(--mut);font:600 11px/1 var(--sans);font-style:normal}
.s3-c{position:absolute;top:31px;right:calc(34% + 8px);display:grid;height:48px;padding:0 20px;border-radius:999px;font:600 16px/48px var(--sans);font-style:normal;white-space:nowrap;opacity:0;z-index:3}
.s3-c b,.s3-c u{grid-area:1/1;font-weight:600;text-decoration:none;text-align:center}
.s3-c u{opacity:0}
.s3-c.ok{background:var(--ok-bg);color:var(--ok-fg)}
.s3-c.no{background:var(--no-bg);color:var(--no-fg)}
.s3-c.bl{background:var(--bl-bg);color:var(--bl-fg)}

.s3-trays{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.s3-tray{padding:14px 16px;border-radius:var(--radius);background:var(--tray);min-height:112px}
.s3-tray .k{font:600 12px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-bottom:8px}
.s3-tray ul{display:flex;flex-wrap:wrap;gap:6px}
.s3-tray li{padding:6px 12px;border-radius:999px;font:500 14px/1.3 var(--sans);background:var(--pill-bg);color:var(--pill-fg)}
.s3-tray.sees{background:var(--sees-bg);box-shadow:inset 0 0 0 2px var(--sees-line)}
.s3-tray.sees li{background:var(--sees-pill-bg);color:var(--sees-pill-fg)}
.s3-why{min-height:2.7em;font:400 clamp(17px,1.5vw,21px)/1.45 var(--serif);color:var(--fg);text-align:center;text-wrap:balance}
.team3 .team-cta{display:flex;justify-content:center;margin-top:var(--s-4)}

@media (prefers-reduced-motion:no-preference){
  .s3-c.go{animation:s3Chip 5s linear both}
  .s3-c.go u{animation:s3U 5s linear both}
  .s3-c.go b{animation:s3B 5s linear both}
  .s3-c.go.ok{animation-name:s3Ok}
  .s3-gate{animation:s3Pulse 2.8s ease-in-out infinite}
  .s3-tray li.new{animation:s3Pill .5s var(--ease) both}
  .s3-why.swap{animation:s3Fade .5s var(--ease) both}
  .s3-tn .disc{transition:box-shadow .4s var(--ease)}
  @keyframes s3Chip{0%{transform:translateX(-170%);opacity:0;animation-timing-function:cubic-bezier(.25,.1,.25,1)}10%{opacity:1}46%{transform:translateX(0);opacity:1}58%{transform:translateX(0);opacity:1;animation-timing-function:ease-in}100%{transform:translateX(-30%) translateY(64px) scale(.85);opacity:0}}
  @keyframes s3Ok{0%{transform:translateX(-170%);opacity:0;animation-timing-function:cubic-bezier(.25,.1,.25,1)}10%{opacity:1}46%{transform:translateX(0);opacity:1}58%{transform:translateX(0);opacity:1;animation-timing-function:cubic-bezier(.4,0,.8,.4)}96%{transform:translateX(210%) scale(.7);opacity:1}100%{transform:translateX(230%) scale(.6);opacity:0}}
  @keyframes s3U{0%,46%{opacity:0}52%,100%{opacity:1}}
  @keyframes s3B{0%,46%{opacity:1}52%,100%{opacity:0}}
  @keyframes s3Pulse{0%,100%{box-shadow:0 0 18px 2px var(--glow)}50%{box-shadow:0 0 30px 6px var(--glow)}}
  @keyframes s3Pill{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:none}}
  @keyframes s3Fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){.s3-track{display:none}}
@media (min-width:1000px) and (max-height:820px){
  .s3{gap:var(--s-3);padding:var(--s-4)}
  .s3-ask{padding:10px 16px;font-size:20px}
  .s3-end .disc{width:60px;height:60px}.s3-end .disc img{width:42px;height:42px}
  .s3-track{height:96px}.s3-c{top:24px;height:44px;line-height:44px;font-size:15px}
  .s3-tray{min-height:84px;padding:10px 14px}
  .s3-why{font-size:17px;min-height:2.6em}
}
@media (max-width:760px){
  .s3-lane{grid-template-columns:1fr;gap:var(--s-3)}
  .s3-track{display:none}
  .s3-end{grid-template-columns:auto 1fr;justify-items:start;align-items:center;column-gap:12px}
  .s3-end .disc{grid-row:1/3;margin:0}
  .s3-trays{grid-template-columns:1fr}
}