/* SAVORIP_UI_UX_FINAL_R742
   Compact teen-friendly home, multilingual overflow guard and modal polish. */
:root {
  --r742-card-gap: clamp(12px, 1.5vw, 20px);
  --r742-control-min: 44px;
  --r742-radius: 20px;
}

html[data-savorip-ui-r742="1"],
html[data-savorip-ui-r742="1"] body {
  max-width: 100%;
  overflow-x: clip;
}

/* The first screen must reveal both the proposition and the first action. */
.r742-home-hero {
  min-height: clamp(500px, 74svh, 650px) !important;
  height: auto !important;
  max-height: none !important;
  padding-block: clamp(34px, 6vh, 72px) !important;
  overflow: hidden;
}

.r742-home-hero .r742-hero-copy {
  min-width: 0;
  max-width: min(58%, 760px) !important;
}

.r742-home-title {
  max-width: 16ch !important;
  margin-block: 0 clamp(14px, 2.4vh, 26px) !important;
  font-size: clamp(2.35rem, 5vw, 4.75rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.045em !important;
  text-wrap: balance;
}

html[lang^="en"] .r742-home-title {
  max-width: 18ch !important;
  font-size: clamp(2.2rem, 4.45vw, 4.15rem) !important;
  line-height: 1.02 !important;
}

html[lang^="ja"] .r742-home-title,
html[lang^="zh"] .r742-home-title {
  max-width: 17ch !important;
  font-size: clamp(2.25rem, 4.7vw, 4.35rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.035em !important;
  word-break: normal;
  line-break: strict;
}

.r742-home-hero .r742-hero-body {
  max-width: 62ch !important;
  font-size: clamp(1rem, 1.35vw, 1.125rem) !important;
  line-height: 1.65 !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.r742-home-hero .r742-hero-visual {
  width: min(42vw, 540px) !important;
  max-width: 46% !important;
  max-height: min(72svh, 590px) !important;
  object-fit: contain !important;
}

/* Five business paths: compact scan on desktop, stable cards on every locale. */
.r742-feature-grid {
  width: min(1240px, calc(100% - 32px)) !important;
  margin-inline: auto !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: var(--r742-card-gap) !important;
  align-items: stretch !important;
}

.r742-feature-card {
  min-width: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  border-radius: var(--r742-radius) !important;
}

.r742-feature-card :is(img, picture img) {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 180px !important;
  aspect-ratio: 16 / 10 !important;
  object-fit: cover !important;
  object-position: center !important;
}

.r742-feature-card :is(h2, h3, h4, strong, .title) {
  min-width: 0;
  font-size: clamp(1rem, 1.25vw, 1.18rem) !important;
  line-height: 1.3 !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-wrap: balance;
}

.r742-feature-card :is(p, .description, .subtitle) {
  font-size: 0.875rem !important;
  line-height: 1.45 !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Header labels stay usable without squeezing every language into one line. */
.r742-primary-nav {
  min-width: 0;
}

.r742-primary-nav :is(a, button) {
  min-width: 0;
  min-height: var(--r742-control-min);
  padding-inline: clamp(8px, 1vw, 14px) !important;
  font-size: clamp(0.82rem, 1vw, 0.95rem) !important;
  line-height: 1.2;
  white-space: nowrap;
}

/* Long translated actions use equal-height, two-line controls instead of clipping. */
.r742-multiline-control {
  min-width: 0 !important;
  min-height: var(--r742-control-min) !important;
  height: auto !important;
  padding-block: 10px !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  line-height: 1.25 !important;
  text-align: center;
  text-wrap: balance;
}

.r742-modal-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
}

.r742-modal-actions > * {
  width: 100% !important;
  margin: 0 !important;
}

.r742-art-title,
.r742-dynamic-title {
  min-width: 0;
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: normal !important;
  overflow-wrap: anywhere;
  line-height: 1.35 !important;
}

.r742-step-list {
  min-width: 0;
}

.r742-step-list :is(button, a, [role="tab"]) {
  min-width: 0;
  min-height: var(--r742-control-min);
  white-space: normal !important;
  line-height: 1.2 !important;
  text-wrap: balance;
}

:is(dialog, [role="dialog"], .modal, .dialog).r742-viewport-dialog,
.r742-viewport-dialog :is(.modal-content, .dialog-content, article) {
  max-width: min(1120px, calc(100vw - 28px)) !important;
  max-height: calc(100dvh - 28px) !important;
}

.r742-audio-active [data-r742-audio-trigger="1"] {
  outline: 2px solid #26a7ff;
  outline-offset: 3px;
}

@media (max-width: 1180px) {
  .r742-feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .r742-primary-nav {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .r742-primary-nav::-webkit-scrollbar { display: none; }
}

@media (max-width: 760px) {
  .r742-home-hero {
    min-height: auto !important;
    padding: 28px 18px 32px !important;
    overflow: visible;
  }

  .r742-home-hero .r742-hero-copy {
    width: 100% !important;
    max-width: none !important;
  }

  .r742-home-title,
  html[lang^="en"] .r742-home-title,
  html[lang^="ja"] .r742-home-title,
  html[lang^="zh"] .r742-home-title {
    max-width: 19ch !important;
    font-size: clamp(2rem, 10.4vw, 3.05rem) !important;
    line-height: 1.08 !important;
  }

  .r742-home-hero .r742-hero-visual {
    width: min(72vw, 360px) !important;
    max-width: 76% !important;
    max-height: 340px !important;
    margin-inline: auto !important;
  }

  .r742-feature-grid {
    width: min(720px, calc(100% - 24px)) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .r742-feature-card {
    border-radius: 16px !important;
  }

  .r742-feature-card :is(img, picture img) {
    max-height: none !important;
    aspect-ratio: 4 / 3 !important;
  }

  .r742-feature-card :is(h2, h3, h4, strong, .title) {
    font-size: 0.96rem !important;
  }

  .r742-feature-card :is(p, .description, .subtitle) {
    display: none !important;
  }

  .r742-modal-actions {
    grid-template-columns: 1fr !important;
  }

  .r742-step-list {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .r742-step-list::-webkit-scrollbar { display: none; }
  .r742-step-list > * { flex: 0 0 min(72vw, 230px); scroll-snap-align: start; }

  :is(dialog, [role="dialog"], .modal, .dialog).r742-viewport-dialog,
  .r742-viewport-dialog :is(.modal-content, .dialog-content, article) {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    margin: 8px auto !important;
    border-radius: 18px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
}

@media (max-width: 360px) {
  .r742-feature-grid { grid-template-columns: 1fr !important; }
  .r742-feature-card :is(p, .description, .subtitle) { display: -webkit-box !important; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-savorip-ui-r742="1"] *,
  html[data-savorip-ui-r742="1"] *::before,
  html[data-savorip-ui-r742="1"] *::after {
    scroll-behavior: auto !important;
  }
}