/* ==========================================================================
   CLIENT PROOF (#hp1) · drawn as a sibling of SUCCESS STORIES     2026-10-01
   ==========================================================================
   Success Stories (#success-stories, assets/success-stories/ss.css) sits
   straight above this section and is the reference. Client Proof keeps its
   own content — the seven kinds with their counts, the rail of real
   screenshots, previous / next, the masking note, the call to action and the
   preview window — and takes Success Stories' build:

     the head        kicker → title → line, same type, same gaps
     the lane        the same left and right edges (--site-lane)
     folder tabs     icon · label · count; the chosen tab is the colour of
                     the surface under it and joins it
     one surface     #E6EEFA, 16px corners, 22 / 24 padding
       a line        what this kind is  ···  how many
       the rail      white cards, 12px corners, #D3DEEE edge
       position bar  the same quiet neutral bar as the rails above
       the foot      the masking note  ···  previous / next
       the close     the call to action, inside the surface

   Markup: home-proof/client-proof.js (the `home` branches of section()).
   The preview window (.c7-modal) is not touched by this file.

   Five ids on every selector: home-system/home.css styles this section at up
   to four, so nothing here depends on the order the stylesheets are linked.
   !important appears only where an older rule carries it.

   To undo: delete this file's <link> in index.html and restore
   home-proof/client-proof.js + index.html from
   home-proof/_live-backup/20261001-family/.
   ========================================================================== */

/* ------------------------------------------------------------ the section */
html body #hp1#hp1#hp1#hp1#hp1{
  --cpf-sf: #E6EEFA;                       /* the surface — Success Stories' --s2-sf */
  --cpf-ink: #0B0D12; --cpf-ink2: #3A414C; --cpf-ink3: #5B6472;
  --cpf-act: #0760C6; --cpf-cob: #004594;
  padding-top: 46px !important;
  padding-bottom: 50px !important;
}
/* the lane: the same edges as the section above */
html body #hp1#hp1#hp1#hp1#hp1 .c7v.c7home{
  width: var(--site-lane, min(1440px, calc(100% - 2 * clamp(24px, 4vw, 72px))));
  margin-inline: auto;
  --c7-h: clamp(216px, 18.1vw, 260px);     /* the height every screenshot in the rail shares */
}

/* --------------------------------------------------------------- the head */
html body #hp1#hp1#hp1#hp1#hp1 .hp-head{ margin: 0 0 30px !important; padding: 0 !important; }
html body #hp1#hp1#hp1#hp1#hp1 .hp-head .hd-kicker.hd-kicker{
  width: auto !important; margin: 0 !important; padding: 0 !important;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
  font-size: 11.5px !important; font-weight: 500 !important; line-height: 14px !important;
  letter-spacing: .2em !important; text-transform: uppercase !important; color: var(--cpf-ink2) !important;
}
html body #hp1#hp1#hp1#hp1#hp1 .hp-head .hd-title{
  margin: 8px 0 0 !important; padding: 0 !important;
  font-size: 42px !important; font-weight: 800 !important; line-height: 1.08 !important;
  letter-spacing: -.034em !important; color: var(--cpf-ink) !important;
}
html body #hp1#hp1#hp1#hp1#hp1 .hp-head .hd-desc{
  margin: 12px auto 0 !important; max-width: 580px !important;
  font-size: 16.5px !important; line-height: 1.55 !important; color: #414652 !important;
}

/* --------------------------------------------------------- the folder tabs */
html body #hp1#hp1#hp1#hp1#hp1 .c7-proof{ margin: 0; }
html body #hp1#hp1#hp1#hp1#hp1 .cpf-tabs{
  display: flex; align-items: flex-end; gap: 4px; margin: 0; padding: 0;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
