/* v0.2 refinement: product-first, less template-like, multilingual + multi-platform safe */

:root {
  --display-serif-en: ui-serif, Georgia, Cambria, "Times New Roman", serif;
  --display-serif-ja: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif CJK JP", serif;
  --display-serif-ko: "AppleMyungjo", "Noto Serif KR", "Nanum Myeongjo", serif;
  --body-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  --body-sans-ja: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Noto Sans CJK JP", sans-serif;
  --body-sans-ko: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}

html[lang="ja"] body { font-family: var(--body-sans-ja); }
html[lang="ko"] body { font-family: var(--body-sans-ko); }

/* Serif is a brand accent, not the default language of every section. */
.hero h1,
.launch-panel h2 { font-family: var(--display-serif-en); }
.section h2,
.privacy-band h2,
.product-intro h2,
.problem-layout h2 {
  font-family: var(--body-sans);
  font-weight: 650;
  letter-spacing: -.035em;
}
html[lang="ja"] .hero h1,
html[lang="ja"] .launch-panel h2 { font-family: var(--display-serif-ja); }
html[lang="ko"] .hero h1,
html[lang="ko"] .launch-panel h2 { font-family: var(--display-serif-ko); }
html[lang="ja"] .section h2,
html[lang="ja"] .privacy-band h2,
html[lang="ja"] .product-intro h2,
html[lang="ja"] .problem-layout h2 { font-family: var(--body-sans-ja); }
html[lang="ko"] .section h2,
html[lang="ko"] .privacy-band h2,
html[lang="ko"] .product-intro h2,
html[lang="ko"] .problem-layout h2 { font-family: var(--body-sans-ko); }

/* Language-specific headline rhythm. */
html[lang="en"] .hero h1 { max-width: 760px; }
html[lang="ja"] .hero h1 {
  max-width: 720px;
  font-size: clamp(48px, 5vw, 68px);
  line-height: 1.05;
  letter-spacing: -.045em;
}
html[lang="ja"] .hero h1 .hero-keep { color: inherit; white-space: nowrap; }
html[lang="ko"] .hero h1 {
  max-width: 700px;
  font-size: clamp(48px, 5.5vw, 78px);
  line-height: 1.07;
  letter-spacing: -.045em;
}

/* Header and language control. */
.site-header { gap: 22px; }
.site-nav { margin-left: auto; }
.language-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  font-size: 11px;
}
.language-switch a {
  padding: 7px 8px;
  color: var(--muted);
  text-decoration: none;
  border-radius: 8px;
}
.language-switch a:hover,
.language-switch a[aria-current="page"] {
  color: var(--ink);
  background: rgba(255,255,255,.5);
}

/* Fewer pills and cards. */
.hero-trust {
  gap: 0;
  margin-top: 24px;
  border-top: 1px solid var(--line);
}
.hero-trust li {
  padding: 10px 16px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  line-height: 1.35;
}

.product-grid { gap: 46px 34px; }
.product-card,
.product-card-large {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  min-height: 0;
}
.product-card-large { margin-bottom: 8px; }
.product-card h3 { margin-top: 18px; }
.product-evidence { margin-bottom: 18px; }
.product-evidence .evidence-fallback,
.product-evidence .evidence-image { border-radius: 14px; }

