/* ============================================================
   Greenlight Engineer — v3 "gate ledger" page.
   Self-contained; brand tokens mirrored from the Softobiz DS.
   ============================================================ */

.g3 {
  --bg: #080808;
  --alt: #101014;
  --panel: #0C0C10;
  --card: #17161C;
  --teal: #00FEA8;
  --purple: #AA00FF;
  --lilac: #BE7BFF;
  --t78: rgba(255,255,255,0.78);
  --t64: rgba(255,255,255,0.64);
  --t50: rgba(255,255,255,0.5);
  --t38: rgba(255,255,255,0.38);
  --b10: rgba(255,255,255,0.10);
  --b16: rgba(255,255,255,0.16);
  --pad: 40px;
  background: var(--bg);
  color: #fff;
  font-family: 'Manrope', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.g3 *, .g3 *::before, .g3 *::after { box-sizing: border-box; }
.g3 a:not([class]) { color: var(--lilac); text-decoration: none; }
.g3 a:not([class]):hover { color: #fff; }

.g3-wrap { max-width: 1320px; margin: 0 auto; }
.g3-sec { position: relative; padding: 104px var(--pad); }
.g3-sec--alt { background: var(--alt); }
.g3-sec--tight { padding-top: 76px; }
.g3-rule { height: 1px; background: var(--b10); }

.g3-eyebrow { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 800; letter-spacing: 0.18em; color: var(--t50); }
.g3-eyebrow__dash { width: 28px; height: 1px; background: var(--purple); flex: 0 0 auto; }
.g3-teal { color: var(--teal); }
.g3-lilac { color: var(--lilac); }

.g3-h1 { margin: 26px 0 0; font-size: clamp(2.4rem, 5.6vw, 66px); font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; }
.g3-h2 { margin: 22px 0 0; font-size: clamp(1.9rem, 4vw, 44px); font-weight: 700; line-height: 1.08; letter-spacing: -0.028em; text-wrap: balance; }
.g3-h3 { margin: 0; font-size: clamp(1.15rem, 2vw, 24px); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; }
.g3-lead { margin: 24px 0 0; font-size: clamp(1rem, 1.9vw, 19px); line-height: 1.58; color: var(--t78); max-width: 640px; text-wrap: pretty; }
.g3-body { margin: 0; font-size: 17px; line-height: 1.62; color: var(--t64); text-wrap: pretty; }
.g3-body + .g3-body { margin-top: 18px; }

/* ---------- buttons ---------- */
.g3-btn { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 700; padding: 16px 30px; text-decoration: none; transition: background .2s ease, border-color .2s ease, transform .2s ease, color .2s ease; }.g3-btn svg { display: block; flex: 0 0 auto; }
.g3-btn--solid { background: #fff; color: #0A0A0A; }
.g3-btn--solid:hover { background: #ECE2FF; color: #0A0A0A; transform: translateY(-2px); }
.g3-btn--ghost { border: 1px solid var(--b16); color: #fff; }
.g3-btn--ghost:hover { border-color: var(--lilac); background: rgba(190,123,255,0.08); color: #fff; transform: translateY(-2px); }

/* ---------- nav ---------- */
.g3-nav { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; max-width: 1320px; margin: 0 auto; padding: 28px var(--pad) 0; }
.g3-nav__logo { height: 34px; width: auto; display: block; }
.g3-nav__links { display: flex; align-items: center; gap: 26px; }
.g3-nav__home { display: inline-flex; align-items: center; gap: 9px; color: var(--t78); font-size: 15px; font-weight: 500; }
.g3-nav__cta { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-size: 15px; font-weight: 600; border: 1px solid var(--b16); padding: 11px 20px; }
.g3-nav__cta:hover { border-color: var(--lilac); background: rgba(190,123,255,0.08); }

/* ---------- hero ---------- */
.g3-hero { padding: 96px var(--pad) 120px; overflow: hidden; position: relative; }
.g3-hero__grid { max-width: 1320px; margin: 0 auto; }
.g3-hero__copy { max-width: 940px; }
.g3-hero__copy .g3-lead { max-width: 720px; }
.g3-sec--unit { padding-top: 0; }
.g3-hero__ctas { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; }
.g3-hero__meta { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--b10); display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 13.5px; font-weight: 600; color: var(--t50); }
.g3-hero__meta span { display: inline-flex; align-items: center; gap: 9px; }
.g3-hero__meta i { width: 6px; height: 6px; background: var(--teal); display: block; }

/* gate ticket */
.g3-tick { border: 1px solid var(--b16); background: var(--panel); }
.g3-tick__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--b10); }
.g3-tick__id { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; color: var(--t50); }
.g3-tick__task { margin-top: 6px; font-size: 15.5px; font-weight: 700; color: #fff; }
.g3-tick__live { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; color: var(--teal); }
.g3-tick__live i { width: 7px; height: 7px; background: var(--teal); display: block; animation: g3pulse 2.6s ease-in-out infinite; }
.g3-step { display: grid; grid-template-columns: 42px 1fr auto; gap: 18px; align-items: start; padding: 22px 22px; border-bottom: 1px solid var(--b10); position: relative; }
.g3-step__k { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; color: var(--t38); padding-top: 3px; }
.g3-step__t { font-size: 16px; font-weight: 700; color: #fff; }
.g3-step__s { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--t50); }
.g3-step__flag { font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; padding: 5px 9px; border: 1px solid var(--b16); color: var(--t50); white-space: nowrap; }
.g3-step::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: transparent; }
/* One task moving through four steps, on a single shared 12s cycle so all four
   reset together. Each step is dim until the run reaches it, lit while it runs,
   then settled. Its flag holds two labels stacked in one grid cell, so the box
   never resizes when the text flips. Windows (of 12s):
     a runs 0-15%, settles 18%   |  b runs 19-33%, settles 36%
     c runs 37-51%, settles 54%  |  d runs 55-69%, settles 72%
   72-100% is the payoff beat: all four settled, GREENLIT held for ~3.4s. */
.g3-step--a::before { animation: g3scan-a 12s linear infinite; }
.g3-step--b::before { animation: g3scan-b 12s linear infinite; }
.g3-step--c::before { animation: g3scan-c 12s linear infinite; }
.g3-step--d::before { animation: g3scan-d 12s linear infinite; }

.g3-step--a { animation: g3lit-a 12s linear infinite; }
.g3-step--b { animation: g3lit-b 12s linear infinite; }
.g3-step--c { animation: g3lit-c 12s linear infinite; }
.g3-step--d { animation: g3lit-d 12s linear infinite; }

.g3-step__flag { display: inline-grid; }
.g3-step__flag > span { grid-area: 1 / 1; display: block; text-align: left; }
.g3-step__flag-pre { color: var(--t38); opacity: 1; }
.g3-step__flag-done { opacity: 0; }

.g3-step--a .g3-step__flag-pre  { animation: g3pre-a 12s linear infinite; }
.g3-step--a .g3-step__flag-done { animation: g3done-a 12s linear infinite; }
.g3-step--b .g3-step__flag-pre  { animation: g3pre-b 12s linear infinite; }
.g3-step--b .g3-step__flag-done { animation: g3done-b 12s linear infinite; }
.g3-step--c .g3-step__flag-pre  { animation: g3pre-c 12s linear infinite; }
.g3-step--c .g3-step__flag-done { animation: g3done-c 12s linear infinite; }
.g3-step--d .g3-step__flag-pre  { animation: g3pre-d 12s linear infinite; }
.g3-step--d .g3-step__flag-done { animation: g3done-d 12s linear infinite; }

.g3-step--a .g3-step__flag-done { color: var(--lilac); }
.g3-step--b .g3-step__flag-done, .g3-step--c .g3-step__flag-done { color: var(--teal); }
.g3-step--d .g3-step__flag-done { color: #0A0A0A; }

.g3-step--a .g3-step__flag { animation: g3flagbox-a 12s linear infinite; }
.g3-step--b .g3-step__flag { animation: g3flagbox-b 12s linear infinite; }
.g3-step--c .g3-step__flag { animation: g3flagbox-c 12s linear infinite; }
.g3-step--d .g3-step__flag { animation: g3flagbox-d 12s linear infinite; }
.g3-tick__foot { display: flex; align-items: center; gap: 10px; padding: 16px 22px; font-size: 13px; color: var(--t50); }
.g3-tick__foot i { width: 6px; height: 6px; background: var(--lilac); display: block; }
.g3-tick--row .g3-tick__body { display: grid; grid-template-columns: repeat(4, 1fr); }
.g3-tick--row .g3-step { grid-template-columns: 1fr; gap: 12px; border-bottom: none; border-right: 1px solid var(--b10); padding: 26px 24px 30px; }
.g3-tick--row .g3-step:last-child { border-right: none; }
.g3-tick--row .g3-step::before { left: 0; right: 0; bottom: auto; top: 0; width: auto; height: 2px; }
.g3-tick--row .g3-step__flag { justify-self: start; }
.g3-tick--row .g3-tick__foot { border-top: 1px solid var(--b10); }
@keyframes g3pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* the scan bar on top of each step, lit only while that step is running */
@keyframes g3scan-a { 0%, 15% { background: var(--teal); } 18%, 100% { background: transparent; } }
@keyframes g3scan-b { 0%, 18% { background: transparent; } 19%, 33% { background: var(--teal); } 36%, 100% { background: transparent; } }
@keyframes g3scan-c { 0%, 36% { background: transparent; } 37%, 51% { background: var(--teal); } 54%, 100% { background: transparent; } }
@keyframes g3scan-d { 0%, 54% { background: transparent; } 55%, 69% { background: var(--teal); } 72%, 100% { background: transparent; } }

/* the step box itself */
@keyframes g3lit-a { 0%, 15% { background: rgba(0,254,168,0.05); } 18%, 100% { background: transparent; } }
@keyframes g3lit-b { 0%, 18% { background: transparent; } 19%, 33% { background: rgba(0,254,168,0.05); } 36%, 100% { background: transparent; } }
@keyframes g3lit-c { 0%, 36% { background: transparent; } 37%, 51% { background: rgba(0,254,168,0.05); } 54%, 100% { background: transparent; } }
@keyframes g3lit-d { 0%, 54% { background: transparent; } 55%, 69% { background: rgba(0,254,168,0.05); } 72%, 100% { background: transparent; } }

/* the label swap: in-progress out, settled in */
@keyframes g3pre-a  { 0%, 15% { opacity: 1; } 18%, 100% { opacity: 0; } }
@keyframes g3done-a { 0%, 15% { opacity: 0; } 18%, 100% { opacity: 1; } }
@keyframes g3pre-b  { 0%, 33% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes g3done-b { 0%, 33% { opacity: 0; } 36%, 100% { opacity: 1; } }
@keyframes g3pre-c  { 0%, 51% { opacity: 1; } 54%, 100% { opacity: 0; } }
@keyframes g3done-c { 0%, 51% { opacity: 0; } 54%, 100% { opacity: 1; } }
@keyframes g3pre-d  { 0%, 69% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes g3done-d { 0%, 69% { opacity: 0; } 72%, 100% { opacity: 1; } }

/* the flag box picks up its colour only once the step has settled */
@keyframes g3flagbox-a { 0%, 15% { border-color: var(--b16); } 18%, 100% { border-color: rgba(190,123,255,0.4); } }
@keyframes g3flagbox-b { 0%, 33% { border-color: var(--b16); } 36%, 100% { border-color: rgba(0,254,168,0.4); } }
@keyframes g3flagbox-c { 0%, 51% { border-color: var(--b16); } 54%, 100% { border-color: rgba(0,254,168,0.4); } }
@keyframes g3flagbox-d {
  0%, 69%   { background: transparent; border-color: var(--b16); }
  72%, 100% { background: var(--teal); border-color: var(--teal); }
}

/* Motion is decorative here: settle everything on the finished state. */
@media (prefers-reduced-motion: reduce) {
  .g3-step, .g3-step::before, .g3-step__flag,
  .g3-step__flag-pre, .g3-step__flag-done, .g3-tick__live i { animation: none; }
  .g3-step__flag-pre { display: none; }
  .g3-step__flag-done { opacity: 1; }
  .g3-step--a .g3-step__flag { border-color: rgba(190,123,255,0.4); }
  .g3-step--b .g3-step__flag, .g3-step--c .g3-step__flag { border-color: rgba(0,254,168,0.4); }
  .g3-step--d .g3-step__flag { background: var(--teal); border-color: var(--teal); }
}

/* ---------- split head (sticky left) ---------- */
.g3-split { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 92px; align-items: start; }
.g3-split__sticky { position: sticky; top: 96px; }

/* ---------- problem markers ---------- */
.g3-marks { margin-top: 36px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--b10); border: 1px solid var(--b10); }
.g3-mark { background: var(--alt); padding: 22px 24px; }
.g3-mark__k { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; color: var(--lilac); }
.g3-mark__t { margin: 10px 0 0; font-size: 15.5px; line-height: 1.45; font-weight: 600; color: var(--t78); }

.g3-punch { margin-top: 88px; padding-top: 40px; border-top: 1px solid var(--b16); font-size: clamp(1.6rem, 3.6vw, 40px); font-weight: 700; line-height: 1.14; letter-spacing: -0.025em; }

/* ---------- layers ---------- */
.g3-layer { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 92px; padding: 46px 0; border-top: 1px solid var(--b10); align-items: start; }
.g3-layer:last-of-type { border-bottom: 1px solid var(--b10); }
.g3-layer__k { display: flex; align-items: baseline; gap: 16px; }
.g3-layer__num { font-size: 13px; font-weight: 800; letter-spacing: 0.14em; color: var(--t38); }
.g3-layer__name { font-size: clamp(1.6rem, 3vw, 34px); font-weight: 800; letter-spacing: -0.03em; }
.g3-layer__promise { margin: 16px 0 0; font-size: 18px; line-height: 1.4; font-weight: 700; color: var(--teal); max-width: 420px; text-wrap: pretty; }
.g3-layer__twin { margin-top: 26px; display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border: 1px solid var(--b10); background: var(--card); }
.g3-layer__twin i { width: 7px; height: 7px; background: var(--teal); flex: 0 0 auto; margin-top: 7px; }
.g3-layer__twin span { font-size: 14.5px; line-height: 1.5; color: var(--t64); }
.g3-layer__twin b { color: #fff; font-weight: 700; }

/* ---------- mechanism ---------- */
.g3-beats { margin-top: 52px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--b10); border: 1px solid var(--b10); }
.g3-beat { background: var(--bg); padding: 28px 26px 30px; display: flex; flex-direction: column; gap: 12px; }
.g3-beat__k { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; }
.g3-beat--1 .g3-beat__k { color: var(--lilac); }
.g3-beat--2 .g3-beat__k, .g3-beat--3 .g3-beat__k { color: var(--teal); }
.g3-beat--4 .g3-beat__k { color: #fff; }
.g3-beat__t { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.g3-beat__s { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--t64); }
.g3-chips { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.g3-chip { font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--t64); border: 1px solid var(--b16); padding: 6px 9px; }
.g3-beat--4 { background: rgba(0,254,168,0.05); }

.g3-note { margin: 26px 0 0; font-size: 17px; line-height: 1.55; font-weight: 700; color: #fff; }
.g3-vs { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.g3-vs__col { border: 1px solid var(--b10); padding: 30px 28px; }
.g3-vs__col--on { border-color: rgba(0,254,168,0.35); background: rgba(0,254,168,0.04); }
.g3-vs__k { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; color: var(--t38); }
.g3-vs__col--on .g3-vs__k { color: var(--teal); }
.g3-vs__t { margin: 14px 0 0; font-size: 20px; font-weight: 700; line-height: 1.25; }
.g3-vs__p { margin: 12px 0 0; font-size: 15px; line-height: 1.58; color: var(--t64); }

/* ---------- layers (three-panel stack) ---------- */
.g3-stack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--b10); border: 1px solid var(--b10); }
.g3-lay { background: var(--bg); padding: 30px 28px 0; display: flex; flex-direction: column; position: relative; }
.g3-lay::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; }
.g3-lay--1::before { background: var(--lilac); }
.g3-lay--2::before { background: var(--teal); }
.g3-lay--3::before { background: rgba(0,254,168,0.45); }
.g3-lay__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.g3-lay__num { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; color: var(--t38); }
.g3-lay__io { font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; color: var(--t50); border: 1px solid var(--b16); padding: 5px 9px; }
.g3-lay__name { margin: 18px 0 0; font-size: clamp(1.6rem, 2.6vw, 32px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.g3-lay__promise { margin: 14px 0 0; font-size: 17.5px; line-height: 1.35; font-weight: 700; color: var(--teal); text-wrap: pretty; }
.g3-lay--1 .g3-lay__promise { color: var(--lilac); }
.g3-lay__p { margin: 18px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--t64); text-wrap: pretty; }
.g3-lay__sources { margin: 20px 0 26px; display: flex; flex-wrap: wrap; gap: 6px; }
.g3-lay__twin { margin-top: auto; margin-left: -28px; margin-right: -28px; padding: 18px 28px; border-top: 1px solid var(--b10); background: rgba(0,254,168,0.04); display: flex; align-items: flex-start; gap: 11px; }
.g3-lay__twin i { width: 7px; height: 7px; background: var(--teal); flex: 0 0 auto; margin-top: 6px; }
.g3-lay__twin span { font-size: 14px; line-height: 1.5; color: var(--t64); }
.g3-lay__twin b { color: #fff; font-weight: 700; }

.g3-gaterail { margin-top: 26px; display: flex; align-items: center; gap: 20px; }
.g3-gaterail__line { flex: 1; height: 1px; background: var(--b10); }
.g3-gaterail__txt { font-size: 12.5px; font-weight: 800; letter-spacing: 0.12em; color: var(--t50); text-align: center; }

.g3-lay--plain { padding-bottom: 30px; }
.g3-beats--3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- faq ---------- */
.g3-faq { margin-top: 44px; border-top: 1px solid var(--b10); }
.g3-faq__item { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; padding: 30px 0; border-bottom: 1px solid var(--b10); align-items: start; }
.g3-faq__q { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.28; letter-spacing: -0.015em; text-wrap: pretty; }
.g3-faq__a { margin: 0; font-size: 16px; line-height: 1.6; color: var(--t64); text-wrap: pretty; }

/* ---------- three-layer strip ---------- */
.g3-fits { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--b10); border: 1px solid var(--b10); }
.g3-fits__cell { background: var(--bg); padding: 28px 26px 30px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; }
.g3-sec--alt .g3-fits__cell { background: var(--alt); }
.g3-fits__cell--on { background: rgba(0,254,168,0.05); }
.g3-sec--alt .g3-fits__cell--on { background: rgba(0,254,168,0.06); }
.g3-fits__k { font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; color: var(--t38); }
.g3-fits__cell--on .g3-fits__k { color: var(--teal); }
.g3-fits__n { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.g3-fits__p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--t64); }
.g3-fits__go { margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--lilac); }
a.g3-fits__cell:hover .g3-fits__go { color: #fff; }

/* ---------- controlled path (numbered rail) ---------- */
.g3-cpath { margin: 44px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--b10); }
.g3-cpath__step { display: grid; grid-template-columns: 58px 250px 1fr auto; gap: 28px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--b10); }
.g3-cpath__k { font-size: 13px; font-weight: 800; letter-spacing: 0.12em; color: var(--t38); }
.g3-cpath__stage { font-size: 15px; font-weight: 800; letter-spacing: 0.1em; color: #fff; }
.g3-cpath__p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--t64); text-wrap: pretty; }
.g3-cpath__gate { font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; color: var(--teal); border: 1px solid rgba(0,254,168,0.4); padding: 6px 10px; white-space: nowrap; }
.g3-cpath__step--gate .g3-cpath__stage { color: var(--teal); }

/* ---------- honest frame ---------- */
.g3-frame { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 92px; align-items: start; }
.g3-frame__body { border-left: 2px solid rgba(0,254,168,0.5); padding-left: 28px; }

/* ---------- data tables ---------- */
.g3-tbl { margin-top: 44px; border: 1px solid var(--b10); }
.g3-tbl__row { display: grid; grid-template-columns: 0.62fr 1fr 1fr; border-bottom: 1px solid var(--b10); }
.g3-tbl__row:last-child { border-bottom: none; }
.g3-tbl__row--head { background: var(--card); }
.g3-tbl__cell { padding: 20px 24px; border-right: 1px solid var(--b10); }
.g3-tbl__cell:last-child { border-right: none; }
.g3-tbl__h { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; color: var(--t38); }
.g3-tbl__h--agent { color: var(--lilac); }
.g3-tbl__h--twin { color: var(--teal); }
.g3-tbl__num { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; color: var(--t38); }
.g3-tbl__stage { display: block; margin-top: 6px; font-size: 18px; font-weight: 700; letter-spacing: -0.015em; }
.g3-tbl__p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--t64); }
.g3-tbl__cell--on { background: rgba(0,254,168,0.04); }
.g3-tbl__cell--dim { font-size: 15.5px; font-weight: 700; }
.g3-tbl__cell--muted .g3-tbl__p, .g3-tbl__cell--muted { color: var(--t50); font-size: 14.5px; line-height: 1.55; }
.g3-tbl__cell--gl { font-size: 14.5px; line-height: 1.55; color: var(--t78); }

