/* C1 reversed (Paul, Nov 1 2026, 12:31 PM ET): navigation is ordinary <a href> links. Each link keeps the box the GET-form
   button had: the wrapper takes the form's block display and the link takes the browser's button defaults. Zero
   specificity (:where), so every existing rule still wins; Paul wants the links to look like the buttons, not prose links. */
:where(span.gl-go){display:block}
:where(a.gl-link){display:inline-block;box-sizing:border-box;width:fit-content;align-content:center;text-align:center;text-decoration:none;font:-webkit-small-control;font-size:13.3333px;letter-spacing:normal;word-spacing:normal;line-height:normal;text-transform:none;text-indent:0;text-shadow:none;color:buttontext;cursor:pointer}
/* Homepage design, 2026-10-31 approved mockup. Provisional layout; deep blue accents, no gold.
   Desktop sizes are written in mockup pixels at 1440 wide: calc(var(--p)*N). */
@font-face{font-family:'GL Serif';src:url('materials/source-serif-4-latin-opsz.woff2') format('woff2');font-style:normal;font-weight:200 900;font-display:swap}
@font-face{font-family:'GL Sans';src:url('materials/inter-latin-wght.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
/* v13 CLS (QA research 2026-11-01; Paul's v13 approval, Nov 1 2026, 12:30 PM ET): size-matched fallbacks shown until the web
   fonts arrive, so lines wrap the same before and after the swap. size-adjust is the measured advance-width ratio of the page
   text, regular and bold faces separately (Source Serif 4 to Liberation Serif 1.064 and 0.998; Inter to Liberation
   Sans 1.085 and 1.034); ascent/descent are each web font's hhea metrics divided by it (Source Serif 4: 1036/335 per
   1000; Inter: 1984/494 per 2048). Liberation is metric-compatible with Times New Roman and Arial, so either can stand in. */
@font-face{font-family:'GL Serif Fallback';src:local('Liberation Serif'),local('LiberationSerif'),local('Times New Roman'),local('TimesNewRomanPSMT'),local('Tinos');font-weight:100 500;size-adjust:106.4%;ascent-override:97.4%;descent-override:31.5%;line-gap-override:0%}
@font-face{font-family:'GL Serif Fallback';src:local('Liberation Serif Bold'),local('LiberationSerif-Bold'),local('Times New Roman Bold'),local('TimesNewRomanPS-BoldMT'),local('Tinos Bold');font-weight:501 900;size-adjust:99.8%;ascent-override:103.8%;descent-override:33.6%;line-gap-override:0%}
@font-face{font-family:'GL Sans Fallback';src:local('Liberation Sans'),local('LiberationSans'),local('Arial'),local('ArialMT'),local('Arimo');font-weight:100 500;size-adjust:108.5%;ascent-override:89.3%;descent-override:22.2%;line-gap-override:0%}
@font-face{font-family:'GL Sans Fallback';src:local('Liberation Sans Bold'),local('LiberationSans-Bold'),local('Arial Bold'),local('Arial-BoldMT'),local('Arimo Bold');font-weight:501 900;size-adjust:103.4%;ascent-override:93.7%;descent-override:23.3%;line-gap-override:0%}
:is(body.gl-home-page,body.gl-site){--p:min(1px,calc(100vw / 1440));--serif:'GL Serif','GL Serif Fallback','Source Serif 4',Georgia,'Times New Roman',serif;--sans:'GL Sans','GL Sans Fallback',Inter,'Helvetica Neue',Arial,sans-serif;--night:#00060c;--bar:#020b13;--blue:#2f9ce6;--blue-deep:#004374;--sky:#56c4f2;--navy:#003059;--paper:#f9f8f8;--ink-dark:#0b1118;--frame:max(0px,calc((100% - 1440px) / 2));--spine:calc(var(--frame) + max(22px,calc(var(--p)*73)));--measure:34rem;--fs-caption:12px;--fs-small:14px;--fs-body:16px;--fs-lead:max(16px,calc(var(--p)*20));--fs-h3:max(17px,calc(var(--p)*24));--fs-h2:max(28px,calc(var(--p)*40));--fs-h1:max(34px,calc(var(--p)*64));--fs-display:calc(var(--p)*81);background:var(--night);color:#e9edf0;font-family:var(--sans);font-size:16px;line-height:1.5;overflow-x:clip}
/* v13 (Paul's approval, Nov 1 2026, 12:30 PM ET; QA research 2026-11-01): one left spine and one type scale for every page.
   --spine is the homepage's left edge (x=73 at 1440, 22 at 600 and below); --measure caps prose near 68 characters.
   Seven steps, at 1440: caption 12, small 14, body 16, lead 20, h3 24, h2 40, h1 64; the homepage hero title keeps its
   81px display size. The brand lockup in the header keeps its own sizes (logo). */
@media (max-width:900px){:is(body.gl-home-page,body.gl-site){--fs-h2:clamp(28px,8.4vw,40px);--fs-h1:clamp(34px,10.4vw,64px)}}
@media (max-width:600px){:is(body.gl-home-page,body.gl-site){--spine:22px}}
:is(body.gl-home-page,body.gl-site) .gl-arrow{width:calc(var(--p)*19);min-width:15px;height:auto;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Header */
:is(body.gl-home-page,body.gl-site) header#gl-home-bar{max-height:none;overflow:visible;flex-flow:initial;position:sticky;top:0;z-index:40;display:grid;grid-template-columns:calc(var(--p)*400) 1fr auto;align-items:center;gap:0;height:calc(var(--p)*108);min-height:64px;padding:0 calc(var(--frame) + var(--p)*38);background:var(--bar);background-image:radial-gradient(120% 160% at 56% 0%,#04121e 0%,#020c15 46%,rgba(0,7,13,0) 100%),linear-gradient(180deg,#020c15 0%,#010910 100%);border:0;backdrop-filter:none;box-shadow:0 1px 0 #0b1a26}
/* D13c: the mockup header has subtle depth, a lighter centre-top falling to near-black edges, so no flat fill. */
:is(body.gl-home-page,body.gl-site) header#gl-home-bar::after{display:none}
:is(body.gl-home-page,body.gl-site) #gl-home-bar .gl-go{margin:0}
:is(body.gl-home-page,body.gl-site) #gl-home-bar .site-brand{display:flex;align-items:center;gap:calc(var(--p)*19);min-height:44px;padding:0;background:none;border:0;color:#fff;cursor:pointer;text-align:left;letter-spacing:0;font:inherit}
:is(body.gl-home-page,body.gl-site) #gl-home-bar .site-brand img{width:calc(var(--p)*84);height:calc(var(--p)*84);min-width:44px;min-height:44px;margin:0 calc(var(--p)*-6);object-fit:contain}
:is(body.gl-home-page,body.gl-site) .gl-brand-text{display:flex;flex-direction:column;gap:calc(var(--p)*2)}
:is(body.gl-home-page,body.gl-site) .gl-brand-name{font-family:var(--serif);font-variation-settings:'opsz' 28;font-size:calc(var(--p)*34.6);font-weight:500;line-height:1.1;letter-spacing:-.005em;color:#fff;white-space:nowrap}
:is(body.gl-home-page,body.gl-site) #gl-home-bar .site-brand small{display:block;font-family:var(--sans);font-size:max(12px,calc(var(--p)*14.5));font-weight:500;line-height:1.3;letter-spacing:.3em;text-transform:uppercase;color:#e2e7eb;white-space:nowrap}
:is(body.gl-home-page,body.gl-site) #gl-home-bar nav{display:flex;align-items:center;height:auto;gap:calc(var(--p)*22);margin:0;padding:0;font-size:inherit;justify-self:start}
:is(body.gl-home-page,body.gl-site) #gl-home-bar nav .gl-go{display:block}
:is(body.gl-home-page,body.gl-site) #gl-home-bar nav :is(button,:where(a.gl-link)){position:relative;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;height:calc(var(--p)*46);padding:0;margin:0;border:0;background:none;color:#eef2f5;font:400 var(--fs-small)/1.2 var(--sans);letter-spacing:0;white-space:nowrap;cursor:pointer;text-decoration:none}
/* Governor 2:16 PM ET ruling (Nov 1 2026; Paul loved the homepage sizing): the homepage keeps its 187fdb4 type scale, header included. */
body.gl-home-page #gl-home-bar nav :is(button,:where(a.gl-link)){font:400 max(12px,calc(var(--p)*15.5))/1.2 var(--sans)}
:is(body.gl-home-page,body.gl-site) #gl-home-bar nav :is(button,:where(a.gl-link))::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:transparent}
:is(body.gl-home-page,body.gl-site) #gl-home-bar nav :is(button,:where(a.gl-link))[aria-current="page"]{color:var(--sky)}
:is(body.gl-home-page,body.gl-site) #gl-home-bar nav :is(button,:where(a.gl-link))[aria-current="page"]::after{background:var(--sky)}
:is(body.gl-home-page,body.gl-site) #gl-home-bar nav :is(button,:where(a.gl-link)):hover{color:#fff}
:is(body.gl-home-page,body.gl-site) .gl-home-tools{display:flex;align-items:center;gap:calc(var(--p)*24)}
:is(body.gl-home-page,body.gl-site) .gl-search{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;color:#f2f5f7;cursor:pointer}
:is(body.gl-home-page,body.gl-site) .gl-search svg{width:calc(var(--p)*27);min-width:18px;height:auto;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round}

/* Buttons */
:is(body.gl-home-page,body.gl-site) .gl-btn{display:inline-flex;align-items:center;justify-content:center;gap:calc(var(--p)*14);min-height:44px;margin:0;border-radius:calc(var(--p)*4);font:500 max(14px,calc(var(--p)*19))/1.2 var(--sans);letter-spacing:0;cursor:pointer;text-decoration:none;white-space:nowrap;transition:filter .2s,background .2s}
:is(body.gl-home-page,body.gl-site) .gl-btn:hover{filter:brightness(1.12)}
:is(body.gl-home-page,body.gl-site) .gl-bar-cta{width:auto;min-width:calc(var(--p)*217);height:calc(var(--p)*49);padding:0 calc(var(--p)*18);font-size:max(12px,calc(var(--p)*16));font-weight:400}
/* N11 (PLACEMENT_MAP, L21394): the header CTA reads "Explore the research method"; it sizes to its text. */
:is(body.gl-home-page,body.gl-site) .gl-btn-outline{background:transparent;color:#58bdf0;border:1px solid #2f8fd2}
:is(body.gl-home-page,body.gl-site) .gl-btn-bright{width:auto;min-width:calc(var(--p)*318);height:calc(var(--p)*59);padding:0 calc(var(--p)*20);background:linear-gradient(90deg,#00477a 0%,#0a6fb4 38%,#1a76bb 100%);color:#fff;border:0;box-shadow:0 0 calc(var(--p)*28) rgba(30,140,220,.18)}
/* WEB-220: white label stays at or above 4.5:1 across the whole gradient (end stop #1a76bb = 4.82:1), including hover. */
:is(body.gl-home-page,body.gl-site) .gl-btn-bright:hover{filter:none;box-shadow:0 0 calc(var(--p)*34) rgba(30,140,220,.32)}
:is(body.gl-home-page,body.gl-site) .gl-btn-ghost{width:auto;min-width:calc(var(--p)*258);height:calc(var(--p)*59);padding:0 calc(var(--p)*20);background:rgba(0,0,0,.25);color:#fff;border:1.5px solid #e2e6ea}
:is(body.gl-home-page,body.gl-site) .gl-btn-navy{width:auto;min-width:calc(var(--p)*294);height:calc(var(--p)*58);padding:0 calc(var(--p)*20);background:var(--navy);color:#fff;border:0}
:is(body.gl-home-page,body.gl-site) .gl-btn-sky{width:auto;min-width:calc(var(--p)*282);height:calc(var(--p)*57);padding:0 calc(var(--p)*20);background:#379fe8;color:#04121f;border:0}
/* QA-1, QA-2 (Round 5b): the four fixed-width buttons keep the mockup width as a minimum and grow to fit their label. */

/* Shared */
body.gl-home-page main.home-content{display:block;padding:0;margin:0;max-width:none;background:var(--paper);color:var(--ink-dark)}
body.gl-home-page main.home-content>section{position:relative;margin:0;max-width:none;border:0;overflow:hidden}
body.gl-home-page main.home-content h1,body.gl-home-page main.home-content h2,body.gl-home-page main.home-content h3{font-family:var(--serif);font-variation-settings:'opsz' 28;overflow-wrap:normal;text-transform:none;margin:0}
body.gl-home-page main.home-content p{margin:0;overflow-wrap:normal}
body.gl-home-page .gl-eyebrow{font:500 max(12px,calc(var(--p)*16.6))/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;margin:0}
body.gl-home-page .gl-dot{color:#2a9ae6}

/* Hero */
body.gl-home-page .gl-hero{height:calc(var(--p)*632);padding:0 0 0 calc(var(--frame) + var(--p)*73);background:radial-gradient(ellipse at 72% 40%,#04121d 0%,#010a12 40%,transparent 70%),linear-gradient(90deg,#000204 0%,#00050a 45%,#01090f 100%);color:#fff}
body.gl-home-page .gl-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(70,130,170,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(70,130,170,.05) 1px,transparent 1px);background-size:calc(var(--p)*96) calc(var(--p)*96);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%,#000 60%,transparent 70%);mask-image:linear-gradient(90deg,transparent 0%,#000 30%,#000 60%,transparent 70%)}
body.gl-home-page .gl-hero-art{position:absolute;top:0;left:calc(var(--frame) + var(--p)*731);width:calc(var(--p)*706);height:calc(var(--p)*629);pointer-events:none}
body.gl-home-page .gl-hero-art img{display:block;width:100%;height:100%;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 96%,transparent 100%),linear-gradient(transparent 0,#000 0);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 97%,transparent 100%)}
body.gl-home-page .gl-hero-copy{position:relative;z-index:2;padding-top:calc(var(--p)*55);width:calc(var(--p)*720)}
body.gl-home-page .gl-hero .gl-eyebrow{font-size:max(12px,calc(var(--p)*16.3));letter-spacing:.27em;color:#eef1f4;font-weight:500}
body.gl-home-page .gl-hero .gl-hero-title{margin-top:calc(var(--p)*16);width:auto;font-size:calc(var(--p)*81);line-height:calc(var(--p)*83);font-weight:500;letter-spacing:-.012em;color:#f7f8f9}
body.gl-home-page .gl-hero-lede{margin-top:calc(var(--p)*28)!important;width:auto;font-size:max(15px,calc(var(--p)*20.8));line-height:calc(var(--p)*33.5);color:#d3d9de;font-weight:400}
body.gl-home-page .gl-actions{display:flex;gap:calc(var(--p)*26);margin-top:calc(var(--p)*37)}
body.gl-home-page .gl-chain{position:absolute;z-index:2;top:calc(var(--p)*72);left:calc(var(--frame) + var(--p)*1266);margin:0;padding:0;list-style:none;display:grid;row-gap:calc(var(--p)*72)}
/* GL QA F1 on 0ee4a0f (WEB-227 SIXTH; Governor 2:16 PM ET ruling keeps the 187fdb4 sizes): below 1280px the chain's
   12px type floor makes "INTELLIGENCE" reach the hero's clipped right edge (0.6px past it at 901px even at 187fdb4).
   Ease the column left by up to 15px as the viewport narrows (0 at 1280 and wider, 15px at 901), so the words always
   end inside the hero. Sizes unchanged. */
@media (min-width:901px) and (max-width:1279px){body.gl-home-page .gl-chain{left:calc(var(--frame) + var(--p)*1266 - (1280px - 100vw) * .04)}}
body.gl-home-page .gl-chain li{display:flex;flex-direction:column;gap:calc(var(--p)*6);position:relative}
body.gl-home-page .gl-chain li::before{content:"";position:absolute;right:calc(100% + var(--p)*12);top:calc(var(--p)*10);width:calc(var(--p)*34);height:1px;background:rgba(170,205,230,.55)}
body.gl-home-page .gl-chain strong{font:600 max(12px,calc(var(--p)*17.5))/1.2 var(--sans);letter-spacing:.17em;text-transform:uppercase;color:#f4f6f8}
body.gl-home-page .gl-chain span{font:400 max(12px,calc(var(--p)*15.5))/1.3 var(--sans);color:#c7ced4}

/* Core idea */
body.gl-home-page .gl-core{display:grid;grid-template-columns:calc(var(--p)*679) 1fr;column-gap:0;height:calc(var(--p)*509);padding:calc(var(--p)*41) calc(var(--frame) + var(--p)*34) 0 calc(var(--frame) + var(--p)*73);background:linear-gradient(180deg,#fbfbfb,#f6f6f6);color:var(--ink-dark)}
body.gl-home-page .gl-core .gl-eyebrow{color:#1b222a;font-weight:600}
body.gl-home-page .gl-core h2{margin-top:calc(var(--p)*21);font-size:calc(var(--p)*51.5);line-height:calc(var(--p)*58.5);font-weight:620;letter-spacing:-.018em;color:#0b1016}
body.gl-home-page .gl-core-copy>p:not(.gl-eyebrow){margin-top:calc(var(--p)*20)!important;width:auto;font-size:max(15px,calc(var(--p)*20.5));line-height:calc(var(--p)*31.5);color:#3c454e}
body.gl-home-page .gl-core-copy .gl-go{margin-top:calc(var(--p)*24)}
body.gl-home-page .gl-principles{position:relative;padding-left:calc(var(--p)*45)}
body.gl-home-page .gl-principles::before{content:"";position:absolute;left:0;top:calc(var(--p)*-6);bottom:calc(var(--p)*41);width:1px;background:#dfe2e5}
body.gl-home-page .gl-principles .gl-eyebrow{color:#1b222a;font-weight:600}
body.gl-home-page .gl-principles ul{display:grid;grid-template-columns:1fr 1fr;margin:calc(var(--p)*4) 0 0;padding:0;list-style:none}
body.gl-home-page .gl-principles li{display:flex;align-items:flex-start;gap:calc(var(--p)*30);height:calc(var(--p)*133);padding-top:calc(var(--p)*23);border-bottom:1px solid #e4e6e8}
body.gl-home-page .gl-principles li:nth-child(odd){padding-right:calc(var(--p)*20);border-right:1px solid #e4e6e8;padding-left:calc(var(--p)*0)}
body.gl-home-page .gl-principles li:nth-child(even){padding-left:calc(var(--p)*22)}
body.gl-home-page .gl-principles li:nth-child(n+5){border-bottom:0}
body.gl-home-page .gl-principles svg{width:calc(var(--p)*66);height:calc(var(--p)*66);min-width:28px;min-height:28px;flex:none;fill:none;stroke:#0d3863;stroke-width:2.1;stroke-linejoin:round;stroke-linecap:round;margin:calc(var(--p)*-10) 0 0}
body.gl-home-page .gl-principles h3{font-size:max(16px,calc(var(--p)*21));line-height:1.25;font-weight:600;letter-spacing:-.005em;color:#0d1217}
body.gl-home-page .gl-principles li p{margin-top:calc(var(--p)*7)!important;font-size:max(13px,calc(var(--p)*17));line-height:calc(var(--p)*25.5);color:#4c555e}

/* Problem */
body.gl-home-page .gl-problem{display:grid;grid-template-columns:calc(var(--p)*720) 1fr;height:calc(var(--p)*437);padding:calc(var(--p)*39) calc(var(--frame) + var(--p)*51) 0 calc(var(--frame) + var(--p)*73);background:#00070d;color:#fff}
body.gl-home-page .gl-problem::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--frame) + var(--p)*464);width:calc(var(--p)*332);background:url('provisional/problem-network.webp') center/100% 100% no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 25%,#000 92%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 25%,#000 92%,transparent 100%);pointer-events:none}
body.gl-home-page .gl-problem-copy{position:relative;z-index:1}
body.gl-home-page .gl-problem .gl-eyebrow{color:#3fa2e3;font-weight:500}
body.gl-home-page .gl-problem h2{margin-top:calc(var(--p)*17);width:auto;font-size:calc(var(--p)*52);line-height:calc(var(--p)*57);font-weight:520;letter-spacing:-.012em;color:#fff}
body.gl-home-page .gl-problem-copy>p:not(.gl-eyebrow){margin-top:calc(var(--p)*22)!important;width:auto;font-size:max(15px,calc(var(--p)*20.3));line-height:calc(var(--p)*31);color:#cdd4da}
body.gl-home-page .gl-problem-copy .gl-go{margin-top:calc(var(--p)*25)}
body.gl-home-page .gl-problem-links{position:relative;z-index:1;display:grid;gap:calc(var(--p)*8.5);margin:calc(var(--p)*-14) 0 0;padding:0;list-style:none;align-content:start;align-self:start}
:is(body.gl-home-page,body.gl-site) .gl-go{margin:0}
body.gl-home-page .gl-problem-links li{display:flex;flex-direction:column}
body.gl-home-page .gl-problem-links :is(button,:where(a.gl-link)){display:flex;align-items:center;width:100%;height:calc(var(--p)*90);min-height:56px;padding:0 calc(var(--p)*26) 0 calc(var(--p)*30);background:rgba(3,14,23,.72);border:1px solid #1b3341;border-radius:calc(var(--p)*4);color:#fff;text-align:left;cursor:pointer;font:inherit}
body.gl-home-page .gl-problem-links :is(button,:where(a.gl-link)):hover{border-color:#2f6f99;background:rgba(6,24,38,.85)}
body.gl-home-page .gl-picon{width:calc(var(--p)*56);height:calc(var(--p)*56);min-width:26px;min-height:26px;flex:none;fill:none;stroke:#4fb8f0;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
body.gl-home-page .gl-ptext{display:flex;flex-direction:column;gap:calc(var(--p)*6);margin-left:calc(var(--p)*33);flex:1;min-width:0}
body.gl-home-page .gl-ptitle{font:500 max(16px,calc(var(--p)*21))/1.2 var(--serif);font-variation-settings:'opsz' 24;color:#fff}
body.gl-home-page .gl-pdesc{font:400 max(13px,calc(var(--p)*16.8))/1.3 var(--sans);color:#bcc5cc}
body.gl-home-page .gl-problem-links .gl-arrow{color:#d6dde2;margin-left:calc(var(--p)*16)}

/* Latest research */
body.gl-home-page .gl-latest{height:calc(var(--p)*472);padding:calc(var(--p)*38) calc(var(--frame) + var(--p)*65) 0 calc(var(--frame) + var(--p)*79);background:var(--paper)}
body.gl-home-page .gl-latest-head{display:flex;align-items:center;justify-content:space-between;height:calc(var(--p)*20)}
body.gl-home-page .gl-latest .gl-eyebrow{color:#1b222a;font-weight:600}
body.gl-home-page .gl-view-all{display:inline-flex;align-items:center;gap:calc(var(--p)*10);min-height:44px;padding:0;border:0;background:none;color:#0c3b6c;font:400 max(13px,calc(var(--p)*16.3))/1.2 var(--sans);cursor:pointer}
:is(body.gl-home-page,body.gl-site) .gl-cards{display:grid;grid-template-columns:repeat(3,calc(var(--p)*409));justify-content:space-between;margin-top:calc(var(--p)*16);width:calc(var(--p)*1287)}
:is(body.gl-home-page,body.gl-site) .gl-card{display:flex;flex-direction:column;height:calc(var(--p)*354);background:#fdfdfd;border:1px solid #e3e6e9;border-radius:calc(var(--p)*5);overflow:hidden;box-shadow:0 1px 2px rgba(15,25,35,.04)}
:is(body.gl-home-page,body.gl-site) .gl-card img{display:block;width:100%;height:calc(var(--p)*139);object-fit:cover}
:is(body.gl-home-page,body.gl-site) .gl-card-body{display:flex;flex-direction:column;flex:1;padding:calc(var(--p)*18) calc(var(--p)*24) calc(var(--p)*14) calc(var(--p)*19)}
:is(body.gl-home-page,body.gl-site) .gl-card-kind{font:600 max(12px,calc(var(--p)*13))/1.2 var(--sans);letter-spacing:.17em;text-transform:uppercase;color:#1e4e84}
:is(body.gl-home-page,body.gl-site) .gl-card h3{margin-top:calc(var(--p)*12)!important;font-size:max(17px,calc(var(--p)*24.5));line-height:calc(var(--p)*29.5);font-weight:600;letter-spacing:-.008em;color:#0b1015}
:is(body.gl-home-page,body.gl-site) .gl-card-body>p:not(.gl-card-kind){margin-top:calc(var(--p)*9)!important;font-size:max(14px,calc(var(--p)*18.6));line-height:calc(var(--p)*27);color:#4a535c}
:is(body.gl-home-page,body.gl-site) .gl-card .gl-go{margin-top:auto}
:is(body.gl-home-page,body.gl-site) .gl-card-go{display:flex;align-items:center;width:44px;height:44px;padding:0;margin-left:-2px;border:0;background:none;color:#0c3b6c;cursor:pointer}
:is(body.gl-home-page,body.gl-site) .gl-card-go .gl-arrow{width:calc(var(--p)*22);min-width:18px;stroke-width:1.8}

/* Base (the homepage does not load restored-site.css) */
*,*::before,*::after{box-sizing:border-box}
/* C8 (Paul, 2026-11-01; WEB-215): the homepage no longer loads opening.css, which set these root defaults. */
:root:has(>body.gl-home-page),:root:has(>body.gl-site){color-scheme:dark;background:#000}
html{scroll-behavior:smooth;scroll-padding-top:110px}
:is(body.gl-home-page,body.gl-site){margin:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:is(body.gl-home-page,body.gl-site) img{max-width:100%}
:is(body.gl-home-page,body.gl-site) :is(button,:where(a.gl-link)){font-family:inherit}
:is(body.gl-home-page,body.gl-site) .skip-link{position:fixed;top:-100px;left:16px;z-index:2147483640;min-height:44px;padding:12px 16px;border:0;background:#fff;color:#000;font:500 14px/1.2 var(--sans);cursor:pointer}
:is(body.gl-home-page,body.gl-site) .skip-link:focus{top:12px}

/* Footer: the site footer, set in the homepage palette */
:is(body.gl-home-page,body.gl-site) .site-footer{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;padding:56px calc(var(--frame) + max(22px,var(--p)*73)) 30px;background:#00060c;border-top:1px solid #0b1a26;color:#c3cbd1;font:400 14px/1.6 var(--sans)}
:is(body.gl-home-page,body.gl-site) .site-footer .gl-go{margin:0}
:is(body.gl-home-page,body.gl-site) .site-footer .footer-name{min-height:44px;padding:0;border:0;background:none;color:#fff;font:500 var(--fs-h3)/1.3 var(--serif);text-align:left;cursor:pointer}
/* Governor 2:16 PM ET ruling: the homepage footer name keeps its 187fdb4 size. */
body.gl-home-page .site-footer .footer-name{font:500 22px/1.3 var(--serif)}
:is(body.gl-home-page,body.gl-site) .site-footer p{margin:14px 0 0;color:#9fa9b1}
:is(body.gl-home-page,body.gl-site) .site-footer nav{display:grid;grid-template-columns:1fr 1fr;gap:0 25px;align-content:start}
:is(body.gl-home-page,body.gl-site) .site-footer nav :is(button,:where(a.gl-link)){display:flex;align-items:center;width:100%;min-height:44px;padding:0;border:0;background:none;color:#c7d0d6;font:400 14px/1.3 var(--sans);text-align:left;cursor:pointer}
:is(body.gl-home-page,body.gl-site) .site-footer nav :is(button,:where(a.gl-link)):hover,:is(body.gl-home-page,body.gl-site) .site-footer .footer-name:hover{color:#56c4f2}
:is(body.gl-home-page,body.gl-site) .site-footer .footer-credit{grid-column:1/-1;margin:0;padding-top:24px;border-top:1px solid #12222e;font-size:12px;color:#8e99a2}
:is(body.gl-home-page,body.gl-site) .site-footer .footer-credit span{display:inline-block;margin-top:8px;color:#56c4f2}
@media (max-width:600px){:is(body.gl-home-page,body.gl-site) .site-footer{grid-template-columns:1fr;gap:24px;padding:44px 22px 28px}}

/* Focus */
:is(body.gl-home-page,body.gl-site) :is(button,:where(a.gl-link)):focus-visible{outline:2px solid #56c4f2;outline-offset:3px}

/* Mid widths: keep the desktop composition but stop the header from crowding */

/* Stacked layout */
@media (max-width:900px){
  body.gl-home-page .gl-br{display:none}

  :is(body.gl-home-page,body.gl-site) .gl-btn{height:52px;font-size:16px;padding:0 22px;gap:12px;border-radius:4px}
  :is(body.gl-home-page,body.gl-site) .gl-arrow{width:17px}
  body.gl-home-page .gl-eyebrow{font-size:12px;letter-spacing:.2em}

  body.gl-home-page .gl-hero{display:flex;flex-direction:column;height:auto;padding:0}
  body.gl-home-page .gl-hero::before{display:none}
  body.gl-home-page .gl-hero-copy{order:1;width:auto;padding:36px 22px 30px}
  body.gl-home-page .gl-hero .gl-eyebrow{font-size:12px;letter-spacing:.2em}
  body.gl-home-page .gl-hero .gl-hero-title{margin-top:16px;font-size:clamp(34px,10.4vw,64px);line-height:1.04}
  body.gl-home-page .gl-hero-lede{width:auto;max-width:600px;margin-top:20px!important;font-size:16px;line-height:1.65}
  body.gl-home-page .gl-actions{flex-wrap:wrap;gap:12px;margin-top:26px}
  body.gl-home-page .gl-actions .gl-go{flex:1 1 220px}
  :is(body.gl-home-page,body.gl-site) .gl-btn-bright,:is(body.gl-home-page,body.gl-site) .gl-btn-ghost{width:100%}
  body.gl-home-page .gl-hero-art{order:2;position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:1004/894}
  body.gl-home-page .gl-hero-art img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 100%);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 100%)}
  body.gl-home-page .gl-chain{order:3;position:absolute;left:auto;right:12px;bottom:0;top:auto;height:calc(100vw * 894 / 1004);max-height:none;align-content:center;row-gap:clamp(14px,6vw,48px);width:max-content;max-width:40vw}
  body.gl-home-page .gl-chain li::before{display:none}
  body.gl-home-page .gl-chain strong{font-size:12px;letter-spacing:.14em}
  body.gl-home-page .gl-chain span{font-size:12px}

  body.gl-home-page .gl-core{display:block;height:auto;padding:44px 22px 46px}
  body.gl-home-page .gl-core h2{margin-top:14px;font-size:clamp(28px,8.4vw,46px);line-height:1.17}
  body.gl-home-page .gl-core-copy>p:not(.gl-eyebrow){width:auto;max-width:640px;margin-top:16px!important;font-size:16px;line-height:1.65}
  body.gl-home-page .gl-core-copy .gl-go{margin-top:24px}
  :is(body.gl-home-page,body.gl-site) .gl-btn-navy,:is(body.gl-home-page,body.gl-site) .gl-btn-sky{width:auto;min-width:240px}
  body.gl-home-page .gl-principles{margin-top:42px;padding:32px 0 0;border-top:1px solid #dfe2e5}
  body.gl-home-page .gl-principles::before{display:none}
  body.gl-home-page .gl-principles ul{margin-top:8px}
  body.gl-home-page .gl-principles li,body.gl-home-page .gl-principles li:nth-child(odd),body.gl-home-page .gl-principles li:nth-child(even){height:auto;padding:20px 12px 20px 0;gap:14px}
  body.gl-home-page .gl-principles li:nth-child(even){padding-left:16px;padding-right:0}
  body.gl-home-page .gl-principles svg{width:34px;height:34px;margin:0}
  body.gl-home-page .gl-principles h3{font-size:17px}
  body.gl-home-page .gl-principles li p{max-width:none;margin-top:4px!important;font-size:14px;line-height:1.45}

  body.gl-home-page .gl-problem{display:block;height:auto;padding:48px 22px 52px}
  body.gl-home-page .gl-problem::before{left:auto;right:-40px;width:300px;opacity:.75}
  body.gl-home-page .gl-problem h2{margin-top:14px;font-size:clamp(28px,8.4vw,46px);line-height:1.17}
  body.gl-home-page .gl-problem-copy>p:not(.gl-eyebrow){width:auto;max-width:640px;margin-top:16px!important;font-size:16px;line-height:1.65}
  body.gl-home-page .gl-problem-copy .gl-go{margin-top:24px}
  body.gl-home-page .gl-problem-links{margin-top:34px;gap:10px}
  body.gl-home-page .gl-problem-links :is(button,:where(a.gl-link)){height:auto;min-height:84px;padding:16px 16px 16px 18px}
  body.gl-home-page .gl-picon{width:32px;height:32px}
  body.gl-home-page .gl-ptext{margin-left:18px}
  body.gl-home-page .gl-ptitle{font-size:17px}
  body.gl-home-page .gl-pdesc{font-size:14px}

  body.gl-home-page .gl-latest{height:auto;padding:44px 22px 52px}
  body.gl-home-page .gl-latest-head{height:auto}
  body.gl-home-page .gl-view-all{font-size:14px;gap:8px}
  :is(body.gl-home-page,body.gl-site) .gl-cards{width:auto;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:18px;margin-top:14px}
  :is(body.gl-home-page,body.gl-site) .gl-card{height:auto}
  :is(body.gl-home-page,body.gl-site) .gl-card img{height:auto;aspect-ratio:867/291}
  :is(body.gl-home-page,body.gl-site) .gl-card-body{padding:18px 20px 10px}
  :is(body.gl-home-page,body.gl-site) .gl-card h3{margin-top:10px!important;font-size:20px;line-height:1.3}
  :is(body.gl-home-page,body.gl-site) .gl-card-body>p:not(.gl-card-kind){margin-top:8px!important;font-size:15px;line-height:1.6}
  :is(body.gl-home-page,body.gl-site) .gl-card .gl-go{margin-top:6px}
}
@media (max-width:900px){
  body.gl-home-page .gl-latest-head{flex-wrap:wrap;column-gap:16px}
}
@media (max-width:379px){
  body.gl-home-page .gl-hero-art{aspect-ratio:auto}
  body.gl-home-page .gl-hero-art img{height:auto;aspect-ratio:1004/894}
  body.gl-home-page .gl-chain{position:relative;right:auto;height:auto;max-width:none;width:auto;grid-template-columns:1fr 1fr;row-gap:18px;column-gap:16px;padding:18px 22px 30px;background:#01090f}
}
@media (max-width:420px){
  body.gl-home-page .gl-principles ul{grid-template-columns:1fr 1fr}
  body.gl-home-page .gl-principles li,body.gl-home-page .gl-principles li:nth-child(odd),body.gl-home-page .gl-principles li:nth-child(even){flex-direction:column;gap:10px}
}
@media (prefers-reduced-motion:reduce){:is(body.gl-home-page,body.gl-site) .gl-btn{transition:none}}

/* Page stacking: header, main, footer in one column. The old opening's rules (#site, .identity, .brand-sub,
   .intro-caption, .scroll-invite, its two IBM font faces and --gl-bar-h) went with the opening (C8, WEB-215). */
:is(body.gl-home-page,body.gl-site){display:flex;flex-direction:column;min-height:100svh}
:is(body.gl-home-page,body.gl-site)>header#gl-home-bar{order:-1;flex:0 0 auto}
:is(body.gl-home-page,body.gl-site)>main,:is(body.gl-home-page,body.gl-site)>footer{flex:0 0 auto}

/* Header at every width: brand name, search (/library/), Company (/company/) and the CTA stay one click away
   (WEB-214, WEB-223, WEB-226). Applications was dropped by PLACEMENT_MAP (2026-11-01, WEB-227 FIFTH); About is kept (QA-4). */
body.gl-home-page #gl-home-bar nav :is(button,:where(a.gl-link)).gl-hold,body.gl-home-page #gl-home-bar nav :is(button,:where(a.gl-link)).gl-hold:hover{color:#eef2f5;cursor:default}
:is(body.gl-home-page,body.gl-site) .gl-card-go.gl-hold{color:#8a97a4;cursor:default}
/* 900-1279 (WEB-214, WEB-223, WEB-226; Round 4): one row, 72px, like the mockup. Brand, the six nav items (Company, About
   included), Search (/library/) and the CTA all sit in the row, one click each; brand, gaps and CTA are compacted. */
@media (max-width:1279px){
  :is(body.gl-home-page,body.gl-site) header#gl-home-bar{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:72px;height:72px;min-height:0;column-gap:clamp(8px,calc(100vw * .016),20px);padding:0 max(14px,var(--frame))}
  :is(body.gl-home-page,body.gl-site) #gl-home-bar>.gl-go{grid-column:1;grid-row:1}
  :is(body.gl-home-page,body.gl-site) #gl-home-bar nav{grid-column:2;grid-row:1;justify-self:stretch;justify-content:space-between;gap:0;max-width:640px;margin:0 auto;width:100%}
  :is(body.gl-home-page,body.gl-site) .gl-home-tools{grid-column:3;grid-row:1;justify-self:end;gap:6px}
  :is(body.gl-home-page,body.gl-site) #gl-home-bar .site-brand{gap:8px}
  :is(body.gl-home-page,body.gl-site) #gl-home-bar .site-brand img{width:40px;height:40px;min-width:40px;min-height:40px;margin:0 -2px}
  :is(body.gl-home-page,body.gl-site) .gl-brand-text{gap:1px}
  :is(body.gl-home-page,body.gl-site) .gl-brand-name{font-size:19px}
  :is(body.gl-home-page,body.gl-site) #gl-home-bar .site-brand small{font-size:11.5px;letter-spacing:.08em}
  :is(body.gl-home-page,body.gl-site) #gl-home-bar nav :is(button,:where(a.gl-link)){height:44px;padding:0 6px;font-size:13.5px}
  :is(body.gl-home-page,body.gl-site) .gl-bar-cta{width:auto;height:44px;padding:0 14px;font-size:13.5px;gap:8px}
  :is(body.gl-home-page,body.gl-site) .gl-bar-cta .gl-arrow{display:none}
}
/* 900-1099: the CTA is the compact arrow button; its accessible name stays "Explore the research method" (N11).
   v14: was 900-1023; the seventh nav item (The Truth with Paul, Paul 2026-11-01 22:36) needs the room up to 1099. */
@media (min-width:900px) and (max-width:1099px){
  :is(body.gl-home-page,body.gl-site) .gl-bar-cta{width:44px;min-width:44px;padding:0;justify-content:center}
  :is(body.gl-home-page,body.gl-site) .gl-bar-cta .gl-cta-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  :is(body.gl-home-page,body.gl-site) .gl-bar-cta .gl-arrow{display:block;width:18px}
}
/* Logo chime (Paul, 2026-11-01; C8, WEB-215): home-chime.js adds this decorative copy of the header mark for about
   1.6s, once per session. It sits above the page but takes no pointer events and is hidden from assistive tech. */
body.gl-home-page .gl-chime{position:fixed;z-index:60;margin:0;object-fit:contain;transform-origin:0 0;pointer-events:none;will-change:transform,opacity}
@media (prefers-reduced-motion:reduce){body.gl-home-page .gl-chime{display:none}}
/* Phones, 320-899 (D8; WEB-214, WEB-223, WEB-226): an 88px header in two 44px rows. Row 1 keeps the full name
   (Governed Logic / Reasoning Systems), Search (/library/) and the CTA pinned; row 2 is the nav on one line. When the
   nav is wider than the screen the header scrolls sideways, so every item, Company included, stays one tap away and
   nothing is hidden in a menu. */
@media (max-width:899px){
  html{scroll-padding-top:0}
  :is(body.gl-home-page,body.gl-site){--gl-tools-w:245px}
  :is(body.gl-home-page,body.gl-site) header#gl-home-bar{position:relative;grid-template-columns:minmax(0,1fr);grid-template-rows:44px 44px;height:88px;max-height:88px;column-gap:0;padding:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none}
  :is(body.gl-home-page,body.gl-site) header#gl-home-bar::-webkit-scrollbar{display:none}
  :is(body.gl-home-page,body.gl-site) #gl-home-bar>.gl-go{position:sticky;left:0;z-index:2;grid-column:1;grid-row:1;align-self:center;justify-self:start;padding-left:8px}
  :is(body.gl-home-page,body.gl-site) .gl-home-tools{position:sticky;left:calc(100% - var(--gl-tools-w));z-index:2;grid-column:1;grid-row:1;justify-self:end;width:var(--gl-tools-w);padding-right:8px;gap:2px;justify-content:flex-end}
  :is(body.gl-home-page,body.gl-site) #gl-home-bar .site-brand{gap:6px;min-height:44px}
  :is(body.gl-home-page,body.gl-site) #gl-home-bar .site-brand img{width:36px;height:36px;min-width:36px;min-height:36px;margin:0 -1px}
  :is(body.gl-home-page,body.gl-site) .gl-brand-text{gap:1px}
  :is(body.gl-home-page,body.gl-site) .gl-brand-name{font-size:16px;line-height:1.1}
  :is(body.gl-home-page,body.gl-site) #gl-home-bar .site-brand small{display:block;font-size:11.5px;line-height:1.15;letter-spacing:.05em}
  :is(body.gl-home-page,body.gl-site) .gl-bar-cta{width:auto;height:44px;padding:0 8px;gap:6px;font-size:12.5px;border-radius:4px}
  :is(body.gl-home-page,body.gl-site) .gl-bar-cta .gl-arrow{display:none}
  :is(body.gl-home-page,body.gl-site) #gl-home-bar nav{display:flex;grid-column:1;grid-row:2;justify-self:start;width:max-content;min-width:100%;height:44px;gap:0;padding:0 4px;justify-content:space-between}
  :is(body.gl-home-page,body.gl-site) #gl-home-bar nav :is(button,:where(a.gl-link)){justify-content:center;width:auto;height:44px;padding:0 10px;font-size:13px;line-height:1.1;white-space:nowrap;text-align:center}
  :is(body.gl-home-page,body.gl-site) #gl-home-bar nav :is(button,:where(a.gl-link))::after{left:10px;right:10px}
}
/* Round 4 (WEB-214, WEB-226): edge fades on the phone nav row show that it scrolls sideways. They are pinned to
   the row's edges, ignore pointers, and follow the header's own scroll: the right fade shows while more items lie
   to the right and is gone at the scroll end; the left fade appears once the row has scrolled. With no scroll
   range (or no scroll-timeline support) neither shows, so no label is ever dimmed at rest. */
@media (max-width:899px){
  :is(body.gl-home-page,body.gl-site) header#gl-home-bar::before,:is(body.gl-home-page,body.gl-site) header#gl-home-bar::after{content:"";display:block;position:sticky;z-index:3;grid-column:1;grid-row:2;width:44px;height:44px;margin:0;padding:0;pointer-events:none;opacity:0;transform:none;animation:none;background:none}
  :is(body.gl-home-page,body.gl-site) header#gl-home-bar::before{left:0;justify-self:start;background:linear-gradient(90deg,#010910 0%,rgba(1,9,16,.85) 35%,rgba(1,9,16,0) 100%)}
  :is(body.gl-home-page,body.gl-site) header#gl-home-bar::after{left:calc(100% - 44px);justify-self:start;margin-left:calc(100% - 44px);background:linear-gradient(270deg,#010910 0%,rgba(1,9,16,.85) 35%,rgba(1,9,16,0) 100%)}
  @supports (animation-timeline:scroll()){
    :is(body.gl-home-page,body.gl-site) header#gl-home-bar::before{animation:gl-fade-in linear both;animation-timeline:scroll(nearest inline);animation-range:0 48px}
    :is(body.gl-home-page,body.gl-site) header#gl-home-bar::after{animation:gl-fade-out linear both;animation-timeline:scroll(nearest inline)}
  }
}
@keyframes gl-fade-in{from{opacity:0}to{opacity:1}}
@keyframes gl-fade-out{0%,80%{opacity:1}100%{opacity:0}}
/* v14 (Paul 2026-11-01 22:34; QA layout 2026-11-01, "the 390 px nav strip cuts words off"): on phones the nav row wraps
   onto as many 44px rows as it needs (v14.1: two at every phone width, no padding under them: 132px), centred, so every item is whole and one tap away; nothing scrolls sideways and
   nothing is hidden in a menu. The edge fades (no longer needed) are off. */
@media (max-width:899px){
  :is(body.gl-home-page,body.gl-site) header#gl-home-bar{grid-template-rows:44px auto;height:auto;max-height:none;overflow:visible;padding-bottom:4px}
  /* v14.1: no padding under the nav rows (132px); /page-two/ (body.gl-site without gl-v14) keeps its header as it was. */
  :is(body.gl-home-page,body.gl-site.gl-v14) header#gl-home-bar{padding-bottom:0}
  :is(body.gl-home-page,body.gl-site) header#gl-home-bar::before,:is(body.gl-home-page,body.gl-site) header#gl-home-bar::after{content:none;display:none;animation:none}
  :is(body.gl-home-page,body.gl-site) #gl-home-bar nav{flex-wrap:wrap;justify-content:center;width:100%;min-width:0;height:auto;row-gap:0;padding:0 6px;box-sizing:border-box}
  :is(body.gl-home-page,body.gl-site) .gl-home-tools{position:static}
  :is(body.gl-home-page,body.gl-site) #gl-home-bar>.gl-go{position:static}
}
/* 390-599 (N11): the CTA text sets on two centred lines in a 118px button, so Search clears the brand. */
@media (min-width:390px) and (max-width:599px){
  :is(body.gl-home-page,body.gl-site){--gl-tools-w:172px}
  :is(body.gl-home-page,body.gl-site) .gl-bar-cta{width:118px;padding:0 8px;font-size:12px;line-height:1.15;white-space:normal;text-align:center}
}
/* Below 390px the CTA is the compact arrow button; its accessible name stays "Explore the research method" (N11). */
@media (max-width:389px){
  :is(body.gl-home-page,body.gl-site){--gl-tools-w:98px}
  :is(body.gl-home-page,body.gl-site) .gl-bar-cta{width:44px;min-width:44px;padding:0;justify-content:center}
  :is(body.gl-home-page,body.gl-site) .gl-bar-cta .gl-cta-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  :is(body.gl-home-page,body.gl-site) .gl-bar-cta .gl-arrow{display:block;width:18px}
  :is(body.gl-home-page,body.gl-site) #gl-home-bar nav :is(button,:where(a.gl-link)){padding:0 8px}
  /* v14.1 (Paul 2026-11-01 22:34; carried over): tighter items so the seven nav words sit whole on two 44px rows (was
     three), each still a 44px target and at least 12px. Not /page-two/ (kept as it was). */
  :is(body.gl-home-page,body.gl-site.gl-v14) #gl-home-bar nav{padding:0 2px;column-gap:0}
  :is(body.gl-home-page,body.gl-site.gl-v14) #gl-home-bar nav :is(button,:where(a.gl-link)){min-width:44px;padding:0 5px;font-size:12.5px}
  :is(body.gl-home-page,body.gl-site.gl-v14) #gl-home-bar nav :is(button,:where(a.gl-link))::after{left:5px;right:5px}
}

/* Route to Paul's previous homepage, kept byte-as-is at /page-two/ (WEB-205, WEB-231). Below the mockup's last band. */
body.gl-home-page .gl-next{display:flex;justify-content:center;padding:0 22px calc(var(--p)*56 + 24px);background:var(--paper)}
:is(body.gl-home-page,body.gl-site) .gl-btn-line{height:52px;padding:0 24px;background:transparent;color:#0c3b6c;border:1.5px solid #0c3b6c;font-size:16px}

/* ---- v13 depth (Paul's approval, Nov 1 2026, 12:30 PM ET; QA research 2026-11-01): dark bands only, white stays plain ----
   Layers, in order: layered deep-blue radial light; a 1px seam where the dark band meets white; card elevation; a
   pre-rendered grain tile (provisional/grain.png) and a faint Seed of Life kept off the text. Motion only under
   prefers-reduced-motion: no-preference. Contrast is measured on rendered pixels (stays at or above AA). */
:is(body.gl-home-page,body.gl-site){--seam:linear-gradient(90deg,rgba(47,156,230,0),rgba(47,156,230,.38) 22%,rgba(108,200,240,.55) 50%,rgba(47,156,230,.38) 78%,rgba(47,156,230,0));--grain:url('provisional/grain.png')}
/* 1. Problem band. The Seed of Life sits half off the right edge, behind the defect cards' opaque fill. */
body.gl-home-page .gl-problem{background:
  var(--seam) top/100% 1px no-repeat,var(--seam) bottom/100% 1px no-repeat,
  var(--grain) 0 0/128px 128px repeat,
  radial-gradient(52% 80% at 12% 0%,rgba(10,90,156,.24),rgba(10,90,156,0) 72%),
  radial-gradient(40% 75% at 92% 100%,rgba(0,67,116,.30),rgba(0,67,116,0) 72%),
  radial-gradient(90% 120% at 55% 130%,rgba(4,30,52,.55),rgba(4,30,52,0) 62%),
  #00070d}
body.gl-home-page .gl-problem::after{content:"";position:absolute;z-index:0;top:50%;right:calc(var(--frame) - var(--p)*190);width:calc(var(--p)*380);aspect-ratio:244/248;translate:0 -50%;
  background:url('provisional/seed-of-life.png') center/contain no-repeat;opacity:.07;pointer-events:none}
body.gl-home-page .gl-problem-links :is(button,:where(a.gl-link)){box-shadow:inset 0 1px 0 rgba(108,200,240,.07),0 2px 6px rgba(0,0,0,.35),0 12px 28px -14px rgba(0,0,0,.8)}
body.gl-home-page .gl-problem-links :is(button,:where(a.gl-link)):hover{box-shadow:inset 0 1px 0 rgba(108,200,240,.12),0 3px 8px rgba(0,0,0,.4),0 18px 36px -14px rgba(0,0,0,.85)}
@media (max-width:900px){body.gl-home-page .gl-problem::after{display:none}}
@media (prefers-reduced-motion:no-preference){
  @keyframes gl-seed-turn{to{rotate:360deg}}
  body.gl-home-page .gl-problem::after{animation:gl-seed-turn 240s linear infinite}
  body.gl-home-page .gl-problem-links :is(button,:where(a.gl-link)){transition:box-shadow .2s ease,border-color .2s ease,background-color .2s ease}
}
/* 2. Footer: the seam on its top edge (it meets the white page on every inner page and the white Explore band on the
   homepage), deep-blue light from the lower left, grain, and the Seed of Life half off the lower right corner. */
:is(body.gl-home-page,body.gl-site) .site-footer{position:relative;isolation:isolate;overflow:hidden;border-top-color:transparent;background:
  var(--seam) top/100% 1px no-repeat,
  var(--grain) 0 0/128px 128px repeat,
  radial-gradient(55% 90% at 8% 100%,rgba(10,90,156,.22),rgba(10,90,156,0) 70%),
  radial-gradient(45% 70% at 70% 0%,rgba(0,67,116,.20),rgba(0,67,116,0) 70%),
  #00060c}
:is(body.gl-home-page,body.gl-site) .site-footer::after{content:"";position:absolute;z-index:-1;right:calc(var(--frame) - var(--p)*150);bottom:calc(var(--p)*-150);width:calc(var(--p)*360);aspect-ratio:244/248;
  background:url('provisional/seed-of-life.png') center/contain no-repeat;opacity:.06;pointer-events:none}
@media (max-width:900px){:is(body.gl-home-page,body.gl-site) .site-footer::after{display:none}}
@media (prefers-reduced-motion:no-preference){:is(body.gl-home-page,body.gl-site) .site-footer::after{animation:gl-seed-turn 300s linear infinite reverse}}
/* v14 (Paul 2026-11-01 22:36): the seventh nav item (The Truth with Paul) fits the one-row desktop bar: the brand column
   takes its own width instead of a fixed 400 mockup px, and the nav gap steps down from 22 to 18. */
@media (min-width:1280px){
  :is(body.gl-home-page,body.gl-site) header#gl-home-bar{grid-template-columns:auto 1fr auto;column-gap:calc(var(--p)*22)}
  :is(body.gl-home-page,body.gl-site) #gl-home-bar nav{gap:calc(var(--p)*18)}
}
/* v14: at 900-1023 the seven nav items set a step tighter (13px, 4px sides) so the row clears Search. */
@media (min-width:900px) and (max-width:1023px){
  :is(body.gl-home-page,body.gl-site) #gl-home-bar nav :is(button,:where(a.gl-link)){padding:0 4px;font-size:13px}
}

/* v14.2 (Paul 2026-11-02 18:08 voice call; Vera's mockup apex-1440/390-video-spot): the homepage video band, a full-width
   dark band directly under the hero: a centred 16:9 player, 960px at most on desktop, full width on phones. Ready to play
   (controls, no autoplay, captions on by default); nothing moves until the visitor presses play. */
body.gl-home-page .gl-video{display:flex;justify-content:center;padding:clamp(40px,5vw,72px) calc(var(--frame) + var(--p)*73);background:radial-gradient(ellipse at 50% 0%,#04121d 0%,#010a12 55%,#00050a 100%);border-top:1px solid rgba(108,200,240,.14)}
body.gl-home-page .gl-video video{display:block;width:100%;max-width:960px;height:auto;aspect-ratio:16/9;background:#000;border-radius:6px;box-shadow:0 18px 50px rgba(0,0,0,.55)}
@media (max-width:899px){
  body.gl-home-page .gl-video{padding:28px 0}
  body.gl-home-page .gl-video video{max-width:none;border-radius:0}
}