/* ==========================================================================
   Palette v2 layout for the static pages (the homepage v3 rhythm).
   A converted page links this file last in <head>, wraps its sections in
   <main class="lv2"> and gives its footer class="lv2-footer". Pages that do
   not opt in are untouched: every rule is scoped to those two classes.

   - Primary sections (problem, solution, capabilities, who we serve,
     testimonial) are White cards floating on the Ivory page: .lv2-card
   - Secondary sections (hero, stats, FAQs, guide links) sit on Ivory: the
     default, or .lv2-flat where a section needs saying so
   - A dark surface is Teal/Deep, never near-black: .lv2-dark
   Colours come from the variables in each page's :root; no hex here.
   ========================================================================== */

body:has(.lv2){background:var(--ivory)}
html:has(.lv2){scroll-padding-top:80px}

.lv2{display:flex;flex-direction:column;gap:24px;padding:24px;--lv2-radius:28px}
.lv2>section{position:relative;width:100%;max-width:1392px;margin-inline:auto;border-radius:var(--lv2-radius);overflow:clip;background-color:var(--ivory)}
.lv2>section.lv2-card{background-color:var(--white)}
.lv2>section.lv2-dark{background-color:var(--teal-deep);color:var(--white)}
/* A page that is already a column of cards (a header, a sidebar and a stack
   of white cards, like /how-it-works) takes the type and pill rules below
   but keeps its own layout: wrap it in <div class="lv2 lv2-doc">. */
.lv2.lv2-doc{display:block;padding:0}

/* Headlines are Ink/900 everywhere except on a dark surface */
.lv2 h1,.lv2 h2,.lv2 h3{color:var(--ink-900)}
.lv2-dark h1,.lv2-dark h2,.lv2-dark h3{color:var(--white)}

/* Section eyebrow: Teal/Tint pill, Teal/Deep uppercase. The same pill on a
   dark surface, as on the homepage. inline-flex so it centres in a centred
   block and sits left in a left-aligned one. A 16px radius is fully round on
   one line and stays a soft pill when a long eyebrow wraps. */
.lv2 .eyebrow{display:inline-flex;align-items:center;vertical-align:top;padding:6px 12px;border-radius:16px;background:var(--teal-tint);color:var(--teal-deep);font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:.12em;line-height:1.5;text-transform:uppercase;margin-bottom:20px}

/* Sub-section label: Ivory pill with an Ink/200 border */
.lv2 .lv2-tag{display:inline-flex;align-items:center;vertical-align:top;padding:4px 10px;border-radius:999px;background:var(--ivory);border:1px solid var(--ink-200);color:var(--ink-700);font-family:var(--head);font-size:11px;font-weight:700;letter-spacing:.12em;line-height:1.5;text-transform:uppercase}

/* Tiles inside a white card are Ivory */
.lv2 .lv2-tile{background:var(--ivory);border:1px solid var(--ink-200);border-radius:20px}

/* Stats on Ivory: Ink figures, ruled columns (homepage .hp3-stats) */
.lv2 .lv2-stats>*{padding:4px 24px}
.lv2 .lv2-stats>*:first-child{padding-left:0}
.lv2 .lv2-stats>*+*{border-left:1px solid var(--ink-200)}

@media (max-width:760px){
  .lv2{padding:12px;gap:12px;--lv2-radius:24px}
  .lv2 .eyebrow{white-space:normal}
  /* Multi-column grids set inline stack to one column on a phone */
  .lv2 .lv2-stack{grid-template-columns:minmax(0,1fr)!important;gap:16px!important}
  .lv2 .lv2-stack>.connector{display:none}
  .lv2 .lv2-stack>.pin{position:static!important}
  .lv2 .lv2-stats>*{padding:0 0 0 14px}
  .lv2 .lv2-stats>*:first-child,.lv2 .lv2-stats>*:nth-child(odd){padding-left:0;border-left:0}
}

/* Footer on Ivory (homepage v3 footer). Its inline colours are rewritten to
   Ink on conversion; the class rules below cover the shared footer classes. */
.lv2-footer{background:var(--ivory);color:var(--ink-700)}
.lv2-footer .ft-col-head{color:var(--ink-600)}
.lv2-footer .ft-link,.lv2-footer .ft-bottom-link{color:var(--ink-700)}
.lv2-footer .ft-link:hover,.lv2-footer .ft-bottom-link:hover,.lv2-footer address a:hover{color:var(--teal-deep);text-decoration:underline;text-underline-offset:3px}
.lv2-footer a:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:2px}