/* ─────────────────────────────────────────────────────────
   Shopify 2.0 Theme Migration Recovery
   /case-studies/shopify-theme-migration-recovery/

   Ported from the supplied standalone document. Every selector is scoped
   under .smr: the source uses very generic class names (.hero, .card, .nav,
   .band, .cta, .foot) that would collide with theme styles otherwise.
   Source comments were stripped before scoping — left in, they leaked into
   selector text and left the following rule unprefixed.
   ───────────────────────────────────────────────────────── */

.smr{
  --paper:#FAFAFA;
  --paper-2:#F1F1EF;
  --ink:#0A0A0C;
  --ink-2:#3A3A3E;
  --ink-3:#6B6B70;
  --ink-4:#A3A3A8;
  --line:rgba(10,10,12,.10);
  --line-2:rgba(10,10,12,.06);
  --card:#0A0A0C;
  --card-2:#141416;
  --card-line:rgba(255,255,255,.10);
  --card-ink-2:#C9C9CC;
  --card-ink-3:#87878C;
  --red:#EC1C39;
  --red-dim:rgba(236,28,57,.12);
  --cyan:#2FBFD6;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --disp:"Inter Tight","Inter",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --maxw:1180px;
  color-scheme:light;
}
.smr *{box-sizing:border-box}
.smr{scroll-behavior:smooth}
.smr{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.smr img{max-width:100%;display:block}
.smr .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.smr .narrow{max-width:760px}
.smr h1,
.smr h2,
.smr h3,
.smr h4{font-family:var(--disp);font-weight:800;letter-spacing:-.03em;line-height:1.04;margin:0}
.smr p{margin:0 0 18px}
.smr .lead{font-size:clamp(18px,1.9vw,21px);color:var(--ink-2);line-height:1.55}
.smr .dim{color:var(--ink-3)}
.smr .mono{font-family:var(--mono)}
.smr .eyebrow{
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:10px;
}
.smr .eyebrow::before{content:"";width:22px;height:2px;background:var(--red);flex:none}
.smr .eyebrow.on-dark{color:var(--card-ink-2)}
.smr .nav{position:sticky;top:0;z-index:50;background:rgba(250,250,250,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.smr .nav__row{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.smr .nav__mark{font-family:var(--disp);font-weight:900;font-size:19px;letter-spacing:.02em}
.smr .nav__mark span{color:var(--red)}
.smr .nav__links{display:flex;gap:28px;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--ink-2)}
.smr .nav__links a{text-decoration:none;color:inherit}
.smr .nav__links a:hover{color:var(--ink)}
.smr .nav__cta{font-size:13px;font-weight:700;color:var(--red);text-decoration:none;white-space:nowrap}
@media (max-width:760px){
.smr .nav__links{display:none}}
.smr .hero{padding:clamp(64px,9vw,108px) 0 clamp(48px,6vw,72px)}
.smr .hero h1{font-size:clamp(38px,5.6vw,66px);letter-spacing:-.035em;margin:22px 0 24px}
.smr .hero h1 em{font-style:normal;color:var(--red)}
.smr .hero__stats{display:flex;flex-wrap:wrap;gap:0;margin-top:40px;border-top:1px solid var(--line);padding-top:26px}
.smr .hstat{flex:1 1 150px;padding:0 24px 0 0;position:relative}
/* The source padded only the right, so each divider sat 24px from the text
   before it and flush against the text after it. Pad both sides of every
   item that follows a divider so the gutter reads even. */
.smr .hstat:not(:first-child){padding-left:24px}
.smr .hstat:not(:last-child)::after{content:"";position:absolute;right:0;top:2px;bottom:2px;width:1px;background:var(--line)}
.smr .hstat__v{font-family:var(--disp);font-weight:800;font-size:clamp(26px,3vw,34px);letter-spacing:-.02em;color:var(--ink)}
.smr .hstat__l{font-size:12.5px;color:var(--ink-3);margin-top:6px;line-height:1.4;max-width:15ch}
.smr .band{padding:clamp(56px,7vw,96px) 0}
.smr .card{background:var(--card);border-radius:14px;padding:clamp(32px,5vw,56px);color:#fff;position:relative;overflow:hidden}
.smr .card::before{content:"";position:absolute;inset:0;background:
  radial-gradient(60% 70% at 88% 0%,rgba(236,28,57,.14),transparent 60%);pointer-events:none}
.smr .card__top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;position:relative}
.smr .card__num{font-family:var(--mono);font-size:12.5px;color:var(--card-ink-3);letter-spacing:.08em}
.smr .pill{display:inline-flex;align-items:center;border:1px solid var(--card-line);border-radius:99px;
  padding:6px 14px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--card-ink-2)}
.smr .card__name{font-family:var(--disp);font-size:clamp(26px,3.4vw,38px);font-weight:800;letter-spacing:-.02em;
  margin:22px 0 6px;position:relative}
.smr .card__desc{color:var(--card-ink-2);max-width:52ch;font-size:15px;margin-bottom:0;position:relative}
.smr .card__body{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-end;margin-top:36px;position:relative}
.smr .card__stat{display:flex;flex-direction:column}
.smr .card__stat .v{font-family:var(--disp);font-weight:900;letter-spacing:-.04em;color:var(--red);
  font-size:clamp(58px,8vw,104px);line-height:.88;display:flex}
.smr .card__stat .l{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--card-ink-2);
  font-weight:700;margin-top:10px}
.smr .card__tags{display:flex;flex-wrap:wrap;gap:16px;margin-left:auto}
.smr .tag{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--card-ink-2);font-weight:500}
.smr .tag i{width:7px;height:7px;border-radius:50%;background:var(--cyan);flex:none}
.smr .card__foot{margin-top:34px;padding-top:22px;border-top:1px solid var(--card-line);position:relative;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.smr .readwork{color:var(--red);text-decoration:none;font-weight:700;font-size:14px}
.smr .readwork:hover{text-decoration:underline}
.smr .confnote{font-size:12px;color:var(--card-ink-3)}
.smr .sectionhead{margin-bottom:40px}
.smr .sectionhead h2{font-size:clamp(28px,3.6vw,42px);letter-spacing:-.03em;margin:16px 0 14px;max-width:16ch}
.smr .sectionhead p{max-width:60ch}
.smr .mtable{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:13.5px;margin-top:8px}
.smr .mtable th,
.smr .mtable td{padding:14px 16px;text-align:right;border-bottom:1px solid var(--line)}
.smr .mtable th:first-child,
.smr .mtable td:first-child{text-align:left;font-family:var(--sans);font-weight:600}
.smr .mtable thead th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  font-family:var(--sans);font-weight:700;border-bottom:1px solid var(--ink)}
.smr .mtable td.neg{color:var(--red);font-weight:600}
.smr .mtable tbody tr:hover{background:var(--paper-2)}
.smr .findings{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:8px}
.smr .fnd{background:var(--paper);padding:30px 28px}
.smr .fnd__n{font-family:var(--mono);font-size:13px;color:var(--red);font-weight:600;margin-bottom:14px}
.smr .fnd__t{font-family:var(--disp);font-size:18px;font-weight:700;letter-spacing:-.015em;margin-bottom:10px}
.smr .fnd__b{font-size:14.5px;color:var(--ink-2);margin-bottom:10px}
.smr .fnd__i{font-size:13px;color:var(--ink-3);border-top:1px solid var(--line-2);padding-top:10px;margin:0}
.smr .fnd__i b{color:var(--ink-2);font-weight:600}
@media (max-width:820px){
.smr .findings{grid-template-columns:1fr}}
.smr .band--dark{background:var(--ink);color:#fff}
.smr .band--dark .eyebrow{color:var(--card-ink-2)}
.smr .band--dark .sectionhead h2{color:#fff}
.smr .band--dark .sectionhead p{color:var(--card-ink-2)}
.smr .steps{counter-reset:step;margin-top:8px;border-top:1px solid var(--card-line)}
.smr .step{display:grid;grid-template-columns:64px 1fr;gap:24px;padding:26px 0;border-bottom:1px solid var(--card-line)}
.smr .step__n{font-family:var(--mono);font-size:14px;color:var(--red);font-weight:600;padding-top:2px}
.smr .step__t{font-family:var(--disp);font-size:18px;font-weight:700;letter-spacing:-.015em;margin-bottom:8px;color:#fff}
.smr .step__b{color:var(--card-ink-2);font-size:14.5px;margin:0}
.smr .fig{background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:28px 28px 20px;margin-top:8px}
.smr .fig__h{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:6px}
.smr .fig__t{font-family:var(--disp);font-size:16.5px;font-weight:700;letter-spacing:-.01em}
.smr .fig__s{font-size:12.5px;color:var(--ink-3);margin-top:4px;max-width:520px}
.smr .legend{display:flex;gap:18px;margin:16px 0 2px}
.smr .lg{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-2)}
.smr .lg i{width:14px;height:3px;border-radius:2px}
.smr .chartbox{position:relative;width:100%}
.smr .chartbox svg{display:block;width:100%;height:auto;overflow:visible}
.smr .tt{position:absolute;pointer-events:none;opacity:0;transition:opacity .12s;background:var(--ink);color:#fff;
  border-radius:6px;padding:10px 12px;font-size:12px;line-height:1.5;min-width:150px;z-index:5;
  box-shadow:0 12px 28px rgba(0,0,0,.18)}
.smr .tt.on{opacity:1}
.smr .tt__t{font-family:var(--disp);font-weight:700;font-size:12.5px;margin-bottom:6px}
.smr .tt__r{display:flex;justify-content:space-between;gap:14px}
.smr .tt__r span:last-child{font-family:var(--mono);font-weight:600}
.smr .fig figcaption{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-3);line-height:1.55}
.smr .resultwall{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:28px}
.smr .rst{background:var(--paper);padding:26px 24px}
.smr .rst__v{font-family:var(--disp);font-weight:900;letter-spacing:-.03em;font-size:clamp(30px,3.6vw,42px);color:var(--red)}
.smr .rst__l{font-size:12.5px;color:var(--ink-3);margin-top:8px;line-height:1.4}
@media (max-width:760px){
.smr .resultwall{grid-template-columns:1fr}}
.smr .pull{border-left:3px solid var(--red);padding:8px 0 8px 28px;margin:0}
.smr .pull q{font-family:var(--disp);font-size:clamp(21px,2.6vw,28px);font-weight:700;letter-spacing:-.02em;
  line-height:1.28;quotes:none;display:block;color:var(--ink)}
.smr .pull cite{display:block;margin-top:14px;font-style:normal;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);font-weight:700}
.smr .close{padding:clamp(72px,9vw,120px) 0;text-align:center}
.smr .close h2{font-size:clamp(32px,5.4vw,58px);letter-spacing:-.035em;margin-bottom:20px}
.smr .close h2 em{font-style:normal;color:var(--red)}
.smr .close p{max-width:520px;margin:0 auto 34px;color:var(--ink-3)}
.smr .cta{display:inline-flex;align-items:center;gap:10px;background:var(--red);color:#fff;text-decoration:none;
  font-family:var(--disp);font-weight:700;font-size:15px;padding:16px 30px;border-radius:8px;transition:.2s}
