/* saas-shared.css — Figma SaaS redesign tokens, chrome (header + footer)
   and shared utilities. Linked from every sub-page so the header, logo,
   footer, and button styles look identical to the landing page.

   Note: kept deliberately scoped to .saas-* class names so it doesn't
   conflict with the per-page warm-paper styles still living in each
   sub-page's inline <style> block. The chrome lives in this file; the
   page bodies keep their existing typographic feel until those sections
   are rebuilt section-by-section. */

:root {
  /* Greyscale */
  --white:    #FFFFFF;
  --gray-50:  #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;

  /* Brand colours */
  --orange-50:  #FFF7ED;
  --orange-100: #FFEDD5;
  --orange-200: #FED7AA;
  --orange-300: #FDBA74;
  --orange-500: #F97316;
  --orange-600: #EA580C;
  --orange-700: #C2410C;
  --pink-50:  #FDF2F8;
  --pink-500: #EC4899;
  --pink-600: #DB2777;
  --purple-600: #9333EA;

  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-full: 9999px;

  --shadow-sm:  0 1px 2px 0 rgba(0,0,0,.05);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,.25);

  --max-w-7xl: 80rem;
}

/* ── Pill buttons ──────────────────────────────────────────────────── */

.btn-primary,
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-full);
  font-family: inherit;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn-primary {
  background: var(--orange-500);
  color: var(--white);
  border: none;
  padding: 12px 24px;
  box-shadow: var(--shadow-lg);
}
.btn-primary:hover { background: var(--orange-600); box-shadow: var(--shadow-xl); }
.btn-outline {
  background: transparent;
  color: var(--gray-700);
  border: 2px solid var(--gray-300);
  padding: 10px 22px;
}
.btn-outline:hover { color: var(--orange-500); border-color: var(--orange-500); }

.btn-lg                 { font-size: 1.125rem; padding: 16px 32px; }
.btn-outline.btn-lg     { padding: 14px 30px; }
.btn-arrow              { transition: transform .2s ease; display: inline-block; }
.btn-primary:hover .btn-arrow,
.btn-outline:hover .btn-arrow { transform: translateX(4px); }

.btn-ghost-link {
  background: transparent;
  color: var(--gray-700);
  border: none;
  padding: 8px 16px;
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: color .2s ease;
}
.btn-ghost-link:hover { color: var(--orange-500); }

/* ── Brand wordmark (also used in footer) ─────────────────────────── */
.saas-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}
.saas-brand-jp  { color: var(--gray-900); }
.saas-brand-rom { color: var(--orange-500); }

/* ── Header (sticky, white-blur) ────────────────────────────────── */
.saas-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--gray-200);
  font-family: "Helvetica Now Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.saas-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  max-width: var(--max-w-7xl);
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 640px)  { .saas-header-inner { padding: 0 24px; } }
@media (min-width: 1024px) { .saas-header-inner { padding: 0 32px; } }

.saas-nav { display: none; gap: 32px; align-items: center; }
.saas-nav a {
  color: var(--gray-700);
  transition: color .2s ease;
  font-size: 0.95rem;
  text-decoration: none;
}
.saas-nav a:hover { color: var(--orange-500); }
.saas-actions { display: none; align-items: center; gap: 8px; }
@media (min-width: 768px) {
  .saas-nav { display: flex; }
  .saas-actions { display: flex; }
}

.saas-mobile-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  color: var(--gray-700);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.saas-mobile-toggle:hover { background: var(--gray-100); }
@media (min-width: 768px) { .saas-mobile-toggle { display: none; } }

.saas-mobile {
  display: none;
  background: var(--white);
  border-top: 1px solid var(--gray-200);
  padding: 16px;
}
.saas-mobile.is-open { display: block; }
.saas-mobile a {
  display: block;
  padding: 8px 0;
  color: var(--gray-700);
  font-size: 1rem;
  text-decoration: none;
}
.saas-mobile a:hover { color: var(--orange-500); }
.saas-mobile-actions { padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.saas-mobile-actions > * { width: 100%; }

/* Sub-page top spacing is handled in pages.css (which only loads on
   sub-pages). The landing page manages its own offset via hero padding. */

/* ── Footer (Figma 4-column dark) ──────────────────────────────── */
.saas-footer {
  background: var(--gray-900);
  color: var(--white);
  padding: 64px 16px;
  font-family: "Helvetica Now Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
@media (min-width: 640px)  { .saas-footer { padding: 64px 24px; } }
@media (min-width: 1024px) { .saas-footer { padding: 64px 32px; } }
.saas-footer-inner { max-width: var(--max-w-7xl); margin: 0 auto; }
.saas-footer-grid {
  display: grid; grid-template-columns: 1fr; gap: 48px;
  margin-bottom: 48px;
}
@media (min-width: 768px) { .saas-footer-grid { grid-template-columns: repeat(4, 1fr); } }
.saas-footer-brand-mark {
  font-size: 1.5rem; font-weight: 700;
  margin-bottom: 16px;
  line-height: 1;
}
.saas-footer-brand-mark .saas-brand-jp  { color: var(--white); }
.saas-footer-brand-mark .saas-brand-rom { color: var(--orange-500); }
.saas-footer-tagline { color: #9CA3AF; margin: 0 0 24px; }
.saas-footer-socials { display: flex; gap: 16px; }
.saas-footer-socials a {
  color: #9CA3AF;
  transition: color .2s ease;
  display: inline-flex;
}
.saas-footer-socials a:hover { color: var(--orange-500); }
.saas-footer-socials a.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.saas-footer-col h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  margin: 0 0 16px;
}
.saas-footer-col ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.saas-footer-col a {
  color: #9CA3AF;
  text-decoration: none;
  transition: color .2s ease;
}
.saas-footer-col a:hover { color: var(--orange-500); }
.saas-footer-bottom {
  border-top: 1px solid #1F2937;
  padding-top: 32px;
  text-align: center;
  color: #9CA3AF;
  font-size: 0.875rem;
}