/* ============================================================================
   ORCA DEVS — home.css   (home page only)
   ========================================================================== */

/* ------------------------------------------------------------------- hero
   One hero, not two. The previous version stacked an absolutely-positioned
   840px stage on top of a grid hero, so both fought each other and neither
   survived a resize. This is a single centred column: copy, buttons, then the
   live preview underneath, with the loose objects placed around it at runtime. */
.hero{
  position:relative;
  /* the bar is only 44px, so the old clamp was adding up to 78px of dead air
     on top of it and pushing the headline down the page */
  padding-top:calc(var(--bar) + clamp(18px,2.4vw,34px));
  padding-bottom:clamp(34px,4vw,58px);
  overflow:hidden;          /* a thrown sticker must not grow the page */
  isolation:isolate;
}

/* ============================================================================
   THE BASE RULES FOR THE FLOATING LAYER.
   These went missing in an earlier edit, and without them .stick-layer was a
   normal block: every window, widget and icon sat in the document flow and
   shoved the headline hundreds of pixels down the page. This is the fix for
   the "why is everything so far down" problem.
   ========================================================================== */
.stick-layer{
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;   /* only the objects themselves take clicks */
  overflow:hidden;       /* a thrown object must not grow the page */
}
.stick{
  position:absolute;
  transform-origin:center;
  user-select:none; -webkit-user-select:none;
  background:none; border:0; padding:0;
}
/* An <img> is natively draggable in HTML. Since we stopped calling
   preventDefault on controls (so their clicks survive), the browser started
   its own image-drag instead of ours — which is why some icons could not be
   moved. Killing native drag on the artwork fixes those. */
.stick img, .stick svg{ -webkit-user-drag:none; user-drag:none; pointer-events:none }
.stick-layer.live .stick{ pointer-events:auto; cursor:grab; touch-action:none }
.stick-layer.live .stick.held{
  cursor:grabbing;
  filter:drop-shadow(0 16px 28px rgba(5,12,15,.24));
}
.stick.held{ transition:none !important }
@media (max-width:1000px){ .stick-layer{ display:block } }

.hero-inner{
  display:grid; justify-items:center; gap:clamp(22px,3vw,34px);
  text-align:center; position:relative; z-index:4;
}
h1.hero-title{
  font-size:clamp(2.4rem,6.2vw,4.6rem);
  max-width:16ch;
}

/* "websites" gets crossed out — the line draws itself once the headline has
   landed, so you read the word first and then watch it get corrected. */
.struck{
  position:relative; text-decoration:none;
  color:var(--ink-3);
}
.struck::after{
  content:""; position:absolute;
  left:-.04em; right:-.04em; top:54%;
  height:.075em; border-radius:2px;
  background:#B4413A;
  transform:scaleX(0); transform-origin:left center;
  animation:strike .5s var(--ease) 1.15s forwards;
}
@keyframes strike{ to{ transform:scaleX(1) } }
@media (prefers-reduced-motion:reduce){
  .struck::after{ transform:scaleX(1); animation:none }
}
.line{ display:block; overflow:hidden; padding-bottom:.06em }
.line > span{ display:block }

.hero-sub{
  font-size:clamp(1.02rem,1.4vw,1.18rem);
  line-height:1.62; color:var(--ink-2);
  max-width:56ch;
}
.hero-sub b{ color:var(--ink); font-weight:600 }

.hero-cta{ display:flex; flex-wrap:wrap; gap:16px 20px; justify-content:center; align-items:start }

/* the live window under the fold-line */
.hero-preview .frame{ box-shadow:var(--sh-4) }
.hero-cap{
  display:block; margin-top:10px; text-align:center;
  font-family:var(--mono); font-size:11px; color:var(--ink-3);
}

/* ---------------------------------------------------------- hero slideshow
   Three live deployments in one window. Only the visible slide is in flow, so
   the embed loader mounts an iframe when a slide is shown and leaves the other
   two alone — three live sites never render at once. */
/* Slides stack rather than swap. Hiding with display:none made the embed
   loader treat a slide as off-screen and tear its iframe down, so every
   switch reloaded the site from scratch. Once a slide has been shown it stays
   mounted and merely fades, which is why the second visit is instant.
   A slide that has never been opened keeps `dormant`, so we still only load
   one site up front instead of three. */
/* The window itself resizes to the shape of the thing it is showing: wide for
   a desktop site, narrow for a phone app. Width and height both animate, so
   switching slides looks like a window being resized rather than a crossfade. */
/* ---------------------------------------------------------------- motion
   Two curves do all the work here.

   --ease-out-q is a quintic ease-out: it leaves fast and settles slowly, which
   is what makes a resizing window feel like it has weight rather than like a
   linear tween. --ease-spring overshoots by a hair on the way in.

   The old version ran everything on one .35s ease and started the fade and the
   resize at the same instant, so the incoming site was already fully opaque
   while the frame was still growing underneath it — which is the "cheap" look.
   Now the frame leads and the content follows it in. */
.hero-preview{
  --ease-out-q:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.3,.42,1);
  position:relative;
  width:100%;
  max-width:var(--slide-w, 940px);
  margin-inline:auto;
  margin-top:clamp(8px,2vw,20px);
  transition:max-width .62s var(--ease-out-q);
}
.slides{
  position:relative;
  height:var(--slide-h, 520px);
  transition:height .62s var(--ease-out-q);
}

/* The outgoing slide leaves quickly and without motion — moving both slides at
   once reads as mush. The incoming one carries the movement. */
.slide{
  position:absolute; inset:0;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:scale(.988) translateY(8px);
  transition:opacity .2s ease-in,
             transform .2s ease-in,
             visibility .2s;
}
.slide.is-on{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:none;
  /* the delay lets the frame start resizing before the content appears in it */
  transition:opacity .46s var(--ease-out-q) .08s,
             transform .56s var(--ease-spring) .08s,
             visibility .46s;
}
.slide.dormant{ display:none }

/* Promote only while something is actually moving. Leaving will-change on an
   element that holds a live iframe keeps it on its own layer permanently and
   costs memory on every scroll. */
.slides.shifting .slide{ will-change:opacity, transform }

/* the caption and the address swap with their own small fade, so the text does
   not simply pop to a different string mid-resize */
.hero-cap, .frame-url{ transition:opacity .2s ease, transform .2s ease }
.hero-preview.swapping .hero-cap,
.hero-preview.swapping .frame-url{ opacity:0; transform:translateY(-3px) }

@media (prefers-reduced-motion: reduce){
  .hero-preview, .slides{ transition-duration:.01ms }
  .slide, .slide.is-on{ transform:none; transition:opacity .15s linear }
}

/* The stage fills the window; the iframe's own pixel size is set by embeds.js
   to match it exactly, so the site renders 1:1 with no scaling at all. Forcing
   width:100% here as well was fighting that maths and producing the zoom. */
