.notify-product { --notify-gold: #e6bf70; --notify-muted: #b4bdce; background: #0a0e17; color: #f6f7fa; font-family: inherit; }
.notify-product * { box-sizing: border-box; }
.notify-product [hidden] { display: none !important; }
.notify-wrap { max-width: 1200px; margin: auto; padding: 0 28px; }
.notify-product a:focus-visible, .notify-product button:focus-visible, .notify-product summary:focus-visible { outline: 3px solid #e6bf70; outline-offset: 5px; border-radius: 4px; }
.notify-hero { padding: 42px 0 0; background: radial-gradient(ellipse at 83% 30%, #27354880, transparent 56%), linear-gradient(135deg, #141b27, #0a0e17 70%); border-bottom: 1px solid #293345; }
.notify-back { display: inline-block; color: var(--notify-muted); font-size: 13px; padding: 10px 0; }
.notify-back:hover, .notify-text-link:hover { color: white; }
.notify-hero-grid { display: grid; grid-template-columns: 1.12fr 1fr; align-items: center; gap: 68px; padding: 56px 0 70px; }
.notify-eyebrow { color: var(--notify-gold); font: 600 11px/1.6 ui-monospace, monospace; letter-spacing: .13em; text-transform: uppercase; }
.notify-product h1 { margin: 24px 0; font-size: clamp(42px, 4.7vw, 66px); line-height: 1.06; letter-spacing: -.045em; font-weight: 750; }
.notify-product h1 span { color: var(--notify-gold); }
.notify-lead { color: #c8cfdb; font-size: 19px; line-height: 1.75; max-width: 520px; }
.notify-actions { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; margin: 30px 0 20px; }
.notify-button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; padding: 15px 20px; border: 1px solid #e6bf70; border-radius: 5px; background: #e6bf70; color: #111827; font-size: 14px; line-height: 1.5; font-weight: 750; text-decoration: none; }
.notify-button:hover { background: #f3d9a8; }
.notify-text-link { display: inline-block; color: var(--notify-gold); font-size: 14px; line-height: 1.6; padding: 8px 0; text-decoration: underline; text-underline-offset: 5px; }
.notify-small { font-size: 12px; line-height: 1.7; color: var(--notify-muted); }
.notify-dispatch { margin: 0; border: 1px solid #3a4456; border-radius: 16px; padding: 24px; background: #111925; box-shadow: 0 28px 70px #0005; }
.notify-dispatch figcaption { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 26px; align-items: center; }
.notify-example-label { font-size: 10px; color: var(--notify-muted); text-align: right; }
.notify-event, .notify-engine { display: flex; gap: 16px; align-items: center; padding: 18px; border: 1px solid #344154; border-radius: 7px; background: #182130; }
.notify-event strong, .notify-engine strong { display: block; font-size: 13px; }
.notify-icon { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 8px; background: #293448; color: var(--notify-gold); font-weight: 700; }
.notify-event-id { margin-left: auto; color: #98a4b8; font: 11px ui-monospace, monospace; }
.notify-engine { border-color: #8b754a; background: #211f1b; }
.notify-engine p { font-size: 11px; line-height: 1.6; color: #cbbfaa; margin-top: 3px; }
.notify-connector { height: 22px; width: 1px; margin: 0 0 0 35px; background: #a88a52; }
.notify-envelope { background: #f6f3ec; border-radius: 7px; padding: 20px; color: #222b3a; }
.notify-envelope-top { display: flex; justify-content: space-between; color: #566073; font-size: 11px; padding-bottom: 16px; border-bottom: 1px solid #d5d3cd; margin-bottom: 18px; }
.notify-envelope strong { display: block; font-size: 16px; }
.notify-envelope p { color: #546071; font-size: 13px; line-height: 1.7; margin: 10px 0 18px; }
.notify-status { display: inline-block; font: 10px/1.5 ui-monospace, monospace; color: #246144; border: 1px solid #b9cdbc; border-radius: 20px; padding: 5px 9px; }
.notify-caption { color: #a8b3c5; font-size: 11px; line-height: 1.65; margin-top: 18px; }
.notify-foundations { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; border-top: 1px solid #303948; padding: 24px 0; font-size: 12px; color: #c0c9d7; }
.notify-foundations span::before { content: '+'; color: var(--notify-gold); margin-right: 10px; }
.notify-section { padding: 88px 0; scroll-margin-top: 100px; }
.notify-section-alt { background: #101722; border-block: 1px solid #283244; }
.notify-split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.notify-product h2 { font-size: clamp(30px, 3.2vw, 43px); font-weight: 650; line-height: 1.17; letter-spacing: -.035em; margin: 16px 0 22px; }
.notify-product h3 { font-size: 22px; line-height: 1.3; font-weight: 650; letter-spacing: -.02em; }
.notify-body, .notify-intro { color: var(--notify-muted); font-size: 16px; line-height: 1.85; margin: 0 0 18px; max-width: 650px; }
.notify-example-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0; }
.notify-example-controls button { min-height: 46px; border: 1px solid #445067; border-radius: 5px; padding: 12px 18px; color: #c3cddd; background: transparent; font-size: 13px; cursor: pointer; }
.notify-example-controls button[aria-pressed="true"] { color: #111827; background: #e6bf70; border-color: #e6bf70; }
.notify-example-panel { display: grid; grid-template-columns: 1fr 1.1fr; gap: 70px; align-items: center; border-top: 1px solid #30394a; padding-top: 30px; margin-top: 25px; }
.notify-number { display: block; color: var(--notify-gold); font: 12px ui-monospace, monospace; margin-bottom: 18px; }
.notify-example-panel p, .notify-feature p { color: var(--notify-muted); font-size: 15px; line-height: 1.8; margin-top: 16px; }
.notify-message { background: #f5f2eb; color: #182234; border-radius: 9px; padding: 34px; border-top: 4px solid #e6bf70; min-height: 280px; }
.notify-message-label { color: #596475; font: 10px/1.6 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .06em; }
.notify-message h4 { font-size: 22px; line-height: 1.4; font-weight: 700; margin-top: 24px; }
.notify-message p { color: #4e5b6d; font-size: 14px; }
.notify-message-footer { margin-top: 24px; padding-top: 15px; border-top: 1px solid #d9d8d1; color: #566173; font-size: 11px; line-height: 1.65; }
.notify-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 45px; }
.notify-feature { border-top: 1px solid #475164; padding-top: 24px; }
.notify-feature h3 { font-size: 19px; }
.notify-feature p { font-size: 14px; }
.notify-boundary { border-left: 2px solid #b08e52; padding: 8px 0 8px 24px; margin-top: 54px; max-width: 900px; }
.notify-boundary strong { font-size: 15px; }
.notify-boundary p { color: var(--notify-muted); font-size: 14px; line-height: 1.8; margin-top: 10px; }
.notify-faq details { border-bottom: 1px solid #3b465a; }
.notify-faq summary { cursor: pointer; padding: 20px 0; font-size: 15px; font-weight: 600; }
.notify-faq p { color: var(--notify-muted); font-size: 14px; line-height: 1.8; padding-bottom: 22px; }
.notify-cta { text-align: center; background: radial-gradient(ellipse at center bottom, #4c3c2040, transparent 70%); }
.notify-cta .notify-intro { margin: 0 auto 30px; max-width: 560px; }
.notify-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 1000px) { .notify-hero-grid { gap: 30px; } .notify-feature-grid { grid-template-columns: repeat(2, 1fr); } .notify-split { gap: 40px; } }
@media (max-width: 760px) { .notify-wrap { padding: 0 22px; } .notify-hero { padding-top: 24px; } .notify-hero-grid, .notify-split, .notify-example-panel { grid-template-columns: 1fr; gap: 34px; } .notify-hero-grid { padding: 32px 0 40px; } .notify-dispatch { padding: 20px; } .notify-foundations { grid-template-columns: 1fr 1fr; font-size: 11px; } .notify-section { padding: 58px 0; } .notify-lead { font-size: 17px; } .notify-message { padding: 25px; } .notify-example-controls { gap: 8px; } .notify-example-controls button { flex: 1 1 auto; } }
@media (max-width: 400px) { .notify-feature-grid { grid-template-columns: 1fr; } .notify-dispatch { padding: 15px; } .notify-event, .notify-engine { padding: 13px; gap: 10px; } .notify-button { width: 100%; font-size: 13px; } }