:root{--ink:#151513;--muted:#706d67;--paper:#f4f1ea;--line:rgba(21,21,19,.13);--orange:#d9572b;--serif:var(--font-display);--sans:var(--font-ui);--mono:var(--font-mono);--max:1120px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}.shell{width:min(calc(100% - 64px),var(--max));margin:auto}a{color:inherit}.study-nav{height:70px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.06em}.study-nav a{text-decoration:none}.study-nav a:hover{color:var(--orange)}.study-hero{padding:90px 0 70px;border-bottom:1px solid var(--line)}.study-eyebrow,.label{font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--orange)}.study-hero h1{font:400 clamp(64px,9vw,125px)/.86 var(--serif);letter-spacing:-.04em;margin:20px 0 25px;max-width:1030px}.study-deck{font-size:22px;line-height:1.45;max-width:780px;color:#46443f}.study-meta{display:flex;flex-wrap:wrap;gap:9px;margin-top:34px}.study-meta span{border:1px solid var(--line);padding:6px 9px;font:400 10px var(--mono);text-transform:uppercase}.study-body{display:grid;grid-template-columns:220px 1fr;gap:80px;padding:80px 0 110px}.toc{position:sticky;top:40px;align-self:start}.toc a{display:block;text-decoration:none;font:400 11px/1.4 var(--mono);text-transform:uppercase;padding:8px 0;color:var(--muted)}.toc a:hover{color:var(--orange)}.story{max-width:760px}.story section{padding:0 0 70px}.story h2{font:400 48px/1 var(--serif);letter-spacing:-.02em;margin:0 0 20px}.story h3{font-size:18px;margin:28px 0 8px}.story p{margin:0 0 16px;color:#47453f}.story strong{color:var(--ink)}.snapshot{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);margin:28px 0 0}.snapshot div{padding:20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.snapshot strong{font:400 34px var(--serif);display:block}.snapshot span{font:400 10px var(--mono);text-transform:uppercase;color:var(--muted)}.decision{border-left:3px solid var(--orange);padding:5px 0 5px 20px;margin:28px 0}.decision p{font-size:19px;color:var(--ink);margin:0}.steps{counter-reset:step;display:grid;gap:0;border-top:1px solid var(--line);margin-top:25px}.steps article{display:grid;grid-template-columns:55px 1fr;gap:16px;padding:22px 0;border-bottom:1px solid var(--line)}.steps article:before{counter-increment:step;content:'0' counter(step);font:500 10px var(--mono);color:var(--orange)}.steps h3{margin:0 0 5px}.steps p{margin:0}.evidence-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}.evidence-list div{border:1px solid var(--line);padding:20px}.evidence-list strong{display:block;font:400 28px var(--serif);margin-bottom:5px}.takeaway{background:#171715;color:#f4f1ea;padding:35px;margin-top:16px}.takeaway .label{color:#f07a52}.takeaway p{color:#c7c4bc;font-size:18px;margin:14px 0 0}.next-case{border-top:1px solid var(--line);padding:45px 0 70px;display:flex;justify-content:space-between;gap:30px}.next-case a{text-decoration:none;font:400 28px var(--serif)}.next-case a:hover{color:var(--orange)}.live-link{display:inline-flex;margin-top:12px;font:500 12px var(--mono);text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--ink)}.live-link:hover{color:var(--orange);border-color:var(--orange)}ul.clean{padding-left:20px;color:#47453f}ul.clean li{margin:8px 0}@media(max-width:780px){.shell{width:min(calc(100% - 32px),var(--max))}.study-body{grid-template-columns:1fr;gap:25px;padding-top:45px}.toc{position:static;display:flex;gap:14px;overflow:auto;border-bottom:1px solid var(--line);padding-bottom:8px}.toc a{white-space:nowrap}.snapshot{grid-template-columns:1fr}.evidence-list{grid-template-columns:1fr}.study-hero{padding-top:65px}.study-hero h1{font-size:65px}.story h2{font-size:42px}}


/* Versa media */
.hero-actions{display:flex;flex-wrap:wrap;gap:20px;align-items:center;margin-top:16px}.hero-actions .live-link{margin-top:0}.live-link.secondary{color:var(--muted);border-color:var(--muted)}.live-link.secondary:hover{color:var(--orange);border-color:var(--orange)}
.media-panel{margin:30px 0 8px}.media-panel img{display:block;width:100%;height:auto;border:1px solid var(--line);background:#ebe7de}.media-panel figcaption{margin-top:10px;font:400 11px/1.55 var(--mono);color:var(--muted)}.media-panel figcaption strong{color:var(--ink)}
.product-evolution img{max-width:760px}
.media-with-note{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(210px,.75fr);gap:24px;align-items:start;margin:30px 0}.media-with-note .media-panel{margin:0}.version-note{border-top:1px solid var(--line);padding-top:18px}.version-note p{font-size:14px}.text-link{font:500 11px var(--mono);text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:2px}.text-link:hover{color:var(--orange);border-color:var(--orange)}
@media(max-width:780px){.media-with-note{grid-template-columns:1fr}.hero-actions{gap:14px}}

/* Versa V3 case study */
.versa-hero{padding-bottom:78px}.versa-hero .hero-product-shot{margin-top:58px}.hero-product-shot img{border-radius:2px}.versa-story{max-width:820px}.versa-story section{scroll-margin-top:24px}.data-note,.small-note{font:400 10px/1.55 var(--mono)!important;color:var(--muted)!important;margin-top:12px!important}
.headline-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line);margin:34px 0 0}.headline-metric{min-height:150px;padding:24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;gap:18px}.headline-metric strong{font:400 clamp(38px,5vw,58px)/.9 var(--serif);letter-spacing:-.025em}.headline-metric span{font:400 11px/1.5 var(--mono);text-transform:uppercase;color:var(--muted);max-width:260px}
.pipeline{border-top:1px solid var(--line);margin:30px 0 42px}.pipeline>div{display:grid;grid-template-columns:48px 160px 1fr;gap:18px;align-items:start;padding:18px 0;border-bottom:1px solid var(--line)}.pipeline>div>span{font:500 10px var(--mono);color:var(--orange)}.pipeline>div>strong{font-size:14px}.pipeline>div>p{margin:0;font-size:14px}.rubric-chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 34px}.rubric-chips span{border:1px solid var(--line);padding:7px 10px;font:400 10px var(--mono);text-transform:uppercase;color:var(--muted)}
.funnel{display:flex;align-items:stretch;gap:8px;margin:38px 0 0;overflow-x:auto;padding-bottom:6px}.funnel>div{flex:1 0 115px;border:1px solid var(--line);padding:15px;min-height:100px}.funnel strong{display:block;font:400 28px/1 var(--serif);margin-bottom:8px}.funnel span{display:block;font:400 9px/1.4 var(--mono);text-transform:uppercase;color:var(--muted)}.funnel i{align-self:center;font-style:normal;color:var(--orange);font-size:13px}
.findings-list{border-top:1px solid var(--line);margin-top:30px}.finding{display:grid;grid-template-columns:150px 1fr;gap:28px;padding:30px 0;border-bottom:1px solid var(--line)}.finding-number{font:400 50px/.9 var(--serif);letter-spacing:-.025em;color:var(--orange)}.finding h3{margin:0 0 9px;font-size:18px}.finding p{margin:0 0 10px}.featured-finding{background:rgba(217,87,43,.055);margin-left:-22px;margin-right:-22px;padding-left:22px;padding-right:22px}.finding-callout{font-size:16px!important;color:var(--ink)!important;font-weight:500}.versa-takeaway{margin-top:34px} .takeaway .highlight {background: var(--purple-100); padding: 2px;}
.version-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:34px 0 54px}.version-card{margin:0;border:1px solid var(--line);background:rgba(255,255,255,.12)}.version-card img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;background:#e8e4db;border-bottom:1px solid var(--line)}.version-card figcaption{padding:16px}.version-card figcaption>span{display:block;font:500 9px var(--mono);color:var(--orange);margin-bottom:8px}.version-card figcaption>strong{display:block;font-size:14px;margin-bottom:5px}.version-card figcaption>p{font-size:12px;line-height:1.5;margin:0;color:var(--muted)}
.story-split{display:grid;grid-template-columns:minmax(180px,.75fr) minmax(0,1.25fr);gap:44px;padding:30px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:24px 0 34px}.story-split h3{font:400 32px/1.05 var(--serif);margin:8px 0 0}.story-split>div:last-child p:last-child{margin-bottom:0}.device-gallery{display:grid;gap:34px;margin:36px 0}.mini-label{font:500 9px var(--mono)!important;text-transform:uppercase;letter-spacing:.08em;color:var(--orange)!important}.phone-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.tablet-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.device-gallery figure{margin:0;background:#eae6dd;border:1px solid var(--line);overflow:hidden}.device-gallery img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}.phone-row figure{aspect-ratio:944/2048;border-radius:18px}.tablet-row figure{aspect-ratio:2048/1344;border-radius:10px}
.workflow-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:30px 0}.workflow-cards article,.next-grid article{border:1px solid var(--line);padding:22px}.workflow-cards article>span,.next-grid article>span{font:500 9px var(--mono);color:var(--orange)}.workflow-cards h3,.next-grid h3{margin:26px 0 8px;font-size:16px}.workflow-cards p,.next-grid p{font-size:13px;line-height:1.6;margin:0}.tool-cloud{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 38px}.tool-cloud span,.tool-cloud a{border:1px solid var(--line);padding:7px 10px;font:400 10px var(--mono);text-transform:uppercase;text-decoration:none;color:var(--muted)}.tool-cloud a:hover{color:var(--orange);border-color:var(--orange)}.design-studio-note{border-left:3px solid var(--orange);padding:22px 0 8px 24px;margin-top:18px}.design-studio-note h3{font:400 30px/1.05 var(--serif);margin:8px 0 14px}.design-studio-note p{max-width:680px}
.signal-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:28px 0}.signal-grid article{border:1px solid var(--line);padding:24px}.signal-grid h3{font:400 28px/1.05 var(--serif);margin:12px 0 16px}.signal-grid article>p:last-child{font-size:13px;margin:0}.feedback-loop{display:flex;align-items:center;gap:9px;overflow-x:auto;padding:18px 0 8px;margin:20px 0 28px}.feedback-loop span{white-space:nowrap;border:1px solid var(--line);padding:9px 11px;font:400 9px var(--mono);text-transform:uppercase}.feedback-loop i{font-style:normal;color:var(--orange)}
.next-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:30px 0 38px}

