/* enterprise-landing.css — the public Globally page (#/business) and its one
 * product demo.
 *
 * COLOUR RHYTHM (deliberate, and the whole point of this rewrite):
 *
 *   header + hero ........ cream
 *   what Globally does ... white
 *   the product demo ..... pastel blue
 *   why Globally ......... sand
 *   final CTA ............ pastel blue
 *   closing band ......... cream
 *
 * Deep navy is TYPOGRAPHY, borders and small controls — never a full-bleed
 * panel. Orange is reserved for funding and the primary action. Teal marks a
 * change in the world. Blue marks Mira. Nothing else gets a colour.
 *
 * Cards are only for product UI. Marketing copy sits on the canvas with no box
 * around it, which is what makes the product feel like the important thing.
 *
 * Scoped under .gl-page (marketing) and .gd (the demo canvas).
 */

.gl-page {
  /* ── A calm, airy pastel system ─────────────────────────────────────────
     A warm off-white base and a small set of very light pastels. Nothing here
     is a saturated slab: each pastel is a hue laid over warm paper, so the
     page reads as one soft, elegant sheet of colour that shifts gently as you
     scroll. The saturated brand values (marks, CTA, headline) live lower and
     are used only as small accents. */
  --cream:  #FBF8F1;   /* warm off-white — the base paper */
  --paper:  #FDFCF8;   /* the lightest section: warm white, not stark #fff */
  --white:  #FFFFFF;   /* reserved for product cards, so they lift off paper */

  /* Section pastels — light (L ≈ 96%), warm, and deliberately close to each
     other so transitions feel like a wash moving, not blocks changing. */
  --blue-p:   #EFF4FB;   /* pale pastel blue  — Mira / the product demo */
  --blue-pp:  #F4F8FD;   /* a fainter blue    — the final CTA */
  --teal-p:   #EDF6F1;   /* pale pastel teal  — signals */
  --peach:    #FBF2EA;   /* pale pastel peach — funding warmth */
  --sand:     #F7F1E6;   /* pale pastel sand  — "why Globally" */
  --lavender: #F3F0FA;   /* pale lavender     — used sparingly, one moment */

  /* Small-component tints — pills and chips only, never a section. */
  --blue-t: #EAF1FC;
  --teal-t: #E7F3EE;
  --peach-t:#FAEBDD;

  /* Accents. Orange is the CTA and funding accent; blue = Mira, teal = signals.
     Softened from the previous pass so a marker or pill reads as a gentle
     accent rather than a hard dot of colour. */
  --orange: #FF5A1F;   /* the one strong accent — CTA + funding */
  --orange-soft: #F5915F;
  --blue:   #5C8DEF;
  --teal:   #3BAE99;
  --mint:   #C6DED5;   /* pale washed mint — the curved phrase, signal tint */
  --mint-t: #EDF5F1;
  --powder: #BFD0EA;   /* pale powder blue — Mira briefing tint, "next." */
  --powder-t: #EAF1FB;

  --navy:   #09213D;   /* deep navy text */
  --body:   #526174;
  --muted:  #7B8A99;
  --line:   rgba(23, 41, 61, .10);

  /* Headline / on-cream glyph colours: the three brand hues softened for text,
     tasteful rather than loud, still legible on warm paper. */
  --orange-ink: #C6592F;
  --teal-ink:   #1C7E6A;
  --blue-ink:   #3F63B0;

  /* Section transitions are flat now — the design energy lives in the hero,
     not in a divider. Kept as a token so the per-section top padding math
     below still resolves; set to 0 so there is no dome and no overlap. */
  --arc: 0px;

  background: var(--cream);
  color: var(--navy);
  font-family: Figtree, Inter, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.gl-in { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* Sections take their natural height. They are deliberately NOT equal: the
   page should read like a spread, not like a stack of identical panels. The
   demo is the tallest thing on the page and the final CTA is the shortest,
   and each section's padding is set on its own block below. */
.gl-sec { padding: 96px 0; position: relative; }
.gl-sec--white { background: var(--paper); }
.gl-sec--blue  { background: var(--blue-p); }
.gl-sec--sand  { background: var(--sand); }
.gl-sec--cream { background: var(--cream); }

/* ── Curved, flowing section transitions ─────────────────────────────────
   The page is a stack of soft sheets. Each colour sheet rises into the one
   above with a wide radius and a slight overlap, so a transition reads as a
   gentle sweep of colour rather than a hard rectangular seam. The overlap is
   what reveals the previous sheet inside the curve; the per-section padding
   below already carries the extra top room so nothing is pulled tight. */
.gl-sec--white,
.gl-sec--blue,
.gl-sec--sand,
.gl-final,
.gl-closing {
  /* A full-width elliptical dome, not just rounded corners: the horizontal
     radius is 50% so both top corners meet at centre, making the whole top
     edge one shallow sweeping arc that rises into the section above. */
  border-top-left-radius: 50% var(--arc);
  border-top-right-radius: 50% var(--arc);
  margin-top: calc(var(--arc) * -1);
  z-index: 1;
}
/* A whisper of shadow along the curved lip lifts each sheet a hair off the one
   beneath — the seam catches light instead of being drawn with a line. */
.gl-sec--white,
.gl-sec--blue,
.gl-sec--sand,
.gl-final,
.gl-closing { box-shadow: 0 -1px 0 rgba(255, 255, 255, .5), 0 -14px 30px rgba(23, 41, 61, .025); }

/* ── Large, soft background arcs ──────────────────────────────────────────
   A single wide radial bloom sits low in each sheet, the brand hue at a few
   percent opacity. It is never a shape you notice — it is the reason a section
   feels lit and airy rather than a flat fill. Contained with inset:0 so it can
   never overflow a section or clip a peeking component. */
.gl-in { position: relative; z-index: 1; }
.gl-sec::after,
.gl-final::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; pointer-events: none;
}
.gl-sec--white::after {
  background:
    radial-gradient(72% 60% at 88% 8%,  rgba(251, 106, 50, .05), transparent 62%),
    radial-gradient(64% 56% at 6% 96%,  rgba(92, 141, 239, .05), transparent 60%);
}
.gl-sec--blue::after {
  background: radial-gradient(78% 70% at 82% 6%, rgba(92, 141, 239, .10), transparent 64%);
}
.gl-sec--sand::after {
  background: radial-gradient(70% 66% at 12% 4%, rgba(251, 106, 50, .05), transparent 62%);
}
.gl-final::after {
  background: radial-gradient(60% 80% at 50% -6%, rgba(126, 104, 214, .08), transparent 66%);
}

/* ── Type ──────────────────────────────────────────────────────────────── */
.gl-eyebrow {
  font-size: 11.5px; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 22px;
}
.gl-h1 {
  font-size: clamp(32px, 3.2vw, 46px); line-height: 1.1; letter-spacing: -.024em;
  font-weight: 700; color: var(--navy); margin: 0 0 24px;
}
/* Hero headline colours are set on the .gl-h1-* classes in the HERO block
   below (orange "Find funding.", navy "Know what to do", one powder-blue
   word). "next." stays inline so it reads as part of the navy line. */
.gl-h1-fund, .gl-h1-know { display: block; }
.gl-h1-next { display: inline; }

/* Section headings are deliberately much smaller than the hero — only one
   thing on this page behaves like a hero. */
.gl-h2 {
  font-size: clamp(25px, 2.5vw, 34px); line-height: 1.2; letter-spacing: -.02em;
  font-weight: 700; color: var(--navy); margin: 0 0 16px; max-width: 20ch;
}
.gl-h2--wide { max-width: 24ch; margin-bottom: 52px; }
.gl-h2 span { display: block; }
/* One intentional serif moment — the "Everything your team needs" heading,
   echoing the Globally wordmark. Serif is used nowhere else on this page. */
.gl-h2--serif {
  font-family: "Source Serif 4", "Newsreader", Georgia, serif;
  font-weight: 600; font-size: clamp(30px, 3vw, 42px); letter-spacing: -.01em;
  max-width: none; margin-bottom: 44px;
}

.gl-lede { font-size: 16.5px; line-height: 1.6; color: var(--body); margin: 0; max-width: 56ch; }
.gl-sec-hd { margin-bottom: 48px; }

/* ── Buttons + links ───────────────────────────────────────────────────── */
.gl-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.gl-btn {
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  padding: 13px 27px; border-radius: 12px; border: 1px solid transparent;
  transition: background .16s, border-color .16s, color .16s, transform .16s;
}
.gl-btn--primary { background: var(--orange); color: #fff; }
.gl-btn--primary:hover { background: #EE5C28; transform: translateY(-1px); }
.gl-btn--ghost { background: transparent; color: var(--navy); border-color: rgba(9, 33, 61, .24); }
.gl-btn--ghost:hover { border-color: var(--navy); background: rgba(9, 33, 61, .04); }

.gl-textlink {
  display: inline-block; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--navy); background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: none; border-bottom: 1px solid rgba(9, 33, 61, .28);
  margin-top: 22px;
}
.gl-textlink:hover { color: var(--orange); border-bottom-color: var(--orange); }
.gl-links { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 26px; }
.gl-links .gl-textlink { margin-top: 0; }

/* The demo is the centrepiece and the tallest section on the page. */
#see-it-work { padding: calc(108px + var(--arc)) 0 116px; }

/* ══ The world map ═══════════════════════════════════════════════════════ */
.gw { display: block; width: 100%; height: auto; overflow: visible; }
.gw-land path {
  fill: rgba(9, 33, 61, .075);
  stroke: rgba(9, 33, 61, .2);
  stroke-width: .75px;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}
.gw-halo { fill: #FBF8F1; opacity: .9; }
.gw-m--quiet   .gw-halo { opacity: .55; }
.gw-m--quiet   .gw-dot { fill: rgba(23, 41, 61, .3); }
.gw-m--home    .gw-dot { fill: var(--blue); }
.gw-m--funding .gw-dot { fill: var(--orange); }
.gw-m--signal  .gw-dot { fill: var(--teal); }
.gw-ring {
  fill: none; stroke-width: 1.1px; vector-effect: non-scaling-stroke;
  transform-box: fill-box; transform-origin: center;
  animation: gw-pulse 3.2s ease-out infinite;
}
.gw-m--funding .gw-ring { stroke: var(--orange); }
.gw-m--signal  .gw-ring { stroke: var(--teal); }
.gw-m--home    .gw-ring { stroke: var(--blue); }
@keyframes gw-pulse {
  0%   { transform: scale(1);   opacity: .8; }
  70%  { transform: scale(3.6); opacity: 0; }
  100% { transform: scale(3.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gw-ring { animation: none; opacity: .4; transform: scale(2.2); }
}

/* ══ 1. HERO ═════════════════════════════════════════════════════════════ */
.gl-hero {
  background: #FCFAF7; padding: 32px 0 96px;
  position: relative; overflow: hidden;
}
/* Warm bloom + a cool one, and a faint dotted grid tucked lower-left. */
.gl-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 48% at 12% 24%, rgba(255, 90, 31, .045), transparent 60%),
    radial-gradient(46% 54% at 90% 86%, rgba(191, 208, 234, .12), transparent 62%);
}
.gl-hero::after {
  content: ''; position: absolute; left: 1.5%; bottom: 8%; width: 150px; height: 116px; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(9, 33, 61, .16) 1px, transparent 1.4px);
  background-size: 15px 15px; opacity: .45;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 38%, transparent 74%);
  mask-image: radial-gradient(ellipse at center, #000 38%, transparent 74%);
}
.gl-hero .gl-in { position: relative; z-index: 1; max-width: 1280px; }
.gl-hero-in {
  display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 56%);
  gap: 32px; align-items: start; min-height: 588px; padding-top: 44px;
}

/* ── Left: curved phrase + headline ─────────────────────────────────────── */
.gl-hero-copy { position: relative; padding-top: 118px; padding-left: 20px; }
/* "See what's changing." set on a broad bracket path — larger, and bending
   through a wide arc up the left of the headline and across its top rather than
   reading as a near-vertical line. Pale washed mint, sitting behind the words. */
.gl-curve {
  position: absolute; top: -8px; left: -104px;
  width: 500px; height: 492px; overflow: visible; pointer-events: none; z-index: 0;
}
.gl-curve-t {
  font-family: Figtree, Inter, sans-serif; font-weight: 600; font-size: 47px;
  letter-spacing: .002em; fill: var(--mint);
}
.gl-curve-fallback { display: none; }

/* Discreet "illustrative example" note at the foot of the desk. */
.gl-desk-note {
  position: absolute; bottom: -6px; right: 6px; margin: 0; z-index: 6;
  font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); opacity: .8;
}