.positioning-band {
  margin-top: 92px;
  padding: 34px 0;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 70px;
  align-items: start;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.positioning-band h2 {
  margin: 0;
  font-family: var(--body-sans);
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.08;
  letter-spacing: -.035em;
}
.positioning-band p {
  margin: 0;
  max-width: 650px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}
html[lang="ja"] .positioning-band h2 { font-family: var(--body-sans-ja); }
html[lang="ko"] .positioning-band h2 { font-family: var(--body-sans-ko); }

.output-proof-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.output-evidence { border-radius: 14px; }
.output-proof-copy { padding: 18px 0 0; }
.output-secondary {
  margin-top: 34px;
  padding: 22px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

/* Use cases read like a small index, not SaaS audience pills. */
.use-case-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.use-case-list li {
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 15px;
}

/* Avoid fixed single-line assumptions in translated UI. */
.site-nav,
.language-switch,
.hero-actions,
.launch-actions,
.site-footer nav { flex-wrap: wrap; }
.button,
.nav-cta,
.launch-note,
.trial-card-head,
.privacy-copy,
.product-card h3,
.output-proof-copy { min-width: 0; }

/* Footer grows safely when language controls are present. */
.site-footer {
  grid-template-columns: minmax(180px, 1fr) auto auto;
  grid-template-areas:
    "brand links language"
    "copyright copyright copyright";
  row-gap: 18px;
}
.site-footer > div { grid-area: brand; }
.site-footer > nav:not(.footer-language) { grid-area: links; }
.site-footer .footer-language { grid-area: language; }
.site-footer > small { grid-area: copyright; }

/* Wide desktop: let real product imagery breathe. */
@media (min-width: 1440px) {
  :root { --max: 1320px; }
  .hero { grid-template-columns: .82fr 1.18fr; gap: 82px; }
  .hero-product-evidence { max-width: 760px; margin-left: auto; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 58px 46px; }
  .output-proof-grid { gap: 34px; }
}

/* Laptop / smaller desktop: preserve two-column composition but reduce density. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .hero { grid-template-columns: .9fr 1.1fr; gap: clamp(34px, 4vw, 58px); }
  .hero h1 { font-size: clamp(52px, 5.8vw, 78px); }
  .hero-lede { font-size: 18px; }
  .hero-product-evidence { max-width: 640px; margin-left: auto; }
  .app-layout { min-height: 390px; }
  .frame-grid { min-height: 300px; }
}

/* Tablet landscape / small laptop: header can wrap, product proof remains wide. */
@media (max-width: 1100px) {
  .site-header { flex-wrap: wrap; padding: 12px 0; }
  .site-nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
    padding-top: 8px;
    border-top: 1px solid rgba(111,104,95,.12);
  }
  .language-switch { margin-left: auto; }
  .hero { gap: 44px; }
  .hero-beaver { width: 94px; top: -36px; }
}

/* Tablet portrait: composition changes instead of simply shrinking. */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 56px;
    gap: 50px;
  }
  .hero-copy { max-width: 760px; }
  .hero-visual { width: 100%; }
  .hero-product-evidence { width: 100%; max-width: none; }
  .hero-beaver { right: 14px; top: -32px; width: 92px; }

  .site-nav { display: none; }
  .language-switch { display: inline-flex; }

  .problem-layout,
  .positioning-band,
  .audience,
  .privacy-layout,
  .trial-layout,
  .output-proof-grid { grid-template-columns: 1fr; }
  .problem-layout { gap: 20px; }
  .positioning-band { gap: 18px; margin-top: 64px; }
  .audience,
  .privacy-layout,
  .trial-layout { gap: 38px; }

  .product-grid { grid-template-columns: 1fr; gap: 52px; }
  .product-card-large { grid-column: auto; }
  .product-evidence .evidence-image { max-height: none; width: 100%; object-fit: contain; }

  .output-evidence,
  .output-evidence .evidence-image { min-height: 0; }
  .output-evidence .evidence-image { aspect-ratio: auto; object-fit: contain; }

  .site-footer {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand language"
      "links links"
      "copyright copyright";
  }
}

