/* Depth pass II (Sam 2026-10-11, second read): "no backdrop behind the demos, it looks like a thick frame.
   Give the demo panels themselves depth. I like the phone card's dark blue: make the demos look like that.
   Take the grid out; try a perspective grid shaped like an empty room, barely there, lit by the mouse."
   Hand-written, loaded AFTER v2-light.css, so tools/v2_light_theme.py never touches it.
   - ISLANDS: every demo is wrapped in .island. On the light page the generator skips anything inside an
     island and the island gets navy dark tokens back (ISLAND in the generator). This file adds the navy
     surface and a real shadow (on the wrapper: the chamfered frames use clip-path).
   - THE ROOM: theme.js draws a perspective grid shaped like an empty room (.room) and a brighter copy
     under the mouse (.roomlit). It replaces the flat grid, the hero grid and the section grids. */

:root{--lift:0 2px 4px rgba(0,0,0,.25),0 22px 44px -10px rgba(0,0,0,.55)}
html.light{--lift:0 2px 6px rgba(16,22,48,.16),0 24px 48px -14px rgba(16,22,48,.45)}

/* ---------- islands ---------- */
/* Every theme: the demo casts a real shadow (on the wrapper; the chamfered frames use clip-path). */
.island{position:relative;filter:drop-shadow(0 26px 34px rgba(0,0,0,.4)) drop-shadow(0 3px 6px rgba(0,0,0,.25))}

/* LIGHT (Sam 2026-10-11, rev 4): "a white theme, just more depth". No dark panels on white.
   Depth from three things only: a white panel raised by a layered shadow, a cool-gray tray inside it,
   and white cards raised off the tray by small shadows instead of hairline borders. */
