/* Context is part of the hierarchy, never a microscopic decoration. */
.section-label {
  align-items:center;
  gap:18px;
  font-size:14px;
  line-height:1.35;
  letter-spacing:.035em;
}
.section-label > span:first-child {
  display:inline-flex;
  align-items:center;
  width:fit-content;
  max-width:100%;
  padding:8px 13px;
  border:1px solid rgba(var(--accent),.24);
  border-radius:999px;
  background:rgba(var(--accent),.075);
  color:rgb(var(--ink));
  font-size:14px;
  line-height:1.35;
  letter-spacing:.025em;
}
.section-label > span:last-child {
  font-size:14px;
  line-height:1.35;
  letter-spacing:.025em;
  text-align:right;
}
.eyebrow,
.scene-overline,
.journey-stage .scene-overline,
.screen-label,
.phase-label,
.month-caption,
.local-step,
.seo-motion .seo-metric-kicker {
  display:inline-flex;
  align-items:center;
  width:fit-content;
  max-width:100%;
  padding:7px 11px;
  border:1px solid rgba(var(--accent),.24);
  border-radius:999px;
  background:rgba(var(--accent),.075);
  color:rgb(var(--accent));
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  letter-spacing:.025em;
}

/* The caption shares the same centre axis as its number in every frame. */
.diagnosis-stat {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.diagnosis-value { width:max-content;max-width:100%;text-align:center; }
.diagnosis-stat-caption {
  display:inline-flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px;
  max-width:100%;
  margin:22px 0 0;
  padding:10px 16px;
  border:1px solid rgba(var(--line),.7);
  border-radius:999px;
  background:rgba(var(--ink),.035);
  color:rgb(var(--ink));
  font-size:14px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:.015em;
  text-align:center;
}
.diagnosis-count {
  display:inline-flex;
  align-items:center;
  width:fit-content;
  max-width:100%;
  margin-bottom:22px;
  padding:9px 13px;
  border:1px solid rgba(var(--accent),.3);
  border-radius:15px;
  background:rgba(var(--accent),.075);
  color:rgb(var(--accent));
  font-size:14px;
  font-weight:600;
  line-height:1.45;
  letter-spacing:.01em;
}
.diagnosis-fact[data-diagnosis="1"] .diagnosis-count {
  color:#9b3f35;
  background:#a8443709;
  border-color:#a8443733;
}

/* A straight screen preserves the real capture without invented device parts. */
#mobile .phone-stage { perspective:none; }
#mobile .screen-label { margin-bottom:22px; }
#mobile .phone-frame,
#mobile .phone-stage:hover .phone-frame {
  width:min(100%,280px);
  height:auto;
  aspect-ratio:375 / 812;
  padding:0;
  border:1px solid #f1f3ec66;
  border-radius:29px;
  background:#e9e9e6;
  box-shadow:0 32px 75px #0004,0 0 0 5px #e4ead40a;
  transform:none;
}
#mobile .phone-frame img {
  width:100%;
  height:100%;
  aspect-ratio:375 / 812;
  border-radius:28px;
  object-fit:cover;
  object-position:center top;
}
#mobile .phone-pin {
  width:32px;
  height:32px;
  font-size:14px;
  border:1px solid #e5d4a677;
  box-shadow:0 0 0 5px #ead8af33;
}
#mobile .phone-stage .text-button { margin-top:22px; }