/* ---------- callout ---------- */
.g3-callout { margin-top: 40px; display: grid; grid-template-columns: 200px 1fr; gap: 32px; padding: 28px 30px; border: 1px solid var(--b10); background: var(--card); }
.g3-callout__k { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; color: var(--teal); padding-top: 3px; }
.g3-callout__p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--t64); }
.g3-callout__p b { color: #fff; font-weight: 700; }

/* ---------- outcome ledger ---------- */
.g3-led { margin-top: 48px; border-top: 1px solid var(--b10); }
.g3-led__row { display: grid; grid-template-columns: 68px 1fr 1.15fr; gap: 40px; padding: 34px 0; border-bottom: 1px solid var(--b10); align-items: start; }
.g3-led__k { font-size: 13px; font-weight: 800; letter-spacing: 0.12em; color: var(--t38); padding-top: 6px; }
.g3-led__t { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.24; letter-spacing: -0.018em; text-wrap: balance; }
.g3-led__p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--t64); text-wrap: pretty; }
.g3-led__p + .g3-led__p { margin-top: 14px; }
.g3-led__fig { display: flex; align-items: baseline; gap: 14px; margin-top: 16px; }
.g3-led__fig b { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; color: var(--teal); line-height: 1; }
.g3-led__fig span { font-size: 14.5px; line-height: 1.45; color: var(--t64); max-width: 260px; }
.g3-flag { display: inline-block; margin-top: 14px; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; color: #FFD166; border: 1px solid rgba(255,209,102,0.4); padding: 6px 10px; }

/* ---------- start path ---------- */
.g3-path { margin-top: 48px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.g3-path__step { border-top: 2px solid var(--b16); padding-top: 20px; transition: border-color .25s ease; }
.g3-path__step:hover { border-color: var(--teal); }
.g3-path__k { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; color: var(--t38); }
.g3-path__t { margin: 12px 0 0; font-size: 18px; font-weight: 700; line-height: 1.3; }
.g3-path__s { margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--t64); }
.g3-metrics { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 12px; }
.g3-metric { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--b16); padding: 12px 18px; font-size: 15px; font-weight: 700; }
.g3-metric i { width: 7px; height: 7px; background: var(--teal); display: block; }

