/* Landing-only layout and interactive examples. Shared chrome lives next door. */
.marketing-landing { background: #fff; }
.marketing-landing :where(main) h1, .marketing-landing :where(main) h2, .marketing-landing :where(main) h3 { line-height: 1.15; letter-spacing: -.035em; text-wrap: balance; }
.marketing-landing :where(main) h2 { font-size: clamp(28px, 3.2vw, 40px); margin: 0 0 18px; }
.marketing-landing :where(main) h3 { font-size: 21px; margin: 16px 0 12px; }
.marketing-landing :where(main) p { color: #475569; }
.m-eyebrow { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 750; color: #087f83 !important; margin: 0 0 20px; }
.m-lead { font-size: 18px; max-width: 47ch; line-height: 1.7; }
.m-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.m-micro { font-size: 12px; line-height: 1.7; margin-top: 14px; }
.m-text-link { display: inline-block; margin-top: 18px; font-size: 14px; font-weight: 700; color: #087f83; text-underline-offset: 5px; }
.landing-hero { background: radial-gradient(ellipse at 85% 25%, #e5f5f4 0, transparent 55%), #f7f9fc; padding-top: 64px; }
.landing-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center; gap: 54px; padding-bottom: 56px; }
.landing-hero h1 { font-size: clamp(38px, 4.2vw, 60px); line-height: 1.02; letter-spacing: -.055em; margin: 0 0 24px; max-width: 18ch; }
.landing-preview { margin: 0; border: 1px solid #d8e3e7; border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 24px 60px #0b173014; }
.preview-top { display: flex; align-items: center; gap: 8px; padding: 13px 18px; font-size: 10px; letter-spacing: .1em; color: #475569; border-bottom: 1px solid #e5eaf0; }
.preview-dot { width: 7px; height: 7px; background: #087f83; border-radius: 50%; }
.landing-preview img { width: 100%; height: auto; }
.landing-preview figcaption { padding: 12px 18px; font-size: 11px; color: #475569; }
.landing-proof { padding-block: 28px; border-top: 1px solid #dbe4ec; display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center; }
.landing-proof h2 { font-size: 17px; margin-bottom: 8px; letter-spacing: -.02em; }
.landing-proof p { font-size: 12px; margin: 0; max-width: 65ch; }
.landing-proof ul { display: flex; flex-wrap: wrap; gap: 12px 24px; padding: 0; margin: 0; list-style: none; font-size: 12px; font-weight: 650; }
.landing-proof li span { color: #087f83; }
.m-section { padding-block: 84px; }
.m-tinted { background: #f7f9fc; }
.m-heading { max-width: 680px; margin-bottom: 40px; }
.m-heading p:not(.m-eyebrow) { margin: 0; }
.m-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.m-benefits article { border-top: 1px solid #dbe4ec; padding-top: 24px; }
.m-benefits p { font-size: 15px; margin: 0; }
.m-icon { display: inline-flex; color: #087f83; }
.demo-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
.demo-controls label { display: block; font-weight: 650; font-size: 14px; margin-bottom: 8px; }
.demo-controls select { width: 100%; padding: 12px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; color: #0b1730; }
.demo-steps { list-style: none; padding: 0; margin: 22px 0 0; }
.demo-steps li { margin-bottom: 10px; }
.demo-steps button { width: 100%; padding: 15px 18px; background: transparent; border: 1px solid #dbe4ec; border-radius: 8px; text-align: left; display: flex; align-items: center; gap: 16px; color: #475569; font-weight: 650; }
.demo-steps button[aria-current] { background: #e5f3f2; border-color: #087f83; color: #075b5e; }
.demo-steps span { font-size: 12px; font-variant-numeric: tabular-nums; }
.demo-steps p { font-size: 13px; }
[data-enhanced] .demo-steps p { display: none; }
.demo-panel { background: #fff; border: 1px solid #dbe4ec; border-radius: 16px; padding: 30px; box-shadow: 0 12px 32px #0b173009; }
.demo-panel-top { display: flex; justify-content: space-between; gap: 20px; color: #087f83; }
.demo-panel dl { margin: 6px 0 24px; }
.demo-panel dl div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding-block: 14px; border-bottom: 1px solid #edf1f5; }
.demo-panel dt { color: #64748b; font-size: 12px; }
.demo-panel dd { margin: 0; font-size: 14px; font-weight: 650; }
.demo-status { display: inline-block; background: #e5f3f2; color: #075b5e; padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: 650; }
.demo-update { min-height: 155px; }
.demo-update p { font-size: 14px; }
.demo-panel .btn { width: 100%; }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.product-grid figure { margin: 0; border: 1px solid #dbe4ec; border-radius: 12px; overflow: hidden; }
.product-grid img { width: 100%; height: auto; }
.product-grid figcaption { padding: 16px; display: grid; gap: 6px; font-size: 14px; }
.product-grid figcaption span { color: #087f83; font-size: 12px; }
.m-spaces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.m-spaces a { display: grid; gap: 12px; align-content: start; padding: 20px; background: #fff; border: 1px solid #dbe4ec; border-radius: 10px; text-decoration: none; }
.m-spaces a:hover { border-color: #087f83; }
.m-spaces strong { font-size: 14px; }
.m-spaces a > span:last-child { font-size: 12px; color: #475569; }
.m-how { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.m-how > li > span { font-size: 13px; color: #087f83; font-weight: 700; }
.m-how p { font-size: 15px; }
.m-integrations { display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px; margin-top: 64px; padding-top: 48px; border-top: 1px solid #dbe4ec; }
.m-integrations h2 { font-size: 28px; }
.m-integrations ul { display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 12px; padding: 0; list-style: none; }
.m-integrations li { border: 1px solid #dbe4ec; padding: 16px; border-radius: 8px; font-size: 14px; text-align: center; }
.m-calculator, .m-beta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.calc-card { background: #fff; padding: 28px; border: 1px solid #dbe4ec; border-radius: 14px; }
.calc-fields { display: grid; gap: 18px; }
.calc-fields label { font-size: 13px; font-weight: 650; }
.calc-fields input { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; border: 1px solid #94a3b8; border-radius: 6px; background: #fff; color: #0b1730; }
.calc-fields input[aria-invalid=true] { border-color: #b42318; }
.calc-card output { display: block; font-size: 23px; font-weight: 700; color: #087f83; line-height: 1.4; margin-top: 24px; }
.m-beta ul { padding-left: 20px; color: #475569; font-size: 14px; }
.m-beta li { margin-bottom: 12px; }
.beta-price { background: #f0f7f7; border-radius: 16px; padding: 40px; display: grid; justify-items: start; gap: 10px; }
.beta-price > strong { font-size: 72px; letter-spacing: -.06em; line-height: 1; }
.beta-price > span { color: #475569; margin-bottom: 20px; }
.m-faq { display: grid; grid-template-columns: .85fr 1.4fr; gap: 64px; }
.m-faq details { border-bottom: 1px solid #dbe4ec; padding-block: 18px; }
.m-faq summary { font-weight: 650; font-size: 15px; padding-right: 12px; }
.m-faq details p { font-size: 14px; }
.m-resources { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.m-resources h2 { font-size: 26px; margin: 0; }
.m-resources a { margin: 0; }
.m-final { padding-block: 72px; background: #0f253e; color: #fff; }
.m-final h2 { max-width: 20ch; font-size: clamp(32px, 4vw, 48px); }
.m-final p { color: #cbd5e1; max-width: 70ch; }
@media (max-width: 1000px) {
    .landing-hero-grid { gap: 28px; }
    .landing-hero h1 { font-size: 48px; }
    .m-spaces { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .m-calculator, .m-beta, .m-faq { gap: 32px; }
}
@media (max-width: 760px) {
    .landing-hero { padding-top: 36px; }
    .landing-hero-grid { grid-template-columns: 1fr; padding-bottom: 32px; gap: 32px; }
    .landing-hero h1 { font-size: clamp(40px, 10vw, 54px); max-width: 13ch; margin-bottom: 18px; }
    .m-lead { font-size: 16px; }
    .m-eyebrow { margin-bottom: 14px; }
    .m-actions { margin-top: 22px; }
    .landing-proof, .m-benefits, .demo-layout, .m-how, .m-integrations, .m-calculator, .m-beta, .m-faq { grid-template-columns: 1fr; gap: 28px; }
    .landing-proof { padding-block: 24px; gap: 18px; }
    .m-section { padding-block: 52px; }
    .m-heading { margin-bottom: 28px; }
    .m-spaces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .m-spaces a { padding: 16px; }
    .product-grid { grid-template-columns: 1fr; }
    .demo-panel, .calc-card { padding: 22px; }
    .demo-update { min-height: 160px; }
    .m-integrations { margin-top: 36px; padding-top: 32px; }
    .beta-price { padding: 28px; }
}
@media (max-width: 380px) {
    .m-actions .btn { width: 100%; }
    .m-spaces { grid-template-columns: 1fr; }
}
/* Long localized nouns must not enlarge grid tracks on narrow phones. */
.marketing-landing { overflow-wrap: anywhere; }
.m-calculator > *, .m-faq > *, .demo-layout > * { min-width: 0; }