.slide .stage{
  position:absolute; inset:0;
  height:100%; width:100%;
  aspect-ratio:auto;
}
.slide .stage iframe{ border:0; display:block }

/* the local screens carry on, and say so */
.hero.offline .stick-win .sw{ box-shadow:0 0 0 2px var(--kelp), var(--sh-3) }
.hero.offline .stick-win .sw-cap::after{
  content:" · still working"; color:var(--kelp); font-weight:500;
}
.stick-win .sw{ transition:box-shadow .3s var(--ease) }

/* trash */
.stick-trash{ display:grid; justify-items:center }

/* floppy disk */
.fl{
  width:56px; height:56px; border-radius:3px;
  background:linear-gradient(160deg,#2B3336,#151B1D);
  box-shadow:var(--sh-2); position:relative;
  display:grid; align-content:end; justify-items:center; padding-bottom:5px;
}
.fl-shutter{
  position:absolute; top:5px; right:9px;
  width:22px; height:19px; border-radius:1px;
  background:#AEB6B8; box-shadow:inset -6px 0 0 #7F8A8C;
}
.fl-label{
  width:40px; padding:3px 0; border-radius:1px;
  background:#E8E4D8; color:#3A4245;
  font-family:var(--mono); font-size:7.5px; text-align:center;
}

/* a mac alert, mid-panic */
.stick-alert{
  width:172px; border-radius:0; overflow:hidden;
  background:#fff; border:1.5px solid #000;
  box-shadow:3px 3px 0 rgba(0,0,0,.75);
}
.al-bar{
  display:flex; align-items:center; height:15px; padding-inline:4px;
  background:repeating-linear-gradient(180deg,#000 0 1px,#fff 1px 2px);
  border-bottom:1.5px solid #000;
}
.al-bar i{ width:9px; height:9px; background:#fff; border:1.5px solid #000 }
.al-bar .y, .al-bar .g{ display:none }
.al-body{ display:flex; align-items:center; gap:9px; padding:11px 12px }
.al-ico{
  width:20px; height:20px; border-radius:0; flex-shrink:0;
  background:#fff; color:#000; border:1.5px solid #000;
  display:grid; place-items:center;
  font-size:12px; font-weight:700;
}
.al-txt{ font-size:11.5px; line-height:1.35; color:var(--ink-2) }

/* a real month grid inside the calendar window */
.cal-grid{
  display:grid; grid-template-columns:repeat(7,1fr); gap:3px;
  margin:2px 0 4px;
}
.cal-grid .cal-h{
  font-family:var(--mono); font-size:8.5px; color:var(--ink-4);
  text-align:center; padding-bottom:2px;
}
.cal-grid button{
  aspect-ratio:1; border-radius:5px; padding:0;
  font-size:11px; color:var(--ink-2);
  display:grid; place-items:center;
  transition:background .15s, color .15s;
}
.cal-grid button:hover:not(:disabled){ background:rgba(5,12,15,.08); color:var(--ink) }
.cal-grid button:disabled{ color:var(--ink-4); opacity:.4; cursor:default }
.cal-grid button[aria-pressed="true"]{ background:var(--ink); color:#fff; font-weight:600 }
.cal-grid .cal-blank{ visibility:hidden }

/* Every icon carries a standing capsule saying what it does. Hover-only meant
   nobody knew the icons were clickable at all, so the labels are always on —
   soft and small at rest, and they light up under the cursor. */
.stick[aria-label]{ position:absolute; overflow:visible }
.stick[aria-label]::after{
  content:attr(aria-label);
  position:absolute; left:50%; top:100%; transform:translate(-50%,7px);
  padding:3px 9px; border-radius:999px;
  background:rgba(252,251,247,.86);
  color:var(--ink-2);
  border:1px solid rgba(5,12,15,.12);
  box-shadow:0 2px 6px rgba(5,12,15,.12);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-family:var(--mono); font-size:9px; letter-spacing:.01em;
  white-space:nowrap; pointer-events:none;
  opacity:.85;
  transition:opacity .18s, transform .18s var(--ease),
             background .18s, color .18s, box-shadow .18s;
}
.stick-layer.live .stick[aria-label]:hover::after{
  opacity:1; transform:translate(-50%,10px);
  background:var(--ink); color:#fff;
  border-color:var(--ink);
  box-shadow:0 6px 14px rgba(5,12,15,.28);
}
/* out of the way while the object is in hand */
.stick.held[aria-label]::after{ opacity:0 !important }

/* a click should feel like a click, not just a grab */
.stick-layer.live .stick[data-opens]{ cursor:pointer }
.stick-layer.live .stick[data-opens]:active{ transform:scale(.94) }
.stick-layer.live .stick[data-opens][aria-expanded="true"]::after{
  background:var(--ink); color:#fff; border-color:var(--ink); opacity:1;
}

/* small mono chip */
.stick-chip{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
  padding:6px 11px; border-radius:var(--pill);
  background:var(--paper-2); color:var(--ink-2);
  border:1px solid var(--line-2); box-shadow:var(--sh-1);
  white-space:nowrap;
}

/* ------------------------------------------------------------ music widget
   A small player sitting on the desk. Point the audio tag at your own mp3 and
   the whole thing works; until the file exists it says so instead of failing. */
.music-widget{
  width:196px; padding:11px 12px 12px;
  border-radius:14px;
  background:rgba(252,251,247,.92);
  backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px);
  border:1px solid rgba(5,12,15,.14);
  box-shadow:var(--sh-3);
}
.mw-top{ display:flex; align-items:center; gap:9px }
.mw-art{
  width:38px; height:38px; flex-shrink:0;
  display:grid; place-items:center;
  position:relative;
}
.mw-art img{
  width:38px; height:38px; display:block;
  filter:drop-shadow(0 3px 8px rgba(5,12,15,.28));
}
/* the icon gets a gentle pulse while the track is actually playing */
.music-widget.playing .mw-art img{ animation:mw-pulse 2.2s var(--ease-soft) infinite }
@keyframes mw-pulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.07) } }
@media (prefers-reduced-motion:reduce){
  .music-widget.playing .mw-art img{ animation:none }
}
.mw-meta{ display:grid; gap:1px; min-width:0 }
.mw-title{
  font-size:12.5px; font-weight:600; color:var(--ink);
  letter-spacing:-.015em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mw-artist{
  font-size:10.5px; color:var(--ink-3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* The bar is 4px of paint inside a 16px hit area, so it is easy to grab
   without looking chunky. The handle appears on hover and while scrubbing. */
.mw-bar{
  position:relative;
  height:16px; margin-top:7px;
  cursor:grab; touch-action:none;
  display:flex; align-items:center;
}
.mw-bar::before{
  content:""; position:absolute; left:0; right:0; height:4px;
  border-radius:2px; background:rgba(5,12,15,.14);
}
.mw-fill{
  position:relative; display:block; height:4px; width:0;
  background:var(--ink); border-radius:2px;
  transition:width .12s linear;
}
.mw-bar:active{ cursor:grabbing }
.mw-bar.scrubbing .mw-fill{ transition:none }
/* the grab handle */
.mw-fill::after{
  content:""; position:absolute; right:-6px; top:50%;
  width:12px; height:12px; border-radius:50%;
  transform:translateY(-50%) scale(0);
  background:#fff; border:1px solid rgba(5,12,15,.24);
  box-shadow:0 1px 4px rgba(5,12,15,.32);
  transition:transform .16s var(--ease);
}
.mw-bar:hover .mw-fill::after,
.mw-bar.scrubbing .mw-fill::after{ transform:translateY(-50%) scale(1) }
.mw-times{
  display:flex; justify-content:space-between; margin-top:5px;
  font-family:var(--mono); font-size:9px; color:var(--ink-4);
}

.mw-controls{ display:flex; align-items:center; gap:7px; margin-top:8px }
.mw-btn,.mw-play{
  display:grid; place-items:center; padding:0;
  border-radius:50%; color:var(--ink);
  transition:background .16s, transform .12s;
}
.mw-btn{ width:24px; height:24px; color:var(--ink-3) }
.mw-btn:hover{ background:rgba(5,12,15,.07); color:var(--ink) }
.mw-play{
  width:30px; height:30px;
  background:var(--ink); color:#fff;
}
.mw-play:hover{ transform:scale(1.06) }
.mw-play:active{ transform:scale(.94) }

/* four bars that dance while it plays */
.mw-viz{ display:flex; align-items:flex-end; gap:2px; height:14px; margin-left:auto }
.mw-viz i{ width:2.5px; height:3px; border-radius:1px; background:var(--ink-4) }
.music-widget.playing .mw-viz i{ animation:mw-bounce .9s ease-in-out infinite }
.music-widget.playing .mw-viz i:nth-child(2){ animation-delay:.16s }
.music-widget.playing .mw-viz i:nth-child(3){ animation-delay:.32s }
.music-widget.playing .mw-viz i:nth-child(4){ animation-delay:.48s }
@keyframes mw-bounce{ 0%,100%{ height:3px } 50%{ height:13px } }

.mw-missing{
  display:block; margin-top:8px;
  font-family:var(--mono); font-size:9px; color:#B4413A;
}

/* beach ball */
.stick-ball{
  width:24px; height:24px; border-radius:50%;
  background:conic-gradient(#F05A4F 0 25%, #F5C147 0 50%, #4E9FCB 0 75%, #56B77E 0);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.75) inset, var(--sh-1);
}
@media (prefers-reduced-motion: no-preference){
  .stick-ball{ animation:ball-spin 9s linear infinite }
}
@keyframes ball-spin{ to{ rotate:360deg } }

@media (max-width:1240px){ .stick-win, .stick-note{ display:none } }
@media (max-width:1000px){ .stick-layer{ display:block; transform: scale(0.7); transform-origin: top center; pointer-events: none; } }
@media (max-width:600px){ .stick-layer{ transform: scale(0.5); } }


/* -------------------------------------------------------- feature rows
   One claim per row, with the live screen that proves it sitting beside the
   words. Rows alternate sides so the eye zig-zags down the page instead of
   running down a single column. */
.frows{ display:grid; gap:clamp(56px,8vw,110px) }
.frow{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,4vw,64px); align-items:center;
}
.frow.flip .frow-media{ order:2 }
@media (max-width:900px){
  .frow{ grid-template-columns:1fr; gap:26px }
  .frow.flip .frow-media{ order:0 }
}

.frow-media .frame{ box-shadow:var(--sh-4) }
.frow-cap{
  display:block; margin-top:11px; text-align:center;
  font-family:var(--mono); font-size:11px; color:var(--ink-3);
}

.frow-copy{ display:grid; gap:16px; align-content:center }
.frow-n{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  color:var(--ink-4);
}
.frow-copy h3{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.5rem,2.7vw,2.1rem); line-height:1.14; letter-spacing:-.036em;
}
.frow-copy > p{ font-size:16.5px; line-height:1.65; color:var(--ink-2); max-width:46ch }

/* ------------------------------------------------- Nametags */
.nametag {
  background: #fff;
  border: 1.5px solid #fff;
  border-radius: 6px;
  width: 110px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  overflow: hidden;
}
.nametag.blue .hdr, .nametag.blue .ftr { background: #0076FF; }
.nametag.red .hdr, .nametag.red .ftr { background: #FF3B30; }
.nametag .hdr {
  padding: 6px 0 2px;
  text-align: center;
  color: #fff;
}
.nametag .hdr .big {
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1;
}
.nametag .hdr .sm {
  font-size: 7px;
  text-transform: uppercase;
  opacity: 0.9;
  letter-spacing: 0.08em;
  margin-top: 1px;
}
.nametag .body {
  height: 42px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nametag .body .name {
  font-family: "Comic Sans MS", "Chalkboard", cursive, sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #111;
  transform: rotate(-2deg);
}
.nametag .ftr {
  height: 8px;
}

/* ------------------------------------------------- 3D macOS App Icons */
.stick.app-icon {
  width: 52px;
  height: 52px;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.18));
  transition: transform 0.25s var(--ease), filter 0.25s var(--ease);
}
.stick.app-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.stick.app-icon:hover {
  transform: scale(1.15) rotate(0deg) !important;
  filter: drop-shadow(0 16px 30px rgba(0,0,0,0.25));
}

/* -------------------------------------------------------- proof strip */
.proof{
  border-block:1px solid var(--line-2);
  background:rgba(255,255,255,.5);
}
.proof-inner{
  display:flex; align-items:center; gap:clamp(20px,4vw,56px);
  flex-wrap:wrap; justify-content:space-between;
  padding-block:20px;
}
.proof-lbl{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); flex-shrink:0;
}
.proof-links{ display:flex; flex-wrap:wrap; gap:8px 10px }
.proof-links a{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:11.5px; color:var(--ink-2);
  padding:7px 13px; border-radius:var(--pill);
  border:1px solid var(--line-2); background:var(--paper-2);
  transition:border-color .2s, color .2s, transform .2s var(--ease), box-shadow .2s;
}
/* the arrow does the work the removed status dot used to */
.proof-links a::after{
  content:"↗"; font-size:11px; color:var(--ink-4); transition:color .2s, transform .2s var(--ease);
}
.proof-links a:hover::after{ color:var(--tide); transform:translate(1px,-1px) }
.proof-links a:hover{
  color:var(--ink); border-color:var(--line); transform:translateY(-2px); box-shadow:var(--sh-1);
}

/* ---------------------------------------------------------- build section (rewrite) */
.build-sec{ padding:clamp(60px,8vw,100px) 0 clamp(40px,6vw,72px) }

.build-head{
  display:grid; gap:18px;
  max-width:700px; margin-bottom:clamp(44px,6vw,72px);
}
.build-kicker{
  display:inline-flex; align-items:center; gap:8px;
}
.bk-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--tide); animation:blink-dot 2s ease-in-out infinite;
}
@keyframes blink-dot{ 0%,100%{opacity:1} 50%{opacity:.3} }
.bk-label{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--tide);
}
.build-h2{ max-width:14ch }
.build-lede{
  font-size:clamp(1rem,1.35vw,1.14rem); line-height:1.65;
  color:var(--ink-2); max-width:54ch;
}

