/* Shared chrome for the marketing pages (hub, /business/, /creators/).
   Visual language of the 2026-10-23 inbound reference: square cards, hard offset shadows,
   Latin eyebrows, system fonts. Page sections live in business.css, creators.css and home.css;
   business/index.html is the reference markup for the header, footer, dialog and tab viewer. */

:root {
  --brand: #0757b5;
  --cream: #edf5ff;
  --focus-ring: #0757b5;
  --ink: #122d52;
  --line: #d8e5f4;
  --muted: #526b87;
  --navy: #082f68;
  --navy2: #041d45;
  --paper: #fbfdff;
  --shadow: 0 18px 50px rgba(15, 31, 49, 0.12);
}
* {
  box-sizing: border-box;
}
/* Anchors and keyboard focus stop below the sticky header. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  line-height: 1.75;
  margin: 0;
}
/* Locale fonts go first so Hangul and simplified Han never borrow Japanese glyph forms. */
html:lang(ko) body {
  font-family:
    "Apple SD Gothic Neo", "Malgun Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Yu Gothic", Meiryo, sans-serif;
  overflow-wrap: break-word;
  word-break: keep-all;
}
html:lang(zh) body {
  font-family:
    "PingFang SC", "Microsoft YaHei", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
    Meiryo, sans-serif;
}
/* Japanese: strict kinsoku. Headings: balanced lines, Japanese ones broken between phrases. */
html:lang(ja) body {
  line-break: strict;
}
:lang(ja) :is(h1, h2, h3) {
  word-break: auto-phrase;
}
main :is(h1, h2, h3) {
  text-wrap: balance;
}
a,
button {
  font: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  cursor: pointer;
}
img {
  display: block;
  max-width: 100%;
}
::selection {
  background: #c8e0fb;
  color: var(--navy);
}
/* Dark sections set --focus-ring: #fff so the ring keeps 3:1 against their background. */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}
.visually-hidden {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.skip-link {
  background: #fff;
  border: 2px solid var(--navy);
  box-shadow: 4px 4px 0 var(--brand);
  color: var(--navy);
  font-size: 14px;
  font-weight: 800;
  left: 16px;
  padding: 10px 16px;
  position: absolute;
  top: -100px;
  z-index: 100;
}
.skip-link:focus {
  outline-offset: 0;
  top: 12px;
}
.wrap {
  margin: auto;
  width: min(1180px, calc(100% - 48px));
}

/* Section labels and headings */
.section-label {
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.section-title {
  font-size: clamp(30px, 3.7vw, 52px);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 1.34;
  margin: 12px 0 0;
}
.section-lead {
  color: var(--muted);
  font-size: 16px;
  line-height: 2;
  max-width: 670px;
}
.index-tag {
  background: #f7fbff;
  box-shadow: 4px 4px 0 var(--brand);
  color: var(--navy);
  display: inline-block;
  font:
    900 11px / 1.2 Arial,
    sans-serif;
  letter-spacing: 0.17em;
  padding: 10px 12px;
}

/* Buttons */
.button,
.nav-cta {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-weight: 800;
  gap: 14px;
  justify-content: center;
  transition:
    transform 0.2s,
    background 0.2s,
    box-shadow 0.2s;
}
.button {
  border: 1px solid transparent;
  font-size: 14px;
  min-height: 54px;
  padding: 14px 24px;
}
.button.primary {
  background: var(--brand);
  color: #fff;
}
.button.primary:hover {
  background: #06468f;
}
.button.secondary {
  background: #fff;
  border-color: #d8e5f4;
  color: var(--navy);
}
.button .arrow {
  font-size: 20px;
  line-height: 1;
}
.button:hover,
.nav-cta:hover {
  box-shadow: 0 12px 24px rgba(8, 47, 104, 0.14);
  transform: translateY(-2px);
}

/* Header */
.header {
  backdrop-filter: blur(14px);
  background: rgba(251, 253, 255, 0.96);
  border-bottom: 1px solid rgba(8, 47, 104, 0.12);
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-inner {
  align-items: center;
  display: flex;
  gap: 20px;
  height: 76px;
  justify-content: space-between;
}
.brand {
  align-items: center;
  display: flex;
  font-size: 21px;
  font-weight: 900;
  gap: 11px;
  letter-spacing: -0.07em;
  white-space: nowrap;
}
.brand img {
  border-radius: 9px;
  height: 36px;
  width: 36px;
}
.brand small {
  color: var(--brand);
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
}
.nav {
  align-items: center;
  display: flex;
  font-size: 13px;
  font-weight: 750;
  gap: 30px;
}
.nav a:not(.nav-cta):hover,
.nav a[aria-current="page"] {
  color: var(--brand);
}
.nav > a[aria-current="page"] {
  text-decoration: underline 2px;
  text-underline-offset: 8px;
}
.nav-tag {
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  margin-left: 2px;
  padding: 1px 6px;
}
.button.primary .nav-tag {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}
.nav-cta {
  background: var(--navy);
  color: #fff;
  padding: 12px 20px;
}
.menu-toggle {
  background: transparent;
  border: 0;
  color: var(--navy);
  display: none;
  padding: 8px;
}

/* Language menu (details/summary, works without JS) */
.lang-menu {
  position: relative;
}
.lang-menu summary {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--navy);
  cursor: pointer;
  display: inline-flex;
  font:
    800 12px / 1 Arial,
    sans-serif;
  gap: 6px;
  letter-spacing: 0.08em;
  list-style: none;
  padding: 8px 12px;
}
.lang-menu summary::-webkit-details-marker {
  display: none;
}
.lang-menu summary svg {
  height: 15px;
  width: 15px;
}
.lang-menu summary:hover,
.lang-menu[open] summary {
  border-color: #b7cfea;
  color: var(--brand);
}
.lang-menu > div {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 6px 6px 0 rgba(8, 47, 104, 0.12);
  display: grid;
  min-width: 168px;
  padding: 6px;
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 60;
}
.lang-menu > div a {
  padding: 9px 12px;
}
.lang-menu > div a:hover {
  background: #eff5fd;
}
.lang-menu > div a[aria-current] {
  color: var(--brand);
  font-weight: 900;
}

/* Footer */
.footer {
  --focus-ring: #fff;
  background: var(--navy2);
  color: #c4cfd8;
  padding: 62px 0 30px;
}
.footer-top {
  display: grid;
  gap: 50px;
  grid-template-columns: 1.4fr 1fr 1fr;
}
.footer-brand {
  color: #fff;
}
.footer-brand p {
  color: #9dadb8;
  font-size: 12px;
  line-height: 1.9;
  margin-top: 22px;
  max-width: 340px;
}
.footer-links h2 {
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.12em;
  margin: 0 0 20px;
}
.footer-links a {
  color: #b9c6d0;
  display: block;
  font-size: 12px;
  margin: 9px 0;
}
.footer-links a:hover {
  color: #fff;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #8295a5;
  display: flex;
  font-size: 12px;
  gap: 20px;
  justify-content: space-between;
  line-height: 1.8;
  margin-top: 52px;
  padding-top: 24px;
}
.footer-bottom p {
  margin: 0;
  max-width: 760px;
}
.footer-meta {
  display: grid;
  flex: none;
  text-align: right;
}
.footer-meta a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-meta a:hover {
  color: #fff;
}

/* Phone mock. The screenshots have no status bar, so the reference notch hangs over its own
   strip and never covers app UI. The screen keeps the 247x527 viewport of the reference. */
.phone {
  background: #101720;
  border: 9px solid #0b111a;
  border-radius: 42px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  height: 575px;
  overflow: hidden;
  position: relative;
  width: 265px;
  z-index: 2;
}
.phone::before {
  background: #f5f7fb;
  content: "";
  flex: none;
  height: 30px;
}
.phone::after {
  background: #0b111a;
  border-radius: 0 0 13px 13px;
  content: "";
  height: 18px;
  left: 50%;
  position: absolute;
  top: 6px;
  transform: translateX(-50%);
  width: 85px;
}
.phone img {
  flex: 1 1 0;
  min-height: 0;
  object-fit: cover;
  object-position: top;
  width: 100%;
}

/* Stage: filled disc + dashed ring behind a phone; also usable without the tab viewer.
   Override --stage-disc / --stage-ring on light backgrounds. */
.stage {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 570px;
  position: relative;
}
.stage::before,
.stage::after {
  border-radius: 50%;
  content: "";
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
.stage::before {
  background: var(--stage-disc, #0b5db8);
  height: 560px;
  width: 560px;
}
.stage::after {
  border: 1px dashed var(--stage-ring, rgba(153, 203, 255, 0.45));
  height: 640px;
  width: 640px;
}
.stage-caption {
  align-items: center;
  background: var(--paper);
  box-shadow: 6px 6px 0 var(--brand);
  color: var(--navy);
  display: flex;
  font-size: 11px;
  font-weight: 800;
  gap: 10px;
  margin: 0;
  padding: 13px 18px;
  position: absolute;
  right: 0;
  bottom: 37px;
  z-index: 3;
}
.stage-caption .dot {
  background: var(--brand);
  border-radius: 50%;
  height: 9px;
  width: 9px;
}

/* Tab viewer (site.js [data-tabs]): tabs on a dark section, one phone panel per tab. */
.viewer {
  align-items: center;
  display: grid;
  gap: 90px;
  grid-template-columns: 0.9fr 1.1fr;
}
.viewer-tabs {
  display: grid;
  gap: 10px;
}
.viewer-tab {
  align-items: center;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0;
  color: #d4dde4;
  display: flex;
  gap: 20px;
  padding: 18px 21px;
  text-align: left;
}
.viewer-tab:hover:not([aria-selected="true"]) {
  background: rgba(255, 255, 255, 0.1);
}
.viewer-tab[aria-selected="true"] {
  background: #fff;
  border-color: #fff;
  box-shadow: 7px 7px 0 var(--brand);
  color: var(--navy);
}
.viewer-tab b {
  font-size: 13px;
  letter-spacing: 0.03em;
}
.viewer-tab small {
  display: block;
  font-size: 11px;
  line-height: 1.6;
  margin-top: 3px;
  opacity: 0.75;
}
.tab-no {
  color: #9ac9f7;
  font:
    800 12px Arial,
    sans-serif;
  letter-spacing: 0.12em;
}
.viewer-tab[aria-selected="true"] .tab-no {
  color: var(--brand);
}
.viewer-panel[hidden] {
  display: none;
}

/* Closing call to action band (brand blue, ring, outlined JAPAN) */
.cta {
  --focus-ring: #fff;
  background: var(--brand);
  border-top: 9px solid #cee2f7;
  color: #fff;
  overflow: hidden;
  padding: 90px 0;
  position: relative;
}
.cta::before {
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2);
  bottom: -45px;
  color: transparent;
  content: "JAPAN";
  font:
    900 clamp(110px, 17vw, 250px) / 1 Arial,
    sans-serif;
  left: -24px;
  letter-spacing: -0.09em;
  pointer-events: none;
  position: absolute;
}
.cta::after {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  content: "";
  height: 470px;
  position: absolute;
  right: -100px;
  top: -160px;
  width: 470px;
}
.cta-inner {
  align-items: end;
  display: flex;
  gap: 34px;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
.cta small {
  font:
    800 11px Arial,
    sans-serif;
  letter-spacing: 0.17em;
}
.cta h2 {
  font-size: clamp(30px, 4vw, 50px);
  letter-spacing: -0.06em;
  line-height: 1.34;
  margin: 14px 0;
}
.cta p {
  color: #e9f4ff;
  font-size: 14px;
  line-height: 1.9;
  margin: 0;
}

/* Door: whole-card link to an audience page. The title link stretches over the card; clicks on
   the media fall through to it. */
.doors {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr 1fr;
}
.door {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 8px 8px 0 rgba(8, 47, 104, 0.14);
  display: flex;
  flex-direction: column;
  position: relative;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.door:hover {
  box-shadow: 8px 8px 0 var(--brand);
  transform: translateY(-2px);
}
.door:has(a:focus-visible) {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}
.door-media {
  aspect-ratio: 16 / 10;
  background: var(--cream);
  overflow: hidden;
  pointer-events: none;
  position: relative;
}
.door-media img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.door-media .index-tag {
  left: 17px;
  position: absolute;
  top: 17px;
  z-index: 3;
}
.door-body {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 40px;
  padding: 26px 28px 30px;
}
.door-body > * {
  grid-column: 1;
  margin: 0;
}
.door-title {
  color: var(--navy);
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: -0.06em;
  line-height: 1.3;
}
.door-title a::after {
  content: "";
  inset: 0;
  position: absolute;
}
.door-title a:focus-visible {
  outline: none;
}
.door-text {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.9;
}
.door-arrow {
  align-self: end;
  border: 1px solid var(--brand);
  border-radius: 50%;
  color: var(--brand);
  display: grid;
  font-size: 21px;
  grid-column: 2;
  grid-row: 1 / span 3;
  height: 40px;
  place-items: center;
  width: 40px;
}

/* The Japanese-tuned heading tracking is too tight for Latin, Hangul and simplified Chinese.
   :where() keeps it low so a page can tune its own headings further. */
html:not(:lang(ja)) :where(.section-title, .door-title, .cta h2) {
  letter-spacing: -0.04em;
}

/* Store badges and QR codes (download dialog, closing CTAs) */
.store-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* The white ring of the CTA band would vanish on these white cards. */
.store-item {
  --focus-ring: var(--brand);
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--navy);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 16px 20px;
}
/* Two classes so the label keeps its style inside .cta, whose `p` rule would win otherwise. */
.store-item .store-label {
  color: var(--navy);
  font:
    800 13px / 1 Arial,
    sans-serif;
  letter-spacing: 0.04em;
  margin: 0;
}
.store-qr {
  height: 132px;
  width: 132px;
}
.store-badge img {
  height: 40px;
  width: auto;
}

/* Download dialog (site.js: [data-download] opens it on desktop, phones go to their store) */
.download-dialog {
  background: var(--paper);
  border: 0;
  box-shadow: 10px 10px 0 var(--brand);
  color: var(--ink);
  max-height: calc(100% - 32px);
  max-width: calc(100% - 32px);
  padding: 0;
  width: 560px;
}
.download-dialog::backdrop {
  background: rgba(4, 29, 69, 0.62);
}
html:has(.download-dialog[open]) {
  overflow: hidden;
}
.dialog-inner {
  padding: 34px 34px 30px;
  position: relative;
}
.dialog-close {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--navy);
  display: grid;
  height: 40px;
  place-items: center;
  position: absolute;
  right: 14px;
  top: 14px;
  width: 40px;
}
.dialog-close:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.download-dialog h2 {
  color: var(--navy);
  font-size: 24px;
  letter-spacing: -0.05em;
  line-height: 1.4;
  margin: 10px 48px 8px 0;
}
.download-dialog p.dialog-text {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.9;
  margin: 0 0 24px;
}

@media (max-width: 1100px) {
  .menu-toggle {
    display: block;
  }
  .nav {
    align-items: stretch;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 26px rgba(0, 0, 0, 0.09);
    display: none;
    flex-direction: column;
    gap: 0;
    left: 0;
    /* Scrolls when taller than the screen (landscape phones). */
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px 24px 25px;
    position: absolute;
    right: 0;
    top: 76px;
  }
  .nav.open {
    display: flex;
  }
  .nav a {
    padding: 12px 10px;
  }
  .nav-cta {
    justify-content: center;
    margin-top: 8px;
  }
  .lang-menu summary {
    margin: 6px 10px;
  }
  .lang-menu > div {
    border: 0;
    box-shadow: none;
    min-width: 0;
    padding: 0 0 0 12px;
    position: static;
  }
}
@media (max-width: 980px) {
  .nav {
    font-size: 12px;
  }
  .viewer {
    gap: 30px;
  }
  .stage-caption {
    right: -10px;
  }
}
@media (max-width: 760px) {
  .wrap {
    width: min(100% - 32px, 600px);
  }
  .section-title {
    font-size: clamp(28px, 8vw, 42px);
  }
  .section-lead {
    font-size: 14px;
  }
  .header-inner {
    height: 64px;
  }
  .brand {
    font-size: 18px;
  }
  .brand img {
    height: 32px;
    width: 32px;
  }
  .nav {
    max-height: calc(100dvh - 64px);
    padding: 18px 16px 25px;
    top: 64px;
  }
  .footer-top {
    gap: 30px;
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand {
    grid-column: span 2;
  }
  .footer-bottom {
    display: block;
  }
  .footer-meta {
    margin-top: 12px;
    text-align: left;
  }
  .viewer {
    grid-template-columns: 1fr;
  }
  .viewer-tabs {
    gap: 8px;
    grid-template-columns: 1fr 1fr;
  }
  .viewer-tab {
    gap: 8px;
    min-height: 77px;
    padding: 12px;
  }
  .viewer-tab b,
  .viewer-tab small {
    font-size: 11px;
  }
  .stage {
    min-height: 530px;
  }
  .stage::before {
    height: 420px;
    width: 420px;
  }
  .stage::after {
    height: 510px;
    width: 510px;
  }
  .stage-caption {
    bottom: 24px;
    right: 8px;
  }
  .cta {
    padding: 65px 0;
  }
  .cta-inner {
    display: block;
  }
  .cta-inner > .store-grid {
    margin-top: 25px;
  }
  .doors {
    grid-template-columns: 1fr;
  }
  .dialog-inner {
    padding: 28px 20px 22px;
  }
}
@media (max-width: 560px) {
  .store-qr {
    display: none;
  }
}
@media (max-width: 420px) {
  .button {
    width: 100%;
  }
  .viewer-tab {
    min-height: 56px;
  }
  .viewer-tab small {
    display: none;
  }
  .stage {
    min-height: 500px;
  }
  .phone {
    height: 525px;
    width: 235px;
  }
}
/* Without JS the menu cannot open, so the links sit under the brand instead. */
@media (scripting: none) and (max-width: 1100px) {
  .menu-toggle {
    display: none;
  }
  .header {
    position: static;
  }
  .header-inner {
    flex-wrap: wrap;
    height: auto;
    padding: 12px 0;
  }
  .nav {
    align-items: center;
    background: none;
    border: 0;
    box-shadow: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 18px;
    max-height: none;
    overflow: visible;
    padding: 0;
    position: static;
    width: 100%;
  }
  .nav a {
    padding: 6px 0;
  }
  .nav-cta {
    margin-top: 0;
    padding: 10px 16px;
  }
}
/* Without JS the tabs cannot switch, so every panel shows in order. */
@media (scripting: none) {
  .viewer-tabs {
    display: none;
  }
  .viewer-panel[hidden] {
    display: block;
  }
}
/* Forced colors drop the selected tab's fill and shadow. */
@media (forced-colors: active) {
  .viewer-tab[aria-selected="true"] {
    outline: 3px solid Highlight;
    outline-offset: -3px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
  }
}