/* ---------- imagery ---------- */
@keyframes g3drift { from { transform: scale(1.06) translate3d(0, 0, 0); } to { transform: scale(1.16) translate3d(-2.5%, -1.5%, 0); } }
@keyframes g3driftAlt { from { transform: scale(1.14) translate3d(-2%, 1%, 0); } to { transform: scale(1.05) translate3d(1.5%, -1%, 0); } }
.g3-heroimg img, .g3-closeimg img { animation: g3drift 38s ease-in-out infinite alternate; will-change: transform; }
.g3-imgband img { animation: g3driftAlt 44s ease-in-out infinite alternate; will-change: transform; }
.g3-imgstrip img, .g3-imgtall img { animation: g3drift 32s ease-in-out infinite alternate; will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .g3-heroimg img, .g3-closeimg img, .g3-imgband img, .g3-imgstrip img, .g3-imgtall img { animation: none; }
}
.g3-heroimg { position: absolute; top: 0; right: 0; bottom: 0; width: 62%; overflow: hidden; pointer-events: none; }
.g3-heroimg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; display: block; }
.g3-heroimg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #080808 0%, rgba(8,8,8,0.9) 28%, rgba(8,8,8,0.15) 100%), linear-gradient(to top, #080808 0%, rgba(8,8,8,0) 44%); }
.g3-hero__grid { position: relative; z-index: 1; }

