/*
 * Sections shown on every page: Testimonials and Need help.
 *
 * Extracted from home-sections.css when those blocks became shared — they
 * render on product pages too, so their rules must load everywhere. Loaded
 * by every template, including home.
 */

/*
 * Horizontal overflow, without turning the page into a scroll container.
 *
 * Every template sheet declares `body { overflow-x: hidden }` to stop wide
 * sections putting a horizontal scrollbar on the page. The catch is in the
 * spec: when one axis is `hidden` and the other is left `visible`, the visible
 * one is coerced to `auto`. So body and #wby-root were both scroll containers
 * 5,126px tall in a 5,126px box — containers that can never scroll.
 *
 * That is what stopped "Your configuration" sticking. `position: sticky` sticks
 * to its nearest scrolling ancestor, and its nearest one was a box with nothing
 * to scroll; the viewport scrolling underneath it made no difference.
 *
 * `clip` clips without scrolling, so the other axis stays `visible` and the
 * viewport goes back to being the scroller. `hidden` is kept underneath for
 * Safari before 16, which does not know `clip` — there sticky stays as it is
 * today rather than the page gaining a scrollbar.
 *
 * This sheet loads after the template sheet, which is what lets it win.
 */
/* The fallback first — #wby-root used to carry this inline. */
#wby-root { overflow-x: hidden; }

@supports (overflow-x: clip) {
    body,
    #wby-root {
        overflow-x: clip;
    }
}

