/* Kemi, in the Solutions family. Each tool is shown through a designed product preview, drawn in the site's own type and
   colour, legible at a glance and labelled Illustration (PRODUCT.md: Kemi panels are illustrative). No screenshots.
   Selecting a tool plays its preview once; reduced motion shows the finished state. */

/* ---------- the preview window ---------- */
.pv{position:relative;display:flex;flex-direction:column;border-radius:16px;background:#fff;color:var(--ink);border:1px solid rgba(16,42,67,.1);box-shadow:0 2px 4px rgba(16,42,67,.04),0 28px 60px -28px rgba(16,42,67,.42);overflow:hidden}
.pv-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;border-bottom:1px solid var(--line);background:var(--paper)}
.pv-bar b{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;letter-spacing:-.01em}
.pv-bar b::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--marine)}
.pv-bar small{font-family:var(--mono);font-size:12px;color:var(--mid)}
.pv-body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:clamp(10px,1.6svh,14px);padding:clamp(16px,2.8svh,28px) clamp(18px,2.2vw,32px)}
.pv .tag{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:999px;background:var(--marine-tint);color:var(--marine);font-size:13px;font-weight:600;white-space:nowrap}
.pv .tag.ok{background:var(--marine-tint);color:var(--marine)}
.pv .tag svg{width:14px;height:14px;fill:currentColor}
.pv .meta{font-family:var(--mono);font-size:12px;color:var(--mid)}
.pv .row{display:flex;align-items:center;justify-content:space-between;gap:12px}
/* message bubbles */
.pv .msg{max-width:84%;padding:14px 16px;border-radius:14px;font-size:clamp(15px,min(1.05vw,2.1svh),17px);line-height:1.45}
.pv .msg.in{align-self:flex-start;background:var(--paper);border:1px solid var(--line);border-top-left-radius:4px}
.pv .msg.out{align-self:flex-end;background:var(--ink);color:var(--paper);border-top-right-radius:4px}
.pv .msg .src{display:block;margin-bottom:6px;font-size:13px;color:var(--mid)}
.pv .msg.out .src{color:#A9BFCC}
.pv .msg .who{display:block;margin-bottom:4px;font-family:var(--mono);font-size:11.5px;color:var(--mid)}
.pv .msg.out .who{color:#A9BFCC}
.pv ol{margin:6px 0 0;padding-left:18px}
.pv ol li{margin:3px 0}
/* steps play in: each [data-s] rises once, in order */
.pv [data-s]{transition:opacity .5s var(--ease),transform .6s var(--ease)}
.pv.play [data-s]{opacity:0;transform:translateY(10px)}
.pv.play.go [data-s]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html:not(.motion-on) .pv [data-s]{opacity:1!important;transform:none!important;transition:none}}

/* relay: the two languages and a voice line */
.pv .langs2{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center}
.pv .langs2>div{padding:14px 16px;border-radius:12px;background:var(--paper);border:1px solid var(--line)}
.pv .langs2 small{display:block;font-family:var(--mono);font-size:11.5px;color:var(--mid)}
.pv .langs2 strong{display:block;margin-top:4px;font-weight:600;font-size:clamp(17px,min(1.3vw,2.6svh),21px)}
.pv .swap{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--marine-tint);color:var(--marine)}
.pv .swap svg{width:18px;height:18px;fill:currentColor}
.pv .wave{display:flex;align-items:center;gap:4px;width:min(48%,260px);height:34px}
.pv .wave i{flex:1;border-radius:3px;background:var(--marine);height:var(--h);opacity:.85}
.pv .live{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--ink)}
.pv .live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--violet);box-shadow:0 0 0 4px var(--violet-tint)}
.pv.play .wave i{height:30%}
.pv.play.go .wave i{height:var(--h);animation:wv .9s var(--ease) 4 alternate}
.pv .wave i:nth-child(3n){--h:90%}.pv .wave i:nth-child(3n+1){--h:55%}.pv .wave i:nth-child(3n+2){--h:75%}
@keyframes wv{from{height:30%}to{height:var(--h)}}
@media (prefers-reduced-motion:reduce){html:not(.motion-on) .pv .wave i{animation:none;height:var(--h)}}
/* refine: draft and refined */
.pv .draft{padding:14px 16px;border-radius:12px;border:1px dashed #CFC9BC;color:var(--mid);font-size:clamp(15px,min(1.05vw,2.1svh),17px)}
.pv .refined{padding:14px 16px;border-radius:12px;background:var(--paper);border:1px solid var(--line);font-size:clamp(15px,min(1.05vw,2.1svh),17px);line-height:1.45}
.pv .chips{display:flex;flex-wrap:wrap;gap:8px}
.pv .arrow{align-self:center;width:22px;height:22px;fill:var(--marine)}
/* summarize: transcript and the case record */
.pv .tx{display:grid;gap:6px;padding:12px 14px;border-radius:12px;background:var(--paper);border:1px solid var(--line);font-size:14px;color:var(--mid)}
.pv .tx b{font-weight:600;color:var(--ink)}
.pv .rec{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;padding:16px 18px;border-radius:12px;border:1px solid var(--line)}
.pv .rec dt{font-family:var(--mono);font-size:12px;color:var(--mid);padding-top:3px}
.pv .rec dd{margin:0;font-size:clamp(15px,min(1.05vw,2.1svh),17px);font-weight:500}
/* insights: the scorecard */
.pv .crit{display:grid;gap:6px}
.pv .crit li{list-style:none;display:grid;grid-template-columns:24px 1fr auto;gap:12px;align-items:start;padding:9px 14px;border-radius:12px;border:1px solid var(--line)}
.pv .crit .ck{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--marine-tint);color:var(--marine)}
.pv .crit .ck svg{width:13px;height:13px;fill:currentColor}
.pv .crit b{display:block;font-weight:600;font-size:clamp(15px,min(1.05vw,2.1svh),16.5px)}
.pv .crit span{display:block;margin-top:2px;font-size:13.5px;color:var(--mid)}
.pv .crit em{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--marine)}
.pv .crit{padding:0;margin:0}
/* bona: the assessed candidate */
.pv .cefr{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2vw,32px);align-items:center}
.pv .lvl{display:grid;place-items:center;width:clamp(96px,8vw,124px);aspect-ratio:1;border-radius:50%;border:8px solid transparent;background:linear-gradient(#fff,#fff) padding-box,conic-gradient(var(--marine) 0 83%,var(--marine-tint) 0) border-box}
/* C1 is level 5 of the 6 CEFR levels (83%). The skill bars sit in the C1 band of the Global Scale of English, 76 to 84 on its 10 to 90 scale (83% to 93%) */
.pv .lvl b{font-weight:700;font-size:clamp(30px,2.6vw,40px);letter-spacing:-.03em;line-height:1}
.pv .lvl small{display:block;margin-top:2px;text-align:center;font-family:var(--mono);font-size:11px;color:var(--mid)}
.pv .pillars{display:grid;gap:9px;margin:0;padding:0}
.pv .pillars li{list-style:none;display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center;font-size:14px}
.pv .pillars i{display:block;height:8px;border-radius:4px;background:var(--pale);overflow:hidden}
.pv .pillars i::after{content:"";display:block;height:100%;width:var(--w);border-radius:4px;background:var(--marine);transition:width 1s var(--ease) .2s}
.pv.play .pillars i::after{width:0}
.pv.play.go .pillars i::after{width:var(--w)}
@media (prefers-reduced-motion:reduce){html:not(.motion-on) .pv .pillars i::after{width:var(--w)!important;transition:none}}

/* ---------- opening: the line, the four outcomes, a Kemi Insights evaluation beside it ---------- */
.k0 .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,4vw,80px);align-items:center}
.k0 .hx1{max-width:12em}
.k0 .lead{margin-top:clamp(14px,2.4svh,22px)}
.k0 .outc{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin-top:clamp(18px,3.4svh,32px);border-top:1px solid rgba(247,245,240,.3)}
.k0 .outc li{display:flex;align-items:center;gap:10px;padding:clamp(10px,1.8svh,14px) 0;border-bottom:1px solid rgba(247,245,240,.14);font-weight:600;font-size:clamp(16px,min(1.25vw,2.6svh),20px)}
.k0 .outc li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--marine-tint)}
.k0 .act .link{color:var(--paper)}
.k0 .pv{box-shadow:0 30px 80px -24px rgba(0,0,0,.55)}