html body #hp1#hp1#hp1#hp1#hp1 .cpf-tab{
  flex: none; position: relative; display: inline-flex; align-items: center; gap: 9px; min-width: 0;
  min-height: 50px; margin: 0; padding: 0 20px; border: 0; border-radius: 12px 12px 0 0;
  background: transparent; box-shadow: none; color: #3A4A60; font: inherit; cursor: pointer;
}
html body #hp1#hp1#hp1#hp1#hp1 .cpf-ti{ width: 20px; height: 20px; flex: none; display: grid; place-items: center; }
html body #hp1#hp1#hp1#hp1#hp1 .cpf-ti svg{ width: 20px; height: 20px; display: block; fill: none; stroke: currentColor; stroke-width: 1.45; }
html body #hp1#hp1#hp1#hp1#hp1 .cpf-tab .c7-kl{ font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; line-height: 1.2; white-space: nowrap; color: inherit; }
html body #hp1#hp1#hp1#hp1#hp1 .cpf-tab em{ font-style: normal; font-size: 12px; font-weight: 600; line-height: 1.25; color: #5E6E86; font-variant-numeric: tabular-nums; }
html body #hp1#hp1#hp1#hp1#hp1 .cpf-tab:not([aria-selected="true"]):hover{ background: #F1F5FB; color: var(--cpf-ink); }
html body #hp1#hp1#hp1#hp1#hp1 .cpf-tab[aria-selected="true"]{ background: var(--cpf-sf); color: var(--cpf-cob); }
html body #hp1#hp1#hp1#hp1#hp1 .cpf-tab[aria-selected="true"] .c7-kl{ font-weight: 750; }
html body #hp1#hp1#hp1#hp1#hp1 .cpf-tab:focus-visible{ outline: 2px solid var(--cpf-act); outline-offset: -2px; }

/* ------------------------------------------------------------ the surface */
html body #hp1#hp1#hp1#hp1#hp1 .cpf-surface{
  position: relative; min-width: 0; padding: 22px 24px 24px; background: var(--cpf-sf); border-radius: 16px;
}
/* the chosen tab joins the surface: no corner between them */
html body #hp1#hp1#hp1#hp1#hp1 .c7-proof:has(.cpf-tab:first-child[aria-selected="true"]) .cpf-surface{ border-top-left-radius: 0; }
html body #hp1#hp1#hp1#hp1#hp1 .c7home .c7-panels{ margin: 0; padding: 0; background: transparent; }

/* a line about the kind, and how many */
html body #hp1#hp1#hp1#hp1#hp1 .cpf-meta{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  margin: 0 0 16px; min-height: 30px;
}
html body #hp1#hp1#hp1#hp1#hp1 .cpf-say{ margin: 0; font-size: 15px; line-height: 1.5; color: var(--cpf-ink2); text-align: left; }
html body #hp1#hp1#hp1#hp1#hp1 .cpf-cnt{ margin: 0; flex: none; font-size: 13px; font-weight: 650; line-height: 1.25; color: var(--cpf-ink3); }

/* --------------------------------------------------- the rail and its cards */
html body #hp1#hp1#hp1#hp1#hp1 .c7home .c7-rail{
  gap: 16px; align-items: stretch; padding: 2px 0 4px; scroll-padding-inline: 0;
}
html body #hp1#hp1#hp1#hp1#hp1 .c7home .c7-rail:focus-visible{ outline: 2px solid var(--cpf-act); outline-offset: 4px; border-radius: 12px; }
/* a white card around every screenshot: 8px of paper, then the screenshot in its own fine frame */
html body #hp1#hp1#hp1#hp1#hp1 .c7home .c7-card{
  width: calc(var(--c7-h) * var(--r) + 18px); padding: 8px 8px 0;   /* 18 = the card's own padding and edge */
  background: #FFFFFF; border: 1px solid #D3DEEE; border-radius: 12px;
  transition: border-color .15s ease;
}
html body #hp1#hp1#hp1#hp1#hp1 .c7home .c7-card:focus-visible{ outline: 2px solid var(--cpf-act); outline-offset: 2px; }
html body #hp1#hp1#hp1#hp1#hp1 .c7home .c7-shot,
html body #hp1#hp1#hp1#hp1#hp1 .c7home .c7-card:hover .c7-shot{
  height: var(--c7-h); border: 1px solid #E5EAF1 !important; border-radius: 8px; background: #EEF2F7;
}
/* a card is never wider than 88% of the rail, so the next one always shows (a wide dashboard on a phone);
   the screenshot keeps its own shape, so a capped card is shorter, never cropped */
