/* SPDX-License-Identifier: Apache-2.0 */
/* The Great Eight launch pages (GreatEightPages). Site tokens; `.ge-dark` forces model space (the drafting canvas) for the bands that
   should glow whatever theme the visitor chose, so the eight layer colours are always the bright ones. No max-width on paragraphs. */

.ge-dark, .ge-super {
  color-scheme: dark;
  --sheet: #10161D; --sheet-2: #18212B; --ink: #EEF3F8; --ink-2: #C3CDD8; --grid: #2A3542; --line: #6C7A8A; --placeholder: #7FA9DC;
  --layer-red: #FF5A6E; --layer-ochre: #F2C230; --layer-green: #4BD37B; --layer-cyan: #3FD6E6;
  --layer-blue: #6E95FF; --layer-magenta: #F06BDC; --layer-orange: #FF9A3C; --layer-violet: #A78BFA;
  --action: #6E95FF; --on-action: #10161D;
  background: var(--sheet); color: var(--ink);
}
.ge-dark a, .ge-super a { color: inherit; }
.ge-dark .btn-plot, .ge-super .btn-plot { background: #EEF3F8; color: #10161D; border-color: #EEF3F8; }
.ge-dark .btn-plot:hover, .ge-super .btn-plot:hover { background: #fff; }
.ge-dark .btn-line, .ge-super .btn-line { color: #EEF3F8; border-color: rgba(238, 243, 248, .55); background: transparent; }
.ge-dark .btn-line:hover, .ge-super .btn-line:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

/* ---- staff bar ------------------------------------------------------------------------------------------------------ */
.ge-staffbar { background: var(--layer-ochre); color: #17202B; font-size: var(--fs-sm); }
.ge-staffbar > summary { padding: .5rem 1rem; cursor: pointer; font-weight: 600; }
.ge-staffbar .container { padding-block: .5rem 1rem; }
.ge-staffbar a { color: inherit; text-decoration: underline; }
.ge-staffbar .meta-items { color: inherit; }

/* ---- hero ----------------------------------------------------------------------------------------------------------- */
.ge-hero { position: relative; overflow: hidden; border-bottom: var(--pen-3) solid var(--ink);
  background:
    radial-gradient(60rem 36rem at 85% 20%, rgba(167, 139, 250, .22), transparent 60%),
    radial-gradient(50rem 30rem at 70% 90%, rgba(63, 214, 230, .16), transparent 60%),
    radial-gradient(40rem 24rem at 10% 100%, rgba(255, 90, 110, .14), transparent 60%),
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 3rem 3rem,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 3rem 3rem,
    var(--sheet); }
.ge-hero-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: center; padding-block: clamp(2.5rem, 1.5rem + 5vw, 6rem); }
@media (min-width: 992px) { .ge-hero-grid { grid-template-columns: 1.15fr .85fr; } }
.ge-chip { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1.25rem; padding: .35rem .9rem; border: var(--pen-1) solid rgba(238, 243, 248, .45); border-radius: 99rem;
  font-weight: 700; font-size: var(--fs-sm); letter-spacing: .02em; background: rgba(255, 255, 255, .05); }
.ge-pulse { width: .6rem; height: .6rem; border-radius: 50%; background: var(--layer-green); box-shadow: 0 0 0 0 rgba(75, 211, 123, .7); animation: ge-pulse 2.2s infinite; }
@keyframes ge-pulse { 70% { box-shadow: 0 0 0 .7rem rgba(75, 211, 123, 0); } 100% { box-shadow: 0 0 0 0 rgba(75, 211, 123, 0); } }
.ge-hero h1 { font-size: clamp(2.75rem, 1.2rem + 6.2vw, 6.25rem); line-height: .96; letter-spacing: -.035em; font-weight: 800; font-stretch: 108%; margin: 0 0 1.5rem; color: #fff; }
.ge-hero h1 > span { display: block; }
.ge-rainbow { background: linear-gradient(95deg, var(--layer-red), var(--layer-orange) 18%, var(--layer-ochre) 34%, var(--layer-green) 50%, var(--layer-cyan) 64%, var(--layer-blue) 78%, var(--layer-violet) 90%, var(--layer-magenta));
  -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em; }
.ge-lede { font-size: clamp(1.1rem, 1rem + .6vw, 1.5rem); line-height: 1.5; color: var(--ink-2); margin: 0 0 2rem; }
.ge-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.5rem; }
.ge-actions .btn { padding: .85rem 1.6rem; font-weight: 700; font-size: var(--fs-base); }
.ge-fine { color: var(--ink-2); font-size: var(--fs-sm); margin: 0; opacity: .85; }
.ge-hero-art { justify-self: center; width: min(100%, 34rem); }

/* the figure */
.ge-art { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 2.5rem rgba(110, 149, 255, .25)); }
.ge-art-guides .cl { stroke: var(--line); stroke-width: 1; stroke-dasharray: 18 4 2 4; opacity: .7; }
.ge-art-guides .cc { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 5; opacity: .45; }
.ge-arc { fill: none; stroke: var(--layer, var(--layer-blue)); stroke-width: 24; stroke-dasharray: 24.2 75.8; stroke-linecap: butt;
  animation: ge-plot 1.1s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * .13s); }
@keyframes ge-plot { from { stroke-dasharray: 0 100; opacity: 0; } 20% { opacity: 1; } to { stroke-dasharray: 24.2 75.8; opacity: 1; } }
.ge-lab polyline { stroke: var(--layer, var(--layer-blue)); stroke-width: 1.5; }
.ge-lab text { fill: var(--layer, var(--layer-blue)); font: 700 15px/1 'Archivo', system-ui, sans-serif; letter-spacing: .01em; }
.ge-lab { animation: ge-fade .6s ease both; animation-delay: calc(var(--i) * .13s + .7s); }
@keyframes ge-fade { from { opacity: 0; } to { opacity: 1; } }
.ge-art-dim line { stroke: var(--ink-2); stroke-width: 1.25; }
.ge-art-dim text { fill: var(--ink-2); font: 600 14px 'Archivo', system-ui, sans-serif; }
/* the Studio pages' versions of the figure (ge-eight-art.inc $ge_art): exploded, checked, things made, one path */
.ge-arc-thin { stroke-width: 7; opacity: .75; }
.ge-seg { stroke: var(--layer, var(--layer-blue)); stroke-width: 12; stroke-dasharray: 100 100; stroke-dashoffset: 0;
  animation: ge-draw .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * .16s); }
