/* AvertSignal interactive demo system — simulation theater styles.
   Owner shell: card-based business dashboard.
   Agency shell: dense portfolio tables and queues. */

.demo-page{background:#eef3f9}

/* ---------------------------------------------------------------- header -- */
.demo-presentation-mode .ds-back,
.demo-presentation-mode .demo-local-footer,
.demo-presentation-mode .ds-alert-promise,
.demo-presentation-mode .ds-controls [data-start],
.demo-presentation-mode .ds-final-actions{display:none}
.demo-presentation-mode .ds-page-head{padding-top:clamp(16px,2.4vw,28px)}
.demo-presentation-mode .ds-page-head h1{max-width:none;margin-top:8px;font-size:clamp(23px,3vw,34px)}
.demo-presentation-mode .ds-promise{margin-top:6px}
.demo-presentation-mode.demo-scenario-locked .ds-select-wrap{display:none}
.ds-page-head{padding:30px 0 8px}
.ds-back{display:inline-flex;margin-bottom:18px;color:#315a67;font-size:13px;font-weight:800;text-decoration:none}
.ds-back:hover{text-decoration:underline}
.ds-page-head h1{max-width:22ch;margin:12px 0 0;color:#081826;font:700 clamp(26px,4vw,44px)/1.06 Sora,Inter,sans-serif;letter-spacing:-.04em}
.ds-page-head h1 em{color:#008f85;font-style:normal}
.ds-promise{margin:10px 0 0;color:#41586b;font-size:15px;line-height:1.55}
.ds-area{display:block;margin-top:3px;color:#52697b;font-size:12px;font-weight:700}
.demo-identity{display:flex;flex-wrap:wrap;gap:8px}
.demo-identity span{padding:6px 9px;border:1px solid rgba(7,140,132,.5);border-radius:999px;color:#006c65;background:rgba(7,178,167,.09);font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}

/* -------------------------------------------------------------- controls -- */
.ds-controls-bar{position:sticky;top:0;z-index:40;margin-top:16px;padding:10px 0;background:rgba(238,243,249,.94);backdrop-filter:blur(7px);border-block:1px solid #d5e0eb}
.ds-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ds-controls .btn{min-height:38px;padding:7px 13px;font-size:12.5px}
.demo-page .ds-controls .btn.primary{background:#00766f;border-color:#00766f;color:#fff;box-shadow:0 8px 22px rgba(0,118,111,.18)}
.demo-page .ds-controls .btn.primary:hover{background:#006861;border-color:#006861;color:#fff}
.ds-select-wrap select{min-height:38px;max-width:min(420px,72vw);padding:7px 32px 7px 11px;border:1px solid #c3d2da;border-radius:10px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23415868' fill='none' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 11px center;color:#102d42;font:700 12.5px/1.3 Inter,sans-serif;appearance:none}
.ds-rail{display:flex;flex-wrap:wrap;gap:2px 10px;margin:0 0 0 auto;padding:0;list-style:none}
.ds-rail li{display:grid;justify-items:center;gap:3px;color:#52697b;font-size:8.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;text-align:center}
.ds-rail i{width:11px;height:11px;border:1.5px solid #b7c8d2;border-radius:50%;background:#fff;transition:background .25s,border-color .25s,box-shadow .25s}
.ds-rail li.is-active{color:#315a67}
.ds-rail li.is-active i{border-color:#008f85;background:#8ee4db}
.ds-rail li.is-current i{box-shadow:0 0 0 4px rgba(7,178,167,.18)}
.ds-setup{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding-top:8px}
.ds-setup>div{display:flex;min-width:0;align-items:baseline;gap:8px}
.ds-story-label{color:#006c65;font-size:9px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.ds-setup-text{margin:0;color:#334e62;font-size:13.5px;font-weight:600;line-height:1.45}
.is-running .ds-setup-text::after{content:"";display:none}
.ds-progress{margin-left:auto;color:#52697b;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.ds-alert-promise{margin:6px 0 0;color:#52697b;font-size:11px;line-height:1.45}

.demo-presentation-mode .ds-controls-bar{margin-top:10px;padding:9px 0 10px}
.demo-presentation-mode .ds-controls{display:grid;grid-template-columns:auto minmax(120px,1fr) auto auto;grid-template-areas:"select select select select" "back progress restart next";gap:7px 10px}
.demo-presentation-mode .ds-select-wrap{grid-area:select}
.demo-presentation-mode [data-previous]{grid-area:back}
.demo-presentation-mode [data-next]{grid-area:next;min-width:78px}
.demo-presentation-mode [data-reset]{grid-area:restart;min-height:36px;padding-inline:9px;border-color:transparent;background:transparent;box-shadow:none;color:#52697b}
.demo-presentation-mode .ds-rail{grid-area:progress;justify-self:center;margin:0}
.demo-presentation-mode .ds-setup{min-height:48px;padding-top:9px}
.demo-presentation-mode .ds-setup>div{flex:1 1 520px}
.demo-presentation-mode .ds-setup-text{font-size:14px}
.ds-visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap}

/* ----------------------------------------------------------------- frame -- */
.ds-stage{padding:20px 0 74px}
.ds-stage>.container{position:relative}
.ds-notification-layer{position:absolute;z-index:40;top:18px;right:18px;width:min(370px,calc(100% - 36px));pointer-events:none}
.ds-notification-layer[hidden]{display:none}
.demo-presentation-mode .ds-notification-layer.ds-viewport-focal{position:fixed;z-index:100;top:var(--ds-popup-center-y,50vh);right:auto;left:50%;width:min(390px,calc(100vw - max(32px,env(safe-area-inset-left)) - max(32px,env(safe-area-inset-right))));transform:translate(-50%,-50%)}
.demo-presentation-scroll-root,.demo-viewport-focus-root{scroll-behavior:auto}
.demo-viewport-focus-root{overflow:hidden;scrollbar-gutter:stable}
.demo-presentation-mode.demo-viewport-focus .ds-frame{opacity:.34;filter:saturate(.55);transition:opacity .2s ease,filter .2s ease}
.ds-notification-shell{position:relative;padding-top:22px;pointer-events:auto}
.ds-notification-shell>span{position:absolute;top:0;left:2px;color:#456071;font-size:9px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.ds-notification-shell>button{position:absolute;z-index:2;top:0;right:2px;width:24px;height:24px;padding:0;border:1px solid #bfcdd6;border-radius:50%;background:#fff;color:#415868;font:700 16px/1 Inter,sans-serif;cursor:pointer}
.ds-notification-shell>button:hover{border-color:#008f85;color:#008f85}
.ds-notification-shell>button:focus-visible{outline:2px solid #00bfb1;outline-offset:2px}
.ds-notification{position:relative;width:100%;min-width:0;padding:13px 14px 12px;overflow:hidden;border:1px solid #d6e0e6;border-radius:15px;background:rgba(255,255,255,.98);box-shadow:0 16px 38px rgba(2,12,20,.28);color:#132c40;text-align:left}
.ds-notification::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:#dfa92f}
.ds-notification.sev-critical::before{background:#cf5050}
.ds-notification.sev-medium::before{background:#69a8cc}
.ds-notification.is-preview{opacity:.86;box-shadow:0 10px 26px rgba(2,12,20,.2)}
.ds-notification.is-delivered{animation:ds-notification-in .42s cubic-bezier(.2,.8,.2,1) both}
.ds-notification-head{display:grid;grid-template-columns:34px 1fr auto;gap:9px;align-items:center}
.ds-notification-head img{width:34px;height:34px;border-radius:9px}
.ds-notification-head strong,.ds-notification-head span{display:block}
.ds-notification-head strong{color:#0b2233;font-size:12.5px;line-height:1.2}
.ds-notification-head span{margin-top:2px;color:#566c7c;font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.ds-notification-head time{align-self:start;color:#566c7c;font-size:10px;font-weight:700}
.ds-notification-severity{display:inline-flex;margin-top:11px;color:#8a5b12;font-size:9px;font-weight:900;letter-spacing:.11em;text-transform:uppercase}
.ds-notification.sev-critical .ds-notification-severity{color:#a33028}
.ds-notification.sev-medium .ds-notification-severity{color:#1d6a94}
.ds-notification h3{margin:4px 0 0;color:#0b2233;font:700 15px/1.25 Sora,Inter,sans-serif;letter-spacing:-.02em;overflow-wrap:anywhere}
.ds-notification p{margin:5px 0 0;color:#506679;font-size:11.5px;line-height:1.45;overflow-wrap:anywhere}
.ds-notification footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;padding-top:9px;border-top:1px solid #e8eef2;color:#5e7382;font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.ds-notification-action{color:#006c65;font-size:10px;font-weight:900;letter-spacing:0;text-decoration:none;text-transform:none}
a.ds-notification-action:hover{text-decoration:underline}
a.ds-notification-action:focus-visible{border-radius:4px;outline:2px solid #00bfb1;outline-offset:3px}
@keyframes ds-notification-in{from{opacity:0;transform:translateY(-6px) scale(.99)}to{opacity:1;transform:none}}
.ds-notification.is-delivered{animation-duration:.26s}
.ds-frame{position:relative;overflow:hidden;border:1px solid #ccd9e0;border-radius:20px;background:#f6f9fb;box-shadow:0 30px 70px rgba(6,14,26,.13)}
.ds-chrome{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:13px 18px;background:linear-gradient(90deg,#08131f,#0c1c2d);color:#dbe7ef}
.ds-chrome-brand{font:800 14px/1 Sora,Inter,sans-serif;letter-spacing:-.01em}
.ds-chrome-brand em{color:#7fcfc7;font:inherit}
.ds-chrome-nav{display:flex;gap:14px;color:#93aab9;font-size:11px;font-weight:700}
.ds-chrome-nav span{cursor:default}
.ds-sim-badge{margin-left:auto;padding:5px 9px;border:1px dashed #3c6152;border-radius:999px;color:#8ee4db;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}

/* ---------------------------------------------------------------- regions -- */
.ds-owner-body,.ds-agency-body{padding:18px}
.ds-region{border:1px solid #dde6ec;border-radius:15px;background:#fff;box-shadow:0 10px 26px rgba(6,14,26,.04)}
.ds-region-kicker{display:flex;align-items:center;gap:8px;margin:0;padding:12px 16px 0;color:#52697b;font-size:9.5px;font-weight:900;letter-spacing:.11em;text-transform:uppercase}
.ds-count{padding:2px 7px;border-radius:999px;background:#fdf0ee;color:#a33b35;font-size:9px;letter-spacing:.06em}
.ds-empty-note{padding:14px 16px 16px;color:#5a6f80;font-size:12.5px;line-height:1.5}
.ds-empty-tall strong{color:#41586b}

/* owner layout */
.ds-summary{margin-bottom:14px}
.ds-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;padding:10px 16px 16px}
.ds-tile{padding:11px 13px;border:1px solid #e4ebf0;border-radius:11px;background:#fafcfd;transition:box-shadow .22s,border-color .22s}
.ds-tile-label{display:block;color:#52697b;font-size:9px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.ds-tile-value{display:block;margin-top:6px;color:#0b2233;font:700 17px/1.1 Sora,Inter,sans-serif;letter-spacing:-.02em}
.ds-tiles--six .ds-tile-value{font-size:21px}
.ds-tile.is-bumped{border-color:#7fcfc7;box-shadow:0 0 0 3px rgba(7,178,167,.14)}
.ds-owner-grid{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(300px,1fr);gap:14px;align-items:start}
.ds-owner-main{display:grid;gap:14px}
.ds-systems-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:10px 16px 16px}
.ds-system{padding:12px 13px;border:1px solid #e4ebf0;border-radius:11px;background:#fbfdfe;transition:border-color .24s,background .24s,box-shadow .24s}
.ds-system header{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ds-system-label{color:#17364c;font-size:12.5px;font-weight:800}
.ds-system p{margin:6px 0 0;color:#5a6f80;font-size:11.5px;line-height:1.45}
.ds-journey{transition:border-color .3s}
.ds-journey-chain{display:grid;gap:6px;padding:10px 16px 16px}
.ds-step{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:8px 11px;border:1px solid #edf2f5;border-radius:10px;background:#fbfdfe}
.ds-step-dot{width:8px;height:8px;border-radius:50%;background:#cbd7df}
.ds-step.tone-ok .ds-step-dot{background:#0aa79b}
.ds-step.tone-warn .ds-step-dot{background:#dfa92f}
.ds-step.tone-danger .ds-step-dot{background:#cf5050}
.ds-step-label{color:#22405a;font-size:12.5px;font-weight:700}
.ds-issue-list{padding:10px 16px 16px;display:grid;gap:9px}
.ds-issue-card{padding:12px 14px;border:1px solid #ecd9d6;border-radius:12px;background:#fffafa}
.ds-issue-card.sev-critical{border-color:#eab8b3;background:#fff5f4}
.ds-issue-card header{display:flex;align-items:center;gap:10px}
.ds-issue-card strong{color:#132c40;font-size:13px;line-height:1.35}
.ds-issue-card footer{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:8px;color:#5a6f80;font-size:11px;font-weight:600}
.ds-sev{padding:3px 8px;border-radius:999px;font-size:9px;font-weight:900;letter-spacing:.07em;text-transform:uppercase}
.ds-sev.sev-critical{background:#fbe4e1;color:#a33028}
.ds-sev.sev-high{background:#fdeedd;color:#8a5b12}
.ds-sev.sev-medium{background:#eef4f8;color:#41586b}

/* incident detail */
.ds-incident-body,.ds-panel-body{padding:12px 16px 16px}
.ds-incident-title{margin:2px 0 10px;color:#0b2233;font:700 16.5px/1.25 Sora,Inter,sans-serif;letter-spacing:-.02em}
.dl-rows{display:grid;gap:7px;margin:0}
.dl-rows>div{padding:8px 11px;border:1px solid #edf2f5;border-radius:9px;background:#fbfdfe}
.dl-rows dt{color:#52697b;font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.dl-rows dd{margin:4px 0 0;color:#1d3950;font-size:12px;font-weight:600;line-height:1.5}
.ds-checks{display:grid;gap:6px;margin-top:10px;padding-top:10px;border-top:1px dashed #e0e8ee}
.ds-check{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;padding:6px 10px;border-radius:8px;background:#f7fafc;font-size:11.5px;font-weight:600;color:#33506a}
.ds-check em{font-style:normal;font-size:9.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.ds-check-dot{width:8px;height:8px;border-radius:50%;background:#c4d1da}
.ds-check.tone-ok .ds-check-dot{background:#0aa79b}
.ds-check.tone-warn .ds-check-dot{background:#dfa92f}
.ds-check.tone-ok em{color:#006c65}
.ds-check.tone-warn em{color:#8a5b12}
.ds-check.tone-muted em{color:#5a6f80}

/* chips */
.ds-chip{display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;font-size:9.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;transition:background .3s,color .3s,border-color .3s;border:1px solid transparent}
.ds-chip.tone-ok,.ds-chip.tone-verified{background:#e2f6f2;color:#077468;border-color:#9adbd2}
.ds-chip.tone-warn{background:#fdf3dd;color:#8a5b12;border-color:#ecd9a8}
.ds-chip.tone-danger{background:#fbe4e1;color:#a33028;border-color:#efb9b3}
.ds-chip.tone-muted{background:#eef2f5;color:#52697b;border-color:#d8e1e7}
.ds-chip.tone-info{background:#e8f3fa;color:#1d6a94;border-color:#bcdcee}

/* timeline */
.ds-timeline{margin-top:14px}
.ds-timeline-list{display:grid;gap:0;padding:6px 16px 14px}
.ds-tl-entry{display:grid;grid-template-columns:84px 1fr auto;gap:14px;align-items:start;padding:11px 0;border-top:1px solid #eef2f5;animation:ds-in .24s ease both}
.ds-tl-entry:first-child{border-top:0}
.ds-tl-entry time{color:#006c65;font-size:10px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;padding-top:2px}
.ds-tl-entry strong{color:#16344c;font-size:12.5px;line-height:1.4}
.ds-tl-entry p{margin:3px 0 0;color:#5a6f80;font-size:11.5px;line-height:1.5}
.ds-tl-entry.is-verified time{color:#047a6d}
.ds-tl-entry.is-verified>div strong{color:#05564d}
@keyframes ds-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* final band */
.ds-final{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:14px;padding:20px 22px;border:1px solid #8adbd3;border-radius:15px;background:linear-gradient(120deg,#effcfa,#f4fdfb);animation:ds-rise .28s ease both}
.ds-final[hidden]{display:none}
.ds-final strong{display:block;color:#05564d;font:700 19px/1.2 Sora,Inter,sans-serif;letter-spacing:-.02em}
.ds-final p{margin:6px 0 0;max-width:56ch;color:#2c5a58;font-size:12.5px;line-height:1.55}
.ds-final-actions{display:flex;flex-wrap:wrap;gap:9px}
@keyframes ds-rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------ agency bits -- */
.ds-agency-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(310px,1fr);gap:14px;align-items:start}
.ds-agency-main{display:grid;gap:14px}
.ds-client-table{padding:8px 12px 14px}
.ds-tr{display:grid;grid-template-columns:minmax(140px,1.6fr) .6fr .9fr .5fr;gap:10px;align-items:center;padding:8px 8px;border-bottom:1px solid #eef2f5}
.ds-th{color:#52697b;font-size:9px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid #e4ebf0}
.ds-tr:last-child{border-bottom:0}
.ds-cell-name{color:#17364c;font-size:12.5px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-client-row span:not(.ds-cell-name){color:#41586b;font-size:12px;font-weight:700}
.ds-client-row.st-attention{background:#fffcf3;box-shadow:inset 3px 0 0 #e5b83c}
.ds-client-row.st-critical{background:#fff6f5;box-shadow:inset 3px 0 0 #cf5050}
.ds-client-row.is-changed{animation:ds-rowflash .45s ease both}
@keyframes ds-rowflash{0%{background:#eafaf7}100%{}}
.ds-queue-list{padding:10px 14px 14px;display:grid;gap:8px}
.ds-queue-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;padding:9px 11px;border:1px solid #e8edf1;border-left-width:3px;border-radius:10px;background:#fbfdfe;animation:ds-in .24s ease both}
.ds-queue-row.sev-critical{border-left-color:#cf5050}
.ds-queue-row.sev-high{border-left-color:#dfa92f}
.ds-queue-row.sev-medium{border-left-color:#8fa8b8}
.ds-queue-main strong{display:block;color:#17364c;font-size:12px}
.ds-queue-main small{color:#5a6f80;font-size:10.5px}
.ds-history-feed{display:grid;gap:0;padding:6px 14px 12px}
.ds-hist-entry{display:grid;grid-template-columns:96px 1fr auto;gap:10px;align-items:start;padding:9px 0;border-top:1px solid #eef2f5}
.ds-hist-entry:first-child{border-top:0}
.ds-hist-entry time{color:#52697b;font-size:10px;font-weight:800}
.ds-hist-entry strong{color:#16344c;font-size:11.5px;line-height:1.4}
.ds-hist-entry p{margin:2px 0 0;color:#5a6f80;font-size:10.5px;line-height:1.45}

/* Presentation mode uses a single restrained focus ring instead of tutorial overlays. */
.demo-presentation-mode .ds-cm-layer{display:none}
.demo-presentation-mode [data-cm-anchor],
.demo-presentation-mode [data-presentation-field],
.demo-presentation-mode .ds-final,
.demo-presentation-mode .ds-notification{scroll-margin-block:96px 24px;transition:outline-color .2s ease,box-shadow .2s ease}
.demo-presentation-mode .ds-sales-focus{position:relative;z-index:2;outline:2px solid #00766f;outline-offset:2px;box-shadow:0 0 0 5px rgba(0,118,111,.12)}
.demo-presentation-mode .ds-viewport-focal .ds-sales-focus{z-index:101;outline:3px solid #00a99d;outline-offset:4px;box-shadow:0 0 0 8px rgba(0,169,157,.2),0 24px 64px rgba(2,12,20,.38)}

/* ------------------------------------------------------------ coachmarks -- */
.ds-cm-layer{position:absolute;inset:0;pointer-events:none;z-index:30}
.ds-cm{position:absolute;width:280px;pointer-events:auto;padding:12px 13px;border:1px solid #0e3f43;border-radius:13px;background:#0c2733;color:#e7f3f2;box-shadow:0 18px 44px rgba(4,18,26,.4);animation:ds-cm-in .3s ease both}
.ds-cm::before{content:"";position:absolute;width:12px;height:12px;transform:rotate(45deg);background:#0c2733;border-left:1px solid #0e3f43;border-top:1px solid #0e3f43;left:var(--arrow-x,24px);top:-7px}
.ds-cm-text{margin:0;font-size:12.5px;line-height:1.5;font-weight:600}
.ds-cm-actions{display:flex;justify-content:flex-end;gap:7px;margin-top:9px}
.ds-cm-actions button{min-height:29px;padding:4px 11px;border-radius:8px;border:1px solid #2e5b63;background:#12313c;color:#cdeae6;font:800 11px/1 Inter,sans-serif;cursor:pointer}
.ds-cm-actions button:hover{background:#17414e}
.ds-cm-actions .ds-cm-next{background:#00bfb1;border-color:#00bfb1;color:#04262b}
.ds-cm-actions .ds-cm-next:hover{background:#25cfc2}
@keyframes ds-cm-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.ds-cm--dock{left:12px!important;right:12px;top:auto!important;bottom:12px;width:auto;max-width:none!important;animation:ds-cm-dock .3s ease both}
.ds-cm--dock::before{display:none}
@keyframes ds-cm-dock{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
[data-cm-anchor].ds-cm-active{position:relative;z-index:25;border-radius:inherit;outline:2px solid #00bfb1;outline-offset:2px;animation:ds-glow 1.6s ease infinite}
@keyframes ds-glow{0%,100%{outline-color:#00bfb1}50%{outline-color:#8ee4db}}

/* -------------------------------------------------------------------- hub -- */
.ds-hub{min-height:100vh;background:#eef3f9}
.ds-hub-hero{padding:40px 0 54px;background:linear-gradient(145deg,#060e1a,#0c2630);color:#fff}
.ds-hub-home{display:inline-flex;margin-bottom:26px;color:#a9c9c7;font-size:12px;font-weight:800;text-decoration:none}
.ds-hub-home:hover{color:#fff}
.ds-hub h1{max-width:17ch;margin:14px 0 0;color:#fff;font:700 clamp(34px,5.4vw,64px)/1.03 Sora,Inter,sans-serif;letter-spacing:-.055em}
.ds-hub h1 em{color:#0fbfb2;font-style:normal}
.ds-hub-hero .storefront-lead{max-width:700px;margin:18px 0 22px;color:#c6d5e3}
.ds-hub-catalog{padding:36px 0 80px;background:#f4f7fa}
.ds-audience-picker{padding:26px;border:1px solid #cedce6;border-radius:20px;background:#fff;box-shadow:0 14px 38px rgba(6,14,26,.08)}
.ds-audience-picker>h2{margin:5px 0 18px;color:#081826;font:700 clamp(24px,3vw,34px)/1.12 Sora,Inter,sans-serif;letter-spacing:-.035em}
.ds-audience-tabs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ds-audience-tabs button{display:flex;min-height:118px;padding:20px;flex-direction:column;align-items:flex-start;justify-content:center;border:2px solid #d6e1e9;border-radius:16px;background:#f8fafc;color:#132c40;text-align:left;cursor:pointer;transition:border-color .18s,background .18s,box-shadow .18s,transform .18s}
.ds-audience-tabs button:hover{border-color:#75cfc7;background:#f1fcfa;transform:translateY(-2px)}
.ds-audience-tabs button[aria-selected="true"]{border-color:#008f85;background:linear-gradient(135deg,#e8faf7,#f5fcfb);box-shadow:0 0 0 3px rgba(0,143,133,.12)}
.ds-audience-tabs button:focus-visible{outline:3px solid #00bfb1;outline-offset:3px}
.ds-audience-tabs strong{color:#081826;font:700 20px/1.2 Sora,Inter,sans-serif;letter-spacing:-.025em}
.ds-audience-tabs span{max-width:46ch;margin-top:8px;color:#5a7183;font-size:12.5px;line-height:1.5}
.ds-hub-group{margin-top:32px;scroll-margin-top:20px}
.ds-hub-group[hidden]{display:none}
.ds-hub-group-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:15px}
.ds-hub-group h2{margin:0;color:#081826;font:700 clamp(21px,3vw,31px)/1.12 Sora,Inter,sans-serif;letter-spacing:-.035em}
.ds-hub-blurb{margin:7px 0 0;color:#5a6f80;font-size:12.5px}
.ds-hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:13px}
.ds-hub-card{display:flex;flex-direction:column;min-height:212px;padding:19px;border:1px solid #d5e0eb;border-radius:17px;background:#fff;color:#122c40;box-shadow:0 12px 30px rgba(6,14,26,.09);text-decoration:none;transition:transform .16s ease,box-shadow .16s ease}
.ds-hub-card:hover{transform:translateY(-3px);box-shadow:0 20px 45px rgba(6,14,26,.15)}
.ds-tier{align-self:flex-start;padding:5px 9px;border:1px solid #6fd4ca;border-radius:999px;color:#077468;background:#e8faf7;font-size:9.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.ds-hub-card.aud-agency .ds-tier{border-color:#b9a7e8;color:#5b48a8;background:#f3effd}
.ds-hub-card h3{margin:13px 0 6px;font:700 19px/1.15 Sora,Inter,sans-serif;letter-spacing:-.03em}
.ds-hub-card>p{margin:0;color:#52697b;font-size:12px;line-height:1.5}
.ds-hub-card dl{display:flex;gap:20px;margin:auto 0 14px;padding-top:16px}
.ds-hub-card dt{color:#8a99a6;font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.ds-hub-card dd{margin:4px 0 0;font-size:11px;font-weight:800}
.ds-hub-card>b{color:#006c65;font-size:12px}

/* ------------------------------------------------------------- responsive -- */
@media(max-width:1060px){
  .ds-rail li span{display:none}
  .ds-rail{gap:6px}
}
@media(max-width:940px){
  .ds-owner-grid,.ds-agency-grid{grid-template-columns:1fr}
  .ds-chrome-nav{display:none}
}
@media(max-width:720px){
  .ds-page-head{padding-top:20px}
  .ds-controls-bar{padding:8px 0}
  .ds-controls{gap:6px}
  .ds-controls .btn{flex:1 1 auto;min-height:40px}
  .ds-select-wrap{order:-1;width:100%}
  .ds-select-wrap select{width:100%;max-width:none}
  .ds-rail{display:none}
  .ds-progress{margin-left:0;width:100%}
  .ds-setup>div{align-items:flex-start;flex-direction:column;gap:3px}
  .ds-owner-body,.ds-agency-body{padding:12px}
  .ds-systems-grid{grid-template-columns:1fr 1fr}
  .ds-tr{grid-template-columns:minmax(110px,1.5fr) .5fr 1fr .4fr;gap:6px}
  .ds-timeline-list{padding:4px 12px 12px}
  .ds-tl-entry{grid-template-columns:1fr;gap:4px}
  .ds-hist-entry{grid-template-columns:1fr;gap:3px}
  .ds-final{flex-direction:column;align-items:flex-start}
  .ds-final-actions{width:100%}
  .ds-final-actions .btn{flex:1}
  .ds-audience-picker{padding:18px}
  .ds-audience-tabs{grid-template-columns:1fr}
  .ds-audience-tabs button{min-height:0;padding:17px}
}
@media(max-width:480px){
  .demo-presentation-mode .ds-page-head h1{font-size:22px}
  .demo-presentation-mode .ds-controls{grid-template-columns:auto minmax(70px,1fr) auto auto;gap:6px;grid-template-areas:"select select select select" "back progress restart next"}
  .demo-presentation-mode .ds-controls .btn{min-width:0;min-height:38px;padding-inline:10px}
  .demo-presentation-mode .ds-controls [data-reset]{padding-inline:5px}
  .demo-presentation-mode .ds-rail{gap:5px}
  .demo-presentation-mode .ds-rail i{width:9px;height:9px}
  .demo-presentation-mode .ds-progress{font-size:10px}
  .ds-stage{padding-top:14px}
  .ds-notification-layer{top:10px;right:10px;width:calc(100% - 20px)}
  .demo-presentation-mode .ds-notification-layer.ds-viewport-focal{right:auto;width:calc(100vw - max(20px,env(safe-area-inset-left)) - max(20px,env(safe-area-inset-right)))}
  .ds-notification-shell{padding-top:20px}
  .ds-notification{padding:12px 12px 11px}
  .ds-notification-head{grid-template-columns:32px 1fr auto}
  .ds-notification-head img{width:32px;height:32px}
  .ds-notification footer{align-items:flex-start;flex-direction:column}
  .ds-systems-grid{grid-template-columns:1fr}
  .ds-tiles{grid-template-columns:1fr 1fr;padding:8px 12px 12px}
  .ds-tiles--six{grid-template-columns:1fr 1fr}
  .ds-sim-badge{width:100%;text-align:center}
  .dl-rows dd{font-size:11.5px}
}

/* --------------------------------------------------------- reduced motion -- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .ds-tl-entry,.ds-queue-row,.ds-final,.ds-cm,.ds-notification{animation:none;opacity:1;transform:none}
  [data-cm-anchor].ds-cm-active{animation:none;outline:2px solid #008f85}
}