@media(max-width:980px){.version-grid{grid-template-columns:1fr}.version-card img{aspect-ratio:16/8}.funnel{gap:6px}}
@media(max-width:780px){.versa-hero .hero-product-shot{margin-top:40px}.headline-metrics{grid-template-columns:1fr}.headline-metric{min-height:125px}.pipeline>div{grid-template-columns:38px 1fr;gap:10px}.pipeline>div>p{grid-column:2}.finding{grid-template-columns:1fr;gap:14px}.finding-number{font-size:46px}.featured-finding{margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px}.story-split{grid-template-columns:1fr;gap:10px}.workflow-cards,.signal-grid,.next-grid{grid-template-columns:1fr}.phone-row{grid-template-columns:repeat(3,minmax(120px,1fr));overflow-x:auto;padding-bottom:8px}.phone-row figure{min-width:160px}.tablet-row{grid-template-columns:1fr}.version-card img{aspect-ratio:auto}.funnel>div{flex-basis:108px}}
@media(max-width:520px){.phone-row{grid-template-columns:repeat(3,155px)}.headline-metric strong{font-size:42px}.story-split h3{font-size:28px}.device-gallery{margin-left:-2px;margin-right:-2px}}

/* --------------------------------------------------------------------------
   Case-study design system alignment — August 2026
   -------------------------------------------------------------------------- */
