:root {
  --accent: #2563eb;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #14243b;
  background: #fff;
  font-synthesis: none;
  scroll-behavior: smooth;
}

/* Shared commercial presentation; checkout and release gates remain unchanged. */
[hidden] { display: none !important; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 10; padding: 12px; background: #fff; }
.skip-link:focus { top: 12px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #2563eb; outline-offset: 4px; }

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
.wrap { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }

.site-header { background: #fff; border-bottom: 1px solid #e9edf2; }
.header-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 17px; font-weight: 650; letter-spacing: -.045em; }
.brand strong { color: #1479a8; font-weight: 650; }
.site-header nav { display: flex; gap: 8px; align-items: center; }
.site-header nav a { border-radius: 8px; padding: 9px 13px; color: #52657d; font-size: 14px; font-weight: 550; }
.site-header nav a:hover, .site-header nav .active { background: #eef5fa; color: #116b94; }

.eyebrow { margin: 0 0 16px; color: #167ca6; font-size: 12px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, h3, p { overflow-wrap: break-word; }
h1, h2, h3 { color: #10233d; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; min-height: 590px; gap: 64px; padding-block: 80px 90px; }
.hero h1 { max-width: 690px; margin: 0; font-size: clamp(46px, 5.1vw, 72px); line-height: 1.075; letter-spacing: -.065em; }
.lead { max-width: 590px; margin: 26px 0 0; color: #50647d; font-size: 18px; line-height: 1.7; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 47px; border: 1px solid transparent; border-radius: 9px; padding: 11px 18px; font-size: 14px; font-weight: 680; cursor: pointer; transition: background .18s, transform .18s, border-color .18s; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button-primary { color: #fff; background: #116f9b; }
.button-primary:hover:not(:disabled) { background: #0d5f86; }
.button-secondary { color: #1a405c; border-color: #d5e1e9; background: #fff; }
.button-secondary:hover:not(:disabled) { background: #f4f8fb; }
.button:disabled { cursor: not-allowed; color: #65778a; border-color: #e0e6ed; background: #eef1f5; }
.launch-note { display: flex; align-items: center; gap: 9px; margin: 22px 0 0; color: #63768a; font-size: 13px; }
.launch-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #d59a43; }

.hero-art { min-height: 430px; position: relative; overflow: hidden; border: 1px solid #cfdfe8; border-radius: 22px; background: linear-gradient(145deg, #f4f9fc, #e9f3f8); box-shadow: 0 22px 55px #254c6b12; }
.art-grid { position: absolute; inset: 0; background-image: linear-gradient(#8db7cf1f 1px, transparent 1px), linear-gradient(90deg, #8db7cf1f 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(90deg, transparent, #000 35%, #000 75%, transparent); }
.art-card { position: absolute; display: flex; flex-direction: column; border: 1px solid #ccdfeb; border-radius: 13px; background: #fff; box-shadow: 0 12px 35px #2e5c7617; }
.art-card-top { top: 31px; left: 25px; width: 53%; min-height: 110px; padding: 17px; }
.art-card-main { top: 114px; right: 24px; width: 68%; min-height: 226px; padding: 21px; }
.art-card-bottom { bottom: 30px; left: 29px; width: 47%; min-height: 107px; padding: 17px; }
.art-label { color: #65829a; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.art-value { margin-top: 13px; color: #203c56; font-size: 14px; font-weight: 650; }
.art-title { margin-top: 13px; font-size: 22px; font-weight: 720; letter-spacing: -.04em; }
.art-caption { margin-top: auto; color: #758ca1; font-size: 11px; }
.art-graph { height: 75px; display: flex; align-items: flex-end; gap: 8px; margin-top: 19px; }
.art-graph i { display: block; width: 12%; height: 31%; border-radius: 4px 4px 0 0; background: #d5eaf3; }
.art-graph i:nth-child(2) { height: 52%; }.art-graph i:nth-child(3) { height: 44%; }.art-graph i:nth-child(4) { height: 85%; background: #3a9ac4; }.art-graph i:nth-child(5) { height: 66%; }.art-graph i:nth-child(6) { height: 72%; }.art-graph i:nth-child(7) { height: 48%; }.art-graph i:nth-child(8) { height: 36%; }
.sparkline { display: block; height: 3px; margin-top: 17px; border-radius: 5px; background: linear-gradient(90deg, #cbe8f5 6%, #4ba5ca 25%, #cbe8f5 40%, #4ba5ca 56%, #cbe8f5 72%, #4ba5ca 89%); }
.sparkline-two { background: linear-gradient(90deg, #b7d8e9, #459bc0 35%, #b7d8e9 65%, #459bc0); }

.section { padding-block: 95px; }
.section-muted { background: #f7fafc; border-block: 1px solid #edf1f4; }
.section-heading { max-width: 750px; margin-bottom: 39px; }
.section h2, .page-intro h1 { margin: 0; font-size: clamp(36px, 3.8vw, 51px); line-height: 1.13; letter-spacing: -.055em; }
.section-heading > p:last-child, .closing-section p:not(.eyebrow), .page-intro > p:last-child { color: #586d82; font-size: 17px; line-height: 1.7; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature-card { min-height: 231px; border: 1px solid #e0e9ef; border-radius: 13px; padding: 28px; background: #fff; }
.feature-index { color: #1b85ac; font-size: 12px; font-weight: 750; letter-spacing: .08em; }
.feature-card h3 { margin: 34px 0 8px; font-size: 21px; letter-spacing: -.03em; }
.feature-card p { margin: 0; color: #5b7085; line-height: 1.62; font-size: 14px; }
.closing-section { display: flex; align-items: center; justify-content: space-between; gap: 45px; }
.closing-section > div { max-width: 720px; }
.closing-section p:not(.eyebrow) { margin-bottom: 0; }
.text-link { flex: none; color: #126e9a; font-size: 14px; font-weight: 700; }
.text-link:hover { text-decoration: underline; }

.page-intro { padding-block: 80px 44px; }
.page-intro h1 { max-width: 780px; }
.page-intro > p:last-child { max-width: 730px; margin-top: 19px; }
.notice { border: 1px solid #d5e3eb; border-radius: 12px; padding: 23px 26px; background: #f5f9fc; }
.notice h2 { margin: 0 0 7px; font-size: 18px; letter-spacing: -.02em; }
.notice p { margin: 0; color: #5b6e82; font-size: 14px; line-height: 1.6; }
.platform-grid, .pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-block: 28px 85px; }
.platform-card, .price-card { border: 1px solid #e0e8ee; border-radius: 14px; padding: 30px; background: #fff; }
.platform-card h2, .price-card h2 { margin: 0 0 11px; font-size: 24px; letter-spacing: -.04em; }
.platform-card p, .price-card p { color: #5e7184; line-height: 1.65; }
.platform-card ul, .price-card ul { list-style: none; margin: 25px 0; padding: 0; }
.platform-card li, .price-card li { position: relative; padding: 8px 0 8px 23px; color: #465d73; font-size: 14px; }
.platform-card li::before, .price-card li::before { content: "✓"; position: absolute; left: 0; color: #2386ad; font-weight: 800; }
.card-caption { display: block; margin-top: 15px; color: #7a8b9b; font-size: 12px; }
.download-status { color: #50657b; font-size: 14px; }
.download-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 24px 0 70px; }
.download-card { display: flex; flex-direction: column; align-items: flex-start; border: 1px solid #dce7ee; border-radius: 12px; padding: 24px; }
.download-card__label { font-size: 18px; font-weight: 700; }
.download-card p { color: #667b8f; font-size: 14px; }
.download-card .button { margin-top: auto; }
.download-card small { margin-top: 15px; color: #7a8b9b; overflow-wrap: anywhere; font-size: 11px; }
.price-card { display: flex; flex-direction: column; }
.price-card-highlight { border-color: #9dcadd; box-shadow: 0 12px 35px #2b779319; }
.price-tag { margin: 12px 0 2px; color: #0e6087; font-size: 32px; font-weight: 750; letter-spacing: -.05em; }
.price-tag small { font-size: 14px; font-weight: 500; color: #74889a; letter-spacing: 0; }
.price-card ul { margin-bottom: auto; }
.checkout-form { display: grid; gap: 12px; margin-top: 27px; }
.checkout-form label { display: grid; gap: 6px; color: #38526b; font-size: 13px; font-weight: 650; }
.checkout-form input { width: 100%; min-height: 43px; border: 1px solid #cbdce6; border-radius: 8px; padding: 9px 11px; color: #18334b; background: #fff; }
.checkout-form input:focus-visible { outline: 2px solid #4da6cb; outline-offset: 1px; }
.checkout-form .button { margin-top: 5px; }
.checkout-feedback { min-height: 18px; margin: 10px 0 0; color: #586c80; font-size: 13px; }
.payment-panel { max-width: 680px; margin-block: 70px 110px; }
.payment-panel h1 { margin: 0 0 17px; font-size: clamp(38px, 4vw, 52px); letter-spacing: -.055em; }
.payment-panel p { color: #586d82; line-height: 1.65; }
.payment-panel .button { margin-top: 18px; }
.site-footer { border-top: 1px solid #e7edf2; color: #758698; font-size: 13px; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 25px; min-height: 90px; }
.footer-inner div { display: flex; gap: 23px; }
.footer-inner a:hover { color: #116f9b; }

@media (max-width: 850px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding-block: 65px; }
  .hero-art { width: min(100%, 560px); }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 0; }
  .feature-card h3 { margin-top: 20px; }
  .download-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .wrap { width: min(100% - 32px, 1120px); }
  .header-inner { align-items: flex-start; flex-direction: column; padding-block: 17px; gap: 14px; }
  .site-header nav { width: 100%; justify-content: space-between; }
  .site-header nav a { padding: 7px 8px; font-size: 13px; }
  .hero { padding-block: 55px; }
  .hero h1 { font-size: 45px; }
  .lead { font-size: 16px; }
  .hero-art { min-height: 350px; }
  .art-card-main { width: 72%; right: 12px; }
  .art-card-top { left: 12px; }
  .art-card-bottom { left: 12px; bottom: 12px; }
  .section { padding-block: 70px; }
  .closing-section { display: block; }
  .closing-section .text-link { display: inline-block; margin-top: 25px; }
  .page-intro { padding-block: 55px 34px; }
  .platform-grid, .pricing-grid, .download-grid { grid-template-columns: 1fr; }
  .footer-inner { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 22px; gap: 14px; }
}

/* Product presentation */
.wrap { width: min(1240px, calc(100% - 64px)); }
.site-header { border-color: #dfe5ee; }
.header-inner { min-height: 88px; }
.brand { letter-spacing: -.035em; font-size: 20px; }
.brand strong { color: #2563eb; }
.brand small { display: block; font-size: 10px; letter-spacing: .06em; color: #68788e; margin-top: 3px; font-weight: 500; }
.site-header nav a { color: #45546b; padding: 10px 17px; }
.site-header nav a:hover, .site-header nav .active { color: #1d4ed8; background: #eff4ff; }
.eyebrow { color: #1d4ed8; font-size: 11px; letter-spacing: .15em; }
.hero { grid-template-columns: .95fr 1.05fr; min-height: 640px; gap: 52px; padding-block: 85px; }
.hero h1 { font-size: clamp(44px, 4.65vw, 68px); letter-spacing: -.06em; line-height: 1.08; }
.lead { font-size: 17px; line-height: 1.75; max-width: 490px; }
.hero-platforms { font-size: 12px; color: #68788e; margin-top: 24px; display: flex; gap: 12px; }
.button { border-radius: 6px; min-height: 49px; }
.button-primary { background: #2563eb; }
.button-primary:hover:not(:disabled) { background: #1d4ed8; }
.button--download { color: #fff; background: #2563eb; }
.product-preview { margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid #d3dcea; background: #fff; box-shadow: 0 24px 65px #1b39621c; }
.preview-caption { padding: 17px 19px; display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 650; border-bottom: 1px solid #dfe5ee; }
.preview-caption > span:last-child { margin-left: auto; font-weight: 400; color: #69798e; font-size: 11px; }
.preview-dot { width: 7px; height: 7px; border-radius: 50%; background: #2563eb; }
.product-preview img, .detail-image img { display: block; width: 100%; height: auto; }
.product-preview figcaption, .detail-image figcaption { padding: 14px 18px; font-size: 11px; color: #67778d; line-height: 1.6; background: #fff; }
.capability-strip { border-block: 1px solid #e1e7f0; background: #f8faff; }
.capability-strip .wrap { display: grid; grid-template-columns: repeat(4,1fr); padding-block: 25px; text-align: center; font-size: 12px; color: #465875; font-weight: 600; }
.capability-strip span + span { border-left: 1px solid #dae3f0; }
.section { padding-block: 96px; }
.section h2 { font-size: clamp(32px, 3.3vw, 46px); letter-spacing: -.045em; }
.section-muted { background: #f7f9fc; border-color: #e5ebf3; }
.section-heading { max-width: 630px; }
.feature-card { border-radius: 8px; padding: 30px; min-height: 235px; }
.feature-index { color: #2563eb; font-size: 10px; }
.feature-card h3 { font-size: 22px; margin-top: 30px; }
.product-detail { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: center; }
.detail-copy h2 { margin: 0; }
.detail-copy > p:not(.eyebrow) { color: #586d82; font-size: 16px; line-height: 1.75; margin-top: 24px; }
.detail-list { list-style: none; padding: 0; margin: 24px 0 0; font-size: 13px; color: #41556e; line-height: 1.6; }
.detail-list li { padding: 9px 0 9px 23px; position: relative; }
.detail-list li::before { content: '✓'; position: absolute; left: 0; color: #2563eb; font-weight: 700; }
.detail-image { margin: 0; overflow: hidden; border: 1px solid #d3dcea; border-radius: 9px; box-shadow: 0 16px 45px #15375b12; }
.detail-reverse { grid-template-columns: 1.2fr .8fr; }
.detail-reverse .detail-copy { grid-column: 2; grid-row: 1; }
.detail-reverse .detail-image { grid-column: 1; grid-row: 1; }
.faq-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; }
.faq-layout h2 { margin: 0; }
.faq-list details { border-bottom: 1px solid #dce4ef; padding: 22px 0; }
.faq-list details:first-child { padding-top: 0; }
.faq-list summary { cursor: pointer; color: #14243b; font-weight: 650; font-size: 15px; }
.faq-list p { color: #586d82; line-height: 1.75; font-size: 14px; margin-bottom: 0; }
.commercial-cta { padding: 65px 55px; background: #10233d; color: #ced9e8; border-radius: 12px; margin-block: 70px; }
.commercial-cta h2 { color: #fff; font-size: 36px; margin: 0; letter-spacing: -.04em; }
.commercial-cta .eyebrow { color: #8fb8ff; }
.commercial-cta p:not(.eyebrow) { color: #b6c7de; font-size: 15px; }
.commercial-cta .actions { margin: 0; align-items: center; }
.commercial-cta .text-link { color: #d1e0ff; }
.page-intro { padding-block: 76px 40px; }
.pricing-support { margin-bottom: 70px; }
.price-card, .platform-card { border-radius: 10px; padding: 34px; }
.price-card-highlight { border-color: #9cb8f2; box-shadow: 0 12px 40px #2563eb10; }
.price-tag { color: #173e87; font-size: 40px; }
.platform-card li::before, .price-card li::before { color: #2563eb; }
.footer-inner div { flex-wrap: wrap; }
@media (max-width: 950px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding-block: 60px; min-height: 0; }
  .hero-copy { max-width: 650px; }
  .product-preview { max-width: 800px; }
  .product-detail, .detail-reverse, .faq-layout { grid-template-columns: 1fr; gap: 35px; }
  .detail-reverse .detail-copy, .detail-reverse .detail-image { grid-column: auto; grid-row: auto; }
  .commercial-cta { flex-direction: column; align-items: flex-start; padding: 40px; gap: 30px; }
}
@media (max-width: 600px) {
  .wrap { width: calc(100% - 32px); }
  .header-inner { min-height: 0; }
  .hero h1 { font-size: 43px; }
  .capability-strip .wrap { grid-template-columns: repeat(2, 1fr); gap: 20px 0; }
  .capability-strip span:nth-child(3) { border: 0; }
  .section { padding-block: 60px; }
  .commercial-cta { padding: 30px 24px; }
  .commercial-cta h2 { font-size: 30px; }
  .hero-platforms { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { :root { scroll-behavior: auto; } .button { transition: none; } }
