/* Joyride: the Solutions menu, the use-case cards on the home page, the solution pages (Hebbia's structure),
   and the security page (valite.ai's layout), all in the home page's type, blue, and grain. */

.ini { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.ini.sm { width: 26px; height: 26px; border-radius: 7px; font-size: 10.5px; } .ini.xs { width: 20px; height: 20px; border-radius: 5px; font-size: 8.5px; }
.lg { width: 22px; height: 22px; object-fit: contain; flex: none; } .lg.xs { width: 14px; height: 14px; }
.grain { z-index: 0; }
.f-inner { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .f-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---------- Nav: the Solutions menu ---------- */
@media (min-width: 901px) { .home .nav { overflow: visible; } }
.nav-dd { position: relative; }
.nav-dd > button { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit; font-size: 14.5px; color: var(--ink); letter-spacing: -0.01em; cursor: pointer; transition: color .25s; }
.nav-dd > button svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.nav-dd:hover > button, .nav-dd:focus-within > button, .nav-dd > button[aria-current] { color: var(--blue); }
.nav-dd:hover > button svg, .nav-dd:focus-within > button svg { transform: rotate(180deg); }
.nav-tabs a[aria-current] { color: var(--blue); }
.dd-panel { position: absolute; top: calc(100% + 18px); left: 50%; width: 330px; padding: 8px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(10,23,64,.06), 0 24px 48px -20px rgba(10,23,64,.35); opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity .2s, transform .2s, visibility .2s; }
.dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }
.nav-dd:hover .dd-panel, .nav-dd:focus-within .dd-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.dd-panel a { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; }
.dd-panel a:hover { background: var(--blue-soft); }
.dd-panel b { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.dd-panel small { display: block; margin-top: 1px; font-size: 13px; color: var(--ink-3); }
.dd-i { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 9px; background: var(--blue-soft); color: var(--blue); }
.dd-i svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-sheet-lab { padding: 12px 8px 2px; font-size: 13px; color: var(--ink-3); }
.nav-sheet a.sub { padding-left: 20px; }

/* ---------- Home: how firms use Joyride (elu.dev's three cards) ---------- */
.u-sec { width: min(1344px, 100% - 96px); margin: 0 auto 140px; }
.u-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.u-card { display: block; color: var(--ink); }
.u-art { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; aspect-ratio: 445 / 500; border-radius: 20px; transition: transform .35s var(--ease); }
.u-card:hover .u-art { transform: translateY(-4px); }
.u-art.a-consulting { background: radial-gradient(70% 60% at 20% 10%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%), radial-gradient(80% 70% at 90% 100%, #7fb2ff 0%, rgba(127,178,255,0) 70%), linear-gradient(160deg, #dbe6ff 0%, #b9cdfb 100%); }
.u-art.a-finance { background: radial-gradient(70% 60% at 80% 10%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%), radial-gradient(90% 80% at 10% 100%, #6aa8ff 0%, rgba(106,168,255,0) 70%), linear-gradient(200deg, #e2ebff 0%, #b3c9f7 100%); }
.u-art.a-engineering { background: radial-gradient(60% 55% at 50% 0%, rgba(255,255,255,.6), rgba(255,255,255,0) 70%), radial-gradient(90% 80% at 50% 110%, #86c2ff 0%, rgba(134,194,255,0) 70%), linear-gradient(180deg, #dfe9ff 0%, #bdd2fb 100%); }
.u-art .grain { opacity: .35; }
.u-art > :not(.grain) { position: relative; z-index: 1; }
.u-card h3 { margin-top: 26px; font-size: 26px; font-weight: 500; letter-spacing: -0.02em; }
.u-card h3 sup { margin-left: 4px; font-size: 11px; font-weight: 500; color: var(--ink-3); vertical-align: super; }
.u-card p { margin-top: 12px; max-width: 420px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
/* the floating pieces of product inside each card */
.uf-stack { position: relative; width: 82%; padding-top: 66px; }
.uf-ghost { position: absolute; left: 50%; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 12px 12px 0 0; background: rgba(255,255,255,.72); font-size: 12.5px; color: var(--ink-3); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset; }
.uf-ghost.g2 { top: 0; width: 80%; transform: translateX(-50%); opacity: .7; } .uf-ghost.g1 { top: 30px; width: 90%; transform: translateX(-50%); }
.uf-ghost em, .uf-top em { margin-left: auto; font-style: normal; display: inline-flex; align-items: center; gap: 5px; }
.uf-ghost i, .uf-top i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); flex: none; }
.uf-card, .uf-win { position: relative; padding: 18px 20px 20px; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(10,23,64,.06), 0 30px 60px -30px rgba(10,23,64,.4); }
.uf-top { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); }
.uf-big { display: block; margin-top: 14px; font-size: 26px; line-height: 1.15; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.uf-big.sm { font-size: 21px; margin-top: 10px; }
.uf-sub { display: block; margin-top: 6px; font-size: 13.5px; color: var(--ink-2); }
.uf-pill { display: flex; margin-top: 18px; padding: 3px; border-radius: 999px; background: var(--ink); font: 500 12.5px var(--font-mono, ui-monospace, monospace); }
.uf-pill span { flex: 1; padding: 7px 12px; color: #fff; white-space: nowrap; }
.uf-pill span.on { flex: none; border-radius: 999px; background: #fff; color: var(--ink); }
.uf-ask { display: flex; align-items: center; gap: 14px; width: 86%; padding: 14px 14px 14px 20px; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(10,23,64,.06), 0 30px 60px -30px rgba(10,23,64,.4); font-size: 15px; color: var(--ink-3); }
.uf-ask span { flex: 1; }
.uf-ask i { display: grid; place-items: center; flex: none; width: 38px; height: 30px; border-radius: 999px; background: var(--ink); }
.uf-ask svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.uf-win { width: 84%; }
.uf-code { margin-top: 14px; padding: 10px 0; border-radius: 10px; background: #f6f8fc; font: 12.5px/1.75 var(--font-mono, ui-monospace, monospace); color: var(--ink-2); }
.uf-code span { display: block; padding: 0 12px; white-space: pre; } .uf-code em { display: inline-block; width: 26px; font-style: normal; color: #a0a8b8; }
.uf-code span.add { background: var(--blue-soft); color: var(--ink); box-shadow: inset 3px 0 0 var(--blue); }
.uf-foot { display: flex; justify-content: space-between; margin-top: 14px; font-size: 12.5px; color: var(--ink-3); } .uf-foot span:last-child { color: #14804a; font-weight: 500; }

/* ---------- Solution pages (Hebbia's structure) ---------- */
.s-hero { padding: 168px 0 0; text-align: center; }
.s-copy { max-width: 900px; margin: 0 auto; padding: 0 24px; }
.s-eyebrow { font-size: 14px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.s-hero h1 { margin-top: 22px; font-size: 76px; line-height: 1.04; font-weight: 600; letter-spacing: -0.04em; color: var(--ink); }
.s-sub { margin: 26px auto 0; max-width: 620px; font-size: 20px; line-height: 1.5; color: var(--ink-2); text-wrap: balance; }
.s-hero .hb { margin-top: 34px; }
.s-banner { position: relative; isolation: isolate; overflow: hidden; width: min(1344px, 100% - 96px); height: 380px; margin: 72px auto 0; border-radius: 28px; background: var(--grad); }
.s-banner .grain, .s-img-in .grain, .sp-show .grain, .sp-cta .grain { opacity: .32; }
.art-wave { position: absolute; inset: 22px 28px; width: calc(100% - 56px); height: calc(100% - 44px); z-index: 1; }
.s-band { width: min(1344px, 100% - 96px); margin: 72px auto 0; text-align: center; }
.s-band p { font-size: 15px; color: var(--ink-3); }
.s-cells { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.s-cell { display: flex; align-items: center; justify-content: center; gap: 12px; height: 120px; border-left: 1px dashed var(--line-strong); font-size: 21px; font-weight: 500; letter-spacing: -0.02em; color: #5b6479; }
.s-cell:last-child { border-right: 1px dashed var(--line-strong); }
.s-cell .lg { width: 30px; height: 30px; }
.s-why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; width: min(1180px, 100% - 96px); margin: 140px auto 0; align-items: start; }
.s-img { position: sticky; top: 110px; }
.s-img-in { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 560 / 680; border-radius: 24px; background: var(--grad); }
.s-img-in.a-finance { background: radial-gradient(60% 50% at 80% 10%, rgba(70,220,255,.85), rgba(70,220,255,0) 70%), linear-gradient(200deg, #2264e6 0%, #1a3ec6 70%); }
.s-img-in.a-engineering { background: radial-gradient(60% 50% at 20% 100%, rgba(70,220,255,.8), rgba(70,220,255,0) 70%), linear-gradient(160deg, #1a3ec6 0%, #2264e6 70%); }
.art-layers { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.s-pt { padding: 28px 0 56px; border-top: 1px solid var(--line); }
.s-pt:first-child { padding-top: 28px; }
.s-n { font-size: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.s-pt h3 { margin-top: 40px; font-size: 40px; line-height: 1.12; font-weight: 500; letter-spacing: -0.03em; color: var(--ink); }
.s-pt p { margin-top: 16px; font-size: 19px; line-height: 1.5; color: var(--ink-2); }
.s-uses { margin-top: 120px; padding: 120px 0 128px; background: var(--ink); color: #fff; }
.s-uses h2 { text-align: center; font-size: 56px; line-height: 1.1; font-weight: 600; letter-spacing: -0.035em; color: #fff; }
.s-use-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: min(1344px, 100% - 96px); margin: 56px auto 0; }
.s-use { display: flex; flex-direction: column; min-height: 220px; padding: 24px; border-radius: 16px; border: 1px solid rgba(255,255,255,.08); background: radial-gradient(90% 120% at 50% 130%, rgba(36,85,214,.42), rgba(36,85,214,0) 70%), rgba(255,255,255,.035); }
.s-use svg { width: 22px; height: 22px; fill: none; stroke: #9fb6f2; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.s-use h3 { color: #fff; margin-top: auto; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.s-use p { margin-top: 8px; font-size: 15.5px; line-height: 1.5; color: rgba(255,255,255,.66); }
.sub .c-sec { padding-top: 120px; }

/* ---------- Security page (valite.ai's layout) ---------- */
.sp-hero { padding: 150px 0 40px; }
.sp-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; width: min(1344px, 100% - 96px); margin: 0 auto; }
.sp-copy h1 { margin-top: 20px; font-size: 60px; line-height: 1.06; font-weight: 600; letter-spacing: -0.035em; color: var(--ink); text-wrap: balance; }
.sp-copy .s-sub { margin: 22px 0 0; max-width: 520px; text-align: left; text-wrap: pretty; }
.sp-acts { display: flex; align-items: center; gap: 24px; margin-top: 32px; }
.ulink { font-size: 17px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.sp-scene { position: relative; height: 640px; }
.sv-win { border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(10,23,64,.06), 0 40px 80px -40px rgba(10,23,64,.45); overflow: hidden; }
.sv-hero { position: absolute; left: 120px; right: 0; top: 18px; }
.sv-bar { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; border-bottom: 1px solid #eef0f4; font-size: 13px; color: var(--ink-3); }
.sv-bar img { width: 20px; height: 20px; } .sv-bar .w { font-weight: 600; color: var(--ink); } .sv-bar .s { color: #c3c9d4; } .sv-bar b { font-weight: 600; color: var(--ink); } .sv-bar .r { margin-left: auto; }
.sv-tabs { display: flex; gap: 4px; padding: 10px 16px; border-bottom: 1px solid #eef0f4; }
.sv-tabs span { padding: 5px 11px; border-radius: 7px; font-size: 13px; color: var(--ink-3); } .sv-tabs span.on { background: #eef0f5; font-weight: 600; color: var(--ink); }
.sv-pol { padding: 8px 20px 10px; }
.sv-h { display: block; padding: 12px 0 10px; font-size: 15px; font-weight: 600; color: var(--ink); }
.sv-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid #eef0f4; }
.sv-row div { flex: 1; } .sv-row b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); } .sv-row small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-3); }
.sw { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: #d8dde6; }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(10,23,64,.25); }
.sw.on { background: var(--blue); } .sw.on::after { left: 16px; }
.sv-req { position: absolute; left: 0; top: 444px; width: 340px; padding: 16px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(10,23,64,.06), 0 40px 80px -30px rgba(10,23,64,.5); }
.sv-req h6 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); } .sv-req h6 img { width: 20px; height: 20px; }
.sv-req-b { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: #f6f8fc; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.sv-req-a { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.b2 { padding: 7px 13px; border-radius: 8px; border: 1px solid #dfe2e8; font-size: 13px; font-weight: 500; color: var(--ink); } .b2.dk { background: var(--blue); border-color: var(--blue); color: #fff; }
.sv-req-a small { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.sp-sec { width: min(1344px, 100% - 96px); margin: 120px auto 0; }
.sp-head { text-align: center; }
.sp-head h2 { font-size: 52px; line-height: 1.1; font-weight: 600; letter-spacing: -0.035em; color: var(--ink); }
.sp-head p { margin-top: 14px; font-size: 19px; color: var(--ink-2); }
.stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 56px; list-style: none; padding: 0; text-align: center; }
.stepper li { position: relative; }
.stepper li:not(:last-child)::after { content: ""; position: absolute; top: 22px; left: calc(50% + 34px); right: calc(-50% + 34px); height: 1px; background: var(--line-strong); }
.sp-n { display: flex; justify-content: center; }
.sp-i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 6px 16px -10px rgba(10,23,64,.3); color: var(--blue); }
.sp-i svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.stepper h3 { margin-top: 20px; font-size: 19px; font-weight: 600; color: var(--ink); }
.stepper p { margin-top: 6px; font-size: 15px; color: var(--ink-3); }
.sp-rows { display: flex; flex-direction: column; gap: 96px; margin-top: 64px; }
.sp-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; align-items: center; }
.sp-row.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sp-row.flip .sp-txt { order: 2; }
.sp-txt .ic { width: 24px; height: 24px; fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sp-txt h3 { margin-top: 18px; font-size: 36px; line-height: 1.15; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); }
.sp-txt p { margin-top: 14px; max-width: 460px; font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.sp-show { position: relative; isolation: isolate; overflow: hidden; padding: 44px; border-radius: 28px; background: var(--grad); }
.sp-show.sm { padding: 64px 56px; }
.sp-show > :not(.grain) { position: relative; z-index: 1; }
.sv-app { display: grid; grid-template-columns: 176px minmax(0, 1fr); border-radius: 14px; background: #fff; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(2,8,32,.6); }
.sv-side { display: flex; flex-direction: column; gap: 2px; padding: 16px 10px; background: #fff; border-right: 1px solid #e6e8ee; }
.sv-brand { display: flex; align-items: center; gap: 8px; padding: 2px 8px 16px; font-size: 16px; font-weight: 600; color: var(--ink); } .sv-brand img { width: 22px; height: 22px; }
.sv-side .dh-si { height: 34px; }
.sv-main { padding: 20px 22px 22px; background: #f6f7fa; }
.sv-main h4 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.sv-meta { margin-top: 2px; font-size: 13px; color: var(--ink-3); }
.sv-k { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.sv-k div { padding: 12px 14px; border-radius: 10px; background: #fff; border: 1px solid #e3e6ee; }
.sv-k small { display: block; font-size: 12.5px; color: var(--ink-3); } .sv-k b { display: block; margin-top: 4px; font-size: 21px; font-weight: 600; color: var(--ink); }
.sv-hold { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: #fdf6ea; border: 1px solid #f3e3c4; }
.sv-hi { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #fbe9cc; color: #a85b06; }
.sv-hi svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.sv-hold div { flex: 1; } .sv-hold b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); } .sv-hold span { font-size: 12.5px; color: var(--ink-3); }
.sv-btn { flex: none; padding: 6px 12px; border-radius: 8px; background: #fff; border: 1px solid #e3d3b2; font-size: 12.5px; font-weight: 600; color: var(--ink) !important; }
.sv-log { margin-top: 12px; border-radius: 10px; background: #fff; border: 1px solid #e3e6ee; overflow: hidden; }
.sv-lh, .sv-lr { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr) 96px; gap: 10px; align-items: center; padding: 0 14px; }
.sv-lh { height: 34px; font-size: 12px; color: var(--ink-3); border-bottom: 1px solid #eef0f4; }
.sv-lr { height: 50px; border-bottom: 1px solid #f1f2f6; font-size: 13px; color: var(--ink-2); } .sv-lr:last-child { border-bottom: 0; }
.sv-lr.held { background: #fffaf1; }
.sv-who { display: flex; align-items: center; gap: 10px; min-width: 0; } .sv-who b { display: block; font-size: 13px; font-weight: 600; color: var(--ink); } .sv-who small { display: block; font-size: 11.5px; color: var(--ink-3); }
.sv-sc { font-size: 12.5px; } .sv-lr.held .sv-sc { font-weight: 600; color: #a85b06; }
.sv-cert { padding: 18px 20px 20px; }
.sv-ct { display: flex; align-items: center; justify-content: space-between; } .sv-ct b { font-size: 15px; font-weight: 600; color: var(--ink); } .sv-ct span { font: 12px var(--font-mono, ui-monospace, monospace); color: var(--ink-3); }
.sv-fbox { margin-top: 14px; border-radius: 10px; border: 1px solid #e3e6ee; overflow: hidden; }
.sv-fr { display: flex; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid #f1f2f6; font-size: 13.5px; } .sv-fr:last-child { border-bottom: 0; }
.sv-fr span:first-child { color: var(--ink-3); } .sv-fr span:last-child { font-weight: 500; color: var(--ink); }
.sp-cta-w { padding: 140px 48px 120px; }
.sp-cta { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; width: min(1344px, 100%); margin: 0 auto; padding: 72px 72px; border-radius: 32px; background: var(--grad); color: #fff; }
.sp-cta > :not(.grain) { position: relative; z-index: 1; }
.sp-cta h2 { color: #fff; font-size: 52px; line-height: 1.08; font-weight: 600; letter-spacing: -0.035em; }
.sp-cta-l p { margin-top: 16px; max-width: 480px; font-size: 18px; line-height: 1.5; color: rgba(255,255,255,.9); }
.sp-cta .sp-acts { margin-top: 30px; }
.sp-cta-r { padding: 24px 26px 10px; border-radius: 18px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sp-cta-r h3 { font-size: 14px; font-weight: 500; color: rgba(255,255,255,.8); }
.sp-cta-r ul { list-style: none; margin: 10px 0 0; padding: 0; }
.sp-cta-r li { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.18); font-size: 16px; } .sp-cta-r li:first-child { border-top: 0; }
.sp-cta-r svg { width: 18px; height: 18px; flex: none; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 1100px) {
  .s-hero h1 { font-size: 60px; }
  .sp-grid { grid-template-columns: minmax(0, 1fr); }
  .sp-scene { height: 540px; max-width: 680px; }
  .sp-row, .sp-row.flip { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .sp-row.flip .sp-txt { order: 0; }
}
@media (max-width: 900px) {
  .u-sec, .s-banner, .s-band, .s-why, .s-use-grid, .sp-grid, .sp-sec { width: calc(100% - 32px); }
  .u-grid, .s-use-grid { grid-template-columns: minmax(0, 1fr); }
  .u-art { aspect-ratio: 1 / 1; }
  .s-hero { padding-top: 120px; } .s-hero h1 { font-size: 40px; } .s-sub { font-size: 17px; }
  .s-banner { height: 220px; margin-top: 48px; border-radius: 20px; }
  .s-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); } .s-cell { height: 84px; font-size: 17px; border-bottom: 1px dashed var(--line-strong); } .s-cell:nth-child(odd) { border-left: 0; } .s-cell:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
  .s-why { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 96px; } .s-img { position: static; }
  .s-pt h3 { margin-top: 20px; font-size: 30px; } .s-pt p { font-size: 17px; }
  .s-uses { margin-top: 80px; padding: 80px 0 88px; } .s-uses h2 { font-size: 36px; padding: 0 16px; }
  .sp-hero { padding-top: 120px; } .sp-copy h1 { font-size: 40px; }
  .sp-scene { height: auto; display: flex; flex-direction: column; gap: 16px; } .sv-hero, .sv-req { position: static; width: auto; }
  .sp-head h2 { font-size: 34px; }
  .stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; } .stepper li::after { display: none; }
  .sp-show, .sp-show.sm { padding: 16px; border-radius: 20px; }
  .sv-app { grid-template-columns: minmax(0, 1fr); } .sv-side { display: none; }
  .sv-lh, .sv-lr { grid-template-columns: minmax(0, 1.3fr) 86px; } .sv-rec, .sv-lh span:nth-child(2) { display: none; }
  .sp-cta-w { padding: 96px 16px 80px; } .sp-cta { grid-template-columns: minmax(0, 1fr); padding: 48px 24px; } .sp-cta h2 { font-size: 36px; }
}
/* Security: the protections are pillars, not stages */
.stepper li:not(:last-child)::after { display: none; }
.sv-hold.ok { background: #eef8f2; border-color: #cfe9da; } .sv-hold.ok .sv-hi { background: #d6f0e1; color: #14804a; }
/* Use-case cards: the same art and gradients as each solution page's numbered section */
.u-art.a-consulting { background: var(--grad); }
.u-art.a-finance { background: radial-gradient(60% 50% at 80% 10%, rgba(70,220,255,.85), rgba(70,220,255,0) 70%), linear-gradient(200deg, #2264e6 0%, #1a3ec6 70%); }
.u-art.a-engineering { background: radial-gradient(60% 50% at 20% 100%, rgba(70,220,255,.8), rgba(70,220,255,0) 70%), linear-gradient(160deg, #1a3ec6 0%, #2264e6 70%); }
.u-art .art-layers { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Solution banners: a ribbon of thin lines across the full banner */
.art-wave { inset: 0; width: 100%; height: 100%; fill: none; stroke: #fff; }
.art-wave path { stroke-width: 1.2; vector-effect: non-scaling-stroke; }
/* Security hero: centred in the first screen, below the nav */
@media (min-width: 901px) {
  .sp-hero { box-sizing: border-box; display: flex; align-items: center; min-height: 100vh; min-height: 100svh; padding: 64px 0 0; }
  .sp-hero + .sp-sec { margin-top: 0; }
  .sp-sec + .sp-sec { margin-top: 64px; }
}
@media (min-width: 901px) and (max-height: 820px) { .sp-scene { zoom: .86; } .sp-copy h1 { font-size: 56px; } }
@media (min-width: 901px) {
  .sp-hero + .sp-sec { padding: 0; }
  .sp-hero + .sp-sec .stepper { margin-bottom: 0; }
  .sp-sec + .sp-sec { margin-top: 120px; padding-top: 0; }
}
.sv-req h6 .sv-warn { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Contact page: copy and a checklist on the left, the form in a card on the right (valite.ai's layout) */
.ct-sec { width: min(1344px, 100% - 96px); margin: 0 auto; padding: 168px 0 120px; }
.ct-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.ct-copy h1 { font-size: 60px; line-height: 1.06; font-weight: 600; letter-spacing: -0.035em; color: var(--ink); max-width: 560px; text-wrap: balance; }
.ct-sub { margin-top: 22px; max-width: 500px; font-size: 20px; line-height: 1.45; color: var(--ink-2); }
.ct-tips { margin-top: 48px; } .ct-tips b { font-size: 16px; font-weight: 600; color: var(--ink); }
.ct-tips ul { margin: 14px 0 0; padding: 0; list-style: none; } .ct-tips li { position: relative; padding: 6px 0 6px 22px; font-size: 16px; color: var(--ink-2); }
.ct-tips li::before { content: ""; position: absolute; left: 4px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--blue); }
.ct-card { padding: 32px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -40px rgba(10,23,64,.35); }
.ct-form { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; } .ct-form > label, .ct-row { width: 100%; }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ct-form label { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 500; color: var(--ink); }
.ct-form input, .ct-form select, .ct-form textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid #d9dee8; border-radius: 10px; background: #fff; font: 400 15px var(--font-sans); color: var(--ink); appearance: none; }
.ct-form textarea { resize: vertical; min-height: 120px; line-height: 1.5; } .ct-form ::placeholder { color: #98a1b3; }
.ct-form input:focus, .ct-form select:focus, .ct-form textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(36,85,214,.15); }
.ct-sel { position: relative; display: block; } .ct-sel svg { position: absolute; right: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px; fill: none; stroke: var(--ink-2); stroke-width: 1.6; pointer-events: none; }
.ct-form .hb { margin-top: 4px; }
.ct-done h2 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); } .ct-done p { margin-top: 10px; color: var(--ink-2); } .ct-done a { color: var(--blue); }
@media (max-width: 900px) {
  .ct-sec { width: calc(100% - 32px); padding: 120px 0 80px; } .ct-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ct-copy h1 { font-size: 40px; } .ct-sub { font-size: 17px; } .ct-tips { margin-top: 28px; } .ct-card { padding: 22px; } .ct-row { grid-template-columns: 1fr; }
}
/* Footer: joyride.build's blue gradient */
.f-foot { position: relative; isolation: isolate; overflow: hidden; color: rgba(255,255,255,.86);
  background: radial-gradient(60% 70% at 85% 10%, #2f8ff7 0%, rgba(47,143,247,0) 70%), radial-gradient(55% 80% at 10% 100%, #1d3fbf 0%, rgba(29,63,191,0) 70%), radial-gradient(60% 70% at 80% 100%, #2277e2 0%, rgba(34,119,226,0) 70%), linear-gradient(170deg, #0d2b8f 0%, #1550d8 45%, #1856d4 75%, #1f6ddc 100%); }
.f-foot::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .3; mix-blend-mode: overlay; background-image: var(--noise); background-size: 220px 220px; pointer-events: none; }
.f-foot .f-col b { color: #fff; } .f-foot .f-col a { color: rgba(255,255,255,.82); } .f-foot .f-col a:hover { color: #fff; }
.f-foot .f-bottom { border-top-color: rgba(255,255,255,.22); color: rgba(255,255,255,.8); }

/* Contact page: the thanks sits centred in the card, which keeps the form's height */
.ct-card { display: flex; flex-direction: column; justify-content: center; }
.ct-done:not([hidden]) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; }
.ct-done h2 { margin: 0; }
.ct-done .done-ic { width: 48px; height: 48px; }