:root{
    --ink:#022E31;
    --ink-deep:#0F1E1E;
    --mint:#04D4A9;
    --mint-bright:#7CFFE3;
    --teal:#016B5E;
    --paper:#0B2321;
    --bg:#FFFFFF;
    --muted:#5B6B6A;
    --card:#FFFFFF;
    --card-line:#C1CDC8;
    --dark:#07211D;
    --dark-2:#0E2B25;
    --on-dark:#F4F8F6;
    --on-dark-muted:#9FB4AE;
    --solution-bg:#EAF7F0;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  html,body{min-height:100%;}
  body{
    background:var(--bg);
    color:var(--paper);
    font-family:'IBM Plex Sans', Arial, sans-serif;
    min-height:100%;
    display:flex;
    flex-direction:column;
  }
  a{color:inherit;}
  img{max-width:100%;}

  .site-header-sticky{
    --paper:#F7F8F4;
    --muted:#9FB4AE;
    position:sticky;
    top:0;
    z-index:50;
    background:var(--dark);
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:18px 6vw;
    flex-shrink:0;
  }
  .brand{
    display:flex;
    align-items:center;
    flex-shrink:0;
  }
  .brand img{
    height:58px;
    width:auto;
    display:block;
  }
  .nav-cta-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
    padding:11px 20px;
    font-size:14px;
  }

  /* --- Shared button system (used in hero, nav, product, closing CTA) --- */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    text-decoration:none;
    font-family:inherit;
    font-weight:600;
    font-size:15px;
    line-height:1;
    padding:14px 26px;
    border-radius:999px;
    border:1px solid transparent;
    cursor:pointer;
    transition:transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    white-space:nowrap;
  }
  .btn svg{width:17px; height:17px; flex-shrink:0;}
  .btn-primary{
    background:linear-gradient(100deg, var(--mint), var(--mint-bright));
    color:var(--ink-deep);
    box-shadow:0 10px 26px rgba(4,212,169,0.3);
  }
  .btn-primary:hover{
    background:linear-gradient(100deg, var(--mint-bright), var(--mint));
    transform:translateY(-2px);
    box-shadow:0 14px 32px rgba(4,212,169,0.4);
  }
  .btn-lg{padding:18px 34px; font-size:16.5px;}
  .btn-lg svg{width:19px; height:19px;}
  .btn-ghost-dark{
    background:rgba(247,248,244,0.06);
    border-color:rgba(159,180,174,0.4);
    color:var(--on-dark);
  }
  .btn-ghost-dark:hover{
    border-color:var(--mint);
    background:rgba(4,212,169,0.1);
    transform:translateY(-2px);
  }
  .btn-ghost-dark svg{color:var(--mint);}
  .play-dot{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px; height:22px;
    border-radius:50%;
    background:rgba(4,212,169,0.18);
    flex-shrink:0;
  }
  .play-dot svg{width:9px; height:9px; margin-left:1px;}

  /* --- Hero --- */
  .hero-section{
    position:relative;
    background:var(--dark);
    overflow:hidden;
    isolation:isolate;
  }
  .hero-illustration{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:0;
  }
  .hero-illustration svg,
  .hero-illustration img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 40%;
  }
  .hero-scrim{
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(100deg, var(--dark) 0%, rgba(7,33,29,0.94) 30%, rgba(7,33,29,0.55) 58%, rgba(7,33,29,0.18) 100%);
  }
  .hero-inner{
    position:relative;
    z-index:2;
    max-width:1280px;
    margin:0 auto;
    padding:96px clamp(24px, 6vw, 96px) 64px;
  }
  .hero-content{
    max-width:600px;
  }
  .eyebrow{
    font-size:13.5px;
    font-weight:700;
    letter-spacing:2.6px;
    color:var(--mint);
    text-transform:uppercase;
    margin-bottom:18px;
  }
  .eyebrow-on-light{color:#016B5E;}
  .eyebrow-badged{display:inline-flex; align-items:center; gap:8px;}
  .gl-badge{width:18px; height:18px; border-radius:5px; display:block; flex-shrink:0;}
  h1{
    font-family:'EB Garamond', Georgia, serif;
    font-weight:600;
    font-size:clamp(34px, 4.6vw, 54px);
    line-height:1.1;
    color:var(--on-dark);
    margin-bottom:20px;
    letter-spacing:0.2px;
  }
  h1 .highlight{
    color:var(--mint);
  }
  /* Earlier fix: longer "Powered by Purpose-Built AI." phrase was wrapping
     mid-line inside the 560px hero text column at common desktop widths.
     Also applied to the About page's own <h1>, which has the
     identical phrase at the same generic h1 size and was wrapping there
     too. Still only for a large h1-scale instance of this phrase --
     .hero-content/.hero-text-col and every other page stay untouched. */
  .hero-highlight-nowrap{
    display:inline-block;
    white-space:nowrap;
    font-size:clamp(20px, 4vw, 42px);
  }

  /* Generic nowrap utility, added per Sultan ("going forward,
     don't repeat this!") after fixing several one-off orphaned-word /
     line-wrap bugs individually. Wrap any short phrase at risk of
     wrapping awkwardly -- a lone trailing word orphaning onto its own
     line, or a branded phrase splitting mid-line -- in
     <span class="no-wrap">...</span> instead of writing a new one-off
     rule each time. Safe at body-text sizes; for a large h1-scale phrase
     that needs its font-size reduced to fit on one line, use
     .hero-highlight-nowrap above instead. */
  .no-wrap{
    white-space:nowrap;
  }
  .hero-sub{
    font-size:17px;
    line-height:1.65;
    color:var(--on-dark-muted);
    max-width:480px;
    margin-bottom:38px;
  }
  .hero-actions{
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
  }
  .hero-secondary{
    font-size:19px;
    font-weight:600;
    color:var(--mint-bright);
    line-height:1.4;
    margin-bottom:14px;
    max-width:520px;
  }
  .hero-tagline{
    margin-top:18px;
    font-size:13px;
    color:var(--on-dark-muted);
    letter-spacing:0.3px;
  }

  /* --- Homepage hero: unshaded banner image overlay (v2.13.2+), text legibility (v2.13.3) --- */
  .hero-section-noscrim h1,
  .hero-section-noscrim .hero-sub,
  .hero-section-noscrim .hero-tagline{
    text-shadow:0 2px 6px rgba(0,0,0,0.6), 0 1px 16px rgba(0,0,0,0.55);
  }
  .hero-section-noscrim h1,
  .hero-section-noscrim .hero-sub,
  .hero-section-noscrim .hero-tagline,
  .hero-section-noscrim .eyebrow{
    color:#D9D9D9;
  }
  .hero-section-noscrim .hero-tagline{
    font-size:16px;
  }
  .hero-section-noscrim .btn-ghost-dark{
    background:rgba(4,212,169,0.24);
    border-color:rgba(4,212,169,0.6);
  }
  .hero-section-noscrim .btn-ghost-dark:hover{
    background:rgba(4,212,169,0.36);
    border-color:var(--mint);
  }

  /* --- Homepage / Grid Intelligence hero (v2.13.9): banner shown uncropped
     at full width/resolution above the fold; text + actions moved into normal
     document flow below the image instead of overlaid on top of it --- */
  .hero-stacked{
    min-height:0;
  }
  /* v2.13.13: Sultan rejected v2.13.12's edge-to-edge crop once he saw it
     live — resizing the browser visibly cut the photo. "The image should be
     visible at all image sizes always from edge to edge top to bottom don't
     cut anything." Dropped object-fit/object-position and the clamped
     height entirely: the image is shown at its own natural aspect ratio
     (width:100%, height:auto), so the full photo is always visible at every
     viewport — no cropping, and no letterbox gaps either, since nothing
     constrains the box's height independently of the image anymore (the
     wrap's rendered size always matches the image exactly).
     Flagged, not silently dropped: this can't also be "an inch thinner"
     without either cropping (just rejected) or distorting the photo —
     height is purely a function of display width once the full image is
     shown uncropped. Checked the source file for spare margin to trim
     before deciding against it: the decorative glow-lines and the tower/
     turbine tips run right up to the top edge in every tile, so even a
     small permanent trim would cut real content — the same thing Sultan
     just said not to do. Left the image file untouched in that round.
     v2.13.14: Sultan asked again — "still big... make it smaller (just the
     height) and make sure it stays responsive" — so this time trimmed the
     source file itself: 55px off the top of img-0479453c9023.png (586px
     tall -> 531px, ~9.4% shorter), measured against the tower/turbine
     silhouettes and the network-line arcs to cut only open sky and the
     very top couple of pixels of the tallest crossarm tips, not the towers
     or logo themselves. This is a one-time edit to the file, not a
     responsive/viewport-dependent crop — width:100%; height:auto (below)
     is unchanged and still shows the whole (now-shorter) image in full at
     every width, so "stays responsive" and "nothing cut on resize" both
     still hold.
     v2.13.15: Sultan asked to cut the height by a further 60%, explicitly
     "don't cut anything out" — at this point there's no spare sky left to
     trim (v2.13.14 already took the safe margin), so the only way to drop
     height by that much without cropping is a non-uniform resize: squeezed
     img-0479453c9023.png from 531px tall to 212px tall while leaving its
     2073px width untouched (Image.resize to a new height only). This does
     visibly compress the photo and the baked-in logo vertically — checked
     it side by side first and it reads fine at tablet/desktop/wide, where
     it was tested. See the hero-tagline rule below for a problem this
     surfaced at mobile widths.
     v2.13.16: Sultan rejected the v2.13.15 squeeze outright — the
     non-uniform resize distorted the photo and the logo, and he wants them
     at correct proportions, not squashed. Replaced the squeeze with a
     straight crop instead: took the undistorted 2073x531 v2.13.14 source
     and cropped a 2073x212 window out of it (same final height as
     v2.13.15, so the banner reads the same thin strip he said was "ok" —
     only how we got there changed). Positioned the crop window to keep
     "Griderian INTELLIGENCE" fully intact and undistorted (confirmed nothing
     is cut off the wordmark), at the cost of the two tiles furthest from
     the logo (the transmission-tower panorama and the city-skyline/
     mountain-river pair) — a straight crop can't show the whole original
     collage at this aspect ratio without cropping something, and the
     wordmark took priority. Everything still visible (windmills, solar,
     house, EV charging, battery storage, the "INTELLIGENCE" wordmark) is
     at its correct, undistorted proportions.
     v2.13.17: Sultan swapped in a different source photo entirely —
     "try this image instead" — a single panoramic sunset scene (towers,
     turbines, city skyline with network-line overlay, mountains, forest)
     with the logo baked in at the TOP-RIGHT corner this time (icon +
     "Griderian" only, no "INTELLIGENCE" subtitle), not bottom-left like
     every prior image. Cropped a 2172x222 window out of the 2172x724
     source — same final aspect ratio as v2.13.15/16 (~9.8:1) since that
     thin-banner height was the last thing explicitly confirmed as
     correct, and nothing in this round's instruction suggested changing
     it. Positioned the crop to keep the full "Griderian" wordmark and
     icon intact with clear padding on every side (checked at 3x zoom) —
     same priority as v2.13.16. That window shows the upper portion of
     the scene (towers, turbines, city, network lines, mountains); the
     ground-level elements near the bottom of the source (solar, house,
     EV charger, battery storage) fall outside this thin a crop, same
     trade-off as v2.13.16's missing tiles. */
  .hero-banner-wrap{
    position:relative;
    z-index:0;
    width:100%;
    line-height:0;
  }
  .hero-banner-wrap img.hero-banner-img{
    display:block;
    width:100%;
    height:auto;
  }
  /* v2.13.19: Sultan sent a mockup — a large, semi-transparent Griderian
     lockup watermarked over the photo's bottom-left corner, with the
     tagline moved to sit at the dark section's far-left edge, roughly
     level with the headline instead of pinned to the very bottom. Measured
     the mockup directly (it's at the same ~9.8:1 aspect ratio as our own
     banner, so its proportions map onto ours 1:1): the logo spans 0–15.75%
     of the image's width and about 16%–97% of its height — nearly the
     full height of the thin banner, flush to the left edge. Positioned
     with top/height as percentages of hero-banner-wrap's own box (it
     always matches the image's rendered size exactly, same technique
     every overlay in this file has used since v2.13.13) so it holds that
     proportion at every viewport. */
  .hero-banner-wrap .hero-banner-watermark{
    position:absolute;
    left:0;
    top:16%;
    height:81%;
    width:auto;
    opacity:0.3;
    pointer-events:none;
    user-select:none;
  }
  .hero-stacked .hero-inner{
    padding-top:40px;
    padding-bottom:24px;
  }
  /* v2.13.10: dropped the boxed "card" behind the headline/subtext (it read
     as a second banner) — the text now sits directly on the hero's dark
     background. The two CTA pills stack vertically in their own column to
     the right of the (now centered) text column, instead of sitting in a
     row below it.
     v2.13.13 through v2.13.17: the tagline lived as an overlay on top of
     the banner photo itself, repeatedly repositioned (and once dropped to
     a static-flow mobile fallback) to track wherever the baked-in logo
     happened to sit in that round's source image. v2.13.18 moved it (plus
     a logo) off the photo into normal flow below the headline/CTA block.
     See the project doc / CHANGELOG for that history if needed; none of
     those rules apply any more.
     v2.13.19: per the mockup, the tagline moved out from under the CTA
     buttons and over to the dark section's own far-left edge, as its own
     column beside the (still centered) headline/CTA block.
     v2.13.20: Sultan asked for it back below the text block — simpler than
     v2.13.19's side-by-side row, and it reads as part of the same centered
     content group now instead of a separate column. Plain normal flow: it
     comes right after .hero-content, centered to match the headline above
     it, no positioning math of any kind.
     v2.13.21: Sultan: "Make it part of the text - last line." The tagline
     is no longer its own block/paragraph at all — it's now a <br>-led span
     appended inside .hero-sub itself, reading as the descriptive paragraph's
     own last line. .hero-tagline-below (the standalone-paragraph spacing
     rule) is gone; .hero-tagline-inline just adds a little breathing room
     above that last line so it doesn't crowd the line before it. */
  .hero-stacked .hero-content{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:40px;
    flex-wrap:wrap;
    max-width:960px;
    margin:0 auto;
  }
  .hero-tagline-inline{
    display:inline-block;
    margin-top:10px;
  }
  .hero-stacked .hero-text-col{
    flex:1 1 360px;
    max-width:560px;
    text-align:center;
  }
  .hero-stacked .hero-text-col h1,
  .hero-stacked .hero-text-col .hero-sub,
  .hero-stacked .hero-text-col .eyebrow{
    margin-left:auto;
    margin-right:auto;
  }
  .hero-stacked .hero-actions{
    flex:0 0 300px;
    flex-direction:column;
    align-items:stretch;
    gap:16px;
    width:300px;
  }
  .hero-stacked .hero-actions .btn{
    width:100%;
    white-space:normal;
    text-align:center;
  }

  /* --- Stat strip (bottom of hero, still on dark) --- */
  .stat-strip{
    position:relative;
    z-index:2;
    background:rgba(0,0,0,0.18);
    border-top:1px solid rgba(255,255,255,0.08);
  }
  .stat-strip-inner{
    max-width:1280px;
    margin:0 auto;
    padding:26px clamp(24px, 6vw, 96px);
    display:grid;
    grid-template-columns:repeat(4, 1fr);
  }
  .stat-strip-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:4px 20px;
    border-left:1px solid rgba(255,255,255,0.1);
  }
  .stat-strip-item:first-child{border-left:none; padding-left:0;}
  .stat-strip-item svg{width:20px; height:20px; color:var(--mint); flex-shrink:0;}
  .stat-strip-title{font-size:14.5px; font-weight:700; color:var(--on-dark);}
  .stat-strip-sub{font-size:12px; color:var(--on-dark-muted); margin-top:1px;}

  /* --- Section scaffolding shared across the light sections --- */
  section{scroll-margin-top:90px;}
  .section-inner{
    max-width:1200px;
    margin:0 auto;
    padding:72px clamp(24px, 6vw, 90px);
  }
  .section-inner.tight{padding-top:56px; padding-bottom:56px;}
  h2{
    font-family:'EB Garamond', Georgia, serif;
    font-weight:600;
    font-size:clamp(28px, 3.4vw, 38px);
    line-height:1.2;
    color:var(--paper);
    margin-bottom:16px;
  }
  .section-sub{
    font-size:17px;
    line-height:1.65;
    color:var(--muted);
    max-width:620px;
    margin-bottom:30px;
  }

  /* --- Challenge section --- */
  .challenge-section{border-top:1px solid var(--card-line);}
  .two-col{
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    gap:64px;
    align-items:center;
  }
  /* Grid items default to min-width:auto, i.e. their own content's
     min-content width as a floor -- so once .two-col collapses to a
     single 1fr column on narrow screens (980px breakpoint below), a wide
     child (e.g. the GridLetix product mockup's ".dash" preview, which is
     built at a fixed internal size) can force that whole column wider
     than the viewport instead of shrinking into it. (2026-11-01, phone
     horizontal-overflow fix.) */
  .two-col > div{min-width:0;}
  .mini-stats{
    display:flex;
    gap:34px;
    flex-wrap:wrap;
    margin-top:8px;
  }
  .mini-stat-num{
    font-family:'EB Garamond', Georgia, serif;
    font-size:30px;
    font-weight:600;
    color:var(--teal);
  }
  .mini-stat-label{
    font-size:13px;
    color:var(--muted);
    margin-top:2px;
  }
  .challenge-visual{
    position:relative;
    border-radius:20px;
    overflow:hidden;
    aspect-ratio:1/1.05;
    background:var(--dark);
  }
  .challenge-visual svg,
  .challenge-visual img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
  .challenge-overlay-card{
    position:absolute;
    right:20px;
    bottom:20px;
    left:20px;
    background:rgba(7,33,29,0.88);
    backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:14px;
    padding:18px 20px;
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .challenge-overlay-row{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13.5px;
    font-weight:500;
    color:var(--on-dark);
  }
  .challenge-overlay-row svg{width:16px; height:16px; color:var(--mint); flex-shrink:0;}

  /* --- Product (dashboard mockup) section --- */
  .product-section{border-top:1px solid var(--card-line);}
  .step-list{
    display:flex;
    flex-direction:column;
    gap:22px;
    margin-top:8px;
  }
  .step-item{
    display:flex;
    gap:16px;
  }
  .step-num{
    flex-shrink:0;
    width:30px;
    height:30px;
    border-radius:50%;
    background:var(--ink);
    color:var(--on-dark);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    font-weight:700;
  }
  .step-title{font-size:15.5px; font-weight:600; color:var(--paper); margin-bottom:3px;}
  .step-desc{font-size:14px; line-height:1.55; color:var(--muted);}

  /* The dashboard mockup itself -- a real recreation of the app UI, not a photo.
     v2.16.0: restyled to the dark theme + current nav of the live GridLetix app,
     per Sultan's supplied reference screenshot. */
  .dash{
    background:var(--dark);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:16px;
    box-shadow:0 24px 64px rgba(2,20,18,0.45);
    overflow:hidden;
    font-size:12px;
  }
  .dash-topbar{
    display:flex;
    align-items:center;
    gap:10px;
    padding:11px 16px;
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .dash-topbar .brand-dot{
    width:18px; height:18px;
    flex-shrink:0;
  }
  .dash-topbar-search{
    flex:1;
    background:rgba(255,255,255,0.06);
    border-radius:7px;
    padding:6px 10px;
    color:var(--on-dark-muted);
    font-size:11.5px;
  }
  .dash-topbar-avatar{
    width:22px; height:22px;
    border-radius:50%;
    background:var(--dark-2);
    border:1px solid rgba(255,255,255,0.14);
    color:var(--on-dark);
    font-size:10px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }
  .dash-body{display:flex;}
  .dash-sidebar{
    width:150px;
    flex-shrink:0;
    background:var(--dark-2);
    border-right:1px solid rgba(255,255,255,0.08);
    padding:14px 10px;
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .dash-sidebar-header{
    display:flex;
    align-items:center;
    gap:7px;
    padding:2px 6px 14px;
    margin-bottom:6px;
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .dash-sidebar-header img{width:22px; height:22px; border-radius:6px; flex-shrink:0;}
  .dash-sidebar-header span{font-size:11.5px; font-weight:800; letter-spacing:0.04em; color:var(--on-dark);}
  .dash-sidebar-item{
    display:flex;
    align-items:center;
    gap:8px;
    padding:7px 8px;
    border-radius:7px;
    color:var(--on-dark-muted);
    font-size:11px;
    font-weight:500;
  }
  .dash-sidebar-item svg{width:13px; height:13px; flex-shrink:0;}
  .dash-sidebar-item.active{background:rgba(4,212,169,0.16); color:var(--mint-bright);}
  .dash-sidebar-soon{
    margin-left:auto;
    font-size:7.5px;
    font-weight:700;
    letter-spacing:0.04em;
    color:var(--on-dark-muted);
    border:1px solid rgba(255,255,255,0.18);
    border-radius:999px;
    padding:1.5px 5px;
    flex-shrink:0;
  }
  .dash-sidebar-divider{
    border:none;
    border-top:1px solid rgba(255,255,255,0.08);
    margin:8px 2px;
  }
  .dash-sidebar-admin{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:5px 8px;
    font-size:9.5px;
    font-weight:700;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--on-dark-muted);
  }
  .dash-sidebar-admin svg{width:11px; height:11px; flex-shrink:0;}
  .dash-main{flex:1; min-width:0; padding:16px 16px 18px;}
  .dash-main-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    margin-bottom:4px;
    flex-wrap:wrap;
    gap:6px;
  }
  .dash-main-title{font-size:13.5px; font-weight:700; color:var(--on-dark);}
  .dash-status-pill{
    background:rgba(4,212,169,0.16);
    color:var(--mint-bright);
    font-size:10px;
    font-weight:700;
    padding:3px 9px;
    border-radius:999px;
  }
  .dash-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:6px 14px;
    margin:8px 0 14px;
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .dash-tabs span{
    font-size:10.5px;
    font-weight:600;
    color:var(--on-dark-muted);
    padding-bottom:7px;
    white-space:nowrap;
  }
  .dash-tabs span.active{
    color:var(--on-dark);
    border-bottom:2px solid var(--mint);
  }
  .dash-content{display:flex; gap:14px;}
  .dash-graph{
    flex:1.3;
    min-width:0;
    position:relative;
    overflow:hidden;
    background:var(--dark-2);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:10px;
  }
  .dash-graph-map{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover;
    filter:saturate(0.6) brightness(0.45) contrast(1.05);
  }
  .dash-graph-scrim{
    position:absolute; inset:0;
    background:rgba(7,33,29,0.55);
  }
  .dash-graph-overlay{
    position:relative; display:block; width:100%; height:100%;
  }
  .dash-graph-credit{
    position:absolute; right:5px; bottom:3px;
    font-size:7px; letter-spacing:0.2px; color:rgba(244,248,246,0.4);
  }
  .dash-prompt-bar{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:12px;
    padding:12px 16px;
    background:var(--dark-2);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:22px;
  }
  .dash-prompt-icon{width:16px; height:16px; color:var(--mint); flex-shrink:0;}
  .dash-prompt-text{flex:1; min-width:0; font-size:11px; line-height:1.4; color:var(--on-dark-muted); font-style:italic; white-space:normal;}
  .dash-prompt-mic{
    width:26px; height:26px;
    border-radius:50%;
    border:none;
    background:rgba(4,212,169,0.16);
    color:var(--mint);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    cursor:default;
  }
  .dash-prompt-mic svg{width:13px; height:13px;}
  .dash-stats{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .dash-stat-card{
    background:var(--dark-2);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:10px;
    padding:10px 12px;
  }
  .dash-stat-row{display:flex; justify-content:space-between; gap:8px;}
  .dash-stat-label{font-size:9.5px; color:var(--on-dark-muted); font-weight:600; text-transform:uppercase; letter-spacing:0.03em;}
  .dash-stat-value{font-size:14px; font-weight:700; color:var(--on-dark); margin-top:2px;}
  .dash-stat-value.ok{color:var(--mint);}
  .dash-ring{width:30px; height:30px; flex-shrink:0;}

  /* --- Real Impact (dark band) --- */
  .impact-band{
    position:relative;
    background:var(--dark);
    overflow:hidden;
  }
  .impact-visual{
    position:absolute;
    inset:0;
    opacity:0.9;
  }
  .impact-inner{
    position:relative;
    z-index:1;
    max-width:1200px;
    margin:0 auto;
    padding:100px clamp(24px, 6vw, 90px);
  }
  .impact-inner h2{color:var(--on-dark);}
  .impact-inner .section-sub{color:var(--on-dark-muted);}
  .impact-stats{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:28px;
    margin-top:50px;
  }
  .impact-stat-num{
    font-family:'EB Garamond', Georgia, serif;
    font-size:clamp(30px, 3.4vw, 42px);
    font-weight:600;
    color:var(--mint);
    margin-bottom:6px;
  }
  .impact-stat-label{font-size:13.5px; color:var(--on-dark-muted);}

  /* --- About section (Mission/Vision pair) --- */
  .about-section{border-top:1px solid var(--card-line);}
  .principles-section{border-top:1px solid var(--card-line);}

  /* --- "Griderian" name tooltip --- */
  .griderian-term{border-bottom:1px dashed currentColor; cursor:help; -webkit-tap-highlight-color:transparent;}
  .griderian-term:hover, .griderian-term:focus-visible{opacity:0.8;}
  .griderian-tooltip{
    display:none;
    position:fixed;
    z-index:90;
    max-width:300px;
    background:var(--card);
    border:1px solid var(--card-line);
    border-radius:14px;
    padding:18px 20px;
    box-shadow:0 20px 48px rgba(2,46,49,0.22);
    text-align:left;
  }
  .griderian-tooltip.open{display:block;}
  .griderian-tt-eyebrow{font-size:11.5px; font-weight:700; letter-spacing:1px; color:var(--mint); margin-bottom:8px;}
  .griderian-tt-text{font-size:14.5px; line-height:1.5; color:var(--paper); margin-bottom:12px;}
  .griderian-tt-learn{display:inline-flex; align-items:center; gap:5px; background:none; border:none; padding:0; font-weight:600; font-size:13.5px; color:var(--teal); cursor:pointer; font-family:inherit;}
  .griderian-tt-learn:hover{color:var(--mint);}
  .griderian-tt-learn svg{width:14px; height:14px;}
  .griderian-definition{margin:0 0 22px; text-align:left;}
  .griderian-def-row{margin-bottom:14px;}
  .griderian-def-row:last-child{margin-bottom:0;}
  .griderian-def-row dt{font-family:'EB Garamond', Georgia, serif; font-weight:600; color:var(--paper); font-size:15.5px; margin-bottom:3px;}
  .griderian-def-row dd{margin:0; color:var(--muted); font-size:14px; line-height:1.55;}
  .griderian-tagline{font-weight:600; color:var(--teal); font-size:15px; margin:0; text-align:center;}
  .about-grid-2{display:grid; grid-template-columns:repeat(2, 1fr); gap:18px; max-width:820px; margin:44px auto 0; text-align:left;}

  /* --- Stakeholder cards --- */
  .stakeholder-section{border-top:1px solid var(--card-line);}
  .stakeholder-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:18px;
    margin-top:44px;
  }
  .stakeholder-card{
    background:var(--card);
    border:1px solid var(--card-line);
    border-radius:14px;
    padding:28px 24px;
    transition:border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  }
  .stakeholder-card:hover{
    border-color:var(--mint);
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(2,46,49,0.08);
  }
  .stakeholder-icon{
    width:44px; height:44px;
    border-radius:50%;
    background:rgba(4,212,169,0.1);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:16px;
  }
  .stakeholder-icon svg{width:21px; height:21px; color:var(--teal);}
  .stakeholder-card h3{font-size:16.5px; font-weight:600; color:var(--paper); margin-bottom:7px;}
  .stakeholder-card p{font-size:14px; line-height:1.55; color:var(--muted); margin-bottom:14px;}
  .stakeholder-link{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:13px;
    font-weight:600;
    color:var(--teal);
    text-decoration:none;
    background:none;
    border:none;
    padding:0;
    cursor:pointer;
    font-family:inherit;
  }
  .stakeholder-link svg{width:13px; height:13px;}

  /* --- Solution band (pale mint tint) --- */
  .solution-band{background:var(--solution-bg); border-top:1px solid var(--card-line);}
  .solution-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:16px;
    margin-top:44px;
  }
  .solution-card{
    background:#FFFFFF;
    border:1px solid var(--card-line);
    border-radius:14px;
    padding:24px 20px;
  }
  .solution-card svg{width:24px; height:24px; color:var(--mint); margin-bottom:14px;}
  .solution-card h3{font-size:15px; font-weight:600; color:var(--paper); margin-bottom:7px;}
  .solution-card p{font-size:13.5px; line-height:1.55; color:var(--muted);}

  /* --- Closing CTA (dark band) --- */
  .closing-cta{
    position:relative;
    background:var(--dark);
    overflow:hidden;
    text-align:center;
  }
  .closing-visual{position:absolute; inset:0;}
  .closing-visual img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 60%;}
  .closing-scrim{
    position:absolute;
    inset:0;
    background:
      linear-gradient(180deg, rgba(5,16,14,0.55) 0%, rgba(5,16,14,0.72) 45%, rgba(5,16,14,0.88) 100%);
  }
  .closing-inner{
    position:relative;
    z-index:1;
    max-width:720px;
    margin:0 auto;
    padding:84px clamp(24px, 6vw, 72px);
  }
  .closing-inner h2{
    color:var(--on-dark);
    font-size:clamp(26px, 3.4vw, 36px);
    margin-bottom:34px;
  }
  .closing-actions{display:flex; flex-direction:column; align-items:center; gap:18px;}
  .closing-secondary{
    background:none; border:none; padding:0;
    font-size:13.5px;
    color:var(--on-dark-muted);
    text-decoration:underline;
    text-underline-offset:3px;
    cursor:pointer;
    font-family:inherit;
    transition:color 0.2s ease;
  }
  .closing-secondary:hover{color:var(--mint);}

  footer{
    padding:28px 6vw 34px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
    border-top:1px solid var(--card-line);
    flex-shrink:0;
  }
  .footer-brand{
    font-size:12px;
    letter-spacing:1.5px;
    color:var(--muted);
  }

  /* --- Introducing GridLetix (capability intro) --- */
  .gridletix-intro-section{border-top:1px solid var(--card-line);}

  /* v2.13.22: Sultan asked for the GridLetix "G/L" mark added to the
     products/gridletix page "as a watermark behind the text, make sure it
     covers most of the text area." The text column (eyebrow/h1/subtext)
     becomes the positioning context; the mark sits absolutely behind it at
     low opacity. Sized via object-fit:contain within a box set to both a
     width AND height percentage of the column (not just width, with auto
     height) so it scales to the larger of the two constraints and never
     overflows the column, however its aspect ratio compares to the column's
     -- the single-column mobile/tablet layout is short and wide, the
     two-column desktop layout is narrow and tall, and this holds up in
     both. The blockquote and CTA button below have their own opaque
     backgrounds, so the watermark isn't visible through those regardless
     of how far down it reaches, by design.
     v2.13.23: Sultan: "I can hardly see it. Use this instead" -- sent a
     brighter, more saturated render of the same G/L mark (originally a
     dark app-icon tile; isolated from its background via brightness
     masking, same as the first mark's own source image). Swapped the
     image and raised the opacity from 0.12 to go with it -- the G is a
     white gradient that was always going to stay faint against the white
     page background by design (same in both source images); the fix for
     "hardly see it" is the more saturated L/circle plus the higher
     opacity, not just the image swap alone.
     v2.13.24: Sultan: "I need to see the entire logo behind the text...
     this is not good!" with a screenshot showing the G practically
     missing. Root cause: in BOTH prior source images the G glyph itself
     is a white-to-transparent gradient fill, which stays invisible
     against the white page background no matter the opacity -- only the
     saturated teal/cyan L+circle was ever reading as a watermark.
     Recolored the whole mark to a single flat brand teal (#016B5E,
     matching --teal), keeping only the original alpha/shape -- so every
     part of the mark, G included, now renders in the same visible color
     at a consistent opacity, the standard approach for a logo watermark.
     Built from the v2.13.23 source: isolated via brightness masking as
     before, then cleaned with a binary open (erode+dilate, 3px kernel)
     to drop a thin, unrelated rim-light line along the source icon
     tile's rounded top-left border edge that the brightness threshold
     alone picked up (confirmed separately from the real G/L shape by
     column-sampling: ~1-2px thick, vs. tens of px for the actual letter
     strokes) without touching the bolt's sharp point. Opacity brought
     back down from 0.22 since a flat single-color fill reads much more
     strongly across the whole shape than the old multi-tone gradient
     ever did concentrated in just the L.
     v2.13.25: Sultan: "better make a bit darker and shrink it by 30%" --
     opacity up from 0.14 to 0.18 (darker = more of the flat teal showing
     through, not a different color). Box shrunk 30% in both dimensions
     (92%/96% -> 64.4%/67.2%) and the top/left offsets recentered to
     match (2%/4% -> 16.4%/17.8%), so the mark gets smaller in place
     rather than shrinking toward one corner.
     v2.13.26: Sultan: "Remove it from behind the text...this is ugly...
     Just put this logo on top of the image to the right of the text."
     The behind-the-text watermark treatment (.gridletix-hero-text /
     .gridletix-hero-watermark, v2.13.22-v2.13.25 above) is gone --
     removed from the HTML and these rules dropped. Replaced with a small
     opaque logo badge sitting on the dashboard screenshot in the right
     column instead; see .gridletix-hero-image-wrap /
     .gridletix-hero-image-badge below. None of the rules described
     above apply any more; kept this history for context only. */

  /* --- GridLetix hero: logo badge above the dashboard screenshot (v2.16.5) ---
     v2.13.26: Sultan: "put this logo on top of the image to the right of
     the text" -- badge was absolutely positioned over the photo's
     bottom-right corner.
     v2.16.5: Sultan: "Remove this image [the badge] from the monitor, and
     put it at the top white space above the monitor" -- the two-col
     layout's right column is vertically centered against the taller left
     (text) column, which leaves genuine blank page background above the
     image at most widths; the badge now sits there in normal flow
     instead of overlapping the photo. Badge moved before the photo img
     in the HTML and switched from absolute positioning to a static,
     right-aligned block with a bottom margin for the gap -- same badge
     asset, same width-as-percentage-of-wrapper scaling (so it still
     tracks the image's size at every breakpoint, single-column stacked
     layout under 980px included), same drop shadow.
     Follow-up, same day: Sultan: "Put it in the center top of the
     monitor white space" -- margin changed from right-aligned
     (0 0 18px auto) to horizontally centered (0 auto 18px). */
  .gridletix-hero-image-wrap{
    position:relative;
  }
  .gridletix-hero-image-badge{
    display:block;
    width:17%;
    min-width:48px;
    height:auto;
    border-radius:18%;
    box-shadow:0 8px 24px rgba(2,46,49,0.35);
    margin:0 auto 18px;
  }

  /* --- Your Grid. Your AI. Your Control. (self-service vs managed) --- */
  .diff-band{background:var(--solution-bg); border-top:1px solid var(--card-line);}
  .diff-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:24px;
    margin-top:44px;
    text-align:left;
  }
  .diff-card{
    background:#FFFFFF;
    border:1px solid var(--card-line);
    border-radius:16px;
    padding:36px 32px;
    display:flex;
    flex-direction:column;
  }
  .diff-card-dark{
    background:var(--dark);
    border-color:rgba(255,255,255,0.1);
  }
  .diff-card h3{font-size:21px; font-weight:600; color:var(--paper); margin-bottom:6px; font-family:'EB Garamond', Georgia, serif;}
  .diff-card-dark h3{color:var(--on-dark);}
  .diff-sub{font-size:14px; font-weight:600; color:var(--teal); margin-bottom:14px;}
  .diff-card-dark .diff-sub{color:var(--mint-bright);}
  .diff-desc{font-size:14.5px; line-height:1.6; color:var(--muted); margin-bottom:20px;}
  .diff-card-dark .diff-desc{color:var(--on-dark-muted);}
  .diff-features{list-style:none; margin:0 0 26px; padding:0; display:flex; flex-direction:column; gap:10px;}
  .diff-features li{
    font-size:13.5px;
    color:var(--paper);
    padding-left:24px;
    position:relative;
    line-height:1.5;
  }
  .diff-card-dark .diff-features li{color:var(--on-dark);}
  .diff-features li::before{
    content:"";
    position:absolute;
    left:0; top:5px;
    width:14px; height:14px;
    border-radius:50%;
    background:rgba(4,212,169,0.15);
    border:1px solid var(--mint);
  }
  .diff-card .btn{align-self:flex-start; margin-top:auto;}
  .trust-banner{margin-top:48px; text-align:center; max-width:680px; margin-left:auto; margin-right:auto;}
  .trust-banner-title{font-size:15.5px; font-weight:700; color:var(--paper); margin-bottom:8px;}
  .trust-banner-sub{font-size:13.5px; line-height:1.6; color:var(--muted);}

  /* --- How It Works --- */
  .how-it-works-section{border-top:1px solid var(--card-line);}
  .process-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:18px;
    margin-top:44px;
    text-align:left;
  }
  .process-card{
    background:#FFFFFF;
    border:1px solid var(--card-line);
    border-radius:14px;
    padding:26px 22px;
  }
  .process-card .step-num{margin-bottom:16px;}
  .process-card h3{font-size:15.5px; font-weight:600; color:var(--paper); margin-bottom:7px;}
  .process-card p{font-size:13.5px; line-height:1.55; color:var(--muted);}

  /* --- Engineering credibility --- */
  .credibility-section{border-top:1px solid var(--card-line);}
  .stakeholder-sub{font-size:13px; font-weight:600; color:var(--teal); margin-bottom:6px;}

  /* --- Real Impact: source citations --- */
  .impact-sources{margin-top:26px; font-size:11.5px; line-height:1.6; color:var(--on-dark-muted);}
  .impact-sources a{color:var(--mint-bright); text-decoration:underline; text-underline-offset:2px;}

  /* --- Continuous innovation --- */
  .innovation-band{background:var(--dark-2); border-top:1px solid rgba(255,255,255,0.08);}

  /* Squeeze zone: two-col hasn't stacked yet (see 980px breakpoint below) but the
     dash panel is narrow enough that its 5 tabs don't fit on one line at default
     sizing. Tighten sidebar/padding/gap/font here so "Report" stays on the same
     row as the rest instead of wrapping or clipping. */
  @media (min-width:981px) and (max-width:1200px){
    .dash-sidebar{width:92px; padding:12px 6px;}
    .dash-sidebar-item{gap:6px; padding:6px 5px; font-size:10px;}
    .dash-sidebar-item svg{width:12px; height:12px;}
    .dash-sidebar-header{gap:5px; padding:2px 2px 10px;}
    .dash-sidebar-header img{width:17px; height:17px;}
    .dash-sidebar-header span{font-size:8.5px;}
    .dash-sidebar-admin{font-size:8px; padding:4px 5px;}
    .dash-sidebar-soon{font-size:6.5px; padding:1px 4px;}
    .dash-main{padding:14px 10px 16px;}
    .dash-tabs{gap:6px 9px;}
    .dash-tabs span{font-size:9.5px;}
  }

  @media (max-width:980px){
    .two-col{grid-template-columns:1fr; gap:40px;}
    .challenge-visual{order:-1; aspect-ratio:16/9;}
    .dash-content{flex-direction:column;}
    .stat-strip-inner{grid-template-columns:repeat(2, 1fr); row-gap:18px;}
    .stat-strip-item:nth-child(3){border-left:none; padding-left:0;}
    .impact-stats{grid-template-columns:1fr; gap:30px;}
    .stakeholder-grid{grid-template-columns:1fr;}
    .about-grid-2{grid-template-columns:1fr;}
    .solution-grid{grid-template-columns:repeat(2, 1fr);}
    .diff-grid{grid-template-columns:1fr; gap:20px;}
    .process-grid{grid-template-columns:repeat(2, 1fr);}
  }
  @media (max-width:560px){
    header{padding:16px 6vw;}
    .nav-cta-pill{padding:10px 18px; font-size:13px;}
    .hero-inner{padding:48px 6vw 40px;}
    .hero-actions{flex-direction:column; align-items:stretch;}
    .hero-actions .btn{width:100%;}
    /* v2.13.10–v2.13.17: this mobile fallback dropped the tagline out of
       the photo overlay into static flow once the banner got too short for
       legible overlaid text at narrow widths. v2.13.18 moved the tagline
       off the photo entirely into the dark .hero-inner area below the
       headline/CTA block; v2.13.19 moved it beside the headline instead;
       v2.13.20 moved it back below the headline/CTA block, in plain normal
       flow — it needs no narrow-width override at all, it just stays
       centered and stacks naturally under everything above it. */
    .section-inner{padding:48px 6vw;}
    .dash-sidebar{display:none;}
    .dash-main{padding:14px 10px 16px;}
    .dash-tabs{gap:6px 8px;}
    .dash-tabs span{font-size:9.5px;}
    .solution-grid{grid-template-columns:1fr;}
    .process-grid{grid-template-columns:1fr;}
    .diff-card{padding:28px 22px;}
    .closing-inner{padding:56px 6vw;}
    footer{flex-direction:column; text-align:center;}
    .brand img{height:50px;}
  }

  /* --- Nav / hamburger / mobile panel --- */
  .nav-desktop{
    display:flex;
    align-items:center;
    gap:36px;
  }
  .nav-link{
    font-size:14px;
    font-weight:500;
    color:var(--muted);
    text-decoration:none;
    letter-spacing:0.2px;
    background:none;
    border:none;
    padding:0;
    cursor:pointer;
    font-family:inherit;
    transition:color 0.2s ease;
  }
  .nav-link:hover{
    color:var(--paper);
  }
  .nav-signin{
    display:inline-flex;
    align-items:center;
    text-decoration:none;
    background:rgba(247,248,244,0.04);
    border:1px solid rgba(159,180,174,0.28);
    border-radius:12px;
    padding:10px 20px;
    font-size:14px;
    font-weight:600;
    color:var(--paper);
    font-family:inherit;
    cursor:pointer;
    white-space:nowrap;
    transition:border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  }
  .nav-signin:hover{
    border-color:var(--mint);
    background:rgba(4,212,169,0.08);
    transform:translateY(-1px);
  }
  .nav-signin[hidden]{
    display:none;
  }
  .nav-account{
    display:inline-flex;
    align-items:center;
    gap:14px;
  }
  .nav-account[hidden]{
    display:none;
  }
  .nav-account-name{
    font-size:14px;
    font-weight:600;
    color:var(--paper);
  }
  .nav-account-logout{
    background:none;
    border:none;
    padding:0;
    font-size:13px;
    font-weight:500;
    color:var(--muted);
    font-family:inherit;
    cursor:pointer;
    text-decoration:underline;
    text-underline-offset:3px;
    transition:color 0.2s ease;
  }
  .nav-account-logout:hover{
    color:var(--mint);
  }
  .nav-account-mobile{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    padding:16px 0 4px;
    border-top:1px solid rgba(159,180,174,0.18);
    margin-top:6px;
  }
  .nav-account-mobile[hidden]{
    display:none;
  }
  .nav-account-mobile .nav-account-name{
    color:var(--paper);
    font-size:15px;
  }
  .menu-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    width:40px;
    height:40px;
    background:none;
    border:none;
    cursor:pointer;
    padding:0;
    flex-shrink:0;
  }
  .menu-toggle span{
    display:block;
    width:22px;
    height:2px;
    background:var(--paper);
    transition:transform 0.25s ease, opacity 0.25s ease;
  }
  .menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .menu-toggle.open span:nth-child(2){opacity:0;}
  .menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .mobile-nav-panel{
    display:flex;
    flex-direction:column;
    flex-shrink:0;
    max-height:0;
    overflow:hidden;
    padding:0 6vw;
    transition:max-height 0.3s ease;
  }
  .mobile-nav-panel.open{
    max-height:420px;
    padding:8px 6vw 22px;
  }
  .mobile-nav-panel a,
  .mobile-nav-panel button{
    display:block;
    width:100%;
    text-align:left;
    padding:14px 2px;
    font-size:15px;
    font-weight:500;
    color:var(--paper);
    text-decoration:none;
    background:none;
    border:none;
    border-bottom:1px solid rgba(159,180,174,0.14);
    cursor:pointer;
    font-family:inherit;
  }
  .mobile-nav-panel a:last-child,
  .mobile-nav-panel button:last-child{
    border-bottom:none;
  }
  .mobile-nav-panel button[hidden]{
    display:none;
  }

  /* Raised from 860px to 1060px on 2026-11-01 (tablet horizontal-overflow
     fix -- see history below), then to 1170px on 2026-11-04 (confirmed
     via Playwright across 1024-1920px on every page): the full row
     including the "Explore an i2 Partnership" CTA pill needs about
     1160px and was overflowing the viewport by up to ~70px between
     1060px and 1150px-wide windows -- a pre-existing gap, independent
     of the (now-removed) Community nav link, that widened once the
     CTA pill shipped. 1170px restores a safe margin.
     Original 2026-11-01 note: at exactly 1024px (iPad landscape and
     similar tablet widths) the full nav-desktop row -- logo gap + links
     + sign-in + "Request a demo" button, all at gap:36px -- needs about
     862px and doesn't wrap, so it ran past the right edge and forced a
     ~23px horizontal scroll on the whole page. Switching to the
     hamburger menu earlier kept every tablet width overflow-free. */
  @media (max-width:1170px){
    .nav-desktop{display:none;}
    .menu-toggle{display:flex;}
  }

  /* --- Coming-soon modal --- */
  .modal-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(2,46,49,0.45);
    backdrop-filter:blur(4px);
    align-items:center;
    justify-content:center;
    padding:24px;
    z-index:100;
  }
  .modal-overlay.open{
    display:flex;
  }
  .modal-card{
    position:relative;
    max-width:420px;
    width:100%;
    background:var(--card);
    border:1px solid var(--card-line);
    border-radius:18px;
    padding:36px 32px;
    text-align:center;
    box-shadow:0 24px 64px rgba(2,46,49,0.18);
  }
  .modal-close{
    position:absolute;
    top:14px;
    right:14px;
    width:32px;
    height:32px;
    border:none;
    background:none;
    color:var(--muted);
    font-size:22px;
    line-height:1;
    cursor:pointer;
    border-radius:8px;
    transition:color 0.2s ease, background 0.2s ease;
  }
  .modal-close:hover{
    color:var(--paper);
    background:rgba(2,46,49,0.06);
  }
  .modal-eyebrow{
    font-size:13px;
    font-weight:600;
    letter-spacing:2.2px;
    color:var(--mint);
    text-transform:uppercase;
    margin-bottom:14px;
  }
  .modal-title{
    font-family:'EB Garamond', Georgia, serif;
    font-weight:600;
    font-size:26px;
    color:var(--paper);
    margin-bottom:12px;
  }
  .modal-body{
    font-size:16px;
    line-height:1.6;
    color:var(--muted);
    margin-bottom:26px;
  }
  .modal-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    background:linear-gradient(100deg, var(--mint), #7CFFE3);
    color:var(--ink-deep);
    font-weight:600;
    font-size:15.5px;
    padding:13px 24px;
    border-radius:12px;
    box-shadow:0 8px 28px rgba(4,212,169,0.35);
    transition:transform 0.2s ease, box-shadow 0.2s ease;
  }
  .modal-cta:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 32px rgba(4,212,169,0.45);
  }
  .modal-form{display:flex; flex-direction:column; gap:10px;}
  .modal-form input, .modal-form select, .modal-form textarea{
    font-family:inherit; font-size:15.5px; padding:12px 14px; border-radius:10px;
    border:1px solid var(--card-line); background:var(--bg);
    color:var(--paper); outline:none;
  }
  .modal-form textarea{ resize:vertical; min-height:76px; line-height:1.5; }
  .modal-form select:invalid{ color:var(--muted); }
  .modal-form input:focus, .modal-form select:focus, .modal-form textarea:focus{ border-color:var(--mint); }
  .modal-form input::placeholder, .modal-form textarea::placeholder{ color:var(--muted); }
  .modal-form .char-count{ font-size:12px; color:var(--muted); text-align:right; margin-top:-5px; }
  .modal-form button{ width:100%; border:none; cursor:pointer; }
  .modal-note{ font-size:13px; color:var(--muted); margin-top:14px; }
  .modal-note.success{ color:var(--mint); }
  .modal-note.error{ color:#C94A3C; }

  /* --- Investor interest modal --- */
  .investor-modal-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(2,46,49,0.5);
    backdrop-filter:blur(4px);
    z-index:200;
    overflow-y:auto;
    padding:5vh 20px;
  }
  .investor-modal-overlay.open{
    display:block;
  }
  .investor-modal{
    position:relative;
    max-width:820px;
    margin:0 auto;
    background:var(--card);
    border:1px solid var(--card-line);
    border-radius:20px;
    padding:44px clamp(20px, 5vw, 48px) 48px;
    box-shadow:0 30px 80px rgba(2,46,49,0.2);
  }
  .investor-modal.register-modal{
    max-width:480px;
  }
  .investor-modal-close{
    position:absolute;
    top:18px;
    right:18px;
    width:36px;
    height:36px;
    border:none;
    background:none;
    color:var(--muted);
    font-size:24px;
    line-height:1;
    cursor:pointer;
    border-radius:8px;
    transition:color 0.2s ease, background 0.2s ease;
  }
  .investor-modal-close:hover{
    color:var(--paper);
    background:rgba(2,46,49,0.06);
  }
  .investor-modal .intro{
    margin-bottom:32px;
  }
  .investor-modal .eyebrow{
    font-size:13px;
    font-weight:600;
    letter-spacing:2.2px;
    color:var(--mint);
    text-transform:uppercase;
    margin-bottom:14px;
  }
  .investor-modal h2{
    font-family:'EB Garamond', Georgia, serif;
    font-weight:600;
    font-size:clamp(26px, 4vw, 34px);
    line-height:1.15;
    color:var(--paper);
    margin-bottom:14px;
  }
  .investor-modal .intro p{
    font-size:16.5px;
    line-height:1.6;
    color:var(--muted);
    max-width:560px;
  }
  .investor-modal form{
    display:flex;
    flex-direction:column;
    gap:22px;
  }
  .investor-modal fieldset{
    border:1px solid var(--card-line);
    border-radius:16px;
    background:var(--bg);
    padding:24px 22px 28px;
  }
  .investor-modal legend{
    display:flex;
    align-items:center;
    gap:11px;
    font-family:'EB Garamond', Georgia, serif;
    font-size:18px;
    font-weight:600;
    color:var(--paper);
    padding:0 4px;
  }
  .investor-modal .legend-num{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    border-radius:50%;
    background:rgba(4,212,169,0.14);
    color:var(--mint);
    font-family:'IBM Plex Sans', Arial, sans-serif;
    font-size:12px;
    font-weight:700;
    flex-shrink:0;
  }
  .investor-modal .field-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-top:20px;
  }
  .investor-modal .field{
    display:flex;
    flex-direction:column;
    gap:7px;
  }
  .investor-modal .field.full{
    grid-column:1 / -1;
  }
  .investor-modal label{
    font-size:14px;
    font-weight:500;
    color:var(--paper);
  }
  .investor-modal label .req{
    color:var(--mint);
  }
  .investor-modal input[type="text"],
  .investor-modal input[type="email"],
  .investor-modal input[type="url"],
  .investor-modal select,
  .investor-modal textarea{
    width:100%;
    background:var(--bg);
    border:1px solid var(--card-line);
    border-radius:10px;
    padding:12px 14px;
    font-size:15.5px;
    font-family:inherit;
    color:var(--paper);
    transition:border-color 0.2s ease, background 0.2s ease;
  }
  .investor-modal input::placeholder,
  .investor-modal textarea::placeholder{
    color:var(--muted);
    opacity:0.75;
  }
  .investor-modal input:focus,
  .investor-modal select:focus,
  .investor-modal textarea:focus{
    outline:none;
    border-color:var(--mint);
    background:var(--card);
  }
  .investor-modal select{
    appearance:none;
    -webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B6A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 13px center;
    background-size:15px;
    padding-right:36px;
    cursor:pointer;
  }
  .investor-modal select option{
    background:var(--card);
    color:var(--paper);
  }
  .investor-modal textarea{
    resize:vertical;
    min-height:90px;
    line-height:1.5;
  }
  .investor-modal .char-count{
    font-size:12px;
    color:var(--muted);
    text-align:right;
  }
  .investor-modal .check-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:9px;
    margin-top:13px;
  }
  .investor-modal .check-option{
    display:flex;
    align-items:center;
    gap:9px;
    padding:10px 13px;
    border:1px solid var(--card-line);
    border-radius:10px;
    cursor:pointer;
    font-size:13px;
    color:var(--paper);
    transition:border-color 0.2s ease, background 0.2s ease;
  }
  .investor-modal .check-option:hover{
    border-color:rgba(4,212,169,0.5);
    background:rgba(4,212,169,0.05);
  }
  .investor-modal .check-option input{
    accent-color:var(--mint);
    width:15px;
    height:15px;
    flex-shrink:0;
  }
  .investor-modal .check-option.checked{
    border-color:var(--mint);
    background:rgba(4,212,169,0.08);
  }
  .investor-modal .select-all-option{
    display:inline-flex;
    width:fit-content;
    margin-top:12px;
    font-style:italic;
    color:var(--muted);
    border-style:dashed;
  }
  .investor-modal .select-all-option.checked{
    font-style:normal;
    color:var(--paper);
  }
  .investor-modal .radio-row{
    display:flex;
    gap:11px;
    margin-top:11px;
    flex-wrap:wrap;
  }
  .investor-modal .radio-option{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 17px;
    border:1px solid var(--card-line);
    border-radius:10px;
    cursor:pointer;
    font-size:13.5px;
    color:var(--paper);
    transition:border-color 0.2s ease, background 0.2s ease;
  }
  .investor-modal .radio-option:hover{
    border-color:rgba(4,212,169,0.5);
  }
  .investor-modal .radio-option input{
    accent-color:var(--mint);
    width:15px;
    height:15px;
  }
  .investor-modal .radio-option.checked{
    border-color:var(--mint);
    background:rgba(4,212,169,0.08);
  }
  .investor-modal .consent-row{
    display:flex;
    align-items:flex-start;
    gap:11px;
    padding:3px 1px;
  }
  .investor-modal .consent-row input{
    accent-color:var(--mint);
    width:16px;
    height:16px;
    margin-top:2px;
    flex-shrink:0;
    cursor:pointer;
  }
  .investor-modal .consent-row label{
    font-size:12px;
    line-height:1.55;
    color:var(--muted);
    font-weight:400;
    cursor:pointer;
  }
  .investor-modal .submit-row{
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
    margin-top:2px;
  }
  .investor-modal .submit-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:linear-gradient(100deg, var(--mint), #7CFFE3);
    color:var(--ink-deep);
    border:none;
    border-radius:12px;
    padding:14px 26px;
    font-size:15.5px;
    font-weight:600;
    font-family:inherit;
    white-space:nowrap;
    cursor:pointer;
    box-shadow:0 8px 28px rgba(4,212,169,0.35);
    transition:transform 0.2s ease, box-shadow 0.2s ease;
  }
  .investor-modal .submit-btn svg{
    width:18px;
    height:18px;
    flex-shrink:0;
  }
  .investor-modal .submit-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 32px rgba(4,212,169,0.45);
  }
  .investor-modal .submit-btn:disabled{
    opacity:0.55;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
  }
  .investor-modal .submit-note{
    font-size:13px;
    color:var(--muted);
  }
  .investor-modal .submit-error{
    display:none;
    font-size:13.5px;
    color:#C94A3C;
  }
  .investor-modal .submit-error.show{
    display:block;
  }
  .investor-modal .field-error{
    font-size:12px;
    color:#C94A3C;
    display:none;
  }
  .investor-modal .field.invalid input,
  .investor-modal .field.invalid select{
    border-color:#C94A3C;
  }
  .investor-modal .field.invalid .field-error{
    display:block;
  }
  .investor-modal .success-card{
    display:none;
    border:1px solid rgba(4,212,169,0.35);
    background:rgba(4,212,169,0.06);
    border-radius:16px;
    padding:32px 26px;
    text-align:center;
  }
  .investor-modal .success-card.show{
    display:block;
  }
  .investor-modal .success-icon{
    width:50px;
    height:50px;
    border-radius:50%;
    background:rgba(4,212,169,0.16);
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 16px;
  }
  .investor-modal .success-icon svg{
    width:24px;
    height:24px;
    color:var(--mint);
  }
  .investor-modal .success-card h3{
    font-family:'EB Garamond', Georgia, serif;
    font-size:21px;
    font-weight:600;
    color:var(--paper);
    margin-bottom:9px;
  }
  .investor-modal .success-card p{
    font-size:13.5px;
    line-height:1.6;
    color:var(--muted);
    max-width:420px;
    margin:0 auto;
  }

  @media (max-width:720px){
    .investor-modal .field-grid{grid-template-columns:1fr;}
    .investor-modal .check-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:560px){
    .investor-modal-overlay{padding:0;}
    .investor-modal{border-radius:0; min-height:100%; padding:34px 6vw 40px;}
    .investor-modal fieldset{padding:20px 16px 24px;}
    .investor-modal .check-grid{grid-template-columns:1fr;}
    .investor-modal .radio-row{flex-direction:column;}
  }

