/* ==== self-hosted fonts (scripts/use_local_fonts.py) ==== */
/* Self-hosted typefaces. Generated by scripts/build_fonts.py — do not edit.
   Fetched from Google Fonts once and served from our own origin, so no
   visitor request reaches fonts.gstatic.com. Subsets: latin, latin-ext.
   latin-ext carries the Turkish characters and must not be dropped. */

/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-600-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-600-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-600-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-600-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-600-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-600-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fragment Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/fragment-mono-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fragment Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/fragment-mono-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/literata-300700-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/literata-300700-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/literata-300700-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/literata-300700-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/source-sans-3-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/source-sans-3-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/source-sans-3-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/source-sans-3-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/source-sans-3-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/source-sans-3-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==== end self-hosted fonts ==== */

/* APH bake-off pages — shared design system (extracted from aph-design kit) */
:root{
  --az:#1C9FE2;--az-br:#5CC4F3;--az-glow:#7FE0FF;--amber:#EBB660;--amber-br:#F5CE8B;
  --ink:#05070B;--ink2:#080B11;--ink3:#0B1622;
  --w0:#F6F9FC;--w1:#AEBECD;--w2:#6C7C8C;--w3:#465563;
  --gt:linear-gradient(96deg,#F0FAFF,#8FDCFF 45%,#38B6F5);
  --gt-amber:linear-gradient(96deg,#FFF7EA,#F5CE8B 45%,#E0A845);
  --grad-cta:linear-gradient(135deg,#1C9FE2,#0E84C6);
  --grad-cta-amber:linear-gradient(135deg,#EBB660,#C98F35);
  --surface-chip:linear-gradient(160deg,rgba(30,40,52,.92),rgba(16,22,30,.85));
  --surface-pill:rgba(8,12,18,.88);--surface-tag:rgba(92,196,243,.14);
  --border-subtle:1px solid rgba(255,255,255,.07);--border-card:1px solid rgba(255,255,255,.10);
  --border-hover:rgba(92,196,243,.55);--border-accent:1px solid rgba(92,196,243,.30);
  --border-ghost:1px solid rgba(255,255,255,.16);
  --shadow-card:0 20px 46px -26px rgba(0,0,0,.8);
  --shadow-cta:0 0 0 1px rgba(92,196,243,.3),0 24px 60px -16px rgba(14,132,198,.7);
  --shadow-cta-amber:0 0 0 1px rgba(235,182,96,.3),0 24px 60px -16px rgba(201,143,53,.6);
  --fd:"Archivo",sans-serif;--fb:"Source Sans 3",sans-serif;--fm:"Fragment Mono",monospace;
  --ease:cubic-bezier(.2,.6,.2,1);--nav-h:76px;--mx:6vw;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--ink);color:var(--w1);font:400 17px/1.55 var(--fb);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:rgba(28,159,226,.35);color:#fff}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:50;display:flex;align-items:center;
  gap:clamp(30px,3.2vw,58px);padding:0 var(--mx);
  background:linear-gradient(180deg,rgba(5,7,11,.92),rgba(5,7,11,.55) 70%,transparent)}
/* The logo is a flex item, and a flex item shrinks by default. Below ~900px
   the links, the CTA and the burger claim more than the bar has, so the anchor
   was compressed — and because img{max-width:100%} then caps the image at that
   squeezed width while height stays pinned at 42px, the mark itself was drawn
   narrow: 119x42 on an iPhone 12 where its own proportions are 185x42. It read
   as a condensed, wrong-looking logo on every page. flex:none stops the anchor
   shrinking; max-width:none stops the global image cap reaching it. Neither
   changes anything above the breakpoint, where the bar was never short of room. */
.nav .logo{flex:none;display:flex;align-items:center}
.nav .logo img{height:42px;width:auto;max-width:none}
.nav .links{display:flex;gap:clamp(20px,2vw,32px);align-items:center;flex:1;min-width:0}
.nav .links .navcta{margin-left:auto}
.nav .navlink{font:500 15px/1 var(--fb);color:var(--w1);text-decoration:none;position:relative;padding:4px 0;transition:color .2s}
.nav .navlink:hover{color:#fff}
.nav .navlink::after{content:"";position:absolute;left:0;bottom:-2px;height:1.5px;width:0;background:var(--az);transition:width .25s}
.nav .navlink:hover::after{width:100%}
.nav .navcta{font:600 13px/1 var(--fb);color:#fff;text-decoration:none;padding:10px 18px;border-radius:11px;
  background:var(--grad-cta);box-shadow:0 0 0 1px rgba(92,196,243,.3),0 14px 34px -12px rgba(14,132,198,.7)}
.nav .navcta:hover{filter:brightness(1.07)}
@media(max-width:820px){.nav .links .navlink{display:none}}

/* ---------- typography helpers ---------- */
.kicker{font:400 10.5px/1 var(--fm);letter-spacing:.22em;text-transform:uppercase;color:var(--az-br)}
.kicker.direct{color:var(--amber)}
.gt{background:var(--gt);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 4px rgba(5,7,11,.85)) drop-shadow(0 6px 22px rgba(5,7,11,.6))}
.gt.direct{background:var(--gt-amber);-webkit-background-clip:text;background-clip:text}
h1{font:800 clamp(34px,5.4vw,74px)/1 var(--fd);letter-spacing:-.026em;color:#fff}
h2{font:800 clamp(28px,4.2vw,52px)/1.02 var(--fd);letter-spacing:-.024em;color:#fff}
h3{font:800 clamp(19px,2vw,24px)/1.15 var(--fd);letter-spacing:-.02em;color:#fff}
/* The measure is part of the role, not something each page re-decides. Without
   it a lead runs the full 1240px wrap and measured 86 characters a line on
   programmatic.html — well past the 65-75 a reader tracks comfortably. The home
   page had already capped its own at 74ch; this makes that the role's default
   everywhere. */
.lead{font:400 clamp(16px,1.35vw,19px)/1.6 var(--fb);color:var(--w1);max-width:72ch}
.mono-label{font:400 10.5px/1.5 var(--fm);letter-spacing:.2em;text-transform:uppercase;color:var(--w2)}

/* ---------- sections ---------- */
.sec{padding:clamp(84px,10vw,150px) var(--mx);position:relative}
.sec-head{max-width:880px;margin:0 auto 54px;text-align:center}
.sec-head .kicker{display:block;margin-bottom:18px}
.sec-head p{margin-top:20px}
.wrap{max-width:1240px;margin:0 auto}
.hairline{border:0;border-top:1px solid rgba(255,255,255,.07);margin:0 var(--mx)}

/* ---------- components ---------- */
.cta{display:inline-flex;gap:10px;align-items:center;padding:16px 30px;border-radius:14px;
  font:600 15px/1 var(--fb);color:#fff;cursor:pointer;text-decoration:none;border:0;
  background:var(--grad-cta);box-shadow:var(--shadow-cta);transition:filter .2s}
.cta:hover{filter:brightness(1.09)}
.cta:focus-visible{outline:2px solid var(--az-br);outline-offset:3px}
.cta.ghost{background:none;border:var(--border-ghost);box-shadow:none}
.cta.ghost:hover{border-color:rgba(255,255,255,.34)}
.cta.direct{background:var(--grad-cta-amber);box-shadow:var(--shadow-cta-amber)}
.pill{display:inline-flex;align-items:center;gap:8px;font:400 10.5px/1 var(--fm);letter-spacing:.22em;text-transform:uppercase;
  color:var(--az-br);padding:10px 18px;border-radius:999px;border:var(--border-accent);background:var(--surface-pill)}
.pill.direct{color:var(--amber);border-color:rgba(235,182,96,.32)}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.card{background:var(--surface-chip);border:var(--border-card);border-radius:15px;padding:30px;
  box-shadow:var(--shadow-card);transition:border-color .25s,transform .3s var(--ease),box-shadow .3s}
/* A few offerings have no page of their own, so their card is a selection
   control rather than a link. As <a href="#"> it jumped to the top of the
   page and announced itself to a screen reader as a link to nowhere; as a
   button it is inert until the page enters picking mode. These reset the UA
   button chrome so it renders identically to the anchor version. */
button.card{appearance:none;-webkit-appearance:none;font:inherit;color:inherit;
  text-align:left;width:100%;display:block;cursor:pointer;margin:0}
.card:hover{transform:translateY(-4px);border-color:var(--border-hover);
  box-shadow:0 26px 52px -24px rgba(0,0,0,.85),0 0 22px -6px rgba(92,196,243,.35)}
.card.direct:hover{border-color:rgba(235,182,96,.55);box-shadow:0 26px 52px -24px rgba(0,0,0,.85),0 0 22px -6px rgba(235,182,96,.3)}
.chip{display:inline-flex;align-items:center;gap:10px;padding:11px 16px;border-radius:15px;
  background:var(--surface-chip);border:var(--border-card);box-shadow:var(--shadow-card);
  font:600 13px/1.3 var(--fb);color:#EAF1F8;transition:border-color .25s,transform .3s var(--ease)}
.chip:hover{transform:translateY(-3px);border-color:var(--border-hover)}
.tag{font:400 9px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--az-br);
  background:var(--surface-tag);padding:4px 8px;border-radius:6px;white-space:nowrap}
.tag.direct{color:var(--amber);background:rgba(235,182,96,.12)}
.tag.dev{color:var(--w2);background:rgba(255,255,255,.06)}
.stat .n{font:800 clamp(26px,3.2vw,44px)/1 var(--fd);letter-spacing:-.018em;
  background:var(--gt);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat .l{font:400 10.5px/1.5 var(--fm);letter-spacing:.2em;text-transform:uppercase;color:var(--w2);margin-top:8px}
.stat.direct .n{background:var(--gt-amber);-webkit-background-clip:text;background-clip:text}

/* ---------- FAQ (details, content always in DOM) ---------- */
.faq{max-width:860px;margin:0 auto}
.faq details{border-bottom:1px solid rgba(255,255,255,.08)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:24px 4px;font:600 clamp(16px,1.5vw,18.5px)/1.4 var(--fb);color:#fff;transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ind{flex:none;width:24px;height:24px;border-radius:50%;border:var(--border-ghost);position:relative;transition:border-color .25s,transform .3s var(--ease)}
.faq summary .ind::before,.faq summary .ind::after{content:"";position:absolute;background:var(--w1);transition:background .2s}
.faq summary .ind::before{width:10px;height:1.5px;left:6px;top:10.5px}
.faq summary .ind::after{width:1.5px;height:10px;left:10.5px;top:6px;transition:transform .3s var(--ease)}
.faq details[open] summary .ind{border-color:var(--border-hover);transform:rotate(0)}
.faq details[open] summary .ind::after{transform:scaleY(0)}
.faq .a{padding:0 40px 26px 4px;color:var(--w1);max-width:760px}
.faq .a strong{color:var(--w0)}

/* ---------- footer ---------- */
.footer{border-top:1px solid rgba(255,255,255,.07);padding:54px var(--mx) 64px;display:flex;flex-wrap:wrap;
  gap:28px;align-items:center;justify-content:space-between;background:var(--ink2)}
/* The footer carried the lockup at 26px (22px on Resources), which puts the
   three ARCHON / PROGRAMMATIC / HOUSE lines at about 4px each — present but
   not readable. The owner asked for +25%; that only reaches ~5px, so this
   goes to 42px, the height the header already uses. One lockup size for the
   site, and the footer has the room: its middle is empty at every width. */
.footer img{height:42px;width:auto}
.footer .cols{display:flex;gap:26px;flex-wrap:wrap}
.footer a{font:500 13px/1 var(--fb);color:var(--w2);text-decoration:none;transition:color .2s}
.footer a:hover{color:var(--w0)}
.footer .fine{font:400 13px/1.6 var(--fb);color:var(--w3);width:100%}

/* ---------- texture & motion ---------- */
.grain{position:fixed;inset:0;pointer-events:none;opacity:.08;z-index:60;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  *{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
}

@media(min-width:721px){.nowrap-lg{white-space:nowrap}}

/* ---------- responsive ---------- */
@media(max-width:720px){
  .sec{padding:64px var(--mx)}
  .footer{padding:44px var(--mx)}
}



/* ---------- hero replay ---------- */
/* The hero animation is a first-impression device, not a toll charged on every
   visit. A visitor who has watched it gets the finished frame straight away and
   this offers the animation back on demand. Sits on the mono-strong step so it
   clears the readability floor, and stays available under reduced motion —
   that setting means "do not move without my asking", not "never". */
.heroreplay{position:absolute;right:var(--mx);bottom:26px;z-index:4;
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font:400 12px/1 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--w1);
  background:rgba(8,12,18,.72);border:var(--border-ghost);border-radius:999px;padding:9px 14px;
  transition:color .2s,border-color .2s,opacity .3s}
.heroreplay:hover{color:#fff;border-color:var(--border-hover)}
.heroreplay:focus-visible{outline:2px solid var(--az-br);outline-offset:3px}
.heroreplay svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.heroreplay[hidden]{display:none}
@media(max-width:720px){.heroreplay{bottom:16px;right:16px;padding:8px 12px}}



/* ---------- touch targets ----------
   A link set as a line of 13px type has a 13px hit area. That is fine for a
   cursor, which lands where it is pointed, and about a third of what a thumb
   needs: WCAG 2.2 asks for 24px, Apple and Android both ask for 44. Measured
   on an iPhone 12, the footer's six links were 13px tall and the header CTA
   31px.

   The footer links get real height rather than an invisible enlarged box.
   Widening the hit area alone would make neighbouring targets overlap at a
   26px row gap, so a thumb aimed at Products would land on Publishers — the
   links need separating, not just enlarging.

   Every rule is inside the query. Nothing above 820px moves. */
@media(max-width:820px){
  .nav .navcta{display:inline-flex;align-items:center;min-height:44px}
  .footer{flex-direction:column;align-items:flex-start;gap:14px}
  .footer .cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px;width:100%}
  .footer .cols a{display:flex;align-items:center;min-height:44px}
  .footer .fine{margin-top:4px}
  /* The height belongs on the pill, not on the link inside it. Only one of the
     three credential chips wraps an <a>, so putting min-height there grew that
     one alone — the GCPP pill stood taller and wider than its two siblings. On
     the chip it lifts all three equally, and the anchor stretches to fill it so
     the whole pill is still the tap target. */
  .credrow .chip{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
  .credrow .chip a{display:flex;align-items:center;align-self:stretch}
  .stackrows .srow a{display:inline-flex;align-items:center;min-height:44px}
  /* a primary action should not be narrower than the thumb that finds it */
  .cta{min-height:48px}
}



/* ---- footer legal row (added by scripts/add_footer_legal.py) ---- */
.legalrow{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:10px}
.legalrow a{font:400 13px/1.5 var(--fb);color:var(--w1);text-decoration:none}
.legalrow a:hover{color:var(--az-br)}
@media(max-width:820px){.legalrow{gap:0 16px}.legalrow a{min-height:44px;display:flex;align-items:center}}

/* === nav menu: generated by scripts/build_nav.py === */
.nav{overflow:visible}
/* The bar's own geometry, pinned here rather than inherited from each sheet.
   It used to take its inset from --mx, which is 6vw on the marketing pages and
   clamp(18px,5vw,48px) on Resources — so the logo sat at 86px in one section
   and 48px in the other, and the links and CTA moved with it. --mx still
   governs each section's page margins; only the header is held in common. */
.nav{padding:0 var(--nav-mx,6vw);gap:clamp(30px,3.2vw,58px)}
.nav .links{gap:clamp(20px,2vw,32px)}
.navtoggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.navitem{position:relative;display:flex;align-items:center}
/* a hover bridge, so the pointer can cross the gap to the panel */
.navitem::after{content:"";position:absolute;top:100%;left:-12px;right:-12px;height:18px}
.navpanel{position:absolute;top:calc(100% + 15px);left:-14px;min-width:296px;max-width:min(360px,86vw);
  padding:9px;border-radius:14px;background:rgba(8,11,17,.98);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 28px 64px -22px rgba(0,0,0,.86);opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-7px);transition:opacity .2s var(--ease),transform .2s var(--ease);z-index:70}
.navitem:hover>.navpanel,.navitem:focus-within>.navpanel{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.navitem:last-of-type>.navpanel{left:auto;right:-14px}
.navpanel a{display:block;padding:10px 12px;border-radius:10px;text-decoration:none;transition:background .18s}
.navpanel a:hover,.navpanel a:focus-visible{background:rgba(28,159,226,.14)}
.navpanel a b{display:block;font:600 13px/1.35 var(--fb);color:#fff}
/* third level: always visible, indented under its parent rather than hidden
   behind a second hover */
.navsub{margin:2px 0 4px 13px;padding-left:11px;border-left:1px solid rgba(255,255,255,.12)}
.navsub a b{font-weight:500;font-size:13px}
.navpanel a i{display:block;font-style:normal;font:400 13px/1.5 var(--fb);color:var(--w1);margin-top:2px}
/* one right-hand group on every page. The CTA takes the Resources treatment
   the owner picked — mono, uppercase, square-cornered gradient block — which
   replaces the marketing pages' rounded Inter button. */
/* Sizes here are ramp steps, not free values: 13 / 15 on the text ramp. The
   generator used to emit 13.5, 14.5 and 12, which are off it — running this
   script reverted the ramp pass on both stylesheets and moved every nav panel
   by a pixel or two. Keep them on the ramp.
   the last differences between the three headers: Resources drew the logo at
   30px and its links at 13.5px. Size only — colour stays with each sheet so
   the Resources header still follows the reader's theme. */
/* A flex item shrinks by default, and below ~900px the links, the CTA and the
   burger want more than the bar has — so the anchor was squeezed, and since
   img{max-width:100%} then caps the image at that width while the height
   stays pinned, the mark itself was drawn narrow: 119x42 on an iPhone 12 where
   its own proportions are 185x42. Above the breakpoint the bar was never short
   of room, so neither declaration changes the desktop header. */
.nav .logo{flex:none;display:flex;align-items:center}
.nav .logo img{height:42px;width:auto;max-width:none}
.nav .navlink{font-size:15px;font-weight:500;white-space:nowrap}
.navr{margin-left:auto;display:flex;align-items:center;gap:11px;min-width:0}
.nav .navcta{font:400 12px/1 var(--fm);letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;padding:11px 16px;border-radius:0;white-space:nowrap;box-shadow:none;
  background:var(--grad-cta);color:#04121D;transition:filter .2s}
.nav .navcta:hover{filter:brightness(1.08)}
.navsec,.navsecl{display:none}
.navburger{display:none;width:40px;height:40px;border-radius:10px;border:1px solid rgba(255,255,255,.12);
  cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px;margin-left:12px;flex:none}
.navburger span{display:block;width:17px;height:1.5px;background:#fff;transition:transform .25s,opacity .2s}
.navtoggle:focus-visible ~ .navburger{outline:2px solid var(--az-br,#5CC4F3);outline-offset:2px}
@media(max-width:820px){
  .navburger{display:flex;margin-left:auto;order:9}
  .navtoggle:checked ~ .navburger span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
  .navtoggle:checked ~ .navburger span:nth-child(2){opacity:0}
  .navtoggle:checked ~ .navburger span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
  /* Height is set rather than derived from bottom:0, because .nav is not always
     the same containing block. On the Resources sheet it carries a
     backdrop-filter, and an element with one becomes the containing block for
     its fixed descendants — so bottom:0 resolved against the 58px bar instead
     of the viewport and the drawer opened 59px tall, showing one row with the
     rest cut off. top:var(--nav-h) lands correctly either way: measured from
     the viewport on the marketing sheet, and from .nav's own top edge — which
     is the viewport's — on the Resources one. */
  .nav .links{display:none;position:fixed;top:var(--nav-h);left:0;right:0;bottom:auto;z-index:65;
    height:calc(100vh - var(--nav-h));height:calc(100dvh - var(--nav-h));
    flex-direction:column;align-items:stretch;gap:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
    background:var(--ink);padding:14px var(--mx) 44px;border-top:1px solid rgba(255,255,255,.12)}
  .navtoggle:checked ~ .links{display:flex}
  /* Every section used to be open at once, so reaching Company or Resources
     meant scrolling past thirty-odd links. Each is now a disclosure: the menu
     opens as six rows and a CTA, all of it within one screen. */
  .nav .links>.navitem>.navlink{display:none}
  .navsec{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
  .navsecl{display:flex;align-items:center;justify-content:space-between;gap:12px;
    font:500 15px/1 var(--fb);color:#fff;padding:17px 2px;min-height:54px;cursor:pointer}
  .navsecl::after{content:"";flex:none;width:8px;height:8px;margin-right:5px;opacity:.65;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg) translate(-2px,-2px);transition:transform .22s var(--ease)}
  .navsec:checked ~ .navsecl::after{transform:rotate(-135deg) translate(-2px,-2px)}
  .navsec:focus-visible ~ .navsecl{outline:2px solid var(--az-br,#5CC4F3);outline-offset:2px}
  .nav .links .navitem{display:block;border-bottom:1px solid rgba(255,255,255,.12)}
  .navitem::after{display:none}
  .navpanel{display:none;position:static;opacity:1;visibility:visible;pointer-events:auto;transform:none;
    min-width:0;max-width:none;padding:0 0 10px;background:none;border:0;box-shadow:none}
  .navsec:checked ~ .navpanel{display:block}
  .navpanel a{padding:9px 0 9px 13px;border-left:1px solid rgba(255,255,255,.12);border-radius:0}
  .nav .links .navcta{margin:18px 0 0;text-align:center}
}
/* The bar's own budget. At 390px the full-size mark (185px), a nowrap CTA and
   the 40px burger come to more than the width, which is what forced the logo
   to give way in the first place. Below the burger breakpoint the mark steps
   down and the bar tightens, so all three fit at their true proportions. */
@media(max-width:560px){
  .nav{gap:12px;padding:0 18px}
  .nav .logo img{height:32px}
  .navr{gap:8px}
  .nav .navcta{padding:10px 12px;font-size:11px;letter-spacing:.06em}
  .navburger{margin-left:6px}
}
@media(max-width:380px){
  /* At 320px the bar's contents came to 370px and the burger ran off the
     right edge — clipped by overflow-x:hidden, so the menu could not be
     opened at all. Everything tightens here so the three still fit. */
  .nav{gap:8px;padding:0 12px}
  .nav .logo img{height:28px}
  .navr{gap:6px}
  .nav .navcta{padding:9px 10px;font-size:10.5px;letter-spacing:.04em}
  .navburger{width:36px;height:36px;margin-left:4px}
}
/* === end nav menu === */