/* corporate.css — "more corporate, keep the iso edge" skin.
   Activated by html[data-dir="A"] (Tonal Diorama) and html[data-dir="C"]
   (Product-first). Everything here is additive on top of iso.css; with no
   data-dir attribute the original toy look is untouched. */

/* ── shared corporate skin (A + C) ─────────────────────────────────────── */
[data-dir] {
  /* hairline, toned borders instead of heavy black outlines */
  --ink-line:  rgba(46,40,34,0.18);
  --soft-line: rgba(46,40,34,0.09);
  /* layered soft shadows instead of hard sticker offsets */
  --toy-sh:    0 3px 12px rgba(43,38,32,0.10), 0 1px 3px rgba(43,38,32,0.07);
  --toy-sh-lg: 0 20px 46px rgba(43,38,32,0.12), 0 4px 12px rgba(43,38,32,0.07);
}

/* refined headings: drop the rounded Fredoka for a confident grotesk */
[data-dir] h1, [data-dir] h2, [data-dir] h3,
[data-dir] .plan-name, [data-dir] .type-name,
[data-dir] .mini-title, [data-dir] .mini-q,
[data-dir] .ed-q, [data-dir] .ed-title, [data-dir] .num {
  font-family: 'Geist', system-ui, sans-serif;
  letter-spacing: -0.022em;
}
[data-dir] .hero h1,
[data-dir] .hero h1 span {
  font-family: 'Geist', system-ui, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.028em;
}
[data-dir] .beat h2 { font-weight: 600; }

/* buttons / pills: tighter radius, hairline border, soft lift on hover */
[data-dir] .btn, [data-dir] .nav-install, [data-dir] .plan-cta {
  border-radius: 10px; border-width: 1.5px; box-shadow: var(--toy-sh);
}
[data-dir] .btn:hover, [data-dir] .nav-install:hover, [data-dir] .plan-cta:hover {
  transform: translateY(-1px); box-shadow: 0 9px 22px rgba(43,38,32,0.15);
}
[data-dir] .btn:active, [data-dir] .nav-install:active, [data-dir] .plan-cta:active {
  transform: translateY(0); box-shadow: var(--toy-sh);
}
[data-dir] .hero-tag { border-width: 1.5px; }
[data-dir] .top-nav { border-bottom-width: 1px; }

/* meta list: quiet check instead of decorative diamonds */
[data-dir] .hero-meta .meta-mark {
  width: auto; height: auto; background: none; transform: none; border-radius: 0;
  color: var(--c-green); font-size: 13px; font-weight: 700; line-height: 1;
}
[data-dir] .hero-meta .meta-mark::before { content: "✓"; }

/* sheet + cards: lighter frames, softer corners */
[data-dir] .sheet { border-width: 1.5px; border-radius: 22px; }
[data-dir] .plan-card { border-width: 1px; border-radius: 14px; }
[data-dir] .plan-card.featured {
  border-color: var(--c-primary);
  box-shadow: 0 20px 44px rgba(138,74,134,0.16), 0 4px 12px rgba(43,38,32,0.06);
}
[data-dir] .type-card { border-width: 1px; }

/* the in-scene monitor: a clean planted screen, not a chunky sticker */
[data-dir] .crt { border-width: 0.85cqw; box-shadow: 0 1.8cqw 3.6cqw rgba(43,38,32,0.16); }
[data-dir] .crt-screen { border-width: 0.55cqw; }

/* ── calmer, purposeful motion ─────────────────────────────────────────── */
/* keep the live vote-tick (it earns its place); drop the bouncing badge and
   the rising vote chips that read gimmicky. */
[data-dir] .crt-badge {
  animation: none; border-width: 0.7cqw;
  box-shadow: 0 0.9cqw 2.2cqw rgba(43,38,32,0.18);
}
[data-dir] .iso-floaties { display: none; }
[data-dir] .hero-tag .blip { box-shadow: 0 0 0 4px rgba(138,74,134,0.16); animation: none; }

/* demo lightbox window — soft shadow to match */
[data-dir] .ed { border-width: 1.5px; box-shadow: 0 30px 70px rgba(43,38,32,0.30); }

/* ════════════════════════════════════════════════════════════════════════
   Direction C — product-first. The real live-poll UI leads; the isometric
   world shrinks to a signature accent.
   ════════════════════════════════════════════════════════════════════════ */
[data-dir="C"] .hero { padding-top: 22px; }
[data-dir="C"] .hero-grid { grid-template-columns: 0.92fr 1.2fr; gap: 44px; align-items: center; }

/* relative stage that carries the product window + the small diorama accent */
.prod-stage { position: relative; width: 100%; padding: 6px 0 78px; }

/* clean product window (flat, soft) housing the live poll */
.prod-window {
  container-type: inline-size;
  position: relative; width: 100%; max-width: 600px; margin: 0 auto;
  background: var(--c-panel);
  border: 1.5px solid var(--ink-line); border-radius: 16px;
  box-shadow: var(--toy-sh-lg);
  overflow: hidden;
}
.prod-screen { position: relative; aspect-ratio: 16 / 10; }
.prod-screen .mini-ed { position: absolute; inset: 0; }

/* tiny "live" tab on the window's top edge */
.prod-tab {
  position: absolute; top: -13px; left: 26px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-primary);
  background: var(--c-panel); border: 1.5px solid var(--c-primary); border-radius: 999px;
  padding: 4px 12px; box-shadow: var(--toy-sh);
}
.prod-tab i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(138,74,134,0.20);
}

/* the isometric world as a small signature flourish, lower-left of the window */
.iso-accent { position: absolute; left: -10px; bottom: -14px; width: 224px; z-index: 4; pointer-events: none; }
.iso-accent-svg { width: 100%; height: auto; display: block; }

@media (max-width: 980px) {
  [data-dir="C"] .hero-grid { grid-template-columns: 1fr; gap: 18px; }
  .prod-window { margin: 0 auto; }
  .iso-accent { left: -6px; bottom: -8px; width: 188px; }
}
@media (max-width: 600px) {
  .iso-accent { width: 150px; }
  .prod-stage { padding-bottom: 56px; }
}