.smr .cta:hover{background:#d4102c;transform:translateY(-1px)}
.smr footer{border-top:1px solid var(--line);padding:40px 0 52px}
.smr .foot{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
.smr .foot__mark{font-family:var(--disp);font-weight:900;font-size:16px;margin-bottom:10px}
.smr .foot__mark span{color:var(--red)}
.smr .tiny{font-size:12.5px;color:var(--ink-3);line-height:1.6}
.smr .flink{color:var(--ink-2);text-decoration:none;border-bottom:1px solid transparent}
.smr .flink:hover{border-bottom-color:var(--red);color:var(--ink)}
.js-on .smr .rv{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.js-on .smr .rv.in{opacity:1;transform:none}
@media (max-width:760px){
.smr .wrap{padding:0 20px}
.smr .card__body{flex-direction:column;align-items:flex-start}
.smr .card__tags{margin-left:0}
.smr .step{grid-template-columns:1fr;gap:8px}
}
@media (prefers-reduced-motion:reduce){
.smr *{transition-duration:.01ms!important}
.smr .rv{opacity:1;transform:none}
.smr{scroll-behavior:auto}
}


/* The metrics table is wider than a phone; the source let it clip. Give it
   its own scroll container so the page body never scrolls sideways. */
.smr .mtable-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 8px; }
.smr .mtable-scroll .mtable { min-width: 520px; margin-top: 0; }


/* The stats row wraps to 2-up on narrow screens. Two consequences to undo:
   the first item of the second row inherits the 24px left pad and sits out of
   line with the first row, and the last item of the first row draws a divider
   with nothing after it. */
@media (max-width: 720px) {
  .smr .hstat:nth-child(2n+1) { padding-left: 0; }
  .smr .hstat:nth-child(2n)::after { display: none; }
  .smr .hstat:nth-child(n+3) { margin-top: 22px; }
}