.wx136{background:linear-gradient(100deg,#166FA8,#6A54C9);-webkit-background-clip:text;background-clip:text;color:transparent}
.wx155{position:absolute;inset:0;opacity:0;transition:opacity .35s ease;pointer-events:none}
.wx153{--bs-gutter-x:1.5rem;--bs-gutter-y:1.5rem}
.wx152{font-size:16.5px;line-height:1.7;color:#5F7490;margin:0;text-wrap:pretty}
.wx154{height:100%}
.wx397{font-size:13px;color:#7189A3}
.wx141{font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:700;letter-spacing:-.02em;color:#0E2A48}
.wx394{display:flex;align-items:baseline;gap:10px}
.wx161{max-width:1120px;position:relative}
.wx299{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;color:#8598B0}
.wx387{--bs-gutter-x:3rem;--bs-gutter-y:2.5rem}
.wx404{max-width:1240px;position:relative}
.wx406{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#166FA8;background:#E1F0F9;border:1px solid #C6E4F3;padding:7px 13px;border-radius:100px;margin-bottom:20px}
.wx410{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;border:1px solid #D8E5F1;background:#FFFFFF;color:#123258;box-shadow:0 16px 34px -26px rgba(18,50,88,.8);transition:all .28s ease}
.wx316{position:relative;z-index:1;
        padding: 40px 0 60px;
    background:#F4F8FC;overflow:hidden}
.wx317{max-width:700px;margin:0 auto 46px;text-align:center}
.wx318{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(30px,3.8vw,46px);line-height:1.06;letter-spacing:-.03em;margin:0 0 16px;color:#0E2A48}
.wx319{position:relative;overflow:hidden;height:100%;display:flex;flex-direction:column;align-items:center;text-align:center;padding:34px 26px;border-radius:22px;background:#FFFFFF;border:1px solid #E4EDF6;box-shadow:0 30px 62px -46px rgba(18,50,88,.75);transform-style:preserve-3d;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease}
.wx320{font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:600;color:#0E2A48;margin-bottom:8px}
.wx321{font-size:15.5px;font-weight:700;color:#166FA8}
.wx402{
    position:relative;z-index:1;    padding: clamp(60px, 3vw, 60px) 0;background:linear-gradient(180deg,#FFFFFF,#F1F7FC);border-top:1px solid #E9F0F8;overflow:hidden
}
.wx403{position:absolute;top:8%;left:-150px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(24,156,204,.14),transparent 66%);filter:blur(32px)}
.wx405{--bs-gutter-x:3rem;--bs-gutter-y:2rem;margin-bottom:clamp(34px,4vw,52px)}
.wx407{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(32px,4.2vw,52px);line-height:1.02;letter-spacing:-.035em;margin:0;color:#0E2A48;text-wrap:balance}
.wx408{display:flex;align-items:center;gap:16px;justify-content:flex-start}
.wx409{flex:1;height:1px;background:#DCE8F4;min-width:40px}
.wx411{position:relative;overflow:hidden;padding:clamp(28px,3.2vw,44px);border-radius:26px;background:linear-gradient(158deg,rgba(255,255,255,.96),rgba(255,255,255,.78));border:1px solid rgba(255,255,255,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 40px 90px -54px rgba(18,50,88,.9)}
.wx412{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.wx413{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;color:#8598B0}
/* .wx414{position:relative;font-family:'Space Grotesk',sans-serif;font-size:clamp(19px,2.1vw,20px);font-weight:500;line-height:1.5;letter-spacing:-.02em;color:#12314F;margin:0 0 clamp(24px,3vw,34px);text-wrap:pretty} */
.wx414{
    font-size: 14.5px;
    line-height: 1.65;
    color: #5F7490;
    margin: 0 0 24px;
    flex: 1;
}
.wx415{position:relative;display:flex;align-items:center;gap:14px;padding-top:22px;border-top:1px solid #E6EEF7}
.wx416{display:grid;gap:3px}
.wx417{font-size:15.5px;font-weight:700;color:#0E2A48}
.wx418{padding:clamp(24px,2.6vw,32px);border-radius:24px;background:#FFFFFF;border:1px solid #E4EDF6;box-shadow:0 34px 70px -50px rgba(18,50,88,.85)}
.wx419{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.2em;color:#8598B0;margin-bottom:18px}
.wx420{display:flex;flex-wrap:wrap;gap:11px;margin-bottom:26px}
.wx421{position:relative;overflow:hidden;cursor:pointer;flex:0 0 auto;width:52px;height:52px;border-radius:50%;border:2px solid #DCE8F4;background:#F7FAFD;padding:0;transition:border-color .35s ease,background .35s ease,box-shadow .35s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.wx422{width:100%;height:100%;object-fit:cover;display:block}
.wx423{position:absolute;left:0;bottom:0;height:3px;width:0;background:linear-gradient(90deg,#189CCC,#6A54C9)}
.wx424{height:1px;background:#E9F0F8;margin-bottom:22px}
.wx425{display:grid;gap:14px}

/*
 * Testimonial deck geometry.
 *
 * Lived in home.css, so on a product page the deck had no height and every
 * quote collapsed on top of the heading. It renders site-wide, so it belongs
 * with the other shared rules. Values are the home page originals.
 */
[data-deck]{position:relative;perspective:1700px;
        height: clamp(380px, 26vw, 380px);
}
[data-slide]{position:absolute;left:0;right:0;top:0;transition:transform .75s cubic-bezier(.2,.8,.2,1),opacity .55s ease,filter .6s ease;will-change:transform,opacity}
[data-slide][data-pos="0"]{transform:translate3d(0,0,0) rotateY(0deg) scale(1);opacity:1;z-index:5;filter:none;pointer-events:auto}
[data-slide][data-pos="1"]{transform:translate3d(6%,20px,-130px) rotateY(-8deg) scale(.95);opacity:.5;z-index:4;filter:blur(1.2px);pointer-events:none}
[data-slide][data-pos="2"]{transform:translate3d(11%,38px,-260px) rotateY(-12deg) scale(.89);opacity:.24;z-index:3;filter:blur(2.4px);pointer-events:none}
[data-slide][data-pos="x"]{transform:translate3d(-16%,-10px,-380px) rotateY(10deg) scale(.82);opacity:0;z-index:1;pointer-events:none}
@media (max-width:767.98px){[data-deck]{height:clamp(500px,120vw,620px)}}

/*
 * Footer wordmark.
 *
 * Each letter lifts and lights up on hover. The template carried one class per
 * letter of "WEBYNE"; the lift is shared and only the colour varies, so the
 * footer can ramp any wordmark across the three tones. Values are the
 * template's originals. Lives here because the footer renders on every page.
 */
.wx4:hover{transform:translateY(-14px) !important}
.wx4-cyan:hover{color:#5CE0F5 !important;text-shadow:0 0 64px rgba(24,156,204,.9) !important}
.wx4-violet:hover{color:#A78BFF !important;text-shadow:0 0 64px rgba(106,84,201,.95) !important}
.wx4-green:hover{color:#34F5B0 !important;text-shadow:0 0 64px rgba(23,166,115,.9) !important}