.notifications-page [hidden] { display:none!important; }
.notifications-page button:focus-visible { outline:3px solid #155fa0; outline-offset:-4px; }
.notifications-channel-strip { display:flex; flex-wrap:wrap; gap:22px; margin-top:32px; color:#52677d; font-size:.82rem; }
.notifications-channel-strip span { display:flex; gap:8px; align-items:center; }
.notifications-channel-strip i { color:#1172b7; font-size:1.15rem; }
.notifications-hero-visual { text-align:center; }
.notifications-hero-scene { position:relative; min-height:610px; padding:54px 0 36px; isolation:isolate; }
.notifications-hero-orbit { position:absolute; z-index:-1; inset:100px 0 50px; border:1px solid #c7deef; border-radius:50%; background:radial-gradient(ellipse,#e2f1fc,#eef6ff 70%); }
.notifications-phone { width:320px; max-width:100%; margin:auto; border:8px solid #193449; border-radius:38px; background:#edf3f1; box-shadow:0 24px 52px #173b561c; overflow:hidden; text-align:left; }
.notifications-phone-status { display:flex; justify-content:space-between; padding:13px 18px 9px; color:#193449; background:#fff; font-size:.65rem; font-weight:700; }
.notifications-phone-status span:last-child { display:flex; gap:5px; }
.notifications-phone-header { display:flex; gap:10px; align-items:center; background:#fff; padding:12px 14px 17px; border-bottom:1px solid #e0e8e9; }
.notifications-avatar { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:#e3f1eb; color:#28745b; font-size:1.1rem; flex-shrink:0; }
.notifications-phone-header strong,.notifications-phone-header div>span { display:block; }
.notifications-phone-header strong { font-size:.83rem; }
.notifications-phone-header div>span { color:#647989; font-size:.64rem; margin-top:3px; }
.notifications-phone-content { min-height:365px; padding:18px 14px 28px; background:radial-gradient(#d4e3dd 1px,transparent 1px); background-size:18px 18px; }
.notifications-date { display:table; margin:0 auto 16px; background:#fff9; padding:4px 10px; border-radius:5px; color:#52677d; font-size:.6rem; }
.notifications-message { border-radius:0 10px 10px; border:1px solid #dce7e2; padding:16px 14px 0; background:#fff; box-shadow:0 3px 9px #19344908; }
.notifications-message-label { color:#2b6d56; font-size:.63rem; font-weight:700; letter-spacing:.025em; display:block; margin-bottom:12px; }
.notifications-page .notifications-message p { color:#233e50; font-size:.8rem; line-height:1.7; white-space:pre-line; margin:0 0 10px; }
.notifications-message-time { display:block; text-align:right; color:#758895; font-size:.58rem; margin:8px 0; }
.notifications-message-action { border-top:1px solid #e1e8e9; margin:0 -14px; padding:12px 9px; color:#116b8b; text-align:center; font-weight:600; font-size:.74rem; }
.notifications-phone-home { height:23px; position:relative; }
.notifications-phone-home::after { content:''; display:block; position:absolute; width:95px; height:4px; border-radius:3px; background:#193449; bottom:8px; left:50%; transform:translateX(-50%); }
.notifications-hero-event,.notifications-hero-result { position:absolute; z-index:1; text-align:left; display:flex; align-items:center; gap:12px; border:1px solid #d4e2ed; border-radius:12px; background:#fff; box-shadow:0 14px 32px #173b5612; padding:16px 18px; }
.notifications-hero-event { left:0; top:8px; }
.notifications-hero-event>span { width:38px; height:38px; border-radius:10px; background:#eaf4ff; color:#1172b7; display:grid; place-items:center; font-size:1.25rem; }
.notifications-hero-event small { display:block; letter-spacing:.1em; font-size:.55rem; color:#5e7a8f; margin-bottom:5px; }
.notifications-hero-event strong { display:block; font-size:.85rem; }
.notifications-hero-event p { font-size:.65rem; margin:4px 0 0; color:#647989; }
.notifications-hero-event>i { color:#28745b; font-size:1.15rem; margin-left:16px; }
.notifications-hero-result { right:0; bottom:24px; }
.notifications-hero-result>i { color:#1172b7; font-size:1.4rem; }
.notifications-hero-result strong,.notifications-hero-result span { display:block; }
.notifications-hero-result strong { font-size:.82rem; }
.notifications-hero-result span { color:#647989; font-size:.66rem; margin-top:4px; }
.notifications-demo { border:1px solid #d7e2ed; border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 16px 48px #173b5608; }
.notifications-stage-controls { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--solution-line); }
.notifications-stage-controls button { display:flex; justify-content:center; align-items:center; gap:12px; border:0; border-bottom:3px solid transparent; background:#fff; color:#52677d; padding:22px 12px; font-size:.9rem; font-weight:650; }
.notifications-stage-controls button>i { font-size:1.3rem; }
.notifications-stage-controls button[aria-pressed=true] { background:#eff6ff; color:#155fa0; border-bottom-color:#176fcb; }
.notifications-demo-grid { display:grid; grid-template-columns:1.05fr 1fr; }
.notifications-demo-copy { padding:48px; }
.notifications-page .notifications-demo-copy h3 { font-size:1.75rem; line-height:1.25; letter-spacing:-.025em; }
.notifications-page .notifications-demo-copy>p { font-size:.95rem; }
.notifications-page .notifications-demo-copy>.solution-eyebrow { font-size:.7rem; }
.notifications-channel-controls { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:16px 24px; border-bottom:1px solid var(--solution-line); justify-content:center; }
.notifications-channel-controls button { display:flex; align-items:center; gap:8px; padding:10px 13px; border:1px solid #cddce8; border-radius:6px; background:#fff; font-size:.8rem; color:#52677d; }
.notifications-channel-controls button[aria-pressed=true] { border-color:#176fcb; background:#edf5ff; color:#155fa0; }
.notifications-rule { border:1px solid #dce6ee; border-radius:8px; padding:20px; }
.notifications-rule>span { color:#698093; font-size:.63rem; letter-spacing:.1em; font-weight:700; }
.notifications-rule dl { margin:10px 0 0; }
.notifications-rule dl>div { display:flex; justify-content:space-between; gap:15px; margin-top:10px; font-size:.8rem; }
.notifications-rule dt { color:#647989; font-weight:400; }
.notifications-rule dd { color:#193449; margin:0; text-align:right; font-weight:600; }
.notifications-page .notifications-demo-copy>.notifications-channel-note { font-size:.76rem; margin:14px 0 22px; }
.notifications-benefit { display:flex; align-items:flex-start; gap:12px; padding:18px; border-radius:8px; background:#eff6ff; color:#345570; font-size:.84rem; line-height:1.7; }
.notifications-benefit>i { color:#1172b7; font-size:1rem; }
.notifications-phone-stage { padding:36px 28px; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at center,#e2edf8,#f4f8fc 75%); border-left:1px solid var(--solution-line); }
.notifications-phone-caption { color:#61798a; font-size:.6rem; text-align:center; line-height:1.6; margin-top:22px; }
.notifications-demo-footer { display:flex; gap:10px; align-items:flex-start; color:#647989; font-size:.75rem; line-height:1.6; padding:18px 26px; border-top:1px solid var(--solution-line); }
.notifications-email-subject { padding:0 0 16px; }
.notifications-email-subject span { font-size:.62rem; color:#647989; display:block; margin-bottom:5px; }
.notifications-email-subject strong { font-size:.95rem; line-height:1.4; display:block; }
.notifications-demo[data-channel=email] .notifications-phone { background:#fff; }
.notifications-demo[data-channel=email] .notifications-phone-content { background:#fff; }
.notifications-demo[data-channel=email] .notifications-message { border:0; box-shadow:none; padding:0; }
.notifications-demo[data-channel=email] .notifications-message-action { background:#1172b7; color:#fff; border-radius:6px; margin:16px 0 0; border:0; }
.notifications-demo[data-channel=email] .notifications-date { display:none; }
.notifications-demo[data-channel=sms] .notifications-phone-content { background:#f7f9fc; }
.notifications-demo[data-channel=sms] .notifications-message { background:#e8edf2; border:0; border-radius:16px; }
.notifications-demo[data-channel=sms] .notifications-message-action { color:#155fa0; text-decoration:underline; font-weight:400; overflow-wrap:anywhere; }
.notifications-channel-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.notifications-channel-cards article { padding:30px; border:1px solid var(--solution-line); border-radius:12px; display:flex; flex-direction:column; }
.notifications-channel-cards article>i { font-size:1.9rem; color:#1172b7; margin-bottom:24px; }
.notifications-channel-cards article:first-child>i { color:#28745b; }
.notifications-card-kicker { color:#647989; font-size:.63rem; letter-spacing:.08em; margin-bottom:12px; }
.notifications-page .notifications-channel-cards p { font-size:.95rem; }
.notifications-channel-cards article>div { border-top:1px solid #e0e8ef; padding-top:16px; margin-top:auto; color:#61798a; font-size:.77rem; line-height:1.6; }
.notifications-personalization { border:1px solid #d4e1ed; padding:26px; border-radius:14px; background:#fff; box-shadow:0 14px 36px #173b5608; }
.notifications-template { background:#f3f7fb; border:1px solid #e2eaf1; border-radius:8px; padding:24px; }
.notifications-template>span { display:block; font-size:.62rem; letter-spacing:.08em; color:#61798a; margin-bottom:20px; font-weight:650; }
.notifications-page .notifications-template p { color:#284558; font-size:.9rem; line-height:2; }
.notifications-template mark { background:#dbeafa; color:#155fa0; border-radius:3px; padding:2px 4px; }
.notifications-token { display:inline-flex; align-items:center; gap:5px; color:#155fa0; background:#dbeafa; border-radius:4px; padding:6px 9px; font-size:.78rem; }
.notifications-transform { display:flex; gap:10px; align-items:center; justify-content:center; font-size:.68rem; padding:18px 0; color:#61798a; }
.notifications-template--ready { background:white; }
.notifications-example-link { background:#1172b7; color:white; display:inline-flex; gap:10px; padding:10px 15px; border-radius:5px; font-size:.77rem; }
.notifications-page .notifications-small { font-size:.8rem; }
.notifications-history { border:1px solid #d8e3ed; border-radius:12px; overflow:hidden; }
.notifications-history-header { padding:22px 26px; background:#f6f9fc; display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.notifications-history-header>div { display:flex; gap:12px; align-items:center; }
.notifications-history-header i { color:#1172b7; font-size:1.15rem; }
.notifications-history-header strong { font-size:.9rem; }
.notifications-history-header>span { color:#647989; font-size:.72rem; }
.notifications-history-table { overflow-x:auto; }
.notifications-history table { width:100%; border-collapse:collapse; font-size:.86rem; min-width:560px; }
.notifications-history th { font-size:.72rem; font-weight:600; color:#647989; }
.notifications-history th,.notifications-history td { padding:18px 26px; border-bottom:1px solid #e0e8ef; }
.notifications-history td i { margin-right:6px; color:#61798a; }
.notifications-status { background:#eaf5ef; color:#286744; border-radius:5px; padding:5px 9px; font-size:.72rem; white-space:nowrap; }
.notifications-status--scheduled { background:#edf4ff; color:#155fa0; }
.notifications-history-note { padding:18px 26px; font-size:.75rem; color:#647989; }
.notifications-history-note i { margin-right:5px; }
.notifications-history-benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:38px; }
.notifications-history-benefits article>i { color:#1172b7; font-size:1.3rem; display:block; margin-bottom:15px; }
.notifications-page .notifications-history-benefits p { font-size:.92rem; }
.notifications-tracking-link { display:flex; gap:20px; flex-wrap:wrap; align-items:center; background:#fff; padding:28px; border:1px solid var(--solution-line); border-radius:10px; margin-top:42px; }
.notifications-tracking-link>i { font-size:1.5rem; color:#1172b7; }
.notifications-tracking-link>div { flex:1; min-width:220px; }
.notifications-tracking-link strong { font-size:.95rem; }
.notifications-page .notifications-tracking-link p { font-size:.87rem; margin:6px 0 0; }
@media(max-width:1199px) { .notifications-demo-copy { padding:30px; } .notifications-hero-event { left:0; } .notifications-hero-result { right:0; } }
@media(max-width:991px) { .notifications-hero-visual { width:100%; max-width:600px; margin:auto!important; } .notifications-demo-grid { grid-template-columns:1fr 1fr; } .notifications-demo-copy { padding:24px; } .notifications-phone-stage { padding:30px 18px; } .notifications-channel-cards { gap:16px; } .notifications-channel-cards article { padding:22px; } .notifications-page .notifications-demo-copy h3 { font-size:1.4rem; } .notifications-personalization { padding:16px; } }
@media(max-width:767px) { .notifications-hero-scene { padding-top:90px; padding-bottom:70px; min-height:0; } .notifications-hero-event { left:0; top:0; padding:12px 14px; } .notifications-hero-result { bottom:0; right:0; padding:12px 14px; } .notifications-hero-event>i { margin-left:8px; } .notifications-demo-grid { grid-template-columns:1fr; } .notifications-phone-stage { border-left:0; border-top:1px solid var(--solution-line); padding:30px 18px; order:-1; border-top:0; border-bottom:1px solid var(--solution-line); } .notifications-stage-controls button { padding:16px 10px; font-size:.74rem; gap:7px; } .notifications-stage-controls button>i { font-size:1rem; } .notifications-channel-cards,.notifications-history-benefits { grid-template-columns:1fr; } .notifications-channel-cards article { padding:26px; } .notifications-channel-strip { gap:18px; } .notifications-history-header,.notifications-history-note { padding:18px; } .notifications-history th,.notifications-history td { padding:16px 18px; } .notifications-history-benefits { gap:20px; } .notifications-tracking-link { padding:22px; gap:14px; } .notifications-tracking-link>div { min-width:0; flex-basis:calc(100% - 45px); } .notifications-demo-footer { padding:18px 22px; } }