:root { color-scheme: light; color: #0a0017; background: #fffffb; font-family: 'DM Sans', sans-serif; }
    * { box-sizing: border-box; }
    body { margin: 0; line-height: 1.5; }
    a { color: inherit; text-decoration: none; }
    a:focus-visible { outline: 3px solid #0a0017; outline-offset: 8px; }
    .page { max-width: 1200px; margin: auto; padding: 32px clamp(24px, 4vw, 64px) 24px; }
    header { display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: 14px; font-weight: 500; }
    header nav { display: flex; gap: 28px; }
    header nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
    .hero { padding: 72px 0 80px; }
    h1 { margin: 0 0 0 -0.065em; font-size: clamp(110px, 20vw, 240px); line-height: .85; font-weight: 500; letter-spacing: -.085em; }
    .services { border-top: 1px solid #0a0017; }
    section { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 32px; padding: 36px 0 40px; border-bottom: 1px solid #0a0017; scroll-margin-top: 24px; }
    section > div { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; min-width: 0; }
    .number { font-size: 13px; padding-top: 10px; }
    h2, .services h3 { margin: 0; font-size: clamp(36px, 4.2vw, 56px); font-weight: 400; line-height: 1.08; letter-spacing: -.045em; }
    .app-link { display: inline-flex; gap: 36px; align-items: center; height: 50px; padding: 13px 18px; flex-shrink: 0; line-height: 1; background: #ffd600; font-size: 17px; }
    .app-link:hover { background: #f0ca00; }
    .arrow { display: inline-block; width: 23px; height: 23px; flex-shrink: 0; vertical-align: middle; }
    header .arrow { width: 14px; height: 14px; }
    footer:not(.site-footer), .footer-bottom { padding-top: 28px; display: flex; justify-content: space-between; gap: 24px; font-size: 12px; flex-wrap: wrap; }
    @media (max-width: 600px) {
      .page { padding: 24px 24px 20px; }
      header { align-items: flex-start; font-size: 12px; }
      header nav { gap: 14px; }
      .hero { padding: 72px 0 60px; }
      section { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 30px 0 36px; }
      .number { padding-top: 6px; }
      h2, .services h3 { font-size: clamp(32px, 8vw, 48px); }
      .app-link { font-size: 15px; gap: 24px; }
    }

.header-controls { display: flex; align-items: center; gap: 32px; }
.language-switch { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.language-switch a { opacity: .5; }
.language-switch a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.language-switch a:hover { opacity: 1; }
html[lang="ja"] { font-family: 'DM Sans', 'IBM Plex Sans JP', sans-serif; }
@media (max-width: 760px) {
  .header-controls { align-items: flex-end; flex-direction: column-reverse; gap: 20px; }
}
@media (max-width: 380px) {
  header nav:not(.language-switch) { flex-direction: column; align-items: flex-end; gap: 10px; }
}

.local-friends, .local-friends:hover { background: #c73944; color: #0a0017; }

.product-logo, .local-friends-logo { display: block; width: 136px; height: auto; }

.progress-page { min-height: 100svh; display: flex; flex-direction: column; }
.progress-main { flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 80px 0; }
.progress-message { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.construction { font-size: 48px; line-height: 1; }
.progress-message h1 { margin: 0; font-size: clamp(48px, 9vw, 128px); line-height: 1.08; letter-spacing: -.045em; overflow-wrap: anywhere; }
.progress-page footer { border-top: 1px solid #0a0017; }

.company-details { font-size: 14px; line-height: 1.8; }
.company-name { margin: 0 0 16px; font-weight: 500; }
.company-details dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 24px; }
.company-details dt { color: #6e677b; }
.company-details dd { margin: 0; }
.company-details address { font-style: normal; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .company-details dl { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

.founder-details { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.founder-details a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) {
  .company-details dt:not(:first-child) { margin-top: 16px; }
}

.company-contact { text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }

.founder-role, .founder-name { margin: 0; }
.founder-role { color: #6e677b; }
.founder-name { font-size: 20px; font-weight: 500; }

.business-title { margin: 0 0 24px; font-size: 18px; line-height: 1.5; font-weight: 500; letter-spacing: 0; }
.company-group { margin-top: 72px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; border-bottom: 1px solid #0a0017; }
.company-group section { display: block; border: 0; padding: 32px 0 40px; min-width: 0; }
.company-group section > div { gap: 24px; }
.company-group h2 { font-size: 24px; line-height: 1.2; letter-spacing: -.025em; }
.company-group .company-details dl { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.company-group .company-details dt:not(:first-child) { margin-top: 12px; }
@media (max-width: 900px) {
  .company-group { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 48px; }
  .company-group section + section { border-top: 1px solid #eae4d6; }
  .company-group section { padding: 28px 0; }
}

.founder-details > dl { margin-top: 16px; }

/* Final layout and interaction refinements. */
.services h3 { text-wrap: balance; }
.company-details a { text-decoration-thickness: 1px; text-underline-offset: 4px; }
.company-details a:hover { text-decoration-thickness: 2px; }
@media (pointer: coarse) {
  .company-details a { display: inline-flex; align-items: center; min-height: 44px; }
  .language-switch a { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 44px; }
}
@media (max-width: 600px) {
  .company-group { margin-top: 32px; }
  .company-group section { padding: 24px 0; }
  .company-group section > div { gap: 20px; }
  .company-details { line-height: 1.7; }
  .company-group .company-details dl { grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; }
  .company-group .company-details dt:not(:first-child) { margin-top: 0; }
  .company-details dt, .company-details dd { align-self: baseline; }
  .founder-details > dl { margin-top: 12px; }
  footer:not(.site-footer), .footer-bottom { gap: 12px 24px; padding-top: 24px; }
}

.site-footer { display: block; padding: 0; }

@media (max-width: 760px) {
  header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px 16px; }
  header > a { grid-column: 1; grid-row: 1; }
  .header-controls { display: contents; }
  header .language-switch { grid-column: 2; grid-row: 1; }
  header nav.main-nav { grid-column: 1 / -1; grid-row: 2; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; }
}
@media (max-width: 380px) {
  header nav.main-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.hero-intro { color: #6e677b; margin: 32px 0 0; max-width: 38em; font-size: clamp(16px, 1.6vw, 20px); line-height: 1.7; }
@media (max-width: 760px) {
  header nav.main-nav a, header .language-switch a { display: inline-flex; align-items: center; min-height: 44px; }
  header .language-switch a { justify-content: center; min-width: 32px; }
  header { gap: 8px 16px; }
  header nav.main-nav { gap: 0 16px; }
  .hero-intro { margin-top: 24px; }
}

@media (min-width: 761px) and (max-width: 1024px), (pointer: coarse) {
  header nav.main-nav a, header .language-switch a { display: inline-flex; align-items: center; min-height: 44px; }
  header .language-switch a { justify-content: center; min-width: 32px; }
}

.wordmark-heading { margin: 0; line-height: 0; }
.koda-wordmark { display: block; width: clamp(220px, 40vw, 480px); max-width: 100%; height: auto; }

@media (max-width: 380px) {
  .company-group .company-details dl { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .company-group .company-details dt:not(:first-child) { margin-top: 12px; }
}

@media (min-width: 901px) {
  .company-group { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .company-group section > div { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(0, 2fr); align-items: start; gap: 32px; }
  .company-group section + section { border-top: 1px solid #eae4d6; }
}