/* v2.5.1: widen the Careers engineering-cards container per the v1.0.3 doc
   (scoped to this one section; shared .section-inner elsewhere is untouched) */
@media (min-width:981px){
  .careers-cards-section .section-inner{padding-left:32px; padding-right:32px;}
}

/* v2.7.0: nav i2 pill float animation + hover/click preview popover */
.nav-i2-wrap{position:relative;}
/* A literal left-right float (translateX) was tried first and dropped: it
   continuously shifts the button's own clickable position, which made it
   hard to click precisely (confirmed directly -- an automated click on the
   moving target kept missing/timing out waiting for it to hold still).
   This instead sweeps a light "ticker" sheen across the pill's surface on a
   loop -- same continuous-motion feel, but the button's position and hit
   target never move. */
.nav-i2-trigger{position:relative; overflow:hidden;}
.nav-i2-trigger::after{
  content:'';
  position:absolute;
  top:0; left:-60%;
  width:45%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform:skewX(-20deg);
  animation:navI2Shimmer 3s ease-in-out infinite;
  pointer-events:none;
}
@keyframes navI2Shimmer{
  0%{left:-60%;}
  55%{left:130%;}
  100%{left:130%;}
}
.nav-i2-wrap:hover .nav-i2-trigger::after,
.nav-i2-wrap:focus-within .nav-i2-trigger::after{animation-play-state:paused;}
@media (prefers-reduced-motion:reduce){
  .nav-i2-trigger::after{animation:none; display:none;}
}
.nav-i2-popover{
  --paper:#0B2321;
  --muted:#5B6B6A;
  position:absolute;
  top:calc(100% + 14px);
  right:0;
  width:320px;
  max-width:calc(100vw - 32px);
  background:var(--card);
  border:1px solid var(--card-line);
  border-radius:14px;
  padding:20px 22px;
  box-shadow:0 20px 48px rgba(2,46,49,0.22);
  text-align:left;
  z-index:60;
  opacity:0;
  pointer-events:none;
  transform:translateY(-6px);
  transition:opacity 0.18s ease, transform 0.18s ease;
}
.nav-i2-popover.open{opacity:1; pointer-events:auto; transform:translateY(0);}
.nav-i2-popover-title{
  font-family:'EB Garamond', Georgia, serif;
  font-weight:600;
  font-size:19px;
  color:var(--paper);
  margin-bottom:8px;
}
.nav-i2-popover-text{font-size:13.5px; line-height:1.55; color:var(--muted); margin-bottom:16px;}
.nav-i2-popover-cta{display:inline-flex; align-items:center; gap:7px; background:none; border:none; padding:0; font-weight:600; font-size:13.5px; color:var(--teal); cursor:pointer; font-family:inherit;}
.nav-i2-popover-cta:hover{color:var(--mint);}
.nav-i2-popover-cta svg{width:14px; height:14px; flex-shrink:0;}
@media (max-width:980px){
  .nav-i2-popover{right:auto; left:50%; transform:translate(-50%, -6px);}
  .nav-i2-popover.open{transform:translate(-50%, 0);}
}


