/* 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-q{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:24px;display:flex;flex-direction:column}
.aglp-g-ink .aglp-q{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.13)}
.aglp-mk{font-weight:900;font-size:30px;line-height:.6;color:var(--kicker);display:block}
.aglp-g-ink .aglp-mk{color:#7CC3E9}
.aglp-mk-c{text-align:right;margin-top:10px}
.aglp-qb{margin-top:12px;font-size:15px;line-height:1.6;color:var(--ink)}
.aglp-g-ink .aglp-qb{color:#fff}
.aglp-who2{display:flex;align-items:center;gap:11px;margin-top:16px;padding-top:15px;border-top:1px solid var(--line)}
/* The attribution sits on the card's bottom edge in BOTH layouts, so names line up
   across a row instead of floating wherever the quote happens to end. */
.aglp-q .aglp-who2{margin-top:auto}
.aglp-g-ink .aglp-who2{border-top-color:rgba(255,255,255,.16)}
.aglp-who2 img{max-width:64px;max-height:34px;height:auto;display:block;flex:none}
.aglp-nm{font-size:13.5px;font-weight:700;color:var(--ink)}
.aglp-g-ink .aglp-nm{color:#fff}
.aglp-rl{font-size:12.5px;color:var(--muted);line-height:1.4}
.aglp-g-ink .aglp-rl{color:var(--on-ink-2)}

/* ---- Rotating layout (view_mode = rotate) --------------------------------
   A scroll-snap track, not a transform carousel: native touch swipe and
   keyboard scrolling come free, and with JavaScript off it degrades to a
   plain horizontal scroller with every quote still in the markup. */
.aglp-rot{position:relative}
.aglp-rotvp{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
scrollbar-width:none;-ms-overflow-style:none}
.aglp-rotvp::-webkit-scrollbar{display:none}
.aglp-rotvp:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:14px}
.aglp-rottrack{display:flex;gap:16px;align-items:stretch}
/* 3 up, then 2, then 1. The card carries the width so the JS can read how
   many fit rather than being told. */
.aglp-rottrack>.aglp-q{flex:0 0 calc((100% - 32px)/3);scroll-snap-align:start}
@media(max-width:1023px){.aglp-rottrack>.aglp-q{flex-basis:calc((100% - 16px)/2)}}
@media(max-width:699px){.aglp-rottrack>.aglp-q{flex-basis:100%}}