:root{
  --ink:var(--warm-grey-1000);
  --muted:var(--warm-grey-700);
  --paper:var(--warm-grey-100);
  --line:var(--warm-grey-200);
  --orange:var(--purple-600);
  --serif:var(--font-display);
  --sans:var(--font-ui);
  --mono:var(--font-mono);
}
body{font-family:var(--font-ui);font-size:var(--text-base);line-height:var(--leading-normal);background:var(--warm-grey-100);color:var(--warm-grey-1000)}
strong,b{font-weight:500}
.shell{width:min(calc(100% - var(--space-3xl)),var(--max))}
.study-nav{height:var(--space-3xl);border:0;box-shadow:var(--box-shadow-bottom);font:500 var(--text-xs) var(--font-ui);text-transform:none;letter-spacing:0}
.study-hero{padding:var(--space-3xl) 0 var(--space-2xl);border:0;}
.study-eyebrow{display:none}
.study-hero h1{font:500 clamp(var(--text-4xl),5vw,var(--text-6xl))/var(--leading-tight) var(--font-display);letter-spacing:-.025em;margin:0 0 var(--space-base);max-width:900px}
.study-deck{font-size:var(--text-lg);line-height:var(--leading-normal);max-width:760px;color:var(--warm-grey-800)}
.study-meta{gap:var(--space-xs);margin-top:var(--space-lg)}
.study-meta span{ align-items: center; border:0;padding:var(--space-xs) var(--space-sm);font:400 var(--text-xs) var(--font-ui);text-transform:none;background:#fff;border-radius:var(--radius-round);box-shadow:var(--box-shadow)}
.study-body{grid-template-columns:190px 1fr;gap:var(--space-3xl);padding:var(--space-3xl) 0 var(--space-4xl)}
.toc{top:var(--space-xl)}
.toc a{font:400 var(--text-sm)/var(--leading-snug) var(--font-ui);text-transform:none;padding:var(--space-xs) 0}
.story{max-width:760px}.story section{padding:0 0 var(--space-3xl)}
.story h2{font:500 clamp(var(--text-2xl),3vw,var(--text-4xl))/var(--leading-tight) var(--font-display);letter-spacing:-.015em;margin:0 0 var(--space-base)}
.story h3{font:500 var(--text-lg)/var(--leading-snug) var(--font-display);margin:var(--space-lg) 0 var(--space-xs)}
.story p{margin:0 0 var(--space-base);color:var(--warm-grey-800);font-size:var(--text-base)}
.label{font:500 var(--text-xs) var(--font-ui);text-transform:none;letter-spacing:0;color:var(--purple-600);margin-bottom:var(--space-xs)!important}
.snapshot{gap:var(--space-sm);border:0;margin:var(--space-lg) 0 0;grid-template-columns:repeat(3,1fr)}
.snapshot div{padding:var(--space-base);border:0;border-radius:var(--radius-m);background:#fff;box-shadow:var(--box-shadow)}
.snapshot strong{font:500 var(--text-2xl) var(--font-display)}
.snapshot span{font:400 var(--text-xs) var(--font-ui);text-transform:none}
.decision{border:0;box-shadow:inset 3px 0 0 var(--purple-600);padding:var(--space-xs) 0 var(--space-xs) var(--space-base);margin:var(--space-lg) 0}
.decision p{font-size:var(--text-lg)}
.steps{gap:var(--space-sm);border:0;margin-top:var(--space-lg)}
.steps article{grid-template-columns:44px 1fr;gap:var(--space-sm);padding:var(--space-base);border:0;border-radius:var(--radius-m);background:#fff;box-shadow:var(--box-shadow)}
.steps article:before{font:500 var(--text-xs) var(--font-ui);color:var(--purple-600)}
.evidence-list{gap:var(--space-sm)}
.evidence-list div{border:0;border-radius:var(--radius-m);padding:var(--space-base);background:#fff;box-shadow:var(--box-shadow)}
.evidence-list strong{font:500 var(--text-xl) var(--font-display);margin-bottom:var(--space-xs)}
.takeaway{background:var(--purple-1000);color:var(--warm-grey-100);padding:var(--space-xl);margin-top:var(--space-base);border-radius:var(--radius-m);box-shadow:var(--box-shadow)}
.takeaway .label{color:var(--purple-200)}.takeaway p{color:var(--purple-100);font-size:var(--text-base);margin:var(--space-sm) 0 0}
.next-case{border:0;box-shadow:var(--box-shadow-top);padding:var(--space-xl) 0 var(--space-3xl)}
.next-case a{font:500 var(--text-xl) var(--font-display)}
.live-link{font:500 var(--text-sm) var(--font-ui);text-transform:none;border:0;}

.headline-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-sm);border:0;margin:var(--space-lg) 0 0}
.headline-metric{min-height:130px;padding:var(--space-base);border:0;border-radius:var(--radius-m);background:#fff;box-shadow:var(--box-shadow);gap:var(--space-base)}
.headline-metric strong{font:500 clamp(var(--text-2xl),4vw,var(--text-4xl))/var(--leading-tight) var(--font-display)}
.headline-metric span{font:400 var(--text-xs)/var(--leading-normal) var(--font-ui);text-transform:none}
.funnel{gap:var(--space-xs);margin:var(--space-lg) 0 0}.funnel>div{border:0;padding:var(--space-sm);min-height:88px;border-radius:var(--radius-m);background:#fff;box-shadow:var(--box-shadow)}
.funnel strong{font:500 var(--text-xl) var(--font-display);margin-bottom:var(--space-xs)}
.funnel span{font:400 var(--text-xs)/var(--leading-snug) var(--font-ui);text-transform:none}
.findings-list{border:0;margin-top:var(--space-lg)}
.finding{grid-template-columns:120px 1fr;gap:var(--space-lg);padding:var(--space-lg) 0;border:0;}
.finding-number{font:500 var(--text-3xl)/var(--leading-tight) var(--font-display);color:var(--purple-600)}
.finding h3{font-size:var(--text-lg);margin:0 0 var(--space-xs)}
.featured-finding{background:var(--purple-100);margin-left:calc(-1 * var(--space-base));margin-right:calc(-1 * var(--space-base));padding-left:var(--space-base);padding-right:var(--space-base)}
.finding-callout{font-size:var(--text-base)!important;font-weight:500}
.story-split{grid-template-columns:minmax(180px,.75fr) minmax(0,1.25fr);gap:var(--space-xl);padding:var(--space-lg) 0;border:0;box-shadow:var(--box-shadow-top),var(--box-shadow-bottom);margin:var(--space-base) 0 var(--space-xl)}
.story-split h3{font:500 var(--text-2xl)/var(--leading-tight) var(--font-display);margin:var(--space-xs) 0 0}
.device-gallery{gap:var(--space-xl);margin:var(--space-xl) 0}
.mini-label{font:500 var(--text-xs) var(--font-ui)!important;text-transform:none;letter-spacing:0;color:var(--purple-600)!important}
.phone-row,.tablet-row{gap:var(--space-sm)}
.device-gallery figure{background:var(--warm-grey-200);border:0;box-shadow:var(--box-shadow)}
.phone-row figure{border-radius:var(--radius-xl)}.tablet-row figure{border-radius:var(--radius-lg)}
.workflow-cards{gap:var(--space-sm);margin:var(--space-lg) 0}.workflow-cards article,.next-grid article{border:0;padding:var(--space-base);border-radius:var(--radius-m);background:#fff;box-shadow:var(--box-shadow)}
.workflow-cards article>span,.next-grid article>span{font:500 var(--text-xs) var(--font-ui);color:var(--purple-600)}
.workflow-cards h3,.next-grid h3{margin:var(--space-lg) 0 var(--space-xs);font-size:var(--text-base)}
.workflow-cards p,.next-grid p{font-size:var(--text-sm)}
.tool-cloud{gap:var(--space-xs);margin:var(--space-lg) 0 var(--space-xl)}
.tool-cloud span,.tool-cloud a{border:0;padding:var(--space-xs) var(--space-sm);font:400 var(--text-xs) var(--font-ui);text-transform:none;background:#fff;border-radius:var(--radius-round);box-shadow:var(--box-shadow)}
.design-studio-note{border:0;box-shadow:inset 3px 0 0 var(--purple-600);padding:var(--space-base) 0 var(--space-xs) var(--space-base);margin-top:var(--space-base)}
.design-studio-note h3{font:500 var(--text-2xl)/var(--leading-tight) var(--font-display);margin:var(--space-xs) 0 var(--space-sm)}
.signal-grid{gap:var(--space-sm);margin:var(--space-lg) 0}.signal-grid article{border:0;padding:var(--space-base);border-radius:var(--radius-m);background:#fff;box-shadow:var(--box-shadow)}
.signal-grid h3{font:500 var(--text-xl)/var(--leading-tight) var(--font-display);margin:var(--space-xs) 0 var(--space-sm)}
.signal-grid article>p:last-child{font-size:var(--text-sm)}
.feedback-loop{gap:var(--space-xs);padding:var(--space-base) 0 var(--space-xs);margin:var(--space-base) 0 var(--space-lg)}
.feedback-loop span{border:0;padding:var(--space-xs) var(--space-sm);font:400 var(--text-xs) var(--font-ui);text-transform:none;background:#fff;border-radius:var(--radius-round);box-shadow:var(--box-shadow)}

/* Existing image-based components: keep the same structure, remove hard borders. */
.version-grid{gap:var(--space-sm)!important}.version-card{border:0!important;border-radius:var(--radius-m);box-shadow:var(--box-shadow);overflow:hidden;background:#fff}
.version-card figcaption{padding:var(--space-base)!important}.version-card figcaption strong{font-weight:500!important}

@media(max-width:780px){
  .shell{width:min(calc(100% - var(--space-xl)),var(--max))}.study-body{gap:var(--space-lg);padding-top:var(--space-xl)}
  .toc{border:0;box-shadow:var(--box-shadow-bottom);padding-bottom:var(--space-xs)}
  .study-hero{padding-top:var(--space-2xl)}.study-hero h1{font-size:var(--text-4xl)}.story h2{font-size:var(--text-2xl)}
  .headline-metrics,.snapshot,.evidence-list,.signal-grid,.workflow-cards{grid-template-columns:1fr}.finding{grid-template-columns:1fr;gap:var(--space-xs)}
}

.toc a{
  transition:color 120ms ease;
  font-size: 12px;
}
.toc a.is-active,
.toc a[aria-current="location"]{
  color:var(--purple-600);
}
.study-body {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3xl);
}

.toc {
  flex: 0 0 190px;
}

.story {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 780px) {
  .study-body {
    flex-direction: column;
    align-items: stretch;
  }

  .toc {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-sm);
    overflow: visible;
  }

  .toc a {
    display: inline-flex;
    flex: 0 1 auto;
    white-space: normal;
  }
}