/* ============================================================
   Soma — case study
   Figma: IG Post – Second Set, frame 1037:11856 (1400 x 15512)

   Panel follows the Baseline "Map Your Space" pattern: pinned,
   content-sized, one step open at a time.
   ============================================================ */

.case-sm {
  --baseline-black: #060608;
  --soma-green: #72922e;
  --soma-grey:  #dfe0e7;
  --soma-leaf:  #688e26;

  --font-ogoda:  "Ogoda", "Quicksand", var(--font-sans);
  --font-cg:     "Century Gothic", "Questrial", "URW Gothic", "Quicksand", var(--font-sans);
  --font-quick:  "Quicksand", var(--font-sans);

  --h: 15512;
  background: var(--baseline-black);
  overflow: clip;              /* clip, not hidden — keeps sticky working */
}

.case-sm .t { margin: 0; line-height: normal; word-break: break-word; }
.case-sm .t.abs { height: auto; }
.case-sm .t-cg { font-family: var(--font-cg); }

/* ---------- Pinned panel (Baseline's pattern) ----------
   Figma 1037:11857 — 23,40, 470 x 15430. 2px border + 28px padding
   gives Figma's 30px content inset (x = 53 on a panel edged at 23). */
.sm-panel {
  position: sticky;
  top: calc(40 * var(--px));
  z-index: 2;
  margin-left: calc(23 * var(--px));
  width: calc(470 * var(--px));
  height: auto;
  max-height: calc(100vh - (80 * var(--px)));
  background: var(--baseline-black);
  border: calc(2 * var(--px)) solid #fff;
  border-radius: calc(40 * var(--px));
  padding: calc(17 * var(--px)) calc(28 * var(--px)) calc(28 * var(--px));
  display: flex; flex-direction: column;
  overflow: hidden;
}
.sm-panel-head { display: flex; align-items: flex-start; justify-content: space-between; flex: 0 0 auto; }
/* Same Ogoda outlines as the card's wordmark — we have no licence file for
   the font, so live text fell back to Quicksand. This is the 64px instance:
   433x111 ink at 220px scales to 126x33. Figma's panel rect sits at section
   24/41 and the ink at 54.268/76.588, i.e. panel-relative 30.268/35.588,
   while the panel's content box starts at 30/19 — hence the small offsets.
   The margins keep the head exactly 49.92 tall, the height of the 64px text
   it replaces, so nothing below it shifts. */
.sm-wordmark {
  display: block;
  width: calc(126 * var(--px));
  height: calc(33 * var(--px));
  margin: calc(16.588 * var(--px)) 0 calc(0.332 * var(--px)) calc(0.268 * var(--px));
}
.sm-year {
  margin-top: calc(21 * var(--px));
  font-family: var(--font-sans); font-variation-settings: "wdth" 100;
  font-weight: 500; font-size: calc(20 * var(--px)); line-height: 1.2; color: #fff;
}
.sm-intro {
  margin: calc(34 * var(--px)) 0 0 calc(1 * var(--px));
  width: calc(327 * var(--px));
  font-family: var(--font-sans); font-variation-settings: "wdth" 100;
  font-size: calc(20 * var(--px)); line-height: 1.25; color: #fff;
  flex: 0 0 auto;
}
.sm-acc-list {
  margin-top: calc(60 * var(--px));
  flex: 0 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.35) transparent;
}
.sm-acc-list::-webkit-scrollbar { width: calc(4 * var(--px)); }
.sm-acc-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.35); border-radius: calc(4 * var(--px)); }
.sm-item + .sm-item { margin-top: calc(22 * var(--px)); }

