.portal-demo-section{padding:clamp(58px,8vw,110px) 0; background:var(--paper-2)}
.pd-layout{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr); align-items:center; gap:clamp(36px,6vw,88px)}
.pd-introduction h2{font-size:clamp(2.1rem,3.7vw,3.35rem); letter-spacing:-.035em; max-width:15ch; line-height:1.12; margin:0 0 26px}
.pd-intro{font-size:1.06rem; line-height:1.75; max-width:41ch; color:var(--text-soft)}
.pd-benefits{list-style:none; margin:30px 0; padding:0; display:grid; gap:16px}
.pd-benefits li{display:flex; align-items:flex-start; gap:12px; color:var(--ink); font-size:.96rem; line-height:1.6}
.pd-benefits svg{width:20px; height:20px; margin-top:3px; flex:0 0 20px; color:var(--gold-ink)}
.pd-disclaimer{max-width:43ch; font-size:.86rem; line-height:1.65; color:var(--text-soft); padding-top:24px; border-top:1px solid var(--line)}
.pd-example{min-width:0; width:100%; max-width:490px; justify-self:end}
.pd-example-label{display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 8px 14px; font-size:.81rem; font-weight:600; color:var(--text-soft)}
.pd-example-label > span::before{content:""; display:inline-block; width:6px; height:6px; margin:0 9px 2px 0; border-radius:50%; background:var(--gold-ink)}
.pd-reset{font:inherit; color:var(--gold-ink); background:none; border:0; padding:10px 0 10px 10px; min-height:44px; text-decoration:underline; text-underline-offset:4px; cursor:pointer}
.pd-shell{position:relative; overflow:hidden; border-radius:30px; border:1px solid #304158; background:#091a32; color:#fff; box-shadow:0 24px 64px rgba(7,23,47,.16),0 3px 8px rgba(7,23,47,.09); isolation:isolate}
.pd-shell::before{content:""; position:absolute; height:1px; top:0; left:14%; right:14%; background:linear-gradient(90deg,transparent,#dbb968,transparent); pointer-events:none}
.pd-header{display:flex; align-items:center; gap:12px; padding:20px 24px; background:rgba(7,23,47,.74); border-bottom:1px solid rgba(255,255,255,.09)}
.pd-header .brand-mark{width:40px; height:40px; flex:0 0 40px}
.pd-brand{display:grid; gap:1px}
.pd-brand > strong{font-family:var(--serif); font-weight:600; font-size:1.5rem; letter-spacing:.025em; line-height:1.12}
.pd-brand > span{font-size:.72rem; letter-spacing:.035em; color:#b8c7da}
.pd-avatar{display:grid; place-items:center; flex:0 0 36px; width:36px; height:36px; border-radius:50%; background:#26384e; border:1px solid rgba(219,185,104,.3); color:#e6c781; font-size:.73rem; font-weight:600}
.pd-header > .pd-avatar{margin-left:auto}
.pd-content{padding:26px; min-height:435px}
.pd-panel[hidden]{display:none}
.pd-panel:not([hidden]){animation:pd-enter .18s ease-out}
.pd-panel{min-width:0; outline-offset:7px}
.pd-panel h3{color:#fff; font-size:1.65rem; letter-spacing:-.025em; line-height:1.18; margin:0 0 18px; max-width:22ch}
.pd-greeting{font-size:.78rem; color:#b9c8da; margin:0 0 10px}
.pd-period{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:9px; padding:14px 0 18px; border-bottom:1px solid rgba(255,255,255,.1); font-size:.78rem; color:#b9c8da}
.pd-period strong{font-size:.73rem; font-weight:500; color:#e7c983; padding:4px 8px; border-radius:6px; background:rgba(193,154,74,.11)}
.pd-task{position:relative; margin:23px 0 20px; padding:20px; border:1px solid rgba(219,185,104,.28); border-radius:17px; background:linear-gradient(125deg,rgba(193,154,74,.07),rgba(23,51,92,.26))}
.pd-task-icon{display:grid; width:32px; height:32px; place-items:center; border-radius:9px; color:#e7c983; background:rgba(193,154,74,.1); margin-bottom:14px}
.pd-task-icon svg{width:19px; height:19px}
.pd-task h4{font-size:1.2rem; line-height:1.25; color:#fff; margin:0 0 8px}
.pd-task p,.pd-soft{font-size:.87rem; line-height:1.7; color:#bccadd; margin:0 0 20px}
.pd-primary{display:flex; justify-content:center; align-items:center; gap:10px; width:100%; min-height:46px; padding:12px 16px; border:1px solid #c19a4a; border-radius:11px; background:#c19a4a; color:#07172f; font:600 .82rem/1.45 var(--sans); cursor:pointer; transition:background .16s ease,transform .16s ease}
.pd-primary svg{width:17px; height:17px; flex:0 0 17px}
.pd-primary:hover:not(:disabled){background:#dbb968; transform:translateY(-1px)}
.pd-primary:disabled{color:#d9e6dd; background:#183c38; border-color:#376458; cursor:default}
.pd-received{display:flex; gap:12px; align-items:flex-start; padding:0 4px}
.pd-received > svg{width:18px; height:18px; flex:0 0 18px; color:#a4c6bd; margin-top:3px}
.pd-received strong{font-weight:500; font-size:.79rem; color:#d7e1ed}
.pd-received p{font-size:.75rem; line-height:1.65; color:#aebed2; margin:3px 0 0}
.pd-note{font-size:.78rem; color:#aebed2; line-height:1.65; margin:16px 0 0}
.pd-link{display:block; min-height:44px; padding:13px 0; margin:auto; color:#e7c983; font:500 .82rem/1.5 var(--sans); border:0; background:none; cursor:pointer; text-underline-offset:4px}
.pd-link:hover{text-decoration:underline}
.pd-link[hidden]{display:none}
.pd-receipt{display:grid; justify-items:center; gap:8px; padding:27px 16px; margin:20px 0; border:1px dashed #607089; border-radius:17px; background:rgba(255,255,255,.025)}
.pd-receipt-symbol{display:grid; place-items:center; width:55px; height:64px; border:1px solid rgba(219,185,104,.26); border-radius:9px; background:#102640; color:#e7c983; margin-bottom:8px; box-shadow:0 8px 20px rgba(7,23,47,.16)}
.pd-receipt-symbol svg{width:27px; height:27px}
.pd-receipt > strong{font-weight:500; font-size:.9rem; color:#e4ebf4}
.pd-receipt > span:last-child{font-size:.75rem; color:#adbed2}
.pd-document{margin:12px 0; border:1px solid rgba(255,255,255,.14); border-radius:13px; background:#0f243f; overflow:hidden}
.pd-document summary{list-style:none; display:flex; align-items:center; gap:12px; padding:16px 14px; cursor:pointer; min-height:68px}
.pd-document summary::-webkit-details-marker{display:none}
.pd-document summary > svg,.pd-added-document > svg{width:23px; height:23px; flex:0 0 23px; color:#daba70}
.pd-document summary > span,.pd-added-document > span{min-width:0; display:grid; gap:4px}
.pd-document strong{font-size:.81rem; color:#e6edf6; font-weight:500; overflow-wrap:anywhere}
.pd-document small{font-size:.78rem; color:#b1c2d7; line-height:1.4}
.pd-document summary > i{font:400 1.2rem/1 var(--sans); font-style:normal; color:#b6c7dd; margin-left:auto}
.pd-document[open] summary > i{transform:rotate(45deg)}
.pd-document-content{padding:0 14px 16px}
.pd-document-content > .pd-soft{padding:6px 2px 0; margin-bottom:0}
.pd-paper{padding:21px 18px; margin:0 0 16px; border-radius:5px; background:#f7f8fa; color:#07172f; border-top:2px solid #c19a4a}
.pd-paper-brand{font:600 1.15rem/1.2 var(--serif); letter-spacing:.03em; color:#07172f}
.pd-paper h4{font-size:1.05rem; color:#07172f; margin:20px 0 10px}
.pd-paper p{font-size:.76rem; line-height:1.65; color:#54657a; margin:0 0 18px}
.pd-paper dl{margin:0; padding-top:12px; border-top:1px solid #e2e7ee; display:grid; gap:5px; font-size:.72rem; line-height:1.5}
.pd-paper dt{font-weight:600}.pd-paper dd{margin:0; color:#54657a}
.pd-document-approved summary small{color:#b7d8cd}
.pd-added-document{display:flex; align-items:center; gap:12px; padding:16px 14px}
.pd-added-document[hidden]{display:none}
.pd-added-document > svg:last-child{margin-left:auto; width:18px; height:18px; flex-basis:18px; color:#b7d8cd}
.pd-adviser{display:flex; align-items:center; gap:12px; padding-bottom:22px; margin-bottom:24px; border-bottom:1px solid rgba(255,255,255,.1)}
.pd-adviser h3{font:500 .96rem/1.3 var(--sans); margin:0 0 4px}
.pd-adviser div > span{font-size:.72rem; color:#adbed2}
.pd-chat{display:flex; flex-direction:column; gap:16px; margin-bottom:24px; min-height:214px}
.pd-bubble{background:#19334f; border:1px solid rgba(255,255,255,.08); border-radius:14px 14px 14px 3px; padding:17px; max-width:92%; align-self:flex-start}
.pd-bubble > strong{font-size:.72rem; color:#e1c57f; font-weight:600}
.pd-bubble p{font-size:.86rem; line-height:1.65; color:#e0e8f3; margin:6px 0 0}
.pd-bubble-own{background:#213e42; border-color:rgba(162,199,184,.17); border-radius:14px 14px 3px 14px; align-self:flex-end; animation:pd-enter .2s ease-out}
.pd-bubble-own[hidden]{display:none}
.pd-bubble-own p{margin:0}
.pd-feedback{font-size:.75rem; line-height:1.6; color:#c8ddd3; padding:0 26px 18px; margin:0}
.pd-feedback:empty{display:none}
.pd-tabs{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:8px 12px 14px; gap:3px; border-top:1px solid rgba(255,255,255,.1); background:#08182e}
.pd-tab{display:flex; flex-direction:column; justify-content:center; align-items:center; gap:7px; min-width:0; min-height:60px; padding:8px 2px; border:0; border-radius:10px; background:transparent; color:#adbfd5; font:500 .76rem/1.25 var(--sans); cursor:pointer}
.pd-tab svg{width:21px; height:21px}
.pd-tab[aria-selected="true"]{color:#e7c983; background:rgba(193,154,74,.095)}
html:not(.is-app) .pd-shell :is(button,summary,[tabindex]):focus-visible{outline:2px solid #e7c983; outline-offset:3px}
@keyframes pd-enter{from{opacity:.65; transform:translateY(5px)}to{opacity:1; transform:none}}
@media (max-width:900px){.pd-layout{grid-template-columns:1fr; gap:26px}.pd-introduction h2{max-width:24ch}.pd-intro,.pd-disclaimer{max-width:55ch}.pd-benefits{gap:11px}.pd-example{justify-self:center}}
@media (max-width:480px){.portal-demo-section{padding:50px 0}.pd-example-label{margin-inline:3px; font-size:.73rem; gap:8px}.pd-reset{font-size:.73rem}.pd-shell{border-radius:23px}.pd-header{padding:17px 18px}.pd-content{padding:22px 18px; min-height:420px}.pd-panel h3{font-size:1.45rem}.pd-task{padding:17px}.pd-tabs{padding-inline:7px}.pd-tab{font-size:.73rem; min-height:60px}.pd-feedback{padding-inline:18px}.pd-document summary{gap:9px; padding:14px 11px}.pd-document strong{font-size:.8rem}.pd-document-content{padding-inline:11px}.pd-paper{padding:18px 14px}}
@media (prefers-reduced-motion:reduce){.pd-panel:not([hidden]),.pd-bubble-own{animation:none}.pd-primary{transition:none}.pd-primary:hover:not(:disabled){transform:none}}