/* Shark product presentation. Shared navigation and button tokens remain authoritative. */
.shark-page { background: #070d1c; }
.shark-page main { overflow: clip; }
.shark-width { width: min(1180px, calc(100% - 80px)); margin-inline: auto; }
.shark-page h1,.shark-page h2,.shark-page h3 { font-family: Manrope,sans-serif; letter-spacing: -.055em; }
.shark-page h2 { font-size: clamp(38px,5vw,70px); line-height: 1.09; font-weight: 700; }
.shark-page p { color: #a9b6cc; line-height: 1.65; }
.shark-chapter { padding-block: 120px; }
.shark-topic { font-size: 16px; font-weight: 600; margin-bottom: 24px; }
.shark-section-heading { text-align: center; margin-bottom: 60px; }
.shark-section-heading>p:last-child { margin-top: 24px; font-size: 19px; }
.shark-text-link { color: #a9bfff; display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.shark-text-link:hover { color: #fff; }
.shark-small { font-size: 12px; margin-top: 15px; }
.shark-skip { position: fixed; top: 8px; left: 8px; z-index: 10000; padding: 14px; background: #edf2ff; color: #070d1c; transform: translateY(-150%); }
.shark-skip:focus { transform: none; }
.shark-page :focus-visible { outline: 2px solid #a9bfff; outline-offset: 5px; }
.shark-product-nav { margin-top: 76px; border-bottom: 1px solid #ffffff14; background: #0b1323; }
.shark-product-nav>.shark-width { display: flex; align-items: center; justify-content: space-between; min-height: 62px; }
.shark-product-name { font-size: 24px; color: #edf2ff; font-weight: 800; letter-spacing: -.06em; }
.shark-product-name span { font-size: 10px; font-weight: 500; color: #9daac2; margin-left: 10px; letter-spacing: 0; }
.shark-product-nav>div>div { display: flex; align-items: center; gap: 28px; }
.shark-product-nav>div>div>a { font-size: 12px; color: #bcc7dc; }
.shark-product-nav .shark-demo-link { background: #edf2ff; color: #101b30; border-radius: 100px; padding: 8px 18px; }
.shark-hero { padding-top: 64px; text-align: center; background: linear-gradient(180deg,#0b1323 0%,#101d35 48%,#070d1c 100%); }
.shark-product-label { font-size: 23px; font-weight: 700; letter-spacing: -.05em; margin-bottom: 20px; color: #d3def3!important; }
.shark-hero h1 { font-size: clamp(44px,6.6vw,94px); font-weight: 700; line-height: 1.06; margin: 0; color: #edf2ff; }
.shark-intro { margin-top: 25px; font-size: 18px; }
.shark-actions { display: flex; justify-content: center; align-items: center; gap: 28px; margin-top: 26px; }
.shark-hero-stage { position: relative; margin-top: 70px; padding: 0 74px 55px 10px; perspective: 1500px; }
.shark-desktop-frame { border: 1px solid #73849b; border-radius: 19px; padding: 8px; background: #10192b; box-shadow: 0 45px 90px #0006; transform: rotateX(7deg); transform-origin: center bottom; }
.shark-frame-bar { display: flex; align-items: center; gap: 5px; height: 25px; padding-inline: 9px; }
.shark-frame-bar>span { width: 6px; height: 6px; border-radius: 50%; background: #73829d; }
.shark-frame-bar p { flex: 1; margin: 0 44px 0 0; font-size: 9px; color: #96a6be; }
.shark-desktop-frame>img { display: block; width: 100%; height: auto; border-radius: 8px; }
.shark-phone-frame { position: absolute; bottom: 0; right: 0; width: 20%; border: 1px solid #7c899e; border-radius: 34px; padding: 8px; background: #0c1220; box-shadow: 0 20px 50px #0009; transform: rotate(-4deg); }
.shark-phone-frame img { display: block; width: 100%; height: auto; aspect-ratio: 390/844; border-radius: 26px; object-fit: cover; }
.shark-phone-home { position: absolute; bottom: 15px; height: 3px; width: 30%; background: #d5deeb; border-radius: 3px; left: 35%; }
.shark-media-note { font-size: 11px; margin-top: 28px; color: #8493ad!important; }
.shark-flow { display: flex; justify-content: space-between; align-items: center; padding-block: 55px 0; color: #b5c5e1; font-size: 15px; }
.shark-flow i { width: 6%; height: 1px; background: #566c8c; position: relative; }
.shark-flow i:after { content: ''; position: absolute; right: 0; top: -2px; width: 5px; height: 5px; border-top: 1px solid #566c8c; border-right: 1px solid #566c8c; transform: rotate(45deg); }
.shark-tour .shark-screen-gallery { border-color: #52637b; border-radius: 22px; box-shadow: 0 30px 80px #0003; }
.shark-tour .shark-screen-tabs { justify-content: center; padding: 15px; background: #101a2b; }
.shark-tour .shark-screen-toolbar { display: none; }
.shark-tour .shark-screen-tabs button { font-size: 13px; padding: 12px 16px; border-radius: 50px; }
.shark-tour .shark-screen img { aspect-ratio: 2846/1436; }
.shark-tour .shark-screen img[data-shark-format="portrait"] { height: 600px; }
.shark-tour .shark-screen-caption { padding: 18px 24px; }
.shark-tour-details { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; margin-top: 48px; }
.shark-tour-details h3 { font-size: 20px; letter-spacing: -.035em; max-width: 21ch; line-height: 1.4; }
.shark-tour-details p { margin-top: 16px; font-size: 14px; }
.shark-cash { background: #eaf0f8; color: #172439; }
.shark-cash p { color: #556781; }
.shark-cash-layout { display: grid; grid-template-columns: .8fr 1.4fr; align-items: center; gap: 75px; }
.shark-cash-copy h3 { font-size: 38px; line-height: 1.17; }
.shark-cash-copy>p { font-size: 16px; margin-top: 24px; }
.shark-cash-copy ul { list-style: none; margin: 30px 0; padding: 0; font-size: 14px; color: #435773; }
.shark-cash-copy li { padding: 12px 0; border-bottom: 1px solid #1724391a; }
.shark-cash .shark-text-link { color: #37569f; font-size: 14px; }
.shark-cash-screen { margin: 0; }
.shark-cash-screen img { border-radius: 20px; width: 100%; box-shadow: 0 32px 55px #1724392e; }
.shark-cash-screen figcaption { font-size: 11px; color: #63748d; padding: 20px 16px 0; }
.shark-feature-heading { display: grid; grid-template-columns: 1.5fr 1fr; gap: 60px; align-items: end; }
.shark-feature-heading>p { font-size: 17px; max-width: 37ch; }
.shark-cloud-stage { position: relative; margin-top: 35px; padding-top: 100px; }
.shark-cloud-word { position: absolute; left: 0; top: -8px; font-size: clamp(100px,18vw,250px); font-weight: 800; line-height: 1; letter-spacing: -.09em; color: #1e3251; }
.shark-cloud-screen { margin: 0; position: relative; }
.shark-cloud-screen img { width: 100%; border: 1px solid #344a69; border-radius: 20px; box-shadow: 0 30px 70px #0004; }
.shark-cloud-screen figcaption { margin-top: 18px; font-size: 12px; color: #889ab8; }
.shark-inline-features { display: grid; grid-template-columns: repeat(3,1fr); gap: 42px; margin: 42px 0 28px; }
.shark-inline-features p { font-size: 14px; }
.shark-inline-features strong { display: block; color: #e3ebf9; font-size: 17px; margin-bottom: 12px; }
.shark-pay { background: #101b2c; }
.shark-pay-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: center; }
.shark-pay-copy h2 { font-size: clamp(36px,4.3vw,62px); }
.shark-pay-copy>p:not(.shark-topic):not(.shark-small) { max-width: 39ch; margin-top: 26px; font-size: 18px; }
.shark-pay-list { list-style: none; padding: 0; margin-block: 34px; }
.shark-pay-list li { padding: 17px 0; border-bottom: 1px solid #ffffff14; }
.shark-pay-list strong { font-size: 16px; font-weight: 600; display: block; }
.shark-pay-list span { color: #9cacc5; display: block; font-size: 14px; margin-top: 6px; }
.shark-pay-visual { margin: 0; position: relative; text-align: center; padding-block: 20px; }
.shark-pay-orbit { position: absolute; top: 25%; left: -20%; font-size: clamp(100px,15vw,200px); font-weight: 800; letter-spacing: -.07em; color: #243b5b; }
.shark-pay-phone { width: 260px; max-width: 78%; margin: auto; position: relative; background: #070d1c; border: 1px solid #6c7990; border-radius: 36px; padding: 9px; box-shadow: 0 30px 60px #0006; transform: rotate(5deg); }
.shark-pay-phone img { width: 100%; height: auto; display: block; border-radius: 27px; }
.shark-pay-visual figcaption { font-size: 11px; color: #93a6c6; margin-top: 30px; }
.shark-role-picker { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0 0 44px; }
.shark-role-picker button { border: 1px solid #ffffff20; background: transparent; border-radius: 99px; padding: 12px 20px; color: #a9b8d1; font: 500 14px Manrope,sans-serif; cursor: pointer; }
.shark-role-picker button[aria-pressed="true"] { background: #eaf0fa; color: #12203a; border-color: #eaf0fa; }
.shark-role-picker button:hover { border-color: #a9bfff; }
.shark-role-content { max-width: 900px; margin-inline: auto; min-height: 360px; padding: 50px; background: #14243c; border-radius: 28px; display: grid; grid-template-columns: 1.15fr 1fr; column-gap: 60px; align-items: start; }
.shark-role-name { grid-column: 1/-1; font-size: 13px; margin-bottom: 24px; }
.shark-role-content h3 { font-size: 40px; line-height: 1.18; grid-row: span 2; }
.shark-role-content>p[data-role-description] { font-size: 16px; }
.shark-role-content .btn { justify-self: start; margin-top: 30px; font-size: 13px; }
.shark-access { background: #101b2c; }
.shark-access-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 100px; }
.shark-access-layout>div>p:last-child { max-width: 37ch; margin-top: 26px; font-size: 18px; }
.shark-access-details article { padding: 26px 0; border-bottom: 1px solid #ffffff1a; }
.shark-access-details article:first-child { padding-top: 0; }
.shark-access-details h3 { font-size: 23px; letter-spacing: -.03em; }
.shark-access-details p { font-size: 15px; margin-top: 9px; }
.shark-faq { max-width: 850px; }
.shark-faq h2 { margin-bottom: 45px; font-size: 44px; }
.shark-faq details { border-bottom: 1px solid #ffffff20; padding-block: 22px; }
.shark-faq summary { font-size: 17px; font-weight: 500; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.shark-faq summary:after { content: '+'; color: #a9bfff; font-size: 24px; line-height: 1; }
.shark-faq details[open] summary:after { content: '−'; }
.shark-faq details>p { margin-top: 18px; max-width: 65ch; font-size: 15px; }
.shark-faq details>a { display: inline-block; margin-top: 16px; }
.shark-final { text-align: center; background: linear-gradient(180deg,#0e1b32,#132847); }
.shark-final h2 { font-size: clamp(44px,6vw,84px); }
.shark-final>.shark-width>p:not(.shark-product-label) { margin-top: 25px; font-size: 18px; }
.shark-demo-roles { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.shark-demo-roles a { color: #d6e2f8; background: #ffffff09; border: 1px solid #ffffff2b; border-radius: 13px; padding: 18px 22px; font-size: 14px; }
.shark-demo-roles a span { margin-left: 12px; color: #91adfa; }
.shark-demo-roles a:hover { background: #ffffff18; }
.shark-enquiry { display: flex; justify-content: center; align-items: center; gap: 30px; margin-top: 65px; padding-top: 40px; border-top: 1px solid #ffffff18; }
.shark-enquiry p { font-size: 15px; }
html.lenis,html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
@media (max-width: 900px) {
.shark-width { width: calc(100% - 48px); }.shark-chapter { padding-block: 85px; }
.shark-cash-layout,.shark-feature-heading,.shark-pay-layout,.shark-access-layout { gap: 40px; }
.shark-cash-layout { grid-template-columns: 1fr; }.shark-cash-copy { max-width: 600px; }
.shark-tour-details,.shark-inline-features { gap: 24px; }
.shark-hero-stage { padding-right: 45px; }.shark-phone-frame { width: 24%; }
.shark-role-content { padding: 36px; column-gap: 35px; }.shark-role-content h3 { font-size: 33px; }
.shark-feature-heading { grid-template-columns: 1fr; }.shark-feature-heading>p { max-width: 55ch; }
}
@media (max-width: 640px) {
.shark-width { width: calc(100% - 36px); }.shark-chapter { padding-block: 68px; }
.shark-product-nav { margin-top: 68px; }.shark-product-nav>div>div { gap: 14px; }.shark-product-nav>div>div>a:not(.shark-demo-link) { display: none; }
.shark-product-name span { margin-left: 7px; }.shark-hero { padding-top: 45px; }
.shark-hero h1 { font-size: clamp(35px,8.8vw,57px); letter-spacing: -.06em; }.shark-product-label { font-size: 21px; margin-bottom: 20px; }
.shark-intro { font-size: 14px; margin-top: 22px; }.shark-intro br { display: none; }
.shark-actions { flex-direction: column; gap: 20px; }.shark-actions .btn { font-size: 13px; }.shark-text-link { font-size: 13px; }
.shark-hero-stage { margin-top: 48px; padding: 0 27px 50px 0; width: calc(100% - 30px); }
.shark-desktop-frame { padding: 4px; border-radius: 10px; }.shark-frame-bar { height: 14px; padding-inline: 4px; gap: 3px; }.shark-frame-bar>span { width: 3px; height: 3px; }.shark-frame-bar p { font-size: 5px; margin-right: 10px; }
.shark-desktop-frame>img { border-radius: 5px; }.shark-phone-frame { width: 27%; padding: 4px; border-radius: 17px; right: -2px; bottom: 0; }.shark-phone-frame img { border-radius: 13px; }.shark-phone-home { bottom: 9px; height: 2px; }
.shark-media-note { font-size: 9px; margin-inline: 18px; margin-top: 18px; }.shark-flow { flex-wrap: wrap; gap: 14px; justify-content: center; padding-top: 35px; font-size: 11px; }.shark-flow i { width: 15px; }.shark-flow i:nth-of-type(2) { display: none; }.shark-flow span { flex-basis: 38%; }.shark-flow i { flex-basis: 8%; }
.shark-section-heading { margin-bottom: 32px; }.shark-section-heading>p:last-child { font-size: 15px; margin-top: 20px; }.shark-topic { font-size: 13px; margin-bottom: 20px; }.shark-page h2 { font-size: 37px; }
.shark-tour .shark-screen-tabs { gap: 3px; padding: 10px 5px; }.shark-tour .shark-screen-tabs button { font-size: 10px; padding: 8px 9px; }.shark-tour .shark-screen-gallery { border-radius: 12px; }.shark-tour .shark-screen img[data-shark-format="portrait"] { height: 470px; }.shark-tour .shark-screen-caption { padding: 15px; font-size: 11px; }
.shark-tour-details,.shark-inline-features { grid-template-columns: 1fr; gap: 25px; margin-top: 30px; }.shark-tour-details h3 { max-width: none; font-size: 20px; }.shark-tour-details p { margin-top: 9px; }.shark-tour-details>div { border-top: 1px solid #ffffff1a; padding-top: 20px; }
.shark-cash-copy h3 { font-size: 31px; }.shark-cash-copy>p { font-size: 15px; }.shark-cash-screen img { border-radius: 12px; }.shark-cash-screen figcaption { padding-inline: 0; font-size: 10px; }
.shark-feature-heading { gap: 25px; }.shark-feature-heading>p { font-size: 15px; }.shark-cloud-stage { padding-top: 65px; margin-top: 28px; }.shark-cloud-word { font-size: 100px; }.shark-cloud-screen img { border-radius: 12px; }.shark-cloud-screen figcaption { font-size: 10px; }
.shark-inline-features strong { font-size: 17px; margin-bottom: 7px; }.shark-inline-features { margin-top: 28px; }
.shark-pay-layout,.shark-access-layout { grid-template-columns: 1fr; gap: 40px; }.shark-pay-copy>p:not(.shark-topic):not(.shark-small) { font-size: 16px; }.shark-pay-phone { width: 235px; }.shark-pay-visual { margin-top: 0; }.shark-pay-orbit { left: 0; font-size: 150px; }
.shark-role-picker { gap: 6px; margin-bottom: 24px; }.shark-role-picker button { font-size: 11px; padding: 11px 14px; }.shark-role-content { padding: 27px; grid-template-columns: 1fr; min-height: 375px; border-radius: 18px; }.shark-role-content h3 { font-size: 31px; grid-row: auto; }.shark-role-name { margin-bottom: 15px; }.shark-role-content>p[data-role-description] { font-size: 14px; margin-top: 20px; }.shark-role-content .btn { margin-top: 24px; font-size: 12px; padding-inline: 14px; }
.shark-access-layout>div>p:last-child { font-size: 16px; }.shark-access-details article { padding-block: 21px; }.shark-access-details h3 { font-size: 21px; }
.shark-faq h2 { font-size: 32px; margin-bottom: 30px; }.shark-faq summary { font-size: 15px; }.shark-faq details>p { font-size: 14px; }
.shark-final h2 { font-size: 42px; }.shark-final>.shark-width>p:not(.shark-product-label) { font-size: 15px; }.shark-demo-roles { gap: 8px; margin-top: 30px; }.shark-demo-roles a { padding: 14px 16px; font-size: 12px; }.shark-enquiry { margin-top: 40px; padding-top: 28px; flex-direction: column; gap: 18px; }
}
@media (prefers-reduced-motion: reduce) { .shark-desktop-frame,.shark-phone-frame,.shark-pay-phone { transform: none; } .shark-page * { scroll-behavior: auto!important; } }
/* Media uses intrinsic proportions; HTML dimensions reserve space only. */
.shark-page main img { height: auto; }
.shark-product-nav { margin-top: 0; }
.shark-hero { padding-top: 38px; }
.shark-hero h1 { font-size: clamp(44px,5.9vw,84px); }
.shark-hero-stage { margin-top: 48px; }
@media(max-width:640px) { .shark-product-nav { margin-top: 0; } .shark-hero { padding-top: 38px; } .shark-hero h1 { font-size: clamp(35px,8.8vw,57px); } }
.shark-phone-frame img { object-position: top; }
.shark-tour .shark-screen img { aspect-ratio: auto; max-height: 760px; object-fit: contain; }