:root { --paper: #FEFDF9; --paper-alt: #F2F7FA; --ink: #1E1A15; --muted: #4A423A; --green: #6FA84C; --green-light: #8FC46B; --rule: rgba(30,26,21,.14); --soft: rgba(30,26,21,.055); --dark-rule: rgba(254,253,249,.18); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Inter',ui-sans-serif,system-ui,sans-serif; font-size: 15px; line-height: 1.55; letter-spacing: -.01em; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } a:hover { color: var(--green); } ::selection { background: var(--green); color: var(--paper); } svg { display: block; max-width: 100%; } summary { font: inherit; } .shell { position: relative; max-width: 1320px; margin: 0 auto; padding: 0 40px; } /* Header: matches the current Go Local AI site — compact wordmark, uppercase tracked nav, no pill CTA. */.site-header { position: sticky; top: 0; z-index: 50; height: 78px; margin: 0 -40px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 34px; background: rgba(254,253,249,.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 0; } .brand { display: inline-flex; align-items: center; width: max-content; font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: .215em; text-transform: uppercase; white-space: nowrap; } .brand .brand-dot { color: var(--green); letter-spacing: 0; } .primary-nav { display: flex; align-items: center; justify-content: flex-end; gap: 34px; margin-left: auto; font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: .185em; text-transform: uppercase; white-space: nowrap; } .primary-nav a { color: var(--ink); transition: color .16s ease; } .primary-nav a:first-child { color: var(--green); } .primary-nav a:hover { color: var(--green); } /* No section-divider rules: hierarchy is handled with whitespace and composition. */.section { padding: 76px 0; border: 0; } .section-title { margin: 0; font-size: clamp(38px,4.7vw,64px); font-weight: 700; line-height: .98; letter-spacing: -.046em; } /* Hero */.hero { position: relative; min-height: 342px; padding: 52px 0 26px; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; } .hero-copy { position: relative; z-index: 2; width: min(100%,980px); margin: 0 auto; } .hero h1 { margin: 0; font-size: clamp(30px,4.45vw,60px); font-weight: 700; line-height: .96; letter-spacing: -.052em; white-space: nowrap; } .hero h1 span { color: var(--green); } .hero p { margin: 22px auto 0; max-width: 58ch; font-size: 17px; line-height: 1.52; color: var(--muted); } .actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 26px; } .btn { display: inline-flex; align-items: center; gap: 18px; padding: 11px 17px; border: 1px solid var(--ink); border-radius: 999px; font-size: 14px; transition: background .18s ease,color .18s ease,border-color .18s ease; } .btn.primary { background: var(--ink); color: var(--paper); } .btn.primary:hover { background: var(--green); border-color: var(--green); color: var(--paper); } .btn.secondary:hover { background: rgba(30,26,21,.045); color: var(--ink); } .hero-field { position: absolute; z-index: 0; left: 50%; top: 50%; width: min(780px,66vw); height: 390px; transform: translate(-50%,-50%); pointer-events: none; opacity: .50; } .hero-field::before { content: ''; position: absolute; inset: -80px; background: radial-gradient(circle at 50% 50%,rgba(111,168,76,.23),rgba(111,168,76,.055) 39%,transparent 69%); -webkit-mask: repeating-radial-gradient(ellipse at 50% 50%,transparent 0 10px,#000 10px 11.1px); mask: repeating-radial-gradient(ellipse at 50% 50%,transparent 0 10px,#000 10px 11.1px); opacity: .58; } .hero-field::after { content: ''; position: absolute; left: 66%; top: 23%; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: -188px 120px 0 -2px rgba(111,168,76,.52),145px 148px 0 -2px rgba(30,26,21,.20),-84px 220px 0 -2px rgba(143,196,107,.42); } /* Engines */#platform { padding-top: 34px; } .platform-head { margin-bottom: 32px; } .eng-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 38px; align-items: start; } .engine-card h3 { margin: 0 0 18px; text-align: left; font-size: 24px; font-weight: 700; line-height: 1.05; letter-spacing: -.03em; } .engine-card p { margin: 16px 0 0; max-width: 44ch; font-size: 14.5px; line-height: 1.55; color: var(--muted); } .deployment-layer { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: 64px; align-items: end; margin-top: 58px; padding: 34px 0 6px; border-top: 1px solid var(--rule); } .deployment-layer .kicker { display: block; margin-bottom: 13px; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--green); } .deployment-layer h3 { margin: 0; max-width: 16ch; font-size: clamp(31px,3.35vw,46px); font-weight: 700; line-height: 1.02; letter-spacing: -.043em; } .deployment-layer p { margin: 17px 0 0; max-width: 48ch; font-size: 15px; line-height: 1.62; color: var(--muted); } .deployment-path { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px 13px; padding-bottom: 5px; font-size: 12px; font-weight: 600; letter-spacing: .105em; text-transform: uppercase; color: #727B70; } .deployment-path i { font-style: normal; font-weight: 400; color: #A2AD9B; } .deployment-path .active { color: var(--green); } .deployment-path-note { display: block; width: 100%; margin-top: 9px; text-align: right; font-size: 11px; font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--muted); } @media (max-width:760px){ .gateway-panel {  min-height: 440px; } }                 /* Subtle tonal shift for the lower half of the homepage. */#why, #retraining, #integration, #deployment, #contact { background: var(--paper-alt); box-shadow: 0 0 0 100vmax var(--paper-alt); clip-path: inset(0 -100vmax); } footer { background: var(--paper-alt); box-shadow: 0 0 0 100vmax var(--paper-alt); clip-path: inset(0 -100vmax); } /* Mirrored retraining / gateway sections */.split-section { display: grid; grid-template-columns: minmax(300px,.84fr) minmax(0,1.16fr); gap: 58px; align-items: center; } .split-section.reverse { grid-template-columns: minmax(0,1.16fr) minmax(300px,.84fr); } .split-copy h2 { margin: 0 0 15px; font-size: clamp(36px,4.4vw,58px); font-weight: 700; line-height: .99; letter-spacing: -.044em; } .split-copy>p { margin: 0 0 27px; max-width: 54ch; color: var(--muted); font-size: 15.5px; } .accordion-title { margin: 0 0 4px; font-size: 24px; line-height: 1.08; letter-spacing: -.03em; } .accordion { border: 0; } .accordion-item { border-bottom: 1px solid var(--rule); } .accordion-item:first-child { border-top: 1px solid var(--rule); } .accordion-trigger { appearance: none; -webkit-appearance: none; width: 100%; border: 0; background: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr 18px; gap: 12px; align-items: center; padding: 16px 0; color: var(--ink); font: inherit; text-align: left; } .accordion-trigger.no-num { grid-template-columns: 1fr 18px; } .accordion .num { font-size: 12px; color: var(--green); } .accordion .label { font-size: 17px; font-weight: 600; letter-spacing: -.025em; } .acc-icon { flex: none; display: inline-block; width: 1.1rem; height: 1.1rem; justify-self: end; color: #8FC46B; transform: rotate(0deg); transform-origin: 50% 50%; transition: transform .45s cubic-bezier(.22,.61,.36,1); } .acc-icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; } .accordion-trigger[aria-expanded="true"] .acc-icon { transform: rotate(180deg); } .accordion-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.22,.61,.36,1); } .accordion-panel-inner { overflow: hidden; opacity: 0; transition: opacity .3s ease .05s; } .accordion-trigger[aria-expanded="true"] + .accordion-panel { grid-template-rows: 1fr; } .accordion-trigger[aria-expanded="true"] + .accordion-panel .accordion-panel-inner { opacity: 1; } .accordion-panel p { margin: -3px 30px 17px 0; max-width: 49ch; font-size: 14px; line-height: 1.55; color: var(--muted); } .accordion-trigger:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; } .tech-panel { position: relative; min-height: 430px; border: 1px solid var(--ink); border-radius: 6px; background: var(--ink); overflow: hidden; } .tech-panel svg { position: absolute; inset: 0; width: 100%; height: 100%; } .tech-panel text { font-family: 'Inter',ui-sans-serif,system-ui,sans-serif; } /* Retraining motion: slow field drift + gated-area breathing; no moving dots. */.retrain-panel .retrain-contours { transform-box: fill-box; transform-origin: center; animation: retrainDrift 20s ease-in-out infinite; } .retrain-panel .retrain-zone { animation: retrainZone 8s ease-in-out infinite; } .retrain-panel .retrain-glow { animation: retrainGlow 12s ease-in-out infinite; } @keyframes retrainDrift{ 0%, 100% {  transform: translate3d(0,0,0);  opacity: .72; }  50% {  transform: translate3d(.8px,-.6px,0);  opacity: 1; } } @keyframes retrainZone{ 0%, 100% {  opacity: .48; }  50% {  opacity: .78; } } @keyframes retrainGlow{ 0%, 100% {  opacity: .28; }  50% {  opacity: .58; } } /* Gateway diagram is deliberately static. */.gateway-panel { min-height: 500px; } .gateway-panel svg * { animation: none!important; } /* Spaced mosaic: retain the asymmetric layout but let each panel breathe. */.journey-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 30px; } .journey-head .kicker { display: block; margin-bottom: 10px; font-size: 12.5px; color: var(--green); } .journey-head h2 { margin: 0; font-size: clamp(36px,4.6vw,60px); font-weight: 700; line-height: .99; letter-spacing: -.044em; } .journey-head a { display: inline-flex; gap: 10px; align-items: center; font-size: 13.5px; padding-bottom: 2px; border-bottom: 1px solid currentColor; } .journey-mosaic { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 16px; } .journey-panel { position: relative; min-height: 250px; padding: 27px; display: flex; flex-direction: column; background: rgba(254,253,249,.82); border: 1px solid rgba(30,26,21,.11); border-radius: 5px; overflow: hidden; } .journey-panel.span-4 { grid-column: span 4; } .journey-panel.span-5 { grid-column: span 5; } .journey-panel.span-7 { grid-column: span 7; } .journey-panel.span-8 { grid-column: span 8; } .journey-panel .mosaic-kicker { display: flex; justify-content: space-between; gap: 16px; font-size: 12px; color: var(--green); } .journey-panel .mosaic-title { display: block; margin-top: auto; max-width: 19ch; font-size: clamp(27px,3.2vw,44px); line-height: 1.01; letter-spacing: -.042em; font-weight: 700; color: var(--ink); } .journey-panel .mosaic-copy { display: block; margin-top: 12px; max-width: 45ch; font-size: 14px; line-height: 1.55; color: var(--muted); } .journey-panel .mosaic-link { display: inline-flex; align-items: center; gap: 8px; width: max-content; margin-top: 18px; padding-bottom: 2px; border-bottom: 1px solid currentColor; font-size: 13px; color: var(--ink); } .journey-panel.tint { background: linear-gradient(135deg,rgba(143,196,107,.13),rgba(143,196,107,.035) 60%,rgba(254,253,249,.45)); } .journey-panel.dark { background: var(--ink); border-color: var(--ink); } .journey-panel.dark .mosaic-kicker { color: var(--green-light); } .journey-panel.dark .mosaic-title { color: var(--paper); } .journey-panel.dark .mosaic-copy { color: rgba(254,253,249,.72); } .journey-panel.dark .mosaic-link { color: var(--paper); } .journey-panel.small { min-height: 215px; } .journey-panel.small .mosaic-title { font-size: clamp(25px,2.7vw,36px); } /* CTA + footer */.cta-panel { border-radius: 6px; background: var(--ink); color: var(--paper); padding: 48px; } .cta-panel h2 { margin: 0; max-width: 14ch; font-size: clamp(42px,5.5vw,72px); line-height: .96; letter-spacing: -.05em; } .cta-panel h2 span { color: var(--green-light); } .cta-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--dark-rule); } .cta-row p { margin: 0; max-width: 60ch; color: rgba(254,253,249,.76); font-size: 14.5px; } .cta-row .btn { border-color: var(--paper); background: var(--paper); color: var(--ink); } .cta-row .btn:hover { background: var(--green); border-color: var(--green); color: var(--paper); } footer { padding: 6px 0 42px; } .footer-grid { display: grid; grid-template-columns: minmax(0,1.45fr) repeat(3,minmax(0,1fr)); gap: 32px; padding: 34px 0 28px; } .footer-line { display: block; max-width: 18ch; font-size: clamp(22px,2.5vw,30px); font-weight: 700; line-height: 1.08; letter-spacing: -.038em; } .footer-col { display: flex; flex-direction: column; gap: 8px; } .footer-col>span { font-size: 12.5px; color: var(--muted); } .footer-col a { font-size: 13.5px; } .footer-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 14px; font-size: 12px; color: var(--muted); } @media (max-width:1000px){ .primary-nav {  display: none; }  .site-header {  padding: 0 18px; }  .primary-nav {  gap: 20px;  font-size: 11px;  letter-spacing: .14em; }  .hero {  min-height: 320px; }  .hero-field {  width: min(720px,76vw);  height: 350px; }  .eng-grid {  grid-template-columns: 1fr; }  .engine-card {  max-width: 440px;  margin: 0 auto;  width: 100%; } .deployment-layer {  grid-template-columns: 1fr;  gap: 24px;  margin-top: 46px; }  .deployment-path {  justify-content: flex-start; }  .deployment-path-note {  text-align: left; }  .problem-beat, .problem-beat:nth-child(even) {  grid-template-columns: 1fr;  gap: 24px;  min-height: auto;  padding: 72px 0; }  .problem-beat:nth-child(even) .problem-copy, .problem-beat:nth-child(even) .problem-visual {  grid-column: auto;  grid-row: auto; }  .problem-visual {  min-height: 300px; }  .solution-steps {  gap: 30px; }  .solution-item:nth-child(2) {  margin-top: 54px; }  .solution-item:nth-child(3) {  margin-top: 108px; }  .split-section, .split-section.reverse {  grid-template-columns: 1fr;  gap: 34px; }  .split-section .split-copy {  order: 1; }  .split-section .tech-panel {  order: 2; }  .split-section.reverse .tech-panel {  order: 1; }  .split-section.reverse .split-copy {  order: 2; }  .journey-mosaic {  grid-template-columns: repeat(2,minmax(0,1fr)); }  .journey-panel {  grid-column: span 1!important; }  .journey-panel.span-7, .journey-panel.span-8 {  grid-column: 1/-1!important; }  .footer-grid {  grid-template-columns: 1.4fr 1fr 1fr; }  .footer-grid>div:first-child {  grid-column: 1/-1; } } @media (max-width:760px){ .shell {  padding: 0 20px; }  .site-header {  margin: 0 -20px;  padding: 0 20px;  height: 64px; }  .brand {  font-size: 13px;  letter-spacing: .18em; }  .primary-nav {  display: none; }  .hero {  min-height: 300px;  padding: 44px 0 24px; }  .hero h1 {  font-size: clamp(27px,7.1vw,38px);  letter-spacing: -.047em; }  .hero p {  font-size: 16px;  max-width: 44ch; }  .hero-field {  width: 92vw;  height: 330px;  opacity: .34; }  .section {  padding: 58px 0; }  .section-title {  font-size: clamp(36px,10.5vw,52px); }  .problem-section {  padding-top: 58px;  padding-bottom: 64px; }  .problem-intro {  min-height: 58vh;  padding-bottom: 36px; }  .problem-intro h2 {  font-size: clamp(34px,9.5vw,46px); }  .problem-intro p {  font-size: 15.5px; }  .problem-beat, .problem-beat:nth-child(even) {  padding: 54px 0;  gap: 20px; }  .problem-copy h3 {  font-size: clamp(32px,10vw,44px); }  .problem-visual {  min-height: 250px; }  .solution-pivot {  min-height: 60vh; }  .solution-pivot h3 {  font-size: clamp(38px,11vw,54px); }  .solution-steps {  min-height: auto;  grid-template-columns: 1fr;  gap: 54px;  padding-top: 20px; }  .solution-item, .solution-item:nth-child(2), .solution-item:nth-child(3) {  margin-top: 0;  max-width: 320px; }  .solution-item:nth-child(2) {  margin-left: 12%; }  .solution-item:nth-child(3) {  margin-left: 24%; } .split-copy h2 {  font-size: clamp(34px,10vw,48px); }  .tech-panel {  min-height: 380px; }  .journey-head {  display: block; }  .journey-head a {  margin-top: 16px; }  .journey-mosaic {  grid-template-columns: 1fr;  gap: 12px; }  .journey-panel, .journey-panel.span-7, .journey-panel.span-8 {  grid-column: 1!important;  min-height: 220px;  padding: 23px 20px; }  .cta-panel {  padding: 34px 24px; }  .cta-row {  align-items: flex-start;  flex-direction: column; }  .footer-grid {  grid-template-columns: 1fr 1fr; }  .footer-grid>div:first-child {  grid-column: 1/-1; }  .footer-meta {  display: grid; } } @media (prefers-reduced-motion:reduce){ *, *::before, *::after {  animation-duration: .01ms!important;  animation-iteration-count: 1!important;  scroll-behavior: auto!important; } } /* =============================================================
       PROBLEM / SOLUTION · AIRIER REFINEMENT
       Open, quiet nodes + fine inline SVG connectors. No JavaScript.
       Static cutout masks keep paths clear of transparent node labels.
       Solid paths: request routing. Dashed paths: evidence / feedback.
       All dimensions are relative to each diagram's local coordinate grid.
       ============================================================= */.gl-story { --gl-line: #8BB778; --gl-line-muted: #A4B0A7; --gl-label: #63834F; --gl-node: rgba(255,255,255,.16); position: relative; padding: 82px 0 64px; isolation: isolate; scroll-margin-top: 78px; } .gl-story::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 38%; right: -2%; background: linear-gradient(180deg,rgba(252,252,253,.26) 0%,rgba(250,252,249,.34) 23%,rgba(242,249,246,.25) 46%,rgba(244,250,250,.27) 69%,rgba(249,250,252,.18) 91%,transparent 100%); mask-image: linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent); -webkit-mask-image: linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent); pointer-events: none; } .gl-row { display: grid; grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr); column-gap: 76px; } .gl-kicker { display: block; margin: 0 0 20px; font-size: 11px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--gl-label); } .gl-problem { align-items: center; } .gl-problem-copy { padding-bottom: 34px; } .gl-problem h2 { margin: 0; max-width: 8ch; font-size: clamp(52px,5.55vw,78px); line-height: .97; letter-spacing: -.054em; } .gl-problem-copy p { margin: 22px 0 0; max-width: 30ch; color: var(--muted); font-size: 17px; line-height: 1.55; } .gl-diagram { position: relative; min-width: 0; margin: 0; width: 100%; height: var(--diagram-height); } .gl-diagram::before { content: ""; position: absolute; inset: 0 -1%; z-index: 0; pointer-events: none; background-image: radial-gradient(circle,rgba(90,124,103,.17) .65px,transparent .9px); background-size: 19px 19px; mask-image: linear-gradient(90deg,transparent,#000 28%,#000 80%,transparent); -webkit-mask-image: linear-gradient(90deg,transparent,#000 28%,#000 80%,transparent); opacity: .15; } .gl-diagram > svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; z-index: 1; pointer-events: none; } .gl-diagram .gl-wire { fill: none; stroke: var(--gl-line); stroke-width: 1.15; stroke-opacity: .8; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .gl-diagram .gl-wire-muted { stroke: var(--gl-line-muted); stroke-opacity: .30; stroke-width: .9; } .gl-diagram .gl-wire-evidence { stroke: #97AD93; stroke-width: 1; stroke-dasharray: 2 7; stroke-opacity: .5; } .gl-diagram .gl-wire-feedback { stroke: #9AAF93; stroke-width: .9; stroke-dasharray: 2 8; stroke-opacity: .32; } .gl-diagram .gl-contour { fill: none; stroke: #A5C49F; stroke-opacity: .18; stroke-width: .8; vector-effect: non-scaling-stroke; } .gl-diagram .gl-arrow { fill: none; stroke: #8BB778; stroke-opacity: .7; stroke-width: 1; vector-effect: non-scaling-stroke; } .gl-diagram .gl-dot { fill: #91BC77; } .gl-diagram .gl-dot-muted { fill: #A6B2A4; } .gl-node, .gl-label, .gl-boundary { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); transform: translate(-50%,-50%); z-index: 2; } .gl-node { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 12px; border: 1px solid rgba(103,132,102,.075); border-radius: 9px; background: var(--gl-node); text-align: center; box-shadow: none; } .gl-node strong { display: block; font-size: clamp(14px,1.27vw,18px); font-weight: 500; color: #50604A; line-height: 1.3; letter-spacing: -.026em; } .gl-node small { display: block; font-size: 12px; line-height: 1.35; color: #6B7567; letter-spacing: 0; } .gl-node .gl-mini { color: var(--gl-label); font-size: 9px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; } .gl-node--accent { background: rgba(143,196,107,.035); border-color: rgba(116,162,90,.15); } .gl-node--accent strong { color: #587647; } .gl-node--muted { background: rgba(255,255,255,.08); border-color: rgba(104,120,128,.055); } .gl-node--muted strong { color: #637064; } .gl-label { height: auto; padding: 3px 5px; color: #697368; font-size: 11px; line-height: 1.4; text-align: center; letter-spacing: .015em; } .gl-label--paper { background: transparent; width: max-content; max-width: var(--w); padding: 5px 10px; } .gl-label--caps { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } .gl-boundary { z-index: 0; border: 1px dashed rgba(120,160,103,.17); border-radius: 13px; background: rgba(233,244,224,.07); } .gl-problem-art { --diagram-height: 530px; } .gl-problem-art::before { opacity: .17; mask-image: radial-gradient(ellipse at 59% 50%,#000,transparent 74%); -webkit-mask-image: radial-gradient(ellipse at 59% 50%,#000,transparent 74%); } .gl-workload { position: absolute; left: 2.3%; top: var(--y); transform: translateY(-50%); width: 20.6%; display: flex; align-items: center; justify-content: space-between; gap: 8px; z-index: 2; font-size: 13px; color: #62695F; } .gl-workload i { flex: none; width: 5px; height: 5px; border: 1px solid #8DA37F; border-radius: 50%; background: #EAF2E3; } .gl-frontier { left: 76.111%; top: 48.113%; width: 26.4%; height: auto; min-width: 145px; max-width: 190px; padding: 0; aspect-ratio: 1; border-radius: 50%; gap: 9px; background: #F2F7F8; border-color: rgba(137,165,126,.17); box-shadow: none; } .gl-frontier::before, .gl-frontier::after { content: ""; position: absolute; border: 1px solid rgba(140,163,125,.11); border-radius: 50%; inset: -16px; pointer-events: none; } .gl-frontier::after { inset: -32px; border-color: rgba(140,163,125,.055); } .gl-frontier strong { font-size: 16px; } .gl-frontier small { font-size: 12px; } .gl-frontier .gl-price { margin-top: 4px; letter-spacing: .2em; font-size: 15px; color: #809173; font-weight: 500; } .gl-transition { align-items: center; min-height: 248px; } .gl-transition-copy { padding: 26px 0 46px; } .gl-transition-copy h3 { margin: 0; max-width: 13.5ch; font-size: clamp(35px,3.45vw,48px); line-height: 1.02; letter-spacing: -.045em; } .gl-transition-copy .gl-kicker { margin-bottom: 14px; } .gl-bridge { --diagram-height: 248px; } .gl-bridge::before { opacity: .07; } .gl-separate .gl-transition { margin-top: 58px; } .gl-separate .gl-assess-art .gl-entry { display: none; } .gl-separate .gl-bridge::before { opacity: 0; } .gl-stage { position: relative; scroll-margin-top: 100px; } .gl-stage-copy { align-self: start; position: sticky; top: 145px; padding: 64px 0 40px; } .gl-stage-copy .gl-kicker { display: flex; gap: 14px; align-items: center; margin-bottom: 20px; } .gl-stage-copy .gl-kicker span { color: #7E9580; font-weight: 400; letter-spacing: .03em; } .gl-stage-copy h4 { margin: 0; max-width: 12.5ch; font-size: clamp(33px,3.23vw,44px); line-height: 1.03; letter-spacing: -.043em; } .gl-stage-copy p { margin: 18px 0 0; max-width: 30ch; font-size: 15.5px; line-height: 1.58; color: var(--muted); } .gl-engine { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; font-size: 10px; font-weight: 500; letter-spacing: .05em; color: #7B8976; } .gl-engine::before { content: ""; width: 15px; height: 1px; background: #9FB38F; } .gl-assess-art { --diagram-height: 670px; } .gl-route-art { --diagram-height: 610px; } .gl-move-art { --diagram-height: 630px; } .gl-monitor-art { --diagram-height: 820px; } .gl-node--classifier { background: rgba(143,196,107,.025); border-color: rgba(133,171,105,.17); gap: 8px; } .gl-node--classifier .gl-mini { font-size: 9px; } .gl-node--classifier strong { font-size: clamp(15px,1.5vw,20px); } .gl-node--destination { gap: 7px; border-radius: 9px; border-color: transparent; background: transparent; } .gl-node--destination strong { font-size: clamp(14px,1.27vw,18px); } .gl-telemetry { position: absolute; left: 50%; top: var(--y); transform: translate(-50%,-50%); z-index: 2; width: 76%; margin: 0; padding: 22px 24px 6px; border: 1px solid transparent; border-radius: 10px; background: transparent; } .gl-telemetry header { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding-bottom: 19px; } .gl-telemetry header strong { font-size: 16px; font-weight: 500; color: #50604A; letter-spacing: -.02em; } .gl-telemetry header span { font-size: 10px; letter-spacing: .06em; color: #74866B; white-space: nowrap; } .gl-telemetry dl { margin: 0; } .gl-telemetry dl > div { display: grid; grid-template-columns: 90px minmax(0,1fr) 32px; gap: 14px; align-items: center; min-height: 48px; border-top: 1px solid rgba(115,137,119,.075); } .gl-telemetry dt { font-size: 12px; font-weight: 500; color: #5D6E55; } .gl-telemetry dd { margin: 0; font-size: 11.5px; line-height: 1.4; color: #6C7567; } .gl-telemetry .gl-unit { font-size: 10px; text-align: right; color: #789564; } .gl-monitor-footnote { position: absolute; top: 91%; left: 13%; right: 13%; margin: 0; text-align: center; font-size: 11px; line-height: 1.6; color: #788275; z-index: 2; } .gl-close { align-items: center; padding: 42px 0 6px; } .gl-close h3 { margin: 0; max-width: 13ch; font-size: clamp(34px,3.5vw,48px); line-height: 1.02; letter-spacing: -.045em; } .gl-close p { margin: 0; max-width: 43ch; color: var(--muted); font-size: 15px; line-height: 1.65; } .gl-sr-only { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important; } .gl-story a:focus-visible { outline: 2px solid #70924D; outline-offset: 6px; } @media (max-width:1150px) and (min-width:821px) { .gl-row {  grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr);  column-gap: 38px; }  .gl-stage-copy h4 {  font-size: 35px; }  .gl-problem h2 {  font-size: 60px; }  .gl-frontier {  min-width: 132px; }  .gl-node {  padding: 8px; }  .gl-node small {  font-size: 11px; }  .gl-node--classifier .gl-mini {  font-size: 8px; }  .gl-telemetry {  width: 82%;  padding: 18px 16px 5px; }  .gl-telemetry dl > div {  grid-template-columns: 70px minmax(0,1fr) 24px;  gap: 8px; } } @media (max-width:820px) { .gl-story {  padding: 62px 0 48px;  scroll-margin-top: 64px; }  .gl-story::before {  left: -2%;  right: -2%; }  .gl-row {  display: block; }  .gl-problem-copy {  padding: 0 0 34px; }  .gl-problem h2 {  font-size: clamp(46px,8.5vw,66px);  max-width: 14ch; }  .gl-problem-copy p {  font-size: 16px;  max-width: 34ch; }  .gl-problem-art {  --diagram-height: 440px; }  .gl-transition {  position: relative;  min-height: 0; }  .gl-transition-copy {  position: relative;  z-index: 3;  padding: 40px 0 24px;  max-width: 480px; }  .gl-transition-copy h3 {  font-size: 40px;  max-width: 16ch; }  .gl-bridge {  height: 82px; }  .gl-connected .gl-transition::before {  content: "";  position: absolute;  left: 50%;  top: 0;  bottom: 82px;  border-left: 1px dashed rgba(127,157,111,.24);  z-index: 0; }  .gl-connected .gl-transition-copy {  background: var(--paper-alt); }  .gl-separate .gl-transition {  margin-top: 48px; }  .gl-separate .gl-bridge {  display: none; }  .gl-stage-copy {  position: relative;  top: auto;  padding: 46px 0 24px;  max-width: 580px; }  .gl-stage-copy h4 {  max-width: 19ch;  font-size: 34px; }  .gl-stage-copy p {  font-size: 15px;  max-width: 46ch;  margin-top: 13px; }  .gl-stage-copy .gl-kicker {  margin-bottom: 15px; }  .gl-engine {  display: none; }  .gl-stage + .gl-stage {  margin-top: 0; }  /* On narrow screens the diagram sequence gets its own edge rail.
         It keeps the reading flow without running lines through headings. */ .gl-stage::before {  content: "";  position: absolute;  z-index: 0;  right: 1.95%;  top: 0;  bottom: 0;  border-right: 1px dashed rgba(127,157,111,.15); }  .gl-stage:first-child::before {  top: 290px; }  .gl-stage:last-child::before {  bottom: 250px; }  .gl-stage-copy {  padding-right: 22px; }  .gl-assess-art {  --diagram-height: 625px; }  .gl-route-art {  --diagram-height: 560px; }  .gl-move-art {  --diagram-height: 550px; }  .gl-monitor-art {  --diagram-height: 775px; }  .gl-close {  padding-top: 38px; }  .gl-close h3 {  font-size: 38px; }  .gl-close p {  margin-top: 20px;  max-width: 48ch;  font-size: 14.5px; } } @media (max-width:520px) { .gl-kicker {  font-size: 10px; }  .gl-problem h2 {  font-size: 49px; }  .gl-problem-art {  --diagram-height: 415px; }  .gl-workload {  font-size: 11.5px;  width: 23%;  left: 0;  gap: 2px;  white-space: nowrap; }  .gl-workload i {  width: 4px;  height: 4px; }  .gl-frontier {  min-width: 120px;  max-width: 128px;  gap: 7px; }  .gl-node.gl-frontier {  border-radius: 50%;  padding: 0;  box-shadow: none; }  .gl-frontier strong {  font-size: 14px; }  .gl-frontier small {  font-size: 10px; }  .gl-frontier .gl-price {  font-size: 12px; }  .gl-frontier::before {  inset: -10px; }  .gl-frontier::after {  inset: -20px; }  .gl-transition-copy h3 {  font-size: 35px;  max-width: 16ch; }  .gl-transition-copy {  padding: 40px 0 18px; }  .gl-stage-copy h4 {  font-size: 33px;  max-width: 16ch; }  .gl-node {  padding: 8px 5px;  gap: 5px;  border-radius: 7px; }  .gl-node strong {  font-size: 12.5px;  line-height: 1.25;  letter-spacing: -.025em; }  .gl-node small {  font-size: 10px;  line-height: 1.45; }  .gl-node .gl-mini {  font-size: 7.5px;  letter-spacing: .06em; }  .gl-node--classifier strong {  font-size: 14px; }  .gl-node--classifier .gl-mini {  font-size: 7px; }  .gl-label {  font-size: 9px;  padding: 3px 2px; }  .gl-label--caps {  font-size: 8px;  letter-spacing: .075em; }  .gl-label--paper {  padding: 4px 6px; }  .gl-node--destination {  padding-left: 3px;  padding-right: 3px; }  .gl-node--destination strong {  font-size: 12.5px; }  .gl-node--destination small {  font-size: 9px; }  .gl-telemetry {  width: 86%;  padding: 17px 14px 5px; }  .gl-telemetry header {  display: block;  padding-bottom: 14px; }  .gl-telemetry header strong {  font-size: 15px; }  .gl-telemetry header span {  display: block;  margin-top: 5px;  font-size: 9px; }  .gl-telemetry dl > div {  grid-template-columns: 66px minmax(0,1fr) 27px;  gap: 6px;  min-height: 47px; }  .gl-telemetry dt {  font-size: 10.5px; }  .gl-telemetry dd {  font-size: 10px; }  .gl-telemetry .gl-unit {  font-size: 9px; }  .gl-monitor-footnote {  font-size: 10px;  left: 9%;  right: 9%; }  .gl-bridge .gl-label {  left: 70%;  max-width: 50%; } } @media (prefers-reduced-motion:reduce) { .gl-story *, .gl-story *::before, .gl-story *::after {  animation: none!important;  transition: none!important; } } /* =============================================================
       STORY EXIT / AIRY CONTRAST PASS
       The pale story ends with Monitor. Everything after it returns
       to the site's warm paper. Header tint is intentionally
       translucent so it follows whichever page colour is beneath it.
       ============================================================= */.site-header { background: rgba(255,255,255,.12); backdrop-filter: blur(18px) saturate(108%); -webkit-backdrop-filter: blur(18px) saturate(108%); box-shadow: inset 0 -1px rgba(30,26,21,.025); } #why { background: #F8FAF9; box-shadow: 0 0 0 100vmax #F8FAF9; clip-path: inset(0 -100vmax); } #retraining, #integration, #deployment, #contact, footer { background: var(--paper); box-shadow: 0 0 0 100vmax var(--paper); clip-path: inset(0 -100vmax); } /* End the special scroll treatment cleanly after Monitor. */.gl-story { padding-bottom: 24px; } .gl-after-story { --gl-label: #63834F; position: relative; padding: 72px 0 82px; background: var(--paper); box-shadow: 0 0 0 100vmax var(--paper); clip-path: inset(0 -100vmax); } .gl-after-story .gl-close { padding: 0; } /* Slightly stronger fibres, without bringing the boxes back. */.gl-diagram .gl-wire { stroke-width: 1.25; stroke-opacity: .90; } .gl-diagram .gl-wire-muted { stroke-opacity: .38; stroke-width: .95; } .gl-diagram .gl-wire-evidence { stroke-width: 1.05; stroke-opacity: .60; } .gl-diagram .gl-wire-feedback { stroke-width: .95; stroke-opacity: .42; } .gl-diagram .gl-contour { stroke-opacity: .23; stroke-width: .85; } .gl-diagram .gl-arrow { stroke-opacity: .80; stroke-width: 1.06; } .gl-boundary { border-color: rgba(120,160,103,.21); } .gl-telemetry dl > div { border-top-color: rgba(115,137,119,.095); } @media (max-width:820px){ .gl-story {  padding-bottom: 14px; }  .gl-after-story {  padding: 56px 0 64px; } } /* =============================================================
       STICKY COPY / SCROLLING DIAGRAMS
       The left narrative stays in one fixed position while only the
       right-hand diagrams move. Each copy cross-fades against its
       corresponding diagram using CSS view timelines: no JavaScript.
       ============================================================= */.gl-stages { display: grid; grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr); column-gap: 76px; align-items: start; position: relative; timeline-scope: --gl-stage-0,--gl-stage-1,--gl-stage-2,--gl-stage-3,--gl-stage-4; } .gl-stage-copy-stack { position: sticky; top: 145px; align-self: start; height: 420px; min-width: 0; z-index: 4; } .gl-stage-copy-stack .gl-stage-copy { position: absolute; inset: 0; padding: 64px 0 40px; opacity: 0; pointer-events: none; will-change: opacity; animation-duration: 1ms; animation-fill-mode: both; animation-timing-function: linear; } .gl-stage-visuals { min-width: 0; } .gl-stage-visual { position: relative; min-width: 0; scroll-margin-top: 100px; } .gl-stage-visual--0 { view-timeline-name: --gl-stage-0; view-timeline-axis: block; } .gl-stage-visual--1 { view-timeline-name: --gl-stage-1; view-timeline-axis: block; } .gl-stage-visual--2 { view-timeline-name: --gl-stage-2; view-timeline-axis: block; } .gl-stage-visual--3 { view-timeline-name: --gl-stage-3; view-timeline-axis: block; } .gl-stage-visual--4 { view-timeline-name: --gl-stage-4; view-timeline-axis: block; } .gl-stage-copy--0 { animation-name: gl-copy-first; animation-timeline: --gl-stage-0; animation-range: entry 0% exit 100%; } .gl-stage-copy--1 { animation-name: gl-copy-right-size; animation-timeline: --gl-stage-1; animation-range: entry 0% exit 100%; } .gl-stage-copy--2 { animation-name: gl-copy-route; animation-timeline: --gl-stage-2; animation-range: entry 0% exit 100%; } .gl-stage-copy--3 { animation-name: gl-copy-deploy; animation-timeline: --gl-stage-3; animation-range: entry 0% exit 100%; } .gl-stage-copy--4 { animation-name: gl-copy-monitor; animation-timeline: --gl-stage-4; animation-range: entry 0% exit 100%; } /* Each hand-off is tuned to the meaningful point in its diagram. The
       cross-fade itself is intentionally almost instantaneous, so the copy
       reads as a clean swap rather than lingering between two stages. */@keyframes gl-copy-first{ 0%, 80.85% {  opacity: 1; }  81%, 100% {  opacity: 0; } } @keyframes gl-copy-right-size{ 0%, 40.85% {  opacity: 0; }  41%, 87.85% {  opacity: 1; }  88%, 100% {  opacity: 0; } } @keyframes gl-copy-route{ 0%, 33.85% {  opacity: 0; }  34%, 88.85% {  opacity: 1; }  89%, 100% {  opacity: 0; } } @keyframes gl-copy-deploy{ 0%, 32.85% {  opacity: 0; }  33%, 89.85% {  opacity: 1; }  90%, 100% {  opacity: 0; } } @keyframes gl-copy-monitor{ 0%, 30.85% {  opacity: 0; }  31%, 100% {  opacity: 1; } } .gl-mobile-stage-copy { display: none; } .gl-stage-copy--0 h2 { margin: 0; max-width: 8ch; font-size: clamp(52px,5.55vw,78px); line-height: .97; letter-spacing: -.054em; } .gl-stage-copy--0 p { margin: 22px 0 0; max-width: 30ch; color: var(--muted); font-size: 17px; line-height: 1.55; } .gl-stage-visual--0 { padding-top: 4px; } .gl-stage-visual--0 .gl-bridge { margin-top: 0; } /* U-shaped liquid-glass reveal. Upcoming diagram content stays visible but
       soft, then resolves into focus as it rises through the U. The mask uses
       long alpha ramps so there is no obvious blur boundary or hard glass edge. */.gl-scroll-veil { position: sticky; top: calc(100vh - 292px); z-index: 8; width: 124%; height: 292px; margin: 0 -12% -292px; pointer-events: none; background: linear-gradient(90deg,
          rgba(248,250,249,0) 0%,
          rgba(248,250,249,.025) 8%,
          rgba(248,250,249,.075) 22%,
          rgba(248,250,249,.13) 38%,
          rgba(248,250,249,.15) 50%,
          rgba(248,250,249,.13) 62%,
          rgba(248,250,249,.075) 78%,
          rgba(248,250,249,.025) 92%,
          rgba(248,250,249,0) 100%),
        linear-gradient(180deg,
          rgba(248,250,249,0) 0%,
          rgba(248,250,249,.025) 13%,
          rgba(248,250,249,.07) 31%,
          rgba(248,250,249,.13) 54%,
          rgba(248,250,249,.19) 76%,
          rgba(248,250,249,.23) 100%); -webkit-backdrop-filter: blur(11px) saturate(106%); backdrop-filter: blur(11px) saturate(106%); box-shadow: 0 -12px 38px rgba(86,111,94,.025); -webkit-mask-image: radial-gradient(ellipse 72% 176px at 50% -12px,
          transparent 0 35%,
          rgba(0,0,0,.025) 42%,
          rgba(0,0,0,.09) 50%,
          rgba(0,0,0,.22) 59%,
          rgba(0,0,0,.48) 70%,
          rgba(0,0,0,.76) 82%,
          #000 96%),
        linear-gradient(90deg,
          transparent 0%,
          rgba(0,0,0,.08) 7%,
          rgba(0,0,0,.34) 15%,
          rgba(0,0,0,.72) 24%,
          #000 34%,
          #000 66%,
          rgba(0,0,0,.72) 76%,
          rgba(0,0,0,.34) 85%,
          rgba(0,0,0,.08) 93%,
          transparent 100%),
        linear-gradient(180deg,
          rgba(0,0,0,.02) 0%,
          rgba(0,0,0,.12) 14%,
          rgba(0,0,0,.34) 32%,
          rgba(0,0,0,.68) 56%,
          #000 82%,
          #000 100%); -webkit-mask-composite: source-in,source-in; mask-image: radial-gradient(ellipse 72% 176px at 50% -12px,
          transparent 0 35%,
          rgba(0,0,0,.025) 42%,
          rgba(0,0,0,.09) 50%,
          rgba(0,0,0,.22) 59%,
          rgba(0,0,0,.48) 70%,
          rgba(0,0,0,.76) 82%,
          #000 96%),
        linear-gradient(90deg,
          transparent 0%,
          rgba(0,0,0,.08) 7%,
          rgba(0,0,0,.34) 15%,
          rgba(0,0,0,.72) 24%,
          #000 34%,
          #000 66%,
          rgba(0,0,0,.72) 76%,
          rgba(0,0,0,.34) 85%,
          rgba(0,0,0,.08) 93%,
          transparent 100%),
        linear-gradient(180deg,
          rgba(0,0,0,.02) 0%,
          rgba(0,0,0,.12) 14%,
          rgba(0,0,0,.34) 32%,
          rgba(0,0,0,.68) 56%,
          #000 82%,
          #000 100%); mask-composite: intersect,intersect; } .gl-scroll-veil::before { content: ""; position: absolute; left: 11%; right: 11%; top: -4px; height: 152px; border: 1px solid rgba(255,255,255,.25); border-top: 0; border-radius: 0 0 50% 50% / 0 0 94% 94%; box-shadow: inset 0 -1px rgba(255,255,255,.10),
        0 8px 28px rgba(105,135,112,.018); opacity: .34; -webkit-mask-image: linear-gradient(90deg,transparent 0,rgba(0,0,0,.14) 15%,#000 34%,#000 66%,rgba(0,0,0,.14) 85%,transparent 100%); mask-image: linear-gradient(90deg,transparent 0,rgba(0,0,0,.14) 15%,#000 34%,#000 66%,rgba(0,0,0,.14) 85%,transparent 100%); } .gl-scroll-veil::after { content: ""; position: absolute; left: 13%; right: 13%; top: 50px; height: 148px; border-radius: 50%; background: radial-gradient(ellipse at 50% 0,
        rgba(255,255,255,.095) 0%,
        rgba(255,255,255,.045) 38%,
        rgba(255,255,255,.015) 62%,
        transparent 84%); filter: blur(9px); opacity: .44; } @media (max-width:1150px) and (min-width:821px){ .gl-stages {  grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr);  column-gap: 38px; }  .gl-stage-copy-stack {  height: 390px; } } @media (max-width:820px){ .gl-stages {  display: block;  timeline-scope: none; }  .gl-stage-copy-stack {  display: none; }  .gl-stage-visual {  display: block; }  .gl-scroll-veil {  display: none; }  .gl-mobile-stage-copy {  display: block;  padding: 46px 22px 24px 0;  max-width: 580px; }  .gl-mobile-stage-copy .gl-kicker {  display: flex;  gap: 14px;  align-items: center;  margin-bottom: 15px; }  .gl-mobile-stage-copy .gl-kicker span {  color: #7E9580;  font-weight: 400;  letter-spacing: .03em; }  .gl-mobile-stage-copy h4 {  margin: 0;  max-width: 19ch;  font-size: 34px;  line-height: 1.03;  letter-spacing: -.043em; }  .gl-mobile-stage-copy p {  margin: 13px 0 0;  max-width: 46ch;  font-size: 15px;  line-height: 1.58;  color: var(--muted); }  .gl-mobile-stage-copy .gl-engine {  display: none; }  .gl-mobile-stage-copy--problem h2 {  margin: 0;  max-width: 9ch;  font-size: clamp(42px,12vw,58px);  line-height: .97;  letter-spacing: -.052em; }  .gl-mobile-stage-copy--problem p {  margin: 16px 0 0;  max-width: 34ch;  font-size: 15.5px;  line-height: 1.58;  color: var(--muted); }  .gl-stage-visual::before {  content: "";  position: absolute;  z-index: 0;  right: 1.95%;  top: 0;  bottom: 0;  border-right: 1px dashed rgba(127,157,111,.15); }  .gl-stage-visual:first-child::before {  top: 290px; }  .gl-stage-visual:last-child::before {  bottom: 250px; } } @media (max-width:520px){ .gl-mobile-stage-copy h4 {  font-size: 33px;  max-width: 16ch; } } @supports not (animation-timeline: view()){ .gl-stages {  display: block;  timeline-scope: none; }  .gl-stage-copy-stack {  display: none; }  .gl-mobile-stage-copy {  display: block;  padding: 46px 0 24px;  max-width: 580px; }  .gl-mobile-stage-copy .gl-kicker {  display: flex;  gap: 14px;  align-items: center;  margin-bottom: 15px; }  .gl-mobile-stage-copy .gl-kicker span {  color: #7E9580;  font-weight: 400;  letter-spacing: .03em; }  .gl-mobile-stage-copy h4 {  margin: 0;  max-width: 19ch;  font-size: 34px;  line-height: 1.03;  letter-spacing: -.043em; }  .gl-mobile-stage-copy p {  margin: 13px 0 0;  max-width: 46ch;  font-size: 15px;  line-height: 1.58;  color: var(--muted); } } @media (prefers-reduced-motion:reduce){ .gl-stages {  display: block;  timeline-scope: none; }  .gl-stage-copy-stack {  display: none; }  .gl-mobile-stage-copy {  display: block;  padding: 46px 0 24px;  max-width: 580px; }  .gl-mobile-stage-copy .gl-kicker {  display: flex;  gap: 14px;  align-items: center;  margin-bottom: 15px; }  .gl-mobile-stage-copy .gl-kicker span {  color: #7E9580;  font-weight: 400;  letter-spacing: .03em; }  .gl-mobile-stage-copy h4 {  margin: 0;  max-width: 19ch;  font-size: 34px;  line-height: 1.03;  letter-spacing: -.043em; }  .gl-mobile-stage-copy p {  margin: 13px 0 0;  max-width: 46ch;  font-size: 15px;  line-height: 1.58;  color: var(--muted); } } /* Product proof: one concrete interface after the problem/solution story. */.product-section { padding-top: 72px; padding-bottom: 76px; background: var(--paper); box-shadow: 0 0 0 100vmax var(--paper); clip-path: inset(0 -100vmax); } .product-head { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: 64px; align-items: end; margin-bottom: 32px; } .product-kicker { display: block; margin: 0 0 14px; font-size: 11px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--green); } .product-head h2 { margin: 0; max-width: 12ch; font-size: clamp(40px,4.8vw,64px); font-weight: 700; line-height: .98; letter-spacing: -.047em; } .product-head>p { margin: 0 0 6px; max-width: 47ch; font-size: 16px; line-height: 1.6; color: var(--muted); } .product-console { overflow: hidden; border: 1px solid rgba(30,26,21,.9); border-radius: 8px; background: var(--ink); color: var(--paper); } .product-console-bar { min-height: 52px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid rgba(254,253,249,.10); font-size: 11.5px; color: rgba(254,253,249,.55); } .product-console-bar>div { display: flex; align-items: center; gap: 9px; color: var(--paper); } .product-console-bar strong { font-size: 12.5px; font-weight: 600; } .product-console-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-light); box-shadow: 0 0 0 4px rgba(143,196,107,.08); } .product-console-grid { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(260px,.55fr); } .product-workloads { min-width: 0; padding: 10px 18px 18px; } .product-row { display: grid; grid-template-columns: minmax(150px,1.35fr) minmax(105px,.8fr) minmax(125px,1fr) 72px 62px; gap: 12px; align-items: center; min-height: 64px; padding: 0 12px; border-bottom: 1px solid rgba(254,253,249,.075); font-size: 12px; color: rgba(254,253,249,.67); } .product-row strong { font-size: 12.5px; font-weight: 600; color: var(--paper); } .product-row-head { min-height: 42px; font-size: 9.5px; font-weight: 600; letter-spacing: .10em; text-transform: uppercase; color: rgba(254,253,249,.38); } .product-row.is-selected { margin: 0 -2px; padding-left: 14px; padding-right: 14px; border-radius: 5px; background: rgba(143,196,107,.075); border-bottom-color: rgba(143,196,107,.14); } .product-pass { color: #B5D99E; } .product-lower { color: var(--green-light); font-weight: 600; } .product-route-detail { padding: 24px 24px 22px; border-left: 1px solid rgba(254,253,249,.10); background: linear-gradient(145deg,rgba(143,196,107,.07),rgba(254,253,249,.015) 62%); } .detail-kicker { display: block; margin-bottom: 8px; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--green-light); } .product-route-detail h3 { margin: 0 0 20px; font-size: 22px; line-height: 1.05; letter-spacing: -.03em; } .product-route-detail dl { margin: 0; } .product-route-detail dl>div { padding: 12px 0; border-top: 1px solid rgba(254,253,249,.08); } .product-route-detail dt { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(254,253,249,.38); } .product-route-detail dd { margin: 5px 0 0; font-size: 11.5px; line-height: 1.45; color: rgba(254,253,249,.74); } .product-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 15px; border-top: 1px solid rgba(143,196,107,.20); font-size: 11px; color: rgba(254,253,249,.62); } .product-status strong { color: var(--green-light); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; } .product-outcomes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; margin-top: 28px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .product-outcomes>div { display: grid; grid-template-columns: auto 1fr; gap: 13px; padding: 17px 22px 17px 0; align-items: baseline; } .product-outcomes>div+div { padding-left: 22px; border-left: 1px solid var(--rule); } .product-outcomes strong { font-size: 15px; color: var(--green); } .product-outcomes span { font-size: 13px; line-height: 1.5; color: var(--muted); } /* Compact trust/methodology strip: reduce integration anxiety without another full section. */.method-strip { display: grid; grid-template-columns: minmax(190px,.55fr) minmax(0,1.2fr) auto; gap: 26px; align-items: center; margin-top: 42px; padding: 18px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .method-strip strong { font-size: 13px; line-height: 1.35; } .method-strip span { font-size: 12px; line-height: 1.55; color: var(--muted); } .method-strip a { font-size: 12px; white-space: nowrap; border-bottom: 1px solid currentColor; padding-bottom: 2px; } /* The journey stays visually distinct, but is now only the three commercial stages + deployment choice. */.journey-mosaic.compact .journey-panel { min-height: 210px; } .journey-mosaic.compact .journey-panel.small { min-height: 210px; } .journey-mosaic.compact .mosaic-title { max-width: 16ch; } .journey-mosaic.compact .span-8 .mosaic-title { max-width: 18ch; } .cta-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 15px 20px; } .cta-secondary { font-size: 12.5px; color: rgba(254,253,249,.75); border-bottom: 1px solid rgba(254,253,249,.42); padding-bottom: 2px; } .cta-secondary:hover { color: var(--green-light); } @media (max-width:1000px){ .product-head {  grid-template-columns: 1fr;  gap: 18px; }  .product-head>p {  max-width: 56ch; }  .product-console-grid {  grid-template-columns: 1fr; }  .product-route-detail {  border-left: 0;  border-top: 1px solid rgba(254,253,249,.10); }  .method-strip {  grid-template-columns: 1fr;  gap: 8px;  align-items: start; } } @media (max-width:760px){ .product-section {  padding-top: 58px;  padding-bottom: 58px; }  .product-head h2 {  font-size: clamp(38px,11vw,52px); }  .product-workloads {  overflow-x: auto;  padding-left: 12px;  padding-right: 12px; }  .product-row {  min-width: 720px; }  .product-outcomes {  grid-template-columns: 1fr; }  .product-outcomes>div, .product-outcomes>div+div {  padding: 14px 0;  border-left: 0;  border-top: 1px solid var(--rule); }  .product-outcomes>div:first-child {  border-top: 0; }  .journey-mosaic.compact .journey-panel, .journey-mosaic.compact .journey-panel.small {  min-height: 190px; }  .cta-actions {  align-items: flex-start;  flex-direction: column; } } /* Hard stage switch: scroll timelines still define *when* a stage is ready,
       but JavaScript guarantees exactly one sticky copy is visible. This removes
       the multi-timeline overlap/cross-fade that can occur when two view timelines
       are simultaneously inside their active ranges. */.gl-stage-copy-stack.js-stage-swap .gl-stage-copy { opacity: 0!important; visibility: hidden; transition: none!important; } .gl-stage-copy-stack.js-stage-swap .gl-stage-copy.is-active { opacity: 1!important; visibility: visible; }

/* Stage headings (01-04) matched to the other section headers below the story.
   Was clamp(33px,3.23vw,44px); now identical to .split-copy h2 (.retraining / .integration). */.gl-stage-copy h4, .gl-mobile-stage-copy h4 { font-size: clamp(36px,4.4vw,58px); line-height: .99; letter-spacing: -.044em; } /* Taller headings need a taller pinned copy box: measured content 582px at 1440px, 602px at 1150px. */.gl-stage-copy-stack { height: 640px; } @media (max-width:1150px) and (min-width:821px) { .gl-stage-copy-stack {  height: 660px; } } /* Data-boundary box in the Deploy diagram: dashed rule 21% → 42% and a touch more fill. */.gl-boundary { border-color: rgba(120,160,103,.42); background: rgba(233,244,224,.13); } /* Product section: headline band across the top (left aligned), then the demo
   product preview and the statement list side by side on .split-section's columns. */.product-section > header h2 { margin: 0; max-width: 24ch; font-size: clamp(40px,4.8vw,64px); font-weight: 700; line-height: .98; letter-spacing: -.047em; } .product-demo { margin: 0; max-width: 520px; } .product-demo-shot { position: relative; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; border: 1px dashed rgba(120,160,103,.45); border-radius: 8px; background-image: radial-gradient(circle, rgba(90,124,103,.16) .7px, transparent .95px); background-size: 15px 15px; background-color: rgba(242,247,250,.55); } .product-demo-shot span { padding: 4px 10px; border-radius: 4px; background: rgba(254,253,249,.88); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #8A9683; text-align: center; } .product-points { min-width: 0; } .product-points-list { margin: 0; padding: 0; list-style: none; } .product-points-list li { position: relative; padding-left: 27px; font-size: 17px; line-height: 1.5; letter-spacing: -.015em; } .product-points-list li + li { margin-top: 15px; } .product-points-list li::before { content: ""; position: absolute; left: 0; top: .68em; width: 15px; height: 1px; background: #9FB38F; } .product-points-note { margin: 22px 0 0; padding-left: 27px; font-size: 13px; line-height: 1.5; color: var(--muted); } @media (min-width:1001px) { .product-section {  display: grid;  grid-template-columns: minmax(300px,.84fr) minmax(0,1.16fr);  column-gap: 58px;  row-gap: 42px;  align-items: center; }  .product-section > header {  grid-column: 1 / -1;  grid-row: 1; }  .product-demo {  grid-column: 1;  grid-row: 2; }  .product-points {  grid-column: 2;  grid-row: 2; }  .product-outcomes {  grid-column: 1 / -1;  grid-row: 3; } } @media (max-width:760px) { .product-section > header h2 {  font-size: clamp(38px,11vw,52px); } }

/* Finite scroll-story fix: use ordinary sticky positioning and one JS-selected
             active copy. This deliberately removes the experimental view-timeline
             dependency that could leave the story feeling stuck or never-ending. */@media (min-width:821px) and (prefers-reduced-motion:no-preference) { .gl-stages {  display: grid !important;  grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr);  column-gap: 76px;  align-items: start;  position: relative;  timeline-scope: none !important; }  .gl-stage-copy-stack {  display: grid !important;  position: sticky;  top: 112px;  align-self: start;  height: auto !important;  min-height: 0 !important;  z-index: 4; }  .gl-stage-copy-stack .gl-stage-copy, .gl-stage-copy-stack.js-stage-swap .gl-stage-copy {  grid-area: 1 / 1;  position: relative !important;  inset: auto !important;  align-self: start;  padding: 40px 0 36px;  opacity: 0 !important;  visibility: hidden;  transform: translateY(8px);  animation: none !important;  transition: opacity .18s ease, transform .18s ease !important;  pointer-events: none;  will-change: auto; }  .gl-stage-copy-stack .gl-stage-copy.is-active, .gl-stage-copy-stack.js-stage-swap .gl-stage-copy.is-active {  opacity: 1 !important;  visibility: visible;  transform: translateY(0); }  .gl-stage-visual {  view-timeline-name: none !important;  view-timeline-axis: auto !important; }  .gl-mobile-stage-copy {  display: none !important; } } @media (max-width:1150px) and (min-width:821px) and (prefers-reduced-motion:no-preference) { .gl-stages {  grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr);  column-gap: 38px; }  .gl-stage-copy-stack {  top: 104px; } }

/* Hero scale pass: wider canvas, larger headline and lead copy. */.hero { min-height: 380px; padding: 60px 0 34px; } .hero-copy { width: min(100%, 1240px); } .hero h1 { font-size: clamp(32px, 4.6vw, 66px); } .hero p { margin: 26px auto 0; max-width: 880px; font-size: 20px; line-height: 1.55; } .hero .actions { margin-top: 30px; } .hero-field { width: min(1080px, 72vw); height: 430px; } @media (max-width: 1000px) { .hero {  min-height: 350px; }  .hero-field {  width: min(880px, 84vw);  height: 390px; } } @media (max-width: 760px) { .hero {  min-height: 310px;  padding: 44px 0 26px; }  .hero h1 {  font-size: clamp(27px, 7.1vw, 38px); }  .hero p {  margin-top: 20px;  max-width: 48ch;  font-size: 17px; }  .hero-field {  width: 94vw;  height: 350px; } }

/* Shared navigation only. Safe to apply to the unchanged v15 homepage. */.site-header { position: sticky; top: 0; z-index: 50; height: 78px; margin: 0 -40px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 30px; background: rgba(254,253,249,.91); backdrop-filter: blur(18px) saturate(108%); -webkit-backdrop-filter: blur(18px) saturate(108%); box-shadow: inset 0 -1px rgba(30,26,21,.025); } .site-header .brand { display: inline-flex; align-items: center; width: max-content; font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: .215em; text-transform: uppercase; white-space: nowrap; color: var(--ink); } .site-header .brand-dot { color: var(--green); letter-spacing: 0; } .site-header .primary-nav { display: flex; align-items: center; justify-content: flex-end; gap: 27px; margin-left: auto; font-size: 11.5px; font-weight: 600; line-height: 1; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; } .site-header .primary-nav a, .site-header .primary-nav a:first-child { color: var(--ink); padding: 15px 0; transition: color .16s ease; } .site-header .primary-nav a[aria-current="page"], .site-header .primary-nav a:hover { color: #506b3d; } .site-header a:focus-visible, .site-header summary:focus-visible, .site-footer a:focus-visible { outline: 2px solid #506b3d; outline-offset: 6px; border-radius: 2px; } .site-header .mobile-menu { display: none; margin-left: auto; } .site-header .mobile-menu summary { list-style: none; display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 8px 0 8px 12px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; } .site-header .mobile-menu summary::-webkit-details-marker { display: none; } .site-header .mobile-menu .acc-icon { display: block; width: 1rem; height: 1rem; color: #8FC46B; transition: transform .45s cubic-bezier(.22,.61,.36,1); transform: rotate(0deg); } .site-header .mobile-menu .acc-icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; } .site-header .mobile-menu[open] .acc-icon { transform: rotate(180deg); } .site-header .mobile-menu nav { position: absolute; left: 0; right: 0; top: 100%; display: grid; padding: 12px 32px 22px; background: var(--paper); border-bottom: 1px solid var(--rule); box-shadow: 0 14px 24px rgba(30,26,21,.035); max-height: calc(100dvh - 78px); overflow: auto; } .site-header .mobile-menu nav a { padding: 13px 8px; font-size: 14px; border-top: 1px solid var(--rule); color: var(--ink); } .site-header .mobile-menu nav a[aria-current="page"] { color: #506b3d; } .site-header .mobile-menu nav a:hover { background: rgba(111,168,76,.04); } .site-footer { padding: 8px 0 34px; background: var(--paper); box-shadow: none; clip-path: none; } .site-footer .footer-grid { display: grid; grid-template-columns: minmax(0,1.45fr) repeat(3,minmax(0,1fr)); gap: 40px; padding: 40px 0 36px; border-top: 1px solid var(--rule); } .site-footer .footer-line { display: block; font-size: 28px; font-weight: 700; line-height: 1.07; letter-spacing: -.04em; max-width: 18ch; } .site-footer .green { color: var(--green); } .site-footer .footer-email { display: inline-block; margin-top: 18px; font-size: 13px; color: var(--muted); } .site-footer .footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; } .site-footer .footer-col>span { font-size: 10px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .site-footer .footer-col a { padding: 4px 0; font-size: 13px; line-height: 1.6; } .site-footer a:hover { color: #506b3d; } .site-footer .footer-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 22px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 11px; color: var(--muted); } @media (max-width:1180px){ .site-header .primary-nav {  display: none; }  .site-header .mobile-menu {  display: block; } } @media (max-width:760px){ .site-header {  height: 64px;  margin: 0 -20px;  padding: 0 20px;  gap: 20px; }  .site-header .brand {  font-size: 13px;  letter-spacing: .18em; }  .site-header .mobile-menu nav {  padding: 10px 20px 18px;  max-height: calc(100dvh - 64px); }  .site-footer .footer-grid {  grid-template-columns: repeat(3,minmax(0,1fr));  gap: 24px 18px;  padding: 30px 0; }  .site-footer .footer-grid>div:first-child {  grid-column: 1/-1;  margin-bottom: 10px; }  .site-footer .footer-line {  font-size: 26px; }  .site-footer .footer-col a {  font-size: 12px;  overflow-wrap: anywhere; }  .site-footer .footer-meta {  display: grid;  gap: 8px;  font-size: 10.5px; } } @media (max-width:380px){ .site-footer .footer-grid {  grid-template-columns: 1fr 1fr; }  .site-footer .footer-grid>div:first-child {  grid-column: 1/-1; } } @media (prefers-reduced-motion:reduce){ .site-header *, .site-footer * {  transition: none!important;  animation: none!important; } } /* Product pages live under Platform; the primary navigation stays compact. */.site-header .product-menu { position: relative; margin: 0; } .site-header .product-menu summary { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font: inherit; padding: 15px 0; color: var(--ink); } .site-header .product-menu summary::-webkit-details-marker { display: none; } .site-header .product-menu summary .nav-chev { display: block; width: 12px; height: 12px; color: #6FA84C; transition: transform .3s ease; } .site-header .product-menu summary svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .site-header .product-menu[open] .nav-chev { transform: rotate(180deg); } .site-header .product-menu.is-current summary { color: #506b3d; } .site-header .product-dropdown { position: absolute; top: 100%; left: -22px; width: 280px; padding: 11px 19px 16px; background: var(--paper); border: 1px solid var(--rule); border-radius: 5px; box-shadow: 0 14px 30px rgba(30,26,21,.06); font-size: 13px; font-weight: 500; line-height: 1.4; text-transform: none; letter-spacing: -.01em; white-space: normal; } .site-header .primary-nav .product-dropdown a { display: block; padding: 13px 4px; border-bottom: 1px solid var(--rule); } .site-header .primary-nav .product-dropdown a:last-child { border-bottom: 0; padding-bottom: 4px; } .site-header .product-dropdown small { display: block; color: var(--muted); font-size: 10px; line-height: 1.5; margin-top: 4px; font-weight: 400; } .site-header .mobile-menu nav .mobile-product-link { padding-left: 24px; font-size: 12px; border-top: 0; color: #526548; } @media (max-width:760px){ .site-footer .footer-grid {  grid-template-columns: 1fr 1fr; }  .site-footer .footer-col:first-of-type {  grid-column: 1/-1; }  .site-footer .footer-col a {  font-size: 12px; } }