/* Case-study summary card + previous/next navigation. Tokens from tokens.css. */
.cs-summary, .cs-pn { padding: clamp(24px, 5vw, 56px) clamp(16px, 4vw, 32px); font-family: "Montserrat", sans-serif; }

.cs-summary__card {
  position: relative;
  max-width: var(--container-max, 1120px);
  margin: 0 auto;
  padding: clamp(22px, 4vw, 36px);
  background: var(--surface-soft, #fafafa);
  border: 1px solid var(--line-soft, rgba(20,19,19,.08));
  border-radius: var(--radius-xl, 24px);
  color: var(--ink-800, #1f1f1f);
}
.cs-summary__card::before { content: ""; position: absolute; top: -1px; left: clamp(22px, 4vw, 36px); width: 56px; height: 3px; border-radius: 999px; background: var(--grad-main, linear-gradient(270deg,#398fba,#ff6c63)); }
.cs-summary__eyebrow { margin: 0 0 var(--space-lg, 24px); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-deep, #2b6f91); }
.cs-summary__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-lg, 24px) var(--space-xl, 32px); margin: 0; }
.cs-summary__item { min-width: 0; margin: 0; }
.cs-summary__item--wide { grid-column: 1 / -1; }
.cs-summary__item dt { margin: 0 0 6px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500, #6b6a6a); }
.cs-summary__item dd { margin: 0; font-size: 1rem; line-height: 1.5; font-weight: 600; color: var(--ink-900, #141313); overflow-wrap: anywhere; }
.cs-summary__note { margin: var(--space-lg, 24px) 0 0; font-size: .85rem; color: var(--ink-500, #6b6a6a); }

.cs-pn__inner { max-width: var(--container-max, 1120px); margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg, 24px); }
.cs-pn__card {
  display: grid; grid-template-columns: minmax(96px, 38%) 1fr; gap: var(--space-md, 18px); align-items: center;
  padding: var(--space-md, 18px); text-decoration: none; color: var(--ink-900, #141313);
  background: var(--surface, #fff); border: 1px solid var(--line-soft, rgba(20,19,19,.08)); border-radius: var(--radius-xl, 24px);
  transition: transform var(--motion-standard, .28s) var(--ease-standard, ease), box-shadow var(--motion-standard, .28s) var(--ease-standard, ease), border-color var(--motion-standard, .28s);
}
.cs-pn__card--next { text-align: right; grid-template-columns: 1fr minmax(96px, 38%); }
.cs-pn__card--next .cs-pn__fig { order: 2; }
.cs-pn__fig { display: block; aspect-ratio: 16 / 11; overflow: hidden; border-radius: var(--radius-lg, 20px); background: var(--surface-sunken, #f4f5f7); }
.cs-pn__fig img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-soft, ease); }
.cs-pn__meta { display: grid; gap: 6px; min-width: 0; }
.cs-pn__dir { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-deep, #2b6f91); }
.cs-pn__card--next .cs-pn__dir { justify-content: flex-end; }
.cs-pn__dir svg { width: 16px; height: 16px; transition: transform var(--motion-standard, .28s) var(--ease-standard, ease); }
.cs-pn__card--prev .cs-pn__dir svg { transform: rotate(180deg); }
.cs-pn__title { font-size: clamp(1rem, 2vw, 1.3rem); font-weight: 800; line-height: 1.2; }
.cs-pn__tag { font-size: .85rem; color: var(--ink-500, #6b6a6a); }
.cs-pn__card:focus-visible { outline: 3px solid var(--blue, #398fba); outline-offset: 3px; }

@media (hover: hover) {
  .cs-pn__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md, 0 12px 30px rgba(0,0,0,.1)); border-color: var(--line-med, rgba(43,111,145,.2)); }
  .cs-pn__card:hover .cs-pn__fig img { transform: scale(1.05); }
  .cs-pn__card--next:hover .cs-pn__dir svg { transform: translateX(4px); }
  .cs-pn__card--prev:hover .cs-pn__dir svg { transform: rotate(180deg) translateX(4px); }
}
@media (max-width: 700px) {
  .cs-pn__inner { grid-template-columns: minmax(0, 1fr); }
  .cs-pn__card, .cs-pn__card--next { grid-template-columns: 96px 1fr; text-align: left; }
  .cs-pn__card--next .cs-pn__fig { order: 0; }
  .cs-pn__card--next .cs-pn__dir { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .cs-pn__card, .cs-pn__fig img, .cs-pn__dir svg { transition: none; } .cs-pn__card:hover { transform: none; } }

.cs-pn__lock { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; color: var(--blue-deep, #2b6f91); }
.cs-pn__card--next .cs-pn__lock { justify-content: flex-end; }
.cs-pn__lock svg { width: 13px; height: 13px; }
@media (max-width: 700px) { .cs-pn__card--next .cs-pn__lock { justify-content: flex-start; } }

/* Outcome: what testing changed vs. what is still unvalidated. Replaces Key Learnings / Next Steps. */
.cs-outcome { padding: clamp(48px, 8vw, 104px) clamp(16px, 4vw, 32px); font-family: "Montserrat", sans-serif; color: var(--ink-800, #1f1f1f); }
.cs-outcome__rail { max-width: var(--container-max, 1120px); margin: 0 auto; }
.cs-outcome__eyebrow { margin: 0 0 var(--space-sm, 12px); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-deep, #2b6f91); }
.cs-outcome__title { margin: 0 0 var(--space-md, 18px); max-width: 22ch; font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 800; line-height: 1.12; letter-spacing: -.01em; color: var(--ink-900, #141313); }
.cs-outcome__lede { margin: 0 0 var(--space-xl, 32px); max-width: 62ch; font-size: 1.05rem; line-height: 1.65; color: var(--ink-600, #4a4949); }
.cs-outcome__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--space-lg, 24px); }
.cs-outcome__card { padding: clamp(20px, 3vw, 32px); background: var(--surface-soft, #fafafa); border: 1px solid var(--line-soft, rgba(20,19,19,.08)); border-radius: var(--radius-xl, 24px); }
.cs-outcome__card--open { background: transparent; border-style: dashed; border-color: var(--line-med, rgba(43,111,145,.3)); }
.cs-outcome__card h3 { margin: 0 0 var(--space-md, 18px); font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-deep, #2b6f91); }
.cs-outcome__card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-md, 16px); }
.cs-outcome__card li { position: relative; padding-left: 18px; font-size: .98rem; line-height: 1.6; }
.cs-outcome__card li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--blue, #398fba); }
.cs-outcome__card--open li::before { background: transparent; border: 1.5px solid var(--blue, #398fba); }
.cs-outcome__card li strong { color: var(--ink-900, #141313); font-weight: 700; }

/* Outcome variants: finding -> change rows */
.cs-rows { margin: 0 0 var(--space-lg, 24px); padding: 0; list-style: none; border-top: 1px solid var(--line-soft, rgba(20,19,19,.1)); }
.cs-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) auto; gap: var(--space-sm, 12px) var(--space-lg, 24px); align-items: start; padding: var(--space-md, 18px) 0; border-bottom: 1px solid var(--line-soft, rgba(20,19,19,.1)); }
.cs-row__a { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--ink-600, #4a4949); }
.cs-row__b { margin: 0; font-size: 1rem; line-height: 1.55; font-weight: 600; color: var(--ink-900, #141313); }
.cs-row__label { display: block; margin-bottom: 4px; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-deep, #2b6f91); }
.cs-row__tag { align-self: center; padding: 4px 12px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap; border: 1px solid var(--line-med, rgba(43,111,145,.3)); color: var(--blue-deep, #2b6f91); }
.cs-row__tag--open { border-style: dashed; color: var(--ink-500, #6b6a6a); }
.cs-outcome__note { margin: 0; max-width: 70ch; padding: var(--space-md, 18px) var(--space-lg, 24px); border-left: 3px solid var(--blue, #398fba); background: var(--surface-soft, #fafafa); border-radius: 0 var(--radius-lg, 16px) var(--radius-lg, 16px) 0; font-size: .98rem; line-height: 1.65; }
@media (max-width: 760px) { .cs-row { grid-template-columns: minmax(0, 1fr); } .cs-row__tag { justify-self: start; } }

/* Email gallery: real designs, captioned by decision */
.em-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--space-lg, 24px); align-items: start; margin: var(--space-xl, 32px) 0; }
.em-shot { margin: 0; display: grid; gap: var(--space-sm, 12px); }
.em-shot__link { display: block; border-radius: var(--radius-lg, 16px); overflow: hidden; border: 1px solid var(--line-soft, rgba(20,19,19,.1)); background: #fff; max-height: 520px; position: relative; transition: transform .28s ease, box-shadow .28s ease; }
.em-shot__link::after { content: ""; position: absolute; inset: auto 0 0 0; height: 64px; background: linear-gradient(to top, rgba(255,255,255,.95), transparent); pointer-events: none; }
.em-shot__link img { display: block; width: 100%; height: auto; }
.em-shot__link:focus-visible { outline: 3px solid var(--blue, #398fba); outline-offset: 3px; }
.em-shot figcaption { font-size: .9rem; line-height: 1.55; color: var(--ink-600, #4a4949); }
.em-shot__kind { display: block; margin-bottom: 2px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-deep, #2b6f91); }
@media (hover: hover) { .em-shot__link:hover { transform: translateY(-4px); box-shadow: var(--shadow-md, 0 12px 30px rgba(0,0,0,.12)); } }
@media (prefers-reduced-motion: reduce) { .em-shot__link { transition: none; } .em-shot__link:hover { transform: none; } }

/* Findings that are qualitative patterns, not measured percentages: no chart */
.qr-donut[aria-hidden="true"], .quant-chart[aria-hidden="true"] { display: none; }
.qr-item:has(> .qr-donut[aria-hidden="true"]), .quant-item:has(> .quant-chart[aria-hidden="true"]) { grid-template-columns: minmax(0, 1fr); }
.qr-item:has(> .qr-donut[aria-hidden="true"]) .qr-copy, .quant-item:has(> .quant-chart[aria-hidden="true"]) .quant-copy { max-width: 62ch; }

/* Contrast fixes (WCAG AA for body-size text) */
.lv-assumptions__intro, .solution__final { color: var(--ink-700, #3a3939); }
.xr-section__num, .xr-overview-card__label { color: #3d5a46; }
html[data-theme="dark"] .xr-section__num, html[data-theme="dark"] .xr-overview-card__label { color: #a9cdb4; }

.quant-item.is-single, .qr-item.is-single { grid-template-columns: minmax(0, 1fr); }
.quant-item.is-single .quant-copy, .qr-item.is-single .qr-copy { max-width: 62ch; }

/* Finding cards (qualitative findings, no chart) */
.quant-item.is-single, .qr-item.is-single { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: clamp(16px, 3vw, 28px); max-width: 920px; padding: clamp(20px, 3vw, 32px); background: var(--surface, #fff); border: 1px solid var(--line-soft, rgba(20,19,19,.1)); border-radius: var(--radius-xl, 24px); }
.finding-icon { flex: 0 0 auto; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--surface-sunken, #eef3f6); color: var(--blue-deep, #2b6f91); }
.finding-icon svg { width: 28px; height: 28px; }
.is-single h3 { margin: 0 0 8px; font-size: clamp(1.1rem, 2.2vw, 1.45rem) !important; line-height: 1.2; }
.is-single p { margin: 0; }
@media (max-width: 520px) { .quant-item.is-single, .qr-item.is-single { flex-direction: column !important; } }
.quant-item.is-single, .qr-item.is-single { margin-block: 0 16px; }

/* Persona portraits: clean circular avatar so cut-out edges don't show */
html #persona .profile-photo {
  width: min(100%, 240px);
  aspect-ratio: 1 / 1;
  margin: 4px auto 18px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.62), rgba(255,255,255,.2) 72%);
  box-shadow: 0 0 0 4px rgba(255,255,255,.4), 0 10px 24px rgba(0,0,0,.14);
}
html #persona .profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 8%;
  transform: scale(1.14);
  transform-origin: 50% 18%;
}

/* Grow Email System: full-width page with a centred 1160px reading column */
html .cs-page { max-width: none; width: 100%; margin: 0 0 64px; border-radius: 0; border-width: 1px 0; }
html .cs-page .hero { padding-inline: max(24px, calc((100% - 1320px) / 2)); padding-block: clamp(48px, 7vw, 96px); }
html .cs-page .hero h1 { max-width: 14ch; font-size: clamp(2.5rem, 6vw, 4.5rem); }
html .cs-page .hero-sub { max-width: 60ch; font-size: clamp(1rem, 1.6vw, 1.2rem); }
html .cs-page .kpi-bar { max-width: 760px; }
html .cs-page .cs-body { padding-inline: max(24px, calc((100% - 1320px) / 2)); }
html .cs-page .cta-section { padding-inline: max(24px, calc((100% - 1320px) / 2)); }
html .cs-page .em-gallery { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
html .cs-page .em-shot__link { max-height: 600px; }

html .cs-page .hero h1 { max-width: 20ch; }
.cs-page .hero-shots { display: none; }
@media (min-width: 1000px) {
  .cs-page .hero-shots { display: block; position: absolute; right: max(24px, calc((100% - 1320px) / 2)); top: 48px; bottom: -80px; width: 400px; z-index: 1; pointer-events: none; }
  .cs-page .hero-shots img { position: absolute; width: 230px; height: auto; border-radius: 16px; box-shadow: 0 24px 60px rgba(8,20,70,.45); }
  .cs-page .hero-shots img:first-child { right: 150px; top: 0; transform: rotate(-4deg); }
  .cs-page .hero-shots img:last-child { right: 0; top: 70px; transform: rotate(3deg); }
}

/* Lumeve: Four-step fit journey */
html #how-it-works.fj { display: block; max-width: 1320px; margin: 0 auto; padding: clamp(56px, 8vw, 112px) clamp(16px, 4vw, 32px); font-family: "Montserrat", sans-serif; }
.fj__head { margin: 0 0 clamp(32px, 5vw, 64px); }
.fj__eyebrow { margin: 0 0 12px; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-deep, #2b6f91); }
html .fj__title { margin: 0; max-width: 20ch; font-size: clamp(1.9rem, 4.4vw, 3.1rem); font-weight: 800; line-height: 1.1; letter-spacing: -.01em; color: var(--ink-900, #141313); text-align: left; }
.fj__list { margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(24px, 4vw, 40px); counter-reset: fj; }
.fj__step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(24px, 5vw, 72px); align-items: center; padding: clamp(24px, 4vw, 48px); background: var(--surface-soft, #fafafa); border: 1px solid var(--line-soft, rgba(20,19,19,.08)); border-radius: var(--radius-xl, 24px); }
.fj__step:nth-child(even) .fj__shot { order: -1; }
.fj__num { display: block; font-size: clamp(2.6rem, 6vw, 4.2rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.5px var(--blue, #398fba); margin-bottom: 12px; }
.fj__icon { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: 14px; border-radius: 16px; background: var(--surface-sunken, #eef3f6); }
.fj__icon img { width: 26px; height: 26px; object-fit: contain; }
.fj__h3 { margin: 0 0 10px; font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 800; line-height: 1.2; color: var(--ink-900, #141313); }
.fj__p { margin: 0 0 14px; max-width: 46ch; font-size: 1rem; line-height: 1.65; color: var(--ink-600, #4a4949); }
.fj__why { margin: 0; max-width: 46ch; padding-left: 14px; border-left: 3px solid var(--blue, #398fba); font-size: .92rem; line-height: 1.55; color: var(--ink-700, #3a3939); }
.fj__why strong { color: var(--blue-deep, #2b6f91); }
.fj__shot { display: grid; place-items: center; padding: clamp(12px, 2vw, 24px); border-radius: var(--radius-lg, 20px); background: radial-gradient(circle at 50% 30%, rgba(57,143,186,.16), transparent 70%); }
.fj__shot img { display: block; width: auto; max-width: 100%; max-height: 460px; height: auto; filter: drop-shadow(0 18px 30px rgba(20,40,60,.2)); }
@media (max-width: 760px) { .fj__step { grid-template-columns: minmax(0, 1fr); } .fj__step:nth-child(even) .fj__shot { order: 0; } .fj__shot img { max-height: 380px; } }

/* Case studies: shared wide content column */
.cs-summary__card, .cs-pn__inner, .cs-outcome__rail { max-width: 1320px; }

/* Qualitative findings: fill the row with equal cards */
.quant-list:not(:has(> :not(.is-single))), .qr-rail:has(> .is-single):not(:has(> .qr-item:not(.is-single))) { }
.quant-list:not(:has(> :not(.is-single))) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-lg, 24px); }
.quant-list:not(:has(> :not(.is-single))) > .is-single { flex-direction: column !important; max-width: none; margin: 0; height: 100%; }
.quant-list:not(:has(> :not(.is-single))) .is-single h3 { max-width: none; }
.quant-list:not(:has(> :not(.is-single))) .quant-copy { max-width: none; }

/* GL final designs: compact crops */
.gl-home { grid-template-columns: minmax(0, 1.5fr) minmax(0, .5fr) !important; align-items: end; }
.gl-home img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.gl-home__mobile img { aspect-ratio: 9 / 16; max-height: 440px; margin-inline: auto; width: auto; max-width: 100%; }
@media (max-width: 560px) { .gl-home { grid-template-columns: minmax(0, 1fr) !important; } .gl-home__mobile img { max-height: 360px; } }

/* Lumeve: Multi-platform section */
html .fit-experience .label { max-width: 1160px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 10px clamp(24px, 5vw, 72px); align-items: start; text-align: left; }
html .fit-experience .label > h2 { grid-column: 1; grid-row: 1; margin: 0; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.05; }
html .fit-experience .label > p:nth-of-type(1) { grid-column: 1; grid-row: 2; margin: 0; font-size: clamp(1.05rem, 1.8vw, 1.35rem); font-weight: 600; }
html .fit-experience .label > p:nth-of-type(2) { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 1rem; line-height: 1.7; max-width: 52ch; }
html .fit-experience .device-gallery { width: 100%; max-width: 1160px; margin-inline: auto; }
@media (max-width: 860px) { html .fit-experience .label { grid-template-columns: minmax(0, 1fr); } html .fit-experience .label > p:nth-of-type(2) { grid-column: 1; grid-row: 3; } }
@media (prefers-reduced-motion: no-preference) {
  .fx-ready .fit-experience .label > *, .fx-ready .fit-experience .device-gallery { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
  .fx-ready .fit-experience.is-inview .label > *, .fx-ready .fit-experience.is-inview .device-gallery { opacity: 1; transform: none; }
  .fx-ready .fit-experience.is-inview .label > :nth-child(2) { transition-delay: .1s; }
  .fx-ready .fit-experience.is-inview .label > :nth-child(3) { transition-delay: .2s; }
  .fx-ready .fit-experience.is-inview .device-gallery { transition-delay: .3s; }
}

/* Findings: no empty right side. Full-width cards, or a row of equal cards when every finding is a card. */
.quant-item.is-single, .qr-item.is-single { max-width: none; }
.qr-rail:has(> .qr-item.is-single):not(:has(> .qr-item:not(.is-single))) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-lg, 24px); align-items: stretch; }
.qr-rail:has(> .qr-item.is-single):not(:has(> .qr-item:not(.is-single))) > :not(.qr-item) { grid-column: 1 / -1; }
.qr-rail:has(> .qr-item.is-single):not(:has(> .qr-item:not(.is-single))) > .qr-item.is-single { flex-direction: column !important; margin: 0; }
.qr-item.is-single .qr-copy { max-width: none; }

/* Motion layer (js/case-motion.js) */
.mo { opacity: 0; transform: translateY(26px); }
.mo.mo-in { opacity: 1; transform: none; transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1); }
.mo-progress { position: fixed; left: 0; top: 0; z-index: 99990; width: 100%; height: 3px; transform: scaleX(0); transform-origin: 0 50%; background: var(--grad-main, linear-gradient(90deg, #398fba, #ff6c63)); pointer-events: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cs-outcome__card, .em-shot, .fj__step, .is-single, .mw-card, .resume-impact li { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }
  .cs-outcome__card:hover, .fj__step:hover, .is-single:hover { transform: translateY(-4px); box-shadow: var(--shadow-md, 0 14px 32px rgba(20,40,60,.12)); }
  .fj__shot img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
  .fj__step:hover .fj__shot img { transform: translateY(-6px) scale(1.02); }
  .cs-row { transition: background-color .25s ease; }
  .cs-row:hover { background-color: var(--surface-soft, rgba(57,143,186,.05)); }
}

/* Outcome rows: padded, rounded hover instead of a flush square highlight */
.cs-outcome { padding-inline: clamp(24px, 5vw, 56px); }
.cs-row { margin-inline: -16px; padding-inline: 16px; border-radius: 16px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cs-row:hover { background-color: color-mix(in srgb, var(--blue, #398fba) 7%, transparent); }
}
@media (max-width: 760px) { .cs-row { margin-inline: -8px; padding-inline: 8px; } }

/* GL final designs: browser + phone stage */
html .gl-stage { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 48px); align-items: flex-end; justify-content: center; max-width: 1120px; margin: 0 auto clamp(32px, 5vw, 56px); padding: clamp(24px, 4vw, 56px); border-radius: 24px; background: radial-gradient(120% 90% at 20% 0%, #e1f5ee 0%, #eef6f2 55%, #f6f8f6 100%); }
html .gl-stage figure { margin: 0; }
html .gl-stage__desktop { flex: 1 1 520px; max-width: 700px; }
html .gl-stage__mobile { flex: 0 1 230px; }
.gl-browser { border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 24px 54px rgba(8,80,65,.2), 0 0 0 1px rgba(8,80,65,.1); }
.gl-browser__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #e7efeb; }
.gl-browser__bar span { width: 9px; height: 9px; border-radius: 50%; background: #a9c3b9; }
.gl-browser__bar em { margin-left: 10px; padding: 3px 12px; border-radius: 999px; background: #fff; font: 600 11px/1.4 "IBM Plex Sans", system-ui, sans-serif; font-style: normal; color: #4a6b5f; }
.gl-browser img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover; object-position: top; border: 0; border-radius: 0; box-shadow: none; aspect-ratio: auto; }
.gl-phone { padding: 9px; border-radius: 32px; background: #12281f; box-shadow: 0 24px 50px rgba(8,80,65,.28); }
.gl-phone img { display: block; width: 100%; height: auto; max-height: 440px; object-fit: cover; object-position: top; border: 0; border-radius: 24px; box-shadow: none; aspect-ratio: auto; }
html .gl-stage .screen-caption { margin-top: 1rem; font-size: .88rem; line-height: 1.55; }
@media (max-width: 640px) { html .gl-stage__mobile { flex-basis: 100%; max-width: 230px; margin-inline: auto; } }

/* Lumeve hero: single clean prototype button (replaces the boxed wrapper) */
.lm-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(16px, 2.4vw, 28px); }
.lm-cta .btn__icon { display: inline-flex; width: 20px; height: 20px; }
.lm-cta .btn__icon img { width: 20px; height: 20px; }