/* Branded platform previews. Native radios remain usable without JavaScript. */
.ep-explorer, .ep-home {
  --ep-ink: #1b2839;
  --ep-muted: #617084;
  --ep-line: #e0e6ec;
  --ep-bg: #f5f7fa;
  --estate-accent: #286348;
  --estate-tint: #edf5ee;
  color: var(--ep-ink);
  font-family: Manrope, sans-serif;
  font-size: 12px;
  line-height: 1.4;
}
.ep-explorer.estate-explorer {
  min-height: 0;
  padding: 22px 20px 18px;
  background: linear-gradient(150deg,#fff8,var(--estate-surface));
  border: 1px solid var(--estate-line);
  box-shadow: 0 24px 65px #14273a0a;
  animation: none;
  overflow: clip;
}
.ep-explorer-heading { position: relative; margin: 0 3px 14px; }
.ep-eyebrow { display: block; color: var(--estate-accent); font-size: 10px; font-weight: 750; letter-spacing: .075em; text-transform: uppercase; }
.ep-explorer-heading > strong { display: block; margin-top: 7px; font-size: clamp(19px,1.65vw,24px); line-height: 1.3; letter-spacing: -.04em; font-weight: 650; }
.ep-illustration { display: block; margin-top: 7px; font-size: 11px; color: #617067; }
.ep-explorer .estate-brand-picker { margin: 0 0 14px; }
.ep-explorer .estate-brand-picker legend { color: #42534a; font-size: 12px; margin: 0 0 10px; }
.ep-explorer .estate-brand-options { gap: 6px; }
.ep-explorer .brand-option > span { min-height: 44px; gap: 6px; font-size: 12px; border-radius: 9px; transition: background .25s,border-color .25s,box-shadow .25s; }
.ep-explorer .brand-option i { width: 10px; height: 10px; }
.ep-explorer .brand-option input:checked + span { box-shadow: 0 2px 8px #172f1d0a,0 0 0 1px var(--estate-accent); }
.ep-console { width: 100%; min-width: 0; margin: 0; padding: 0; border: 1px solid #cdd7dc; border-radius: 14px; overflow: clip; background: #fff; box-shadow: 0 15px 34px #1725350d,0 3px 7px #17253508; }
.ep-browser-bar { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 14px; background: #fff; border-bottom: 1px solid var(--ep-line); }
.ep-browser-dots { display: flex; gap: 4px; }
.ep-browser-dots i { width: 6px; height: 6px; border-radius: 50%; background: #d5dce4; }
.ep-domain { margin: auto; color: #657383; font-size: 11px; text-align: center; }
.ep-example-tag { font-size: 8px; letter-spacing: .08em; color: #728092; border: 1px solid #e4e9ee; border-radius: 4px; padding: 3px 5px; }
.ep-tabs { display: grid; grid-template-columns: 1.2fr .8fr 1.1fr; padding: 7px; gap: 4px; border-bottom: 1px solid var(--ep-line); background: #fcfdfe; }
.ep-tabs-two { grid-template-columns: 1.2fr 1fr; }
.ep-tabs label, .ep-record { position: relative; min-width: 0; cursor: pointer; }
.ep-tabs input, .ep-record input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.ep-tabs label > span { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 4px; border: 1px solid transparent; border-radius: 7px; font-size: 11px; font-weight: 650; color: #607083; transition: background .25s,color .25s,box-shadow .25s; }
.ep-tabs label:hover > span { background: var(--estate-tint); }
.ep-tabs input:checked + span { color: var(--estate-accent); background: var(--estate-tint); border-color: color-mix(in srgb,var(--estate-accent) 18%,white); box-shadow: 0 2px 4px #20372c06; }
.ep-tabs input:focus-visible + span, .ep-record input:focus-visible + span { outline: 2px solid var(--estate-accent); outline-offset: -3px; }
.ep-icon { display: block; flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ep-tabs .ep-icon { width: 14px; height: 14px; }
.ep-stage { display: grid; grid-template-columns: minmax(0,1fr); background: var(--ep-bg); touch-action: pan-y pinch-zoom; }
.ep-panel { min-width: 0; grid-area: 1 / 1; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px); transition: opacity .3s ease,transform .35s ease,visibility 0s .35s; }
.ep-console:has(#estate-portal:checked) #estate-portal-screen,
.ep-console:has(#estate-app:checked) #estate-app-screen,
.ep-console:has(#estate-admin:checked) #estate-admin-screen,
.ep-console:has(#home-portal-services:checked) #home-portal-services-screen,
.ep-console:has(#home-portal-accounts:checked) #home-portal-accounts-screen { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
.ep-workspace { display: grid; grid-template-columns: 100px minmax(0,1fr); height: 100%; min-height: 440px; }
.ep-sidebar { display: flex; flex-direction: column; gap: 17px; background: #192332; color: #b1c0d2; padding: 19px 7px 12px; }
.ep-sidebar-brand { display: block; padding: 0 6px; color: #fff; font-size: 15px; letter-spacing: -.045em; font-weight: 650; white-space: nowrap; }
.ep-sidebar-brand i { color: color-mix(in srgb,var(--estate-accent) 55%,white); font-style: normal; }
.ep-nav-caption { font-size: 8px; letter-spacing: .08em; color: #8799b0; padding: 4px 7px 0; margin-bottom: -10px; }
.ep-nav { display: grid; gap: 5px; }
.ep-nav > span { display: flex; align-items: center; gap: 7px; padding: 10px 7px; font-size: 10px; white-space: nowrap; border-radius: 6px; }
.ep-nav .ep-icon { width: 13px; height: 13px; }
.ep-nav > .is-current { background: var(--estate-accent); color: #fff; box-shadow: 0 3px 10px #0001; }
.ep-sidebar-foot { display: flex; align-items: center; gap: 6px; margin-top: auto; padding: 12px 4px 0; border-top: 1px solid #ffffff12; font-size: 8px; }
.ep-sidebar-foot small { display: block; color: #8fa0b6; font-size: 7px; margin-top: 3px; }
.ep-avatar { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: #ffffff10; color: #e2ebe8; font-size: 10px; }
.ep-content { min-width: 0; padding: 21px 17px 17px; }
.ep-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ep-page-heading h3 { font-size: 24px; font-weight: 650; line-height: 1.2; letter-spacing: -.045em; margin: 6px 0 0; }
.ep-status { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 9px; color: var(--estate-accent); background: var(--estate-tint); padding: 5px 7px; border-radius: 20px; }
.ep-status::before { content: ''; width: 4px; height: 4px; background: currentColor; border-radius: 50%; }
.ep-content .ep-intro { font-size: 11px; line-height: 1.55; color: var(--ep-muted); margin: 8px 0 0; }
.ep-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 14px; margin: 17px 0; font-size: 11px; color: var(--ep-muted); }
.ep-summary b { color: var(--ep-ink); font-weight: 650; }
.ep-records { min-width: 0; padding: 0; margin: 0; border: 0; }
.ep-records legend { margin: 0 0 9px; font-size: 10px; color: var(--ep-muted); }
.ep-record { display: block; }
.ep-record > span { display: flex; align-items: center; gap: 9px; min-height: 63px; padding: 11px; margin-bottom: 7px; border: 1px solid var(--ep-line); border-radius: 9px; background: #fff; transition: border-color .25s,box-shadow .25s,background .25s; }
.ep-record input:checked + span { border-color: var(--estate-accent); box-shadow: 0 2px 6px #173b2d07,inset 3px 0 0 var(--estate-accent); }
.ep-record:hover > span { background: color-mix(in srgb,var(--estate-tint) 45%,white); }
.ep-record-icon { display: grid; place-items: center; width: 31px; height: 31px; flex: none; background: var(--estate-tint); color: var(--estate-accent); border-radius: 8px; }
.ep-record-title { min-width: 0; }
.ep-record-title strong { display: block; font-size: 12px; line-height: 1.35; font-weight: 650; }
.ep-record-title small { display: block; font-size: 10px; color: var(--ep-muted); margin-top: 4px; line-height: 1.4; }
.ep-record-badge { margin-left: auto; color: var(--estate-accent); font-size: 9px; }
.ep-record > span > .ep-icon { width: 12px; height: 12px; color: #7c8a9b; }
.ep-details { display: grid; grid-template-columns: minmax(0,1fr); margin-top: 14px; }
.ep-detail { grid-area: 1/1; min-width: 0; padding: 13px; background: white; border: 1px solid var(--ep-line); border-radius: 9px; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .25s,transform .3s,visibility 0s .3s; }
.ep-records:has(input[id$="-reception"]:checked) .ep-detail[id$="-reception-detail"],
.ep-records:has(input[id$="-queue"]:checked) .ep-detail[id$="-queue-detail"],
.ep-records:has(input[id$="-customer"]:checked) .ep-detail[id$="-customer-detail"],
.ep-records:has(input[id$="-reseller"]:checked) .ep-detail[id$="-reseller-detail"] { opacity: 1; visibility: inherit; transform: none; transition-delay: 0s; }
.ep-detail-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px; margin-bottom: 11px; font-size: 11px; }
.ep-detail-heading strong { font-weight: 650; }
.ep-detail-heading span { color: var(--ep-muted); font-weight: 400; font-size: 10px; }
.ep-route { display: grid; grid-template-columns: minmax(0,1fr) 13px minmax(0,1.05fr); align-items: center; gap: 8px; border-top: 1px solid #eef1f4; padding: 10px 0; font-size: 11px; line-height: 1.45; }
.ep-route > span { position: relative; padding-left: 13px; }
.ep-route-dot { position: absolute; left: 0; top: 5px; height: 5px; width: 5px; background: var(--estate-accent); border-radius: 50%; }
.ep-route small { display: block; margin-top: 3px; color: var(--ep-muted); font-size: 10px; }
.ep-route > .ep-icon { width: 13px; height: 13px; color: #97a3b2; }
.ep-route strong { color: var(--estate-accent); font-weight: 600; }
.ep-detail-foot { display: flex; align-items: center; gap: 5px; font-size: 9px; color: #788596; line-height: 1.6; margin-top: 4px; }
.ep-detail-foot > .ep-icon { width: 12px; height: 12px; color: var(--estate-accent); }
.ep-settings { margin: 0; }
.ep-settings > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid #eef1f4; font-size: 11px; line-height: 1.5; }
.ep-settings dt { color: var(--ep-muted); }
.ep-settings dd { margin: 0; text-align: right; font-weight: 600; }
.ep-totals { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding: 3px 0 13px; }
.ep-totals > span { font-size: 10px; color: var(--ep-muted); }
.ep-totals strong { display: block; color: var(--ep-ink); font-size: 25px; line-height: 1.45; font-weight: 600; letter-spacing: -.04em; }
.ep-account-terms > div { padding: 7px 0; font-size: 10px; }
.ep-account-tree { display: grid; gap: 11px; padding: 3px 0 8px; }
.ep-account-tree > span { display: flex; align-items: center; gap: 7px; font-size: 11px; }
.ep-account-tree > span:nth-child(2) { margin-left: 15px; }
.ep-account-tree > span:nth-child(3) { margin-left: 30px; }
.ep-account-tree .ep-icon { color: var(--estate-accent); width: 15px; height: 15px; }
.ep-account-tree strong { font-weight: 600; }
.ep-account-tree small { font-size: 10px; color: var(--ep-muted); margin-left: auto; }
.ep-console-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 15px; border-top: 1px solid var(--ep-line); color: #788696; background: white; font-size: 9px; }
.ep-console-footer > span { display: flex; align-items: center; gap: 6px; }
.ep-console-footer > span:first-child { color: #607084; }
.ep-console-footer .ep-icon { width: 12px; height: 12px; color: var(--estate-accent); }
.ep-explorer .ep-tour-hint, .ep-home .ep-tour-hint { color: #627167; font-size: 10px; line-height: 1.5; margin: 13px 0 0; text-align: center; }
.ep-foundation { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 15px; margin-top: 16px; font-size: 10px; color: #58715f; }
.ep-foundation > span::before { content: '•'; margin-right: 5px; color: var(--estate-accent); }
.ep-app-panel { padding: 22px 23px 18px; background: radial-gradient(ellipse at 50% 70%,var(--estate-tint),#fbfcfd 75%); display: flex; flex-direction: column; }
.ep-app-heading h3 { font-size: 22px; font-weight: 650; line-height: 1.3; letter-spacing: -.045em; margin: 8px 0; }
.ep-app-heading p { color: var(--ep-muted); font-size: 12px; line-height: 1.5; margin: 0; }
.ep-app-composition { display: flex; align-items: center; justify-content: center; gap: 35px; margin: auto 0; padding: 18px 0; }
.ep-phone { width: 199px; flex: none; padding: 9px 13px 12px; background: white; border: 5px solid #202b37; border-radius: 28px; box-shadow: 0 19px 30px #1b2b3626,0 1px 2px #fff inset; transform: rotate(-3deg); }
.ep-phone-status { display: flex; justify-content: space-between; align-items: center; font-size: 8px; font-weight: 650; margin: 0 0 17px; }
.ep-phone-status i { display: block; width: 50px; height: 13px; border-radius: 12px; background: #202b37; }
.ep-phone-wordmark { display: block; color: var(--estate-accent); font-size: 19px; letter-spacing: -.055em; font-weight: 750; }
.ep-phone-wordmark i { font-style: normal; }
.ep-phone-heading { display: flex; align-items: center; justify-content: space-between; padding: 16px 0 10px; }
.ep-phone-heading strong { font-size: 22px; font-weight: 650; letter-spacing: -.04em; }
.ep-phone-heading > span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: var(--estate-accent); color: white; }
.ep-phone-heading .ep-icon { width: 13px; height: 13px; }
.ep-phone-call { display: flex; align-items: center; gap: 7px; padding: 10px 0; border-top: 1px solid #eef1f4; }
.ep-phone-call > i { display: grid; place-items: center; width: 24px; height: 26px; border-radius: 8px; color: var(--estate-accent); background: var(--estate-tint); }
.ep-phone-call .ep-icon { width: 11px; height: 11px; }
.ep-phone-call strong { display: block; font-size: 10px; font-weight: 650; }
.ep-phone-call small { display: block; color: var(--ep-muted); font-size: 8px; margin-top: 3px; }
.ep-phone-call > small { margin-left: auto; }
.ep-phone-chat { display: flex; align-items: center; gap: 8px; margin: 8px -2px 10px; padding: 9px 8px; background: var(--estate-tint); border-radius: 9px; color: var(--estate-accent); }
.ep-phone-chat strong { display: block; font-size: 10px; }
.ep-phone-chat small { display: block; color: var(--ep-muted); font-size: 8px; margin-top: 4px; }
.ep-phone-nav { display: flex; justify-content: space-around; border-top: 1px solid #eef1f4; padding-top: 10px; color: #97a0ac; }
.ep-phone-nav > span { display: grid; justify-items: center; gap: 5px; font-size: 8px; }
.ep-phone-nav .ep-icon { width: 14px; height: 14px; }
.ep-phone-nav > .is-current { color: var(--estate-accent); }
.ep-app-identity { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; color: var(--ep-muted); font-size: 12px; line-height: 1.65; }
.ep-app-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 17px; color: white; background: var(--estate-accent); font-size: 37px; font-weight: 650; letter-spacing: -.06em; line-height: 1; box-shadow: 0 8px 15px #10283112; }
.ep-app-identity > strong { font-size: 18px; color: var(--estate-accent); letter-spacing: -.035em; }
.ep-app-connected { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 10px; color: var(--estate-accent); }
.ep-app-connected .ep-icon { width: 15px; height: 15px; }
.ep-app-panel .ep-app-caption { max-width: 360px; margin: 0 auto; font-size: 10px; color: var(--ep-muted); text-align: center; line-height: 1.6; }
.ep-home.pdw-window { border-radius: 17px; border-color: #dbe2e7; box-shadow: 0 22px 55px #122a2012; }
.ep-home .ep-console { border: 0; border-radius: 0; box-shadow: none; }
.ep-home .ep-home-caption { padding: 0 15px 15px; border-top: 1px solid var(--ep-line); background: white; }
.ep-home .pdw-note { margin: 8px 0 0; font-size: 11px; line-height: 1.6; color: #6d7b8c; }
.ep-home .pdw-note a { white-space: nowrap; color: var(--estate-accent); gap: 4px; }
.ep-home .pdw-note .ep-icon { width: 12px; height: 12px; }
@media (min-width: 851px) and (max-width: 1120px) {
  .ep-explorer .ep-workspace { grid-template-columns: 0 minmax(0,1fr); }
  .ep-explorer .ep-sidebar { visibility: hidden; overflow: clip; padding: 0; }
}
@media (max-width:650px) {
  .ep-explorer.estate-explorer { padding: 23px 12px 19px; }
  .ep-explorer-heading { margin-bottom: 21px; }
  .ep-explorer-heading > strong { font-size: 23px; }
  .ep-explorer .brand-option > span { font-size: 11px; gap: 5px; }
  .ep-workspace { grid-template-columns: minmax(0,1fr); min-height: 467px; }
  .ep-sidebar { display: none; }
  .ep-content { padding: 20px 16px 17px; }
  .ep-page-heading h3 { font-size: 25px; }
  .ep-status { font-size: 10px; }
  .ep-content .ep-intro, .ep-summary { font-size: 12px; }
  .ep-records legend { font-size: 11px; }
  .ep-record-title strong { font-size: 13px; }
  .ep-record-title small { font-size: 11px; }
  .ep-record-badge { font-size: 10px; }
  .ep-detail-heading { font-size: 12px; }
  .ep-detail-heading span { font-size: 10px; }
  .ep-route, .ep-settings > div, .ep-account-tree > span { font-size: 12px; }
  .ep-route small { font-size: 11px; }
  .ep-detail-foot { font-size: 10px; }
  .ep-totals > span, .ep-account-tree small { font-size: 11px; }
  .ep-account-terms > div { font-size: 11px; }
  .ep-tabs label > span { font-size: 11px; gap: 4px; }
  .ep-tabs .ep-icon { display: none; }
  .ep-console-footer { font-size: 10px; line-height: 1.5; }
  .ep-console-footer > span + span { display: none; }
  .ep-app-panel { padding: 25px 16px 21px; }
  .ep-app-heading h3 { font-size: 22px; }
  .ep-app-composition { gap: 23px; padding-block: 27px; }
  .ep-phone { width: 192px; }
  .ep-app-identity { font-size: 11px; }
  .ep-app-identity > strong { font-size: 17px; }
  .ep-app-icon { width: 51px; height: 51px; font-size: 32px; border-radius: 14px; }
  .ep-home .ep-tabs label > span { font-size: 12px; }
  .ep-home .ep-workspace { min-height: 480px; }
}
@media (max-width:390px) {
  .ep-explorer.estate-explorer { padding-inline: 9px; }
  .ep-explorer .estate-brand-options { gap: 5px; }
  .ep-explorer .brand-option > span { font-size: 10px; gap: 4px; padding-inline: 3px; }
  .ep-explorer .brand-option i { width: 8px; height: 8px; }
  .ep-content { padding-inline: 12px; }
  .ep-record > span { padding: 10px 8px; gap: 7px; }
  .ep-record-icon { width: 26px; height: 29px; }
  .ep-record > span > .ep-icon { display: none; }
  .ep-record-badge { font-size: 9px; }
  .ep-detail { padding: 11px; }
  .ep-browser-dots { display: none; }
  .ep-domain { font-size: 10px; }
  .ep-tabs label > span { font-size: 10px; }
  .ep-app-composition { gap: 15px; }
  .ep-phone { width: 170px; padding-inline: 9px; }
  .ep-phone-call { gap: 5px; }
  .ep-phone-call > small { display: none; }
  .ep-app-identity { font-size: 10px; }
  .ep-app-identity > strong { font-size: 15px; }
  .ep-app-connected { font-size: 9px; }
  .ep-app-icon { width: 44px; height: 44px; border-radius: 12px; }
}
@media (prefers-reduced-motion:reduce) {
  .ep-explorer, .ep-explorer *, .ep-home, .ep-home * { animation: none !important; transition: none !important; scroll-behavior: auto; }
  .ep-phone { transform: none; }
}

@media (max-width:480px) {
  .ep-app-identity { display: none; }
  .ep-app-composition { justify-content: center; }
}
