/* Homepage treatments 1 and 2, approved by Nadine on 25 October 2026; refined the same day after her review (see the end of the file's
   engagement and problem blocks): one white card style, the type scale and the 10px card radius.
   Extend the existing components only. All content and destinations stay in index.html. */
html:root body:not(.admin-body):not(.client-body) main .home-engagement-levels{padding:28px 0 32px;background:var(--mist)}

html:root body:not(.admin-body):not(.client-body) main .home-engagement-levels .ladder{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}

html:root body:not(.admin-body):not(.client-body) main .home-engagement-levels .ladder-head{grid-column:1/4;grid-row:1;display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding-bottom:2px;color:var(--muted);font-size:var(--t-kicker)}

html:root body:not(.admin-body):not(.client-body) main .home-engagement-levels .ladder-head span:first-child{font-family:var(--display);font-size:var(--t-h3s);color:var(--ink)}

/* One white card for all three levels: mixed tinted cards in one row are retired (design system). */
html:root body:not(.admin-body):not(.client-body) main .home-engagement-levels .ladder>a{grid-row:2;position:relative;display:flex;flex-direction:column;align-items:stretch;gap:0;min-width:0;min-height:0;margin:0;padding:16px 20px 14px;border:1px solid var(--line);border-radius:var(--card-r);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm);transition:border-color .25s,box-shadow .25s}

html:root body:not(.admin-body):not(.client-body) main .home-engagement-levels .ladder>a:nth-of-type(1){grid-column:1}
html:root body:not(.admin-body):not(.client-body) main .home-engagement-levels .ladder>a:nth-of-type(2){grid-column:2}
html:root body:not(.admin-body):not(.client-body) main .home-engagement-levels .ladder>a:nth-of-type(3){grid-column:3}

html:root body:not(.admin-body):not(.client-body) main .home-engagement-levels .ladder>a:hover{border-color:var(--line-2);box-shadow:var(--shadow)}

html:root body:not(.admin-body):not(.client-body) main .home-engagement-levels .ladder .idx{position:absolute;top:18px;right:20px;display:block;grid-row:auto;width:auto;height:auto;padding:0;border:0;border-radius:0;background:transparent;color:var(--tx-clay);font-size:var(--t-kicker);line-height:1.4}

html:root body:not(.admin-body):not(.client-body) main .home-engagement-levels .ladder>a>span:nth-child(2){display:block;margin-bottom:12px}

html:root body:not(.admin-body):not(.client-body) main .home-engagement-levels .ladder strong{display:block;margin:0 32px 6px 0;color:inherit;font-size:var(--t-h3s);line-height:1.2}

html:root body:not(.admin-body):not(.client-body) main .home-engagement-levels .ladder>a>span:nth-child(2)>small{min-height:0;max-width:none;margin:0;color:var(--muted);font-size:.98rem;line-height:1.5}

html:root body:not(.admin-body):not(.client-body) main .home-engagement-levels .ladder .fee{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 10px;grid-column:auto;margin-top:auto;padding-top:10px;border-top:1px solid var(--line);color:var(--tx-clay);font-family:var(--display);font-size:var(--t-h3s);line-height:1.2;font-weight:500;text-align:left}

html:root body:not(.admin-body):not(.client-body) main .home-engagement-levels .ladder .fee>small{margin:0;color:var(--muted);font-family:var(--sans);font-size:.75rem;line-height:1.4;font-weight:400}

html:root body:not(.admin-body):not(.client-body) main .home-engagement-levels .ladder>a:hover strong{color:inherit}

html:root body:not(.admin-body):not(.client-body) main .home-engagement-levels .ladder>a:focus-visible{outline-color:var(--tx-clay);outline-offset:4px}


html:root body:not(.admin-body):not(.client-body) main .home-problems{padding:44px 0;background:var(--paper)}

html:root body:not(.admin-body):not(.client-body) main .home-problems .rail{display:grid;grid-template-columns:220px minmax(0,1fr);gap:40px;align-items:start;margin-bottom:28px}

html:root body:not(.admin-body):not(.client-body) main .home-problems .rail>.kicker{margin:0;padding-top:9px;font-size:var(--t-kicker)}

html:root body:not(.admin-body):not(.client-body) main .home-problems h2{max-width:940px;font-size:clamp(32px,3.6vw,48px);line-height:1.12}

html:root body:not(.admin-body):not(.client-body) main .home-problems .lede{max-width:850px;margin-top:23px;font-size:18px;line-height:1.65}

html:root body:not(.admin-body):not(.client-body) main .home-problems .problem-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}

/* The padding-top is forced because site.css sets padding-top:0 !important on these cards, which left the number and label on the top edge. */
html:root body:not(.admin-body):not(.client-body) main .home-problems .problem-grid>article{display:flex;flex-direction:column;min-width:0;min-height:0;padding:20px 22px 18px;padding-top:20px!important;border:1px solid var(--line);border-radius:var(--card-r);background:var(--surface);box-shadow:var(--shadow-sm)}

html:root body:not(.admin-body):not(.client-body) main .home-problems .problem-grid>article::before{display:none}

html:root body:not(.admin-body):not(.client-body) main .home-problems .problem-grid>article>.n{order:0;display:flex;align-items:baseline;align-self:stretch;gap:12px;width:100%;margin:0 0 10px;padding:0;border:0;border-radius:0;background:transparent;color:var(--tx-clay);font-family:var(--sans);font-size:var(--t-kicker);line-height:1.4;font-weight:600}

