/* ═══════════════════════════════════════════════════════════════════
   Mocca — Landing Page
   Hero on top of shell. Live runtime feel. Push the system.
   Viewport-driven. No fake device chrome.
   ═══════════════════════════════════════════════════════════════════ */

/* signed-out body = column scroll, not overflow:hidden */
.body-out{display:block;background:var(--bg-1);overflow:visible}

/* ─────────────────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────────────────── */
.hero{
  position:relative;
  padding:clamp(32px, 6vw, 80px) clamp(24px, 5vw, 64px) clamp(40px, 7vw, 100px);
  overflow:clip;
  background:
    radial-gradient(90% 70% at 88% 4%, color-mix(in srgb, var(--accent) 3%, transparent), transparent 72%),
    var(--bg-1);
  border-bottom:1px solid var(--border);
  /* Fill the viewport on desktop+ so the hero reads as the full first
     screen instead of sitting in the upper half with empty space below.
     `align-items:center` on .hero-grid then vertically centers the
     headline + stage on tall monitors. The min-height is suppressed in
     the tablet / mobile-V / mobile-H rules below where the layout
     stacks and a fixed minimum would over-extend the section. */
  min-height:calc(100dvh - var(--mk-nav-h));
  display:flex;flex-direction:column;justify-content:center;
}
[data-theme="dark"] .hero{
  background:
    radial-gradient(90% 70% at 88% 4%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 72%),
    var(--bg-1);
}
/* Coffee-bean ornament removed — a single, barely-there wash on .hero keeps
   the header calm and minimal instead of stacking two soft glows. */
.hero::before{ content:none; }

.ticker{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:var(--mk-radius-pill);
  font:500 12px var(--mk-font-mono);
  color:var(--fg-2);
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:hidden;
  margin-bottom:clamp(36px, 6vw, 72px);
}
.ticker-dot{width:8px;height:8px;border-radius:999px;background:var(--mk-success);flex-shrink:0;
  box-shadow:0 0 0 0 color-mix(in srgb, var(--mk-success) 60%, transparent);
  animation:pulse 2s var(--mk-ease) infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--mk-success) 60%, transparent)}
  70%{box-shadow:0 0 0 8px color-mix(in srgb, var(--mk-success) 0%, transparent)}
  100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--mk-success) 0%, transparent)}
}
.ticker-label{text-transform:none;letter-spacing:.1em;color:var(--fg-2);font-weight:700;flex-shrink:0}
.ticker-stream{flex:1;min-width:0;overflow:hidden;white-space:nowrap;will-change:transform;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker-stream .tk{display:inline-block;padding-inline-end:28px;color:var(--fg-1)}
.ticker-stream .tk .k{color:var(--fg-3)}
.ticker-stream .tk .v{color:var(--accent)}
.ticker-stream .tk .ok{color:var(--mk-success)}
.ticker-stream .tk .warn{color:var(--mk-warning)}

/* ── Hero grid ── */
.hero-grid{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap:clamp(28px, 4vw, 96px);
  align-items:center;
  /* Allow the hero to fill ultra-wide screens. Cap is generous so content
     doesn't read as cropped on 2K+ monitors, while gap clamps prevent the
     two columns from drifting absurdly far apart. */
  max-width:min(1800px, 100%);
  margin-inline:auto;
}
/* Tablet: stack hero vertically */
@media (min-width: 721px) and (max-width: 1024px) and (min-height: 600px){
  .hero-grid{grid-template-columns:1fr}
}
/* Mobile-V: stack hero vertically */
@media (max-width: 960px) and (orientation: portrait), (max-width: 720px){
  .hero-grid{grid-template-columns:1fr}
}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--fg-2);
  font-size:12px;
  margin-bottom:clamp(16px, 2vw, 24px);
}
.eyebrow-tag{
  padding:3px 8px;border:1px solid var(--border);border-radius:var(--mk-radius-pill);
  color:var(--fg-1);font-weight:600;
  background:var(--bg-2);
}
.eyebrow-sep{color:var(--fg-3)}

