/* FlipPraxis Update 50: homepage restructuring (Global UX & SEO strategy, November 2026)
   Brand: navy #152749 / #0C1830 carries structure, logo gold #EBC05D marks actions and emphasis.
   Loaded last on every page with the main menu. Home-only rules are scoped to body[data-page="home"]. */

:root{--gold-hi:#F5C443;--pill:999px;--r-card:18px;--shadow-soft:0 18px 40px -22px rgba(12,24,48,.35)}

/* =========================================================
   1. Main menu: six groups, search, gold call to action
   ========================================================= */
.nav-search{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-left:8px;border:0;border-radius:var(--r);background:none;color:var(--navy-d);font-size:21px;cursor:pointer}
.nav-search:hover{background:var(--mist)}
.nav-search:focus-visible{outline:3px solid var(--gold);outline-offset:1px}
.nav-cta.btn-gold{gap:8px;border-radius:10px;padding:11px 18px;font-size:15px;color:var(--navy-d)}
.nav-cta.btn-gold i{font-size:18px}
.nav-cta.btn-gold:hover,.nav-cta.btn-gold:focus-visible{background:var(--gold-d);box-shadow:none}

/* six short groups fit from 1181 px; the old 1301 px squeeze rules are relaxed */
@media (min-width:1181px){
  .nav-menu{display:flex!important;gap:4px;margin-left:auto}
  .nav-burger{display:none!important}
  .mob-menu{display:none!important}
  .nav-logo img{height:50px}
  .nav-dd-btn{padding:9px 12px;font-size:15.5px;font-weight:600;color:var(--navy-d);gap:6px}
  .nav-dd-btn i{font-size:13px}
  .nav-links{flex:1;justify-content:flex-end}
  .nav-links .nav-signin{display:inline-flex}
}
@media (min-width:1181px) and (max-width:1366px){
  .nav{padding-left:18px;padding-right:18px;gap:12px}
  .nav-logo img{height:42px}
  .nav-dd-btn{padding:8px 8px;font-size:14.5px}
  .nav-cta.btn-gold{padding:10px 13px;font-size:14px;margin-left:4px}
  .nav-cta.btn-gold i{display:none}
  .nav-search{margin-left:2px}
}
/* below the desktop menu the search and burger sit side by side */
@media (max-width:1180px){
  .nav-menu{display:none}
  .nav-burger{display:inline-flex}
  .nav-links .nav-signin{display:none}
}
@media (max-width:720px){.nav-search{width:44px;height:44px;margin-left:0}}

/* grouped and wide panels */
.nav-panel.wide{width:660px}
.nav-dd.open>.nav-panel.grouped{display:grid;grid-template-columns:1.15fr 1fr;gap:0 10px;width:720px}
.np-grp{display:flex;flex-direction:column;gap:2px;min-width:0}
.np-grp+.np-grp{border-left:1px solid var(--rule);padding-left:10px}
.np-h{margin:6px 14px 6px;font-size:13px;font-weight:600;color:var(--gold-text)}
.nav-panel .np-mark{flex:none;width:34px;height:34px;border-radius:8px}
.nav-panel .ic{width:34px;height:34px;font-size:18px}
.nav-dd:nth-child(1) .nav-panel{left:0;transform:none}
.nav-dd:nth-child(2) .nav-panel{left:50%;transform:translateX(-35%)}
.mob-h{margin:12px 4px 4px 14px;font-size:13px;font-weight:600;color:var(--gold-text)}

/* =========================================================
   2. Site search dialog
   ========================================================= */
html.fs-open{overflow:hidden}
.fs-overlay{position:fixed;inset:0;z-index:1200;background:rgba(12,24,48,.55);display:flex;justify-content:center;align-items:flex-start;padding:min(12vh,110px) 16px 16px}
.fs-overlay[hidden]{display:none}
.fs-box{width:min(680px,100%);max-height:calc(100vh - 140px);display:flex;flex-direction:column;background:#fff;border-radius:16px;box-shadow:0 30px 70px -20px rgba(12,24,48,.55);overflow:hidden;border-top:4px solid var(--gold)}
.fs-head{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 20px;border-bottom:1px solid var(--rule)}
.fs-head>.ti-search{font-size:22px;color:var(--navy)}
.fs-head input{flex:1;min-width:0;border:0;font:500 18px/1.4 var(--font);color:var(--ink);padding:8px 0;background:none}
.fs-head input:focus{outline:none}
.fs-head input::-webkit-search-cancel-button{display:none}
.fs-close{flex:none;width:40px;height:40px;border:0;border-radius:8px;background:var(--mist);color:var(--navy-d);font-size:20px;cursor:pointer}
.fs-close:hover{background:var(--rule)}
.fs-list{list-style:none;overflow-y:auto;padding:8px}
.fs-list a{display:block;padding:12px 14px;border-radius:10px;text-decoration:none;color:var(--ink)}
.fs-list a:hover,.fs-list a:focus-visible{background:var(--gold-tint);outline:none}
.fs-list a:focus-visible{box-shadow:inset 0 0 0 2px var(--navy)}
.fs-list b{display:block;font:600 16px/1.35 var(--font-head);color:var(--navy-d)}
.fs-list small{display:block;font-size:14px;line-height:1.5;color:var(--muted);margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fs-url{display:block;font-size:12.5px;color:var(--faint);margin-top:4px}
.fs-label{padding:10px 14px 4px;font-size:13px;font-weight:600;color:var(--gold-text)}
.fs-empty{padding:22px 14px;color:var(--muted);font-size:15px}

/* =========================================================
   3. Home page
   ========================================================= */
body[data-page="home"] .h50-head{text-align:center;max-width:1040px;margin:0 auto 48px}
body[data-page="home"] .h50-head .lead{max-width:62ch}
body[data-page="home"] .h2.h50{font-size:clamp(28px,1.4vw + 18px,40px)}
body[data-page="home"] .h50-head .lead{margin:0 auto}
body[data-page="home"] .h50{display:flex;align-items:center;justify-content:center;gap:22px;text-wrap:balance}
body[data-page="home"] .h50::before,body[data-page="home"] .h50::after{content:"";flex:0 1 96px;height:3px;border-radius:2px;background:var(--gold)}
@media (max-width:720px){body[data-page="home"] .h50::before,body[data-page="home"] .h50::after{flex-basis:28px}}

/* ---------- 3.1 Hero ---------- */
.hx{position:relative;isolation:isolate;overflow:hidden;color:#fff;
  background:radial-gradient(120% 140% at 0% 0%,#1d3a6e 0%,rgba(21,39,73,0) 55%),linear-gradient(120deg,var(--navy-d) 0%,var(--navy) 62%,#1a3260 100%);
  padding-top:var(--fp-nav-h,86px)}
.hx-media{position:absolute;top:var(--fp-nav-h,86px);right:0;bottom:0;width:58%;z-index:-1}
.hx-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--navy) 0%,rgba(21,39,73,.86) 14%,rgba(21,39,73,.25) 38%,rgba(21,39,73,0) 56%),linear-gradient(0deg,rgba(12,24,48,.35) 0%,rgba(12,24,48,0) 30%)}
.hx-photo{margin:0;width:100%;height:100%}
.hx-photo :is(img,video,picture,iframe){display:block;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.hx-inner{position:relative;max-width:1320px;margin:0 auto;padding:clamp(36px,4.2vw,64px) clamp(20px,4vw,56px) clamp(76px,7.5vw,112px);
  display:grid;grid-template-columns:minmax(0,860px) 1fr auto;column-gap:32px;align-items:center}
.hx-copy{grid-column:1;min-width:0}
.hx-eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 18px;font:600 14px/1.3 var(--font);letter-spacing:.09em;text-transform:uppercase;color:#fff}
.hx-eyebrow::before{content:"";flex:none;width:46px;height:3px;border-radius:2px;background:var(--gold)}
.hx-display{margin:0;font-family:var(--font-head);font-weight:800;font-size:clamp(2.5rem,1rem + 3.35vw,4.25rem);line-height:1.04;letter-spacing:-.025em;color:#fff;text-wrap:balance}
.hx-display span{display:block}
.hx-display .g{color:var(--gold-hi)}
@media (min-width:1181px){.hx-display span{white-space:nowrap}}
.hx-h1{margin:22px 0 0;max-width:30ch;font-family:var(--font-head);font-weight:600;font-size:clamp(1.15rem,1rem + .55vw,1.5rem);line-height:1.32;letter-spacing:-.005em;color:#fff;text-wrap:balance}
.hx-lead{margin:14px 0 28px;max-width:60ch;font-size:clamp(1rem,.96rem + .2vw,1.1rem);line-height:1.65;color:rgba(255,255,255,.82);text-wrap:pretty}
.hx .btn{border-radius:var(--pill);padding:15px 26px;font-size:16.5px}
.hx .btn-gold{box-shadow:0 10px 26px -10px rgba(235,192,93,.7)}
.hx .btn-gold:hover,.hx .btn-gold:focus-visible{background:var(--gold-hi)}
.hx .btn-line{color:#fff;border-color:rgba(255,255,255,.75)}
.hx-note{margin:20px 0 0;font-size:15px;color:rgba(255,255,255,.78)}
.hx-note .text-link{color:#fff;font-size:15px;padding:0;text-decoration-color:var(--gold)}
.hx-note .text-link:hover{color:var(--gold)}
.hx-chips{grid-column:3;list-style:none;display:flex;flex-direction:column;gap:14px;margin:0}
.hx-chips li{display:flex;align-items:center;gap:16px;width:250px;padding:15px 20px;border-radius:16px;background:rgba(255,255,255,.93);color:var(--navy-d);
  font:700 16px/1.25 var(--font-head);box-shadow:0 16px 34px -14px rgba(5,12,28,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hx-chips i{flex:none;font-size:28px;color:var(--navy);padding-right:16px;border-right:1px solid var(--rule)}
.hx-swoosh{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(40px,7vw,104px);z-index:0}

/* ---------- 3.2 Four capabilities ---------- */
.caps{background:#fff;border-bottom:1px solid var(--rule);padding:6px clamp(16px,3vw,40px) 26px}
.caps-list{list-style:none;max-width:1320px;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.caps-list li+li{border-left:1px solid var(--rule)}
.caps-list a{display:flex;align-items:flex-start;gap:16px;height:100%;padding:16px clamp(14px,2vw,30px);text-decoration:none;color:inherit;border-radius:12px}
.caps-list i{flex:none;font-size:40px;line-height:1;color:var(--navy)}
.caps-list li:nth-child(2) i{color:var(--gold-d)}
.caps-list b{display:block;font:700 19px/1.2 var(--font-head);color:var(--navy-d);margin-bottom:6px}
.caps-list small{display:block;font-size:14.5px;line-height:1.5;color:var(--muted)}
.caps-list a:hover b,.caps-list a:focus-visible b{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:3px;text-underline-offset:5px}
.caps-list a:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}

/* ---------- 3.3 Why it matters ---------- */
.cred50-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,72px);align-items:start}
.cred50-top .body{margin-bottom:14px}
.cred50-top .text-link{margin-top:6px}
.cred50-research .ev-research{margin:0;padding:28px 30px;background:var(--navy-d);color:#fff;border-radius:var(--r-card);border-top:4px solid var(--gold)}
.cred50-research .ev-research h3{color:#fff;font-size:20px;margin-bottom:14px}
.cred50-research .ev-research li{color:rgba(255,255,255,.8);border-top-color:rgba(255,255,255,.16);padding:12px 0;font-size:15px;line-height:1.55}
.cred50-research .ev-research li strong{color:var(--gold)}
.why50{margin-top:clamp(56px,7vw,88px);padding-top:clamp(40px,5vw,56px);border-top:1px solid var(--rule)}
.why50 .sec-head{margin-bottom:32px}
.why50 .why-item{border-top:2px solid var(--gold)}
.why50 .why-item h3{color:var(--navy-d)}
.why50 .why-item p{color:var(--muted)}

/* ---------- 3.4 Solutions by challenge ---------- */
.ch-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,3vw,44px)}
.ch-grid li{display:flex;flex-direction:column;padding:26px 0 34px;border-top:2px solid var(--navy-d)}
.ch-grid h3{font-size:clamp(19px,1.1vw + 12px,22px);line-height:1.28;margin-bottom:10px;text-wrap:balance}
.ch-grid p{color:var(--muted);font-size:15.5px;line-height:1.6}
.ch-grid .ch-links{margin-top:auto;padding-top:16px;display:flex;flex-wrap:wrap;gap:6px 22px}
.more50{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.more50+.more50{border-top:0}
.ch-grid+.more50{margin-top:24px}
.more50>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 4px;cursor:pointer;
  font:600 19px/1.3 var(--font-head);color:var(--navy-d)}
.more50>summary::-webkit-details-marker{display:none}
.more50>summary i{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--gold-tint);color:var(--gold-text);font-size:18px;transition:transform .18s var(--ease,ease)}
.more50[open]>summary i{transform:rotate(45deg)}
.more50>summary:hover span{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:5px}
.more50>summary:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}
.more50-body{padding:12px 0 44px}
.more50-body #pillar-details{margin-top:48px}
.more50-body .sec-head{margin-bottom:28px}

/* ---------- 3.5 Product ecosystem ---------- */
.prod50>.wrap{max-width:1320px}
.pc-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.pc{display:grid;grid-template-columns:34% 1fr;min-height:200px;background:#fff;border:1px solid #EFE2BE;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-soft)}
.pc-photo{margin:0;min-height:100%;background:var(--mist)}
.pc-photo :is(img,video,picture){display:block;width:100%;height:100%;object-fit:cover}
.pc-body{display:flex;flex-direction:column;min-width:0;padding:20px 20px 18px}
.pc-name{display:flex;align-items:center;gap:9px;margin:0 0 6px;white-space:nowrap;font:800 clamp(21px,.6vw + 15px,25px)/1.1 var(--font-head);letter-spacing:-.02em;color:var(--navy-d)}
.pc-name>i{font-size:23px;color:var(--navy);font-weight:400}
.pc-name .g{color:var(--gold-d)}
.pc-name .ai{display:inline-block;margin-left:4px;padding:1px 8px 2px;border-radius:7px;background:var(--navy);color:#fff;font-size:.82em;letter-spacing:0;transform:skewX(-8deg)}
.pc-tag{font:600 15px/1.35 var(--font);color:var(--navy-d);margin-bottom:8px}
.pc-desc{font-size:14.5px;line-height:1.55;color:var(--muted);margin-bottom:14px}
.pc-link{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:15px;color:var(--navy);text-decoration:none}
.pc-link span{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:4px;transition:text-decoration-color .16s}
.pc-link:hover span,.pc-link:focus-visible span{text-decoration-color:var(--gold)}
.pc:has(.pc-link:focus-visible){outline:3px solid var(--gold);outline-offset:2px}
.pc-link:focus-visible{outline:none}
.pm-grid{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:28px 0 36px}
.pm-grid a{display:flex;align-items:flex-start;gap:12px;height:100%;padding:16px;background:#fff;border:1px solid var(--rule);border-radius:12px;text-decoration:none;color:inherit;transition:border-color .16s}
.pm-grid a:hover,.pm-grid a:focus-visible{border-color:var(--gold-d)}
.pm-grid a:focus-visible{outline:3px solid var(--gold);outline-offset:1px}
.pm-grid b{display:block;font:700 16px/1.25 var(--font-head);color:var(--navy-d)}
.pm-grid small{display:block;margin-top:3px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.pm-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;background:var(--navy);color:var(--gold);font-size:18px}
.pm-mark{flex:none;width:34px;height:34px;border-radius:8px}
.prod50 .more50{background:transparent}
.prod50 .more50-body .stack{margin-bottom:32px}

/* ---------- 3.6 How it works: Diagnose to Sustain ---------- */
.flow50{position:relative;overflow:hidden;color:#fff;padding:clamp(56px,6vw,84px) clamp(18px,3vw,40px) clamp(52px,6vw,76px);
  background:radial-gradient(90% 160% at 100% 100%,#1d3a6e 0%,rgba(21,39,73,0) 60%),var(--navy-d)}
.fl-arc{position:absolute;left:0;top:14px;width:100%;height:46px}
.fl-wrap{position:relative;max-width:1400px;margin:0 auto;display:grid;grid-template-columns:minmax(200px,236px) 1fr;gap:clamp(24px,2.6vw,40px);align-items:center}
.fl-title{margin:0;padding-right:clamp(16px,2vw,28px);border-right:2px solid var(--gold);font:800 clamp(28px,1.2vw + 16px,36px)/1.12 var(--font-head);color:#fff;letter-spacing:-.02em;text-wrap:balance}
.fl-title span{color:var(--gold-hi)}
.fl-steps{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px}
.fl-steps li{position:relative;display:flex}
.fl-steps li:not(:last-child)::after{content:"";position:absolute;right:-19px;top:50%;width:10px;height:10px;border-top:3px solid var(--gold);border-right:3px solid var(--gold);transform:translateY(-50%) rotate(45deg)}
.fl-card{flex:1;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ic h" "p p";align-items:center;align-content:start;gap:8px 12px;padding:16px 18px 18px;background:#fff;border-radius:22px;color:var(--navy-d);text-decoration:none;box-shadow:0 14px 28px -16px rgba(0,0,0,.6);transition:box-shadow .16s}
.fl-card:hover,.fl-card:focus-visible{box-shadow:0 0 0 3px var(--gold),0 14px 28px -16px rgba(0,0,0,.6);outline:none}
.fl-ic{grid-area:ic;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;font-size:21px}
.fl-steps li:nth-child(odd) .fl-ic{background:var(--navy-d);color:var(--gold)}
.fl-steps li:nth-child(even) .fl-ic{background:var(--gold);color:var(--navy-d)}
.fl-card h3{grid-area:h;margin:0;font:700 17.5px/1.2 var(--font-head);color:var(--navy-d)}
.fl-n{color:var(--navy-m)}
.fl-card p{grid-area:p;margin:0;font-size:14px;line-height:1.45;color:var(--muted)}

/* ---------- 3.7 Launchpad Pilot on a light background ---------- */
.pilot50 .invest{border-color:var(--rule);background:var(--mist)}
.pilot50 .invest p{color:var(--muted)}
.pilot50 .lead{color:var(--muted)}

/* ---------- 3.8 Who we serve ---------- */
.au-grid{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.au-grid li{display:flex;flex-direction:column;padding:22px 22px 20px;background:#fff;border:1px solid var(--rule);border-radius:14px}
.au-ic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-bottom:14px;border-radius:12px;background:var(--gold-tint);color:var(--gold-text);font-size:22px}
.au-grid h3{font-size:19px;margin-bottom:6px}
.au-grid p{font-size:14.5px;line-height:1.55;color:var(--muted);margin-bottom:14px}
.au-grid .text-link{margin-top:auto;padding:0;font-size:14.5px;text-align:left}
.au-more{margin-top:28px;text-align:center}

/* ---------- 3.9 Responsive ---------- */
@media (max-width:1240px){
  .hx-chips li{width:220px;padding:13px 16px;font-size:15px}
  .pc-grid{grid-template-columns:1fr;max-width:760px;margin:0 auto}
  .pc{grid-template-columns:200px 1fr}
  .pm-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fl-wrap{grid-template-columns:minmax(0,1fr)}
  .fl-title{border-right:0;padding-right:0;border-left:4px solid var(--gold);padding-left:16px}
  .fl-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .fl-steps li::after{display:none}
  .fl-steps{max-width:960px}
  .au-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1024px){
  .hx-inner{grid-template-columns:minmax(0,1fr);row-gap:28px}
  .hx-chips{grid-column:1;flex-direction:row;flex-wrap:wrap;gap:10px}
  .hx-chips li{width:auto;padding:10px 14px;gap:10px;font-size:14.5px;border-radius:12px}
  .hx-chips i{font-size:20px;padding-right:10px}
  .caps-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .caps-list li:nth-child(3){border-left:0}
  .caps-list li:nth-child(n+3){border-top:1px solid var(--rule)}
  .cred50-top{grid-template-columns:1fr}
  .ch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  /* mobile-first order: message and action first, photo below */
  .hx{display:flex;flex-direction:column}
  .hx-inner{order:1;padding-bottom:36px}
  .hx-media{order:2;position:relative;top:auto;width:100%;aspect-ratio:16/10;z-index:0}
  .hx-media::after{background:linear-gradient(180deg,var(--navy) 0%,rgba(21,39,73,0) 30%)}
  .hx-swoosh{z-index:1;height:44px}
  .hx-display{font-size:clamp(2.3rem,1.4rem + 4.5vw,3.4rem)}
}
@media (max-width:720px){
  .hx-inner{padding-top:28px}
  .hx .btn-row .btn{width:100%}
  .hx-eyebrow{font-size:12.5px;gap:10px}
  .hx-eyebrow::before{width:28px}
  .caps{padding:4px 10px 12px}
  .caps-list{grid-template-columns:1fr}
  .caps-list li+li{border-left:0;border-top:1px solid var(--rule)}
  .caps-list i{font-size:32px}
  .ch-grid{grid-template-columns:1fr}
  .pc{grid-template-columns:112px 1fr}
  .pc-body{padding:16px}
  .pc-name{font-size:21px}
  .pm-grid{grid-template-columns:1fr}
  .au-grid{grid-template-columns:1fr}
  .fl-steps{grid-template-columns:minmax(0,1fr);gap:12px}
  .fl-title{font-size:28px}
  .more50>summary{font-size:17px}
}
@media (prefers-reduced-motion:reduce){.more50>summary i{transition:none}}

/* =========================================================
   4. Partnerships and Reports pages (Update 50.1)
   ========================================================= */
.pp-grid{list-style:none;display:grid;gap:18px}
.pp-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pp-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pp-card{display:flex;flex-direction:column;padding:24px 22px 22px;background:#fff;border:1px solid var(--rule);border-radius:14px}
.pp-ic{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;margin-bottom:16px;border-radius:12px;background:var(--navy);color:var(--gold);font-size:22px}
.pp-card h3{font-size:19px;margin-bottom:8px}
.pp-card p{font-size:15px;line-height:1.6;color:var(--muted);margin-bottom:16px}
.pp-card .text-link{margin-top:auto}
.pp-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;counter-reset:pp}
.pp-steps li{position:relative;padding-top:22px;border-top:2px solid var(--navy-d)}
.pp-n{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;margin-bottom:14px;border-radius:50%;background:var(--gold);color:var(--navy-d);font:700 17px/1 var(--font-head)}
.pp-steps h3{font-size:19px;margin-bottom:6px}
.pp-steps p{font-size:15px;color:var(--muted)}
.pp-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:start}
.pp-split .sec-head{margin-bottom:0}
.pp-ticks{list-style:none;display:grid;gap:14px}
.pp-ticks li{position:relative;padding:18px 20px 18px 54px;background:#fff;border:1px solid var(--rule);border-radius:12px;color:var(--muted);font-size:15.5px;line-height:1.6}
.pp-ticks li::before{content:"";position:absolute;left:20px;top:22px;width:18px;height:10px;border-left:3px solid var(--gold-d);border-bottom:3px solid var(--gold-d);transform:rotate(-45deg)}
.pp-ticks strong{color:var(--navy-d)}
.pp-rich{max-width:760px;padding:24px 26px;border:1px dashed var(--rule);border-radius:14px;color:var(--muted);font-size:16px;line-height:1.7}
.pp-rich ul,.pp-rich ol{padding-left:22px;margin:8px 0}
.pp-rich li+li{margin-top:6px}
.pp-rich a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--gold-d);text-underline-offset:3px}
.pp-rich strong,.pp-rich b{color:var(--navy-d)}
.pp-feature{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,64px);align-items:center}
.pp-feature .photo{aspect-ratio:4/3;border-radius:18px;overflow:hidden;margin:0}
.pp-feature .photo img{width:100%;height:100%;object-fit:cover}
.pp-feature .lead{margin-bottom:26px}
.pp-status{display:inline-block;margin-bottom:14px;padding:6px 12px;border-radius:999px;background:var(--gold-tint);color:var(--gold-text);font-size:14px;font-weight:600}
.pp-cta{background:var(--navy-d);color:#fff}
.pp-cta-in{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.pp-cta h2{color:#fff}
.pp-cta .lead{color:rgba(255,255,255,.8)}
@media (max-width:1024px){
  .pp-grid-4,.pp-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp-split,.pp-feature{grid-template-columns:1fr}
}
@media (max-width:720px){
  .pp-grid-4,.pp-grid-3,.pp-steps{grid-template-columns:1fr}
}
/* Admin media uploads keep the designed framing in the hero and product cards */
.hx-photo.fp-mfit-fig,.pc-photo.fp-mfit-fig{aspect-ratio:auto!important}
/* Update 50.3: the hero photo is also painted as a background, so the hero is never empty even if the <img> fails */
.hx-media{background:var(--navy) url("../images/hero-students-1600.jpg") 50% 35%/cover no-repeat}

/* =========================================================
   5. Update 51: the four pillar videos, always visible on the home page
   (each figure keeps its Admin media slot, so the same video also plays at the top of its own pillar page)
   ========================================================= */
.pv50{margin:8px 0 40px}
.pv-h{font-size:clamp(22px,1vw + 15px,27px);margin:0 0 20px}
.pv-grid{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.pv-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--rule);border-radius:16px;overflow:hidden}
.pv-card .pv-photo{margin:0;aspect-ratio:4/3!important;border-radius:0;overflow:hidden;background:var(--mist)}
.pv-card .pv-photo :is(img,video,picture,iframe){display:block;width:100%;height:100%;object-fit:cover}
.pv-body{display:flex;flex-direction:column;flex:1;padding:18px 18px 18px}
.pv-body h3{font-size:19px;margin-bottom:6px}
.pv-body .name-sub{display:block;font-size:13.5px;font-weight:500;color:var(--muted);margin-top:3px;font-family:var(--font)}
.pv-body p{font-size:14.5px;line-height:1.55;color:var(--muted);margin-bottom:14px}
.pv-body .text-link{margin-top:auto}
.pv-card .fp-media-btn{z-index:2}
@media (max-width:1024px){.pv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pv-grid{grid-template-columns:1fr}}

/* =========================================================
   6. Update 51: hand-drawn FlipPraxis icon set (assets/images/fp-icons.svg)
   Navy ink follows `color`; the gold fill is --fpi-a (switched to white on gold backgrounds).
   ========================================================= */
.fpi{display:inline-block;flex:none;width:1em;height:1em;overflow:visible;vertical-align:middle}
/* menus */

.nav-panel .ic .fpi{width:32px;height:32px}
.nav-panel a:hover .ic,.nav-panel a:focus-visible .ic{background:none;color:var(--navy-d)}
.nav-panel a:hover .ic .fpi{--fpi-a:var(--gold-d)}
/* hero chips */
.hx-chips .fpi{width:30px;height:30px;padding-right:14px;border-right:1px solid var(--rule);box-sizing:content-box;color:var(--navy-d)}
/* four capabilities */
.caps-list .fpi{width:46px;height:46px;color:var(--navy-d)}
/* product cards */
.pc-name .fpi{width:30px;height:30px;color:var(--navy-d)}
.pm-ic{background:none!important;width:36px;height:36px;color:var(--navy-d)}
.pm-ic .fpi{width:34px;height:34px}
/* process band: ink white on navy circles, gold fill white on gold circles */
.fl-ic .fpi{width:28px;height:28px}
.fl-steps li:nth-child(odd) .fl-ic{color:#fff}
.fl-steps li:nth-child(even) .fl-ic{color:var(--navy-d);--fpi-a:#fff}
/* who we serve, partnerships, reports */
.au-ic{background:var(--gold-tint);color:var(--navy-d);width:48px;height:48px}
.au-ic .fpi{width:32px;height:32px;--fpi-a:#F2CD74}
.pp-ic{background:var(--gold-tint);color:var(--navy-d);width:50px;height:50px}
.pp-ic .fpi{width:32px;height:32px;--fpi-a:#F2CD74}
@media (max-width:1024px){.hx-chips .fpi{width:22px;height:22px;padding-right:10px}}
@media (max-width:720px){.caps-list .fpi{width:38px;height:38px}}

/* =========================================================
   7. Update 52: contextual images in page heroes (AI Level, Insights, articles, Services, Educator Edge)
   ========================================================= */
.lp-hero-grid>.art-page{min-width:0}
.lp-hero-grid .lp-photo{margin:0;border-radius:18px;overflow:hidden;background:#E9EFF7;box-shadow:0 24px 60px -28px rgba(0,0,0,.55)}
.lp-hero-grid .lp-photo img{width:100%;height:100%;object-fit:cover}
.lp-hero-grid .lp-photo-pic img{object-position:60% 40%}
@media (max-width:1024px){.lp-hero-grid .lp-photo{max-width:620px}}
/* Update 52: hero photo framing keeps the FlipPraxis mark on the laptop clear of the gold swoosh and the chat button at 1180–2560 px */
.hx-photo :is(img,picture img){object-position:92% 65%}
.hx-media{background-position:92% 65%}
@media (max-width:900px){.hx-photo :is(img,picture img){object-position:70% 60%}}

/* Update 53: menus are text-only again (product logos stay); content icons are the solid FlipPraxis pictograms */
.pc-name .fpi{width:28px;height:28px}
.caps-list .fpi{width:42px;height:42px}

/* Update 54: menus are text-only everywhere; grid rows align to the top */
.nav-dd.open>.nav-panel.wide{align-items:start}
.nav-panel a{align-items:flex-start}

/* =========================================================
   8. Update 55: Microsoft-style typography (Fluent 2 type ramp)
   Windows visitors see Segoe UI, the font Microsoft's own sites use (installed with Windows).
   Everyone else gets Selawik, Microsoft's open-source, metric-matched stand-in for Segoe UI (SIL OFL, assets/fonts/).
   Segoe UI itself is not licensed for web embedding, so it is never downloaded from this site.
   Headings are semibold (600), never heavy, with normal tracking, as on careers.microsoft.com.
   ========================================================= */
/* "FP Segoe": the visitor's own Segoe UI when installed (exact face names, so no look-alike substitutes), otherwise Selawik */
@font-face{font-family:"FP Segoe";src:local("Segoe UI Light"),local("SegoeUI-Light"),url("../fonts/selawik-vf.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"FP Segoe";src:local("Segoe UI"),local("SegoeUI"),url("../fonts/selawik-vf.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"FP Segoe";src:local("Segoe UI Semibold"),local("SegoeUI-Semibold"),url("../fonts/selawik-vf.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"FP Segoe";src:local("Segoe UI Bold"),local("SegoeUI-Bold"),url("../fonts/selawik-vf.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
:root{
  --font:"FP Segoe",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --font-head:"FP Segoe",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  /* Fluent 2 web ramp, scaled fluidly for marketing pages */
  --t-display:clamp(2.5rem,1.35rem + 3.2vw,4.25rem);   /* 40 to 68 px, Display */
  --t-h1:clamp(2.25rem,1.6rem + 1.9vw,3.5rem);         /* 36 to 56 px */
  --t-h2:clamp(1.75rem,1.4rem + 1vw,2.5rem);           /* 28 to 40 px, Large Title */
  --t-h3:clamp(1.25rem,1.15rem + .3vw,1.5rem);         /* 20 to 24 px, Title 3 */
  --t-sub:1.25rem;                                     /* 20 px, Subtitle 1 */
  --t-body:1rem;                                       /* 16 px */
  --t-small:.875rem;                                   /* 14 px, Body 1 */
}
body{font-family:var(--font);font-size:var(--t-body);line-height:1.5;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3{font-family:var(--font-head);font-weight:600;letter-spacing:0}
.h1,.lp-hero .h1{font-size:var(--t-h1);line-height:1.14}
.h2,body[data-page="home"] .h2.h50{font-size:var(--t-h2);line-height:1.25;font-weight:600}
.h3,.sec h3{font-size:var(--t-h3);line-height:1.33}
.lead{font-size:var(--t-sub);line-height:1.5;font-weight:400}
.body,.sec p{line-height:1.6}
.kicker,.np-h,.mob-h{font-weight:600;letter-spacing:0}
.btn,.nav-cta,.text-link{font-family:var(--font);font-weight:600;letter-spacing:0}
.nav-dd-btn{font-family:var(--font);font-weight:600;letter-spacing:0}
.nav-panel b{font-size:15px;font-weight:600}
.nav-panel small{font-size:var(--t-small)}
/* home hero: display size, semibold, no squeeze */
.hx-display{font-family:var(--font-head);font-weight:600;font-size:var(--t-display);line-height:1.12;letter-spacing:-.01em}
.hx-h1{font-family:var(--font-head);font-weight:600;font-size:clamp(1.25rem,1.1rem + .45vw,1.5rem);line-height:1.33}
.hx-lead{font-size:clamp(1rem,.96rem + .2vw,1.125rem);line-height:1.6}
.hx-eyebrow{font-weight:600;letter-spacing:.06em;font-size:.875rem}
.hx-chips li{font-family:var(--font-head);font-weight:600}
/* components that used heavier weights */
.caps-list b,.pc-name,.pm-grid b,.fl-title,.fl-card h3,.au-grid h3,.pv-body h3,.pp-card h3,.pp-steps h3,.ch-grid h3,.more50>summary,.fs-list b{font-family:var(--font-head);font-weight:600;letter-spacing:0}
.pc-name{font-size:clamp(1.375rem,1.2rem + .4vw,1.625rem)}
.fl-title{font-size:clamp(1.75rem,1.3rem + 1vw,2.25rem)}
.caps-list b{font-size:1.125rem}
.caps-list small,.pc-desc,.pm-grid small,.au-grid p,.pp-card p,.pv-body p,.ch-grid p{font-size:.9375rem;line-height:1.55}
footer,.ft-desc,.ft-links a{font-family:var(--font)}
.hx-h1{max-width:36ch}

/* =========================================================
   9. Update 56: About page visuals, and illustrations are never cropped in page heroes
   ========================================================= */
/* illustrations (SVG) are shown whole; photos still fill the frame */
.lp-photo img[src*=".svg"]{object-fit:contain!important;background:#E9EFF7}
.lp-photo:has(img[src*=".svg"]){background:#E9EFF7}
/* pictogram badge */
.ab-ic{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;margin-bottom:14px;border-radius:12px;background:var(--gold-tint);color:var(--navy-d)}
.ab-ic .fpi{width:30px;height:30px;--fpi-a:#E3AE3C}
.ab-cards>div{display:flex;flex-direction:column}
.ab-apex>div{border-top-color:var(--gold-d)}
.ab-apex .ab-ic{margin-top:4px}
/* illustrations inside text columns */
.ab-fig{margin:28px 0 0;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:#E9EFF7;max-width:520px}
.ab-fig img{width:100%;height:100%;object-fit:contain}
/* pillar cards with a picture */
.ab-pillars{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.ab-pillars li{display:flex;flex-direction:column;overflow:hidden;padding:0!important}
.ab-thumb{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 70%;background:#E9EFF7}
.ab-pillars li>span{display:block;padding:14px 16px 16px}
/* research links with a pictogram */
.ab-links li{display:flex;align-items:flex-start;gap:14px}
.ab-links li .ab-ic{flex:none;margin:0;width:44px;height:44px}
.ab-links li .ab-ic .fpi{width:26px;height:26px}
@media (max-width:900px){.ab-pillars{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:560px){.ab-pillars{grid-template-columns:1fr!important}.ab-fig{max-width:none}}
.ab-thumb{height:auto!important;max-height:none}
.ab-pillars li{border:1px solid var(--rule);border-radius:12px;background:#fff;transition:border-color .16s}
.ab-pillars li:hover,.ab-pillars li:focus-within{border-color:var(--gold-d)}
.ab-pillars li>span a{border:0!important;padding:0!important;background:none!important;box-shadow:none!important}
.ab-links li{border:1px solid var(--rule);border-radius:10px;background:#fff;padding:16px 18px;transition:border-color .16s}
.ab-links li:hover,.ab-links li:focus-within{border-color:var(--gold-d)}
.ab-links li>span a{border:0!important;padding:0!important;background:none!important;box-shadow:none!important}
/* Update 57: About sections with an illustration: text left, picture right, centred against each other */
.ab-split{align-items:center;gap:clamp(32px,5vw,72px)}
.ab-split>.ab-fig{margin:0;max-width:none;width:100%}
.ab-split .body+.body{margin-top:14px}
.ab-stack{grid-template-columns:1fr!important;margin-top:24px;gap:14px}
.ab-stack>div{padding:18px 20px}
.ab-stack .ab-ic{width:42px;height:42px;margin-bottom:10px}
@media (max-width:1024px){.ab-split>.ab-fig{max-width:620px}}
.sec-mist .ab-split>.ab-fig{border:1px solid var(--rule);box-shadow:0 18px 40px -26px rgba(12,24,48,.35)}

/* =========================================================
   10. Update 58: Apex Hub and ProofFolio pages
   ========================================================= */
.ab-split .pp-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 24px;margin-top:8px}
.ab-split .sec-head{margin-bottom:24px}
.ab-split .pp-ticks{margin-top:22px}
.pr-fig{background:#E9EFF7}
.pp-card .text-link{margin-top:auto}
#faq .lp-faq{max-width:none}
@media (max-width:560px){.ab-split .pp-steps{grid-template-columns:1fr}}
/* page call to action: light, so it never stacks with the dark site-wide band below */
.pp-cta{background:var(--gold-tint)!important;color:var(--ink)}
.pp-cta h2{color:var(--navy-d)!important}
.pp-cta .lead{color:var(--muted)!important}
.pp-cta .btn-line{color:var(--navy)!important;border-color:var(--navy)!important}
.pp-cta .btn-line:hover,.pp-cta .btn-line:focus-visible{background:var(--navy)!important;color:#fff!important}

/* Update 60: a calmer hero. Headline, one supporting line, two buttons and a slim row of highlights.
   The highlights sit under the buttons, never over the photo. */
.hx-inner{grid-template-columns:minmax(0,780px) 1fr}
.hx-h1{font-weight:400!important;font-size:clamp(1.125rem,1rem + .45vw,1.375rem)!important;line-height:1.5!important;color:rgba(255,255,255,.86)!important;max-width:40ch;margin-top:20px!important}
.hx-actions{margin-top:32px}
.hx-chips{grid-column:auto!important;flex-direction:row!important;flex-wrap:wrap;gap:10px 26px!important;margin:30px 0 0!important;padding:0;align-self:auto!important}
.hx-chips li{width:auto!important;padding:0!important;background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  color:#fff!important;font:600 .9375rem/1.3 var(--font)!important;gap:10px!important;border-radius:0!important}
.hx-chips .fpi{width:22px!important;height:22px!important;padding:0!important;border:0!important;color:#fff;--fpi-a:var(--gold)}
@media (max-width:1024px){.hx-chips{gap:10px 20px!important}}
/* Update 61: new banner photo (three students around the FP laptop). Faces upper half, logo low centre. */
.hx-photo :is(img,picture img){object-position:100% 38%!important}
.hx-media{background-position:100% 38%!important}
@media (max-width:900px){.hx-photo :is(img,picture img){object-position:78% 40%!important}}
/* the dark fade only sits behind the text, so every face in the photo stays clear */
@media (min-width:901px){.hx-media::after{background:linear-gradient(90deg,var(--navy) 0%,rgba(21,39,73,.72) 9%,rgba(21,39,73,.18) 22%,rgba(21,39,73,0) 30%),linear-gradient(0deg,rgba(12,24,48,.28) 0%,rgba(12,24,48,0) 22%)!important}}
.hx-photo :is(img,picture img){object-position:100% 0%!important}
.hx-media{background-position:100% 0%!important}
/* wide screens: the banner is never shorter than the photo's own proportion, so the laptop logo always clears the swoosh */
@media (min-width:1500px){
  .hx{min-height:calc(var(--fp-nav-h,86px) + 58vw / 1.836);display:flex;flex-direction:column;justify-content:center}
  .hx-inner{width:100%;box-sizing:border-box}
}

/* =========================================================
   11. Update 64: no decorative dashes, tighter rhythm
   Section spacing follows an 8 px scale: 72 px desktop, 56 px tablet, 44 px phone.
   ========================================================= */
body[data-page="home"] .h50::before,body[data-page="home"] .h50::after,.hx-eyebrow::before{content:none!important;display:none!important}
body[data-page="home"] .h50{display:block}
.hx-eyebrow{gap:0}
.sec{padding:72px 32px}
.sec-head{margin-bottom:36px}
body[data-page="home"] .h50-head{margin-bottom:36px}
.why50{margin-top:56px;padding-top:44px}
.ch-grid+.more50{margin-top:16px}
.pv50{margin:0 0 28px}
.pm-grid{margin:24px 0 28px}
.more50-body{padding:8px 0 32px}
.flow50{padding-top:56px;padding-bottom:52px}
.hx-inner{padding-bottom:clamp(64px,6vw,96px)}
.caps{padding-bottom:16px}
.pp-cta{padding-top:56px!important;padding-bottom:56px!important}
.ready{padding-top:64px!important;padding-bottom:64px!important}
@media (max-width:1024px){.sec{padding:56px 24px}.sec-head,body[data-page="home"] .h50-head{margin-bottom:28px}.why50{margin-top:44px;padding-top:36px}}
@media (max-width:720px){.sec{padding:44px 18px}.sec-head,body[data-page="home"] .h50-head{margin-bottom:24px}.why50{margin-top:36px;padding-top:28px}.flow50{padding-top:44px;padding-bottom:40px}}

/* =========================================================
   12. Update 65: heading dashes restored, sized for each screen
   ========================================================= */
body[data-page="home"] .h50{display:flex!important;align-items:center;justify-content:center;gap:clamp(12px,2vw,24px)}
body[data-page="home"] .h50::before,body[data-page="home"] .h50::after{content:""!important;display:block!important;flex:0 0 clamp(20px,6vw,80px);height:3px;border-radius:2px;background:var(--gold)}
.hx-eyebrow{gap:14px}
.hx-eyebrow::before{content:""!important;display:block!important;flex:none;width:clamp(24px,3vw,46px);height:3px;border-radius:2px;background:var(--gold)}
@media (max-width:560px){
  body[data-page="home"] .h50{gap:10px}
  body[data-page="home"] .h50::before,body[data-page="home"] .h50::after{flex-basis:18px;height:2px}
}
/* Update 65: one standard gap between sections. The section padding alone sets the space, so the last item
   in a section never adds its own margin below, and the first item never adds margin above. */
:is(.sec,.lp-hero,.pp-cta) > .wrap > :last-child,
:is(.sec,.pp-cta) > .wrap > :last-child > :last-child,
:is(.sec,.pp-cta) > .wrap > :last-child > :last-child > :last-child,
.sec > .wrap > .split > div > :last-child{margin-bottom:0!important}
:is(.sec,.pp-cta) > .wrap > :first-child,
:is(.sec,.pp-cta) > .wrap > :first-child > :first-child{margin-top:0!important}
.ins-cluster:last-child{padding-bottom:0}

/* =========================================================
   13. Update 66: animated video section (Admin slot "home.hero")
   Hidden until a video or image has been chosen in Admin > Home page media, so it never shows a placeholder.
   ========================================================= */
.vid50{display:none}
.vid50:has(.fp-media-on){display:block}
.vid50-in{align-items:center;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)!important}
.vid50-copy .lead{margin-bottom:24px}
.vid50-fig{margin:0;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:var(--navy-d);box-shadow:0 24px 50px -28px rgba(12,24,48,.55)}
.vid50-fig :is(img,video,iframe){display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:1024px){.vid50-in{grid-template-columns:1fr!important}}