/* Bliss 2.0 — shared site styles
   Dark-by-default. Aligned to the Bliss Partner Deck:
   ink-900 page background, paper text, coral as sole accent, no gradients. */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  --font-display: "Noto Sans JP", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-sans:    "Noto Sans JP", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-jp:      "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --font-mono:    "Geist Mono", "SF Mono", ui-monospace, Menlo, monospace;

  --site-max: 1240px;
  --site-pad: 32px;
  --site-pad-mobile: 20px;

  /* Dark-mode surface tokens layered over the base palette */
  --bg:            var(--ink-900);
  --bg-raised:     #1B1612;
  --bg-sunken:     #100C0A;
  --fg:            var(--paper);
  --fg-muted:      var(--ink-300);
  --fg-subtle:     var(--ink-400);
  --rule:          rgba(244, 240, 232, 0.08);
  --rule-strong:   rgba(244, 240, 232, 0.20);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg); overflow-x: hidden; overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}

.display, .h-display, h1.display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.04;
}

button { font-family: inherit; }

.container {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 0 var(--site-pad);
}
@media (max-width: 980px) {
  .hero-grid, .embed-grid, .spotlight-grid, .how-grid, .econ-grid,
  .about-blocks, .sec-cta, .about-tech, .how-three, .cta-card, .pf-two,
  .pf-grid, .flow-grid, .wl-grid {
    grid-template-columns: 1fr !important;
  }
  .feature-grid, .pricing-grid { grid-template-columns: 1fr !important; }
  .sec-grid, .cust-grid, .team-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
  .cta-card { padding: 48px 32px !important; }
  .cta-btns { justify-self: stretch !important; width: 100%; }
  .footer-cap { grid-template-columns: 1fr !important; }
  .cs-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .cs-photos {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
  }
  .cs-photos > * {
    grid-column: auto !important;
    grid-row: auto !important;
    height: 220px !important;
    min-height: 180px;
  }
  .cs-hero { height: 280px !important; }
  .stat-row { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 720px) {
  /* Page sections set grid-template-columns as a React inline style, which no
     class rule can reach — so phones flatten every declared grid by attribute.
     Rules after this one win on equal specificity, so a grid that should stay
     multi-column on a phone (.mock-kpis) just opts back in below. */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .mock-kpis { grid-template-columns: repeat(2, 1fr) !important; }

  /* Display type is sized in vw, so on a 320px screen a long word like
     "registrations." can still outrun the line and push the page sideways. */
  h1, h2, h3, .display, .h-display { overflow-wrap: break-word; }

  .container { padding: 0 var(--site-pad-mobile); }
  .wrap { padding-left: 20px !important; padding-right: 20px !important; }
  .nav-inner { padding-left: 16px !important; padding-right: 16px !important; gap: 12px !important; }
  .nav-links, .nav-signin, .nav-cta { display: none !important; }
  .nav-burger { display: inline-flex !important; }
  .stat-grid, .sec-grid, .cust-grid, .team-grid, .footer-grid, .stat-row, .cs-stats {
    grid-template-columns: 1fr !important;
  }
  .cta-card { padding: 36px 20px !important; border-radius: 16px !important; }
  .cta-deco { display: none !important; }
  .cs-hero { height: 220px !important; }
  .cs-stats { padding-left: 20px !important; padding-right: 20px !important; }
  .cs-stats > div { border-left: none !important; border-top: 1px solid rgba(255,255,255,0.25); padding: 22px 0 !important; }
  .cs-stats > div:first-child { border-top: none !important; }
  nav img[alt="Bliss"] { height: 28px; max-width: 110px; }
  .footer-cap-form { flex-direction: column; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .hero-block { padding: 48px 20px 64px !important; }

  /* The badge sits beside the prose, which costs 64px of a 280px column and
     leaves the body text around 140px wide at 320px. Stack it instead. */
  .econ-tile { flex-direction: column; gap: 14px !important; padding: 24px !important; }
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral-300);
}

/* Buttons — dark-mode primary is coral; secondary is paper-bordered ghost. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  padding: 11px 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: background 120ms var(--ease-out), border-color 120ms var(--ease-out), color 120ms var(--ease-out);
  white-space: nowrap;
}
.btn-primary { background: var(--coral-500); color: var(--paper); }
.btn-primary:hover { background: var(--coral-600); }
.btn-coral { background: var(--coral-500); color: white; }
.btn-coral:hover { background: var(--coral-600); }
.btn-ghost { background: transparent; color: var(--paper); border-color: rgba(244,240,232,0.20); }
.btn-ghost:hover { border-color: rgba(244,240,232,0.55); }
.btn-paper { background: var(--paper); color: var(--ink-900); border-color: var(--paper); }
.btn-paper:hover { background: #fff; }

.btn-link {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--paper);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.btn-link .arrow { color: var(--coral-300); transition: transform 120ms; }
.btn-link:hover .arrow { transform: translateX(2px); }

/* Cards — raised dark by default */
.card {
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 28px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

img { max-width: 100%; height: auto; }
nav img[alt="Bliss"] { height: 32px; width: auto; max-width: 140px; }

/* ── Mobile nav (hamburger + drawer) ── */
.nav-inner { min-width: 0; }
.nav-burger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(244,240,232,0.14);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
}
.nav-burger span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: #FAF7F2;
  transition: transform 160ms ease, opacity 160ms ease;
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.nav-drawer {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 60;
  background: #16110E;
  border-bottom: 1px solid rgba(244,240,232,0.10);
  max-height: min(80dvh, calc(100dvh - 56px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 20px 28px;
  box-shadow: 0 24px 48px rgba(0,0,0,0.55);
}
.nav-drawer.is-open { display: block !important; }
.nav-drawer-section { padding: 16px 0; border-top: 1px solid rgba(244,240,232,0.10); }
.nav-drawer-section:first-child { border-top: none; }
.nav-drawer-heading {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #F69A75;
  margin-bottom: 6px;
}
.nav-drawer a {
  display: block;
  padding: 11px 0;
  color: rgba(244,240,232,0.88);
  text-decoration: none;
  font-size: 15px;
  line-height: 1.3;
}
.nav-drawer-cta {
  display: flex !important;
  justify-content: center;
  margin-top: 8px;
  padding: 12px 18px !important;
  background: #E5634A;
  color: #FAF7F2 !important;
  border-radius: 10px;
  font-weight: 500;
}

@media (min-width: 721px) {
  .nav-drawer { display: none !important; }
}

.jp-placeholder {
  font-family: var(--font-jp);
  background: linear-gradient(transparent 80%, rgba(229,99,74,0.18) 80%);
}

/* Selection / focus */
::selection { background: var(--coral-200); color: var(--ink-900); }