@supports (aspect-ratio: 1){
  html body #hp1#hp1#hp1#hp1#hp1 .c7home .c7-card{ width: min(calc(var(--c7-h) * var(--r) + 18px), 88%); }
  html body #hp1#hp1#hp1#hp1#hp1 .c7home .c7-shot,
  html body #hp1#hp1#hp1#hp1#hp1 .c7home .c7-card:hover .c7-shot{ height: auto; aspect-ratio: var(--r); }
}
html body #hp1#hp1#hp1#hp1#hp1 .c7home .c7-client{ min-height: 0; padding: 9px 6px 0; font-size: 13px; font-weight: 700; color: var(--cpf-ink); }
/* the card's foot: what a click does */
html body #hp1#hp1#hp1#hp1#hp1 .cpf-go{
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto;
  padding: 9px 2px 9px 6px; font-size: 13px; font-weight: 650; line-height: 1.25; color: var(--cpf-act); white-space: nowrap;
}
html body #hp1#hp1#hp1#hp1#hp1 .cpf-go > span{ min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html body #hp1#hp1#hp1#hp1#hp1 .cpf-go i{ width: 24px; height: 24px; flex: none; border-radius: 7px; background: #EEF4FD; display: grid; place-items: center; }
html body #hp1#hp1#hp1#hp1#hp1 .cpf-go svg{ width: 13px; height: 13px; display: block; }
@media (hover: hover){
  html body #hp1#hp1#hp1#hp1#hp1 .c7home .c7-card:hover{ border-color: #BAC5D4; }
  html body #hp1#hp1#hp1#hp1#hp1 .c7home .c7-card:hover .cpf-go i{ background: var(--cpf-cob); color: #FFFFFF; }
}

/* ------------------------------------------- position bar · note · arrows */
html body #hp1#hp1#hp1#hp1#hp1 .c7home .c7-pager{ display: block; margin: 0; padding: 0; background: transparent; }
html body #hp1#hp1#hp1#hp1#hp1 .c7home .c7-pager.c7-still > *{ visibility: visible; }
/* a kind that fits without scrolling has nothing to page: the bar and the arrows step out, their room stays */
html body #hp1#hp1#hp1#hp1#hp1 .c7home .c7-pager.c7-still .c7-bar,
html body #hp1#hp1#hp1#hp1#hp1 .c7home .c7-pager.c7-still .cpf-nav{ visibility: hidden; }
/* the bar is Success Stories' own: an off-white thumb with a fine grey edge on a light grey track */
html body #hp1#hp1#hp1#hp1#hp1 .c7home .c7-bar{
  display: block; position: relative; flex: none; height: 18px; margin: 10px 0 0; border-radius: 0;
}
html body #hp1#hp1#hp1#hp1#hp1 .c7home .c7-bar::before{
  content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 4px; border-radius: 4px; background: #DCE1E7;
}
html body #hp1#hp1#hp1#hp1#hp1 .c7home .c7-bar > i{
  top: 5px; bottom: auto; height: 8px; min-width: 24px; border-radius: 8px;
  background: #FAFBFC !important; box-shadow: inset 0 0 0 1px #C9D0D9 !important;
}
html body #hp1#hp1#hp1#hp1#hp1 .cpf-foot{
  display: flex; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: 18px; min-height: 44px;
}
html body #hp1#hp1#hp1#hp1#hp1 .cpf-note{
  position: relative; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0 0 0 28px; max-width: none;
  font-size: 13px; line-height: 1.5; color: var(--cpf-ink3); text-align: left;
}
html body #hp1#hp1#hp1#hp1#hp1 .cpf-note::before{
  content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004594' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2 5 6v5.4c0 4.2 2.9 7.6 7 9.4 4.1-1.8 7-5.2 7-9.4V6z'/%3E%3Cpath d='m9 12 2.2 2.2L15.2 10'/%3E%3C/svg%3E") center / 18px no-repeat;
}
html body #hp1#hp1#hp1#hp1#hp1 .cpf-nav{ display: flex; gap: 8px; flex: none; }
html body #hp1#hp1#hp1#hp1#hp1 .c7home .c7-prev,
html body #hp1#hp1#hp1#hp1#hp1 .c7home .c7-next{
  width: 44px; height: 44px; border: 1px solid #C9D9EF; border-radius: 10px; background: #FFFFFF; color: var(--cpf-act);
  transition: border-color .15s ease;
}
html body #hp1#hp1#hp1#hp1#hp1 .c7home .c7-prev:hover:not(:disabled),
html body #hp1#hp1#hp1#hp1#hp1 .c7home .c7-next:hover:not(:disabled){ border-color: #9DB9E3; }
html body #hp1#hp1#hp1#hp1#hp1 .c7home .c7-prev:focus-visible,
html body #hp1#hp1#hp1#hp1#hp1 .c7home .c7-next:focus-visible{ outline: 2px solid var(--cpf-act); outline-offset: 2px; }
html body #hp1#hp1#hp1#hp1#hp1 .c7home .c7-prev:disabled,
html body #hp1#hp1#hp1#hp1#hp1 .c7home .c7-next:disabled{
  opacity: 1; background-color: #F3F7FD !important; border-color: #D6E1F1 !important; color: #9FB0C8 !important;
}