.g3-imgband { position: relative; overflow: hidden; padding: 92px var(--pad); border-top: 1px solid var(--b10); border-bottom: 1px solid var(--b10); }
.g3-imgband img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.45; }
.g3-imgband::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,8,8,0.94) 0%, rgba(8,8,8,0.74) 55%, rgba(8,8,8,0.42) 100%); }
.g3-imgband__in { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; }
.g3-imgband .g3-punch { margin: 0; padding: 0; border-top: none; max-width: 940px; }

.g3-imgstrip { margin-top: 44px; position: relative; overflow: hidden; border: 1px solid var(--b16); height: 260px; }
.g3-imgstrip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.45; }
.g3-imgstrip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,8,8,0.9), rgba(8,8,8,0.5)); }
.g3-imgk { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 16px 20px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; color: var(--teal); background: linear-gradient(to top, rgba(8,8,8,0.92), rgba(8,8,8,0)); }

.g3-imgtall { margin-top: 30px; position: relative; overflow: hidden; border: 1px solid var(--b16); height: 230px; }
.g3-imgtall img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.45; }
.g3-imgtall::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,8,0.55), rgba(8,8,8,0.25)); }

.g3-closeimg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.g3-closeimg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; display: block; }
.g3-closeimg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,16,20,0.95) 0%, rgba(16,16,20,0.78) 50%, rgba(16,16,20,0.5) 100%); }
.g3-close .g3-wrap { position: relative; z-index: 1; }

