/* ==========================================================================
   gn-color.css — the color system (2026-11-13)

   Loaded last on every page. It restates the tokens gn.css defines and then
   paints the shared components, so every page changes together. No layout
   lives here: only color, border, radius and shadow. Remove the <link> and
   the site is exactly what it was.

   Light ground, one hue used with conviction. Blue is not an accent here:
   it fills the buttons, the stat tiles and the closing band, washes the top
   of every page and edges every card. Nothing else gets a color.

   Contrast (WCAG ratio):
     on --bg #F5F8FF: --ink #0A0D14 18.2, --ink2 #414A5E 8.3, --ink3 #59627A 5.7,
                      --ac #1D4BF0 6.0
     on --band #E4ECFF (and the hero wash at its deepest, #D3E0FF):
                      --ink3 5.1 / 4.6, --ac 5.3 / 4.8
     white on the blue fills: #1233C9 9.0, #2459EA 5.7, lightest glow #3266EE 4.9
     --onblue #F2F5FF on #2459EA 5.2, on the glow 4.5
   ========================================================================== */

html.gn {
  --bg: #F5F8FF;
  --bg2: #ECF1FF;
  --bg3: #DFE8FF;
  --ink: #0A0D14;
  --ink2: #414A5E;
  --ink3: #59627A;
  --line: rgba(18, 51, 201, .12);
  --line2: rgba(18, 51, 201, .24);
  --ac: #1D4BF0;
  --acink: #FFFFFF;
  --actint: rgba(29, 75, 240, .09);
  --ok: #177245;

  --band: #E4ECFF;
  --onblue: #F2F5FF;
  --fill: linear-gradient(135deg, #1233C9 0%, #2459EA 100%);
  --edge: linear-gradient(90deg, #1D4BF0, #46A6FF);
  --lift: 0 1px 2px rgba(18, 51, 201, .06), 0 14px 34px -18px rgba(18, 51, 201, .38);
  --glow: 0 12px 30px -10px rgba(29, 75, 240, .60);
}

html.gn body {
  background-color: var(--bg);
  background-image:
    radial-gradient(760px 520px at 86% -60px, rgba(29, 75, 240, .34), transparent 70%),
    radial-gradient(640px 460px at 10% -140px, rgba(70, 166, 255, .42), transparent 70%),
    linear-gradient(180deg, #D9E5FF 0, rgba(245, 248, 255, 0) 760px);
  background-repeat: no-repeat;
}
html.gn ::selection { background: var(--ac); color: #FFFFFF; }

/* ------------------------------------------------------------------ app bar */

html.gn .nav { background: rgba(240, 245, 255, .82); border-bottom: 1px solid var(--line); }
html.gn .nav-links > li > a:hover { background: var(--bg3); color: var(--ac); }

/* ----------------------------------------------------------------- buttons */

html.gn .nav-cta,
html.gn .btn:not(.btn-secondary), html.gn main button[type='submit'],
html.gn main .gn-cro-btn, html.gn main .hub-send, html.gn .ft-scan button,
html.gn .btn-primary, html.gn .hero-audit-btn, html.gn .cookie-accept,
html.gn .gn-go, html.gn .cta-final-btn, html.gn .submit-btn,
html.gn .audit-btn, html.gn .comp-submit-btn {
  background: var(--fill);
  color: #FFFFFF;
  border: 0;
  box-shadow: var(--glow);
  font-weight: 600;
  opacity: 1;
}
html.gn .nav-cta:hover,
html.gn .btn:not(.btn-secondary):hover, html.gn main button[type='submit']:hover,
html.gn main .gn-cro-btn:hover, html.gn main .hub-send:hover, html.gn .ft-scan button:hover,
html.gn .btn-primary:hover, html.gn .hero-audit-btn:hover, html.gn .cookie-accept:hover,
html.gn .gn-go:hover, html.gn .cta-final-btn:hover, html.gn .submit-btn:hover,
html.gn .audit-btn:hover, html.gn .comp-submit-btn:hover {
  background: #1233C9;
  color: #FFFFFF;
  opacity: 1;
}
html.gn .btn-secondary, html.gn .cookie-decline {
  background: #FFFFFF;
  color: var(--ac);
  border: 1px solid var(--line2);
  box-shadow: none;
}
html.gn .btn-secondary:hover, html.gn .cookie-decline:hover {
  background: var(--bg3);
  color: #1233C9;
  border-color: var(--ac);
}

/* ------------------------------------------------------------------- hero */

html.gn .gn-hero h1 {
  background: linear-gradient(100deg, #0A0D14 30%, #1D4BF0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html.gn .gn-badge { background: #FFFFFF; border: 1px solid var(--line2); color: var(--ink2); }
html.gn .gn-badge b { background: var(--fill); color: #FFFFFF; }

html.gn .gn-qs-o, html.gn .gn-dx-btn {
  background: #FFFFFF;
  border: 1px solid var(--line2);
  color: var(--ink);
  box-shadow: var(--lift);
}
html.gn .gn-qs-o:hover, html.gn .gn-dx-btn:hover,
html.gn .gn-dx-btn[aria-pressed='true'], html.gn .gn-dx-btn[aria-selected='true'] {
  background: var(--fill);
  border-color: transparent;
  color: #FFFFFF;
  box-shadow: var(--glow);
}
html.gn .gn-qs-o:hover *, html.gn .gn-dx-btn:hover * { color: #FFFFFF; }
html.gn .gn-field { background: #FFFFFF; border: 1px solid var(--line2); }
html.gn .gn-field:focus-within { border-color: var(--ac); box-shadow: 0 0 0 3px var(--actint); }

/* ---------------------------------------------------------- section bands
   .section is a centered column, not a full-width box, so the band is drawn
   with a spread shadow clipped to the section's own height. */

html.gn main .section-dark {
  background: var(--band);
  box-shadow: 0 0 0 100vmax var(--band);
  clip-path: inset(0 -100vmax);
  border-block: 0;
}

/* The closing band: solid blue, white type, white button. */
html.gn main .section-dark.cta,
html.gn .cta {
  background:
    radial-gradient(560px 300px at 100% 0, rgba(111, 160, 255, .18), transparent 70%),
    var(--fill);
  box-shadow: 0 0 0 100vmax #1A45D9;
  border-block: 0;
}
html.gn .cta :is(h1, h2, h3, .cta-title) { color: #FFFFFF; }
html.gn .cta :is(p, li, .cta-desc, .cta-sub) { color: var(--onblue); }
html.gn .cta .btn-primary, html.gn .cta .btn:not(.btn-secondary),
html.gn main .cta-box .btn:not(.btn-secondary), html.gn main .cta-box .btn-primary {
  background: #FFFFFF;
  color: #1233C9;
  box-shadow: 0 12px 30px -12px rgba(5, 15, 70, .55);
}
html.gn .cta .btn-primary:hover, html.gn .cta .btn:not(.btn-secondary):hover,
html.gn main .cta-box .btn:not(.btn-secondary):hover, html.gn main .cta-box .btn-primary:hover {
  background: #0A0D14;
  color: #FFFFFF;
}
html.gn .cta .btn-secondary {
  background: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, .55);
}
html.gn .cta .btn-secondary:hover { background: rgba(255, 255, 255, .14); color: #FFFFFF; border-color: #FFFFFF; }

html.gn main .cta-box {
  background:
    radial-gradient(480px 260px at 100% 0, rgba(111, 160, 255, .18), transparent 70%),
    var(--fill);
  border: 0;
  border-radius: 20px;
  box-shadow: var(--lift);
}
html.gn main .cta-box :is(h2, h3) { color: #FFFFFF; }
html.gn main .cta-box :is(p, li) { color: var(--onblue); }
html.gn main .cta-box a:not(.btn) { color: #FFFFFF; }

html.gn main :is(.case-industry, .case-location) { color: #1233C9; }

/* ------------------------------------------------------------------ cells
   White cards with a blue top edge. */

html.gn main :is(.service-card, .gn-card, .stat-card, .type-card, .tool-card, .industry-card, .why-card, .result-card, .approach-card, .value-card, .process-step, .problem-item, .result-box, .trust-item, .expertise-item, .included-item, .diff-item),
html.gn .stat, html.gn .gn-ind-card, html.gn .tool-card-home,
html.gn .testimonial, html.gn .service, html.gn .problem, html.gn .solution,
html.gn .audit-feature, html.gn .result-highlight,
html.gn main .content > .grid > .card {
  background: var(--edge) top / 100% 3px no-repeat, #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--lift);
}
html.gn .problem, html.gn .solution { border-left: 1px solid var(--line); }
html.gn main :is(.service-card, .gn-card, .type-card, .tool-card, .industry-card, .why-card, .result-card, .approach-card, .value-card):hover,
html.gn .gn-ind-card:hover, html.gn .tool-card-home:hover,
html.gn .service:hover, html.gn .audit-feature:hover,
html.gn main .content > .grid > .card:hover {
  background: var(--edge) top / 100% 3px no-repeat, #FFFFFF;
  border-color: var(--ac);
  box-shadow: var(--glow);
}

/* Proof bar: four solid blue tiles. */
html.gn .proof-bar { background: transparent; border-block: 0; }
html.gn .proof-stat {
  background: var(--fill);
  border: 0;
  border-radius: 16px;
  box-shadow: var(--glow);
}
html.gn .proof-stat .proof-num { color: #FFFFFF; }
html.gn .proof-stat .proof-label { color: var(--onblue); }
html.gn .proof-tag { background: #FFFFFF; border: 1px solid var(--line2); color: var(--ac); }

html.gn .step-dot { background: var(--fill); border: 0; color: #FFFFFF; }

/* ----------------------------------------------------------------- footer */

html.gn .footer { background: #FFFFFF; border-top: 1px solid var(--line); }
html.gn .footer a:hover, html.gn .footer .footer-links a:hover { color: var(--ac); }

/* --------------------------------------------------------- focus and print */

html.gn :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: 2px;
}
html.gn :is(.cta, .cta-box, .proof-stat) :is(a, button):focus-visible { outline-color: #FFFFFF; }

@media (forced-colors: active) {
  html.gn .gn-hero h1 { -webkit-text-fill-color: currentColor; background: none; }
}
@media print {
  html.gn body { background-image: none; }
  html.gn .gn-hero h1 { -webkit-text-fill-color: currentColor; background: none; }
  html.gn main .section-dark { box-shadow: none; clip-path: none; }
}

/* ==========================================================================
   Shell, motion and live charts (2026-11-13)
   Markup comes from scripts/build-shell.mjs and scripts/build-case-charts.mjs.
   Behavior (scroll state, reveals, count-ups, idle scan pulse) is js/gn-lux.js;
   everything here works without it.
   ========================================================================== */

/* ------------------------------------------------------------- mega menu */

html.gn .nav { transition: min-height .2s ease, box-shadow .2s ease, background .2s ease; }
html.gn.lx-scrolled .nav { background: rgba(255, 255, 255, .92); box-shadow: 0 10px 30px -22px rgba(18, 51, 201, .55); }
@media (min-width: 900px) { html.gn.lx-scrolled .nav { --bar: 52px; min-height: 52px; padding-block: 6px; } }

html.gn .nav-links > li.has-mega { position: static; }
html.gn .mg-caret { width: 11px; height: 11px; margin-left: 5px; vertical-align: -1px; transition: transform .18s ease; }
html.gn .has-mega:hover .mg-caret, html.gn .has-mega:focus-within .mg-caret { transform: rotate(180deg); }

html.gn .mega.mg {
  position: absolute; left: 0; right: 0; top: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 0 28px;
  max-width: none; width: auto; margin: 0;
  padding: 26px max(var(--gut), calc((100vw - var(--max)) / 2)) 0;
  background: #FFFFFF;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(18, 51, 201, .45);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
html.gn .has-mega:hover > .mega.mg, html.gn .has-mega:focus-within > .mega.mg {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
@media (max-width: 899px) { html.gn .mega.mg { display: none; } }

html.gn .mg-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 22px; }
html.gn .mg-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html.gn .mega.mg a.mg-h {
  font-family: var(--mo); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink3); padding: 0 10px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line); border-radius: 0;
}
html.gn .mega.mg a.mg-h:hover { color: var(--ac); }
html.gn .mega.mg a.mg-a {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 11px; align-items: start;
  padding: 9px 10px; border-radius: 10px; color: var(--ink);
  transition: background .14s ease;
}
html.gn .mega.mg a.mg-a:hover { background: var(--bg2); color: var(--ink); }
html.gn .mg-i {
  width: 34px; height: 34px; padding: 7px; border-radius: 9px;
  background: var(--bg2); color: var(--ac); border: 1px solid var(--line);
  transition: background .14s ease, color .14s ease, transform .14s ease;
}
html.gn .mg-a:hover .mg-i { background: var(--fill); color: #FFFFFF; transform: scale(1.06); }
html.gn .mg-a b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.008em; line-height: 1.25; }
html.gn .mg-a small { display: block; font-size: 12.5px; color: var(--ink3); line-height: 1.35; margin-top: 2px; }

html.gn .mg-side {
  background: radial-gradient(260px 180px at 100% 0, rgba(111, 160, 255, .18), transparent 70%), var(--fill);
  border-radius: 16px; padding: 20px; color: #FFFFFF;
  display: flex; flex-direction: column; align-self: start;
}
html.gn .mg-side p { margin: 0; color: var(--onblue); }
html.gn .mg-side .mg-k { font-family: var(--mo); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
html.gn .mg-side .mg-big { font-family: var(--fd); font-size: 64px; line-height: 1; color: #FFFFFF; margin: 8px 0 6px; letter-spacing: -.03em; }
html.gn .mg-side .mg-cap { font-size: 13px; line-height: 1.45; }
html.gn .mega.mg .mg-side a.mg-link { color: #FFFFFF; font-size: 13px; font-weight: 600; padding: 10px 0 0; text-decoration: underline; text-underline-offset: 3px; }
html.gn .mega.mg .mg-side a.mg-cta {
  margin-top: 14px; background: #FFFFFF; color: #1233C9; font-size: 14px; font-weight: 650;
  border-radius: 999px; padding: 10px 16px; text-align: center; min-height: 40px;
}
html.gn .mega.mg .mg-side a.mg-cta:hover { background: #0A0D14; color: #FFFFFF; }

html.gn .mg-foot {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
  margin-top: 20px; padding: 12px 10px 14px; border-top: 1px solid var(--line);
}
html.gn .mg-foot span { font-family: var(--mo); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); margin-right: 8px; }
html.gn .mega.mg .mg-foot a { font-size: 13px; color: var(--ink2); padding: 5px 10px; border-radius: 999px; }
html.gn .mega.mg .mg-foot a:hover { background: var(--bg2); color: var(--ac); }
html.gn .mega.mg .mg-foot a.mg-all { margin-left: auto; color: var(--ac); font-weight: 600; }

/* ----------------------------------------------------------------- footer */

html.gn .footer.ft { background: #FFFFFF; border-top: 1px solid var(--line); padding: 0; text-align: left; }
html.gn .ft > * { max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); box-sizing: content-box; }
html.gn .ft-top {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 24px 48px; align-items: end;
  padding-block: 48px 36px;
}
html.gn .ft-logo { font-family: var(--fd); font-size: 30px; letter-spacing: -.02em; color: var(--ink); line-height: 1; }
html.gn .ft-brand p { margin: 12px 0 0; color: var(--ink2); font-size: 15px; line-height: 1.5; max-width: 44ch; }
html.gn .ft-scan label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
html.gn .ft-scan div { display: flex; gap: 8px; }
html.gn .ft-scan input { flex: 1 1 auto; min-width: 0; min-height: 46px; padding: 0 14px; border: 1px solid var(--line2); border-radius: 10px; background: var(--bg); font: inherit; font-size: 15px; color: var(--ink); }
html.gn .ft-scan input:focus { border-color: var(--ac); box-shadow: 0 0 0 3px var(--actint); outline: 0; }
html.gn .ft-scan button { flex: 0 0 auto; min-height: 46px; padding: 0 18px; border-radius: 10px; font-size: 15px; cursor: pointer; }
html.gn .ft-cols {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 24px;
  padding-block: 32px; border-top: 1px solid var(--line);
}
html.gn .ft-h { font-family: var(--mo); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); margin: 0 0 10px; }
html.gn .ft-cols ul { list-style: none; margin: 0; padding: 0; }
html.gn .ft-cols a { display: inline-flex; align-items: center; min-height: 32px; font-size: 14px; color: var(--ink2); }
html.gn .ft-cols a:hover { color: var(--ac); }
html.gn .ft-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding-block: 18px 28px; border-top: 1px solid var(--line); }
html.gn .ft-base p { margin: 0; font-size: 12.5px; color: var(--ink3); }
html.gn .ft-base a { color: var(--ink3); }
html.gn .ft-base a:hover { color: var(--ac); }
@media (max-width: 899px) {
  html.gn .ft-top { grid-template-columns: 1fr; padding-block: 36px 28px; }
  html.gn .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.gn .ft-cols a { min-height: 40px; }
}

/* ------------------------------------------------------------ live charts */

html.gn .gn-live {
  margin: 28px 0; padding: 22px; background: #FFFFFF; border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--lift);
}
html.gn .gn-live-k {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0;
  font-family: var(--mo); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
html.gn .gn-live-k > span:last-child { color: var(--ink3); margin-left: auto; }
html.gn .gn-live-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(23, 114, 69, .5); animation: lx-pulse 2.2s ease-out infinite; }
@keyframes lx-pulse { 70% { box-shadow: 0 0 0 9px rgba(23, 114, 69, 0); } 100% { box-shadow: 0 0 0 0 rgba(23, 114, 69, 0); } }
html.gn .gn-live-h { font-family: var(--fd); font-size: 22px; margin: 10px 0 4px; color: var(--ink); }
html.gn .gn-live-svg { display: block; width: 100%; height: 220px; margin-top: 10px; overflow: visible; }
html.gn .gn-live-c .gn-live-svg { height: 150px; }
html.gn .gn-live-line { fill: none; stroke: var(--ac); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
html.gn .gn-live-base { stroke: var(--line2); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
html.gn .gn-live-dot { fill: #FFFFFF; stroke: var(--ac); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
html.gn .gn-live-x { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--mo); font-size: 11px; color: var(--ink3); }

html.gn .gn-cs-table-wrap { border: 1px solid var(--line); border-radius: 14px; background: #FFFFFF; box-shadow: var(--lift); overflow-x: auto; margin: 18px 0; }
html.gn .gn-cs-table { width: 100%; border-collapse: collapse; font-size: 15px; }
html.gn .gn-cs-table :is(th, td) { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); }
html.gn .gn-cs-table thead th { font-family: var(--mo); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); background: var(--bg2); }
html.gn .gn-cs-table tbody th { font-weight: 600; color: var(--ink); }
html.gn .gn-cs-table tbody tr:last-child :is(th, td) { border-bottom: 0; }
html.gn .gn-cs-table td:last-child { color: var(--ac); font-weight: 650; }
html.gn .gn-live-stats, html.gn .gn-live-total { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 14px 0 0; border-top: 1px solid var(--line); }
html.gn .gn-live-stats > div, html.gn .gn-live-total > div { padding: 12px 12px 4px 0; }
html.gn .gn-live-stats > div + div, html.gn .gn-live-total > div + div { padding-left: 14px; border-left: 1px solid var(--line); }
html.gn .gn-live dt, html.gn .gn-live-total dt { font-size: 12.5px; color: var(--ink3); line-height: 1.35; }
html.gn .gn-live dd, html.gn .gn-live-total dd { margin: 2px 0 0; font-size: clamp(18px, 2.4vw, 24px); font-weight: 600; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
html.gn .gn-live figcaption, html.gn .gn-live-note { margin: 12px 0 0; font-size: 12.5px; color: var(--ink3); line-height: 1.5; }
html.gn .gn-live figcaption a { color: var(--ac); font-weight: 600; white-space: nowrap; }

html.gn .gn-live-board { max-width: var(--max); margin: 0 auto; padding: clamp(36px, 6vw, 64px) var(--gut); }
html.gn .gn-live-board > .gn-live-k > span:last-child { margin-left: 0; }
html.gn .gn-live-c dd { font-size: 17px; }
html.gn .gn-live-board-h { font-family: var(--fd); font-size: clamp(26px, 3.6vw, 38px); letter-spacing: -.02em; margin: 12px 0 0; color: var(--ink); }
html.gn .gn-live-total { border: 1px solid var(--line); border-radius: 16px; background: var(--fill); margin-top: 22px; padding: 6px 20px 14px; box-shadow: var(--glow); }
html.gn .gn-live-total > div + div { border-left-color: rgba(255, 255, 255, .25); }
html.gn .gn-live-total dt { color: var(--onblue); }
html.gn .gn-live-total dd { color: #FFFFFF; font-size: clamp(24px, 4vw, 40px); }
html.gn .gn-live-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
html.gn .gn-live-grid .gn-live { margin: 0; }
html.gn .gn-live-c dd { font-size: 18px; }
@media (max-width: 899px) {
  html.gn .gn-live-grid { grid-template-columns: 1fr; }
  html.gn .gn-live-total { grid-template-columns: 1fr; }
  html.gn .gn-live-total > div + div { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255, 255, 255, .25); }
}

/* ------------------------------------------------------------------ motion
   Reveal states only exist once gn-lux.js has marked the document, so a page
   without script (or with reduced motion) is simply visible. */

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }

html.gn main :is(.service-card, .gn-card, .type-card, .tool-card, .industry-card, .why-card, .result-card, .approach-card, .value-card, .gn-ind-card, .tool-card-home, .service, .gn-qs-o, .gn-dx-btn),
html.gn .btn, html.gn .gn-go, html.gn .nav-cta, html.gn .gn-cro-btn {
  transition: transform .18s cubic-bezier(.2, .7, .2, 1), box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
html.gn main :is(.service-card, .gn-card, .type-card, .tool-card, .industry-card, .why-card, .result-card, .approach-card, .value-card, .gn-ind-card, .tool-card-home, .service, .gn-qs-o, .gn-dx-btn):hover { transform: translateY(-3px); }
html.gn :is(.btn, .gn-go, .nav-cta, .gn-cro-btn):hover { transform: translateY(-1px); }
html.gn :is(.btn, .gn-go, .nav-cta, .gn-cro-btn):active { transform: translateY(0) scale(.98); }

html.lx .lx-r { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--lx-d, 0ms); }
html.lx .lx-r.lx-in { opacity: 1; transform: none; }
html.lx .gn-live-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.lx .lx-in .gn-live-line, html.lx .gn-live.lx-in .gn-live-line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s cubic-bezier(.3, .7, .2, 1) .15s; }
html.lx .gn-live-area { opacity: 0; transition: opacity .6s ease 1.1s; }
html.lx .lx-in .gn-live-area { opacity: 1; }

/* Idle scan panel: one step lights at a time until someone uses it. */
html.gn #gn-log li.lx-on { color: var(--ac); }
html.gn #gn-log li { transition: color .3s ease; }

/* Cookie notice: a small card in the corner instead of a bar across the page. */
html.gn .cookie-banner {
  left: 16px; right: auto; bottom: 16px; width: min(380px, calc(100vw - 32px));
  border: 1px solid var(--line2); border-radius: 16px; background: #FFFFFF;
  box-shadow: 0 24px 60px -24px rgba(18, 51, 201, .5); padding: 16px;
}
html.gn .cookie-banner .cookie-content { display: block; max-width: none; padding: 0; }
html.gn .cookie-banner p { font-size: 13px; line-height: 1.5; color: var(--ink2); margin: 0 0 12px; text-align: left; }
html.gn .cookie-banner .cookie-buttons { display: flex; gap: 8px; justify-content: flex-start; }
html.gn .cookie-banner button { min-height: 40px; padding: 0 16px; font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html.gn *, html.gn *::before, html.gn *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  html.lx .lx-r { opacity: 1; transform: none; }
  html.lx .gn-live-line { stroke-dashoffset: 0; }
  html.lx .gn-live-area { opacity: 1; }
}
@media (max-width: 599px) {
  html.gn .gn-cs-table { font-size: 13.5px; }
  html.gn .gn-cs-table :is(th, td) { padding: 10px 9px; }
  html.gn .gn-cs-table thead th { font-size: 10px; letter-spacing: .04em; }
}