/* About page: the complete customer story. Content stays visible without JS. */
.story{scroll-margin-top:84px}
.story__header{padding-bottom:clamp(32px,4vw,52px);border-bottom:1px solid var(--line)}
.story__header .shead__meta{max-width:660px}
.story__header .eyebrow{color:var(--slate)}
.story__header h2{font-size:clamp(2.4rem,4.6vw,4rem);margin:24px 0 18px}
.story__header .grad{background-image:linear-gradient(100deg,#4708C7,#7B2FF0 60%,var(--violet-lo))}
.story__dek{font-size:clamp(1.12rem,1.7vw,1.5rem);line-height:1.5;color:var(--slate);max-width:48ch}
.story__layout{display:grid;grid-template-columns:260px minmax(0,760px);
  gap:clamp(36px,6vw,96px);align-items:start;padding-top:clamp(32px,4vw,52px)}

/* Native anchor links also work with JavaScript disabled. */
.story-nav{position:sticky;top:90px;max-height:calc(100svh - 112px);overflow-y:auto;
  padding:4px 12px 8px 0;scrollbar-width:thin}
.story-nav__label{font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-bottom:16px}
.story-nav ol{list-style:none;margin:0;padding:0;counter-reset:story-link -1}
.story-nav li{counter-increment:story-link}
.story-nav a{display:grid;grid-template-columns:22px 1fr;gap:12px;padding:10px 10px;
  border-left:2px solid var(--line);font-size:.85rem;line-height:1.45;color:var(--slate);
  transition:color .2s,background .2s,border-color .2s}
.story-nav a::before{content:counter(story-link,decimal-leading-zero);font-family:var(--mono);
  font-size:10px;line-height:2;color:var(--violet)}
.story-nav a:hover,.story-nav a:focus-visible{color:var(--violet);background:var(--violet-wash);
  border-left-color:var(--violet)}

.story__body{min-width:0;font-size:1.0625rem;line-height:1.85;color:var(--slate);counter-reset:story-chapter}
.story__body p{margin:0 0 1.2em}
.story__body strong{font-weight:600;color:var(--ink)}
.story__body p:last-child{margin-bottom:0}
.story__opening,.story__chapter{scroll-margin-top:96px}
.story__chapter{margin-top:56px;padding-top:44px;border-top:1px solid var(--line);
  counter-increment:story-chapter}
.story__chapter h3{font-size:clamp(1.65rem,2.65vw,2.35rem);line-height:1.15;
  color:var(--ink);max-width:28ch;margin-bottom:28px}
.story__chapter h3::before{content:counter(story-chapter,decimal-leading-zero) " /";
  display:block;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;
  color:var(--violet);margin-bottom:16px}
.story__body .story__lead{font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.6;color:var(--ink)}
.story__quote{margin:28px 0;padding:22px 28px;border-left:3px solid var(--violet);
  background:var(--violet-wash);border-radius:0 var(--r) var(--r) 0;
  color:var(--ink);font-size:clamp(1.15rem,1.65vw,1.4rem);font-weight:500;line-height:1.55}
.story__quote--plain{background:transparent;padding-block:4px;font-size:1.15rem}
.story__path,.story__callout{padding:24px 28px;margin:24px 0;background:var(--mist);
  border:1px solid var(--line);border-radius:var(--r)}
.story__path{border-left:3px solid var(--violet);line-height:2;color:var(--ink)}
.story__path--digital{border-left-color:var(--cyan-deep);background:var(--cyan-wash)}
.story__body .story__label{font-family:var(--mono);font-size:.75rem;font-weight:500;
  letter-spacing:.08em;color:var(--slate);margin-bottom:10px}
.story__terms{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 24px;padding:0;
  list-style:none;color:var(--ink)}
.story__values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 32px;margin:28px 0}
.story__values>div{padding-left:18px;border-left:2px solid var(--line)}
.story__values h4{font-size:1.05rem;color:var(--violet);margin:0 0 10px;line-height:1.3}
.story__values p{font-size:.96rem;line-height:1.7}
.story__body .story__symbols{display:flex;align-items:center;justify-content:center;gap:28px;
  padding:24px;background:var(--mist);border-block:1px solid var(--line);font-size:1.05rem}
.story__symbols span{font-family:var(--mono);font-size:4rem;line-height:1;color:var(--violet)}
.story__logo-step{margin-top:32px;padding-left:24px;border-left:2px solid var(--violet)}
.story__logo-step--forward{border-left-color:var(--cyan-deep)}
.story__logo-step h4{font-size:1.25rem;line-height:1.3;color:var(--ink);margin-bottom:22px}
.story__actions{font-family:var(--mono);font-size:.95rem;color:var(--ink)}
.story__bridge{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px}
.story__bridge strong{font-family:var(--mono);font-size:1.1rem}
.story__worlds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:28px 0}
.story__world{border-top:3px solid var(--violet);border-radius:0 0 var(--r) var(--r);
  padding:24px;background:var(--mist)}
.story__world--digital{border-top-color:var(--cyan-deep);background:var(--cyan-wash)}
.story__world ul{color:var(--ink);font-weight:600;line-height:1.7}
.story__world li+li{margin-top:6px}
.story__chapter--closing{border-top-color:var(--violet)}
.story__signature{padding:28px;border-left:3px solid var(--violet);background:var(--violet-wash);
  margin:28px 0;color:var(--ink)}
.story__signature p{margin-bottom:10px}
.story__signature strong{color:var(--violet)}
.story__body .story__closing-line{font-family:var(--display);font-size:clamp(1.5rem,2.4vw,2rem);
  font-weight:700;letter-spacing:-.025em;line-height:1.25;color:var(--ink);margin-top:32px}
.story__signoff{font-family:var(--mono);font-weight:600;color:var(--violet)}
.story__footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;
  border-top:1px solid var(--line);padding-top:28px;margin-top:52px}
.story__footer a{font-family:var(--mono);font-size:.8rem;color:var(--violet);padding-block:8px}
.story__footer a:hover{text-decoration:underline;text-underline-offset:4px}

@media(max-width:980px){
  .story__layout{grid-template-columns:minmax(0,1fr);gap:36px}
  .story-nav{position:static;max-height:none;overflow:visible;padding:0 0 28px;border-bottom:1px solid var(--line)}
  .story-nav ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
  .story__body{max-width:760px;margin-inline:auto;width:100%}
}
@media(max-width:640px){
  .story__body{font-size:1rem;line-height:1.8}
  .story__header h2{max-width:12ch}
  .story-nav ol{grid-template-columns:1fr}
  .story-nav a{min-height:44px;align-items:center;padding-block:9px}
  .story__chapter{margin-top:40px;padding-top:32px}
  .story__values,.story__worlds{grid-template-columns:1fr}
  .story__quote,.story__path,.story__callout,.story__signature{padding:20px}
  .story__logo-step{padding-left:16px}
  .story__bridge{align-items:flex-start;flex-direction:column;gap:4px}
}
@media print{
  .story-nav,.story__footer{display:none}
  .story__layout{display:block}
  .story__body{max-width:none;color:#000}
  .story__chapter{margin-top:28px;padding-top:24px}
  .story__chapter h3{break-after:avoid}
  .story__quote,.story__path,.story__world,.story__values>div{break-inside:avoid}
}