@keyframes ge-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.ge-glyph { transform-box: fill-box; transform-origin: center; animation: ge-fade .6s ease both; animation-delay: calc(var(--i) * .13s + .5s); }
.ge-glyph > circle { fill: var(--sheet); stroke: var(--layer, var(--layer-blue)); stroke-width: 2.5; }
.ge-check polyline { fill: none; stroke: var(--layer, var(--layer-blue)); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.ge-thing g { stroke: var(--layer, var(--layer-blue)); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ge-node text { fill: var(--layer, var(--layer-blue)); font: 800 15px/1 'Archivo', system-ui, sans-serif; }
.ge-art-dims text { font-size: 15px; }
@media (prefers-reduced-motion: reduce) { html:not(.ge-anim) :is(.ge-arc, .ge-lab, .ge-pulse, .ge-seg, .ge-glyph) { animation: none; } }

/* ---- figures ---------------------------------------------------------------------------------------------------------- */
.ge-figures { border-bottom: var(--pen-3) solid var(--ink); background: var(--sheet-2); }
.ge-figures-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.ge-fig { padding: clamp(1.5rem, 1rem + 2vw, 2.75rem) 1.5rem; border-left: var(--pen-1) solid var(--grid); display: flex; flex-direction: column; gap: .5rem; }
.ge-fig:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 575px) { .ge-fig { border-left: 0; border-top: var(--pen-1) solid var(--grid); padding-left: 0; } .ge-fig:first-child { border-top: 0; } }
.ge-fig strong { font-size: clamp(3.5rem, 2rem + 5vw, 6.5rem); line-height: .9; font-weight: 800; font-stretch: 105%; letter-spacing: -.04em;
  background: linear-gradient(120deg, #fff 30%, var(--layer-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ge-fig span { color: var(--ink-2); font-size: var(--fs-base); }
.ge-fig strong, .ge-fig em span { font-variant-numeric: tabular-nums; }
.ge-fig strong { display: inline-block; align-self: flex-start; transform-origin: 0 100%; }
.ge-fig em span { font-size: inherit; color: inherit; font-weight: 700; }
.ge-fig em { font-style: normal; color: var(--ink-2); font-size: var(--fs-sm); }
.ge-bar { display: block; height: .4rem; border-radius: 99rem; background: var(--grid); overflow: hidden; margin-top: .25rem; }
.ge-bar::after { content: ''; display: block; height: 100%; width: max(var(--p), .4rem); background: linear-gradient(90deg, var(--layer-green), var(--layer-cyan)); border-radius: inherit; }

/* ---- film ---------------------------------------------------------------------------------------------------------------- */
.ge-stage { padding-block: clamp(3rem, 2rem + 4vw, 6rem); text-align: center; background:
  radial-gradient(50rem 20rem at 50% 0, rgba(110, 149, 255, .22), transparent 70%), var(--sheet); }
.ge-stage .ge-media { max-width: 64rem; margin-inline: auto; border: var(--pen-2) solid rgba(238, 243, 248, .5); box-shadow: 0 2rem 6rem rgba(0, 0, 0, .55), 0 0 0 .6rem rgba(255, 255, 255, .04); }

/* ---- shared headings -------------------------------------------------------------------------------------------------- */
.ge-h2 { font-size: clamp(2rem, 1.2rem + 3vw, 3.75rem); line-height: 1.02; letter-spacing: -.03em; font-weight: 800; font-stretch: 105%; margin: 0 0 1rem; }
.ge-sub { font-size: clamp(1.05rem, 1rem + .4vw, 1.35rem); color: var(--ink-2); margin: 0 0 2.25rem; }
.ge-stage h2 { font-size: clamp(2rem, 1.2rem + 3vw, 3.75rem); font-weight: 800; font-stretch: 105%; letter-spacing: -.03em; margin-bottom: .5rem; }

/* ---- the eight tiles ------------------------------------------------------------------------------------------------------- */
.ge-tiles { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); }
.ge-tile { position: relative; display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem 1.5rem 1.4rem; background: var(--sheet-2);
  border: var(--pen-1) solid var(--ink); border-top: .55rem solid var(--layer, var(--layer-blue)); border-radius: var(--radius); overflow: hidden; transition: transform .2s, box-shadow .2s; }
.ge-tile::after { content: ''; position: absolute; inset: auto -2rem -2rem auto; width: 9rem; height: 9rem; border-radius: 50%; background: var(--layer, var(--layer-blue)); opacity: .1; transition: opacity .25s, transform .25s; }
.ge-tile:hover { transform: translateY(-.25rem); box-shadow: 0 .9rem 2rem -.8rem var(--layer, var(--layer-blue)); }
.ge-tile:hover::after { opacity: .22; transform: scale(1.3); }
.ge-tile-app { display: flex; flex-direction: column; margin: 0 0 .5rem; }
.ge-tile-app a { color: var(--layer, var(--layer-blue)); font-weight: 800; font-size: var(--fs-md); text-decoration: none; }
.ge-tile-app span { color: var(--ink-2); font-size: var(--fs-sm); }
.ge-tile h3 { font-size: var(--fs-lg); line-height: 1.12; letter-spacing: -.02em; font-weight: 800; margin: 0; }
.ge-tile p { margin: 0; color: var(--ink-2); }
.ge-also { margin: .75rem 0 0; padding-left: 1.1rem; color: var(--ink-2); font-size: var(--fs-sm); }
.ge-also li::marker { color: var(--layer, var(--layer-blue)); }
.is-held { }
.ge-tile.is-held { border-style: dashed; border-top-style: solid; }
.ge-tag { display: inline-block; margin-left: .5rem; padding: .05rem .5rem; border-radius: 99rem; background: #F2C230; color: #17202B; font-style: normal; font-weight: 800; font-size: .72rem; vertical-align: .1em; white-space: nowrap; }
.ge-held { color: var(--layer-ochre) !important; font-weight: 700; font-size: var(--fs-sm); }

/* ---- connect your AI -------------------------------------------------------------------------------------------------------------- */
.ge-ai { padding-block: clamp(3rem, 2rem + 4vw, 6rem); background:
  radial-gradient(45rem 24rem at 100% 0, rgba(167, 139, 250, .22), transparent 65%),
  radial-gradient(40rem 22rem at 0 100%, rgba(63, 214, 230, .14), transparent 65%), var(--sheet); border-block: var(--pen-3) solid var(--ink); }
.ge-ai-grid { display: grid; gap: 2.5rem; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 992px) { .ge-ai-grid { grid-template-columns: 1.1fr .9fr; } }
.ge-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.ge-checks li { position: relative; padding-left: 2rem; color: var(--ink-2); }
.ge-checks li::before { content: ''; position: absolute; left: 0; top: .25em; width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: var(--layer-green); -webkit-mask: radial-gradient(circle at 50% 50%, #000 62%, transparent 64%); mask: radial-gradient(circle at 50% 50%, #000 62%, transparent 64%); }
.ge-checks li::after { content: ''; position: absolute; left: .42rem; top: .52em; width: .35rem; height: .6rem; border: solid #10161D; border-width: 0 2px 2px 0; transform: rotate(40deg); }
.ge-flow { border: var(--pen-2) solid rgba(238, 243, 248, .45); border-radius: .9rem; background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); box-shadow: 0 2rem 5rem rgba(0, 0, 0, .45); overflow: hidden; }
.ge-flow-bar { display: flex; align-items: center; gap: .45rem; padding: .7rem 1rem; border-bottom: var(--pen-1) solid rgba(238, 243, 248, .25); font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); }
.ge-flow-bar i { width: .7rem; height: .7rem; border-radius: 50%; background: var(--layer-red); } .ge-flow-bar i:nth-child(2) { background: var(--layer-ochre); } .ge-flow-bar i:nth-child(3) { background: var(--layer-green); }
.ge-flow-bar span { margin-left: .75rem; }
.ge-flow-body { display: grid; grid-template-columns: 1fr 1.6rem 1fr 1.6rem 1.15fr; align-items: center; gap: .25rem; padding: 2rem 1.25rem; text-align: center; }
.ge-flow-note { margin: 0; padding: .8rem 1rem; text-align: center; border-top: var(--pen-1) solid rgba(238, 243, 248, .25); color: var(--ink-2); font-size: var(--fs-sm); }
.ge-flow-col { display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.ge-flow small { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.35; }
.ge-node { display: inline-flex; align-items: center; justify-content: center; min-height: 5rem; padding: .5rem 1rem; border: var(--pen-2) solid rgba(238, 243, 248, .7); border-radius: var(--radius); font-weight: 800; font-size: var(--fs-md); background: var(--sheet-2); }
.ge-node-hub { background: linear-gradient(135deg, var(--layer-blue), var(--layer-violet)); color: #10161D; border-color: transparent; box-shadow: 0 0 3rem rgba(110, 149, 255, .6); }
.ge-flow-wire { height: 3px; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--layer-cyan) 0 8px, transparent 8px 14px); animation: ge-wire .8s linear infinite; filter: drop-shadow(0 0 .35rem var(--layer-cyan)); }
@keyframes ge-wire { to { background-position: 14px 0; } }
.ge-chiplist { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.ge-chiplist li { padding: .3rem .6rem; text-align: left; font-weight: 800; font-size: var(--fs-sm); color: var(--layer, var(--layer-blue)); background: color-mix(in srgb, var(--layer, var(--layer-blue)) 14%, transparent); border-left: .3rem solid var(--layer, var(--layer-blue)); border-radius: .2rem; }
@media (max-width: 560px) { .ge-flow-body { grid-template-columns: 1fr; } .ge-flow-wire { height: 1.6rem; width: 3px; justify-self: center; background: repeating-linear-gradient(180deg, var(--layer-cyan) 0 8px, transparent 8px 14px); } }
@media (prefers-reduced-motion: reduce) { html:not(.ge-anim) .ge-flow-wire { animation: none; } }

/* ---- fields ----------------------------------------------------------------------------------------------------------------------- */
.ge-field-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .ge-field-grid { grid-template-columns: repeat(2, 1fr); } }
.ge-field { display: flex; flex-direction: column; gap: .75rem; min-height: 19rem; padding: 2rem 2.25rem 1.75rem; color: var(--ink);
  background: linear-gradient(165deg, color-mix(in srgb, var(--layer, var(--layer-blue)) 24%, var(--sheet-2)), var(--sheet-2) 68%); border: var(--pen-1) solid var(--ink); border-left: .65rem solid var(--layer, var(--layer-blue)); border-radius: var(--radius); }
.ge-field:hover { box-shadow: 0 1rem 2.5rem -1rem var(--layer, var(--layer-blue)); }
.ge-field-name { margin: 0; font-size: var(--fs-md); font-weight: 800; }
.ge-field-name a { color: var(--layer, var(--layer-blue)); text-decoration: none; }
.ge-field-name a::after { content: ''; position: absolute; inset: 0; }
.ge-field-hook { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.35rem); line-height: 1.06; font-weight: 800; letter-spacing: -.03em; }
.ge-field-lead { margin: 0; color: var(--ink-2); flex: 1; }
.ge-field-links { margin: .5rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; position: relative; z-index: 2; }
.ge-field-go, .ge-field-wf { font-weight: 800; font-size: var(--fs-sm); color: var(--ink); text-decoration: underline; text-underline-offset: .28em; text-decoration-thickness: 2px; text-decoration-color: var(--layer, var(--layer-blue)); }
.ge-field-wf { font-weight: 600; text-decoration-style: dotted; }
.ge-more { margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.ge-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.ge-chips li { padding: .45rem 1rem; border: var(--pen-1) solid var(--ink); border-radius: 99rem; background: var(--sheet-2); font-weight: 600; }

/* ---- limits ------------------------------------------------------------------------------------------------------------------------ */
.ge-limit-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-bottom: 1.75rem; }
.ge-limit-grid p { margin: 0; padding: 1.1rem 1.25rem; border-left: .35rem solid var(--layer-ochre); background: var(--sheet-2); }

/* ---- media (hero film, screenshots) --------------------------------------------------------------------------------------------- */
.ge-media { margin: 0 0 1.75rem; aspect-ratio: var(--ge-aspect, 16 / 9); background: var(--sheet-2); border: var(--pen-1) solid var(--ink); border-radius: var(--radius); overflow: hidden; }
.ge-media video, .ge-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ge-media figcaption { padding: .5rem .75rem; color: var(--ink-2); font-size: var(--fs-sm); }
.ge-slot { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; padding: 2rem; text-align: center; color: var(--ink-2);
  background:
    radial-gradient(30rem 14rem at 50% 40%, rgba(110, 149, 255, .25), transparent 70%),
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 2rem 2rem, linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 2rem 2rem, var(--sheet); }
/* an empty video slot shows a camera, never a play button: nothing here may look like a player without a file */
.ge-play { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; border: var(--pen-2) dashed var(--layer-blue); color: var(--layer-blue); font-size: 1.6rem; flex: none; }
.ge-shotlist { margin: 0; padding-left: 1.25rem; text-align: left; font-size: var(--fs-sm); max-width: 40rem; }
.ge-shotlist li + li { margin-top: .15rem; }
.ge-slot strong { color: var(--ink); font-size: var(--fs-md); }
.ge-slot span { max-width: 44rem; }
.ge-slot .meta-items { justify-content: center; opacity: .8; }

/* ---- the eleven inner pages ------------------------------------------------------------------------------------------------------ */
.ge-sub-hero { position: relative; overflow: hidden; border-bottom: var(--pen-3) solid var(--ink);
  background:
    radial-gradient(46rem 24rem at 88% 0, color-mix(in srgb, var(--layer, var(--layer-blue)) 38%, transparent), transparent 65%),
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem, linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem, var(--sheet); }
.ge-sub-hero.layer-all { --layer: var(--layer-violet); }
.ge-sub-hero.layer-all::before { content: ''; position: absolute; inset: 0 0 auto 0; height: .5rem; background: linear-gradient(90deg, var(--layer-red), var(--layer-blue), var(--layer-orange), var(--layer-magenta), var(--layer-ochre), var(--layer-green), var(--layer-violet), var(--layer-cyan)); }
.ge-sub-hero .container { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem); position: relative; }
.ge-crumb { display: flex; align-items: center; gap: .6rem; margin: 0 0 1.25rem; font-weight: 700; font-size: var(--fs-sm); color: var(--layer, var(--layer-blue)); }
.ge-crumb::before { content: ''; width: 2.25rem; height: .35rem; background: var(--layer, var(--layer-blue)); border-radius: 99rem; }
.ge-crumb a { color: inherit; text-decoration: none; }
.ge-sub-hero h1 { font-size: clamp(2.25rem, 1.2rem + 4.5vw, 4.75rem); line-height: 1; letter-spacing: -.035em; font-weight: 800; font-stretch: 106%; margin: 0 0 1.25rem; color: #fff; }
.ge-sub-hero .ge-lede { margin: 0; max-width: none; }
.ge-claim { display: flex; gap: 1rem; align-items: flex-start; margin-block: 2rem; padding: 1.25rem 1.5rem; border: var(--pen-1) solid var(--ink); border-left: .5rem solid var(--layer, var(--layer-ochre)); border-radius: var(--radius); background: var(--sheet-2); }
.ge-claim h2 { font-size: var(--fs-base); font-weight: 800; margin: 0 0 .25rem; }
.ge-claim p { margin: 0; color: var(--ink-2); }
.ge-cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-bottom: 2.5rem; }
.ge-card { padding: 1.5rem; background: var(--sheet-2); border: var(--pen-1) solid var(--ink); border-top: .5rem solid var(--layer, var(--layer-blue)); border-radius: var(--radius); }
.ge-card:nth-child(4n+2) { --layer: var(--layer-cyan); } .ge-card:nth-child(4n+3) { --layer: var(--layer-orange); } .ge-card:nth-child(4n+4) { --layer: var(--layer-violet); }
.ge-card-k { color: var(--layer, var(--layer-blue)); font-weight: 800; font-size: var(--fs-sm); margin: 0 0 .5rem; }
.ge-card h3 { font-size: var(--fs-lg); line-height: 1.1; letter-spacing: -.02em; font-weight: 800; margin: 0 0 .6rem; }
.ge-card p:last-child { margin: 0; color: var(--ink-2); }
.ge-card.is-held { }
.ge-tile.is-held { border-style: dashed; border-top-style: solid; }
.ge-tag { display: inline-block; margin-left: .5rem; padding: .05rem .5rem; border-radius: 99rem; background: #F2C230; color: #17202B; font-style: normal; font-weight: 800; font-size: .72rem; vertical-align: .1em; white-space: nowrap; }
.ge-block h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); font-weight: 800; letter-spacing: -.025em; margin: 0 0 .75rem; }
.ge-block { margin-bottom: 2.25rem; }
.ge-people { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.ge-people li { padding: .5rem 1rem; border: var(--pen-1) solid var(--layer, var(--layer-blue)); border-radius: 99rem; font-weight: 600; background: var(--sheet-2); }
.ge-notes { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); margin-bottom: 2.5rem; }
.ge-note { padding: 1.4rem 1.5rem; background: var(--sheet-2); border: var(--pen-1) solid var(--ink); border-radius: var(--radius); }
.ge-note h2 { font-size: var(--fs-md); font-weight: 800; margin: 0 0 .5rem; }
.ge-note p { margin: 0; color: var(--ink-2); }
.ge-note.ge-internal { border-left: .5rem solid var(--layer-ochre); }
.ge-steps { list-style: none; padding: 0; margin: 0 0 2.5rem; counter-reset: ge; display: grid; gap: 1rem; }
.ge-steps li { counter-increment: ge; position: relative; padding: 1.1rem 1.25rem 1.1rem 4.25rem; border: var(--pen-1) dashed var(--layer-ochre); border-radius: var(--radius); }
.ge-steps li::before { content: counter(ge); position: absolute; left: 1rem; top: 1rem; width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border-radius: 50%; background: var(--layer-ochre); color: #10161D; font-weight: 800; }
.ge-links-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin-bottom: 1rem; }
.ge-link { display: block; padding: 1.1rem 1.25rem; border: var(--pen-1) solid var(--ink); border-radius: var(--radius); background: var(--sheet-2); font-weight: 800; text-decoration: none; transition: border-color .2s, transform .2s; }
.ge-link:hover { border-color: var(--action); transform: translateY(-.15rem); }
.ge-link small { display: block; font-weight: 500; color: var(--ink-2); margin-top: .2rem; }
.ge-shots { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); margin-bottom: 2.5rem; }
.ge-shots .ge-media { margin: 0; }
.ge-pagemedia .ge-media { margin-block: 2rem; }