/* ---------- closing ---------- */
.g3-close { position: relative; overflow: hidden; padding: 104px var(--pad) 118px; }
.g3-close__mark { position: absolute; right: -140px; bottom: -160px; width: 520px; opacity: 0.07; pointer-events: none; }
.g3-take { margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.g3-take__card { border: 1px solid var(--b16); padding: 32px 30px 34px; background: var(--card); transition: border-color .25s ease, transform .25s ease; }
.g3-take__card:hover { border-color: var(--teal); transform: translateY(-4px); }
.g3-take__k { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; color: var(--teal); }
.g3-take__t { margin: 14px 0 0; font-size: 22px; font-weight: 700; line-height: 1.24; }
.g3-take__p { margin: 12px 0 0; font-size: 15.5px; line-height: 1.58; color: var(--t64); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .g3-frame { grid-template-columns: 1fr; gap: 40px; }
  .g3-cpath__step { grid-template-columns: 46px 1fr; gap: 8px 18px; }
  .g3-cpath__p { grid-column: 2; }
  .g3-cpath__gate { grid-column: 2; justify-self: start; margin-top: 6px; }
  .g3-stack { grid-template-columns: 1fr; }
  .g3-tbl__row { grid-template-columns: 0.7fr 1fr 1fr; }
  .g3-callout { grid-template-columns: 1fr; gap: 14px; }
  .g3-tick--row .g3-tick__body { grid-template-columns: repeat(2, 1fr); }
  .g3-tick--row .g3-step:nth-child(2n) { border-right: none; }
  .g3-tick--row .g3-step:nth-child(-n+2) { border-bottom: 1px solid var(--b10); }
  .g3-split, .g3-layer { grid-template-columns: 1fr; gap: 48px; }
  .g3-split__sticky { position: static; }
  .g3-beats { grid-template-columns: repeat(2, 1fr); }
  .g3-beats--3 { grid-template-columns: 1fr; }
  .g3-fits { grid-template-columns: 1fr; }
  .g3-faq__item { grid-template-columns: 1fr; gap: 14px; }
  .g3-path { grid-template-columns: repeat(2, 1fr); }
  .g3-led__row { grid-template-columns: 48px 1fr; gap: 22px; }
  .g3-led__row > .g3-led__body { grid-column: 2; }
}
@media (max-width: 720px) {
  .g3 { --pad: 22px; }
  .g3-heroimg { width: 100%; }
  .g3-imgband { padding: 64px var(--pad); }
  .g3-imgstrip { height: 180px; }
  .g3-imgtall { height: 160px; }
  .g3-sec { padding: 72px var(--pad); }
  .g3-marks, .g3-beats, .g3-vs, .g3-take, .g3-path { grid-template-columns: 1fr; }
  .g3-tbl__row { grid-template-columns: 1fr; }
  .g3-tbl__cell { border-right: none; border-bottom: 1px solid var(--b10); }
  .g3-tbl__row--head { display: none; }
  .g3-tick--row .g3-tick__body { grid-template-columns: 1fr; }
  .g3-tick--row .g3-step { border-right: none; border-bottom: 1px solid var(--b10); }
  .g3-nav__links { gap: 14px; }
  .g3-step { grid-template-columns: 34px 1fr; }
  .g3-step__flag { grid-column: 2; justify-self: start; }
}

/* ---------- Enterprise page: collapse inline-styled grids on small screens ---------- */
@media (max-width: 980px) {
  .g3-collapse { grid-template-columns: 1fr !important; gap: 28px !important; }
  .g3-collapse--flush { gap: 0 !important; }
  .g3-collapse--flush > * { border-right: none !important; }
}
@media (max-width: 720px) {
  .g3-collapse--rows { grid-template-columns: 1fr !important; gap: 8px !important; }
}