.gl-h1 {
  position: relative; z-index: 1;
  font-size: clamp(46px, 4.6vw, 66px); line-height: 1.0; letter-spacing: -.032em;
  font-weight: 800; margin: 0 0 26px;
}
.gl-h1-fund { display: block; color: var(--orange); }
.gl-h1-know { display: block; color: var(--navy); }
.gl-h1-next { color: #9BBBE6; }   /* pale powder-blue accent on one word only */

.gl-hero-sub {
  position: relative; z-index: 1;
  font-size: 16px; line-height: 1.62; color: var(--body); margin: 0; max-width: 410px;
}
.gl-hero .gl-ctas { position: relative; z-index: 1; margin-top: 32px; }

/* ── Right: the layered intelligence desk ───────────────────────────────── */
.gl-desk { position: relative; min-height: 604px; }
/* The flowing line threading the four papers, with two small orange nodes. */
.gl-desk-link { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.gl-desk-link-p { fill: none; stroke: rgba(120, 170, 155, .45); stroke-width: 1.5; stroke-linecap: round; }
.gl-desk-node { fill: var(--orange); }

.gl-paper {
  position: absolute; background: #fff; border: 1px solid var(--line);
  border-radius: 18px; padding: 18px 20px;
  box-shadow: 0 24px 50px rgba(9, 33, 61, .11), 0 2px 6px rgba(9, 33, 61, .04);
}
.gl-paper-k { font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.gl-paper-k--fund { color: var(--orange); }
.gl-paper-k--sig  { color: #3E8E7B; }
.gl-paper-k--mira { color: #3F63B0; }
.gl-paper-t  { font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--navy); margin: 0 0 5px; }
.gl-paper-sub { font-size: 13px; color: var(--muted); margin: 0; }
.gl-paper-t2 { font-size: 15px; font-weight: 700; line-height: 1.34; color: var(--navy); margin: 0 0 6px; }
.gl-paper-meta { font-size: 12px; color: var(--muted); margin: 0; }

/* Card positions — four papers filling the right, each turned a hair off-true. */
.gl-paper--fund { top: 0; left: 6px; width: 344px; z-index: 3; transform: rotate(-1deg); }
.gl-paper--sig  { top: 60px; right: 0; width: 258px; z-index: 2; background: var(--mint-t); transform: rotate(1.6deg); }
.gl-paper--mira { top: 316px; left: 0; width: 356px; z-index: 4; background: var(--powder-t); transform: rotate(-1.1deg); }
.gl-paper--attn { top: 392px; right: 0; width: 250px; z-index: 5; transform: rotate(1.4deg); }

/* Bookmark tab on the funding paper. */
.gl-paper-bk {
  position: absolute; top: -4px; right: 24px; width: 16px; height: 28px;
  background: var(--orange); border-radius: 2px 2px 0 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%);
}

/* Funding fields row. */
.gl-paper-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.gl-paper-field dt { font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.gl-paper-field dd { font-size: 12.5px; font-weight: 650; color: var(--navy); margin: 0; }

/* Signal sparkline + tags. */
.gl-spark { display: block; width: 130px; height: 26px; margin: 12px 0 12px; }
.gl-spark polyline { fill: none; stroke: #6BB29E; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gl-paper-tags { display: flex; gap: 7px; }
.gl-paper-tags span { font-size: 10.5px; font-weight: 600; color: #3E8E7B; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }

/* Mira briefing: a layered sheet peeking underneath, and a numbered list. */
.gl-paper--mira::before {
  content: ''; position: absolute; inset: 11px -10px -12px 12px; z-index: -1;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 18px 34px rgba(9, 33, 61, .06);
}
.gl-paper-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.gl-paper-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 13px; line-height: 1.35; color: var(--navy); }
.gl-paper-n { font-size: 10.5px; font-weight: 800; color: #3F63B0; padding-top: 1px; flex: none; }

/* What deserves attention: two-line rows with an impact note and a side tab. */
.gl-paper-attn { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.gl-attn-row { display: flex; gap: 10px; align-items: flex-start; }
.gl-attn-ic { width: 9px; height: 9px; border-radius: 2px; margin-top: 3px; flex: none; }
.gl-attn-ic--f { background: var(--orange); }
.gl-attn-ic--s { background: #6BB29E; }
.gl-attn-ic--d { background: #8AA9D8; }
.gl-attn-tx b { display: block; font-size: 12.5px; font-weight: 650; color: var(--navy); line-height: 1.3; }
.gl-attn-tx em { font-style: normal; font-size: 10.5px; color: var(--muted); }
.gl-paper-sidetab {
  position: absolute; right: -10px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 46px; background: #fff; border: 1px solid var(--line); border-left: 0;
  border-radius: 0 9px 9px 0; box-shadow: 3px 0 8px rgba(9, 33, 61, .05);
}
.gl-paper-sidetab::after {
  content: ''; position: absolute; left: 5px; top: 50%; width: 6px; height: 6px;
  border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted);
  transform: translateY(-50%) rotate(-45deg);
}

/* Folded corners — a turned-up paper corner: a light underside triangle with a
   soft shadow where it lifts, not a flat triangle glued on. */
.gl-fold-br { border-bottom-right-radius: 2px; }
.gl-fold-br::after {
  content: ''; position: absolute; right: 0; bottom: 0; width: 0; height: 0;
  border-style: solid; border-width: 0 0 26px 26px;
  border-color: transparent transparent rgba(255, 255, 255, .96) transparent;
  filter: drop-shadow(-2px -2px 2px rgba(9, 33, 61, .12));
}
.gl-fold-bl { border-bottom-left-radius: 2px; }
.gl-fold-bl::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 0;
  border-style: solid; border-width: 26px 0 0 26px;
  border-color: rgba(255, 255, 255, .96) transparent transparent transparent;
  filter: drop-shadow(2px -2px 2px rgba(9, 33, 61, .1));
}

/* ══ 2. WHAT GLOBALLY DOES ═══════════════════════════════════════════════ */
/* This section is shorter than the ones around it — three lines of text and
   one small interaction, nothing more. */
.gl-sec--white { padding: calc(84px + var(--arc)) 0 92px; }

/* Three soft pastel capability cards with a tinted icon badge, a link, and a
   little shape personality each (a layered lower corner, an offset, a fold) so
   they never read as three identical tiles. */
.gl-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; margin-top: 12px; }
.gl-three-i {
  position: relative; padding: 26px 26px 24px; border-radius: 20px;
  border: 1px solid var(--line);
  transition: transform .2s ease, box-shadow .2s ease;
}
.gl-three-i--find { background: var(--peach); }
.gl-three-i--see  { background: var(--mint-t); }
.gl-three-i--know { background: var(--powder-t); }
/* Personality: funding sits level, signals drops a touch, briefings drops more
   and folds its lower-right corner. */
.gl-three-i--see  { margin-top: 20px; }
.gl-three-i--know { margin-top: 40px; border-bottom-right-radius: 3px; }
.gl-three-i--know::after {
  content: ''; position: absolute; right: 0; bottom: 0; width: 0; height: 0;
  border-style: solid; border-width: 0 0 28px 28px;
  border-color: transparent transparent rgba(9, 33, 61, .06) transparent;
  border-bottom-right-radius: 3px;
}
.gl-three-i:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(9, 33, 61, .07); }

/* Icon badge, tinted to the card's hue. */
.gl-three-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px; margin-bottom: 16px;
  background: #fff; border: 1px solid var(--line);
}
.gl-three-i--find .gl-three-ic { color: var(--orange); }
.gl-three-i--see  .gl-three-ic { color: #3E8E7B; }
.gl-three-i--know .gl-three-ic { color: #3F63B0; }

.gl-three-i h3 { font-size: 18px; font-weight: 700; color: var(--navy); margin: 0 0 9px; letter-spacing: -.01em; }
.gl-three-i p { font-size: 14.5px; line-height: 1.56; color: var(--body); margin: 0 0 16px; }
.gl-three-link {
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  background: none; border: 0; padding: 0; color: var(--navy);
  transition: color .15s, gap .15s;
}
.gl-three-i--find .gl-three-link { color: var(--orange); }
.gl-three-i--see  .gl-three-link { color: #3E8E7B; }
.gl-three-i--know .gl-three-link { color: #3F63B0; }
.gl-three-link:hover { opacity: .78; }

/* ── INTERACTION 1 — the topic lens ────────────────────────────────────── */
/* A pill row with a panel tucked under it, offset a little and backed by a
   second sheet peeking out at the corner. Picking a pill re-reads the corpus. */
.gl-lens { margin-top: 76px; max-width: 900px; }
.gl-lens-k {
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 14px;
}
.gl-lens-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.gl-pill {
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  color: var(--body); background: #fff; border: 1px solid rgba(9, 33, 61, .14);
  border-radius: 999px; padding: 8px 16px;
  transition: color .16s, border-color .16s, background .16s, transform .16s;
}
.gl-pill:hover { color: var(--navy); border-color: rgba(9, 33, 61, .3); transform: translateY(-1px); }
.gl-pill.is-on { color: #fff; background: var(--navy); border-color: var(--navy); }

.gl-lens-panel {
  position: relative; margin: 28px 0 0; max-width: 640px;
  background: var(--white); border: 1px solid var(--line); border-radius: 18px;
  padding: 28px 26px 24px;
  box-shadow: 0 18px 40px rgba(23, 41, 61, .07);
  animation: gl-lens-in .32s cubic-bezier(.2, .7, .3, 1) both;
}
/* The topic name sits as a tab half outside the top edge — a clean label, not
   a second floating box. */
.gl-lens-tab {
  position: absolute; top: -13px; left: 24px;
  font-size: 12px; font-weight: 700; letter-spacing: .01em; color: var(--navy);
  background: var(--white); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 14px; box-shadow: 0 2px 6px rgba(23, 41, 61, .05);
}
@keyframes gl-lens-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .gl-lens-panel { animation: none; } }

.gl-lens-stats { display: flex; gap: 34px; flex-wrap: wrap; margin-bottom: 16px; }
.gl-lens-stats div { display: flex; align-items: baseline; gap: 7px; }
.gl-lens-stats b { font-size: 25px; font-weight: 700; color: var(--navy); letter-spacing: -.02em; }
.gl-lens-stats div:nth-child(1) b { color: var(--orange-ink); }
.gl-lens-stats span { font-size: 13px; color: var(--muted); }

.gl-lens-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.gl-lens-chips span {
  font-size: 12.5px; color: var(--body); background: #fff;
  border: 1px solid rgba(9, 33, 61, .09); border-radius: 6px; padding: 5px 10px;
}
.gl-lens-chips span.is-more { background: none; border: 0; color: var(--muted); padding-left: 2px; }

.gl-lens-eg {
  margin: 0; padding-top: 14px; border-top: 1px solid rgba(9, 33, 61, .09);
  font-size: 13px; line-height: 1.5;
}
.gl-lens-eg span {
  display: block; font-size: 10px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 5px;
}
.gl-lens-eg b { color: var(--navy); font-weight: 600; }
.gl-lens-eg em { display: block; font-style: normal; color: var(--muted); font-size: 12px; margin-top: 3px; }

/* ══ 4. WHY GLOBALLY ═════════════════════════════════════════════════════ */
.gl-sec--sand { padding: calc(92px + var(--arc)) 0 100px; }
/* The two halves are not equal and not level: the scattered side sits a little
   lower and a little narrower than the connected side, so the composition
   itself carries the argument before a word is read. */
.gl-compare { display: grid; grid-template-columns: .88fr 1.12fr; gap: 64px; align-items: start; }
.gl-compare-side { padding-top: 30px; }
.gl-compare-side--with { padding-top: 0; }
.gl-compare-k {
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 20px;
}
.gl-compare-side--with .gl-compare-k { color: var(--navy); }
.gl-scatter { display: flex; flex-wrap: wrap; gap: 10px; }
.gl-scatter-i {
  font-size: 14px; color: var(--body); background: rgba(255, 255, 255, .72);
  border: 1px dashed rgba(9, 33, 61, .18); border-radius: 8px; padding: 8px 13px;
  /* Intentionally, faintly out of true — five things on a desk, not a grid. */
  transform: rotate(calc((var(--i) - 2) * 1.05deg)) translateY(calc(var(--i) * 1px));
  transition: transform .2s, border-color .2s;
}
.gl-scatter:hover .gl-scatter-i { transform: none; border-color: rgba(9, 33, 61, .12); }
.gl-compare-n { font-size: 13.5px; color: var(--muted); margin: 20px 0 0; line-height: 1.55; }

.gl-flow { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.gl-flow-row { display: flex; gap: 8px; flex-wrap: wrap; }
.gl-flow-i { font-size: 14px; font-weight: 600; border-radius: 7px; padding: 8px 14px; }
.gl-flow-i--fund { background: var(--peach-t); color: var(--orange-ink); }
.gl-flow-i--sig  { background: var(--teal-t); color: var(--teal-ink); }
.gl-flow-i--ctx  { background: var(--blue-t); color: var(--blue-ink); }
.gl-flow-arrow { color: var(--muted); font-size: 15px; margin-left: 22px; }
.gl-flow-mira {
  font-size: 15px; font-weight: 700; color: #fff; background: var(--navy);
  border-radius: 7px; padding: 9px 20px;
}
.gl-flow-out { font-size: 16px; font-weight: 700; color: var(--navy); }

/* ── INTERACTION 3 — the folded briefing ───────────────────────────────── */
/* The diagram used to end on a promise. It now ends on the artefact: a folded
   card the visitor opens, carrying real current developments. The fold is a
   real edge — a second sheet showing above the header, tucked and rotated a
   degree, so the thing reads as folded paper rather than an accordion row. */
.gl-fold { position: relative; width: 100%; max-width: 430px; }
.gl-fold::before {
  content: ''; position: absolute; top: -7px; left: 9px; right: 9px; height: 22px;
  background: #fff; border: 1px solid rgba(9, 33, 61, .1); border-radius: 12px 12px 0 0;
  transform: rotate(-.5deg); transform-origin: left bottom;
  transition: top .28s cubic-bezier(.2, .7, .3, 1), transform .28s;
}
.gl-fold.is-open::before { top: -12px; transform: rotate(-1.1deg); }

.gl-fold-hd {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; align-items: center;
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 15px 17px;
  box-shadow: 0 10px 26px rgba(9, 33, 61, .07);
  transition: box-shadow .2s, transform .2s;
}
.gl-fold-hd:hover { box-shadow: 0 14px 32px rgba(9, 33, 61, .1); transform: translateY(-1px); }
.gl-fold-k {
  grid-column: 1; font-size: 10px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue-ink);
}
.gl-fold-t { grid-column: 1; font-size: 14.5px; font-weight: 650; color: var(--navy); }
.gl-fold-m { grid-column: 1; font-size: 12px; color: var(--muted); }
.gl-fold-x {
  grid-column: 2; grid-row: 1 / span 3; align-self: center;
  font-size: 12px; font-weight: 600; color: var(--muted);
  border: 1px solid rgba(9, 33, 61, .14); border-radius: 999px; padding: 5px 13px;
  white-space: nowrap;
}
.gl-fold-hd:hover .gl-fold-x { color: var(--navy); border-color: rgba(9, 33, 61, .3); }

/* grid-template-rows tweens; height:auto does not. */
.gl-fold-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .34s cubic-bezier(.2, .7, .3, 1);
}
.gl-fold.is-open .gl-fold-body { grid-template-rows: 1fr; }
.gl-fold-inner { overflow: hidden; }
.gl-fold-i {
  display: flex; gap: 12px; padding: 13px 17px;
  background: #fff; border: 1px solid rgba(9, 33, 61, .09); border-top: 0;
  margin: 0 6px;
}
.gl-fold-i:first-child { margin-top: -1px; }
.gl-fold-i:last-child { border-radius: 0 0 12px 12px; margin-bottom: 0; }
.gl-fold-n { font-size: 10.5px; font-weight: 800; color: var(--blue-ink); padding-top: 3px; }
.gl-fold-i h4 { font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--navy); margin: 0 0 4px; }
.gl-fold-i p { font-size: 12px; color: var(--muted); margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .gl-fold-body, .gl-fold::before, .gl-fold-hd { transition: none; }
}

.gl-proof {
  font-size: 14px; line-height: 1.6; color: var(--body); margin: 52px 0 0;
  max-width: 62ch; padding-top: 22px; border-top: 1px solid rgba(9, 33, 61, .13);
}
.gl-proof b { color: var(--navy); font-weight: 700; }

/* ══ 5. FINAL CTA ════════════════════════════════════════════════════════ */
/* The shortest section on the page. It has one job and should not linger. */
.gl-final { padding: calc(76px + var(--arc)) 0 84px; background: var(--lavender); }
.gl-final-in { text-align: center; }
.gl-final .gl-h2 { max-width: none; margin-left: auto; margin-right: auto; }
.gl-final .gl-h2 span:nth-child(2) { color: var(--body); }
.gl-final .gl-lede { margin: 0 auto; }
.gl-final .gl-ctas, .gl-final .gl-links { justify-content: center; }

/* ══ CLOSING BAND ════════════════════════════════════════════════════════ */
/* Quiet on purpose. This is the page's footer business, not a section. */
.gl-closing { padding: calc(88px + var(--arc)) 0 96px; }
.gl-book { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 56px; align-items: start; }
.gl-book-copy h3 { font-size: 23px; font-weight: 700; color: var(--navy); margin: 0 0 12px; letter-spacing: -.015em; }
.gl-book-copy p { font-size: 15px; line-height: 1.6; color: var(--body); margin: 0; max-width: 40ch; }

.gl-pricing { margin-top: 72px; border-top: 1px solid rgba(9, 33, 61, .13); }
.gl-disclose {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: 0; padding: 26px 0; cursor: pointer; font: inherit;
  font-size: 17px; font-weight: 700; color: var(--navy);
}
.gl-disclose-s { font-size: 14px; font-weight: 600; color: var(--muted); }
.gl-disclose:hover .gl-disclose-s { color: var(--orange); }
.gl-pricing-body { padding-bottom: 24px; }
/* The shared pricing module sizes its own heading like a hero. Inside a
   disclosure on this page it must not out-shout the five real sections, so it
   is scaled down here only — the module itself is untouched. */
.gl-pricing-body h2 { font-size: clamp(22px, 2vw, 27px) !important; letter-spacing: -.018em; }
.gl-pricing-body h3 { font-size: 19px; }

/* Form chrome: match the page palette without touching the shared form CSS. */
.gl-page .mbc-submit-btn { background: var(--orange); border-radius: 9px; }
.gl-page .mbc-submit-btn:hover:not(:disabled) { background: #EE5C28; }
.gl-page .mbc-input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255, 90, 31, .16); }
.gl-page .elp-plan-ctx { background: #FFEEE6; border-color: rgba(255, 90, 31, .3); color: #A03B0E; }
.gl-page .mbc-form { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 26px; }
.gl-page .mbc-success { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 34px; }

/* ══════════════════════════════════════════════════════════════════════════
   THE PRODUCT DEMO — one canvas, five stages
   ══════════════════════════════════════════════════════════════════════════ */
.gd {
  max-width: 1200px; margin: 0 auto; background: #fff; border-radius: 22px;
  border: 1px solid rgba(9, 33, 61, .09);
  box-shadow: 0 18px 50px rgba(9, 33, 61, .09);
  overflow: hidden;
  --orange: #FB6A32; --navy: #17293D; --blue: #5C8DEF; --teal: #3BAE99;
  --body: #4B5C6E; --muted: #6E7F90; --line: rgba(9, 33, 61, .1);
  font-family: Figtree, Inter, system-ui, sans-serif; color: var(--navy);
}
.gd-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 18px; border-bottom: 1px solid var(--line); background: #FCFCFB;
}
.gd-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.gd-tab {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--muted);
  background: none; border: 0; border-radius: 7px; padding: 7px 13px; cursor: pointer;
  transition: background .15s, color .15s;
}
.gd-tab:hover { color: var(--navy); background: rgba(9, 33, 61, .05); }
.gd-tab.is-past { color: var(--body); }
.gd-tab.is-on { color: #fff; background: var(--navy); }
.gd-demo-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line); border-radius: 20px; padding: 4px 11px;
  white-space: nowrap;
}
.gd-progress { height: 2px; background: rgba(9, 33, 61, .07); }
.gd-progress i { display: block; height: 100%; background: var(--orange); transition: width .5s ease; }

.gd-body { padding: 26px; min-height: 452px; }
.gd-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; animation: gd-in .45s ease both; }
@keyframes gd-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .gd-stage, .gd-detail { animation: none; } }
.gd-stage--funding { grid-template-columns: 1.05fr 1fr; }
.gd-stage--signals { grid-template-columns: 1.25fr 1fr; align-items: center; }
.gd-stage--mira    { grid-template-columns: .85fr 1.15fr; }
.gd-stage--org     { align-items: center; }
.gd-loading {
  display: flex; align-items: center; justify-content: center; min-height: 400px;
  color: var(--muted); font-size: 14px;
}
.gd-pane { min-width: 0; }
.gd-pane--map { display: flex; flex-direction: column; justify-content: center; gap: 14px; }

.gd-pane-k {
  font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 10px;
}
.gd-pane-h { font-size: 19px; font-weight: 700; line-height: 1.32; color: var(--navy); margin: 0 0 18px; letter-spacing: -.012em; }
.gd-note { font-size: 12.5px; line-height: 1.55; color: var(--muted); margin: 16px 0 0; max-width: 48ch; }
.gd-detail-k {
  font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 18px 0 8px;
}

/* key/value rows — the product's own ei-kv */
.gd-kvs { margin: 0; }
.gd-kv { display: grid; grid-template-columns: 152px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.gd-kv dt { font-size: 12.5px; color: var(--muted); margin: 0; }
.gd-kv dd { font-size: 12.5px; color: var(--navy); margin: 0; font-weight: 550; }
.gd-kv dd.is-muted { color: var(--muted); font-weight: 400; font-style: italic; }

.gd-maplegend { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.gd-lg { font-size: 11.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 7px; }
.gd-lg::before { content: ''; width: 8px; height: 8px; border-radius: 50%; }
.gd-lg--home::before   { background: var(--blue); }
.gd-lg--signal::before { background: var(--teal); }

/* ── Funding stage ─────────────────────────────────────────────────────── */
.gd-funnel { display: flex; flex-direction: column; gap: 2px; margin-bottom: 20px; }
.gd-funnel-step { background: #FAFAF7; border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; }
.gd-funnel-step.is-out { background: #FFF2EB; border-color: rgba(255, 90, 31, .3); }
.gd-funnel-step b { font-size: 19px; font-weight: 700; color: var(--navy); margin-right: 8px; }
.gd-funnel-step.is-out b { color: var(--orange); }
.gd-funnel-step span { font-size: 13px; color: var(--body); }
.gd-funnel-step em { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.gd-funnel-arrow { text-align: center; color: var(--muted); font-size: 13px; line-height: 1; padding: 3px 0; }

.gd-rows { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.gd-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; font: inherit; background: #fff; border: 0;
  border-bottom: 1px solid var(--line); padding: 11px 13px; cursor: pointer;
  transition: background .14s;
}
.gd-row:last-child { border-bottom: 0; }
.gd-row:hover { background: #FBFAF7; }
.gd-row.is-selected { background: #FFF6F1; box-shadow: inset 3px 0 0 var(--orange); }
.gd-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gd-row-title { font-size: 13px; font-weight: 600; color: var(--navy); line-height: 1.35; }
.gd-row-meta { font-size: 11.5px; color: var(--muted); }
.gd-row-reason { font-size: 11.5px; color: #2F6B34; }

.gd-verdict {
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  border-radius: 20px; padding: 4px 10px; align-self: flex-start;
}
.gd-verdict--strong-candidate         { background: #E4F0E4; color: #2F6B34; }
.gd-verdict--worth-reviewing          { background: #F5EDDA; color: #8A5A16; }
.gd-verdict--monitoring               { background: #EEF1F4; color: #55677A; }
.gd-verdict--insufficient-information { background: #EFEAF6; color: #5A3F8A; }
.gd-verdict--probably-not-suitable    { background: #EEF1F4; color: #55677A; }
.gd-verdict--not-eligible             { background: #F6E4DF; color: #9A3B2C; }

.gd-detail { border: 1px solid var(--line); border-radius: 12px; padding: 18px; background: #FDFDFC; animation: gd-in .3s ease both; }
.gd-detail-hd { margin-bottom: 14px; }
.gd-detail-funder { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--orange); margin: 0 0 5px; }
.gd-detail-hd h5 { font-size: 15.5px; font-weight: 700; line-height: 1.35; color: var(--navy); margin: 0 0 10px; }

.gd-dims { display: flex; flex-direction: column; gap: 5px; }
.gd-dim { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 10px; font-size: 12px; line-height: 1.45; }
.gd-dim b { color: var(--muted); font-weight: 600; }
.gd-dim--strong span, .gd-dim--possible span { color: #2F6B34; }
.gd-dim--weak span       { color: #8A5A16; }
.gd-dim--unclear span    { color: var(--muted); }
.gd-dim--ineligible span { color: #9A3B2C; }
.gd-missing { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 14px 0 0; }
.gd-missing b { color: var(--body); }
.gd-source { font-size: 11.5px; color: var(--muted); margin: 10px 0 0; }
.gd-source span { color: var(--body); font-weight: 600; }

/* ── Signals stage ─────────────────────────────────────────────────────── */
.gd-why { font-size: 13.5px; line-height: 1.6; color: var(--body); margin: 0; }

/* ── Mira stage ────────────────────────────────────────────────────────── */
.gd-pane--inputs { display: flex; flex-direction: column; }
.gd-inputs { display: flex; flex-direction: column; gap: 8px; }
.gd-input { display: flex; flex-direction: column; gap: 3px; background: #fff; border: 1px solid var(--line); border-left-width: 3px; border-radius: 9px; padding: 10px 13px; }
.gd-input--funding { border-left-color: var(--orange); }
.gd-input--signal  { border-left-color: var(--teal); }
.gd-input--context { border-left-color: var(--blue); }
.gd-input-k { font-size: 9.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.gd-input-t { font-size: 12.5px; font-weight: 600; color: var(--navy); line-height: 1.35; }
.gd-input-m { font-size: 11.5px; color: var(--muted); }
.gd-converge { display: flex; align-items: center; justify-content: center; margin-top: 26px; }
.gd-converge span { font-size: 13px; font-weight: 700; color: #fff; background: var(--navy); border-radius: 20px; padding: 7px 20px; position: relative; }
.gd-converge span::before { content: '↓'; position: absolute; top: -21px; left: 50%; transform: translateX(-50%); color: var(--muted); font-size: 13px; }

.gd-brief { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.gd-brief-i { display: flex; gap: 12px; padding: 13px 15px; background: #fff; border-bottom: 1px solid var(--line); }
.gd-brief-i:last-child { border-bottom: 0; }
.gd-brief-n { font-size: 11px; font-weight: 800; color: var(--blue); padding-top: 2px; }
.gd-brief-i h5 { font-size: 13.5px; font-weight: 650; line-height: 1.38; color: var(--navy); margin: 0 0 4px; }
.gd-brief-i p { font-size: 12.5px; line-height: 1.5; color: var(--body); margin: 0; }

/* ── Act stage ─────────────────────────────────────────────────────────── */
.gd-act-btn {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; margin-top: 20px;
  background: var(--orange); color: #fff; border: 1px solid var(--orange);
  border-radius: 9px; padding: 11px 22px; transition: background .15s, color .15s;
}
.gd-act-btn:hover { background: #EE5C28; }
.gd-act-btn.is-done { background: #E4F0E4; color: #2F6B34; border-color: #C4DFC4; }
.gd-close { margin: 34px 0 0; font-size: 17px; font-weight: 700; line-height: 1.4; letter-spacing: -.012em; }
.gd-close span { display: block; }
.gd-close span:nth-child(1) { color: var(--orange); }
.gd-close span:nth-child(2) { color: var(--teal); }
.gd-close span:nth-child(3) { color: var(--navy); }
.gd-pane--pursuit { border: 1px solid var(--line); border-radius: 12px; padding: 18px; background: #FDFDFC; }
.gd-pursuit-hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gd-state { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; background: #EEF1F4; color: #55677A; border-radius: 5px; padding: 5px 10px; }
.gd-state-src { font-size: 11px; color: var(--muted); }
.gd-nba { font-size: 13px; line-height: 1.5; color: var(--navy); margin: 0; background: #FFF6F1; border-left: 3px solid var(--orange); border-radius: 0 8px 8px 0; padding: 11px 14px; }
.gd-ready { display: flex; flex-direction: column; gap: 7px; }
.gd-ready-i { display: grid; grid-template-columns: 10px 168px minmax(0, 1fr); gap: 9px; align-items: baseline; font-size: 12px; line-height: 1.45; }
.gd-ready-i b { color: var(--navy); font-weight: 600; }
.gd-ready-i span:last-child { color: var(--muted); }
.gd-ready-dot { width: 8px; height: 8px; border-radius: 50%; align-self: center; }
.gd-ready-dot--verified { background: #4E9B57; }
.gd-ready-dot--unclear  { background: #D8B24A; }
.gd-ready-dot--missing  { background: #C4695B; }

/* ══ RESPONSIVE ══════════════════════════════════════════════════════════ */
/* The hero drops to one column earlier than the rest of the page. Sharing a
   row below ~1180px would leave the map narrower than it was before this pass;
   stacked, it takes the full measure and stays the largest thing on screen. */
@media (max-width: 1180px) {
  /* Below the wide breakpoint the hero stacks: copy first, then the desk as a
     clean vertical run of papers. The curved phrase stays — the stacked column
     is full width, so it still has room to frame the headline. */
  .gl-hero-in { grid-template-columns: 1fr; gap: 40px; }
  /* Indent the copy so the curve's vertical part sits in a left gutter rather
     than off-screen or over the headline letters. */
  .gl-hero-copy { padding-top: 96px; padding-left: 52px; }
  .gl-curve { width: 440px; height: 400px; left: -30px; top: -2px; }
  .gl-curve-t { font-size: 40px; }
  .gl-desk { min-height: 0; max-width: 460px; }
  .gl-desk-link { display: none; }
  .gl-paper { position: static; width: auto; transform: none; margin: 0 0 16px; }
  .gl-paper--mira::before { display: none; }
  .gl-fold-br::after, .gl-fold-bl::after { display: none; }
  .gl-desk-note { position: static; text-align: right; margin: 4px 0 0; }
}

@media (max-width: 640px) {
  /* Mobile keeps a shallower, smaller curve arcing across the upper-left of the
     headline — the treatment survives, just quieter and in a tighter gutter. */
  .gl-hero-copy { padding-top: 82px; padding-left: 34px; }
  .gl-curve { width: 300px; height: 280px; left: -14px; top: -4px; }
  .gl-curve-t { font-size: 42px; }
}

@media (max-width: 1080px) {
  .gl-card { width: 232px; }
  .gl-card--mira { width: 256px; margin-left: -128px; }
  .gl-compare { gap: 40px; }
  .gd-stage--signals { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  /* A smaller curve on tablet, and top padding that keeps the arc's overlap
     room so a section never creeps under the one above it. */
  .gl-page { --arc: 0px; }
  .gl-sec, .gl-final { padding: calc(58px + var(--arc)) 0 72px; }
  .gl-hero { padding: 52px 0 84px; }
  .gl-in { padding: 0 24px; }
  .gl-three { grid-template-columns: 1fr; gap: 30px; }
  .gl-compare { grid-template-columns: 1fr; }
  .gl-book { grid-template-columns: 1fr; gap: 30px; }
  /* Tablet keeps the whole story at lower density: the map stays, and the
     detail panel stacks under the list rather than shrinking to nothing. */
  .gd-stage, .gd-stage--funding, .gd-stage--mira { grid-template-columns: 1fr; gap: 22px; }
  .gd-body { min-height: 0; }
}

@media (max-width: 900px) {
  .gl-three-i:nth-child(2), .gl-three-i:nth-child(3) { margin-top: 0; }
  .gl-compare-side { padding-top: 0; }
  .gl-lens { margin-top: 52px; }
  .gl-lens-panel { margin-left: 0; }
  .gl-fold { max-width: none; }
}

@media (max-width: 640px) {
  .gl-in { padding: 0 20px; }
  .gl-lens-panel { padding: 24px 18px 20px; }
  .gl-lens-stats { gap: 20px; }
  .gl-lens-stats b { font-size: 21px; }
  .gl-fold-hd { grid-template-columns: 1fr; }
  .gl-fold-x { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 8px; }
  /* Phone: a gentler curve still, with top room preserved. */
  .gl-page { --arc: 0px; }
  .gl-sec, .gl-final, .gl-closing { padding: calc(48px + var(--arc)) 0 58px; }
  .gl-hero { padding: 36px 0 64px; }
  .gl-h2--wide { margin-bottom: 34px; }
  /* The hero cards stop floating and become a short stack under the map — a
     shrunken desktop dashboard would read as nothing at all. */
  /* Cards are in normal flow here, so nothing can collapse behind them and
     the reserved height would only manufacture a gap. */
  .gl-herovis { padding: 12px 0 0; min-height: 0; }
  .gl-card { position: static; width: auto; margin-top: 10px; animation: none; }
  .gl-card--mira { width: auto; margin-left: 0; }
  /* Once the cards are a stack, curves between them would describe a layout
     that no longer exists. HeroVisual stops measuring at this width too. */
  .gl-herolink { display: none; }
  .gd-body { padding: 16px; }
  .gd-bar { padding: 11px 12px; flex-direction: column; align-items: flex-start; }
  .gd-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .gd-tabs::-webkit-scrollbar { display: none; }
  .gd-tab { padding: 7px 11px; font-size: 12.5px; white-space: nowrap; }
  .gd-kv { grid-template-columns: 1fr; gap: 2px; }
  .gd-dim { grid-template-columns: 1fr; gap: 1px; }
  .gd-ready-i { grid-template-columns: 10px minmax(0, 1fr); }
  .gd-ready-i span:last-child { grid-column: 2; }
  .gl-flow-arrow { margin-left: 16px; }
}