html:root body:not(.admin-body):not(.client-body) main .home-problems .problem-grid>article>.n:after{display:none}

html:root body:not(.admin-body):not(.client-body) main .home-problems .problem-grid>article>.n small{display:block;margin:0 0 0 auto;color:var(--muted);font-family:var(--sans);font-size:var(--t-kicker);font-weight:400}

html:root body:not(.admin-body):not(.client-body) main .home-problems .problem-grid h3{order:1;min-height:0;margin:0 0 16px;padding:0;font-size:var(--t-h3);line-height:1.2}

/* The pictures are 4:3 pages shown in full, side by side on the mist band, so they read as the real documents and not as a small thumbnail. */
html:root body:not(.admin-body):not(.client-body) main .home-problems .problem-cover{order:2;display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:auto;height:auto;aspect-ratio:2/1;min-height:0;max-height:none;margin:0 -22px 16px;padding:10px 0;overflow:hidden;border:0;border-radius:0;background:var(--mist)}

html:root body:not(.admin-body):not(.client-body) main .home-problems .problem-cover img{display:block;width:auto;height:100%;max-width:100%;max-height:none;margin:0;padding:0;object-fit:contain;border-radius:0}

html:root body:not(.admin-body):not(.client-body) main .home-problems .problem-grid p{order:3;min-height:0;margin:0 0 16px;color:var(--muted);font-size:.98rem;line-height:1.6}

html:root body:not(.admin-body):not(.client-body) main .home-problems .problem-grid article>a{order:4;display:flex;align-items:center;justify-content:space-between;gap:15px;width:100%;min-height:44px;margin-top:auto;padding:12px 0 0;border-top:1px solid var(--line);color:var(--tx-pine-900);font-size:.98rem;font-weight:500}

/* Between the widths where three cards sit in a row and the one-column layout a title can run to two lines: keep the covers level. */
@media (min-width:901px) and (max-width:1180px){html:root body:not(.admin-body):not(.client-body) main .home-problems .problem-grid h3{min-height:calc(2 * 1.2em)}}

html:root[data-theme=dark] body:not(.admin-body):not(.client-body) main .home-engagement-levels{background:var(--mist)}

@media (max-width:1000px){
 html:root body:not(.admin-body):not(.client-body) main .home-problems .rail{display:grid;grid-template-columns:1fr;gap:12px}

 html:root body:not(.admin-body):not(.client-body) main .home-problems .rail>.kicker{padding-top:0}

}

@media (max-width:900px){html:root body:not(.admin-body):not(.client-body) main .home-engagement-levels .ladder>a:nth-of-type(n){grid-column:1;grid-row:auto}

 html:root body:not(.admin-body):not(.client-body) main .home-engagement-levels .ladder{grid-template-columns:1fr}

 html:root body:not(.admin-body):not(.client-body) main .home-engagement-levels .ladder-head{grid-column:1;flex-wrap:wrap;gap:8px}

 html:root body:not(.admin-body):not(.client-body) main .home-engagement-levels .ladder>a{min-height:0;padding:14px 18px 12px}

 html:root body:not(.admin-body):not(.client-body) main .home-engagement-levels .ladder>a>span:nth-child(2)>small{min-height:0;max-width:none}

 html:root body:not(.admin-body):not(.client-body) main .home-problems .problem-grid{grid-template-columns:1fr}

 html:root body:not(.admin-body):not(.client-body) main .home-problems .problem-grid h3,html:root body:not(.admin-body):not(.client-body) main .home-problems .problem-grid p{min-height:0}

}

@media (max-width:600px){
 html:root body:not(.admin-body):not(.client-body) main .home-engagement-levels{padding:22px 0 26px}

 html:root body:not(.admin-body):not(.client-body) main .home-problems{padding:44px 0}

 html:root body:not(.admin-body):not(.client-body) main .home-problems .rail{margin-bottom:27px}

 html:root body:not(.admin-body):not(.client-body) main .home-problems h2{font-size:32px}

 html:root body:not(.admin-body):not(.client-body) main .home-problems .lede{font-size:17px}

}

@media (prefers-reduced-motion:reduce){
 html:root body:not(.admin-body):not(.client-body) main .home-engagement-levels .ladder>a,html:root body:not(.admin-body):not(.client-body) main .home-problems .problem-grid>article{transition:none}

 html:root body:not(.admin-body):not(.client-body) main .home-engagement-levels .ladder>a:hover,html:root body:not(.admin-body):not(.client-body) main .home-problems .problem-grid>article:hover{transform:none}

}


html:root body:not(.admin-body):not(.client-body) main .home-problems h2,html:root body:not(.admin-body):not(.client-body) main .home-problems .problem-grid h3{color:var(--tx-pine-900)}



/* Public-site visual audit, 4 November 2026 (items 3 and 6). The hero gives back some of the space under its text and mock-ups (the grid kept up to
   68px below them before the divider of the four columns), and its dark gradient now fades into the Engagement levels band instead of ending on a
   straight edge. The fade sits in the hero's own bottom padding, below the last line of the four columns, so no text is on it. */
html:root body:not(.admin-body):not(.client-body) main .home-hero .hero-grid{padding-bottom:clamp(24px,3vw,40px)}
html:root body:not(.admin-body):not(.client-body) main .home-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:44px;pointer-events:none;background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--mist) 40%,transparent) 60%,var(--mist))}