/* ---------- the seven tools: stage list on the left, the selected tool's preview on the right ---------- */
.kt .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,80px);align-items:start}
.kt .hx2{margin-bottom:clamp(16px,3svh,28px)}
.stg .sg{border-top:2px solid var(--ink);padding-top:clamp(6px,1.2svh,10px);margin-top:clamp(8px,1.6svh,14px)}
.stg .sg:first-child{margin-top:0}
.stg .sl{display:flex;gap:10px;font-family:var(--mono);font-size:12.5px;color:var(--mid)}
.stg .sl b{font-weight:500;color:var(--ink)}
.stg button{display:block;width:100%;text-align:left;padding:clamp(4px,.6svh,8px) 0 clamp(4px,.6svh,8px) 18px;position:relative}
.stg button b{display:block;font-weight:600;font-size:clamp(17px,min(1.35vw,2.8svh),21px);letter-spacing:-.015em;color:var(--mid);transition:color .25s}
.stg button .ln{display:none;margin-top:4px;color:var(--mid);font-size:15px;line-height:1.5}
.stg button::before{content:"";position:absolute;left:0;top:clamp(13px,2.2svh,18px);width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .25s}
.stg button:hover b,.stg button[aria-selected="true"] b,.stg button[aria-expanded="true"] b{color:var(--ink)}
.stg button[aria-selected="true"]::before,.stg button[aria-expanded="true"]::before{background:var(--marine)}
.kt .stage{display:flex;flex-direction:column;gap:14px}
.kt .stage .pv{height:clamp(350px,57svh,520px)}
.kt .cap{font-size:clamp(15px,min(1.05vw,2.2svh),17px);line-height:1.5;max-width:44em}
.kt .cap b{font-weight:700;margin-right:8px}

/* ---------- security: a compact band, the certification names only, no claim about their scope ---------- */
.ks{padding:clamp(40px,7svh,80px) 0}
.ks .hx2{max-width:none}
.ks .hx2 span{max-width:none}

/* ---------- the close: compact, one line and the button ---------- */
.kc{padding:clamp(52px,10svh,112px) 0}

@media (max-width:900px){
  .k0 .wrap,.kt .wrap{grid-template-columns:1fr}
  .kt .stage{margin:6px 0 12px}
  .kt .stage .cap b{display:none}
  .kt .stage .pv{height:auto;min-height:320px}
  .kt .wrap>.stage{display:none}
  .stg button[aria-selected="true"] .ln,.stg button[aria-expanded="true"] .ln{display:none}
  .pv .msg{max-width:94%}
  .pv .langs2{grid-template-columns:1fr}
  .pv .swap{justify-self:center;transform:rotate(90deg)}
  .pv .cefr{grid-template-columns:1fr;justify-items:start}
  .pv .cefr .pillars{justify-self:stretch;width:100%}
}