/* The demo theater. Pick a business, then a surface (website, client portal, owner hub).
   The laptop shows the desktop version, the phone shows the mobile version of the same thing.
   The screens are live pages in frames, drawn at 1440x900 and 390x844 and scaled to fit by theater.js. */
.theater{--stage:#E4DED7}
.th-tabs{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:0 0 18px}
.th-tab{display:flex;align-items:center;gap:12px;background:var(--white);border:1px solid var(--line);padding:12px 22px 12px 12px;min-height:62px;cursor:pointer;font:inherit;color:var(--ink);text-align:left;transition:border-color .2s,box-shadow .2s,transform .2s}
.th-tab:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(63,61,68,.08)}
.th-tab[aria-selected=true]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.th-tab .dot{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.th-tab .dot svg{width:20px;height:20px}
.th-tab b{display:block;font-family:var(--serif);font-weight:500;font-size:21px;line-height:1.1}
.th-tab small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze-t)}
.dot.pz{background:#B8412C;color:#FBF3E6}.dot.sl{background:#6E7F6A;color:#F5EFE9}.dot.rf{background:#1F3A4D;color:#F4F1EC}
.th-views{display:flex;justify-content:center;gap:0;margin:0 auto 26px;background:var(--white);border:1px solid var(--line);width:max-content;max-width:100%;padding:5px;border-radius:999px;overflow-x:auto}
.th-view{font:inherit;font-size:12px;letter-spacing:.14em;text-transform:uppercase;background:none;border:0;color:var(--ink2);padding:0 22px;min-height:44px;border-radius:999px;cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:8px;transition:background .25s,color .25s}
.th-view:hover{color:var(--ink)}
.th-view[aria-selected=true]{background:var(--ink);color:var(--ivory)}
.th-view i{font-style:normal;font-size:10px;opacity:.6}

.th-stage{position:relative;background:radial-gradient(ellipse at 50% 100%,#D9D1C8 0%,var(--stage) 55%,#EDE8E2 100%);border:1px solid var(--line);padding:58px 44px 40px;overflow:hidden}
.th-stage::before{content:"";position:absolute;inset:auto 10% 26px 10%;height:40px;background:radial-gradient(ellipse,rgba(63,61,68,.22),transparent 70%);filter:blur(6px)}
.th-row{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:3.2%}
.th-note{position:absolute;top:20px;left:26px;right:26px;display:flex;justify-content:space-between;gap:16px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-t)}
.th-note b{color:var(--wine);font-weight:600}
.th-reset{font:inherit;font-size:11px;letter-spacing:.16em;text-transform:uppercase;background:none;border:0;color:var(--ink);cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0}
.dev-cap{margin:16px 0 0;text-align:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze-t)}
.th-hint{text-align:center;margin:26px auto 0;max-width:720px;font-size:16px;color:var(--ink2);min-height:26px}
.th-hint b{color:var(--ink);font-weight:600}

/* ---------- Devices: a MacBook-style laptop and a titanium iPhone, standing straight, face on.
   The laptop screen is a true 1440x900 desktop and the phone a true 390x844 screen. ---------- */
.lap{flex:1 1 0;min-width:0}
.ph{flex:0 0 21.5%;min-width:230px;max-width:380px}
.lap-lid{position:relative;padding:2.2% 2.2% 2.8%;border-radius:22px 22px 6px 6px;background:linear-gradient(145deg,#E7E8EA 0%,#C9CACE 45%,#B6B7BC 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),inset 0 -2px 3px rgba(0,0,0,.12),0 40px 70px -20px rgba(40,36,44,.45)}
.lap-lid::before{content:"";position:absolute;inset:1.1% 1.1% 1.5%;border-radius:16px 16px 4px 4px;background:#0D0D10}
.lap-cam{position:absolute;top:1.6%;left:50%;width:58px;height:14px;margin-left:-29px;border-radius:0 0 10px 10px;background:#0D0D10;z-index:3}
.lap-cam::after{content:"";position:absolute;left:50%;top:3px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#26262B;box-shadow:inset 0 0 0 1.5px #3A3A42}
.lap-bar{position:relative;z-index:2;display:flex;align-items:center;gap:6px;background:linear-gradient(#F3F3F4,#E4E4E6);border-radius:8px 8px 0 0;padding:7px 12px;border-bottom:1px solid #D2D2D6}
.lap-bar i{width:10px;height:10px;border-radius:50%}
.lap-bar i:nth-child(1){background:#FF5F57}.lap-bar i:nth-child(2){background:#FEBC2E}.lap-bar i:nth-child(3){background:#28C840}
.lap-url{margin:0 auto;width:44%;background:#fff;color:#555;font-size:11.5px;padding:3px 12px;border-radius:6px;text-align:center;transform:translateX(-20px);box-shadow:inset 0 0 0 1px #DADADE}
.lap-view{position:relative;z-index:2;overflow:hidden;border-radius:0 0 4px 4px;background:#fff}
.lap-base{position:relative;height:18px;margin:0 -7%;border-radius:2px 2px 16px 16px/2px 2px 12px 12px;background:linear-gradient(#D9DADD 0%,#C4C5C9 40%,#9FA0A5 100%);box-shadow:0 18px 30px -12px rgba(40,36,44,.45)}
.lap-base::before{content:"";position:absolute;left:50%;top:0;width:15%;height:7px;margin-left:-7.5%;border-radius:0 0 10px 10px;background:linear-gradient(#A8A9AE,#BDBEC2)}
.lap-base::after{content:"";position:absolute;left:3%;right:3%;bottom:-3px;height:3px;border-radius:0 0 50% 50%;background:rgba(0,0,0,.18)}
.lap-scaler,.ph-scaler{transform-origin:top left;position:absolute;top:0;left:0}
.lap-scaler{width:1440px;height:900px}
.lap-scaler.app.compact,.lap-scaler.toast.compact{width:1120px;height:700px}
.lap-scaler.toast{pointer-events:none}
.ph-body{position:relative;border-radius:54px;padding:12px;background:#111114;box-shadow:inset 0 0 0 2px #6E6D72,inset 0 0 0 4px #1B1B1F,9px 0 0 -1px #8D8C91,10px 2px 0 -1px #5F5E63,0 36px 60px -14px rgba(40,36,44,.5)}
.ph-body::before,.ph-body::after{content:"";position:absolute;right:-12px;width:4px;border-radius:0 3px 3px 0;background:linear-gradient(90deg,#8D8C91,#6A696E)}
.ph-body::before{top:150px;height:70px}
.ph-body::after{top:96px;height:34px}
.ph-view{position:relative;overflow:hidden;border-radius:43px;background:#fff}
.ph-scaler{width:390px;height:844px}
/* live pages in the frames */
.rl-frame{display:block;border:0;background:#FBF4EA;width:100%;height:100%}
.lap-scaler.app>.rl-frame{width:1440px;height:900px}
.is-real .lap-scaler.toast{display:none}
.scr.rl{background:#221A16}
.scr.rl .rl-frame{flex:1;height:auto;width:390px}
.rl-status{flex-shrink:0;background:#221A16;color:#fff}
.rl-status .ph-status{color:#fff}
.theater[data-surface=hub] .rl-status,.theater[data-surface=hub] .scr.rl{background:#F4F1EC}
.theater[data-surface=hub] .rl-status .ph-status{color:#1D1917}
/* ---------- Shared screen parts ---------- */
.scr{position:absolute;inset:0;display:flex;flex-direction:column;font-family:var(--sans);color:#222;overflow:hidden}
.scr h1,.scr h2,.scr h3,.scr h4{font-family:inherit;line-height:1.15;font-weight:800;margin:0}
.scr p{margin:0}
.ph-status{height:54px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:10px 34px 0;font-size:16px;font-weight:600;position:relative;z-index:3}
.ph-island{position:absolute;left:50%;top:12px;width:122px;height:36px;margin-left:-61px;background:#000;border-radius:20px}
.ph-sig{display:flex;gap:6px;align-items:center}
.ph-sig i{display:block;width:18px;height:10px;border:1.5px solid currentColor;border-radius:3px;position:relative}
.ph-sig i::after{content:"";position:absolute;inset:1.5px 4px 1.5px 1.5px;background:currentColor;border-radius:1px}
.ph-home{position:absolute;bottom:8px;left:50%;width:134px;height:5px;margin-left:-67px;background:rgba(0,0,0,.8);border-radius:3px;z-index:5}
@media (max-width:980px){
  .th-stage{padding:56px 16px 30px}
  .th-row{flex-direction:column-reverse;align-items:center;gap:28px}
  .lap{width:100%;flex:none;transform:none}
  .ph{flex:none;width:290px;min-width:0;transform:none}
  .th-note{flex-direction:column;gap:4px}
  .th-view{padding:0 14px;font-size:11px}
}
@media (max-width:640px){
  .th-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .th-tab{flex-direction:column;align-items:center;text-align:center;padding:10px 6px;gap:6px}
  .th-tab small{display:none}
  .th-tab b{font-size:17px}
  .th-views{display:grid;grid-template-columns:1fr 1fr;width:100%;border-radius:16px;gap:4px}
  .th-view{justify-content:center;border-radius:12px;padding:0 8px;font-size:10.5px;letter-spacing:.1em}
}
.d-juniper .rl-status,.d-juniper .scr.rl{background:#2E2A27}
.d-oakline .rl-status,.d-oakline .scr.rl{background:#14293B}
.theater[data-surface=hub] .rl-status,.theater[data-surface=hub] .scr.rl{background:#F4F1EC}