/* ============================================================
   Desktop shell
   Phones get the app directly. Anything wider gets a device
   mockup with the real app running inside an iframe, plus the
   context a portfolio visitor needs to know what they're looking at.

   Treated as a Coolblue campaign surface: flat grey field,
   deep-blue display headline, orange full stop, slab payoff.
   ============================================================ */

#gate{display:none}

@media (min-width:700px) and (min-height:520px){
  #app{display:none}
  #gate{
    display:grid;place-items:center;
    min-height:100dvh;padding:var(--space-8) var(--space-7);
    background:var(--cb-grey-100);
  }
}

/* When the page is the iframe's own document it always renders the
   app, whatever the window width is. Higher specificity than the
   media query above, so no !important needed. */
html.framed #gate{display:none}
html.framed #app{display:flex;max-width:none;box-shadow:none}
/* Desktop draws a classic scrollbar where a phone would draw an
   overlay one; inside the mockup that reads as a browser, not a phone. */
html.framed #screen{scrollbar-width:none}
html.framed #screen::-webkit-scrollbar{display:none}

.gate{
  width:100%;max-width:1120px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:var(--space-10);align-items:center;
}

.gate__copy{display:flex;flex-direction:column;gap:var(--space-6);min-width:0}

.gate__brand{display:flex;align-items:center;gap:var(--space-4)}
.gate__logo{width:44px;height:44px;border-radius:var(--radius-lg);object-fit:cover;flex:none}
.gate__brandtext{display:flex;flex-direction:column;line-height:1.15}
.gate__brandtext b{font-size:var(--fs-sm);font-weight:var(--fw-extrabold);color:var(--text-body)}
.gate__brandtext span{font-size:var(--fs-2xs);color:var(--text-muted)}

.gate__title{
  font-size:clamp(var(--fs-3xl),4vw,var(--fs-5xl));
  font-weight:var(--fw-black);line-height:var(--lh-tight);letter-spacing:var(--ls-display);
  text-transform:uppercase;color:var(--text-heading-brand);
  max-width:12ch;
}
.gate__payoff{
  font-family:var(--font-slab);font-size:var(--fs-lg);color:var(--cb-navy-400);
  margin-top:calc(var(--space-5) * -1);
}
.gate__lead{font-size:var(--fs-md);line-height:var(--lh-normal);color:var(--text-muted);max-width:46ch}

/* ---- Deep links that drive the iframe ---- */
.gate__try{display:flex;flex-direction:column;gap:var(--space-4)}
.gate__trylabel{
  font-size:var(--fs-2xs);font-weight:var(--fw-black);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--text-muted);
}
.gate__links{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.gatelink{
  display:inline-flex;align-items:center;gap:var(--space-3);
  height:var(--control-h-md);padding:0 var(--space-5);
  background:var(--surface-card);border-radius:var(--radius-pill);
  box-shadow:inset 0 0 0 1px var(--border-subtle),var(--shadow-xs);
  font-size:var(--fs-2xs);font-weight:var(--fw-bold);color:var(--text-body);
  transition:var(--transition-control),transform var(--duration-instant) var(--ease-standard);
}
.gatelink svg{width:16px;height:16px;color:var(--cb-blue-600);flex:none}
.gatelink:hover{box-shadow:inset 0 0 0 1px var(--cb-blue-200),var(--shadow-sm)}
.gatelink:active{transform:translateY(1px);background:var(--cb-grey-50)}
.gatelink.is-on{
  background:var(--surface-brand-soft);color:var(--cb-blue-800);
  box-shadow:inset 0 0 0 2px var(--border-focus);
}

.gate__foot{
  font-size:var(--fs-2xs);color:var(--text-subtle);
  border-top:1px solid var(--border-subtle);padding-top:var(--space-5);
  max-width:54ch;line-height:var(--lh-normal);
}

/* ------------------------------------------------------------
   Device
   1:1 pixels — the frame is sized to the app rather than scaled,
   so nothing inside is resampled.
   ------------------------------------------------------------ */
.gate__device{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);flex:none}

.device{
  position:relative;flex:none;
  width:414px;padding:12px;
  background:var(--cb-grey-900);border-radius:52px;
  box-shadow:
    inset 0 0 0 2px #3a4148,
    0 2px 6px rgba(13,16,17,.18),
    0 24px 60px rgba(13,16,17,.28);
}
/* Side buttons */
.device::before,.device::after{
  content:"";position:absolute;width:3px;border-radius:2px;background:#2a3137;
}
.device::before{left:-3px;top:126px;height:58px}
.device::after{right:-3px;top:150px;height:92px}

.device__screen{
  position:relative;overflow:hidden;
  border-radius:40px;background:var(--surface-page);
  display:flex;flex-direction:column;
  height:min(844px,calc(100dvh - 150px));
  min-height:520px;
}

.device__status{
  flex:none;position:relative;height:46px;
  background:var(--surface-brand);color:var(--cb-white);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--space-7) var(--space-1);
  font-size:var(--fs-sm);font-weight:var(--fw-extrabold);letter-spacing:var(--ls-tight);
}
.device__island{
  position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:110px;height:30px;border-radius:16px;background:var(--cb-grey-900);
}
.device__meters{display:flex;align-items:center;gap:6px}

.device__frame{flex:1;min-height:0;border:0;width:100%;display:block;background:var(--surface-page)}

.device__caption{
  display:flex;align-items:center;gap:var(--space-3);
  font-size:var(--fs-2xs);color:var(--text-muted);
}
.device__caption b{color:var(--text-body)}
.device__live{
  width:8px;height:8px;border-radius:var(--radius-circle);background:var(--cb-green-500);flex:none;
  box-shadow:0 0 0 3px rgba(11,138,46,.18);
}

/* ------------------------------------------------------------
   Narrower desktops / short windows: stack, device first
   ------------------------------------------------------------ */
@media (max-width:1080px){
  #gate .gate{
    grid-template-columns:minmax(0,1fr);
    gap:var(--space-8);justify-items:center;
  }
  #gate .gate__copy{max-width:560px;text-align:center;align-items:center;order:2}
  #gate .gate__device{order:1}
  #gate .gate__title{max-width:none}
  #gate .gate__links{justify-content:center}
  #gate .gate__foot{text-align:center}
  /* Leave the copy below peeking, so it's clear there's more than the device. */
  #gate .device__screen{height:min(720px,calc(100dvh - 190px))}
}

@media (max-height:900px) and (min-width:1081px){
  #gate .device{width:392px}
  #gate .device__screen{border-radius:36px}
}