.hero-h{
  font-family:var(--mk-font-ui);
  font-weight:800;
  font-size:clamp(28px, 4.5vw, 64px);
  line-height:1.05;
  letter-spacing:-.035em;
  margin:0 0 clamp(20px, 2.6vw, 32px);
  color:var(--fg-1);
  text-wrap:balance;
  overflow:visible;
}

/* Stacked cycling word — inline-grid puts all .hw in the same cell */
.hero-word{
  display:inline-grid;
  overflow:visible;
  vertical-align:baseline;
}
.hero-word .hw{
  grid-area:1/1;
  font-style:normal;
  font-weight:800;
  opacity:0;
  transform:translateY(0.25em);
  transition:opacity 450ms var(--mk-ease), transform 450ms var(--mk-ease);
  white-space:nowrap;
  padding-inline-end:0.12em;
  padding-inline-start:0.06em;
  color:var(--accent-text);
}
.hero-word .hw.on { opacity:1; transform:none; }
.hero-word .hw.out{ opacity:0; transform:translateY(-0.25em); }
/* Arabic: wider start-side padding prevents ink overflow from clipping the gradient */
html[dir="rtl"] .hero-word .hw{
  padding-inline-start:0.2em;
  padding-inline-end:0.06em;
}

.hero-sub{
  font-size:clamp(16px, 1.4vw, 20px);
  line-height:1.55;
  color:var(--fg-2);
  max-width:560px;
  margin:0 0 clamp(28px, 3.2vw, 40px);
  text-wrap:pretty;
  transition:opacity 500ms var(--mk-ease), transform 500ms var(--mk-ease), filter 500ms var(--mk-ease);
}
.hero-sub.swap{ opacity:0; transform:translateY(6px); filter:blur(2px) }

.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:clamp(28px, 3vw, 40px)}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;color:var(--fg-1);text-decoration:none;
  font:600 13px var(--mk-font-ui);padding:12px 10px;cursor:pointer}
.btn-ghost .mi{font-size:18px;color:var(--accent)}
.btn-ghost:hover{color:var(--accent)}

.hero-meta{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  color:var(--fg-2);font-size:11px;
  padding-top:20px;
  border-top:1px dashed var(--border);
  max-width:640px;
}
.hero-meta .k{font-style:normal;color:var(--fg-3);font-weight:500}
.hero-meta span:not(.dot-sep){display:inline-flex;gap:6px;align-items:baseline}
.dot-sep{width:3px;height:3px;background:var(--fg-3);border-radius:999px;flex-shrink:0;opacity:.6}

/* ── Live console (right side) ── */
.hero-right{position:relative;min-width:0}

.console{
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:var(--mk-radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-md);
  display:flex;flex-direction:column;
  min-height:420px;
  min-width:0;
}
[data-theme="dark"] .console{background:var(--sidebar-deep);border-color:var(--border)}

