/* ==========================================================================
   SUCCESS STORIES + CLIENT PROOF on a phone                       2026-10-02
   ==========================================================================
   The owner's picks from /home-stories-proof-mobile-10/round-2.html:

     Success Stories (#success-stories)   option 1 "Joined Surface"
       white head → one row of tabs → the chosen tab is the top of one
       full-width tinted plane that holds the cards and the closing link.
       On the homepage and on the five service pages.

     Client Proof (#hp1)                   option 5 "Header Band"
       the head and the tabs sit on a tinted band → the chosen tab is the
       top of the white sheet that holds the screenshots, the masking note
       and the call to action (a compact plate in the section's tint).
       Homepage only.

   Why this way round: Success Stories always follows a tinted block (the
   service plane on the homepage, the hero strip on a service page), so it
   opens on white; Client Proof is followed by Industries, which is tinted,
   so it closes on white. Down the homepage the ground alternates
   white · tint · white · tint · white · tint, and each section is one tinted
   block and one white block.

   Phones only (≤ 767px, the boundary assets/success-stories/ss.css uses).
   Nothing at 768px and above changes. Markup, content, the order of the
   tabs, how a card opens and the preview window are untouched; this file
   only re-draws what is already there. Hidden on phones, by the owner's
   "quiet" brief: the position bar, previous / next, "Next: …" and the second
   count (the tab carries it).

   Six ids on every selector: the older layers style these sections at up to
   five (home-proof/proof-family.css, site-nav/nav-states.css).
   Helper: phone.js (keeps the chosen tab in view; the row always ends on a
   tab that is cut by the screen edge, never on a gap).

   To undo: delete the two "stories-proof-phone" lines in the <head> of
   index.html, google-ads.html, meta-ads.html, social-media.html,
   website-development.html and landing-page.html — or restore those pages
   from stories-proof-phone/_live-backup/20261002-apply/.
   ========================================================================== */