.aglp-rotnav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:22px}
.aglp-rotnav[hidden]{display:none}
.aglp-rotbtn{width:40px;height:40px;flex:none;border-radius:999px;cursor:pointer;
background:var(--white);border:1.6px solid var(--muted);color:var(--kicker);
display:inline-flex;align-items:center;justify-content:center;padding:0;
transition:border-color .18s ease,color .18s ease,transform .18s ease}
.aglp-rotbtn svg{width:20px;height:20px;display:block}
.aglp-rotbtn:hover{border-color:var(--blue);color:var(--blue)}
.aglp-rotbtn:active{transform:scale(.94)}
.aglp-rotbtn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.aglp-g-ink .aglp-rotbtn{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.46);color:#fff}
.aglp-g-ink .aglp-rotbtn:hover{border-color:#7CC3E9;color:#7CC3E9}

.aglp-rotdots{display:flex;align-items:center;gap:9px}
.aglp-rotdot{width:9px;height:9px;padding:0;flex:none;border:0;border-radius:999px;cursor:pointer;
background:var(--muted);transition:width .22s ease,background .22s ease}
.aglp-g-ink .aglp-rotdot{background:rgba(255,255,255,.52)}
.aglp-rotdot:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.aglp-rotdot[aria-current="true"]{width:26px;background:var(--interactive)}
.aglp-g-ink .aglp-rotdot[aria-current="true"]{background:var(--magic-light)}

/* Status line for screen readers only. Silent while it auto-advances; it
   switches to polite once the visitor takes control. */
.aglp-rotsr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

@media(prefers-reduced-motion:reduce){.aglp-rotvp{scroll-behavior:auto}}

/* ---- Quote card accents --------------------------------------------------
   Cemented ramp steps only (AGB-R-001/002/003). No brand gradient: it is
   never spent on a rule or a decorative glyph. */
[class*="aglp-qa-"]{--a1:#0F9E8C;--a2:#03A9F4;--a3:#7B6CF6;        /* step 1 - the edge */
--g1:#9BD9D1;--g2:#7CC3E9;--g3:#C7C0FB}   /* step 3 of each ramp - the mark. Measured on
   white: 1.59 / 1.94 / 1.70, a 0.35 spread. Hand-picking a lighter blue to 'even them up'
   measured 0.32 - no better, so the rule wins. */
.aglp-accc-cycle>*:nth-child(3n+1){--acc:var(--a1);--ghost:var(--g1)}
.aglp-accc-cycle>*:nth-child(3n+2){--acc:var(--a2);--ghost:var(--g2)}
.aglp-accc-cycle>*:nth-child(3n+3){--acc:var(--a3);--ghost:var(--g3)}
.aglp-accc-teal>*  {--acc:var(--a1);--ghost:var(--g1)}
.aglp-accc-blue>*  {--acc:var(--a2);--ghost:var(--g2)}
.aglp-accc-violet>*{--acc:var(--a3);--ghost:var(--g3)}
.aglp-g-ink [class*="aglp-qa-"]{--g1:#4DBBAD;--g2:#7CC3E9;--g3:#A297F9}

/* The oversized opening mark. The small closing mark goes: with the
   attribution pinned to the card foot it was left floating mid-card. */
.aglp-qa-mark>.aglp-q .aglp-mk,
.aglp-qa-both>.aglp-q .aglp-mk{font-size:58px;line-height:.78;color:var(--ghost);margin-bottom:2px}
.aglp-qa-mark>.aglp-q .aglp-mk-c,
.aglp-qa-both>.aglp-q .aglp-mk-c{display:none}
.aglp-qa-mark>.aglp-q .aglp-qb,
.aglp-qa-both>.aglp-q .aglp-qb{font-size:16px;line-height:1.65;margin-top:4px}

.aglp-qa-edge>.aglp-q,
.aglp-qa-both>.aglp-q{position:relative;overflow:hidden;padding-top:26px}
.aglp-qa-edge>.aglp-q::before,
.aglp-qa-both>.aglp-q::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:var(--acc)}

/* The logo earns its place at this size; 64x34 read as a stray thumbnail. */
.aglp-qa-mark>.aglp-q .aglp-who2 img,
.aglp-qa-both>.aglp-q .aglp-who2 img,
.aglp-qa-edge>.aglp-q .aglp-who2 img{max-width:88px;max-height:42px}


/* ---- Below three quotes ---------------------------------------------------------------
   The static set is flex, not grid, for one reason: a card can be given a ceiling. An
   auto-fit grid hands every card a 1fr track, so four quotes used to put three across and
   stretch the fourth over the whole width on its own. Now no card goes past 468px whatever
   the count, and a row that cannot be filled centres itself instead of stretching. ---- */
.aglp-qgrid{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:stretch}
.aglp-qgrid>.aglp-q{flex:1 1 300px;max-width:468px}
/* Four go two and two. Three across leaves the fourth alone on a row of its own, which is the
   same half-empty look the logo wall was fixing. */
.aglp-qgrid-2up>.aglp-q{flex:1 1 430px}

.aglp-qpair{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;align-items:stretch}
.aglp-qpair>.aglp-q{flex:1 1 380px;max-width:468px;padding:28px}
/* Two quotes carry more weight each than six do, so the type comes up a step. These follow
   the .aglp-qa-* rules above in the file and match their specificity, so order is what wins. */
.aglp-qpair>.aglp-q .aglp-qb{font-size:17px;line-height:1.62}
.aglp-qa-edge>.aglp-q,.aglp-qa-both>.aglp-q{padding-top:26px}
.aglp-qpair.aglp-qa-edge>.aglp-q,.aglp-qpair.aglp-qa-both>.aglp-q{padding-top:30px}

/* One quote: no box at all. A single card, whatever width it is held to, still reads as one
   of several with the others missing. */
.aglp-qfeat{max-width:840px;margin:0 auto;text-align:center}
.aglp-qfeat>.aglp-mk{display:none}
.aglp-qa-mark .aglp-qfeat>.aglp-mk,
.aglp-qa-both .aglp-qfeat>.aglp-mk{display:block;font-size:86px;line-height:.62;color:var(--ghost);
margin:0 0 12px}
.aglp-qa-edge .aglp-qfeat::before,
.aglp-qa-both .aglp-qfeat::before{content:"";display:block;width:58px;height:4px;border-radius:99px;
background:var(--acc);margin:0 auto 26px}
.aglp-qbig{font-size:27px;line-height:1.45;letter-spacing:-.005em;color:var(--ink);font-weight:400}
.aglp-g-ink .aglp-qbig{color:#fff}
.aglp-qbig p{margin:0 0 14px}
.aglp-qbig p:last-child{margin-bottom:0}
.aglp-who3{display:flex;flex-direction:column;align-items:center;gap:3px;margin-top:28px}
.aglp-who3 img{max-width:112px;max-height:48px;height:auto;display:block;margin-bottom:10px}
.aglp-who3 .aglp-nm{font-size:15px}
.aglp-who3 .aglp-rl{font-size:13.5px}
@media(max-width:700px){
  .aglp-qbig{font-size:21px}
  .aglp-qa-mark .aglp-qfeat>.aglp-mk,.aglp-qa-both .aglp-qfeat>.aglp-mk{font-size:62px}
  .aglp-qpair>.aglp-q{padding:22px}
}


/* ---- Third-party reviews -------------------------------------------------------------
   Source and stars sit above the words, the order they are read in. The stars take the card's
   own accent rather than a borrowed gold, so a row of reviews still reads as the ramp. A half
   star is the same path twice with the top copy clipped down the middle — no gradient id, which
   would collide the moment two quote sets land on one page. ---- */
.aglp-rev{display:flex;align-items:center;gap:11px;margin:0 0 14px;flex-wrap:wrap}
.aglp-src{font-weight:900;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--acc)}
.aglp-stars{display:inline-flex;gap:2px;color:var(--acc);line-height:0}
.aglp-st{width:15px;height:15px;display:inline-block}
.aglp-st svg{width:100%;height:100%;display:block}
.aglp-st .bg{fill:currentColor;opacity:.24}
.aglp-st .fg{fill:currentColor;opacity:0}
.aglp-st-on .fg{opacity:1}
.aglp-st-half .fg{opacity:1;clip-path:inset(0 50% 0 0)}
.aglp-qfeat .aglp-rev{justify-content:center}
/* A review card carries no quote marks at all. The source and the stars already frame the words,
   and the small opening and closing marks read as stray punctuation next to them. The Accent
   setting still draws the edge; only the glyphs go. */
.aglp-q-rev .aglp-mk,.aglp-qfeat.aglp-q-rev>.aglp-mk{display:none}