/* A clear recommendation occupies the screen; full evidence stays one click away. */
#dizajn.review-design {
  height:100svh;
  min-height:600px;
  padding:calc(var(--header) + 24px) var(--gutter) 28px;
  display:flex;
  flex-direction:column;
  overflow:clip;
}
#dizajn.review-design > .section-label { flex:none;margin-bottom:24px; }
#dizajn.review-design > .section-heading {
  display:grid;
  grid-template-columns:1fr .78fr;
  align-items:center;
  gap:7vw;
  flex:none;
  margin-bottom:25px;
}
#dizajn.review-design .section-heading h2 {
  font-size:clamp(39px,4.1vw,66px);
  line-height:1.06;
  letter-spacing:-.06em;
}
#dizajn.review-design .section-heading > p {
  margin:0;
  padding:0;
  max-width:390px;
  font-size:15px;
  line-height:1.6;
}
.review-design-layout {
  display:grid;
  grid-template-columns:1fr .78fr;
  align-items:center;
  gap:7vw;
  min-height:0;
  flex:1;
}
#dizajn.review-design .design-principles {
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  margin:0;
  align-self:center;
}
#dizajn.review-design .design-principles > div {
  display:grid;
  grid-template-columns:38px 1fr;
  column-gap:17px;
  row-gap:5px;
  padding:17px 0;
  border-top:1px solid rgba(var(--line),.7);
}
#dizajn.review-design .design-principles > div > span {
  grid-column:1;
  grid-row:1 / 3;
  display:grid;
  place-items:center;
  align-self:start;
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid rgba(var(--accent),.3);
  background:rgba(var(--accent),.055);
  color:rgb(var(--accent));
  font-size:12px;
  padding:0;
}
#dizajn.review-design .design-principles h3 {
  grid-column:2;
  margin:0;
  font-size:clamp(22px,2vw,30px);
  line-height:1.2;
  letter-spacing:-.035em;
}
#dizajn.review-design .design-principles p {
  grid-column:2;
  max-width:430px;
  font-size:14px;
  line-height:1.5;
}
#dizajn.review-design .gallery {
  align-self:center;
  height:100%;
  max-height:420px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:0;
  margin:0;
  padding:18px;
  border:1px solid rgba(var(--line),.65);
  border-radius:21px;
  background:rgba(var(--ink),.025);
}
#dizajn.review-design .gallery-toolbar {
  flex:none;
  align-items:center;
  gap:12px;
  margin:0 0 14px;
}
#dizajn.review-design .gallery-toolbar .eyebrow {
  padding:0;
  background:none;
  border:0;
  border-radius:0;
  color:rgb(var(--muted));
  font-size:14px;
  line-height:1.4;
  letter-spacing:.035em;
}
#dizajn.review-design .gallery-toolbar h3 {
  font-size:18px;
  line-height:1.3;
  margin-top:4px;
}
#dizajn.review-design .gallery-controls { gap:6px; }
#dizajn.review-design .gallery-controls > span { font-size:12px;margin-right:5px; }
#dizajn.review-design .gallery-controls .round-button { width:38px;height:38px; }
#dizajn.review-design .gallery-image-button,
#dizajn.review-design .gallery-image-button.is-mobile {
  flex:1;
  min-height:100px;
  height:auto;
  max-height:300px;
  padding:0;
  border-radius:10px;
  background:rgba(var(--ink),.055);
}
#dizajn.review-design .gallery-image-button img {
  width:100%;
  height:100%;
  max-width:100%;
  max-height:none;
  object-fit:cover;
  object-position:center top;
  box-shadow:none;
}
#dizajn.review-design .gallery-image-button.is-mobile img {
  width:54%;
  max-width:none;
  height:auto;
  align-self:flex-start;
  object-fit:contain;
}
#dizajn.review-design .gallery-image-button > span {
  display:inline-flex;
  align-items:center;
  gap:8px;
  right:12px;
  bottom:12px;
  padding:9px 12px;
  border:1px solid #ffffff90;
  border-radius:999px;
  background:#f4f2ebee;
  color:#19221f;
  font-size:13px;
  font-weight:500;
  line-height:1.3;
  box-shadow:0 4px 20px #0001;
}

@media (min-width:761px) and (max-height:740px) {
  #dizajn.review-design { min-height:560px;padding-top:calc(var(--header) + 17px);padding-bottom:22px; }
  #dizajn.review-design > .section-label { margin-bottom:16px; }
  #dizajn.review-design > .section-heading { margin-bottom:18px; }
  #dizajn.review-design .section-heading h2 { font-size:44px; }
  #dizajn.review-design .design-principles > div { padding:12px 0; }
  #dizajn.review-design .design-principles h3 { font-size:23px; }
  #dizajn.review-design .gallery { padding:14px; }
}

