.kinds {
    --tv-ink: #111;
    --tv-muted: #6d6d6d;
    --tv-blue: #0035ad;
    --tv-accent: var(--tv-blue);
    --tv-rule: rgba(17, 17, 17, .12);
    --tv-hair: rgba(17, 17, 17, .09);
    --tv-wash: rgba(17, 17, 17, .028);
    --tv-tint: rgba(0, 53, 173, .045);

    padding-block: clamp(3.5rem, 7vw, 6rem) 0;
}

.kinds__inner {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr);
    align-items: start;

    border-top: 1px solid var(--tv-hair);
    padding-top: clamp(3rem, 6vw, 5rem);
}

.kinds__num   { grid-column: 1; grid-row: 1; }
.kinds__intro { grid-column: 2; grid-row: 1; }

.kinds__inner > .tree {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: clamp(3rem, 6vw, 5rem);
}

.kinds__num {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--tv-muted);
    font-variant-numeric: tabular-nums;
}

.kinds__title {
    margin: 0 0 1.25rem;
    
    max-width: 30ch;
    font-size: clamp(1.5rem, 1.05rem + 1.5vw, 2rem);
    font-weight: 500;
    line-height: 1.25;
    color: var(--tv-ink);
}@media (min-width: 992px) {
    .kinds__title { max-width: 44ch; }}

.kinds__text {
    margin: 0 0 1rem;
    max-width: 46rem;
    font-size: 1.0625rem;
    line-height: 1.74994;
    text-wrap: pretty;
}

.kinds__text:last-child { margin-bottom: 0; }

.tree { margin: 0; }

.tree__grid {
    --tree-gap: clamp(1rem, 2.5vw, 2rem);
    --tree-wire: rgba(17, 17, 17, .28);

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--tree-gap);
    align-items: stretch;

    
    padding-inline: 1.5rem;
}

.tree__card {
    display: flex;
    flex-direction: column;
    padding: clamp(1.125rem, 2.2vw, 1.5rem);
    border: 1px solid var(--tv-rule);
    background: #fff;
}

.tree__card--top {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, 30rem);

    
    padding: .875rem clamp(1.125rem, 2.2vw, 1.5rem) .625rem;
}

.tree__card--top .tree__mark { margin-block: -.4rem; }

.tree__card--top .tree__head--top { gap: .25rem; margin-bottom: .5rem; }

.tree--final .tree__card--top .tree__head--top { gap: .75rem; }

.tree--final .tree__grid { align-items: start; }

.tree__card--top .tree__rows { margin-bottom: 0; }
.tree__card--top .tree__row  { padding: .5rem 0; }
.tree__card--top .tree__row:last-child { padding-bottom: .25rem; }

.tree__head {
    display: flex;
    align-items: center;
    gap: .875rem;
    margin-bottom: .875rem;
}

.tree__head--top {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .5rem;
}

.tree__mark {
    display: block;
    width: min(100%, 10rem);
    height: auto;
}

.tree__tile {
    flex: none;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid var(--tv-rule);
    background: var(--tv-wash);
}

.tree__tile svg {
    width: 1.375rem;
    height: 1.375rem;
    stroke: var(--tv-ink);
    stroke-width: 1.5;
    stroke-linejoin: miter;
    stroke-linecap: square;
    fill: none;
}

.tree--final .tree__tile {
    border: none;
    background: none;
    width: auto;
    height: auto;
}
.tree--final .tree__tile svg {
    width: 1.625rem;
    height: 1.625rem;
}

.tree__title {
    margin: 0;
    font-size: clamp(1.0625rem, .95rem + .4vw, 1.25rem);
    font-weight: 500;
    line-height: 1.25;
    color: var(--tv-ink);
}

.tree__sub {
    display: block;
    margin: .2rem 0 0;
    font-size: .9375rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--tv-muted);
}

.tree__head--top .tree__sub { margin: 0; }

.tree__inherit {
    margin: .375rem 0 1.25rem;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--tv-accent);
}

.tree__rows {
    margin: 0 0 .875rem;
    padding: 0;
    list-style: none;
    font-size: .9375rem;
    line-height: 1.4;
}