/* ---------------------------------------------------- the call to action */
html body #hp1#hp1#hp1#hp1#hp1 .cpf-surface .hp-cta{
  display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important;
  gap: 12px 28px !important; width: auto !important; max-width: none !important;
  margin: 18px 0 0 !important; padding: 18px 20px 18px 24px !important; border-radius: 12px !important;
}
html body #hp1#hp1#hp1#hp1#hp1 .cpf-surface .hp-ctatx{ flex: 1 1 260px !important; min-width: 0; text-align: left; }
html body #hp1#hp1#hp1#hp1#hp1 .cpf-surface .hp-ctap{ max-width: 72ch !important; }
html body #hp1#hp1#hp1#hp1#hp1 .cpf-surface .hp-cta a.hp-ctab{ flex: none; min-height: 44px !important; border-radius: 10px !important; }

/* ================================================================ widths */
/* the seven tabs with their icons and counts need about 1200px of lane: they tighten first, then the
   counts step out (each kind's count stays on the line above its rail) */
@media (max-width: 1319px){
  html body #hp1#hp1#hp1#hp1#hp1 .cpf-tab{ padding: 0 16px; }
}
@media (max-width: 1199px){
  html body #hp1#hp1#hp1#hp1#hp1 .cpf-tab{ padding: 0 14px; gap: 8px; }
  html body #hp1#hp1#hp1#hp1#hp1 .cpf-tab em{ display: none; }
}
/* tablets: all seven in one row, icon above label — nothing scrolls but the rail */
@media (max-width: 1023px){
  html body #hp1#hp1#hp1#hp1#hp1 .c7v.c7home{ --c7-h: clamp(190px, 24vw, 230px); }
  html body #hp1#hp1#hp1#hp1#hp1 .cpf-tabs{ display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; overflow: visible; }
  html body #hp1#hp1#hp1#hp1#hp1 .cpf-tab{
    flex-direction: column; justify-content: flex-start; align-items: center; gap: 5px;
    min-height: 64px; padding: 9px 2px 8px; text-align: center; border-radius: 10px 10px 0 0;
  }
  html body #hp1#hp1#hp1#hp1#hp1 .cpf-tab .c7-kl{ font-size: 12.5px; white-space: normal; letter-spacing: 0; }
  /* the last tab ends on the surface's right edge */
  html body #hp1#hp1#hp1#hp1#hp1 .c7-proof:has(.cpf-tab:last-child[aria-selected="true"]) .cpf-surface{ border-top-right-radius: 0; }
}
@media (max-width: 767px){
  html body #hp1#hp1#hp1#hp1#hp1{ padding-top: 30px !important; padding-bottom: 34px !important; }
  html body #hp1#hp1#hp1#hp1#hp1 .c7v.c7home{ --c7-h: clamp(200px, 56vw, 222px); }
  html body #hp1#hp1#hp1#hp1#hp1 .hp-head{ margin-bottom: 22px !important; }
  html body #hp1#hp1#hp1#hp1#hp1 .hp-head .hd-kicker.hd-kicker{ font-size: 11.5px !important; text-wrap: balance; }
  html body #hp1#hp1#hp1#hp1#hp1 .hp-head .hd-title{ font-size: 26px !important; }
  html body #hp1#hp1#hp1#hp1#hp1 .hp-head .hd-desc{ font-size: 15px !important; }
  html body #hp1#hp1#hp1#hp1#hp1 .cpf-tab .c7-kl{ font-size: 11.5px; }
  html body #hp1#hp1#hp1#hp1#hp1 .cpf-surface{ padding: 16px 12px 12px; border-radius: 14px; }
  html body #hp1#hp1#hp1#hp1#hp1 .cpf-meta{ flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 12px; }
  html body #hp1#hp1#hp1#hp1#hp1 .cpf-say{ font-size: 14px; }
  html body #hp1#hp1#hp1#hp1#hp1 .c7home .c7-rail{ gap: 12px; }
  /* the bar and the arrows share a line; the note takes the line under them */
  html body #hp1#hp1#hp1#hp1#hp1 .c7home .c7-pager{ display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 14px; margin-top: 8px; }
  html body #hp1#hp1#hp1#hp1#hp1 .c7home .c7-bar{ grid-column: 1; grid-row: 1; margin: 0; }
  html body #hp1#hp1#hp1#hp1#hp1 .cpf-foot{ display: contents; }
  html body #hp1#hp1#hp1#hp1#hp1 .cpf-nav{ grid-column: 2; grid-row: 1; }
  html body #hp1#hp1#hp1#hp1#hp1 .cpf-note{ grid-column: 1 / -1; grid-row: 2; margin-top: 12px; padding-left: 26px; font-size: 12.5px; }
  html body #hp1#hp1#hp1#hp1#hp1 .cpf-surface .hp-cta{ flex-direction: column !important; align-items: stretch !important; margin-top: 14px !important; padding: 16px !important; }
  html body #hp1#hp1#hp1#hp1#hp1 .cpf-surface .hp-ctatx{ flex: none !important; }
  html body #hp1#hp1#hp1#hp1#hp1 .cpf-surface .hp-cta a.hp-ctab{ justify-content: center !important; text-align: center !important; }
}
/* phones: seven do not fit one row at a readable size — four and three, and still none slides.
   A chosen tab in the upper row is a whole tile; one in the lower row joins the surface. */
