/* These photo-led demos are exclusive to service details; the home reel is untouched. */
.demo-surface:has(.detail-demo){padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.detail-demo{--detail-ink:#192c3c;--detail-muted:#455968;color:var(--detail-ink)}
.detail-demo img{display:block;width:100%;height:100%;object-fit:cover}
.detail-demo .demo-controls{margin:0 0 24px;gap:10px}
.detail-demo .demo-controls button{font-size:14px;min-height:44px;padding:10px 20px;border-color:#bbcbd5;color:#31485e;background:#fff}
.detail-demo .demo-controls button[aria-pressed=true]{background:#174dcd;color:#fff;border-color:#174dcd}
.detail-demo h3{font-size:26px;line-height:1.2}
.detail-web .website-demo{max-width:100%;border:1px solid #d7dfdf;box-shadow:0 18px 40px -28px #14364b66;border-radius:18px}
.detail-web .window-top{background:#f0f4f5}
.detail-site{background:#faf7f0;color:#2c443b}
.detail-site-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;font-size:11px}
.detail-site-nav strong{font-size:15px}
.detail-site-cover{display:grid;grid-template-columns:1.3fr 1fr;min-height:340px}
.detail-site-cover>img{min-height:340px;object-position:44% center}
.detail-site-intro{padding:38px 30px;display:flex;flex-direction:column;justify-content:center;background:#e7eee3}
html[data-linud-type] .detail-site-intro h3{text-align:left;font-size:clamp(25px,3vw,39px);letter-spacing:-.035em}
.detail-site-intro p{font-size:14px;line-height:1.65;margin-top:22px;color:#3c5143}
.detail-stay{display:flex;justify-content:space-between;gap:20px;padding:24px}
.detail-stay span{font-size:11px;color:#4b5d52}
.detail-stay b{display:block;font-size:14px;margin-bottom:5px;color:#294536}
.detail-web .is-mobile{max-width:340px}
.detail-web .is-mobile .detail-site-cover{display:flex;flex-direction:column}
.detail-web .is-mobile .detail-site-cover>img{height:250px;min-height:0}
.detail-web .is-mobile .detail-site-intro{padding:26px}
.detail-web .is-mobile .detail-site-nav{flex-direction:column;align-items:start;gap:6px}
.detail-web .is-mobile .detail-stay{flex-wrap:wrap}
.detail-management{overflow:hidden;border:1px solid #d4dfdf;border-radius:22px;background:#fff;box-shadow:0 18px 45px -34px #244a4255}
.detail-desk-cover{position:relative;height:265px}
.detail-desk-cover>img{object-position:center 54%}
.detail-desk-cover>div{position:absolute;bottom:22px;left:22px;background:#f8fcf8f5;padding:17px 22px;border-radius:12px;max-width:calc(100% - 44px);color:#214e43}
.detail-desk-cover strong{display:block;font-size:25px;letter-spacing:-.03em}
.detail-desk-cover span{display:block;font-size:13px;margin-top:4px}
.detail-desk-content{padding:26px}
.detail-management .workspace-demo{border:0;border-radius:0}
.detail-management .workspace-title{padding:8px 0 22px;flex-wrap:wrap}
.detail-management [data-workspace-rows]>div{margin:0;padding:22px 0;font-size:15px;gap:16px}
.detail-management [data-workspace-rows] small{font-size:12px}
.detail-management [data-workspace-rows] b{background:#fff0d6;color:#765214;white-space:normal}
.detail-management [data-workspace-rows] b.mint{background:#ddf2e8;color:#255b45}
.detail-management [data-workspace-rows] b.coral{background:#ffebe4;color:#844b37}
.detail-desk-note{display:flex;align-items:center;gap:12px;margin-top:22px;padding:16px;background:#edf6f3;border-radius:10px}
.detail-desk-note .status-dot{flex-shrink:0;background:#327663}
.detail-desk-note p{font-size:13px;line-height:1.55;color:#315b4d}
.detail-booking{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border-radius:20px;background:#f6eee7}
.detail-booking>img{height:310px;object-position:42% center}
.detail-booking-choice{display:flex;flex-direction:column;justify-content:center;padding:30px 24px;color:#624536}
.detail-booking-choice p{font-size:14px;margin:18px 0}
.detail-booking-choice .demo-controls{margin:0;gap:8px}
.detail-booking-choice .demo-controls button{padding:8px 13px}
.detail-automation .automation-demo{gap:20px;margin:30px 0}
.detail-automation .auto-step{padding:20px 0}
.detail-automation .auto-step h3{font-size:20px;text-align:left}
.detail-automation .auto-step p{font-size:14px}
.detail-automation .node-letter{width:36px;height:36px;border-radius:50%;background:#eef2fa;margin-bottom:18px}
.detail-automation .is-complete .node-letter{color:#fff;background:#174dcd}
.detail-automation .action{display:flex;margin-inline:auto;font-size:16px}
.detail-automation .demo-feedback{text-align:center;font-size:13px;margin-top:18px}
.detail-social-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center}
.detail-social .social-preview{min-width:0}
.detail-social-photo{position:relative;overflow:hidden;border-radius:20px;aspect-ratio:4/5;background:#174a65}
.detail-social-photo img{object-position:32% center}
.detail-post-line{display:none}
.detail-social [data-social-mode=post] .detail-post-line{display:block;position:absolute;bottom:20px;left:20px;right:20px;background:#fff6e8;color:#774022;padding:18px 20px;font-size:29px;font-weight:700;line-height:1.1;border-radius:10px}
.detail-social [data-social-mode=video] .detail-social-photo{aspect-ratio:9/12}
.detail-video-sequence{display:none}
.detail-social [data-social-mode=video] .detail-video-sequence{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.detail-video-sequence span{padding:10px 5px;text-align:center;border-top:2px solid #22729a;font-size:11px;color:#3b5870}
.detail-social .format-label{position:static;display:inline-block;background:#fff0e4;color:#855136;margin:22px 0 0;padding:5px 12px;font-size:12px}
.detail-social .social-preview h3{font-size:24px;margin-top:16px}
.detail-social .social-preview>p{font-size:15px;line-height:1.65;margin-top:15px;color:var(--detail-muted)}
.detail-calendar{padding:28px;background:#f2f6fa;border-radius:18px}
.detail-calendar h3{font-size:25px}
.detail-calendar>p{font-size:14px;color:#405773;margin-top:14px}
.detail-calendar ol{list-style:none;margin:28px 0 0;padding:0}
.detail-calendar li{padding:18px 0;border-top:1px solid #c7d5e3}
.detail-calendar li>span{font-size:12px;color:#365b80}
.detail-calendar li>strong{display:block;font-size:16px;margin-top:5px}
.detail-calendar li>small{display:block;font-size:12px;margin-top:8px;color:#425f78}
/* Device hardware stays outside the scrollable, selectable demo content. */
.device-demo{margin:0 auto;max-width:980px}
.device-demo>.demo-controls{margin:0 0 28px}
.device-frame{position:relative;margin:0 auto;width:100%;padding:18px 12px 0;border-radius:22px 22px 14px 14px;background:#202831;border:1px solid #404953;box-shadow:0 22px 45px -28px #142c4666}
.device-camera{position:absolute;top:6px;left:50%;width:5px;height:5px;margin-left:-2.5px;background:#586b78;border:1px solid #111a22;border-radius:50%;pointer-events:none}
.device-screen{position:relative;container:device-screen / inline-size;aspect-ratio:16/10;overflow:auto;background:#fff;border:1px solid #101820;border-radius:6px;scrollbar-width:thin;scrollbar-color:#92a4b4 #eef2f5;-webkit-overflow-scrolling:touch}
.device-screen:focus-visible{outline:3px solid #174dcd;outline-offset:3px}
.device-content{min-width:0}
.device-chin{height:28px;background:#dde3e8;margin:0 -12px;border-radius:0 0 13px 13px;border-top:1px solid #8996a1}
.device-stand{position:relative;width:25%;height:65px;margin:0 auto 20px;background:linear-gradient(90deg,#aeb9c4,#e4e9ed 48%,#bbc5ce);clip-path:polygon(31% 0,69% 0,73% 75%,100% 87%,100% 100%,0 100%,0 87%,27% 75%)}
.device-demo>figcaption{color:#526478;text-align:center;font-size:13px;line-height:1.6;margin-top:20px}
.device-screen .website-demo,.device-screen .detail-management{border:0;border-radius:0;box-shadow:none}
.device-screen .detail-web .website-demo{max-width:100%}
.device-screen .detail-desk-cover{border-radius:0}
.device-screen .detail-automation,.device-screen .detail-social{padding:24px}
.device-screen .detail-demo .demo-controls{flex-wrap:wrap}
.device-screen .detail-social-photo{max-height:420px}
.device-demo[data-device=mobile] .device-frame{width:min(100%,344px);padding:30px 8px 12px;border-radius:38px;border:2px solid #4b555e;background:#1a2028;box-shadow:0 20px 40px -24px #102c4666}
.device-demo[data-device=mobile] .device-camera{width:56px;height:7px;top:11px;margin-left:-28px;border:0;border-radius:8px;background:#080f16}
.device-demo[data-device=mobile] .device-screen{aspect-ratio:9/17.5;border-radius:14px 14px 25px 25px}
.device-demo[data-device=mobile] .device-chin{width:30%;height:4px;border:0;border-radius:4px;background:#75828e;margin:8px auto -5px}
.device-demo[data-device=mobile] .device-stand{display:none}
@media(max-width:600px){
 .device-frame{padding:14px 7px 0;border-radius:15px 15px 10px 10px}
 .device-screen{aspect-ratio:4/3}
 .device-chin{height:22px;margin-inline:-7px;border-radius:0 0 9px 9px}
 .device-stand{height:46px;width:30%}
}
@container device-screen (max-width:700px){
 .detail-site-cover{display:flex;flex-direction:column;min-height:0}
 .detail-site-cover>img{height:235px;min-height:0}
 .detail-site-intro{padding:25px}
 .detail-site-nav{align-items:start;flex-direction:column;gap:6px;padding:18px}
 .detail-stay{gap:16px;padding:20px;flex-wrap:wrap}
 .detail-desk-cover{height:235px}
 .detail-desk-cover>div{left:16px;bottom:16px;padding:14px 16px}
 .detail-desk-cover strong{font-size:23px}
 .detail-desk-content{padding:22px 18px}
 .detail-demo .demo-controls{gap:7px}
 .detail-demo .demo-controls button{font-size:13px;padding:9px 14px}
 .detail-booking{display:block}
 .detail-booking>img{height:220px}
 .detail-booking-choice{padding:25px}
 .detail-automation .auto-step{grid-template-columns:36px 1fr;column-gap:16px}
 .detail-automation .node-letter{margin:0}
 .detail-automation .auto-step small{margin-top:12px}
 .detail-social-layout{grid-template-columns:1fr;gap:30px}
 .detail-social-photo{max-height:450px}
 .detail-calendar{padding:25px}
 .detail-management [data-workspace-rows]>div{flex-wrap:wrap}
 .detail-management .workspace-title{gap:9px}
 .detail-management .workspace-title .demo-label{margin-left:0}
 .detail-automation .automation-demo{display:block}
 .detail-automation .auto-step{display:grid}
 .device-content .detail-automation,.device-content .detail-social{padding:20px 14px}
 html[data-linud-type] .device-content .detail-site-intro h3{font-size:27px}
}