/* DANA Home, on the case study system. Shared patterns from ../case-study.css.
   One-offs: the V1 -> V2 evolution hero with region labels, the icon time
   bars, the navigation path diagram, the trust grouping, the close. */

.mg-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
/* the transparent render, whole and large; the phone fills most of it */
/* The render is about 40% transparent margin. The box below is measured
   from its alpha (phone at x 21-77%, y 8.5-95% of the file) plus a margin,
   so only empty pixels fall outside it; the phone is never cut. */
.mg-hero__art { justify-items: center; }
.mg-hero__frame {
  position: relative;
  height: calc(var(--cs-visual-h) * 1.08);
  aspect-ratio: 1344 / 1810;
  overflow: hidden;
}
.mg-hero__frame img {
  position: absolute;
  left: -31.67%;
  top: -7.18%;
  width: 166.67%;
  height: 110.5%;
  max-width: none;
}
html:active-view-transition .mg-hero__art img { filter: none; }

.mg-evo {
  --h: clamp(380px, 46vw, 520px);
  --ink: var(--day-ink);
  --ink-muted: var(--day-ink-muted);
  --ink-faint: var(--day-ink-faint);
  position: relative;
  margin: var(--cs-block-gap) 0 0;
  padding: 28px 28px 22px;
  border-radius: var(--cs-radius);
  background: #fff;
  display: grid;
  grid-template-columns: auto minmax(150px, 190px) auto;
  justify-content: center;
  align-items: start;
}
.mg-evo > figcaption { margin-top: 14px; color: var(--ink-muted); font-size: var(--cs-type-caption); }
.mg-evo > figcaption { grid-column: 1 / -1; max-width: 34rem; }
.mg-evo__phone { position: relative; z-index: 1; }
.mg-evo__phone img { display: block; height: var(--h); width: auto; }
.mg-evo__phone p { margin: 10px 0 0; font-size: 13px; font-weight: 700; text-align: center; color: var(--ink); }

.mg-evo__map { position: relative; height: var(--h); z-index: 2; }
.mg-evo__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mg-evo__line { fill: none; stroke: var(--ink-faint); stroke-width: 2; stroke-dasharray: 3 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mg-evo__line--changed { stroke: var(--ink); stroke-dasharray: none; }
.mg-evo__labels { list-style: none; margin: 0; padding: 0; }
.mg-evo__label {
  position: absolute;
  left: 12%;
  right: 12%;
  top: var(--y);
  transform: translateY(-50%);
  padding: 6px 8px;
  background: #fff;
  text-align: center;
  color: var(--ink-muted);
}
.mg-evo__label strong { display: block; font-size: 13px; font-weight: 700; line-height: 1.25; }
.mg-evo__label span { display: block; font-size: 13px; line-height: 1.3; }
.mg-evo__label--changed { color: var(--ink); }

/* the one motion: at the very top, what changed sits a step back toward V1
   (V2 and the changed labels); the kept label never moves. On the first
   scroll they settle into place. Everything stays visible throughout. */
.mg-evo.is-before .mg-evo__phone--v2 { transform: translateX(-22px); }
.mg-evo.is-before .mg-evo__label--changed { transform: translate(-14px, -50%); }
.mg-evo.is-before .mg-evo__line--changed { transform: translateX(-4px); }
@media (prefers-reduced-motion: no-preference) {
  .mg-evo__phone--v2,
  .mg-evo__label--changed,
  .mg-evo__line--changed { transition: transform 460ms cubic-bezier(0.2, 0.75, 0.2, 1); }
  .mg-evo__label--changed:nth-child(3) { transition-delay: 40ms; }
  .mg-evo__label--changed:nth-child(4) { transition-delay: 80ms; }
}

.cs .mg-cta svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* opportunities: five rows, no cards */
.mg-opps { list-style: none; margin: 8px 0 28px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.mg-opps li { display: grid; gap: 6px; align-content: start; }
.mg-opps svg { width: 28px; height: 28px; stroke: var(--ink); stroke-width: 1.8; }
.mg-opps strong { font-size: 16px; color: var(--ink); }
.mg-opps span { font-size: 15px; line-height: 1.45; color: var(--ink-muted); }

.mg-move .cs-frames, .mg-icons, .mg-nav, .mg-foot { margin: 40px 0; }
.mg-move__copy p { max-width: var(--cs-measure); }
.cs-chapter .mg-move__metric { margin: 24px 0 0; font-size: 18px; color: var(--ink); }
.mg-list { margin: 0 0 20px; padding-left: 20px; }

/* move 1: icons large, the time attached */
.mg-icons__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cs-grid-gap); }
.mg-time { margin-top: 20px; display: grid; gap: 10px; max-width: 520px; }
.mg-time__row { display: flex; align-items: center; gap: 14px; }
.mg-time__bar { display: block; width: calc(var(--v) * 100%); height: 14px; border-radius: 7px; background: var(--ink-faint); }
.mg-time__row--now .mg-time__bar { background: var(--ink); }
.mg-time__val { font-family: "Tanker", "Plus Jakarta Sans", sans-serif; font-size: var(--cs-type-seq); line-height: 0.9; color: var(--ink); }
.cs-chapter .mg-time__cap { margin: 4px 0 0; font-size: var(--cs-type-caption); color: var(--ink-muted); }

