.home-intro {
  box-sizing:border-box; position:fixed; inset:0; width:100%; max-width:none;
  height:100vh; height:100dvh; max-height:none; margin:0; padding:0; border:0;
  border-radius:0; color:#656767; background:#cee9ea; overflow:auto;
  overscroll-behavior:contain; font-family:"Mplus 1p", "M PLUS 1p", sans-serif;
}
.home-intro:not([open]) { display:none; }
.home-intro::backdrop { background:#cee9ea; }
.home-intro-content {
  min-height:100%; text-align:center;
  background:linear-gradient(to bottom, #cce9eb 0%, #d8e8e6 27%, #e7eae5 51%, #f0ebe3 72%, #ffeadf 100%);
}
.home-intro-close {
  position:fixed; top:max(16px, env(safe-area-inset-top)); right:max(20px, env(safe-area-inset-right)); z-index:2;
  display:grid; place-items:center; width:44px; height:44px; padding:0;
  border:0; border-radius:4px; background:transparent;
  color:#6e8585; font-size:22px; font-weight:400; line-height:1; cursor:pointer;
  transition:color .15s;
}
.home-intro-close:hover { color:#425f60; }
.home-intro:focus { outline:none; }
.home-intro-opening { padding:0 24px 36px; }
.home-intro-logo-stage {
  height:80vh; height:80dvh; display:flex; align-items:center; justify-content:center;
}
.home-intro-logo {
  display:block; width:min(54vw, 1100px, 112dvh); height: min(54vw, 1100px, 112dvh);
  object-fit:contain;
}
.home-intro h1 {
  color:inherit; font-size:clamp(30px, 4vw, 82px); line-height:1.6;
  font-weight:700; letter-spacing:.08em; margin:3vh 0 0;
}
.home-intro-section { padding:clamp(72px, 7.5vw, 155px) 24px; }
.home-intro p {
  font-size:clamp(16px, 1.36vw, 28px); font-weight:500; line-height:2.05;
  letter-spacing:.04em; color:inherit; margin:0 auto clamp(38px, 3vw, 64px);
}
.home-intro p:last-child { margin-bottom:0; }
.home-intro h2 {
  color:inherit; font-size:clamp(18px, 1.36vw, 28px); font-weight:600;
  line-height:2; margin:0 0 clamp(40px, 3.6vw, 74px);
}
.home-intro h2 span { display:block; margin-bottom:8px; }
.home-intro-wordmark { position:relative; width:clamp(260px, 25vw, 520px); margin:0 auto; }
.home-intro-wordmark img { display:block; width:100%; height:auto; filter:grayscale(1) brightness(.4); }
.home-intro-wordmark .home-intro-wordmark-color {
  position:absolute; inset:0; filter:none; clip-path:inset(0 65% 0 0);
}
.home-intro-concept { padding-top:clamp(80px, 8vw, 165px); }
.home-intro-concept + .home-intro-wordmark { margin-top:10px; margin-bottom:clamp(70px, 7vw, 145px); }
.home-intro-divider {
  display:block; width:60%; height:auto; aspect-ratio:2200 / 500; margin:0 auto;
}
.home-intro-divider:not([src]) { visibility:hidden; }
.home-intro-ending .home-intro-wordmark { width:clamp(280px, 31vw, 640px); margin-top:clamp(100px, 10vw, 205px); }
.home-intro-start {
  margin:56px 0 0; padding:16px 30px; border:1px solid #657b7b77; border-radius:32px;
  background:transparent; color:#656767; font:inherit; font-size:16px; cursor:pointer;
}
.home-intro button:focus-visible { outline:3px solid #c37c51; outline-offset:4px; }
@media(max-width:600px) {
  .home-intro-opening { padding:0 22px 24px; }
  .home-intro-logo-stage { height:66vh; height:66dvh; }
  .home-intro-logo { width:92vw; height:92vw; max-height:60dvh; object-fit:contain; }
  .home-intro h1 { font-size:clamp(24px, 6vw, 36px); letter-spacing:.03em; margin:0; }
  .home-intro-section { padding:72px 24px; }
  .home-intro p { font-size:15px; line-height:2.1; letter-spacing:.02em; margin-bottom:36px; }
  .home-intro p br { display:none; }
  .home-intro h2 { font-size:18px; margin-bottom:36px; }
  .home-intro-divider { width:84%; }
  .home-intro-concept + .home-intro-wordmark { margin-bottom:32px; }
  .home-intro-ending { padding-bottom:max(64px, env(safe-area-inset-bottom)); }
  .home-intro-ending .home-intro-wordmark { margin-top:72px; max-width:100%; }
}

/* Reveal each use case once its heading reaches the modal viewport. */
.home-intro-usecase.has-scroll-reveal {
  transform:translateY(160px);
  transition:transform .85s cubic-bezier(.2, .65, .25, 1);
}
.home-intro-usecase.has-scroll-reveal.is-revealed {
  transform:translateY(0);
}
@media(prefers-reduced-motion:reduce) {
  .home-intro-usecase.has-scroll-reveal {
    transform:none; transition:none;
  }
}

/* The first carousel card reopens the same introduction shown on entry. */
.article-carousel .carousel-about-visual {
  height:300px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:4px; padding:16px; box-sizing:border-box;
  background:linear-gradient(145deg, #cce9eb, #e7eae5 60%, #ffeadf);
  color:#656767; text-align:center;
}
.article-carousel .carousel-about-visual img { width:210px; height:210px; object-fit:contain; }
.article-carousel .carousel-about-visual span { font-size:clamp(18px, 2vw, 27px); font-weight:700; letter-spacing:.06em; }
.article-carousel .carousel-about-label { display:block; margin-bottom:10px; color:#587878; font-size:12px; letter-spacing:.12em; }
.article-carousel .carousel-about p { font-size:14px; line-height:1.7; margin:8px 0 12px; }
.article-carousel .carousel-about-more { color:#587878; font-size:14px; }
.article-carousel .carousel-about > a:focus-visible { outline:3px solid #c37c51; outline-offset:-4px; }
@media (max-width:600px) {
  .article-carousel .carousel-about-visual { height:260px; }
  .article-carousel .carousel-about-visual img { width:180px; height:180px; }
}