.sm-acc {
  display: flex; align-items: baseline; justify-content: space-between;
  width: 100%; margin: 0; padding: 0;
  background: none; border: 0; text-align: left; cursor: pointer;
  font-family: var(--font-sans); font-variation-settings: "wdth" 100;
  font-weight: 500; font-size: calc(24 * var(--px));
  letter-spacing: calc(-0.72 * var(--px)); line-height: 1.2; color: #fff;
  transition: color 180ms ease, opacity 180ms ease;
}
.sm-acc:hover { color: var(--octodraws-icon-purple); }
.sm-acc:focus-visible { outline: calc(2 * var(--px)) solid #fff; outline-offset: calc(6 * var(--px)); }
.sm-acc .sign { flex: 0 0 auto; margin-left: calc(16 * var(--px)); }

.sm-body {
  display: grid; grid-template-rows: 0fr; padding-top: 0;
  transition: grid-template-rows 380ms cubic-bezier(0.4, 0, 0.2, 1),
              padding-top 380ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sm-body > div { overflow: hidden; }
.sm-body p {
  margin: 0;
  font-family: var(--font-sans); font-variation-settings: "wdth" 100;
  font-size: calc(22 * var(--px)); letter-spacing: calc(-0.44 * var(--px));
  line-height: 1.25; color: #fff;
  opacity: 0; transition: opacity 220ms ease;
}
.sm-body.is-open { grid-template-rows: 1fr; padding-top: calc(14 * var(--px)); }
.sm-body.is-open p { opacity: 1; transition: opacity 280ms ease 110ms; }

/* Next Project — Figma places the parts at fixed x positions. */
.sm-next-row {
  flex: 0 0 auto; margin-top: calc(24 * var(--px)); padding-top: calc(20 * var(--px));
  border-top: calc(1 * var(--px)) solid rgba(255,255,255,0.18);
  display: block; text-decoration: none; transition: color 180ms ease;
}
.sm-next-row:hover,
.sm-next-row:hover .sm-next-label { color: var(--octodraws-icon-purple); }
.sm-next-row:focus-visible { outline: calc(2 * var(--px)) solid #fff; outline-offset: calc(4 * var(--px)); }
.sm-next-label {
  display: block; margin-left: calc(-7 * var(--px));
  font-family: var(--font-sans); font-variation-settings: "wdth" 100;
  font-weight: 500; font-size: calc(24 * var(--px)); letter-spacing: calc(-0.72 * var(--px));
  color: #fff; line-height: 1.2;
}
.sm-next-line {
  display: block; position: relative;
  margin-top: calc(9 * var(--px)); height: calc(23 * var(--px));
  font-family: var(--font-sans); font-variation-settings: "wdth" 100;
  font-size: calc(15 * var(--px)); color: #fff; line-height: 1.2;
}
.sm-next-line > * { position: absolute; }
.sm-badge {
  left: calc(-7 * var(--px)); top: 0;
  width: calc(21 * var(--px)); height: calc(23 * var(--px));
  background: #fff; border-radius: calc(7 * var(--px)); overflow: hidden;
}
.sm-badge p {
  position: absolute; left: 50%; transform: translateX(-50%); top: calc(5 * var(--px)); margin: 0;
  font-family: var(--font-editorial, "Instrument Serif", Georgia, serif); font-weight: 800;
  font-size: calc(15 * var(--px)); line-height: 1.2; color: #000;
}
.sm-next-name { left: calc(24 * var(--px)); top: calc(3 * var(--px)); font-weight: 500; }
.sm-next-type { left: calc(151 * var(--px)); top: calc(3 * var(--px)); width: calc(158 * var(--px)); text-align: center; opacity: 0.75; }
.sm-next-year { left: calc(372 * var(--px)); top: calc(3 * var(--px)); width: calc(44 * var(--px)); opacity: 0.75; }

/* ---------- Shared card chrome ---------- */
.sm-card {
  border: calc(2 * var(--px)) solid #000;
  border-radius: calc(40 * var(--px));
  overflow: hidden;
}
.sm-crop { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sm-crop img { position: absolute; max-width: none; }
.sm-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- 1. Wordmark ---------- */
.sm-c1 { --l: 545; --t: 40; --w: 805; --h: 390; background: #fff; }
/* The wordmark is set in Ogoda, which we have no licence file for, so it
   ships as the outlines Figma exports rather than live text in a fallback
   face. The box is the glyph ink bounds: Figma's export carries the card
   rectangle with it, which pins the ink at 184.818 / 147.74 inside the card —
   confirmed against Figma's render, whose green ink measures 188/164 to
   612/253. */
.sm-c1-word { --l: 184.818; --t: 147.74; --w: 433; --h: 111; display: block; }

/* Figma covers the tittle of the "a" with a white rotated rectangle
   (1237:221). The tittle is now deleted from wordmark.svg outright — asked
   for, and it also removes the green dot that showed on the dark panel where
   no such cover exists — so that rectangle has nothing left to hide. */

/* ---------- 2. Home screen ---------- */
.sm-c2 { --l: 545; --t: 458; --w: 445; --h: 390; }
.sm-c2-bg  { --l: -2; --t: -2; --w: 449; --h: 395; }
/* Figma sets size-full + object-bottom with NO object-cover, so the photo is
   stretched to the box rather than cropped to it — the same thing Baseline's
   cards do. It matters here: the source is 748x1024 (portrait, 0.73) going
   into a 449x395 landscape box (1.14), so cropping instead of stretching
   showed a completely different part of the scene. object-position is inert
   under the default object-fit: fill, but Figma emits it, so it stays. */
.sm-c2-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-position: bottom; }
.sm-c2-app { --l: 77; --t: 30; --w: 291; --h: 330; }

/* ---------- 3. Colour card ---------- */
.sm-c3 { --l: 1017; --t: 458; --w: 333; --h: 390; background: #fff; }
.sm-c3-in { --l: -2; --t: -2; --w: 333; --h: 390; background: #040404; overflow: hidden; }
.sm-sw { position: absolute; left: 0; right: 0; }
.sm-sw b, .sm-sw span {
  position: absolute; left: calc(20 * var(--px)); right: calc(34 * var(--px));
  font-family: var(--font-cg); display: block;
}
.sm-sw b    { top: calc(17 * var(--px)); font-size: calc(18 * var(--px)); font-weight: 700; }
.sm-sw span { top: calc(41 * var(--px)); font-size: calc(12 * var(--px)); font-weight: 400; }

/* ---------- 4. Poster ---------- */
.sm-c4 { --l: 545; --t: 886; --w: 805; --h: 1020; background: #fff; border: 0; }
.sm-c4-in { --l: 20; --t: 0; --w: 765; --h: 1020; }

/* ---------- 5. Habit photo scroller ---------- */
.sm-c5 { --l: 545; --t: 1945; --w: 805; --h: 859; background: #fff; }
/* Figma's timeline: scroll -1824 (three cards) linearly over 78.261% of an
   11.5s loop, then dwell on the focused card for the remaining 2.5s. The
   dwell is invisible as a jump because -1824 lands the duplicate run exactly
   where the original started. */
.sm-scroll { --l: 75.5; --t: -2; --w: 650; --h: 4014; animation: sm-scroll-y 11.5s linear infinite; }
.sm-c5:hover .sm-scroll, .sm-c5:hover .sm-group { animation-play-state: paused; }
@keyframes sm-scroll-y {
  0%       { transform: translateY(0); }
  78.261%  { transform: translateY(calc(-1824 * var(--px))); }
  100%     { transform: translateY(calc(-1824 * var(--px))); }
}

/* Cards rest at 0.82 and swell to 1 as they pass focus, 26.087% apart —
   one card every 3s. Only the four that reach focus inside the cycle ramp. */
.sm-group {
  position: absolute; left: calc(34.5 * var(--px));
  width: calc(581 * var(--px)); height: calc(548 * var(--px));
  scale: 0.82;
}
.sm-focus-1 { animation: sm-focus-1 11.5s linear infinite; }
.sm-focus-2 { animation: sm-focus-2 11.5s linear infinite; }
.sm-focus-3 { animation: sm-focus-3 11.5s linear infinite; }
.sm-focus-4 { animation: sm-focus-4 11.5s linear infinite; }
@keyframes sm-focus-1 {
  0%            { animation-timing-function: ease-in-out; scale: 1; }
  11.304%, 100% { scale: 0.82; }
}
@keyframes sm-focus-2 {
  0%, 14.783%   { animation-timing-function: ease-in-out; scale: 0.82; }
  26.087%       { animation-timing-function: ease-in-out; scale: 1; }
  37.391%, 100% { scale: 0.82; }
}
@keyframes sm-focus-3 {
  0%, 40.87%    { animation-timing-function: ease-in-out; scale: 0.82; }
  52.174%       { animation-timing-function: ease-in-out; scale: 1; }
  63.478%, 100% { scale: 0.82; }
}
@keyframes sm-focus-4 {
  0%, 66.957%   { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); scale: 0.82; }
  78.261%, 100% { scale: 1; }
}
.sm-shot {
  position: absolute; inset: 0;
  border: calc(10 * var(--px)) solid #fff; border-radius: calc(40 * var(--px)); overflow: hidden;
}
.sm-shot img { position: absolute; max-width: none; }
.sm-cap {
  position: absolute; background: #fff; border-radius: calc(40 * var(--px));
  display: flex; align-items: center; justify-content: center;
}
.sm-cap p {
  margin: 0; font-family: var(--font-cg); font-size: calc(32 * var(--px));
  letter-spacing: calc(-2.56 * var(--px)); color: #000; white-space: nowrap;
}

/* ---------- 6. Phone hero ---------- */
.sm-c6 { --l: 545; --t: 2845; --w: 805; --h: 620; background: #fff; }
.sm-c6-in { --l: 32.5; --t: 48; --w: 738; --h: 542; }
.sm-c6-in img { left: 18.51%; top: 0.06%; width: 63%; height: 116%; }

/* ---------- 7. Task detail ---------- */
.sm-c7 { --l: 545; --t: 3506; --w: 798; --h: 744; }
.sm-c7-in { --l: -143; --t: -350; --w: 1080; --h: 1440; background: #fff; overflow: hidden; }
.sm-c7-img { --l: 0; --t: -123; --w: 1164.944; --h: 1440; }
.sm-c7-row  { --l: 582; --t: 948; --w: 337; --h: 91; background: #fff; border-radius: calc(40 * var(--px)); }
.sm-c7-chip { --l: 593; --t: 958; --w: 92;  --h: 71; background: #922e8d; border-radius: calc(20 * var(--px)); }
.sm-c7-ico  { --l: 614; --t: 976; --w: 49.159; --h: 34; }
.sm-c7-t1 { --l: 704; --t: 992;  --w: 185; --h: 18; font-family: var(--font-cg); font-size: calc(20 * var(--px)); color: #000; }
.sm-c7-t2 { --l: 720; --t: 1113; --w: 119; --h: 22; font-family: var(--font-cg); font-size: calc(16 * var(--px)); color: #000; }
.sm-c7-t3 { --l: 704; --t: 962;  --w: 85;  --h: 18; font-family: var(--font-cg); font-size: calc(20 * var(--px)); color: #922e8d; }

/* ---------- 8. Habit pill scroller ---------- */
.sm-c8 { --l: 545; --t: 4296; --w: 798; --h: 1368; background: #fff; }
/* Figma runs this at 11.5s, covering 4262.333 (its container height less the
   frame). That distance is 33.56 pills, not a whole number, so Figma's own
   loop visibly jumps back. We keep its pace — 370.6 px/s — but travel 3810
   (exactly 30 pills, the length of one run), which repeats seamlessly:
   3810 / 370.6 = 10.3s. */
.sm-pills { --l: -2; --t: -2; --w: 798; --h: 7620; animation: sm-pill-scroll 10.3s linear infinite; }
.sm-c8:hover .sm-pills { animation-play-state: paused; }
@keyframes sm-pill-scroll { from { transform: translateY(0); } to { transform: translateY(calc(-3810 * var(--px))); } }
.sm-pill { position: absolute; left: calc(34 * var(--px)); height: calc(107 * var(--px)); border-radius: calc(40 * var(--px)); }
.sm-pill p {
  position: absolute; left: calc(40 * var(--px)); top: calc(24 * var(--px)); margin: 0;
  font-family: var(--font-cg); font-size: calc(48 * var(--px)); color: #fff; white-space: nowrap;
}

/* ---------- 9-11, 13, 16, 17. Full-bleed artwork ---------- */
.sm-c9  { --l: 545; --t: 5711; --w: 386; --h: 859; }
.sm-c9-in  { --l: -150; --t: -2; --w: 670; --h: 859; border-radius: calc(40 * var(--px)); overflow: hidden; }
.sm-c10 { --l: 957; --t: 5711; --w: 386; --h: 859; }
.sm-c10 .sm-crop { border-radius: calc(40 * var(--px)); }
.sm-c10 .sm-crop img { left: -4.33%; top: -0.67%; width: 167.39%; height: 100%; }
.sm-c11 { --l: 538; --t: 6613; --w: 805; --h: 859; }
.sm-c11-in { --l: -2; --t: -2; --w: 805; --h: 859; border: calc(3 * var(--px)) solid #000; border-radius: calc(40 * var(--px)); overflow: hidden; }
.sm-c11-in .sm-crop img { left: -71.12%; top: -83.23%; width: 223.06%; height: 280%; }
.sm-c13 { --l: 538; --t: 9162; --w: 805; --h: 1008; }
.sm-c13-in { --l: -60; --t: -2; --w: 906; --h: 1033; }
.sm-c16 { --l: 545; --t: 12359; --w: 805; --h: 1101; }
.sm-c16-in { --l: -14; --t: -19; --w: 837; --h: 1120; }
.sm-c17 { --l: 545; --t: 13511; --w: 805; --h: 1101; }
.sm-c17-in { --l: -21; --t: -31; --w: 845; --h: 1132; }

/* ---------- 12. Word list ---------- */
.sm-c12 { --l: 538; --t: 7515; --w: 805; --h: 1596; background: var(--soma-green); }
.case-sm .sm-c12-words {
  --l: 18.5; --t: 208; --w: 764; --h: 1172;
  font-family: var(--font-cg); font-size: calc(120 * var(--px));
  line-height: calc(146.5 * var(--px));
  color: #fafafb; text-align: center;
}
.sm-c12-words p { margin: 0; }

/* ---------- 14. Habit rows + loading animation ---------- */
.sm-c14 { --l: 545; --t: 10229; --w: 805; --h: 1008; background: #fff; }
.sm-c14-in { --l: 20.5; --t: -2; --w: 756; --h: 1008; background: #fff; overflow: hidden; }
/* #d9d9d9, sampled off Figma's render — not the brand token --soma-grey
   (#dfe0e7), which is the "Soma Grey" swatch on the palette card. */
.sm-row { position: absolute; left: calc(95.2 * var(--px)); width: calc(565.6 * var(--px)); height: calc(127.4 * var(--px)); background: #d9d9d9; border-radius: calc(14 * var(--px)); }
.sm-row-ico { position: absolute; left: calc(11.2 * var(--px)); top: calc(11.2 * var(--px)); width: calc(109.2 * var(--px)); height: calc(104.3 * var(--px)); border-radius: calc(14 * var(--px)); overflow: hidden; }
.sm-row-ico img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.sm-row-ico .tint { position: absolute; inset: 0; border-radius: calc(14 * var(--px)); }
.sm-row-ico .glyph { position: absolute; left: calc(9.8 * var(--px)); top: calc(9.45 * var(--px)); width: calc(89.6 * var(--px)); height: calc(85.4 * var(--px)); opacity: 1; object-fit: contain; }
.sm-row p {
  position: absolute; left: calc(142.8 * var(--px)); top: calc(49.7 * var(--px)); margin: 0;
  font-family: var(--font-cg); font-size: calc(28 * var(--px)); color: #000;
}
.sm-load { --l: -9.8; --t: 396.9; --w: 774.9; --h: 592.9; background: #fff; overflow: hidden; }
/* Track and fill share a left edge at 105 — the fill grows from the start of
   the track. Figma's code export gives the fill left: calc(50% - 255.5px),
   which lands at 131.95: that is the fill's CENTRE, emitted without the
   matching -translate-x-1/2, so it pushed the green 26.95 (half the fill's
   53.9 width) clear of the track start. Figma's metadata and its own render
   both put both rectangles at 105. */
.sm-load-track { position: absolute; left: calc(105 * var(--px)); top: calc(511.7 * var(--px)); width: calc(565.6 * var(--px)); height: calc(14 * var(--px)); background: #d9d9d9; border-radius: calc(14 * var(--px)); }
.sm-load-fill  { position: absolute; left: calc(105 * var(--px)); top: calc(511.7 * var(--px)); height: calc(14 * var(--px)); background: var(--soma-leaf); border-radius: calc(14 * var(--px)); width: calc(77 * var(--px)); animation: sm-load-fill 11.5s linear infinite; }
@keyframes sm-load-fill { from { width: calc(77 * var(--px)); } to { width: calc(565.6 * var(--px)); } }
.sm-runner { position: absolute; left: calc(129.5 * var(--px)); top: calc(476.7 * var(--px)); width: calc(58.8 * var(--px)); height: calc(69.3 * var(--px)); animation: sm-runner 11.5s linear infinite, sm-runner-bob 0.667s ease-in-out infinite; }
@keyframes sm-runner { from { translate: 0 0; } to { translate: calc(482.3 * var(--px)) 0; } }
@keyframes sm-runner-bob { 0%,100% { rotate: 3deg; transform: translateY(0); } 50% { rotate: -2deg; transform: translateY(calc(-4.2 * var(--px))); } }
.sm-load-msg {
  position: absolute; left: calc(70 * var(--px)); top: calc(238.5 * var(--px)); width: calc(634.9 * var(--px));
  margin: 0; transform: translateY(-50%);
  font-family: var(--font-cg); font-size: calc(67.2 * var(--px)); color: #000; text-align: center;
  opacity: 0; animation: sm-load-msg 11.5s linear infinite;
}
.sm-load-msg:nth-of-type(2) { animation-delay: 4s; }
.sm-load-msg:nth-of-type(3) { animation-delay: 8s; }
@keyframes sm-load-msg {
  0%      { opacity: 0; translate: 0 calc(17.5 * var(--px)); scale: 0.96; }
  6.957%  { opacity: 1; translate: 0 0; scale: 1; }
  17.391% { translate: 0 calc(-2.8 * var(--px)); scale: 1.015; }
  24.348% { opacity: 1; translate: 0 0; scale: 1; }
  31.304% { opacity: 0; translate: 0 calc(-12.6 * var(--px)); scale: 0.97; }
  100%    { opacity: 0; translate: 0 calc(-12.6 * var(--px)); scale: 0.97; }
}

/* ---------- 15. Gradient carousel ---------- */
.sm-c15 {
  --l: 545; --t: 11296; --w: 805; --h: 1008;
  background: linear-gradient(90deg, #e4dcff 0%, #d4ebff 50%, #e8fad6 100%);
}
.sm-c15-in { --l: 20.5; --t: -2; --w: 756; --h: 1008; background: linear-gradient(90deg, #e4dcff 0%, #d4ebff 50%, #e8fad6 100%); overflow: hidden; }
.sm-sheet { --l: 48.3; --t: 56; --w: 653.8; --h: 952; background: #fff; border-radius: calc(28 * var(--px)) calc(28 * var(--px)) 0 0; }
.sm-nest  { --l: 88.9; --t: 78.4; --w: 577.5; --h: 929.6; background: #fff; border-radius: calc(28 * var(--px)); overflow: hidden; }
.case-sm .sm-nest-h {
  --l: 126; --t: 89.6; --w: 326.2; --h: 67.9;
  font-family: var(--font-cg); font-weight: 700; font-size: calc(39.2 * var(--px));
  line-height: calc(34 * var(--px)); letter-spacing: calc(-1.568 * var(--px));
  color: #000; text-align: center; white-space: pre-wrap;
}
.sm-nest-h p { margin: 0; }
.sm-carousel { --l: 59.5; --t: 315.7; --w: 458.5; --h: 599.2; overflow: hidden; }
/* Figma lays the five panels out at a 497.7 pitch (0 / 497.7 / 995.4 /
   1493.1 / 1991.5); the fifth is a copy of the first so the loop is seamless.
   Strip width = 1991.5 + one pane (458.458). */
/* 10s over four panels: 2.5s each — 2.1s to read, 0.4s to slide. */
.sm-strip { position: absolute; left: 0; top: 0; width: calc(2449.958 * var(--px)); height: calc(599.2 * var(--px)); animation: sm-strip 10s cubic-bezier(0.65,0,0.35,1) infinite; }
@keyframes sm-strip {
  0%,    21%   { transform: translateX(0); }
  25%,   46%   { transform: translateX(calc(-497.7 * var(--px))); }
  50%,   71%   { transform: translateX(calc(-995.4 * var(--px))); }
  75%,   96%   { transform: translateX(calc(-1493.1 * var(--px))); }
  100%         { transform: translateX(calc(-1991.5 * var(--px))); }
}
.sm-pane { position: absolute; top: 0; width: calc(458.458 * var(--px)); height: calc(599.2 * var(--px)); }
.sm-pane-bg { position: absolute; left: 0; top: 0; width: calc(458.458 * var(--px)); height: calc(511.584 * var(--px)); background: #fff; border-radius: calc(39.353 * var(--px)); }
/* Each pane carries its own "Concentric patterns" shader — shape and colour
   differ per pane, so the SVG is generated in soma.js from the pane's
   data-shape / data-colour. See the note there. */
.sm-rings {
  position: absolute; left: calc(19.68 * var(--px)); top: calc(130.85 * var(--px));
  width: calc(419.106 * var(--px)); height: calc(345.319 * var(--px));
  border-radius: calc(39.353 * var(--px)); overflow: hidden;
}
.sm-rings svg { display: block; width: 100%; height: 100%; }
.sm-pane-ico { position: absolute; left: calc(19.68 * var(--px)); top: calc(16.72 * var(--px)); width: calc(80.673 * var(--px)); height: calc(90.511 * var(--px)); background: var(--soma-green); border-radius: calc(39.353 * var(--px)); }
.sm-pane-ico img { position: absolute; left: calc(9.83 * var(--px)); top: 0; width: calc(61.366 * var(--px)); height: calc(81.657 * var(--px)); object-fit: cover; }
.sm-pane-t {
  position: absolute; left: calc(113.14 * var(--px)); top: calc(43.29 * var(--px)); margin: 0;
  font-family: var(--font-cg); font-size: calc(31.482 * var(--px));
  letter-spacing: calc(-1.2593 * var(--px)); color: #000;
}
.sm-phone {
  position: absolute; left: calc(61.98 * var(--px)); top: calc(210.54 * var(--px));
  width: calc(335.481 * var(--px)); height: calc(265.63 * var(--px));
  background: #fff; border: calc(3.935 * var(--px)) solid #000;
  border-radius: calc(39.353 * var(--px)) calc(39.353 * var(--px)) 0 0;
}
.sm-phone-h {
  position: absolute; left: 50%; transform: translateX(-50%); top: calc(29.51 * var(--px)); margin: 0;
  width: calc(240.051 * var(--px));
  font-family: var(--font-cg); font-weight: 700; font-size: calc(23.612 * var(--px));
  color: var(--baseline-black); text-align: center;
}
.sm-mood {
  position: absolute; top: calc(72.8 * var(--px)); height: calc(33.45 * var(--px));
  background: var(--soma-grey); border-radius: calc(19.676 * var(--px));
}
.sm-mood p {
  position: absolute; left: 50%; transform: translateX(-50%); top: calc(11.31 * var(--px)); margin: 0;
  font-family: var(--font-cg); font-size: calc(8.854 * var(--px)); color: #000; white-space: nowrap;
}
.sm-mood--on { background: var(--soma-green); }
.sm-mood--on p { color: #fff; font-size: calc(9.838 * var(--px)); top: calc(10.33 * var(--px)); }
.sm-need {
  position: absolute; left: calc(27.55 * var(--px)); top: calc(135.76 * var(--px)); margin: 0;
  font-family: var(--font-cg); font-weight: 700; font-size: calc(15.741 * var(--px));
  color: var(--baseline-black); text-transform: capitalize;
}
.sm-tag {
  position: absolute; height: calc(20.66 * var(--px));
  background: var(--soma-grey); border-radius: calc(11.806 * var(--px));
}
.sm-tag p {
  position: absolute; left: calc(7.87 * var(--px)); top: calc(3.94 * var(--px)); margin: 0;
  font-family: var(--font-quick); font-weight: 500; font-size: calc(9.838 * var(--px));
  color: var(--baseline-black); white-space: nowrap;
}
.sm-tag--on { background: var(--soma-green); }
.sm-tag--on p { color: #fff; font-weight: 700; }
.sm-mascot { position: absolute; left: calc(243 * var(--px)); top: calc(135.76 * var(--px)); width: calc(64.549 * var(--px)); height: calc(100.349 * var(--px)); object-fit: cover; }

/* ----- shared pane furniture (panes 2-4) ----- */
.sm-pane-t--wide { width: calc(296.129 * var(--px)); }
.sm-ico--dw { left: calc(0.98 * var(--px)) !important; top: calc(17.71 * var(--px)) !important; width: calc(79.689 * var(--px)) !important; height: calc(55.094 * var(--px)) !important; object-fit: contain !important; }
.sm-ico--cw { left: calc(-1.97 * var(--px)) !important; top: calc(11.81 * var(--px)) !important; width: calc(85.395 * var(--px)) !important; height: calc(75.754 * var(--px)) !important; object-fit: contain !important; }
/* The pill sits above the card's top edge in Figma, overlapping the rings. */
.sm-pane-pill {
  position: absolute; top: calc(184.95 * var(--px)); height: calc(31.482 * var(--px));
  border-radius: calc(98.382 * var(--px));
}
.sm-pane-pill p {
  position: absolute; left: 50%; transform: translateX(-50%); top: calc(6.89 * var(--px)); margin: 0;
  font-family: var(--font-cg); font-size: calc(14.757 * var(--px));
  letter-spacing: calc(-0.5903 * var(--px)); color: #fff; white-space: nowrap;
}
.sm-ui-card {
  position: absolute; left: calc(61.98 * var(--px)); top: calc(200.7 * var(--px));
  width: calc(334.497 * var(--px)); height: calc(275.468 * var(--px));
  background: #fff; border: calc(3.935 * var(--px)) solid #000;
  border-radius: calc(39.353 * var(--px)) calc(39.353 * var(--px)) 0 0;
  overflow: hidden;
}
.sm-ui-card--dw { filter: drop-shadow(0 calc(11.806 * var(--px)) calc(11.806 * var(--px)) rgba(0,0,0,.05)); }

/* ----- pane 2: Small Steps ----- */
.sm-pane[data-node-id="1058:1201"] .sm-ui-card { left: calc(67.88 * var(--px)); }
.sm-ss-art { position: absolute; left: calc(19.68 * var(--px)); top: calc(23.61 * var(--px)); width: calc(26.563 * var(--px)); height: calc(111.171 * var(--px)); object-fit: cover; }
.sm-ss-col {
  position: absolute; left: calc(58.05 * var(--px)); top: calc(23.61 * var(--px));
  width: calc(256.776 * var(--px)); height: calc(228.245 * var(--px));
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
}
.sm-ss-h { margin: 0; font-family: var(--font-cg); font-weight: 700; font-size: calc(15.741 * var(--px)); color: var(--baseline-black); white-space: nowrap; }
.sm-ss-list { display: flex; flex-direction: column; gap: calc(5.903 * var(--px)); width: 100%; }
.sm-step {
  background: rgba(255,255,255,.88); border-radius: calc(11.806 * var(--px));
  padding: calc(5.903 * var(--px)) calc(9.838 * var(--px)) calc(5.903 * var(--px)) calc(7.871 * var(--px));
  display: flex; flex-direction: column; gap: calc(2.951 * var(--px));
}
.sm-step p { margin: 0; font-family: var(--font-cg); font-weight: 700; }
.sm-step-t { font-size: calc(10.822 * var(--px)); color: var(--baseline-black); }
.sm-step-s { font-size: calc(8.854 * var(--px)); color: var(--soma-green); }
.sm-step-track { height: calc(3.935 * var(--px)); background: #e6e8ea; border-radius: calc(1.968 * var(--px)); overflow: hidden; }
.sm-step-track i { display: block; height: 100%; background: var(--soma-green); }
.sm-ss-cta {
  width: 100%; background: #000; border-radius: calc(19.676 * var(--px));
  padding: calc(7.871 * var(--px)) 0; display: flex; align-items: center; justify-content: center;
}
.sm-ss-cta p { margin: 0; font-family: var(--font-cg); font-weight: 700; font-size: calc(10.822 * var(--px)); color: #fff; white-space: nowrap; }

/* ----- pane 3: Deep Work pomodoro ----- */
.sm-ui-card--dw p { margin: 0; font-family: var(--font-cg); }
.sm-dw-h { position: absolute; left: calc(60.01 * var(--px)); top: calc(24.6 * var(--px)); font-weight: 700; font-size: calc(17.709 * var(--px)); letter-spacing: calc(-0.5313 * var(--px)); color: var(--baseline-black); white-space: nowrap; }
.sm-dw-status { position: absolute; left: calc(60.01 * var(--px)); top: calc(46.24 * var(--px)); font-weight: 700; font-size: calc(10.822 * var(--px)); letter-spacing: calc(-0.3247 * var(--px)); color: var(--soma-green); white-space: nowrap; }
.sm-dw-glyph { position: absolute; left: calc(18.69 * var(--px)); top: calc(22.63 * var(--px)); width: calc(33.91 * var(--px)); height: calc(37.385 * var(--px)); object-fit: cover; }
.sm-dw-panel { position: absolute; left: calc(159.38 * var(--px)); top: calc(91.5 * var(--px)); width: calc(155.443 * var(--px)); height: calc(65.916 * var(--px)); background: #d9d9d9; border-radius: calc(9.838 * var(--px)); }
.sm-dw-time { position: absolute; left: calc(19.68 * var(--px)); top: calc(95.43 * var(--px)); font-weight: 700; font-size: calc(45.256 * var(--px)); line-height: 1; letter-spacing: calc(-1.3577 * var(--px)); color: var(--baseline-black); white-space: nowrap; }
.sm-dw-sub { position: absolute; left: calc(19.68 * var(--px)); top: calc(142.65 * var(--px)); font-size: calc(9.838 * var(--px)); letter-spacing: calc(-0.2951 * var(--px)); color: #000; white-space: nowrap; }
.sm-dw-goal { position: absolute; left: calc(167.25 * var(--px)); top: calc(99.37 * var(--px)); width: calc(137.734 * var(--px)); height: calc(24.595 * var(--px)); background: rgba(255,255,255,.88); border: calc(0.984 * var(--px)) solid #fff; border-radius: calc(9.838 * var(--px)); }
.sm-dw-goal p { position: absolute; left: calc(8.85 * var(--px)); top: calc(4.92 * var(--px)); font-weight: 700; font-size: calc(10.822 * var(--px)); letter-spacing: calc(-0.3247 * var(--px)); color: #555; white-space: nowrap; }
.sm-dw-track { position: absolute; left: calc(50.17 * var(--px)); top: calc(185.94 * var(--px)); width: calc(232.181 * var(--px)); height: calc(19.676 * var(--px)); }
.sm-dw-cta { position: absolute; left: calc(19.68 * var(--px)); right: calc(19.68 * var(--px)); top: calc(225.3 * var(--px)); height: calc(35.417 * var(--px)); background: #000; border-radius: calc(17.709 * var(--px)); filter: drop-shadow(0 calc(5.903 * var(--px)) calc(5.903 * var(--px)) rgba(114,146,46,.2)); }
.sm-dw-cta p { position: absolute; left: calc(112.16 * var(--px)); top: calc(11.32 * var(--px)); font-weight: 700; font-size: calc(10.822 * var(--px)); color: #fff; white-space: nowrap; }

/* ----- pane 4: Celebrate Your Wins ----- */
.sm-cw-h { position: absolute; left: calc(83.62 * var(--px)); top: calc(240.05 * var(--px)); margin: 0; font-family: var(--font-cg); font-weight: 700; font-size: calc(31.482 * var(--px)); color: var(--baseline-black); white-space: nowrap; }
.sm-cw-art { position: absolute; left: calc(346.3 * var(--px)); top: calc(242.02 * var(--px)); width: calc(26.51 * var(--px)); height: calc(36.401 * var(--px)); object-fit: cover; }
.sm-cw-row {
  position: absolute; left: calc(79.69 * var(--px)); width: calc(299.08 * var(--px)); height: calc(29.514 * var(--px));
  background: #fff; border-radius: calc(7.871 * var(--px));
  filter: drop-shadow(0 calc(0.984 * var(--px)) calc(0.984 * var(--px)) rgba(0,0,0,.04));
}
.sm-cw-row img { position: absolute; object-fit: cover; }
.sm-cw-row p { position: absolute; margin: 0; font-family: var(--font-cg); white-space: nowrap; color: #000; }
.sm-cw-row .t { left: calc(38.37 * var(--px)); top: calc(3.94 * var(--px)); font-weight: 700; font-size: calc(8.854 * var(--px)); }
.sm-cw-row .s { left: calc(38.37 * var(--px)); top: calc(15.74 * var(--px)); font-size: calc(6.887 * var(--px)); }
.sm-cw-row .n { left: calc(294.16 * var(--px)); transform: translateX(-100%); top: calc(6.89 * var(--px)); width: calc(17.709 * var(--px)); text-align: right; font-weight: 700; font-size: calc(13.773 * var(--px)); color: var(--baseline-black); }

/* ---------- 18. Closing ---------- */
.sm-c18 { --l: 545; --t: 14665; --w: 805; --h: 805; background: #fff; }
.case-sm .sm-c18-h {
  --l: 45; --t: 119; --w: 715; --h: 154;
  font-family: var(--font-sans); font-variation-settings: "wdth" 100;
  font-weight: 500; font-size: calc(64 * var(--px)); line-height: 1.2;
  letter-spacing: calc(-1.92 * var(--px)); color: #000; text-align: center;
}
.sm-c18-h p { margin: 0; }
.sm-c18-img { --l: 24; --t: 490; --w: 757; --h: 305; }

@media (prefers-reduced-motion: reduce) {
  .sm-scroll, .sm-pills, .sm-strip, .sm-group,
  .sm-load-fill, .sm-runner, .sm-load-msg { animation: none; }
  .sm-load-msg:first-of-type { opacity: 1; }
}

/* The next-project label sets its own colour, so it needs the hover
   transition too or it would snap while the row around it eases. */
.sm-next-label { transition: color 180ms ease; }