/* Compact owner portal: one explanation, three features, one nine-second demo. */
.owner-visibility{padding-top:56px;padding-bottom:56px}
.owner-portal-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:center;gap:clamp(32px,5vw,76px);max-width:1450px;margin:auto}
.owner-visibility-intro{min-width:0}
.owner-app-copy .eyebrow{font-size:11px;letter-spacing:1.5px;color:#c5cbda;margin-bottom:16px}
.owner-app-copy h2{font-size:clamp(40px,4.1vw,58px);line-height:1.08;letter-spacing:-1.4px}
.owner-app-copy h2 em{font-style:normal;color:#b7c1d3}
.owner-portal-lead{font-size:16px;line-height:1.65;color:#cbd2df;margin-top:20px}
.owner-visibility .owner-feature-nav{display:flex;flex-direction:column;gap:8px;margin-top:28px}
.owner-visibility .owner-feature-nav[hidden],.portal-scene[hidden],.portal-scene-count[hidden]{display:none}
.owner-visibility .owner-feature-nav button{display:flex;align-items:center;gap:14px;width:100%;text-align:left;min-height:70px;padding:12px 16px;border:1px solid #ffffff20;border-radius:14px;color:#c8ceda;background:transparent;box-shadow:none;transition:background .2s,border-color .2s,color .2s}
.owner-visibility .owner-feature-nav button[aria-selected=true]{color:#fff;background:linear-gradient(125deg,#ffffff16,#ffffff07);border-color:#ffffff60;box-shadow:inset 0 1px 1px #ffffff30}
.owner-visibility .owner-feature-nav button:hover{background:#ffffff12;border-color:#ffffff60}
.owner-feature-icon{width:24px;height:24px;flex-shrink:0}
.owner-feature-nav button>span{min-width:0}
.owner-feature-nav strong{display:block;font-size:15px;font-weight:500;line-height:1.35}
.owner-feature-nav small{display:block;font-size:12px;line-height:1.5;color:#bbc3d3;margin-top:3px}
.portal-step-arrow{margin-left:auto;font-size:20px;opacity:0}
.owner-feature-nav button[aria-selected=true] .portal-step-arrow{opacity:1}
.owner-feature-nav button:after{display:none}
.owner-support-note{font-size:13px;line-height:1.7;color:#b9c2d3;margin-top:22px;max-width:360px;scroll-margin-top:130px}
.owner-support-note strong{font-weight:500;color:#e5e8ef}
.owner-tour{min-width:0;overflow:hidden}
.owner-tour .portal-tour-bar{padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #ffffff22}
.portal-tour-bar>p{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:500;letter-spacing:1px;line-height:1.5}
.owner-tour .portal-platform{font-size:10px;letter-spacing:.6px;color:#c7ccda}
.portal-motion-label{font-size:11px;color:#d4d8e2;white-space:nowrap;display:flex;align-items:center;gap:6px}
.portal-motion-label>span{font-size:16px}
.portal-tour-layout{padding:18px 20px 0}
.portal-screens{min-width:0}
.portal-scene{margin:0 0 24px}
.has-owner-tour .portal-scene{margin:0}
.owner-tour .portal-scene figcaption{padding:0 0 16px;min-height:90px;display:flex;align-items:flex-start}
.portal-scene figcaption h3{font-size:clamp(23px,2.1vw,29px);line-height:1.2;letter-spacing:-.4px}
.owner-tour .portal-scene figcaption p{font-size:13px;line-height:1.55;color:#d0d5e0;margin-top:6px;max-width:420px}
.owner-tour .portal-screen-viewport{overflow:hidden;background:white;border:1px solid #ffffff55;border-radius:14px}
/* Distinct calendar, financial statement and owner-stay illustrations. */
.portal-demo-sheet{position:relative;min-height:420px;padding:16px;color:#101b37;background:#fbfcfe;font-family:'Work Sans',sans-serif;isolation:isolate}
.demo-screen-eyebrow{font-size:10px;line-height:1.4;letter-spacing:1px;color:#667085;margin-bottom:5px}
.demo-calendar-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.demo-calendar-heading h4,.demo-finance-heading h4{margin:0;font:550 17px/1.3 'Work Sans',sans-serif}
.demo-occupancy{display:flex;flex-direction:column;align-items:center;line-height:1.2}
.demo-occupancy strong{font-size:30px;font-weight:550;letter-spacing:-1px}
.demo-occupancy strong small{font-size:16px;margin-left:2px}
.demo-occupancy>span{font-size:11px;color:#667085}
.demo-occupancy-track{height:4px;background:#e4e8ef;border-radius:3px;overflow:hidden;margin-top:13px}
.demo-occupancy-track>span{display:block;width:80%;height:100%;background:#233e65;transform-origin:left}
.demo-booking-totals{display:flex;justify-content:space-between;gap:8px;font-size:11px;line-height:1.5;color:#667085;margin:9px 0 14px}
.demo-booking-totals strong{font-weight:600;color:#101b37}
.demo-calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;isolation:isolate}
.demo-calendar>span{display:grid;place-items:center;height:28px;font-size:12px;line-height:1;font-variant-numeric:tabular-nums;border-radius:5px}
.demo-calendar .demo-weekday{height:18px;font-size:10px;color:#667085;margin-bottom:3px}
.demo-day-selected{background:#243e64;color:white}
.demo-day-available{background:white;border:1px solid #d6dce7;color:#526073}
.demo-calendar-key{display:flex;gap:18px;margin-top:12px;font-size:11px;line-height:1.4;color:#586174}
.demo-calendar-key>span{display:flex;align-items:center;gap:6px}
.demo-calendar-key i{display:block;width:9px;height:9px;border-radius:2px;background:#243e64}
.demo-calendar-key>span:last-child i{background:white;border:1px solid #aeb6c3}
.demo-calendar-foot,.demo-statement-note{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:11px;line-height:1.4;color:#586174}
.demo-check{display:grid;place-items:center;flex-shrink:0;width:22px;height:22px;border-radius:50%;background:#e2efe9;color:#176147;font-size:12px;line-height:1}
.demo-finance-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:12px;border-bottom:1px solid #e3e8ef}
.demo-finance-heading h4{font-size:15px}
.demo-finance-heading>span{font-size:10px;line-height:1.4;color:#667085;text-align:right}
.demo-finance-overview{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:20px;margin:15px 0}
.demo-net{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.demo-net>span{font-size:11px;line-height:1.4;color:#667085}
.demo-net strong{display:flex;align-items:baseline;gap:5px;font-size:30px;line-height:1.2;letter-spacing:-.8px;font-weight:550;font-variant-numeric:tabular-nums;white-space:nowrap}
.demo-net strong small{font-size:10px;letter-spacing:0;font-weight:400}
.demo-net .demo-net-change{font-size:10px;color:#586174}
.demo-payout-chart>p{font-size:10px;line-height:1.4;color:#667085;margin-bottom:7px}
.demo-income-bars{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.demo-income-bars>div{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.demo-bar-track{display:flex;align-items:flex-end;justify-content:center;height:59px;width:100%;border-bottom:1px solid #d9e0eb}
.demo-bar-track i{display:block;width:100%;max-width:28px;height:var(--bar-height);background:#b3c2d9;border-radius:4px 4px 0 0;transform-origin:bottom}
.demo-income-bars>div:last-child i{background:#233e65}
.demo-income-bars>div>span:last-child{font-size:10px;line-height:1.2;color:#667085}
.demo-statement-table{width:100%;border-collapse:collapse;font-size:12px;line-height:1.4}
.demo-statement-table caption{text-align:left;font-size:11px;font-weight:550;color:#101b37;padding-bottom:5px}
.demo-statement-table th,.demo-statement-table td{padding:6px 0;border-bottom:1px solid #e6eaf0;font-weight:400}
.demo-statement-table th{text-align:left}
.demo-statement-table td{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.demo-statement-table thead th{font-size:10px;color:#667085;padding-top:0}
.demo-statement-table thead th:last-child{text-align:right}
.demo-statement-table tbody th{color:#667085}
.demo-statement-table tfoot th,.demo-statement-table tfoot td{font-weight:600;color:#101b37;border-bottom:0;padding-top:9px}
.demo-statement-note{padding-top:8px;border-top:1px solid #e3e8ef;margin-top:6px}
.demo-stay-photo{height:154px;position:relative;overflow:hidden;border-radius:9px;isolation:isolate;background:#dce5ed}
.demo-stay-photo img{width:100%;height:100%;object-fit:cover;object-position:55% 43%}
.demo-stay-photo:after{content:'';position:absolute;inset:25% 0 0;background:linear-gradient(transparent,#06162bba);z-index:0}
.demo-stay-tag{position:absolute;top:10px;left:10px;padding:4px 7px;border:1px solid #ffffff90;background:#ffffffda;border-radius:5px;font-size:9px;font-weight:500;letter-spacing:.8px;color:#102348;z-index:1}
.demo-stay-photo>div{position:absolute;bottom:13px;left:14px;right:14px;color:white;z-index:1}
.demo-stay-photo>div>span{display:block;font-size:10px;line-height:1.4;margin-bottom:3px}
.demo-stay-photo strong{display:block;font-size:19px;font-weight:500;line-height:1.2}
.demo-stay-dates{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;margin-top:16px;padding-bottom:12px;border-bottom:1px solid #e3e8ef}
.demo-stay-dates>div{display:flex;flex-direction:column;gap:4px}
.demo-stay-dates div>span{font-size:11px;line-height:1.3;color:#667085}
.demo-stay-dates strong{font-size:17px;font-weight:500;line-height:1.3;white-space:nowrap}
.demo-stay-dates small{font-size:10px;color:#667085;line-height:1.3}
.demo-stay-arrow{font-size:20px;color:#8794a8}
.demo-stay-details{display:flex;align-items:center;gap:8px;margin-top:10px}
.demo-stay-details span{padding:4px 8px;border:1px solid #dce3eb;border-radius:5px;font-size:10px;line-height:1.4;color:#586174}
.demo-reserved{display:flex;gap:10px;align-items:center;background:#edf5f0;border:1px solid #d4e7dc;border-radius:8px;padding:10px;margin-top:12px}
.demo-reserved>div{display:flex;flex-direction:column;gap:3px}
.demo-reserved strong{font-size:12px;font-weight:550;color:#165a42;line-height:1.3}
.demo-reserved div>span{font-size:10px;line-height:1.4;color:#42715e}
.portal-tour-footer{display:flex;align-items:center;gap:16px;margin:0 20px;padding:14px 0 16px}
.portal-timeline{display:flex;align-items:center;gap:7px;flex:1}
.portal-timeline>span{height:3px;flex:1;overflow:hidden;background:#ffffff24;border-radius:3px}
.portal-timeline i{display:block;height:100%;width:100%;background:#fff;transform:scaleX(0);transform-origin:left}
.portal-timeline .is-current i{animation:portal-progress 3s linear both;animation-play-state:paused}
.is-playing .portal-timeline .is-current i{animation-play-state:running}
.portal-timeline .is-complete i,.is-manual .portal-timeline .is-current i{animation:none;transform:scaleX(1)}
.portal-scene-count{font-size:11px;line-height:1.4;color:#c7cfdd;font-variant-numeric:tabular-nums;letter-spacing:1px;white-space:nowrap}
.owner-visibility :is(button,[role=tabpanel]):focus-visible{outline:2px solid #fff;outline-offset:4px}
.has-owner-tour .portal-scene:not([hidden]){animation:portal-reveal .35s ease-out both}
.is-playing .portal-scene:not([hidden]) .demo-day-selected{animation:demo-date-mark .3s var(--day-delay) both}
.is-playing .portal-scene:not([hidden]) .demo-reserved{animation:demo-notice-in .4s .7s both}
.is-playing .portal-scene:not([hidden]) .demo-net{animation:demo-notice-in .45s .15s both}
.is-playing .portal-scene:not([hidden]) .demo-occupancy-track>span{animation:portal-progress .8s .15s both}
.is-playing .portal-scene:not([hidden]) .demo-bar-track i{animation:demo-bar-grow .65s var(--bar-delay) both}
@keyframes portal-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes portal-reveal{from{opacity:.3;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes demo-bar-grow{from{transform:scaleY(.05);opacity:.4}to{transform:scaleY(1);opacity:1}}
@keyframes demo-date-mark{from{opacity:.3;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
@keyframes demo-notice-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){
 .owner-portal-grid{display:block;max-width:620px}
 .owner-app-copy h2{font-size:42px}
 .owner-portal-lead{font-size:15px;margin-top:14px}
 .owner-portal-lead br{display:none}
 .owner-visibility .owner-feature-nav{flex-direction:row;gap:6px;margin:22px 0 16px}
 .owner-visibility .owner-feature-nav button{min-height:46px;justify-content:center;gap:8px;text-align:center;padding:10px 8px;border-radius:11px}
 .owner-feature-icon{width:18px;height:18px}
 .owner-feature-nav strong{font-size:13px}
 .owner-feature-nav small,.portal-step-arrow{display:none}
 .owner-support-note{display:none}
 .owner-tour{max-width:620px;margin:auto}
}
@media(max-width:600px){
 .owner-visibility{padding:44px 7%}
 .owner-app-copy .eyebrow{font-size:10px;letter-spacing:1px;margin-bottom:12px}
 .owner-app-copy h2{font-size:38px;letter-spacing:-1px}
 .owner-portal-lead{font-size:14px;line-height:1.6}
 .owner-feature-icon{display:none}
 .owner-visibility .owner-feature-nav button{min-height:44px;padding:10px 6px}
 .owner-tour .portal-tour-bar{padding:12px;gap:8px}
 .portal-tour-bar>p{font-size:10px;letter-spacing:.6px;gap:5px}
 .owner-tour .portal-platform{font-size:9px}
 .portal-motion-label{font-size:10px;gap:4px}
 .portal-motion-label>span{font-size:14px}
 .portal-tour-layout{padding:14px 12px 0}
 .owner-tour .portal-scene figcaption{min-height:85px;padding-bottom:12px}
 .portal-scene figcaption h3{font-size:23px}
 .owner-tour .portal-scene figcaption p{font-size:12px;line-height:1.5}
 .portal-demo-sheet{padding:12px;min-height:404px}
 .demo-calendar-heading h4{font-size:16px}
 .demo-occupancy strong{font-size:28px}
 .demo-booking-totals{font-size:10px}
 .demo-calendar>span{height:28px}
 .demo-calendar-foot,.demo-statement-note{font-size:10px}
 .demo-finance-heading h4{font-size:14px}
 .demo-finance-heading>span{font-size:9px}
 .demo-finance-overview{gap:12px;margin:14px 0}
 .demo-net strong{font-size:26px;gap:4px}
 .demo-net>span{font-size:10px}
 .demo-net .demo-net-change{font-size:9px}
 .demo-income-bars{gap:7px}
 .demo-statement-table{font-size:11px}
 .demo-stay-photo{height:148px}
 .demo-stay-dates{gap:8px;margin-top:14px}
 .demo-stay-dates strong{font-size:15px}
 .demo-reserved{padding:9px;gap:8px}
 .portal-tour-footer{margin:0 12px;padding:12px 0 14px}
}
@media(max-width:360px){.owner-tour .portal-scene figcaption{min-height:110px}}
@media(prefers-reduced-motion:reduce){.owner-visibility *{animation:none!important;transition:none!important}.portal-timeline .is-current i{transform:scaleX(1)}}
