/* ============================================================
 * energy.css — energy.standout.jp page-specific components
 * Loaded AFTER standout.css. Reuses so-* base tokens/classes;
 * only adds what standout.css doesn't already cover:
 * stat strip, 4-col reasons grid, process flow steps.
 * ============================================================ */

/* ---- Hero stat strip ---- */
.so-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2.2rem;
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--so-hair);
}
.so-stat-value {
  font-family: var(--so-mono);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--so-signal);
  line-height: 1.2;
}
.so-stat-label {
  font-family: var(--so-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--so-muted);
  margin-top: 0.3rem;
}

/* ---- 4-column "why us" grid ---- */
.so-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media (max-width: 900px) { .so-why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .so-why-grid { grid-template-columns: 1fr; } }
.so-why-card {
  border: 1px solid var(--so-hair);
  border-radius: 4px;
  background: var(--so-panel2);
  padding: 1.4rem;
}
.so-why-num {
  font-family: var(--so-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--so-signal);
}
.so-why-card h3 {
  font-size: 1.05rem;
  font-weight: 500;
  margin: 0.6rem 0 0.6rem;
  color: var(--so-text);
}
.so-why-card p {
  font-size: 0.88rem;
  line-height: 1.8;
  color: var(--so-muted);
  margin: 0;
}

/* ---- Process flow ---- */
.so-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.6rem;
}
.so-flow-step {
  border: 1px solid var(--so-hair);
  border-radius: 4px;
  padding: 0.7rem 1.1rem;
  font-family: var(--so-mono);
  font-size: 0.82rem;
  color: var(--so-text);
  background: var(--so-panel2);
}
.so-flow-arrow {
  color: var(--so-dim);
  font-family: var(--so-mono);
  font-size: 0.9rem;
}
.so-flow-note {
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: var(--so-muted);
}

/* ---- Contact CTA ---- */
.so-contact-card {
  border: 1px solid var(--so-hair);
  border-radius: 4px;
  background: var(--so-panel);
  padding: 2rem;
  text-align: center;
}
.so-contact-card p {
  color: var(--so-muted);
  margin: 0.6rem 0 1.4rem;
  font-size: 0.95rem;
}
.so-contact-link,
.so-contact-link:visited {
  display: inline-block;
  padding: 0.7rem 1.6rem;
  border: 1px solid var(--so-signal) !important;
  border-radius: 2px;
  color: var(--so-signal) !important;
  text-decoration: none;
  font-family: var(--so-mono);
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  transition: background 0.15s ease, color 0.15s ease;
}
.so-contact-link:hover {
  background: var(--so-signal) !important;
  color: var(--so-bg) !important;
}

/* ---- Contact: mailto + copy button ---- */
.so-contact-email {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.9rem;
  flex-wrap: wrap;
}
.so-contact-address {
  font-family: var(--so-mono);
  font-size: 0.9rem;
  color: var(--so-text);
}
.so-copy-btn {
  border: 1px solid var(--so-hair) !important;
  background: var(--so-panel2) !important;
  color: var(--so-muted) !important;
  font-family: var(--so-mono);
  font-size: 0.78rem;
  padding: 0.35rem 0.7rem;
  border-radius: 2px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.so-copy-btn:hover { border-color: var(--so-signal) !important; color: var(--so-signal) !important; }
.so-copy-btn.copied { color: var(--so-signal) !important; border-color: var(--so-signal) !important; }

/* ---- Inline text links inside so-contact-card / so-flow-note (STANDOUT Inc. / LinkedIn) ---- */
.so-inline-link,
.so-inline-link:visited {
  color: var(--so-signal) !important;
}
.so-inline-link:hover { color: var(--so-text) !important; }

/* ---- Comparison table (EN "For Global Clients" page only) ---- */
.so-compare-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--so-hair);
  border-radius: 4px;
  overflow: hidden;
  font-size: 0.9rem;
}
.so-compare-table th,
.so-compare-table td {
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid var(--so-hair);
  text-align: left;
  color: var(--so-muted);
}
.so-compare-table thead th {
  font-family: var(--so-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--so-text);
  background: var(--so-panel2);
}
.so-compare-table tbody th {
  font-family: var(--so-mono);
  font-size: 0.82rem;
  color: var(--so-text);
  font-weight: 500;
  white-space: nowrap;
}
.so-compare-table td.so-compare-us {
  color: var(--so-signal);
}
.so-compare-table tr:last-child th,
.so-compare-table tr:last-child td {
  border-bottom: none;
}