/* ===== Inner pages (developer/build_pages.py) =======================================================
   The 26 pages behind the navbar share the homepage's compiled stylesheets (Aeonik, the 12-column
   grid, the guide lines in brand.css) and add these components. Square corners, the Arabic.ai purple
   as the only accent, lilac on dark grounds. Every section sits on the content edge (--grid-inset),
   which is also where the guide lines run. */
:root{
 --pg-hdr:52px;
 --pg-ink:#09090A; --pg-muted:#5B5866; --pg-line:#E4E2EA; --pg-bg:#FFFFFF; --pg-alt:#F4F3F7;
 --pg-purple:#3F1993; --pg-lilac:#FFB4E9; --pg-dark:#0B0912; --pg-dark-muted:rgb(245 245 247/.66);
 --pg-gut:24px;
 /* One vertical rhythm: every section, and the end of every hero, uses this padding */
 --pg-sec:clamp(72px,8.5vw,136px);
}
@media (min-width:768px){:root{--pg-gut:var(--grid-inset);--pg-hdr:74px}}
@media (min-width:1024px){:root{--pg-hdr:78px}}
body.pg{position:relative;margin:0;background:var(--pg-bg);color:var(--pg-ink);font-family:var(--font-aeonik),"Helvetica Neue",Arial,sans-serif;font-feature-settings:"ss02" on;-webkit-font-smoothing:antialiased}
body.pg *{box-sizing:border-box}
body.pg img{max-width:100%;display:block}
body.pg a{color:inherit}
.pg-skip{position:absolute;right:-9999px;top:8px;z-index:100;background:#fff;padding:8px 12px}
.pg-skip:focus{right:8px}
.pg-wrap{padding-inline:var(--pg-gut)}
.pg-main{padding-top:calc(var(--pg-hdr) + var(--pg-ann))}
[id]{scroll-margin-top:calc(var(--pg-hdr) + var(--pg-ann) + 24px)}

/* ---- Header ---------------------------------------------------------------------------------- */
.pg-header{position:fixed;inset:0 0 auto;z-index:50;background:rgb(255 255 255/.92);-webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid var(--pg-line);--nav-accent:#3F1993}
.pg-header__bar{display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative;height:var(--pg-hdr);padding-inline:var(--pg-gut)}
.pg-header__logo{display:flex;color:#1D1D1F}
.pg-logo{display:block;width:96px;height:18px;background:currentColor;-webkit-mask:url('/brand/arabic-ai.svg') center/contain no-repeat;mask:url('/brand/arabic-ai.svg') center/contain no-repeat}
.pg-nav{display:none;gap:34px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.pg-nav button{all:unset;cursor:pointer;font-size:13px;letter-spacing:-.01em;line-height:1;padding:12px 0;color:#1D1D1F;transition:color .2s ease}
.pg-nav button:hover,.pg-nav button[aria-expanded="true"]{color:var(--pg-purple)}
.pg-nav button:focus-visible{outline:2px solid var(--pg-purple);outline-offset:4px}
.pg-cta{display:inline-flex;align-items:center;gap:10px;background:var(--pg-purple);color:#fff!important;text-decoration:none;font-size:14px;line-height:1;padding:15px 18px;transition:background-color .2s ease,transform .2s ease}
.pg-cta:hover{background:#2E1170}
.pg-cta:active{transform:scale(.98)}
.pg-cta svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.pg-burger{all:unset;cursor:pointer;display:grid;place-items:center;width:40px;height:40px;background:var(--pg-ink);color:#fff}
.pg-burger svg{width:18px;height:14px;fill:none;stroke:currentColor;stroke-width:2;overflow:visible}
.pg-header__cta{display:none;padding-inline:17px;margin-inline-start:auto}  /* with the language switch beside it, on the right */
/* The language menu (brand.css "Language menu") in the inner navbar: 12px from the CTA, and 8px from the
   menu button below 1024px, as on the homepage (the bar's gap is 24px). */
.pg-header__bar>.aai-lang{margin-inline-start:-12px}
@media (max-width:1023px){.pg-header__bar>.aai-lang{margin-inline:auto -16px}}
@media (min-width:1024px){.pg-nav{display:flex}.pg-header__cta{display:inline-flex}.pg-burger{display:none}}
.pg-flyouts{position:absolute;inset:calc(var(--pg-hdr) + var(--pg-ann)) 0 auto;background:#fff;border-bottom:1px solid var(--pg-line);box-shadow:0 30px 60px -30px rgb(20 10 50/.25)}
.pg-flyout{padding-block:36px 52px}
.pg-flyout[hidden]{display:none!important}
.pg-flyout .navigation-subheader{margin:0 0 8px;color:#6E6E73}
.pg-flyout a{display:block;width:max-content;text-decoration:none;padding:0}
/* Same link type as the homepage flyouts, in every column */
.pg-flyout .navigation-link{font-size:24px;line-height:30px;font-weight:600;letter-spacing:-.016em;color:#1D1D1F}
.pg-flyout .navigation-link{transition:color .2s ease}
.pg-flyout a:hover .navigation-link{color:var(--pg-purple)}
.pg-flyout .pg-fly-col{grid-column:1/span 3}
.pg-flyout .pg-fly-col2{grid-column:4/span 3}
.pg-flyout .pg-fly-host{grid-column:5/-1}
.pg-flyout .pg-fly-host>img{width:100%;height:var(--flyout-h,320px);object-fit:cover}  /* the menu's own image, not the window's logos */
.pg-flyout .pg-fly-group{display:flex;flex-direction:column;gap:12px}
.pg-flyout .pg-fly-group>div{display:flex;flex-direction:column;gap:12px;padding-bottom:12px}
.pg-flyout .pg-fly-col2 .pg-fly-group{gap:0}
/* The homepage's Resources rules (brand.css) add a 4px row gap and 4px link padding that the inner
   flyout's markup does not need; these selectors outrank them inside .pg-flyout only. */
body.pg .pg-header .pg-flyout[data-menu] .grid-layout-mobile{row-gap:0!important}
body.pg .pg-header .pg-flyout[data-menu] .pg-fly-col2 .pg-fly-group a{padding-block:0!important}
/* Mobile drawer */
.pg-drawer{position:fixed;inset:calc(var(--pg-hdr) + var(--pg-ann)) 0 0;z-index:49;background:#F5F5F5;overflow:auto;padding:16px var(--pg-gut) 120px}
.pg-drawer[hidden]{display:none}
.pg-drawer details{border-bottom:1px solid var(--pg-line)}
.pg-drawer summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:18px 0;font-size:26px;letter-spacing:-.02em}
.pg-drawer summary::-webkit-details-marker{display:none}
.pg-drawer summary::after{content:"";width:9px;height:9px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .2s ease}
.pg-drawer details[open] summary::after{transform:rotate(225deg)}
.pg-drawer h4{margin:6px 0 4px;font-size:13px;font-weight:400;color:#737373}
.pg-drawer a{display:block;padding:7px 0;font-size:19px;text-decoration:none}
.pg-drawer .pg-cta{position:fixed;right:var(--pg-gut);left:var(--pg-gut);bottom:24px;justify-content:center;padding:16px}

/* ---- Type ------------------------------------------------------------------------------------ */
.pg-eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 20px;font-family:var(--font-mono),ui-monospace,monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--pg-muted)}
.pg-h1{margin:0;font-size:clamp(40px,5.4vw,76px);line-height:1.04;font-weight:400;letter-spacing:-.035em;text-wrap:balance}
.pg-h2{margin:0;font-size:clamp(30px,3.4vw,50px);line-height:1.08;font-weight:400;letter-spacing:-.03em;text-wrap:balance;max-width:22ch}
.pg-h3{margin:0;font-size:clamp(20px,1.7vw,24px);line-height:1.25;font-weight:400;letter-spacing:-.015em}
.pg-lead{margin:20px 0 0;max-width:56ch;font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--pg-muted)}
.pg-text{margin:0;font-size:16px;line-height:1.6;color:var(--pg-muted);max-width:62ch}
.pg-note{margin:18px 0 0;font-size:13.5px;line-height:1.5;color:var(--pg-muted)}
.pg-link{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:15px;color:var(--pg-purple)!important;text-decoration:none;font-weight:500}
.pg-link::after{content:"←";transition:transform .25s ease}
.pg-link:hover::after{transform:translateX(3px)}
.pg-dark .pg-link,.pg-purple .pg-link{color:var(--pg-lilac)!important}
.pg-actions{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;margin-top:32px}
.pg-actions .pg-link{margin-top:0}

/* ---- Sections -------------------------------------------------------------------------------- */
.pg-sec{padding-block:var(--pg-sec)}
.pg-sec--alt{background:var(--pg-alt)}
/* A section that continues the hero on the same background: the hero's bottom padding is its gap */
.pg-sec--tight{padding-top:0}
.pg-dark{background:var(--pg-dark);color:#F5F5F7}
/* Two dark sections in a row read as one band without a divider */
.pg-dark+.pg-dark{box-shadow:inset 0 1px 0 rgb(255 255 255/.12)}
.pg-dark .pg-text,.pg-dark .pg-lead,.pg-dark .pg-note{color:var(--pg-dark-muted)}
.pg-purple{background:var(--pg-purple);color:#fff}
.pg-purple .pg-text,.pg-purple .pg-lead{color:rgb(255 255 255/.78)}
.pg-head{display:grid;gap:0;margin-bottom:clamp(36px,4vw,56px)}

/* Hero */
.pg-hero{padding-block:clamp(56px,7vw,112px) var(--pg-sec)}
/* Stacked hero: the headline takes the full measure (two lines at desktop); the lead and CTA then
   sit beside the visual, both starting on the same line. */
.pg-hero--stack .pg-hero__head{max-width:1100px}
.pg-hero__body{display:grid;gap:clamp(28px,4vw,64px);margin-top:clamp(28px,3vw,44px);align-items:start}
@media (min-width:1024px){.pg-hero__body{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.pg-hero__copy .pg-lead{margin-top:0}
.pg-hero__copy .pg-actions{margin-top:28px}
.pg-hero--stack .pg-hero__media{aspect-ratio:16/10}
.pg-hero--stack .pg-hero__media--panel{aspect-ratio:auto}
.pg-hero__logo{height:30px;width:auto;margin-bottom:28px}
.pg-hero__logo--tall{height:44px}
.pg-hero__media{position:relative;width:100%;aspect-ratio:16/11;overflow:hidden;background:#0C0716}
.pg-hero__media img{width:100%;height:100%;object-fit:cover}
.pg-hero__media--panel{display:flex;align-items:center;justify-content:center;padding:clamp(20px,3vw,40px);aspect-ratio:auto;min-height:420px}
/* Light panels (10 October 2026, the user's note): every light panel (the paper and lilac tones, and
   the Demos page's light stages) is light grey into white, under a very light dot grid that fades out
   towards the edges. The dots sit on a layer behind the panel's content. */
:is(.pg-hero__media--paper,.pg-hero__media--lilac,.pg-ex-duo__stage:is([data-look="paper"],[data-look="lilac"])){position:relative;isolation:isolate;background:linear-gradient(180deg,#F1F1F3 0%,#FFFFFF 80%)}
:is(.pg-hero__media--paper,.pg-hero__media--lilac,.pg-ex-duo__stage:is([data-look="paper"],[data-look="lilac"]))::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgb(26 23 48/.16) 1px,transparent 1.5px) center/18px 18px;
  -webkit-mask:radial-gradient(72% 68% at 50% 42%,#000 0%,rgb(0 0 0/.45) 50%,transparent 100%);mask:radial-gradient(72% 68% at 50% 42%,#000 0%,rgb(0 0 0/.45) 50%,transparent 100%)}
/* A panel's own visual does not clip: its stage sits inside the panel's padding with no visible edge,
   so clipping there cut shadows in a hard line mid-panel (the Sadu film's editor). The panel clips at
   its own edge. */
.pg-hero__media--panel .sd3-stage{overflow:visible}
.pg-hero__media--night{background:linear-gradient(165deg,#2B1160 0%,#170A38 42%,#09090A 100%)}
.pg-hero__media--black{background:#09090A}
.pg-hero__media .pg-hero__brandlogo{position:absolute;left:50%;top:50%;width:34%;height:auto;transform:translate(-50%,-50%);filter:drop-shadow(0 6px 18px rgb(8 4 20/.35))}
/* The LLM Models logo is wider than the others ("llm-models"), so it gets more width to keep its "a" tile the same size */
.pg-hero__media .pg-hero__brandlogo[src^="/brand/models/"]{width:44%}
.pg-hero--text{max-width:1100px}
.pg-hero--photo .pg-hero__media{aspect-ratio:21/9;margin-top:clamp(40px,5vw,64px)}

/* Proof panel (purple), as on the homepage */
.pg-proof{display:grid;gap:clamp(28px,4vw,64px)}
@media (min-width:1024px){.pg-proof{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end}}
.pg-proof__title{margin:0;font-size:clamp(38px,5vw,72px);line-height:1.02;font-weight:500;letter-spacing:-.035em;text-wrap:balance}
.pg-proof__body{margin:0;font-size:clamp(18px,1.5vw,22px);line-height:1.45;color:rgb(255 255 255/.8)}
.pg-proof__body em{display:block;margin-top:18px;font-style:normal;color:var(--pg-lilac)}
/* Proof with a visual: the statement and its evidence side by side */
.pg-proof--media{align-items:center}
@media (min-width:1024px){.pg-proof--media{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.pg-proof--media .pg-proof__title{font-size:clamp(36px,4.2vw,62px)}
.pg-proof--media .pg-proof__body{margin-top:24px}
.pg-proof--media .pg-hero__media--panel{min-height:380px}

/* Rows: a heading column and a text column, no boxes */
.pg-rows{display:grid;gap:0;border-top:1px solid var(--pg-line)}
.pg-dark .pg-rows{border-color:rgb(255 255 255/.14)}
.pg-row{display:grid;gap:8px 32px;padding-block:28px}
.pg-row+.pg-row{border-top:1px solid var(--pg-line)}
.pg-dark .pg-row+.pg-row{border-color:rgb(255 255 255/.1)}
@media (min-width:900px){.pg-row{grid-template-columns:minmax(0,5fr) minmax(0,7fr);padding-block:34px}}
.pg-row__lead{display:flex;gap:18px;align-items:baseline}
.pg-row__glyph{flex:none;width:44px;height:44px;display:grid;place-items:center;background:var(--pg-purple);color:#fff;font-size:20px;font-weight:500}
.pg-row .pg-text{max-width:60ch}
.pg-row__meta{margin:10px 0 0;font-size:13.5px;color:var(--pg-muted)}
.pg-row__meta b{font-weight:500;color:var(--pg-ink)}

/* Steps: a real sequence, numbered */
.pg-steps{display:grid;gap:0;counter-reset:pgs}
@media (min-width:1024px){.pg-steps{grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:0}}
.pg-step{position:relative;counter-increment:pgs;padding:28px 0 28px 24px;border-top:2px solid var(--pg-line)}
.pg-step::before{content:counter(pgs,decimal-leading-zero);display:block;margin-bottom:24px;font-family:var(--font-mono),monospace;font-size:12.5px;color:var(--pg-purple);letter-spacing:.06em}
.pg-dark .pg-step{border-color:rgb(255 255 255/.16)}
.pg-dark .pg-step::before{color:var(--pg-lilac)}
.pg-steps:not(.is-anim) .pg-step.is-key{border-color:var(--pg-purple)}
/* Steps play through (10 October 2026, the user's note): while a sequence is on screen, each step in
   turn draws its line and lights its icon, the steps before it staying drawn; after the last it rests,
   clears and starts again (pages.js). Without the script, or with reduced motion, the key step shows. */
.pg-step::after{content:"";position:absolute;right:0;left:0;top:-2px;height:2px;background:var(--pg-purple);transform:scaleX(0);transform-origin:right;pointer-events:none}
:is(.pg-dark,.pg-purple,.pg-ex-ondark) .pg-step::after{background:linear-gradient(270deg,#8F6BE8,var(--pg-lilac))}
.pg-step.is-done::after{transform:none}
.pg-step.is-on::after{transform:none;transition:transform var(--pg-step-t,1.6s) linear}
.pg-steps.is-reset .pg-step::after{transition:transform .5s cubic-bezier(.65,0,.35,1)}
.pg-steps.is-anim .pg-icon{transition:background-color .35s ease,color .35s ease,box-shadow .35s ease,transform .3s var(--pg-spring,ease)}
.pg-step h3{margin:0 0 8px;font-size:20px;font-weight:400;letter-spacing:-.01em}
.pg-step p{margin:0;font-size:15px;line-height:1.55;color:var(--pg-muted)}
.pg-dark .pg-step p{color:var(--pg-dark-muted)}
.pg-step__owner{display:inline-block;margin-top:14px!important;font-size:12.5px!important;font-family:var(--font-mono),monospace;letter-spacing:.02em;color:var(--pg-ink)!important;background:var(--pg-alt);padding:4px 8px}
.pg-dark .pg-step__owner{background:rgb(255 255 255/.08);color:#F5F5F7!important}

/* Bento: mixed cell sizes */
.pg-bento{display:grid;gap:8px}
@media (min-width:900px){.pg-bento{grid-template-columns:repeat(6,minmax(0,1fr))}.pg-cell{grid-column:span 2}.pg-cell--wide{grid-column:span 3}.pg-cell--full{grid-column:1/-1}.pg-cell--two{grid-column:span 4}}
.pg-cell{position:relative;display:flex;flex-direction:column;gap:10px;min-height:220px;padding:28px;background:var(--pg-alt);overflow:hidden}
.pg-sec--alt .pg-cell{background:#fff}
.pg-cell h3{margin:0;font-size:21px;font-weight:400;letter-spacing:-.015em}
.pg-cell p{margin:0;font-size:15px;line-height:1.55;color:var(--pg-muted)}
.pg-cell--dark .pg-cell__tag{color:var(--pg-lilac)!important}
.pg-cell__tag{margin-top:auto!important;font-family:var(--font-mono),monospace;font-size:12px!important;letter-spacing:.04em;color:var(--pg-purple)!important}
.pg-cell--purple{background:var(--pg-purple)!important;color:#fff}
.pg-cell--purple p{color:rgb(255 255 255/.78)}
.pg-cell--purple .pg-cell__tag{color:var(--pg-lilac)!important}
.pg-cell--dark{background:var(--pg-dark)!important;color:#F5F5F7}
.pg-cell--dark p{color:var(--pg-dark-muted)}
.pg-cell--img{padding:0;min-height:300px;justify-content:flex-end;color:#fff}
.pg-cell--img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pg-cell--img::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgb(9 9 10/.85),rgb(9 9 10/0) 70%)}
.pg-cell--img>div{position:relative;z-index:1;padding:28px}
.pg-cell--img p{color:rgb(255 255 255/.8)}

/* Stats */
.pg-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
@media (min-width:900px){.pg-stats{grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}}
.pg-stat b{display:block;font-size:clamp(44px,5vw,72px);line-height:1;font-weight:400;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.pg-stat b span{display:inline-block}
.pg-stat>span{display:block;margin-top:12px;font-size:15px;color:var(--pg-muted);max-width:22ch}
.pg-dark .pg-stat>span,.pg-purple .pg-stat>span{color:var(--pg-dark-muted)}

/* Split band */
.pg-split{display:grid;gap:clamp(32px,4vw,72px);align-items:center}
@media (min-width:1024px){.pg-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.pg-split--rev>:first-child{order:2}}
.pg-split--top{align-items:start}
.pg-split__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--pg-alt)}
.pg-split__media img{width:100%;height:100%;object-fit:cover}
.pg-split__media--panel{display:flex;align-items:center;justify-content:center;padding:clamp(20px,3vw,40px);aspect-ratio:auto;min-height:360px}

/* Table */
.pg-table-wrap{overflow-x:auto;border-top:1px solid var(--pg-ink)}
.pg-table{width:100%;min-width:640px;border-collapse:collapse;font-size:15px}
.pg-table th{text-align:right;font-weight:500;padding:16px 0 16px 16px;font-size:13px;font-family:var(--font-mono),monospace;letter-spacing:.04em;color:var(--pg-muted);border-bottom:1px solid var(--pg-line)}
.pg-table td{padding:18px 0 18px 16px;vertical-align:top;border-bottom:1px solid var(--pg-line);line-height:1.5}
.pg-table td:first-child{font-size:17px;white-space:nowrap}
.pg-table .num{font-variant-numeric:tabular-nums;font-size:22px;letter-spacing:-.02em}

/* Statement (dark) */
.pg-statement{display:grid;gap:24px;max-width:1100px}
.pg-statement .pg-h2{max-width:20ch}

/* Logos */
.pg-logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--pg-line);border:1px solid var(--pg-line)}
@media (min-width:768px){.pg-logos{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1100px){.pg-logos{grid-template-columns:repeat(6,minmax(0,1fr))}}
.pg-logos li{list-style:none;display:grid;place-items:center;height:120px;background:#fff;padding:20px}
/* One ink for every logo, so a white or pale mark reads the same as the rest */
.pg-logos img{max-height:var(--h,28px);width:auto;opacity:.6;filter:grayscale(1) brightness(0)}
.pg-logos{margin:0;padding:0}

/* Partner / story cards */
.pg-cards{display:grid;gap:8px}
@media (min-width:768px){.pg-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.pg-cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Five cards: two wide, then three, so no slot is left empty */
@media (min-width:768px) and (max-width:1099px){.pg-cards--5>:last-child{grid-column:1/-1}}
@media (min-width:1100px){.pg-cards--5{grid-template-columns:repeat(6,minmax(0,1fr))}.pg-cards--5>*{grid-column:span 2}.pg-cards--5>:nth-child(-n+2){grid-column:span 3}}
.pg-card{display:flex;flex-direction:column;background:var(--pg-alt);text-decoration:none;min-width:0}
.pg-sec--alt .pg-card{background:#fff}
.pg-card__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0C0716}
.pg-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
a.pg-card:hover .pg-card__media img{transform:scale(1.03)}
.pg-card__body{display:flex;flex-direction:column;gap:10px;padding:28px;flex:1}
.pg-card__kicker{margin:0;font-family:var(--font-mono),monospace;font-size:12px;letter-spacing:.06em;color:var(--pg-purple)}
.pg-card h3{margin:0;font-size:21px;line-height:1.25;font-weight:400;letter-spacing:-.015em}
.pg-card p{margin:0;font-size:15px;line-height:1.55;color:var(--pg-muted)}
.pg-card .pg-link{margin-top:auto;padding-top:12px}

/* Quote */
.pg-quote{margin:0;max-width:30ch;font-size:clamp(26px,3vw,42px);line-height:1.2;letter-spacing:-.025em}
.pg-quote+cite{display:block;margin-top:20px;font-style:normal;font-size:15px;color:var(--pg-muted)}
.pg-dark .pg-quote+cite,.pg-purple .pg-quote+cite{color:var(--pg-dark-muted)}

/* Dated list (newsroom) */
/* Newsroom: the year stays in view in its own column while its announcements scroll past */
.pg-news{display:grid;gap:12px 48px}
.pg-news+.pg-news{margin-top:56px}
@media (min-width:900px){.pg-news{grid-template-columns:120px minmax(0,1fr)}.pg-news__year{position:sticky;top:110px;align-self:start}}
.pg-news__year{margin:0;padding-top:20px;font-family:var(--font-mono),monospace;font-size:14px;color:var(--pg-purple);font-variant-numeric:tabular-nums}
.pg-dated{margin:0;padding:0;list-style:none;border-top:1px solid var(--pg-ink)}
.pg-dated li{border-bottom:1px solid var(--pg-line)}
.pg-dated li>a,.pg-dated li>div{display:grid;gap:6px 32px;padding-block:20px;text-decoration:none;color:inherit}
@media (min-width:900px){.pg-dated li>a,.pg-dated li>div{grid-template-columns:120px minmax(0,1fr) 24px;align-items:baseline}}
.pg-dated li>a:hover h3{color:var(--pg-purple)}
.pg-dated__go{color:var(--pg-purple);transition:transform .25s ease}
.pg-dated li>a:hover .pg-dated__go{transform:translate(2px,-2px)}
.pg-dated time{font-family:var(--font-mono),monospace;font-size:13px;color:var(--pg-muted);font-variant-numeric:tabular-nums}
.pg-dated h3{margin:0;font-size:19px;line-height:1.35;font-weight:400}
.pg-dated .pg-link{margin:0;white-space:nowrap}
.pg-year{margin:40px 0 0;font-size:14px;font-family:var(--font-mono),monospace;color:var(--pg-purple)}

/* People */
/* People: a 112px portrait beside the name, so the 256px photos stay sharp; nine fill a 3x3 grid */
.pg-people{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
@media (min-width:900px){.pg-people{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pg-person{display:grid;grid-template-columns:112px minmax(0,1fr);gap:4px 20px;align-content:start;padding:20px;background:#fff}
.pg-person img{grid-row:span 3;width:112px;height:112px;object-fit:cover;background:var(--pg-alt);filter:grayscale(.15)}
.pg-person h3{margin:2px 0 2px;font-size:18px;font-weight:400}
.pg-person p{margin:0;font-size:14px;color:var(--pg-muted);line-height:1.5}
.pg-person p+p{margin-top:8px}

/* Chips and blog grid */
.pg-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 40px;padding:0;list-style:none}
.pg-chip{all:unset;cursor:pointer;padding:12px 14px;font-size:14px;line-height:1;border:1px solid var(--pg-line);background:#fff;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.pg-chip:hover{border-color:var(--pg-ink)}
.pg-chip[aria-pressed="true"]{background:var(--pg-ink);color:#fff;border-color:var(--pg-ink)}
.pg-chip:focus-visible{outline:2px solid var(--pg-purple);outline-offset:2px}
.pg-chip small{margin-right:6px;opacity:.6;font-variant-numeric:tabular-nums}
.pg-posts{display:grid;gap:40px 8px}
@media (min-width:768px){.pg-posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.pg-posts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pg-post{display:flex;flex-direction:column;gap:14px;text-decoration:none;min-width:0}
.pg-post[hidden]{display:none}
.pg-post__media{aspect-ratio:16/9;overflow:hidden;background:var(--pg-alt)}
.pg-post__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
a.pg-post:hover .pg-post__media img{transform:scale(1.03)}
.pg-post__meta{display:flex;flex-wrap:wrap;gap:4px 14px;white-space:nowrap;font-family:var(--font-mono),monospace;font-size:12px;letter-spacing:.04em;color:var(--pg-muted)}
.pg-post__meta b{font-weight:400;color:var(--pg-purple)}
.pg-post h3{margin:0;font-size:20px;line-height:1.3;font-weight:400;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pg-feature{display:grid;gap:clamp(24px,3vw,48px);align-items:center;text-decoration:none;margin-bottom:var(--pg-sec)}
@media (min-width:1024px){.pg-feature{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.pg-feature .pg-post__media{aspect-ratio:16/9}
.pg-feature h2{margin:14px 0 0;font-size:clamp(28px,3vw,44px);line-height:1.1;font-weight:400;letter-spacing:-.03em}
.pg-feature p{margin:16px 0 0;font-size:17px;line-height:1.55;color:var(--pg-muted)}
.pg-more{display:flex;justify-content:center;margin-top:56px}
.pg-btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 20px;border:1px solid var(--pg-ink);font-size:14px;line-height:1;text-decoration:none;transition:background-color .2s ease,color .2s ease}
.pg-btn:hover{background:var(--pg-ink);color:#fff}
.pg-btn:focus-visible{outline:2px solid var(--pg-purple);outline-offset:2px}

/* Series rail */
.pg-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,320px);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:thin}
.pg-rail>*{scroll-snap-align:start}
.pg-rail .pg-post__media{aspect-ratio:4/3}
.pg-rail .pg-post__meta b{color:var(--pg-lilac)}
.pg-dark .pg-post__meta{color:var(--pg-dark-muted)}

/* Article (blog post) */
.pg-article{max-width:760px;margin-inline:auto}
.pg-crumbs{display:flex;gap:8px;font-size:13.5px;color:var(--pg-muted);margin-bottom:28px}
.pg-crumbs a{text-decoration:none}
.pg-crumbs a:hover{color:var(--pg-purple)}
.pg-byline{display:flex;align-items:center;gap:14px;margin-top:32px;font-size:14px;color:var(--pg-muted)}
.pg-byline img{width:44px;height:44px;object-fit:cover;background:var(--pg-alt)}
.pg-byline b{display:block;font-weight:500;color:var(--pg-ink)}
.pg-cover{margin:clamp(40px,5vw,64px) auto 0;aspect-ratio:16/9;overflow:hidden;background:var(--pg-alt)}
.pg-cover img{width:100%;height:100%;object-fit:cover}
.pg-reading{display:grid;gap:48px;margin-top:clamp(48px,6vw,88px);padding-bottom:var(--pg-sec)}
@media (min-width:1100px){.pg-reading{grid-template-columns:220px minmax(0,680px);justify-content:center;gap:72px}}
.pg-toc{display:none}
@media (min-width:1100px){.pg-toc{display:block;position:sticky;top:110px;align-self:start;font-size:13.5px}}
.pg-toc p{margin:0 0 12px;font-family:var(--font-mono),monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--pg-muted)}
.pg-toc a{display:block;padding:6px 12px 6px 0;border-right:2px solid var(--pg-line);text-decoration:none;color:var(--pg-muted);line-height:1.35}
.pg-toc a.is-on{border-color:var(--pg-purple);color:var(--pg-ink)}
.pg-toc-mobile{margin-bottom:32px;border:1px solid var(--pg-line);padding:14px 16px}
@media (min-width:1100px){.pg-toc-mobile{display:none}}
.pg-toc-mobile summary{cursor:pointer;font-size:15px}
.pg-toc-mobile a{display:block;padding:6px 0;font-size:15px;text-decoration:none;color:var(--pg-muted)}
.pg-prose{font-size:18px;line-height:1.7;color:#25222D;min-width:0}
.pg-prose h2{margin:2.2em 0 .6em;font-size:clamp(24px,2.2vw,30px);line-height:1.2;font-weight:500;letter-spacing:-.02em;color:var(--pg-ink);scroll-margin-top:100px}
.pg-prose h3{margin:1.8em 0 .5em;font-size:20px;font-weight:500;color:var(--pg-ink)}
.pg-prose p{margin:0 0 1.15em}
.pg-prose ul,.pg-prose ol{margin:0 0 1.3em;padding-right:1.2em}
.pg-prose li{margin:.4em 0}
.pg-prose strong{font-weight:600;color:var(--pg-ink)}
.pg-prose a{color:var(--pg-purple);text-underline-offset:3px}
.pg-prose figure{margin:2em 0;background:var(--pg-alt)}
.pg-prose figure img{width:100%;height:auto}
.pg-prose blockquote{margin:2em 0;padding-right:24px;border-right:3px solid var(--pg-purple);font-size:26px;line-height:1.3;letter-spacing:-.02em;color:var(--pg-ink)}
.pg-share{display:flex;flex-wrap:wrap;gap:8px;margin-top:48px;padding-top:24px;border-top:1px solid var(--pg-line)}
.pg-share span{margin-left:8px;font-size:14px;color:var(--pg-muted);align-self:center}
.pg-author{display:grid;grid-template-columns:72px minmax(0,1fr);gap:20px;margin-top:40px;padding:28px;background:var(--pg-alt)}
.pg-author img{width:72px;height:72px;object-fit:cover}
.pg-author b{display:block;font-weight:500}
.pg-author span{display:block;font-size:14px;color:var(--pg-muted);margin-bottom:8px}
.pg-author p{margin:0;font-size:15px;line-height:1.55;color:var(--pg-muted)}

/* Forms */
.pg-form{display:grid;gap:18px;max-width:640px}
.pg-form .pg-field{display:grid;gap:8px}
.pg-form label{font-size:14px;font-weight:500}
.pg-form input,.pg-form select,.pg-form textarea{font:inherit;font-size:16px;line-height:1.25;padding:11px 14px;border:1px solid #CFCBD9;background:#fff;color:var(--pg-ink);border-radius:0;width:100%}
.pg-form select{height:44px}
.pg-form input:focus,.pg-form select:focus,.pg-form textarea:focus{outline:2px solid var(--pg-purple);outline-offset:0;border-color:var(--pg-purple)}
.pg-form .pg-help{font-size:13px;color:var(--pg-muted)}
.pg-form .pg-two{display:grid;gap:18px}
@media (min-width:700px){.pg-form .pg-two{grid-template-columns:1fr 1fr}}
.pg-form button{justify-self:start;border:0;cursor:pointer;font-family:inherit}
.pg-form-note{padding:16px 18px;background:#EFE8FB;color:#2B1170;font-size:15px}
.pg-form-note[hidden]{display:none}

/* Visual panels hosting the homepage micrographics */
/* Shadows (10 October 2026, the user's note): the wrapper clips only so a wide visual cannot push the
   page sideways; 40px of room past its edges lets the cards' shadows fade out instead of ending in a
   hard line. */
.pg-visual{width:100%;min-width:0;overflow:clip;overflow-clip-margin:40px}
.pg-visual .bv{width:100%}
.pg-hero__media--panel .aai-at.is-big{max-width:100%}
.pg-hero__media--night .bv-n8n.sd3{min-height:380px}

/* Closing band (shared) */
.pg-close{display:grid;gap:32px;align-items:end}
@media (min-width:1024px){.pg-close{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.pg-close .pg-h2{max-width:16ch;color:#fff}
.pg-close .pg-lead{color:var(--pg-dark-muted)}

/* Reveal */
@media (prefers-reduced-motion:no-preference){
 .pg-js .pg-reveal{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
 .pg-js .pg-reveal.is-in{opacity:1;transform:none}
}
:where(body.pg) :focus-visible{outline:2px solid var(--pg-purple);outline-offset:2px}
@media (max-width:767px){.pg-hero__media--panel{min-height:0;padding:16px}}

/* Trio: one large tile and two stacked beside it, in place of three equal cards */
.pg-trio{display:grid;gap:8px}
@media (min-width:900px){.pg-trio{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto auto}.pg-trio>:first-child{grid-row:1/3}}
body.pg .pg-tile{color:var(--pg-ink)}
.pg-tile{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;gap:32px;min-height:236px;padding:28px;background:var(--pg-alt);color:var(--pg-ink);text-decoration:none;overflow:hidden}
.pg-sec--alt .pg-tile{background:#fff}
.pg-trio>:first-child{min-height:clamp(300px,34vw,488px)}
.pg-tile__top{display:flex;align-items:center;min-height:26px}
.pg-tile__logo{height:26px;width:auto}
.pg-trio>:first-child .pg-tile__logo{height:clamp(30px,3vw,44px)}
.pg-tile__tag{margin:0;font-family:var(--font-mono),monospace;font-size:12px;letter-spacing:.04em;color:var(--pg-purple)}
.pg-tile h3{margin:0;font-size:22px;line-height:1.2;font-weight:400;letter-spacing:-.015em}
.pg-trio>:first-child h3{font-size:clamp(26px,2.4vw,34px);max-width:20ch}
.pg-tile p{margin:10px 0 0;font-size:15px;line-height:1.55;color:var(--pg-muted);max-width:46ch}
.pg-tile .pg-link{margin-top:18px}
a.pg-tile:hover .pg-link::after{transform:translateX(3px)}
body.pg .pg-tile--purple{background:var(--pg-purple)!important;color:#fff}
body.pg .pg-tile--deep{background:#0D0521!important;color:#fff}
body.pg .pg-tile--dark{background:var(--pg-dark)!important;color:#F5F5F7}
.pg-tile--lilac{background:#FFB4E9!important}
.pg-tile--pink{background:#F8C8DC!important}
.pg-tile--purple p,.pg-tile--deep p,.pg-tile--dark p,.pg-tile--img p{color:rgb(255 255 255/.78)}
.pg-tile--lilac p,.pg-tile--pink p{color:rgb(9 9 10/.72)}
.pg-tile--purple .pg-tile__tag,.pg-tile--deep .pg-tile__tag,.pg-tile--dark .pg-tile__tag,.pg-tile--img .pg-tile__tag,
.pg-tile--purple .pg-link,.pg-tile--deep .pg-link,.pg-tile--dark .pg-link,.pg-tile--img .pg-link{color:var(--pg-lilac)!important}
.pg-tile--lilac .pg-link,.pg-tile--pink .pg-link{color:var(--pg-purple)!important}
body.pg .pg-tile--img{background:#0C0716!important;color:#fff}
.pg-tile__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.pg-tile--img::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgb(9 9 10/.88),rgb(9 9 10/.15) 70%)}
a.pg-tile--img:hover .pg-tile__bg{transform:scale(1.03)}
.pg-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Bento figures (customer stories) */
.pg-cell--figure{justify-content:space-between}
.pg-cell--figure .pg-cell__tag{margin:0!important}
.pg-cell__figure{display:block;margin-top:auto;font-size:clamp(44px,4.4vw,64px);font-weight:400;letter-spacing:-.04em;line-height:1}
.pg-cell--two .pg-cell__figure{font-size:clamp(56px,6vw,88px)}
.pg-cell--figure p:last-child{max-width:40ch}

/* Numbered list beside a visual (demos) */
.pg-olist{list-style:none;margin:32px 0 0;padding:0;counter-reset:ol;display:grid;gap:18px}
.pg-olist li{counter-increment:ol;display:grid;grid-template-columns:36px minmax(0,1fr);gap:2px 8px}
.pg-olist li::before{content:counter(ol,decimal-leading-zero);grid-row:span 2;padding-top:5px;font-family:var(--font-mono),monospace;font-size:12.5px;color:var(--pg-purple)}
.pg-dark .pg-olist li::before{color:var(--pg-lilac)}
.pg-olist b{font-weight:400;font-size:18px}
.pg-olist span{font-size:15px;line-height:1.5;color:var(--pg-muted)}
.pg-dark .pg-olist span{color:var(--pg-dark-muted)}

/* A short point set under a split's lead */
.pg-aside{margin-top:28px;padding-top:24px;border-top:1px solid var(--pg-line)}
.pg-aside h3{margin:0;font-size:20px;font-weight:400;letter-spacing:-.01em}
.pg-aside p{margin:8px 0 0;font-size:16px;line-height:1.6;color:var(--pg-muted);max-width:52ch}

/* Full-width quote band */
.pg-quoteband{max-width:1100px}
.pg-quoteband .pg-quote{max-width:22ch;font-size:clamp(34px,4.4vw,64px);line-height:1.08;letter-spacing:-.03em}
.pg-quoteband cite{max-width:60ch}

/* Phones: each table row becomes a labelled block instead of a sideways-scrolling table */
@media (max-width:639px){
 .pg-table-wrap{overflow:visible}
 .pg-table{min-width:0}
 .pg-table thead{display:none}
 .pg-table,.pg-table tbody,.pg-table tr,.pg-table td{display:block;width:100%}
 .pg-table tr{padding:16px 0;border-bottom:1px solid var(--pg-line)}
 .pg-table td{padding:4px 0;border:0;white-space:normal!important}
 .pg-table td::before{content:attr(data-label);display:block;margin-bottom:2px;font-family:var(--font-mono),monospace;font-size:11.5px;letter-spacing:.04em;color:var(--pg-muted)}
 .pg-table td:first-child::before{display:none}
 .pg-table td:first-child{font-size:19px}
}

/* Phones: a taller crop for photo heroes, and a smaller portrait so bios get the width */
@media (max-width:767px){
 .pg-hero--photo .pg-hero__media{aspect-ratio:4/3}
 .pg-person{grid-template-columns:80px minmax(0,1fr);padding:16px}
 .pg-person img{width:80px;height:80px}
}
@media (max-width:767px){.pg-logos li{height:88px;padding:14px}}
@media (max-width:899px){.pg-dated__go{display:none}}

/* ===== Bar above the navbar (10 October 2026) ======================================================
   Tarjama's legacy and its professional services, as on the homepage, in place of the Professional
   Services menu. Closing it hides it on every page (pages.js); --pg-ann is its height, 0 once closed,
   and every offset under the fixed header adds it. */
:root{--pg-ann:52px}
@media (min-width:768px){:root{--pg-ann:40px}}
html.aai-ann-off{--pg-ann:0px}
.pg-ann{position:relative;display:flex;align-items:center;justify-content:center;gap:4px .3em;flex-wrap:wrap;height:var(--pg-ann);
  padding:0 52px;background:#0B0B0D;color:rgb(245 245 247/.86);font-size:13px;line-height:1.3;text-align:center}
html.aai-ann-off .pg-ann{display:none}
.pg-ann p{margin:0}
body.pg .pg-ann .pg-ann__logo{display:inline-block;max-width:none;height:.7em;width:auto;vertical-align:0;margin:0 .08em}
@media (max-width:767px){  /* phones: the link runs on from the sentence, two lines in 52px */
  .pg-ann{display:block;padding:9px 16px 0 48px;font-size:12px;line-height:17px}
  .pg-ann p{display:inline;margin-left:0;margin-inline-end:.3em}
}
body.pg .pg-ann a{display:inline-flex;align-items:center;gap:6px;color:#fff;font-weight:500;white-space:nowrap}
.pg-ann a svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.pg-ann__close{position:absolute;left:max(8px,calc(var(--pg-gut) - 10px));top:50%;translate:0 -50%;display:grid;place-items:center;width:36px;height:36px;
  padding:0;border:0;background:none;color:rgb(245 245 247/.7);cursor:pointer}
.pg-ann__close:hover{color:#fff}
.pg-ann__close svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.75;stroke-linecap:round}
.pg-ann__close:focus-visible,.pg-ann a:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ===== Page header (10 October 2026) ==========================================================
   After the user's design, on every inner page (build_pages.py, frame_hero()). Framed by hairlines:
   the navbar's line above, one below across the full width, and one down the middle on the grid's
   centre gutter, between the page's guide lines. The left half carries the logo (or an eyebrow) at
   the top and the headline, lead and button at the foot; the right half holds the visual, 16px
   inside the lines. Phones and tablets stack the halves and drop the middle line. Shared by every
   page group: change it here, not per page.
   The user's notes, the same evening: with a logo, the space between the logo and the headline is
   half what it was, and the logo sits in the middle of the space above the headline (the same
   space above and below it); the header's height follows its content. Without a logo, the header
   is 30% shorter and the eyebrow, headline, lead and button sit as one block in its middle. */
.pg-frame{position:relative;border-bottom:1px solid var(--pg-line)}
.pg-frame__in{position:relative;display:grid;margin-inline:calc(var(--grid-inset) - 16px)}
/* Phones: the page guide lines sit at the screen's edge, so the header's content lines up with the
   inner pages' own gutter instead (the explore-pages session's catch, 10 October 2026). */
@media (max-width:767px){.pg-frame__in{margin-inline:calc(var(--pg-gut) - 16px)}}
.pg-frame__copy{display:flex;flex-direction:column;min-width:0;padding:0 16px clamp(32px,3vw,44px) clamp(24px,3vw,48px)}
.pg-frame--logo .pg-frame__top{padding-block:clamp(32px,8.2vw,132px)}  /* half the old gap, above and below the logo */
.pg-frame--text .pg-frame__copy{justify-content:center;padding-top:clamp(32px,3vw,44px)}
.pg-frame__logo{display:block;height:34px;width:auto}
.pg-frame__logo--tall{height:48px}
.pg-frame__text{container-type:inline-size}
/* The headline sizes itself to its length (--n, set by frame_hero) so it keeps to two lines in the
   half column: a line holds about half its characters plus two, at about .52em each. Short ones
   stop at 64px; phones keep 36px and may take more lines. */
.pg-frame .pg-h1{font-size:clamp(36px,calc(100cqi / ((var(--n,30) / 2 + 2) * .52)),64px);line-height:1.04}
.pg-frame .pg-lead{margin-top:clamp(18px,1.8vw,26px)}
.pg-frame .pg-actions{margin-top:clamp(24px,2.4vw,36px)}
.pg-frame__media{min-width:0;padding:16px}
.pg-frame__media>.pg-hero__media{width:100%;height:100%;min-height:0;margin:0;aspect-ratio:auto}
/* Contact: the addresses below the header, one row of four (no top rule: the header's line is it). */
.pg-rows--contact{border-top:0}
@media (min-width:1024px){.pg-rows--contact{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:32px}.pg-rows--contact .pg-row+.pg-row{border-top:0}}
@media (min-width:1024px){
 .pg-frame__in{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pg-frame--text .pg-frame__in{min-height:clamp(420px,calc((100svh - var(--pg-hdr) - var(--pg-ann) - 72px) * .7),574px)}
 .pg-frame--logo .pg-frame__in{min-height:440px}
 .pg-frame__in::before{content:"";position:absolute;top:0;bottom:0;right:50%;width:1px;background:var(--pg-line);pointer-events:none}
}
@media (max-width:1023px){
 .pg-frame__copy{padding:0 16px 32px}
 .pg-frame--text .pg-frame__copy{padding-top:40px}
 .pg-frame__media{padding:0 16px 16px}
 .pg-frame__media>.pg-hero__media{aspect-ratio:4/3}
 .pg-frame__media>.pg-hero__media--panel{aspect-ratio:auto;min-height:320px}
}

/* ===== Icons (10 October 2026) ================================================================
   build_pages.py icon() and icon_tile(): Lucide icons on a square tile, brand-tinted on light and
   white-tinted on dark. Each draws itself in when it comes into view (pages.js) and again when its
   card (.pg-icard) is hovered, while the tile fills with the brand colour: feedback that the card
   is the thing under the pointer. Reduced motion shows every icon drawn, with no movement. */
.pg-icon{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;margin-bottom:20px;background:rgb(63 25 147/.07);color:var(--pg-purple);
  box-shadow:inset 0 0 0 1px rgb(63 25 147/.14);transition:background-color .35s ease,color .35s ease,box-shadow .35s ease,transform .6s cubic-bezier(.34,1.56,.64,1)}
.pg-icon--dark{background:rgb(255 255 255/.08);color:#FFB4E9;box-shadow:inset 0 0 0 1px rgb(255 255 255/.16)}
.pg-row__lead .pg-icon{margin:0 0 16px}
@media (min-width:768px){.pg-row__lead:has(.pg-icon){display:flex;align-items:flex-start;gap:20px}.pg-row__lead .pg-icon{margin:0}}
.pg-ico [pathLength]{stroke-dasharray:1 1;stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){
 .pg-ico:not(.is-in) [pathLength]{stroke-dashoffset:1}
 .pg-ico [pathLength]{transition:stroke-dashoffset 1s cubic-bezier(.65,0,.35,1)}
 .pg-ico [pathLength]:nth-child(2){transition-delay:.1s}
 .pg-ico [pathLength]:nth-child(3){transition-delay:.2s}
 .pg-ico [pathLength]:nth-child(n+4){transition-delay:.3s}
 .pg-ico.is-reset [pathLength]{transition:none}
 .pg-icard:hover .pg-icon{transform:translateY(-2px) rotate(-4deg)}
}
.pg-icard:hover .pg-icon:not(.pg-icon--dark){background:var(--pg-purple);color:#fff;box-shadow:none}
.pg-icard:hover .pg-icon--dark{background:#FFB4E9;color:#1A1730;box-shadow:none}
:is(.pg-steps:not(.is-anim) .pg-step.is-key,.pg-step.is-on) .pg-icon{background:var(--pg-purple);color:#fff;box-shadow:none}  /* the step that matters most, or the one playing */
/* On dark and purple sections, the icons of items that sit straight on the section (rows, steps,
   statement points) become white-tinted with a pink icon. Cards choose their own tone (bento() and
   tile() pass 'dark' for dark cards), so a light card inside a dark section keeps its light icon
   (the sovereignty-pages session's catch). */
:is(.pg-dark,.pg-purple) :is(.pg-row,.pg-step,.pg-points li) .pg-icon{background:rgb(255 255 255/.08);color:#FFB4E9;box-shadow:inset 0 0 0 1px rgb(255 255 255/.16)}
:is(.pg-dark,.pg-purple) :is(.pg-steps:not(.is-anim) .pg-step.is-key,.pg-step.is-on) .pg-icon,:is(.pg-dark,.pg-purple) :is(.pg-row,.pg-step,.pg-points li).pg-icard:hover .pg-icon{background:#FFB4E9;color:#1A1730;box-shadow:none}
/* Statement points: a row of icon tiles under a band's text. */
.pg-points{display:flex;flex-wrap:wrap;gap:12px 32px;margin:8px 0 0;padding:0;list-style:none}
.pg-points li{display:flex;align-items:center;gap:14px;font-size:17px}
.pg-points .pg-icon{margin:0}
/* Brand marks (the model logos) beside a row's heading, which lift on hover. */
.pg-row__lead:has(.pg-row__mark){display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.pg-row__mark{display:block;height:28px;width:auto;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
@media (prefers-reduced-motion:no-preference){.pg-row:hover .pg-row__mark{transform:translateX(6px)}}
/* Scores: bars from zero, no track, growing as the values count up. */
.pg-bars{display:grid;gap:22px;margin:0 0 24px;padding:0;list-style:none}
.pg-bars li{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr) 88px;align-items:center;gap:24px}
.pg-bars__who{display:grid;gap:2px;font-size:20px;font-weight:500;color:var(--pg-ink)}
.pg-bars__who small{font-size:13px;font-weight:400;color:var(--pg-muted)}
.pg-bars__bar{height:14px;width:calc(var(--v) * 100%);background:var(--pg-purple);transform-origin:right;transform:scaleX(0);transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.pg-bars li+li .pg-bars__bar{background:#B9A8E6}
.pg-bars.is-in .pg-bars__bar{transform:none}
.pg-bars__val{font-size:28px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-align:left;color:var(--pg-ink)}
@media (prefers-reduced-motion:reduce){.pg-bars__bar{transform:none;transition:none}}
@media (max-width:767px){.pg-bars li{grid-template-columns:minmax(0,1fr) auto;gap:10px 16px}.pg-bars__bar{grid-column:1/-1;grid-row:2}}
/* Contact: the icon above each address. */
.pg-rows--contact .pg-icon{margin-bottom:8px}

/* ===== Product demos (10 October 2026) ========================================================
   build_pages.py product_demos(): a product block is the homepage's demos block (brand.css "Story
   bento"), each card with its live demo. A six-column grid: thirds span two, halves three. The
   whole card opens the product's page; the arrow sits where the homepage's open button does. */
.pg-demos{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:none}
.pg-demos>.aai-bento__card--third{grid-column:span 2;min-height:500px}
.pg-demos>.aai-bento__card--half{grid-column:span 3;min-height:480px}
.pg-demos>.aai-bento__card--wide{grid-column:1/-1;grid-row:auto}
.pg-demos .aai-bento__open svg{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.pg-demo__link{position:absolute;inset:0;z-index:3}
.pg-demo__link:focus-visible{outline:2px solid var(--pg-purple);outline-offset:-2px}
.pg-demos .pg-moment{max-width:440px}
@media (max-width:1023px){.pg-demos{grid-template-columns:repeat(2,minmax(0,1fr))}.pg-demos>[class*="aai-bento__card--"]{grid-column:auto;min-height:460px}}
@media (max-width:639px){.pg-demos{grid-template-columns:1fr}}
/* The LLM Models card (audit, 10 October 2026): its title and chart are set for the homepage's large
   card, so in a card under 640px wide (a third, or any card on tablets and phones) the title pushed
   the arrow out and the chart's values and axis were cut off. There the title takes the other cards'
   size and the chart stacks its score over the bars, as the homepage does on phones. */
/* Atelier's rooms (audit, 10 October 2026): the five tabs need about 460px, wider than the app beside
   text (329px at 1024 wide, 310 on phones), so they were cut off. There the row scrolls sideways under
   a fade at its edges; pages.js keeps the open room in view. The homepage's camera framing is unchanged. */
.pg-visual .aai-at__rooms{max-width:100%}
.pg-visual .aai-at__rooms.is-scroll{overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}  /* only when they overflow, so the open tab's shadow is not clipped */
.pg-visual .aai-at__rooms::-webkit-scrollbar{display:none}
.pg-visual .aai-at__rooms.is-scroll{-webkit-mask:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent);mask:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent)}
.pg-demos>.aai-bento__card{container:pg-demo/inline-size}
.pg-demos .aai-bento__head{min-width:0}
@container pg-demo (max-width:639px){
 .aai-bento__card[data-story="benchmark"] .aai-bento__title{max-width:18ch;font-size:clamp(20px,1.6vw,24px);line-height:1.2;letter-spacing:-.015em}
 .bv-bench{grid-template-columns:minmax(0,1fr);gap:24px}
 .bv-bench__score{font-size:clamp(56px,5vw,72px)}
 .bv-bench__chart li,.bv-bench__axis{grid-template-columns:96px minmax(0,1fr) 40px;gap:10px}
}
/* Under 300px the bars' axis is too short for five numbers; it keeps 0, 50 and 100. */
@container pg-demo (max-width:299px){.bv-bench__ticks i:is(:nth-child(2),:nth-child(4)){visibility:hidden}}

/* ===== Pre-footer (10 October 2026) ===========================================================
   The user's note: the closing band on every inner page is the homepage's pre-footer. The line, the
   lead and the button sit on the left in the homepage's measure; the Evervault card (brand.css and
   clone-support.js, the same as the homepage's) fills the right, its hairlines running past it. */
.pg-close--ever{align-items:center;gap:48px}
@media (min-width:1024px){.pg-close--ever{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(48px,6vw,112px);min-height:clamp(460px,40vw,600px)}}
.pg-close--ever .pg-h2{max-width:12ch;font-size:clamp(34px,3vw,44px);line-height:1.14;letter-spacing:-.02em}
.pg-close--ever .pg-lead{max-width:30ch;margin-top:20px}
.pg-close--ever .pg-actions{margin-top:clamp(32px,3.4vw,48px)}
.pg-close__card{position:relative;width:100%;aspect-ratio:626/430}
.pg-close__card .aai-ever{inset:0}
@media (max-width:1023px){.pg-close__card{aspect-ratio:4/3}}

/* ===== Sadu flow, light (10 October 2026) =====================================================
   The user's note: the Sadu page header's animation in light mode. On a light panel (paper or
   lilac) the workflow film (brand.css "sd3", drawn for the homepage's night card) turns light:
   white node tiles with a soft purple shadow, ink labels, each node's colour deepened towards ink
   so it reads on white, the run's green kept but darker, and a white code editor with a light
   palette (amber keywords, brand-purple functions, green strings). The homepage and the dark uses
   keep their night version. */
:is(.pg-hero__media--paper,.pg-hero__media--lilac) .sd3{
  .sd3-stage{background:radial-gradient(60% 55% at 50% 46%,rgb(63 25 147/.06),transparent 70%)}
  .sd3-tile{background:linear-gradient(180deg,#FFFFFF,#F5F3FA);box-shadow:inset 0 0 0 1px rgb(26 23 48/.14),0 12px 24px -14px rgb(42 15 107/.32)}
  .sd3-node.is-run .sd3-tile{box-shadow:inset 0 0 0 1.5px #16A34A,0 0 0 1px rgb(22 163 74/.18),0 0 22px rgb(22 163 74/.2),0 12px 24px -14px rgb(42 15 107/.32)}
  .sd3-node.is-past .sd3-tile{box-shadow:inset 0 0 0 1px rgb(22 163 74/.45),0 12px 24px -14px rgb(42 15 107/.3)}
  .sd3-icon{stroke:color-mix(in srgb,var(--c) 45%,#1A1730);opacity:.6}
  .sd3-node.is-run .sd3-icon,.sd3-node.is-ok .sd3-icon{opacity:1}
  .sd3-check{stroke:#16A34A}
  .sd3-port{background:#C9C5D6}
  .sd3-node.is-out .sd3-port{background:#16A34A;box-shadow:0 0 6px rgb(22 163 74/.45)}
  .sd3-node b{color:rgb(26 23 48/.6)}
  .sd3-node small{color:rgb(26 23 48/.42)}
  .sd3-node.is-run b,.sd3-node.is-ok b{color:#1A1730}
  .sd3-node.is-past b{color:rgb(26 23 48/.55)}
  .sd3-wire i{background:linear-gradient(90deg,#22C55E,#16A34A)}
  .sd3-arrow,.sd3-arrow::after{background:#16A34A}
  .sd3-editor{background:#FFFFFF;box-shadow:inset 0 0 0 1px rgb(26 23 48/.1),0 30px 60px -26px rgb(42 15 107/.32)}
  .sd3-code{color:#1A1730}
  .sd3-ln{color:rgb(26 23 48/.3)}
  .sd3-code .t-k{color:#B45309}.sd3-code .t-f{color:#3F1993}.sd3-code .t-s{color:#15803D}.sd3-code .t-n{color:rgb(26 23 48/.62)}
  .sd3-caret{background:#3F1993}
}

/* Sovereignty pages (10 October 2026) */
/* Why sovereign AI, Deployment options, and Security & governance: six or seven sections each, no
   layout used twice on a page. The same type, purple, lilac and section tones as every inner page,
   square corners. Each motion says something (an order, a comparison, where the reader is) and all of
   it is off under reduced motion. Markup: build_pages.py, sov_ helpers. */

/* A photograph beside a proof band's statement */
.pg-sov-photo{aspect-ratio:16/11}

/* Evidence: a founder's line beside the figures behind it */
.pg-sov-evidence{display:grid;gap:clamp(48px,5vw,80px)}
@media (min-width:1024px){.pg-sov-evidence{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end}}
.pg-sov-evidence .pg-h2{max-width:20ch}
.pg-sov-evidence__quote{margin:clamp(40px,4.4vw,72px) 0 0}
.pg-sov-evidence__quote blockquote{margin:0;font-size:clamp(26px,2.8vw,40px);line-height:1.18;letter-spacing:-.028em;text-wrap:balance}
.pg-sov-evidence__quote figcaption{display:flex;align-items:center;gap:14px;margin-top:32px;font-size:14px;line-height:1.45;color:var(--pg-muted)}
.pg-sov-evidence__quote figcaption img{flex:none;width:52px;height:52px;object-fit:cover;filter:grayscale(.15)}
.pg-sov-evidence__quote figcaption b{display:block;font-weight:500;color:var(--pg-ink)}
.pg-sov-bars__intro{margin:0 0 28px;max-width:40ch;font-size:16px;line-height:1.55;color:var(--pg-muted)}
.pg-sov-bar{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:8px 16px}
.pg-sov-bar+.pg-sov-bar{margin-top:26px}
.pg-sov-bar b{font-size:clamp(40px,4vw,60px);line-height:1;font-weight:400;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.pg-sov-bar span{font-size:15px;line-height:1.4;color:var(--pg-muted)}
/* The bar alone, no track behind it: its length is the score */
.pg-sov-bar i{grid-column:1/-1;display:block;height:10px;width:calc(var(--v) * 100%);background:var(--pg-purple);transform-origin:100% 50%}
.pg-sov-bar--low i{background:rgb(63 25 147/.3)}
.pg-sov-bars .pg-note{margin-top:24px}

/* Layers: the heading stays in view, the layer in the middle of the screen is lit (pages.js) */
.pg-sov-layers{display:grid;gap:48px}
.pg-sov-layers .pg-head{margin-bottom:0}
.pg-sov-layers__nav{display:none;list-style:none;margin:48px 0 0;padding:0}
.pg-sov-layers__nav a{display:flex;align-items:baseline;gap:16px;padding:13px 20px 13px 0;border-right:2px solid rgb(255 255 255/.14);font-size:17px;letter-spacing:-.01em;color:var(--pg-dark-muted);text-decoration:none;transition:color .35s ease,border-color .35s ease}
.pg-sov-layers__nav small{font-family:var(--font-mono),monospace;font-size:12px;letter-spacing:.04em;color:rgb(255 180 233/.55);transition:color .35s ease}
.pg-sov-layers__nav a:hover,.pg-sov-layers__nav li.is-on a{color:#fff}
.pg-sov-layers__nav li.is-on a{border-color:var(--pg-lilac)}
.pg-sov-layers__nav li.is-on small{color:var(--pg-lilac)}
.pg-sov-layers__list{list-style:none;margin:0;padding:0}
.pg-sov-layer{padding-block:clamp(32px,4vw,56px);border-top:1px solid rgb(255 255 255/.14)}
.pg-sov-layer__q{margin:0 0 14px;font-size:15px;line-height:1.4;color:var(--pg-lilac)}
.pg-sov-layer h3{margin:0;font-size:clamp(32px,3.4vw,52px);line-height:1.04;font-weight:400;letter-spacing:-.032em}
.pg-sov-layer__text{margin:18px 0 0;max-width:46ch;font-size:clamp(16px,1.25vw,19px);line-height:1.55;color:var(--pg-dark-muted)}
@media (min-width:1024px){
 .pg-sov-layers{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(48px,6vw,112px);align-items:start}
 .pg-sov-layers__aside{position:sticky;top:calc(var(--pg-hdr) + var(--pg-ann) + 56px)}
 .pg-sov-layers__nav{display:grid}
 .pg-sov-layer{padding-block:72px}
 .pg-sov-layer:first-child{border-top:0;padding-top:0}
}
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
 .pg-js .pg-sov-layer{opacity:.34;transition:opacity .6s cubic-bezier(.2,.8,.2,1)}
 .pg-js .pg-sov-layer.is-on{opacity:1}
}

/* Spectrum: the options in order along one line, its two ends named */
.pg-sov-range__ends{display:none}
.pg-sov-range__stops{position:relative;display:grid;gap:36px;margin:0;padding:0;list-style:none}
.pg-sov-range__stops::before{content:"";position:absolute;right:21px;top:22px;bottom:22px;width:2px;background:linear-gradient(180deg,var(--pg-lilac),var(--pg-purple) 60%,var(--pg-dark));transform-origin:50% 0}
.pg-sov-range__stops li{position:relative;min-height:44px;padding-right:68px}
/* Each stop is its icon on the line; the tiles deepen from a tint to purple to near-black, as the
   line does. They are opaque, so the line passes behind them. */
.pg-sov-range__stops .pg-icon{position:absolute;right:0;top:0;margin:0;background:linear-gradient(rgb(63 25 147/.07),rgb(63 25 147/.07)),#fff}
.pg-sov-range__stops li:nth-child(2) .pg-icon{background:linear-gradient(rgb(63 25 147/.16),rgb(63 25 147/.16)),#fff}
.pg-sov-range__stops li:nth-child(3) .pg-icon{background:var(--pg-purple);color:#fff;box-shadow:none}
.pg-sov-range__stops li:nth-child(4) .pg-icon{background:var(--pg-dark);color:var(--pg-lilac);box-shadow:none}
.pg-sov-range__stops h3{padding-top:10px}
.pg-sov-range__stops h3{margin:0;font-size:clamp(20px,1.7vw,24px);line-height:1.25;font-weight:400;letter-spacing:-.015em}
.pg-sov-range__stops p{margin:8px 0 0;max-width:30ch;font-size:15px;line-height:1.55;color:var(--pg-muted)}
.pg-sov-range__more{margin:clamp(32px,4vw,48px) 0 0}
.pg-sov-range__more .pg-link{margin-top:0}
@media (min-width:900px){
 .pg-sov-range__ends{display:flex;justify-content:space-between;gap:24px;margin:0 0 20px;font-family:var(--font-mono),monospace;font-size:12.5px;letter-spacing:.02em;color:var(--pg-muted)}
 .pg-sov-range__stops{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
 .pg-sov-range__stops::before{right:0;left:0;top:21px;bottom:auto;width:auto;height:2px;background:linear-gradient(270deg,var(--pg-lilac),var(--pg-purple) 60%,var(--pg-dark));transform-origin:100% 50%}
 .pg-sov-range__stops li{padding:68px 0 0 24px}
 .pg-sov-range__stops h3{padding-top:0}
}

/* Staircase: the four arrangements rise and deepen, from a dedicated cloud to no outbound connection */
.pg-sov-stair{display:grid;gap:8px}
.pg-sov-rung{display:flex;flex-direction:column;gap:12px;padding:28px;background:var(--pg-alt);color:var(--pg-ink)}
.pg-sec--alt .pg-sov-rung--0{background:#fff}
.pg-sov-rung h3{margin:0;font-size:clamp(21px,1.8vw,26px);line-height:1.15;font-weight:400;letter-spacing:-.02em;text-wrap:balance}
.pg-sov-nowrap{white-space:nowrap}
.pg-sov-rung p{margin:0;font-size:15px;line-height:1.55;color:var(--pg-muted)}
.pg-sov-rung .pg-sov-rung__meta{margin-top:auto;padding-top:20px;font-family:var(--font-mono),monospace;font-size:12.5px;letter-spacing:.02em;color:var(--pg-purple)}
.pg-sov-rung--1{background:#E4DDF1;background:color-mix(in srgb,var(--pg-purple) 13%,#fff)}
body.pg .pg-sov-rung--2{background:var(--pg-purple);color:#fff}
body.pg .pg-sov-rung--3{background:var(--pg-dark);color:#F5F5F7}
.pg-sov-rung--2 p{color:rgb(255 255 255/.78)}
.pg-sov-rung--3 p{color:var(--pg-dark-muted)}
.pg-sov-rung--2 .pg-sov-rung__meta,.pg-sov-rung--3 .pg-sov-rung__meta{color:var(--pg-lilac)}
@media (min-width:900px){
 .pg-sov-stair{grid-template-columns:repeat(4,minmax(0,1fr));align-items:end}
 .pg-sov-rung{min-height:calc(280px + var(--i) * 76px)}
}

/* Residency: the countries as a large index, beside the region that adds in-Kingdom hosting */
.pg-sov-residency{display:grid;gap:clamp(48px,5vw,80px)}
.pg-sov-residency .pg-head{margin-bottom:0}
.pg-sov-countries{margin:clamp(36px,4vw,56px) 0 0;padding:0;list-style:none}
.pg-sov-countries li{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:baseline;gap:16px;padding-block:20px;border-top:1px solid rgb(255 255 255/.14)}
.pg-sov-countries li>span:last-child{font-size:clamp(30px,3.6vw,54px);line-height:1.05;letter-spacing:-.035em}
.pg-sov-countries__code{font-family:var(--font-mono),monospace;font-size:13px;letter-spacing:.06em;color:var(--pg-lilac)}
.pg-sov-region{background:rgb(255 255 255/.04);box-shadow:inset 0 0 0 1px rgb(255 255 255/.1)}
.pg-sov-region__media{aspect-ratio:16/10;overflow:hidden;background:#0C0716}
.pg-sov-region__media img{width:100%;height:100%;object-fit:cover}
.pg-sov-region__body{padding:28px}
/* Microsoft's logo in white on the dark band, as the homepage shows its partners */
body.pg .pg-sov-region__logo{height:20px;width:auto;filter:brightness(0) invert(1)}
.pg-sov-region h3{margin:20px 0 0;font-size:clamp(24px,2.2vw,30px);line-height:1.15;font-weight:400;letter-spacing:-.02em}
.pg-sov-region p{margin:10px 0 0;font-size:15px;line-height:1.55;color:var(--pg-dark-muted)}
.pg-sov-region__figs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin:28px 0 0;padding-top:24px;border-top:1px solid rgb(255 255 255/.12)}
.pg-sov-region__figs div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:10px}
.pg-sov-region__figs dd{margin:0;font-size:clamp(44px,4.4vw,64px);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.pg-sov-region__figs dt{font-size:14px;line-height:1.4;color:var(--pg-dark-muted)}
.pg-sov-region .pg-link{margin-top:24px}
@media (min-width:1024px){.pg-sov-residency{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end}}

/* Product ledger: the per-product table, led by each product's logo */
.pg-sov-logos{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
body.pg .pg-sov-logos img{height:22px;width:auto;max-width:none}
body.pg .pg-sov-logos img[src*="atelier"],body.pg .pg-sov-logos img[src*="sadu"]{height:28px}
.pg-sov-ledger td{vertical-align:middle}
.pg-sov-ledger td:first-child{padding-block:24px}

/* Controls: a two-row bento, a wide and a narrow tile each, in four materials */
.pg-sov-controls{display:grid;gap:8px}
.pg-sov-control{display:flex;flex-direction:column;justify-content:space-between;gap:48px;min-height:clamp(220px,22vw,320px);padding:28px;background:rgb(255 255 255/.04);color:#F5F5F7}
.pg-sov-control__abbr{display:block;font-size:clamp(56px,6.6vw,104px);line-height:.9;font-weight:400;letter-spacing:-.045em}
.pg-sov-control h3{margin:0;font-size:20px;line-height:1.25;font-weight:400;letter-spacing:-.01em}
.pg-sov-control p{margin:8px 0 0;max-width:42ch;font-size:15px;line-height:1.55;color:var(--pg-dark-muted)}
.pg-sov-control--purple{background:var(--pg-purple)}
.pg-sov-control--purple p{color:rgb(255 255 255/.78)}
.pg-sov-control--lilac{background:var(--pg-lilac);color:var(--pg-ink)}
.pg-sov-control--lilac p{color:rgb(9 9 10/.72)}
/* The faint grid of the menu window's dark cards */
.pg-sov-control--grid{background-color:rgb(255 255 255/.03);background-image:linear-gradient(rgb(255 255 255/.07) 1px,transparent 1px),linear-gradient(270deg,rgb(255 255 255/.07) 1px,transparent 1px);background-size:24px 24px;box-shadow:inset 0 0 0 1px rgb(255 255 255/.1)}
.pg-sov-control--plain{box-shadow:inset 0 0 0 1px rgb(255 255 255/.1)}
@media (min-width:900px){.pg-sov-controls{grid-template-columns:repeat(6,minmax(0,1fr))}.pg-sov-control{grid-column:span 2}.pg-sov-control--wide{grid-column:span 4}}

/* Certifications: the large tile carries its standard at display size */
.pg-sov-certs .pg-tile h3{font-size:clamp(28px,2.6vw,38px);letter-spacing:-.03em}
.pg-sov-certs .pg-trio>:first-child h3{max-width:none;font-size:clamp(56px,7vw,112px);line-height:.92;letter-spacing:-.05em}

/* Partners: logos in white on the photograph and the deep tile */
.pg-sov-partners .pg-tile__logo{height:22px}
/* A deeper scrim than other trios: the photograph is busy where the title sits */
.pg-sov-partners .pg-tile--img::after{background:linear-gradient(180deg,rgb(9 9 10/.55),rgb(9 9 10/0) 26%),linear-gradient(0deg,rgb(9 9 10/.94) 6%,rgb(9 9 10/.72) 44%,rgb(9 9 10/.08) 80%)}
.pg-sov-partners .pg-trio>:first-child .pg-tile__logo{height:clamp(22px,2vw,28px);filter:brightness(0) invert(1)}
/* Phones: the photograph sits above the words instead of behind them, so the title never crosses it */
@media (max-width:899px){
 .pg-sov-partners .pg-trio>.pg-tile--img{min-height:0;padding-top:0}
 body.pg .pg-sov-partners .pg-tile--img .pg-tile__bg{position:static;z-index:auto;width:calc(100% + 56px);max-width:none;height:auto;aspect-ratio:16/10;margin:0 -28px}
 .pg-sov-partners .pg-tile--img::after{display:none}
}

/* Questions: native disclosures beside a heading that stays in view */
.pg-sov-faq{display:grid;gap:40px}
.pg-sov-faq .pg-h2{max-width:14ch}
.pg-sov-faq__list{border-top:1px solid var(--pg-ink)}
.pg-sov-qa{border-bottom:1px solid #D9D6E2}
.pg-sov-qa summary{display:grid;grid-template-columns:40px minmax(0,1fr) 16px;align-items:center;gap:20px;padding:20px 0;list-style:none;cursor:pointer}
.pg-sov-qa .pg-icon{width:40px;height:40px;margin:0}
.pg-sov-qa[open] .pg-icon{background:var(--pg-purple);color:#fff;box-shadow:none}
.pg-sov-qa summary::-webkit-details-marker{display:none}
.pg-sov-qa summary h3{margin:0;font-size:clamp(19px,1.55vw,22px);line-height:1.3;font-weight:400;letter-spacing:-.012em;transition:color .2s ease}
.pg-sov-qa summary:hover h3{color:var(--pg-purple)}
.pg-sov-qa summary:focus-visible{outline:2px solid var(--pg-purple);outline-offset:4px}
.pg-sov-qa__icon{position:relative;width:16px;height:16px}
.pg-sov-qa__icon::before,.pg-sov-qa__icon::after{content:"";position:absolute;right:0;top:7px;width:16px;height:2px;background:var(--pg-purple)}
.pg-sov-qa__icon::after{transform:rotate(90deg);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.pg-sov-qa[open] .pg-sov-qa__icon::after{transform:rotate(0deg)}
.pg-sov-qa__a p{margin:0;padding:0 60px 28px 40px;max-width:calc(62ch + 60px);font-size:16px;line-height:1.6;color:var(--pg-muted)}
@media (min-width:1024px){
 .pg-sov-faq{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(48px,6vw,112px);align-items:start}
 .pg-sov-faq__head{position:sticky;top:calc(var(--pg-hdr) + var(--pg-ann) + 56px)}
}
@media (max-width:767px){
 .pg-sov-qa summary{grid-template-columns:36px minmax(0,1fr) 16px;gap:14px}
 .pg-sov-qa .pg-icon{width:36px;height:36px}
 .pg-sov-qa__a p{padding:0 50px 24px 0}
}

/* Motion. The bars grow to their scores, the spectrum's line draws in before its stops, the steps and
   rows arrive in order, an opened answer settles in. None of it runs under reduced motion. */
@media (prefers-reduced-motion:no-preference){
 .pg-js .pg-sov-bars .pg-sov-bar i{transform:scaleX(0);transition:transform 1s cubic-bezier(.2,.8,.2,1) .25s}
 .pg-js .pg-sov-bars .pg-sov-bar+.pg-sov-bar i{transition-delay:.45s}
 .pg-js .pg-sov-bars.is-in .pg-sov-bar i{transform:none}
 .pg-js .pg-sov-range .pg-sov-range__stops::before{transform:scaleY(0);transition:transform 1s cubic-bezier(.65,0,.35,1) .1s}
 .pg-js .pg-sov-range.is-in .pg-sov-range__stops::before{transform:none}
 .pg-js .pg-sov-range .pg-sov-range__stops li{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(.2s + var(--i) * .16s)}
 .pg-js .pg-sov-range.is-in .pg-sov-range__stops li{opacity:1;transform:none}
 .pg-js .pg-sov-rung.pg-reveal,.pg-js .pg-sov-countries li.pg-reveal{transition-delay:calc(var(--i) * 90ms)}
 .pg-js .pg-sov-control.pg-reveal:nth-child(2),.pg-js .pg-sov-control.pg-reveal:nth-child(4){transition-delay:90ms}
 .pg-sov-qa[open] .pg-sov-qa__a{animation:pg-sov-qa-in .45s cubic-bezier(.2,.8,.2,1)}
}
@media (prefers-reduced-motion:no-preference) and (min-width:900px){
 .pg-js .pg-sov-range .pg-sov-range__stops::before{transform:scaleX(0)}
 .pg-js .pg-sov-range.is-in .pg-sov-range__stops::before{transform:none}
}
@keyframes pg-sov-qa-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pg-sov-qa__icon::after,.pg-sov-layers__nav a,.pg-sov-layers__nav small{transition:none}}

/* Icons on the Sovereignty sections (10 October 2026). Each one names what its item is about, and the
   same idea keeps the same icon on every page (cloud, you administer, your building, no connection).
   The shared icon helpers draw them in and redraw them on hover; the states below say where you are. */
/* Layers: the icon beside each layer; the lit layer's icon fills in lilac and draws again (pages.js) */
@media (min-width:768px){.pg-sov-layer{display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 28px;align-items:start}.pg-sov-layer .pg-icon{margin:6px 0 0}}
.pg-sov-layer.is-on .pg-icon--dark{background:var(--pg-lilac);color:#1A1730;box-shadow:none}
/* Staircase */
.pg-sov-rung .pg-icon{margin:0 0 8px}
.pg-sov-rung--1 .pg-icon{background:rgb(255 255 255/.55)}
/* Controls: the short name and the icon share the tile's top line */
.pg-sov-control__top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.pg-sov-control .pg-icon{margin:0}
/* The lilac tile: a lighter backing under a purple icon, filled purple on hover (it sits in a dark section) */
.pg-dark .pg-sov-control--lilac .pg-icon{background:rgb(255 255 255/.5);color:var(--pg-purple);box-shadow:inset 0 0 0 1px rgb(63 25 147/.18)}
.pg-dark .pg-sov-control--lilac.pg-icard:hover .pg-icon{background:var(--pg-purple);color:#fff;box-shadow:none}
/* Certifications: the icon and its status share the tile's top line */
.pg-sov-certs .pg-tile__top{justify-content:space-between;gap:16px}
.pg-sov-certs .pg-icon{margin:0}
/* Table rows led by an icon; the row under the pointer is tinted */
.pg-sov-area{display:inline-flex;align-items:center;gap:16px}
.pg-sov-table .pg-icon{width:40px;height:40px;margin:0}
.pg-sov-table td{vertical-align:middle}
.pg-sov-table tbody tr{transition:background-color .25s ease}
.pg-sov-table tbody tr:hover{background:rgb(63 25 147/.04)}
@media (max-width:639px){.pg-sov-table td:first-child{padding-bottom:8px}}

/* Company pages (10 October 2026) */
/* Who we are, Newsroom, Careers, Become a partner and Documentation (build_pages.py, the co_ helpers).
   The inner pages' own type, purple accent, square corners and section tones. Motion runs once, when a
   block comes into view, and only without reduced motion. */

/* Timeline (Who we are): the years set large on one line that draws itself in, point by point. Each
   point's icon sits on the line (an opaque tile, so the line passes behind it) and rings lilac as the
   line reaches it. */
.pg-co-time{position:relative;display:grid;gap:44px;margin:0;padding:0 68px 0 0;list-style:none}
.pg-co-time::before,.pg-co-time::after{content:"";position:absolute;right:22px;top:22px;bottom:22px;width:1px;background:rgb(255 255 255/.16)}
.pg-co-time::after{background:linear-gradient(180deg,#8F6BE8,var(--pg-lilac));transform-origin:top}
.pg-co-time li{position:relative;z-index:1}  /* over the line, which its pseudo-elements draw after the points (audit) */
.pg-co-time .pg-icon{position:absolute;right:-68px;top:0;margin:0;background:#1A1722}
.pg-co-time.is-in .pg-icon{box-shadow:inset 0 0 0 1px var(--pg-lilac)}
.pg-co-time time{display:block;font-size:clamp(56px,7.4vw,116px);line-height:.92;font-weight:400;letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:#F5F5F7}
.pg-co-time .is-key time{color:var(--pg-lilac)}
.pg-co-time p{margin:20px 0 0;max-width:32ch;font-size:clamp(16px,1.25vw,18px);line-height:1.55;color:var(--pg-dark-muted)}
@media (min-width:900px){
 .pg-co-time{grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:0 40px;padding:72px 0 0}
 .pg-co-time::before,.pg-co-time::after{right:0;left:0;top:22px;bottom:auto;width:auto;height:1px}
 .pg-co-time::after{background:linear-gradient(270deg,#8F6BE8,var(--pg-lilac));transform-origin:right}
 .pg-co-time .pg-icon{right:0;top:-72px}
}
@media (prefers-reduced-motion:no-preference){
 .pg-js .pg-co-time.pg-reveal{opacity:1;transform:none}
 /* The transitions belong to the in-view state, so hiding before it is instant and only the reveal moves */
 .pg-js .pg-co-time::after{transform:scaleY(0)}
 .pg-js .pg-co-time.is-in::after{transform:none;transition:transform 1.8s cubic-bezier(.65,0,.35,1) .15s}
 .pg-js .pg-co-time li{opacity:0;transform:translateY(16px)}
 .pg-js .pg-co-time.is-in li{opacity:1;transform:none;transition:opacity .7s ease calc(.2s + var(--i) * .5s),transform .9s cubic-bezier(.2,.8,.2,1) calc(.2s + var(--i) * .5s)}
 .pg-js .pg-co-time.is-in .pg-icon{animation:pg-co-ring .4s ease calc(.35s + var(--i) * .5s) both}
}
@media (prefers-reduced-motion:no-preference) and (min-width:900px){.pg-js .pg-co-time::after{transform:scaleX(0)}}
@keyframes pg-co-ring{from{box-shadow:inset 0 0 0 1px rgb(255 255 255/.16)}to{box-shadow:inset 0 0 0 1px var(--pg-lilac)}}

/* The group (Who we are): photo, the company's own logo, one line; two by two */
.pg-co-group{display:grid;gap:8px}
@media (min-width:768px){.pg-co-group{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pg-co-group__item{display:flex;flex-direction:column;min-width:0;background:var(--pg-alt)}
.pg-co-group__media{aspect-ratio:16/10;overflow:hidden;background:#0C0716}
.pg-co-group__media img{width:100%;height:100%;object-fit:cover}
/* Every logo sits in the same 52px row (logos at 1.3x, 10 October 2026), so the lines under them align
   across a row of cards; each card's website link sits at its foot, level with its neighbour's */
.pg-co-group__body{flex:1;display:grid;grid-template-rows:52px auto 1fr;justify-items:start;align-items:center;gap:16px;padding:28px 28px 32px}
.pg-co-group__body .pg-co-group__logo{height:var(--h,24px);width:auto;max-width:none}
.pg-co-group__body p{align-self:start}
.pg-co-group__body .pg-link{align-self:end;margin-top:4px}
.pg-co-group__body p{margin:0;max-width:46ch;font-size:15px;line-height:1.55;color:var(--pg-muted)}

/* Insights (Newsroom): the CEO's essay across the full width, two posts side by side beneath it */
.pg-co-ins{display:grid;gap:40px}
.pg-co-ins__feat{display:grid;gap:20px;min-width:0;text-decoration:none}
@media (min-width:1024px){.pg-co-ins__feat{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center}}
.pg-co-ins__feat .pg-post__media{aspect-ratio:16/9}
.pg-co-ins__feat h3{margin:14px 0 0;max-width:18ch;font-size:clamp(28px,3vw,44px);line-height:1.08;font-weight:400;letter-spacing:-.03em;transition:color .2s ease}
.pg-co-ins__feat .pg-link{margin-top:24px}
a.pg-co-ins__feat:hover .pg-post__media img{transform:scale(1.03)}
a.pg-co-ins__feat:hover h3,.pg-co-ins__side a.pg-post:hover h3{color:var(--pg-purple)}
.pg-co-ins__side .pg-post h3{align-self:start;transition:color .2s ease}
.pg-co-ins__side{display:grid;gap:32px 56px;padding-top:40px;border-top:1px solid var(--pg-line)}
@media (min-width:768px){.pg-co-ins__side{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:600px){
 .pg-co-ins__side .pg-post{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;gap:10px 22px}
 .pg-co-ins__side .pg-post__media{grid-row:1/3;aspect-ratio:4/3}
}
.pg-co-ins+.pg-link{margin-top:48px}

/* Fact sheet (Newsroom, dark): each fact's icon beside its label and value, two columns */
.pg-co-facts{display:grid;gap:0 56px;margin:0;padding:0;list-style:none}
@media (min-width:900px){.pg-co-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pg-co-facts li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px 20px;align-items:start;padding:24px 0 28px;border-top:1px solid rgb(255 255 255/.14)}
.pg-co-facts .pg-icon{grid-row:1/3;margin:0}
.pg-co-facts__k{margin:2px 0 0;font-family:var(--font-mono),monospace;font-size:12.5px;letter-spacing:.04em;color:var(--pg-lilac)}
.pg-co-facts__v{margin:0;max-width:38ch;font-size:clamp(19px,1.55vw,23px);line-height:1.4;letter-spacing:-.012em;color:#F5F5F7}
.pg-co-facts+.pg-note{margin-top:28px}

/* Boilerplate (Newsroom): three lengths as tabs, and a copy button */
.pg-co-bp{max-width:1100px;border:1px solid var(--pg-line);background:#fff}
.pg-co-bp__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:8px;background:var(--pg-alt);border-bottom:1px solid var(--pg-line)}
.pg-co-bp__tabs{display:flex;gap:4px}
.pg-co-bp__tabs [role=tab]{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;line-height:44px;font-size:14px;color:var(--pg-ink);transition:background-color .2s ease,color .2s ease}
.pg-co-bp__tabs .pg-ico,.pg-co-bp .pg-btn .pg-ico{flex:none;display:block}
.pg-co-bp__tabs [aria-selected=false] .pg-ico{color:var(--pg-purple)}
.pg-co-bp__ic{display:inline-flex}
.pg-co-bp__ic[hidden]{display:none}
.pg-co-bp__tabs small{font-family:var(--font-mono),monospace;font-size:11.5px;color:var(--pg-muted);transition:color .2s ease}
.pg-co-bp__tabs [role=tab]:hover{background:#fff}
.pg-co-bp__tabs [aria-selected=true],.pg-co-bp__tabs [aria-selected=true]:hover{background:var(--pg-ink);color:#fff}
.pg-co-bp__tabs [aria-selected=true] small{color:rgb(255 255 255/.66)}
.pg-co-bp__tabs [role=tab]:focus-visible{outline:2px solid var(--pg-purple);outline-offset:2px}
.pg-co-bp .pg-btn{background:#fff}
.pg-co-bp .pg-btn:hover{background:var(--pg-ink);color:#fff}
.pg-co-bp__pane{padding:clamp(28px,4vw,56px)}
.pg-co-bp__pane[hidden]{display:none}
.pg-co-bp__pane:focus-visible{outline:2px solid var(--pg-purple);outline-offset:-2px}
.pg-co-bp__pane p{margin:0;max-width:64ch;font-size:clamp(18px,1.45vw,21px);line-height:1.65;color:var(--pg-ink)}
@media (prefers-reduced-motion:no-preference){.pg-co-bp__pane:not([hidden]) p{animation:pg-co-in .45s cubic-bezier(.2,.8,.2,1)}}
@keyframes pg-co-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:599px){
 .pg-co-bp__tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
 .pg-co-bp__tabs [role=tab]{justify-content:center;padding:0 8px}
 .pg-co-bp__tabs small{display:none}
 .pg-co-bp .pg-btn{width:100%;justify-content:center}
}

/* Demos (Careers, six products in thirds): the LLM Models card's title is set for the homepage's large
   card (2.5x); in a third it pushed the benchmark chart into its labels. It takes the other cards' size. */
.pg-co-demos .aai-bento__card--third[data-story="benchmark"] .aai-bento__title{max-width:18ch;font-size:clamp(20px,1.6vw,24px);line-height:1.2;letter-spacing:-.015em}
/* Its chart stacks the score over the bars, as the homepage does on narrow screens */
.pg-co-demos .aai-bento__card--third .bv-bench{grid-template-columns:minmax(0,1fr);gap:24px}
.pg-co-demos .aai-bento__card--third .bv-bench__score{font-size:clamp(56px,5vw,72px)}
.pg-co-demos .aai-bento__card--third .bv-bench__chart li,.pg-co-demos .aai-bento__card--third .bv-bench__axis{grid-template-columns:96px minmax(0,1fr) 40px;gap:10px}

/* Teams (Careers, dark): the disciplines set large in two columns, each with its icon, offices and
   contacts beside them. (The products block above them is the shared product_demos().) */
.pg-co-teams{display:grid;gap:48px}
@media (min-width:1024px){.pg-co-teams{grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:72px;align-items:end}}
.pg-co-teams ul{display:grid;margin:0;padding:0;list-style:none;border-top:1px solid rgb(255 255 255/.16)}
@media (min-width:640px){.pg-co-teams ul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}}
.pg-co-teams li{display:flex;align-items:center;gap:18px;padding:18px 0 20px;border-bottom:1px solid rgb(255 255 255/.16);font-size:clamp(24px,2.2vw,32px);line-height:1.05;letter-spacing:-.03em;color:#F5F5F7}
.pg-co-teams .pg-icon{margin:0}
.pg-co-teams dl{display:grid;gap:26px;margin:0}
.pg-co-teams dt{font-family:var(--font-mono),monospace;font-size:12.5px;letter-spacing:.04em;color:var(--pg-lilac)}
.pg-co-teams dd{margin:8px 0 0;font-size:17px;line-height:1.5;color:#F5F5F7}
.pg-co-teams dd a{color:#fff;text-decoration:underline;text-decoration-color:rgb(255 255 255/.4);text-underline-offset:3px;transition:text-decoration-color .2s ease}
.pg-co-teams dd a:hover{text-decoration-color:var(--pg-lilac)}

/* Points under a split's lead (Careers) */
.pg-co-points{display:grid;margin:32px 0 0;padding:0;list-style:none;border-top:1px solid var(--pg-line)}
.pg-co-points li{display:grid;gap:6px;padding:20px 0}
.pg-co-points li+li{border-top:1px solid var(--pg-line)}
.pg-co-points b{font-size:19px;font-weight:400;letter-spacing:-.01em}
.pg-co-points span{max-width:48ch;font-size:15.5px;line-height:1.55;color:var(--pg-muted)}

/* Partners header (co_show): the signings in turn. The canvas (pages.js) draws the menus' morph over
   the photographs once all five are loaded; until then, or without WebGL, the photographs crossfade. */
.pg-co-show{position:relative;overflow:hidden;background:#0C0716}
.pg-co-show .pg-co-show__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.pg-co-show .pg-co-show__img.is-on{opacity:1}
.pg-co-show__gl{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;transition:opacity .3s ease}
.pg-co-show.is-gl .pg-co-show__gl{opacity:1}
/* The partner's logo, bottom left, in white on a dark chip, so it reads on every photograph */
.pg-co-show__logo{position:absolute;right:20px;bottom:20px;z-index:2;width:176px;height:60px;background:#0B0912;box-shadow:inset 0 0 0 1px rgb(255 255 255/.12)}
.pg-co-show .pg-co-show__logo img{position:absolute;left:50%;top:50%;width:auto;height:var(--h);max-width:136px;object-fit:contain;filter:brightness(0) invert(1);opacity:0;transform:translate(-50%,-50%)}
.pg-co-show .pg-co-show__logo img.is-on{opacity:1}
/* Pause: two bars; paused, a play triangle */
.pg-co-show__pause{position:absolute;left:20px;bottom:20px;z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:#0B0912;box-shadow:inset 0 0 0 1px rgb(255 255 255/.12);color:#fff;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.pg-co-show__pause:hover{background:#fff;color:#0B0912}
.pg-co-show__pause:focus-visible{outline:2px solid var(--pg-lilac);outline-offset:2px}
.pg-co-show__pause i{position:relative;display:block;width:12px;height:14px}
.pg-co-show__pause i::before,.pg-co-show__pause i::after{content:"";position:absolute;top:0;width:4px;height:14px;background:currentColor}
.pg-co-show__pause i::before{right:0}
.pg-co-show__pause i::after{left:0}
.pg-co-show__pause[aria-pressed="true"] i::before{left:1px;width:0;height:0;background:none;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent currentColor}
.pg-co-show__pause[aria-pressed="true"] i::after{display:none}
@media (max-width:1023px){
 .pg-co-show__logo{right:14px;bottom:14px;width:140px;height:48px}
 .pg-co-show .pg-co-show__logo img{height:calc(var(--h) * .8);max-width:110px}
 .pg-co-show__pause{left:14px;bottom:14px}
}
@media (prefers-reduced-motion:no-preference){
 .pg-co-show .pg-co-show__img{transition:opacity .7s ease}
 /* The new logo rises in as the photograph turns; the last one drops away */
 .pg-co-show .pg-co-show__logo img{transform:translate(-50%,-25%);transition:opacity .35s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
 .pg-co-show .pg-co-show__logo img.is-on{transform:translate(-50%,-50%);transition-delay:.2s}
}

/* Partners: HUMAIN across the full width, the other four two by two */
@media (min-width:768px){.pg-co-partners .pg-cards>:first-child{grid-column:1/-1}}
@media (min-width:1024px){
 .pg-co-partners .pg-cards>:first-child{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
 .pg-co-partners .pg-cards>:first-child .pg-card__body{justify-content:center;gap:14px;padding:clamp(32px,4vw,64px)}
 .pg-co-partners .pg-cards>:first-child h3{font-size:clamp(26px,2.4vw,36px);line-height:1.12;letter-spacing:-.025em}
 .pg-co-partners .pg-cards>:first-child p{max-width:40ch;font-size:17px}
 .pg-co-partners .pg-cards>:first-child .pg-link{margin-top:12px}
}
/* Benefits (Become a partner): each cell's icon at the top, its title and line at the foot. The
   models' three deployments are chips; the one under the pointer turns white and redraws its icon. */
.pg-co-gets .pg-cell{min-height:236px}
.pg-co-gets .pg-icon{width:56px;height:56px;margin:0 0 auto}
.pg-co-gets .pg-icon .pg-ico{width:28px;height:28px}
body.pg .pg-co-gets .pg-co-cell--lilac{background:#FFB4E9}
.pg-co-gets .pg-co-cell--lilac p{color:rgb(9 9 10/.72)}
.pg-co-gets .pg-co-cell--lilac .pg-icon{background:rgb(255 255 255/.55);box-shadow:none}
.pg-co-gets .pg-cell h3{margin-top:32px;max-width:22ch;font-size:clamp(22px,1.9vw,28px);line-height:1.15;letter-spacing:-.02em}
.pg-co-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.pg-co-chips li{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 16px;border:1px solid rgb(255 255 255/.28);font-size:14px;color:#fff;transition:background-color .25s ease,border-color .25s ease,color .25s ease}
.pg-co-chips .pg-ico{flex:none;color:var(--pg-lilac);transition:color .25s ease}
.pg-co-chips li:hover{background:#fff;border-color:#fff;color:var(--pg-purple)}
.pg-co-chips li:hover .pg-ico{color:var(--pg-purple)}
/* rows() icons on a dark band (Building with us) take the dark-ground tile */
.pg-co-ondark .pg-icon{background:rgb(255 255 255/.08);color:#FFB4E9;box-shadow:inset 0 0 0 1px rgb(255 255 255/.16)}
.pg-co-ondark .pg-icard:hover .pg-icon{background:#FFB4E9;color:#1A1730;box-shadow:none}
/* A chosen track: the form's track field acknowledges it once */
@media (prefers-reduced-motion:no-preference){.pg-co-picked select{animation:pg-co-pick 1.6s ease .45s both}}
@keyframes pg-co-pick{0%,100%{box-shadow:0 0 0 0 rgb(63 25 147/0)}25%{box-shadow:0 0 0 6px rgb(63 25 147/.22)}}

/* Icon lists: a short list, each line led by its icon (beside the partner form, in closing bands) */
.pg-co-ilist{display:grid;margin:32px 0 0;padding:0;list-style:none;border-top:1px solid var(--pg-line)}
.pg-co-ilist li{display:flex;align-items:center;gap:18px;padding:16px 0;border-bottom:1px solid var(--pg-line);font-size:16px;line-height:1.45;color:var(--pg-ink)}
.pg-co-ilist .pg-icon{margin:0}
.pg-co-ilist a{color:var(--pg-purple);text-underline-offset:3px}
.pg-co-ilist--dark,.pg-co-ilist--dark li{border-color:rgb(255 255 255/.14)}
.pg-co-ilist--dark li{color:#F5F5F7;font-size:17px}
.pg-co-ilist--dark a{color:#fff}
/* In a pre-footer (co_close): the list sits under the lead, in the text column's measure */
.pg-co-close .pg-co-ilist{max-width:460px;margin:28px 0 0}
.pg-co-close .pg-co-ilist li{padding:13px 0;font-size:16px}

/* Announcements (Newsroom): each line led by the icon of what it is about */
.pg-co-dated li>a,.pg-co-dated li>div{grid-template-columns:36px minmax(0,1fr);align-items:center;column-gap:18px}
.pg-co-dated time{grid-column:1/-1}
.pg-co-dated .pg-icon{width:36px;height:36px;margin:0}
@media (min-width:900px){
 .pg-co-dated li>a,.pg-co-dated li>div{grid-template-columns:120px 36px minmax(0,1fr) 24px;column-gap:24px}
 .pg-co-dated time{grid-column:auto}
}

/* Product ledger (Documentation): each row led by the product's logo */
.pg-co-ledger td{vertical-align:middle}
.pg-co-ledger__logos{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
body.pg .pg-co-ledger__logos img{height:var(--h,24px);width:auto;max-width:none}

/* Platform stack (Documentation): the layers as an accordion beside an isometric stack of product
   plates, Data at the base and Sadu on top, square like everything else on the site. Squares rise along
   three rails from the data up (what feeds what); the open layer's plate lifts (where you are); a bar
   beside the open layer fills while the tour waits to move up. Phones: heading, stack, then the list. */
.pg-co-arch{display:grid;grid-template-areas:"head" "scene" "list"}
@media (min-width:1024px){.pg-co-arch{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;grid-template-areas:"head scene" "list scene";column-gap:clamp(40px,5vw,88px)}}
.pg-co-arch__head{grid-area:head}
.pg-co-arch__head .pg-head{margin-bottom:0}
.pg-co-arch__list{grid-area:list;align-self:start;margin:36px 0 0;padding:0;list-style:none;border-top:1px solid var(--pg-line)}
.pg-co-arch__item{position:relative;border-bottom:1px solid var(--pg-line)}
.pg-co-arch__item h3{margin:0;font:inherit}
.pg-co-arch__item button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:104px minmax(0,1fr) 14px;align-items:center;gap:6px 16px;width:100%;padding:20px 22px 20px 0;color:var(--pg-ink)}
.pg-co-arch__item button:focus-visible{outline:2px solid var(--pg-purple);outline-offset:2px}
.pg-co-arch__k{font-family:var(--font-mono),monospace;font-size:12.5px;letter-spacing:.04em;color:var(--pg-purple)}
.pg-co-arch__n{font-size:clamp(20px,1.7vw,24px);line-height:1.2;letter-spacing:-.015em;transition:color .25s ease}
.pg-co-arch__item button:hover .pg-co-arch__n,.pg-co-arch__item.is-on .pg-co-arch__n{color:var(--pg-purple)}
/* A plus that becomes a minus when the layer is open */
.pg-co-arch__item i{position:relative;width:14px;height:14px}
.pg-co-arch__item i::before,.pg-co-arch__item i::after{content:"";position:absolute;right:0;top:6px;width:14px;height:1.5px;background:currentColor;transition:transform .3s ease}
.pg-co-arch__item i::after{transform:rotate(90deg)}
.pg-co-arch__item.is-on i::after{transform:none}
.pg-co-arch__bar{position:absolute;right:0;top:0;bottom:0;width:2px;background:var(--pg-line)}
.pg-co-arch__bar::after{content:"";position:absolute;inset:0;background:var(--pg-purple);transform:scaleY(0);transform-origin:top}
.pg-co-arch__item.is-on .pg-co-arch__bar::after{transform:none}
.pg-co-arch__body{display:grid;grid-template-rows:1fr}
.pg-co-arch__body>div{min-height:0;overflow:hidden}
.pg-js .pg-co-arch__item:not(.is-on) .pg-co-arch__body{grid-template-rows:0fr}
.pg-co-arch__body p{margin:0;padding:0 142px 0 0;max-width:calc(52ch + 142px);font-size:15.5px;line-height:1.55;color:var(--pg-muted)}
.pg-co-arch__links{display:flex;flex-wrap:wrap;gap:0 24px;padding:4px 142px 24px 0}
.pg-co-arch__links .pg-link{margin-top:10px}
@media (max-width:599px){
 .pg-co-arch__item button{grid-template-columns:minmax(0,1fr) 14px;padding-right:18px}
 .pg-co-arch__k{grid-column:1}
 .pg-co-arch__n{grid-column:1}
 .pg-co-arch__item i{grid-column:2;grid-row:1/3}
 .pg-co-arch__body p,.pg-co-arch__links{padding-right:18px}
}
/* The stack: one isometric view (no perspective), plates translated up the Z axis. Turned -45deg, a
   plate's bottom-left corner (x 0, y 100%) is the front corner nearest the reader: its two edges carry
   the thickness, and each logo sits toward it, where the plate above leaves the layer in view. */
.pg-co-arch__scene{--s:clamp(170px,21vw,300px);--gap:calc(var(--s) * .42);--t:10px;grid-area:scene;align-self:center;position:relative;display:grid;place-items:center;height:calc(var(--s) * 2.05);margin-top:28px;overflow:clip}
@media (min-width:1024px){.pg-co-arch__scene{margin-top:0}}
.pg-co-arch__iso{position:relative;width:var(--s);height:var(--s);transform-style:preserve-3d;transform:rotateX(56deg) rotateZ(-45deg) translateZ(calc(var(--gap) * -1.5))}
.pg-co-arch__floor{position:absolute;inset:-10%;border:1px dashed rgb(63 25 147/.3);background-image:radial-gradient(rgb(63 25 147/.22) 1px,transparent 1.5px);background-size:16px 16px;transform:translateZ(calc(var(--t) * -1 - 8px))}
.pg-co-arch__plate{position:absolute;inset:0;transform-style:preserve-3d;background:var(--c);cursor:pointer;transform:translateZ(calc(var(--z) * var(--gap)))}
/* The plate's two visible edges, so each layer has thickness */
.pg-co-arch__plate::before{content:"";position:absolute;left:0;right:0;top:100%;height:var(--t);background:var(--s1);transform-origin:top;transform:rotateX(-90deg)}
.pg-co-arch__plate::after{content:"";position:absolute;top:0;bottom:0;right:100%;width:var(--t);background:var(--s2);transform-origin:right;transform:rotateY(-90deg)}
/* A layer of several products: --n equal parts, 6px apart, part --k from the left */
.pg-co-arch__plate--part{right:auto;width:calc((100% - (var(--n) - 1) * 6px) / var(--n));left:calc(var(--k) * ((100% - (var(--n) - 1) * 6px) / var(--n) + 6px))}
body.pg .pg-co-arch__plate img{position:absolute;left:32%;top:70%;width:54%;max-width:none;height:auto;max-height:22%;object-fit:contain;transform:translate(-50%,-50%)}
body.pg .pg-co-arch__plate--part img{left:50%;width:88%}
/* Lifts scale with the gap, so a lifted plate never closes on the layer above at small sizes */
.pg-co-arch__plate:hover{transform:translateZ(calc(var(--z) * var(--gap) + var(--gap) * .07))}
.pg-co-arch__plate.is-on{transform:translateZ(calc(var(--z) * var(--gap) + var(--gap) * .15));box-shadow:inset 0 0 0 2px var(--ring)}
.pg-co-arch__plate--deep{--c:#0D0521;--s1:#05010E;--s2:#0A0419;--ring:var(--pg-lilac)}
.pg-co-arch__plate--purple{--c:#3F1993;--s1:#2A0F68;--s2:#34137D;--ring:var(--pg-lilac)}
.pg-co-arch__plate--lilac{--c:#FFB4E9;--s1:#E58ACB;--s2:#F2A0DC;--ring:var(--pg-purple)}
.pg-co-arch__plate--pink{--c:#F8C8DC;--s1:#DFA2BC;--s2:#EDB6CD;--ring:var(--pg-purple)}
.pg-co-arch__plate--paper{--c:#FFFFFF;--s1:#D9D3E8;--s2:#E7E2F1;--ring:var(--pg-purple);box-shadow:inset 0 0 0 1px rgb(63 25 147/.14)}
.pg-co-arch__plate--mist{--c:#E4DAFB;--s1:#C3B3EC;--s2:#D3C6F4;--ring:var(--pg-purple)}
/* Rails outside the stack's right and left corners, standing up from the floor; squares rise along
   them. (A rail at the front corner would cut across every plate.) */
.pg-co-arch__rail,.pg-co-arch__pulse{position:absolute;left:calc(100% + 20px);top:calc(100% + 20px)}
.pg-co-arch__rail--c,.pg-co-arch__pulse--c{left:-20px;top:-20px}
.pg-co-arch__rail{width:1px;height:calc(var(--gap) * 3 + 24px);background:linear-gradient(rgb(63 25 147/.5),rgb(63 25 147/.06));transform-origin:top;transform:rotateX(90deg)}
.pg-co-arch__pulse{width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--pg-purple);opacity:0}
@media (prefers-reduced-motion:no-preference){
 .pg-co-arch__plate{transition:transform .6s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease}
 .pg-co-arch__body{transition:grid-template-rows .5s cubic-bezier(.2,.8,.2,1)}
 .pg-co-arch__item.is-on.is-timing .pg-co-arch__bar::after{animation:pg-co-fill 5s linear both}
 .pg-co-arch.is-live .pg-co-arch__pulse{animation:pg-co-rise 3.6s cubic-bezier(.45,0,.55,1) var(--d) infinite}
}
@keyframes pg-co-fill{from{transform:scaleY(0)}to{transform:none}}
@keyframes pg-co-rise{0%{opacity:0;transform:translateZ(0)}12%,85%{opacity:1}100%{opacity:0;transform:translateZ(calc(var(--gap) * 3 + 24px))}}

/* Models (Documentation, dark): two to a row; speech and vision carry their own tint */
.pg-co-models{display:grid;gap:8px}
@media (min-width:768px){.pg-co-models{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pg-co-model{display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-height:230px;padding:28px;background:rgb(255 255 255/.05);border:1px solid rgb(255 255 255/.08)}
.pg-co-model--speech{background:rgb(63 25 147/.42);border-color:rgb(143 107 232/.3)}
.pg-co-model--vision{background:linear-gradient(160deg,rgb(255 180 233/.18),rgb(63 25 147/.3));border-color:rgb(255 180 233/.24)}  /* pink into purple: 10% pink alone read as taupe on black (11 October 2026 audit) */
body.pg .pg-co-model img{align-self:flex-start;height:28px;width:auto;max-width:none}
.pg-co-model h3{margin:0;font-size:22px;line-height:1.25;font-weight:400;letter-spacing:-.015em;color:#F5F5F7}
.pg-co-model p{margin:8px 0 0;max-width:50ch;font-size:15px;line-height:1.55;color:var(--pg-dark-muted)}
.pg-co-model .pg-co-model__in{margin-top:14px;font-family:var(--font-mono),monospace;font-size:12.5px;letter-spacing:.02em;color:var(--pg-lilac)}
.pg-co-models+.pg-link{margin-top:40px}

/* Documents and controls (Documentation): the request list beside a dark panel of what the platform has.
   Audit (10 October 2026): the heading sat in the list's column, so the panel ended well above the list
   and left an empty corner. The heading now spans both; the list and the panel start on one line and end
   level, the panel spreading its parts down its height. Pointing at a document lights what it covers. */
.pg-co-docs{display:grid;gap:48px}
@media (min-width:1024px){.pg-co-docs{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px;align-items:stretch}}
/* In the narrower column each document's icon and title sit above its line */
@media (min-width:900px){.pg-co-docs .pg-row{grid-template-columns:minmax(0,1fr);padding-block:28px}}
.pg-co-docs .pg-row .pg-text{padding-right:64px}
@media (max-width:767px){.pg-co-docs .pg-row .pg-text{padding-right:0}}
.pg-co-ctrl{display:flex;flex-direction:column;padding:clamp(28px,3vw,40px);background:var(--pg-dark);color:#F5F5F7}
.pg-co-ctrl__k{margin:0 0 12px;font-family:var(--font-mono),monospace;font-size:12.5px;letter-spacing:.04em;color:var(--pg-lilac)}
.pg-co-ctrl__list{margin:0 0 32px;padding:0;list-style:none}
.pg-co-ctrl__list li{display:flex;align-items:center;gap:14px;padding:13px 0;border-top:1px solid rgb(255 255 255/.12);font-size:17px}
.pg-co-ctrl__list .pg-ico{flex:none;color:var(--pg-lilac)}
.pg-co-ctrl__chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.pg-co-ctrl__chips li{padding:9px 12px;border:1px solid rgb(255 255 255/.22);font-family:var(--font-mono),monospace;font-size:13px}
.pg-co-ctrl .pg-link{align-self:flex-start;margin-top:auto;padding-top:28px;color:var(--pg-lilac)!important}
/* Identity and access: SSO and role-based access. Audit and data: audit logs, PII controls and GDPR. */
.pg-co-ctrl__list li,.pg-co-ctrl__chips li{transition:opacity .3s ease,color .3s ease,border-color .3s ease}
@media (hover:hover){
 .pg-co-docs:has(.pg-row:nth-child(2):hover,.pg-row:nth-child(3):hover) :is(.pg-co-ctrl__list,.pg-co-ctrl__chips) li{opacity:.32}
 .pg-co-docs:has(.pg-row:nth-child(2):hover) .pg-co-ctrl__list li:nth-child(-n+2),
 .pg-co-docs:has(.pg-row:nth-child(3):hover) .pg-co-ctrl__list li:nth-child(n+3),
 .pg-co-docs:has(.pg-row:nth-child(3):hover) .pg-co-ctrl__chips li:nth-child(3){opacity:1;color:#FFFFFF}
 .pg-co-docs:has(.pg-row:nth-child(3):hover) .pg-co-ctrl__chips li:nth-child(3){border-color:var(--pg-lilac)}
}

/* Explore pages (10 October 2026) ==================================================================
   Customer Stories, Demos & Tours, Guides & Insights, Research, Academy and Blog (build_pages.py,
   p_stories to p_blog and the ex_ helpers). Six sections or more per page, each in its own layout
   family, on the inner pages' type, purple accent, square corners and white, alt, dark and purple
   bands. Motion explains something (a tab changes, a sentence is read aloud, a record fills in) and
   stops under reduced motion. Every class here starts .pg-ex-. */

/* Links that leave the site point outward */
.pg-ex-ext::after{content:none}
.pg-ex-out{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease}
.pg-ex-ext:hover .pg-ex-out{transform:translate(2px,-2px)}

/* Customer Stories: the logo wall's heading, small, in sentence case */
.pg-ex-trust{margin:0 0 20px;font-size:15px;font-weight:400;line-height:1.4;color:var(--pg-muted)}

/* Quote band: the quote across the measure, then its context and evidence on one line */
.pg-ex-qband .pg-quote{max-width:24ch;font-size:clamp(30px,3.9vw,56px);line-height:1.1;letter-spacing:-.03em}
.pg-ex-qband__foot{display:grid;gap:32px 48px;margin-top:clamp(40px,5vw,72px);padding-top:32px;border-top:1px solid rgb(255 255 255/.14)}
@media (min-width:1024px){.pg-ex-qband__foot{grid-template-columns:minmax(0,5fr) minmax(0,3.5fr) minmax(0,3.5fr)}}
.pg-ex-qband__foot .pg-lead{margin:0;max-width:44ch}
.pg-ex-qband__foot .pg-link{margin-top:20px}
.pg-ex-fact{margin:0}
.pg-ex-fact dt{font-size:clamp(44px,4.4vw,64px);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.pg-ex-fact dt span{display:inline-block}
.pg-ex-fact dd{margin:14px 0 0;font-size:15px;line-height:1.5;color:var(--pg-dark-muted);max-width:30ch}

/* Ledger: linked rows, newest first; the whole row opens the announcement */
.pg-ex-ledger{margin:0;padding:0;list-style:none;border-top:1px solid var(--pg-ink)}
.pg-ex-ledger li+li{border-top:1px solid var(--pg-line)}
.pg-ex-ledger__row{display:grid;gap:6px 32px;padding-block:24px;text-decoration:none;color:inherit}
@media (min-width:900px){.pg-ex-ledger__row{grid-template-columns:minmax(0,3fr) minmax(0,1.6fr) minmax(0,5.4fr) 80px 20px;align-items:baseline;padding-block:32px}}
.pg-ex-ledger__name b{display:block;font-size:clamp(22px,2vw,28px);font-weight:400;line-height:1.15;letter-spacing:-.02em;transition:color .2s ease}
.pg-ex-ledger__name small{display:block;margin-top:6px;font-size:14px;color:var(--pg-muted)}
.pg-ex-ledger__field{font-family:var(--font-mono),monospace;font-size:12.5px;letter-spacing:.04em;color:var(--pg-purple)}
.pg-ex-ledger__text{font-size:16px;line-height:1.55;color:var(--pg-muted);max-width:54ch}
.pg-ex-ledger__date{font-family:var(--font-mono),monospace;font-size:13px;color:var(--pg-muted);font-variant-numeric:tabular-nums}
.pg-ex-ledger__go{color:var(--pg-purple)}
.pg-ex-ledger__go .pg-ex-out{width:18px;height:18px}
.pg-ex-ledger__row:hover .pg-ex-ledger__name b{color:var(--pg-purple)}
.pg-ex-ledger__row:hover .pg-ex-out{transform:translate(2px,-2px)}
@media (max-width:899px){.pg-ex-ledger__go{display:none}.pg-ex-ledger__field{order:-1}}

/* Strip: portrait photographs in one row, captions beneath; a swipeable row on phones and tablets */
.pg-ex-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,62%);gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
 margin-inline:calc(var(--pg-gut)*-1);padding-inline:var(--pg-gut);scroll-padding-inline:var(--pg-gut)}
.pg-ex-strip::-webkit-scrollbar{display:none}
@media (min-width:600px){.pg-ex-strip{grid-auto-columns:minmax(220px,38%)}}
@media (min-width:1024px){.pg-ex-strip{grid-auto-flow:row;grid-template-columns:repeat(6,minmax(0,1fr));overflow:visible;margin-inline:0;padding-inline:0}}
.pg-ex-strip__tile{display:flex;flex-direction:column;gap:6px;min-width:0;text-decoration:none;color:inherit;scroll-snap-align:start}
.pg-ex-strip__media{display:block;aspect-ratio:4/5;margin-bottom:12px;overflow:hidden;background:#0C0716}
.pg-ex-strip__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.pg-ex-strip__tile:hover img{transform:scale(1.04)}
.pg-ex-strip__name{font-weight:400;font-size:19px;line-height:1.2;letter-spacing:-.015em;transition:color .2s ease}
.pg-ex-strip__tile:hover .pg-ex-strip__name{color:var(--pg-purple)}
.pg-ex-strip__line{font-size:14.5px;line-height:1.45;color:var(--pg-muted);max-width:28ch}

/* Demos: the tours on the page, one per product */
.pg-ex-tours{display:grid;gap:1px;background:var(--pg-line);border:1px solid var(--pg-line)}
@media (min-width:1024px){.pg-ex-tours{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1280px){.pg-ex-tours{grid-template-columns:repeat(6,minmax(0,1fr))}}
.pg-ex-tours__item{position:relative;display:grid;grid-template-columns:116px minmax(0,1fr) 18px;align-items:center;gap:6px 16px;padding:18px 16px;background:#fff;text-decoration:none;color:inherit}
.pg-ex-tours__item::before{content:"";position:absolute;inset:-1px -1px auto;height:2px;background:var(--pg-purple);transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.pg-ex-tours__item:hover::before,.pg-ex-tours__item:focus-visible::before{transform:none}
.pg-ex-tours__logo{display:flex;align-items:center;height:32px}
.pg-ex-tours__logo img{height:calc(var(--h) * .85);width:auto;max-width:100%}
.pg-ex-tours__copy{display:grid;gap:4px}
.pg-ex-tours__copy b{font-weight:400;font-size:17px;line-height:1.25;letter-spacing:-.015em}
.pg-ex-tours__copy span{font-size:14px;line-height:1.45;color:var(--pg-muted)}
.pg-ex-down{width:18px;height:18px;fill:none;stroke:var(--pg-purple);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease}
.pg-ex-tours__item:hover .pg-ex-down{transform:translateY(3px)}
@media (min-width:1024px){
 .pg-ex-tours__item{grid-template-columns:minmax(0,1fr);grid-template-rows:32px 1fr auto;align-items:start;gap:28px;padding:26px 22px 22px}
 .pg-ex-tours__logo img{height:var(--h)}
 .pg-ex-tours__copy b{font-size:19px}
}

/* Demos: the model tabs. The chosen tab shares the panel's ground, so the two read as one */
.pg-ex-tabs{display:grid;gap:0}
@media (min-width:1024px){.pg-ex-tabs{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}}
.pg-ex-tabs:not(.is-ready) [role=tablist]{display:none}
.pg-ex-tabs [role=tablist]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start}
@media (min-width:1024px){.pg-ex-tabs [role=tablist]{grid-template-columns:minmax(0,1fr)}}
.pg-ex-tabs [role=tab]{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:18px 14px;border-top:1px solid var(--pg-line);transition:background-color .25s ease}
@media (min-width:1024px){.pg-ex-tabs [role=tab]{flex-direction:row;align-items:center;justify-content:space-between;padding:28px 24px 28px 28px}.pg-ex-tabs [role=tab]:last-child{border-bottom:1px solid var(--pg-line)}}
.pg-ex-tabs [role=tab] img{height:20px;width:auto;opacity:.55;transition:opacity .25s ease}
@media (min-width:1024px){.pg-ex-tabs [role=tab] img{height:26px}}
.pg-ex-tabs [role=tab] span{font-family:var(--font-mono),monospace;font-size:12px;letter-spacing:.04em;color:var(--pg-muted)}
.pg-ex-tabs [role=tab]:hover img{opacity:.85}
.pg-ex-tabs [role=tab][aria-selected=true]{background:var(--pg-alt);border-color:transparent}
.pg-ex-tabs [role=tab][aria-selected=true]+[role=tab]{border-top-color:transparent}
.pg-ex-tabs [role=tab][aria-selected=true] img{opacity:1}
.pg-ex-tabs [role=tab][aria-selected=true] span{color:var(--pg-purple)}
.pg-ex-tabs [role=tab]:focus-visible{outline:2px solid var(--pg-purple);outline-offset:-2px}
.pg-ex-tabs__panel{display:flex;flex-direction:column;min-height:440px;padding:clamp(28px,4vw,56px);background:var(--pg-alt)}
.pg-ex-tabs.is-ready .pg-ex-tabs__panel:not(.is-on){display:none}
.pg-ex-tabs:not(.is-ready) .pg-ex-tabs__panel+.pg-ex-tabs__panel{margin-top:8px}
.pg-ex-tabs__panel:focus-visible{outline:2px solid var(--pg-purple);outline-offset:-2px}
.pg-ex-tabs__mark{height:clamp(30px,3vw,40px);width:auto;align-self:flex-start}
.pg-ex-tabs__panel h3{margin:32px 0 0;font-size:clamp(28px,3vw,44px);line-height:1.08;font-weight:400;letter-spacing:-.03em;max-width:18ch}
.pg-ex-tabs__panel>p{margin:16px 0 0;font-size:17px;line-height:1.55;color:var(--pg-muted);max-width:54ch}
.pg-ex-tabs__facts{display:grid;gap:18px 32px;margin:auto 0 0;padding-top:40px}
@media (min-width:700px){.pg-ex-tabs__facts{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.pg-ex-tabs__facts div{padding-top:14px;border-top:1px solid rgb(9 9 10/.12)}
.pg-ex-tabs__facts dt{font-family:var(--font-mono),monospace;font-size:12px;letter-spacing:.04em;color:var(--pg-purple)}
.pg-ex-tabs__facts dd{margin:8px 0 0;font-size:17px;line-height:1.4}
.pg-ex-tabs__panel .pg-link{margin-top:28px}
@media (prefers-reduced-motion:no-preference){
 .pg-ex-tabs.is-ready .pg-ex-tabs__panel.is-on>*{animation:pg-ex-rise .55s cubic-bezier(.2,.8,.2,1) both}
 .pg-ex-tabs.is-ready .pg-ex-tabs__panel.is-on>:nth-child(2){animation-delay:.04s}
 .pg-ex-tabs.is-ready .pg-ex-tabs__panel.is-on>:nth-child(3){animation-delay:.08s}
 .pg-ex-tabs.is-ready .pg-ex-tabs__panel.is-on>:nth-child(n+4){animation-delay:.12s}
}
@keyframes pg-ex-rise{from{opacity:0;transform:translateY(10px)}}

/* Demos: two demonstrations side by side, each in its product's colour */
.pg-ex-duo{display:grid;gap:8px}
@media (min-width:1024px){.pg-ex-duo{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.pg-ex-duo__item{display:flex;flex-direction:column;min-width:0;background:#fff}
.pg-ex-duo__stage{display:flex;flex-direction:column;justify-content:center;min-height:clamp(260px,26vw,380px);padding:clamp(20px,3vw,40px)}
.pg-ex-duo__stage .bv{width:100%}
.pg-ex-duo__copy{display:flex;flex-direction:column;align-items:flex-start;gap:12px;flex:1;padding:28px;border-top:1px solid var(--pg-line)}
.pg-ex-duo__copy img{height:18px;width:auto;margin-bottom:6px}
.pg-ex-duo__copy h3{margin:0;font-size:24px;line-height:1.2;font-weight:400;letter-spacing:-.02em}
.pg-ex-duo__copy p{margin:0;font-size:15.5px;line-height:1.55;color:var(--pg-muted);max-width:52ch}
.pg-ex-duo__copy .pg-link{margin-top:auto;padding-top:8px}
.pg-ex-duo__item--voice{background:#F1ECFA}
/* Three demonstrations: Speech and Vision stacked on the left, Data Services beside them */
@media (min-width:1024px){
 .pg-ex-duo--three{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
 .pg-ex-duo--three>:nth-child(3){grid-column:2;grid-row:1/3}
 .pg-ex-duo--three>:nth-child(3) .pg-ex-duo__stage{flex:1}
 .pg-ex-duo--three>:nth-child(3) .pg-ex-duo__copy{flex:none}
}
.pg-ex-duo__stage--moment{align-items:center}
.pg-ex-duo__stage--moment .pg-moment{width:100%;max-width:440px}

.pg-ex-duo__item--voice .pg-ex-duo__copy{border-top-color:rgb(42 15 107/.12)}
.pg-ex-voice{gap:18px}
.pg-ex-voice__text{margin:0;font-family:var(--font-aeonik),"IBM Plex Sans Arabic","Noto Sans Arabic","Geeza Pro","Segoe UI",sans-serif;font-size:clamp(22px,2.2vw,30px);line-height:1.9;text-align:left;color:#1C0B4A}
.pg-ex-voice__text span{transition:color .2s ease,box-shadow .2s ease}
.pg-ex-voice__text.is-reading span{color:rgb(28 11 74/.3)}
.pg-ex-voice__text.is-reading span.is-read{color:#1C0B4A}
.pg-ex-voice__text.is-reading span.is-now{color:var(--pg-purple);box-shadow:inset 0 -2px 0 var(--pg-purple)}
.pg-ex-voice__en{margin:0;font-size:14px;line-height:1.5;color:rgb(42 15 107/.62);max-width:46ch}

/* Guides: two published guides as large cards */
.pg-ex-cards .pg-card__media{aspect-ratio:16/9}
.pg-ex-cards .pg-card h3{font-size:clamp(21px,1.8vw,26px);max-width:30ch}
.pg-ex-cards .pg-card .pg-link{margin-top:auto;padding-top:12px}

/* Guides: a series as its contents, in two columns, each part under its subject's icon */
.pg-ex-syl{margin:0;padding:0;list-style:none;display:grid;column-gap:clamp(32px,4vw,72px)}
@media (min-width:900px){.pg-ex-syl{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:repeat(5,auto);grid-auto-flow:column}}
.pg-ex-syl li{border-top:1px solid rgb(255 255 255/.14)}
.pg-ex-syl a{display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px;align-items:center;padding-block:20px;text-decoration:none;color:inherit}
.pg-ex-syl .pg-icon{margin:0}
.pg-ex-syl b{display:block;font-weight:400;font-size:18px;line-height:1.35;letter-spacing:-.01em;transition:color .2s ease}
.pg-ex-syl__meta{display:flex;gap:14px;margin-top:6px;font-family:var(--font-mono),monospace;font-size:12.5px;color:var(--pg-dark-muted);font-variant-numeric:tabular-nums}
.pg-ex-syl__meta time{color:rgb(245 245 247/.5)}
.pg-ex-syl a:hover b{color:var(--pg-lilac)}

/* Research: a dated record. The heading stays in view; the rule fills as the entries pass */
.pg-ex-time{display:grid;gap:40px}
@media (min-width:1024px){.pg-ex-time{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px}.pg-ex-time__head{position:sticky;top:calc(var(--pg-hdr) + var(--pg-ann) + 48px);align-self:start}}
.pg-ex-time__head .pg-lead{max-width:40ch}
.pg-ex-time__list{position:relative;margin:0;padding:0;padding-inline-start:36px;list-style:none}
.pg-ex-time__list::before,.pg-ex-time__list::after{content:"";position:absolute;inset-inline-start:5px;top:10px;bottom:10px;width:1px;background:var(--pg-line)}
.pg-ex-time__list::after{background:var(--pg-purple);transform-origin:top}
.pg-ex-time__list li{position:relative;padding-bottom:44px}
.pg-ex-time__list li:last-child{padding-bottom:0}
.pg-ex-time__list li::before{content:"";position:absolute;inset-inline-start:-36px;top:5px;z-index:1;width:11px;height:11px;background:#fff;box-shadow:inset 0 0 0 1px var(--pg-purple);transition:background-color .4s ease .2s}
.pg-ex-time__list li.is-in::before,.pg-ex-time__list li:last-child::before{background:var(--pg-purple)}
.pg-ex-time time{font-family:var(--font-mono),monospace;font-size:13px;letter-spacing:.02em;color:var(--pg-purple);font-variant-numeric:tabular-nums}
.pg-ex-time h3{margin:8px 0 0;font-size:clamp(20px,1.8vw,24px);line-height:1.25;font-weight:400;letter-spacing:-.015em}
.pg-ex-time li p{margin:8px 0 0;font-size:15.5px;line-height:1.55;color:var(--pg-muted);max-width:56ch}
.pg-ex-time .pg-link{margin-top:12px}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
 .pg-ex-time__list::after{animation:pg-ex-fill linear both;animation-timeline:view();animation-range:entry 30% cover 70%}
}}
@keyframes pg-ex-fill{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* Research: one figure as the section's visual */
.pg-ex-big{display:grid;gap:32px 64px;align-items:end}
@media (min-width:1024px){.pg-ex-big{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}}
.pg-ex-big__fig{margin:0;font-size:clamp(120px,19vw,288px);line-height:.8;font-weight:400;letter-spacing:-.06em;font-variant-numeric:tabular-nums;white-space:nowrap}
.pg-ex-big__fig span{display:inline-block}
.pg-ex-big__fig small{font-size:.38em;letter-spacing:-.03em;color:var(--pg-lilac)}
.pg-ex-big__label{margin:24px 0 0;font-size:15px;line-height:1.5;color:var(--pg-dark-muted);max-width:34ch}
.pg-ex-big__copy .pg-lead{max-width:46ch}

/* Research: a homepage micrographic in its own palette */
.pg-ex-panel{min-height:0}
.pg-ex-panel .bv-words__stats{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 24px;margin-bottom:24px!important}
.pg-ex-panel .bv-words__stat{font-size:clamp(34px,3.2vw,48px)}

/* Guides: insight tiles that leave the site point outward */
.pg-ex-insights a[href^="http"] .pg-link::after{content:"\2197"}

/* Academy: one dated announcement */
.pg-ex-news{display:grid;gap:24px 64px;align-items:start}
@media (min-width:1024px){.pg-ex-news{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}}
.pg-ex-news__date{margin:0;font-size:clamp(64px,7vw,112px);line-height:.9;letter-spacing:-.05em;color:var(--pg-lilac);white-space:nowrap}
.pg-ex-news__date small{display:block;margin-top:14px;font-size:16px;letter-spacing:0;color:rgb(255 255 255/.78)}
.pg-ex-news .pg-h2{max-width:20ch;color:#fff}

/* Blog: a short reading order */
.pg-ex-path{margin:0;padding:0;list-style:none;display:grid;gap:8px;counter-reset:pgx}
@media (min-width:900px){.pg-ex-path{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.pg-ex-path li{counter-increment:pgx;display:flex}
.pg-ex-path__item{position:relative;flex:1;display:grid;grid-template-columns:56px minmax(0,1fr) 20px;gap:8px 16px;align-content:start;padding:28px;background:#fff;text-decoration:none;color:inherit}
.pg-ex-path__item::before{content:counter(pgx);grid-row:1/4;font-size:44px;line-height:.85;letter-spacing:-.04em;color:var(--pg-purple)}
.pg-ex-path__topic{grid-column:2;font-family:var(--font-mono),monospace;font-size:12px;letter-spacing:.04em;color:var(--pg-purple)}
.pg-ex-path__item h3{grid-column:2;margin:0;font-size:clamp(19px,1.6vw,22px);line-height:1.28;font-weight:400;letter-spacing:-.015em;transition:color .2s ease}
.pg-ex-path__item p{grid-column:2;margin:0;font-size:15px;line-height:1.5;color:var(--pg-muted)}
.pg-ex-path__go{grid-column:3;grid-row:1;color:var(--pg-purple)}
.pg-ex-path__item:hover h3{color:var(--pg-purple)}
.pg-ex-path__item:hover .pg-ex-out{transform:translate(2px,-2px)}
@media (max-width:599px){.pg-ex-path__item{grid-template-columns:36px minmax(0,1fr) 16px;padding:22px 20px}.pg-ex-path__item::before{font-size:32px}}

/* Blog: the sign-up field and its button on one line */
.pg-ex-signup .pg-form{width:100%}
.pg-ex-signup__row{display:flex;gap:8px}
.pg-ex-signup__row input{flex:1;min-width:0;height:44px}
.pg-ex-signup__row .pg-cta{flex:none;justify-content:center}
@media (max-width:479px){.pg-ex-signup__row{flex-direction:column}}
/* Research: in the page header's half column the leaderboard stacks its score above the chart */
.pg-frame .pg-ex-panel .bv-bench{grid-template-columns:minmax(0,1fr);gap:36px;align-items:start}

/* Academy: the six tracks as an index beside one photograph (redesigned 10 October 2026). The list
   is set large on hairlines; the track on show is in ink with a purple number, the others recede, and
   a hairline fills under it while the photographs advance on their own. Phones: a small photograph
   in each row instead of the stage. */
.pg-ex-tracks{display:grid;gap:40px}
@media (min-width:1024px){.pg-ex-tracks{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(56px,6vw,104px);align-items:stretch}}
.pg-ex-tracks__list{list-style:none;margin:0;padding:0;border-top:1px solid rgb(9 9 10/.12)}
.pg-ex-tracks__list li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:baseline;gap:4px 16px;padding:22px 0;border-bottom:1px solid rgb(9 9 10/.12)}
.pg-ex-tracks__n{grid-row:1/3;font-family:var(--font-mono),monospace;font-size:12.5px;letter-spacing:.04em;color:rgb(9 9 10/.4);font-variant-numeric:tabular-nums;transition:color .35s ease}
.pg-ex-tracks__name{grid-column:2;font-size:clamp(24px,2.3vw,34px);line-height:1.12;letter-spacing:-.025em;color:var(--pg-ink);transition:color .35s ease}
.pg-ex-tracks__task{grid-column:2;font-size:15px;line-height:1.5;color:var(--pg-muted)}
.pg-ex-tracks .pg-ex-tracks__thumb{display:none}
.pg-ex-tracks__stage{position:relative;min-height:440px;overflow:hidden;background:#0C0716}
.pg-ex-tracks__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.045);transition:opacity .8s ease,transform 1.4s cubic-bezier(.2,.8,.2,1)}
.pg-ex-tracks__stage img.is-on{opacity:1;transform:none}
.pg-ex-tracks__list li::after{content:"";position:absolute;right:0;left:0;bottom:-1px;height:1px;background:var(--pg-purple);transform:scaleX(0);transform-origin:right;pointer-events:none}
@media (min-width:1024px){
 .pg-ex-tracks.is-ready .pg-ex-tracks__list li{cursor:default}
 .pg-ex-tracks.is-ready .pg-ex-tracks__name{color:rgb(9 9 10/.3)}
 .pg-ex-tracks.is-ready li.is-on .pg-ex-tracks__name{color:var(--pg-ink)}
 .pg-ex-tracks.is-ready li.is-on .pg-ex-tracks__n{color:var(--pg-purple)}
 .pg-ex-tracks.is-ready li.is-on::after{transform:none}
 .pg-ex-tracks.is-auto li.is-on::after{animation:pg-ex-timer var(--pg-ex-every,4.5s) linear both}
}
@keyframes pg-ex-timer{from{transform:scaleX(0)}to{transform:none}}
@media (max-width:1023px){
 .pg-ex-tracks__stage{display:none}
 .pg-ex-tracks__list li{grid-template-columns:36px minmax(0,1fr) 72px;align-items:center;padding:16px 0}
 .pg-ex-tracks__n{grid-row:1/3;align-self:start;padding-top:6px}
 .pg-ex-tracks .pg-ex-tracks__thumb{display:block;grid-column:3;grid-row:1/3;width:72px;height:72px;object-fit:cover}
 .pg-ex-tracks__name{font-size:22px}
}
@media (prefers-reduced-motion:reduce){.pg-ex-tracks__stage img{transition:none;transform:none}.pg-ex-tracks__list li::after{animation:none!important}}

/* Research: what we measure for, as one footnoted sentence (redesigned 10 October 2026). The terms are
   in ink on a grey sentence; their underlines draw in order as it comes into view, and pointing at a
   term or its note lights the other. */
.pg-ex-fn__statement{margin:0;max-width:22ch;font-size:clamp(34px,4.8vw,72px);line-height:1.08;font-weight:400;letter-spacing:-.035em;color:rgb(9 9 10/.34);text-wrap:balance}
.pg-ex-fn__term{color:var(--pg-ink);background:linear-gradient(var(--pg-purple),var(--pg-purple)) 100% 94%/100% 3px no-repeat;transition:color .3s ease}
.pg-ex-fn__term sup{position:relative;top:-.15em;margin-right:.06em;font-family:var(--font-mono),monospace;font-size:.26em;letter-spacing:0;color:var(--pg-purple);vertical-align:super}
.pg-ex-fn__notes{list-style:none;display:grid;gap:32px 48px;margin:clamp(56px,6vw,104px) 0 0;padding:0}
@media (min-width:900px){.pg-ex-fn__notes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pg-ex-fn__notes li{padding-top:20px;border-top:1px solid rgb(9 9 10/.14);transition:border-color .3s ease}
.pg-ex-fn__n{font-family:var(--font-mono),monospace;font-size:12.5px;color:var(--pg-purple)}
.pg-ex-fn__notes b{display:block;margin-top:14px;font-size:21px;line-height:1.25;font-weight:400;letter-spacing:-.015em}
.pg-ex-fn__notes p{margin:8px 0 0;max-width:38ch;font-size:15.5px;line-height:1.55;color:var(--pg-muted)}
.pg-ex-fn:has(.pg-ex-fn__notes li[data-n="1"]:hover) .pg-ex-fn__term[data-n="1"],
.pg-ex-fn:has(.pg-ex-fn__notes li[data-n="2"]:hover) .pg-ex-fn__term[data-n="2"],
.pg-ex-fn:has(.pg-ex-fn__notes li[data-n="3"]:hover) .pg-ex-fn__term[data-n="3"]{color:var(--pg-purple)}
.pg-ex-fn:has(.pg-ex-fn__term[data-n="1"]:hover) .pg-ex-fn__notes li[data-n="1"],
.pg-ex-fn:has(.pg-ex-fn__term[data-n="2"]:hover) .pg-ex-fn__notes li[data-n="2"],
.pg-ex-fn:has(.pg-ex-fn__term[data-n="3"]:hover) .pg-ex-fn__notes li[data-n="3"]{border-top-color:var(--pg-purple)}
@media (prefers-reduced-motion:no-preference){
 .pg-js .pg-ex-fn__term{background-size:0 3px;transition:color .3s ease,background-size .9s cubic-bezier(.2,.8,.2,1)}
 .pg-js .pg-ex-fn__statement.is-in .pg-ex-fn__term{background-size:100% 3px}
 .pg-js .pg-ex-fn__term[data-n="1"]{transition-delay:0s,.25s}
 .pg-js .pg-ex-fn__term[data-n="2"]{transition-delay:0s,.5s}
 .pg-js .pg-ex-fn__term[data-n="3"]{transition-delay:0s,.75s}
}

/* Icons on my sections (10 October 2026): the shared icon tiles (pages.css "Icons"), set into these
   layouts. On dark sections the tiles take the dark tint; the certificate, the step that matters most,
   is filled. */
.pg-ex-ondark .pg-icon{background:rgb(255 255 255/.08);color:#FFB4E9;box-shadow:inset 0 0 0 1px rgb(255 255 255/.16)}
.pg-ex-ondark .pg-icard:hover .pg-icon,.pg-ex-ondark :is(.pg-steps:not(.is-anim) .pg-step.is-key,.pg-step.is-on) .pg-icon{background:#FFB4E9;color:#1A1730;box-shadow:none}

/* Customer Stories: the Tarjama results as a hairline grid of figures, two to a row */
.pg-ex-figs{display:grid;gap:1px;background:rgb(9 9 10/.1);border:1px solid rgb(9 9 10/.1)}
@media (min-width:900px){.pg-ex-figs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.pg-ex-fig{display:grid;grid-template-columns:44px auto minmax(0,1fr);align-items:center;gap:20px 28px;padding:clamp(24px,2.6vw,36px);background:var(--pg-alt);transition:background-color .35s ease}
.pg-ex-fig:hover{background:#fff}
.pg-ex-fig .pg-icon{margin:0}
.pg-ex-fig__v{font-size:clamp(44px,4.4vw,64px);line-height:1;font-weight:400;letter-spacing:-.04em;font-variant-numeric:tabular-nums;min-width:2.35em}
.pg-ex-fig__who{margin:0;font-size:16px;font-weight:500;letter-spacing:-.01em}
.pg-ex-fig__t{margin:4px 0 0;font-size:14.5px;line-height:1.5;color:var(--pg-muted);max-width:40ch}
@media (max-width:599px){.pg-ex-fig{grid-template-columns:44px minmax(0,1fr);gap:16px 18px}.pg-ex-fig>div{grid-column:1/-1}}

/* Short icon lists: a benchmark's task areas in a row, an email's contents stacked */
.pg-ex-chips{display:flex;flex-wrap:wrap;gap:12px 32px;margin:0 0 clamp(32px,3.6vw,48px);padding:0;list-style:none}
.pg-ex-chips li{display:flex;align-items:center;gap:14px;font-size:17px;letter-spacing:-.01em}
.pg-ex-chips .pg-icon{margin:0}
.pg-ex-chips--stack{display:grid;gap:14px;margin:32px 0 0}
.pg-ex-chips--stack li{font-size:16px;color:var(--pg-muted)}

/* Research: the results table, each model named by its logo */
.pg-ex-scores__logo{height:24px;width:auto}
@media (max-width:639px){.pg-ex-scores td:first-child{padding-bottom:6px}}

/* Academy: the vibe coding band's icon sits above its date */
.pg-ex-news .pg-icon{margin-bottom:28px}

/* Blog: the header's visual is the featured essay's cover, and opens it */
.pg-ex-cover{display:block}
.pg-ex-cover img{transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.pg-ex-cover:hover img{transform:scale(1.02)}
.pg-ex-cover:focus-visible{outline:2px solid var(--pg-purple);outline-offset:2px}

/* Blog: the featured essay as text, with its byline (its cover is in the header) */
.pg-ex-essay{display:block;max-width:1100px;text-decoration:none;color:inherit}
.pg-ex-essay h2{margin:18px 0 0;max-width:20ch;font-size:clamp(34px,4vw,60px);line-height:1.06;font-weight:400;letter-spacing:-.03em;text-wrap:balance;transition:color .2s ease}
.pg-ex-essay:hover h2{color:var(--pg-purple)}
.pg-ex-essay__lead{margin:22px 0 0;max-width:60ch;font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--pg-muted)}
.pg-ex-essay__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;margin-top:36px;padding-top:24px;border-top:1px solid var(--pg-line)}
.pg-ex-essay__by{display:flex;align-items:center;gap:14px;font-size:14px;line-height:1.45;color:var(--pg-muted)}
.pg-ex-essay__by img{width:52px;height:52px;object-fit:cover}
.pg-ex-essay__by b{display:block;font-weight:500;color:var(--pg-ink)}
.pg-ex-essay .pg-link{margin-top:0}
/* End of Explore pages */

/* Industries pages (10 October 2026) */
/* Government, Banking, Energy, Telecommunications, Healthcare and Legal (build_pages.py, p_industry and
   the ind_ helpers). Seven sections a page, each in its own layout family, on the inner pages' type,
   purple accent, square corners and white, alt, dark and purple bands. Motion shows a direction (the
   route's signal), the reader's place (the adoption step in view), a comparison (the scores) or a change
   of state (a chosen application), and stops under reduced motion. Every class here starts .pg-ind-.
   Icons are the shared .pg-icon / .pg-ico (the "Icons" block above); each names its item. */

/* The work today: the sector's second photograph beside the problem and what slows it */
.pg-ind-challenge{display:grid;gap:clamp(32px,4vw,72px)}
@media (min-width:1024px){.pg-ind-challenge{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:stretch}}
.pg-ind-challenge__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0C0716}
@media (min-width:1024px){.pg-ind-challenge__media{aspect-ratio:auto;min-height:460px}}
/* Phones and tablets: the words first, so the header's photograph and this one are not back to back */
@media (max-width:1023px){.pg-ind-challenge__media{order:2}}
.pg-ind-challenge__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pg-ind-challenge__copy{display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.pg-ind-challenge .pg-h2{max-width:20ch}
.pg-ind-frictions{margin:0;padding:0;list-style:none;border-top:1px solid var(--pg-ink)}
.pg-ind-frictions li{display:flex;align-items:flex-start;gap:16px;padding:20px 0;font-size:clamp(20px,1.8vw,26px);line-height:1.25;letter-spacing:-.018em}
.pg-ind-frictions .pg-ico{flex:none;margin-top:.18em;color:var(--pg-purple)}
.pg-ind-frictions li+li{border-top:1px solid #D9D6E2}

/* Applications: tabs beside the chosen one. Its review step is the purple cell: a person signs off */
.pg-ind-apps{display:grid}
@media (min-width:1024px){.pg-ind-apps{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}}
.pg-ind-apps:not(.is-ready) .pg-ind-apps__list{display:none}
.pg-ind-apps__list{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin-inline:calc(var(--pg-gut)*-1);padding-inline:var(--pg-gut);border-bottom:1px solid var(--pg-line)}
.pg-ind-apps__list::-webkit-scrollbar{display:none}
.pg-ind-apps [role=tab]{all:unset;box-sizing:border-box;cursor:pointer;flex:none;display:flex;align-items:center;gap:10px;padding:16px 18px 14px;margin-bottom:-1px;border-bottom:2px solid transparent;transition:background-color .25s ease,border-color .25s ease}
.pg-ind-apps [role=tab] .pg-ico{flex:none;color:var(--pg-muted);transition:color .2s ease}
.pg-ind-apps__tab{display:flex;flex-direction:column;gap:6px;min-width:0}
.pg-ind-apps [role=tab] b{font-weight:400;font-size:16px;line-height:1.25;letter-spacing:-.012em;white-space:nowrap;transition:color .2s ease}
.pg-ind-apps [role=tab] small{display:none;font-size:14px;line-height:1.4;color:var(--pg-muted)}
.pg-ind-apps [role=tab]:hover b,.pg-ind-apps [role=tab]:hover .pg-ico,.pg-ind-apps [role=tab][aria-selected=true] .pg-ico{color:var(--pg-purple)}
.pg-ind-apps [role=tab][aria-selected=true]{background:var(--pg-alt);border-color:var(--pg-purple)}
.pg-ind-apps [role=tab]:focus-visible{outline:2px solid var(--pg-purple);outline-offset:-2px}
@media (min-width:1024px){
 .pg-ind-apps__list{flex-direction:column;overflow:visible;margin:0;padding:0;border-bottom:0}
 .pg-ind-apps [role=tab]{align-items:flex-start;gap:16px;padding:24px 24px 24px 28px;margin:0;border:0;border-top:1px solid var(--pg-line);border-inline-start:2px solid transparent}
 .pg-ind-apps [role=tab] .pg-ico{margin-top:3px}
 .pg-ind-apps [role=tab]:last-child{border-bottom:1px solid var(--pg-line)}
 .pg-ind-apps [role=tab][aria-selected=true]{border-top-color:transparent;border-inline-start-color:var(--pg-purple)}
 .pg-ind-apps [role=tab][aria-selected=true]+[role=tab]{border-top-color:transparent}
 .pg-ind-apps [role=tab][aria-selected=true]:last-child{border-bottom-color:transparent}
 .pg-ind-apps [role=tab] b{font-size:21px;white-space:normal}
 .pg-ind-apps [role=tab] small{display:block}
}
.pg-ind-apps__panel{display:flex;flex-direction:column;padding:clamp(24px,4vw,56px);background:var(--pg-alt)}
.pg-ind-apps__panel[hidden]{display:none}
.pg-ind-apps:not(.is-ready) .pg-ind-apps__panel+.pg-ind-apps__panel{margin-top:8px}
.pg-ind-apps__panel:focus-visible{outline:2px solid var(--pg-purple);outline-offset:-2px}
@media (min-width:1024px){.pg-ind-apps__panel{min-height:540px}}
.pg-ind-apps__panel>.pg-icon{margin-bottom:22px}
.pg-ind-apps__team{margin:0;font-size:14.5px;line-height:1.4;color:var(--pg-purple)}
.pg-ind-apps__panel h3{margin:14px 0 0;font-size:clamp(28px,3vw,44px);line-height:1.08;font-weight:400;letter-spacing:-.03em;max-width:20ch;text-wrap:balance}
.pg-ind-apps__text{margin:16px 0 0;font-size:17px;line-height:1.55;color:var(--pg-muted);max-width:56ch}
.pg-ind-apps__chain{display:grid;gap:8px;margin:auto 0 0;padding-top:40px}
@media (min-width:700px){.pg-ind-apps__chain{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.pg-ind-apps__chain div{padding:18px 20px 22px;background:#fff}
.pg-ind-apps__chain dt{display:flex;align-items:center;gap:8px;font-family:var(--font-mono),monospace;font-size:12px;letter-spacing:.04em;color:var(--pg-purple)}
.pg-ind-apps__chain dt .pg-ico{flex:none}
.pg-ind-apps__chain dd{margin:10px 0 0;font-size:16px;line-height:1.45}
body.pg .pg-ind-apps__chain .pg-ind-apps__review{background:var(--pg-purple);color:#fff}
.pg-ind-apps__chain .pg-ind-apps__review dt{color:var(--pg-lilac)}
@media (prefers-reduced-motion:no-preference){
 .pg-ind-apps.is-ready .pg-ind-apps__panel:not([hidden])>*{animation:pg-ind-rise .55s cubic-bezier(.2,.8,.2,1) both}
 .pg-ind-apps.is-ready .pg-ind-apps__panel:not([hidden])>:nth-child(2){animation-delay:.04s}
 .pg-ind-apps.is-ready .pg-ind-apps__panel:not([hidden])>:nth-child(3){animation-delay:.08s}
 .pg-ind-apps.is-ready .pg-ind-apps__panel:not([hidden])>:nth-child(4){animation-delay:.12s}
 .pg-ind-apps.is-ready .pg-ind-apps__panel:not([hidden])>:nth-child(5){animation-delay:.16s}
}
@keyframes pg-ind-rise{from{opacity:0;transform:translateY(10px)}}

/* Owner chips: who does the step; the person who decides wears pink */
.pg-ind-owner{display:inline-block;align-self:flex-start;margin:0;padding:5px 9px;background:rgb(255 255 255/.1);font-family:var(--font-mono),monospace;font-size:12.5px;line-height:1.3;letter-spacing:.02em;color:#F5F5F7;white-space:nowrap}

/* Scenario (dark): a route. Each step with an owner is a node on one line, the last one the person who
   decides; the sources are chips whose lines merge into the first node. Phones run it down the page. */
.pg-ind-route{display:grid}
.pg-ind-route__in{display:grid;gap:8px}
.pg-ind-route--in .pg-ind-route__in{margin-bottom:32px}
.pg-ind-route__doc{display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 16px;background:rgb(255 255 255/.02);box-shadow:inset 0 0 0 1px rgb(255 255 255/.2)}
.pg-ind-route__doc .pg-ico{flex:none;color:var(--pg-lilac)}
.pg-ind-route__doc span{display:grid;gap:2px;min-width:0}
.pg-ind-route__doc b{font-weight:400;font-size:16px;line-height:1.25}
.pg-ind-route__doc small{font-size:13.5px;line-height:1.35;color:var(--pg-dark-muted)}
.pg-ind-route mark{background:none;color:var(--pg-lilac);box-shadow:inset 0 -2px 0 var(--pg-lilac)}
.pg-ind-route__merge,.pg-ind-route__rail{display:none}
/* The lines' drawings are at 1:1 or stretched only along their length, so strokes keep their width and the
   signal's dash (in pathLength units) stays one segment. */
.pg-ind-route__base{fill:none;stroke:rgb(255 255 255/.24);stroke-width:1;transition:stroke .3s ease}
.pg-ind-route__signal{fill:none;stroke:var(--pg-lilac);stroke-width:2;opacity:0}
.pg-ind-route__track{position:relative}
.pg-ind-route__stages{position:relative;display:grid;margin:0;padding:0;list-style:none}
.pg-ind-route__stages::before{content:"";position:absolute;right:21.5px;top:22px;bottom:48px;width:1px;background:rgb(255 255 255/.24)}  /* phones: the line down the nodes */
.pg-ind-route--in .pg-ind-route__track::before{content:"";position:absolute;right:21.5px;top:-32px;height:32px;width:1px;background:rgb(255 255 255/.24)}  /* phones: from the sources to the first node */
.pg-ind-route__stage{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:0 68px 36px 0}
.pg-ind-route__stage:last-child{padding-bottom:0}
body.pg .pg-ind-route__stage>.pg-icon{position:absolute;right:0;top:0;margin:0;background:#1F1D25}  /* opaque, so the line runs behind the node */
.pg-ind-route__stage h3{margin:10px 0 0;font-size:20px;line-height:1.25;font-weight:400;letter-spacing:-.012em}
.pg-ind-route__stage>p:not(.pg-ind-owner){margin:6px 0 16px;max-width:30ch;font-size:15px;line-height:1.5;color:var(--pg-dark-muted)}
body.pg .pg-ind-route__stage.is-key>.pg-icon{background:var(--pg-lilac);color:var(--pg-ink);box-shadow:none}
.pg-ind-route__stage.is-key>.pg-icon::after{content:"";position:absolute;inset:-7px;box-shadow:0 0 0 1px var(--pg-lilac);opacity:0;pointer-events:none}
.pg-ind-route__stage.is-key .pg-ind-owner,.pg-ind-map__seg .pg-ind-owner{background:var(--pg-lilac);color:var(--pg-ink)}
@media (min-width:1024px){
 .pg-ind-route--in{grid-template-columns:minmax(0,4fr) 80px minmax(0,8fr);align-items:start}
 .pg-ind-route--in .pg-ind-route__in{margin:0}
 .pg-ind-route__merge{display:block;overflow:visible}
 .pg-ind-route__rail{display:block;position:absolute;right:22px;top:21px;width:calc(100% / var(--n) * (var(--n) - 1));height:2px;overflow:visible}
 .pg-ind-route__stages{grid-template-columns:repeat(var(--n),minmax(0,1fr))}
 .pg-ind-route__stages::before,.pg-ind-route--in .pg-ind-route__track::before{display:none}
 .pg-ind-route__stage{padding:0 0 0 32px}
 body.pg .pg-ind-route__stage>.pg-icon{position:relative}
 .pg-ind-route__stage h3{margin-top:24px}
}

/* Banking's source map: the sources, the brief they support, and a line from each source to the part
   that rests on it. Pointing at a source, or focusing it, lights its line and its part. */
.pg-ind-map{display:grid}
.pg-ind-map__sources{display:none;margin:0;padding:0;list-style:none}
.pg-ind-map__links{display:none}
.pg-ind-map__src{display:flex;align-items:center;gap:16px;height:88px;padding:0 20px;box-shadow:inset 0 0 0 1px rgb(255 255 255/.2);transition:box-shadow .3s ease,background-color .3s ease}
.pg-ind-map__src .pg-icon{margin:0}
.pg-ind-map__src span{display:grid;gap:4px;min-width:0}
.pg-ind-map__src b{font-weight:400;font-size:19px;line-height:1.2}
.pg-ind-map__src small{font-size:14px;line-height:1.35;color:var(--pg-dark-muted)}
.pg-ind-map__src:focus-visible{outline:2px solid var(--pg-lilac);outline-offset:2px}
.pg-ind-map__brief{padding:20px;background:#F4F2F9;color:var(--pg-ink)}
.pg-ind-map__title{box-sizing:border-box;display:flex;align-items:center;gap:10px;height:48px;margin:0 0 24px;padding:0 4px 12px;border-bottom:1px solid rgb(9 9 10/.1);font-size:15px;color:var(--pg-muted)}
.pg-ind-map__title .pg-ico{flex:none;color:var(--pg-purple)}
.pg-ind-map__brief ol{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.pg-ind-map__seg{box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 16px;min-height:64px;padding:12px 19px 12px 16px;background:#fff;box-shadow:inset -3px 0 0 rgb(63 25 147/.25);transition:box-shadow .3s ease,background-color .3s ease}
.pg-ind-map__to{font-size:18px;line-height:1.3;letter-spacing:-.01em}
.pg-ind-map__from{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:13.5px;line-height:1.35;color:var(--pg-muted)}
.pg-ind-map__from .pg-ico{flex:none;color:var(--pg-purple)}
.pg-ind-map__seg .pg-ind-owner{grid-column:2;grid-row:1;align-self:center}
@media (min-width:1024px){
 .pg-ind-map{grid-template-columns:minmax(0,5fr) 120px minmax(0,6fr);align-items:start}
 .pg-ind-map__sources{display:grid;gap:12px}
 .pg-ind-map__links{display:block;overflow:visible}
 .pg-ind-map__seg{height:64px}
 .pg-ind-map__from{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}  /* the lines say it; kept for screen readers */
 .pg-ind-map:has(.pg-ind-map__src:hover,.pg-ind-map__src:focus-visible) .pg-ind-route__base{stroke:rgb(255 255 255/.12)}
 .pg-ind-map:has([data-k="0"]:hover,[data-k="0"]:focus-visible) .pg-ind-map__src[data-k="0"],
 .pg-ind-map:has([data-k="1"]:hover,[data-k="1"]:focus-visible) .pg-ind-map__src[data-k="1"],
 .pg-ind-map:has([data-k="2"]:hover,[data-k="2"]:focus-visible) .pg-ind-map__src[data-k="2"]{background:rgb(255 180 233/.06);box-shadow:inset 0 0 0 1px var(--pg-lilac)}
 .pg-ind-map:has([data-k="0"]:hover,[data-k="0"]:focus-visible) .pg-ind-map__seg[data-k="0"],
 .pg-ind-map:has([data-k="1"]:hover,[data-k="1"]:focus-visible) .pg-ind-map__seg[data-k="1"],
 .pg-ind-map:has([data-k="2"]:hover,[data-k="2"]:focus-visible) .pg-ind-map__seg[data-k="2"]{background:#EFE8FB;box-shadow:inset -3px 0 0 var(--pg-purple)}
 .pg-ind-map:has([data-k="0"]:hover,[data-k="0"]:focus-visible) .pg-ind-route__base[data-k="0"],
 .pg-ind-map:has([data-k="1"]:hover,[data-k="1"]:focus-visible) .pg-ind-route__base[data-k="1"],
 .pg-ind-map:has([data-k="2"]:hover,[data-k="2"]:focus-visible) .pg-ind-route__base[data-k="2"]{stroke:var(--pg-lilac)}
}
.pg-ind-handoff{margin:clamp(36px,4vw,56px) 0 0;padding-inline-start:20px;border-inline-start:2px solid var(--pg-lilac);max-width:64ch;font-size:16px;line-height:1.55;color:#F5F5F7}

/* Adoption: a widening scope. Three nested squares share the corner where the work starts: one service
   (purple), a tested group (lavender), the departments beyond (outline); their dots stand for teams.
   The step crossing the middle of the screen lights its square (pages.js). */
.pg-ind-scope{display:grid;gap:40px}
.pg-ind-scope>.pg-head{margin-bottom:0}
.pg-ind-scope__stage{display:grid;gap:24px;align-content:start}
.pg-ind-scope__canvas{position:relative;width:100%;max-width:520px;aspect-ratio:1}
.pg-ind-scope__ring{position:absolute;right:0;bottom:0;display:flex;justify-content:flex-end;align-items:flex-start;padding:12px;transform-origin:100% 100%;transition:box-shadow .45s ease,transform .7s cubic-bezier(.34,1.56,.64,1)}
.pg-ind-scope__ring--2{width:100%;height:100%;background-color:#FAF9FD;background-image:radial-gradient(rgb(63 25 147/.2) 1.4px,transparent 1.7px);background-size:24px 24px;box-shadow:inset 0 0 0 1px rgb(63 25 147/.22)}
.pg-ind-scope__ring--1{width:66%;height:66%;background-color:#E6E1F1;background-image:radial-gradient(rgb(63 25 147/.34) 1.4px,transparent 1.7px);background-size:24px 24px;box-shadow:inset 0 0 0 1px rgb(63 25 147/.2)}
.pg-ind-scope__ring--0{width:34%;height:34%;background:var(--pg-purple)}
.pg-ind-scope__mark{display:grid;place-items:center;width:38px;height:38px;background:#fff;color:var(--pg-purple);box-shadow:inset 0 0 0 1px rgb(63 25 147/.16);transition:background-color .35s ease,color .35s ease,box-shadow .35s ease}
.pg-ind-scope__ring--0 .pg-ind-scope__mark{background:rgb(255 255 255/.12);color:#fff;box-shadow:inset 0 0 0 1px rgb(255 255 255/.28)}
/* What each square holds, in the canvas's own proportions (the squares are 34%, 66% and 100% of it, from
   the bottom left): the outer band above the tested group holds more teams, the band above the first
   workflow holds the tested group, and the inner square holds one workflow. By default everything shows
   finished (phones, no JavaScript); on desktop the scopes not reached yet wait (below). */
.pg-ind-scope__in{position:absolute;right:12px;display:flex;flex-direction:column;gap:10px;min-width:0}
.pg-ind-scope__in--2{top:12px;width:calc(100% - 74px);height:calc(34% - 24px)}
.pg-ind-scope__in--1{top:calc(34% + 12px);width:calc(66% - 74px);height:calc(32% - 24px)}
.pg-ind-scope__in--0{top:calc(66% + 12px);width:calc(34% - 24px);height:calc(34% - 24px);justify-content:space-between}
.pg-ind-scope__label{font-family:var(--font-mono),monospace;font-size:11px;line-height:1.2;letter-spacing:.04em;color:var(--pg-purple);white-space:nowrap}
.pg-ind-scope__in--0 .pg-ind-scope__label{max-width:calc(100% - 46px);white-space:normal;color:rgb(255 255 255/.82)}  /* wraps beside the corner mark on small squares */
.pg-ind-scope__teams{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}
.pg-ind-scope__team{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;background:#fff;box-shadow:inset 0 0 0 1px rgb(63 25 147/.16);font-size:12px;line-height:1.3;color:var(--pg-ink)}
.pg-ind-scope__team .pg-ico{flex:none;margin-top:1px;color:var(--pg-purple)}
.pg-ind-scope__seats{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pg-ind-scope__seat{display:grid;place-items:center;width:34px;height:34px;background:#fff;color:var(--pg-purple);box-shadow:inset 0 0 0 1px rgb(63 25 147/.16)}
.pg-ind-scope__seat--rev{background:var(--pg-lilac);color:var(--pg-ink);box-shadow:none}  /* the reviewer */
.pg-ind-scope__marks{display:flex;gap:2px;margin-right:6px;color:var(--pg-purple)}
.pg-ind-scope__card{position:relative;display:flex;align-items:center;gap:8px;padding:10px;background:#fff;color:var(--pg-ink);font-size:12.5px;line-height:1.25}
.pg-ind-scope__card>.pg-ico{flex:none;color:var(--pg-purple)}
.pg-ind-scope__card>span:not(.pg-ind-scope__done){min-width:0}
.pg-ind-scope__done{position:absolute;top:-9px;left:-9px;display:grid;place-items:center;width:22px;height:22px;background:var(--pg-lilac);color:var(--pg-ink)}
/* Phones: the squares are small, so the teams and the workflow keep their icons and drop their words */
@media (max-width:599px){
 .pg-ind-scope__teams{display:flex;gap:6px}
 .pg-ind-scope__team{padding:8px}
 .pg-ind-scope__team>span,.pg-ind-scope__card>span:not(.pg-ind-scope__done){display:none}
 .pg-ind-scope__card{align-self:flex-start}
 .pg-ind-scope__seat{width:28px;height:28px}
}
.pg-ind-scope__checks p{margin:0 0 10px;font-size:14px;line-height:1.4;color:var(--pg-muted)}
.pg-ind-scope__checks ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.pg-ind-scope__checks li{display:inline-flex;align-items:center;gap:8px;padding:10px 11px 10px 14px;border:1px solid var(--pg-ink);font-size:15px;line-height:1;transition:border-color .35s ease,background-color .35s ease}
.pg-ind-scope__checks .pg-ico{flex:none;color:var(--pg-purple)}
.pg-ind-scope__steps{margin:0;padding:0;list-style:none;border-top:1px solid var(--pg-line)}
.pg-ind-scope__step{padding:28px 0;border-bottom:1px solid var(--pg-line)}
.pg-ind-scope__step>.pg-icon{margin-bottom:18px}
.pg-ind-scope__step h3{margin:0;max-width:20ch;font-size:clamp(24px,2.4vw,34px);line-height:1.12;font-weight:400;letter-spacing:-.025em;text-wrap:balance}
.pg-ind-scope__step p{margin:12px 0 0;max-width:44ch;font-size:16px;line-height:1.55;color:var(--pg-muted)}
@media (max-width:1023px){.pg-ind-scope__canvas{max-width:420px}}
@media (min-width:1024px){
 .pg-ind-scope{grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"head stage" "steps stage";column-gap:clamp(48px,7vw,128px);row-gap:48px;align-items:start}
 .pg-ind-scope>.pg-head{grid-area:head}
 .pg-ind-scope__steps{grid-area:steps;margin-bottom:clamp(96px,16vh,180px)}  /* room for the drawing to stay pinned while the last step is read */
 .pg-ind-scope__stage{grid-area:stage;position:sticky;top:calc(var(--pg-hdr) + var(--pg-ann) + 40px)}
 .pg-ind-scope__step{min-height:clamp(280px,36vh,400px);padding:40px 0}
 /* the square of the step in view (desktop only: on phones the drawing is not in view while the steps pass) */
 .pg-js .pg-ind-scope[data-k="1"] .pg-ind-scope__ring--1,.pg-js .pg-ind-scope[data-k="2"] .pg-ind-scope__ring--2{box-shadow:inset 0 0 0 2px var(--pg-purple)}
 .pg-js .pg-ind-scope[data-k="0"] .pg-ind-scope__ring--0{box-shadow:0 0 0 4px var(--pg-lilac)}
 .pg-js .pg-ind-scope[data-k="0"] .pg-ind-scope__ring--0 .pg-ind-scope__mark,.pg-js .pg-ind-scope[data-k="1"] .pg-ind-scope__ring--1 .pg-ind-scope__mark,
 .pg-js .pg-ind-scope[data-k="2"] .pg-ind-scope__ring--2 .pg-ind-scope__mark{background:var(--pg-lilac);color:var(--pg-ink);box-shadow:none}
 .pg-js .pg-ind-scope[data-k="1"] .pg-ind-scope__checks li{border-color:var(--pg-purple);background:rgb(63 25 147/.06)}  /* the evaluation step is in view */
 /* the scopes not reached yet wait: the reviewer has not marked results, the teams have not joined */
 .pg-js .pg-ind-scope[data-k="0"] .pg-ind-scope__seat--rev{background:#fff;color:var(--pg-purple);box-shadow:inset 0 0 0 1px rgb(63 25 147/.16)}
 .pg-js .pg-ind-scope[data-k="0"] .pg-ind-scope__marks{opacity:0}
 .pg-js .pg-ind-scope[data-k="0"] .pg-ind-scope__team,.pg-js .pg-ind-scope[data-k="1"] .pg-ind-scope__team{opacity:.32;background:transparent}
}
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
 .pg-js .pg-ind-scope__step{opacity:.3;transition:opacity .5s cubic-bezier(.2,.8,.2,1)}
 .pg-js .pg-ind-scope__step.is-on{opacity:1}
 .pg-js .pg-ind-scope[data-k="0"] .pg-ind-scope__ring--0,.pg-js .pg-ind-scope[data-k="1"] .pg-ind-scope__ring--1,.pg-js .pg-ind-scope[data-k="2"] .pg-ind-scope__ring--2{animation:pg-ind-grow .7s cubic-bezier(.34,1.56,.64,1)}
 .pg-js .pg-ind-scope__team{transition:opacity .45s ease,background-color .45s ease;transition-delay:calc(var(--i) * .14s)}
 .pg-js .pg-ind-scope__seat--rev{transition:background-color .35s ease,color .35s ease,box-shadow .35s ease}
 .pg-js .pg-ind-scope__marks{transition:opacity .3s ease}
 .pg-js .pg-ind-scope__marks .pg-ico:nth-child(2) [pathLength]{transition-delay:.3s}
 .pg-js .pg-ind-scope__marks .pg-ico:nth-child(3) [pathLength]{transition-delay:.6s}
}
@keyframes pg-ind-grow{from{transform:scale(.94)}}

/* Proof (purple): the statement beside its evidence */
.pg-ind-proof{display:grid;gap:clamp(40px,5vw,80px)}
@media (min-width:1024px){.pg-ind-proof{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center}}
.pg-ind-proof .pg-proof__title{font-size:clamp(36px,4.2vw,62px)}
.pg-ind-proof .pg-proof__body{margin-top:24px;max-width:46ch}
/* The areas a statement names, as icon tiles under it (Legal: Qistas's areas of work) */
.pg-ind-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 20px;margin:32px 0 0;padding:0;list-style:none}
.pg-ind-fields li{display:flex;align-items:center;gap:14px;font-size:15.5px;line-height:1.3;color:#fff}
.pg-ind-fields .pg-icon{margin:0}
.pg-ind-fields+.pg-link{margin-top:32px}
/* A partner's photograph and white logo, with its figures */
.pg-ind-region{display:grid;background:rgb(255 255 255/.06);box-shadow:inset 0 0 0 1px rgb(255 255 255/.16)}
@media (min-width:700px){.pg-ind-region{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.pg-ind-region__media{aspect-ratio:4/3;overflow:hidden;background:#0C0716}
.pg-ind-region__media img{width:100%;height:100%;object-fit:cover}
.pg-ind-region__body{display:flex;flex-direction:column;justify-content:space-between;gap:32px;padding:28px}
body.pg .pg-ind-region__logo{height:22px;width:auto;filter:brightness(0) invert(1)}
.pg-ind-region dl{display:grid;gap:24px;margin:0}
.pg-ind-region dl div{display:flex;flex-direction:column-reverse;gap:8px}
.pg-ind-region dd{margin:0;font-size:clamp(48px,5vw,72px);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.pg-ind-region dd span{display:inline-block}
.pg-ind-region dt{font-size:14px;line-height:1.4;color:rgb(255 255 255/.8)}
/* Scores: each bar's length is the score, with no track behind it */
.pg-ind-scores{padding:clamp(24px,3vw,40px);background:rgb(13 5 33/.3)}
.pg-ind-scores__intro{margin:0 0 32px;max-width:40ch;font-size:16px;line-height:1.55;color:rgb(255 255 255/.82)}
.pg-ind-score{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:baseline;gap:10px 16px}
.pg-ind-score+.pg-ind-score{margin-top:30px}
body.pg .pg-ind-score img{height:22px;width:auto;align-self:center}
.pg-ind-score b{font-size:clamp(44px,4.4vw,64px);line-height:1;font-weight:400;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.pg-ind-score span{font-size:15px;line-height:1.4;color:rgb(255 255 255/.8)}
.pg-ind-score i{grid-column:1/-1;display:block;height:10px;width:calc(var(--v) * 100%);background:var(--pg-lilac);transform-origin:100% 50%}
.pg-ind-score--low i{background:rgb(255 255 255/.42)}
.pg-ind-scores__note{margin:28px 0 0;font-size:13.5px;line-height:1.5;color:rgb(255 255 255/.72)}
/* Options in order, the marker filling from an outline (most connected) to dark (no connection) */
.pg-ind-options{margin:0;padding:0;list-style:none;border-bottom:1px solid rgb(255 255 255/.22)}
.pg-ind-options li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:6px 20px;align-items:center;padding:20px 0;border-top:1px solid rgb(255 255 255/.22)}
.pg-ind-options li>.pg-icon{grid-row:span 2;align-self:start;margin:0}
.pg-ind-options li:nth-child(1) .pg-icon{background:none;color:#fff;box-shadow:inset 0 0 0 1.5px rgb(255 255 255/.7)}
.pg-ind-options li:nth-child(2) .pg-icon{background:rgb(255 255 255/.18);color:#fff;box-shadow:none}
.pg-ind-options li:nth-child(3) .pg-icon{background:#fff;color:var(--pg-purple);box-shadow:none}
.pg-ind-options li:nth-child(4) .pg-icon{background:var(--pg-dark);color:var(--pg-lilac);box-shadow:none}
@media (min-width:700px){.pg-ind-options li{grid-template-columns:44px minmax(0,1fr) minmax(0,1fr);column-gap:24px}.pg-ind-options li>.pg-icon{grid-row:auto}}
.pg-ind-options h3{margin:0;font-size:clamp(20px,1.8vw,24px);line-height:1.15;font-weight:400;letter-spacing:-.02em}
.pg-ind-options p{margin:0;font-size:15.5px;line-height:1.5;color:rgb(255 255 255/.8)}
/* The Voice Studio's sentence on its light panel (read aloud by the Explore pages' script) */
.pg-ind-voice{display:flex;flex-direction:column;background:#F1ECFA;color:#1C0B4A}
body.pg .pg-ind-voice__logo{align-self:flex-start;height:20px;width:auto;margin:clamp(20px,3vw,40px) clamp(20px,3vw,40px) 0}
.pg-ind-voice .pg-ex-duo__stage{min-height:clamp(240px,22vw,320px)}
/* One figure, then the speaker's words */
.pg-ind-quote{padding:clamp(24px,3vw,44px);box-shadow:inset 0 0 0 1px rgb(255 255 255/.22)}
.pg-ind-quote__fig{margin:0;font-size:clamp(96px,12vw,184px);line-height:.82;font-weight:400;letter-spacing:-.06em;font-variant-numeric:tabular-nums;white-space:nowrap}
.pg-ind-quote__fig span{display:inline-block}
.pg-ind-quote__fig small{font-size:.4em;letter-spacing:-.03em;color:var(--pg-lilac)}
.pg-ind-quote__label{margin:20px 0 0;max-width:34ch;font-size:15px;line-height:1.5;color:rgb(255 255 255/.8)}
.pg-ind-quote blockquote{margin:36px 0 0;padding-top:28px;border-top:1px solid rgb(255 255 255/.22);max-width:30ch;font-size:clamp(22px,2.2vw,30px);line-height:1.25;letter-spacing:-.02em}
.pg-ind-quote cite{display:block;margin-top:16px;font-style:normal;font-size:14px;color:rgb(255 255 255/.8)}

/* Motion. The route's signal runs from the sources along the line, and the deciding node answers it as
   it arrives (one loop, 4.8 seconds, only while the band is on screen: pages.js adds .is-live). The
   source map's lines carry the signal row by row. The adoption step in view lights its square and
   the checks tick when evaluation arrives. A chosen application settles in, the scores grow. None of
   it runs under reduced motion; without JavaScript the drawings show at rest. */
@media (prefers-reduced-motion:no-preference){
 .pg-js .is-live .pg-ind-route__signal{stroke-dasharray:.12 .88;animation:pg-ind-merge 4.8s cubic-bezier(.45,0,.25,1) infinite}
 .pg-js .is-live .pg-ind-route__rail .pg-ind-route__signal{stroke-dasharray:.06 .94;animation-name:pg-ind-rail}
 .pg-js .pg-ind-route:not(.pg-ind-route--in).is-live .pg-ind-route__rail .pg-ind-route__signal{animation-name:pg-ind-rail-solo}
 .pg-js .pg-ind-route.is-live .is-key>.pg-icon::after{animation:pg-ind-ping 4.8s ease-out 3.8s infinite}
 .pg-js .pg-ind-route:not(.pg-ind-route--in).is-live .is-key>.pg-icon::after{animation-delay:2.95s}
 .pg-js .pg-ind-route--one.is-live .is-key>.pg-icon::after{animation-delay:1.5s}
 .pg-js .pg-ind-map.is-live .pg-ind-route__signal{animation-delay:calc(var(--i) * 1.6s)}
 .pg-js .pg-ind-route .pg-ind-route__doc,.pg-js .pg-ind-route .pg-ind-route__stage{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
 .pg-js .pg-ind-route .pg-ind-route__doc{transition-delay:calc(.1s + var(--i) * 80ms)}
 .pg-js .pg-ind-route .pg-ind-route__stage{transition-delay:calc(.3s + var(--i) * .22s)}
 .pg-js .pg-ind-route.is-in .pg-ind-route__doc,.pg-js .pg-ind-route.is-in .pg-ind-route__stage{opacity:1;transform:none}
 .pg-ind-scope__checks li:nth-child(2) .pg-ico [pathLength]{transition-delay:.3s}
 .pg-ind-scope__checks li:nth-child(3) .pg-ico [pathLength]{transition-delay:.6s}
 .pg-js .pg-ind-scores .pg-ind-score i{transform:scaleX(0);transition:transform 1s cubic-bezier(.2,.8,.2,1) .3s}
 .pg-js .pg-ind-scores .pg-ind-score+.pg-ind-score i{transition-delay:.5s}
 .pg-js .is-in .pg-ind-scores .pg-ind-score i{transform:none}
}
@keyframes pg-ind-merge{0%{stroke-dashoffset:.12;opacity:1}30%{stroke-dashoffset:-.9;opacity:1}31%,100%{stroke-dashoffset:-.9;opacity:0}}
@keyframes pg-ind-rail{0%,29%{stroke-dashoffset:.06;opacity:0}30%{opacity:1}78%{stroke-dashoffset:-.95;opacity:1}79%,100%{stroke-dashoffset:-.95;opacity:0}}
@keyframes pg-ind-rail-solo{0%{stroke-dashoffset:.06;opacity:1}60%{stroke-dashoffset:-.95;opacity:1}61%,100%{stroke-dashoffset:-.95;opacity:0}}
@media (prefers-reduced-motion:reduce){.pg-ind-scope__ring,.pg-ind-scope__mark,.pg-ind-scope__checks li,.pg-ind-map__src,.pg-ind-map__seg,.pg-ind-route__base{transition:none}}
@keyframes pg-ind-ping{0%{opacity:.95;transform:scale(.8)}32%{opacity:0;transform:scale(1.4)}100%{opacity:0;transform:scale(1.4)}}
/* End of Industries pages */

/* ===== Trio (10 October 2026, the user's note: dull and bland) =================================
   build_pages.py trio(): one large tile and two beside it. Every tile has a top row (its icon, its
   tag, its number, so the three read as one sequence); the coloured tiles carry a dot grid fading
   from a corner, and around the pointer the dots light up and the tile's edge glows (pages.js sets
   --mx and --my). The photo drifts slowly; on hover the tile rises a little and its title underlines.
   Touch screens and reduced motion: the static version. */
.pg-trio{counter-reset:pgt}
.pg-trio>.pg-tile{counter-increment:pgt;transition:transform .55s cubic-bezier(.16,1,.3,1),box-shadow .55s ease}
.pg-trio .pg-tile__top{position:relative;z-index:1;gap:12px;min-height:44px}
.pg-trio .pg-tile__top .pg-icon{margin:0}
.pg-trio .pg-tile__top::after{content:counter(pgt,decimal-leading-zero);margin-right:auto;font-family:var(--font-mono),monospace;font-size:12.5px;letter-spacing:.06em;opacity:.55}
.pg-trio .pg-tile__body{position:relative;z-index:1}
.pg-trio .pg-tile h3>span{background:linear-gradient(currentColor,currentColor) 100% 100%/0 1px no-repeat;transition:background-size .6s cubic-bezier(.16,1,.3,1)}
.pg-trio .pg-tile:is(.pg-tile--deep,.pg-tile--purple,.pg-tile--dark)::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgb(255 255 255/.17) 1px,transparent 1.5px) 100% 0/16px 16px;
  -webkit-mask:radial-gradient(95% 85% at 0% 0%,#000 0%,transparent 72%);mask:radial-gradient(95% 85% at 0% 0%,#000 0%,transparent 72%)}
.pg-tile__light{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .45s ease;
  background:radial-gradient(circle,rgb(255 180 233/.9) 1px,transparent 1.6px) 100% 0/16px 16px,radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgb(255 255 255/.09),transparent 70%);
  -webkit-mask:radial-gradient(210px circle at var(--mx,50%) var(--my,50%),#000 0%,transparent 75%);mask:radial-gradient(210px circle at var(--mx,50%) var(--my,50%),#000 0%,transparent 75%)}
.pg-trio .pg-tile:is(.pg-tile--lilac,.pg-tile--pink,:not([class*="pg-tile--"])) .pg-tile__light{background:radial-gradient(circle,rgb(63 25 147/.5) 1px,transparent 1.6px) 100% 0/16px 16px,radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgb(63 25 147/.06),transparent 70%)}
.pg-trio .pg-tile::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;padding:1px;opacity:0;transition:opacity .45s ease;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgb(255 180 233/.95),transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.pg-trio .pg-tile:is(.pg-tile--lilac,.pg-tile--pink,:not([class*="pg-tile--"]))::before{background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgb(63 25 147/.7),transparent 72%)}
@media (hover:hover){
 .pg-trio .pg-tile:hover :is(.pg-tile__light),.pg-trio .pg-tile:hover::before{opacity:1}
 .pg-trio a.pg-tile:hover{transform:translateY(-3px);box-shadow:0 26px 48px -30px rgb(42 15 107/.6)}
 .pg-trio a.pg-tile:hover h3>span{background-size:100% 1px}
}
@keyframes pg-tile-drift{from{scale:1.04;translate:0 0}to{scale:1.13;translate:-2.5% -1.5%}}
.pg-trio .pg-tile__bg{animation:pg-tile-drift 24s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){.pg-trio .pg-tile__bg{animation:none}.pg-trio>.pg-tile{transition:none}.pg-trio a.pg-tile:hover{transform:none}}

/* ===== Bento (10 October 2026, the user's note: dull and bland) ================================
   build_pages.py bento() (Atelier, Sadu, Data Services, Careers' values): every cell has a top row
   (its icon, its tag, its number) and its title and text at the foot, so the cell is composed rather
   than text in a corner over an empty field. A dot grid fades in from the top right corner and drifts
   very slowly; around the pointer the dots light up and the edge glows (pages.js), as on the trio.
   The cells are not links, so they do not rise. Reduced motion: no drift. */
.pg-bento--live{counter-reset:pgb}
.pg-bento--live>.pg-cell{counter-increment:pgb;isolation:isolate;justify-content:space-between;gap:28px}
.pg-bento--live .pg-cell__top{position:relative;z-index:1;display:flex;align-items:center;gap:12px;min-height:44px}
.pg-bento--live .pg-cell__top .pg-icon{margin:0}
.pg-bento--live .pg-cell__top::after{content:counter(pgb,decimal-leading-zero);margin-right:auto;font-family:var(--font-mono),monospace;font-size:12.5px;letter-spacing:.06em;opacity:.5}
.pg-bento--live .pg-cell__tag{margin:0!important}
.pg-bento--live .pg-cell__body{position:relative;z-index:1;display:grid;gap:10px}
.pg-bento--live .pg-cell__body p{max-width:46ch}
.pg-bento--live>.pg-cell--img{justify-content:space-between}
.pg-bento--live>.pg-cell--img>.pg-cell__top{padding-bottom:0}
.pg-bento--live>.pg-cell--img>.pg-cell__body{padding-top:0}
.pg-bento--live>.pg-cell--img::after{background:linear-gradient(0deg,rgb(9 9 10/.85),rgb(9 9 10/0) 62%),linear-gradient(180deg,rgb(9 9 10/.45),rgb(9 9 10/0) 34%)}
.pg-bento--big .pg-cell h3{font-size:clamp(34px,3.4vw,52px);line-height:1;letter-spacing:-.035em}
.pg-bento--big>.pg-cell{min-height:clamp(240px,20vw,300px)}
@keyframes pg-dots{to{background-position:16px 16px}}
.pg-bento--live>.pg-cell:not(.pg-cell--img)::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgb(63 25 147/.16) 1px,transparent 1.5px) 100% 0/16px 16px;animation:pg-dots 40s linear infinite;
  -webkit-mask:radial-gradient(95% 85% at 0% 0%,#000 0%,transparent 72%);mask:radial-gradient(95% 85% at 0% 0%,#000 0%,transparent 72%)}
.pg-bento--live>:is(.pg-cell--purple,.pg-cell--dark)::before{background-image:radial-gradient(circle,rgb(255 255 255/.17) 1px,transparent 1.5px)}
.pg-bento--live>.pg-cell:not(.pg-cell--img)::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;padding:1px;opacity:0;transition:opacity .45s ease;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgb(63 25 147/.7),transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.pg-bento--live>:is(.pg-cell--purple,.pg-cell--dark)::after{background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgb(255 180 233/.95),transparent 72%)}
.pg-bento--live>.pg-cell:not(.pg-cell--purple):not(.pg-cell--dark):not(.pg-cell--img) .pg-tile__light{background:radial-gradient(circle,rgb(63 25 147/.5) 1px,transparent 1.6px) 100% 0/16px 16px,radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgb(63 25 147/.06),transparent 70%)}
@media (hover:hover){.pg-bento--live>.pg-cell:hover .pg-tile__light,.pg-bento--live>.pg-cell:not(.pg-cell--img):hover::after{opacity:1}}
@media (prefers-reduced-motion:reduce){.pg-bento--live>.pg-cell::before{animation:none}}

/* ===== Split (10 October 2026, the user's note: dull and bland) ================================
   build_pages.py split() beside split_img(): the photo sits in a frame. A light band sweeps across it
   as it comes into view (and again on hover), a dot grid
   fades in from a corner, and the photo drifts with the page's scroll where the browser ties animation
   to scroll. A short rule draws in above the title. Reduced motion: no sweep, drift or drawing. */
.pg-split__media:has(>.pg-split__frame){overflow:visible;background:none;isolation:isolate}
.pg-split__frame{position:absolute;inset:0;overflow:hidden;background:var(--pg-alt)}
.pg-split__frame img{width:100%;height:100%;object-fit:cover;scale:1.06;transition:scale 1.2s cubic-bezier(.16,1,.3,1)}
.pg-split__media:hover .pg-split__frame img{scale:1.1}
.pg-split__frame::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(circle,rgb(255 255 255/.28) 1px,transparent 1.5px) 100% 0/16px 16px;
  -webkit-mask:radial-gradient(60% 55% at 0% 0%,#000 0%,transparent 75%);mask:radial-gradient(60% 55% at 0% 0%,#000 0%,transparent 75%)}
.pg-split__frame::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;translate:-120% 0;
  background:linear-gradient(100deg,transparent 30%,rgb(255 255 255/.2) 48%,rgb(255 180 233/.18) 52%,transparent 70%)}
@keyframes pg-sweep{from{translate:-120% 0}to{translate:120% 0}}
.pg-split__media.is-in .pg-split__frame::after{animation:pg-sweep 1.6s cubic-bezier(.65,0,.35,1) .35s both}
.pg-split__media.is-in:hover .pg-split__frame::after{animation:pg-sweep 1.3s cubic-bezier(.65,0,.35,1) both}
@supports (animation-timeline:view()){
 @keyframes pg-split-drift{from{translate:0 -3.5%}to{translate:0 3.5%}}
 .pg-split__frame img{animation:pg-split-drift linear both;animation-timeline:view();animation-range:cover}
}
.pg-split>.pg-reveal:not(.pg-split__media):not(.pg-hero__media)::before{content:"";display:block;width:56px;height:2px;margin-bottom:28px;background:var(--pg-purple);transform-origin:right;transform:scaleX(0);transition:transform .9s cubic-bezier(.16,1,.3,1) .25s}
:is(.pg-dark,.pg-purple) .pg-split>.pg-reveal:not(.pg-split__media):not(.pg-hero__media)::before{background:var(--pg-lilac)}
.pg-split>.pg-reveal.is-in:not(.pg-split__media)::before,html:not(.pg-js) .pg-split>.pg-reveal::before{transform:none}
@media (prefers-reduced-motion:reduce){.pg-split__frame::after,.pg-split__media.is-in .pg-split__frame::after{animation:none}.pg-split__frame img{animation:none;scale:1.04;transition:none}
 .pg-split>.pg-reveal::before{transition:none;transform:none}}

/* ===== Certifications (10 October 2026, the user's note: dull and bland) =======================
   build_pages.py sov_certs() and sov_seal(): each certificate carries a seal on its tile's empty side:
   its status and name on a ring that turns slowly, guilloche rings and the brand's four-pointed star,
   pink on the coloured tiles and purple on the light one. The tiles light up around the pointer as
   the other trios do; they are not a sequence, so they are not numbered. Reduced motion: still. */
.pg-sov-certs .pg-tile__top::after{content:none}
/* The seal names the status on its ring, so it takes the status label's corner; the label stays for
   screen readers. The top right corner is clear of the title at every width. */
.pg-sov-certs .pg-tile__tag{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pg-tile__seal{position:absolute;z-index:0;top:clamp(18px,2.2vw,28px);left:clamp(18px,2.2vw,28px);width:clamp(96px,9vw,128px);height:auto;pointer-events:none;color:var(--pg-purple);overflow:visible}
.pg-sov-certs .pg-trio>:first-child .pg-tile__seal{width:clamp(96px,17vw,240px)}
:is(.pg-tile--purple,.pg-tile--dark,.pg-tile--deep) .pg-tile__seal{color:#FFB4E9}
.pg-tile__seal circle{fill:none;stroke:currentColor}
.pg-tile__seal .r1{stroke-width:1;opacity:.55}
.pg-tile__seal .r2{stroke-width:.8;stroke-dasharray:1.5 3.5;opacity:.45}
.pg-tile__seal .r3{stroke-width:.8;opacity:.25}
.pg-tile__seal text{font-family:var(--font-mono),monospace;font-size:11.5px;letter-spacing:.12em;fill:currentColor;opacity:.9}
.pg-tile__seal .star{fill:currentColor;opacity:.85}
.pg-tile__seal .spin{transform-origin:100px 100px;animation:pg-seal 40s linear infinite}
@keyframes pg-seal{to{rotate:360deg}}
.pg-sov-certs .pg-tile__body,.pg-sov-certs .pg-tile__top{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.pg-tile__seal .spin{animation:none}}

/* ===== Spacing audit (10 October 2026) ========================================================
   Cards and visuals sit 16px inside the frame lines on every page, so the gutter between cards is
   16px too (it was 8px): one spacing for every card grid (the homepage's bento: brand.css). */
:is(.pg-bento,.pg-cards,.pg-trio,.pg-co-group,.pg-co-models,.pg-ex-duo--three,.pg-people,.pg-sov-controls,.pg-sov-stair){gap:16px}

/* No stranded words (11 October 2026 audit): 35 headings and leads on the inner pages ended on a line
   holding a single word. Headings balance their lines; running text avoids a lone last word. */
body.pg :is(h1,h2,h3,h4,blockquote){text-wrap:balance}
body.pg p{text-wrap:pretty}

/* Phone fixes from the 11 October 2026 audit (390 px review):
   - The industry task tabs scroll sideways; the cut-off tab at the edge now fades out, so the row
     reads as one that scrolls (pages.js marks the ends, so the last tab shows whole at the end).
   - Three stats in two columns left the third alone: the first takes the full row.
   - The product tours list put its logo in a 116 px column beside the text, squeezing it to four
     short lines: the logo sits above the text instead.
   - The smallest adoption square's label ("One workflow") ran into its corner mark. */
@media (max-width:1023px){
 .pg-ind-apps__list{-webkit-mask-image:linear-gradient(270deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(270deg,#000 calc(100% - 56px),transparent)}
 .pg-ind-apps__list.is-end{-webkit-mask-image:none;mask-image:none}
 .pg-ind-apps__list.is-mid{-webkit-mask-image:linear-gradient(270deg,transparent,#000 40px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(270deg,transparent,#000 40px,#000 calc(100% - 56px),transparent)}
 .pg-ind-apps__list.is-mid.is-end{-webkit-mask-image:linear-gradient(270deg,transparent,#000 40px);mask-image:linear-gradient(270deg,transparent,#000 40px)}
}
@media (max-width:899px){.pg-stats>:first-child:nth-last-child(3){grid-column:1/-1}}
@media (max-width:639px){
 .pg-ex-tours__item{grid-template-columns:minmax(0,1fr) 18px;gap:12px 16px}
 .pg-ex-tours__logo{grid-column:1;grid-row:1}
 .pg-ex-tours__item>.pg-ex-down{grid-column:2;grid-row:1}
 .pg-ex-tours__copy{grid-column:1/-1;grid-row:2}
 .pg-ind-scope__ring--0 .pg-ind-scope__mark{width:30px;height:30px}
 .pg-ind-scope__in--0 .pg-ind-scope__label{max-width:calc(100% - 36px);font-size:10px;letter-spacing:0}
}

/* ===== Stage (11 October 2026, the user's note: "redesign these so that they're consistently premium")
   build_pages.py stage(): the sections that were a stack of rows become a list beside a drawing of what
   the items mean. The open item shows its text; the drawing lights the parts tagged with its number and
   runs a current along its lines (pages.js steps through while in view; a click, tap or arrow key picks).
   The drawing sits in a panel of the house looks (paper: grey to white with a fading dot grid; night:
   near-black with the purple glow); its parts are placed in percent and sized in container units, so it
   keeps its proportions from a phone to a wide screen. Square corners throughout. */
.pg-stage{display:grid;gap:28px;align-items:start}
@media (min-width:1024px){.pg-stage{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,5vw,80px)}}
.pg-stage__list{border-top:1px solid var(--pg-line)}
.pg-stage__item{border-bottom:1px solid var(--pg-line)}
.pg-stage__h{margin:0;font:inherit}
.pg-stage__tab{all:unset;box-sizing:border-box;position:relative;display:flex;align-items:center;gap:16px;width:100%;padding:20px 0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pg-stage__tab .pg-icon{margin:0;width:40px;height:40px}
.pg-stage__mark{display:block;flex:none;height:22px;width:auto}
.pg-stage__title{flex:1;min-width:0;font-size:clamp(19px,1.6vw,23px);line-height:1.25;letter-spacing:-.015em;color:var(--pg-muted);transition:color .3s ease;text-wrap:balance}
.pg-stage__tab:hover .pg-stage__title,.pg-stage__item.is-open .pg-stage__title{color:var(--pg-ink)}
.pg-stage__tab:focus-visible{outline:2px solid var(--pg-purple);outline-offset:4px}
.pg-stage__bar{position:absolute;right:0;left:0;bottom:-1px;height:2px;background:var(--pg-purple);transform:scaleX(0);transform-origin:right;pointer-events:none}
.pg-stage__item.is-open .pg-stage__bar{transform:none}
.pg-stage.is-auto .pg-stage__item.is-open .pg-stage__bar{transform:scaleX(0)}
.pg-stage.is-auto.is-tick .pg-stage__item.is-open .pg-stage__bar{transform:none;transition:transform var(--stage-t,5200ms) linear}
.pg-stage.is-hold .pg-stage__item.is-open .pg-stage__bar{transform:none;transition:none}
.pg-stage__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.16,1,.3,1)}
.pg-stage__body>div{min-height:0;overflow:hidden}
.pg-stage__item.is-open .pg-stage__body,html:not(.pg-js) .pg-stage__body{grid-template-rows:1fr}
.pg-stage__body p{margin:0;padding:0 56px 22px 0;max-width:58ch;font-size:16px;line-height:1.6;color:var(--pg-muted)}
/* The open item's text starts clear of the purple line under its tab (13 October 2026, the user's note:
   it sat right on the line). Inside the part that folds away, so a closed item keeps no gap. */
.pg-stage__body>div>p:first-child{padding-top:18px}
.pg-stage__body .pg-stage__meta{margin-top:-10px;padding-bottom:22px;font-family:var(--font-mono),monospace;font-size:12.5px;letter-spacing:.02em;line-height:1.9;color:var(--pg-ink)}
.pg-stage__meta b{font-weight:400;color:var(--pg-muted);margin-inline-end:6px}
.pg-stage__meta .pg-link{font-family:var(--font-aeonik),sans-serif;font-size:14px;letter-spacing:0}
.pg-stage__chip{display:inline-block;margin-inline-end:6px;padding:2px 8px;background:var(--pg-alt);line-height:1.7}
.pg-stage:has(.pg-stage__mark) .pg-stage__body p{padding-inline-start:0}
.pg-dark .pg-stage__list,.pg-dark .pg-stage__item{border-color:rgb(255 255 255/.12)}
.pg-dark .pg-stage__title{color:rgb(245 245 247/.55)}
.pg-dark .pg-stage__tab:hover .pg-stage__title,.pg-dark .pg-stage__item.is-open .pg-stage__title{color:#fff}
.pg-dark .pg-stage__bar{background:linear-gradient(270deg,#8F6BE8,var(--pg-lilac))}
.pg-dark .pg-stage__body p{color:var(--pg-dark-muted)}
.pg-dark .pg-stage__body .pg-stage__meta{color:#F5F5F7}
.pg-dark .pg-stage__chip{background:rgb(255 255 255/.08)}
:is(.pg-dark,.pg-purple) .pg-stage__tab .pg-icon{background:rgb(255 255 255/.08);color:#FFB4E9;box-shadow:inset 0 0 0 1px rgb(255 255 255/.16)}
.pg-stage__item.is-open .pg-stage__tab .pg-icon:not(.pg-icon--dark){background:var(--pg-purple);color:#fff;box-shadow:none}
:is(.pg-dark,.pg-purple) .pg-stage__item.is-open .pg-stage__tab .pg-icon{background:#FFB4E9;color:#1A1730;box-shadow:none}

.pg-stage__view{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:7/5;container-type:inline-size;box-shadow:inset 0 0 0 1px var(--pg-line);background:linear-gradient(180deg,#F1F1F3 0%,#FFFFFF 85%)}
.pg-stage__view::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle,rgb(63 25 147/.16) 1px,transparent 1.4px) 100% 0/18px 18px;
 -webkit-mask:radial-gradient(130% 95% at 50% 0%,#000 25%,transparent 80%);mask:radial-gradient(130% 95% at 50% 0%,#000 25%,transparent 80%)}
.pg-stage__view[data-look="night"]{box-shadow:inset 0 0 0 1px rgb(255 255 255/.07);color:#F5F5F7;
 background:radial-gradient(70% 80% at 88% 112%,rgb(63 25 147/.6),transparent 70%),radial-gradient(55% 55% at 0% 0%,rgb(255 180 233/.08),transparent 70%),#0B0912}
.pg-stage__view[data-look="night"]::before{background-image:radial-gradient(circle,rgb(255 255 255/.13) 1px,transparent 1.4px)}
@media (min-width:1024px){.pg-stage__view{position:sticky;top:calc(var(--pg-hdr) + 72px)}}
@media (max-width:1023px){.pg-stage__view{order:-1}}
@media (max-width:639px){.pg-stage__view{aspect-ratio:6/5}.pg-stage__body p{padding-inline-start:0}.pg-stage__body .pg-stage__meta{margin-top:-12px}}
.sg{position:absolute;inset:0}

/* The parts. Lines: a faint track, and a current that runs while its item is open. */
.sg-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sg-lines path{fill:none;stroke-linecap:round}
.sg-track{stroke:rgb(63 25 147/.2);stroke-width:1.25}
.sg-flow{stroke:var(--pg-purple);stroke-width:2;stroke-dasharray:.035 .045;opacity:0;transition:opacity .45s ease}
.sg-flow.is-on{opacity:1;animation:sg-flow 1.5s linear infinite}
@keyframes sg-flow{to{stroke-dashoffset:-.08}}
[data-look="night"] .sg-track{stroke:rgb(255 255 255/.14)}
[data-look="night"] .sg-flow{stroke:var(--pg-lilac)}
:is(.sg-n,.sg-chip,.sg-hub,.sg-card,.sg-wave,.sg-doc,.sg-photo,.sg-inst){position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y,50) * 1%);transform:translate(-50%,-50%)}
.sg :not(path)[data-on]{transition:opacity .45s ease}
.sg :not(path)[data-on]:not(.is-on){opacity:.55}
.sg-n{z-index:1}
.sg-ico{display:grid;place-items:center;width:clamp(30px,7.2cqw,54px);aspect-ratio:1;background:#fff;color:var(--pg-purple);
 box-shadow:inset 0 0 0 1px rgb(63 25 147/.16),0 12px 28px -18px rgb(42 15 107/.45);transition:background-color .45s ease,color .45s ease,box-shadow .45s ease,transform .55s cubic-bezier(.34,1.56,.64,1)}
.sg-ico svg{width:46%;height:46%}
.sg-lb{position:absolute;top:calc(100% + clamp(5px,1.2cqw,10px));left:50%;transform:translateX(-50%);font-family:var(--font-mono),monospace;font-size:clamp(8.5px,1.5cqw,12px);letter-spacing:.02em;line-height:1.2;white-space:nowrap;color:var(--pg-muted);transition:color .45s ease}
.sg-n--in .sg-lb{left:0;transform:none}
.sg-n.is-on .sg-ico{background:var(--pg-purple);color:#fff;transform:scale(1.07);box-shadow:0 0 0 clamp(4px,1cqw,8px) rgb(63 25 147/.12),0 16px 32px -16px rgb(42 15 107/.6)}
.sg-n.is-on .sg-lb{color:var(--pg-ink)}
[data-look="night"] .sg-ico{background:#16131F;color:#FFB4E9;box-shadow:inset 0 0 0 1px rgb(255 255 255/.14)}
[data-look="night"] .sg-n.is-on .sg-ico{background:#FFB4E9;color:#1A1730;box-shadow:0 0 0 clamp(4px,1cqw,8px) rgb(255 180 233/.14)}
[data-look="night"] .sg-lb{color:rgb(245 245 247/.6)}
[data-look="night"] .sg-n.is-on .sg-lb{color:#fff}
.sg-n--hub .sg-ico{width:clamp(40px,10cqw,72px);background:var(--pg-alt);color:var(--pg-ink);box-shadow:inset 0 0 0 1px var(--pg-line)}
.sg-chip{z-index:1;display:flex;align-items:center;gap:6px;padding:clamp(4px,.9cqw,7px) clamp(7px,1.5cqw,11px);background:#fff;color:var(--pg-ink);
 box-shadow:inset 0 0 0 1px rgb(63 25 147/.16);font-family:var(--font-mono),monospace;font-size:clamp(8.5px,1.5cqw,12px);letter-spacing:.02em;white-space:nowrap;
 transition:background-color .45s ease,color .45s ease,box-shadow .45s ease,opacity .45s ease}
.sg-chip.is-on{background:var(--pg-purple);color:#fff;box-shadow:none}
.sg-chip img{display:block;width:auto;height:clamp(11px,2.6cqw,18px)}
[data-look="night"] .sg-chip{background:#16131F;color:#F5F5F7;box-shadow:inset 0 0 0 1px rgb(255 255 255/.14)}
[data-look="night"] .sg-chip.is-on{background:rgb(255 180 233/.14);color:#fff;box-shadow:inset 0 0 0 1px var(--pg-lilac)}
.sg-chip--dest{transform:translate(0,-50%);max-width:27cqw;white-space:normal;line-height:1.25}  /* destinations hang off their line's end, to the right */
.sg-hub{z-index:1;display:grid;place-items:center;width:clamp(84px,22cqw,156px);aspect-ratio:2.5;background:#16131F;
 box-shadow:inset 0 0 0 1px rgb(255 255 255/.18),0 0 0 clamp(6px,1.6cqw,12px) rgb(63 25 147/.3),0 0 64px rgb(63 25 147/.5)}
.sg-hub img{display:block;width:66%;height:auto}

/* Atelier: the floor plan. Neighbouring rooms share one wall line (outlines laid over each other). */
.sg-plan{position:absolute;inset:0}
.sg-plan::before{content:"";position:absolute;left:5%;top:7%;right:5%;bottom:7%;box-shadow:inset 0 0 0 2px rgb(63 25 147/.45);pointer-events:none;z-index:1}
.sg-room{position:absolute;left:calc(var(--l) * 1%);top:calc(var(--t) * 1%);width:calc(var(--w) * 1%);height:calc(var(--h) * 1%);display:grid;place-items:center;transition:background-color .5s ease,opacity .45s ease}
.sg-walls{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.sg-walls path{fill:none;stroke:rgb(63 25 147/.4);stroke-width:1.5}
.sg-room__lb{position:absolute;left:clamp(6px,1.6cqw,12px);top:clamp(5px,1.4cqw,10px);font-family:var(--font-mono),monospace;font-size:clamp(8.5px,1.5cqw,12px);letter-spacing:.02em;color:var(--pg-muted);transition:color .45s ease}
.sg-room.is-on{background:linear-gradient(180deg,rgb(63 25 147/.09),rgb(255 180 233/.12))}
.sg-room.is-on .sg-ico{background:var(--pg-purple);color:#fff;transform:scale(1.07);box-shadow:0 0 0 clamp(4px,1cqw,8px) rgb(63 25 147/.12)}
.sg-room.is-on .sg-room__lb{color:var(--pg-ink)}

/* LLM Models: logos as chips on the night map. */
.sg-chip--logo{padding:clamp(5px,1cqw,8px) clamp(8px,1.6cqw,12px)}

/* Speech: the Arabic line and the voice. */
.sg-card{z-index:1;width:calc(var(--w,30) * 1%);padding:clamp(10px,2.4cqw,20px);background:#fff;box-shadow:inset 0 0 0 1px rgb(63 25 147/.14),0 18px 40px -26px rgb(42 15 107/.45)}
.sg-card--text p{margin:0;font-family:"IBM Plex Sans Arabic",var(--font-aeonik),sans-serif;font-size:clamp(12px,2.6cqw,20px);line-height:1.5;color:var(--pg-ink)}
.sg-card--text span{display:inline-block}
.pg-stage[data-k="1"] .sg-card--text span{animation:sg-type 2.6s steps(26) both}
@keyframes sg-type{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0)}}
.sg-wave{z-index:1;width:calc(var(--w,30) * 1%);height:22%;display:flex;align-items:center;gap:3%}
.sg-wave i{flex:1;height:calc(var(--h) * 100%);background:var(--pg-purple);opacity:.85;transform-origin:center}
.pg-stage[data-k="0"] .sg-wave i{animation:sg-wave 1.1s ease-in-out var(--d) infinite alternate}
@keyframes sg-wave{from{transform:scaleY(.35)}to{transform:scaleY(1)}}

/* Vision: the letter read line by line; the photograph framed. */
.sg-doc{z-index:1;width:calc(var(--w) * 1%);height:calc(var(--h) * 1%);display:flex;flex-direction:column;justify-content:center;gap:9%;padding:0 6%;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px rgb(63 25 147/.14),0 18px 40px -26px rgb(42 15 107/.45)}
.sg-doc p{margin:0;text-align:right;font-family:"IBM Plex Sans Arabic",var(--font-aeonik),sans-serif;font-size:clamp(10px,2.1cqw,16px);line-height:1.3;color:var(--pg-ink)}
.sg-doc p span{padding:2px 4px;box-shadow:0 0 0 1px transparent;transition:box-shadow .4s ease calc(var(--i) * 260ms),background-color .4s ease calc(var(--i) * 260ms)}
.sg-doc.is-on p span{box-shadow:0 0 0 1.5px var(--pg-purple);background:rgb(63 25 147/.06)}
.sg-scan{position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--pg-purple),transparent);opacity:0}
.sg-doc.is-on .sg-scan{opacity:1;animation:sg-scan 2.4s cubic-bezier(.65,0,.35,1) infinite}
@keyframes sg-scan{from{top:4%}to{top:94%}}
.sg-photo{z-index:1;width:calc(var(--w) * 1%);height:calc(var(--h) * 1%);overflow:hidden;box-shadow:0 18px 40px -26px rgb(42 15 107/.55)}
.sg-photo img{display:block;width:100%;height:100%;object-fit:cover}
.sg-focus{position:absolute;inset:24% 22%;transition:inset .7s cubic-bezier(.16,1,.3,1),opacity .45s ease;opacity:.6}
.sg-focus b{position:absolute;width:22%;height:22%;border:2px solid rgb(63 25 147/.75)}
.sg-focus b:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}.sg-focus b:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
.sg-focus b:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}.sg-focus b:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
.sg-photo.is-on .sg-focus{inset:30% 30%;opacity:1}
.sg-photo.is-on .sg-focus b{border-color:var(--pg-purple);border-width:3px}

/* Values and Academy: three instruments, the open one lit. */
.sg-inst{top:50%;width:31cqw;display:grid;justify-items:center;gap:clamp(8px,2.2cqw,16px);transition:opacity .45s ease,transform .55s cubic-bezier(.34,1.56,.64,1)}
.sg-inst .sg-lb{position:static;transform:none;font-size:clamp(9px,1.6cqw,12.5px)}
.sg-inst.is-on{transform:translate(-50%,-50%) scale(1.05)}
.sg-inst.is-on .sg-lb{color:var(--pg-ink)}
.sg-layers{display:grid;gap:clamp(5px,1.3cqw,10px);width:26cqw}
.sg-layers i{position:relative;display:block;height:clamp(12px,4cqw,28px);background:rgb(63 25 147/calc(.1 + var(--i) * .07));box-shadow:inset 0 0 0 1px rgb(63 25 147/.2)}
.sg-layers b{position:absolute;right:6%;top:50%;transform:translateY(-50%) scale(.6);display:grid;place-items:center;width:clamp(12px,3cqw,20px);aspect-ratio:1;background:#fff;color:var(--pg-purple);opacity:0;transition:opacity .35s ease calc(var(--i) * 180ms),transform .45s cubic-bezier(.34,1.56,.64,1) calc(var(--i) * 180ms)}
.sg-layers b svg{width:70%;height:70%}
.sg-inst.is-on .sg-layers b{opacity:1;transform:translateY(-50%) scale(1)}
.sg-inst.is-on .sg-layers i{background:rgb(63 25 147/calc(.25 + var(--i) * .2))}
.sg-ring,.sg-dial{position:relative;width:24cqw;aspect-ratio:1}
.sg-ring svg,.sg-dial svg{display:block;width:100%;height:100%}
.sg-ring__bg{fill:none;stroke:rgb(63 25 147/.14);stroke-width:9}
.sg-ring__fill{fill:none;stroke:var(--pg-purple);stroke-width:9;stroke-dasharray:0 1;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dasharray 1.1s cubic-bezier(.65,0,.35,1)}
.sg-inst.is-on .sg-ring__fill{stroke-dasharray:.2 .8}
.sg-ring__v{position:absolute;inset:0;display:grid;place-items:center;font-weight:400;font-size:clamp(14px,4.2cqw,30px);letter-spacing:-.03em;color:var(--pg-ink)}
.sg-dial__face{fill:#fff;stroke:rgb(63 25 147/.18);stroke-width:1.5}
.sg-dial__ticks line{stroke:rgb(63 25 147/.35);stroke-width:1.5}
.sg-dial__sweep{fill:rgb(255 180 233/.55);transform-origin:50px 50px;transform:scale(0);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.sg-dial__hand{stroke:var(--pg-purple);stroke-width:2.5;stroke-linecap:round;transform-origin:50px 50px;transform:rotate(0deg);transition:transform 1.2s cubic-bezier(.65,0,.35,1)}
.sg-dial__hub{fill:var(--pg-purple)}
.sg-inst.is-on .sg-dial__sweep{transform:scale(1)}
.sg-inst.is-on .sg-dial__hand{transform:rotate(120deg)}
.sg-card--lesson,.sg-card--proj{position:relative;left:auto;top:auto;transform:none;width:28cqw;display:grid;justify-items:center;gap:clamp(6px,1.6cqw,12px);padding:clamp(10px,2.6cqw,20px) 0}
.sg-card--lesson b{font-family:"IBM Plex Sans Arabic",var(--font-aeonik),sans-serif;font-weight:600;font-size:clamp(16px,4.4cqw,34px);line-height:1.2;color:var(--pg-ink)}
.sg-tag{display:inline-block;padding:2px 8px;background:var(--pg-alt);font-family:var(--font-mono),monospace;font-size:clamp(8px,1.4cqw,11.5px);color:var(--pg-ink)}
.sg-card--proj{grid-template-columns:auto;gap:clamp(4px,1cqw,8px)}
.sg-card--proj .sg-ico{margin-bottom:4px}
.sg-inst.is-on .sg-card--proj .sg-ico{background:var(--pg-purple);color:#fff}
.sg-inst.is-on .sg-tag{background:rgb(63 25 147/.1)}
.sg-roles{display:grid;justify-items:center;gap:clamp(3px,.9cqw,6px)}
.sg-roles span{display:block;padding:clamp(3px,.8cqw,6px) 0;width:calc((12 + var(--i) * 4) * 1cqw);text-align:center;background:rgb(63 25 147/calc(.07 + var(--i) * .06));font-family:var(--font-mono),monospace;font-size:clamp(7.5px,1.3cqw,11px);white-space:nowrap;color:var(--pg-ink);transition:background-color .45s ease}
.sg-inst.is-on .sg-roles span{background:rgb(63 25 147/calc(.16 + var(--i) * .2));color:var(--pg-ink)}
.sg-inst.is-on .sg-roles span:nth-child(n+3){color:#fff}

/* Developers: the papers in a fan; the open one forward. */
.sg-sheets{position:absolute;inset:0}
.sg-sheet{position:absolute;left:50%;top:54%;width:34cqw;height:44cqw;padding:clamp(10px,2.4cqw,18px);display:flex;flex-direction:column;gap:clamp(5px,1.4cqw,10px);background:#fff;
 box-shadow:inset 0 0 0 1px rgb(63 25 147/.14),0 24px 50px -30px rgb(42 15 107/.55);
 transform:translate(-50%,-50%) translateX(calc((var(--i) - 1) * 21cqw)) rotate(calc((var(--i) - 1) * 5deg));transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .45s ease,box-shadow .45s ease;z-index:calc(var(--i) + 1)}
.sg-sheet.is-on{z-index:5;transform:translate(-50%,-50%) translateX(calc((var(--i) - 1) * 21cqw)) translateY(-3cqw) rotate(0deg) scale(1.05);box-shadow:inset 0 0 0 1.5px var(--pg-purple),0 30px 60px -28px rgb(42 15 107/.6)}
.sg-sheet__h{display:flex;align-items:center;gap:8px;margin-bottom:clamp(4px,1.2cqw,10px);color:var(--pg-purple)}
.sg-sheet__h svg{flex:none;width:clamp(12px,2.6cqw,18px);height:auto}
.sg-sheet__h b{font-weight:400;font-size:clamp(9px,1.9cqw,14px);line-height:1.2;color:var(--pg-ink)}
.sg-sheet i{display:block;height:clamp(3px,.8cqw,6px);background:rgb(63 25 147/.1)}
.sg-sheet i:nth-of-type(3n+2){width:88%}.sg-sheet i:nth-of-type(3n){width:72%}.sg-sheet i:nth-of-type(4){width:94%}.sg-sheet i:nth-of-type(9){width:46%}
.sg-sheet__stamp{margin-top:auto;align-self:flex-end;display:grid;place-items:center;width:clamp(22px,5cqw,36px);aspect-ratio:1;color:rgb(63 25 147/.35);box-shadow:inset 0 0 0 1px rgb(63 25 147/.2)}
.sg-sheet__stamp svg{width:55%;height:auto}
.sg-sheet.is-on .sg-sheet__stamp{color:#fff;background:var(--pg-purple);box-shadow:none}
.sg-sheet.is-on i{background:rgb(63 25 147/.16)}

@media (prefers-reduced-motion:reduce){
 .sg-flow.is-on,.pg-stage .sg-wave i,.sg-doc.is-on .sg-scan,.pg-stage[data-k="1"] .sg-card--text span{animation:none}
 .sg-flow.is-on{stroke-dasharray:none}
 .pg-stage__body,.sg-ico,.sg-inst,.sg-sheet,.sg-focus,.sg-room{transition:none}
}

/* ===== Developers: the platform panel after the documents' stage, as one strip ===================== */
.pg-co-docs--strip{display:block;margin-top:clamp(32px,4vw,56px)}
@media (min-width:1024px){
 .pg-co-docs--strip .pg-co-ctrl{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;align-items:start;gap:16px 48px}
 .pg-co-docs--strip .pg-co-ctrl>ul:first-of-type{grid-column:1;grid-row:2 / span 3;display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
 .pg-co-docs--strip .pg-co-ctrl>:first-child{grid-column:1}
}

/* ===== Facts for reporters: a board (11 October 2026) ============================================== */
.pg-co-board{list-style:none;margin:0;padding:0;display:grid;gap:16px}
@media (min-width:640px){.pg-co-board{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.pg-co-board{grid-template-columns:repeat(4,minmax(0,1fr))}.pg-co-fact--wide{grid-column:span 2}}
.pg-co-fact{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:14px;min-height:clamp(200px,17vw,250px);padding:clamp(22px,2.2vw,30px);
 background:linear-gradient(180deg,rgb(255 255 255/.05),rgb(255 255 255/.02));box-shadow:inset 0 0 0 1px rgb(255 255 255/.1)}
.pg-co-fact>*{position:relative;z-index:1}
.pg-co-fact--lead{background:radial-gradient(90% 120% at 0% 0%,rgb(255 180 233/.22),transparent 60%),linear-gradient(160deg,#4A1FA8,#2A0F6B 75%);box-shadow:none}
.pg-co-fact__k{display:flex;align-items:center;gap:8px;margin:0;font-family:var(--font-mono),monospace;font-size:12.5px;letter-spacing:.04em;color:#FFB4E9}
.pg-co-fact__big{margin:auto 0 0;font-size:clamp(52px,5.4vw,84px);line-height:.92;letter-spacing:-.045em;color:#fff;font-variant-numeric:tabular-nums}
.pg-co-fact__v{margin:0;max-width:44ch;font-size:15px;line-height:1.5;color:var(--pg-dark-muted)}
.pg-co-fact__v.is-big{margin-top:auto;font-size:clamp(22px,2vw,28px);line-height:1.2;letter-spacing:-.015em;color:#fff}
.pg-co-fact__logos{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;margin-top:auto}
.pg-co-fact__logos img{display:block;width:auto}
.pg-co-fact__seals{display:flex;flex-wrap:wrap;gap:12px;margin-top:auto}
.pg-co-fact__seals span{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;box-shadow:inset 0 0 0 1px rgb(255 180 233/.38);font-size:clamp(18px,1.6vw,22px);letter-spacing:-.01em;color:#fff}
.pg-co-fact__seals svg{color:#FFB4E9}
.pg-co-fact .pg-tile__light{background:radial-gradient(circle,rgb(255 255 255/.22) 1px,transparent 1.6px) 100% 0/16px 16px,radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgb(255 180 233/.1),transparent 70%)}
@media (hover:hover){.pg-co-fact:hover .pg-tile__light{opacity:1}}

/* ===== Contact: a switchboard (11 October 2026) ===================================================== */
.pg-reach-board{display:grid;gap:16px}
@media (min-width:640px){.pg-reach-board{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.pg-reach-board{grid-template-columns:1.3fr 1fr 1fr 1fr}}
.pg-reach{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-height:clamp(190px,15vw,230px);padding:clamp(22px,2.2vw,28px);
 background:linear-gradient(180deg,#F4F3F7 0%,#FFFFFF 90%);box-shadow:inset 0 0 0 1px var(--pg-line);transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease}
.pg-reach>*{position:relative;z-index:1}
.pg-reach .pg-icon{margin:0 0 auto}
.pg-reach h3{margin:28px 0 6px;font-family:var(--font-mono),monospace;font-size:12.5px;font-weight:400;letter-spacing:.04em;color:var(--pg-muted)}
.pg-reach__row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pg-reach__v{margin:0;min-width:0;font-size:clamp(17px,1.35vw,20px);line-height:1.25;letter-spacing:-.015em;color:var(--pg-ink);text-decoration:none}
a.pg-reach__v:hover{text-decoration:underline;text-underline-offset:4px}
.pg-reach__copy{all:unset;box-sizing:border-box;flex:none;display:grid;place-items:center;width:36px;height:36px;cursor:pointer;color:var(--pg-purple);box-shadow:inset 0 0 0 1px rgb(63 25 147/.22);transition:background-color .25s ease,color .25s ease}
.pg-reach__copy:hover{background:var(--pg-purple);color:#fff}
.pg-reach__copy:focus-visible{outline:2px solid var(--pg-purple);outline-offset:2px}
.pg-reach__copy [data-ic]{display:grid}
.pg-reach__copy [data-ic="done"],.pg-reach__copy.is-done [data-ic="copy"]{display:none}
.pg-reach__copy.is-done [data-ic="done"]{display:grid}
.pg-reach--lead{background:radial-gradient(90% 120% at 0% 0%,rgb(255 180 233/.22),transparent 60%),linear-gradient(160deg,#4A1FA8,#2A0F6B 75%);box-shadow:none}
.pg-reach--lead h3{color:rgb(255 255 255/.72)}
.pg-reach--lead .pg-reach__v{color:#fff}
.pg-reach--lead .pg-reach__copy{color:#fff;box-shadow:inset 0 0 0 1px rgb(255 255 255/.3)}
.pg-reach--lead .pg-reach__copy:hover{background:#fff;color:var(--pg-purple)}
.pg-reach:not(.pg-reach--lead) .pg-tile__light{background:radial-gradient(circle,rgb(63 25 147/.5) 1px,transparent 1.6px) 100% 0/16px 16px,radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgb(63 25 147/.06),transparent 70%)}
.pg-reach--lead .pg-tile__light{background:radial-gradient(circle,rgb(255 255 255/.22) 1px,transparent 1.6px) 100% 0/16px 16px,radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgb(255 180 233/.14),transparent 70%)}
@media (hover:hover){.pg-reach:hover{transform:translateY(-3px)}.pg-reach:hover .pg-tile__light{opacity:1}}

/* ===== Steps on phones: a rail (11 October 2026, the user's note) ==================================
   Below 768px a sequence was a stack of tall blocks, two to three screens long. It is now a timeline:
   each step's icon on a rail, its title, line and owner beside it; the rail draws as the steps play. */
@media (max-width:767px){
 .pg-steps{gap:0}
 .pg-step{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;align-items:start;padding:0 0 26px;border-top:0}
 .pg-step::before{display:none}
 .pg-step>.pg-icon{grid-column:1;grid-row:1 / span 3;position:relative;z-index:1;margin:0}
 .pg-step>:not(.pg-icon){grid-column:2}
 .pg-step>h3{margin:10px 0 4px;font-size:18px}
 .pg-step__owner{justify-self:start;margin-top:10px!important}
 .pg-step:not(:last-child){background:linear-gradient(var(--pg-line),var(--pg-line)) right 21px top 44px/2px calc(100% - 44px) no-repeat}
 :is(.pg-dark,.pg-purple,.pg-ex-ondark) .pg-step:not(:last-child){background-image:linear-gradient(rgb(255 255 255/.16),rgb(255 255 255/.16))}
 .pg-step::after{right:21px;left:auto;top:44px;bottom:0;width:2px;height:auto;transform:scaleY(0);transform-origin:top}
 .pg-step:last-child::after{display:none}
 .pg-steps:not(.is-anim) .pg-step.is-key::after,.pg-step.is-done::after,.pg-step.is-on::after{transform:none}
 .pg-steps:not(:has(.pg-icon)) .pg-step::before{display:grid;place-items:center;grid-row:1 / span 3;width:44px;height:44px;margin:0;background:var(--pg-alt);position:relative;z-index:1}
}

/* Overall audit (12 October 2026). Closed accordion panels (the Developers architecture list, the stage
   lists) were zero height but their links still took keyboard focus, so Tab moved into links that were
   not on screen. A closed panel is now hidden from focus and screen readers too, once it has closed. */
.pg-js .pg-co-arch__item:not(.is-on) .pg-co-arch__body>div,
.pg-js .pg-stage__item:not(.is-open) .pg-stage__body>div{visibility:hidden;transition:visibility 0s .5s}
/* Phones: the small text links get a tap area of about 40 px (WCAG asks 24 at least), drawn by an
   invisible ::before, so nothing moves. */
@media (max-width:767px){
 .pg-link,.pg-header__logo,.pg-ann a,.pg-reach__v{position:relative}
 .pg-link::before,.pg-header__logo::before,.pg-ann a::before,.pg-reach__v::before{content:"";position:absolute;inset:-10px -6px}
 .pg-header__logo::before{inset:-12px -8px}
}

/* Phones (12 October 2026, the overall audit): the Research statement at 34 px ran to four lines in
   English and five in Spanish; 30 px keeps it a statement in three or four. */
@media (max-width:639px){.pg-ex-fn__statement{font-size:30px}}

/* ===== Integrations (13 October 2026) ================================================================
   build_pages.py p_integrations(). The header and the categories' stage share one component: the live
   arabic.ai integrations page's orbit (below). In the stage the open category's tools come out from the
   mark onto the two rings, one after another (their scale is taken about the orbit's middle), and the
   other categories' are hidden, not dimmed; the view is square, as the orbit is. */
.pg-int-stage .pg-stage__view{aspect-ratio:1}
.pg-int-stage .sg{display:grid;place-items:center}
.pg-int-orbit--stage{width:min(86%,520px)}
.pg-int-stage .sg .pg-orbit__sat[data-on]{opacity:0;scale:.5;visibility:hidden;pointer-events:none;
  transition:opacity .3s ease,scale .7s cubic-bezier(.16,1,.3,1),visibility 0s linear .3s}
.pg-int-stage .sg .pg-orbit__sat[data-on].is-on{opacity:1;scale:1;visibility:visible;pointer-events:auto;
  transition:opacity .3s ease calc(var(--j) * 40ms),scale .7s cubic-bezier(.16,1,.3,1) calc(var(--j) * 40ms),visibility 0s}
.pg-orbit__cat{position:absolute;top:16px;right:16px;z-index:3;padding:5px 10px;background:#09090A;color:#fff;font-family:var(--font-mono),monospace;
  font-size:11px;letter-spacing:.06em;line-height:1.3;text-transform:uppercase;transition:opacity .3s ease}
.pg-int-stage .sg .pg-orbit__cat[data-on]:not(.is-on){opacity:0}
/* The features under each category read as chips on the tinted section (their fill was the section's). */
.pg-int-stage .pg-stage__chip{background:#fff;box-shadow:inset 0 0 0 1px var(--pg-line)}
/* The header's orbit: the live arabic.ai integrations page's component, in the container's units so
   it keeps its proportions at every size (460px at most: rings at 192 and 108px, the mark 112px, the
   logos 56px, the pulses from 110 to 440px). The rings and the logos turn in opposite directions, so
   the logos stay upright; the pulses grow from the mark and fade. Its circles are its own: the site's
   square corners do not apply here. */
.pg-int-orbit{position:relative;width:min(100%,460px);aspect-ratio:1;margin:0 auto;container-type:inline-size;--r-outer:41.74cqw;--r-inner:23.48cqw}
.pg-orbit__ring{position:absolute;inset:0;z-index:2;animation:pg-orbit-spin 60s linear infinite}
.pg-orbit__sat{position:absolute;top:50%;left:50%;width:12.17cqw;height:12.17cqw;
  transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(-1 * var(--a)))}
.pg-orbit__sat:hover,.pg-orbit__sat:focus-visible{z-index:20}
.pg-orbit__in{position:relative;display:grid;place-items:center;width:100%;height:100%;padding:16%;background:#fff;
  box-shadow:inset 0 0 0 1px #E8E6EE,0 8px 20px -10px rgb(20 10 50/.14);animation:pg-orbit-counter 60s linear infinite;
  transition:scale .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s ease}
.pg-orbit__in img{display:block;width:100%;height:100%;object-fit:contain}
.pg-orbit__sat:is(:hover,:focus-visible) .pg-orbit__in{scale:1.18;box-shadow:inset 0 0 0 1px rgb(63 25 147/.35),0 16px 32px -8px rgb(63 25 147/.42)}
.pg-orbit__tip{position:absolute;bottom:calc(100% + 10px);right:50%;transform:translateX(-50%) translateY(4px);white-space:nowrap;
  padding:6px 11px;background:#09090A;color:#fff;font-family:var(--font-mono),monospace;font-size:11px;letter-spacing:.06em;line-height:1.2;
  text-transform:uppercase;opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease}
.pg-orbit__sat:is(:hover,:focus-visible) .pg-orbit__tip{opacity:1;transform:translateX(-50%) translateY(0)}
.pg-int-orbit:hover :is(.pg-orbit__ring,.pg-orbit__in){animation-play-state:paused}
.pg-orbit__center{position:absolute;top:50%;left:50%;z-index:10;display:grid;place-items:center;width:24.35cqw;height:24.35cqw;
  transform:translate(-50%,-50%);background:var(--pg-purple);cursor:pointer;
  box-shadow:0 0 0 6px rgb(255 255 255/.9),0 0 0 7px rgb(63 25 147/.18),0 26px 56px -16px rgb(63 25 147/.65),0 4px 14px -6px rgb(20 10 50/.18)}
.pg-orbit__center svg{display:block;width:54%;height:auto;fill:#fff;filter:drop-shadow(0 6px 14px rgb(0 0 0/.18))}
.pg-orbit__scan{position:absolute;top:50%;left:50%;z-index:1;width:23.9cqw;height:23.9cqw;transform:translate(-50%,-50%);
  box-shadow:inset 0 0 0 2px var(--pg-purple);opacity:0;pointer-events:none;animation:pg-orbit-scan 4.5s cubic-bezier(.2,.6,.3,1) infinite}
.pg-orbit__scan+.pg-orbit__scan{animation-delay:2.25s}
/* The site's square corners are an !important rule in the base layer (brand.css), which outranks any
   unlayered rule; in the same layer, this more specific one wins. */
@layer base{.pg-int-orbit :is(.pg-orbit__in,.pg-orbit__center,.pg-orbit__scan){border-radius:50%!important}}
@keyframes pg-orbit-spin{to{transform:rotate(360deg)}}
@keyframes pg-orbit-counter{to{rotate:-360deg}}
@keyframes pg-orbit-scan{0%{width:23.9cqw;height:23.9cqw;opacity:.7}60%{width:60.87cqw;height:60.87cqw;opacity:.28}100%{width:95.65cqw;height:95.65cqw;opacity:0}}
/* The figures include words ("Two-way", "ISO 27001"), so they are set a size smaller and kept whole. */
.pg-int-stats .pg-stat b{font-size:clamp(30px,3.6vw,52px);white-space:nowrap}
/* Atelier inside Microsoft 365: the app icons lead the tiles. */
.pg-int-spot .pg-tile__logo{height:clamp(40px,3.4vw,52px);width:auto}
.pg-int-spot .pg-trio>:first-child .pg-tile__logo{height:clamp(52px,4.4vw,68px)}
/* Every integration (the design round, 13 October 2026): one row per category, its name beside a grid of
   its tools (logo, name, and what it is under the name), a single divider between categories. It was
   three columns of blocks with a hairline under every tool, which left the seventh category alone on a
   row. Phones: the name above, the tools two to a row. */
.pg-int-dir{margin-top:clamp(28px,3vw,48px);border-top:1px solid var(--pg-line)}
.pg-int-dir__cat{display:grid;gap:18px 32px;padding:clamp(24px,2.6vw,36px) 0;border-bottom:1px solid var(--pg-line)}
@media (min-width:900px){.pg-int-dir__cat{grid-template-columns:minmax(0,1fr) minmax(0,3fr);align-items:start}}
.pg-int-dir__cat h3{display:flex;align-items:center;gap:12px;margin:0;font-size:20px;font-weight:500;letter-spacing:-.01em;line-height:1.25}
.pg-int-dir__cat ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:20px 24px}
.pg-int-dir__cat li{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:12px;align-items:center}
.pg-int-dir__cat li img{grid-row:span 2;display:block;width:36px;height:36px}
.pg-int-dir__cat li b{align-self:end;font-weight:500;font-size:15px;line-height:1.25}
.pg-int-dir__cat li span{align-self:start;margin-top:3px;font-family:var(--font-mono),monospace;font-size:11.5px;line-height:1.3;color:var(--pg-muted)}
@media (max-width:640px){
 .pg-int-dir__cat ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px}
 .pg-int-dir__cat li{grid-template-columns:30px minmax(0,1fr);column-gap:10px}
 .pg-int-dir__cat li img{width:30px;height:30px}
 .pg-int-dir__cat li b{font-size:14px}
}
/* The figures follow the page header's bottom line: even room above and below them (they sat on the
   line, with the section's full padding under them). */
#figures.pg-sec{padding-block:clamp(40px,4.4vw,72px)}
@media (prefers-reduced-motion:reduce){.pg-int-orbit :is(.pg-orbit__ring,.pg-orbit__in){animation:none}.pg-orbit__scan{display:none}
 .pg-int-stage .sg .pg-orbit__sat[data-on],.pg-int-stage .sg .pg-orbit__sat[data-on].is-on{transition:none}}

/* ===== Partners: what each product partner runs on (13 October 2026, the design round) ===============
   build_pages.py scene_runs_on(). The partners' logos sit at the foot of the drawing as white marks on
   glass tiles; the open partner's tile turns white with its logo in colour, lifts and takes a pink ring.
   Marching dashes run from Arabic.ai through the model a partner runs on; marching dots (Stanford CRFM)
   evaluate the models. Those paths have no pathLength, so the dots are 6px apart and loop on -12px. */
.pg-co-runs .sg-ptile{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);z-index:1;display:grid;place-items:center;
  width:20.5cqw;height:10.5cqw;padding:1.7cqw 2cqw;background:rgb(255 255 255/.045);box-shadow:inset 0 0 0 1px rgb(255 255 255/.13);
  transform:translate(-50%,-50%);transition:transform .5s cubic-bezier(.16,1,.3,1),background-color .45s ease,box-shadow .45s ease}
.pg-co-runs .sg-ptile img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.6;transition:filter .45s ease,opacity .45s ease}
.pg-co-runs .sg .sg-ptile[data-on]:not(.is-on){opacity:1}
.pg-co-runs .sg-ptile.is-on{background:#fff;transform:translate(-50%,-50%) scale(1.07);
  box-shadow:0 0 0 2px #FFB4E9,0 24px 44px -20px rgb(255 180 233/.45)}
.pg-co-runs .sg-ptile.is-on img{filter:none;opacity:1}
.pg-co-runs .sg-chip--logo img{height:clamp(13px,3.1cqw,21px)}
.pg-co-runs .sg-track.sg-eval{stroke-width:1.6;stroke-linecap:round;stroke-dasharray:0 5}
.pg-co-runs .sg-flow.sg-eval{stroke:#FFB4E9;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:0 6}
.pg-co-runs .sg-flow.sg-eval.is-on{animation-name:sg-eval}
@keyframes sg-eval{to{stroke-dashoffset:-12}}
.pg-co-runs .sg-legend{position:absolute;left:3.5%;bottom:3%;z-index:1;display:flex;gap:16px;font-family:var(--font-mono),monospace;
  font-size:clamp(9.5px,1.6cqw,11px);letter-spacing:.06em;text-transform:uppercase;color:rgb(245 245 247/.6)}
.pg-co-runs .sg-legend span{display:inline-flex;align-items:center;gap:8px}
.pg-co-runs .sg-legend i{display:block;width:18px;height:0;border-top:2px dashed var(--pg-lilac)}
.pg-co-runs .sg-legend i.is-eval{border-top:2px dotted #FFB4E9}
@media (prefers-reduced-motion:reduce){.pg-co-runs .sg-ptile,.pg-co-runs .sg-ptile img{transition:none}
  .pg-co-runs .sg-flow.sg-eval.is-on{stroke-dasharray:0 6}}

/* ===== Legal: Terms and conditions, Privacy policy (20 October 2026) ====================================
   build_pages.py p_legal(). The page header's panel lists the facts (last updated, reading time, governing
   law, who to ask). The text uses the essay's reading layout: numbered sections beside the sticky contents
   rail, square purple bullets, the privacy page's labelled boxes, the contact details as a two-row card,
   and the legal notice set apart in the site's grey. Then the other document and contact, and on the
   privacy page the certifications on dark. */
.pg-legal-facts{display:grid;align-content:center;width:100%;height:100%;margin:0;padding:clamp(20px,3cqi,40px)}
.pg-legal-facts>div{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:16px;row-gap:2px;align-items:center;padding:clamp(14px,2cqi,20px) 0;border-top:1px solid var(--pg-line)}
.pg-legal-facts>div:last-child{border-bottom:1px solid var(--pg-line)}
.pg-legal-facts .pg-icon{grid-row:1/3}
.pg-legal-facts dt{font-family:var(--font-mono),ui-monospace,monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--pg-muted)}
.pg-legal-facts dd{margin:0;font-size:clamp(16px,1.35vw,19px);color:var(--pg-ink);overflow-wrap:anywhere}
.pg-legal-facts a{color:var(--pg-purple);text-decoration:none}
.pg-legal-facts a:hover{text-decoration:underline;text-underline-offset:3px}
.pg-legal .pg-toc a{display:flex;gap:10px;align-items:baseline}
.pg-legal .pg-legal-n{font-family:var(--font-mono),ui-monospace,monospace;font-size:11px;letter-spacing:.06em;color:var(--pg-muted)}
.pg-legal .pg-toc a.is-on .pg-legal-n{color:var(--pg-purple)}
.pg-legal .pg-toc-mobile a{display:flex;gap:10px;align-items:baseline}
.pg-legal-intro{padding:22px 24px;margin-bottom:8px!important;background:var(--pg-alt);border-left:2px solid var(--pg-purple);font-size:17px;line-height:1.65;color:var(--pg-ink)}
.pg-legal-sec h2{display:flex;gap:16px;align-items:baseline}
.pg-legal-sec h2 .pg-legal-n{flex:none;font-size:13px;color:var(--pg-purple);transform:translateY(-.15em)}
.pg-legal-sec ul{list-style:none;padding-left:0}
.pg-legal-sec li{position:relative;padding-left:22px}
.pg-legal-sec li::before{content:"";position:absolute;left:2px;top:.72em;width:6px;height:6px;background:var(--pg-purple)}
.pg-legal-sec b{font-weight:600;color:var(--pg-ink)}
.pg-legal-box{margin:0 0 16px;padding:20px 24px 6px;border:1px solid var(--pg-line)}
.pg-legal-box h3{margin:0 0 8px;font-family:var(--font-mono),ui-monospace,monospace;font-size:12px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--pg-purple)}
.pg-legal-box p,.pg-legal-box ul{margin-bottom:.9em}
.pg-legal-contact{display:grid;margin:8px 0 0;border-top:1px solid var(--pg-line)}
.pg-legal-contact>div{display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:2px;align-items:center;padding:18px 0;border-bottom:1px solid var(--pg-line)}
.pg-legal-contact .pg-icon{grid-row:1/3}
.pg-legal-contact dt{font-family:var(--font-mono),ui-monospace,monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--pg-muted)}
.pg-legal-contact dd{margin:0;font-size:17px;line-height:1.5;color:var(--pg-ink)}
.pg-legal-note{display:flex;gap:16px;margin:48px 0 0;padding:24px;background:var(--pg-alt);color:var(--pg-muted)}
.pg-legal-note>.pg-ico{flex:none;margin-top:2px;color:var(--pg-purple)}
.pg-legal-note p{margin:0;font-size:15.5px;line-height:1.6}
.pg-legal-note__k{font-family:var(--font-mono),ui-monospace,monospace;font-size:11.5px!important;letter-spacing:.1em;text-transform:uppercase}
.pg-legal-note__h{margin:6px 0 4px!important;font-size:18px!important;color:var(--pg-ink)}
.pg-legal-related{display:grid;gap:16px;margin-top:clamp(32px,4vw,48px)}
@media (min-width:768px){.pg-legal-related{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pg-legal-card{position:relative;display:flex;flex-direction:column;gap:10px;min-height:260px;padding:28px;overflow:hidden;background:var(--pg-purple);color:#fff;text-decoration:none}
.pg-legal-card--plain{background:#fff;color:var(--pg-ink)}
.pg-legal-card .pg-icon{margin-bottom:auto}
.pg-legal-card__k{margin:24px 0 0;font-family:var(--font-mono),ui-monospace,monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.72}
.pg-legal-card h3{margin:0;font-size:clamp(24px,2.2vw,30px);font-weight:400;letter-spacing:-.02em}
.pg-legal-card p:not(.pg-legal-card__k){margin:0;max-width:44ch;font-size:16px;line-height:1.55;opacity:.8}
.pg-legal-card .pg-link{margin-top:8px;color:inherit}
.pg-legal-comp{display:grid;gap:clamp(32px,4vw,64px);align-items:end}
@media (min-width:1024px){.pg-legal-comp{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.pg-legal-comp__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.pg-legal-comp__list li{display:flex;align-items:center;gap:14px;padding:18px;border:1px solid rgb(255 255 255/.14);font-size:17px;color:#fff}
.pg-legal-related .pg-legal-card:not(.pg-legal-card--plain) :is(h3,p,.pg-link){color:#fff}
.pg-legal-related .pg-legal-card:not(.pg-legal-card--plain) .pg-legal-card__k{color:rgb(255 255 255/.72)}
.pg-legal-card .pg-link{align-self:flex-start}
.pg-legal-related .pg-legal-card:not(.pg-legal-card--plain) .pg-link{color:#fff!important}

/* ===== Blog import (20 October 2026): tables, images, h4 in articles ===== */
.pg-prose table{width:100%;border-collapse:collapse;margin:0 0 1.4em;font-size:.95em;display:block;overflow-x:auto}
.pg-prose th,.pg-prose td{text-align:start;padding:10px 12px;border-bottom:1px solid var(--pg-line);vertical-align:top}
.pg-prose th{font-weight:600;background:var(--pg-alt)}
.pg-prose img{max-width:100%;height:auto;display:block;margin:1.2em 0}
.pg-prose figure img{margin:0}
.pg-prose .pg-author img{margin:0;height:72px} /* author photo: undo the article img margin and height:auto above */
.pg-post__meta b:empty{display:none} /* cards with no live category: no empty flex item before the date */
@media (min-width:1100px){.pg-reading > .pg-prose:only-child{grid-column:1 / -1;width:100%;max-width:680px;justify-self:center}} /* posts without a contents rail span the full reading column (same breakpoint as the 2-column .pg-reading) */
.pg-prose h4{font-size:1.05em;font-weight:600;margin:1.4em 0 .5em}