/* Case-study interior shared by Creo, Benchmarking and Metadata. Load after /work/_chrome.css.
   Each page may set its own --accent / --tint for the product. */

:root{
  /* case-study interior */
  --ink:#141216; --ink-2:#3b3840; --muted:#6b6670; --label:#6e6973;
  --bg:var(--site-bg); --paper:#fff; --line:rgba(20,18,22,.09); --line-2:rgba(20,18,22,.16);
  --accent:#4E0973; --accent-hover:#3d0759; --tint:#f4ecf8; --tint-2:#e9d9f2;
  --ok:#147a3d; --ok-bg:#e3f5ea; --warn:#9a4300; --warn-bg:#fdf0e4;
  --r:10px; --serif:"Instrument Serif",Georgia,serif; --sans:"Inter",system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:80px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none!important; transition:none!important}}
body{margin:0; background:var(--bg); color:var(--ink); font:15.5px/1.6 var(--sans); -webkit-font-smoothing:antialiased}
button{font:inherit; color:inherit; cursor:pointer}
img{max-width:100%; height:auto; display:block}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
.wrap{max-width:1160px; margin:0 auto; padding:0 24px}
.tnum{font-variant-numeric:tabular-nums}
p{margin:0}
h1,h2{font-family:var(--serif); font-weight:400; letter-spacing:-.01em; margin:0}
h1{font-size:clamp(40px,6.2vw,74px); line-height:1.02}
h2{font-size:clamp(30px,4vw,46px); line-height:1.08}
h1 em,h2 em{color:var(--accent)}
h3{font-size:16px; font-weight:600; margin:0; line-height:1.35}
.eyebrow{font-size:11.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--label)}
.sub{color:var(--ink-2); max-width:56ch; margin-top:12px; font-size:16.5px}

/* ---------- sections + reveal ---------- */
section{padding:96px 0; border-top:1px solid var(--line)}
.head{margin-bottom:40px}
.head .eyebrow{margin-bottom:12px}
@media (max-width:760px){ section{padding:64px 0} }
/* short and early, so a fast scroll never lands on an empty section */
.rv{opacity:0; transform:translateY(10px); transition:opacity .4s var(--ease), transform .4s var(--ease)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .rv{opacity:1; transform:none} }

/* ---------- hero ---------- */
.hero{padding:80px 0 64px}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.chip{display:inline-flex; gap:6px; font-size:12.5px; padding:5px 11px; border-radius:999px; border:1px solid var(--line-2); background:var(--paper); color:var(--ink-2)}
.chip b{font-weight:500; color:var(--ink)}
.chip.status{border-color:var(--accent); color:var(--accent)}
.note-line{margin-top:20px; font-size:14px; color:var(--ink-2); max-width:62ch; padding-left:14px; border-left:2px solid var(--accent)}
.facts{display:grid; grid-template-columns:repeat(4,1fr); margin-top:48px; border:1px solid var(--line); border-radius:var(--r); background:var(--paper)}
.facts.three{grid-template-columns:repeat(3,1fr)}
.facts > div{padding:20px 22px; border-right:1px solid var(--line)}
.facts > div:last-child{border-right:0}
.facts strong{display:block; font-family:var(--serif); font-size:40px; font-weight:400; line-height:1; white-space:nowrap}
.facts strong small{font-size:.6em; color:var(--label)}
.facts > div > span{display:block; margin-top:6px; font-size:13px; color:var(--muted)}
@media (max-width:760px){
  .facts,.facts.three{grid-template-columns:1fr 1fr}
  .facts > div:nth-child(2n){border-right:0}
  .facts > div:not(:nth-last-child(-n+2)){border-bottom:1px solid var(--line)}
  .facts.three > div:last-child{grid-column:1/-1; border-top:1px solid var(--line)}
  .facts strong{font-size:34px}
}

/* ---------- problem ---------- */
.two{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start}
@media (max-width:900px){ .two{grid-template-columns:1fr} }
.quote{font-family:var(--serif); font-size:30px; line-height:1.2}
.quote small{display:block; margin-top:10px; font-family:var(--sans); font-size:13px; color:var(--muted)}
.pcards{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:40px}
.pcard{background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:22px}
.pcard svg{width:22px; height:22px; color:var(--accent); stroke-width:1.6}
.pcard h3{margin-top:14px}
.pcard p{margin-top:6px; font-size:14px; color:var(--ink-2)}
@media (max-width:900px){ .pcards{grid-template-columns:1fr} }

/* ---------- screens ---------- */
.shot{margin:0; background:var(--paper); border:1px solid var(--line-2); border-radius:14px; overflow:hidden; box-shadow:0 30px 80px -40px rgba(40,10,60,.28)}
.shot img{width:100%; height:auto}
.shot figcaption{padding:12px 16px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-2)}
.shot figcaption b{color:var(--ink); font-weight:600}
.steps{display:flex; flex-direction:column; gap:72px}
.step{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,2fr); gap:36px; align-items:start}
.step .n{font-family:var(--serif); font-size:44px; line-height:1; color:var(--accent)}
.step h3{font-family:var(--serif); font-weight:400; font-size:28px; line-height:1.15; margin-top:10px}
.step p{margin-top:10px; font-size:15px; color:var(--ink-2)}
.step .stack{display:flex; flex-direction:column; gap:16px}
@media (max-width:900px){ .step{grid-template-columns:1fr; gap:20px} }
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:760px){ .grid2{grid-template-columns:1fr} }

