/* PAGE-BODY CSS (self-contained) — universal-gateway (platform/universal-gateway)
   Extracted verbatim from CEO-approved deterministic desktop HTML.
   Shared header/footer styled by global.css (loaded after this file). */

/* ==========================================================
   PAGE CONTENT — CEO-APPROVED v5 DESKTOP BASELINE
   ========================================================== */

  :root{
    --navy:#061c2e;
    --navy2:#08253b;
    --navy3:#0b314c;
    --off:#f5f6f4;
    --soft:#ecefed;
    --ink:#102337;
    --muted:#566878;
    --gold:#f6aa00;
    --gold2:#f0bd36;
    --cyan:#4cc9e8;
    --blue:#1f67ad;
    --purple:#8d4fba;
    --line:#d4dbe0;
    --white:#fff;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:#fff;color:var(--ink);font-family:Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased}
  body{width:1440px;overflow-x:hidden}
  .page{width:1440px;margin:0 auto;background:#fff}
  .container{width:1240px;margin:0 auto}
  .section{padding:60px 0}
  .dark{background:var(--navy);color:#fff}
  .light{background:var(--off);color:var(--ink)}
  .soft{background:var(--soft);color:var(--ink)}

  .header{height:92px;background:#041827;color:#fff;display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.09)}
  .header .container{display:flex;align-items:center;height:100%;gap:34px}
  .brand{width:122px;height:38px;flex:0 0 auto}
  .brand svg{display:block;width:100%;height:100%}
  .nav{display:flex;align-items:center;gap:28px;margin-left:auto;white-space:nowrap}
  .nav a{font-size:18px;line-height:1;color:#dce7ee;text-decoration:none;font-weight:500}
  .nav a:hover{color:#fff}
  .nav-cta{font-size:18px;line-height:1;border:1px solid #178cff;background:#178cff;color:#fff;padding:14px 18px;border-radius:4px;text-decoration:none;margin-left:8px;box-shadow:0 8px 22px rgba(23,140,255,.25)}

  .eyebrow{font-size:24px;line-height:1.2;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gold);margin:0 0 22px}
  .light .eyebrow,.soft .eyebrow{color:#9b6d00}
  h1,h2,h3,p{margin-top:0}
  h1{font-size:64px;line-height:1.035;letter-spacing:-.035em;font-weight:650;margin-bottom:26px;max-width:790px}
  h2{font-size:46px;line-height:1.08;letter-spacing:-.025em;font-weight:650;margin-bottom:22px;max-width:980px}
  .body{font-size:20px;line-height:1.55;margin-bottom:0;max-width:960px}
  .support{font-size:18px;line-height:1.5;font-weight:600;color:#9edff0;margin-top:28px;margin-bottom:0;max-width:760px}
  .light .support,.soft .support{color:var(--blue)}
  .buttons{display:flex;gap:14px;align-items:center;margin-top:30px}
  .btn{display:inline-flex;align-items:center;gap:11px;min-height:52px;padding:0 20px;border-radius:4px;font-size:18px;font-weight:600;text-decoration:none}
  .btn.primary{background:var(--gold2);color:#09213a;border:1px solid var(--gold2)}
  .btn.secondary{background:#178cff;border:1px solid #178cff;color:#fff;box-shadow:0 8px 22px rgba(23,140,255,.22)}
  .light .btn.secondary,.soft .btn.secondary{background:#178cff;border-color:#178cff;color:#fff}
  .btn .arr{font-size:22px;transform:translateY(-1px)}

  /* Hero */
  .hero{position:relative;overflow:hidden;background:linear-gradient(115deg,#041827 0%,#08253b 57%,#0a2c44 100%)}
  .hero:before{display:none}
  .hero:after{display:none}
  .hero-grid{display:grid;grid-template-columns:1.03fr .97fr;gap:60px;align-items:center;position:relative;z-index:2}
  .hero-copy{padding-right:6px;align-self:start}
  .hero .body{color:#d5e3eb;max-width:720px}
  .hero-visual{min-height:540px;position:relative;display:flex;align-items:center;justify-content:center}
  .hero-ring{position:absolute;width:560px;height:390px;border:1px solid rgba(76,201,232,.22);border-radius:50%;transform:rotate(-8deg)}
  .hero-ring.r2{width:650px;height:470px;opacity:.5;transform:rotate(9deg)}
  .hero-ring.r3{width:430px;height:310px;opacity:.55;transform:rotate(28deg)}
  .gateway-img{position:relative;width:650px;height:auto;filter:drop-shadow(0 34px 26px rgba(0,0,0,.5));transform:translateY(10px)}
  .hero-node{position:absolute;width:10px;height:10px;background:var(--cyan);border-radius:50%;box-shadow:0 0 16px rgba(76,201,232,.95)}
  .hero-node.n1{right:88px;top:112px}.hero-node.n2{right:24px;bottom:106px}.hero-node.n3{left:74px;top:154px}.hero-node.n4{left:38px;bottom:148px}

  .section-head{max-width:1030px}
  .section-head .body{max-width:970px;color:inherit;opacity:.85}
  .dark .section-head .body{color:#c7d6df;opacity:1}
  .cards{display:grid;gap:18px;margin-top:46px}
  .cards.four{grid-template-columns:repeat(4,1fr)}
  .cards.five{grid-template-columns:repeat(5,1fr)}
  .card{position:relative;min-height:220px;border:1px solid rgba(18,49,73,.18);background:rgba(255,255,255,.6);padding:28px 26px;border-radius:6px;overflow:hidden}
  .dark .card{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.16)}
  .card:before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:linear-gradient(90deg,var(--gold),transparent 80%)}
  .card .icon{width:60px;height:60px;margin-bottom:24px;color:var(--blue)}
  .dark .card .icon{color:var(--gold2)}
  .card .icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2.15;stroke-linecap:round;stroke-linejoin:round}
  .card h3{font-size:22px;line-height:1.2;font-weight:650;margin-bottom:12px;color:inherit}
  .card p{font-size:18px;line-height:1.48;color:var(--muted);margin-bottom:0}
  .dark .card p{color:#c1d0d9}

  /* connectivity */
  .protocol-rail{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:38px;margin-bottom:-4px}
  .chip{font-size:15px;font-weight:650;letter-spacing:.03em;padding:8px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.22);color:#bce6f1;background:rgba(76,201,232,.06)}
  .connect-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:36px}
  .connect-grid .card{min-height:248px}
  .section-cta{margin-top:38px}

  /* AI */
  .ai-layout{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
  .ai-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:40px}
  .ai-cards .card{min-height:246px}
  .ai-visual{position:sticky;top:30px;margin-top:62px;min-height:530px;border:1px solid #c9d3da;background:linear-gradient(145deg,#f8faf9,#e8eeec);border-radius:8px;padding:34px;overflow:hidden}
  .ai-visual:before{content:"";position:absolute;inset:-40% -10%;background-image:radial-gradient(circle at center,rgba(31,103,173,.14) 0 1px,transparent 1px);background-size:25px 25px;transform:rotate(18deg)}
  .ai-center{position:absolute;left:50%;top:50%;width:220px;height:220px;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(31,103,173,.35);display:flex;align-items:center;justify-content:center;background:#fff;box-shadow:0 16px 40px rgba(16,35,55,.12)}
  .ai-center img{width:190px;filter:drop-shadow(0 12px 14px rgba(16,35,55,.2))}
  .ai-orbit{position:absolute;left:50%;top:50%;border:1px solid rgba(31,103,173,.18);border-radius:50%;transform:translate(-50%,-50%)}
  .ai-orbit.o1{width:410px;height:410px}.ai-orbit.o2{width:520px;height:520px;border-style:dashed}
  .ai-dot{position:absolute;width:16px;height:16px;border-radius:50%;background:var(--gold2);box-shadow:0 0 0 7px rgba(215,167,43,.12)}
  .ai-dot.d1{left:66px;top:90px}.ai-dot.d2{right:60px;top:124px}.ai-dot.d3{left:92px;bottom:82px}.ai-dot.d4{right:74px;bottom:70px}
  .govern{margin-top:18px;padding:28px 28px 28px 96px;position:relative;border-left:4px solid var(--gold);background:#fff;border-radius:4px;box-shadow:0 10px 22px rgba(16,35,55,.06)}
  .govern .icon{position:absolute;left:24px;top:24px;width:50px;height:50px;color:var(--blue)}
  .govern .icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.8}
  .govern h3{font-size:22px;margin-bottom:8px}.govern p{font-size:18px;line-height:1.48;margin:0;color:var(--muted)}

  /* managed */
  .fleet-viz{margin-top:50px;display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
  .fleet-diagram{height:350px;position:relative;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));overflow:hidden}
  .fleet-diagram:before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(76,201,232,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(76,201,232,.045) 1px,transparent 1px);background-size:38px 38px}
  .fleet-core{position:absolute;left:50%;top:50%;width:116px;height:116px;border-radius:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;border:1px solid rgba(76,201,232,.55);background:#082840;box-shadow:0 0 45px rgba(76,201,232,.18)}
  .fleet-core svg{width:56px;height:56px;stroke:var(--cyan);fill:none;stroke-width:1.7}
  .site{position:absolute;width:70px;height:70px;border-radius:5px;border:1px solid rgba(255,255,255,.24);background:#0b314c;display:flex;align-items:center;justify-content:center}
  .site svg{width:36px;height:36px;stroke:var(--gold2);fill:none;stroke-width:1.7}
  .site.s1{left:62px;top:54px}.site.s2{right:54px;top:56px}.site.s3{left:76px;bottom:54px}.site.s4{right:66px;bottom:52px}
  .wire{position:absolute;height:1px;background:linear-gradient(90deg,rgba(76,201,232,.15),rgba(76,201,232,.85),rgba(76,201,232,.15));transform-origin:left center}
  .wire.w1{left:131px;top:107px;width:205px;transform:rotate(17deg)}.wire.w2{left:364px;top:174px;width:183px;transform:rotate(-22deg)}.wire.w3{left:145px;bottom:101px;width:190px;transform:rotate(-19deg)}.wire.w4{left:361px;top:180px;width:196px;transform:rotate(24deg)}
  .managed-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
  .managed-cards .card{min-height:214px}

  /* stack */
  .architecture{margin-top:42px;padding:32px;background:#fff;border:1px solid #ccd5db;border-radius:7px;box-shadow:0 14px 28px rgba(16,35,55,.06)}
  .arch-flow{display:grid;grid-template-columns:1.35fr 38px 1.05fr 38px .9fr 38px 1.35fr;gap:10px;align-items:center}
  .arch-node{min-height:122px;border:1px solid #c7d3db;background:#f7f9f8;border-radius:5px;padding:20px 16px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:17px;line-height:1.35;font-weight:650;color:#1d3a53}
  .arch-node.gateway{background:#0b314c;color:#fff;border-color:#0b314c;box-shadow:inset 0 3px 0 var(--cyan)}
  .arch-node.ai{background:#eaf3f7;color:#173a57;border-color:#b9d6e3}
  .arch-arrow{font-size:28px;text-align:center;color:#a77909;font-weight:500}
  .choices{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
  .choice{min-height:190px;background:#fff;border:1px solid #ccd5db;border-radius:6px;padding:26px 24px}
  .choice h3{font-size:21px;margin-bottom:11px;color:#9b6d00}.choice p{font-size:18px;line-height:1.5;color:var(--muted);margin:0}

  /* outcomes */
  .outcomes-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:42px}
  .outcome{min-height:126px;border:1px solid rgba(255,255,255,.18);border-radius:6px;background:rgba(255,255,255,.05);padding:20px;display:flex;align-items:center;gap:16px;font-size:18px;line-height:1.35;font-weight:600;color:#fff}
  .outcome .mini{width:50px;height:50px;flex:0 0 auto;color:var(--gold2)}
  .outcome .mini svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2.15;stroke-linecap:round;stroke-linejoin:round}
  .closing-panel{margin-top:32px;border:1px solid rgba(255,255,255,.18);border-left:4px solid var(--gold2);background:rgba(255,255,255,.055);padding:32px 34px;border-radius:6px;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center}
  .closing-panel p{font-size:20px;line-height:1.5;margin:0;color:#d3e0e7;max-width:780px}
  .related{margin-top:26px;font-size:16px;color:#9edff0;letter-spacing:.01em}

  .footer{background:#031522;color:#fff;padding:60px 0}
  .footer .container{display:grid;grid-template-columns:180px 1fr;gap:54px;align-items:start}
  .footer-nav{display:grid;grid-template-columns:repeat(7,1fr);gap:18px}
  .footer-nav a{font-size:15px;line-height:1.4;color:#c6d4dd;text-decoration:none}

  @media print{body,.page{width:1440px}}

  /* Approved corrections — deterministic */
  .hero-ring,.hero-node{display:none!important}
  .protocol-rail{display:none!important}
  .card .icon{width:60px!important;height:60px!important;margin-bottom:22px}
  .card .icon svg{stroke-width:2.15!important}
  .ai-empty{min-height:1px}
  .ai-workflow{grid-column:1/-1;margin-top:42px;border:1px solid #c9d3da;background:#fff;border-radius:8px;padding:28px 30px 24px;box-shadow:0 12px 28px rgba(16,35,55,.06)}
  .flow-label{font-size:18px;font-weight:750;letter-spacing:.08em;color:#9b6d00;margin-bottom:18px}
  .flow-grid{display:grid;grid-template-columns:1fr 44px 1.12fr 44px 1.18fr 44px 1.12fr;gap:10px;align-items:stretch}
  .flow-node{min-height:160px;border:1px solid #bfcbd3;border-radius:7px;background:linear-gradient(180deg,#fff,#f5f8f8);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px 16px;font-size:18px;line-height:1.28;font-weight:700;color:#15324b}
  .flow-icon{width:56px;height:56px;color:#1f67ad;margin-bottom:12px}
  .flow-icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2.15;stroke-linecap:round;stroke-linejoin:round}
  .flow-arrow{display:flex;align-items:center;justify-content:center;font-size:38px;color:#b78308;font-weight:500}
  .flow-exact{margin-top:18px;padding-top:16px;border-top:1px solid #d8dfe3;font-size:16px;line-height:1.45;color:#526779;font-weight:600}
  .govern{grid-column:1/-1}
  .fleet-empty{min-height:1px}
  .managed-cards .card .icon{width:58px!important;height:58px!important}
  .outcome .mini{width:50px!important;height:50px!important}

  /* AI section after product-image removal: preserve the original left editorial column, use full width only for the requested workflow and governance callout. */
  .ai-layout{display:block!important}
  .ai-layout > div:first-child{width:56%;max-width:700px}
  .ai-workflow{width:100%!important;grid-column:auto!important}
  .govern{width:100%!important;grid-column:auto!important}


  /* v2 requested refinements: impactful icons + full-width 4-card spacing */
  .card .icon{width:70px!important;height:70px!important;margin-bottom:22px!important;padding:9px;border-radius:14px;background:rgba(31,103,173,.08);border:1px solid rgba(31,103,173,.20);display:flex;align-items:center;justify-content:center}
  .dark .card .icon{background:rgba(240,189,54,.10);border-color:rgba(240,189,54,.28);color:var(--gold2)}
  .card .icon svg{stroke-width:2.45!important}
  .flow-icon{width:64px!important;height:64px!important;padding:7px;border-radius:13px;background:rgba(31,103,173,.08);border:1px solid rgba(31,103,173,.18);display:flex;align-items:center;justify-content:center}
  .flow-icon svg{stroke-width:2.4!important}
  .govern .icon{width:58px!important;height:58px!important;padding:6px;border-radius:12px;background:rgba(31,103,173,.08);border:1px solid rgba(31,103,173,.18)}
  .govern .icon svg{stroke-width:2.25!important}
  .outcome .mini{width:56px!important;height:56px!important;padding:7px;border-radius:12px;background:rgba(240,189,54,.09);border:1px solid rgba(240,189,54,.25);display:flex;align-items:center;justify-content:center}
  .outcome .mini svg{stroke-width:2.45!important}

  /* NXP eIQ: distribute the four existing cards evenly across the full section. */
  .ai-layout > div:first-child{width:100%!important;max-width:none!important}
  .ai-cards{grid-template-columns:repeat(4,1fr)!important;gap:22px!important;margin-top:40px!important}
  .ai-cards .card{min-height:300px!important}

  /* Operate the Edge at Scale: distribute the four existing cards across the section. */
  .fleet-viz{display:block!important;margin-top:46px!important}
  .fleet-empty{display:none!important}
  .managed-cards{grid-template-columns:repeat(4,1fr)!important;gap:22px!important;width:100%!important}
  .managed-cards .card{min-height:290px!important}
  .managed-cards .card .icon{width:70px!important;height:70px!important}


/* ==========================================================
   GLOBAL HEADER / GLOBAL FOOTER — CURRENT v2 LINKEDIN ONLY
   Visual implementation copied from the approved global component.
   Global CSS variables are namespaced only to prevent page-token collisions.
   ========================================================== */

  :root {
    --ghf-navy:#001733;
    --ghf-navy-2:#00213f;
    --ghf-navy-3:#082b4f;
    --ghf-cyan:#6ec6e9;
    --ghf-cyan-muted:#335d7c;
    --ghf-gold:#f6aa00;
    --ghf-white:#ffffff;
    --ghf-text-muted:#a9bdd1;
    --ghf-page-bg:#f4f7fa;
    --ghf-focus:#9adcf5;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--ghf-page-bg);color:#081c37;font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
  a{text-underline-offset:3px}
  button,a{-webkit-tap-highlight-color:transparent}
  :focus-visible{outline:3px solid var(--ghf-focus);outline-offset:3px}

  /* ==========================================================
     GLOBAL HEADER — desktop values match approved v3 LinkedIn-only master.
     Route note: replace handoff hrefs with final sitemap/CMS URLs.
     Active nav can be set with body[data-active-nav], e.g. Solutions.
     ========================================================== */
  .site-header{position:relative;z-index:1000;height:82px;background:linear-gradient(90deg,var(--ghf-navy-2) 0%,var(--ghf-navy) 45%,#00142d 100%);color:#fff;border-bottom:1px solid rgba(110,198,233,.18)}
  .header-inner{height:100%;padding:0 30px;display:grid;grid-template-columns:180px 1fr 164px;align-items:center;gap:20px;max-width:1440px;margin:0 auto}
  .logo-wrap{display:flex;align-items:center;width:max-content}
  .logo{display:block;width:108px;height:auto}
  .primary-nav{display:flex;align-items:stretch;justify-content:center;height:100%;gap:0}
  .nav-link{position:relative;min-width:102px;height:100%;display:flex;align-items:center;justify-content:center;padding:4px 16px 0;color:#fff;text-decoration:none;font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
  .nav-link::after{content:"";position:absolute;left:9px;right:9px;bottom:10px;height:2px;background:rgba(110,198,233,.18)}
  .nav-link.active::after,.nav-link[aria-current="page"]::after{background:var(--ghf-gold);height:3px}
  .nav-link:hover{color:#fff}
  .header-actions{justify-self:end;display:flex;align-items:center;gap:10px}
  .header-cta,.footer-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:40px;padding:0 18px;border:2px solid var(--ghf-gold);border-radius:4px;color:var(--ghf-gold);font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap}
  .arrow{font-size:18px;line-height:1;margin-top:-1px}
  .menu-toggle{display:none;width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.35);border-radius:4px;background:transparent;color:#fff;align-items:center;justify-content:center;cursor:pointer}
  .menu-toggle-lines{width:20px;height:14px;position:relative;display:block}
  .menu-toggle-lines::before,.menu-toggle-lines::after,.menu-toggle-lines span{content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor;border-radius:2px;transition:transform .18s ease,opacity .18s ease,top .18s ease}
  .menu-toggle-lines::before{top:0}
  .menu-toggle-lines span{top:6px}
  .menu-toggle-lines::after{top:12px}
  .site-header.menu-open .menu-toggle-lines::before{top:6px;transform:rotate(45deg)}
  .site-header.menu-open .menu-toggle-lines span{opacity:0}
  .site-header.menu-open .menu-toggle-lines::after{top:6px;transform:rotate(-45deg)}

  /* PAGE CONTENT PLACEHOLDER ONLY — demonstrates standard section spacing. */
  .page-content-placeholder{min-height:420px;padding:60px 30px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#f9fbfd 0%,#f3f6f9 100%);border-bottom:1px solid #e1e8ef}
  .placeholder-note{max-width:680px;text-align:center;color:#73869a}
  .placeholder-note strong{display:block;color:#486079;font-size:24px;line-height:1.2;margin-bottom:8px}
  .placeholder-note span{font-size:14px;line-height:1.5}

  /* ==========================================================
     GLOBAL FOOTER — desktop values match approved v3 LinkedIn-only master.
     ========================================================== */
  .site-footer{background:linear-gradient(90deg,#00203e 0%,var(--ghf-navy) 44%,#00142d 100%);color:#fff;border-top:1px solid rgba(110,198,233,.16)}
  .footer-main{padding:36px 30px 24px;max-width:1440px;margin:0 auto}
  .footer-top{min-height:94px;display:grid;grid-template-columns:220px 1fr 164px;align-items:center;gap:20px}
  .footer-brand .logo{width:116px}
  .footer-nav{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:nowrap}
  .footer-nav a{position:relative;color:#fff;text-decoration:none;font-size:14px;font-weight:600;padding:10px 12px 13px;white-space:nowrap}
  .footer-nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:5px;height:1px;background:rgba(110,198,233,.26)}
  .footer-cta{justify-self:end}
  .footer-divider{height:1px;background:rgba(110,198,233,.18)}

  .utility-wrap{padding:20px 30px 18px;max-width:1440px;margin:0 auto}
  .utility-grid{border:1px solid rgba(246,170,0,.72);border-radius:8px;display:grid;grid-template-columns:repeat(7,1fr);overflow:hidden;background:rgba(255,255,255,.015)}
  .utility-item{min-height:70px;display:flex;align-items:center;justify-content:center;gap:10px;padding:12px;color:#dfeaf3;text-decoration:none;font-size:13.5px;font-weight:600;text-align:left;white-space:nowrap}
  .utility-item + .utility-item{border-left:1px solid rgba(246,170,0,.45)}
  .utility-item svg{width:25px;height:25px;flex:0 0 25px;stroke:#88bfe0;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .utility-item.talk{color:#fff}
  .utility-item.talk svg{stroke:var(--ghf-gold)}

  .footer-bottom{max-width:1440px;margin:0 auto;padding:12px 30px 18px;display:flex;align-items:center;justify-content:space-between;color:#8fa6ba;font-size:11px}
  .footer-bottom-left{display:flex;gap:18px;align-items:center}
  .socials{display:flex;align-items:center;gap:9px}
  .social{width:24px;height:24px;border:1px solid rgba(255,255,255,.55);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;font-size:11px;font-weight:700}

  /* TABLET — responsive derivative of approved desktop master. */
  @media (max-width:1100px){
    .header-inner{grid-template-columns:1fr auto;padding:0 24px;gap:12px}
    .logo{width:104px}
    .header-actions{grid-column:2;grid-row:1}
    .menu-toggle{display:inline-flex}
    .primary-nav{display:none;position:absolute;left:0;right:0;top:82px;height:auto;padding:16px 24px 20px;background:linear-gradient(90deg,var(--ghf-navy-2) 0%,var(--ghf-navy) 45%,#00142d 100%);border-top:1px solid rgba(110,198,233,.15);border-bottom:1px solid rgba(110,198,233,.22);box-shadow:0 14px 24px rgba(0,15,35,.24);grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 20px}
    .site-header.menu-open .primary-nav{display:grid}
    .nav-link{min-width:0;height:52px;justify-content:flex-start;padding:0 12px;font-size:15px}
    .nav-link::after{left:12px;right:12px;bottom:5px}
    .page-content-placeholder{padding:64px 24px;min-height:360px}

    .footer-main{padding:32px 24px 22px}
    .footer-top{grid-template-columns:1fr auto;gap:18px;min-height:0}
    .footer-brand .logo{width:112px}
    .footer-cta{grid-column:2;grid-row:1}
    .footer-nav{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 12px;justify-content:stretch}
    .footer-nav a{padding:12px 10px 14px}
    .utility-wrap{padding:18px 24px 16px}
    .utility-grid{grid-template-columns:repeat(4,1fr)}
    .utility-item{justify-content:flex-start;white-space:normal;border-left:1px solid rgba(246,170,0,.45);border-top:1px solid rgba(246,170,0,.45)}
    .utility-item:nth-child(-n+4){border-top:0}
    .utility-item:nth-child(4n+1){border-left:0}
    .footer-bottom{padding:12px 24px 18px}
  }

  /* MOBILE — all approved content remains present; no content is omitted. */
  @media (max-width:700px){
    .header-inner{padding:0 16px;gap:8px}
    .logo{width:96px}
    .header-actions{gap:8px}
    .header-cta{padding:0 12px}
    .primary-nav{padding:12px 16px 18px;grid-template-columns:1fr}
    .nav-link{height:50px;padding:0 8px}
    .nav-link::after{left:8px;right:8px}
    .page-content-placeholder{padding:48px 16px;min-height:300px}
    .placeholder-note strong{font-size:22px}

    .footer-main{padding:30px 16px 20px}
    .footer-top{grid-template-columns:1fr;gap:18px;align-items:start}
    .footer-brand .logo{width:108px}
    .footer-cta{grid-column:1;grid-row:auto;justify-self:start}
    .footer-nav{grid-column:1;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px}
    .footer-nav a{padding:11px 8px 13px}
    .footer-nav a::after{left:8px;right:8px}
    .utility-wrap{padding:16px}
    .utility-grid{grid-template-columns:repeat(2,1fr)}
    .utility-item{min-height:70px;padding:12px 10px}
    .utility-item:nth-child(-n+4){border-top:1px solid rgba(246,170,0,.45)}
    .utility-item:nth-child(4n+1){border-left:1px solid rgba(246,170,0,.45)}
    .utility-item:nth-child(-n+2){border-top:0}
    .utility-item:nth-child(odd){border-left:0}
    .footer-bottom{padding:12px 16px 18px;gap:16px;align-items:flex-start}
  }

  @media (max-width:420px){
    .header-cta{height:38px;padding:0 10px;font-size:13px}
    .arrow{font-size:17px}
    .utility-grid{grid-template-columns:1fr}
    .utility-item{border-left:0!important;border-top:1px solid rgba(246,170,0,.45)!important}
    .utility-item:first-child{border-top:0!important}
    .footer-bottom{flex-direction:column}
    .socials{align-self:flex-start}
  }

  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .menu-toggle-lines::before,.menu-toggle-lines::after,.menu-toggle-lines span{transition:none}
  }



/* ==========================================================
   PAGE-SPECIFIC RESPONSIVE RULES
   Conservative reflow of the CEO-approved v5 desktop body.
   Tablet/mobile comps have not been independently CEO-approved.
   ========================================================== */
html{scroll-behavior:smooth}
html,body{width:100%;max-width:100%}
body{width:auto;overflow-x:hidden;background:#fff;color:var(--ink);font-family:Inter,Arial,sans-serif}
.page{width:100%;max-width:none;margin:0;background:#fff}
.container{width:min(1240px,calc(100% - 80px));margin-inline:auto}
.ai-workflow,.architecture{max-width:100%}
.skip-link{position:fixed;left:16px;top:12px;z-index:9999;transform:translateY(-150%);background:#fff;color:var(--navy);padding:10px 14px;border-radius:4px;font-weight:700;text-decoration:none;transition:transform .15s ease}
.skip-link:focus{transform:translateY(0)}
.site-header,.site-footer{font-family:Arial,Helvetica,sans-serif}

@media (max-width:1199px){
  .container{width:min(calc(100% - 64px),1040px)}
  h1{font-size:56px}
  h2{font-size:42px}
  .hero-grid{grid-template-columns:1fr .82fr;gap:34px}
  .gateway-img{width:540px}
  .hero-visual{min-height:460px}
  .cards.four{grid-template-columns:repeat(2,1fr)}
  .connect-grid{grid-template-columns:repeat(2,1fr)}
  .connect-grid .card:last-child{grid-column:1/-1}
  .ai-cards{grid-template-columns:repeat(2,1fr)!important}
  .ai-cards .card{min-height:260px!important}
  .managed-cards{grid-template-columns:repeat(2,1fr)!important}
  .managed-cards .card{min-height:250px!important}
  .outcomes-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:900px){
  .section{padding:48px 0}
  .container{width:calc(100% - 56px)}
  .hero-grid{grid-template-columns:1fr;gap:22px}
  .hero-copy{padding-right:0}
  .hero-visual{min-height:0;padding-top:12px}
  .gateway-img{width:min(650px,88vw);transform:none}
  h1{font-size:52px;max-width:760px}
  h2{font-size:38px}
  .eyebrow{font-size:20px;margin-bottom:18px}
  .body{font-size:19px}
  .support{font-size:18px}
  .card h3{font-size:21px}
  .card p,.choice p,.govern p{font-size:17px}
  .card .icon{width:64px!important;height:64px!important}
  .flow-grid,.arch-flow{display:flex;flex-direction:column;align-items:stretch;gap:12px}
  .flow-arrow,.arch-arrow{height:34px;line-height:34px;transform:rotate(90deg);align-self:center}
  .flow-node,.arch-node{min-height:auto;padding:20px}
  .choices{grid-template-columns:1fr}
  .choice{min-height:0}
  .closing-panel{grid-template-columns:1fr;align-items:start}
  .closing-panel .buttons{margin-top:0!important}
}

@media (max-width:640px){
  .section{padding:40px 0}
  .container{width:calc(100% - 36px)}
  h1{font-size:42px;line-height:1.04;letter-spacing:-.03em;margin-bottom:22px}
  h2{font-size:34px;line-height:1.09;margin-bottom:18px}
  .eyebrow{font-size:18px;line-height:1.25;letter-spacing:.045em;margin-bottom:16px}
  .body{font-size:18px;line-height:1.52}
  .support{font-size:17px;line-height:1.45;margin-top:22px}
  .buttons{flex-direction:column;align-items:stretch;gap:10px;margin-top:26px}
  .btn{width:100%;justify-content:space-between;min-height:50px;font-size:17px}
  .hero-visual{padding-top:8px}
  .gateway-img{width:100%}
  .cards{margin-top:34px}
  .cards.four,.connect-grid,.ai-cards,.managed-cards,.outcomes-grid{grid-template-columns:1fr!important;gap:14px!important}
  .connect-grid .card:last-child{grid-column:auto}
  .card,.connect-grid .card,.ai-cards .card,.managed-cards .card{min-height:0!important;padding:24px 22px}
  .card .icon,.managed-cards .card .icon{width:60px!important;height:60px!important;margin-bottom:18px!important}
  .card h3{font-size:21px;margin-bottom:10px}
  .card p{font-size:17px}
  .section-cta{margin-top:30px}
  .ai-workflow{margin-top:34px;padding:24px 20px}
  .flow-label{font-size:17px;margin-bottom:16px}
  .flow-icon{width:58px!important;height:58px!important}
  .flow-node{font-size:17px}
  .govern{padding:88px 22px 24px;margin-top:14px}
  .govern .icon{left:22px;top:20px}
  .fleet-viz{margin-top:34px!important}
  .architecture{margin-top:34px;padding:22px 18px}
  .choices{margin-top:18px;gap:14px}
  .outcome{min-height:108px;padding:18px;font-size:17px}
  .outcome .mini{width:52px!important;height:52px!important}
  .closing-panel{margin-top:26px;padding:24px 22px;gap:22px}
  .closing-panel p{font-size:18px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}