/* Shanti uses the existing case layouts and shared navigation unchanged.
   Only differences from the Blizkie case are scoped below. Figma: 640:18930. */
.shanti-case, .shanti-case .challenge-number { font-weight:400; }
.shanti-case .blizkie-intro { padding-top:50px; }
.shanti-case .blizkie-intro-copy { grid-template-columns:345px 874px 1fr; }
.shanti-case .intro-description { width:739px; }
.shanti-task { grid-template-columns:344px minmax(0,1fr); }
.shanti-case .shanti-icon { width:24px; height:24px; display:grid; place-items:center; }
.shanti-case .shanti-user-icon { width:16px; height:20px; }
.shanti-case .shanti-check-icon { width:22px; height:22px; }
.shanti-art { overflow:hidden; border-radius:16px; background:#fafafa; }
.shanti-art>img { width:100%; height:auto; }
.shanti-case .case-example>.shanti-art { border-radius:14.282828px; }
.shanti-case .example-title { width:max-content; max-width:100%; }
.shanti-showcase { padding:0 40px 50px; display:flex; flex-direction:column; gap:40px; }
.shanti-wide { aspect-ratio:1360 / 706; }
.shanti-wide>img { height:100%; }
.shanti-detail-grid { display:grid; grid-template-columns:406fr 468fr 406fr; gap:40px; }
.shanti-detail-grid-last { grid-template-columns:406fr 469fr 406fr; container-type:inline-size; --bottom-gap:40px; }
.shanti-detail-grid .shanti-art:not(.visual-frame):not(.visual-crop):not(.shanti-bottom-card) { height:413px; }
.shanti-detail-grid .shanti-art:not(.visual-frame):not(.visual-crop):not(.shanti-bottom-card) img { height:100%; object-fit:fill; }
.shanti-kit-copy { display:grid; grid-template-columns:741px minmax(0,1fr); gap:66px; align-items:start; }
.shanti-kit-note { font-size:16px; line-height:22px; opacity:.5; }
.shanti-case .blizkie-results { padding-bottom:150px; }
@media(max-width:1399px) {
  .shanti-task { grid-template-columns:25.36765% minmax(0,1fr); }
  .shanti-case .case-example-copy { min-width:0; }
  .shanti-case .result-cards br { display:initial; }
  .shanti-case .blizkie-intro-copy { grid-template-columns:25.36765% minmax(0,1fr) 130px; gap:24px; }
  .shanti-case .intro-description { width:auto; }
  .shanti-kit-copy { grid-template-columns:minmax(0,741px) 150px; gap:24px; }
  .shanti-detail-grid .shanti-art:not(.visual-frame):not(.visual-crop):not(.shanti-bottom-card) { height:auto; aspect-ratio:var(--panel-ratio,406 / 413); }
  .shanti-detail-grid .shanti-art:nth-child(2) { --panel-ratio:468 / 413; }
  .shanti-detail-grid-last .shanti-art:nth-child(2) { --panel-ratio:469 / 413; }
}
@media(max-width:1100px) {
  .shanti-case .blizkie-intro-copy { grid-template-columns:1fr 2fr; }
  .shanti-kit-copy { display:flex; flex-direction:column; gap:20px; }
  .shanti-detail-grid { gap:20px; }
}
@media(max-width:740px) {
  .shanti-case .blizkie-intro { padding-top:100px; }
  .shanti-case .blizkie-intro-copy { display:flex; }
  .shanti-case .example-title { width:auto; }
  .shanti-showcase { padding:0 24px 30px; gap:20px; }
  .shanti-detail-grid { grid-template-columns:1fr; }
  .shanti-detail-grid .shanti-art:not(.visual-frame):not(.visual-crop):not(.shanti-bottom-card) { max-width:469px; width:100%; margin-inline:auto; }
  .shanti-flow { overflow-x:auto; }
  .shanti-flow>img { width:952px; max-width:none; height:auto; }
  .shanti-case .blizkie-results { padding-bottom:120px; }
}

/* High-resolution source images. The canvas preserves the former composite's
   dimensions; image positions are expressed in that original coordinate space. */
.shanti-hq { position:relative; }
.shanti-hq .shanti-canvas { position:absolute; inset:0; width:100%; height:100%; }
.shanti-hq .shanti-canvas>img { position:absolute; display:block; height:auto; max-width:none; object-fit:contain; }

.shanti-hq-flow { aspect-ratio:1360 / 479; }
.shanti-hq-library { aspect-ratio:1360 / 559; }

.shanti-hq-flow .shanti-canvas>img { left:1.50735294%; top:5.84551148%; width:96.98529412%; }
.shanti-hq-learning .shanti-canvas>img { left:12.35294118%; top:7.93201133%; width:75.29411765%; }



.shanti-hq-quiz .shanti-canvas>img { left:13.21961620%; top:18.64406780%; width:73.77398721%; }

.shanti-hq-library .shanti-canvas>img { left:9.77941176%; top:5.54561717%; width:80.44117647%; }
.shanti-hq-flow .shanti-canvas>img { mix-blend-mode:darken; }
.shanti-hq-karma .karma-niyama { left:20.93596059%; top:7.02179177%; width:51.47783251%; }
.shanti-hq-karma .karma-dharana { left:20.98935884%; top:54.47941889%; width:51.53302724%; }
@media(max-width:740px) {
  .shanti-hq-flow { aspect-ratio:auto; height:335.3px; }
  .shanti-hq-flow .shanti-canvas { width:952px; }
}

/* The viewer is isolated from the case layout and shared controls. */
.shanti-flow[role="button"] { cursor:zoom-in; }
.shanti-flow[role="button"]:focus-visible { outline:2px solid #191919; outline-offset:4px; }
.shanti-flow-dialog {
  position:fixed; inset:0; width:100%; max-width:none; height:100%; max-height:none;
  margin:0; padding:72px 48px; border:0; background:transparent; color:#191919;
  overflow:hidden; opacity:0; transition:opacity 220ms ease-in-out;
}
.shanti-flow-dialog[open] { display:grid; place-items:center; }
.shanti-flow-dialog::backdrop { background:rgb(0 0 0 / 60%); opacity:0; transition:opacity 220ms ease-in-out; }
.shanti-flow-dialog.is-visible, .shanti-flow-dialog.is-visible::backdrop { opacity:1; }
.shanti-flow-panel { padding:32px; max-width:100%; background:#fafafa; border-radius:16px; overflow:hidden; }
.shanti-flow-viewport { overflow:hidden; touch-action:pinch-zoom; }
.shanti-flow-viewport img {
  display:block; width:auto; height:auto; max-width:100%; max-height:calc(100dvh - 208px);
  object-fit:contain; mix-blend-mode:darken; transform:scale(1); transform-origin:50% 50%;
  transition:transform 180ms ease-out; user-select:none;
}
.shanti-flow-viewport.is-zoomed img { transform:scale(2); will-change:transform; }
.shanti-flow-close {
  position:absolute; top:28px; right:28px; display:grid; place-items:center;
  width:44px; height:44px; padding:0; border:0; cursor:pointer;
  background:var(--flow-close-background,rgba(244,244,244,.52));
  border-radius:var(--flow-close-radius,32px); color:var(--flow-close-color,#191919);
  box-shadow:var(--flow-close-shadow,0 4px 24px rgba(0,0,0,.055));
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  transition:background-color 240ms ease-in-out;
}
.shanti-flow-close:focus-visible { outline:2px solid #191919; outline-offset:4px; }
@media(max-width:740px) {
  .shanti-flow-dialog { padding:76px 16px; }
  .shanti-flow-panel { padding:16px; }
  .shanti-flow-viewport img { max-height:calc(100dvh - 184px); }
  .shanti-flow-close { top:16px; right:16px; }
}
@media(prefers-reduced-motion:reduce) {
  .shanti-flow-dialog, .shanti-flow-dialog::backdrop, .shanti-flow-viewport img, .shanti-flow-close { transition:none; }
}
/* Inline touch viewer: only the canvas transforms; the case geometry stays fixed. */
.shanti-flow.shanti-flow-inline { overflow:hidden; touch-action:pan-y; cursor:auto; }
.shanti-flow-inline .shanti-canvas { transform-origin:0 0; }
.shanti-flow-inline img { user-select:none; -webkit-user-select:none; -webkit-user-drag:none; }

/* Preserve the landing composite and its browser frame as the loading poster. */
.shanti-landing-video { position:relative; }
.shanti-browser-frame {
  position:absolute; left:4.34131737%; top:20.06033183%; width:91.31736527%; aspect-ratio:610 / 397;
  display:grid; grid-template-rows:auto minmax(0,1fr); border-radius:1.14754098% / 1.76322418%; overflow:hidden; isolation:isolate;
}
.shanti-browser-bar { display:block; width:100%; height:auto; position:relative; z-index:1; }
.shanti-landing-video video {
  display:block; width:100%; height:100%; min-height:0;
  object-fit:cover; object-position:center top; background:#fafafa; opacity:0;
}
/* Draw the fractional stroke above both media layers, inside the outer radius. */
.shanti-browser-frame::after {
  content:""; position:absolute; inset:0; z-index:2; border-radius:inherit;
  box-shadow:inset 0 0 0 .6px rgb(0 0 0 / 10%); pointer-events:none;
}
.shanti-landing-video.is-playing video { opacity:1; }
.shanti-landing-video.is-playing>img { visibility:hidden; }
@media(prefers-reduced-motion:reduce) {
  .shanti-landing-video video { display:none; }
}

/* Compact landscape columns size independently; desktop retains its alignment. */
@media(min-width:741px) and (max-width:1180px) and (orientation:landscape) {
  .shanti-case .case-example { align-items:start; }
  .shanti-case .case-example-copy { padding-top:0; }
  .shanti-case .shanti-landing-video { align-self:start; height:auto; aspect-ratio:668 / 663; }
}

/* Give transformed touch canvases the same backdrop as the visual container. */
.shanti-hq-flow .shanti-canvas { background:inherit; isolation:isolate; }
@media(max-width:740px) {
  .shanti-hq-flow .shanti-canvas { width:100%; }
  .shanti-hq-flow .shanti-canvas>img {
    left:16px; width:calc(100% - 32px); top:50%; transform:translateY(-50%);
  }
}

/* The full dashboard always ends after the first row, independent of device mode. */
.shanti-hero-crop { width:100%; }
.shanti-hero-crop>img { display:block; width:100%; height:auto; max-width:none; }
.shanti-case .audience-cards img, .shanti-case .audience-cards svg { object-fit:contain; flex-shrink:0; display:block; }
.shanti-bottom-card { position:relative; height:calc((100cqw - 2 * var(--bottom-gap)) * 413 / 1281); overflow:hidden; }
.shanti-bottom-card .shanti-canvas { position:absolute; inset:0; }
.shanti-bottom-card img { position:absolute; display:block; height:auto; max-width:none; object-fit:contain; }
.shanti-bottom-karma img { left:21%; width:51.5%; }
.shanti-bottom-karma .karma-niyama { top:7%; }
.shanti-bottom-karma .karma-dharana { top:54.5%; }
.shanti-bottom-quiz img { left:13.25%; top:18.7%; width:73.5%; }
.shanti-bottom-phone>img { left:19.5%; top:11%; width:61%; }
@media(max-width:1100px) { .shanti-detail-grid-last { --bottom-gap:20px; } }
@media(max-width:740px) { .shanti-bottom-card { height:calc(100cqw * 413 / 406); } .shanti-bottom-quiz { height:calc(100cqw * 413 / 469); } }