/* SUCCESS STORIES (#ss1) on the Google Ads page, part 3 of 3 — the
   home-system/home.css rules for #ss1. Linked after site/heads.css, as on
   the homepage. See ss.css. */
/* ---- from home-system/home.css ---- */
#ss1 .ss-rail { padding-inline: var(--grid-edge); scroll-padding-left: var(--grid-edge); }
#ss1 .ss-prev { left: max(10px, calc(var(--grid-edge) - 56px)); }
#ss1 .ss-next { right: max(10px, calc(var(--grid-edge) - 56px)); }
html body #ss1 { background-color: var(--k3-ground) !important; border-top-color: var(--k3-edge) !important; border-bottom-color: var(--k3-edge) !important; }
html body :is(#svc3 .s3-eyebrow, #ss1 .ss-eyebrow, #hp1 .hp-eyebrow, #indwork .iw2-eyebrow, #wcu8 .wt-eyebrow, #about5 .ab-eyebrow, #faq10 .faq-eyebrow) { color: var(--k3-kicker) !important; }
html body :is(#svc3, #ss1, #hp1, #indwork, #wcu8, #faq10) :is(h1, h2) > i { color: var(--k3-accent) !important; }
html body :is(#svc3, #ss1, #hp1, #indwork, #wcu8, #about5, #faq10) :is(h1, h2, h3) { color: var(--k3-ink); }
html body #ss1 .ss-card { background-color: var(--k3-card-bg) !important; border-color: var(--k3-card-bd) !important; box-shadow: var(--k3-card-sh) !important; border-radius: var(--k3-r-card) !important; }
html body #ss1 .ss-card:hover { border-color: var(--k3-card-bd-h) !important; box-shadow: var(--k3-card-sh-h) !important; }
html body #ss1 .ss-shot { border-bottom-color: var(--k3-line) !important; border-radius: calc(var(--k3-r-card) - 1px) calc(var(--k3-r-card) - 1px) 0 0 !important; }
html body #ss1 .ss-shot > .chrome { background-color: var(--k3-ground-2) !important; border-bottom-color: var(--k3-line) !important; border-radius: calc(var(--k3-r-card) - 1px) calc(var(--k3-r-card) - 1px) 0 0 !important; }
html body #ss1 .ss-shot > .chrome > i { background-color: var(--k3-edge) !important; }
html body #ss1 .ss-ba { border-color: var(--k3-line) !important; border-radius: var(--k3-r-ctl) !important; background: var(--k3-ba-bg) !important; }
html body #ss1 .ss-sep { background-color: var(--k3-line) !important; }
html body #ss1 .ss-after .ss-v { color: var(--k3-after-ink) !important; }
html body #ss1 .ss-say { border-top-color: var(--k3-line) !important; }
html body #ss1 .ss-url, html body #ss1 .ss-url svg { color: var(--k3-ink-3) !important; }
html body #ss1 .ss-url svg { stroke: var(--k3-url-icon) !important; }
html body :is(#ss1 .ss-dots, #hp1 .hp-dots) > button { background: var(--k3-dot) !important; border-radius: var(--k3-mark-r) !important; }
html body :is(#ss1 .ss-dots, #hp1 .hp-dots) > button[aria-current="true"] { background: var(--k3-dot-on) !important; box-shadow: var(--k3-dot-on-sh) !important; }
html body :is(#ss1, #hp1) button[disabled] { background-color: var(--k3-dis-bg) !important; color: var(--k3-dis-ink) !important; border-color: var(--k3-line) !important; box-shadow: none !important; }
html body :is(#svc3, #ss1, #hp1, #indwork, #wcu8, #about5, #faq10, #mact) { --hd-ink: var(--n4-ink); --hd-kicker-ink: var(--n4-ink-2); --hd-desc-ink: var(--n4-ink-2); --r6-ink: var(--n4-ink); --r6-ink2: var(--n4-ink-2); --r6-ink3: var(--n4-ink-3); --r6-ink4: var(--n4-ink-3); --ink-4: var(--n4-ink-3); }
html body :is(#svc3, #ss1, #hp1, #indwork, #wcu8, #about5, #faq10) :is(.hd-title, h1, h2, h3) { color: var(--n4-ink) !important; }
html body :is(#svc3, #ss1, #hp1, #indwork, #wcu8, #about5, #faq10) .hd-desc { color: var(--n4-ink-2) !important; }
html body :is(#svc3, #ss1, #hp1, #indwork, #wcu8, #about5, #faq10) :is(h1, h2) > i { color: var(--n4-act) !important; }
html body :is(#ss1, #hp1, #indwork) { background-color: var(--n4-ground) !important; border-top-color: var(--n4-line) !important; border-bottom-color: var(--n4-line) !important; }
html body :is(#svc3 .s3-grid, #ss1 .ss-grid, #hp1 .hp-grid, #indwork .iw2-grid, .screen .tex) { opacity: 0.6 !important; }
html body #ss1 .ss-card { border-color: var(--n4-card) !important; }
html body #ss1 .ss-name { color: var(--n4-ink) !important; }
html body #ss1 .ss-url { color: var(--n4-ink-3) !important; }
html body #ss1 :is(.ss-k, .ss-u) { color: var(--n4-ink-3) !important; }
html body #ss1 .ss-before .ss-v { color: var(--n4-ink-3) !important; }
html body #ss1 .ss-after .ss-v { color: var(--n4-ink) !important; }
html body #ss1 .ss-say { color: var(--n4-ink-2) !important; }
html body #ss1 svg:not(:has([fill])):not(.ss-shot svg) { stroke: var(--n4-ink-3); }
html body #ss1 .ss-arrow svg, html body #ss1 .ss-ba svg { stroke: var(--n4-act) !important; }
html body #ss1 :is(.ss-prev, .ss-next, .ss-arrows button) { background: var(--n4-paper) !important; border-color: var(--n4-edge) !important; color: var(--n4-ink) !important; }
html body #ss1 :is(.ss-prev, .ss-next, .ss-arrows button):hover:not([disabled]) { border-color: var(--n4-act) !important; color: var(--n4-act) !important; }
html body #hp1 :is(.hp-dots, .ss-dots) > button[aria-current="true"] { background: var(--n4-ink) !important; }
html body .tail.show .card :is(.win, .ss-shot) { border-radius: 7px 7px 0px 0px; }
html body .tail.show .card :is(.win, .ss-shot) { border-radius: calc(var(--fs-card-r) - 1px) calc(var(--fs-card-r) - 1px) 0 0; }
html body :is(#svc3 > section, #ss1, #hp1, #indwork, #wcu8, #about5, #faq10) { border-width: 0px !important; box-shadow: none !important; margin-top: 0px !important; margin-bottom: 0px !important; padding-top: clamp(64px, 7vw, 100px) !important; padding-bottom: clamp(64px, 7vw, 100px) !important; }
html body #ss1 { background: rgb(255, 255, 255) !important; }
html body :is(#ss1, #hp1, #indwork, #wcu8, #about5, #faq10) { box-shadow: rgb(227, 234, 245) 0px 1px 0px inset !important; }
html body :is(#svc3 .s3-grid, #ss1 .ss-grid) { opacity: 0 !important; }
html body :is(#svc3, #ss1, #hp1, #indwork, #wcu8, #about5, #faq10) .hd-intro .hd-kicker { width: fit-content !important; margin-inline: auto !important; font-family: var(--sans) !important; font-size: 11.5px !important; font-weight: 750 !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; color: rgb(255, 255, 255) !important; background: rgb(2, 28, 66) !important; padding: 7px 14px 7px 12px !important; border-radius: 6px !important; box-shadow: none !important; line-height: 1.2 !important; }
html body :is(#svc3, #ss1, #hp1, #indwork, #wcu8, #about5, #faq10) .hd-intro .hd-title { font-size: clamp(32px, 2.9vw, 44px) !important; font-weight: 800 !important; letter-spacing: -0.035em !important; color: rgb(3, 29, 64) !important; margin-top: 16px !important; line-height: 1.08 !important; }
html body :is(#svc3, #ss1, #hp1, #indwork, #wcu8, #about5, #faq10) .hd-intro .hd-title > :is(i, .ab-dot) { color: rgb(0, 91, 191) !important; }
html body :is(#svc3, #ss1, #hp1, #indwork, #wcu8, #about5, #faq10) .hd-intro .hd-desc { font-size: 16.5px !important; color: rgb(33, 65, 109) !important; line-height: 1.55 !important; max-width: 600px !important; margin-top: 12px !important; }
html body :is(#svc3 .s3-card, #ss1 .ss-card, #hp1 .r4-cell) { background: rgb(255, 255, 255) !important; border: 1px solid rgb(201, 217, 239) !important; border-radius: 12px !important; box-shadow: rgba(2, 29, 67, 0.45) 0px 18px 36px -24px !important; transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s !important; }
html body :is(#svc3 .s3-card, #ss1 .ss-card, #hp1 .r4-cell):hover { transform: translateY(-3px); border-color: rgb(122, 169, 237) !important; box-shadow: rgba(2, 29, 67, 0.55) 0px 26px 48px -26px !important; }
@media (prefers-reduced-motion: reduce) { html body :is(#svc3 .s3-card, #ss1 .ss-card, #hp1 .r4-cell):hover { transform: none; } }
html body :is(#ss1 .ss-dots, #hp1 .hp-dots) > button { background: rgb(201, 217, 239) !important; border-radius: 2px !important; height: 6px !important; }
html body :is(#ss1 .ss-dots, #hp1 .hp-dots) > button[aria-current="true"] { background: rgb(1, 35, 80) !important; box-shadow: none !important; }
html body #ss1 .ss-name { color: rgb(3, 29, 64) !important; }
html body #ss1 .ss-url { color: rgb(0, 91, 191) !important; }
html body #ss1 .ss-ba { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px !important; padding: 0px !important; background: transparent !important; }
html body #ss1 .ss-sep { display: none !important; }
html body #ss1 :is(.ss-before, .ss-after) { padding: 9px 10px 10px !important; border-radius: 6px !important; }
html body #ss1 .ss-before { background: rgb(243, 246, 252) !important; }
html body #ss1 .ss-after { background: linear-gradient(160deg, rgb(2, 68, 145) 0%, rgb(2, 28, 66) 100%) !important; box-shadow: rgba(2, 29, 67, 0.6) 0px 10px 22px -12px !important; }
html body #ss1 .ss-before :is(.ss-k, .ss-u) { color: rgb(74, 99, 133) !important; }
html body #ss1 .ss-before .ss-v { color: rgb(103, 122, 149) !important; }
html body #ss1 .ss-after .ss-k { color: rgb(138, 184, 247) !important; }
html body #ss1 .ss-after .ss-v { color: rgb(255, 255, 255) !important; }
html body #ss1 .ss-after .ss-u { color: rgba(255, 255, 255, 0.72) !important; }
html body #ss1 .ss-say { color: rgb(33, 65, 109) !important; }
html body :is(#svc3 > section, #ss1, #hp1, #indwork, #wcu8, #about5, #faq10) { background-image: radial-gradient(46% 260px at 50% 0%, rgba(0, 91, 191, 0.07), rgba(0, 91, 191, 0)) !important; background-repeat: no-repeat !important; }
html body :is(#svc3, #ss1, #hp1, #indwork, #wcu8, #about5, #faq10) .hd-intro .hd-kicker::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0px 9px 1px 0px; border-radius: 50%; background: rgb(138, 184, 247); box-shadow: rgba(138, 184, 247, 0.22) 0px 0px 0px 3px, rgba(138, 184, 247, 0.7) 0px 0px 8px; vertical-align: middle; }
html body #ss1#ss1#ss1 { background: none rgb(243, 247, 252) !important; }
html body :is(#svc3#svc3#svc3, #ss1#ss1#ss1, #hp1#hp1#hp1, #indwork#indwork#indwork, #wcu8#wcu8#wcu8, #about5#about5#about5, #faq10#faq10#faq10) .hd-kicker { background: rgb(10, 102, 194) !important; color: rgb(255, 255, 255) !important; box-shadow: none !important; }
html body :is(#svc3#svc3#svc3, #ss1#ss1#ss1, #hp1#hp1#hp1, #indwork#indwork#indwork, #wcu8#wcu8#wcu8, #about5#about5#about5, #faq10#faq10#faq10) .hd-kicker::before { background: rgb(255, 255, 255) !important; box-shadow: none !important; }
html body :is(#svc3#svc3#svc3, #ss1#ss1#ss1, #hp1#hp1#hp1, #indwork#indwork#indwork, #wcu8#wcu8#wcu8, #about5#about5#about5, #faq10#faq10#faq10) .hd-title { color: rgb(14, 30, 53) !important; }
html body :is(#svc3#svc3#svc3, #ss1#ss1#ss1, #hp1#hp1#hp1, #indwork#indwork#indwork, #wcu8#wcu8#wcu8, #about5#about5#about5, #faq10#faq10#faq10) .hd-title i { color: rgb(7, 96, 198) !important; -webkit-text-fill-color: rgb(7, 96, 198) !important; background: none !important; }
html body :is(#svc3#svc3#svc3, #ss1#ss1#ss1, #hp1#hp1#hp1, #indwork#indwork#indwork, #wcu8#wcu8#wcu8, #about5#about5#about5, #faq10#faq10#faq10) .hd-desc { color: rgb(80, 92, 108) !important; }
html body #ss1#ss1#ss1 figure.ss-shot[style*="#12161F"] { --k: #F29D38 !important; }
html body #ss1#ss1#ss1 figure.ss-shot[style*="#8E44AD"] { --k: #E0567A !important; }
html body #ss1#ss1#ss1 figure.ss-shot[style*="#0F5C4A"] { --k: #16A34A !important; }
html body #ss1#ss1#ss1 figure.ss-shot[style*="#34495E"] { --k: #0891B2 !important; }
html body #ss1#ss1#ss1 figure.ss-shot[style*="#3730A3"] { --k: #2563EB !important; }
html body #ss1#ss1#ss1 figure.ss-shot[style*="#3B4A63"] { --k: #0D9488 !important; }
html body #ss1#ss1#ss1 figure.ss-shot[style*="#5F3DC4"] { --k: #F97316 !important; }
html body #ss1#ss1#ss1 figure.ss-shot[style*="#A61E4D"] { --k: #DC2626 !important; }
html body :is(#svc3#svc3#svc3, #ss1#ss1#ss1, #hp1#hp1#hp1, #indwork#indwork#indwork, #wcu8#wcu8#wcu8, #about5#about5#about5, #faq10#faq10#faq10) :is(.v03-head .iw2-icn, .wc-n, .ab-sic, .gfaq-qb) { background: rgb(0, 69, 148) !important; box-shadow: none !important; color: rgb(255, 255, 255) !important; }
html body :is(#svc3#svc3#svc3, #ss1#ss1#ss1, #hp1#hp1#hp1, #indwork#indwork#indwork, #wcu8#wcu8#wcu8, #about5#about5#about5, #faq10#faq10#faq10) :is(.v03-head .iw2-icn, .wc-n, .ab-sic, .gfaq-qb) :is(svg, svg *) { stroke: rgb(255, 255, 255) !important; }
html body #ss1#ss1#ss1 .ss-after { background: rgb(0, 69, 148) !important; box-shadow: none !important; }
html body :is(#svc3#svc3#svc3, #ss1#ss1#ss1, #hp1#hp1#hp1, #indwork#indwork#indwork, #wcu8#wcu8#wcu8, #about5#about5#about5, #faq10#faq10#faq10) :is(a.a-go, a.ab-btn) { background: rgb(7, 96, 198) !important; color: rgb(255, 255, 255) !important; box-shadow: none !important; }
html body :is(#svc3#svc3#svc3, #ss1#ss1#ss1, #hp1#hp1#hp1, #indwork#indwork#indwork, #wcu8#wcu8#wcu8, #about5#about5#about5, #faq10#faq10#faq10) :is(a.a-go, a.ab-btn):hover { background: rgb(0, 79, 167) !important; }
html body :is(#svc3#svc3#svc3, #ss1#ss1#ss1, #hp1#hp1#hp1, #indwork#indwork#indwork, #wcu8#wcu8#wcu8, #about5#about5#about5, #faq10#faq10#faq10) :is(.hp-cta, .wc-close) { background: rgb(0, 69, 148) !important; box-shadow: none !important; }
html body :is(#svc3#svc3#svc3, #ss1#ss1#ss1, #hp1#hp1#hp1, #indwork#indwork#indwork, #wcu8#wcu8#wcu8, #about5#about5#about5, #faq10#faq10#faq10) :is(.hp-cta, .wc-close) :is(a.hp-ctab, a.wc-btn) { background: rgb(255, 255, 255) !important; color: rgb(7, 96, 198) !important; box-shadow: none !important; }
html body :is(#svc3#svc3#svc3, #ss1#ss1#ss1, #hp1#hp1#hp1, #indwork#indwork#indwork, #wcu8#wcu8#wcu8, #about5#about5#about5, #faq10#faq10#faq10) :is(.hp-cta, .wc-close) :is(a.hp-ctab, a.wc-btn):hover { background: rgb(234, 242, 253) !important; }
html body :is(#svc3#svc3#svc3, #ss1#ss1#ss1, #hp1#hp1#hp1, #indwork#indwork#indwork, #wcu8#wcu8#wcu8, #about5#about5#about5, #faq10#faq10#faq10) :is(.ss-dots, .hp-dots) button { background: rgb(201, 211, 224) !important; }
html body :is(#svc3#svc3#svc3, #ss1#ss1#ss1, #hp1#hp1#hp1, #indwork#indwork#indwork, #wcu8#wcu8#wcu8, #about5#about5#about5, #faq10#faq10#faq10) :is(.ss-dots, .hp-dots) button[aria-current="true"] { background: rgb(31, 143, 234) !important; }
html body :is(#svc3#svc3#svc3, #ss1#ss1#ss1, #hp1#hp1#hp1, #indwork#indwork#indwork, #wcu8#wcu8#wcu8, #about5#about5#about5, #faq10#faq10#faq10) :is(a.wc-btn, a.hp-ctab, a.a-go, a.ab-btn, a.go), html body :is(#svc3#svc3#svc3, #ss1#ss1#ss1, #hp1#hp1#hp1, #indwork#indwork#indwork, #wcu8#wcu8#wcu8, #about5#about5#about5, #faq10#faq10#faq10) :is(a.wc-btn, a.hp-ctab, a.a-go, a.ab-btn, a.go):hover { transform: none !important; }
@media (max-width: 760px) { html body :is(#svc3#svc3#svc3, #ss1#ss1#ss1, #hp1#hp1#hp1, #indwork#indwork#indwork, #wcu8#wcu8#wcu8, #about5#about5#about5, #faq10#faq10#faq10) :is(a.ab-lnk, a.ss-url) { padding-block: 12px !important; margin-block: -12px !important; } }
html body #ss1#ss1 div.ss-before p.ss-k { color: rgb(91, 103, 120) !important; }
html body #ss1#ss1 div.ss-before span.ss-u { color: rgb(91, 103, 120) !important; }
html body #ss1#ss1 div.ss-body a.ss-url { color: rgb(7, 96, 198) !important; }
/* 2026-09-25: the client's website is plain text now (span.ss-url): the trade's grey, no link hover */
html body #ss1#ss1 div.ss-body span.ss-url { color: rgb(82, 96, 121) !important; text-decoration: none !important; cursor: auto; }
html body #ss1#ss1 div.ss-body h3.ss-name { color: rgb(14, 30, 53) !important; }
html body #ss1#ss1 div.ss-body p.ss-say { border-color: rgb(225, 231, 240) !important; color: rgb(80, 92, 108) !important; }
html body #ss1#ss1 div.ss-rail article.ss-card { border-color: rgb(211, 218, 230) !important; box-shadow: none !important; }
html body :is(#svc3#svc3#svc3#svc3, #ss1#ss1#ss1#ss1, #hp1#hp1#hp1#hp1, #indwork#indwork#indwork#indwork, #wcu8#wcu8#wcu8#wcu8, #about5#about5#about5#about5, #faq10#faq10#faq10#faq10) .hd-kicker.hd-kicker { background: transparent !important; box-shadow: none !important; border-radius: 0px !important; text-shadow: none !important; color: rgb(31, 31, 31) !important; text-transform: none !important; letter-spacing: 0px !important; font-size: 14px !important; font-weight: 600 !important; line-height: 13.8px !important; padding-left: 0px !important; padding-right: 0px !important; }
html body :is(#svc3#svc3#svc3#svc3, #ss1#ss1#ss1#ss1, #hp1#hp1#hp1#hp1, #indwork#indwork#indwork#indwork, #wcu8#wcu8#wcu8#wcu8, #about5#about5#about5#about5, #faq10#faq10#faq10#faq10) .hd-kicker.hd-kicker::before, html body :is(#svc3#svc3#svc3#svc3, #ss1#ss1#ss1#ss1, #hp1#hp1#hp1#hp1, #indwork#indwork#indwork#indwork, #wcu8#wcu8#wcu8#wcu8, #about5#about5#about5#about5, #faq10#faq10#faq10#faq10) .hd-kicker.hd-kicker::after { content: none !important; display: none !important; }
@media (max-width: 760px) { html body :is(#svc3#svc3#svc3#svc3, #ss1#ss1#ss1#ss1, #hp1#hp1#hp1#hp1, #indwork#indwork#indwork#indwork, #wcu8#wcu8#wcu8#wcu8, #about5#about5#about5#about5, #faq10#faq10#faq10#faq10) .hd-kicker.hd-kicker { font-size: 13px !important; } }
html body #ss1#ss1#ss1#ss1 div.ss-rail article.ss-card { border-color: rgb(198, 217, 244) !important; }
html body #ss1#ss1#ss1#ss1 p.ss-say { border-color: rgb(221, 233, 249) !important; }