/* Shirun tool page: SaaS-specific bits — the hero layout, a themeable RAG-board
   mock as the hero visual, the five-instrument icons (the site's monoline +
   accent-node language), plan cards and the "versus" compare. Built on the
   Company31 design tokens, so it follows light, dark and high-contrast like the
   rest of the site. Loaded only on shirun.html. */

/* ===== Hero ===== */
.hero--shirun .hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: var(--c31-space-8);
  align-items: center;
}
.hero--shirun .hero__title { max-inline-size: 17ch; }
.hero--shirun .hero__lead { max-inline-size: 54ch; }
@media (max-width: 980px) {
  .hero--shirun .hero__layout { grid-template-columns: 1fr; gap: var(--c31-space-6); }
  .hero--shirun .hero__title,
  .hero--shirun .hero__lead { max-inline-size: none; }
}

/* Brand lockup: mark + wordmark; the mark swaps with the theme */
.shirun-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--c31-space-2);
  margin-block-end: var(--c31-space-4);
}
.shirun-lockup img { inline-size: 30px; block-size: 30px; display: block; }
.shirun-lockup__name {
  font-weight: 700;
  font-size: var(--c31-fs-lg);
  letter-spacing: var(--c31-tracking-tight);
  color: var(--c31-text);
}
.shirun-lockup__mark--dark { display: none; }
:root[data-theme="dark"] .shirun-lockup__mark--light { display: none; }
:root[data-theme="dark"] .shirun-lockup__mark--dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .shirun-lockup__mark--light { display: none; }
  :root:not([data-theme]) .shirun-lockup__mark--dark { display: block; }
}

/* Hero supporting points */
.hero-points {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--c31-space-2) var(--c31-space-5);
  padding: 0;
  margin-block-start: var(--c31-space-6);
  color: var(--c31-text-muted);
  font-size: var(--c31-fs-sm);
}

/* ===== RAG board mock (hero visual) — a styled stand-in for the dashboard,
   themeable and crisp at any size, rather than a fixed screenshot. ===== */
.app-frame {
  inline-size: 100%;
  border: 1px solid var(--c31-border);
  border-radius: var(--c31-radius-lg);
  overflow: hidden;
  background: var(--c31-surface);
  box-shadow: var(--c31-shadow-lift);
}
.app-frame__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--c31-palette-ink-800);
}
.app-frame__bar .dot { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--c31-palette-slate-700); }
.app-frame__url { margin-inline-start: 12px; color: var(--c31-palette-slate-400); font-size: 12px; }
.app-frame__body { padding: var(--c31-space-5); background: var(--c31-bg-subtle); }
.app-frame__head { margin-block-end: var(--c31-space-4); }
.app-frame__head strong { display: block; color: var(--c31-text); font-size: var(--c31-fs-md); }
.app-frame__head span { color: var(--c31-text-muted); font-size: var(--c31-fs-xs); }

