/* Section-driven Gymful case editorial variant. Original project code; no Osmo widget. */
.gf-case-editorial { overflow: clip; }
.gf-case-editorial :is(section, header, figure, div, article) { min-width: 0; }
.gf-case-editorial .gf-wrap { max-width: 1600px; }
.gf-ed-section { padding-block: clamp(5rem, 10vw, 11rem); }
.gf-ed-hero { padding-top: clamp(8.5rem, 12vw, 12rem); }
.gf-ed-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.gf-ed-hero-top > p { color: #b8c0b6; }
.gf-ed-back { display: inline-flex; align-items: center; gap: .7rem; width: fit-content; color: inherit; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.gf-ed-back svg { width: 1.25rem; height: 1.25rem; transition: transform .25s var(--gf-ease); }
.gf-ed-back:hover svg, .gf-ed-back:focus-visible svg { transform: translateX(-.25rem); }
.gf-ed-hero-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .3fr); align-items: end; gap: 1.5rem 3rem; padding-block: clamp(4rem, 9vw, 9rem) clamp(3rem, 5vw, 5rem); }
.gf-ed-hero-heading .gf-eyebrow { grid-column: 1 / -1; color: var(--gf-acid); }
.gf-ed-hero h1 { max-width: 10ch; font-size: clamp(5rem, 11.5vw, 12.5rem); line-height: .78; text-wrap: balance; }
.gf-ed-hero-heading > p:last-child { max-width: 21rem; padding-bottom: .3rem; color: #d5dcd1; font-size: clamp(1.1rem, 1.55vw, 1.5rem); line-height: 1.45; }
.gf-ed-hero-art { position: relative; width: 100%; aspect-ratio: 2.15; overflow: hidden; background: #1a1e1a; }
.gf-ed-hero-art img { width: 100%; height: 100%; object-fit: cover; }
.gf-ed-hero-art figcaption { position: absolute; right: var(--gf-gutter); bottom: 1.5rem; padding: .5rem .75rem; background: rgb(18 20 18 / 82%); color: #fff; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.gf-ed-intro-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(15rem, .5fr); gap: clamp(3rem, 9vw, 9rem); }
.gf-ed-intro .gf-eyebrow { margin-bottom: 2rem; }
.gf-ed-intro-grid > div:first-child > p:last-child { max-width: 48rem; font-size: clamp(1.6rem, 2.5vw, 2.7rem); line-height: 1.32; letter-spacing: -.025em; }
.gf-ed-small-label { margin-bottom: 1.5rem !important; color: var(--gf-page-subtle); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.gf-ed-intro ul, .gf-ed-channels ul { margin: 0; padding: 0; list-style: none; }
.gf-ed-intro li { padding: .7rem 0; border-top: 1px solid var(--gf-page-line); font-size: .9rem; }
.gf-ed-copy h2 { max-width: 17ch; margin-top: clamp(1.5rem, 3vw, 3rem); font-size: clamp(3.5rem, 6.5vw, 7.5rem); line-height: .91; }
.gf-ed-copy > p:last-child { max-width: 43rem; margin-top: clamp(1.5rem, 3vw, 3rem); color: var(--gf-page-subtle); font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.68; }
.gf-ed-statement { background: var(--gf-page-soft); }
.gf-ed-statement .gf-ed-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .5fr); gap: 1rem 5vw; align-items: end; }
.gf-ed-statement .gf-ed-copy .gf-eyebrow { grid-column: 1 / -1; }
.gf-ed-statement .gf-ed-copy h2 { margin: 0; }
.gf-ed-statement .gf-ed-copy > p:last-child { margin: 0; }
.gf-ed-feature-grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1fr); align-items: center; gap: clamp(3rem, 9vw, 10rem); }
.gf-ed-feature-art { background: var(--gf-page-raised); }
.gf-ed-feature-art img { display: block; width: 100%; aspect-ratio: .95; object-fit: cover; }
.gf-ed-feature-art figcaption, .gf-ed-pair-art figcaption, .gf-ed-browser-art figcaption { padding-top: .8rem; font-size: .72rem; color: var(--gf-page-subtle); letter-spacing: .04em; }
.gf-ed-feature-art img { border-radius: .15rem; }
.gf-ed-pair { background: var(--gf-page-soft); }
.gf-ed-pair .gf-ed-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .6fr); gap: 1rem 4rem; align-items: end; margin-bottom: clamp(3rem, 6vw, 6rem); }
.gf-ed-pair .gf-eyebrow { grid-column: 1 / -1; }
.gf-ed-pair .gf-ed-copy h2, .gf-ed-pair .gf-ed-copy > p:last-child { margin-top: 0; }
.gf-ed-pair-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .7fr); align-items: end; gap: clamp(1rem, 3vw, 3rem); }
.gf-ed-pair-art img { display: block; width: 100%; aspect-ratio: 1.28; object-fit: cover; }
.gf-ed-pair-art:nth-child(2) img { aspect-ratio: .8; }
.gf-ed-digital { background: #1b241f; }
.gf-ed-digital .gf-ed-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .55fr); align-items: end; gap: 1rem 4rem; margin-bottom: clamp(3rem, 6vw, 6rem); }
.gf-ed-digital .gf-ed-copy .gf-eyebrow { grid-column: 1 / -1; color: var(--gf-acid); }
.gf-ed-digital .gf-ed-copy h2, .gf-ed-digital .gf-ed-copy > p:last-child { margin-top: 0; }
.gf-ed-digital .gf-ed-copy > p:last-child { color: #d3ddd3; }
.gf-ed-journey { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: 0 0 clamp(3rem, 5vw, 5rem); padding: 0; list-style: none; border-top: 1px solid rgb(255 255 255 / 20%); }
.gf-ed-journey::after { content: ''; position: absolute; top: -1px; left: 0; width: 100%; height: 1px; background: var(--gf-acid); transform-origin: left center; }
.gf-ed-journey li { display: flex; gap: .75rem; min-width: 0; padding-top: 1.1rem; color: #f0efe9; font-size: clamp(.8rem, 1.1vw, 1rem); line-height: 1.4; }
.gf-ed-journey li span { flex: none; color: var(--gf-acid); font-size: .67rem; letter-spacing: .08em; }
.gf-ed-archives { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr); gap: clamp(1.5rem, 3vw, 3.5rem); align-items: end; }
.gf-ed-archive:nth-child(even) { padding-bottom: clamp(1.5rem, 5vw, 5rem); }
.gf-ed-archive-label { margin-bottom: .85rem; color: var(--gf-acid); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.gf-ed-browser { max-width: 1200px; margin-inline: auto; overflow: hidden; border: 1px solid rgb(255 255 255 / 24%); border-radius: .9rem .9rem 0 0; background: #090b0a; box-shadow: 0 3rem 5rem rgb(0 0 0 / 20%); }
.gf-ed-browser-bar { display: flex; align-items: center; gap: .4rem; height: 2.4rem; padding-inline: 1rem; border-bottom: 1px solid rgb(255 255 255 / 14%); }
.gf-ed-browser-bar span { width: .47rem; height: .47rem; border: 1px solid rgb(255 255 255 / 54%); border-radius: 50%; }
.gf-ed-browser-art img { display: block; width: 100%; height: auto; }
.gf-ed-browser-art figcaption { padding: .9rem 1rem; color: #d3ddd3; }
.gf-ed-channels-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: clamp(3rem, 9vw, 9rem); align-items: end; }
.gf-ed-channels .gf-ed-copy > p:last-child { max-width: 33rem; }
.gf-ed-channels ul { border-top: 1px solid var(--gf-page-line); }
.gf-ed-channels li { display: flex; gap: 1.5rem; align-items: baseline; padding-block: 1.2rem; border-bottom: 1px solid var(--gf-page-line); font-family: var(--gf-display); font-size: clamp(1.9rem, 3.5vw, 3.5rem); line-height: 1; text-transform: uppercase; }
.gf-ed-channels li span { flex: 0 0 1.3rem; color: var(--gf-page-subtle); font-family: var(--gf-body); font-size: .65rem; }
.gf-ed-system { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: stretch; gap: clamp(1.5rem, 3vw, 3rem); margin-top: clamp(4rem, 7vw, 7rem) !important; }
.gf-ed-system-photo { display: flex; flex-direction: column; }
.gf-ed-system-photo img { display: block; width: 100%; height: 100%; min-height: 25rem; object-fit: cover; object-position: center; }
.gf-ed-system > figure:last-child { display: flex; flex-direction: column; }
.gf-ed-system-art { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); min-height: 25rem; overflow: hidden; background: #101613; color: #f0efe9; }
.gf-ed-system-brand { display: flex; flex-direction: column; align-items: start; justify-content: space-between; gap: 2rem; min-width: 0; padding: clamp(1.5rem, 4vw, 4rem); background: #171e19; }
.gf-ed-system-brand img { display: block; width: clamp(7rem, 13vw, 12rem); height: auto; object-fit: contain; }
.gf-ed-system-brand > span { max-width: 15ch; color: var(--gf-acid); font-family: var(--gf-display); font-size: clamp(2.3rem, 4.5vw, 5rem); line-height: .9; text-transform: uppercase; }
.gf-ed-system-applications { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gf-ed-system-application { display: flex; flex-direction: column; justify-content: space-between; gap: 4rem; min-width: 0; padding: clamp(1.5rem, 3vw, 3rem); border-left: 1px solid rgb(240 239 233 / 19%); }
.gf-ed-system-application > span { color: #c9d3c9; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.gf-ed-system-application > strong { max-width: 12ch; font-family: var(--gf-display); font-size: clamp(2.2rem, 3.7vw, 4.5rem); font-weight: 400; line-height: .95; text-transform: uppercase; overflow-wrap: anywhere; }
.gf-ed-system figcaption { max-width: 46rem; padding-top: .85rem; color: var(--gf-page-subtle); font-size: .72rem; line-height: 1.5; }
.gf-ed-outcome { background: #13251c; }
.gf-ed-outcome .gf-ed-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .6fr); align-items: end; gap: 1rem 5vw; }
.gf-ed-outcome .gf-eyebrow { grid-column: 1 / -1; color: var(--gf-acid); }
.gf-ed-outcome .gf-ed-copy h2, .gf-ed-outcome .gf-ed-copy > p:last-child { margin-top: 0; }
.gf-ed-outcome .gf-ed-copy > p:last-child { color: #d3ddd3; }
.gf-ed-film { background: #0d1711; }
.gf-ed-film-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .45fr); gap: 1rem 4rem; align-items: end; margin-bottom: clamp(2rem, 5vw, 5rem); }
.gf-ed-film-head .gf-eyebrow { grid-column: 1 / -1; color: var(--gf-acid); }
.gf-ed-film-head h2 { font-size: clamp(3.5rem, 6vw, 7rem); }
.gf-ed-film-head > p:last-child { max-width: 26rem; color: #d3ddd3; font-size: .95rem; line-height: 1.6; }
.gf-ed-video { max-width: 1200px; margin-inline: auto; --gf-video-aspect: 16 / 9; }
.gf-ed-related-head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(2rem, 5vw, 5rem); }
.gf-ed-related-head h2 { font-size: clamp(3.5rem, 6vw, 7rem); }
.gf-ed-related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 3rem); margin-bottom: 3rem; }
.gf-ed-related-card a { display: block; color: inherit; text-decoration: none; }
.gf-ed-related-image { overflow: hidden; aspect-ratio: 1.55; background: var(--gf-page-raised); }
.gf-ed-related-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--gf-ease); }
.gf-ed-related-card a:hover img, .gf-ed-related-card a:focus-visible img { transform: scale(1.035); }
.gf-ed-related-title { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .5rem; padding-top: 1.2rem; }
.gf-ed-related-title > span { grid-column: 1 / -1; color: var(--gf-page-subtle); font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; }
.gf-ed-related-title h3 { font-size: clamp(2.6rem, 4vw, 4.5rem); }
.gf-ed-related-title svg { width: 1.5rem; height: 1.5rem; }
html[data-theme="dark"] .gf-case-editorial { background: var(--gf-page-bg); color: var(--gf-page-text); }
@media (max-width: 900px) {
  .gf-ed-hero-heading, .gf-ed-statement .gf-ed-copy, .gf-ed-feature-grid, .gf-ed-pair .gf-ed-copy,
  .gf-ed-digital .gf-ed-copy, .gf-ed-channels-grid, .gf-ed-outcome .gf-ed-copy, .gf-ed-film-head { grid-template-columns: 1fr; }
  .gf-ed-feature-art { max-width: 45rem; }
  .gf-ed-feature-grid .gf-ed-copy { max-width: 44rem; }
  .gf-ed-hero-heading > p:last-child { max-width: 35rem; }
  .gf-ed-system { grid-template-columns: 1fr; }
  .gf-ed-system-photo img { height: auto; min-height: 0; aspect-ratio: 1.7; }
}
@media (max-width: 600px) {
  .gf-ed-section { padding-block: 5rem; }
  .gf-ed-hero { padding-top: 7.5rem; }
  .gf-ed-hero-top > p { display: none; }
  .gf-ed-hero-heading { padding-block: 4rem 3rem; }
  .gf-ed-hero h1 { font-size: clamp(3.8rem, 15.2vw, 6rem); }
  .gf-ed-hero-art { aspect-ratio: .9; }
  .gf-ed-hero-art figcaption { right: .75rem; bottom: .75rem; max-width: calc(100% - 1.5rem); }
  .gf-ed-intro-grid, .gf-ed-pair-grid, .gf-ed-related-grid { grid-template-columns: 1fr; }
  .gf-ed-copy h2 { font-size: clamp(3.1rem, 12vw, 5rem); }
  .gf-ed-intro-grid > div:first-child > p:last-child { font-size: clamp(1.4rem, 6vw, 1.8rem); }
  .gf-ed-feature-art, .gf-ed-pair-art, .gf-ed-browser { width: 100%; }
  .gf-ed-pair-art img, .gf-ed-pair-art:nth-child(2) img { aspect-ratio: 1.15; }
  .gf-ed-journey { grid-template-columns: 1fr; gap: 0; }
  .gf-ed-journey::after { display: none; }
  .gf-ed-journey li { padding: .75rem 0; border-bottom: 1px solid rgb(255 255 255 / 17%); }
  .gf-ed-archives { grid-template-columns: 1fr; }
  .gf-ed-archive:nth-child(even) { padding-bottom: 0; }
  .gf-ed-browser-bar { height: 1.8rem; }
  .gf-ed-film-head h2, .gf-ed-related-head h2 { font-size: clamp(3.1rem, 12vw, 5rem); }
  .gf-ed-system-art, .gf-ed-system-applications { grid-template-columns: 1fr; }
  .gf-ed-system-art { min-height: 0; }
  .gf-ed-system-brand { min-height: 16rem; }
  .gf-ed-system-application { gap: 2rem; min-height: 10rem; border-left: 0; border-top: 1px solid rgb(240 239 233 / 19%); }
}
@supports (animation-timeline: view()) {
  @media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
    .gf-ed-journey::after { animation: gf-ed-journey-progress linear both; animation-timeline: view(); animation-range: entry 0% cover 75%; }
    @keyframes gf-ed-journey-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    .gf-ed-system-brand img { animation: gf-ed-system-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes gf-ed-system-drift { from { transform: translateY(.5rem); } to { transform: translateY(-.5rem); } }
  }
}
@media (prefers-reduced-motion: reduce) {
  .gf-case-editorial :is(.gf-ed-back svg, .gf-ed-related-image img, .gf-ed-system-brand img) { transition: none !important; animation: none !important; transform: none !important; }
}
/* Reusable editorial chapters introduced for the COMMIT Health Club case. */
.gf-case-editorial--commit-health-club .gf-ed-hero h1 { max-width: 12ch; }
.gf-case-editorial--commit-health-club .gf-ed-hero-art img { object-position: center 52%; }
.gf-case-editorial--commit-health-club .gf-ed-feature-art img { object-position: center; }

.gf-ed-intents .gf-ed-copy,
.gf-ed-screens .gf-ed-copy,
.gf-ed-roles .gf-ed-copy,
.gf-ed-process .gf-ed-copy,
.gf-ed-status .gf-ed-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .55fr); align-items: end; gap: 1rem 4rem; margin-bottom: clamp(3rem, 6vw, 6rem); }
.gf-ed-intents .gf-ed-copy .gf-eyebrow,
.gf-ed-screens .gf-ed-copy .gf-eyebrow,
.gf-ed-roles .gf-ed-copy .gf-eyebrow,
.gf-ed-process .gf-ed-copy .gf-eyebrow,
.gf-ed-status .gf-ed-copy .gf-eyebrow { grid-column: 1 / -1; }
.gf-ed-intents .gf-ed-copy h2,
.gf-ed-intents .gf-ed-copy > p:last-child,
.gf-ed-screens .gf-ed-copy h2,
.gf-ed-screens .gf-ed-copy > p:last-child,
.gf-ed-roles .gf-ed-copy h2,
.gf-ed-roles .gf-ed-copy > p:last-child,
.gf-ed-process .gf-ed-copy h2,
.gf-ed-process .gf-ed-copy > p:last-child,
.gf-ed-status .gf-ed-copy h2,
.gf-ed-status .gf-ed-copy > p:last-child { margin-top: 0; }

