/* Page-specific additions for /minos — built on top of tokens/base/components/layout. */

.minos-hero{
  position: relative;
  padding: 150px var(--side) 110px;
  min-height: 680px;
  display: flex; align-items: center;
  background:
    radial-gradient(1000px 540px at 88% -10%, color-mix(in srgb, var(--turquoise-dim) 55%, transparent), transparent 62%),
    color-mix(in srgb, var(--ink) var(--veil), transparent);
}
.minos-hero{ --minos-gold: #d9a85c; }
.minos-hero .split{ align-items: start; } /* don't stretch the screenshot column to the taller copy column's height — that was the empty box under the dashboard */
.minos-hero .hero-content{ max-width: 560px; }
.minos-hero h1{ font-size: 56px; line-height: 1.08; }
.minos-hero .lede{ font-size: 18px; line-height: 1.6; color: var(--paper-soft); max-width: 500px; }

/* Brand lockup — the first thing visible on entry: a large gold logo mark
   plus the MINOS wordmark, sized to read as its own product identity, not
   a small inline badge. --minos-gold (set on .minos-hero above, sampled
   from the logo mark itself) is shared with the floating dashboard badge
   below so both read as "the same gold", not two arbitrary accents. */
.minos-brand{ display: flex; align-items: center; gap: 16px; }
.minos-brand__badge{
  width: 76px; height: 76px; border-radius: 14px; overflow: hidden; flex: none;
  background: #f4efe6;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px -10px color-mix(in srgb, var(--minos-gold) 55%, transparent);
}
.minos-brand__badge img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.minos-brand__name{
  font-family: var(--font-display); font-weight: 800; font-size: 40px; letter-spacing: 0.01em;
  color: var(--minos-gold);
}

.screenshot-frame--glow{
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--turquoise) 30%, transparent),
    0 40px 90px -28px color-mix(in srgb, var(--turquoise) 35%, transparent);
}

/* Hero visual — the dashboard screenshot stays the primary artifact; the
   bull mark is a small floating brand badge mounted on its bottom-left
   corner (hanging mostly outside the frame, not over the screenshot's own
   content), echoing the gold brand lockup above without competing with it. */
.minos-hero__visual{ position: relative; width: 100%; margin-bottom: 28px; }
.minos-hero__badge{
  position: absolute;
  left: -28px; bottom: -28px;
  width: 104px; height: 104px;
  border-radius: 16px;
  overflow: hidden;
  flex: none;
  background: #f4efe6;
  border: 1px solid color-mix(in srgb, var(--minos-gold) 45%, transparent);
  box-shadow: 0 20px 40px -16px rgba(0,0,0,0.55), 0 0 0 1px color-mix(in srgb, var(--minos-gold) 20%, transparent);
  z-index: 2;
}
.minos-hero__badge img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* Workflow chain — the connected lifecycle, Requirements through Insights */
.workflow-chain{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.workflow-chain__step{
  font-family: var(--font-mono); font-size: 13px; color: var(--text);
  background: color-mix(in srgb, var(--surface) var(--veil-card), transparent);
  border: 1px solid var(--line); border-radius: 999px; padding: 12px 20px;
}
.workflow-chain__arrow{ color: var(--ink-soft); flex: none; }

.big-statement{
  text-align: center; max-width: 620px; margin: 0 auto;
  font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 1.4; color: var(--text);
}

/* Even split — alternating copy/screenshot evidence sections. Unlike the
   shared 7/5 .split (built for copy-heavy sections), these need the
   screenshot to read at real size. */
.split-even{ display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }

.minos-note{ font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft); }

/* Capability chip row (AI section). This page doesn't load products.css,
   which is where .cap-list used to live — self-contained here instead. */
.cap-list{ display: flex; flex-wrap: wrap; gap: 8px; }

.principle-card{ text-align: left; }
.principle-card h3{ font-size: 17px; }

@media (max-width: 640px){
  .minos-hero{ padding: 56px var(--side) 48px; min-height: 0; }
  .minos-hero h1{ font-size: 32px; }
  .minos-brand__badge{ width: 56px; height: 56px; border-radius: 12px; }
  .minos-brand__name{ font-size: 30px; }
  .minos-hero__visual{ margin-bottom: 18px; }
  .minos-hero__badge{ width: 64px; height: 64px; left: -12px; bottom: -16px; border-radius: 12px; }
  .split-even{ grid-template-columns: 1fr; gap: 24px; }
  .big-statement{ font-size: 21px; }
}