:root { --sp-navy: #0f344d; --sp-deep: #123f5c; --sp-blue: #235c81; --sp-mid: #5492b6; --sp-light: #d9ecf6; --sp-pale: #eef7fb; --sp-coral: #f27064; --sp-ink: #132536; --sp-muted: #5c6a73; --sp-line: rgba(16, 47, 70, .14); --sp-display: "Londrina Solid", "Big Shoulders Display", Impact, "Arial Black", sans-serif; --sp-display-alt: "Londrina Sketch", "Londrina Solid", Impact, sans-serif; --sp-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } body.page-id-7 { background: #dceef7; } body.page-id-7 #block-V47cLYY9tL { background: linear-gradient(45deg, var(--sp-mid) 11%, var(--sp-light) 88%) !important; } .sp-page, .sp-page * { box-sizing: border-box; } .sp-page :is(h1, h2, h3, h4, p, a, span, strong, em, label, li, div) { -webkit-text-fill-color: currentColor !important; -webkit-text-stroke-width: 0 !important; -webkit-text-stroke-color: transparent !important; paint-order: normal !important; background-clip: border-box !important; -webkit-background-clip: border-box !important; text-shadow: none !important; filter: none !important; } .sp-page { color: var(--sp-ink); background: radial-gradient(circle at 14% 8%, rgba(84,146,182,.34), transparent 24rem), radial-gradient(circle at 88% 6%, rgba(35,92,129,.22), transparent 28rem), linear-gradient(180deg, #e9f5fb 0%, #d7edf8 46%, #c8e4f2 100%); margin: 0; width: 100%; max-width: none; overflow: hidden; font-family: var(--sp-body); } .sp-section { padding: clamp(4.5rem, 8vw, 8rem) clamp(1rem, 4vw, 3rem); } .sp-wrap { width: min(1180px, 100%); margin: 0 auto; } .sp-eyebrow { display: inline-flex; align-items: center; gap: .55rem; color: var(--sp-blue); font-size: .78rem; line-height: 1; letter-spacing: 0; text-transform: uppercase; font-weight: 800; } .sp-eyebrow::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--sp-coral); box-shadow: 0 0 0 .32rem rgba(242,112,100,.13); } .sp-hero { min-height: 100vh; padding: 0 clamp(1rem, 2vw, 2rem); background: radial-gradient(circle at 16% 14%, rgba(84,146,182,.26), transparent 18rem), radial-gradient(circle at 82% 22%, rgba(35,92,129,.16), transparent 23rem), linear-gradient(135deg, #f3fbff 0%, #dff1fa 48%, #cce7f4 100%); } .sp-hero-shell { position: relative; width: min(1260px, 100%); min-height: 100vh; margin: 0 auto; padding: clamp(1.35rem, 2vw, 2rem) 0 clamp(5rem, 7vw, 6.5rem); isolation: isolate; } .sp-hero-shell::before { content: ""; position: absolute; inset: 5.5rem 4% 5.3rem; z-index: -2; border-radius: 14px; background: linear-gradient(90deg, rgba(35,92,129,.07) 0 1px, transparent 1px 100%) 0 0 / 44px 44px, linear-gradient(180deg, rgba(35,92,129,.06) 0 1px, transparent 1px 100%) 0 0 / 44px 44px; opacity: .72; } .sp-hero-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--sp-navy); font-weight: 900; } .sp-hero-nav { display: flex; align-items: center; gap: clamp(.85rem, 1.55vw, 1.75rem); font-size: .95rem; } .sp-hero-user { display: inline-flex !important; align-items: center; gap: .72rem; color: var(--sp-navy); white-space: nowrap; } .sp-hero-user-icon { display: inline-block; position: relative; width: 1.15rem; height: 1.15rem; color: var(--sp-navy); } .sp-hero-user-icon::before, .sp-hero-user-icon::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); background: currentColor; } .sp-hero-user-icon::before { top: 0; width: .55rem; height: .55rem; border-radius: 999px; } .sp-hero-user-icon::after { bottom: 0; width: 1rem; height: .48rem; border-radius: .55rem .55rem .12rem .12rem; } .sp-hero-nav a { color: var(--sp-navy); text-decoration: none; white-space: nowrap; } .sp-hero-nav .sp-start-link { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .75rem 1rem; border-radius: 10px; color: #fff; background: var(--sp-navy); box-shadow: 0 12px 28px rgba(15,52,77,.16); } .sp-hero-center { position: absolute; left: 50%; top: 44.5%; z-index: 3; width: min(640px, 54vw); transform: translate(-50%, -50%); text-align: center; } .sp-hero-promise { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.25rem; padding: .72rem 1rem; border-radius: 10px; color: var(--sp-navy); background: rgba(255,255,255,.66); border: 1px solid rgba(84,146,182,.42); box-shadow: 0 14px 35px rgba(16,47,70,.08); font-weight: 950; line-height: 1; } .sp-hero-promise::before { content: ""; width: .65rem; height: .65rem; border-radius: 999px; background: var(--sp-coral); box-shadow: 0 0 0 .28rem rgba(242,112,100,.12); } .sp-hero h1 { margin: 0; color: var(--sp-navy); font-family: var(--sp-display) !important; font-weight: 400 !important; font-size: clamp(4.65rem, 7.05vw, 7.15rem); line-height: .82; letter-spacing: 0; text-wrap: balance; word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; } .sp-hero h1 .sp-hero-line { display: block !important; } .sp-hero h1 em { color: #0875bc; font-style: normal; font-family: var(--sp-display) !important; letter-spacing: 0; } .sp-lede { margin: 1.15rem auto 0; max-width: 540px; color: var(--sp-deep); font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.45; font-weight: 700; } .sp-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.8rem 0 0; } .sp-hero .sp-actions { justify-content: center; margin-top: 1.45rem; } .sp-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.35rem; padding: .95rem 1.25rem; border-radius: 999px; border: 1px solid transparent; text-decoration: none; font-weight: 800; color: #fff; background: var(--sp-coral); box-shadow: 0 18px 45px rgba(242,112,100,.26); } .sp-hero .sp-btn { min-height: 3.75rem; border-radius: 10px; padding-inline: 1.35rem; font-size: 1.05rem; } .sp-hero .sp-actions .sp-btn:first-child { background: var(--sp-navy); box-shadow: 0 18px 38px rgba(15,52,77,.22); } .sp-btn.alt { color: var(--sp-navy); background: rgba(217,236,246,.92); border-color: var(--sp-line); box-shadow: none; } .sp-hero .sp-actions .sp-btn.alt { color: #fff; background: var(--sp-coral); border-color: transparent; box-shadow: 0 18px 38px rgba(242,112,100,.28); } .sp-hero-chip-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1rem; } .sp-hero-chip { display: inline-flex; align-items: center; gap: .55rem; min-height: 3.15rem; padding: .62rem .82rem; border-radius: 10px; background: rgba(255,255,255,.48); border: 1px solid rgba(84,146,182,.35); color: var(--sp-navy); box-shadow: 0 12px 28px rgba(16,47,70,.06); } .sp-hero-chip strong { display: block; font-size: 1rem; line-height: 1; } .sp-hero-chip span { display: block; color: var(--sp-muted); font-size: .78rem; line-height: 1.1; font-weight: 800; } .sp-hero-icon { display: inline-grid; place-items: center; flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 9px; color: #fff; background: var(--sp-navy); font-style: normal; font-weight: 950; line-height: 1; } .sp-hero-icon svg { display: block; width: 1.16rem; height: 1.16rem; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; } .sp-hero-icon .sp-icon-fill { fill: currentColor; stroke: none; } .sp-hero-card { position: absolute; z-index: 2; width: var(--card-w, 16rem); display: grid; align-content: start; grid-template-rows: auto auto auto; gap: .56rem; min-height: var(--card-h, auto); padding: .95rem; border-radius: 12px; border: 1.5px solid rgba(35,92,129,.42); background: rgba(255,255,255,.78); box-shadow: 0 18px 40px rgba(16,47,70,.12); transform: rotate(var(--rot, 0deg)); overflow: hidden; isolation: isolate; contain: layout paint; animation: sp-card-float 9s ease-in-out infinite; animation-delay: var(--delay, 0s); transition: filter .24s ease, box-shadow .24s ease; will-change: translate, scale; } .sp-hero-card:not(.sp-hero-card--process)::before, .sp-hero-card:not(.sp-hero-card--process)::after { content: ""; position: absolute; pointer-events: none; z-index: 0; } .sp-hero-card:not(.sp-hero-card--process)::before { inset: 0; background: radial-gradient(circle at 14% 20%, rgba(242,112,100,.16) 0 .45rem, transparent .48rem), linear-gradient(135deg, rgba(84,146,182,.18), transparent 44%), repeating-linear-gradient(0deg, transparent 0 1.1rem, rgba(84,146,182,.1) 1.1rem calc(1.1rem + 1px)); opacity: .82; } .sp-hero-card:not(.sp-hero-card--process)::after { display: none; } .sp-hero-card--blue { color: #fff; background: linear-gradient(135deg, #006db5 0%, var(--sp-blue) 100%); border-color: rgba(255,255,255,.35); box-shadow: 0 22px 46px rgba(0,93,160,.24); } .sp-hero-card--blue::before { background: radial-gradient(circle at 14% 20%, rgba(242,112,100,.34) 0 .45rem, transparent .48rem), linear-gradient(135deg, rgba(255,255,255,.18), transparent 42%), repeating-linear-gradient(0deg, transparent 0 1.1rem, rgba(255,255,255,.08) 1.1rem calc(1.1rem + 1px)) !important; } .sp-hero-card--blue::after { background: linear-gradient(90deg, rgba(255,255,255,.38) 0 36%, transparent 36% 46%, rgba(255,255,255,.24) 46% 100%), linear-gradient(0deg, rgba(255,255,255,.16), rgba(255,255,255,.06)) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2) !important; } .sp-hero-card__top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: .7rem; min-width: 0; min-height: 2rem; transition: opacity .18s ease, translate .18s ease; } .sp-hero-card span { color: var(--sp-blue); font-weight: 900; font-size: .78rem; text-transform: uppercase; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp-hero-card--blue span, .sp-hero-card--blue small, .sp-hero-card--blue strong { color: #fff; } .sp-hero-card strong { color: var(--sp-navy); font-family: var(--sp-display) !important; font-weight: 400 !important; font-size: clamp(1.18rem, 1.8vw, 1.7rem); line-height: .9; text-transform: uppercase; } .sp-hero-card small { position: relative; z-index: 1; margin-top: .12rem; color: var(--sp-deep); line-height: 1.35; font-size: .88rem; font-weight: 700; display: block; min-height: 1.35em; max-height: 1.35em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: opacity .18s ease, translate .18s ease; } .sp-hero-card em { position: relative; z-index: 1; justify-self: start; margin-top: .04rem; max-width: 100%; border-radius: 8px; background: var(--sp-navy); color: #fff; font-style: normal; font-weight: 900; font-size: .9rem; padding: .56rem .78rem; box-shadow: 0 14px 28px rgba(15,52,77,.18); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .18s ease, translate .18s ease; } .sp-hero-card--blue em { background: var(--sp-navy); } .sp-hero-card.is-swapping { filter: saturate(1.08) contrast(1.02); box-shadow: 0 24px 52px rgba(16,47,70,.16); animation: sp-card-float 9s ease-in-out infinite, sp-card-inflate .7s cubic-bezier(.2,.9,.2,1) both; animation-delay: var(--delay, 0s), 0s; } .sp-hero-card.is-rewriting .sp-hero-card__top, .sp-hero-card.is-rewriting > small, .sp-hero-card.is-rewriting > em { opacity: .08; translate: 0 .28rem; } .sp-hero-card--savings { --card-w: clamp(14rem, 18vw, 18.4rem); --rot: 0deg; left: 2.1%; top: 6.8rem; } .sp-hero-card--audit { --card-w: clamp(13rem, 15vw, 15.8rem); --rot: 0deg; left: 2.8%; top: 22.2rem; } .sp-hero-card--estimate { --card-w: clamp(13rem, 15vw, 15.8rem); --rot: 0deg; left: 4.2%; top: 35rem; } .sp-hero-card--process { --card-w: clamp(16rem, 20vw, 19.5rem); --rot: 0deg; left: 6.2%; bottom: 5.3rem; } .sp-hero-card--fees { --card-w: clamp(13.5rem, 15vw, 16rem); --rot: 0deg; right: 3.8%; top: 6.8rem; } .sp-hero-card--score { --card-w: clamp(14rem, 17vw, 17.4rem); --rot: 0deg; right: 2.6%; top: 24rem; } .sp-hero-card--report { --card-w: clamp(15rem, 18vw, 18rem); --rot: 0deg; right: 4.4%; bottom: 7.9rem; } .sp-hero-card--roi { --card-w: clamp(13.5rem, 16vw, 16.4rem); --rot: 0deg; left: 50.5%; bottom: 7.2rem; transform: translateX(-50%) rotate(var(--rot)); } .sp-hero-card--process { overflow: hidden; padding: 0; gap: 0; background: rgba(255,255,255,.88); } .sp-hero-card--process .sp-hero-card__top { padding: .78rem .92rem; color: #fff; background: var(--sp-navy); } .sp-hero-card--process .sp-hero-card__top span, .sp-hero-card--process .sp-hero-card__top .sp-hero-icon { color: #fff; } .sp-hero-card--process .sp-hero-card__top .sp-hero-icon { background: rgba(255,255,255,.12); } .sp-process-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .85rem; align-items: center; padding: .92rem .92rem 1.75rem; } .sp-process-list { display: grid; gap: .38rem; margin: 0; padding: 0; list-style: none; color: var(--sp-deep); font-size: .8rem; font-weight: 800; line-height: 1.25; } .sp-process-list li { position: relative; padding-left: 1.1rem; list-style: none !important; } .sp-process-list li::marker { content: ""; } .sp-process-list li::before { content: ""; position: absolute; left: 0; top: .2rem; width: .55rem; height: .32rem; border-left: 2px solid #0875bc; border-bottom: 2px solid #0875bc; transform: rotate(-45deg); } .sp-process-gauge { display: grid; place-items: center; position: relative; width: 5.55rem; aspect-ratio: 1; border-radius: 999px; background: conic-gradient(#0875bc 0 72%, #b7d6e8 72% 100%); box-shadow: inset 0 0 0 .55rem #eef8fc; } .sp-process-gauge span { color: var(--sp-navy); font-size: 1.05rem; line-height: 1; text-transform: none; } .sp-process-gauge small { position: absolute; left: 50%; bottom: -1rem; transform: translateX(-50%); color: var(--sp-deep); font-size: .62rem; line-height: 1; white-space: nowrap; } .sp-hero-image-card { display: block; padding: 0; min-height: 0; aspect-ratio: var(--card-aspect, 1.82); border: 0; background: transparent; box-shadow: none; overflow: visible; contain: layout paint; animation: sp-card-float 9s ease-in-out infinite, sp-card-image-inflate var(--swap-duration, 7.6s) ease-in-out infinite; animation-delay: var(--delay, 0s), var(--swap-delay, 0s); } .sp-hero-image-card::before, .sp-hero-image-card::after { display: none !important; } .sp-hero-image-card .sp-card-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; transform-origin: center; animation-duration: var(--swap-duration, 7.6s); animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-delay: var(--swap-delay, 0s); } .sp-hero-image-card .sp-card-image--a { animation-name: sp-card-image-a; } .sp-hero-image-card .sp-card-image--b { opacity: 0; animation-name: sp-card-image-b; } .sp-hero-image-card.sp-hero-card--savings { --rot: -2.2deg; --card-aspect: 1586 / 992; } .sp-hero-image-card.sp-hero-card--audit { --rot: -1.5deg; --card-aspect: 1586 / 992; } .sp-hero-image-card.sp-hero-card--estimate { --rot: 1.8deg; --card-aspect: 1586 / 992; } .sp-hero-image-card.sp-hero-card--process { --rot: -.6deg; --card-aspect: 936 / 556; } .sp-hero-image-card.sp-hero-card--fees { --rot: -1.3deg; --card-aspect: 1586 / 992; } .sp-hero-image-card.sp-hero-card--score { --rot: 1.8deg; --card-aspect: 1586 / 992; } .sp-hero-image-card.sp-hero-card--report { --rot: 1.2deg; --card-aspect: 1586 / 992; } .sp-hero-image-card.sp-hero-card--roi { --rot: -.4deg; --card-aspect: 1586 / 992; } .sp-step-tag { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: .35rem; padding: .62rem .7rem; border-radius: 10px; background: rgba(255,255,255,.72); border: 1px solid rgba(84,146,182,.26); color: var(--sp-navy); font-size: .78rem; font-weight: 950; line-height: 1.05; box-shadow: 0 14px 28px rgba(16,47,70,.08); text-transform: uppercase; } .sp-mini-note { position: absolute; z-index: 1; display: grid; gap: .22rem; width: 7.3rem; padding: .62rem .7rem .62rem 1.95rem; border-radius: 10px; background: rgba(255,255,255,.72); border: 1px solid rgba(84,146,182,.26); color: var(--sp-navy); font-size: .78rem; font-weight: 950; line-height: 1.05; box-shadow: 0 14px 28px rgba(16,47,70,.08); text-transform: uppercase; } .sp-mini-note small { display: block; color: var(--sp-deep); font-size: .7rem; font-weight: 800; line-height: 1.15; text-transform: none; } .sp-step-tag--click { left: 1.4%; top: 19.9rem; } .sp-step-tag--input { left: 27.3%; bottom: 15.8rem; } .sp-step-tag--processing { left: 31.2%; bottom: 7.1rem; } .sp-step-tag--delivery { right: 23.5%; bottom: 6rem; } .sp-mini-note--inputs { left: 19.8%; top: 29rem; } .sp-mini-note--capture { right: 10.8%; top: 34.3rem; } .sp-mini-note::before { content: ""; position: absolute; left: .72rem; top: .74rem; width: .7rem; height: .7rem; border-radius: 999px; background: #0c8f71; } .sp-flow-line { position: absolute; z-index: 0; border: 0; border-top: 2px dashed rgba(84,146,182,.68); transform-origin: left center; opacity: .82; } .sp-flow-line::after { content: ""; position: absolute; right: -2px; top: -5px; width: 0; height: 0; border-left: 7px solid rgba(84,146,182,.82); border-top: 4px solid transparent; border-bottom: 4px solid transparent; } .sp-flow-1 { width: 9rem; left: 29%; top: 15.2rem; transform: rotate(16deg); } .sp-flow-2 { width: 7.6rem; left: 19%; top: 26.4rem; transform: rotate(73deg); } .sp-flow-3 { width: 8.5rem; left: 22%; bottom: 14.2rem; transform: rotate(47deg); } .sp-flow-4 { width: 9rem; right: 7.5%; top: 16.5rem; transform: rotate(117deg); } .sp-flow-5 { width: 9rem; right: 18%; top: 30.8rem; transform: rotate(139deg); } .sp-flow-6 { width: 10rem; right: 23%; bottom: 9.6rem; transform: rotate(168deg); } .sp-hero-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(84,146,182,.42); background: rgba(218,238,248,.9); backdrop-filter: blur(7px); } .sp-hero-bottom-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; align-items: center; padding: .9rem clamp(.7rem, 1.4vw, 1.3rem); border-right: 1px solid rgba(84,146,182,.36); color: var(--sp-navy); } .sp-hero-bottom-item:last-child { border-right: 0; } .sp-hero-bottom .sp-hero-icon { width: 2.35rem; height: 2.35rem; color: var(--sp-navy); background: transparent; border-radius: 0; font-size: 2.1rem; line-height: .8; box-shadow: none; } .sp-hero-bottom .sp-hero-icon svg { width: 2.1rem; height: 2.1rem; stroke-width: 2.15; } .sp-hero-bottom-item strong { display: block; font-size: .9rem; } .sp-hero-bottom-item span { display: block; color: var(--sp-deep); font-size: .8rem; line-height: 1.2; } @keyframes sp-card-float { 0%, 100% { translate: 0 0; } 45% { translate: 0 -12px; } 70% { translate: 0 6px; } } @keyframes sp-card-inflate { 0% { scale: 1; } 38% { scale: .93; } 62% { scale: 1.055; } 100% { scale: 1; } } @keyframes sp-card-image-a { 0%, 41%, 100% { opacity: 1; } 48%, 93% { opacity: 0; } } @keyframes sp-card-image-b { 0%, 41%, 100% { opacity: 0; } 48%, 93% { opacity: 1; } } @keyframes sp-card-image-inflate { 0%, 39%, 55%, 91%, 100% { scale: 1; } 44% { scale: .94; } 50% { scale: 1.055; } 95% { scale: .96; } 98% { scale: 1.035; } } @media (prefers-reduced-motion: reduce) { .sp-hero-card, .sp-hero-card.is-swapping { animation: none !important; } } .sp-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; margin-top: 1.6rem; max-width: 700px; } .sp-stat { border: 1px solid var(--sp-line); border-radius: 1rem; background: rgba(217,236,246,.82); padding: 1rem; } .sp-stat strong { display: block; color: var(--sp-navy); font-family: var(--sp-display) !important; font-weight: 400 !important; font-size: 1.5rem; line-height: 1; } .sp-stat span { display: block; margin-top: .42rem; color: var(--sp-muted); font-size: .9rem; } .sp-band { background: var(--sp-navy); color: #fff; } .sp-band .sp-eyebrow { color: var(--sp-light); } .sp-heading { margin: 1rem 0 1.1rem; color: var(--sp-navy) !important; -webkit-text-fill-color: var(--sp-navy) !important; -webkit-text-stroke-width: 0 !important; -webkit-text-stroke-color: transparent !important; background: none !important; font-family: var(--sp-display) !important; font-weight: 400 !important; font-size: clamp(2.2rem, 5vw, 5.4rem); line-height: .95; letter-spacing: 0; max-width: 900px; } .sp-band .sp-heading { color: #fff !important; -webkit-text-fill-color: #fff !important; } .sp-section p.sp-copy { color: var(--sp-muted); font-size: 1.08rem; line-height: 1.65; max-width: 740px; } .sp-band p.sp-copy { color: rgba(255,255,255,.76); } .sp-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2.2rem; } .sp-product { min-height: 205px; border-radius: 1.15rem; padding: 1.25rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.13); } .sp-product .price { display: inline-flex; color: var(--sp-navy); background: var(--sp-light); border-radius: 999px; padding: .35rem .65rem; font-weight: 900; font-size: .92rem; } .sp-card-title { color: #fff !important; -webkit-text-fill-color: #fff !important; -webkit-text-stroke-width: 0 !important; -webkit-text-stroke-color: transparent !important; background: none !important; font-family: var(--sp-display) !important; font-weight: 400 !important; font-size: 1.38rem; line-height: 1.05; margin: 1.3rem 0 .75rem; } .sp-demo .sp-card-title, .sp-case .sp-card-title, .sp-benefit .sp-card-title, .sp-step .sp-card-title, .sp-faq .sp-card-title { margin: 0 0 .3rem; color: var(--sp-navy) !important; -webkit-text-fill-color: var(--sp-navy) !important; } .sp-case .sp-card-title { margin: .45rem 0 .45rem; font-size: 1.04rem; line-height: 1.12; } .sp-product p { margin: 0; color: rgba(255,255,255,.72); line-height: 1.55; font-size: .98rem; } .sp-hosting { display: grid; grid-template-columns: .8fr 1.2fr; gap: 1.25rem; align-items: stretch; margin-top: 2.4rem; } .sp-host-price { border-radius: 1.35rem; padding: 1.6rem; background: linear-gradient(135deg, var(--sp-blue), var(--sp-deep)); border: 1px solid rgba(255,255,255,.18); box-shadow: inset .45rem 0 0 var(--sp-coral); color: #fff; } .sp-host-price strong { display: block; font-family: var(--sp-display) !important; font-weight: 400 !important; font-size: clamp(4rem, 10vw, 8rem); line-height: .8; letter-spacing: 0; } .sp-host-price span { font-weight: 900; } .sp-anchor { position: relative; top: -2rem; display: block; height: 0; width: 0; overflow: hidden; } .sp-host-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; padding: 0; margin: 0; list-style: none; } .sp-host-list li { border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.07); border-radius: .9rem; padding: .9rem; color: rgba(255,255,255,.82); } .sp-demo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2.2rem; } .sp-demo { border: 1px solid var(--sp-line); background: rgba(217,236,246,.76); border-radius: 1.2rem; padding: 1.1rem; box-shadow: 0 18px 44px rgba(16,47,70,.08); } .sp-demo .sp-card-title { font-size: 1.24rem; } .sp-demo p { margin: 0 0 1rem; color: var(--sp-muted); line-height: 1.45; font-size: .95rem; } .sp-field { display: grid; gap: .35rem; margin: .65rem 0; color: var(--sp-muted); font-size: .82rem; font-weight: 800; } .sp-field input, .sp-field select { width: 100%; border: 1px solid var(--sp-line); border-radius: .7rem; min-height: 2.6rem; padding: .55rem .72rem; color: var(--sp-ink); background: rgba(255,255,255,.78); } .sp-mini-btn { width: 100%; min-height: 2.7rem; margin-top: .6rem; border: 0; border-radius: .8rem; background: var(--sp-blue); color: #fff; font-weight: 900; cursor: pointer; } .sp-result { margin-top: .9rem; border-radius: .9rem; background: #fff; border: 1px solid var(--sp-line); padding: .9rem; min-height: 92px; color: var(--sp-ink); } .sp-result strong { display: block; color: var(--sp-coral); font-size: 1.55rem; line-height: 1.05; } .sp-benefit-grid, .sp-step-grid, .sp-faq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2.2rem; } .sp-benefit, .sp-step, .sp-faq { border: 1px solid var(--sp-line); border-radius: 1rem; background: rgba(217,236,246,.82); padding: 1.1rem; box-shadow: 0 16px 38px rgba(16,47,70,.07); } .sp-benefit strong, .sp-step strong, .sp-faq strong { display: block; color: var(--sp-blue); font-family: var(--sp-display) !important; font-weight: 400 !important; font-size: 2.15rem; line-height: .9; margin-bottom: .85rem; } .sp-benefit p, .sp-step p, .sp-faq p { margin: 0; color: var(--sp-muted); line-height: 1.55; font-size: .96rem; } .sp-pricing-panel { display: grid; grid-template-columns: .9fr 1.1fr; gap: 1rem; align-items: stretch; margin-top: 2.2rem; } .sp-pricing-card { border-radius: 1.2rem; padding: 1.35rem; background: var(--sp-navy); color: #fff; } .sp-pricing-card strong { display: block; font-family: var(--sp-display) !important; font-weight: 400 !important; font-size: clamp(3.8rem, 8vw, 7.2rem); line-height: .78; color: var(--sp-light); margin: .4rem 0 .85rem; } .sp-pricing-card p { margin: 0; color: rgba(255,255,255,.78); line-height: 1.55; } .sp-price-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; } .sp-price-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 1px solid var(--sp-line); border-radius: .9rem; background: rgba(217,236,246,.82); color: var(--sp-muted); padding: .85rem .95rem; } .sp-price-list b { color: var(--sp-navy); font-weight: 900; } .sp-gallery-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 2.2rem; } .sp-filter { width: min(420px, 100%); border: 1px solid var(--sp-line); border-radius: 999px; padding: .95rem 1.15rem; min-height: 3.2rem; background: rgba(217,236,246,.95); color: var(--sp-ink); } .sp-case-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .95rem; } .sp-case { appearance: none; display: grid; grid-template-rows: auto 1fr; width: 100%; min-height: 330px; padding: 0; text-align: left; color: var(--sp-ink); border: 1px solid var(--sp-line); border-radius: .55rem; background: rgba(217,236,246,.82); overflow: hidden; box-shadow: 0 16px 38px rgba(16,47,70,.08); cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .sp-case:hover, .sp-case:focus-visible { transform: translateY(-3px); border-color: rgba(242,112,100,.55); box-shadow: 0 22px 50px rgba(16,47,70,.13); outline: none; } .sp-case-visual { display: grid; grid-template-columns: 1.05fr .75fr; gap: .45rem; padding: .75rem; min-height: 150px; background: linear-gradient(135deg, rgba(35,92,129,.14), rgba(84,146,182,.18)); } .sp-case-thumb { display: block; grid-column: 1 / -1; width: 100%; height: auto; aspect-ratio: 1586 / 992; border-radius: .45rem; object-fit: cover; object-position: top center; border: 1px solid rgba(16,47,70,.10); background: transparent; } .sp-case-mini-cta { grid-column: 1 / -1; display: grid; align-content: space-between; gap: .45rem; min-height: 158px; border-radius: .45rem; padding: .75rem; overflow: hidden; background: linear-gradient(90deg, rgba(242,112,100,.12) 0 6%, transparent 6%), linear-gradient(135deg, rgba(255,255,255,.96), rgba(238,247,251,.94)); border: 1px solid rgba(16,47,70,.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,.48); } .sp-case-mini-cta span { color: var(--sp-blue); font-size: .62rem; font-weight: 900; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sp-case-mini-cta strong { color: var(--sp-navy); font-family: var(--sp-display) !important; font-size: clamp(1.35rem, 2vw, 1.9rem); font-weight: 400 !important; line-height: .9; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sp-case-mini-cta small { color: var(--sp-muted); font-size: .72rem; font-weight: 750; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sp-case-mini-cta em { justify-self: start; border-radius: 999px; background: var(--sp-navy); color: #fff; font-size: .68rem; font-style: normal; font-weight: 900; padding: .4rem .55rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sp-ui-shot, .sp-pdf-shot { min-height: 126px; border-radius: .45rem; background: #fff; border: 1px solid rgba(16,47,70,.10); padding: .55rem; position: relative; overflow: hidden; } .sp-ui-shot::before { content: ""; display: block; height: .52rem; width: 46%; border-radius: 999px; background: var(--sp-blue); margin-bottom: .65rem; } .sp-bar { height: .44rem; border-radius: 999px; background: rgba(35,92,129,.14); margin: .38rem 0; } .sp-bar.hot { background: var(--sp-coral); width: 72%; } .sp-bar.mid { width: 88%; } .sp-bar.short { width: 48%; } .sp-pill-row { display: flex; gap: .24rem; margin-top: .7rem; } .sp-pill-row span { display: block; width: 1.45rem; height: .52rem; border-radius: 999px; background: var(--sp-light); } .sp-pdf-shot { transform: rotate(2deg); box-shadow: -8px 12px 20px rgba(16,47,70,.08); } .sp-pdf-shot::before { content: ""; display: block; width: 36%; height: 1.4rem; border-radius: .4rem; background: var(--sp-mid); margin-bottom: .6rem; } .sp-chart { height: 3.3rem; margin-top: .55rem; background: linear-gradient(to top, var(--sp-blue) 0 58%, transparent 58%) 12% 100% / 14% 100% no-repeat, linear-gradient(to top, var(--sp-mid) 0 76%, transparent 76%) 40% 100% / 14% 100% no-repeat, linear-gradient(to top, var(--sp-coral) 0 44%, transparent 44%) 68% 100% / 14% 100% no-repeat; border-bottom: 1px solid rgba(16,47,70,.18); } .sp-case-body { display: flex; min-height: 0; flex-direction: column; padding: .95rem; background: rgba(255,255,255,.48); } .sp-case-kicker { color: var(--sp-coral); font-size: .72rem; letter-spacing: 0; text-transform: uppercase; font-weight: 900; } .sp-case p { margin: 0 0 .65rem; color: var(--sp-muted); font-size: .86rem; line-height: 1.45; overflow-wrap: anywhere; } .sp-case-output { color: var(--sp-blue); font-weight: 900; font-size: .82rem; overflow-wrap: anywhere; } .sp-case-action { display: inline-flex; margin-top: auto; padding-top: .7rem; color: var(--sp-coral); font-weight: 900; font-size: .8rem; } .sp-cta { text-align: center; background: var(--sp-blue); color: #fff; } .sp-cta .sp-heading { margin-left: auto; margin-right: auto; color: #fff !important; -webkit-text-fill-color: #fff !important; } .sp-cta .sp-copy { margin-left: auto; margin-right: auto; color: rgba(255,255,255,.82); } .sp-modal[aria-hidden="true"] { display: none; } .sp-modal, .sp-modal * { box-sizing: border-box; } .sp-modal { position: fixed; inset: 0; z-index: 2147483647; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 3vw, 2rem); overflow: hidden; overscroll-behavior: contain; } .sp-modal__backdrop { position: fixed; inset: 0; background: rgba(9, 29, 43, .72); backdrop-filter: blur(8px); } .sp-modal__panel { position: relative; display: flex; flex-direction: column; width: min(1180px, 100%); max-height: min(920px, calc(100dvh - clamp(1rem, 3vw, 2rem) * 2)); min-height: min(620px, calc(100dvh - clamp(1rem, 3vw, 2rem) * 2)); margin: 0; overflow: hidden; overscroll-behavior: contain; border-radius: 1.2rem; background: var(--sp-pale); border: 1px solid rgba(255,255,255,.75); box-shadow: 0 30px 90px rgba(0,0,0,.28); scrollbar-color: var(--sp-mid) rgba(15,52,77,.08); } .sp-modal__panel:focus { outline: none; } .sp-modal__head { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: start; padding: clamp(1rem, 2.4vw, 1.65rem); background: linear-gradient(135deg, rgba(15,52,77,.96), rgba(35,92,129,.92)), var(--sp-navy); color: #fff; box-shadow: 0 18px 40px rgba(9, 29, 43, .18); } .sp-modal__kicker { color: var(--sp-light); font-size: .78rem; font-weight: 900; text-transform: uppercase; } .sp-modal__title { margin: .45rem 0 .6rem; font-family: var(--sp-display) !important; font-weight: 400 !important; font-size: clamp(2.45rem, 5vw, 4.8rem); line-height: .92; color: #fff; } .sp-modal__desc { max-width: 760px; margin: 0; color: rgba(255,255,255,.8); line-height: 1.55; } .sp-modal__close { border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.12); color: #fff; border-radius: 999px; min-height: 2.65rem; padding: .7rem 1rem; font-weight: 900; cursor: pointer; white-space: nowrap; } .sp-modal__close:hover, .sp-modal__close:focus-visible { background: var(--sp-coral); border-color: var(--sp-coral); outline: none; } .sp-modal__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: clamp(1rem, 3vw, 2rem); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-color: var(--sp-mid) rgba(15,52,77,.08); } .sp-modal__meta { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.25rem; } .sp-modal__meta span { display: inline-flex; border-radius: 999px; background: #fff; border: 1px solid var(--sp-line); color: var(--sp-navy); padding: .45rem .75rem; font-weight: 900; font-size: .82rem; } .sp-mock-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .85rem; } .sp-mock { min-height: 240px; border-radius: 1rem; background: #fff; border: 1px solid var(--sp-line); box-shadow: 0 16px 34px rgba(16,47,70,.08); overflow: hidden; } .sp-mock__top { display: flex; justify-content: space-between; gap: .5rem; align-items: center; min-height: 2.55rem; padding: .65rem .75rem; background: var(--sp-navy); color: #fff; font-weight: 900; font-size: .72rem; } .sp-mock__dots { display: flex; gap: .24rem; } .sp-mock__dots i { display: block; width: .42rem; height: .42rem; border-radius: 50%; background: var(--sp-light); } .sp-mock__body { padding: .8rem; } .sp-mock h4 { margin: 0 0 .7rem; color: var(--sp-navy) !important; font-family: var(--sp-display) !important; font-weight: 400 !important; font-size: 1.55rem; line-height: .95; } .sp-mock p { margin: 0; color: var(--sp-muted); font-size: .78rem; line-height: 1.38; } .sp-mock .sp-big-number { display: block; color: var(--sp-navy); font-family: var(--sp-display) !important; font-weight: 400 !important; font-size: 2.7rem; line-height: .88; margin: .35rem 0 .55rem; } .sp-mock-table { display: grid; gap: .42rem; margin-top: .72rem; } .sp-mock-table div { display: flex; justify-content: space-between; gap: .65rem; border-bottom: 1px solid rgba(16,47,70,.1); padding-bottom: .35rem; color: var(--sp-muted); font-size: .75rem; } .sp-mock-table b { color: var(--sp-navy); font-weight: 900; white-space: nowrap; } .sp-mock-list { margin: .65rem 0 0; padding: 0; list-style: none; display: grid; gap: .42rem; } .sp-mock-list li { color: var(--sp-muted); font-size: .74rem; line-height: 1.28; padding-left: .7rem; position: relative; } .sp-mock-list li::before { content: ""; position: absolute; left: 0; top: .42rem; width: .32rem; height: .32rem; border-radius: 50%; background: var(--sp-coral); } .sp-mock-badge { display: inline-flex; margin-top: .6rem; border-radius: 999px; background: var(--sp-light); color: var(--sp-navy); padding: .35rem .55rem; font-size: .68rem; font-weight: 900; } .sp-mock-line { height: .5rem; border-radius: 999px; background: rgba(35,92,129,.14); margin: .45rem 0; } .sp-mock-line.hot { background: var(--sp-coral); width: 74%; } .sp-mock-line.short { width: 46%; } .sp-mock-line.mid { width: 82%; } .sp-mock-score { display: grid; place-items: center; width: 5.4rem; height: 5.4rem; border-radius: 50%; margin: .7rem auto; background: conic-gradient(var(--sp-coral) 0 64%, rgba(16,47,70,.12) 64% 100%); color: var(--sp-navy); font-family: var(--sp-display) !important; font-size: 2.1rem; } .sp-mock-report { min-height: 170px; border-radius: .75rem; background: linear-gradient(90deg, var(--sp-coral) 0 8%, transparent 8%), linear-gradient(180deg, #fff 0%, var(--sp-pale) 100%); border: 1px solid rgba(16,47,70,.12); padding: .85rem .85rem .85rem 1.15rem; } .sp-mock-chart { height: 4.5rem; margin: .7rem 0; background: linear-gradient(to top, var(--sp-blue) 0 56%, transparent 56%) 12% 100% / 13% 100% no-repeat, linear-gradient(to top, var(--sp-mid) 0 78%, transparent 78%) 37% 100% / 13% 100% no-repeat, linear-gradient(to top, var(--sp-coral) 0 43%, transparent 43%) 62% 100% / 13% 100% no-repeat, linear-gradient(to top, var(--sp-navy) 0 68%, transparent 68%) 87% 100% / 13% 100% no-repeat; border-bottom: 1px solid rgba(16,47,70,.16); } .sp-mock-email { border-radius: .75rem; background: var(--sp-pale); border: 1px solid rgba(16,47,70,.12); padding: .75rem; } .sp-generated-case { grid-column: 1 / -1; display: grid; gap: 1.1rem; } .sp-simple-case { grid-column: 1 / -1; display: grid; gap: 1rem; } .sp-simple-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1rem, 2.5vw, 1.6rem); align-items: stretch; padding: clamp(1rem, 2.5vw, 1.35rem); border-radius: 1rem; background: #fff; border: 1px solid var(--sp-line); box-shadow: 0 16px 34px rgba(16,47,70,.08); } .sp-simple-summary { display: grid; align-content: center; gap: .85rem; } .sp-simple-summary h3, .sp-simple-shot h4 { margin: 0; color: var(--sp-navy) !important; font-family: var(--sp-display) !important; font-weight: 400 !important; line-height: .95; } .sp-simple-summary h3 { font-size: clamp(2rem, 3.6vw, 3.25rem); } .sp-simple-summary p, .sp-simple-shot p { margin: 0; color: var(--sp-muted); line-height: 1.5; } .sp-simple-bullets { margin: .1rem 0 0; padding: 0; list-style: none !important; display: grid; gap: .5rem; } .sp-simple-bullets li { position: relative; padding-left: 1rem; list-style: none !important; color: #24394a; line-height: 1.42; font-weight: 750; } .sp-simple-bullets li::marker { content: ""; } .sp-simple-bullets li::before { content: ""; position: absolute; left: 0; top: .55em; width: .42rem; height: .42rem; border-radius: 999px; background: var(--sp-coral); } .sp-simple-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-top: .25rem; } .sp-simple-stat { min-width: 0; border-radius: .8rem; padding: .75rem; background: var(--sp-pale); border: 1px solid rgba(16,47,70,.1); } .sp-simple-stat span { display: block; margin-bottom: .32rem; color: var(--sp-coral); font-size: .68rem; font-weight: 900; text-transform: uppercase; } .sp-simple-stat strong { display: block; color: var(--sp-navy); font-size: clamp(.95rem, 1.45vw, 1.24rem); line-height: 1.08; overflow-wrap: anywhere; } .sp-simple-hero-media { min-height: 340px; border-radius: .9rem; overflow: hidden; background: #fff; border: 1px solid rgba(16,47,70,.1); } .sp-simple-hero-media img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: top center; background: #fff; } .sp-blueprint-flow { min-height: 320px; display: grid; align-content: center; gap: .8rem; padding: clamp(1rem, 2.5vw, 1.35rem); background: linear-gradient(90deg, rgba(242,112,100,.12) 0 8%, transparent 8%), linear-gradient(180deg, #fff 0%, var(--sp-pale) 100%); } .sp-blueprint-flow h4 { margin: 0; color: var(--sp-navy) !important; font-family: var(--sp-display) !important; font-size: clamp(1.8rem, 3.4vw, 3rem); font-weight: 400 !important; line-height: .9; } .sp-blueprint-flow p { margin: 0; color: var(--sp-muted); line-height: 1.45; } .sp-blueprint-flow__row { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .2rem; } .sp-blueprint-flow__row span { border-radius: 999px; background: rgba(35,92,129,.1); color: var(--sp-navy); font-size: .72rem; font-weight: 900; padding: .42rem .58rem; text-transform: uppercase; } .sp-simple-gallery { display: grid; gap: 1rem; } .sp-simple-shot { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(240px, .55fr); gap: clamp(.85rem, 2vw, 1.2rem); align-items: center; padding: clamp(.65rem, 1.6vw, .9rem); border-radius: 1rem; background: rgba(255,255,255,.82); border: 1px solid var(--sp-line); box-shadow: 0 14px 30px rgba(16,47,70,.06); } .sp-simple-shot:nth-child(even) { grid-template-columns: minmax(240px, .55fr) minmax(0, 1.45fr); } .sp-simple-shot:nth-child(even) .sp-simple-shot-media { order: 2; } .sp-simple-shot-media { overflow: hidden; border-radius: .85rem; background: #fff; border: 1px solid rgba(16,47,70,.1); } .sp-simple-shot-media img { display: block; width: 100%; aspect-ratio: 16 / 9.4; object-fit: contain; object-position: top center; background: #fff; } .sp-simple-shot--portrait { align-items: start; } .sp-simple-shot--portrait .sp-simple-shot-media img { aspect-ratio: 3 / 4.35; max-height: min(760px, 78vh); } .sp-simple-shot-copy { display: grid; gap: .55rem; padding: .25rem; } .sp-simple-shot h4 { font-size: clamp(1.55rem, 2.75vw, 2.45rem); } .sp-generated-brief { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .42fr); gap: clamp(1rem, 2.5vw, 1.6rem); padding: clamp(1rem, 2.5vw, 1.4rem); border-radius: 1rem; background: #fff; border: 1px solid var(--sp-line); box-shadow: 0 16px 34px rgba(16,47,70,.08); } .sp-generated-brief h3, .sp-case-photo h4 { margin: 0 0 .5rem; color: var(--sp-navy) !important; font-family: var(--sp-display) !important; font-weight: 400 !important; line-height: .95; } .sp-generated-brief h3 { font-size: clamp(2rem, 4vw, 3.2rem); } .sp-generated-brief__lede { max-width: 70ch; display: grid; gap: .85rem; align-content: start; } .sp-generated-brief p, .sp-narrative-card p, .sp-case-photo p { margin: 0; color: var(--sp-muted); line-height: 1.5; } .sp-generated-brief__outcome { color: #24394a !important; font-size: 1.04rem; } .sp-brand-card { border-radius: .9rem; padding: 1rem; background: #fff; border: 1px solid rgba(23,33,43,.12); color: #17212b; } .sp-brand-card strong { display: block; font-size: 1.05rem; color: #17212b; margin-bottom: .4rem; } .sp-color-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .4rem; margin-top: .85rem; } .sp-color-chip { min-height: 2.2rem; border-radius: .55rem; border: 1px solid rgba(23,33,43,.1); } .sp-color-chip:nth-child(1) { background: #17212b; } .sp-color-chip:nth-child(2) { background: #5e8c6a; } .sp-color-chip:nth-child(3) { background: #c89b3c; } .sp-color-chip:nth-child(4) { background: #f3ebdd; } .sp-color-chip:nth-child(5) { background: #fffdf7; } .sp-color-chip:nth-child(6) { background: #e86f5d; } .sp-journey-list { margin: .1rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem .9rem; } .sp-journey-list li { position: relative; padding-left: 1rem; color: var(--sp-muted); line-height: 1.45; } .sp-journey-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: .42rem; height: .42rem; border-radius: 999px; background: var(--sp-coral); } .sp-case-section-label { color: var(--sp-coral); font-size: .78rem; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; } .sp-case-feature { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(280px, .72fr); gap: clamp(1rem, 2.5vw, 1.5rem); align-items: stretch; border-radius: 1rem; background: #fff; border: 1px solid var(--sp-line); box-shadow: 0 16px 34px rgba(16,47,70,.08); overflow: hidden; } .sp-case-feature__media { min-height: 360px; background: #fff; border-right: 1px solid var(--sp-line); } .sp-case-feature__media img, .sp-case-photo__media img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: top center; background: #fff; } .sp-case-feature__copy { display: grid; align-content: center; gap: .65rem; padding: clamp(1rem, 2.5vw, 1.5rem); } .sp-case-feature__copy h4, .sp-case-journey-copy h4 { margin: 0; color: var(--sp-navy) !important; font-family: var(--sp-display) !important; font-weight: 400 !important; line-height: .98; } .sp-case-feature__copy h4 { font-size: clamp(2rem, 3.5vw, 3.2rem); } .sp-case-feature__copy p, .sp-case-journey-copy p { margin: 0; max-width: 58ch; color: var(--sp-muted); line-height: 1.55; } .sp-case-journey { display: grid; gap: 1rem; } .sp-case-journey-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .78fr); gap: clamp(1rem, 2.5vw, 1.5rem); align-items: center; padding: clamp(.75rem, 2vw, 1rem); border-radius: 1rem; background: rgba(255,255,255,.78); border: 1px solid var(--sp-line); box-shadow: 0 14px 30px rgba(16,47,70,.06); } .sp-case-journey-row:nth-child(even) .sp-case-journey-media { order: 2; } .sp-case-journey-media { overflow: hidden; border-radius: .8rem; background: #fff; border: 1px solid rgba(16,47,70,.1); } .sp-case-journey-media img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: contain; object-position: top center; background: #fff; } .sp-case-journey-copy { display: grid; gap: .55rem; padding: .35rem; } .sp-case-journey-copy h4 { font-size: clamp(1.55rem, 2.6vw, 2.25rem); } .sp-case-data-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; } .sp-case-data-card { border-radius: .9rem; padding: .9rem; background: #fff; border: 1px solid var(--sp-line); box-shadow: 0 12px 24px rgba(16,47,70,.05); } .sp-case-data-card span { display: block; margin-bottom: .35rem; color: var(--sp-coral); font-size: .72rem; font-weight: 900; text-transform: uppercase; } .sp-case-data-card strong { display: block; color: var(--sp-navy); font-size: clamp(1.05rem, 1.7vw, 1.45rem); line-height: 1.05; overflow-wrap: anywhere; } .sp-narrative-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .sp-narrative-card { border-radius: 1rem; padding: 1rem; background: #fff; border: 1px solid var(--sp-line); box-shadow: 0 16px 34px rgba(16,47,70,.06); } .sp-narrative-card span { display: block; margin-bottom: .45rem; color: var(--sp-coral); font-size: .75rem; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; } .sp-narrative-card h4 { margin: 0 0 .55rem; color: var(--sp-navy) !important; font-family: var(--sp-display) !important; font-size: clamp(1.35rem, 2.5vw, 2rem); font-weight: 400 !important; line-height: 1; } .sp-narrative-card ul { margin: .75rem 0 0; padding-left: 1.1rem; color: var(--sp-muted); line-height: 1.45; } .sp-narrative-card li + li { margin-top: .35rem; } .sp-case-photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .sp-case-photo { border-radius: 1rem; overflow: hidden; background: #fff; border: 1px solid var(--sp-line); box-shadow: 0 16px 34px rgba(16,47,70,.08); } .sp-case-photo__media { background: #f7fbfd; border-bottom: 1px solid var(--sp-line); } .sp-case-photo__media img { aspect-ratio: 16 / 10; } .sp-case-photo--brand .sp-case-photo__media img { object-fit: contain; background: #f3ebdd; } .sp-case-photo--wide { grid-column: 1 / -1; } .sp-case-photo--wide .sp-case-photo__media img { aspect-ratio: 16 / 9; object-fit: contain; } .sp-case-photo__copy { padding: .9rem; } .sp-case-photo__copy span { display: block; margin-bottom: .35rem; color: var(--sp-coral); font-size: .75rem; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; } .sp-case-photo h4 { font-size: 1.75rem; } .sp-modal__cta { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-top: 1.35rem; padding: 1rem; border-radius: 1rem; background: rgba(15,52,77,.06); border: 1px solid var(--sp-line); } .sp-modal__cta p { margin: 0; color: var(--sp-muted); line-height: 1.45; } html.sp-modal-open, body.sp-modal-open { overflow: hidden !important; overscroll-behavior: none !important; } body.sp-modal-open .sp-modal { overscroll-behavior: contain; touch-action: auto; } @media (max-width: 1500px) { .sp-hero-shell { min-height: 100vh; } .sp-hero-shell::before { inset: 5.5rem 4% 6.6rem; } .sp-hero-center { width: min(620px, 55vw); } .sp-hero h1 { font-size: clamp(4.35rem, 6.85vw, 6.55rem); } .sp-hero-card { padding: .88rem; gap: .62rem; } .sp-hero-card--process { padding: 0; } .sp-hero-card strong { font-size: clamp(1.05rem, 1.55vw, 1.42rem); } .sp-hero-card small { font-size: .82rem; } .sp-hero-card em { font-size: .82rem; padding: .5rem .65rem; } .sp-hero-card--savings { --card-w: 18rem; left: 2%; top: 6.9rem; } .sp-hero-card--audit { --card-w: 15.6rem; left: 2.8%; top: 22.4rem; } .sp-hero-card--estimate { --card-w: 15.4rem; left: 4.2%; top: 35rem; } .sp-hero-card--process { --card-w: 19rem; left: 6%; bottom: 5.3rem; } .sp-hero-card--fees { --card-w: 15.8rem; right: 3.8%; top: 6.9rem; } .sp-hero-card--score { --card-w: 16.8rem; right: 2.2%; top: 24rem; } .sp-hero-card--report { --card-w: 17rem; right: 4.2%; bottom: 7.8rem; } .sp-hero-card--roi { --card-w: 15.3rem; bottom: 7.2rem; } .sp-flow-line { opacity: .72; } } @media (min-width: 1181px) and (max-height: 920px) { .sp-hero { overflow: hidden; } .sp-hero-shell { min-height: 100vh; padding-top: 1.25rem; padding-bottom: 4.7rem; } .sp-hero-shell::before { inset: 4.85rem 4% 4.6rem; } .sp-hero-topbar { gap: .85rem; } .sp-hero-nav { gap: clamp(.7rem, 1.2vw, 1.2rem); font-size: .86rem; } .sp-hero-nav .sp-start-link { min-height: 2.75rem; padding: .62rem .85rem; border-radius: 9px; } .sp-hero-user { gap: .5rem; } .sp-hero-center { top: 42%; width: min(560px, 49vw); } .sp-hero-promise { margin-bottom: .72rem; padding: .58rem .78rem; font-size: .9rem; border-radius: 9px; } .sp-hero h1 { font-size: clamp(4rem, 5.75vw, 5.55rem); line-height: .82; } .sp-lede { max-width: 500px; margin-top: .78rem; font-size: .94rem; line-height: 1.34; } .sp-hero .sp-actions { gap: .58rem; margin-top: .95rem; } .sp-hero .sp-btn { min-height: 3.08rem; padding: .72rem 1rem; font-size: .94rem; border-radius: 9px; } .sp-hero-chip-row { gap: .55rem; margin-top: .62rem; } .sp-hero-chip { min-height: 2.55rem; padding: .44rem .62rem; border-radius: 9px; } .sp-hero-chip strong { font-size: .9rem; } .sp-hero-chip span { font-size: .68rem; } .sp-hero-icon { width: 1.65rem; height: 1.65rem; border-radius: 8px; font-size: .82rem; } .sp-hero-icon svg { width: .95rem; height: .95rem; } .sp-hero-card { padding: .68rem; gap: .42rem; border-radius: 10px; box-shadow: 0 14px 30px rgba(16,47,70,.1); } .sp-hero-card span { font-size: .67rem; } .sp-hero-card small { font-size: .71rem; line-height: 1.22; } .sp-hero-card em { padding: .42rem .52rem; border-radius: 7px; font-size: .72rem; } .sp-hero-card--savings { --card-w: 16.4rem; left: 2%; top: 5.35rem; } .sp-hero-card--audit { --card-w: 14.1rem; left: 3%; top: 18.65rem; } .sp-hero-card--estimate { --card-w: 13.6rem; left: 4.5%; top: 29.75rem; } .sp-hero-card--process { --card-w: 16.6rem; left: 5.8%; bottom: 4.25rem; } .sp-hero-card--fees { --card-w: 14.2rem; right: 3.2%; top: 5.65rem; } .sp-hero-card--score { --card-w: 14.9rem; right: 2.4%; top: 20.1rem; } .sp-hero-card--report { --card-w: 14.8rem; right: 4.4%; bottom: 4.7rem; } .sp-hero-card--roi { --card-w: 13.6rem; left: 50.5%; bottom: 4.95rem; } .sp-hero-card--process { padding: 0; } .sp-hero-card--process .sp-hero-card__top { padding: .58rem .72rem; } .sp-process-body { gap: .55rem; padding: .66rem .68rem 1.15rem; } .sp-process-list { gap: .23rem; font-size: .64rem; line-height: 1.18; } .sp-process-list li { padding-left: .95rem; } .sp-process-list li::before { top: .18rem; width: .45rem; height: .26rem; } .sp-process-gauge { width: 4.25rem; box-shadow: inset 0 0 0 .42rem #eef8fc; } .sp-process-gauge span { font-size: .86rem; } .sp-process-gauge small { bottom: -.76rem; font-size: .5rem; } .sp-step-tag { padding: .42rem .48rem; border-radius: 8px; font-size: .62rem; } .sp-step-tag--click { left: 1.5%; top: 16.8rem; } .sp-step-tag--input { left: 28.5%; bottom: 13.3rem; } .sp-step-tag--processing { left: 32%; bottom: 5.5rem; } .sp-step-tag--delivery { right: 22.8%; bottom: 4.25rem; } .sp-mini-note { width: 6rem; padding: .48rem .5rem .48rem 1.65rem; border-radius: 8px; font-size: .62rem; } .sp-mini-note small { font-size: .56rem; } .sp-mini-note::before { left: .56rem; top: .58rem; width: .55rem; height: .55rem; } .sp-mini-note--inputs { left: 20.5%; top: 26rem; } .sp-mini-note--capture { right: 10.2%; top: 29.9rem; } .sp-flow-line { opacity: .52; } .sp-hero-bottom-item { gap: .55rem; padding: .55rem .72rem; } .sp-hero-bottom .sp-hero-icon { width: 1.75rem; height: 1.75rem; font-size: 1.55rem; } .sp-hero-bottom .sp-hero-icon svg { width: 1.55rem; height: 1.55rem; } .sp-hero-bottom-item strong { font-size: .75rem; } .sp-hero-bottom-item span { font-size: .68rem; line-height: 1.14; } } @media (min-width: 1025px) and (max-height: 920px) { body.page-id-7[data-header-format="left-header"] #nectar-nav::before { bottom: 116px; } body.page-id-7[data-header-format="left-header"] #nectar-nav::after { bottom: 24px; } } @media (min-width: 1025px) and (max-height: 820px) { body.page-id-7[data-header-format="left-header"] #nectar-nav #logo img { height: 94px !important; } body.page-id-7[data-header-format="left-header"] #nectar-nav .row .col.span_9 { top: 136px !important; bottom: 230px !important; } body.page-id-7[data-header-format="left-header"] #nectar-nav header#top nav > ul.sf-menu { gap: 0 !important; } body.page-id-7[data-header-format="left-header"] #nectar-nav #menu-item-206 > a { font-size: clamp(2.12rem, 2.85vw, 2.55rem) !important; } body.page-id-7[data-header-format="left-header"] #nectar-nav #menu-item-208 > a { font-size: clamp(1.82rem, 2.45vw, 2.18rem) !important; } body.page-id-7[data-header-format="left-header"] #nectar-nav #menu-item-167 > a { font-size: clamp(1.25rem, 1.68vw, 1.5rem) !important; } body.page-id-7[data-header-format="left-header"] #nectar-nav #menu-item-207 > a { font-size: clamp(2rem, 2.68vw, 2.4rem) !important; } body.page-id-7[data-header-format="left-header"] #nectar-nav #menu-item-168 > a { font-size: clamp(2.15rem, 2.9vw, 2.58rem) !important; } body.page-id-7[data-header-format="left-header"] #nectar-nav #menu-item-169 > a { font-size: clamp(1.55rem, 2.08vw, 1.86rem) !important; } body.page-id-7[data-header-format="left-header"] #nectar-nav #menu-item-170 > a { font-size: clamp(2.85rem, 3.82vw, 3.4rem) !important; } body.page-id-7[data-header-format="left-header"] #nectar-nav::before { bottom: 86px; min-height: 50px; padding: .72rem .7rem .72rem 2.7rem; font-size: .68rem; line-height: 1.18; background: radial-gradient(circle at 1.55rem 50%, rgba(217,236,246,.16) 0 .74rem, transparent .77rem), linear-gradient(135deg, rgba(84,146,182,.12), rgba(255,255,255,.03)); } body.page-id-7[data-header-format="left-header"] #nectar-nav::after { bottom: 18px; padding-top: .78rem; font-size: .7rem; line-height: 1.25; } } @media (min-width: 1181px) and (max-height: 800px) { .sp-hero-shell { padding-top: 1rem; padding-bottom: 4rem; } .sp-hero-shell::before { inset: 4.45rem 4% 3.95rem; } .sp-hero-nav { font-size: .78rem; gap: .75rem; } .sp-hero-nav .sp-start-link { min-height: 2.45rem; padding: .52rem .72rem; } .sp-hero-center { top: 39.8%; width: min(505px, 46vw); } .sp-hero-promise { margin-bottom: .48rem; padding: .48rem .64rem; font-size: .82rem; } .sp-hero-promise::before { width: .5rem; height: .5rem; box-shadow: 0 0 0 .2rem rgba(242,112,100,.12); } .sp-hero h1 { font-size: clamp(3.55rem, 5.1vw, 4.78rem); } .sp-lede { max-width: 470px; margin-top: .58rem; font-size: .82rem; line-height: 1.28; } .sp-hero .sp-actions { margin-top: .7rem; } .sp-hero .sp-btn { min-height: 2.72rem; padding: .58rem .82rem; font-size: .82rem; } .sp-hero-chip-row { margin-top: .45rem; gap: .42rem; } .sp-hero-chip { min-height: 2.2rem; padding: .34rem .48rem; } .sp-hero-chip strong { font-size: .78rem; } .sp-hero-chip span { font-size: .58rem; } .sp-hero-icon { width: 1.42rem; height: 1.42rem; border-radius: 7px; font-size: .7rem; } .sp-hero-icon svg { width: .78rem; height: .78rem; } .sp-hero-card { padding: .55rem; gap: .32rem; border-radius: 9px; } .sp-hero-card span { font-size: .58rem; } .sp-hero-card small { font-size: .58rem; line-height: 1.18; } .sp-hero-card em { padding: .34rem .43rem; font-size: .6rem; border-radius: 6px; } .sp-hero-card--savings { --card-w: 14.5rem; left: 2%; top: 4.7rem; } .sp-hero-card--audit { --card-w: 12.8rem; left: 3.1%; top: 15.8rem; } .sp-hero-card--estimate { --card-w: 12.2rem; left: 4.4%; top: 24.1rem; } .sp-hero-card--process { --card-w: 14.6rem; left: 5.9%; bottom: 3.75rem; } .sp-hero-card--fees { --card-w: 12.5rem; right: 3.1%; top: 4.85rem; } .sp-hero-card--score { --card-w: 13.1rem; right: 2.6%; top: 16.7rem; } .sp-hero-card--report { --card-w: 13rem; right: 4.5%; bottom: 3.95rem; } .sp-hero-card--roi { --card-w: 12.3rem; left: 50.5%; bottom: 4.15rem; } .sp-hero-card--process { padding: 0; } .sp-hero-card--process .sp-hero-card__top { padding: .47rem .58rem; } .sp-process-body { gap: .42rem; padding: .52rem .54rem .96rem; } .sp-process-list { gap: .17rem; font-size: .52rem; } .sp-process-list li { padding-left: .78rem; } .sp-process-list li::before { top: .15rem; width: .36rem; height: .22rem; } .sp-process-gauge { width: 3.45rem; box-shadow: inset 0 0 0 .34rem #eef8fc; } .sp-process-gauge span { font-size: .72rem; } .sp-process-gauge small { bottom: -.65rem; font-size: .44rem; } .sp-step-tag { padding: .33rem .38rem; border-radius: 7px; font-size: .52rem; } .sp-step-tag--click { left: 1.5%; top: 14.3rem; } .sp-step-tag--input { left: 28.6%; bottom: 11.1rem; } .sp-step-tag--processing { left: 32%; bottom: 4.8rem; } .sp-step-tag--delivery { right: 22.7%; bottom: 3.65rem; } .sp-mini-note { width: 5.25rem; padding: .38rem .42rem .38rem 1.42rem; border-radius: 7px; font-size: .52rem; } .sp-mini-note small { font-size: .48rem; } .sp-mini-note::before { left: .48rem; top: .48rem; width: .45rem; height: .45rem; } .sp-mini-note--inputs { left: 20%; top: 22.5rem; } .sp-mini-note--capture { right: 10.4%; top: 25.7rem; } .sp-hero-bottom-item { min-width: 0; gap: .42rem; padding: .45rem .62rem; } .sp-hero-bottom .sp-hero-icon { width: 1.45rem; height: 1.45rem; font-size: 1.28rem; } .sp-hero-bottom .sp-hero-icon svg { width: 1.25rem; height: 1.25rem; } .sp-hero-bottom-item strong { font-size: .66rem; } .sp-hero-bottom-item span { font-size: .58rem; line-height: 1.1; } } @media (max-width: 1180px) { .sp-hero-shell { min-height: 880px; } .sp-hero-center { width: min(440px, 42vw); } .sp-hero h1 { font-size: clamp(4rem, 7vw, 6rem); } .sp-hero-card--savings { left: 1.5%; } .sp-hero-card--audit { left: 2%; } .sp-hero-card--estimate { left: 3%; } .sp-hero-card--fees { right: 2%; } .sp-hero-card--score { right: 1%; } .sp-hero-card--report { right: 2.5%; } } @media (max-width: 1180px) { .sp-hosting, .sp-pricing-panel { grid-template-columns: 1fr; } .sp-hero { min-height: auto; padding: 1rem; } .sp-hero-shell { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; min-height: auto; padding-bottom: 0; } .sp-hero-shell::before, .sp-flow-line, .sp-step-tag, .sp-mini-note { display: none; } .sp-hero-topbar, .sp-hero-center, .sp-hero-bottom { grid-column: 1 / -1; } .sp-hero-center, .sp-hero-card, .sp-hero-bottom { position: relative; inset: auto; transform: none !important; width: auto; } .sp-hero-center { top: auto; left: auto; padding: 2rem 0 1rem; justify-self: center; width: min(620px, 100%); } .sp-hero-card { min-height: 0; animation: none; } .sp-hero-bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: .5rem; border: 1px solid rgba(84,146,182,.35); border-radius: 12px; overflow: hidden; } .sp-product-grid, .sp-demo-grid, .sp-benefit-grid, .sp-step-grid, .sp-faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp-case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp-mock-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp-generated-brief, .sp-case-feature, .sp-narrative-grid, .sp-case-photo-grid, .sp-case-data-grid, .sp-simple-hero, .sp-simple-shot, .sp-simple-shot:nth-child(even) { grid-template-columns: 1fr; } .sp-journey-list { grid-template-columns: 1fr; } .sp-case-journey-row, .sp-case-journey-row:nth-child(even) { grid-template-columns: 1fr; } .sp-case-journey-row:nth-child(even) .sp-case-journey-media { order: 0; } .sp-simple-shot:nth-child(even) .sp-simple-shot-media { order: 0; } .sp-simple-stats { grid-template-columns: 1fr; } } @media (max-width: 640px) { .sp-section { padding-left: 1rem; padding-right: 1rem; } .sp-product-grid, .sp-demo-grid, .sp-case-grid, .sp-stat-row, .sp-host-list, .sp-benefit-grid, .sp-step-grid, .sp-faq-grid, .sp-mock-grid { grid-template-columns: 1fr; } .sp-hero-shell { grid-template-columns: 1fr; width: 100%; max-width: 100%; overflow: hidden; } .sp-hero-topbar { display: grid; gap: 1rem; } .sp-hero-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; } .sp-hero-user { display: none !important; } .sp-hero-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 2.7rem; border-radius: 8px; background: rgba(255,255,255,.48); border: 1px solid rgba(84,146,182,.26); } .sp-hero-nav .sp-start-link { grid-column: 1 / -1; } .sp-hero-bottom { grid-template-columns: 1fr; } .sp-hero-bottom-item { border-right: 0; border-bottom: 1px solid rgba(84,146,182,.28); } .sp-hero-bottom-item:last-child { border-bottom: 0; } .sp-gallery-head { display: block; } .sp-filter { margin-top: 1rem; } .sp-modal { padding: .65rem; align-items: stretch; } .sp-modal__panel { width: 100%; max-height: calc(100dvh - 1.3rem); min-height: 0; margin: 0 auto; border-radius: 1rem; } .sp-modal__head { grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; } .sp-modal__close { width: auto; min-width: 3.1rem; padding-left: .75rem; padding-right: .75rem; } .sp-hero { padding: 1rem .75rem; overflow: hidden; --sp-mobile-hero-w: min(560px, calc(100vw - 4.75rem)); } .sp-hero-topbar, .sp-hero-center, .sp-hero-card, .sp-hero-bottom { justify-self: start; width: min(100%, var(--sp-mobile-hero-w)); max-width: var(--sp-mobile-hero-w); } .sp-hero-promise { max-width: 100%; white-space: normal; line-height: 1.2; } .sp-hero h1 { font-size: 3.05rem; line-height: .85; max-width: 100%; } .sp-hero h1 .sp-hero-line { display: block !important; } .sp-lede { max-width: 100%; font-size: .98rem; padding: 0 .1rem; } .sp-hero .sp-actions { display: grid; grid-template-columns: 1fr; width: 100%; gap: .65rem; } .sp-hero .sp-btn { width: 100%; min-height: 3.25rem; padding: .8rem .65rem; font-size: .95rem; } .sp-hero-chip-row { display: grid; grid-template-columns: 1fr; width: 100%; gap: .55rem; } .sp-hero-chip { width: 100%; min-width: 0; padding: .55rem .6rem; } .sp-hero-chip span { font-size: .7rem; } .sp-hero-card { max-width: 100%; } } @media (max-width: 480px) { .sp-hero { --sp-mobile-hero-w: 320px; } .sp-modal { padding: .35rem; align-items: stretch; } .sp-modal__panel { width: calc(100vw - .7rem); max-height: calc(100dvh - .7rem); min-height: 0; margin: 0 auto; border-radius: .9rem; } .sp-modal__head, .sp-modal__body { padding: .85rem; } .sp-modal__head { grid-template-columns: 1fr; gap: .65rem; } .sp-modal__close { justify-self: start; min-height: 2.45rem; } .sp-modal__title { font-size: clamp(2.15rem, 14vw, 3rem); line-height: 1.02; margin: .3rem 0 .5rem; } .sp-generated-brief, .sp-brand-card, .sp-case-feature__copy, .sp-narrative-card, .sp-case-data-card, .sp-simple-hero, .sp-simple-shot, .sp-modal__cta { padding: .75rem; border-radius: .75rem; } .sp-simple-summary h3 { font-size: clamp(2rem, 12vw, 3rem); } .sp-simple-hero-media { min-height: 220px; } .sp-simple-shot-media img { aspect-ratio: 16 / 10.6; } .sp-case-feature__media { min-height: 240px; border-right: 0; border-bottom: 1px solid var(--sp-line); } .sp-case-journey-row { padding: .65rem; border-radius: .75rem; } .sp-case-photo__copy { padding: .75rem; } .sp-color-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sp-modal__meta span { max-width: 100%; overflow-wrap: anywhere; } .sp-case-photo h4 { font-size: 1.35rem; } } @media (max-width: 380px) { .sp-hero { --sp-mobile-hero-w: 290px; } .sp-hero .sp-actions, .sp-hero-chip-row { grid-template-columns: 1fr; } }