:root{
    --navy-900:#070B2E;
    --navy-800:#0A1247;
    --navy-700:#0E1A66;
    --navy-600:#05106F;
    --navy-500:#1B2A8A;
    --line:rgba(120,140,255,.14);
    --line-strong:rgba(120,140,255,.28);
    --text:#F5F7FF;
    --text-dim:#A6AED6;
    /* #6B73A0 measured 3.7-4.2:1 against the navy surfaces it actually sits on
       (cards, the partner strip) — under the 4.5:1 AA floor for normal text.
       This tint clears 4.5:1+ on every one of those surfaces. */
    --text-faint:#7E85AC;
    --cyan:#22D3EE;
    --cyan-soft:rgba(34,211,238,.12);
    --violet:#9B8CFF;
    --violet-soft:rgba(155,140,255,.12);
    --amber:#FFB546;
    --amber-soft:rgba(255,181,70,.12);
    --green:#34D399;
    --card:rgba(255,255,255,.025);
    --card-hover:rgba(255,255,255,.05);
    --radius:18px;
    --maxw:1200px;
    /* measured from the sticky nav at runtime by main.js; this is the desktop
       fallback for the first paint and for no-JS */
    --nav-h:78px;

    /* ---- unified type scale: fluid, grows with viewport width ----
       every heading/body/caption font-size in the site should reference
       one of these instead of a one-off px value. Re-widened further at
       the large-screen breakpoints below (search "TYPE SCALE — XL"). */
    --fs-h1:clamp(38px,5.2vw,62px);
    --fs-h2:clamp(28px,3.6vw,42px);
    --fs-h3:clamp(24px,3vw,33px);
    --fs-h3-card:clamp(22px,2.5vw,30px);
    --fs-h4:clamp(18px,1.4vw + 14px,22px);
    --fs-lede:clamp(1.063rem,0.8rem + 0.33vw,1.375rem);
    --fs-body-lg:clamp(1.156rem,0.913rem + 0.3vw,1.438rem);
    --fs-body:clamp(1rem,0.788rem + 0.26vw,1.25rem);
    --fs-body-sm:clamp(0.938rem,0.731rem + 0.26vw,1.188rem);
    --fs-caption:clamp(0.875rem,0.75rem + 0.15vw,1rem);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  /* the nav is sticky, so an anchor jump would otherwise land with the
     section's eyebrow and heading tucked underneath it */
  section[id],header[id]{scroll-margin-top:calc(var(--nav-h) + 22px)}
  /* ---------- FOCUS VISIBILITY ---------- */
  /* --cyan is redefined inside .section-light (teal) and .theme-finops (amber),
     so this ring automatically matches whichever accent is active. Default sits
     outside the element; the few cards/controls that clip their own outline
     with overflow:hidden get an inset ring instead so it isn't cut off. */
  :focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
  .pcard:focus-visible,.scard.live:focus-visible,.faq summary:focus-visible,
  .acc-q:focus-visible,.dpsa-q:focus-visible{outline-offset:-3px}
  /* ---------- SKIP LINK ---------- */
  .skip-link{position:absolute;top:-100px;left:12px;z-index:1000;padding:12px 18px;border-radius:10px;background:var(--cyan);color:var(--navy-900);font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:14.5px;text-decoration:none;transition:top .2s ease}
  .skip-link:focus{top:12px}
  /* ---------- LIGHT SECTION THEME ---------- */
  /* Premium light: layered surfaces, soft elevation, warm-cool neutral base. */
  .section-light{
    --line:rgba(16,24,64,.08);
    --line-strong:rgba(16,24,64,.14);
    --text:#10183B;            /* deep ink, not pure navy */
    --text-dim:#4A5578;
    /* #8089A6 measured 3.1-3.5:1 against the light surfaces it sits on — under
       the 4.5:1 AA floor. Darkened to clear 4.5:1+ on all of them. */
    --text-faint:#606A89;
    --cyan:#0C7B9E;            /* deep teal reads on light */
    --cyan-soft:rgba(12,123,158,.09);
    --amber:#A55C00;
    --amber-soft:rgba(165,92,0,.09);
    --green:#0C8F61;
    /* three-layer surface system */
    --surface-0:#EEF1F8;       /* section base (recedes) */
    --surface-1:#FFFFFF;       /* card (catches light) */
    --surface-2:#F5F7FC;       /* inset panel inside card */
    --card:var(--surface-1);
    --card-hover:#FFFFFF;
    /* layered soft shadows */
    --shadow-sm:0 1px 2px rgba(16,24,64,.04), 0 2px 8px rgba(16,24,64,.04);
    --shadow-md:0 2px 4px rgba(16,24,64,.05), 0 12px 28px -8px rgba(16,24,64,.12);
    --shadow-lg:0 4px 8px rgba(16,24,64,.06), 0 24px 56px -16px rgba(16,24,64,.18);
    background:
      radial-gradient(900px 480px at 88% -8%, rgba(12,123,158,.05), transparent 60%),
      linear-gradient(180deg, #F2F4FA, var(--surface-0) 18%, #EAEEF6);
    color:var(--text);
    position:relative;
    border-top:1px solid rgba(16,24,64,.07);
    border-bottom:1px solid rgba(16,24,64,.07);
  }
  /* hairline highlight at the top edge for crisp section separation */
  .section-light::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);pointer-events:none}
  .section-light h1,.section-light h2,.section-light h3,.section-light h4{color:var(--text);letter-spacing:-.025em}
  .section-light .sec-eye{color:var(--cyan);font-weight:700}
  /* ===== Premium light-mode component refinements ===== */
  /* Suite cards: white, elevated, with a refined hover lift */
  .section-light .scard{background:var(--surface-1);box-shadow:var(--shadow-sm);border-color:var(--line)}
  .section-light .scard.live{background:linear-gradient(165deg,#fff,#F2FAFC);border-color:rgba(12,123,158,.30);box-shadow:0 4px 10px rgba(12,123,158,.10), 0 20px 44px -16px rgba(12,123,158,.22)}
  .section-light .scard.live::after{background:linear-gradient(90deg,var(--cyan),transparent)}
  .section-light .badge.now{background:var(--cyan);color:#fff}
  .section-light .badge.soon{background:var(--surface-2);color:var(--text-faint);border:1px solid var(--line)}
  .section-light .scard.soon-card{opacity:1}
  .section-light .scard p{color:var(--text-dim)}
  /* Steps on light: white cards with elevation */
  .section-light .step{background:var(--surface-1);box-shadow:var(--shadow-sm);border-color:var(--line)}
  .section-light .step:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
  /* Deploy / generic cards on light */
  .section-light .dcard{background:var(--surface-1);box-shadow:var(--shadow-sm);border-color:var(--line)}
  .section-light .dcard:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
  .section-light .seccard{background:var(--surface-1);box-shadow:var(--shadow-sm);border-color:var(--line)}
  .section-light .seccard:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
  .section-light .seccard .ico{background:linear-gradient(150deg,#fff,var(--cyan-soft));border-color:rgba(12,123,158,.22);box-shadow:var(--shadow-sm)}
  .section-light .built p{color:var(--text-dim)}
  /* Primary button on light keeps cyan fill but with shadow */
  .section-light .btn-primary{background:var(--cyan);color:#fff;box-shadow:0 6px 18px -4px rgba(12,123,158,.45)}
  .section-light .btn-primary:hover{box-shadow:0 12px 30px -6px rgba(12,123,158,.55)}
  .section-light .btn-ghost{color:var(--text);border-color:var(--line-strong)}
  .section-light .btn-ghost:hover{border-color:var(--cyan);color:var(--cyan);background:var(--cyan-soft)}
  .section-light .link-cta{color:var(--cyan)}
  /* DPS table on light: white surface, elevated, refined header */
  .section-light .dps-table-wrap{background:var(--surface-1);box-shadow:var(--shadow-md);border-color:var(--line)}
  .section-light .dps-table th{background:var(--surface-2);color:var(--text-faint);border-bottom-color:var(--line-strong)}
  .section-light .dps-table td{border-bottom-color:var(--line);color:var(--text-dim)}
  .section-light .dps-table .cap{color:var(--text)}
  .section-light .dps-table .unit{color:var(--cyan)}
  .section-light .dps-table .chk{color:var(--green)}
  .section-light .dps-table tr:hover td{background:var(--cyan-soft)}
  .section-light .sec-sub{color:var(--text-dim)}
  .section-light .dps-foot{color:var(--text-faint)}
  body{
    background:var(--navy-900);
    color:var(--text);
    font-family:'Inter',system-ui,sans-serif;
    line-height:1.55;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  /* ambient gradient field */
  body::before{
    content:"";
    position:fixed;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(800px 500px at 75% -5%, rgba(34,211,238,.10), transparent 60%),
      radial-gradient(700px 600px at 10% 20%, rgba(27,42,138,.45), transparent 55%),
      radial-gradient(900px 700px at 90% 90%, rgba(14,26,102,.35), transparent 60%);
  }
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative;z-index:1}
  h1,h2,h3,.display{font-family:'Space Grotesk',sans-serif;letter-spacing:-.02em;line-height:1.05}
  .mono{font-family:'JetBrains Mono',monospace}
  /* ---------- NAV ---------- */
  nav{
    position:sticky;top:0;z-index:50;
    backdrop-filter:blur(14px);
    background:rgba(7,11,46,.72);
    border-bottom:1px solid var(--line);
    transition:transform .3s ease, opacity .3s ease;
  }
  nav.site-nav-hidden{transform:translateY(-100%);opacity:0;pointer-events:none}
  .nav-in{max-width:var(--maxw);margin:0 auto;padding:16px 28px;display:flex;align-items:center;justify-content:space-between}
  .logo{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:29px;letter-spacing:-.02em;display:flex;align-items:center;gap:9px}
  .logo .logo-icon{width:46px;height:46px;border-radius:11px;flex-shrink:0;display:block;box-sizing:border-box}
  .nav-links{display:flex;gap:30px;align-items:center}
  .nav-links a{color:var(--text-dim);text-decoration:none;font-size:14.5px;font-weight:500;transition:color .2s}
  .nav-links a:hover{color:var(--text)}
  /* status-colored nav entries: FinOps and Assist (live/cyan) vs Signal/Flow/Map (planned/violet) */
  .nav-status{display:inline-flex;align-items:center;gap:7px}
  .nav-status::before{content:"";width:6px;height:6px;border-radius:50%;flex-shrink:0}
  .nav-status--live{color:var(--cyan)}
  .nav-status--live::before{background:var(--cyan);box-shadow:0 0 7px var(--cyan)}
  .nav-status--live:hover{color:var(--cyan)}
  .nav-status--soon{color:#9B8CFF}
  .nav-status--soon::before{background:#9B8CFF;box-shadow:0 0 7px #9B8CFF;opacity:.85}
  .nav-status--soon:hover{color:#9B8CFF}
  /* ---------- PER-PRODUCT NAV DOTS ---------- */
  .nav-links{gap:22px}
  .nav-status--fo::before{background:#FFB546;box-shadow:0 0 7px #FFB546}
  .nav-status--as::before{background:#22D3EE;box-shadow:0 0 7px #22D3EE}
  .nav-status--sg::before{background:#9B8CFF;box-shadow:0 0 7px #9B8CFF}
  .nav-status--fl::before{background:#34D399;box-shadow:0 0 7px #34D399}
  .nav-status--mp::before{background:#F472B6;box-shadow:0 0 7px #F472B6}
  .nav-status--fo:hover{color:#FFB546}
  .nav-status--as:hover{color:#22D3EE}
  .nav-status--sg:hover{color:#9B8CFF}
  .nav-status--fl:hover{color:#34D399}
  .nav-status--mp:hover{color:#F472B6}
  .nav-cta{display:flex;gap:12px;align-items:center}
  /* space is reserved (opacity, not display:none) so nothing shifts into the gap when suppressed */
  .nav-cta .btn.nav-cta-suppressed{opacity:0;pointer-events:none;transition:opacity .2s ease}
  .btn{font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:14.5px;border-radius:10px;padding:10px 18px;cursor:pointer;border:1px solid transparent;text-decoration:none;display:inline-flex;align-items:center;gap:7px;transition:all .22s ease;white-space:nowrap}
  .btn-primary{background:var(--cyan);color:var(--navy-900);box-shadow:0 0 0 0 rgba(34,211,238,.5)}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px -8px rgba(34,211,238,.55)}
  .btn-ghost{background:transparent;color:var(--text);border-color:var(--line-strong)}
  .btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}
  @media(max-width:900px){
    .nav-links{display:none}
  }
  /* ---------- MOBILE NAV ---------- */
  .nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;background:transparent;border:1px solid var(--line-strong);border-radius:9px;cursor:pointer;padding:0;flex-shrink:0}
  .nav-burger span{display:block;width:16px;height:1.5px;background:var(--text);margin:0 auto;transition:transform .25s ease,opacity .25s ease}
  .nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .nav-mobile{display:none;flex-direction:column;gap:2px;padding:10px 20px 22px;border-top:1px solid var(--line);background:rgba(7,11,46,.98);backdrop-filter:blur(14px)}
  .nav-mobile a:not(.btn){color:var(--text-dim);text-decoration:none;font-size:15.5px;font-weight:500;padding:13px 4px;border-bottom:1px solid var(--line)}
  .nav-mobile a:last-of-type{border-bottom:none}
  .nav-mobile-cta{display:flex;flex-direction:column;gap:10px;margin-top:16px}
  .nav-mobile-cta .btn{width:100%;justify-content:center}
  .nav-mobile.open{display:flex}
  @media(max-width:900px){
    .nav-cta{display:none}
    .nav-burger{display:flex}
  }
  /* ---------- HERO ---------- */
  .hero{padding:60px 0 48px;position:relative}
  .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);background:var(--cyan-soft);border:1px solid rgba(34,211,238,.25);padding:6px 13px;border-radius:100px;margin-bottom:26px}
  .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
  /* a second eyebrow stating which Dynatrace estate the product targets, sitting
     beside the status eyebrow so a visitor on the wrong estate finds out before
     reading the rest of the pitch; same .eyebrow class as its sibling so it always
     matches (picks up amber automatically on the FinOps page via .theme-finops) */
  .eyebrow-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:26px}
  .eyebrow-row .eyebrow{margin-bottom:0}
  h1{font-size:var(--fs-h1);font-weight:700;margin-bottom:22px}
  .hero-sub{font-size:var(--fs-body-lg);color:var(--text-dim);max-width:clamp(540px,40vw,840px);margin-bottom:32px}
  .hero-actions{display:flex;gap:14px;margin-bottom:34px;flex-wrap:wrap}
  .btn-lg{padding:14px 26px;font-size:15.5px;border-radius:12px}
  .trust{display:flex;gap:10px;flex-wrap:wrap}
  .trust span{font-size:12px;font-weight:500;color:var(--text-faint);border:1px solid var(--line);border-radius:8px;padding:6px 11px;background:var(--card)}
  /* Equalize the three hero-carousel visuals so the slide doesn't jump height on rotation */
  .hero-visual{min-height:582px;box-sizing:border-box}
  .finops-visual.hero-visual{display:flex;flex-direction:column;justify-content:center}
  .soon-stack.hero-visual{align-content:center}
  @media(max-width:900px){
    .hero-visual{min-height:660px}
  }
  @media(max-width:400px){
    .hero-visual{min-height:700px}
  }
  /* ---------- HERO CAROUSEL ---------- */
  .carousel{position:relative}
  .slides{position:relative}
  .slide{display:none}
  .slide.active{display:block;animation:fadeSlide .6s ease}
  @keyframes fadeSlide{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .slide-tag{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:6px 13px;border-radius:100px;margin-bottom:24px}
  .slide-tag.t-suite{color:var(--cyan);background:var(--cyan-soft);border:1px solid rgba(34,211,238,.25)}
  .slide-tag.t-finops{color:var(--amber);background:var(--amber-soft);border:1px solid rgba(255,181,70,.3)}
  .slide-tag.t-soon{color:var(--text-dim);background:rgba(255,255,255,.05);border:1px solid var(--line-strong)}
  .slide-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
  /* carousel controls */
  .carousel-ctl{display:flex;align-items:center;gap:18px;margin-top:38px}
  .dots{display:flex;gap:9px}
  .dot-btn{width:34px;height:5px;border-radius:100px;background:rgba(255,255,255,.14);border:none;cursor:pointer;padding:0;transition:all .3s ease;position:relative;overflow:hidden}
  .dot-btn.active{background:rgba(255,255,255,.18)}
  .dot-btn.active::after{content:"";position:absolute;inset:0;background:var(--cyan);transform-origin:left;animation:fill 6s linear forwards}
  @keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .arrows{display:flex;gap:8px;margin-left:auto}
  .arrow{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-strong);background:var(--card);color:var(--text-dim);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:all .2s}
  .arrow:hover{border-color:var(--cyan);color:var(--cyan);background:var(--cyan-soft)}
  .slide-counter{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;color:var(--text-faint)}
  .slide-counter b{color:var(--text)}
  /* upcoming apps visual (slide 3) */
  .soon-stack{display:grid;grid-template-columns:1fr;gap:12px}
  .soon-tile{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;transition:all .25s}
  .soon-tile:hover{border-color:var(--line-strong);transform:translateY(-3px);background:var(--card-hover)}
  .soon-tile .st-glyph{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:22px;color:var(--cyan);margin-bottom:10px;display:inline-block;width:42px;height:42px;line-height:42px;text-align:center;background:var(--cyan-soft);border:1px solid rgba(34,211,238,.25);border-radius:11px}
  .soon-tile h4{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:var(--fs-h4);margin-bottom:5px}
  .soon-tile p{font-size:12.5px;color:var(--text-faint);line-height:1.45}
  .finops-visual{background:linear-gradient(160deg, rgba(255,181,70,.06), rgba(7,11,46,.85));border:1px solid var(--line-strong);border-radius:22px;padding:24px;box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}
  .assist-visual{background:linear-gradient(160deg, rgba(34,211,238,.07), rgba(7,11,46,.85));border:1px solid var(--line-strong);border-radius:22px;padding:24px;box-shadow:0 40px 90px -30px rgba(0,0,0,.8);display:flex;flex-direction:column;justify-content:center}
  /* ---------- PARTNER STRIP ---------- */
  .partner-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(14,26,102,.25),transparent);margin-top:20px}
  /* maker's credit: the YourCompass logo and statement lead, so the Dynatrace
     badges beside them read as the company's recognition, not the product's */
  .maker-in{max-width:var(--maxw);margin:0 auto;padding:44px 28px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center}
  .maker-logo{display:block;height:44px;width:auto;margin-bottom:18px}
  .maker-title{font-family:'Space Grotesk',sans-serif;font-size:var(--fs-h4);font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--text);margin:0 0 10px}
  .maker-note{font-size:14.5px;line-height:1.55;color:var(--text-dim);max-width:46ch;margin:0}
  .maker-badges{list-style:none;margin:0;padding:0 0 0 48px;border-left:1px solid var(--line-strong);display:flex;flex-wrap:wrap;align-items:center;gap:16px}
  /* the badge column is ~58% of the row, so below ~1260px the badges shrink with
     the viewport to keep all five on one line beside the YourCompass block */
  .maker-badges img{display:block;height:min(88px,calc(10.5vw - 34px));width:auto;border-radius:8px}
  @media(max-width:900px){
    /* stacked: centred, so the logo, statement and badge row share one axis */
    .maker-in{grid-template-columns:1fr;gap:28px;padding:36px 24px;text-align:center}
    .maker-logo{margin-left:auto;margin-right:auto}
    .maker-note{margin-left:auto;margin-right:auto}
    .maker-badges{justify-content:center;padding-left:0;border-left:0;padding-top:28px;border-top:1px solid var(--line-strong)}
    .maker-badges img{height:88px}
  }
  /* phones: one row of five shrank the badges' small print past reading, so
     break after the third into a centred 3 + 2. The ::after is a zero-height
     full-width item ordered between them, which forces the line break (and
     doubles row-gap, hence 6px). Row one is ~3.8x the badge height plus two
     gaps, so size the height off what is left after the 24px gutters. */
  @media(max-width:640px){
    .maker-badges{column-gap:10px;row-gap:6px}
    .maker-badges::after{content:"";flex-basis:100%;height:0;order:1}
    .maker-badges li:nth-child(n+4){order:2}
    .maker-badges img{height:min(84px,calc((100vw - 72px) / 3.8))}
  }
  /* mac-window dots, reused by the hero fan carousel's title bar */
  .d1{background:#ff5f57}
  .d2{background:#febc2e}
  .d3{background:#28c840}
  /* ---------- SECTIONS ---------- */
  section.blk{padding:72px 0;position:relative}
  @media(max-width:760px){
    section.blk{padding:52px 0}
  }
  .sec-head{max-width:96%;margin-bottom:48px}
  .sec-eye{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin-bottom:14px;display:block}
  h2{font-size:var(--fs-h2);font-weight:700;margin-bottom:16px}
  .sec-sub{font-size:var(--fs-body);color:var(--text-dim)}
  /* reveal on scroll */
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
  .reveal.show{opacity:1;transform:none}
  /* ---------- SUITE GRID ---------- */
  .suite{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
  .scard.live::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--cyan),transparent)}
  .badge.now{background:var(--cyan);color:var(--navy-900)}
  .badge.soon{background:rgba(255,255,255,.06);color:var(--text-faint);border:1px solid var(--line)}
  .scard p{font-size:13.5px;color:var(--text-dim);line-height:1.5}
  .scard.soon-card{opacity:.78;cursor:default}
  /* "launching soon" (Assist) sits a step ahead of the still-distant "coming soon" trio, so it keeps a cyan accent instead of fading grey.
     Colors are hardcoded (not var(--cyan)) because --cyan is repurposed to amber inside .theme-finops, and this badge must stay Assist's own cyan on every page it appears on. */
  .scard.soon-card.launching{opacity:1}
  .scard.soon-card.launching::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#22D3EE,transparent);opacity:.6}
  .badge.launching{background:rgba(34,211,238,.12);color:#22D3EE;border:1px solid rgba(34,211,238,.35)}
  /* ---------- APP MINI SECTIONS ---------- */
  .app{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"copy visual";column-gap:54px;row-gap:0;align-items:center;padding:46px 0;border-top:1px solid var(--line)}
  .app-copy-wrap{grid-area:copy}
  .app-visual-wrap{grid-area:visual}
  .app.flip{grid-template-areas:"visual copy"}
  .app-eye{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px;display:inline-block;padding:4px 10px;border-radius:6px}
  .app-eye.now{background:var(--cyan-soft);color:var(--cyan);border:1px solid rgba(34,211,238,.3)}
  .app-eye.soon{background:rgba(255,255,255,.04);color:var(--text-faint);border:1px solid var(--line)}
  .app-eye.launching{background:rgba(34,211,238,.10);color:#22D3EE;border:1px solid rgba(34,211,238,.28)}
  /* a second tag stating which Dynatrace estate the product targets, next to the
     status tag; reuses the sibling's .now/.fo modifier so the color always matches */
  .app-eye-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
  .app-eye-row .app-eye{margin-bottom:0}
  .app h3{font-size:var(--fs-h3);font-weight:700;margin-bottom:14px;max-width:clamp(440px,32vw,650px)}
  .app-intro{font-size:var(--fs-body);color:var(--text-dim);margin-bottom:22px;max-width:clamp(460px,34vw,700px)}
  .app-list{list-style:none;margin-bottom:26px}
  .app-list li{position:relative;padding-left:26px;margin-bottom:13px;font-size:var(--fs-body-sm);color:var(--text-dim);max-width:clamp(470px,34vw,700px)}
  .app-list li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:12px;border-radius:50%;background:var(--cyan)}
  .app-list li b{color:var(--text);font-weight:600}
  .app-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
  .link-cta:hover{gap:11px}
  .notify{display:flex;gap:8px;align-items:center}
  .notify input{background:var(--card);border:1px solid var(--line-strong);border-radius:10px;padding:10px 14px;color:var(--text);font-size:14px;font-family:'Inter',system-ui,sans-serif;width:200px}
  .notify input:focus{outline:none;border-color:var(--cyan)}
  /* app visual placeholder */
  .app-visual{background:linear-gradient(160deg,rgba(14,26,102,.5),rgba(7,11,46,.7));border:1px solid var(--line);border-radius:20px;height:300px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
  .app-visual .glyph{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:88px;color:rgba(120,140,255,.1);letter-spacing:-.04em}
  .app-visual::before{content:"";position:absolute;width:200%;height:200%;background:radial-gradient(circle at 50% 50%, rgba(34,211,238,.08), transparent 40%);animation:drift 9s ease-in-out infinite}
  @keyframes drift{0%,100%{transform:translate(-25%,-25%)}50%{transform:translate(-22%,-30%)}}
  @media(max-width:880px){
    .app{grid-template-columns:1fr;grid-template-areas:"title" "visual" "copy";gap:32px}
    .app.flip{grid-template-areas:"title" "visual" "copy"}
    .app-copy-wrap{display:contents}
    .app-title{grid-area:title}
    .app-copy{grid-area:copy}
    .app-visual{height:220px}
  }
  /* ---------- HOW IT WORKS (premium connected flow) ---------- */
  .steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:10px}
  /* connecting spine behind the cards */
  .steps::before{content:"";position:absolute;top:54px;left:14%;right:14%;height:2px;background:linear-gradient(90deg,var(--cyan),rgba(34,211,238,.25));opacity:.4;z-index:0}
  .step{position:relative;z-index:1;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:30px 26px 28px;transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s,border-color .3s;overflow:hidden}
  .step:hover{border-color:var(--line-strong);transform:translateY(-5px)}
  /* big ghosted number watermark */
  .step .ghost{position:absolute;top:-14px;right:6px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:120px;line-height:1;color:var(--cyan);opacity:.05;pointer-events:none;user-select:none}
  /* icon tile */
  .step .ico{position:relative;width:56px;height:56px;border-radius:16px;background:linear-gradient(150deg,rgba(34,211,238,.16),rgba(34,211,238,.03));border:1px solid rgba(34,211,238,.28);display:flex;align-items:center;justify-content:center;margin-bottom:20px;box-shadow:0 8px 24px -10px rgba(34,211,238,.4)}
  .step .ico svg{width:28px;height:28px;stroke:var(--cyan);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  /* step label row */
  .step .slabel{display:flex;align-items:center;gap:10px;margin-bottom:10px}
  .step .snum{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:700;font-size:12px;color:var(--cyan);letter-spacing:.05em}
  .step .sline{flex:1;height:1px;background:var(--line)}
  .step h4{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:var(--fs-h4);margin-bottom:10px;letter-spacing:-.01em}
  .step p{font-size:var(--fs-caption);color:var(--text-dim);line-height:1.55}
  @media(max-width:760px){
    .steps{grid-template-columns:1fr}
    .steps::before{display:none}
  }
  /* how-it-works CTA strip */
  .hiw-cta{margin-top:30px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:24px 28px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(120deg,rgba(34,211,238,.07),var(--card))}
  .hiw-cta .txt{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:18px;color:var(--text)}
  .hiw-cta .txt span{color:var(--cyan)}
  .hiw-cta .acts{display:flex;gap:12px;flex-wrap:wrap}
  /* light-mode treatment for steps + flow + cta */
  .section-light .steps::before{background:linear-gradient(90deg,var(--cyan),rgba(12,123,158,.2));opacity:.35}
  .section-light .step{background:var(--surface-1);box-shadow:var(--shadow-sm);border-color:var(--line)}
  .section-light .step:hover{box-shadow:var(--shadow-md);transform:translateY(-5px)}
  .section-light .step .ghost{color:var(--cyan);opacity:.06}
  .section-light .step .ico{background:linear-gradient(150deg,#fff,var(--cyan-soft));border-color:rgba(12,123,158,.22);box-shadow:var(--shadow-sm)}
  .section-light .step .ico svg{stroke:var(--cyan)}
  .section-light .hiw-cta{background:linear-gradient(120deg,var(--cyan-soft),var(--surface-1));border-color:var(--line);box-shadow:var(--shadow-sm)}
  /* ---------- DPS COVERAGE TABLE ---------- */
  .dps-table{width:100%;border-collapse:collapse;font-size:14px}
  .dps-table th{text-align:left;padding:15px 20px;font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);border-bottom:1px solid var(--line-strong);background:rgba(7,11,46,.4)}
  .dps-table td{padding:14px 20px;border-bottom:1px solid var(--line);color:var(--text-dim);vertical-align:middle}
  .dps-table tr:last-child td{border-bottom:none}
  .dps-table tr:hover td{background:rgba(34,211,238,.03)}
  .dps-table .cap{color:var(--text);font-weight:500}
  .dps-table .unit{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12.5px;color:var(--cyan)}
  .dps-table .chk{text-align:center;color:var(--green);font-weight:700}
  .dps-foot{font-size:12.5px;color:var(--text-faint);margin-top:14px;padding-left:2px}
  @media(max-width:760px){
    .dps-table .drv{display:none}
    .dps-table th.drv{display:none}
  }
  /* ---------- BUILT-BY (themed via section-light) ---------- */
  .built{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center;padding:8px 0}
  .built-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .bstat{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px}
  .bstat .bn{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:34px;line-height:1;color:var(--text);letter-spacing:-.02em}
  .bstat .bn .u{font-size:18px;color:var(--cyan)}
  .bstat .bl{font-size:13px;color:var(--text-dim);margin-top:8px;line-height:1.4}
  .section-light .bstat{background:var(--surface-1);box-shadow:var(--shadow-sm);border-color:var(--line)}
  @media(max-width:860px){
    .built{grid-template-columns:1fr;gap:32px}
  }
  /* ---------- ROADMAP BAND (now themed via section-light) ---------- */
  /* ---------- DEPLOY ---------- */
  .deploy{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .dcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:all .25s}
  .dcard:hover{border-color:var(--line-strong);transform:translateY(-3px)}
  .dcard .dt{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:var(--fs-h4);margin-bottom:10px}
  .dcard p{font-size:var(--fs-caption);color:var(--text-dim)}
  @media(max-width:980px){
    .deploy{grid-template-columns:1fr 1fr}
  }
  @media(max-width:760px){
    .deploy{grid-template-columns:1fr}
  }
  /* ---------- BUILT BY ---------- */
  .built p{font-size:var(--fs-body);color:var(--text-dim);line-height:1.6}
  .built h2{max-width:560px}
  .built p{font-size:var(--fs-body);color:var(--text-dim);max-width:680px;margin-bottom:24px}
  /* ---------- SECURITY ---------- */
  .sec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .seccard{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px 28px;transition:transform .3s,box-shadow .3s,border-color .3s}
  .seccard:hover{border-color:var(--line-strong);transform:translateY(-4px)}
  .seccard .ico{width:52px;height:52px;border-radius:14px;background:linear-gradient(150deg,rgba(34,211,238,.16),rgba(34,211,238,.03));border:1px solid rgba(34,211,238,.28);display:flex;align-items:center;justify-content:center;margin-bottom:18px;box-shadow:0 8px 24px -10px rgba(34,211,238,.4)}
  .seccard .ico svg{width:26px;height:26px;stroke:var(--cyan);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .seccard h4{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:var(--fs-h4);margin-bottom:10px;letter-spacing:-.01em}
  .seccard p{font-size:var(--fs-caption);color:var(--text-dim);line-height:1.55}
  .section-light .seccard .ico{background:linear-gradient(150deg,#fff,var(--cyan-soft));border-color:rgba(12,123,158,.22);box-shadow:var(--shadow-sm)}
  .section-light .seccard .ico svg{stroke:var(--cyan)}
  @media(max-width:980px){
    .sec-grid{grid-template-columns:1fr 1fr}
  }
  @media(max-width:760px){
    .sec-grid{grid-template-columns:1fr}
  }
  .sec-foot{margin-top:24px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--line)}
  .sec-foot-note{font-size:13px;color:var(--text-faint);line-height:1.5;max-width:680px}
  .sec-foot-note .cl{color:var(--text-dim);font-weight:600}
  /* ---------- PRICING ---------- */
  .pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
  .price-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:36px 28px 28px;display:flex;flex-direction:column;position:relative;transition:all .25s ease}
  .price-card:hover{border-color:var(--line-strong);background:var(--card-hover);transform:translateY(-4px)}
  .price-card.featured{border:1.5px solid var(--cyan);background:linear-gradient(160deg,rgba(34,211,238,.08),var(--card))}
  .price-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--amber);color:var(--navy-900);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 15px;border-radius:100px;white-space:nowrap}
  .price-name{font-family:'Space Grotesk',sans-serif;font-size:var(--fs-h4);font-weight:600;margin-bottom:6px}
  .price-desc{font-size:var(--fs-caption);color:var(--text-dim);min-height:38px;margin-bottom:22px}
  .price-amount{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:36px;color:var(--text);display:flex;align-items:baseline;gap:5px;margin-bottom:24px}
  .price-amount .unit{font-size:var(--fs-caption);color:var(--text-dim);font-weight:500}
  .price-list{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:28px;flex:1}
  .price-list li{display:flex;gap:9px;align-items:flex-start;font-size:var(--fs-caption);color:var(--text-dim);line-height:1.45}
  .price-list li::before{content:"✓";color:var(--green);font-weight:700;flex-shrink:0}
  .price-card .btn{width:100%;justify-content:center}
  .section-light .price-badge{color:#fff}
  @media (max-width:900px){
    .pricing-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto}
    .price-card.featured{order:-1}
  }
  /* ---------- FINAL CTA ---------- */
  .final{text-align:center;padding:96px 0}
  .final-box{background:linear-gradient(160deg,rgba(34,211,238,.1),rgba(14,26,102,.5));border:1px solid var(--line-strong);border-radius:26px;padding:64px 40px;position:relative;overflow:hidden}
  .final-box::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 50% 0%,rgba(34,211,238,.15),transparent 70%)}
  .final h2{font-size:clamp(30px,4vw,46px);margin-bottom:14px;position:relative}
  .final p{font-size:var(--fs-body-lg);color:var(--text-dim);margin-bottom:30px;position:relative}
  .final .hero-actions{justify-content:center;position:relative}
  .final h2 + .hero-actions{margin-top:30px}
  /* ---------- FOOTER ---------- */
  footer{border-top:1px solid var(--line);padding:28px 0;margin-top:40px;background:var(--navy-900)}
  .foot-in{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px}
  .foot-in .copy{font-size:13px;color:var(--text)}
  .foot-brand{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:28px;padding-top:22px;text-align:center}
  .foot-yc-logo{height:60px;width:auto}
  .foot-brand .copy{font-size:13px;color:var(--text)}
  .foot-tm{font-size:12px;line-height:1.5;color:var(--text-faint);max-width:620px;margin:0}
  @media(max-width:900px){
    .foot-yc-logo{height:53px}
  }
  @media(max-width:640px){
    .foot-yc-logo{height:45px}
  }
  .foot-nav{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
  .foot-links{display:flex;flex-wrap:wrap;row-gap:8px}
  .foot-links a{color:var(--text);text-decoration:none;font-size:14px;font-weight:500;transition:color .2s}
  .foot-links a:hover{color:var(--cyan)}
  .foot-links a:not(:last-child)::after{content:"·";margin:0 12px;color:var(--text-faint);font-weight:400}
  /* ---------- "OPEN FULL SIZE" HINT ---------- */
  /* the lightbox went unnoticed: the hero fan reads as a passive animation and
     the product shots read as flat images, so neither invites a click */
  /* z-index clears the hero carousel's left-edge fade, which paints at 8 */
  .shot-hint{position:relative;z-index:10;display:flex;align-items:center;gap:7px;width:fit-content;max-width:100%;margin:16px auto 0;padding:5px 13px;border-radius:100px;font-size:12.5px;font-weight:600;line-height:1.4;color:var(--cyan);background:var(--cyan-soft);border:1px solid var(--line-strong)}
  .shot-hint svg{width:14px;height:14px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .shot-hint .sh-tap{display:none}
  @media(hover:none){
    .shot-hint .sh-click{display:none}
    .shot-hint .sh-tap{display:inline}
  }
  .foot-legal{display:flex;flex-wrap:wrap;row-gap:8px}
  .foot-legal a{color:var(--text-faint);text-decoration:none;font-size:13.5px;font-weight:500;transition:color .2s}
  .foot-legal a:hover{color:var(--cyan)}
  .foot-legal a:not(:last-child)::after{content:"·";margin:0 10px;color:var(--text-faint);font-weight:400}
  @media(prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    .reveal{opacity:1;transform:none}
  }
  /* ---------- SMALL-SCREEN PASS (phones) ---------- */
  @media(max-width:560px){
    .wrap{padding:0 18px}
    h1{font-size:clamp(30px,8vw,40px)}
    .hero{padding:36px 0 32px}
    .hero-actions{flex-direction:column;align-items:stretch}
    .hero-actions .btn{width:100%;justify-content:center}
    .carousel-ctl{flex-wrap:wrap;justify-content:center;gap:12px}
    .suite{grid-template-columns:1fr}
    .soon-stack{grid-template-columns:1fr}
    .dps-table{min-width:520px}
    .hiw-cta{flex-direction:column;align-items:stretch;text-align:center}
    .hiw-cta .acts{justify-content:center}
    .final-box{padding:40px 22px}
    .foot-in{flex-direction:column;align-items:flex-start}
    .foot-nav{flex-direction:row;align-items:flex-start;width:100%;gap:48px}
    .foot-links{display:flex;flex-direction:column;gap:10px}
    .foot-legal{display:flex;flex-direction:column;gap:10px}
    .foot-links a:not(:last-child)::after,.foot-legal a:not(:last-child)::after{content:none}
    .built-stats{grid-template-columns:1fr 1fr}
  }
  @media(max-width:380px){
    .built-stats{grid-template-columns:1fr}
  }
  /* ═══════════════ GLASSMORPHISM LAYER ═══════════════ */
  /* ambient color fields — the glass needs color behind it to refract */
  section.blk:not(.section-light){background-image:
    radial-gradient(640px 420px at 10% 15%, rgba(34,211,238,.06), transparent 62%),
    radial-gradient(760px 520px at 90% 85%, rgba(110,92,224,.10), transparent 62%)}
  .theme-finops section.blk:not(.section-light){background-image:
    radial-gradient(640px 420px at 10% 15%, rgba(255,181,70,.06), transparent 62%),
    radial-gradient(760px 520px at 90% 85%, rgba(110,92,224,.09), transparent 62%)}
  .section-light{background:
    radial-gradient(640px 400px at 10% 12%, rgba(12,123,158,.10), transparent 60%),
    radial-gradient(720px 480px at 90% 88%, rgba(110,92,224,.10), transparent 62%),
    radial-gradient(900px 480px at 88% -8%, rgba(12,123,158,.05), transparent 60%),
    linear-gradient(180deg, #F2F4FA, var(--surface-0) 18%, #EAEEF6)}
  /* ---- dark glass surfaces ---- */
  .final-box{
    background:linear-gradient(160deg, rgba(34,211,238,.10), rgba(255,255,255,.04));
    backdrop-filter:blur(18px) saturate(150%);
    -webkit-backdrop-filter:blur(18px) saturate(150%);
    border-color:rgba(255,255,255,.14);
    box-shadow:0 8px 32px rgba(2,6,32,.35), inset 0 1px 0 rgba(255,255,255,.1)}
  .btn-ghost{
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-color:rgba(255,255,255,.18)}
  .btn-ghost:hover{background:rgba(255,255,255,.12)}
  /* ---- light glass surfaces (frosted white) ---- */
  .section-light .btn-ghost{
    background:rgba(255,255,255,.5);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-color:rgba(255,255,255,.9);color:var(--text)}
  .section-light .btn-ghost:hover{background:rgba(255,255,255,.75)}
  /* the dark Assist Q&A screenshot panel stays dark — re-assert over generic glass */
  /* partner strip as a glass band */
  .partner-strip{
    background:rgba(255,255,255,.035);
    backdrop-filter:blur(16px) saturate(150%);
    -webkit-backdrop-filter:blur(16px) saturate(150%)}
  /* ---- readable eyebrows: pill treatment everywhere ---- */
  .sec-eye{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);background:var(--cyan-soft);border:1px solid rgba(34,211,238,.28);padding:7px 15px;border-radius:100px;margin-bottom:16px}
  .sec-eye::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 9px currentColor;flex-shrink:0}
  .section-light .sec-eye{background:rgba(12,123,158,.08);border-color:rgba(12,123,158,.32)}

  /* ---------- LARGE-SCREEN PASS (wide monitors) ---------- */
  /* --maxw drives both .wrap and .nav-in, so content and nav widen together
     instead of leaving huge empty margins on large displays. */
  @media(min-width:1600px){
    :root{--maxw:1360px}
  }
  @media(min-width:1920px){
    :root{--maxw:1520px}
  }
  @media(min-width:2400px){
    :root{--maxw:1680px}
  }
  @media(min-width:2800px){
    :root{--maxw:1840px}
  }

  /* ---- TYPE SCALE — XL ----
     The base --fs-* clamps (defined in :root above) finish growing by
     ~1920px (their vw component would otherwise overshoot the max and
     just sit flat for every wider screen). This redefines each variable
     from that same point on, so text keeps scaling continuously with
     viewport width all the way out to ultra-wide/4K instead of going
     flat at normal-desktop size. */
  @media(min-width:1920px){
    :root{
      --fs-h1:clamp(62px,0.9px + 3.18vw,90px);
      --fs-h2:clamp(42px,7.1px + 1.82vw,58px);
      --fs-h3:clamp(33px,4.64px + 1.48vw,46px);
      --fs-h3-card:clamp(30px,3.81px + 1.36vw,42px);
      --fs-h4:clamp(22px,4.55px + 0.91vw,30px);
      --fs-lede:clamp(1.375rem,0.285rem + 0.057vw,1.875rem);
      --fs-body-lg:clamp(1.438rem,0.484rem + 0.05vw,1.875rem);
      --fs-body:clamp(1.25rem,0.432rem + 0.043vw,1.625rem);
      --fs-body-sm:clamp(1.188rem,0.506rem + 0.036vw,1.5rem);
      --fs-caption:clamp(1rem,0.455rem + 0.028vw,1.25rem);
    }
  }
  /* ---- shared: pull quotes ---- */
  .pull{margin-top:48px;text-align:center}
  .pull-line{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:var(--fs-h3);line-height:1.15;letter-spacing:-.025em;color:var(--text);text-align:center}
  .pull-line .pl-dim{color:var(--text-faint);font-weight:500}
  .pull-sm{font-size:var(--fs-h4);margin-top:28px}
  .pull-note{margin-top:14px;font-size:var(--fs-body-sm);color:var(--text-dim)}
  .section-light .pull-line{color:var(--text)}

  /* ---- suite: availability tier labels ---- */
  .tier-label{display:inline-flex;align-items:center;gap:10px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);margin-bottom:20px}
  .tl-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
  .tl-now{background:#22D3EE;box-shadow:0 0 10px #22D3EE}
  .tl-next{background:#9B8CFF;box-shadow:0 0 10px #9B8CFF;opacity:.85}
  .section-light .tl-next{background:#6E5CE0;box-shadow:0 0 10px rgba(110,92,224,.6)}

  /* ---- suite: the two prominent "available now" product cards ---- */
  .suite-now{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
  .pcard{position:relative;display:flex;flex-direction:column;padding:52px 30px 30px;border-radius:22px;text-decoration:none;color:inherit;overflow:hidden;
    background:rgba(255,255,255,.055);
    backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
    border:1.5px solid rgba(255,255,255,.14);
    box-shadow:0 8px 32px rgba(2,6,32,.35), inset 0 1px 0 rgba(255,255,255,.09);
    transition:transform .28s cubic-bezier(.4,0,.2,1),box-shadow .28s,border-color .28s,background .28s}
  .pcard::after{content:"";position:absolute;top:0;left:0;right:0;height:3px}
  .pcard-as{border-color:rgba(34,211,238,.42)}
  .pcard-as::after{background:linear-gradient(90deg,#22D3EE,transparent)}
  .pcard-fo{border-color:rgba(255,181,70,.42)}
  .pcard-fo::after{background:linear-gradient(90deg,#FFB546,transparent)}
  .pcard:hover{transform:translateY(-5px);background:rgba(255,255,255,.085)}
  .pcard-as:hover{border-color:rgba(34,211,238,.7);box-shadow:0 20px 48px -16px rgba(34,211,238,.35)}
  .pcard-fo:hover{border-color:rgba(255,181,70,.7);box-shadow:0 20px 48px -16px rgba(255,181,70,.35)}
  .badge-as{background:rgba(34,211,238,.16);color:#22D3EE;border:1px solid rgba(34,211,238,.45)}
  .badge-fo{background:rgba(255,181,70,.16);color:#FFB546;border:1px solid rgba(255,181,70,.45)}
  .pcard-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
  .pcard-ico{width:52px;height:52px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:rgba(255,255,255,.06);border:1px solid var(--line)}
  .pcard-ico img{width:100%;height:100%;object-fit:cover}
  .pcard-head h3{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:var(--fs-h4);margin:0;letter-spacing:-.02em}
  .pcard-kick{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-faint);display:block;margin-top:4px}
  .pcard-line{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:var(--fs-h3-card);line-height:1.2;letter-spacing:-.02em;color:var(--text);margin-bottom:16px}
  .pcard-body{font-size:var(--fs-body-sm);color:var(--text-dim);line-height:1.65;margin-bottom:22px}
  .pcard-list{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:22px}
  .pcard-list li{position:relative;padding-left:20px;font-size:var(--fs-caption);color:var(--text-dim);line-height:1.55}
  .pcard-list li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:2px}
  .pcard-list.as li::before{background:#22D3EE}
  .pcard-list.fo li::before{background:#FFB546}
  .pcard-list li b{color:var(--text);font-weight:600}
  .pcard-foot{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:var(--fs-caption);color:var(--text);margin-bottom:24px;padding-top:18px;border-top:1px solid var(--line)}
  .pcard-cta{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:12px 22px;border-radius:12px;font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:13.5px;transition:transform .2s,box-shadow .2s,filter .2s}
  .pcard-cta-as{background:#22D3EE;color:#070B2E;box-shadow:0 6px 18px -6px rgba(34,211,238,.5)}
  .pcard-cta-fo{background:#FFB546;color:#070B2E;box-shadow:0 6px 18px -6px rgba(255,181,70,.5)}
  .pcard:hover .pcard-cta{transform:translateY(-2px);filter:brightness(1.06)}
  @media(max-width:900px){
    .suite-now{grid-template-columns:1fr}
    .pcard{padding:48px 24px 26px}
  }

  /* ---- suite: the three "coming next" cards ---- */
  .suite-next{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .ncard{display:flex;flex-direction:column;padding:26px 24px;border-radius:18px;
    background:rgba(255,255,255,.04);
    backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
    border:1px solid rgba(155,140,255,.22);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
    transition:transform .25s,border-color .25s,background .25s}
  .ncard:hover{transform:translateY(-3px);border-color:rgba(155,140,255,.42);background:rgba(255,255,255,.065)}
  .ncard-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
  .ncard-head h4{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:var(--fs-h4);margin:0;letter-spacing:-.015em}
  .ncard-line{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:var(--fs-caption);color:var(--text);line-height:1.4;margin-bottom:10px}
  .ncard p{font-size:var(--fs-caption);color:var(--text-dim);line-height:1.55}
  .section-light .ncard{border-color:rgba(110,92,224,.24)}

  /* ---- suite flow strip ---- */
  .sflow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin-top:22px}
  .sflow-step{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;font-weight:700;letter-spacing:.11em;color:var(--cyan);border:1px solid rgba(34,211,238,.34);background:rgba(34,211,238,.09);border-radius:100px;padding:6px 14px;white-space:nowrap}
  .sflow-arrow{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;color:var(--text-faint);line-height:1}
  .section-light .sflow-step{color:#0C7B9E;border-color:rgba(12,123,158,.34);background:rgba(12,123,158,.07)}
  @media(max-width:560px){ .sflow{gap:7px} .sflow-step{font-size:9.5px;padding:5px 11px} }
  @media(max-width:900px){
    .suite-next{grid-template-columns:1fr}
  }

  /* ---- suite: one-suite common-principle rows ---- */
  .principle{margin-top:64px;padding-top:44px;border-top:1px solid var(--line)}
  .principle-head{margin-bottom:26px;max-width:900px}
  .principle-rows{display:flex;flex-direction:column;gap:2px}
  .prow{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:baseline;padding:16px 4px;border-bottom:1px solid var(--line)}
  .prow:last-child{border-bottom:none}
  .pname{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:var(--fs-h4);letter-spacing:-.02em}
  .pname.as{color:#22D3EE}
  .pname.fo{color:#FFB546}
  .pname.rm{color:#9B8CFF}
  .section-light .pname.as{color:#0C7B9E}
  .section-light .pname.fo{color:#A55C00}
  .section-light .pname.rm{color:#6E5CE0}
  .pdesc{font-size:var(--fs-body-sm);color:var(--text-dim);line-height:1.55}
  @media(max-width:640px){
    .prow{grid-template-columns:1fr;gap:6px}
  }
  .app-note{font-size:var(--fs-caption);color:var(--text-dim);margin-bottom:24px}
  .app-actions + .app-note{margin-top:18px;margin-bottom:0}
  .note-link{color:var(--cyan);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(34,211,238,.45);transition:text-decoration-color .2s,color .2s}
  .note-link:hover,.note-link:focus-visible{text-decoration-color:currentColor}
  .section-light .note-link{text-decoration-color:rgba(12,123,158,.5)}

  /* ---- enterprise section blocks ---- */
  .ent-block{margin-bottom:56px}
  .ent-block:last-of-type{margin-bottom:0}
  .ent-head{max-width:940px;margin-bottom:24px}
  .ent-eye{display:inline-block;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin-bottom:12px}
  .ent-p{font-size:var(--fs-body-sm);color:var(--text-dim);line-height:1.65;margin-top:14px}

  /* ---- capability / attribute chip rows ---- */
  .chiprow{display:flex;flex-wrap:wrap;gap:10px}
  .chiprow span{font-size:var(--fs-caption);font-weight:500;color:var(--text-dim);border:1px solid var(--line-strong);border-radius:100px;padding:9px 17px;background:rgba(255,255,255,.04);transition:border-color .2s,color .2s}
  .chiprow span:hover{border-color:var(--cyan);color:var(--text)}
  .section-light .chiprow span{background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.9);box-shadow:var(--shadow-sm);color:var(--text-dim)}

  /* ---- enterprise control grid (7 dimensions) ---- */
  .ctrl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
  .ctrl{padding:22px 20px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.05);
    backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);transition:transform .25s,border-color .25s}
  .ctrl:hover{transform:translateY(-3px);border-color:var(--line-strong)}
  .ctrl-n{display:block;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:var(--fs-caption);color:var(--text);margin-bottom:8px;letter-spacing:-.01em}
  .ctrl p{font-size:13px;color:var(--text-dim);line-height:1.5}
  .section-light .ctrl{background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.88);box-shadow:var(--shadow-sm)}
  .section-light .ctrl:hover{box-shadow:var(--shadow-md)}

  /* ---- 4-up deployment grid (extends .deploy) ---- */
  .deploy.deploy-4{grid-template-columns:repeat(4,1fr)}
  @media(max-width:1100px){
    .deploy.deploy-4{grid-template-columns:1fr 1fr}
  }
  @media(max-width:640px){
    .deploy.deploy-4{grid-template-columns:1fr}
  }

  /* ---- three-part closing line ---- */
  .triline{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:var(--fs-h4);letter-spacing:-.01em;color:var(--text);text-align:center;margin-top:30px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px}
  .triline span{color:var(--text-dim);font-weight:600}

  /* ---- AI autonomy ladder ---- */
  .ladder{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px}
  .lstep{position:relative;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:13px 20px 13px 22px;border:1px solid var(--line-strong);border-radius:12px;background:rgba(255,255,255,.05);font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:var(--fs-caption);color:var(--text)}
  .lstep:not(:last-child)::after{content:"→";position:absolute;right:-14px;top:50%;transform:translateY(-50%);color:var(--text-faint);font-size:13px;z-index:1}
  .lstep em{font-family:'Inter',system-ui,sans-serif;font-style:normal;font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint)}
  .lstep-cond{border-style:dashed;border-color:rgba(155,140,255,.5);background:rgba(155,140,255,.07)}
  .section-light .lstep{background:rgba(255,255,255,.62);border-color:rgba(255,255,255,.9);box-shadow:var(--shadow-sm)}
  .section-light .lstep-cond{border-color:rgba(110,92,224,.45);background:rgba(110,92,224,.06)}
  @media(max-width:760px){
    .ladder{flex-direction:column}
    .lstep:not(:last-child)::after{content:"↓";right:auto;left:50%;top:auto;bottom:-13px;transform:translateX(-50%)}
  }

  /* ---- "especially relevant for" industry grid ---- */
  .ind-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
  .ind{padding:24px 22px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.05);
    backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
  .ind h4{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.06em;color:var(--cyan);margin-bottom:10px}
  .ind p{font-size:13px;color:var(--text-dim);line-height:1.6}
  .section-light .ind{background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.88);box-shadow:var(--shadow-sm)}

  /* ---- insight-to-action journey chain ---- */
  .journey{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
  .jstep{position:relative;display:flex;flex-direction:column;gap:8px;padding:22px 18px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.05);
    backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
  .jstep::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--cyan),rgba(155,140,255,.6))}
  .jstep-last::before{background:#9B8CFF}
  .jn{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;font-weight:700;letter-spacing:.09em;color:var(--text-faint)}
  .jt{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:var(--fs-h4);letter-spacing:-.02em;color:var(--text)}
  .section-light .jstep{background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.88);box-shadow:var(--shadow-sm)}
  @media(max-width:1000px){
    .journey{grid-template-columns:repeat(3,1fr)}
  }
  @media(max-width:560px){
    .journey{grid-template-columns:1fr 1fr}
  }
  .jnote{margin-top:26px;padding:22px 26px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.04);max-width:980px}
  .jnote p{font-size:var(--fs-body-sm);color:var(--text-dim);line-height:1.7}
  .jnote b{color:var(--text);font-weight:600}
  .section-light .jnote{background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.88);box-shadow:var(--shadow-sm)}

  /* ---- roadmap lifecycle rows ---- */
  .lifecycle{display:flex;flex-direction:column;gap:10px}
  .lc{display:grid;grid-template-columns:150px 1fr auto;gap:24px;align-items:center;padding:20px 24px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.05);
    backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);transition:transform .25s,border-color .25s}
  .lc:hover{transform:translateX(4px);border-color:var(--line-strong)}
  .lc-phase{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--text-faint)}
  .lc-body{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
  .lc-prod{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:var(--fs-h4);letter-spacing:-.02em}
  .lc-prod.as{color:#22D3EE}
  .lc-prod.fo{color:#FFB546}
  .lc-prod.rm{color:#9B8CFF}
  .section-light .lc-prod.as{color:#0C7B9E}
  .section-light .lc-prod.fo{color:#A55C00}
  .section-light .lc-prod.rm{color:#6E5CE0}
  .lc-verb{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:var(--fs-caption);color:var(--text)}
  .lc-body p{flex:1 1 260px;font-size:13px;color:var(--text-dim);line-height:1.5}
  .lc-state{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;border-radius:100px;padding:5px 12px;white-space:nowrap}
  .lc-state.now{color:#22D3EE;border:1px solid rgba(34,211,238,.45);background:rgba(34,211,238,.1)}
  .lc-state.next{color:#9B8CFF;border:1px solid rgba(155,140,255,.4);background:rgba(155,140,255,.08)}
  .section-light .lc{background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.88);box-shadow:var(--shadow-sm)}
  .section-light .lc-state.now{color:#0C7B9E;border-color:rgba(12,123,158,.42);background:rgba(12,123,158,.08)}
  .section-light .lc-state.next{color:#6E5CE0;border-color:rgba(110,92,224,.38);background:rgba(110,92,224,.07)}
  @media(max-width:820px){
    .lc{grid-template-columns:1fr;gap:10px}
    .lc-state{justify-self:start}
  }

  /* ---- why-us: engineering-led block + dual-capability pairing ---- */
  .exp-block{margin-top:56px;padding-top:44px;border-top:1px solid var(--line)}
  .exp-head{max-width:940px;margin-bottom:22px}
  .duo{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;margin-top:44px}
  .duo-card{padding:28px 26px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.05);
    backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
  .duo-card h4{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:var(--fs-h4);margin-bottom:10px;letter-spacing:-.015em}
  .duo-card p{font-size:var(--fs-caption);color:var(--text-dim);line-height:1.6}
  .duo-plus{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:34px;color:var(--cyan);text-align:center}
  .section-light .duo-card{background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.88);box-shadow:var(--shadow-sm)}
  @media(max-width:760px){
    .duo{grid-template-columns:1fr}
    .duo-plus{font-size:26px}
  }

  /* ---- built-with-dynatrace split ---- */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .split-card{padding:32px 28px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.05);
    backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
  .split-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
  .split-ico{display:block;width:44px;height:44px;flex:0 0 44px;object-fit:contain;border-radius:10px}
  .split-head .split-eye{margin-bottom:0}
  .split-eye{display:block;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:var(--fs-h3-card);letter-spacing:-.025em;color:var(--text);margin-bottom:12px}
  .split-card p{font-size:var(--fs-body-sm);color:var(--text-dim);line-height:1.6}
  .split-card-accent{border-color:rgba(34,211,238,.45)}
  .split-card-accent .split-eye{color:var(--cyan)}
  .section-light .split-card{background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.88);box-shadow:var(--shadow-sm)}
  .section-light .split-card-accent{border-color:rgba(12,123,158,.35)}
  @media(max-width:760px){
    .split{grid-template-columns:1fr}
  }

  /* ---- final CTA: two product paths ---- */
  .paths{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .path{position:relative;display:flex;flex-direction:column;padding:34px 30px;border-radius:20px;overflow:hidden;
    background:rgba(255,255,255,.055);
    backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 8px 32px rgba(2,6,32,.35), inset 0 1px 0 rgba(255,255,255,.09)}
  .path::after{content:"";position:absolute;top:0;left:0;right:0;height:3px}
  .path-as::after{background:linear-gradient(90deg,#22D3EE,transparent)}
  .path-fo::after{background:linear-gradient(90deg,#FFB546,transparent)}
  .path-eye{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
  .path-eye.as{color:#22D3EE}
  .path-eye.fo{color:#FFB546}
  .path h3{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:var(--fs-h3-card);line-height:1.2;letter-spacing:-.025em;margin-bottom:14px}
  .path p{font-size:var(--fs-body-sm);color:var(--text-dim);line-height:1.65;margin-bottom:26px}
  @media(max-width:760px){
    .paths{grid-template-columns:1fr}
  }

  /* ---- final band ---- */
  .final-box .sec-eye{margin-bottom:18px}
  .final-sign{margin-top:26px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:var(--fs-caption);letter-spacing:.04em;color:var(--text-dim);position:relative}

  /* ---- nav now carries six entries; tighten before the mobile breakpoint ---- */
  @media(max-width:1180px){
    .nav-links{gap:16px}
    .nav-links a{font-size:13.5px}
  }
  @media(max-width:1000px){
    .nav-links{gap:13px}
    .nav-links a{font-size:12.8px}
  }

  /* ---- example-question cards (Assist: "start with the question") ---- */
  .qgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
  .qcard{position:relative;padding:22px 22px 22px 26px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.05);
    backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
    font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:var(--fs-caption);line-height:1.45;color:var(--text);letter-spacing:-.01em;
    transition:transform .25s,border-color .25s}
  .qcard::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:3px;border-radius:3px;background:var(--cyan);opacity:.7}
  .qcard:hover{transform:translateY(-3px);border-color:var(--line-strong)}
  .section-light .qcard{background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.88);box-shadow:var(--shadow-sm)}

  /* ---- persona cards: role → the question they ask → what they get ---- */
  .persona-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
  .persona{display:flex;flex-direction:column;padding:26px 24px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.05);
    backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);transition:transform .25s,border-color .25s}
  .persona:hover{transform:translateY(-4px);border-color:var(--line-strong)}
  .persona-role{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--cyan);margin-bottom:14px}
  .persona-q{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:var(--fs-caption);line-height:1.45;color:var(--text);letter-spacing:-.01em;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line)}
  .persona p{font-size:13px;color:var(--text-dim);line-height:1.6}
  .section-light .persona{background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.88);box-shadow:var(--shadow-sm)}
  .theme-finops .persona-role,.theme-finops .qcard::before{color:var(--amber)}
  .theme-finops .qcard::before{background:var(--amber)}

  /* ---- grid balance: avoid a single orphaned card on the last row ----
     The doc-driven sets are 5, 6 and 7 items long; auto-fit would put
     4 or 5 across on wide screens and leave one card stranded. Fixed
     column counts split them 4+3 / 3+2 instead. */
  @media(min-width:1100px){
    .ctrl-grid{grid-template-columns:repeat(4,1fr)}
    .ind-grid{grid-template-columns:repeat(3,1fr)}
    .qgrid{grid-template-columns:repeat(3,1fr)}
  }

  /* ---- built-stats: keep the big stat words inside the card on phones ----
     .bn renders at 34px, so a two-column grid below ~460px can't fit words
     like "Endorsed" and the cards pushed the page into horizontal scroll. */
  @media(max-width:560px){
    .bstat{padding:20px}
    .bstat .bn{font-size:26px;overflow-wrap:anywhere}
  }
  @media(max-width:460px){
    .built-stats{grid-template-columns:1fr}
    .bstat .bn{font-size:30px}
  }

  /* ---------- COOKIE CONSENT BANNER (assets/js/consent.js) ----------
     A bar along the bottom, above page content but below the lightbox and
     dialogs; it never blocks the page, so visitors can read on without
     choosing. */
  .consent-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;max-width:760px;margin:0 auto;
    display:flex;align-items:center;gap:18px;padding:16px 18px;border-radius:14px;
    background:var(--navy-800);border:1px solid var(--line-strong);box-shadow:0 18px 40px -12px rgba(0,0,0,.55)}
  .consent-banner[hidden]{display:none}
  .consent-text{flex:1;font-size:14px;line-height:1.5;color:var(--text-dim)}
  .consent-text a{color:var(--cyan);font-weight:600}
  .consent-actions{display:flex;gap:10px;flex-shrink:0}
  @media(max-width:560px){
    .consent-banner{flex-direction:column;align-items:stretch;gap:12px;bottom:12px;left:12px;right:12px}
    .consent-actions .btn{flex:1;justify-content:center}
  }