/* Agilence landing pages — the WEBSITE token block, verbatim, with the prefix changed.
   Do not hand-edit the values: the whole point is that the two packages cannot drift.
   .aglp-h1 is the website's .agb-h. Landing-page-only additions come after it. */
.aglp{--ink:#232035;--muted:#5E5B73;--muted2:#9C9AA8;--kicker:#134D74;--fog:#F6F8FB;--mist:#EBF6FC;
--line:#E3E9F0;--white:#fff;--blue:#03A9F4;--interactive:#1A7CBA;--teal:#0F9E8C;--violet:#4F3ED6;
--on-ink-2:#C9D2E8;
--magic:linear-gradient(120deg,#0F9E8C 0%,#03A9F4 45%,#7B6CF6 100%);
--magic-light:linear-gradient(120deg,#4DE0CC 0%,#7CC3E9 45%,#A297F9 100%);
font-family:Lato,"Helvetica Neue",Arial,sans-serif;}
.aglp *{box-sizing:border-box}
/* THE TYPOGRAPHY FLOOR. An inherited font-family loses to ANY rule that matches the
   element itself, so a landing-page stylesheet styling bare h1/h2/h3 beats the face
   set on .aglp and the headlines came out in the template's serif, in capitals. The
   face and the casing are therefore stated on the elements, not inherited. Blunt on
   purpose: the wrong typeface on every landing page is a hard failure, and which
   stylesheet a given page loads is not ours to control.
   .aglp-kick keeps its own uppercase - only headings are forced back to sentence case. */
.aglp.aglp.aglp,.aglp.aglp.aglp h1,.aglp.aglp.aglp h2,.aglp.aglp.aglp h3,.aglp.aglp.aglp h4,
.aglp.aglp.aglp h5,.aglp.aglp.aglp h6,.aglp.aglp.aglp p,.aglp.aglp.aglp ul,.aglp.aglp.aglp ol,
.aglp.aglp.aglp li,.aglp.aglp.aglp a,.aglp.aglp.aglp span,.aglp.aglp.aglp div,
.aglp.aglp.aglp figure,.aglp.aglp.aglp figcaption,.aglp.aglp.aglp blockquote,.aglp.aglp.aglp label,
.aglp.aglp.aglp button,.aglp.aglp.aglp input,.aglp.aglp.aglp select,.aglp.aglp.aglp textarea,
.aglp.aglp.aglp strong,.aglp.aglp.aglp em,.aglp.aglp.aglp b,.aglp.aglp.aglp i,
.aglp.aglp.aglp h1 span,.aglp.aglp.aglp h2 span{font-family:Lato,"Helvetica Neue",Arial,sans-serif!important}
.aglp.aglp.aglp h1,.aglp.aglp.aglp h2,.aglp.aglp.aglp h3,.aglp.aglp.aglp h4,
.aglp.aglp.aglp h5,.aglp.aglp.aglp h6{text-transform:none!important;letter-spacing:normal!important;font-style:normal!important}
/* inherit, not left: the band decides the alignment, so the centred layouts still
   centre while a stylesheet that centres bare headings cannot reach them. */
.aglp.aglp.aglp h1,.aglp.aglp.aglp h2,.aglp.aglp.aglp h3,.aglp.aglp.aglp h4,
.aglp.aglp.aglp h5,.aglp.aglp.aglp h6,.aglp.aglp.aglp p,.aglp.aglp.aglp figcaption,
.aglp.aglp.aglp blockquote{text-align:inherit!important}
.aglp.aglp.aglp .aglp-h1{font-weight:900!important;letter-spacing:-.01em!important}
.aglp.aglp.aglp .aglp-h2,.aglp.aglp.aglp .aglp-h3{font-weight:900!important}
.aglp.aglp.aglp .aglp-kick{text-transform:uppercase!important;letter-spacing:.14em!important}
.aglp-band{padding:72px 28px}
.aglp-in{max-width:1180px;margin:0 auto}
.aglp-g-ink{background:radial-gradient(82% 100% at 87% 4%,rgba(105,82,226,.32) 0%,rgba(105,82,226,0) 54%),radial-gradient(60% 70% at 12% 108%,rgba(23,40,120,.5) 0%,rgba(23,40,120,0) 60%),linear-gradient(125deg,#08060F 0%,#130F2E 44%,#241B57 100%)}
.aglp-g-veil{background:radial-gradient(70% 60% at 0% 100%,rgba(123,108,246,.22) 0%,rgba(123,108,246,0) 60%),radial-gradient(60% 55% at 100% 100%,rgba(3,169,244,.14) 0%,rgba(3,169,244,0) 65%),radial-gradient(45% 45% at 0% 0%,rgba(15,158,140,.08) 0%,rgba(15,158,140,0) 60%),linear-gradient(150deg,#FDFDFE 0%,#EDF3FC 55%,#E9E6FA 100%)}
.aglp-g-fog{background:#F6F8FB}
.aglp-g-mist{background:#EBF6FC}
.aglp-kick{font-weight:900;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 12px;color:var(--kicker)}
.aglp-g-ink .aglp-kick{color:var(--on-ink-2)}
.aglp-h1{font-weight:900;font-size:40px;line-height:1.1;letter-spacing:-.01em;margin:0;color:var(--ink);text-wrap:balance}
.aglp-g-ink .aglp-h1{color:#fff}
.aglp-h2{font-weight:900;font-size:28px;line-height:1.15;margin:0;color:var(--ink);text-wrap:balance}
.aglp-g-ink .aglp-h2{color:#fff}
.aglp-p{font-size:16px;line-height:1.6;color:var(--muted);margin:14px 0 0;max-width:62ch}
.aglp-g-ink .aglp-p{color:var(--on-ink-2)}
/* Rich-text links. Nothing styled them, so an email address or a policy link typed
   into a lede took the browser default - dark blue, invisible on the ink ground.
   :not([class]) hits exactly the links an editor types and never the module's own
   buttons and cards, which all carry a class.
   Not var(--interactive): that is the BUTTON fill, and as link text at 14px it comes
   out 4.12-4.46:1 on the light grounds - under AA on three of the four. #166BA3
   clears 5.2:1 everywhere the brand puts body copy. */
.aglp a:not([class]){color:#166BA3;text-decoration:underline;text-underline-offset:2px}
.aglp a:not([class]):hover{color:#134D74}
.aglp-g-ink a:not([class]),.aglp-g-ink a:not([class]):hover{color:#9BD9D1}
.aglp-grad{background:var(--magic-light);-webkit-background-clip:text;background-clip:text;color:transparent}
.aglp-btns{display:flex;gap:13px;flex-wrap:wrap;margin-top:26px}
.aglp-btn{font-weight:700;font-size:14.5px;line-height:1;border-radius:999px;padding:13px 24px;
border:1.6px solid transparent;display:inline-flex;align-items:center;gap:9px;text-decoration:none;white-space:nowrap}
.aglp-btn-pri{background:var(--blue);border-color:var(--blue);color:#fff}
.aglp-btn-ghost{background:transparent;border-color:var(--blue);color:var(--kicker)}
.aglp-g-ink .aglp-btn-ghost{border-color:rgba(255,255,255,.42);color:#fff}
.aglp-head{margin-bottom:26px}
.aglp-card{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:22px;
display:flex;flex-direction:column;text-decoration:none}
.aglp-g-ink .aglp-card{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.13)}
.aglp-card h3{margin:0;font-size:18px;font-weight:700;color:var(--ink)}
.aglp-g-ink .aglp-card h3{color:#fff}
.aglp-card p{margin:8px 0 0;font-size:14.5px;line-height:1.55;color:var(--muted)}
.aglp-g-ink .aglp-card p{color:var(--on-ink-2)}
.aglp-hov{transition:transform .2s ease,box-shadow .2s ease}
.aglp-hov:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(35,32,53,.10)}
.aglp-grid{display:grid;gap:16px}
.aglp-cta{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;
color:var(--kicker);text-decoration:none;margin-top:auto;padding-top:14px}
.aglp-g-ink .aglp-cta{color:#7CC3E9}
.aglp-center{text-align:center}
.aglp-center .aglp-p{margin-left:auto;margin-right:auto}
.aglp-center .aglp-btns{justify-content:center}
@media(max-width:700px){.aglp-band{padding:48px 20px}.aglp-h1{font-size:32px}.aglp-h2{font-size:24px}}
@media(prefers-reduced-motion:reduce){.aglp *,.aglp *::before,.aglp *::after{transition:none!important;animation:none!important}}

/* ---- Landing-page-only additions. Nothing here changes the scale above. ---- */
/* .aglp * does not match .aglp itself, so the band gets its own box-sizing. */
.aglp{--on-ink-accent:#9BD9D1;box-sizing:border-box}
/* Headline sizes are the website's; landing pages only need the spacing under them. */
.aglp-h1{margin:0 0 20px}
.aglp-h2{margin:0 0 14px}
.aglp-h3{font-weight:900;font-size:18px;line-height:1.22;margin:0;color:var(--ink)}
.aglp-g-ink .aglp-h3{color:#fff}
.aglp-sm{font-size:14.5px;line-height:1.55;color:var(--muted);margin:0}
.aglp-g-ink .aglp-sm{color:var(--on-ink-2)}
.aglp-p{margin:0 0 6px}
.aglp-head{max-width:680px;margin:0 0 40px}
.aglp-center .aglp-head{margin-left:auto;margin-right:auto}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){.aglp-grad{color:#7CC3E9;background:none}}

/* ---- The arched foot, ported from the website headers ------------------------
   The band is MASKED, not covered with a coloured shape: two mask layers, a plain
   rectangle for everything above the arch strip and the arch itself for the strip.
   The negative bottom margin slides the next section up behind the strip so the cut
   reveals ITS ground, which is why this module never needs to be told what colour
   comes next. The +1px on the first layer stops the two layers meeting on a
   fractional device-pixel boundary, which showed as a pale hairline above the curve.
   Both are documented in the project notes of 12 and 14 October. */
.aglp-archband{--aglp-arch:clamp(8px,1.18vw,26px);position:relative;overflow:hidden;z-index:2;
margin-bottom:calc(-1 * var(--aglp-arch));
-webkit-mask-image:linear-gradient(#000,#000),url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 24' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H1000 V24 Q500 -24 0 24 Z' fill='%23000'/%3E%3C/svg%3E");
mask-image:linear-gradient(#000,#000),url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 24' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H1000 V24 Q500 -24 0 24 Z' fill='%23000'/%3E%3C/svg%3E");
-webkit-mask-size:100% calc(100% - var(--aglp-arch) + 1px),100% var(--aglp-arch);
mask-size:100% calc(100% - var(--aglp-arch) + 1px),100% var(--aglp-arch);
-webkit-mask-position:top,bottom;mask-position:top,bottom;
-webkit-mask-repeat:no-repeat,no-repeat;mask-repeat:no-repeat,no-repeat}
/* The crest rides just inside the cut, on the same curve family, so the mask does
   not shave it in half. */
.aglp-arch{position:absolute;left:0;right:0;bottom:0;height:var(--aglp-arch);z-index:3;pointer-events:none}
.aglp-archline{position:absolute;left:0;bottom:0;width:100%;height:100%;opacity:.5}

.aglp-cards{display:grid;gap:24px;grid-template-columns:repeat(var(--rc-cols,3),minmax(0,1fr))}
.aglp-cards-2{--rc-cols:2}.aglp-cards-3{--rc-cols:3}.aglp-cards-4{--rc-cols:4}
.aglp-rc{display:flex;flex-direction:column;text-decoration:none;color:inherit;overflow:hidden;
transition:transform .2s ease,box-shadow .2s ease}
a.aglp-rc:hover{transform:translateY(-4px);box-shadow:0 1px 2px rgba(35,32,53,.04),0 16px 34px rgba(35,32,53,.10)}
a.aglp-rc:focus-visible{outline:3px solid #03A9F4;outline-offset:3px}
.aglp-cards-icon .aglp-rc,.aglp-cards-none .aglp-rc{padding:30px 28px 32px}
.aglp-rc-body{display:flex;flex-direction:column;gap:10px}
.aglp-cards-poster .aglp-rc-body{padding:22px 24px 26px}
.aglp-rc-eye{font-weight:900;text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:var(--kicker)}
/* Scoped under their own block, and the inner <p> restates size and colour:
   the shared token block carries .aglp-card p and .aglp-card h3 from the website
   set, and a bare single-class rule loses to them. That is what silently turned
   speaker names and card body copy into 14.5px muted text. */
.aglp-rc .aglp-rc-p{font-size:16px;line-height:1.6;color:var(--muted)}
.aglp-rc .aglp-rc-p p{margin:0;font-size:16px;line-height:1.6;color:var(--muted)}
.aglp-rc-cta{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:15px;
color:var(--interactive);margin-top:auto;padding-top:6px}
.aglp-rc-ic{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.aglp-t-blue{background:#EBF6FC;color:#1A7CBA}
.aglp-t-teal{background:#E4F5F2;color:#0F7F70}
.aglp-t-violet{background:#EFECFE;color:#5B4CD6}
.aglp-rc-ph{position:relative;display:block;aspect-ratio:16/9;background:#0F0C22;overflow:hidden}
.aglp-rc-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.aglp-rc-badge{position:absolute;right:12px;bottom:12px;background:#232035;color:#fff;
font-weight:700;font-size:12px;padding:5px 11px;border-radius:999px}
/* On the dark ground the white card would glare, so it becomes a lifted panel. */
.aglp-g-ink .aglp-rc{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.13)}
.aglp-g-ink .aglp-rc .aglp-rc-p,.aglp-g-ink .aglp-rc .aglp-rc-p p{color:var(--on-ink-2)}
.aglp-g-ink .aglp-rc-eye,.aglp-g-ink .aglp-rc-cta{color:#7CC3E9}
@media(max-width:980px){.aglp-cards-4{--rc-cols:2}}
@media(max-width:860px){.aglp-cards{--rc-cols:2!important}}
@media(max-width:620px){.aglp-cards{--rc-cols:1!important}}

/* 4:3 resource covers are shown whole: they carry the title and wordmark to the edges. */
.aglp-cards-43 .aglp-rc-ph{aspect-ratio:4/3}