.rag-list { display: flex; flex-direction: column; gap: var(--c31-space-3); }
.rag-card {
  background: var(--c31-surface);
  border: 1px solid var(--c31-border);
  border-radius: var(--c31-radius-md);
  padding: var(--c31-space-4);
}
.rag-card__top { display: flex; align-items: center; gap: var(--c31-space-3); margin-block-end: 8px; }
.rag-card__code { color: var(--c31-text-muted); font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.rag-card__name { font-weight: 700; color: var(--c31-text); font-size: var(--c31-fs-sm); }
.rag-status {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: var(--c31-radius-pill);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.rag-status .rag-dot { inline-size: 7px; block-size: 7px; border-radius: 50%; }
.rag-status--red   { background: rgba(226,72,59,.14);  color: #e2483b; }
.rag-status--red   .rag-dot { background: #e2483b; }
.rag-status--amber { background: rgba(217,119,6,.15);  color: #d97706; }
.rag-status--amber .rag-dot { background: #f59e0b; }
.rag-status--green { background: rgba(22,163,74,.14);  color: #16a34a; }
.rag-status--green .rag-dot { background: #16a34a; }
.rag-card__meta { display: flex; justify-content: space-between; gap: var(--c31-space-3); color: var(--c31-text-muted); font-size: 12px; }
.rag-card__meta .warn { color: #e2483b; font-weight: 600; }

/* ===== Five instruments: icons in the site's monoline + accent-node language ===== */
.inst__icon { color: var(--c31-text-muted); margin-block-end: var(--c31-space-3); display: block; }
.inst__icon svg { inline-size: 2.2rem; block-size: 2.2rem; display: block; }
:root[data-contrast="high"] .inst__icon { color: var(--c31-text); }

/* ===== Versus: most PM tools vs Shirun ===== */
.versus {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--c31-space-5);
  margin-block-start: var(--c31-space-6);
}
@media (max-width: 720px) { .versus { grid-template-columns: 1fr; } }
.versus__col {
  border: 1px solid var(--c31-border);
  border-radius: var(--c31-radius-lg);
  padding: var(--c31-space-6);
  background: var(--c31-surface);
}
.versus__col--us { border-color: var(--c31-accent); }
.versus__h {
  font-size: var(--c31-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--c31-tracking-caps);
  margin-block-end: var(--c31-space-4);
}
.versus__col--them .versus__h { color: var(--c31-text-muted); }
.versus__col--us .versus__h { color: var(--c31-accent); }
.versus__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--c31-space-3); }
.versus__list li { padding-inline-start: 1.6em; position: relative; color: var(--c31-text-soft); font-size: var(--c31-fs-sm); }
.versus__col--them li::before { content: "\2715"; position: absolute; inset-inline-start: 0; color: var(--c31-text-muted); }
.versus__col--us li::before { content: "\2713"; position: absolute; inset-inline-start: 0; color: var(--c31-accent); font-weight: 800; }

/* ===== Plans ===== */
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--c31-space-5);
  margin-block-start: var(--c31-space-6);
}
@media (max-width: 820px) { .plans { grid-template-columns: 1fr; } }
.plan {
  display: flex;
  flex-direction: column;
  gap: var(--c31-space-3);
  background: var(--c31-surface);
  border: 1px solid var(--c31-border);
  border-radius: var(--c31-radius-lg);
  padding: var(--c31-space-6);
  position: relative;
}
.plan--featured { border-color: var(--c31-accent); box-shadow: var(--c31-shadow-lift); }
.plan__tag {
  position: absolute;
  inset-block-start: -11px;
  inset-inline-end: var(--c31-space-5);
  background: var(--c31-accent);
  color: var(--c31-palette-white);
  font-size: var(--c31-fs-xs);
  font-weight: 700;
  padding: 2px 10px;
  border-radius: var(--c31-radius-pill);
}
:root[data-theme="dark"] .plan__tag { color: var(--c31-palette-black); }
.plan__name { font-size: var(--c31-fs-md); font-weight: 700; color: var(--c31-text); }
.plan__price { font-size: var(--c31-fs-2xl); font-weight: 700; letter-spacing: var(--c31-tracking-tighter); color: var(--c31-text); line-height: 1.1; }
.plan__price span { font-size: var(--c31-fs-sm); font-weight: 500; color: var(--c31-text-muted); letter-spacing: 0; }
.plan__list { list-style: none; padding: 0; margin: var(--c31-space-2) 0 var(--c31-space-5); display: flex; flex-direction: column; gap: var(--c31-space-2); }
.plan__list li { padding-inline-start: 1.5em; position: relative; color: var(--c31-text-soft); font-size: var(--c31-fs-sm); }
.plan__list li::before { content: "\2713"; position: absolute; inset-inline-start: 0; color: var(--c31-accent); font-weight: 800; }
.plan .btn { margin-block-start: auto; }

/* Centre a section's content (closing CTA) */
.center { text-align: center; }
.center .section-lead, .center .hero__actions { margin-inline: auto; }
.center .hero__actions { justify-content: center; }

/* High contrast: let borders carry the design */
:root[data-contrast="high"] .app-frame,
:root[data-contrast="high"] .rag-card,
:root[data-contrast="high"] .plan,
:root[data-contrast="high"] .versus__col { border-width: 2px; box-shadow: none; }