.tree__row {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 1rem;
    padding: .625rem 0;
    border-top: 1px solid var(--tv-rule);
}

.tree--final .tree__row {
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: .75rem;
}

.tree--final .tree__card--professional .tree__row {
    padding: .8125rem 0;
}

.tree--final .tree__card--enterprise .tree__row {
    padding: .8125rem 0;
}

html:root .tree--final .tree__card--enterprise .tree__row {
    padding: 1rem 0;
}

.tree__row span:first-child { color: var(--tv-muted); }
.tree__row span:last-child  { color: var(--tv-ink); }

.tree__note {
    margin: auto 0 0;
    padding-top: .625rem;
    padding: .625rem .75rem;
    background: var(--tv-tint);
    font-size: .875rem;
    line-height: 1.45;
    color: var(--tv-ink);
}

.tree__note b { font-weight: 600; color: var(--tv-accent); }

.tree__wires {
    position: relative;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--tree-gap);
    height: 7rem;
}

.tree__wire { position: relative; }

.tree__wire::before {
    content: "";
    position: absolute;
    top: 62%;
    height: 1px;
    background: var(--tree-wire);
}

.tree__wire--l::before { left: 50%; right: calc(-1 * var(--tree-gap) / 2); }
.tree__wire--c::before { left: calc(-1 * var(--tree-gap) / 2); right: calc(-1 * var(--tree-gap) / 2); }
.tree__wire--r::before { left: calc(-1 * var(--tree-gap) / 2); right: 50%; }

.tree__wire::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 62%;
    bottom: 0;
    width: 1px;
    background: var(--tree-wire);
}

.tree__trunk {
    position: absolute;
    left: 50%;
    top: 0;
    height: 62%;
    width: 1px;
    background: var(--tree-wire);
}

.tree__pill {
    position: absolute;
    left: 50%;
    top: 31%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    padding: .4rem .7rem;
    border: 1px solid var(--tv-rule);
    background: #fff;
    font-size: .8125rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--tv-ink);
}

.tree__pill svg {
    width: 1rem;
    height: 1rem;
    stroke: var(--tv-accent);
    stroke-width: 1.5;
    stroke-linejoin: miter;
    fill: none;
}

@media (max-width: 767.98px) {
    .tree__grid { grid-template-columns: minmax(0, 1fr); }

    .tree__card--agent + .tree__card--agent { margin-top: 2.5rem; }
}

.tree--full .tree__card--top { width: min(100%, 34rem); }

.tree--full .tree__card--agent .tree__row {
    grid-template-columns: minmax(0, 1fr);
    gap: .25rem;
    padding: .75rem 0;
}