/* --- Griderian Intelligence hub & article pages (v2.17.0) --- */
.intel-filter-bar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-bottom:40px;
}
.intel-filter-pill{
  font-family:inherit;
  font-size:13.5px;
  font-weight:600;
  color:var(--muted);
  background:var(--card);
  border:1px solid var(--card-line);
  border-radius:999px;
  padding:9px 20px;
  cursor:pointer;
  transition:border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.intel-filter-pill:hover{border-color:var(--mint);color:var(--teal);}
.intel-filter-pill.is-active{
  background:var(--teal);
  border-color:var(--teal);
  color:#FFFFFF;
}
.intel-article-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:24px;
}
.intel-article-card{
  display:flex;
  flex-direction:column;
  background:var(--card);
  border:1px solid var(--card-line);
  border-radius:14px;
  overflow:hidden;
  text-decoration:none;
  transition:border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.intel-article-card:hover{
  border-color:var(--mint);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(2,46,49,0.08);
}
.intel-card-img{
  height:170px;
  background-color:var(--solution-bg);
  background-size:cover;
  background-position:center;
}
.intel-card-body{padding:22px 22px 24px;}
.intel-card-tag{
  font-size:12px;
  font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--teal);
  margin-bottom:8px;
}
.intel-card-body h3{font-size:17px;font-weight:600;color:var(--paper);margin-bottom:8px;line-height:1.3;}
.intel-card-body p{font-size:14px;line-height:1.55;color:var(--muted);margin-bottom:14px;}
.intel-card-date{font-size:12.5px;color:var(--muted);opacity:0.8;margin-bottom:0;}
.intel-empty-state,
.intel-error-state{
  text-align:center;
  color:var(--muted);
  font-size:15px;
  padding:40px 0;
}
.intel-back-link{
  display:inline-block;
  font-size:14px;
  font-weight:600;
  color:var(--teal);
  text-decoration:none;
  margin-bottom:28px;
}
.intel-back-link:hover{text-decoration:underline;}
.intel-article-meta{font-size:14px;color:var(--muted);margin:12px 0 28px;}
.intel-article-img{
  width:100%;
  height:320px;
  background-color:var(--solution-bg);
  background-size:cover;
  background-position:center;
  border-radius:14px;
  margin-bottom:28px;
}
.intel-article-body{font-size:16.5px;line-height:1.75;color:var(--paper);}
.intel-article-body p{margin-bottom:18px;}
.intel-article-body h2,
.intel-article-body h3{margin-top:32px;margin-bottom:14px;}