/* Mobile: linear reading order, no horizontal overflow, touch-friendly controls. */
@media (max-width: 767px) {
  .shell,
  .site-header,
  .page-shell { width: min(calc(100% - 28px), var(--max)); }

  .site-header { min-height: 68px; gap: 12px; }
  .brand-logo { max-width: 178px; }
  .language-switch { font-size: 10px; gap: 1px; }
  .language-switch a { min-height: 34px; display: inline-flex; align-items: center; padding: 6px 7px; }

  .hero { padding: 46px 0 70px; gap: 38px; }
  .hero h1 { font-size: clamp(45px, 13vw, 64px); line-height: .98; }
  .hero-lede { margin-top: 22px; font-size: 17px; line-height: 1.6; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 10px; }
  .hero-trust { display: block; }
  .hero-trust li { width: auto; padding-top: 8px; }
  .hero-beaver { right: 2px; top: -28px; width: 76px; }

  .hero-product-evidence,
  .product-evidence,
  .output-evidence { overflow: hidden; }
  .evidence-image { max-width: 100%; height: auto; object-fit: contain; }
  .evidence-label { left: 9px; bottom: 9px; font-size: 8px; }

  /* Temporary UI preview is simplified on phones; real screenshots replace this later. */
  .app-layout { grid-template-columns: 72px 1fr; min-height: 300px; }
  .video-list { padding: 9px 6px; grid-template-columns: 1fr; }
  .video-list > div:not(.video-thumb) { display: none; }
  .board-preview { padding: 10px 7px; }
  .board-head { width: 96%; }
  .frame-grid { width: 96%; min-height: 0; padding: 9px; gap: 9px 6px; }

  .section { padding: 82px 0; }
  .section h2,
  .privacy-band h2 { font-size: clamp(34px, 10vw, 48px); line-height: 1.06; }
  .problem-band { padding: 44px 0; }
  .problem-layout h2 { font-size: clamp(32px, 9vw, 44px); }

  .steps { grid-template-columns: 1fr; }
  .step,
  .step + .step { padding: 20px 0; border-right: 0; border-top: 1px solid var(--line); min-height: 0; }
  .step:first-child { border-top: 0; }
  .step h3 { margin-top: 24px; }

  .product-grid { gap: 46px; }
  .filmstrip { padding: 9px; gap: 4px; overflow: hidden; }
  .section-stack div { grid-template-columns: 24px minmax(0,1fr); }
  .section-stack em { display: none; }

  .output-document-mock { width: 86%; margin: 20px auto; padding: 16px; }
  .output-slide-mock { min-height: 250px; grid-template-columns: 54px 1fr; }
  .slide-sidebar { padding: 12px 8px; }
  .slide-canvas { width: 82%; padding: 14px; }
  .output-proof-copy,
  .output-secondary { grid-template-columns: 50px minmax(0, 1fr); }

  .trial-card { padding: 21px; }
  .trial-card-head { align-items: flex-start; flex-direction: column; gap: 6px; }
  .privacy-band { padding: 76px 0; }

  .launch-panel { padding: 48px 20px; }
  .launch-panel h2 { font-size: clamp(38px, 11vw, 54px); }

  .site-footer {
    grid-template-columns: 1fr;
    grid-template-areas: "brand" "links" "language" "copyright";
    gap: 16px;
  }
  .site-footer nav { gap: 12px; }
  .site-footer .footer-language { margin-left: 0; }
}

/* Small phones: keep language controls and product proof readable. */
@media (max-width: 420px) {
  .brand-logo { max-width: 154px; }
  .language-switch a { padding: 5px; }
  .hero { padding-top: 38px; }
  .hero h1 { font-size: clamp(40px, 12.6vw, 52px); }
  html[lang="ja"] .hero h1,
  html[lang="ko"] .hero h1 { font-size: clamp(38px, 11.8vw, 50px); }
  .hero-beaver { width: 66px; }
  .window-mode { display: none; }
  .window-bar { grid-template-columns: 1fr auto; }
  .frame-grid small { display: none; }
  .output-proof-copy,
  .output-secondary { grid-template-columns: 1fr; }
  .file-icon { width: 46px; height: 56px; }
}

/* Touch devices: do not rely on hover feedback. */
@media (hover: none) and (pointer: coarse) {
  .button-primary:hover { transform: none; }
  .site-nav a:hover,
  .language-switch a:hover { color: inherit; }
  a, button { -webkit-tap-highlight-color: transparent; }
}