.tree--full .tree__card--agent .tree__row span:first-child {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.tree--full .tree__note b { display: block; margin-bottom: .125rem; }

.tree--full .tree__card { padding: 1rem 1.125rem; }
.tree--full .tree__card--top { width: min(100%, 31rem); padding: .75rem 1.125rem .5rem; }
.tree--full .tree__head { gap: .75rem; margin-bottom: .625rem; }
.tree--full .tree__tile { width: 2.5rem; height: 2.5rem; }
.tree--full .tree__tile svg { width: 1.125rem; height: 1.125rem; }
.tree--full .tree__title { font-size: 1.0625rem; }
.tree--full .tree__sub { font-size: .875rem; line-height: 1.3; }
.tree--full .tree__rows { font-size: .875rem; line-height: 1.35; margin-bottom: .625rem; }
.tree--full .tree__card--agent .tree__row { padding: .5rem 0; gap: .15rem; }
.tree--full .tree__card--agent .tree__row span:first-child { font-size: .6875rem; }
.tree--full .tree__card--top .tree__row { padding: .4rem 0; }
.tree--full .tree__note { padding: .5rem .625rem; font-size: .8125rem; line-height: 1.4; }
.tree--full .tree__wires { height: 5rem; }
.tree--full .tree__pill { padding: .3rem .6rem; font-size: .75rem; }

.tree__card--bare { padding-bottom: .875rem; }
.tree__card--bare .tree__head--top { margin-bottom: 0; }

.tree__note--eg b { display: block; margin-bottom: .125rem; }@media (max-width: 575.98px) {
    
    .kinds__inner { grid-template-columns: minmax(0, 1fr); }
    .kinds__num   { grid-column: 1; grid-row: 1; margin-bottom: .5rem; }
    .kinds__intro { grid-column: 1; grid-row: 2; }
    
    .kinds__inner > .tree { grid-column: 1; grid-row: 3; }}@media (min-width: 992px) {
    .kinds__inner {
        --kinds-shift: 3.75rem;         
        margin-inline: calc(-1 * var(--kinds-shift));
    }}@media (min-width: 1460px) {
    .kinds__inner {
        --kinds-shift: 8.75rem;         
    }}@media (max-width: 575.98px) {
    .tree--final .tree__row {
        grid-template-columns: minmax(0, 1fr);
        gap: .125rem;
    }

    .tree--final .tree__row span:first-child {
        font-size: .75rem;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
    }}

.tree { position: relative; }

.tree__link {
    position: absolute;
    inset: 0;
}

.tree__link:focus-visible {
    outline: 2px solid var(--tv-blue);
    outline-offset: 3px;
}

/* ============================================================
   STANDALONE DIAGRAM SECTION — interior pages
   ============================================================

   The agents diagram appears twice on the site: inside panel 01 on
   the homepage, and on its own on /agents/. Both render the same
   partial (_AgentsTree.cshtml in Umbraco), so there is one copy of
   the markup, not two.

   ⚠️ .kinds IS NOT DECORATION HERE. Every colour token the diagram
      uses (--tv-ink, --tv-muted, --tv-blue, --tv-accent, --tv-rule,
      --tv-hair, --tv-wash, --tv-tint) is declared on .kinds at the
      top of this file. A .tree rendered outside a .kinds ancestor
      loses every border and falls back to default black text.

   What --bare removes is the PANEL, not the diagram: no hanging
   number, no rule above it, no heading grid. The .kinds__inner
   wrapper is still in the markup and still has to be — see the note
   on .kinds__inner--bare below, it is what gives the diagram its
   full width — but stripped of its border, its padding and its grid.

   The clamps are deliberately smaller than .kinds's own
   clamp(3.5rem, 7vw, 6rem). On the homepage that padding separates
   one numbered panel from the last; here the diagram only has to
   clear a page title above it and body copy below. */
.kinds--bare {
    padding-block: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem);
}

/* ⚠️ THE STANDALONE MARKUP KEEPS .kinds__inner, AND THAT IS THE POINT.
   Measured 2026-09-07: without it the diagram rendered 1020px wide on
   /agents/ against 1140px on the homepage, and the three cards came out
   40px narrower each.

   The cause is not in this rule, it is 80 lines up:

       @media (min-width: 992px) { .kinds__inner {
           --kinds-shift: 3.75rem;                  3rem px-lg-5 + .75rem gutter
           margin-inline: calc(-1 * var(--kinds-shift)); } }

   .kinds__inner deliberately breaks back OUT of the px-lg-5 / px-xxl-9
   padding so the diagram reaches the container's full width. Drop the
   wrapper and you silently lose 60px a side at >=992px, 140px at >=1460px.

   So the standalone section reproduces the homepage's chain exactly —
   .container > .px-lg-5.px-xxl-9 > .kinds__inner — and this modifier
   removes only the panel chrome. Reusing the wrapper rather than copying
   its numbers means the two stay in step if the spacers ever change. */
.kinds__inner--bare {
    /* Not a grid here: there is no hanging number and no heading to place,
       and the grid rules put .tree in row 2 (row 3 on mobile), which would
       leave empty implicit rows above a lone child. */
    display: block;

    border-top: 0;
    padding-top: 0;
}

/* .kinds__inner > .tree adds the numbered panel's own rhythm above the
   diagram. Standalone there is no panel, and .kinds--bare's padding-block
   above is what sets the spacing. */
.kinds__inner--bare > .tree {
    margin-top: 0;
}