/* 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}

/* ---- The wall ---------------------------------------------------------------------------
   Two rules, both about never showing an empty cell.

   1. The column count is fixed, not auto-fit, and chosen so it divides the number of logos
      exactly. module.html computes it for the full set; module.js recomputes it from the
      VISIBLE set whenever a filter pill is pressed.

   2. The hairline lattice is drawn by the cells, as a right and bottom edge on each one,
      rather than by a coloured container showing through 1px gaps. So where there is no
      cell there is no line and no grey box - the card simply ends in its own white. A
      count that cannot divide (a prime above 8) therefore trails off into white instead
      of leaving the hole that a gap-and-backdrop lattice leaves. ---- */
/* Owner change, 15 Oct: a row that cannot be filled is CENTRED and short rather than
   left-aligned with a hole on the end. 17 logos at six across used to come out 6+6+5 with an
   empty sixth slot sitting in the bottom right; now the five centre themselves and the wall
   simply ends in its own white.

   Flex rather than grid is what buys that: flex-wrap with justify-content:center centres the
   last line on its own, so the rule holds for the filtered view too without module.js having
   to move anything. A full row of cells sums to exactly 100%, so centring is a no-op there and
   the rows above stay flush. */
.aglp-logos{display:flex;flex-wrap:wrap;justify-content:center;
background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.aglp-g-ink .aglp-logos{background:#171335;border-color:rgba(255,255,255,.13)}
.aglp-cell{background:transparent;display:flex;align-items:center;justify-content:center;padding:22px 14px;
flex:0 0 calc(100% / var(--lw-cols,7));
min-height:86px;min-width:0;filter:grayscale(1) opacity(.72);transition:filter .15s ease;text-decoration:none;
box-shadow:1px 0 0 var(--line),0 1px 0 var(--line)}
/* A centred short row has no card edge beside it, so its first cell has to draw its own left
   hairline or the row reads as starting with one over-wide cell. The last cell of that row keeps
   its right hairline for the same reason — on a FULL row that same hairline lands exactly on the
   card's inner edge and is clipped, so it costs nothing there. The template marks the cell;
   module.js re-marks it after a filter. */
.aglp-cut{box-shadow:-1px 0 0 var(--line),1px 0 0 var(--line),0 1px 0 var(--line)}
.aglp-g-ink .aglp-cut{box-shadow:-1px 0 0 rgba(255,255,255,.13),1px 0 0 rgba(255,255,255,.13),0 1px 0 rgba(255,255,255,.13)}
.aglp-g-ink .aglp-cell{box-shadow:1px 0 0 rgba(255,255,255,.13),0 1px 0 rgba(255,255,255,.13)}
.aglp-cell:hover{filter:none}
.aglp-cell img{max-width:100%;max-height:44px;height:auto;display:block}
.aglp-cell span{font-weight:900;font-size:14px;color:var(--muted);text-align:center}

/* ---- Category pills (same component as the Modules section) --------------- */
.aglp-pills{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 26px}
.aglp-pills.aglp-center{justify-content:center}
.aglp-pill{font:700 13.5px/1 Lato,"Helvetica Neue",Arial,sans-serif;padding:10px 17px;border-radius:999px;
cursor:pointer;background:var(--white);border:1.4px solid var(--line);color:var(--muted);
transition:border-color .18s ease,color .18s ease,background .18s ease}
.aglp-pill:hover{border-color:var(--ac);color:var(--ac)}
.aglp-pill:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.aglp-pill.is-on{background:var(--ac);border-color:var(--ac);color:#fff}
.aglp-g-ink .aglp-pill{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:var(--on-ink-2)}
.aglp-g-ink .aglp-pill.is-on{background:var(--ac);border-color:var(--ac);color:#0B0818}
.aglp-cell[hidden]{display:none}

@media(max-width:860px){.aglp-logos{--lw-cols:4!important}}
@media(max-width:560px){.aglp-logos{--lw-cols:3!important}}