/* Homepage: a single visual system for the complete DBC Utility workflow. */
:root {
  --paper: #f4f7fb;
  --white: #fff;
  --ink: #0f172a;
  --muted: #475569;
  --line: #d8dee6;
  --accent: #1659b7;
  --accent-soft: #eef3f8;
  --dark: #0f172a;
  --body: 'IBM Plex Sans', sans-serif;
  --heading: 'Space Grotesk', 'IBM Plex Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--paper); background-image: linear-gradient(180deg, rgba(238,243,248,.9) 0%, rgba(244,247,251,.72) 36%, #f4f7fb 100%); color: var(--ink); font: 400 16px/1.65 var(--body); }
body:has(dialog[open]) { overflow: hidden; }
button, input { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
svg { display: block; }
figure, p, h1, h2, h3, h4 { margin: 0; }
h1, h2, h3, h4 { font-family: var(--heading); font-weight: 500; }
button { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #2c559b; outline-offset: 5px; }
::selection { background: #c9d7ef; color: #121c2e; }
.lp-container { width: min(1240px, calc(100% - 96px)); margin-inline: auto; }
.lp-icon { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.lp-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { position: fixed; top: -80px; left: 20px; z-index: 100; background: var(--ink); color: white; padding: 12px 18px; border-radius: 6px; }
.skip-link:focus { top: 12px; }
.lp-header { position: sticky; top: 0; z-index: 30; background: rgba(244,247,251,.9); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(15,23,42,.08); }
.lp-nav { display: flex; justify-content: space-between; align-items: center; min-height: 86px; gap: 30px; }
.lp-brand { display: inline-flex; align-items: center; gap: 11px; font: 600 21px/1 var(--heading); letter-spacing: -.8px; white-space: nowrap; }
.lp-brand img { width: 35px; height: 35px; border-radius: 8px; }
.lp-navigation { display: flex; align-items: center; gap: 31px; margin: 0; padding: 0; list-style: none; font-size: 14px; font-weight: 500; }
.lp-navigation a:not(.lp-button):hover { color: var(--accent); }
.lp-button { display: inline-flex; justify-content: center; align-items: center; gap: 12px; min-height: 52px; padding: 12px 22px; border: 1px solid var(--ink); border-radius: 6px; background: var(--ink); color: white; font-weight: 500; line-height: 1.3; transition: background .18s, transform .18s, border-color .18s; }
.lp-button:hover { background: #1e293b; border-color: #1e293b; transform: translateY(-2px); }
.lp-button .lp-icon { width: 18px; height: 18px; }
.lp-button-small { min-height: 42px; padding: 10px 17px; font-size: 13px; }
.lp-button-quiet { color: var(--ink); background: rgba(255,255,255,.88); border-color: rgba(15,23,42,.16); }
.lp-button-quiet:hover { background: #eef3f8; border-color: #c3ccd7; }
.lp-button-soft { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--dark); }
.lp-button-soft:hover { background: #aec2e4; border-color: #aec2e4; }
.lp-menu-toggle { display: none; width: 44px; height: 44px; padding: 10px; background: transparent; border: 1px solid var(--line); border-radius: 6px; }
.lp-menu-toggle span { display: block; height: 1.5px; background: var(--ink); margin: 5px 0; }
.lp-kicker { display: flex; align-items: center; gap: 9px; font: 500 11px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #173b75; }
.lp-kicker::before { content: ''; width: 6px; height: 6px; background: currentColor; }
.lp-section { padding: 86px 0; }
.lp-section-head { display: flex; align-items: end; justify-content: space-between; gap: 48px; margin-bottom: 40px; }
.lp-section-head h2, .lp-heading { font-size: clamp(32px,3.2vw,43px); line-height: 1.16; letter-spacing: -.045em; }
.lp-section-head .lp-kicker { margin-bottom: 18px; }
.lp-section-head > p { max-width: 39ch; color: var(--muted); font-size: 15px; margin-bottom: 3px; }
.section-number { font: 400 11px var(--mono); color: #7d838d; margin-left: auto; }
.toolkit-walkthrough { display: grid; gap: 30px; }
.toolkit-row { display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.5fr); align-items: center; gap: 56px; padding: 20px 0 35px; }
.toolkit-row + .toolkit-row { border-top: 1px solid var(--line); padding-top: 52px; }
.toolkit-copy { min-width: 0; }
.toolkit-label { display: flex; align-items: center; gap: 10px; color: #456189; font: 500 10px/1.5 var(--mono); letter-spacing: .06em; }
.toolkit-label .lp-icon { width: 19px; height: 19px; }
.toolkit-copy h3 { font-size: clamp(30px,3vw,40px); line-height: 1.14; letter-spacing: -.045em; margin-top: 19px; }
.toolkit-copy > p:not(.toolkit-label) { color: var(--muted); font-size: 14px; line-height: 1.8; margin-top: 18px; }
.toolkit-copy .lp-checks { margin: 21px 0; font-size: 12px; }
.toolkit-stage { padding: 24px; background: linear-gradient(145deg,#e6edf7,#f5f8fc 55%,#dfe9f6); border: 1px solid #d5deeb; border-radius: 12px; }
.toolkit-stage img { border-radius: 6px; box-shadow: 0 14px 30px rgba(15,23,42,.15); }
.toolkit-row-edit { grid-template-columns: minmax(0,1.5fr) minmax(0,.82fr); }
.toolkit-row-edit .toolkit-copy { grid-column: 2; grid-row: 1; }
.toolkit-row-edit .toolkit-figure { grid-column: 1; grid-row: 1; }
.toolkit-row-edit .toolkit-stage { background: linear-gradient(145deg,#e9eef7,#f8fafc 65%,#e1e7f0); }
.toolkit-compare { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.2fr); gap: 52px; align-items: center; padding: 42px; background: var(--dark); color: white; border-radius: 12px; }
.toolkit-compare .toolkit-label { color: #b6c8e3; }
.toolkit-compare .toolkit-copy h3 { font-size: 44px; line-height: 1.08; }
.toolkit-compare .toolkit-copy > p:not(.toolkit-label), .toolkit-compare .lp-checks { color: #bac4d3; }
.toolkit-compare .lp-checks li::before { color: #9cbef0; }
.toolkit-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 22px 0; font: 400 10px var(--mono); color: #d0dbee; }
.toolkit-tags li { padding: 8px 10px; border: 1px solid #3d4b61; border-radius: 4px; }
.toolkit-compare .lp-text-link { color: #c5d8f5; border-color: #70839f; }
.toolkit-compare .lp-text-link:hover { color: white; }
.layout-capture { width: 100%; aspect-ratio: 1.48; position: relative; overflow: hidden; background: #11171c; border: 1px solid #445065; border-radius: 8px; }
.toolkit-row-layout .layout-capture img { position: absolute; width: 250%; max-width: none; left: 50%; top: 50%; transform: translate(-50%,-50%); border: 0; border-radius: 0; }
.toolkit-compare .product-figure img { border-color: #445065; }
.toolkit-compare .product-figure figcaption { color: #9caec7; }
.lp-checks { list-style: none; padding: 0; margin: 23px 0; font-size: 13px; }
.lp-checks li { display: flex; align-items: flex-start; gap: 10px; margin: 9px 0; }
.lp-checks li::before { content: '✓'; font-size: 12px; color: var(--accent); flex: 0 0 auto; }
.lp-text-link { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 500; color: var(--accent); padding-block: 4px; border-bottom: 1px solid #9da7b8; }
.lp-text-link .lp-icon { width: 16px; height: 16px; }
.lp-text-link:hover { color: #0d1f3d; border-bottom-color: currentColor; }
.product-figure { min-width: 0; position: relative; }
.product-figure img { width: 100%; border: 1px solid #272f3d; border-radius: 5px; background: #11171c; }
.product-figure figcaption { margin-top: 12px; font: 400 10px/1.5 var(--mono); color: #747880; }
.capture-zoom { position: absolute; bottom: 35px; right: 11px; display: inline-flex; align-items: center; gap: 7px; min-height: 34px; background: rgba(247,248,250,.94); color: #17253c; border: 1px solid #c2c9d4; border-radius: 4px; padding: 7px 10px; font-size: 11px; }
.capture-zoom .lp-icon { width: 14px; height: 14px; }
.product-footer { display: flex; justify-content: space-between; align-items: center; gap: 25px; padding-top: 21px; font-size: 12px; color: var(--muted); }
.product-footer a { text-decoration: underline; text-underline-offset: 3px; }
.dbc-details { margin-top: 48px; }
.details-heading { display: flex; justify-content: space-between; align-items: end; gap: 35px; }
.details-heading h3 { font-size: 25px; line-height: 1.2; letter-spacing: -.035em; }
.details-heading p { max-width: 43ch; font-size: 13px; color: var(--muted); }
.details-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 23px; padding: 28px 0; border-block: 1px solid var(--line); }
.detail-card { min-width: 0; display: flex; flex-direction: column; align-items: start; padding: 0 27px; }
.detail-card + .detail-card { border-left: 1px solid var(--line); }
.detail-card > .lp-icon { width: 24px; height: 24px; color: #456189; margin-bottom: 19px; }
.detail-card h4 { font-size: 19px; line-height: 1.3; letter-spacing: -.025em; }
.detail-card p { margin: 11px 0 17px; font-size: 13px; line-height: 1.7; color: var(--muted); }
.detail-card .lp-text-link { margin-top: auto; font-size: 11px; }
.lp-extension { padding-top: 0; }
.extension-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.extension-card { padding: 33px; border-radius: 10px; background: #ebeaf5; border: 1px solid #deddeb; display: flex; flex-direction: column; }
.extension-card-logs { background: #eef3f8; border-color: #d8dee6; }
.extension-card-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.extension-icon { display: grid; place-items: center; width: 40px; height: 40px; color: #5a5486; background: #dcd9ed; border-radius: 6px; }
.extension-card-logs .extension-icon { color: var(--accent); background: #cdd4e1; }
.included-pill { font: 400 10px var(--mono); color: #6b6880; }
.extension-card-logs .included-pill { color: #556176; }
.extension-card h3 { font-size: 29px; line-height: 1.16; letter-spacing: -.045em; }
.extension-card > p { margin-top: 15px; font-size: 14px; color: #68667b; max-width: 50ch; }
.extension-card-logs > p { color: #586171; }
.extension-demo { margin-top: 27px; border: 1px solid rgba(100,98,134,.2); background: rgba(255,255,255,.72); border-radius: 6px; overflow: hidden; }
.demo-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 17px; border-bottom: 1px solid #e2e1e9; font: 400 9px var(--mono); color: #72718a; }
.demo-label { display: inline-flex; align-items: center; gap: 7px; }
.demo-label::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #938fc1; }
.extension-card-logs .demo-label::before { background: #587099; }
.translation-grid { display: grid; grid-template-columns: 1fr 1fr; }
.translation-column { padding: 17px 20px; min-width: 0; }
.translation-column + .translation-column { border-left: 1px solid #e2e1e9; background: #faf9fd; }
.language-label { color: #868298; font: 400 9px var(--mono); letter-spacing: .05em; }
.translation-column dl { margin: 14px 0 0; }
.translation-column dt { font: 400 9px var(--mono); color: #9994a7; margin-bottom: 4px; }
.translation-column dd { margin: 0 0 10px; font-size: 14px; font-weight: 500; color: #37324d; overflow-wrap: anywhere; }
.translation-column dd:last-child { margin-bottom: 0; }
.translation-preserved { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 17px; border-top: 1px solid #e2e1e9; font: 400 9px var(--mono); color: #7a748c; }
.translation-preserved code { font: inherit; color: #585071; }
.signal-chart { padding: 17px 19px 10px; }
.chart-legend { display: flex; align-items: center; gap: 8px; color: #505b6f; font: 400 10px var(--mono); }
.chart-legend::before { content: ''; width: 12px; height: 2px; background: #385280; }
.signal-chart svg { width: 100%; height: 143px; margin-top: 8px; overflow: visible; }
.signal-chart text { font: 10px var(--mono); fill: #8d939e; }
.chart-grid { fill: none; stroke: #dfe2e7; stroke-width: 1; }
.chart-area { fill: #e2ebf7; }
.chart-line { fill: none; stroke: #1659b7; stroke-width: 2.5; stroke-linejoin: round; }
.chart-dot { fill: #1659b7; stroke: #fff; stroke-width: 2; }
.log-mapping { padding: 11px 17px; border-top: 1px solid #dce0e6; color: #626d81; font: 400 9px var(--mono); display: flex; align-items: center; gap: 12px; }
.log-mapping span:last-child { color: #314363; margin-left: auto; }
.extension-card > .demo-caption { font: 400 9px/1.5 var(--mono); color: #6f697f; margin-top: 9px; }
.extension-card-logs > .demo-caption { color: #5f6878; }
.extension-card .lp-checks { margin-top: 22px; margin-bottom: 20px; color: #5b5770; }
.extension-card-logs .lp-checks { color: #4a5568; }
.extension-card .lp-text-link { align-self: flex-start; margin-top: auto; }
.extension-note { margin-top: 17px; font-size: 11px; color: #72757b; }
.lp-engineering { padding: 63px 0 67px; background: var(--dark); color: #eff1f5; }
.engineering-intro { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-bottom: 32px; border-bottom: 1px solid #353f50; }
.engineering-intro h2 { font-size: 31px; line-height: 1.2; letter-spacing: -.035em; }
.engineering-intro .lp-kicker { color: #b4c0d5; }
.engineering-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 45px; margin-top: 31px; }
.engineering-item .lp-icon { width: 26px; height: 26px; color: #b9c7df; margin-bottom: 18px; }
.engineering-item h3 { font-size: 18px; margin-bottom: 10px; }
.engineering-item p { color: #a9b0bd; font-size: 13px; }
.engineering-item code { color: #c3cbd9; font: 11px var(--mono); }
.engineering-note { color: #949caa; font-size: 10px; margin-top: 27px; }
.lp-pricing .lp-section-head { margin-bottom: 34px; }
.price-layout { display: grid; grid-template-columns: minmax(0,1fr) 400px; border: 1px solid #c8ced9; border-radius: 10px; background: white; overflow: hidden; }
.price-inclusions { padding: 39px; }
.price-inclusions h3 { font-size: 24px; letter-spacing: -.035em; }
.price-inclusions > p { color: var(--muted); font-size: 14px; margin-top: 10px; max-width: 48ch; }
.price-features { display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; row-gap: 18px; list-style: none; padding: 0; margin: 29px 0 30px; }
.price-features li { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.price-features .lp-icon { width: 19px; height: 19px; color: var(--accent); }
.license-facts { display: flex; flex-wrap: wrap; gap: 13px 21px; padding-top: 23px; border-top: 1px solid var(--line); color: #525a68; font: 400 10px var(--mono); }
.price-card { background: #eef3f8; border-left: 1px solid #d1d6e0; padding: 33px 36px; display: flex; flex-direction: column; justify-content: center; }
.price-card .lp-kicker { font-size: 10px; }
.price-amount { display: flex; align-items: baseline; gap: 15px; margin-top: 16px; }
.price-amount strong { font: 500 69px/1 var(--heading); letter-spacing: -.06em; color: var(--ink); }
.price-amount span { font-size: 12px; color: #606670; }
.price-card > p { color: #5a606b; font-size: 12px; margin: 16px 0 23px; }
.price-card form { margin: 0; }
.price-card .lp-button { width: 100%; }
.price-card .price-legal { font-size: 9px; line-height: 1.7; margin: 13px 0 0; }
.price-legal a { text-decoration: underline; text-underline-offset: 2px; }
.lp-downloads { padding-top: 0; padding-bottom: 60px; }
.download-heading { display: flex; justify-content: space-between; align-items: end; gap: 36px; margin-bottom: 24px; }
.download-copy { max-width: 660px; }
.download-copy .lp-heading { font-size: 30px; }
.download-copy .lp-kicker { margin-bottom: 10px; }
.download-copy > p:not(.lp-kicker) { color: var(--muted); font-size: 14px; margin-top: 11px; max-width: 68ch; }
.download-release { display: grid; gap: 3px; flex: 0 0 auto; border-left: 1px solid var(--line); padding-left: 20px; }
.download-release span { color: var(--muted); font: 400 11px/1.6 var(--mono); }
.download-release strong { font: 500 21px/1.3 var(--heading); letter-spacing: -.04em; }
.download-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.download-item { min-width: 0; display: flex; flex-direction: column; border: 1px solid #cbd6e5; border-radius: 8px; background: var(--white); padding: 22px; }
.download-item-head { display: flex; align-items: center; gap: 14px; }
.download-platform-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; background: var(--accent-soft); border: 1px solid #dae4f1; border-radius: 8px; color: var(--accent); }
.download-platform-icon .lp-icon { width: 25px; height: 25px; }
.download-item h3 { font-size: 23px; line-height: 1.2; letter-spacing: -.04em; }
.download-item-head p { color: #64748b; font: 400 10px/1.5 var(--mono); margin-top: 4px; }
.download-description { color: var(--muted); font-size: 14px; line-height: 1.65; margin: 16px 0 18px; max-width: 54ch; }
.download-options { display: flex; gap: 10px; padding-top: 17px; margin-top: auto; border-top: 1px solid var(--line); }
.download-options .lp-button { flex: 1 1 160px; min-width: 0; min-height: 44px; padding: 10px 14px; gap: 9px; font-size: 14px; white-space: nowrap; background: var(--accent); border-color: var(--accent); }
.download-options .lp-button:hover { background: #104891; border-color: #104891; }
.download-help { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 18px; color: var(--muted); font-size: 13px; }
.download-help .lp-text-link { font-size: 13px; }
.download-help p .lp-text-link { margin-left: 5px; }
.lp-faq { padding-top: 0; }
.faq-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 90px; }
.faq-heading .lp-kicker { margin-bottom: 17px; }
.faq-heading > p:not(.lp-kicker) { color: var(--muted); font-size: 14px; margin: 18px 0 24px; }
.faq-items { border-top: 1px solid var(--line); }
.faq-items details { border-bottom: 1px solid var(--line); }
.faq-items summary { list-style: none; position: relative; padding: 22px 35px 22px 0; font-size: 14px; font-weight: 500; line-height: 1.5; cursor: pointer; }
.faq-items summary::-webkit-details-marker { display: none; }
.faq-items summary::after { content: '+'; position: absolute; right: 0; top: 19px; font: 400 22px var(--heading); color: var(--accent); }
.faq-items details[open] summary::after { content: '−'; }
.faq-items details p { color: var(--muted); font-size: 13px; line-height: 1.75; padding-bottom: 23px; max-width: 65ch; }
.faq-items details a { text-decoration: underline; text-underline-offset: 3px; color: var(--accent); }
.lp-resources { padding: 0 0 72px; }
.resource-band { border-top: 1px solid var(--line); padding-top: 31px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; }
.resource-item { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.resource-item + .resource-item { border-left: 1px solid var(--line); padding-left: 30px; }
.resource-item h3 { font: 500 15px var(--body); }
.resource-item p { color: var(--muted); font-size: 12px; margin-top: 5px; }
.resource-item .lp-icon { width: 17px; height: 17px; color: var(--accent); margin-top: 3px; transition: transform .2s; }
.resource-item:hover .lp-icon { transform: translate(2px,-2px); }
.lp-closing { padding: 45px 0; background: #eef3f8; border-block: 1px solid #ccd3df; }
.closing-content { display: flex; justify-content: space-between; align-items: center; gap: 35px; }
.closing-content h2 { font-size: 34px; letter-spacing: -.04em; line-height: 1.15; }
.closing-content p { color: #5c6676; font-size: 13px; margin-top: 10px; }
.lp-footer { padding: 49px 0 22px; background: var(--paper); }
.footer-main { display: grid; grid-template-columns: 1.6fr repeat(3,1fr); gap: 50px; }
.footer-brand p { max-width: 30ch; color: var(--muted); font-size: 12px; margin-top: 15px; }
.footer-column h2 { font: 500 11px var(--mono); color: #848890; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 15px; }
.footer-column ul { list-style: none; padding: 0; margin: 0; font-size: 12px; }
.footer-column li + li { margin-top: 7px; }
.footer-column a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); margin-top: 35px; padding-top: 19px; font: 400 9px var(--mono); color: #848890; }
.footer-bottom-links { display: flex; gap: 20px; }
.capture-dialog { max-width: min(1500px,96vw); width: 96vw; padding: 20px; background: #131c2b; border: 1px solid #485160; border-radius: 9px; color: #d1d6e0; }
.capture-dialog::backdrop { background: rgba(5,10,19,.86); backdrop-filter: blur(5px); }
.capture-dialog img { width: 100%; max-height: 78vh; object-fit: contain; }
.capture-dialog-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font: 10px var(--mono); }
.capture-dialog button { background: #212c40; color: #d1d6e0; border: 1px solid #475162; padding: 8px 13px; border-radius: 4px; font-size: 12px; }
.capture-dialog figcaption { font-size: 11px; margin-top: 13px; }
.demo-dialog { width: min(1040px,calc(100% - 48px)); max-width: none; max-height: calc(100dvh - 48px); padding: 18px; border: 1px solid #cbd6e5; border-radius: 12px; background: var(--paper); color: var(--ink); box-shadow: 0 24px 90px rgba(5,10,19,.35); }
.demo-dialog::backdrop { background: rgba(5,10,19,.82); backdrop-filter: blur(5px); }
.demo-dialog-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
.demo-dialog-top h2 { font-size: 21px; line-height: 1.3; letter-spacing: -.035em; }
.demo-close { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); color: var(--ink); font-size: 13px; }
.demo-close span { font-size: 21px; line-height: 1; }
.demo-close:hover { background: var(--accent-soft); border-color: #a8bcd9; }
.demo-player { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 200px; overflow: hidden; border-radius: 6px; background: #000; }
.demo-player iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.demo-dialog-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 20px; margin-top: 13px; color: var(--muted); font-size: 13px; }
@media (max-width: 1120px) {
  .lp-container { width: calc(100% - 64px); }
  .lp-navigation { gap: 22px; }
  .toolkit-row { gap: 35px; }
  .toolkit-copy h3 { font-size: 33px; }
  .toolkit-stage { padding: 19px; }
  .toolkit-compare { padding: 32px; gap: 35px; }
  .toolkit-compare .toolkit-copy h3 { font-size: 40px; }
  .detail-card { padding-inline: 23px; }
  .extension-card { padding: 27px; }
  .translation-column { padding: 17px; }
  .extension-card h3 { font-size: 26px; }
  .price-layout { grid-template-columns: minmax(0,1fr) 335px; }
  .price-inclusions { padding: 30px; }
  .price-card { padding: 29px; }
  .price-features { column-gap: 16px; }
  .faq-layout { gap: 60px; }
}
@media (max-width: 900px) {
  .lp-section { padding-block: 76px; }
  .lp-section-head { gap: 26px; }
  .lp-section-head h2, .lp-heading { font-size: 34px; }
  .lp-section-head > p { font-size: 13px; max-width: 30ch; }
  .toolkit-row { grid-template-columns: minmax(0,.9fr) minmax(0,1.35fr); gap: 28px; }
  .toolkit-copy h3 { font-size: 29px; }
  .toolkit-copy > p:not(.toolkit-label) { font-size: 13px; }
  .toolkit-copy .lp-checks { font-size: 11px; }
  .toolkit-label { font-size: 9px; }
  .toolkit-stage { padding: 15px; }
  .toolkit-row-edit { grid-template-columns: minmax(0,1.35fr) minmax(0,.9fr); }
  .toolkit-compare { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 28px; padding: 28px; }
  .toolkit-compare .toolkit-copy h3 { font-size: 36px; }
  .details-heading { display: block; }
  .details-heading p { margin-top: 11px; max-width: none; }
  .detail-card { padding-inline: 19px; }
  .detail-card h4 { font-size: 17px; }
  .detail-card p { font-size: 12px; }
  .lp-extension { padding-top: 0; }
  .extension-grid { gap: 18px; }
  .extension-card { padding: 23px; }
  .extension-card h3 { font-size: 24px; }
  .extension-card > p { font-size: 13px; }
  .translation-column { padding: 16px 12px; }
  .translation-column dd { font-size: 12px; }
  .translation-preserved { padding-inline: 12px; font-size: 8px; }
  .demo-bar { padding-inline: 12px; font-size: 8px; }
  .signal-chart { padding-inline: 12px; }
  .log-mapping { padding-inline: 12px; font-size: 8px; gap: 8px; }
  .engineering-grid { gap: 28px; }
  .engineering-intro { align-items: start; }
  .engineering-intro .lp-kicker { max-width: 24ch; }
  .price-layout { grid-template-columns: 1fr 290px; }
  .price-inclusions, .price-card { padding: 25px; }
  .price-features { grid-template-columns: 1fr; gap: 13px; margin-block: 23px; }
  .price-features li { font-size: 12px; }
  .license-facts { gap: 9px; font-size: 9px; }
  .lp-downloads { padding-top: 0; padding-bottom: 55px; }
  .download-heading { gap: 30px; }
  .download-grid { gap: 18px; }
  .download-item { padding: 20px; }
  .download-options { flex-wrap: wrap; }
  .download-options .lp-button { padding-inline: 12px; font-size: 14px; }
  .faq-layout { grid-template-columns: .8fr 1.2fr; gap: 35px; }
  .lp-faq { padding-top: 0; }
  .closing-content h2 { font-size: 28px; }
  .footer-main { gap: 28px; }
}
@media (max-width: 820px) {
  .lp-nav { min-height: 73px; }
  .lp-menu-toggle { display: block; }
  .lp-navigation { display: none; position: absolute; top: 73px; left: 0; right: 0; padding: 15px 32px 25px; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 10px 15px rgba(20,29,45,.05); }
  .menu-open .lp-navigation { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .lp-navigation a { padding-block: 13px; display: block; }
  .lp-navigation .lp-button { display: inline-flex; margin-top: 12px; }
  .landing-page:not(.lp-ready) .lp-nav { flex-wrap: wrap; padding-block: 20px; gap: 16px; }
  .landing-page:not(.lp-ready) .lp-menu-toggle { display: none; }
  .landing-page:not(.lp-ready) .lp-navigation { display: flex; flex-wrap: wrap; position: static; padding: 0; border: 0; box-shadow: none; gap: 12px 22px; }
}
@media (max-width: 700px) {
  .toolkit-row, .toolkit-row-edit, .toolkit-compare { grid-template-columns: 1fr; gap: 27px; }
  .toolkit-row-edit .toolkit-copy { grid-column: 1; grid-row: 1; }
  .toolkit-row-edit .toolkit-figure { grid-column: 1; grid-row: 2; }
  .toolkit-copy > p:not(.toolkit-label) { max-width: 50ch; }
  .toolkit-copy h3 { font-size: 34px; }
  .toolkit-copy .lp-checks { font-size: 12px; }
}
@media (max-width: 640px) {
  html { scroll-padding-top: 86px; }
  .lp-container { width: calc(100% - 40px); }
  .lp-brand { font-size: 20px; }
  .lp-brand img { width: 32px; height: 32px; }
  .lp-kicker { font-size: 9px; letter-spacing: .07em; }
  .lp-section { padding-block: 55px; }
  .lp-section-head { display: block; margin-bottom: 26px; }
  .lp-section-head h2, .lp-heading { font-size: 32px; }
  .lp-section-head .lp-kicker { margin-bottom: 13px; }
  .lp-section-head > p { margin-top: 17px; max-width: 48ch; font-size: 14px; }
  .section-number { display: none; }
  .toolkit-walkthrough { gap: 22px; }
  .toolkit-row { padding-top: 12px; padding-bottom: 20px; }
  .toolkit-row + .toolkit-row { padding-top: 33px; }
  .toolkit-copy h3 { font-size: 31px; margin-top: 16px; }
  .toolkit-copy > p:not(.toolkit-label) { font-size: 14px; margin-top: 15px; }
  .toolkit-copy .lp-checks { margin-block: 18px; }
  .toolkit-copy .lp-text-link { font-size: 12px; }
  .toolkit-stage { padding: 12px; border-radius: 8px; }
  .toolkit-compare { padding: 25px 22px; }
  .toolkit-compare .toolkit-copy h3 { font-size: 38px; }
  .toolkit-tags { font-size: 9px; gap: 6px; }
  .toolkit-tags li { padding: 7px 9px; }
  .product-figure figcaption { font-size: 8px; }
  .capture-zoom { bottom: 29px; padding: 5px 8px; min-height: 29px; font-size: 10px; }
  .product-footer { display: block; font-size: 10px; line-height: 1.8; padding-top: 17px; }
  .product-footer a { display: inline-block; margin-top: 6px; }
  .dbc-details { margin-top: 34px; }
  .details-heading h3 { font-size: 24px; max-width: 22ch; }
  .details-heading p { font-size: 13px; }
  .details-grid { grid-template-columns: 1fr; padding: 0 22px; margin-top: 20px; }
  .detail-card { padding: 23px 0; display: grid; grid-template-columns: 26px minmax(0,1fr); column-gap: 16px; align-items: start; }
  .detail-card + .detail-card { border-left: 0; border-top: 1px solid var(--line); }
  .detail-card > .lp-icon { grid-row: 1 / 4; margin-top: 1px; margin-bottom: 0; }
  .detail-card h4 { font-size: 18px; }
  .detail-card p { grid-column: 2; margin: 9px 0 12px; }
  .detail-card .lp-text-link { grid-column: 2; justify-self: start; }
  .lp-extension { padding-top: 0; }
  .extension-grid { grid-template-columns: 1fr; gap: 20px; }
  .extension-card { padding: 25px 23px; }
  .extension-card h3 { font-size: 27px; }
  .extension-card > p { font-size: 14px; }
  .translation-column { padding: 18px 15px; }
  .translation-column dd { font-size: 13px; }
  .translation-preserved { font-size: 8px; }
  .demo-bar { font-size: 8px; }
  .extension-card .lp-checks { font-size: 12px; }
  .extension-note { font-size: 10px; }
  .lp-engineering { padding-block: 43px; }
  .engineering-intro { display: block; padding-bottom: 23px; }
  .engineering-intro .lp-kicker { max-width: none; margin-bottom: 14px; }
  .engineering-intro h2 { font-size: 28px; }
  .engineering-grid { grid-template-columns: 1fr; gap: 25px; margin-top: 26px; }
  .engineering-item { display: grid; grid-template-columns: 28px 1fr; column-gap: 17px; }
  .engineering-item .lp-icon { grid-row: 1 / 3; margin: 2px 0 0; }
  .engineering-item h3 { font-size: 17px; margin-bottom: 7px; }
  .engineering-item p { font-size: 12px; }
  .engineering-note { font-size: 9px; }
  .price-layout { grid-template-columns: 1fr; }
  .price-inclusions { padding: 26px; }
  .price-inclusions h3 { font-size: 23px; }
  .price-features { grid-template-columns: 1fr 1fr; gap: 17px; }
  .price-features li { font-size: 11px; gap: 7px; }
  .price-features .lp-icon { width: 17px; height: 17px; }
  .price-card { padding: 29px 26px; border-left: 0; border-top: 1px solid #d1d6e0; }
  .price-amount strong { font-size: 64px; }
  .lp-downloads { padding-top: 0; padding-bottom: 45px; }
  .download-heading { display: block; margin-bottom: 20px; }
  .download-copy .lp-heading { font-size: 27px; }
  .download-copy > p:not(.lp-kicker) { font-size: 14px; margin-top: 11px; }
  .download-copy .lp-kicker { margin-bottom: 10px; }
  .download-release { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 11px; border-left: 0; padding-left: 0; margin-top: 14px; }
  .download-release strong { font-size: 18px; }
  .download-release span { font-size: 10px; }
  .download-grid { grid-template-columns: 1fr; gap: 14px; }
  .download-item { padding: 20px; }
  .download-platform-icon { width: 42px; height: 42px; }
  .download-platform-icon .lp-icon { width: 24px; height: 24px; }
  .download-item h3 { font-size: 23px; }
  .download-item-head p { font-size: 10px; }
  .download-description { font-size: 14px; margin-block: 14px 16px; }
  .download-options { padding-top: 16px; gap: 8px; }
  .download-options .lp-button { flex-basis: 130px; font-size: 13px; min-height: 44px; padding-inline: 11px; gap: 8px; }
  .download-options .lp-button .lp-icon { width: 16px; height: 16px; }
  .download-help { align-items: start; flex-direction: column; gap: 10px; font-size: 13px; }
  .download-help p .lp-text-link { margin-left: 0; }
  .lp-faq { padding-top: 0; }
  .faq-layout { grid-template-columns: 1fr; gap: 28px; }
  .faq-heading > p:not(.lp-kicker) { margin: 14px 0 17px; }
  .faq-items summary { font-size: 13px; padding-block: 19px; }
  .faq-items details p { font-size: 12px; }
  .lp-resources { padding-bottom: 42px; }
  .resource-band { grid-template-columns: 1fr; gap: 24px; padding-top: 26px; }
  .resource-item + .resource-item { padding-left: 0; border-left: 0; }
  .resource-item p { font-size: 11px; }
  .lp-closing { padding-block: 34px; }
  .closing-content { flex-direction: column; align-items: start; gap: 23px; }
  .closing-content h2 { font-size: 28px; }
  .closing-content p { font-size: 12px; }
  .closing-content .lp-button { min-height: 47px; font-size: 13px; }
  .lp-footer { padding-top: 36px; }
  .footer-main { grid-template-columns: repeat(3,1fr); column-gap: 15px; row-gap: 29px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand p { max-width: 40ch; }
  .footer-column h2 { font-size: 9px; }
  .footer-column ul { font-size: 10px; }
  .footer-bottom { flex-direction: column; gap: 13px; margin-top: 29px; font-size: 8px; }
  .footer-bottom-links { flex-wrap: wrap; gap: 16px; }
  .capture-dialog { padding: 12px; }
  .demo-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); padding: 12px; }
  .demo-dialog-top { gap: 12px; margin-bottom: 12px; }
  .demo-dialog-top h2 { font-size: 18px; }
  .demo-dialog-footer { margin-top: 10px; font-size: 12px; }
  .demo-dialog-footer .lp-text-link { font-size: 12px; }
}
@media (max-width: 360px) {
  .lp-container { width: calc(100% - 32px); }
  .details-grid { padding-inline: 17px; }
  .extension-card { padding: 23px 18px; }
  .translation-column { padding-inline: 11px; }
  .translation-preserved { flex-wrap: wrap; }
  .price-inclusions { padding: 23px; }
  .price-features { grid-template-columns: 1fr; gap: 12px; }
  .download-item { padding-inline: 20px; }
}
/* The original centred hero and laptop composition, in the landing-page palette. */
.lp-hero { position: relative; padding: 58px 0 45px; overflow: clip; isolation: isolate; }
.lp-hero::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 38px; width: min(1050px,92vw); height: 610px; border-radius: 999px; background: radial-gradient(circle at 50% 18%, rgba(22,89,183,.22), transparent 40%), radial-gradient(circle at 24% 42%, rgba(88,166,255,.2), transparent 35%), radial-gradient(circle at 76% 46%, rgba(92,124,250,.18), transparent 38%); filter: blur(22px); transform: translateX(-50%); pointer-events: none; }
.lp-hero::after { content: ''; position: absolute; z-index: -2; inset: 0; background-image: linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(#0009, transparent 62%); pointer-events: none; }
.lp-hero-stack { display: grid; justify-items: center; gap: 36px; }
.lp-hero-copy { display: grid; justify-items: center; text-align: center; width: 100%; min-width: 0; max-width: 1060px; }
.lp-hero h1 { font-size: clamp(45px, 5.4vw, 72px); line-height: 1.06; letter-spacing: -.06em; margin: 22px 0; text-wrap: balance; }
.lp-hero h1 span { color: var(--ink); }
.lp-hero-summary { max-width: 720px; color: var(--muted); font-size: 17px; line-height: 1.75; text-wrap: pretty; }
.lp-hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 25px; }
.lp-button-demo .lp-icon { width: 20px; height: 20px; color: var(--accent); }
.lp-hero-explore { margin-top: 12px; }
.lp-hero-laptop { position: relative; width: min(1000px, calc(100% - 48px)); margin-top: 7px; }
.lp-hero-laptop::before { content: ""; position: absolute; z-index: -1; inset: -55px -65px -20px; background: radial-gradient(ellipse at 50% 35%, rgba(22,89,183,.08), transparent 70%); pointer-events: none; }
.lp-laptop-screen { position: relative; padding: 14px 12px 13px; border: 1px solid #334155; border-radius: 18px 18px 9px 9px; background: linear-gradient(#111827, #05070b); box-shadow: 0 24px 65px rgba(15,23,42,.17), inset 0 0 0 1px rgba(255,255,255,.14); }
.lp-laptop-screen::before { content: ''; position: absolute; inset: 4px 5px auto; height: 16px; border-radius: 13px 13px 0 0; background: linear-gradient(rgba(255,255,255,.09), transparent); pointer-events: none; }
.lp-laptop-camera { position: absolute; z-index: 1; left: calc(50% - 2px); top: 5px; width: 4px; height: 4px; border-radius: 50%; background: #767c87; box-shadow: 0 0 0 2px #151b25; }
.lp-laptop-screen img { width: 100%; border-radius: 5px; border: 1px solid rgba(255,255,255,.1); }
.lp-laptop-base { position: relative; width: calc(100% + 48px); margin: -1px -24px 0; height: 23px; border-radius: 0 0 40px 40px; background: linear-gradient(#e5e7eb, #b5bac2 60%, #898f9a); box-shadow: 0 15px 30px rgba(27,37,54,.12), inset 0 1px rgba(255,255,255,.85); }
.lp-laptop-base::before { content: ''; position: absolute; left: 42%; top: 1px; width: 16%; height: 7px; border-radius: 0 0 9px 9px; background: #a4aab5; }
.lp-laptop-base span { position: absolute; left: 8%; right: 8%; bottom: 0; height: 1px; background: rgba(24,33,49,.15); }
.lp-laptop-fade { position: absolute; z-index: 2; left: -26px; right: -26px; bottom: -14px; height: 26%; background: linear-gradient(transparent, rgba(244,245,247,.75) 72%, var(--paper)); pointer-events: none; }
.lp-hero-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 27px; color: #676e7b; font-size: 11px; line-height: 1.5; margin-top: -8px; }
.lp-hero-stats span { display: inline-flex; align-items: center; gap: 8px; }
.lp-hero-stats span::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #7d889c; }
@media (max-width: 900px) {
  .lp-hero { padding-top: 44px; padding-bottom: 29px; }
  .lp-hero-stack { gap: 31px; }
  .lp-hero h1 { font-size: clamp(43px, 6.4vw, 58px); }
  .lp-hero-summary { max-width: 650px; font-size: 16px; }
  .lp-hero-laptop { width: calc(100% - 30px); }
  .lp-laptop-screen { padding: 11px 10px; border-radius: 14px 14px 8px 8px; }
  .lp-laptop-base { width: calc(100% + 30px); margin-inline: -15px; height: 19px; }
  .lp-laptop-fade { left: -16px; right: -16px; }
  .lp-hero-stats { gap: 10px 20px; font-size: 10px; }
}
@media (max-width: 640px) {
  .lp-hero { padding-top: 35px; padding-bottom: 25px; }
  .lp-hero-stack { gap: 27px; }
  .lp-hero h1 { font-size: clamp(38px, 9.8vw, 55px); line-height: 1.08; margin: 20px 0; }
  .lp-hero-summary { font-size: 14px; line-height: 1.75; }
  .lp-hero-actions { gap: 10px; margin-top: 23px; }
  .lp-hero-actions .lp-button { min-height: 47px; padding-inline: 15px; font-size: 12px; }
  .lp-hero-laptop { width: calc(100% - 20px); margin-top: 0; }
  .lp-laptop-screen { padding: 8px 6px 7px; border-radius: 10px 10px 6px 6px; }
  .lp-laptop-screen img { border-radius: 3px; }
  .lp-laptop-screen::before, .lp-laptop-camera { display: none; }
  .lp-laptop-base { width: calc(100% + 20px); margin-inline: -10px; height: 13px; border-radius: 0 0 23px 23px; }
  .lp-laptop-base::before { height: 4px; }
  .lp-laptop-fade { left: -11px; right: -11px; bottom: -8px; height: 24%; }
  .lp-hero-stats { max-width: 350px; margin-top: 0; gap: 9px 14px; font-size: 9px; }
}
@media (max-width: 360px) {
  .lp-hero h1 { font-size: 36px; }
  .lp-hero-actions { flex-direction: column; width: 100%; }
  .lp-hero-actions .lp-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