@media (max-width: 599px){
  html body #hp1#hp1#hp1#hp1#hp1 .cpf-tabs{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html body #hp1#hp1#hp1#hp1#hp1 .cpf-tab:nth-child(-n+4){ border-radius: 10px; }
  html body #hp1#hp1#hp1#hp1#hp1 .c7-proof:has(.cpf-tab:first-child[aria-selected="true"]) .cpf-surface{ border-top-left-radius: 14px; }
  html body #hp1#hp1#hp1#hp1#hp1 .c7-proof:has(.cpf-tab:last-child[aria-selected="true"]) .cpf-surface{ border-top-right-radius: 14px; }
  html body #hp1#hp1#hp1#hp1#hp1 .c7-proof:has(.cpf-tab:nth-child(5)[aria-selected="true"]) .cpf-surface{ border-top-left-radius: 0; }
}
@media (max-width: 400px){
  html body #hp1#hp1#hp1#hp1#hp1 .hp-head .hd-kicker.hd-kicker{ letter-spacing: .14em !important; }
  /* the button's words stay on one line down to 360px; narrower than that they wrap, as before */
  html body #hp1#hp1#hp1#hp1#hp1 .cpf-surface .hp-cta a.hp-ctab{ padding: 6px 10px !important; gap: 7px !important; font-size: 12.8px !important; }
}
@media (prefers-reduced-motion: reduce){
  html body #hp1#hp1#hp1#hp1#hp1 .c7home .c7-card,
  html body #hp1#hp1#hp1#hp1#hp1 .c7home .c7-prev,
  html body #hp1#hp1#hp1#hp1#hp1 .c7home .c7-next{ transition: none; }
}