/* ------------------------------------------------------------ product bento grid */
.prod-rack{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-bottom:clamp(48px,6vw,80px);
}
.prod-card{
  border-radius:var(--r-lg);
  background:var(--paper-2);
  border:1.5px solid var(--line-2);
  box-shadow:var(--sh-1);
  overflow:hidden;
  display:flex; flex-direction:column;
  position:relative;
  cursor:default;
  will-change:transform;
  transition:box-shadow .25s var(--ease), border-color .25s;
}
.prod-card.pc-wide{ grid-column:span 2 }
.prod-card:hover{ box-shadow:var(--sh-3); border-color:rgba(0,0,0,.18) }

/* mouse-glow overlay */
.pc-glow{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), var(--_accent,#0076FF) 0%, transparent 65%);
  opacity:0; transition:opacity .4s;
}
.prod-card:hover .pc-glow{ opacity:.07 }

/* accent vars */
.prod-card[data-accent="#0076FF"]{ --_accent:#0076FF }
.prod-card[data-accent="#00B48A"]{ --_accent:#00B48A }
.prod-card[data-accent="#FF6B35"]{ --_accent:#FF6B35 }
.prod-card[data-accent="#7B5CF0"]{ --_accent:#7B5CF0 }
.prod-card[data-accent="#F5A623"]{ --_accent:#F5A623 }

/* ---- screen area ---- */
.pc-screen{ flex:1; overflow:hidden; position:relative; z-index:2 }

.dark-screen, .table-screen{
  background:#080C0E; padding:10px; min-height:170px;
  display:flex; flex-direction:column; gap:8px;
}

/* window chrome */
.pcs-bar{ display:flex; align-items:center; gap:7px; flex-shrink:0 }
.pcs-dots{ display:flex; gap:4px }
.pcs-dots i{ display:block; width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.14) }
.pcs-ttl{ flex:1; text-align:center; font-family:var(--mono); font-size:10px; color:rgba(255,255,255,.4) }
.pcs-st{ font-family:var(--mono); font-size:9px; color:#28C840 }
.pcs-st.grn{ color:#00B48A }

/* POS terminal */
.pos-table-tag{ font-family:var(--mono); font-size:9.5px; color:var(--tide-lit); letter-spacing:.04em }
.pos-items{ display:grid; gap:4px; flex:1 }
.pos-row{ display:flex; justify-content:space-between; font-size:11px; color:rgba(255,255,255,.55) }
.pos-bold{ color:#fff; font-weight:600 }
.pos-tide{ color:var(--tide-lit); font-size:11.5px }
.pos-muted{ color:rgba(255,255,255,.28); font-size:10px }
.pos-sep{ height:1px; background:rgba(255,255,255,.1); margin:2px 0 }
.pos-btns{ display:flex; gap:7px; flex-shrink:0 }
.pos-btn{
  flex:1; padding:7px 0; border-radius:7px; border:0;
  font-family:var(--mono); font-size:10.5px; cursor:pointer;
  background:rgba(255,255,255,.1); color:rgba(255,255,255,.65);
  transition:opacity .15s, transform .1s;
}
.pos-btn:hover{ opacity:.8 }
.pos-btn:active{ transform:scale(.96) }
.pos-btn:disabled{ opacity:.5; cursor:not-allowed }
.pos-btn-pri{ background:var(--tide); color:#fff }

/* KDS */
.kds-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; flex:1 }
.kds-ticket{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:8px; padding:8px;
  display:flex; flex-direction:column; gap:5px;
  transition:opacity .3s;
}
.kds-ticket.hot{ border-color:rgba(255,80,80,.28) }
.kds-hd{ display:flex; justify-content:space-between; align-items:center }
.kds-hd > span{ font-family:var(--mono); font-size:9.5px; color:#fff; font-weight:600 }
.kds-t{ font-family:var(--mono); font-size:9.5px; font-weight:700; color:rgba(255,255,255,.45) }
.kds-t.red{ color:#FF5F57 }
.kds-t.grn{ color:#28C840 }
.kds-body{ font-size:9.5px; color:rgba(255,255,255,.42); line-height:1.55; flex:1 }
.kds-done-btn{
  width:100%; padding:4px 0; border-radius:5px; border:0;
  background:rgba(0,180,138,.18); color:#00B48A;
  font-family:var(--mono); font-size:9px; cursor:pointer;
  transition:background .15s;
}
.kds-done-btn:hover{ background:rgba(0,180,138,.32) }
.kds-done-btn:active{ transform:scale(.95) }
.kds-done-btn:disabled{ cursor:not-allowed }

/* Phone frame */
.phone-screen{
  background:#F4F4F4;
  display:flex; flex-direction:column; align-items:center;
  padding:10px 14px; min-height:210px; gap:6px;
}
.ph-notch{ width:52px; height:5px; border-radius:3px; background:rgba(0,0,0,.16); flex-shrink:0 }
.ph-content{ width:100%; display:flex; flex-direction:column; gap:7px; flex:1 }
.ph-header{ font-size:11.5px; font-weight:700; color:#111; text-align:center }
.ph-cats{ display:flex; gap:5px }
.ph-cat{ padding:3px 8px; border-radius:var(--pill); background:#E0E0E0; font-size:9.5px; color:#555; cursor:pointer; transition:background .15s }
.ph-cat.active{ background:var(--tide); color:#fff }
.ph-items{ display:grid; gap:5px; flex:1 }
.ph-item{ display:flex; align-items:center; justify-content:space-between; padding:5px 7px; background:#fff; border-radius:7px; box-shadow:0 1px 3px rgba(0,0,0,.08) }
.ph-item-info{ display:flex; flex-direction:column; gap:1px }
.ph-item-info b{ font-size:10px; color:#111 }
.ph-item-info span{ font-size:9.5px; color:#666 }
.ph-add{
  width:22px; height:22px; border-radius:50%;
  background:var(--tide); color:#fff; border:0;
  font-size:14px; line-height:1; cursor:pointer;
  display:grid; place-items:center; transition:transform .15s;
}
.ph-add:active{ transform:scale(.88) }
.ph-cart{ padding:8px; background:var(--tide); color:#fff; border-radius:7px; font-size:10.5px; font-weight:600; text-align:center; cursor:pointer; transition:opacity .15s }
.ph-cart:hover{ opacity:.88 }

/* Phone App cart */
.ph-cart-items{ display:grid; gap:6px; flex:1 }
.ph-ci{ display:flex; align-items:center; justify-content:space-between; padding:5px 7px; background:#fff; border-radius:7px; box-shadow:0 1px 3px rgba(0,0,0,.08) }
.ph-ci-info{ display:flex; flex-direction:column; gap:1px }
.ph-ci-info b{ font-size:10px; color:#111 }
.ph-ci-info span{ font-size:9.5px; color:#666 }
.ph-ci-qty{ display:flex; align-items:center; gap:5px }
.ph-ci-qty span{ font-size:11px; font-weight:600; min-width:12px; text-align:center }
.ph-qbtn{ width:20px; height:20px; border-radius:50%; background:#E8E8E8; border:0; font-size:13px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:background .15s }
.ph-qbtn:hover{ background:#D0D0D0 }
.ph-total-row{ display:flex; justify-content:space-between; font-size:11.5px; font-weight:700; color:#111; padding:2px 0 }
.ph-order-btn{ width:100%; padding:9px; background:var(--kelp,#1D5C43); color:#fff; border:0; border-radius:7px; font-size:10.5px; font-weight:600; cursor:pointer; transition:opacity .15s }
.ph-order-btn:hover{ opacity:.88 }

/* Kiosk locked */
.kiosk-screen{ background:#080C0E; min-height:170px; display:flex; align-items:center; justify-content:center }
.kiosk-lock{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px; text-align:center; color:rgba(255,255,255,.3) }
.kl-msg{ font-family:var(--mono); font-size:11px; color:rgba(255,255,255,.52) }
.kl-sub{ font-size:10.5px; line-height:1.5; max-width:155px; color:rgba(255,255,255,.26) }

/* Table grid */
.tbl-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:5px; flex:1 }
.tbl-t{
  padding:6px 3px; border-radius:6px;
  font-family:var(--mono); font-size:9.5px; font-weight:700;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  cursor:pointer; transition:filter .15s;
}
.tbl-t span{ font-size:8px; font-weight:400; opacity:.7 }
.tbl-t:hover{ filter:brightness(1.28) }
.tbl-t.occ{ background:rgba(255,95,87,.14); color:#FF5F57; border:1px solid rgba(255,95,87,.22) }
.tbl-t.free{ background:rgba(40,200,64,.08); color:#28C840; border:1px solid rgba(40,200,64,.14) }
.tbl-t.prn{ background:rgba(255,184,46,.1); color:#FFB82E; border:1px solid rgba(255,184,46,.2) }

/* Rider jobs */
.rider-jobs{ display:grid; grid-template-columns:1fr 1fr; gap:8px; flex:1 }
.rj{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:8px; padding:8px; display:flex; flex-direction:column; gap:5px }
.rj.rj-active{ border-color:rgba(0,180,138,.28) }
.rj-hd{ display:flex; justify-content:space-between; align-items:center }
.rj-id{ font-family:var(--mono); font-size:11px; color:#fff; font-weight:700 }
.rj-km{ font-family:var(--mono); font-size:9.5px; color:var(--tide-lit) }
.rj-addr{ font-size:10px; color:rgba(255,255,255,.4); line-height:1.4 }
.rj-acts{ display:flex; gap:5px }
.rj-btn{ flex:1; padding:5px; border-radius:6px; border:0; font-family:var(--mono); font-size:9px; cursor:pointer; background:rgba(255,255,255,.08); color:rgba(255,255,255,.5); transition:opacity .15s, transform .1s }
.rj-btn:hover{ opacity:.8 }
.rj-btn:active{ transform:scale(.95) }
.rj-btn:disabled{ opacity:.4; cursor:not-allowed }
.rj-btn.rj-pri{ background:var(--kelp,#1D5C43); color:#fff }

/* Reports / charts */
.rpt-stats{ display:flex; gap:18px; flex-shrink:0 }
.rpt-s{ display:flex; flex-direction:column; gap:2px }
.rs-v{ font-family:var(--mono); font-size:13px; font-weight:700; color:#fff }
.rs-l{ font-size:9px; color:rgba(255,255,255,.36) }
.rpt-chart{ display:flex; align-items:flex-end; gap:5px; flex:1 }
.rpt-bar{ flex:1; height:var(--h,50%); border-radius:3px 3px 0 0; background:rgba(255,255,255,.14); display:flex; justify-content:center; position:relative }
.rpt-bar.rpt-bar-hi{ background:var(--tide) }
.rpt-bar span{ position:absolute; bottom:-14px; font-family:var(--mono); font-size:8px; color:rgba(255,255,255,.28) }

/* card info strip */
.pc-info{ padding:13px 15px 14px; display:grid; gap:5px; background:var(--paper-2); flex-shrink:0; position:relative; z-index:2 }
.pc-badge{ display:inline-block; padding:2px 8px; border-radius:var(--pill); background:var(--paper-3); border:1px solid var(--line-2); font-family:var(--mono); font-size:9.5px; letter-spacing:.05em; color:var(--ink-3); width:fit-content }
.pc-name{ font-size:1rem; font-weight:700; letter-spacing:-.022em; color:var(--ink); line-height:1.2; margin:0 }
.pc-desc{ font-size:12.5px; line-height:1.5; color:var(--ink-3) }

/* kiosk stage in #how section */
.kiosk-locked-stage{ display:flex; align-items:center; justify-content:center; background:#080C0E !important; min-height:360px }
.kiosk-priv-msg{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:24px; color:rgba(255,255,255,.35) }
.kiosk-priv-msg span{ font-family:var(--mono); font-size:12px; color:rgba(255,255,255,.52) }
.kiosk-priv-msg small{ font-size:12px; color:rgba(255,255,255,.25); line-height:1.5; max-width:200px }

/* responsive */
@media(max-width:960px){
  .prod-rack{ grid-template-columns:repeat(2,1fr) }
  .prod-card.pc-wide{ grid-column:span 2 }
}
@media(max-width:540px){
  .prod-rack{ grid-template-columns:repeat(2, 1fr); gap:8px; }
  .prod-card.pc-wide{ grid-column:span 2; }
  .pc-name{ font-size: 15px; }
  .pc-desc{ font-size: 12px; }
  .pc-info{ padding: 12px; }
  .pc-screen{ min-height: 140px; }
  .kds-ticket, .pos-row, .ph-item, .rj, .tbl-t{ transform: scale(0.85); transform-origin: top left; margin-bottom:-5%; }
  .kds-grid, .pos-items, .ph-items, .rider-jobs, .tbl-grid{ gap: 4px; padding: 6px; }
}




/* ------------------------------------------------------------ presets bar */
.build-presets{ margin-bottom:clamp(28px,4vw,44px) }
.bp-lead{
  font-size:13.5px; color:var(--ink-3); margin-bottom:14px;
  font-family:var(--mono);
}

/* ---------------------------------------------------------- system builder */
#sysb{ position:relative }
.sysb-intro{
  display:grid; gap:18px; margin-bottom:clamp(30px,4vw,46px); max-width:760px;
}

/* ------------------------------------------------------------ featured work */
.feat-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  flex-wrap:wrap; margin-bottom:clamp(30px,4vw,48px);
}
.feat-head .sec-head{ margin-bottom:0 }

/* ------------------------------------------------------------- home process */
.mini-steps{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  gap:1px; background:var(--line-2);
  border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden;
}
.mini-steps > div{ background:var(--paper-3); padding:28px 26px 30px; display:grid; gap:11px; align-content:start }
.mini-steps .n{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.15em; color:var(--tide);
}
.mini-steps h4{ font-size:1.16rem; letter-spacing:-.022em; font-weight:700; color:var(--ink) }
.mini-steps p{ font-size:14px; line-height:1.6; color:var(--ink-2) }

/* ---------------------------------------------------------------- why block */
.why{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:22px;
}
.why-item{
  display:grid; gap:12px; align-content:start;
  padding:26px 24px 28px; border-radius:var(--r-lg);
  background:var(--paper-2); border:1px solid var(--line-2); box-shadow:var(--sh-1);
}
.why-item .wi{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:var(--tide-wash); color:var(--tide-deep);
}
.why-item h4{ font-size:1.1rem; font-weight:700; letter-spacing:-.02em; line-height:1.3 }
.why-item p{ font-size:14.5px; line-height:1.6; color:var(--ink-2) }

/* ============================================================================
   RESTORED — an earlier edit spliced out this whole block by accident, which
   is why the offline toast rendered as raw text in the corner and every desk
   window lost its styling.
   ========================================================================== */

/* --------------------------------------------------------- object styling */
.stick-kao{
  font-family:var(--mono); font-size:23px; color:var(--ink-3);
  letter-spacing:-.03em; white-space:nowrap;
  transition:color .25s, scale .25s var(--ease);
}
.stick-kao.sm{ font-size:15px }
.stick-kao.near{ color:var(--tide); scale:1.14 }

.app-icon img{ width:58px; height:58px; display:block;
  filter:drop-shadow(0 6px 12px rgba(5,12,15,.26));
  transition:transform .2s var(--ease), filter .2s var(--ease);
}
.app-icon:hover img{ transform:translateY(-3px) scale(1.06); filter:drop-shadow(0 10px 18px rgba(5,12,15,.32)) }
.app-icon:active img{ transform:scale(.95) }

.micro-ico img{ width:38px; height:38px; display:block;
  filter:drop-shadow(0 4px 9px rgba(5,12,15,.24));
  transition:transform .2s var(--ease);
}
.micro-ico.sm img{ width:28px; height:28px }
.micro-ico:hover img{ transform:translateY(-2px) scale(1.07) }

.app-icon,.micro-ico{ background:none; border:0; padding:0; line-height:0 }

/* ------------------------------------------------------- while dragging
   nothing else may claim the pointer, or a live iframe eats the release */
body.dragging-sticker iframe,
body.dragging-sticker .veil,
body.dragging-sticker .stage{ pointer-events:none !important }
body.dragging-sticker{ user-select:none; cursor:grabbing }

/* ------------------------------------------------------------ wifi switch */
.stick-wifi{
  display:grid; gap:8px; justify-items:center;
  padding:12px 14px 11px; border-radius:12px;
  background:var(--paper-2); border:1px solid rgba(5,12,15,.16);
  box-shadow:var(--sh-3);
}
.wf-top{ display:flex; align-items:center; gap:7px; color:var(--ink-2) }
.wf-label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.04em }
.wf-switch{ padding:0; line-height:0 }
.wf-track{
  display:block; width:44px; height:25px; border-radius:999px;
  background:var(--kelp); position:relative;
  transition:background .28s var(--ease);
  box-shadow:0 1px 3px rgba(5,12,15,.28) inset;
}
.wf-knob{
  position:absolute; top:2.5px; left:2.5px;
  width:20px; height:20px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(5,12,15,.4);
  transition:transform .28s var(--ease);
}
.wf-switch[aria-checked="true"] .wf-knob{ transform:translateX(19px) }
.wf-switch[aria-checked="false"] .wf-track{ background:#B4413A }
.wf-hint{ font-family:var(--mono); font-size:9px; color:var(--ink-4) }
.hero.offline .wf-hint{ color:#B4413A }

/* ----------------------------------------------------------- offline state */
.offline-toast{
  position:absolute; left:50%; bottom:22px; z-index:8;
  transform:translate(-50%,14px);
  display:flex; align-items:center; gap:10px;
  max-width:min(92vw,520px);
  padding:12px 18px; border-radius:var(--pill);
  background:rgba(5,12,15,.9); color:#fff;
  font-size:13.5px; line-height:1.4;
  box-shadow:var(--sh-3);
  opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity .3s var(--ease), transform .35s var(--ease), visibility .3s;
}
.offline-toast b{ font-weight:600 }
.ot-dot{ width:7px; height:7px; border-radius:50%; background:#FF5F57; flex-shrink:0 }
.hero.offline .offline-toast{ opacity:1; visibility:visible; transform:translate(-50%,0) }
.hero.offline .hero-preview .stage{ filter:grayscale(1) brightness(.72) }

/* --------------------------------------------------------- bin interaction */
.stick-trash{ transition:transform .18s var(--ease) }
.stick-trash.armed{ transform:scale(1.18) rotate(-6deg) }
.stick.binned{ animation:bin-drop .45s var(--ease-soft) forwards; pointer-events:none }
@keyframes bin-drop{ to{ transform:translateY(38px) scale(.3) rotate(14deg); opacity:0 } }
.bin-toast{
  position:absolute; z-index:40;
  padding:8px 14px; border-radius:var(--pill);
  background:var(--ink); color:#fff;
  font-family:var(--mono); font-size:11px; white-space:nowrap;
  pointer-events:none; animation:bin-say 1.9s var(--ease) forwards;
}
@keyframes bin-say{
  0%{ opacity:0; transform:translateY(6px) }
  14%,72%{ opacity:1; transform:translateY(-4px) }
  100%{ opacity:0; transform:translateY(-16px) }
}

/* ------------------------------------------------------------ desk windows
   These were drawn as System 7 panels — hard black borders, an offset shadow,
   a pinstriped title bar — while everything around them had moved on to the
   soft modern language: frosted tray menus, rounded icons, cream paper. They
   now match their surroundings: translucent, rounded, softly lit, with real
   traffic lights instead of a square close box. */
.deskwin{
  position:absolute; z-index:30;
  width:min(320px, 82vw);
  border-radius:14px;
  background:rgba(252,251,247,.94);
  backdrop-filter:saturate(180%) blur(22px);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  border:1px solid rgba(5,12,15,.14);
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 18px 44px -12px rgba(5,12,15,.30),
    0 4px 12px -4px rgba(5,12,15,.16);
  overflow:hidden;
  animation:dw-in .18s var(--ease);
}
.dw-bar{
  display:flex; align-items:center; gap:8px;
  height:34px; padding-inline:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.25));
  border-bottom:1px solid rgba(5,12,15,.09);
  cursor:grab;
}
.dw-bar:active{ cursor:grabbing }
/* one live traffic light, plus two dimmed companions drawn in CSS */
.dw-close{
  position:relative; width:11px; height:11px; padding:0; line-height:0;
  border:0; border-radius:50%;
  background:#FF5F57; box-shadow:0 0 0 .5px rgba(0,0,0,.14) inset;
  font-size:0; color:transparent; flex-shrink:0; cursor:pointer;
  transition:filter .15s;
}
.dw-close::before, .dw-close::after{
  content:""; position:absolute; top:0;
  width:11px; height:11px; border-radius:50%;
  box-shadow:0 0 0 .5px rgba(0,0,0,.14) inset;
}
.dw-close::before{ left:16px; background:#FEBC2E }
.dw-close::after{  left:32px; background:#28C840 }
.dw-close:hover{ filter:brightness(.92) }
.dw-title{
  font-family:var(--sans); font-size:12.5px; font-weight:600;
  letter-spacing:-.015em; color:var(--ink-2);
  margin-inline:auto; padding-right:40px;   /* balance the lights */
}

/* (old header) -------------------------------------------- */
@keyframes dw-in{ from{ opacity:0; transform:scale(.97) } to{ opacity:1; transform:none } }
.dw-close:hover{ background:#000; color:#fff }
.dw-body p{ font-size:13.5px; line-height:1.55; color:var(--ink-2) }
.dw-body b{ color:var(--ink); font-weight:600 }
.dw-list{ display:grid; gap:9px }
.dw-list li{ display:grid; gap:1px }
.dw-list a{
  font-size:13.5px; font-weight:600; color:var(--tide-deep);
  text-decoration:underline; text-underline-offset:2px;
}
.dw-list span{ font-size:11.5px; color:var(--ink-3) }
.dw-mail a{ font-family:var(--mono); font-size:14px; color:var(--tide-deep) }
.dw-small{ font-size:11.5px !important; color:var(--ink-3) !important }
.dw-go:hover{ color:var(--tide-deep) }
@media (max-width:1000px){ .deskwin{ transform: scale(0.65); transform-origin: top center; } }

/* --------------------------------------------- the rest of the missing set */

/* floating mac windows (vidwin) */
.vidwin{ display:grid; justify-items:center; gap:5px }
.vidwin .win{
  background:#fff; border:1.5px solid #000;
  box-shadow:3px 3px 0 rgba(0,0,0,.7);
  overflow:hidden;
}
.vidwin .bar{
  display:flex; align-items:center; gap:5px;
  height:16px; padding-inline:5px;
  background:repeating-linear-gradient(180deg,#000 0 1px,#fff 1px 2px);
  border-bottom:1.5px solid #000;
}
.vidwin .dots{ display:flex; gap:3px }
.vidwin .dots i{ width:8px; height:8px; background:#fff; border:1.4px solid #000; border-radius:0 }
.vidwin .dots .y,.vidwin .dots .g{ display:none }
.win-caption{
  font-family:var(--mono); font-size:9px; color:var(--ink-2);
  text-align:center;
}

/* a tiny notes window */
.mac-notes{
  width:150px; padding:10px 11px 12px;
  background:#FFF9DB; border:1px solid rgba(5,12,15,.18);
  box-shadow:var(--sh-2);
  font-size:11.5px; line-height:1.5; color:var(--ink-2);
}

/* a tiny terminal */
.mac-terminal{
  width:190px; padding:9px 10px 11px;
  background:#0B0F10; border-radius:7px;
  box-shadow:var(--sh-3);
  font-family:var(--mono); font-size:9.5px; line-height:1.6;
}
.t-prompt{ color:#7FE0A8 }
.t-cmd{ color:#EDEFEE }
.t-ok{ color:#8FCFD1 }

/* hero trust row */
.hero-trust{
  display:flex; flex-wrap:wrap; gap:10px 30px;
  justify-content:center; align-items:center;
}
.hero-trust div{ display:flex; align-items:baseline; gap:8px }
.hero-trust .n{
  font-family:var(--display); font-weight:600;
  font-size:1.45rem; letter-spacing:-.038em; line-height:1;
}
.hero-trust .l{ font-size:12.5px; color:var(--ink-3); line-height:1.3 }

/* slideshow controls */
.slide-nav{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin-top:14px;
}
.sn-arrow{
  width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--line); color:var(--ink-2);
  background:var(--paper-2);
  transition:background .2s, color .2s, border-color .2s, transform .2s var(--ease);
}
.sn-arrow:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
.sn-arrow:active{ transform:scale(.94) }
.sn-dots{ display:flex; align-items:center; gap:7px }
.sn-dots button{
  width:8px; height:8px; border-radius:999px; padding:0;
  background:rgba(5,12,15,.2);
  /* same quintic curve as the frame, so the dot and the window settle together */
  transition:background .4s cubic-bezier(.22,1,.36,1),
             width .52s cubic-bezier(.22,1,.36,1);
}
.sn-dots button[aria-selected="true"]{ width:24px; background:var(--ink) }

/* the two private screens have nowhere to open, so the button steps back
   instead of lying about being clickable */
.fbtn.is-off{ opacity:.35; pointer-events:none }
.fbtn{ transition:opacity .3s var(--ease) }

/* play/pause glyph swap in the music widget */
.mw-i-play,.mw-i-pause{ display:block }
.mw-i-play[hidden],.mw-i-pause[hidden]{ display:none }

/* ------------------------------------------------ what the windows contain */

/* Safari: a launcher list */
a.dw-site:hover{ background:rgba(5,12,15,.06) }
.dw-site.off{ opacity:.55 }
.ds-dot.live{ background:#37D67A; box-shadow:0 0 0 2px rgba(55,214,122,.22) }
.ds-txt{ display:grid; gap:1px; min-width:0 }
a.dw-site:hover .ds-go{ color:var(--tide) }

/* FaceTime: a booking form */
.dw-form{ display:grid; gap:9px }
.dw-form label{
  display:grid; gap:3px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3);
}
.dw-form input, .dw-form select{
  font:inherit; font-size:13px; color:var(--ink);
  padding:8px 10px; border-radius:7px;
  border:1px solid rgba(5,12,15,.2); background:#fff;
  text-transform:none; letter-spacing:normal;
}
.dw-form input:focus, .dw-form select:focus{
  outline:none; border-color:var(--tide); box-shadow:0 0 0 3px rgba(10,95,105,.14);
}
.dw-submit{
  margin-top:3px; padding:10px 14px; border-radius:8px;
  background:var(--ink); color:#fff;
  font-size:13px; font-weight:600;
  transition:background .18s, transform .12s;
}
.dw-submit:hover{ background:var(--tide-deep) }
.dw-submit:active{ transform:scale(.98) }

/* Folder: a file-manager listing */
.fm-bar{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:9.5px; color:var(--ink-3);
  padding-bottom:8px; border-bottom:1px solid var(--line-2);
}
.fm-head, .fm-row{
  display:grid; grid-template-columns:1.5fr .8fr .7fr;
  gap:8px; align-items:center;
}
.fm-head{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-4);
  padding:8px 6px 5px;
}
.fm-list{ display:grid; gap:1px }
.fm-row{
  padding:7px 6px; border-radius:6px;
  font-size:12px; color:var(--ink-3);
  transition:background .14s;
}
.fm-row:hover{ background:rgba(5,12,15,.06) }
.fm-n{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink); font-weight:500 }
.fm-i{
  width:13px; height:16px; flex-shrink:0; border-radius:2px;
  border:1.4px solid var(--ink-3); background:#fff;
}
.fm-i.app{ border-radius:4px; background:var(--tide-wash); border-color:var(--tide) }
.fm-s{ font-family:var(--mono); font-size:9.5px; color:var(--ink-4) }
.fm-s.live{ color:#1D7A4E }

/* ------------------------------------------------- inside the desk windows */
.dw-body{ padding:14px 14px 15px; display:grid; gap:11px }
.dw-lead{ font-size:13px; line-height:1.55; color:var(--ink-2) }

/* the launcher list reads as rows in a menu, not as links on a page */
.dw-sites{ display:grid; gap:1px; margin:1px -6px -2px }
.dw-site{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:9px;
  transition:background .16s var(--ease);
}
a.dw-site:hover{ background:rgba(5,12,15,.055) }
a.dw-site:active{ background:rgba(5,12,15,.09) }
.dw-site.off{ opacity:.5 }

.ds-dot{
  width:7px; height:7px; border-radius:50%; flex-shrink:0;
  background:var(--ink-4);
}
.ds-dot.live{
  background:#37D67A;
  box-shadow:0 0 0 3px rgba(55,214,122,.18);
}
.ds-txt{ display:grid; gap:2px; min-width:0 }
.ds-txt b{
  font-size:12.5px; font-weight:600; letter-spacing:-.015em;
  color:var(--ink); line-height:1.2;
}
.ds-txt i{
  font-style:normal; font-size:10.5px; color:var(--ink-3); line-height:1.25;
}
.ds-go{
  margin-left:auto; flex-shrink:0;
  width:20px; height:20px; border-radius:50%;
  display:grid; place-items:center;
  font-size:11px; color:var(--ink-4);
  background:transparent;
  transition:background .16s, color .16s, transform .16s var(--ease);
}
a.dw-site:hover .ds-go{
  background:var(--ink); color:#fff;
  transform:translate(1px,-1px);
}

/* the footer link at the bottom of a window */
.dw-go{
  display:inline-flex; align-items:center; gap:5px;
  margin-top:3px; padding-top:11px;
  border-top:1px solid rgba(5,12,15,.09);
  font-size:12.5px; font-weight:600; color:var(--tide-deep);
  transition:gap .2s var(--ease);
}
.dw-go:hover{ gap:9px }

/* the file-manager header row, matched to the new window chrome */
.fm-path{ font-family:var(--mono); font-size:10px; color:var(--ink-2) }
.fm-count{ font-family:var(--mono); font-size:10px; color:var(--ink-4) }
.fm-i.doc{
  border-radius:2px; background:#fff;
  border:1.4px solid var(--ink-4);
  position:relative;
}
.fm-i.doc::after{
  content:""; position:absolute; top:-1.4px; right:-1.4px;
  width:5px; height:5px; background:var(--paper-3);
  border-left:1.4px solid var(--ink-4); border-bottom:1.4px solid var(--ink-4);
}

/* ============================================================ private screens
   Two of the slides are screenshots, not embeds, because the software runs on a
   machine inside the shop and is never exposed to the internet. That constraint
   is the product argument, so the slide leans into it rather than apologising. */
.slide.priv{ background:#fff }
.privshot{
  display:block; width:100%; height:100%; padding:0;
  position:relative; overflow:hidden; cursor:pointer;
  background:#fff; border:0;
}
.privshot img{
  width:100%; height:100%;
  object-fit:cover; object-position:top center;
  display:block;
  transition:transform .5s var(--ease), filter .3s var(--ease);
}
.privshot:hover img{ transform:scale(1.015) }

/* the lock hint sits at the bottom and lifts on hover */
.pv-hint{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 15px; border-radius:var(--pill);
  background:rgba(5,12,15,.86); color:#fff;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.02em;
  white-space:nowrap; pointer-events:none;
  transition:transform .22s var(--ease), background .22s;
}
.privshot:hover .pv-hint{ transform:translateX(-50%) translateY(-3px); background:var(--ink) }
/* drawn, not typed — no emoji anywhere on this site */
.pv-lock{ width:12px; height:12px; flex:0 0 12px; display:block }

/* ------------------------------------------------------------- the popup */
.privpop{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  padding:20px;
  background:rgba(5,12,15,.38);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  animation:pp-fade .18s var(--ease);
}
@keyframes pp-fade{ from{ opacity:0 } to{ opacity:1 } }
.pp-card{
  position:relative;
  width:min(420px, 100%);
  padding:30px 28px 24px;
  border-radius:20px;
  background:rgba(252,251,247,.97);
  border:1px solid rgba(5,12,15,.14);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 30px 70px -18px rgba(5,12,15,.44);
  text-align:center;
  animation:pp-pop .24s var(--ease);
}
@keyframes pp-pop{ from{ opacity:0; transform:translateY(10px) scale(.97) } to{ opacity:1; transform:none } }
.pp-close{
  position:absolute; top:12px; right:12px;
  width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; padding:0;
  font-size:11px; color:var(--ink-3);
  transition:background .16s, color .16s;
}
.pp-close:hover{ background:rgba(5,12,15,.08); color:var(--ink) }
.pp-lock{ display:block; margin-bottom:12px; color:var(--ink-3) }
.pp-lock svg{ width:30px; height:30px; display:block }
.pp-title{
  font-family:var(--display); font-weight:700;
  font-size:1.5rem; letter-spacing:-.03em; line-height:1.15;
  color:var(--ink); margin-bottom:9px;
}
.pp-body{ font-size:14.5px; line-height:1.6; color:var(--ink-2); margin-bottom:20px }
.pp-body b{ color:var(--ink); font-weight:600 }
.pp-actions{ display:grid; gap:10px; justify-items:center }
.pp-actions .btn-glass{ width:100% }
.pp-later{
  font-family:var(--mono); font-size:11px; color:var(--ink-4);
  padding:4px 8px; transition:color .16s;
}
.pp-later:hover{ color:var(--ink-2) }

@media (max-width:760px){
  .pv-hint{ font-size:9.5px; padding:7px 12px; bottom:10px }
  .pp-card{ padding:26px 20px 20px }
  .pp-title{ font-size:1.3rem }
}