html.light .island{
  --panel:#FFFFFF;--panel2:#F4F6FA;--panel3:#ECEFF5;--line:#E2E6EE;--line2:#D3D9E4;
  --tray:linear-gradient(180deg,#F6F8FB,#EEF1F6);
  --raise:0 0 0 1px rgba(16,24,40,.05),0 1px 2px rgba(16,24,40,.06),0 4px 12px -4px rgba(16,24,40,.10);
  --raise-hi:0 0 0 1px rgba(51,85,224,.35),0 2px 4px rgba(16,24,40,.06),0 12px 24px -10px rgba(51,85,224,.35);
  filter:drop-shadow(0 1px 1px rgba(16,24,40,.06)) drop-shadow(0 18px 30px rgba(16,24,40,.13))}
/* the panel edge: a white top highlight falling to a soft gray, like a bevel; the mouse light stays */
html.light .island .frame{background:radial-gradient(260px circle at var(--mx,-999px) var(--my,-999px),rgba(51,85,224,.55),transparent 60%),linear-gradient(180deg,#FFFFFF,#D6DCE6)}
html.light .island :is(.frame>.in,.fdl-screen,.cel-panel),html.light .island>.tech-tree{background:var(--tray)}
html.light .island>.tech-tree{border-color:#D6DCE6;box-shadow:inset 0 1px 0 #fff}
html.light .island :is(.dm-side,.d-side){background:#FFFFFF;box-shadow:1px 0 0 #E2E6EE}
html.light .island .tree-toolbar,html.light .island .tree-detail{background:#FFFFFF}
/* raised white cards */
html.light .island :is(.dm-kpis button,.dm-kpis div,.dm-stages button,.dm-card,.dm-list,.dm-rec,.dm-col,.dm-mod,.dm-brain,
  .d-kpis div,.d-col,.d-chart,.d-task,.rp-cat,.rp-detail,.fdl-msg.bot,.fdl-slot.booked,.cel-row,.fdl-form){background:#FFFFFF;box-shadow:var(--raise)}
html.light .island :is(.dm-kpis button,.dm-stages button,.dm-card,.dm-mod,.rp-cat,.cel-row):hover{box-shadow:var(--raise-hi)}
html.light .island .cel-row[aria-pressed=true]{box-shadow:inset 3px 0 0 var(--blue),var(--raise-hi)}
html.light .island .fdl-slot.booked{box-shadow:inset 3px 0 0 var(--blue),var(--raise)}
html.light .island .tree-node:not(.root){background:#FFFFFF;border-color:#DCE1EA;color:#1A1A1A;box-shadow:var(--raise)}
/* light-theme ink for the bits drawn for dark */
html.light .fdl-live,html.light .fdl-slot.open,html.light .st.on,html.light .cel-chans em{color:#1C7C4A}
html.light .st.wait{color:#8A5A00}
html.light .fdl-num{color:#15181E}
html.light .fdl-num:hover{color:var(--blue)}
html.light .fdl-k{color:#596070}
html.light .fdl-try li{background:#FFFFFF;box-shadow:var(--raise);color:#3B414C}
html.light .fdl-wave i{background:linear-gradient(180deg,#7d95ff,#3355e0)}
html.light .fdl-slot.open{background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(47,191,113,.07) 6px 12px),#FAFDFB;box-shadow:inset 0 0 0 1px rgba(47,191,113,.4)}
html.light .fdl-slot.open:hover,html.light .fdl-slot.open:focus-visible{background:#2fbf71;color:#fff}
html.light .fdl-phone .fdl-screen{background:radial-gradient(100% 55% at 50% 0%,rgba(51,85,224,.12),transparent 65%),var(--tray)}
html.light .offer-block .island+.modular-note,html.light .offer-block .island+.offer-links{margin-top:26px}
.offer-block .try-cue+.island{margin-top:0}
.offer-block .offer-heading .num{display:inline-flex;align-items:center;gap:8px}
.offer-block .offer-heading .num::before{content:"";width:22px;height:2px;background:var(--blue)}

/* =====================================================================================
   FRONT DESK · three live demos
   ===================================================================================== */
.fdl{display:grid;grid-template-columns:1fr 1.2fr 1.3fr;gap:clamp(16px,2vw,28px);align-items:stretch}
.fdl-card{display:flex;flex-direction:column;gap:14px;margin:0;min-width:0}
.fdl-card>.lift{flex:1;display:flex}
.fdl-screen{flex:1;display:flex;flex-direction:column;gap:12px;padding:18px;background:var(--panel);color:var(--text);min-height:440px;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.fdl-card figcaption{font-size:17px;line-height:1.4;color:var(--muted);padding:0 4px}
.fdl-card figcaption b{color:var(--text);font-family:var(--head);font-size:19px;letter-spacing:.04em;text-transform:uppercase;font-weight:600;margin-right:4px}
.fdl-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.fdl-top em{font-style:normal;font-family:var(--head);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.fdl-who{display:flex;align-items:center;gap:10px;min-width:0}
.fdl-who b{display:block;font-family:var(--head);font-size:18px;letter-spacing:.03em;text-transform:uppercase;line-height:1.1}
.fdl-who small{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--dim)}
.fdl-who small i{width:7px;height:7px;border-radius:50%;background:#2fbf71;box-shadow:0 0 0 3px rgba(47,191,113,.2)}
.fdl-av{width:36px;height:36px;display:grid;place-items:center;background:var(--blue);color:#fff;flex-shrink:0}
.fdl-av svg{width:18px;height:18px}

/* phone: always a dark device, even on the light page */
.fdl-phone .fdl-screen{align-items:center;text-align:center}
.fdl-phone .fdl-top{width:100%}
.fdl-live{display:inline-flex;align-items:center;gap:7px;font-family:var(--head);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#8fe0b6}
.fdl-live i{width:8px;height:8px;border-radius:50%;background:#2fbf71;animation:fdlPulse 1.6s ease-out infinite}
@keyframes fdlPulse{0%{box-shadow:0 0 0 0 rgba(47,191,113,.6)}100%{box-shadow:0 0 0 10px rgba(47,191,113,0)}}
.fdl-avatar{margin-top:14px;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(160deg,#4a6af0,#2338a8);box-shadow:0 0 0 8px rgba(77,108,255,.14),0 0 0 18px rgba(77,108,255,.07),0 14px 30px -8px rgba(51,85,224,.8)}
.fdl-avatar svg{width:32px;height:32px}
.fdl-k{margin-top:10px;font-family:var(--head);font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:#aab6d8}
.fdl-num{font-family:var(--head);font-weight:600;font-size:clamp(30px,2.6vw,40px);letter-spacing:.02em;color:#fff;text-decoration:none;line-height:1}
.fdl-num:hover{color:#c9d3ff}
.fdl-wave{display:flex;align-items:center;justify-content:center;gap:4px;height:46px;margin:6px 0}
.fdl-wave i{width:4px;height:100%;background:linear-gradient(180deg,#9fb2ff,#4a6af0);transform:scaleY(.18);animation:fdlWave 1.3s ease-in-out infinite;animation-delay:var(--d)}
@keyframes fdlWave{0%,100%{transform:scaleY(.18)}50%{transform:scaleY(1)}}
.fdl-try{list-style:none;display:grid;gap:6px;width:100%;font-size:15px;color:#c3cad8}
.fdl-try li{padding:8px 10px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.fdl-try li::before{content:"“";color:#7d95ff;margin-right:4px}
.fdl-try li::after{content:"”";color:#7d95ff;margin-left:2px}
.fdl-go{margin-top:auto;width:100%;justify-content:center}
.fdl-go svg{width:18px;height:18px;margin-right:8px}
@media (prefers-reduced-motion:reduce){.fdl-wave i,.fdl-live i{animation:none}.fdl-wave i{transform:scaleY(.5)}}

/* chat */
.fdl-log{flex:1;min-height:200px;max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:4px 2px;scrollbar-width:thin}
.fdl-msg{max-width:88%;padding:11px 14px;font-size:16px;line-height:1.45}
.fdl-msg.bot{align-self:flex-start;background:var(--panel2);box-shadow:inset 0 0 0 1px var(--line)}
.fdl-msg.me{align-self:flex-end;background:var(--blue);color:#fff}
.fdl-msg.action{background:none;box-shadow:none;padding:0}
.fdl-book{display:inline-block;padding:9px 14px;background:var(--blue);color:#fff;font-family:var(--head);letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.fdl-msg.dots{display:flex;gap:5px;padding:14px}
.fdl-msg.dots i{width:7px;height:7px;border-radius:50%;background:var(--dim);animation:fdlDot 1s infinite}
.fdl-msg.dots i:nth-child(2){animation-delay:.15s}.fdl-msg.dots i:nth-child(3){animation-delay:.3s}
@keyframes fdlDot{0%,100%{opacity:.3}50%{opacity:1}}
.fdl-chips{display:flex;flex-wrap:wrap;gap:6px}
.fdl-chips[hidden]{display:none}
.fdl-chip{font:inherit;font-size:14px;padding:7px 11px;border:0;cursor:pointer;color:var(--pale);background:rgba(51,85,224,.12);box-shadow:inset 0 0 0 1px rgba(51,85,224,.35)}
.fdl-chip:hover{background:rgba(51,85,224,.22)}
.fdl-form{display:flex;gap:0;box-shadow:inset 0 0 0 1px var(--line2);background:var(--panel)}
.fdl-form:focus-within{box-shadow:inset 0 0 0 2px var(--blue)}
.fdl-in{flex:1;min-width:0;border:0;background:none;color:var(--text);font:inherit;font-size:16px;padding:12px 14px;outline:none}
.fdl-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fdl-form button{border:0;background:var(--blue);color:#fff;width:48px;cursor:pointer;display:grid;place-items:center}
.fdl-form button svg{width:18px;height:18px}
.fdl-status{font-size:14px;color:#d9534f;min-height:0}
.fdl-status:empty{display:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* calendar */
.fdl-days{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;flex:1}
.fdl-day{display:flex;flex-direction:column;gap:6px;min-width:0}
.fdl-dh{text-align:center;padding:4px 0 6px}
.fdl-dh small{display:block;font-family:var(--head);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.fdl-dh b{font-family:var(--head);font-size:24px;line-height:1}
.fdl-slot{flex:1;min-height:76px;display:flex;flex-direction:column;gap:3px;padding:8px 7px;font-size:13px;line-height:1.25;text-decoration:none}
.fdl-slot small{font-family:var(--head);font-size:13px;letter-spacing:.04em;font-weight:600}
.fdl-slot.booked{background:linear-gradient(180deg,rgba(51,85,224,.16),rgba(51,85,224,.08));box-shadow:inset 3px 0 0 var(--blue);color:var(--text)}
.fdl-slot.booked b{font-weight:500;font-size:13px}
.fdl-slot.booked span{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fdl-slot.open{background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(47,191,113,.06) 6px 12px);box-shadow:inset 0 0 0 1px rgba(47,191,113,.45);color:#8fe0b6;transition:transform .18s var(--ease),box-shadow .18s,background .18s}
.fdl-slot.open span{font-family:var(--head);letter-spacing:.06em;text-transform:uppercase;font-size:13px}
.fdl-slot.open:hover,.fdl-slot.open:focus-visible{background:#2fbf71;color:#fff;transform:translateY(-2px);box-shadow:0 10px 20px -8px rgba(47,191,113,.7);outline:none}
.fdl-slot.open:hover span::after,.fdl-slot.open:focus-visible span::after{content:" · Book"}
.fdl-legend{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--dim)}
.fdl-legend span{display:inline-flex;align-items:center;gap:6px}
.fdl-legend i{width:12px;height:12px}
.fdl-legend i.b{background:rgba(51,85,224,.3);box-shadow:inset 2px 0 0 var(--blue)}
.fdl-legend i.o{box-shadow:inset 0 0 0 1px rgba(47,191,113,.7)}

/* the CRM line under all three */
.fdl-crm{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding:14px 18px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);font-size:16px;color:var(--muted)}
.fdl-crm span{display:inline-flex;align-items:center;gap:8px}
.fdl-crm svg{width:17px;height:17px;color:#2fbf71}
.fdl-crm-k{font-family:var(--head);font-size:18px;letter-spacing:.06em;text-transform:uppercase;color:var(--text)}
.fdl-crm-k svg{color:var(--blue)}

@media (max-width:1100px){.fdl{grid-template-columns:1fr 1fr}.fdl-phone{grid-column:1 / -1}.fdl-phone .fdl-screen{min-height:0}}
@media (max-width:720px){.fdl{grid-template-columns:1fr}.fdl-screen{min-height:0}.fdl-days{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
  .fdl-slot{min-height:64px;padding:6px 4px;font-size:12px}.fdl-slot.booked span,.fdl-slot.booked b{display:none}.fdl-slot.booked::after{content:"Booked";font-size:12px;color:var(--muted)}
  .fdl-slot.open:hover span::after{content:""}}

/* =====================================================================================
   CONTENT · the week, on a phone (rev 2, Sam 2026-10-12: "improve the posts on the phone, a couple of carousels,
   possibly a video; all the little details matter"). Posts are drawn like a real feed: status bar, profile,
   photo / carousel / short video, actions, caption, schedule. Same post markup on the phone and the /content wall.
   ===================================================================================== */
.cel{display:grid;grid-template-columns:minmax(280px,360px) 1fr;gap:clamp(18px,3vw,40px);align-items:center}
.cel-phone{display:flex;flex-direction:column;align-items:center;gap:12px}
.cel-phone>.lift{width:100%;border-radius:44px;padding:11px;background:linear-gradient(160deg,#3a404c,#14171d 60%);
  box-shadow:var(--lift),inset 0 0 0 1px rgba(255,255,255,.14),inset 0 0 0 3px #0c0e12}
.cel-screen{position:relative;border-radius:34px;overflow:hidden;background:#fff;color:#111;height:640px;display:flex;flex-direction:column}
.cel-cap{font-size:14px;color:var(--muted);letter-spacing:.02em;text-align:center}
.ph-status{display:flex;justify-content:space-between;align-items:center;padding:12px 22px 4px;font-size:13px;color:#111}
.ph-status b{font-weight:600;font-family:var(--body)}
.ph-status span{display:flex;gap:5px;align-items:center}
.ph-status i{display:block;background:#111}
.ph-status .sig{width:15px;height:9px;clip-path:polygon(0 100%,100% 0,100% 100%)}
.ph-status .wifi{width:13px;height:9px;border-radius:13px 13px 0 0;clip-path:polygon(50% 100%,0 0,100% 0)}
.ph-status .bat{width:22px;height:10px;border-radius:3px;background:linear-gradient(90deg,#111 75%,transparent 75%);box-shadow:inset 0 0 0 1.5px #111}
.ph-app{display:flex;align-items:center;justify-content:space-between;padding:6px 16px 8px;border-bottom:1px solid #eef0f3;font-size:15px}
.ph-app b{font-weight:600}
.ph-app span:first-child{font-size:24px;line-height:1;color:#555}
.ph-dot{width:24px}
.ph-feed{flex:1;overflow:hidden;position:relative}

/* ---------- a post ---------- */
.po{display:flex;flex-direction:column;background:#fff;color:#111;animation:celIn .35s var(--ease)}
.po[hidden]{display:none}
@keyframes celIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.po-head{display:flex;align-items:center;gap:10px;padding:10px 12px}
.po-av{width:34px;height:34px;border-radius:50%;padding:2px;background:conic-gradient(#f59e0b,#ef4444,#d946ef,#f59e0b);flex-shrink:0}
.po-av span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:#0f3b5f;color:#fff;font-family:var(--head);font-size:13px;letter-spacing:.04em;box-shadow:0 0 0 2px #fff}
.po-who{flex:1;min-width:0;line-height:1.2}
.po-who b{display:block;font-size:14px;font-weight:600}
.po-who small{font-size:12px;color:#6b7280}
.po-more{color:#6b7280;letter-spacing:1px;font-size:11px}
.po-media{position:relative;aspect-ratio:1;overflow:hidden;background:#f3f4f6}
.po-track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.po-track::-webkit-scrollbar{display:none}
.po-slide{flex:0 0 100%;height:100%;scroll-snap-align:start;position:relative}
.po-count{position:absolute;top:10px;right:10px;padding:3px 9px;border-radius:999px;background:rgba(17,17,17,.7);color:#fff;font-size:12px;font-weight:600;pointer-events:none}
.po-arr{position:absolute;top:50%;width:28px;height:28px;margin-top:-14px;border:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  background:rgba(255,255,255,.92);color:#111;font-size:20px;line-height:1;box-shadow:0 2px 8px rgba(0,0,0,.25);opacity:0;transition:opacity .2s}
.po-arr.prev{left:8px}.po-arr.next{right:8px}
.po-arr[hidden]{display:none}
.po-media:hover .po-arr,.po-arr:focus-visible{opacity:1}
@media (hover:none){.po-arr{opacity:.85}}
.po-acts{display:flex;align-items:center;justify-content:space-between;padding:9px 12px 2px;color:#111}
.po-acts>span:first-child{display:flex;gap:14px}
.po-acts svg{width:23px;height:23px}
.po-dots{display:flex;gap:4px;position:absolute;left:50%;transform:translateX(-50%)}
.po-acts{position:relative}
.po-dots i{width:6px;height:6px;border-radius:50%;background:#cfd4dc;transition:background .2s,transform .2s}
.po-dots i.on{background:#3355e0;transform:scale(1.15)}
.po-likes{padding:2px 12px;font-size:13px;font-weight:600}
.po-likes.dim{font-weight:400;color:#9ca3af}
.po-cap{padding:2px 12px;font-size:13.5px;line-height:1.4;color:#222;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cw-card .po-cap{-webkit-line-clamp:3}
.po-cap b{font-weight:600}
.po-tags{color:#2b5bd7}
.po-sched{display:flex;align-items:center;gap:5px;margin:8px 12px 12px;padding:6px 9px;border-radius:10px;background:#f3f5f9;font-size:12px;color:#4b5563}
.po-sched span{margin-left:4px}
.po-sched .ch{width:20px;height:20px;font-size:9px}

/* ---------- slide art (all drawn, no stock photos) ---------- */
.sl{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:20px;overflow:hidden}
.sl h4{font-family:var(--head);font-weight:700;text-transform:uppercase;line-height:1.02;letter-spacing:.01em;text-wrap:balance;position:relative;z-index:1}
.sl small{font-family:var(--head);font-size:13px;letter-spacing:.12em;text-transform:uppercase;position:relative;z-index:1}
.sl-cover{background:radial-gradient(120% 90% at 85% 10%,#4b6cf0,#1c2f8f 70%);color:#fff}
.sl-cover h4{font-size:31px;margin-top:6px}
.sl-cover small{opacity:.85}
.sl-swipe{margin-top:14px;display:inline-flex;align-items:center;gap:8px;font-family:var(--head);font-size:14px;letter-spacing:.1em;text-transform:uppercase;opacity:.9;position:relative;z-index:1}
.sl-swipe i{width:30px;height:2px;background:#fff;position:relative;animation:slNudge 1.6s var(--ease) infinite}
.sl-swipe i::after{content:"";position:absolute;right:-1px;top:-4px;width:8px;height:8px;border-top:2px solid #fff;border-right:2px solid #fff;transform:rotate(45deg)}
@keyframes slNudge{0%,100%{transform:none}50%{transform:translateX(6px)}}
.sl-ring{position:absolute;right:-40px;top:-40px;width:190px;height:190px;border-radius:50%;box-shadow:0 0 0 22px rgba(255,255,255,.08),0 0 0 54px rgba(255,255,255,.05);background:rgba(255,255,255,.12)}
.sl-sign{background:#f6f2ea;color:#1b1b1b;justify-content:center;gap:8px}
.sl-n{position:absolute;top:14px;left:18px;font-family:var(--head);font-weight:700;font-size:86px;line-height:1;color:#e7ddcb}
.sl-ic{width:58px;height:58px;color:#3355e0;margin-top:30px}
.sl-sign h4{font-size:30px}
.sl-sign p{font-size:15px;line-height:1.35;color:#444;max-width:28ch}
.sl-sign em,.sl-cta em{position:absolute;bottom:14px;right:16px;font-style:normal;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#9a8f7b}
.sl-cta{background:linear-gradient(170deg,#12161d,#25303f);color:#fff;justify-content:center;gap:12px}
.sl-cta small{color:#9fb2ff}
.sl-cta h4{font-size:30px}
.sl-cta em{color:#7f8aa0}
.sl-btn{align-self:flex-start;padding:9px 14px;border-radius:999px;background:#3355e0;color:#fff;font-size:14px;font-weight:600;position:relative;z-index:1}
.sl-compare .cmp-a,.sl-compare .cmp-b{position:absolute;inset:0}
.sl-compare svg{width:100%;height:100%;display:block}
.sl-compare .cmp-b{clip-path:inset(0 0 0 var(--pos))}
.sl-compare b{position:absolute;top:44px;font-family:var(--head);font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;border-radius:6px;background:rgba(0,0,0,.55);color:#fff}
.cmp-a b{left:12px}.cmp-b b{right:12px}
.cmp-bar{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 6px rgba(0,0,0,.4);pointer-events:none}
.cmp-bar span{position:absolute;top:50%;left:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.cmp-bar span::before{content:"‹ ›";position:absolute;inset:0;display:grid;place-items:center;font-size:14px;font-weight:700;color:#333;letter-spacing:2px}
.cmp-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;touch-action:pan-y}
.sl-foot{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.65));color:#fff;font-size:14px;font-weight:600;pointer-events:none}
.sl-day{background:linear-gradient(160deg,#20303f,#0f1820);color:#fff;gap:10px}
.sl-day .sl-ic{color:#7dd3a8;margin:0}
.sl-day h4{font-size:27px}
.sl-tag{position:absolute;top:14px;left:14px;padding:4px 10px;border-radius:999px;background:#fff;color:#111;font-family:var(--head);font-size:13px;letter-spacing:.08em;text-transform:uppercase;z-index:1}
.sl-panel{padding:0}
.sl-panel svg{width:100%;height:100%;display:block}
.sl-review{background:#fff;color:#111;justify-content:center;gap:10px;box-shadow:inset 0 0 0 10px #f3f5f9}
.sl-review small{color:#4285f4}
.sl-stars{color:#f5b400;font-size:24px;letter-spacing:3px}
.sl-review h4{font-family:var(--body);text-transform:none;font-weight:600;font-size:21px;line-height:1.3;letter-spacing:0}
.sl-review em{font-style:normal;font-size:14px;color:#6b7280}
.sl-season{background:linear-gradient(175deg,#f7b267 0%,#e36b2c 55%,#8e2b1f);color:#fff;justify-content:flex-start;gap:8px}
.sl-season h4{font-size:32px;max-width:9ch}
.sl-season .sl-btn{background:#fff;color:#8e2b1f;margin-top:6px}
.sl-sun{position:absolute;right:26px;top:40px;width:70px;height:70px;border-radius:50%;background:#ffe2a8;box-shadow:0 0 0 14px rgba(255,226,168,.25)}
.sl-hills{position:absolute;left:-10%;right:-10%;bottom:-30px;height:90px;border-radius:50% 50% 0 0;background:#6b2318;box-shadow:120px -14px 0 -10px #7f2b1d}

/* ---------- a short video (drawn: scenes, captions, progress) ---------- */
.po-reel{position:relative;flex:none;aspect-ratio:9/14;overflow:hidden;background:#111;color:#fff;cursor:pointer;outline:none}
.ph-feed .po-reel{aspect-ratio:auto;height:calc(640px - 192px)}
.rl-bars{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:4px;z-index:3}
.rl-bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.rl-bars b{display:block;height:100%;width:0;background:#fff}
.rl-scene{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:28px 22px 90px;opacity:0;transition:opacity .45s var(--ease)}
.rl-scene.on{opacity:1}
.rl-scene h4{font-family:var(--head);font-weight:700;font-size:34px;line-height:1.02;text-transform:uppercase;text-wrap:balance;transform:translateY(14px);transition:transform .6s var(--ease)}
.rl-scene p{margin-top:12px;font-size:16px;line-height:1.35;max-width:24ch;opacity:0;transform:translateY(10px);transition:opacity .5s .25s,transform .5s .25s var(--ease)}
.rl-scene.on h4{transform:none}
.rl-scene.on p{opacity:.92;transform:none}
.rl-q{background:radial-gradient(90% 60% at 30% 20%,#3a4a9c,#141a33)}
.rl-q h4::before{content:"?";display:block;width:58px;height:58px;margin-bottom:14px;border-radius:50%;background:#f59e0b;color:#111;text-align:center;line-height:58px;font-size:40px}
.rl-a{background:radial-gradient(90% 60% at 70% 30%,#0f766e,#0b2421)}
.rl-tip{background:radial-gradient(90% 60% at 50% 20%,#9a3412,#2a0f08)}
.rl-tip h4::before{content:"Mon to Fri";display:inline-block;margin-bottom:12px;padding:5px 10px;border-radius:8px;background:#fff;color:#9a3412;font-size:16px;letter-spacing:.06em}
.rl-cta{background:radial-gradient(90% 60% at 50% 30%,#3355e0,#101a4a)}
.rl-cta h4::after{content:"Book now";display:block;width:max-content;margin-top:16px;padding:9px 16px;border-radius:999px;background:#fff;color:#2338a8;font-size:16px;letter-spacing:.06em}
.rl-tag{position:absolute;top:22px;left:12px;z-index:3;display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;background:rgba(0,0,0,.45);font-size:12px;font-weight:600}
.rl-tag svg{width:11px;height:11px;fill:#fff}
.rl-mute{position:absolute;top:22px;right:12px;z-index:3;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.45)}
.rl-mute svg{width:15px;height:15px}
.rl-rail{position:absolute;right:10px;bottom:84px;z-index:3;display:flex;flex-direction:column;gap:16px}
.rl-rail svg{width:25px;height:25px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.rl-foot{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:30px 52px 14px 14px;background:linear-gradient(transparent,rgba(0,0,0,.7));font-size:13px;line-height:1.35}
.rl-foot b{display:block;font-weight:600;margin-bottom:2px}
.rl-paused{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.45);z-index:4;opacity:0;transition:opacity .2s;pointer-events:none}
.rl-paused svg{width:26px;height:26px;fill:#fff;stroke:none;margin-left:4px}
.po-reel.paused .rl-paused{opacity:1}
.po-reel:focus-visible{box-shadow:inset 0 0 0 3px #7d95ff}
.po-reel+.po-sched{margin-top:10px}
@media (prefers-reduced-motion:reduce){.sl-swipe i{animation:none}.rl-scene,.rl-scene h4,.rl-scene p{transition:none}}

/* ---------- the week panel ---------- */
.cel-week{min-width:0}
.cel-panel{background:var(--panel);color:var(--text);padding:clamp(16px,2vw,24px);clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.cel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.cel-head b{display:block;font-family:var(--head);font-size:22px;letter-spacing:.03em;text-transform:uppercase}
.cel-head small{font-size:14px;color:var(--dim)}
.cel-approve{white-space:nowrap}
.cel-approve:disabled{opacity:.7;cursor:default}
.cel-rows{display:grid;gap:8px;margin:14px 0}
.cel-row{display:grid;grid-template-columns:62px 1fr auto;align-items:center;gap:14px;width:100%;text-align:left;font:inherit;color:inherit;border:0;cursor:pointer;
  padding:12px 14px;background:var(--panel2);box-shadow:inset 0 0 0 1px var(--line);transition:transform .18s var(--ease),box-shadow .18s}
.cel-row:hover{transform:translateX(3px)}
.cel-row[aria-pressed=true]{box-shadow:inset 3px 0 0 var(--blue),0 0 0 1px var(--blue),0 10px 24px -12px rgba(51,85,224,.55)}
.cel-row .d{font-size:13px;color:var(--dim);line-height:1.2}
.cel-row .d b{display:block;font-family:var(--head);font-size:20px;color:var(--text);letter-spacing:.04em;text-transform:uppercase}
.cel-row .t{font-size:16px;line-height:1.3;min-width:0}
.cel-row .t small{display:flex;align-items:center;gap:8px;font-family:var(--head);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--pale)}
.fmt{font-style:normal;padding:1px 7px;border-radius:999px;font-size:11px;letter-spacing:.06em;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line2)}
.fmt-reel{color:#f59e0b;box-shadow:inset 0 0 0 1px rgba(245,158,11,.5)}
.fmt-carousel{color:var(--blue-hi);box-shadow:inset 0 0 0 1px rgba(125,149,255,.5)}
html.light .fmt-reel{color:#b45309}
html.light .fmt-carousel{color:#2641b5}
.cel-row .r{display:flex;align-items:center;gap:6px}
.ch{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;font-style:normal;font-family:var(--head);font-size:11px;font-weight:600;color:#fff;letter-spacing:0}
.ch-f{background:#1877f2}.ch-ig{background:linear-gradient(45deg,#f58529,#dd2a7b 50%,#8134af)}.ch-g{background:#34a853}.ch-in{background:#0a66c2}.ch-tt{background:#111;box-shadow:inset 0 0 0 1px #444}
.st{display:inline-flex;align-items:center;gap:5px;margin-left:6px;font-family:var(--head);font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;white-space:nowrap}
.st svg{width:13px;height:13px}
.st.on{color:#8fe0b6;background:rgba(47,191,113,.12)}
.st.wait{color:#f2c063;background:rgba(231,160,8,.14)}
.cel-chans{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding-top:14px;border-top:1px solid var(--line);font-size:15px}
.cel-chans small{width:100%;font-family:var(--head);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.cel-chans span{display:inline-flex;align-items:center;gap:7px}
.cel-chans em{font-style:normal;font-size:12px;color:#8fe0b6;padding-left:2px}

/* ---------- the wall of examples (/content) ---------- */
.cw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px);align-items:start}
.cw-card{margin:0;min-width:0}
.cw-card>.lift{border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(16,24,40,.06),0 2px 4px rgba(16,24,40,.06),0 22px 44px -18px rgba(16,24,40,.35)}
html:not(.light) .cw-card>.lift{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 22px 44px -16px rgba(0,0,0,.7)}
.cw-card .po-reel{aspect-ratio:4/5}
.cw-card figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:14px 4px 0}
.cw-card figcaption b{font-family:var(--head);font-size:20px;font-weight:600;letter-spacing:.03em;text-transform:uppercase}
.cw-card figcaption span{font-size:15px;color:var(--muted)}

@media (max-width:1100px){.cw{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.cel{grid-template-columns:1fr}.cel-phone{max-width:360px;margin:0 auto;width:100%}
  .cel-row{grid-template-columns:50px 1fr}.cel-row .r{grid-column:2}.cel-head{flex-direction:column}}
@media (max-width:640px){.cw{grid-template-columns:1fr;max-width:420px;margin:0 auto}}
@media (max-width:420px){.cel-screen{height:590px}.ph-feed .po-reel{height:calc(590px - 192px)}}