:root {
 color-scheme: dark;
 --dark: #06080c;
 --panel: #0e1219;
 --text: #f5f8fc;
 --muted: #b6c0ce;
 --cyan: #64cefb;
 --focus: #9de1ff;
 --display: 'Segoe UI', Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--dark); color: var(--text); font: 16px/1.6 'Segoe UI', Arial, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, figure, ol { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; }
a, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; }
main:focus { outline: none; }
section, footer, article { scroll-margin-top: 24px; }
.skip-link { position: fixed; z-index: 100; top: -100px; left: 18px; padding: 13px 18px; background: #fff; color: #070a10; border: 2px solid #1759d6; border-radius: 8px; }
.skip-link:focus { top: 16px; }
.hero { min-height: 710px; height: 100svh; position: relative; display: flex; align-items: center; justify-content: center; isolation: isolate; padding: 145px 28px 105px; background: #030509; }
.hero-media, .hero-shade { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.hero-video, .hero-poster { width: 100%; height: 100%; object-fit: cover; object-position: 52% center; position: absolute; inset: 0; }
.hero-video { opacity: 0; }
.hero-video.is-playing { opacity: 1; }
.hero-shade { z-index: -1; background: rgb(0 0 0 / 62%); }
.hero-shade::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, #02071240, transparent 65%), linear-gradient(180deg, #0002, transparent 25%, transparent 76%, #030509cc); }
.hero-header { position: absolute; top: 30px; left: 28px; right: 28px; display: flex; justify-content: center; z-index: 5; }
.hero-nav { display: flex; align-items: center; justify-content: space-between; gap: 54px; padding: 8px 12px 8px 27px; border: 1px solid #e2f1ff2b; border-radius: 70px; background: #101725b8; box-shadow: inset 0 1px 0 #ffffff0a, 0 12px 35px #0003; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.brand-crop { position: relative; display: block; width: 185px; aspect-ratio: 1686 / 240; overflow: hidden; flex-shrink: 0; }
.header-brand { outline-offset: 8px; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; width: 185px; flex-shrink: 0; }
.header-brand .brand-crop { width: 100%; }
.header-brand img { position: absolute; max-width: none; width: 121.471%; height: auto; top: -95%; left: -11.566%; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 17px; border-radius: 28px; color: #f5f8fc; font-size: 13px; font-weight: 550; transition: background .2s; }
.nav-links a:hover, .nav-links a:focus-visible { background: #edf5ff1a; }
.hero-content { width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero-beta { display: inline-flex; align-items: center; gap: 11px; font-size: 12px; line-height: 1.5; font-weight: 550; min-height: 40px; padding: 0 15px; border: 1px solid #e6f5ff3d; border-radius: 40px; background: #081018c9; color: #eef6ff; }
.hero-beta:hover { border-color: #9bd8fa; }
.beta-dot { width: 6px; height: 6px; border-radius: 50%; background: #87ecc0; box-shadow: 0 0 9px #87ecc050; }
.hero-heading { position: relative; width: min(76vw, 1050px); margin: 28px 0; padding: 0; color: #fff; line-height: 1; }
.hero-logo-crop { position: relative; display: block; width: 100%; aspect-ratio: 1686 / 240; overflow: hidden; }
.hero-logo-crop img { position: absolute; max-width: none; width: 121.471%; height: auto; top: -95%; left: -11.566%; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.hero-intro { font-size: 17px; line-height: 1.65; color: #e0e8f2; font-weight: 400; }
.pill { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 22px; padding: 0 25px; border-radius: 40px; font-size: 12px; line-height: 1.4; font-weight: 650; white-space: nowrap; }
.pill-primary { margin-top: 26px; background: linear-gradient(120deg, #fdfefe, #e0f2fe); border: 1px solid #fff; box-shadow: inset 0 1px 0 #fff, 0 6px 22px #0005; color: #061421; padding: 6px 7px 6px 23px; min-height: 53px; }
.pill-arrow { display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid #accadd; border-radius: 50%; background: #fff; font-size: 22px; transition: transform .2s; }
.pill:hover .pill-arrow, .pill:focus-visible .pill-arrow { transform: rotate(12deg); }
.pill:active { box-shadow: inset 0 2px 8px #091a2930; }
.hero-bottom { position: absolute; left: 44px; right: 44px; bottom: 30px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #d3deeb; font-size: 10px; line-height: 1.7; }
.hero-bottom>span:first-child { letter-spacing: .12em; }
.eyebrow { font-size: 10px; font-weight: 600; letter-spacing: .15em; color: #afc0d1; }
.about { max-width: 950px; margin-inline: auto; padding: 104px 28px 98px; text-align: center; }
.about h2 { font: 550 clamp(34px, 4.5vw, 61px)/1.08 var(--display); letter-spacing: -.045em; margin-top: 24px; }
.about-copy { max-width: 615px; margin: 27px auto 0; color: #bfcad8; font-size: 15px; line-height: 1.8; }
.products { max-width: 1424px; margin-inline: auto; padding: 25px 44px 100px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin: 0 0 42px; border-top: 1px solid #344150; padding-top: 40px; }
.display-heading { font: 600 clamp(55px, 7.1vw, 98px)/1 var(--display); letter-spacing: -.065em; }
.section-heading .display-heading { margin-top: 14px; }
.section-note { font-size: 13px; color: #bfcbd9; line-height: 1.8; padding-bottom: 8px; }
.catalog-stack { display: block; }
.project-card { background: #0d1118; border: 1px solid #394452; border-radius: 32px; padding: 27px; min-width: 0; margin-bottom: 28px; }
.project-card:last-child { margin-bottom: 0; }
.project-header { display: flex; align-items: center; gap: 23px; margin-bottom: 25px; }
.project-number { color: #d7e3ed; font: 750 96px/1 var(--display); letter-spacing: -.075em; flex-shrink: 0; }
.project-identity { flex: 1; min-width: 0; }
.project-category { color: #b2c2d5; text-transform: uppercase; letter-spacing: .07em; font-size: 10px; }
.project-identity h3 { font-size: 29px; letter-spacing: -.045em; font-weight: 550; line-height: 1.25; margin: 5px 0 9px; }
.status { display: inline-flex; vertical-align: middle; align-items: center; min-height: 27px; padding: 3px 10px; border: 1px solid #566478; border-radius: 30px; font-size: 10px; color: #dce7f5; background: #15202d; }
.status-live { border-color: #3d7764; color: #c3efde; background: #132a22; }
.status-testing { border-color: #766541; color: #f2dcab; background: #292316; }
.status-planned { border-color: #526c89; color: #d0e4fc; background: #152336; }
.pill-outline { border: 1px solid #687a90; color: #eef5fd; font-size: 11px; min-height: 46px; padding-inline: 21px; transition: background .2s; }
.pill-outline:hover, .pill-outline:focus-visible { background: #dcecff12; }
.pill-outline>span { font-size: 18px; }
.project-grid { display: grid; grid-template-columns: 1fr 1.12fr; gap: 21px; }
.project-story { display: flex; flex-direction: column; gap: 17px; min-width: 0; }
.project-summary { background: #dfe8e8; color: #122231; border: 1px solid #dfe8e8; border-radius: 22px; padding: 24px 26px; }
.product-brand { width: max-content; max-width: 100%; display: flex; align-items: center; justify-content: center; }
.brand-square { width: 48px; height: 48px; }
.brand-square img { width: 48px; height: 48px; object-fit: contain; }
.brand-wide { width: 164px; height: 55px; }
.brand-wide img { width: 164px; height: 55px; object-fit: contain; }
.project-tagline { font-size: 27px; font-weight: 550; letter-spacing: -.04em; line-height: 1.25; margin-top: 18px; max-width: 415px; }
.availability { margin-top: 14px; font-size: 11px; line-height: 1.7; color: #385162; }
.project-info { background: #111923; border: 1px solid #344355; border-radius: 22px; padding: 21px 26px 11px; flex: 1; }
.project-info>p { font-size: 13px; line-height: 1.8; color: #c7d2df; }
.product-details { border-top: 1px solid #3c4d61; margin-top: 17px; }
.product-details summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; min-height: 46px; gap: 14px; font-size: 12px; font-weight: 550; }
.product-details summary::-webkit-details-marker { display: none; }
.product-details summary>span { font-size: 21px; font-weight: 400; }
.product-details[open] summary>span { transform: rotate(45deg); }
.product-details>div { color: #c7d2df; font-size: 12px; line-height: 1.8; padding: 0 0 14px; }
.product-details p+p { margin-top: 12px; }
.project-preview { min-width: 0; min-height: 360px; background: #dfe8e0; border: 1px solid #66798a; border-radius: 22px; padding: 21px; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; }
.project-preview img { width: 100%; height: auto; object-fit: contain; border-radius: 9px; }
.project-preview figcaption { font-size: 10px; line-height: 1.6; margin-top: 16px; color: #344e40; align-self: start; }
.project-stage-one { background: #09111c; border-color: #394d66; }
.project-stage-one .project-summary { background: #101d2d; color: #f3f8ff; border-color: #314b65; }
.project-stage-one .brand-wide img { filter: brightness(0) invert(1); }
.project-stage-one .availability { color: #c3d4e8; }
.preview-stage-one { background: #101d2d; border-color: #314b65; }
.preview-stage-one figcaption { color: #c5d9ed; }
.preview-simui { background: #e2ece7; }
.project-callrunner .project-summary { background: #122136; color: #eaf4ff; border-color: #3a526d; }
.project-callrunner .brand-wide img { filter: brightness(0) invert(1); }
.project-callrunner .availability { color: #c4d8ef; }
.preview-callrunner { background: radial-gradient(ellipse at 80% 10%, #294468, #101b2c 62%); border-color: #4b6481; }
.phone-concept { width: 100%; padding: 8px 17px; }
.concept-label { font-size: 10px; letter-spacing: .08em; color: #c1d7ef; }
.phone-concept ol { list-style: none; padding: 0; margin-top: 22px; }
.phone-concept li { display: flex; align-items: center; gap: 20px; border-top: 1px solid #4b6483; padding: 17px 0; }
.phone-concept li>span { font-size: 11px; color: #b6d7ff; }
.phone-concept strong { font-weight: 500; font-size: 23px; letter-spacing: -.025em; }
.phone-concept>p { font-size: 11px; color: #c5d7ec; margin-top: 17px; }
.contact { background: #f8fafc; color: #09121d; border-radius: 40px 40px 0 0; padding: 44px 44px 28px; }
.contact-inner { max-width: 1336px; margin-inline: auto; }
.contact-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 35px; }
.contact .eyebrow { color: #3e5266; }
.contact-top-link { font-size: 13px; font-weight: 550; display: inline-flex; align-items: center; gap: 25px; min-height: 44px; }
.contact .display-heading { font-size: clamp(73px, 14.5vw, 204px); line-height: .95; letter-spacing: -.068em; }
.contact-main { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.contact-heading { font: 550 clamp(40px, 5vw, 65px)/1.15 var(--display); letter-spacing: -.055em; margin-top: 12px; }
.contact-copy { color: #415163; font-size: 14px; line-height: 1.8; margin-top: 15px; }
.contact-main>p { color: #415163; font-size: 14px; line-height: 1.8; }
.contact-email { display: inline-flex; align-items: center; justify-content: space-between; gap: 45px; min-height: 60px; font-size: clamp(20px, 2.4vw, 34px); font-weight: 500; border-bottom: 1px solid #627587; letter-spacing: -.035em; }
.contact-email>span { font-size: 28px; }
.contact-email:hover, .contact-top-link:hover { color: #154f98; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 56px; border-top: 1px solid #bbc8d3; padding-top: 25px; }
.footer-brand { display: inline-flex; align-items: center; min-height: 44px; width: 164px; }
.footer-brand .brand-crop { width: 100%; aspect-ratio: 498 / 75; }
.footer-brand img { position: absolute; max-width: none; width: 120.482%; height: auto; top: -86.667%; left: -11.044%; }
.footer-bottom>span { font-size: 9px; letter-spacing: .055em; color: #415163; }
.back-top { font-size: 11px; display: inline-flex; align-items: center; gap: 20px; min-height: 44px; }
.contact :focus-visible { outline-color: #1759d6; }
@media (max-height: 780px) and (min-width: 851px) {
 .hero { min-height: 630px; padding-block: 115px 80px; }
 .hero-heading { width: min(76vw, 950px); margin-block: 24px; }
 .hero-intro { font-size: 15px; }
 .hero-beta { min-height: 35px; }
 .pill-primary { margin-top: 20px; }
}
@media (max-width: 1100px) {
 .products { padding-inline: 28px; }
 .project-card { padding: 23px; }
 .project-header { gap: 18px; }
 .project-identity h3 { font-size: 28px; }
 .project-tagline { font-size: 25px; }
 .project-summary, .project-info { padding-inline: 22px; }
 .project-preview { min-height: 360px; padding: 18px; }
 .project-header .pill { padding-inline: 16px; gap: 15px; }
}
@media (max-width: 850px) {
 .hero { min-height: 700px; padding-inline: 24px; }
 .hero-heading { width: min(84vw, 690px); }
 .hero-header { left: 24px; right: 24px; }
 .hero-nav { gap: 23px; padding-left: 20px; }
 .header-brand { width: 164px; }
 .nav-links a { padding-inline: 14px; font-size: 12px; }
 .hero-bottom { left: 28px; right: 28px; font-size: 9px; }
 .about { padding: 78px 28px 74px; }
 .project-grid { grid-template-columns: 1fr; gap: 17px; }
 .project-story { display: grid; grid-template-columns: 1fr 1fr; }
 .project-tagline { font-size: 24px; }
 .project-header .pill { padding-inline: 19px; }
 .project-preview { min-height: 0; padding: 22px; }
 .project-preview img { max-height: 440px; }
 .phone-concept { max-width: 580px; padding: 15px; }
 .contact { padding-inline: 28px; }
 .contact-main { align-items: start; }
 .contact-main>p { font-size: 12px; }
 .contact-email { gap: 24px; font-size: 23px; }
 .footer-bottom { gap: 18px; }
 .footer-bottom>span { font-size: 8px; }
}
@media (max-width: 600px) {
 .hero { min-height: 665px; padding: 165px 20px 83px; }
 .hero-header { top: 21px; left: 18px; right: 18px; }
 .hero-nav { flex-direction: column; gap: 7px; border-radius: 28px; padding: 17px 12px 7px; width: min(100%, 370px); }
 .header-brand { width: 165px; }
 .nav-links { width: 100%; justify-content: center; gap: 9px; }
 .nav-links a { font-size: 12px; padding-inline: 16px; }
 .hero-heading { width: 100%; max-width: 470px; margin: 25px 0; }
 .hero-beta { min-height: 36px; font-size: 10px; padding-inline: 12px; gap: 8px; }
 .hero-intro { font-size: 14px; }
 .pill-primary { font-size: 11px; margin-top: 23px; }
 .hero-bottom { left: 20px; right: 20px; bottom: 22px; flex-direction: column; gap: 5px; text-align: center; font-size: 8px; }
 .hero-bottom>span:first-child { letter-spacing: .09em; }
 .about { padding: 64px 23px 55px; }
 .eyebrow { font-size: 9px; letter-spacing: .1em; }
 .about h2 { font-size: 33px; margin-top: 20px; }
 .about-copy { font-size: 13px; line-height: 1.85; margin-top: 23px; }
 .products { padding: 20px 18px 60px; }
 .section-heading { flex-direction: column; align-items: start; gap: 21px; padding-top: 28px; margin-bottom: 28px; }
 .display-heading { font-size: 58px; }
 .section-heading .display-heading { margin-top: 12px; }
 .section-note { font-size: 12px; padding: 0; }
 .project-card { margin-bottom: 22px; }
 .project-card { padding: 18px 15px; border-radius: 26px; }
 .project-header { display: grid; grid-template-columns: 61px 1fr; gap: 13px; margin-bottom: 20px; align-items: start; }
 .project-number { font-size: 57px; margin-top: 3px; }
 .project-category { font-size: 9px; line-height: 1.7; }
 .project-identity h3 { display: block; font-size: 28px; margin: 5px 0 9px; }
 .status { font-size: 9px; min-height: 25px; }
 .project-header .pill { grid-column: 1 / -1; justify-self: start; font-size: 10px; padding-inline: 17px; gap: 22px; margin-top: 3px; }
 .project-story { display: flex; gap: 13px; }
 .project-summary, .project-info { border-radius: 19px; padding: 21px; }
 .project-info { padding-bottom: 10px; }
 .project-tagline { font-size: 25px; margin-top: 16px; }
 .availability { font-size: 10px; line-height: 1.8; }
 .project-info>p { font-size: 12px; }
 .product-details>div { font-size: 11px; }
 .product-details summary { font-size: 11px; }
 .project-grid { gap: 13px; }
 .project-preview { border-radius: 19px; padding: 16px; }
 .project-preview figcaption { font-size: 9px; margin-top: 13px; }
 .phone-concept { padding: 9px 4px; }
 .phone-concept strong { font-size: 19px; }
 .phone-concept li { gap: 14px; padding-block: 16px; }
 .phone-concept>p, .concept-label { font-size: 9px; }
 .contact { padding: 27px 23px 24px; border-radius: 28px 28px 0 0; }
 .contact-top { gap: 20px; padding-bottom: 26px; align-items: start; }
 .contact-top .eyebrow { max-width: 160px; line-height: 1.8; font-size: 8px; }
 .contact-top-link { font-size: 11px; gap: 14px; min-height: 36px; }
 .contact .display-heading { font-size: 13.8vw; }
 .contact-main { flex-direction: column; gap: 24px; margin-top: 0; }
 .contact-heading { font-size: 42px; }
 .contact-copy { font-size: 13px; }
 .contact-main>p { font-size: 13px; }
 .contact-email { font-size: 21px; gap: 28px; min-height: 53px; }
 .contact-email>span { font-size: 22px; }
 .footer-bottom { display: grid; grid-template-columns: 1fr auto; gap: 18px; margin-top: 36px; padding-top: 22px; }
 .footer-brand { width: 140px; }
 .footer-bottom>span { grid-column: 1 / -1; grid-row: 2; font-size: 8px; }
 .back-top { font-size: 9px; gap: 12px; }
}
@media (max-width: 360px) {
 .hero { min-height: 640px; padding-inline: 15px; }
 .nav-links { gap: 3px; }
 .nav-links a { padding-inline: 14px; }
 .about h2 { font-size: 29px; }
 .products { padding-inline: 13px; }
 .project-card { padding-inline: 13px; }
 .project-summary, .project-info { padding-inline: 18px; }
 .project-tagline { font-size: 23px; }
 .contact { padding-inline: 19px; }
 .contact-email { font-size: 19px; gap: 21px; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 *, *::before, *::after { animation: none !important; transition: none !important; }
 .hero-video { display: none; }
 .pill:hover .pill-arrow, .pill:focus-visible .pill-arrow { transform: none; }
}
@media (forced-colors: active) {
 .hero-media, .hero-shade { display: none; }
 .hero, .hero-nav { background: Canvas; }
 .hero-heading { color: CanvasText; font: 600 clamp(35px, 6vw, 75px)/1.1 var(--display); }
 .hero-heading .sr-only { position: static; display: block; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; }
 .hero-logo-crop { display: none; }
 .header-brand { aspect-ratio: auto; min-height: 27px; }
 .header-brand img, .header-brand .brand-crop { display: none; }
 .header-brand::after { content: 'Decision Cue'; color: CanvasText; font-size: 20px; font-weight: 600; }
 .hero-nav, .hero-beta, .pill, .project-card, .project-summary, .project-info, .project-preview, .status, .project-number { border: 1px solid CanvasText; }
 .brand-square img, .brand-wide img, .footer-brand img { forced-color-adjust: none; }
 .beta-dot { background: CanvasText; }
}

.motion-enabled .project-card.can-stick { position: sticky; top: var(--stack-top, 24px); }
.keyboard-navigation .project-card.can-stick { position: relative; top: auto; }
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
 .motion-enabled .project-card.can-stick { position: relative; top: auto; }
}

/* Product lab copy refinement */
.hero-support { max-width: 690px; margin-top: 14px; color: #d3deeb; font-size: 14px; line-height: 1.75; text-wrap: balance; }
.about-copy + .about-copy { margin-top: 17px; }
.about-principle { max-width: 615px; margin: 32px auto 0; padding-top: 23px; border-top: 1px solid #344150; color: #bfcad8; }
.about-principle p { font-size: 11px; font-weight: 600; letter-spacing: .12em; color: #dce8f4; }
.about-principle span { display: block; margin-top: 10px; font-size: 12px; line-height: 1.8; }
.products .display-heading { font-size: clamp(40px, 5.3vw, 74px); line-height: 1.06; letter-spacing: -.055em; }
.section-note { flex-shrink: 0; }
.project-category strong { color: #eef7ff; font-weight: 650; }
.project-info > .product-metadata { margin-top: 13px; color: #a8c4d8; font-size: 10px; line-height: 1.8; }
.contact-copy { max-width: 430px; }
@media (max-height: 780px) and (min-width: 851px) {
 .hero { min-height: 630px; }
 .hero-heading { width: min(76vw, 950px); }
 .hero-support { font-size: 13px; max-width: 630px; margin-top: 12px; }
}
@media (max-width: 600px) {
 .hero { min-height: 630px; }
 .hero-support { max-width: 345px; font-size: 13px; line-height: 1.75; margin-top: 12px; }
 .about-principle { margin-top: 25px; padding-top: 19px; }
 .about-principle p { font-size: 10px; letter-spacing: .06em; }
 .about-principle span { font-size: 11px; }
 .products .display-heading { font-size: 44px; }
 .project-info > .product-metadata { font-size: 10px; line-height: 1.8; }
}
@media (max-width: 360px) {
 .hero { min-height: 620px; }
 .products .display-heading { font-size: 39px; }
}