@media (max-width: 767px){

  /* =================================================== SUCCESS STORIES */
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories{
    --spx-sf: #E6EEFA; --spx-lane: 18px;
  }
  /* the lane opens to the screen: the head and the tabs keep the side margin, the plane does not */
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .ow5-in{
    width: 100% !important; max-width: none !important; margin-inline: 0 !important;
  }
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .s2-intro{
    padding-inline: var(--spx-lane) !important; margin-bottom: 20px !important;
  }

  /* one row of tabs, never wrapping; it scrolls sideways under the finger */
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .ow5-tabs{
    display: flex !important; grid-template-columns: none !important; align-items: flex-end !important; gap: 0 !important;
    margin: 0 !important; padding: 4px var(--spx-lane) 0 !important;
    overflow-x: auto !important; overflow-y: hidden !important; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .ow5-tabs::-webkit-scrollbar{ display: none; }
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .ow5-tabs .ow5-tab{
    position: relative; flex: none !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important;
    gap: 8px !important; height: 54px !important; min-height: 54px !important; padding: 0 var(--spx-tp, 16px) !important;
    border-radius: 14px 14px 0 0 !important; background: transparent !important; color: #4B5568 !important; text-align: left !important;
  }
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .ow5-tabs .ow5-ti{ color: #6B7789; }
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .ow5-tabs .ow5-tl{
    font-size: 14.5px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: -.01em !important; white-space: nowrap !important;
  }
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .ow5-tabs .ow5-tc{
    display: inline !important; font-size: 12px !important; font-weight: 600 !important; color: #8A93A1 !important;
  }
  /* the chosen tab is the plane's own colour and runs into it — no line, no outline */
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .ow5-tabs .ow5-tab[aria-selected="true"]{
    background: var(--spx-sf) !important; color: #004594 !important;
  }
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .ow5-tabs .ow5-tab[aria-selected="true"] .ow5-ti{ color: #004594; }
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .ow5-tabs .ow5-tab[aria-selected="true"] .ow5-tl{ font-weight: 750 !important; }
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .ow5-tabs .ow5-tab[aria-selected="true"] .ow5-tc{ color: #4E6A95 !important; }
  /* two small fillets melt the tab into the plane */
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .ow5-tabs .ow5-tab[aria-selected="true"]::after{
    content: ""; position: absolute; left: -13px; right: -13px; bottom: 0; height: 13px; pointer-events: none;
    background: radial-gradient(circle at 0 0, transparent 12.5px, var(--spx-sf) 13px) left bottom / 13px 13px no-repeat,
                radial-gradient(circle at 100% 0, transparent 12.5px, var(--spx-sf) 13px) right bottom / 13px 13px no-repeat;
  }

  /* the plane: screen edge to screen edge, square */
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .s2-surface{
    border-radius: 0 !important; background: var(--spx-sf) !important;
  }
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .s2-pane{
    padding: 20px var(--spx-lane) 22px !important;
  }
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .ow5-meta{ margin-bottom: 14px !important; }
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .ow5-say{ font-size: 14.5px !important; }
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .ow5-meta .ow5-cnt{ display: none !important; }
  /* the rail runs to both screen edges; the next card, cut by the edge, is the whole "there is more" signal */
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .s2-pane.is-a .ow5-rail{
    --o-vis: 1.34;
    margin-inline: calc(-1 * var(--spx-lane)) !important; padding-inline: var(--spx-lane) !important; scroll-padding-inline: var(--spx-lane) !important;
  }
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .ow5-bar{ display: none !important; }
  /* the close: one quiet link — dark words, a small white arrow plate */
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .ow5-foot{
    margin-top: 12px !important; align-items: flex-start !important;
  }
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .ow5-next{ display: none !important; }
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .ow5-cta{
    justify-content: flex-start !important; gap: 10px !important; min-height: 44px !important;
    font-size: 14.5px !important; font-weight: 650 !important; color: #0B0D12 !important; text-decoration: none !important;
  }
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .ow5-cta svg{
    box-sizing: border-box; width: 28px !important; height: 28px !important; padding: 6.5px; border-radius: 9px;
    background: #FFFFFF; color: #004594; stroke: currentColor; stroke-width: 2;
  }

  /* ====================================================== CLIENT PROOF */
  html body #hp1#hp1#hp1#hp1#hp1#hp1{
    --spx-sf: #E6EEFA; --spx-lane: 18px;
    padding-top: 0 !important; padding-bottom: 34px !important; background: #FFFFFF !important;
  }
  html body #hp1#hp1#hp1#hp1#hp1#hp1 .c7v.c7home{ width: 100% !important; max-width: none !important; margin-inline: 0 !important; }

  /* the band: the head and the tabs on one tinted ground, screen edge to screen edge */
  html body #hp1#hp1#hp1#hp1#hp1#hp1 .hp-head{
    margin: 0 !important; padding: 36px var(--spx-lane) 20px !important; background: var(--spx-sf) !important;
  }
  html body #hp1#hp1#hp1#hp1#hp1#hp1 .cpf-tabs{
    display: flex !important; grid-template-columns: none !important; align-items: flex-end !important; gap: 0 !important;
    margin: 0 !important; padding: 4px var(--spx-lane) 0 !important; background: var(--spx-sf) !important;
    overflow-x: auto !important; overflow-y: hidden !important; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  html body #hp1#hp1#hp1#hp1#hp1#hp1 .cpf-tabs::-webkit-scrollbar{ display: none; }
  html body #hp1#hp1#hp1#hp1#hp1#hp1 .cpf-tab{
    position: relative; flex: none !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important;
    gap: 8px !important; height: 52px !important; min-height: 52px !important; padding: 0 var(--spx-tp, 16px) !important;
    border-radius: 14px 14px 0 0 !important; background: transparent !important; color: #42506A !important; text-align: left !important;
  }
  html body #hp1#hp1#hp1#hp1#hp1#hp1 .cpf-tab .cpf-ti{ color: #62708A; }
  html body #hp1#hp1#hp1#hp1#hp1#hp1 .cpf-tab .c7-kl{
    font-size: 14.5px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: -.01em !important; white-space: nowrap !important;
  }
  html body #hp1#hp1#hp1#hp1#hp1#hp1 .cpf-tab em{ display: inline !important; font-size: 12px !important; font-weight: 600 !important; color: #7C8AA2 !important; }
  /* the chosen tab is the sheet's own white and runs into it */
  html body #hp1#hp1#hp1#hp1#hp1#hp1 .cpf-tab[aria-selected="true"]{ background: #FFFFFF !important; color: #004594 !important; }
  html body #hp1#hp1#hp1#hp1#hp1#hp1 .cpf-tab[aria-selected="true"] .cpf-ti{ color: #004594; }
  html body #hp1#hp1#hp1#hp1#hp1#hp1 .cpf-tab[aria-selected="true"] .c7-kl{ font-weight: 750 !important; }
  html body #hp1#hp1#hp1#hp1#hp1#hp1 .cpf-tab[aria-selected="true"] em{ color: #4E6A95 !important; }
  html body #hp1#hp1#hp1#hp1#hp1#hp1 .cpf-tab[aria-selected="true"]::after{
    content: ""; position: absolute; left: -13px; right: -13px; bottom: 0; height: 13px; pointer-events: none;
    background: radial-gradient(circle at 0 0, transparent 12.5px, #FFFFFF 13px) left bottom / 13px 13px no-repeat,
                radial-gradient(circle at 100% 0, transparent 12.5px, #FFFFFF 13px) right bottom / 13px 13px no-repeat;
  }

  /* the sheet: white, square, screen edge to screen edge */
  html body #hp1#hp1#hp1#hp1#hp1#hp1 .cpf-surface{
    padding: 20px 0 0 !important; border-radius: 0 !important; background: #FFFFFF !important;
  }
  html body #hp1#hp1#hp1#hp1#hp1#hp1 .cpf-meta{ margin: 0 var(--spx-lane) 14px !important; }
  html body #hp1#hp1#hp1#hp1#hp1#hp1 .cpf-say{ font-size: 14.5px !important; }
  html body #hp1#hp1#hp1#hp1#hp1#hp1 .cpf-meta .cpf-cnt{ display: none !important; }
  html body #hp1#hp1#hp1#hp1#hp1#hp1 .c7home .c7-rail{
    padding: 2px var(--spx-lane) 4px !important; scroll-padding-inline: var(--spx-lane) !important;
  }
  /* quiet: no position bar, no previous / next — the note alone stays under the rail */
  html body #hp1#hp1#hp1#hp1#hp1#hp1 .c7home .c7-pager{ display: block !important; margin: 14px var(--spx-lane) 0 !important; }
  html body #hp1#hp1#hp1#hp1#hp1#hp1 .c7home .c7-bar,
  html body #hp1#hp1#hp1#hp1#hp1#hp1 .cpf-nav{ display: none !important; }
  html body #hp1#hp1#hp1#hp1#hp1#hp1 .cpf-foot{ display: block !important; min-height: 0 !important; margin: 0 !important; }
  html body #hp1#hp1#hp1#hp1#hp1#hp1 .cpf-note{ margin-top: 0 !important; }
  /* the call to action: compact, and in the section's own materials (the reasoning is in home-proof/proof-family.css,
     "the call to action · quiet"). On the white sheet the plate is the section's tint and the key is white. */
  html body #hp1#hp1#hp1#hp1#hp1#hp1 .cpf-surface .hp-cta{
    margin: 16px var(--spx-lane) 0 !important; padding: 14px !important; gap: 10px !important;
    background: var(--spx-sf) !important; background-image: none !important; border: 0 !important; border-radius: 12px !important; box-shadow: none !important;
  }
  html body #hp1#hp1#hp1#hp1#hp1#hp1 .cpf-surface .hp-ctah{
    margin: 0 !important; font-size: 14.5px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: -.015em !important; color: #0B0D12 !important;
  }
  html body #hp1#hp1#hp1#hp1#hp1#hp1 .cpf-surface .hp-ctap{
    margin: 3px 0 0 !important; font-size: 12px !important; line-height: 1.45 !important; color: #3A414C !important;
  }
  html body #hp1#hp1#hp1#hp1#hp1#hp1 .cpf-surface .hp-cta a.hp-ctab,
  html body #hp1#hp1#hp1#hp1#hp1#hp1 .cpf-surface .hp-cta a.hp-ctab:hover,
  html body #hp1#hp1#hp1#hp1#hp1#hp1 .cpf-surface .hp-cta a.hp-ctab:active{
    display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important;
    min-height: 42px !important; padding: 5px 7px 5px 14px !important; text-align: left !important;
    border: 1px solid #C9D9EF !important; border-radius: 10px !important; background: #FFFFFF !important; box-shadow: none !important;
    font-size: 13px !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: -.01em !important; color: #0B0D12 !important;
    transform: none !important;
  }
  html body #hp1#hp1#hp1#hp1#hp1#hp1 .cpf-surface .hp-cta a.hp-ctab svg,
  html body #hp1#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: var(--spx-sf); stroke: #004594 !important; color: #004594 !important; fill: none;
  }
}
@media (max-width: 340px){
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories,
  html body #hp1#hp1#hp1#hp1#hp1#hp1{ --spx-lane: 16px; }
}