.console-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  background:var(--bg-1);
}
[data-theme="dark"] .console-head{background:var(--bg-2)}
.console-title{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--fg-2);font-weight:600;letter-spacing:.02em}
.console-led{width:8px;height:8px;border-radius:999px;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.console-speed{
  display:flex;align-items:center;gap:6px;
  padding:4px 10px;
  border:1px solid var(--border);border-radius:var(--mk-radius-pill);
  background:var(--bg-2);
  font:600 11px var(--mk-font-mono);color:var(--fg-2);
  cursor:pointer;user-select:none;
}
.console-speed:hover{border-color:var(--accent);color:var(--accent)}
.console-speed .mi{font-size:14px;color:var(--accent)}
.console-speed.off .mi{color:var(--fg-3)}
.console-speed.off{color:var(--fg-3)}

.console-body{
  flex:1;padding:10px 14px;
  font:500 12px/1.7 var(--mk-font-mono);
  overflow:hidden;position:relative;
  max-height:380px;
  min-width:0;
}
.console-body .ln{display:flex;gap:12px;align-items:baseline;min-width:0;opacity:0;transform:translateY(6px);
  animation:ln-in 400ms var(--mk-ease) forwards}
@keyframes ln-in{to{opacity:1;transform:none}}
.console-body .ln .t{color:var(--fg-3);min-width:54px;flex-shrink:0;font-size:11px}
.console-body .ln .lvl{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:none;
  padding:1px 6px;border-radius:4px;flex-shrink:0}
.console-body .ln .lvl.ok{background:color-mix(in srgb, var(--mk-success) 18%, transparent);color:var(--mk-success)}
.console-body .ln .lvl.info{background:color-mix(in srgb, var(--accent) 18%, transparent);color:var(--accent)}
.console-body .ln .lvl.warn{background:color-mix(in srgb, var(--mk-warning) 20%, transparent);color:var(--mk-warning)}
.console-body .ln .lvl.trc{background:var(--bg-3);color:var(--fg-2)}
.console-body .ln .m{color:var(--fg-1);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.console-body .ln .m .k{color:var(--fg-3)}
.console-body .ln .m .v{color:var(--accent)}

.console-foot{
  display:flex;justify-content:space-between;
  padding:10px 14px;
  border-top:1px solid var(--border);
  color:var(--fg-3);font-size:11px;
  background:var(--bg-1);
}
[data-theme="dark"] .console-foot{background:var(--bg-2)}

.domain-chip{
  position:absolute;
  inset-inline-start:-24px;bottom:-18px;
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;
  background:var(--bg-1);
  border:1px solid var(--border);
  border-radius:var(--mk-radius-pill);
  box-shadow:var(--shadow-lg);
  font-size:12px;
}
.dc-dot{width:8px;height:8px;border-radius:999px;background:var(--accent-2);flex-shrink:0;
  animation:pulse2 1.4s var(--mk-ease) infinite}
@keyframes pulse2{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent-2) 60%, transparent)}
  50%{box-shadow:0 0 0 6px color-mix(in srgb, var(--accent-2) 0%, transparent)}
}
.dc-label{text-transform:none;letter-spacing:.08em;font-size:10px;color:var(--fg-3);font-weight:700}
.dc-name{color:var(--fg-1);font-weight:600}
@media (max-width: 960px){ .domain-chip{inset-inline-start:auto;inset-inline-end:0;bottom:-14px} }

/* ─────────────────────────────────────────────────────────
   RUNTIME — small multiples
   ───────────────────────────────────────────────────────── */
.runtime{
  padding:clamp(60px, 8vw, 120px) clamp(24px, 5vw, 64px);
  background:var(--bg-2);
  border-bottom:1px solid var(--border);
}

.section-head{max-width:840px;margin-bottom:clamp(40px, 5vw, 64px)}
.section-h{
  font-size:clamp(28px, 4.4vw, 56px);
  line-height:1.05;
  letter-spacing:-.025em;
  font-weight:800;
  margin:0 0 16px;
  text-wrap:balance;
}
.section-h br{display:block}
.section-p{
  font-size:clamp(14px, 1.2vw, 17px);
  line-height:1.6;
  color:var(--fg-2);
  max-width:620px;
  margin:0;
}

.domains{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:14px;
}

.dom-card{
  background:var(--bg-1);
  border:1px solid var(--border);
  border-radius:var(--mk-radius-lg);
  padding:16px;
  display:flex;flex-direction:column;gap:14px;
  position:relative;
  overflow:hidden;
  transition:border-color var(--mk-t-base), transform var(--mk-t-base);
}
.dom-card:hover{border-color:var(--accent)}
.dom-card.editing{border-color:var(--accent);box-shadow:var(--shadow-md)}

.dom-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.dom-name{
  font:600 14px var(--mk-font-mono);
  color:var(--fg-1);
  line-height:1.2;
  outline:none;
  border-radius:4px;
  padding:1px 2px;
}
.dom-name[contenteditable="true"]:focus{background:var(--accent-soft)}
.dom-app{font-size:11px;color:var(--fg-3);margin-top:4px;font-weight:500}
.dom-health{
  display:flex;align-items:center;gap:6px;
  padding:3px 8px;border-radius:999px;
  font:700 10px var(--mk-font-mono);text-transform:none;letter-spacing:.06em;
  background:color-mix(in srgb, var(--mk-success) 14%, transparent);color:var(--mk-success);
}
.dom-health.warn{background:color-mix(in srgb, var(--mk-warning) 16%, transparent);color:var(--mk-warning)}
.dom-health.info{background:color-mix(in srgb, var(--accent) 16%, transparent);color:var(--accent)}
.dom-health .hdot{width:5px;height:5px;background:currentColor;border-radius:999px}

