/* ============ Mobbin-style reskin: clean modern SaaS surface ============ */

/* ---------- Container width — Mobbin-like contained layout ---------- */
.container, .container-wide {
  max-width: 1072px !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
}
.container-narrow { max-width: 800px !important; }
.highlight-grid, .demo-wrap, .case-teaser,
footer .foot-grid, footer .foot-base {
  max-width: 1072px !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
}
.hero-inner { max-width: 1072px; margin: 0 auto; padding: 0 32px; }
.product-mock { max-width: 1008px !important; }
.solution-table { max-width: 1008px !important; }
@media (max-width: 640px) {
  .container, .container-wide, .highlight-grid, .demo-wrap,
  footer .foot-grid, footer .foot-base, .hero-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ---------- Typography: bigger, tighter, bolder ---------- */
.hero h1 {
  font-size: clamp(46px, 6vw, 74px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.12 !important;
}
.section-title {
  font-size: clamp(34px, 4vw, 46px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.2 !important;
}
.shl-block h2, .highlight h2 {
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
}
.hero-sub {
  font-size: 17px;
  line-height: 2;
}

/* ---------- 01 Problem — modern equal-height cards ---------- */
.strengths-grid { gap: 14px; align-items: stretch; }
.strengths-grid > .reveal { height: 100%; }
.strength-card {
  height: 100%;
  display: flex; flex-direction: column;
  padding: 30px 24px 28px !important;
  background: #F7F7F5 !important;
  border: none !important;
}
.strength-card:hover { background: #F2F2EE !important; }
.strength-card .num-mark { margin-bottom: 44px !important; align-items: baseline !important; gap: 10px !important; }
.strength-card .problem-cat { align-self: auto !important; padding-bottom: 0 !important; }
.strength-card .problem-num {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--black) !important;
}
.strength-card .problem-cat {
  font-family: var(--font-en);
  font-size: 10px; letter-spacing: 0.1em;
  color: var(--text-quiet);
}
.strength-card h3 {
  font-size: 17.5px !important;
  min-height: 3.6em;
  text-wrap: pretty;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
  margin-bottom: 10px !important;
}
.strength-card p { font-size: 13.5px; margin-top: 0; }
.strength-card .corner-mark { opacity: 1 !important; top: 26px; right: 26px; }

/* ---------- Floating pill nav with blur ---------- */
.site-nav {
  background: transparent !important;
  border-bottom: none !important;
  padding: 12px 16px !important;
}
.site-nav.scrolled { background: transparent !important; border-bottom: none !important; }
.nav-inner {
  max-width: 1008px !important;
  padding: 8px 10px 8px 22px !important;
  background: rgba(255,255,255,0.78);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  transition: box-shadow 250ms ease, background 250ms ease;
}
.site-nav.scrolled .nav-inner {
  background: rgba(255,255,255,0.88);
  box-shadow: 0 8px 32px -12px rgba(0,0,0,0.12);
}
.nav-menu a { font-size: 13.5px; }

/* ---------- Pill buttons ---------- */
.btn { border-radius: 999px !important; }
.btn-dark { background: #111 !important; }
.btn-dark:hover { background: #000 !important; }

/* ---------- Eyebrows as pill chips ---------- */
.section-head .eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  border: 1px solid rgba(0,0,0,0.09);
  border-radius: 999px;
  background: white;
  color: var(--text-dim);
  margin-bottom: 18px;
}

/* ---------- Surfaces: lighter borders, bigger radii, softer depth ---------- */
.strength-card, .bento-cell, .cost-card, .voice-card, .pv2-card,
.demo-card, .product-mock, .sol-face, .about-table, .biz-card,
.faq-item, .proof-cell, .ai-option, .pv2-ai {
  border-radius: 18px !important;
  border-color: rgba(0,0,0,0.07) !important;
}
.product-mock, .demo-card {
  border-radius: 22px !important;
  box-shadow: 0 24px 64px -32px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.04) !important;
}
.bg-off, .highlight.bg-off { background: #F7F7F5 !important; }
.marquee-strip { background: white !important; }

/* ---------- Hero: calmer, whiter, product-first ---------- */
.hero { padding: 148px 0 110px !important; }
html[data-density="compact"] .hero { padding: 100px 0 76px !important; }
.hero h1 { margin: 0 0 28px !important; }
.hero-sub { margin: 0 auto 40px !important; }
.hero-buttons { margin-bottom: 72px !important; }
.hero-stats { margin-top: 0; margin-bottom: 84px; }
.hero-shapes svg { opacity: 0.1 !important; }

/* Hero client strip (Mobbin-style trusted-by) */
.hero-clients { margin-bottom: 84px; }
.hero-clients-label {
  font-size: 12px; color: var(--text-quiet);
  letter-spacing: 0.04em; margin-bottom: 18px;
}
.hero-clients-row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 18px clamp(44px, 5.7vw, 104px);
}
/* Cells hug their logo so the gap between logos is optically even;
   the row height is the shared measure, per-logo caps do the normalising. */
.hcl-box {
  height: 64px; width: auto;
  display: flex; align-items: center; justify-content: center;
  opacity: 1;
  mix-blend-mode: multiply;
  transition: opacity 250ms ease;
}
.hcl-box:hover { opacity: 0.68; }
.hcl-box img {
  max-width: none;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
}
/* Optical size normalisation — wordmarks read larger than emblem logos */
.hcl-box img[alt="キトウシの森"] { max-height: 80%; }
.hcl-box img[alt="みずにわテラス"] { max-height: 80%; }
.hcl-box img[alt="JA"] { max-height: 50%; }
.hcl-box img[alt="ensembles"] { max-height: 44%; }
.hcl-box:has(image-slot) { width: 72px; }
.hcl-box image-slot { width: 100%; height: 100%; aspect-ratio: auto !important; }
.hcl-box image-slot::part(frame) { overflow: visible; }
.hcl-box image-slot::part(image) {
  width: 100%; height: 115%;
  top: 50% !important; left: 50% !important;
  object-fit: contain;
}
/* Optical kerning: each logo has different internal padding, so nudge cells
   until the gaps between the actual ink read even (measured, not eyeballed). */
@media (min-width: 641px) {
  .hero-clients-row .hcl-box:nth-child(2) { margin-left: -6.5px; }
  .hero-clients-row .hcl-box:nth-child(3) { margin-left: 0.5px; }
  .hero-clients-row .hcl-box:nth-child(4) { margin-left: 7.5px; }
  .hero-clients-row .hcl-box:nth-child(5) { margin-left: 7px; }
}
@media (max-width: 640px) {
  .hero-clients-row { gap: 10px 28px; }
  .hcl-box { height: 48px; }
  .hcl-box:has(image-slot) { width: 56px; }
}
.hero-client-logo {
  width: 132px; height: 44px;
  transition: opacity 250ms ease;
  opacity: 1;
  mix-blend-mode: multiply;
}
.hero-client-logo:hover { opacity: 0.68; }
.hero-client-logo image-slot {
  width: 100%; height: 100%;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}
.hero-client-name {
  align-self: center;
  font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
  color: rgba(0,0,0,0.45);
  white-space: nowrap;
}
.hero-clients-row span {
  font-size: 16px; font-weight: 600; letter-spacing: 0.01em;
  color: rgba(0,0,0,0.38);
  white-space: nowrap;
}
.hero-clients-row span.upcoming {
  font-family: var(--font-en);
  color: rgba(0,0,0,0.26);
}
@media (max-width: 640px) {
  .hero-clients-row { gap: 10px 12px; }
  .hero-client-logo { width: 104px; height: 36px; }
}

.pricing-note { }
.pricing-more {
  display: inline-block; margin-top: 10px;
  font-size: 13px; font-weight: 600; color: var(--green-text);
  text-decoration: none;
}
.pricing-more:hover { text-decoration: underline; }

/* ---------- Links ---------- */
a { text-decoration: none; }
.nav-menu a:hover, .foot-col a:hover { color: var(--green-text); }