/* ---------- The AI seam, one step at a time -------------------------------------------
   A panel with a progress rail, a centred stage where each step's picture builds in, the
   step's words beside it, Back and Next underneath, and the record strip as a quiet close.
   Every step lives in the same grid cell, so the panel never changes height between them. */
.seam{padding-block:var(--section-pad);background:#fff}
.seam__inner{max-width:var(--container-max);margin:0 auto;padding-inline:var(--gutter)}
.seam + .lc,.seam + .steps,.seam + .svc,.seam + .diff{padding-top:calc(var(--section-pad) * .25)}
.seam__head{max-width:46rem}
.seam__head .sec-sub{margin-top:1rem}

.seam__panel{
  position:relative;margin-top:clamp(2rem,5vw,3.5rem);padding:0;
  background:#fff;
}
.seam__panelhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.seam__panellabel{margin:0;font-family:var(--font-display);font-weight:600;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
.seam__legend{display:flex;flex-wrap:wrap;gap:1.25rem;margin:0;padding:0;list-style:none;font-size:.8125rem;font-weight:500;color:var(--navy)}
.seam__legend li{display:flex;align-items:center;gap:.5rem}
.seam__key{width:.875rem;height:.875rem;border-radius:.25rem;border:1px solid rgba(10,26,51,.35)}
.seam__key--stand{border-style:dashed;border-color:var(--accent);background:rgba(249,115,22,.08)}
.seam__key--test{border-color:#2f7fd4;background:rgba(47,127,212,.08)}

/* ---- the rail: five steps, done ones filled, the current one in colour */
.seam__rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem;margin:clamp(1.25rem,3vw,2rem) 0 0;padding:0;list-style:none;counter-reset:none}
.seam__railbtn{
  display:flex;align-items:center;gap:.625rem;width:100%;padding:.625rem .75rem;border-radius:.75rem;border:1px solid rgba(10,26,51,.22);
  background:#fff;font:inherit;color:var(--navy);text-align:left;cursor:pointer;
  transition:border-color .25s ease,background .25s ease,color .25s ease,transform .3s var(--ease);
}
.seam__railbtn:hover{transform:translateY(-.0625rem);border-color:var(--navy);color:var(--navy)}
.seam__railbtn:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.seam__railno{display:grid;place-items:center;flex:none;width:1.625rem;height:1.625rem;border-radius:50%;border:1.5px solid rgba(10,26,51,.5);font-family:var(--font-display);font-weight:600;font-size:.75rem;color:var(--navy);transition:background .25s ease,color .25s ease,border-color .25s ease}
.seam__raillabel{font-size:.875rem;font-weight:600;line-height:1.2}
.seam__railbtn.is-done .seam__railno{background:var(--navy);border-color:var(--navy);color:#fff}
.seam__railbtn.is-done{color:var(--navy)}
.seam__railbtn.is-active{border-color:var(--accent);background:#fff8f3;color:var(--navy)}
.seam__railbtn.is-active .seam__railno{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---- the steps share one cell; only the active one is seen */
.seam__steps{position:relative;display:grid;margin-top:clamp(1.25rem,3vw,2rem)}
.seam__step{
  grid-area:1 / 1;position:absolute;inset:0 auto auto 0;width:100%;display:grid;grid-template-columns:1fr;justify-items:center;gap:clamp(1.25rem,3vw,2rem);align-items:start;
  opacity:0;visibility:hidden;transform:translateX(1.5rem);transition:opacity .4s ease,transform .5s var(--ease),visibility 0s linear .5s;
}
.is-back .seam__step{transform:translateX(-1.5rem)}
.seam__step.is-active{position:relative;opacity:1;visibility:visible;transform:none;transition:opacity .45s ease .1s,transform .55s var(--ease) .1s,visibility 0s}

/* the stage: a quiet rounded ground where the picture sits */
.seam__stage{
  position:relative;width:min(100%,64rem);display:grid;place-items:center;padding:clamp(1.5rem,3vw,2.5rem) clamp(1rem,2vw,1.5rem);
  border-radius:1rem;background:transparent;border:0;overflow:visible;
}
.seam__stage--row{grid-template-columns:minmax(0,1fr) minmax(9rem,.9fr) minmax(0,1fr);align-items:center;justify-items:stretch;gap:clamp(1rem,2.5vw,2rem)}
.seam__stage--row>.seam__card{width:100%}
.seam__halo{display:none}


/* cards on the stage */
.seam__card{position:relative;display:grid;gap:.625rem;min-width:0;padding:1.125rem 1.25rem;border-radius:1rem;background:#fff;border:1px solid rgba(10,26,51,.16);box-shadow:0 .75rem 2rem rgba(10,26,51,.06)}
.seam__card--lg{width:min(100%,28rem);padding:1.625rem 1.75rem 1.75rem;gap:.875rem}
.seam__card--stand{border-style:dashed;border-color:rgba(249,115,22,.6);background:#fff8f3}
.seam__card--test{border-color:rgba(47,127,212,.5);background:#f5faff}
.seam__card--ink{border-color:var(--navy)}
.seam__card--dim{opacity:.55}
.seam__cardhead{display:flex;align-items:center;gap:.5rem}
.seam__dot{width:1.5rem;height:1.5rem;border-radius:.4375rem;background:rgba(10,26,51,.07);flex:none}
.seam__card--stand .seam__dot{background:rgba(249,115,22,.16)}
.seam__card--test .seam__dot{background:rgba(47,127,212,.16)}
.seam__num{font-family:var(--font-display);font-weight:600;font-size:.8125rem;letter-spacing:.12em;color:rgba(10,26,51,.65)}
.seam__badge{margin-left:auto;padding:.25rem .7rem;border-radius:100px;background:var(--navy);color:#fff;font-size:.6875rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.seam__card--stand .seam__badge{background:var(--accent)}
.seam__card--test .seam__badge{background:#2f7fd4}
.seam__cardtitle{font-size:1.125rem;line-height:1.3;font-weight:600;color:var(--navy)}
.seam__card--lg .seam__cardtitle{font-size:1.5rem}
/* the card an answer lands in pulses once as it arrives */
.seam__step.is-active .seam__card--target{animation:seam-land .7s var(--ease) 1.1s both}
@keyframes seam-land{0%{box-shadow:0 .75rem 2rem rgba(10,26,51,.06)}40%{box-shadow:0 0 0 .375rem rgba(249,115,22,.18),0 .75rem 2rem rgba(10,26,51,.06)}100%{box-shadow:0 .75rem 2rem rgba(10,26,51,.06)}}

/* wires between cards: label, line, head */
.seam__wire{position:relative;display:grid;gap:.25rem;text-align:center;min-width:0}
.seam__pill{display:inline-block;justify-self:center;margin:0 0 .375rem;padding:.3rem .625rem;border-radius:.4375rem;background:var(--navy);color:#fff;font-family:var(--font-display);font-weight:600;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.seam__flow{margin:0;font-size:.875rem;font-weight:500;line-height:1.3;color:rgba(10,26,51,.75)}
.seam__flow--back{color:var(--accent)}
.seam__arrow{position:relative;display:block;height:2px;border-radius:1px;margin:.25rem 0;background:var(--navy);opacity:.55;transform-origin:left center}
.seam__arrow::after{content:"";position:absolute;top:50%;width:.4375rem;height:.4375rem;border-top:1px solid var(--navy);border-right:1px solid var(--navy)}
.seam__arrow--out::after{right:0;transform:translateY(-50%) rotate(45deg)}
.seam__arrow--back{background:var(--accent);opacity:1;transform-origin:right center}
.seam__arrow--back::after{left:0;border-color:var(--accent);transform:translateY(-50%) rotate(-135deg)}
.seam__step.is-active .seam__arrow{animation:seam-draw .6s var(--ease) both}
.seam__step.is-active .seam__arrow--back{animation-delay:.35s}
@keyframes seam-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* the chosen answer travelling back into the product */
.seam__wire--enter{padding-top:1.25rem}
.seam__token{position:absolute;left:50%;top:0;transform:translate(-50%,0);padding:.45rem .875rem;border-radius:.5rem;background:var(--accent);color:#fff;font-family:var(--font-mono);font-size:.875rem;font-weight:600;white-space:nowrap;box-shadow:0 .5rem 1.25rem rgba(249,115,22,.3)}
.seam__step.is-active .seam__token{animation:seam-travel 1.1s var(--ease) .3s both}
@keyframes seam-travel{0%{transform:translate(40%,0);opacity:0}25%{opacity:1}100%{transform:translate(-150%,0);opacity:1}}

/* the example answer, under the seam */
.seam__payload{grid-column:1 / -1;justify-self:center;width:min(100%,26rem);padding:.875rem 1rem;border-radius:.5rem;border:1px solid rgba(10,26,51,.14);background:#fff;text-align:left}
.seam__payload dl{margin:0;display:grid;gap:.25rem}
.seam__payload div{display:flex;gap:.5rem;align-items:baseline;flex-wrap:wrap}
.seam__payload dt{flex:none;width:3.75rem;font-weight:600;font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(10,26,51,.65)}
.seam__payload dd{margin:0;font-family:var(--font-mono);font-size:.875rem;font-weight:600;color:var(--navy)}
.seam__payload dd.is-bad{color:var(--accent)}
.seam__payloadnote{margin:.5rem 0 0;font-size:.6875rem;font-weight:500;color:rgba(10,26,51,.7)}

/* the outcome */
.seam__results{display:grid;gap:.5rem;min-width:0}
.seam__result{display:flex;align-items:flex-start;gap:.5rem;padding:.875rem 1rem;border-radius:.625rem;font-size:.9375rem;line-height:1.4}
.seam__result.is-ok{background:rgba(22,163,74,.09);color:#15803d}
.seam__result.is-bad{background:rgba(220,38,38,.08);color:#b91c1c}
.seam__result strong{font-weight:600}
.seam__rdot{flex:none;width:.4375rem;height:.4375rem;border-radius:50%;background:currentColor;margin-top:.375rem}
.seam__step.is-active .seam__result{animation:seam-rise .5s var(--ease) both;animation-delay:calc(.15s + var(--k,0) * .18s)}

/* lists on the stage and in the text */
.seam__chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:.875rem 0 0;padding:0;list-style:none}
.seam__text .seam__chips{justify-content:center}
.seam__chips li{padding:.375rem .75rem;border-radius:.5rem;border:1px solid rgba(10,26,51,.16);background:#fff;font-size:.8125rem;font-weight:500;color:var(--navy)}
.seam__checks{margin:.5rem 0 0;padding:0;list-style:none;display:grid;gap:.5rem}
.seam__checks li{display:flex;align-items:flex-start;gap:.625rem;font-size:1rem;line-height:1.4;color:var(--navy)}
.seam__tick{flex:none;display:grid;place-items:center;width:1.125rem;height:1.125rem;border-radius:.3125rem;background:#2f7fd4;color:#fff;margin-top:.0625rem}
.seam__step.is-active .seam__chips li,.seam__step.is-active .seam__checks li{animation:seam-rise .45s var(--ease) both;animation-delay:calc(.35s + var(--k,0) * .12s)}

/* everything on the stage rises in, in order */
.seam__step.is-active .seam__anim{animation:seam-rise .55s var(--ease) both;animation-delay:calc(.1s + var(--i,0) * .18s)}
.seam__stage--row>.seam__anim:nth-child(3){--i:2}
@keyframes seam-rise{from{opacity:0;transform:translateY(.75rem)}to{opacity:1;transform:none}}

/* the words */
.seam__text{min-width:0;width:min(100%,42rem);text-align:center}
.seam__stepno{margin:0 0 .75rem;font-family:var(--font-display);font-weight:600;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.seam__steptitle{margin:0;font-family:var(--font-display);font-weight:var(--w-display);font-size:clamp(1.375rem,1.1rem + .9vw,1.875rem);line-height:1.2;letter-spacing:-.01em;color:var(--navy)}
.seam__stepbody{margin:.875rem auto 0;font-size:var(--body-size);line-height:1.6;color:#3f4b5e;max-width:36rem}
.seam__stepbody strong{font-weight:600;color:var(--accent)}
.seam__boxnote{margin:1rem 0 0;padding-top:.75rem;border-top:1px solid rgba(10,26,51,.12);font-weight:600;font-size:.8125rem;color:#1f6fc0}
.seam__step.is-active .seam__text>*{animation:seam-rise .5s var(--ease) both}
.seam__step.is-active .seam__text>:nth-child(1){animation-delay:.15s}
.seam__step.is-active .seam__text>:nth-child(2){animation-delay:.25s}
.seam__step.is-active .seam__text>:nth-child(3){animation-delay:.35s}
.seam__step.is-active .seam__text>:nth-child(4){animation-delay:.45s}
.seam__step.is-active .seam__text>:nth-child(5){animation-delay:.55s}

/* ---- back, count, next */
.seam__controls{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:clamp(1.25rem,3vw,2rem)}
.seam__ctl{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.125rem;border-radius:100px;border:1px solid rgba(10,26,51,.2);background:#fff;font:inherit;font-weight:500;font-size:.9375rem;color:var(--navy);cursor:pointer;transition:background .25s ease,color .25s ease,border-color .25s ease,transform .3s var(--ease)}
.seam__ctl:hover{transform:translateY(-.0625rem);border-color:var(--navy)}
.seam__ctl:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.seam__ctl:disabled{opacity:.35;cursor:default;transform:none}
.seam__ctl--next{background:var(--accent);border-color:var(--accent);color:#fff}
.seam__ctl--next:hover{border-color:var(--accent);filter:brightness(.92)}
.seam__count{margin:0;font-family:var(--font-display);font-weight:600;font-size:.8125rem;letter-spacing:.08em;color:var(--navy)}

/* ---- recorded on every run, quiet until the end */
.seam__foot{margin-top:clamp(1.5rem,3vw,2.25rem);padding-top:clamp(1.25rem,2.5vw,1.75rem);border-top:1px solid rgba(10,26,51,.12);opacity:.6;transition:opacity .4s ease}
.is-last .seam__foot,.seam__foot:hover{opacity:1}
.seam__foothead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.75rem;margin-bottom:1rem}
.seam__footnote{margin:0;font-size:.8125rem;color:#3f4b5e}
.seam__record{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.75rem;margin:0;padding:0;list-style:none}
.seam__record li{padding:.75rem .875rem;border-radius:.625rem;border:1px solid rgba(10,26,51,.12);background:#fff}
.seam__reclabel{margin:0 0 .3125rem;font-family:var(--font-display);font-weight:600;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(10,26,51,.7)}
.seam__rectext{margin:0;font-size:.8125rem;line-height:1.35;font-weight:500;color:var(--navy)}
.seam__closing{max-width:46rem;margin:clamp(1.25rem,2.5vw,1.75rem) 0 0;font-size:var(--body-size);line-height:1.6;color:var(--muted)}

/* ---- without JS every step is shown in order, and the controls are pointless */
html:not(.js) .seam__step{position:relative;opacity:1;visibility:visible;transform:none;grid-area:auto;margin-bottom:2rem}
html:not(.js) .seam__controls,html:not(.js) .seam__rail{display:none}

/* ---- narrow */
@media (max-width:75em){.seam__record{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:64em){
  .seam__step{gap:1.25rem}
  .seam__rail{grid-template-columns:repeat(5,minmax(0,1fr));gap:.375rem}
  .seam__railbtn{justify-content:center;padding:.5rem}
  .seam__raillabel{display:none}
  .seam__stage{min-height:0}
}
@media (max-width:40em){
  .seam__record{grid-template-columns:repeat(2,minmax(0,1fr))}
  .seam__stage--row{grid-auto-flow:row;grid-template-columns:1fr;gap:.75rem}
  .seam__wire{padding-block:.25rem}
  .seam__arrow{display:none}
  .seam__wire--enter{padding-top:0;min-height:2.25rem}
  .seam__token{top:.25rem}
  .seam__step.is-active .seam__token{animation:seam-travel-down 1s var(--ease) .3s both}
  @keyframes seam-travel-down{0%{transform:translate(-50%,1rem);opacity:0}30%{opacity:1}100%{transform:translate(-50%,-.5rem);opacity:1}}
  .seam__controls{flex-wrap:wrap}
  .seam__count{order:3;width:100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .seam__step,.seam__railbtn,.seam__ctl{transition:none}
  .seam__step.is-active *{animation:none!important}
}