/* --------------------------------------------------------- community board */
.community-thread-list{display:flex;flex-direction:column;gap:14px;}
.community-thread-card{display:block;background:var(--card);border:1px solid var(--card-line);border-radius:14px;padding:20px 22px;text-decoration:none;transition:border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;}
.community-thread-card:hover{border-color:var(--mint);transform:translateY(-2px);box-shadow:0 8px 20px rgba(2,46,49,0.08);}
.community-thread-tag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--teal);background:var(--solution-bg);border-radius:999px;padding:4px 12px;margin-bottom:10px;}
.community-thread-card h3{font-size:17px;font-weight:600;color:var(--paper);margin-bottom:6px;line-height:1.3;}
.community-thread-card p{font-size:14px;line-height:1.5;color:var(--muted);margin-bottom:12px;}
.community-thread-meta{font-size:12.5px;color:var(--muted);opacity:0.85;display:flex;gap:14px;flex-wrap:wrap;}
.community-reply-list{display:flex;flex-direction:column;gap:18px;margin:28px 0;}
.community-reply{background:var(--card);border:1px solid var(--card-line);border-radius:12px;padding:16px 18px;}
.community-reply-meta{font-size:12.5px;color:var(--muted);margin-bottom:8px;}
.community-reply-body{font-size:15px;line-height:1.6;color:var(--paper);white-space:pre-wrap;}
.community-thread-body{font-size:16px;line-height:1.7;color:var(--paper);white-space:pre-wrap;margin:16px 0 28px;}