/* ---------- decisions (flip cards) + iterations ---------- */
.dec{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.dec.two-up{grid-template-columns:repeat(2,1fr)}
.card{background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:20px; perspective:900px; min-height:176px; position:relative; text-align:left}
.card .flipper{transition:transform .6s var(--ease); transform-style:preserve-3d; position:relative; height:100%}
.card .face,.card .back{backface-visibility:hidden}
.card .back{position:absolute; inset:0; transform:rotateY(180deg)}
.card.flip .flipper{transform:rotateY(180deg)}
.card h3{font-family:var(--serif); font-weight:400; font-size:24px; line-height:1.15; margin:8px 0}
.card p{font-size:14px; color:var(--ink-2)}
.card .tag{display:inline-block; margin-top:10px; font-size:11px; color:var(--accent)}
.card .hint{position:absolute; right:16px; bottom:14px; font-size:11.5px; color:var(--label)}
.card .back .eyebrow{color:var(--accent)}
@media (max-width:900px){ .dec,.dec.two-up{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .dec,.dec.two-up{grid-template-columns:1fr} }

.iters{display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-top:44px}
.it{border-top:2px solid var(--line-2); padding-top:12px}
.it.keep{border-color:var(--accent)}
.it span{font-family:var(--serif); font-size:20px; color:var(--label)}
.it.keep span{color:var(--accent)}
.it p{font-size:13px; color:var(--ink-2); margin-top:4px}
.it em{font-style:normal; font-size:11px; color:var(--label)}
@media (max-width:760px){ .iters{grid-template-columns:repeat(3,1fr); row-gap:20px} }

/* ---------- lists ---------- */
.rows{list-style:none; margin:0; padding:0; border-top:1px solid var(--line-2)}
.rows li{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:24px; padding:16px 0; border-bottom:1px solid var(--line)}
.rows b{font-weight:600}
.rows span{color:var(--ink-2); font-size:14.5px}
@media (max-width:760px){ .rows li{grid-template-columns:1fr; gap:4px} }
.who{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:48px}
.who div{background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:18px}
.who b{display:block; font-family:var(--serif); font-weight:400; font-size:21px; line-height:1.15}
.who p{margin-top:8px; font-size:13.5px; color:var(--ink-2)}
@media (max-width:900px){ .who{grid-template-columns:1fr 1fr} }

/* ---------- results ---------- */
.res{display:grid; grid-template-columns:repeat(5,1fr); gap:10px}
.res div{background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:18px}
.res strong{display:block; font-family:var(--serif); font-weight:400; font-size:28px; line-height:1.1; color:var(--accent)}
.res p{font-size:13px; color:var(--ink-2); margin-top:8px}
.res small{display:block; margin-top:8px; font-size:11.5px; color:var(--label)}
.note{margin-top:14px; font-size:13px; color:var(--warn)}
.note.ok{color:var(--ok)}
@media (max-width:900px){ .res{grid-template-columns:1fr 1fr} }
.ba{width:100%; border-collapse:collapse; background:var(--paper); border:1px solid var(--line); border-radius:12px; overflow:hidden; font-size:14.5px}
.ba th,.ba td{padding:14px 18px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line)}
.ba tr:last-child td{border-bottom:0}
.ba thead th{font-size:11.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--label); background:#faf9f7}
.ba td:first-child{font-weight:600; width:22%}
.ba td:nth-child(2){color:var(--muted)}
.ba td:last-child{color:var(--ink)}
@media (max-width:640px){ .ba thead{display:none} .ba tr{display:block; border-bottom:1px solid var(--line); padding:8px 0} .ba td{display:block; border:0; padding:4px 16px; width:auto} .ba td:nth-child(2)::before{content:"Before · "; color:var(--label)} .ba td:last-child::before{content:"After · "; color:var(--accent)} }
.reflect{margin-top:40px; max-width:68ch; font-family:var(--serif); font-size:24px; line-height:1.35}

.next{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; list-style:none; padding:0; margin:0; counter-reset:n}
.next li{counter-increment:n; border-top:1px solid var(--line-2); padding-top:14px; font-size:14px; color:var(--ink-2)}
.next li::before{content:counter(n,decimal-leading-zero); display:block; font-family:var(--serif); font-size:26px; color:var(--label); margin-bottom:6px}
.next b{display:block; color:var(--ink); font-weight:600; margin-bottom:2px}
@media (max-width:900px){ .next{grid-template-columns:1fr 1fr} }

/* ---------- prototype embed + walkthrough line ---------- */
.embed{position:relative; aspect-ratio:16/10; background:var(--paper); border:1px solid var(--line-2); border-radius:14px; overflow:hidden}
.embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
@media (max-width:760px){ .embed{aspect-ratio:3/4} }
.links{display:flex; flex-wrap:wrap; gap:24px; margin-top:20px; font-size:14px}
.tl{color:var(--accent); text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:1px}
.tl:hover{color:var(--accent-hover)}
.confidential{max-width:62ch; font-family:var(--serif); font-size:clamp(22px,2.6vw,28px); line-height:1.3}