/* ============================================================
   GROW WITHOUT HIRING (Dom 30 Oct 2026: under the hero on the IVA firms
   page and, built from it, the Aryza Advize page, where it replaced the
   "What changes" quote placeholder; v2 the same day, Dom: "too much text,
   only the most important, the difference obvious"): "Grow
   without hiring. About 35p per job done." One card, hiring an
   administrator (greyed, light) against Askpilot (dark, in pink), each
   priced per job done with a bar on one scale (35p is 7.6% of £4.60), a round "13x less" badge
   on the seam, three short rows that pair up. Phones: the halves stack and
   the badge sits between them. Markup: industries/iva-providers/index.html
   (#grow), which tools/build-aryza-page.py carries over. The az- names are
   from the Aryza page, where it started.
   ============================================================ */
.az-grow { padding: 104px 0 112px; border-top: 1px solid var(--line); }
.az-grow .sec-head { margin-bottom: 48px; }
.az-vs {
    position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 1040px; margin: 0 auto; border: 1.5px solid var(--ink, #16121A); border-radius: 28px; overflow: hidden;
    background: #fff; box-shadow: 0 40px 80px -48px rgba(38, 20, 40, .55);
}
.az-vs-side { position: relative; display: flex; flex-direction: column; padding: 46px 52px 48px; }
/* more room on either side of the seam, where the badge sits */
.az-vs-side--hire { padding-right: 76px; }
.az-vs-side--ap { padding-left: 76px; }
.az-vs-side--ap { isolation: isolate; background: var(--ink, #16121A); color: #fff; }
.az-vs-side--ap::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(60% 55% at 30% 22%, rgba(242, 123, 230, .26), transparent 72%),
        radial-gradient(60% 70% at 100% 0%, rgba(213, 59, 213, .3), transparent 70%);
}
.az-vs-k { display: flex; align-items: center; gap: 10px; margin: 0; font-size: .875rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted, #8B8492); }
.az-vs-k img { width: 24px; height: 24px; }
.az-vs-side--ap .az-vs-k { color: #fff; letter-spacing: .08em; font-size: 1rem; }
.az-vs-p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 24px 0 0; }
.az-vs-p b { font-size: 5.25rem; font-weight: 800; line-height: .95; letter-spacing: -.05em; color: #B3AAB0; }
.az-vs-p span { font-size: 1.125rem; font-weight: 650; color: var(--muted, #8B8492); }
.az-vs-side--ap .az-vs-p b {
    background: linear-gradient(180deg, #FFD3FF 0%, #FFA7FF 45%, #F06BE8 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 6px 26px rgba(242, 107, 232, .45));
}
.az-vs-side--ap .az-vs-p span { color: rgba(255, 255, 255, .78); }
/* the bars, on one scale: the administrator's is the whole track */
.az-vs-bar { display: block; height: 12px; margin: 24px 0 0; border-radius: 6px; background: #F2EDF0; overflow: hidden; }
.az-vs-bar i { display: block; width: 100%; height: 100%; border-radius: 6px; background: #CEC5CB; }
.az-vs-side--ap .az-vs-bar { overflow: visible; background: rgba(255, 255, 255, .1); }
.az-vs-side--ap .az-vs-bar i { width: 7.6%; min-width: 12px; background: linear-gradient(90deg, #FFD3FF, #F06BE8); box-shadow: 0 0 14px rgba(242, 107, 232, .85); }
.az-vs-sub { margin: 14px 0 0; font-size: 1rem; color: var(--muted, #8B8492); }
.az-vs-side--ap .az-vs-sub { color: rgba(255, 255, 255, .78); }
.az-vs-list { list-style: none; display: grid; gap: 16px; margin: 32px 0 0; padding: 28px 0 0; border-top: 1px solid var(--line, #EAE3E1); }
.az-vs-list li { display: flex; align-items: center; gap: 12px; font-size: 1.1875rem; font-weight: 650; letter-spacing: -.01em; color: #9A929E; }
.az-vs-list svg { flex: none; box-sizing: border-box; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: #F2EDF0; color: #AEA6AB; }
.az-vs-side--ap .az-vs-list { border-top-color: rgba(255, 255, 255, .14); }
.az-vs-side--ap .az-vs-list li { color: #fff; }
.az-vs-side--ap .az-vs-list svg { background: var(--pink-core, #FFA7FF); color: var(--ink, #16121A); }
.az-vs-cta { align-self: flex-start; margin-top: 34px; background: var(--pink-core, #FFA7FF); color: var(--ink, #16121A); font-weight: 700; }
.az-vs-cta:hover { background: #FFC6FF; color: var(--ink, #16121A); transform: translateY(-1px); box-shadow: 0 0 0 5px rgba(255, 167, 255, .25); }
.az-vs-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* the badge on the seam, level with the prices */
.az-vs-badge {
    position: absolute; left: 50%; top: 133px; z-index: 2; transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 104px; height: 104px; margin: 0; border: 5px solid #fff; border-radius: 50%;
    background: var(--pink-core, #FFA7FF); color: var(--ink, #16121A);
    box-shadow: 0 14px 30px -12px rgba(213, 59, 213, .6); font-size: .9375rem; font-weight: 750; line-height: 1.1;
}
.az-vs-badge b { font-size: 1.875rem; font-weight: 800; letter-spacing: -.03em; }
.az-grow-note { max-width: 720px; margin: 26px auto 0; font-size: .875rem; line-height: 1.6; text-align: center; color: var(--muted); text-wrap: pretty; }

@media (max-width: 1023px) {
    .az-vs-side { padding: 38px 34px 40px; }
    .az-vs-side--hire { padding-right: 60px; }
    .az-vs-side--ap { padding-left: 60px; }
    .az-vs-p { flex-direction: column; align-items: flex-start; gap: 8px; }   /* the unit under the price on both sides, so the rows stay level */
    .az-vs-p b { font-size: 4.25rem; }
    .az-vs-badge { top: 118px; width: 88px; height: 88px; }
    .az-vs-badge b { font-size: 1.5rem; }
    .az-vs-list li { font-size: 1.0625rem; }
}
@media (max-width: 767px) {
    .az-grow { padding: 72px 0 80px; }
    .az-grow .sec-head { margin-bottom: 32px; }
    .az-vs { grid-template-columns: minmax(0, 1fr); border-radius: 24px; }
    .az-vs-side, .az-vs-side--hire, .az-vs-side--ap { padding: 28px 24px 30px; }
    .az-vs-side--hire { padding-bottom: 46px; }
    .az-vs-side--ap { padding-top: 54px; }
    .az-vs-p b { font-size: 3.5rem; }
    .az-vs-list { gap: 12px; margin-top: 24px; padding-top: 22px; }
    .az-vs-list li { font-size: 1rem; }
    .az-vs-cta { align-self: stretch; }
    /* the badge sits on the seam between the two halves */
    .az-vs-badge { position: relative; top: auto; left: auto; transform: none; justify-self: center; width: 80px; height: 80px; margin: -40px 0; border-width: 4px; font-size: .8125rem; }
    .az-vs-badge b { font-size: 1.375rem; }
}
@media (prefers-reduced-motion: reduce) {
    .az-vs-cta:hover { transform: none; }
}