/* ------------------------------------- the call to action · quiet  (2026-10-02)
   The owner found the solid cobalt block too heavy and too big, and asked for a
   colour taken from the section and the site's theme, on desktop and phone alike.
   Read off the site (site/align.css): green is a per-service colour CODE, not an
   accent, so it is not used; the theme's quiet materials are the white card
   (#FFFFFF, edge #D3DEEE), this section's tint (#E6EEFA) and the cobalt ink
   (#004594). So the close is one more plate of the section, not a banner:

     plate    the opposite of the ground it sits on, as the cards and the chosen
              tab already are — here, inside the tinted surface, a white card.
              (On phones it sits on the white sheet, so it is the tint:
              stories-proof-phone/phone.css.)
     words    ink heading, grey line — the section's own text colours
     action   a key in the other ground, dark label, a small arrow plate with the
              cobalt arrow (the card foot's boxed chevron). No filled blue.

   Before this block: home-proof/_live-backup/20261002-cta/proof-family.css.   */
html body #hp1#hp1#hp1#hp1#hp1 .cpf-surface .hp-cta{
  background: #FFFFFF !important; background-image: none !important; border: 1px solid #D3DEEE !important; box-shadow: none !important;
  padding: 16px 16px 16px 22px !important;
}
html body #hp1#hp1#hp1#hp1#hp1 .cpf-surface .hp-ctah{ color: #0B0D12 !important; font-size: 16px !important; line-height: 1.3 !important; }
html body #hp1#hp1#hp1#hp1#hp1 .cpf-surface .hp-ctap{ color: #5B6472 !important; }
html body #hp1#hp1#hp1#hp1#hp1 .cpf-surface .hp-cta a.hp-ctab,
html body #hp1#hp1#hp1#hp1#hp1 .cpf-surface .hp-cta a.hp-ctab:hover,
html body #hp1#hp1#hp1#hp1#hp1 .cpf-surface .hp-cta a.hp-ctab:active{
  gap: 12px !important; padding: 6px 8px 6px 16px !important;
  background: #E6EEFA !important; color: #0B0D12 !important; border: 0 !important; box-shadow: none !important; text-shadow: none !important;
  font-weight: 700 !important; transition: background-color .15s ease;
}
html body #hp1#hp1#hp1#hp1#hp1 .cpf-surface .hp-cta a.hp-ctab:hover{ background: #DDE9F9 !important; }
html body #hp1#hp1#hp1#hp1#hp1 .cpf-surface .hp-cta a.hp-ctab:active{ background: #D3E2F7 !important; }
html body #hp1#hp1#hp1#hp1#hp1 .cpf-surface .hp-cta a.hp-ctab svg,
html body #hp1#hp1#hp1#hp1#hp1 .cpf-surface .hp-cta a.hp-ctab:hover svg{
  box-sizing: border-box; flex: none; width: 28px !important; height: 28px !important; padding: 6.5px; border-radius: 8px;
  background: #FFFFFF; stroke: #004594 !important; color: #004594 !important; fill: none;
}