.gf-ed-intents { background: var(--gf-page-bg); }
.gf-ed-intent-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--gf-page-line); border-bottom: 1px solid var(--gf-page-line); }
.gf-ed-intent-card { position: relative; display: flex; flex-direction: column; min-height: clamp(22rem, 33vw, 34rem); padding: clamp(1.5rem, 3vw, 3rem); border-right: 1px solid var(--gf-page-line); background: var(--gf-page-bg); }
.gf-ed-intent-card:last-child { border-right: 0; }
.gf-ed-intent-card:nth-child(2) { background: #14231b; color: #f0efe9; }
.gf-ed-intent-card > span { color: var(--gf-page-subtle); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.gf-ed-intent-card:nth-child(2) > span { color: var(--gf-acid); }
.gf-ed-intent-card h3 { max-width: 10ch; margin-top: auto; font-size: clamp(2.8rem, 4.8vw, 5.4rem); line-height: .91; text-transform: uppercase; }
.gf-ed-intent-card p { max-width: 27rem; margin-top: 1.5rem; color: var(--gf-page-subtle); font-size: .95rem; line-height: 1.65; }
.gf-ed-intent-card:nth-child(2) p { color: #cbd5cd; }

.gf-ed-screens { overflow: hidden; background: #0c1711; }
.gf-ed-screens .gf-ed-copy .gf-eyebrow { color: var(--gf-acid); }
.gf-ed-screens .gf-ed-copy > p:last-child { color: #d1dbd3; }
.gf-ed-placeholder-note { display: inline-flex; align-items: center; gap: .6rem; width: fit-content; margin: 0 0 1.5rem; padding: .5rem .75rem; border: 1px solid rgb(236 255 80 / 34%); border-radius: 999px; color: var(--gf-acid); font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.gf-ed-placeholder-note::before { content: ''; width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; }
.gf-ed-screen-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); align-items: start; }
.gf-ed-screen-card { grid-column: span 4; }
.gf-ed-screen-card:nth-child(2) { margin-top: clamp(2rem, 6vw, 6rem); }
.gf-ed-screen-card:nth-child(3) { margin-top: clamp(1rem, 3vw, 3rem); }
.gf-ed-screen-card:nth-child(4) { grid-column: 5 / span 4; }
.gf-ed-screen-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; color: #cbd5cd; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.gf-ed-screen-top > span { color: var(--gf-acid); }
.gf-ed-screen-window { position: relative; min-height: clamp(25rem, 36vw, 40rem); overflow: hidden; border: 1px solid rgb(255 255 255 / 17%); border-radius: 1.15rem; background:
  radial-gradient(circle at 78% 12%, rgb(236 255 80 / 12%), transparent 29%),
  linear-gradient(145deg, #17231c, #0c110e 66%);
  box-shadow: 0 2.5rem 5rem rgb(0 0 0 / 26%); }
.gf-ed-screen-nav { display: flex; align-items: center; gap: .4rem; height: 2.8rem; padding-inline: 1rem; border-bottom: 1px solid rgb(255 255 255 / 12%); }
.gf-ed-screen-nav i { display: block; width: .42rem; height: .42rem; border: 1px solid rgb(255 255 255 / 48%); border-radius: 50%; }
.gf-ed-screen-content { display: flex; flex-direction: column; min-height: calc(clamp(25rem, 36vw, 40rem) - 2.8rem); padding: clamp(1.5rem, 3vw, 3rem); }
.gf-ed-screen-content > p { color: #aab8ad; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.gf-ed-screen-content h3 { max-width: 9ch; margin-top: 1rem; color: #f4f4ef; font-size: clamp(2.6rem, 4vw, 4.8rem); line-height: .92; text-transform: uppercase; }
.gf-ed-screen-content ul { display: grid; gap: .65rem; margin: auto 0 0; padding: 0; list-style: none; }
.gf-ed-screen-content li { display: flex; align-items: center; gap: .75rem; padding: .9rem 0; border-top: 1px solid rgb(255 255 255 / 13%); color: #d5ddd7; font-size: .85rem; }
.gf-ed-screen-content li > span { flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--gf-acid); }
.gf-ed-screens[data-screen-variant="participant"] .gf-ed-screen-card:nth-child(1) .gf-ed-screen-window { background:
  radial-gradient(circle at 20% 18%, rgb(236 255 80 / 11%), transparent 31%),
  linear-gradient(145deg, #1b271f, #0b100d 68%); }
.gf-ed-screens[data-screen-variant="participant"] .gf-ed-screen-card:nth-child(2) .gf-ed-screen-window { background:
  radial-gradient(circle at 82% 70%, rgb(109 142 121 / 20%), transparent 34%),
  linear-gradient(145deg, #111a15, #090d0b); }

.gf-ed-roles { background: var(--gf-page-soft); }
.gf-ed-role-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 3rem); }
.gf-ed-role-card { display: grid; grid-template-rows: auto 1fr; min-height: clamp(38rem, 55vw, 54rem); overflow: hidden; border: 1px solid var(--gf-page-line); background: var(--gf-page-bg); }
.gf-ed-role-card:nth-child(2) { margin-top: clamp(2rem, 7vw, 7rem); background: #15231b; color: #f0efe9; }
.gf-ed-role-copy { padding: clamp(1.5rem, 4vw, 4rem); }
.gf-ed-role-copy > span { color: var(--gf-page-subtle); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.gf-ed-role-card:nth-child(2) .gf-ed-role-copy > span { color: var(--gf-acid); }
.gf-ed-role-copy h3 { max-width: 11ch; margin-top: clamp(2rem, 5vw, 5rem); font-size: clamp(3rem, 5vw, 5.8rem); line-height: .9; text-transform: uppercase; }
.gf-ed-role-copy p { max-width: 33rem; margin-top: 1.5rem; color: var(--gf-page-subtle); line-height: 1.7; }
.gf-ed-role-card:nth-child(2) .gf-ed-role-copy p { color: #cad4cc; }
.gf-ed-role-screen { align-self: end; margin: clamp(1rem, 3vw, 3rem); padding: clamp(1.25rem, 2vw, 2rem); border: 1px solid var(--gf-page-line); border-radius: .9rem; background: var(--gf-page-raised); box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 8%); }
.gf-ed-role-card:nth-child(2) .gf-ed-role-screen { border-color: rgb(255 255 255 / 14%); background: #0d1510; box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 28%); }
.gf-ed-role-screen > div { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--gf-page-line); }
.gf-ed-role-card:nth-child(2) .gf-ed-role-screen > div { border-color: rgb(255 255 255 / 14%); }
.gf-ed-role-screen > div span { font-weight: 700; }
.gf-ed-role-screen > div small { color: var(--gf-page-subtle); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; }
.gf-ed-role-card:nth-child(2) .gf-ed-role-screen > div small { color: #9eaaa0; }
.gf-ed-role-screen ul { margin: 0; padding: 0; list-style: none; }
.gf-ed-role-screen li { padding: 1rem 0; border-bottom: 1px solid var(--gf-page-line); font-size: .9rem; }
.gf-ed-role-card:nth-child(2) .gf-ed-role-screen li { border-color: rgb(255 255 255 / 12%); }
.gf-ed-role-screen li:last-child { border-bottom: 0; }

.gf-ed-process { background: var(--gf-page-bg); }
.gf-ed-process-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--gf-page-line); }
.gf-ed-process-step { position: relative; min-height: 22rem; padding: 1.4rem clamp(1rem, 2vw, 2rem) 2rem 0; border-right: 1px solid var(--gf-page-line); }
.gf-ed-process-step:last-child { border-right: 0; padding-right: 0; }
.gf-ed-process-step > span { display: grid; place-items: center; width: 2rem; height: 2rem; margin-top: -2.4rem; border-radius: 50%; background: var(--gf-page-text); color: var(--gf-page-bg); font-size: .64rem; }
.gf-ed-process-step > p { margin-top: clamp(3rem, 6vw, 6rem); color: var(--gf-page-subtle); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.gf-ed-process-step h3 { margin-top: 1rem; font-size: clamp(2.3rem, 3.5vw, 4rem); line-height: .92; text-transform: uppercase; }
.gf-ed-process-step > div { max-width: 21rem; margin-top: 1.25rem; padding-right: 1rem; color: var(--gf-page-subtle); font-size: .88rem; line-height: 1.65; }

.gf-ed-status { background: #0f2117; }
.gf-ed-status .gf-ed-copy .gf-eyebrow { color: var(--gf-acid); }
.gf-ed-status .gf-ed-copy > p:last-child { color: #d1dbd3; }
.gf-ed-status-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgb(255 255 255 / 18%); border-bottom: 1px solid rgb(255 255 255 / 18%); }
.gf-ed-status-card { min-height: 18rem; padding: clamp(1.5rem, 3vw, 3rem); border-right: 1px solid rgb(255 255 255 / 18%); }
.gf-ed-status-card:last-child { border-right: 0; }
.gf-ed-status-card > span { color: #aab8ad; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.gf-ed-status-card strong { display: block; max-width: 10ch; margin-top: clamp(3rem, 6vw, 6rem); color: var(--gf-acid); font-family: var(--gf-display); font-size: clamp(2.7rem, 4.5vw, 5rem); font-weight: 400; line-height: .92; text-transform: uppercase; }
.gf-ed-status-card p { max-width: 22rem; margin-top: 1.2rem; color: #cbd5cd; line-height: 1.55; }

@media (max-width: 900px) {
  .gf-ed-intents .gf-ed-copy,
  .gf-ed-screens .gf-ed-copy,
  .gf-ed-roles .gf-ed-copy,
  .gf-ed-process .gf-ed-copy,
  .gf-ed-status .gf-ed-copy { grid-template-columns: 1fr; }
  .gf-ed-intent-grid { grid-template-columns: 1fr; }
  .gf-ed-intent-card { min-height: 23rem; border-right: 0; border-bottom: 1px solid var(--gf-page-line); }
  .gf-ed-intent-card:last-child { border-bottom: 0; }
  .gf-ed-screen-card { grid-column: span 6; }
  .gf-ed-screen-card:nth-child(2),
  .gf-ed-screen-card:nth-child(3) { margin-top: 0; }
  .gf-ed-screen-card:nth-child(3) { grid-column: 4 / span 6; }
  .gf-ed-screen-card:nth-child(4) { grid-column: span 6; }
  .gf-ed-role-card { min-height: 40rem; }
  .gf-ed-process-track { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 4rem; }
  .gf-ed-process-step:nth-child(2) { border-right: 0; }
  .gf-ed-status-grid { grid-template-columns: 1fr; }
  .gf-ed-status-card { min-height: 14rem; border-right: 0; border-bottom: 1px solid rgb(255 255 255 / 18%); }
  .gf-ed-status-card:last-child { border-bottom: 0; }
  .gf-ed-status-card strong { margin-top: 2.5rem; }
}
@media (max-width: 600px) {
  .gf-case-editorial--commit-health-club .gf-ed-hero h1 { font-size: clamp(3.25rem, 14vw, 5.4rem); }
  .gf-case-editorial--commit-health-club .gf-ed-hero-art img { object-position: 58% center; }
  .gf-ed-intent-card { min-height: 21rem; padding: 1.5rem; }
  .gf-ed-intent-card h3 { font-size: clamp(2.65rem, 12vw, 4.5rem); }
  .gf-ed-screen-grid,
  .gf-ed-role-grid,
  .gf-ed-process-track { grid-template-columns: 1fr; }
  .gf-ed-screen-card,
  .gf-ed-screen-card:nth-child(3),
  .gf-ed-screen-card:nth-child(4) { grid-column: 1; }
  .gf-ed-screen-window { min-height: 28rem; }
  .gf-ed-screen-content { min-height: calc(28rem - 2.8rem); padding: 1.4rem; }
  .gf-ed-screen-content h3 { font-size: clamp(2.8rem, 12vw, 4.4rem); }
  .gf-ed-role-card,
  .gf-ed-role-card:nth-child(2) { min-height: 0; margin-top: 0; }
  .gf-ed-role-copy { padding: 1.5rem; }
  .gf-ed-role-copy h3 { font-size: clamp(2.85rem, 12vw, 4.7rem); }
  .gf-ed-role-screen { margin: .75rem; }
  .gf-ed-process-track { row-gap: 3.5rem; }
  .gf-ed-process-step,
  .gf-ed-process-step:last-child { min-height: 0; padding-right: 0; border-right: 0; }
  .gf-ed-process-step > p { margin-top: 2.5rem; }
  .gf-ed-status-card { min-height: 13rem; padding: 1.5rem; }
  .gf-ed-status-card strong { font-size: clamp(2.7rem, 12vw, 4.5rem); }
}
@supports (animation-timeline: view()) {
  @media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
    .gf-ed-screen-card { animation: gf-ed-screen-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
    .gf-ed-role-card:nth-child(2) { animation: gf-ed-role-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 58%; }
    @keyframes gf-ed-screen-rise { from { opacity: .35; transform: translateY(2.25rem); } to { opacity: 1; transform: translateY(0); } }
    @keyframes gf-ed-role-rise { from { transform: translateY(2rem); } to { transform: translateY(0); } }
  }
}
@media (prefers-reduced-motion: reduce) {
  .gf-case-editorial :is(.gf-ed-screen-card, .gf-ed-role-card) { animation: none !important; transform: none !important; }
}