/* ---- the Studio pages (/great-eight/studio…, owner 2026-10-29) and the four entry cards on /great-eight -------------------------
   Everything is `.ge-sx-*` (plus the shared .ge-h2 / .ge-sub / .ge-card / .ge-claim). Light sections follow the visitor's theme through the
   site tokens; the sub-navigation, the hero and the license band are .ge-dark like the rest of the launch pages. */
.ge-snav { border-bottom: var(--pen-1) solid var(--grid); font-size: var(--fs-sm); }
.ge-snav-row { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.5rem; padding-block: .55rem; }
.ge-snav-back { display: inline-flex; align-items: center; gap: .15rem; font-weight: 700; color: var(--ink-2) !important; text-decoration: none; }
.ge-snav-back:hover { color: #fff !important; }
.ge-snav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .1rem 1.1rem; }
.ge-snav ul a { display: inline-block; padding: .3rem 0; font-weight: 600; text-decoration: none; border-bottom: .18rem solid transparent; }
.ge-snav ul a:hover { border-bottom-color: var(--grid); }
.ge-snav ul a[aria-current] { color: #fff; border-bottom-color: var(--layer-cyan); }
@media (min-width: 992px) { .ge-snav ul { margin-left: auto; } }

.ge-sx-hero-grid { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 992px) { .ge-sx-hero-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); } }
.ge-sx-art { display: none; justify-self: center; width: min(100%, 22rem); }
@media (min-width: 992px) { .ge-sx-art { display: block; } }
.ge-sx-hero h1 > span { display: block; }
.ge-sx-accent { color: var(--layer, var(--layer-cyan)); }
.ge-sx-eyebrow { margin: 0 0 .75rem; font-weight: 700; font-size: var(--fs-sm); color: var(--ink-2); }
.ge-sx-hero .ge-lede { margin-bottom: 1.75rem; }
.ge-sx-crumbs { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.ge-sx-crumbs li + li::before { content: '/'; margin-right: .25rem; color: var(--ink-2); font-weight: 400; }
.ge-sx-crumbs a { text-decoration: underline; text-underline-offset: .2em; }

.ge-sx-sec { scroll-margin-top: 4rem; }
.ge-sx > .container .ge-claim { margin-block: 2rem 0; }
.ge-sx-shade { background: var(--sheet-2); border-block: var(--pen-1) solid var(--grid); }
.ge-sx-shade :is(.ge-card, .ge-sx-step, .ge-sx-checks li, .ge-media) { background: var(--sheet); }
.ge-sx-label { margin: 1rem 0 .4rem; font-weight: 800; font-size: var(--fs-sm); color: var(--ink-2); }
.ge-sx-go { display: inline-block; margin-top: auto; padding-top: .75rem; font-weight: 800; color: var(--ink); text-decoration: underline; text-underline-offset: .28em; text-decoration-thickness: 2px; text-decoration-color: var(--layer, var(--layer-blue)); }
.ge-sx-go:hover { color: var(--layer, var(--layer-blue)); }

/* the four entry cards */
.ge-sx-entry-grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .ge-sx-entry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ge-sx-entry-card { position: relative; display: flex; flex-direction: column; background: var(--sheet-2); border: var(--pen-1) solid var(--ink); border-radius: var(--radius); overflow: hidden; transition: transform .2s, box-shadow .2s; }
.ge-sx-entry-card:hover, .ge-sx-entry-card:focus-within { transform: translateY(-.2rem); box-shadow: 0 1rem 2.25rem -1.2rem var(--layer, var(--layer-blue)); }
.ge-sx-entry-card .ge-sx-go::after { content: ''; position: absolute; inset: 0; }
.ge-sx-entry-media { aspect-ratio: 4 / 3; border-bottom: .4rem solid var(--layer, var(--layer-blue)); overflow: hidden; }
.ge-sx-entry-media .ge-media { margin: 0; height: 100%; border: 0; border-radius: 0; }
.ge-sx-entry-media .ge-media img { transition: transform .5s ease; }
.ge-sx-entry-card:hover .ge-media img { transform: scale(1.03); }
.ge-sx-entry-media .ge-slot { padding: 1rem; font-size: var(--fs-sm); }
.ge-sx-deco { height: 100%; display: grid; place-items: center; color: var(--layer, var(--layer-blue)); font-size: clamp(3.5rem, 2rem + 6vw, 6rem);
  background: radial-gradient(70% 60% at 70% 30%, color-mix(in srgb, var(--layer, var(--layer-blue)) 22%, transparent), transparent 70%),
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 1.5rem 1.5rem, linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 1.5rem 1.5rem, var(--sheet); }
.ge-sx-entry-body { display: flex; flex-direction: column; flex: 1; gap: .4rem; padding: 1.4rem 1.5rem 1.5rem; }
.ge-sx-entry-body h3 { margin: 0; font-size: var(--fs-xl); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
.ge-sx-entry-body p { margin: 0; color: var(--ink-2); }

/* numbered stages */
.ge-sx-values { list-style: none; margin: 0; padding: 0; counter-reset: sxv; display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 576px) { .ge-sx-values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .ge-sx-values { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ge-sx-values li { counter-increment: sxv; display: flex; flex-direction: column; gap: .4rem; padding: 1.25rem 0 0; border-top: .3rem solid var(--layer, var(--layer-violet)); }
.ge-sx-values li::before { content: counter(sxv); display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--layer, var(--layer-violet)); color: var(--sheet); font-weight: 800; }
.ge-sx-values strong { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.02em; }
.ge-sx-values span { color: var(--ink-2); }

/* films */
.ge-sx-films { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .ge-sx-films.is-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ge-sx-films .ge-media { margin: 0; }
/* an empty slot is a staff brief with a shot list: let it grow instead of clipping inside 16:9 */
.ge-sx-films .ge-media:has(.ge-slot) { aspect-ratio: auto; }
.ge-sx-films .ge-slot { min-height: 18rem; }

/* cards */
.ge-sx-cards { margin-bottom: 0; }
@media (min-width: 768px) { .ge-sx-cards.is-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ge-sx-cards.is-calc { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ge-sx-cards .ge-card { display: flex; flex-direction: column; }
.ge-sx-cards .ge-card p:last-child { margin: 0; }
.ge-card.is-held { border-style: dashed; border-top-style: solid; }
.ge-sx-callout-t { font-weight: 800; margin: 0 0 .25rem; }
.ge-sx-s-callout { padding-block: .5rem; }
.ge-sx-s-callout .ge-claim { margin: 0; }

/* can / cannot */
.ge-sx-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .ge-sx-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ge-sx-checks li { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 1.25rem; background: var(--sheet-2); border: var(--pen-1) solid var(--grid); border-radius: var(--radius); }
.ge-sx-checks li > i { font-size: 1.5rem; line-height: 1; flex: none; margin-top: .1rem; }
.ge-sx-checks.is-can li > i { color: var(--layer-green); }
.ge-sx-checks.is-cannot li > i { color: var(--layer-ochre); }
.ge-sx-checks h3 { margin: 0 0 .25rem; font-size: var(--fs-md); font-weight: 800; }
.ge-sx-checks p { margin: 0; color: var(--ink-2); }

/* the hand-off table: stacks on phones */
.ge-sx-table { width: 100%; border-collapse: collapse; background: var(--sheet-2); border: var(--pen-1) solid var(--ink); }
.ge-sx-table th, .ge-sx-table td { padding: .8rem 1rem; text-align: left; vertical-align: top; border-bottom: var(--pen-1) solid var(--grid); }
.ge-sx-table thead th { font-size: var(--fs-sm); font-weight: 800; border-bottom: var(--pen-2) solid var(--ink); }
.ge-sx-table tbody th { font-weight: 800; }
.ge-sx-table td { color: var(--ink-2); }
@media (max-width: 767px) {
  .ge-sx-table thead { display: none; }
  .ge-sx-table, .ge-sx-table tbody, .ge-sx-table tr, .ge-sx-table th, .ge-sx-table td { display: block; width: 100%; }
  .ge-sx-table tr { border-bottom: var(--pen-2) solid var(--ink); padding-block: .4rem; }
  .ge-sx-table th, .ge-sx-table td { border: 0; padding: .3rem 1rem; }
  .ge-sx-table td::before { content: attr(data-label); display: block; font-size: var(--fs-sm); font-weight: 800; color: var(--ink); }
}

/* questions */
.ge-sx-faq { display: grid; gap: 1rem 2rem; grid-template-columns: minmax(0, 1fr); margin: 0; }
@media (min-width: 768px) { .ge-sx-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ge-sx-faq > div { padding: 1.1rem 0 0; border-top: var(--pen-2) solid var(--ink); }
.ge-sx-faq dt { font-size: var(--fs-md); font-weight: 800; margin-bottom: .35rem; }
.ge-sx-faq dd { margin: 0; color: var(--ink-2); }

/* the eight apps */
.ge-sx-apps { display: grid; gap: 1rem; }
.ge-sx-app { display: grid; gap: 1rem 2.5rem; grid-template-columns: minmax(0, 1fr); padding: 1.5rem 1.5rem 1.5rem 1.75rem; background: var(--sheet-2); border: var(--pen-1) solid var(--ink); border-left: .55rem solid var(--layer, var(--layer-blue)); border-radius: var(--radius); }
@media (min-width: 992px) { .ge-sx-app { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.ge-sx-app h3 { margin: 0; font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.02em; }
.ge-sx-app h3 a { color: var(--layer, var(--layer-blue)); text-decoration: none; }
.ge-sx-app h3 a:hover { text-decoration: underline; }
.ge-sx-role { margin: 0 0 .75rem; color: var(--ink-2); font-weight: 600; }
.ge-sx-app-main > p:last-child { margin-bottom: 0; }
.ge-sx-fit strong { font-weight: 800; }
.ge-sx-app-side { margin: 0; display: grid; gap: .9rem; align-content: start; }
.ge-sx-app-side dt, .ge-sx-step-side dt { font-size: var(--fs-sm); font-weight: 800; }
.ge-sx-app-side dd, .ge-sx-step-side dd { margin: .15rem 0 0; color: var(--ink-2); }
.ge-sx-appchips { list-style: none; margin: .25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.ge-sx-appchips li { padding: .15rem .55rem; font-weight: 700; font-size: var(--fs-sm); color: var(--layer, var(--layer-blue)); background: color-mix(in srgb, var(--layer, var(--layer-blue)) 12%, transparent); border-left: .25rem solid var(--layer, var(--layer-blue)); border-radius: .2rem; }

/* things to build */
.ge-sx-projects { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.ge-sx-project { display: flex; flex-direction: column; background: var(--sheet-2); border: var(--pen-1) solid var(--ink); border-radius: var(--radius); overflow: hidden; }
.ge-sx-project .ge-media { margin: 0; border: 0; border-bottom: .35rem solid var(--layer, var(--layer-blue)); border-radius: 0; }
.ge-sx-project.no-media { border-top: .5rem solid var(--layer, var(--layer-blue)); }
.ge-sx-project .ge-slot { padding: 1rem; font-size: var(--fs-sm); gap: .4rem; }
.ge-sx-project-body { display: flex; flex-direction: column; flex: 1; gap: .5rem; padding: 1.25rem 1.4rem 1.4rem; }
.ge-sx-project-body h3 { margin: 0; font-size: var(--fs-lg); line-height: 1.12; font-weight: 800; letter-spacing: -.02em; }
.ge-sx-project-body p { margin: 0; }
.ge-sx-project-body > p:not(.ge-card-k) { color: var(--ink-2); }
.ge-sx-project .ge-card-k, .ge-sx-wf-tile .ge-card-k { color: var(--layer, var(--layer-blue)); }

/* firm walkthroughs */
.ge-sx-wf { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .ge-sx-wf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ge-sx-wf-tile { position: relative; display: flex; flex-direction: column; background: var(--sheet-2); border: var(--pen-1) solid var(--ink); border-top: .5rem solid var(--layer, var(--layer-blue)); border-radius: var(--radius); overflow: hidden; }
.ge-sx-wf-tile .ge-media { margin: 0; border: 0; border-radius: 0; }
.ge-sx-wf-tile .ge-slot { padding: 1rem; font-size: var(--fs-sm); }
.ge-sx-wf-tile .ge-sx-go::after { content: ''; position: absolute; inset: 0; }
.ge-sx-wf-tile:hover { box-shadow: 0 1rem 2.25rem -1.2rem var(--layer, var(--layer-blue)); }
.ge-sx-wf-body { display: flex; flex-direction: column; flex: 1; padding: 1.4rem 1.5rem 1.5rem; }
.ge-sx-wf-body h3 { margin: .1rem 0 .5rem; font-size: var(--fs-xl); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
.ge-sx-wf-body p { margin: 0; }
.ge-sx-wf-body > p:not(.ge-card-k, .ge-sx-label) { color: var(--ink-2); }

/* the people in the chain */
.ge-sx-chain { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ge-sx-chain { gap: .5rem .9rem; }
.ge-sx-chain li { position: relative; display: inline-flex; align-items: center; padding: .5rem 1rem; border: var(--pen-1) solid var(--layer, var(--layer-blue)); border-radius: 99rem; background: var(--sheet-2); font-weight: 700; }
.ge-sx-chain li + li::before { content: ''; position: absolute; left: -.9rem; top: 50%; width: .9rem; height: 2px; background: var(--layer, var(--layer-blue)); }
.ge-sx-chain.is-small { gap: .35rem .6rem; }
.ge-sx-chain.is-small li { padding: .2rem .65rem; font-size: var(--fs-sm); font-weight: 600; }
.ge-sx-chain.is-small li + li::before { left: -.6rem; width: .6rem; }
/* the big chain: one line, arrows between stops, slides sideways when it does not fit */
.ge-sx-chain-track { position: relative; }
.ge-sx-chain-track > .ge-sx-chain { overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 1rem; scrollbar-width: thin; overscroll-behavior-x: contain; padding: .35rem .1rem .7rem; }
.ge-sx-chain.is-line { flex-wrap: nowrap; gap: 0 2.25rem; }
.ge-sx-chain.is-line li { flex: 0 0 auto; white-space: nowrap; gap: .55rem; padding: .45rem 1.1rem .45rem .45rem; scroll-snap-align: start; }
.ge-sx-chain.is-line li + li::before { left: -2.25rem; width: 2.25rem; height: 2px; transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, var(--layer, var(--layer-blue)) 0 6px, transparent 6px 10px); background-size: 20px 2px; }
.ge-sx-chain.is-line li + li::after { content: ''; position: absolute; left: -.6rem; top: 50%; width: .45rem; height: .45rem;
  border: solid var(--layer, var(--layer-blue)); border-width: 2px 2px 0 0; transform: translateY(-50%) rotate(45deg); }
.ge-sx-chain-n { display: inline-grid; place-items: center; flex: 0 0 auto; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--layer, var(--layer-blue)); color: var(--sheet-2); font-size: var(--fs-sm); font-weight: 800; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .ge-sx-chain.is-line li + li::before { animation: ge-chain-flow 1.2s linear infinite; }
}
@keyframes ge-chain-flow { from { background-position: 0 0; } to { background-position: 20px 0; } }
/* edge fades + arrow buttons (added by great-eight.js only when the line overflows) */
.ge-sx-chain-track.is-over-l > .ge-sx-chain { -webkit-mask-image: linear-gradient(90deg, transparent, #000 3rem); mask-image: linear-gradient(90deg, transparent, #000 3rem); }
.ge-sx-chain-track.is-over-r > .ge-sx-chain { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent); }
.ge-sx-chain-track.is-over-l.is-over-r > .ge-sx-chain { -webkit-mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); }
.ge-sx-chain-btn { position: absolute; top: calc(50% - .2rem); z-index: 1; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0;
  border: var(--pen-1) solid var(--layer, var(--layer-blue)); border-radius: 50%; background: var(--sheet-2); color: var(--layer, var(--layer-blue));
  font-weight: 800; line-height: 1; transform: translateY(-50%); cursor: pointer; transition: opacity .2s; }
.ge-sx-chain-btn.is-prev { left: -.4rem; }
.ge-sx-chain-btn.is-next { right: -.4rem; }
.ge-sx-chain-track:not(.is-over-l) .ge-sx-chain-btn.is-prev, .ge-sx-chain-track:not(.is-over-r) .ge-sx-chain-btn.is-next { opacity: 0; pointer-events: none; }

/* a firm's steps */
.ge-sx-steplist { list-style: none; margin: 0; padding: 0; counter-reset: sxs; display: grid; gap: 1rem; }
.ge-sx-step { counter-increment: sxs; position: relative; display: grid; gap: 1rem 2rem; grid-template-columns: minmax(0, 1fr); padding: 1.4rem 1.5rem 1.4rem 4.75rem; background: var(--sheet-2); border: var(--pen-1) solid var(--ink); border-radius: var(--radius); }
@media (min-width: 992px) { .ge-sx-step { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
@media (max-width: 575px) { .ge-sx-step { padding: 4.25rem 1.1rem 1.25rem; } }
.ge-sx-step::before { content: counter(sxs); position: absolute; left: 1.25rem; top: 1.25rem; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%; background: var(--layer, var(--layer-blue)); color: var(--sheet); font-weight: 800; font-size: var(--fs-md); }
.ge-sx-step h3 { margin: .35rem 0 .4rem; font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.02em; }
.ge-sx-step p { margin: 0; color: var(--ink-2); }
.ge-sx-who li { display: inline-flex; align-items: center; gap: .35rem; }
.ge-sx-who li:first-child { color: var(--ink); font-weight: 700; }
.ge-sx-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--layer, var(--layer-blue)); }
.ge-sx-step-side { margin: 0; display: grid; gap: .8rem; align-content: start; padding-left: 1rem; border-left: .25rem solid var(--grid); }

/* deliverables */
.ge-sx-deliver { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .ge-sx-deliver { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ge-sx-deliver h3 { font-size: var(--fs-lg); font-weight: 800; margin: 0 0 1rem; }
.ge-sx-deliver .ge-checks li { color: var(--ink); }
.ge-sx-deliver .ge-checks li::after { border-color: var(--sheet); }
.ge-sx-limits { border-top-color: var(--layer-ochre); }

/* staff production notes */
.ge-note h3 { font-size: var(--fs-md); font-weight: 800; margin: 0 0 .5rem; }

/* the license block */
.ge-sx-support { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); border-top: var(--pen-3) solid var(--ink);
  background: radial-gradient(40rem 20rem at 100% 0, rgba(75, 211, 123, .16), transparent 65%), radial-gradient(40rem 20rem at 0 100%, rgba(110, 149, 255, .16), transparent 65%), var(--sheet); }
.ge-sx-support-grid { display: grid; gap: 1.5rem 3rem; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 992px) { .ge-sx-support-grid { grid-template-columns: minmax(0, 1.6fr) auto; } }
.ge-sx-support .ge-sub { margin-bottom: 1rem; }
.ge-sx-support .ge-actions { margin: 0; }

/* ======================================================================================================================
   Motion. Everything below hangs on `html.ge-anim`, which ge-anim-head.inc adds only when the visitor has NOT asked for reduced
   motion (and removes again if great-eight.js never reports ready). Without it the page is the finished page: nothing hidden, nothing moving.
   The "before" states here are what anime.js animates from; great-eight.js clears its inline styles at the end of each reveal.
   ====================================================================================================================== */

/* split headlines: each word in a mask, rising out of it */
.ge-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.ge-wi { display: inline-block; will-change: transform; }
.ge-rainbow.is-split { background: none; -webkit-text-fill-color: initial; color: inherit; }
.ge-rainbow.is-split .ge-wi { background-image: linear-gradient(95deg, var(--layer-red), var(--layer-orange) 18%, var(--layer-ochre) 34%, var(--layer-green) 50%, var(--layer-cyan) 64%, var(--layer-blue) 78%, var(--layer-violet) 90%, var(--layer-magenta));
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-bottom: .08em; }

/* ticker: the eight apps scrolling past, between the hero and the figures */
.ge-ticker { overflow: hidden; border-bottom: var(--pen-3) solid var(--ink); background: var(--sheet); padding-block: 1.1rem; white-space: nowrap; }
.ge-ticker-track { display: inline-flex; gap: 3rem; padding-left: 3rem; }
.ge-ticker span { font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3.25rem); font-weight: 800; font-stretch: 105%; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.5px var(--layer, var(--layer-blue)); }
.ge-ticker span::after { content: ''; display: inline-block; width: .55rem; height: .55rem; margin-left: 3rem; background: var(--layer, var(--layer-blue)); transform: rotate(45deg); vertical-align: .2em; }
.ge-ticker span:nth-child(even) { color: var(--layer, var(--layer-blue)); -webkit-text-stroke: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ge-ticker-track { animation: ge-marquee 48s linear infinite; }
  .ge-ticker:hover .ge-ticker-track { animation-play-state: paused; }
}
@keyframes ge-marquee { to { transform: translateX(-50%); } }
.ge-anim .ge-ticker-track { animation: ge-marquee 48s linear infinite; }
.ge-anim .ge-ticker:hover .ge-ticker-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { html:not(.ge-anim) .ge-ticker { white-space: normal; } html:not(.ge-anim) .ge-ticker-track { flex-wrap: wrap; gap: .5rem 2rem; } html:not(.ge-anim) .ge-ticker-track > :nth-child(n+9) { display: none; } }

/* scroll progress, a thin plotted line in the eight layer colours */
.ge-progress { position: fixed; z-index: 1090; inset: 0 0 auto 0; height: 3px; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--layer-red), var(--layer-orange), var(--layer-ochre), var(--layer-green), var(--layer-cyan), var(--layer-blue), var(--layer-violet), var(--layer-magenta)); pointer-events: none; }

/* tiles and fields: tilt toward the pointer and a spotlight that follows it (great-eight.js sets --rx --ry --mx --my) */
.ge-tile, .ge-field { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .18s ease-out, box-shadow .2s; transform-style: preserve-3d; }
.ge-tile:hover, .ge-field:hover { transform: perspective(900px) translateY(-.25rem) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.ge-tile::before, .ge-field::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(16rem circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--layer, var(--layer-blue)) 26%, transparent), transparent 62%); }
.ge-field { position: relative; overflow: hidden; }
.ge-tile:hover::before, .ge-field:hover::before { opacity: 1; }

/* orbiting light dots on the figure and its slowly turning construction circles: only when motion is on */
.ge-orbits { display: none; }
.ge-orbit { fill: #fff; filter: drop-shadow(0 0 7px #fff) drop-shadow(0 0 14px var(--layer-cyan)); }
.ge-anim .ge-orbits { display: block; }

/* the "before" states */
.ge-anim .ge-arc { animation: none; stroke-dasharray: 0 100; }
.ge-anim .ge-lab { animation: none; opacity: 0; }
.ge-anim .ge-seg { animation: none; stroke-dashoffset: 100; }
.ge-anim .ge-glyph { animation: none; opacity: 0; }
.ge-anim .ge-art { opacity: 0; transform-origin: 50% 50%; }
.ge-anim .ge-art-guides, .ge-anim .ge-art-dim { opacity: 0; }
.ge-anim .ge-hero h1:not(.is-split), .ge-anim .ge-sub-hero h1:not(.is-split),
.ge-anim .ge-h2:not(.is-split), .ge-anim .ge-stage h2:not(.is-split) { opacity: 0; }
.ge-anim .ge-wi { transform: translateY(118%); }
.ge-anim :is(.ge-chip, .ge-lede, .ge-fine, .ge-crumb, .ge-sub, .ge-claim, .ge-block > h2, .ge-actions .btn) { opacity: 0; }
.ge-anim .ge-stage .ge-media, .ge-anim .ge-pagemedia .ge-media, .ge-anim .ge-inner > .ge-media { opacity: 0; }
.ge-anim :is(.ge-tiles, .ge-field-grid, .ge-cards, .ge-notes, .ge-links-row, .ge-chips, .ge-limit-grid, .ge-checks, .ge-shots, .ge-people, .ge-steps) > * { opacity: 0; }
.ge-anim :is(.ge-sx-entry-grid, .ge-sx-values, .ge-sx-films, .ge-sx-checks, .ge-sx-apps, .ge-sx-projects, .ge-sx-wf, .ge-sx-chain, .ge-sx-steplist, .ge-sx-deliver, .ge-sx-faq) > * { opacity: 0; }
.ge-anim .ge-fig { opacity: 0; }
.ge-anim .ge-flow { opacity: 0; }
.ge-anim .ge-flow-body > *, .ge-anim .ge-chiplist li { opacity: 0; }
.ge-provenance { margin-top: 2rem; }

/* ---- the transition in (ge-intro.inc + ge-intro.js): the old home page still breaks and EIGHT comes through ------------------------------------ */
.ge-intro { position: fixed; inset: 0; z-index: 3000; overflow: hidden; background: #10161D; cursor: pointer; }
.ge-intro[hidden] { display: none; }
html.ge-intro-on, html.ge-intro-on body { overflow: hidden; }
.ge-intro-then, .ge-intro-then img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ge-intro-then img { object-fit: cover; object-position: top center; }
.ge-intro-then { will-change: transform; }
.ge-intro-shards { position: absolute; inset: 0; visibility: hidden; }
.ge-intro-shards > i { position: absolute; inset: 0; background: #F3F6F9 top center / cover no-repeat; will-change: transform, opacity;
  filter: drop-shadow(0 0 1px rgba(16, 22, 29, .9)); }
.ge-intro-cracks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ge-intro-cracks path { fill: none; stroke: #10161D; stroke-width: 3; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, .9)); }
.ge-intro-burst { position: absolute; left: 50%; top: 47%; width: 60vmin; height: 60vmin; border-radius: 50%; opacity: 0; pointer-events: none;
  background: conic-gradient(#FF5A6E, #6E95FF, #FF9A3C, #F06BDC, #F2C230, #4BD37B, #A78BFA, #3FD6E6, #FF5A6E);
  -webkit-mask: radial-gradient(circle, transparent 52%, #000 54%, #000 62%, transparent 64%); mask: radial-gradient(circle, transparent 52%, #000 54%, #000 62%, transparent 64%); }
.ge-intro-word { position: absolute; left: 50%; top: 47%; margin: 0; opacity: 0; pointer-events: none; white-space: nowrap; line-height: 1;
  font-family: var(--font); font-weight: 900; font-stretch: 125%; letter-spacing: -.02em; font-size: clamp(4rem, 18.5vw, 22rem);
  background: linear-gradient(100deg, #FF5A6E 0%, #FF9A3C 18%, #F2C230 32%, #4BD37B 48%, #3FD6E6 62%, #6E95FF 76%, #A78BFA 88%, #F06BDC 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 2px rgba(16, 22, 29, .85); }
.ge-intro-note { position: absolute; left: 50%; top: 1.25rem; transform: translateX(-50%); margin: 0; opacity: 0; display: inline-flex; align-items: center; gap: .6rem;
  padding: .45rem 1rem; border-radius: 99rem; background: rgba(16, 22, 29, .88); color: #EEF3F8; font-weight: 700; font-size: var(--fs-sm); white-space: nowrap;
  box-shadow: 0 .5rem 1.5rem rgba(16, 22, 29, .3); }
.ge-intro-skip { position: absolute; right: 1rem; bottom: 1rem; padding: .4rem .9rem; border: 1px solid rgba(238, 243, 248, .5); border-radius: 99rem;
  background: rgba(16, 22, 29, .75); color: #EEF3F8; font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.ge-intro-skip:hover, .ge-intro-skip:focus-visible { background: #10161D; border-color: #fff; }

/* SuperCad Studio block: text left, a real capture right (stacks on narrow screens). */
.ge-super-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2rem; align-items: center; }
.ge-super-shot { margin: 0; }
.ge-super-shot img { display: block; width: 100%; height: auto; border: var(--pen-1) solid var(--ink); border-radius: .5rem; }
.ge-super-shot figcaption { margin-top: .5rem; }
@media (max-width: 860px) { .ge-super-grid { grid-template-columns: 1fr; } }

/* SuperCad Studio block: black, with drafting-grid lines (owner 2026-11-01). */
.ge-super { background: linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem, linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem, #000; --grid: #26303B; }
.ge-super .ge-super-shot img { border-color: #3A4756; background: #10161D; }
/* "And introducing SuperCad Studio": the big colourful opener, the eight layer colours across the words and a segmented strip under them. */
.ge-super-intro { margin: 0 0 .5rem; font-size: clamp(1.1rem, .8rem + 1.4vw, 1.6rem); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.ge-super-intro b { display: block; margin-top: .15em; font-size: clamp(2.2rem, 1.2rem + 4.4vw, 4.6rem); line-height: 1.02; letter-spacing: .02em; font-weight: 900;
  background: linear-gradient(90deg, var(--layer-red), var(--layer-orange), var(--layer-ochre), var(--layer-green), var(--layer-cyan), var(--layer-blue), var(--layer-violet), var(--layer-magenta));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.ge-super-strip { display: flex; height: .45rem; margin: .6rem 0 1.4rem; border-radius: 99rem; overflow: hidden; max-width: 28rem; }
.ge-super-strip i { flex: 1; }
.ge-super-strip i:nth-child(1) { background: var(--layer-red); } .ge-super-strip i:nth-child(2) { background: var(--layer-orange); }
.ge-super-strip i:nth-child(3) { background: var(--layer-ochre); } .ge-super-strip i:nth-child(4) { background: var(--layer-green); }
.ge-super-strip i:nth-child(5) { background: var(--layer-cyan); } .ge-super-strip i:nth-child(6) { background: var(--layer-blue); }
.ge-super-strip i:nth-child(7) { background: var(--layer-violet); } .ge-super-strip i:nth-child(8) { background: var(--layer-magenta); }
/* /supercad/learn: six cards as 3 x 2, five workspaces as one row of five on wide screens (they wrap by themselves below that). */
@media (min-width: 62rem) { .sc-flow .ge-cards { grid-template-columns: repeat(5, 1fr); } .sc-why .ge-cards { grid-template-columns: repeat(3, 1fr); } .sc-spaces .ge-tiles { grid-template-columns: repeat(5, 1fr); } }