@media (max-width:760px) {
  .section-label,
  .scene-pin > .section-label,
  .story-pin > .section-label { font-size:14px;line-height:1.35; }
  .section-label > span:first-child { font-size:13px;padding:7px 11px; }
  .eyebrow,.scene-overline,.journey-stage .scene-overline,.screen-label,.phase-label,.month-caption,
  .local-step,.seo-motion .seo-metric-kicker { font-size:14px;line-height:1.4; }
  .diagnosis-stat-caption { font-size:14px;line-height:1.45;margin:10px 0 0;padding:8px 12px; }
  .diagnosis-count { font-size:14px;line-height:1.45;margin-bottom:15px;padding:8px 11px; }
  .diagnosis-stat { align-items:center; }
  .diagnosis-fact { gap:20px; }
  .diagnosis-copy > p,.diagnosis-copy .diagnosis-note { font-size:14px;line-height:1.55; }
  #mobile .phone-frame,#mobile .phone-stage:hover .phone-frame { width:min(100%,280px);border-radius:28px; }
  #mobile .phone-frame img { border-radius:27px; }
  #mobile .phone-stage { margin-top:0; }

  #dizajn.review-design {
    height:100svh;
    min-height:810px;
    padding-top:calc(var(--header) + 18px);
    padding-bottom:22px;
  }
  #dizajn.review-design > .section-label { margin-bottom:18px; }
  #dizajn.review-design > .section-heading {
    display:block;
    margin-bottom:20px;
  }
  #dizajn.review-design .section-heading h2 { font-size:38px;line-height:1.08; }
  #dizajn.review-design .section-heading > p {
    max-width:100%;
    margin-top:16px;
    font-size:14px;
    line-height:1.5;
  }
  .review-design-layout { grid-template-columns:1fr;grid-template-rows:auto minmax(145px,1fr);gap:18px;align-items:stretch; }
  #dizajn.review-design .design-principles { align-self:stretch; }
  #dizajn.review-design .design-principles > div { grid-template-columns:30px 1fr;column-gap:13px;row-gap:5px;padding:13px 0; }
  #dizajn.review-design .design-principles > div > span { width:28px;height:28px;font-size:11px; }
  #dizajn.review-design .design-principles h3 { font-size:22px;line-height:1.2; }
  #dizajn.review-design .design-principles p { font-size:14px;line-height:1.45;max-width:100%; }
  #dizajn.review-design .gallery { padding:12px;border-radius:16px; }
  #dizajn.review-design .gallery-toolbar { margin-bottom:10px; }
  #dizajn.review-design .gallery-toolbar .eyebrow { font-size:14px; }
  #dizajn.review-design .gallery-toolbar h3 { font-size:15px;line-height:1.3; }
  #dizajn.review-design .gallery-controls .round-button { width:38px;height:38px;min-height:38px; }
  #dizajn.review-design .gallery-controls > span { display:none; }
  #dizajn.review-design .gallery-image-button,
  #dizajn.review-design .gallery-image-button.is-mobile { min-height:64px;max-height:170px; }
  #dizajn.review-design .gallery-image-button > span { right:8px;bottom:8px;font-size:12px;padding:8px 11px; }
  #dizajn.review-design .gallery-image-button.is-mobile img { width:45%; }
}

@media (max-width:760px) and (max-height:740px) {
  /* On short phones the evidence becomes a compact control, opened at full size. */
  #dizajn.review-design { height:100svh;min-height:0;overflow:clip;padding-top:calc(var(--header) + 12px);padding-bottom:12px; }
  #dizajn.review-design>.section-label { margin-bottom:12px; }
  #dizajn.review-design>.section-heading { margin-bottom:12px; }
  #dizajn.review-design .section-heading h2 { font-size:30px; }
  #dizajn.review-design .section-heading>p { display:none; }
  .review-design-layout { flex:1;grid-template-rows:1fr 68px;gap:12px; }
  #dizajn.review-design .design-principles>div { padding:9px 0;row-gap:4px; }
  #dizajn.review-design .design-principles h3 { font-size:19px; }
  #dizajn.review-design .design-principles p { font-size:14px;line-height:1.4; }
  #dizajn.review-design .gallery { display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;padding:10px;height:68px;min-height:0; }
  #dizajn.review-design .gallery-toolbar { display:contents; }
  #dizajn.review-design .gallery-toolbar>div:first-child { display:none; }
  #dizajn.review-design .gallery-controls { grid-column:2;grid-row:1; }
  #dizajn.review-design .gallery-image-button,#dizajn.review-design .gallery-image-button.is-mobile { grid-column:1;grid-row:1;height:44px;min-height:44px;max-height:44px;padding:0;justify-content:flex-start;background:none; }
  #dizajn.review-design .gallery-image-button img { display:none; }
  #dizajn.review-design .gallery-image-button>span { position:static;font-size:14px;padding:0;border:0;box-shadow:none;background:none; }
}

@media print {
  #dizajn.review-design { height:auto;min-height:0;overflow:visible;display:block;padding:30px 0; }
  .review-design-layout { display:grid;grid-template-columns:1fr 1fr;gap:35px; }
  #dizajn.review-design .gallery { min-height:260px; }
  .section-label > span:first-child,.diagnosis-stat-caption,.diagnosis-count { break-inside:avoid; }
}