.dom-bars{display:flex;align-items:flex-end;gap:3px;height:36px}
.dom-bars .b{flex:1;background:var(--bg-3);border-radius:2px 2px 0 0;
  transition:height 600ms var(--mk-ease), background 600ms var(--mk-ease)}
.dom-bars .b.hot{background:var(--accent)}
.dom-bars .b.warm{background:color-mix(in srgb, var(--accent) 55%, transparent)}

.dom-meta{
  display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;
  font:500 11px var(--mk-font-mono);
}
.dom-meta .k{color:var(--fg-3)}
.dom-meta .v{color:var(--fg-1);font-weight:600}
.dom-meta .v.accent{color:var(--accent)}

/* ─────────────────────────────────────────────────────────
   PHASES — four-phase waterfall
   ───────────────────────────────────────────────────────── */
.phases{
  padding:clamp(60px, 8vw, 120px) clamp(24px, 5vw, 64px);
  background:var(--bg-1);
  border-bottom:1px solid var(--border);
}

.waterfall{
  display:grid;
  grid-template-columns:max-content max-content 1fr max-content;
  gap:14px 20px;
  align-items:center;
  max-width:1040px;
  font-size:14px;
}
.wf-ruler{
  grid-column:3/4;grid-row:1/2;
  display:flex;justify-content:space-between;
  color:var(--fg-3);
  font:500 10px var(--mk-font-mono);
  padding-bottom:8px;
  border-bottom:1px dashed var(--border);
  margin-bottom:8px;
}
.wf-row{display:contents}
.wf-row .wf-k{grid-column:1/2;font:500 11px var(--mk-font-mono);color:var(--fg-3);text-transform:none;letter-spacing:.08em}
.wf-row .wf-n{grid-column:2/3;font-size:15px;font-weight:700;color:var(--fg-1)}
.wf-row .wf-bar{grid-column:3/4;height:10px;background:var(--bg-3);border-radius:999px;position:relative;overflow:hidden}
.wf-row .wf-bar span{position:absolute;top:0;bottom:0;border-radius:999px;transform-origin:left center;animation:wf-fill 1.8s var(--mk-ease) forwards}
html[dir="rtl"] .wf-row .wf-bar span{transform-origin:right center}
.wf-row[data-p="0"] .wf-bar span{inset-inline-start:0;width:7%;background:var(--accent);animation-delay:.1s}
.wf-row[data-p="1"] .wf-bar span{inset-inline-start:0;width:20%;background:var(--accent);animation-delay:.3s}
.wf-row[data-p="2"] .wf-bar span{inset-inline-start:20%;width:27%;background:var(--accent-2);animation-delay:.6s}
.wf-row[data-p="3"] .wf-bar span{inset-inline-start:47%;width:53%;background:linear-gradient(90deg, var(--accent-2), var(--accent));animation-delay:1s}
@keyframes wf-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.wf-row .wf-t{grid-column:4/5;font:600 12px var(--mk-font-mono);color:var(--accent)}
.wf-row .wf-d{grid-column:2/5;font-size:13px;color:var(--fg-2);line-height:1.5;padding-bottom:10px;border-bottom:1px solid var(--divider)}
.wf-row:last-child .wf-d{border-bottom:none}

@media (max-width: 720px){
  .waterfall{grid-template-columns:1fr}
  .wf-ruler{display:none}
  .wf-row .wf-k,.wf-row .wf-n,.wf-row .wf-bar,.wf-row .wf-t,.wf-row .wf-d{grid-column:1/2}
  .wf-row .wf-n{font-size:18px}
}