/* move 2: the entry point as a path, then the screens */
.mg-nav__paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cs-grid-gap); margin-bottom: var(--cs-grid-gap); }
.mg-nav__path { padding: 20px 22px; border-radius: var(--cs-radius); background: var(--cs-surface); }
.cs-chapter .mg-nav__when { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--ink-muted); }
.mg-nav__path ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mg-nav__path li { font-size: 16px; font-weight: 700; color: var(--ink-muted); }
.mg-nav__path li + li::before { content: ""; display: inline-block; width: 18px; height: 3px; margin-right: 8px; border-radius: 3px; background: currentColor; vertical-align: middle; }
.mg-nav__path--now li { color: var(--ink); }
.mg-nav__shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cs-grid-gap); }
.mg-nav > figcaption { margin-top: 12px; font-size: var(--cs-type-caption); color: var(--ink-muted); }

.mg-foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cs-grid-gap); align-items: start; }
.mg-foot__wide { grid-column: span 3; }
.mg-foot__wide img { max-width: 720px; }

/* moves 4 and 5 share one trust ground */
.mg-trust { margin-top: var(--cs-chapter-gap); padding: 8px 40px 48px; border-radius: 36px; background: var(--cs-surface-deep); }
.mg-trust .cs-chapter { padding-top: 64px; }
.cs-main .mg-trust__label { margin: 32px 0 0; font-size: 14px; font-weight: 700; color: var(--ink); }

/* close */
.mg-close { width: var(--cs-edge); margin: clamp(120px, 13vw, 176px) auto 0; padding-left: calc(var(--cs-rail) + var(--cs-rail-gap)); }
.mg-close h2 { margin: 0 0 24px; font-family: "Tanker", "Plus Jakarta Sans", sans-serif; font-weight: 400; text-transform: uppercase; font-size: var(--cs-type-h2); line-height: 0.92; color: var(--ink); }
.mg-close__text p { max-width: 34rem; font-size: 18px; line-height: 1.7; color: var(--ink-muted); }
.mg-close__text strong, .mg-close__lead { color: var(--ink); }
.mg-close .mg-close__pull { grid-column: 1 / -1; max-width: none; margin: 40px 0 0; font-size: var(--cs-type-pull); font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  img[data-project-transition="main-gate-of-the-app"] { view-transition-name: vt-hero-gate; }
  .main-gate-page .cs-facts__project { view-transition-name: vt-title-gate; }
  .main-gate-page .cs-hero__pitch { view-transition-name: vt-sub-gate; }
}

@media (max-width: 1023px) {
  .mg-hero { grid-template-columns: minmax(0, 1fr); }
  .mg-opps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mg-close { padding-left: 0; }
}
@media (max-width: 760px) {
  .mg-evo { --h: 300px; grid-template-columns: auto minmax(90px, 1fr) auto; }
  .mg-evo__label strong, .mg-evo__label span { font-size: 13px; }
  .mg-evo__label span { display: none; }
  .mg-evo { padding: 16px 10px 14px; }
  .mg-opps { grid-template-columns: 1fr; }
  .mg-nav__paths, .mg-icons__pair { grid-template-columns: 1fr; }
  .mg-nav__shots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .mg-foot { grid-template-columns: 1fr; }
  .mg-foot__wide { grid-column: auto; }
  .mg-trust { padding: 4px 18px 32px; border-radius: var(--cs-radius); }
}

/* long move titles: use the whole column so they hold two lines */
.mg-move .cs-move__head h2 { max-width: none; }
@media (max-width: 760px) {
  .mg-move .cs-move__head h2 { font-size: clamp(28px, 7.6vw, 44px); }
}
/* inside the trust ground the column is narrower; step the heads down */
.mg-trust .cs-move__head h2 { font-size: clamp(40px, 4.6vw, 66px); }
@media (max-width: 760px) {
  .mg-trust .cs-move__head h2 { font-size: clamp(26px, 7vw, 44px); }
}
@media (max-width: 760px) {
  .mg-trust { padding-left: 12px; padding-right: 12px; }
  .mg-trust .cs-move__head { gap: 10px; }
}