/* ─────────────────────────────────────────────────────────
   CLOSE — quiet CTA
   ───────────────────────────────────────────────────────── */
.close{
  padding:clamp(80px, 10vw, 160px) 24px;
  background:var(--bg-2);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.close::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 50% at 50% 50%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%);
  pointer-events:none;
}
.close-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:20px;max-width:720px;margin:0 auto}
.close-mark img{width:56px;height:56px}
.close-h{
  font-size:clamp(26px, 3.6vw, 44px);
  line-height:1.15;
  letter-spacing:-.02em;
  font-weight:700;
  margin:0;
  text-wrap:balance;
}
.close-meta{display:flex;gap:14px;align-items:center;color:var(--fg-3);font-size:11px;margin-top:8px;flex-wrap:wrap;justify-content:center}

/* Editable affordance */
[data-editable]{position:relative}
[data-editable]:hover{cursor:text}
[data-editable][contenteditable="true"]{outline:none}
[data-editable][contenteditable="true"]::after{
  content:"";position:absolute;inset:-6px -10px;border:1px dashed var(--accent);border-radius:8px;pointer-events:none
}
.edit-hint{
  position:absolute;top:-28px;inset-inline-start:-6px;
  display:flex;align-items:center;gap:4px;
  font:600 10px var(--mk-font-mono);color:var(--accent);
  background:var(--bg-1);border:1px solid var(--accent);border-radius:999px;padding:2px 8px;
  white-space:nowrap;
  pointer-events:none;
}
.edit-hint .mi{font-size:12px}


/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE OVERRIDES — these MUST come last in source order so
   media-query rules win against the default declarations above when
   specificity is equal. Earlier in the file the mobile-H @media block
   sat ABOVE .hero-h / .hero-sub / .hero-cta and got overridden by
   them; placing the responsive block here guarantees the override.
   ═══════════════════════════════════════════════════════════════════ */

/* Mobile-H landscape: keep two columns, tighter everything, fit within 100dvh.
   Aggressive vh-driven clamps so a 320-px landscape phone still fits the
   headline + sub + CTA without clipping. The h1 falls to 10 px at the
   shortest heights, the sub to 7 px — readable but no longer dominant. */
@media (max-height: 599px) and (orientation: landscape){
  .hero{
    padding:6px 16px;
    height:100dvh;
    height:100dvh;
    min-height:0;
    overflow:hidden;
    display:flex;
    align-items:center;
  }
  .hero::before{display:none}
  .hero-grid{
    grid-template-columns:minmax(0, 1fr) minmax(0, 1.2fr);
    gap:14px;
    align-items:center;
    width:100%;
    max-height:100%;
  }
  .hero-left{
    min-width:0;display:flex;flex-direction:column;justify-content:center;
    max-height:100%;min-height:0;gap:6px;
  }
  /* Scaled to vh so the headline reads as a hero, not a caption, on
     landscape phones from ~320 to ~430 height. Budget at 320vh (worst
     case): h1 2 lines @ ~22px = 44, sub 3 lines @ ~16px = 48,
     CTA 26, plus gaps 18 = 136 vs 320 available — comfortable.
     Floor keeps readability on the smallest landscape; ceiling keeps
     the text from outgrowing the column at the upper end. */
  .hero-h{font-size:clamp(20px, 6.5vh, 44px) !important;margin:0 !important;line-height:1.08 !important;letter-spacing:-.02em !important;text-wrap:balance}
  .hero-sub{font-size:clamp(12px, 2.6vh, 17px) !important;margin:0 !important;line-height:1.4 !important;max-width:none !important}
  .hero-cta{margin:0 !important;flex-shrink:0}
  .hero-cta .btn.lg{
    height:clamp(28px, 7dvh, 38px) !important;
    padding:0 14px !important;
    font-size:clamp(11px, 2.2vh, 14px) !important;
    border-radius:8px !important;
  }
  .hero-cta .btn.lg .mi{font-size:clamp(14px, 2.6vh, 18px)}
  .hero-right{min-width:0;display:flex;align-items:center;height:100%;min-height:0}
}