/* MaiTALK LP — one stylesheet for both the Japanese and the English page.

   Sections are in cascade order: later sections override earlier ones, so add new
   rules at the end, or edit the relevant section in place.

   Sections marked "JA only" / "EN only" apply to one language. Every selector in them
   ends with :where(html[lang="…"], html[lang="…"] *), which restricts the rule to that
   page without changing its specificity. Keep that guard when editing those rules. */

/* ==========================================================================
   01
   ========================================================================== */
:root {
  --paper: #f7f6f1;
  --white: #fffefa;
  --ink: #171817;
  --pink: #e4007f;
  --muted: #63635e;
  --rule: #232321;
  --max: 1180px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  line-break: strict;
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
}
svg {
  display: block;
}
p {
  margin: 0;
}
header {
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(20px, 5vw, 70px);
  border-bottom: 2px solid var(--ink);
  background: var(--paper);
  position: relative;
  z-index: 5;
}
.brand {
  font-weight: 950;
  letter-spacing: -0.075em;
  font-size: 24px;
  text-decoration: none;
}
.brand i {
  font-style: normal;
  color: var(--pink);
}
header .right {
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
}
.page {
  width: min(var(--max), 88%);
  margin: auto;
}
.section {
  position: relative;
  padding: clamp(85px, 12vw, 175px) 0;
}
.kicker {
  font-family: Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.13em;
  font-weight: 800;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 38px;
}
.kicker:before {
  content: "";
  height: 2px;
  width: 28px;
  background: var(--pink);
}
.display {
  font-size: clamp(58px, 9vw, 130px);
  font-weight: 950;
  line-height: 1.12;
  letter-spacing: -0.085em;
  margin: 0;
  word-break: normal;
}
.copy {
  font-size: clamp(15px, 1.42vw, 18px);
  line-height: 2;
  max-width: 740px;
}
.pink {
  color: var(--pink);
}
.fine {
  border: 0;
  border-top: 2px solid var(--rule);
  margin: 0;
}
.editor-note {
  font-family: Georgia, serif;
  font-size: 13px;
  font-style: italic;
  color: var(--muted);
}
.hero {
  min-height: min(850px, 100svh);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero .page {
  position: relative;
  padding-top: 52px;
  padding-bottom: 62px;
}
.hero-meta {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
}
.event {
  margin: 48px 0 20px;
  display: inline-block;
  background: var(--pink);
  color: white;
  padding: 10px 17px;
  font-size: clamp(11px, 1.15vw, 14px);
  font-weight: 800;
  transform: rotate(-2deg);
  box-shadow: 5px 5px 0 var(--ink);
}
.hero-title {
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-size: clamp(80px, 17.5vw, 235px);
  line-height: 0.84;
  letter-spacing: -0.085em;
  font-weight: 950;
  margin: 16px 0 36px;
  white-space: nowrap;
}
.hero-title .period {
  color: var(--pink);
}
.hero-desc {
  font-size: clamp(13px, 1.25vw, 17px);
  line-height: 1.8;
  margin-bottom: 58px;
  max-width: 540px;
}
.hero-statement {
  font-size: clamp(31px, 4.7vw, 66px);
  line-height: 1.42;
  font-weight: 900;
  letter-spacing: -0.06em;
  position: relative;
  z-index: 2;
}
.hero-statement span {
  display: block;
}
.hero-english {
  font:
    italic clamp(15px, 1.65vw, 21px)/1.55 Georgia,
    serif;
  margin-top: 16px;
}
.hero-art {
  position: absolute;
  right: 2%;
  bottom: 12%;
  width: clamp(145px, 21vw, 285px);
  color: var(--ink);
  pointer-events: none;
  opacity: 0.9;
}
.story {
  background: var(--white);
}
.story .display {
  font-size: clamp(52px, 9vw, 122px);
  max-width: 1080px;
}
.story .display span {
  display: block;
}
.story-copy {
  margin-top: clamp(65px, 9vw, 120px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
  gap: clamp(30px, 6vw, 100px);
  align-items: start;
}
.story-copy .aside {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.8;
  max-width: 200px;
}
.story-copy .text p {
  margin: 0 0 21px;
}
.story-copy .text strong {
  font-size: clamp(21px, 2.6vw, 35px);
  line-height: 1.6;
  letter-spacing: -0.045em;
  display: block;
  margin: 30px 0 15px;
}
.story .scribble {
  position: absolute;
  right: 9%;
  top: 13%;
  width: clamp(80px, 11vw, 155px);
  transform: rotate(12deg);
}
.question {
  background: var(--ink);
  color: var(--white);
  min-height: 680px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.question .page {
  position: relative;
}
.question .preface {
  font-size: clamp(14px, 1.4vw, 19px);
  line-height: 1.7;
  margin-bottom: 50px;
}
.question .display {
  font-size: clamp(42px, 6.7vw, 91px);
  line-height: 1.4;
  max-width: 1050px;
  position: relative;
  z-index: 1;
}
.question .q-mark {
  position: absolute;
  right: 1%;
  top: -50px;
  color: var(--pink);
  font:
    bold clamp(230px, 32vw, 450px)/1 Georgia,
    serif;
  opacity: 0.85;
  transform: rotate(12deg);
  pointer-events: none;
}
.question .pink-rule {
  width: 95px;
  height: 8px;
  background: var(--pink);
  transform: rotate(-5deg);
  margin-top: 46px;
}
.philosophy {
  background: var(--paper);
}
.philosophy .display {
  font-size: clamp(35px, 5.9vw, 82px);
  line-height: 1.42;
  letter-spacing: -0.07em;
  max-width: 1120px;
}
.philosophy .display .second {
  display: inline;
  margin-top: 0;
}
.philosophy .display .highlight {
  position: relative;
  display: inline;
}
.philosophy .display .highlight:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 7px;
  background: var(--pink);
  transform: rotate(-1.2deg);
}
.philosophy .bodyrow {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 8%;
  margin-top: clamp(80px, 10vw, 130px);
  align-items: start;
}
.philosophy .ear-art {
  max-width: 260px;
  margin: 0 auto;
}
.philosophy .bodyrow p {
  margin-bottom: 20px;
}
.philosophy strong {
  font-weight: 850;
}
.technology {
  background: var(--white);
}
.technology .display {
  font-size: clamp(50px, 8vw, 113px);
  max-width: 1100px;
}
.technology .lead {
  font-size: clamp(26px, 3.3vw, 45px);
  font-weight: 900;
  letter-spacing: -0.05em;
  margin-top: 90px;
  max-width: 700px;
}
.technology .lead:before {
  content: "↗";
  color: var(--pink);
  margin-right: 15px;
}
.dummy {
  font-size: 15px;
  line-height: 1.9;
  color: #55564f;
  max-width: 700px;
  margin-top: 24px;
}
.tech-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  margin: 75px 0 100px;
}
.tech-columns > div {
  border-top: 2px solid var(--ink);
  padding-top: 20px;
}
.tech-columns .num {
  font-size: 11px;
  font-weight: 900;
  color: var(--pink);
  margin-bottom: 18px;
}
.specs h3 {
  font-size: clamp(24px, 3vw, 40px);
  letter-spacing: -0.05em;
  margin: 0 0 22px;
}
.specs table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(13px, 1.2vw, 16px);
  line-height: 1.7;
}
.specs th,
.specs td {
  padding: 19px 8px;
  border-top: 1px solid var(--ink);
  text-align: left;
  vertical-align: top;
}
.specs th {
  width: 30%;
  font-weight: 800;
}
.specs tr:last-child th,
.specs tr:last-child td {
  border-bottom: 1px solid var(--ink);
}
.lab {
  background: var(--paper);
}
.lab .label {
  font-size: clamp(15px, 1.6vw, 21px);
  font-weight: 900;
  display: inline-block;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 13px 24px;
  transform: rotate(-2deg);
  margin-bottom: 55px;
}
.lab .display {
  font-size: clamp(54px, 8.4vw, 118px);
  max-width: 1000px;
}
.lab .display span {
  display: block;
}
.lab .lab-bottom {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 8%;
  margin-top: 85px;
}
.lab .lab-art {
  max-width: 340px;
  align-self: start;
}
.lab .copy p {
  margin-bottom: 22px;
}
.closing {
  background: var(--white);
  min-height: 700px;
}
.closing .display {
  font-size: clamp(49px, 8vw, 115px);
  max-width: 1060px;
}
.closing .closing-body {
  max-width: 720px;
  margin-top: 80px;
}
.closing .closing-body p {
  margin-bottom: 23px;
}
.closing .questionline {
  font-size: clamp(23px, 3vw, 41px);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: -0.04em;
}
.closing .contact {
  margin-top: 65px;
  border-top: 2px solid var(--ink);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  font-size: 14px;
  font-weight: 750;
}
.closing .contact a {
  color: var(--pink);
  font-size: 16px;
  text-decoration: none;
  border-bottom: 2px solid var(--pink);
  padding-bottom: 5px;
  white-space: nowrap;
}
footer {
  background: var(--ink);
  color: var(--white);
  padding: 24px 6%;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 0.08em;
}
.mobile-only {
  display: none;
}
.nowrap {
  white-space: nowrap;
}
@media (max-width: 750px) {
  header {
    height: 54px;
    padding: 0 6%;
  }
  .brand {
    font-size: 21px;
  }
  .page {
    width: 88%;
  }
  .section {
    padding: 94px 0;
  }
  .kicker {
    margin-bottom: 26px;
    font-size: 10px;
  }
  .hero {
    min-height: 100svh;
  }
  .hero .page {
    padding-top: 25px;
    padding-bottom: 55px;
  }
  .hero-meta {
    font-size: 9px;
  }
  .hero-meta span:last-child {
    display: none;
  }
  .event {
    margin: 40px 0 25px;
    max-width: 90%;
    font-size: 11px;
  }
  .hero-title {
    font-size: clamp(67px, 17.1vw, 128px);
    letter-spacing: -0.085em;
    margin: 15px 0 28px;
  }
  .hero-desc {
    font-size: 12px;
    max-width: 300px;
    margin-bottom: 55px;
  }
  .hero-statement {
    font-size: clamp(23px, 6.2vw, 40px);
    line-height: 1.55;
  }
  .hero-english {
    font-size: 14px;
  }
  .hero-art {
    width: 120px;
    right: -4%;
    bottom: 12%;
    opacity: 0.23;
  }
  .story .display {
    font-size: clamp(40px, 10.6vw, 76px);
    line-height: 1.24;
  }
  .story-copy {
    display: block;
    margin-top: 65px;
  }
  .story-copy .aside {
    font-size: 11px;
    margin-bottom: 26px;
  }
  .story-copy .text strong {
    font-size: clamp(20px, 5.5vw, 28px);
  }
  .story .scribble {
    top: 30px;
    right: 7%;
    width: 65px;
  }
  .question {
    min-height: 570px;
  }
  .question .preface {
    font-size: 13px;
    margin-bottom: 40px;
  }
  .question .display {
    font-size: clamp(31px, 7.8vw, 53px);
    line-height: 1.5;
  }
  .question .q-mark {
    font-size: 270px;
    top: 40px;
    right: -15%;
    opacity: 0.33;
  }
  .philosophy .display {
    font-size: clamp(28px, 7vw, 48px);
    line-height: 1.5;
  }
  .philosophy .display .second {
    margin-top: 0;
  }
  .philosophy .display .highlight:after {
    height: 4px;
    bottom: -5px;
  }
  .philosophy .bodyrow {
    display: block;
    margin-top: 60px;
  }
  .philosophy .ear-art {
    width: 150px;
    margin: 0 0 35px auto;
  }
  .technology .display {
    font-size: clamp(37px, 9.3vw, 67px);
    line-height: 1.3;
  }
  .technology .lead {
    font-size: clamp(24px, 6vw, 36px);
    margin-top: 60px;
  }
  .tech-columns {
    display: block;
    margin: 50px 0 75px;
  }
  .tech-columns > div {
    margin-top: 25px;
  }
  .specs th {
    width: 33%;
  }
  .specs th,
  .specs td {
    font-size: 13px;
    padding: 15px 4px;
  }
  .lab .label {
    font-size: 14px;
    padding: 11px 17px;
    margin-bottom: 43px;
  }
  .lab .display {
    font-size: clamp(42px, 10.3vw, 74px);
    line-height: 1.3;
  }
  .lab .lab-bottom {
    display: block;
    margin-top: 45px;
  }
  .lab .lab-art {
    width: 150px;
    margin: 0 0 35px auto;
  }
  .closing {
    min-height: 0;
  }
  .closing .display {
    font-size: clamp(39px, 9.8vw, 68px);
    line-height: 1.3;
  }
  .closing .closing-body {
    margin-top: 50px;
  }
  .closing .questionline {
    font-size: clamp(22px, 5.8vw, 33px);
  }
  .closing .contact {
    display: block;
  }
  .closing .contact a {
    display: inline-block;
    margin-top: 20px;
  }
  .mobile-only {
    display: block;
  }
  .desktop-only {
    display: none;
  }
}
@media (max-width: 360px) {
  .hero-title {
    font-size: 16.5vw;
  }
  .hero-statement {
    font-size: 5.9vw;
  }
  .story .display {
    font-size: 10.2vw;
  }
  .question .display {
    font-size: 7.35vw;
  }
  .philosophy .display {
    font-size: 6.6vw;
  }
  .technology .display {
    font-size: 8.8vw;
  }
  .lab .display {
    font-size: 9.6vw;
  }
  .closing .display {
    font-size: 9.1vw;
  }
}
/* Ver.15 — 全体の文字の線を太く。レイアウト・改行・配色はVer.13を維持 */
body {
  font-weight: 600;
  -webkit-font-smoothing: auto;
}
.copy,
.hero-desc,
.hero-english,
.question .preface,
.dummy,
.specs table,
.editor-note {
  font-weight: 650;
}
.display,
.hero-title {
  font-weight: 950;
}
.hero-statement,
.technology .lead,
.closing .questionline {
  font-weight: 950;
}
.kicker,
.hero-meta,
.event,
.story-copy .aside,
.specs th,
.closing .contact,
.lab .label,
header .right,
footer {
  font-weight: 850;
}
.story-copy .text strong,
.philosophy strong {
  font-weight: 900;
}
.hero-english {
  font-weight: 700;
}

/* Ver.16: manga-editorial / bold, readable type system */
:root {
  --ink: #121212;
  --muted: #44443f;
}
body {
  font-family:
    "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo,
    sans-serif;
  font-weight: 750;
  -webkit-font-smoothing: auto;
  text-rendering: optimizeLegibility;
}
.copy,
.hero-desc,
.question .preface,
.dummy,
.specs table,
.editor-note {
  font-family: "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Sans", Meiryo, sans-serif;
  font-weight: 750;
  letter-spacing: 0.012em;
  line-height: 1.95;
}
.copy {
  font-size: clamp(16px, 1.52vw, 19px);
}
.dummy {
  font-size: clamp(15px, 1.28vw, 17px);
  color: #42423e;
}
.display,
.hero-statement,
.technology .lead,
.closing .questionline,
.lab .label {
  font-family: "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-weight: 900;
  letter-spacing: -0.06em;
}
.hero-title {
  font-family: Arial, "Arial Black", sans-serif;
  font-weight: 900;
  letter-spacing: -0.105em;
}
.story-copy .text strong,
.philosophy strong {
  font-weight: 900;
}
.hero-english {
  font-family: Georgia, serif;
  font-weight: 700;
}
.kicker,
.hero-meta,
.event,
.story-copy .aside,
.specs th,
.closing .contact,
header .right,
footer {
  font-weight: 900;
}
.specs td {
  font-weight: 700;
}
/* keep small screens legible, and let prose wrap naturally */
.copy p,
.dummy,
.specs td {
  overflow-wrap: anywhere;
}
.display,
.hero-statement,
.story-copy .text strong {
  overflow-wrap: normal;
  word-break: normal;
  line-break: strict;
}
@media (max-width: 750px) {
  .copy {
    font-size: 16px;
    line-height: 1.92;
  }
  .hero-desc {
    font-size: 13px;
    line-height: 1.85;
  }
  .dummy {
    font-size: 15px;
  }
  .specs th,
  .specs td {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Ver.17: 本文の可読性は維持し、見出しと強調だけ重量感を上げる */
:root {
  --headline-font:
    "Hiragino Kaku Gothic StdN", "Hiragino Sans", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic",
    Meiryo, sans-serif;
}
.display,
.hero-statement,
.technology .lead,
.closing .questionline,
.lab .label,
.specs h3 {
  font-family: var(--headline-font);
  font-weight: 900;
  -webkit-text-stroke: 0.7px currentColor;
  paint-order: stroke fill;
}
.hero-title {
  font-family: "Arial Black", Arial, "Helvetica Neue", sans-serif;
  font-weight: 900;
  -webkit-text-stroke: 1.4px currentColor;
  paint-order: stroke fill;
}
.story-copy .text strong,
.philosophy strong {
  font-family: var(--headline-font);
  font-weight: 900;
  -webkit-text-stroke: 0.42px currentColor;
  paint-order: stroke fill;
}
@media (max-width: 750px) {
  .display,
  .hero-statement,
  .technology .lead,
  .closing .questionline,
  .lab .label,
  .specs h3 {
    -webkit-text-stroke: 0.48px currentColor;
  }
  .hero-title {
    -webkit-text-stroke: 0.8px currentColor;
  }
  .story-copy .text strong,
  .philosophy strong {
    -webkit-text-stroke: 0.3px currentColor;
  }
}
/* Ver.18: 指定位置で強制改行。長い日本語見出しは狭い画面でも収める */
.hero-desc {
  max-width: none;
}
.story-copy .text strong {
  max-width: 100%;
}
.philosophy .display {
  font-size: clamp(27px, 5.15vw, 70px);
}
.lab .display {
  font-size: clamp(40px, 7.1vw, 100px);
}
@media (max-width: 750px) {
  .hero-desc {
    max-width: none;
    font-size: clamp(10px, 2.9vw, 13px);
    letter-spacing: -0.035em;
  }
  .philosophy .display {
    font-size: clamp(17px, 4.15vw, 31px);
    letter-spacing: -0.07em;
    line-height: 1.6;
  }
  .lab .display {
    font-size: clamp(24px, 6vw, 47px);
    letter-spacing: -0.07em;
  }
  .story-copy .text strong {
    font-size: clamp(18px, 5.2vw, 28px);
  }
  .question .display {
    font-size: clamp(29px, 7.3vw, 53px);
  }
}
@media (max-width: 360px) {
  .philosophy .display {
    font-size: 4.05vw;
  }
  .lab .display {
    font-size: 5.8vw;
  }
  .hero-desc {
    font-size: 2.75vw;
  }
}

/* Ver.19: explicit two-line headings, readable short detail, pink dot on the i */
.hero-title .hero-i {
  position: relative;
  display: inline-block;
  width: 0.145em;
  height: 0.72em;
  margin-left: 0.008em;
  margin-right: 0.015em;
  vertical-align: baseline;
  -webkit-text-stroke: 0;
  letter-spacing: 0;
}
.hero-title .hero-i-stem {
  position: absolute;
  bottom: 0;
  left: 0.016em;
  width: 0.115em;
  height: 0.49em;
  background: var(--ink);
}
.hero-title .hero-i-dot {
  position: absolute;
  top: 0;
  left: 0.016em;
  width: 0.115em;
  height: 0.115em;
  background: var(--pink);
  border-radius: 50%;
}
.story .display > span,
.lab .display > span {
  white-space: nowrap;
}
.story .display {
  font-size: clamp(42px, 7.5vw, 99px);
  letter-spacing: -0.075em;
}
.lab .display {
  font-size: clamp(42px, 6.3vw, 82px);
  letter-spacing: -0.07em;
}
.manga-details {
  white-space: nowrap;
  letter-spacing: -0.035em;
  font-size: clamp(13px, 1.24vw, 16px);
}
@media (max-width: 750px) {
  .story .display {
    font-size: clamp(29px, 8.1vw, 59px);
    letter-spacing: -0.08em;
    line-height: 1.35;
  }
  .lab .display {
    font-size: clamp(22px, 6.4vw, 45px);
    letter-spacing: -0.075em;
  }
  .manga-details {
    font-size: clamp(11px, 3.05vw, 14px);
    letter-spacing: -0.045em;
  }
}
@media (max-width: 380px) {
  .manga-details {
    white-space: normal;
    font-size: 14px;
    letter-spacing: 0;
  }
}
@media (max-width: 340px) {
  .story .display {
    font-size: 7.8vw;
  }
  .lab .display {
    font-size: 6vw;
  }
}

/* Ver.20 — larger circular i dot, two exact heading lines */
.hero-title .hero-i {
  width: 0.17em;
  margin-right: 0.012em;
}
.hero-title .hero-i-stem {
  left: 0.035em;
  width: 0.108em;
  height: 0.48em;
}
.hero-title .hero-i-dot {
  left: -0.01em;
  top: -0.045em;
  width: 0.205em;
  height: 0.205em;
  border-radius: 50%;
  z-index: 1;
}
.lab .lab-headline .lab-line {
  display: block;
  white-space: nowrap;
}
.philosophy .display .second {
  display: block;
  white-space: nowrap;
}
@media (max-width: 750px) {
  .lab .lab-headline {
    font-size: clamp(19px, 5.25vw, 39px);
    letter-spacing: -0.085em;
    line-height: 1.42;
  }
  .philosophy .display {
    font-size: clamp(16px, 4.55vw, 35px);
    letter-spacing: -0.085em;
    line-height: 1.52;
    white-space: nowrap;
  }
}
@media (max-width: 380px) {
  .lab .lab-headline {
    font-size: 5.1vw;
  }
  .philosophy .display {
    font-size: 4.45vw;
  }
}
.lab-headline .lab-line {
  display: block;
  white-space: nowrap;
}
.lab .lab-headline .lab-line > .pink {
  display: inline;
  color: var(--pink);
}

/* Ending CTA: circular sticker with curved call-to-action. */
.closing .contact {
  border-top: 0;
  padding-top: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.closing .contact .site-sticker {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 292px;
  height: 292px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--pink);
  color: var(--ink);
  font-family: "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 28px;
  font-weight: 950;
  line-height: 1.3;
  letter-spacing: -0.045em;
  text-align: center;
  text-decoration: none;
  padding: 75px 24px 30px;
  margin: 0;
  white-space: normal;
  transform: rotate(8deg);
  box-shadow: 7px 7px 0 var(--ink);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
.closing .contact .site-sticker:hover {
  transform: rotate(12deg) translateY(-4px);
  box-shadow: 9px 11px 0 var(--ink);
}
.closing .contact .site-sticker:focus-visible {
  outline: 4px solid var(--ink);
  outline-offset: 7px;
}
.closing .contact .sticker-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.closing .contact .sticker-ring text {
  font-size: 15.2px;
  font-weight: 850;
  letter-spacing: 0.01em;
  fill: var(--ink);
}
.closing .contact .sticker-title {
  position: relative;
  z-index: 1;
}
.closing .contact .sticker-click {
  position: relative;
  z-index: 1;
  margin-top: 19px;
  font-family: Georgia, serif;
  font-size: 29px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
@media (max-width: 750px) {
  .closing .contact {
    justify-content: center;
  }
  .closing .contact .site-sticker {
    width: 258px;
    height: 258px;
    font-size: 25px;
    padding: 67px 20px 25px;
    margin: 8px 0 12px;
  }
  .closing .contact .sticker-ring text {
    font-size: 15.2px;
  }
  .closing .contact .sticker-click {
    font-size: 26px;
    margin-top: 15px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .closing .contact .site-sticker {
    transition: none;
  }
}

/* Ending: preserve the exact pink sticker artwork approved in the reference image. */
.closing .contact .site-sticker.original-sticker {
  width: clamp(290px, 35vw, 400px);
  height: auto;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  transform: rotate(0deg);
  display: block;
  overflow: visible;
  line-height: normal;
}
.closing .contact .site-sticker.original-sticker img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(5px 8px 5px rgba(0, 0, 0, 0.18));
}
.closing .contact .site-sticker.original-sticker:hover {
  transform: translateY(-4px) rotate(2deg);
  box-shadow: none;
}
@media (max-width: 750px) {
  .closing .contact .site-sticker.original-sticker {
    width: min(82vw, 340px);
    height: auto;
    margin: 8px 0 12px;
  }
}

/* FINAL: one typography system, no competing historical overrides below. */
:root {
  --lp-body: 18px;
}
/* Section headings are deliberately fitted by script to their exact authored lines. */
main .section h2.display {
  font-family: var(--headline-font, "Hiragino Sans", sans-serif) !important;
  font-weight: 950 !important;
  line-height: 1.16 !important;
  letter-spacing: -0.075em !important;
  -webkit-text-stroke: 0.7px currentColor !important;
  white-space: normal !important;
  max-width: 100% !important;
  overflow: visible !important;
}
main .section h2.display > .fit-line {
  display: block !important;
  white-space: nowrap !important;
  width: max-content;
  max-width: none;
}
main .section h2.display .pink {
  color: var(--pink) !important;
  display: inline !important;
}
/* Uniform running text, including all previous inline emphasis. */
main
  :is(
    p,
    .copy,
    .hero-desc,
    .hero-statement,
    .hero-english,
    .story-copy .text,
    .story-copy .aside,
    .manga-details,
    .preface,
    .bodyrow,
    .lead,
    .dummy,
    .num,
    .specs h3,
    .specs th,
    .specs td,
    .lab .label,
    .closing-body,
    .questionline,
    .event,
    .editor-note
  ),
main
  :is(
    p,
    .copy,
    .hero-desc,
    .hero-statement,
    .hero-english,
    .story-copy .text,
    .story-copy .aside,
    .manga-details,
    .preface,
    .bodyrow,
    .lead,
    .dummy,
    .num,
    .specs h3,
    .specs th,
    .specs td,
    .lab .label,
    .closing-body,
    .questionline,
    .event,
    .editor-note
  )
  :is(strong, em, span) {
  font-size: var(--lp-body) !important;
  font-weight: 600 !important;
  -webkit-text-stroke: 0 !important;
  line-height: 1.85;
  letter-spacing: 0;
}
main
  :is(
    p,
    .copy,
    .hero-desc,
    .hero-statement,
    .hero-english,
    .story-copy .text,
    .story-copy .aside,
    .manga-details,
    .preface,
    .bodyrow,
    .lead,
    .dummy,
    .num,
    .specs h3,
    .specs th,
    .specs td,
    .lab .label,
    .closing-body,
    .questionline,
    .event,
    .editor-note
  )
  strong {
  display: inline !important;
}
/* Prevent body reset from touching display titles or their nested colored spans. */
main .section h2.display,
main .section h2.display :is(span, em, strong) {
  font-weight: 950 !important;
  -webkit-text-stroke: 0.7px currentColor !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}
main .section h2.display :is(span, em, strong) {
  font-size: inherit !important;
}
@media (max-width: 750px) {
  :root {
    --lp-body: 17px;
  }
  main .section h2.display,
  main .section h2.display :is(span, em, strong) {
    -webkit-text-stroke: 0.7px currentColor !important;
  }
}

/* iPhone typography: isolated from desktop and older mobile rules */
@media screen and (max-width: 750px) {
  /* Do not resize header metadata or section numbering. */
  .hero .hero-meta,
  .hero .hero-meta span {
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.13em !important;
    line-height: 1.5 !important;
    -webkit-text-stroke: 0 !important;
  }
  .section .kicker {
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.15em !important;
    -webkit-text-stroke: 0 !important;
  }
  /* Body copy: same size and weight everywhere, without strong emphasis. */
  main
    :is(
      p,
      .copy,
      .hero-desc,
      .hero-statement,
      .hero-english,
      .story-copy .text,
      .story-copy .aside,
      .manga-details,
      .preface,
      .bodyrow,
      .lead,
      .dummy,
      .num,
      .specs h3,
      .specs th,
      .specs td,
      .lab .label,
      .closing-body,
      .questionline,
      .event,
      .editor-note
    ),
  main
    :is(
      p,
      .copy,
      .hero-desc,
      .hero-statement,
      .hero-english,
      .story-copy .text,
      .story-copy .aside,
      .manga-details,
      .preface,
      .bodyrow,
      .lead,
      .dummy,
      .num,
      .specs h3,
      .specs th,
      .specs td,
      .lab .label,
      .closing-body,
      .questionline,
      .event,
      .editor-note
    )
    :is(span, strong, b, em) {
    font-size: 15px !important;
    font-weight: 600 !important;
    -webkit-text-stroke: 0 !important;
  }
  /* Titles: deliberately heavy, authored line breaks, never a third accidental line. */
  main .section h2.display {
    font-family: Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif !important;
    font-weight: 900 !important;
    -webkit-text-stroke: 1.1px currentColor !important;
    letter-spacing: -0.09em !important;
    line-height: 1.24 !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    max-width: none !important;
  }
  main .section h2.display :is(span, em, strong) {
    font-size: inherit !important;
    font-weight: inherit !important;
    -webkit-text-stroke: inherit !important;
    letter-spacing: inherit !important;
    line-height: inherit !important;
    white-space: nowrap !important;
  }
  main .story h2.display {
    font-size: clamp(27px, 8.5vw, 39px) !important;
  }
  main .question h2.display {
    font-size: clamp(27px, 8.2vw, 38px) !important;
  }
  main .philosophy h2.display {
    font-size: clamp(23px, 7.1vw, 34px) !important;
  }
  main .technology h2.display {
    font-size: clamp(27px, 8.3vw, 39px) !important;
  }
  main .lab h2.display {
    font-size: clamp(25px, 7.4vw, 36px) !important;
  }
  main .closing h2.display {
    font-size: clamp(29px, 8.9vw, 42px) !important;
  }
  main .story h2.display > span,
  main .lab h2.display > .lab-line {
    display: block !important;
  }
  main .philosophy h2.display > .second {
    display: inline !important;
  }
  main .lab h2.display .pink {
    display: inline !important;
    color: var(--pink) !important;
  }
  main .section h2.display .pink {
    color: var(--pink) !important;
  }
}

/* Editorial rhythm: section titles only, never the hero. */
@media (min-width: 751px) {
  main .section h2.display {
    line-height: 1.12 !important;
  }
}
/* Mobile: more usable width and the SAME display font as desktop. */
@media (max-width: 750px) {
  main .section > .page {
    width: calc(100% - 24px) !important;
    max-width: none !important;
  }
  main .section h2.display {
    font-family: var(
      --headline-font,
      "Noto Sans JP",
      "Hiragino Kaku Gothic ProN",
      sans-serif
    ) !important;
    font-weight: 950 !important;
    -webkit-text-stroke: 1.2px currentColor !important;
    letter-spacing: -0.105em !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: visible !important;
  }
  main .section h2.display > .fit-line {
    display: block !important;
    white-space: nowrap !important;
    width: max-content !important;
    max-width: none !important;
  }
  main .section h2.display .fit-line :is(span, em, strong) {
    display: inline !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: 950 !important;
    letter-spacing: inherit !important;
    -webkit-text-stroke: 1.2px currentColor !important;
    color: inherit;
    white-space: nowrap !important;
  }
  main .section h2.display .pink {
    color: var(--pink) !important;
  }
  /* All running copy retains the previously requested 15px and weight 600. */
}

/* Mobile-only: give the MaiTALK hero wordmark the same heavy visual weight as section titles. */
@media screen and (max-width: 750px) {
  .hero-title {
    font-family: "Arial Black", Arial, "Helvetica Neue", sans-serif !important;
    font-weight: 900 !important;
    -webkit-text-stroke: 2px currentColor !important;
    paint-order: stroke fill !important;
  }
  .hero-title .hero-i,
  .hero-title .hero-i * {
    -webkit-text-stroke: 0 !important;
  }
}

/* Mobile-only: subtle type-size increase, preserving desktop and manual line breaks. */
@media screen and (max-width: 750px) {
  .hero .hero-title {
    font-size: clamp(67px, 17.7vw, 132px) !important;
    letter-spacing: -0.095em !important;
  }
  main .section h2.display {
    letter-spacing: -0.115em !important;
  }
}

/* 2026-10-22 mobile refinement: slightly airier tracking, larger fitted titles. */
@media screen and (max-width: 750px) {
  .hero .hero-title {
    font-size: clamp(68px, 18.15vw, 135px) !important;
    letter-spacing: -0.083em !important;
  }
  main .section h2.display {
    letter-spacing: -0.075em !important;
  }
  main .section h2.display > .fit-line,
  main .section h2.display > .fit-line * {
    letter-spacing: inherit !important;
  }
}

/* Mobile-only: increase actual heading glyph size while retaining line widths.
   Width compensation prevents the fit algorithm from shrinking the larger type. */
@media screen and (max-width: 750px) {
  main .section h2.display > .fit-line {
    transform: scaleX(0.95) !important;
    transform-origin: left center !important;
  }
  .hero .hero-title {
    font-size: clamp(70px, 18.8vw, 139px) !important;
  }
}

/* Hero illustration replacement only: preserve all existing typography. */
.hero img.hero-art {
  width: clamp(190px, 27vw, 350px);
  height: auto;
  opacity: 0.82;
  object-fit: contain;
}
@media (max-width: 750px) {
  .hero img.hero-art {
    width: clamp(145px, 40vw, 190px);
    right: 0;
    opacity: 0.58;
  }
}

/* Story copy: a single editorial column beneath its two-line question. */
.story .story-copy {
  display: block !important;
  max-width: 790px;
  margin-top: clamp(50px, 7vw, 94px) !important;
}
.story .story-copy .aside {
  display: block !important;
  max-width: none !important;
  font-weight: 850 !important;
  line-height: 1.55 !important;
  margin: 0 0 26px !important;
}
.story .story-copy .text {
  display: block !important;
  width: 100% !important;
  max-width: 790px !important;
}
.story .story-copy .text p {
  margin: 0 !important;
}
@media (min-width: 751px) {
  .story .story-copy .aside {
    font-size: 18px !important;
  }
  .hero img.hero-art {
    width: 435px !important;
    transform: translate(55px, 135px) !important;
  }
}
@media (max-width: 750px) {
  .story .story-copy {
    max-width: 100% !important;
    margin-top: 48px !important;
  }
  .story .story-copy .aside {
    font-size: 15px !important;
    font-weight: 850 !important;
    margin-bottom: 20px !important;
  }
  .story .story-copy .text,
  .story .story-copy .text p {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.85 !important;
  }
}

/* Story subheading: bold at its existing size, on both desktop and mobile. */
.story .story-copy .aside.story-question strong {
  display: inline !important;
  font-size: inherit !important;
  font-weight: 900 !important;
  line-height: inherit !important;
  -webkit-text-stroke: 0.45px currentColor !important;
  letter-spacing: inherit !important;
}

/* Story typography contrast only: preserve all other sections. */
.story .story-copy .text,
.story .story-copy .text p {
  font-weight: 400 !important;
  -webkit-text-stroke: 0 !important;
}
@media (max-width: 750px) {
  .story .story-copy .text,
  .story .story-copy .text p {
    font-weight: 400 !important;
  }
}

/* Only the Story question: 12% larger on both screen sizes. */
@media (min-width: 751px) {
  .story .story-copy .aside.story-question {
    font-size: 20.16px !important;
  }
}
@media (max-width: 750px) {
  .story .story-copy .aside.story-question {
    font-size: 16.8px !important;
  }
}

/* Hero statement: match approved story subheading sizing and bold weight. */
.hero .hero-statement {
  font-size: 20.16px !important;
  font-weight: 900 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  -webkit-text-stroke: 0.45px currentColor !important;
}
.hero .hero-statement span {
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  -webkit-text-stroke: inherit !important;
  display: block !important;
}
@media (max-width: 750px) {
  .hero .hero-statement {
    font-size: 16.8px !important;
  }
}

/* Final hero subheading override: outrank generic running-text !important rules. */
@media (min-width: 751px) {
  html body main section.hero .page h2.hero-statement {
    font-size: 20.16px !important;
    font-weight: 900 !important;
    line-height: 1.5 !important;
  }
}
@media (max-width: 750px) {
  html body main section.hero .page h2.hero-statement {
    font-size: 16.8px !important;
    font-weight: 900 !important;
    line-height: 1.5 !important;
  }
}
html body main section.hero .page h2.hero-statement > span {
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

/* 02 / THE ORIGIN: independent section; existing sections unchanged */
.origin {
  background: var(--white);
}
.origin .display {
  font-size: clamp(43px, 6.7vw, 94px);
  line-height: 1.3;
  max-width: 1120px;
}
.origin .origin-copy {
  margin-top: clamp(48px, 7vw, 92px);
  max-width: 760px;
}
.origin .origin-copy p {
  margin: 0 0 1.55em;
}
@media screen and (max-width: 750px) {
  .origin .display {
    font-size: clamp(37px, 9.5vw, 60px);
    line-height: 1.35;
  }
  .origin .origin-copy {
    margin-top: 48px;
  }
}

/* 05 ABOUT THE LAB: replace illustration with the official laboratory photo only. */
html body main section.lab .lab-bottom img.lab-art {
  display: block;
  width: 100%;
  max-width: 470px;
  height: auto;
  object-fit: contain;
  align-self: start;
}
@media (max-width: 750px) {
  html body main section.lab .lab-bottom img.lab-art {
    width: 100%;
    max-width: 100%;
    margin: 0 0 35px 0;
  }
}

/* 基本スペック：見出しは太字のまま、説明本文のみ細字に統一 */
#technology .specs .feature-text p,
#technology .specs .feature-text p * {
  font-weight: 400 !important;
}

/* 06: desktop only — slightly larger sticker, moved left. Mobile remains untouched. */
@media screen and (min-width: 751px) {
  main .closing .contact {
    justify-content: flex-end;
    padding-right: clamp(28px, 5vw, 90px);
  }
  main .closing .contact .site-sticker.original-sticker {
    width: clamp(330px, 39vw, 450px);
  }
}

/* ==========================================================================
   02
   ========================================================================== */
/* Final: desktop hero art fixed, no desktop DOM or layout restructuring. */
@media (min-width: 751px) {
  html body main section.hero .page > img.hero-art {
    width: 720px !important;
    max-width: none !important;
    transform: translate(-4px, 40px) !important;
  }
}
/* Mobile-only illustration: preserve original hero title and copy styling. */
@media (max-width: 750px) {
  html body main section.hero .page > img.hero-art {
    position: absolute !important;
    display: block !important;
    width: 54vw !important;
    max-width: none !important;
    height: auto !important;
    left: 46% !important;
    right: auto !important;
    top: var(--mai-art-mobile-top, 68%) !important;
    bottom: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }
}

/* ==========================================================================
   03
   ========================================================================== */
/* 2026-10-23: PHILOSOPHY section ONLY. Preserve all other confirmed styles. */
main .philosophy h2.display .philosophy-pink {
  color: var(--pink) !important;
}
main .philosophy .bodyrow {
  display: grid !important;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.85fr) !important;
  gap: clamp(20px, 5vw, 80px) !important;
  align-items: start !important;
}
main .philosophy .bodyrow .copy {
  min-width: 0;
  max-width: 100%;
  margin: 0 !important;
}
main .philosophy .bodyrow .copy p,
main .philosophy .bodyrow .copy p :is(span, strong, em) {
  font-weight: 400 !important;
  -webkit-text-stroke: 0 !important;
}
main .philosophy .philosophy-illustration {
  display: block !important;
  width: 100% !important;
  max-width: 350px !important;
  height: auto !important;
  object-fit: contain !important;
  justify-self: end;
  align-self: start;
}
@media (max-width: 750px) {
  main .philosophy .bodyrow {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.85fr) !important;
    gap: 12px !important;
    margin-top: 60px !important;
  }
  main .philosophy .philosophy-illustration {
    max-width: 100% !important;
  }
}

/* ==========================================================================
   04 · philosophy-mobile-art-size-position-20261023
   ========================================================================== */
@media screen and (max-width: 750px) {
  html body main section.philosophy .bodyrow > img.philosophy-illustration {
    width: 76% !important;
    max-width: 76% !important;
    height: auto !important;
    justify-self: end !important;
    transform: translate(3px, -55px) !important;
    transform-origin: top right !important;
  }
}

/* ==========================================================================
   05
   ========================================================================== */
/* 02 / THE ORIGIN: emphasis and closing pause */
.origin .origin-copy strong {
  font-weight: 700;
}
.origin .origin-copy .origin-closing {
  margin-top: 2.3em;
}
@media (max-width: 750px) {
  .origin .origin-copy br {
    display: none;
  }
}

/* ==========================================================================
   06
   ========================================================================== */
/* Scoped, final typography for 02 / THE ORIGIN only. */
html body main section.origin .origin-copy {
  font-weight: 400 !important;
  -webkit-text-stroke: 0 !important;
}
html body main section.origin .origin-copy p,
html body main section.origin .origin-copy p.origin-normal {
  font-weight: 400 !important;
  -webkit-text-stroke: 0 !important;
  margin: 0 0 1.25em !important;
  line-height: 1.95 !important;
}
html body main section.origin .origin-copy p.origin-emphasis,
html body main section.origin .origin-copy p.origin-emphasis strong {
  font-weight: 750 !important;
  -webkit-text-stroke: 0 !important;
}
html body main section.origin .origin-copy p.origin-closing {
  margin-top: 1.6em !important;
  margin-bottom: 0 !important;
}
html body main section.origin .origin-copy br.origin-pair-break {
  display: initial;
}
@media (max-width: 750px) {
  html body main section.origin .origin-copy br.origin-pair-break {
    display: none;
  }
}

/* ==========================================================================
   07
   ========================================================================== */
/* Origin: continuous prose, no forced breaks or spacing except before closing. */
html body main section.origin .origin-copy {
  font-weight: 400 !important;
  line-height: 1.9 !important;
  -webkit-text-stroke: 0 !important;
}
html body main section.origin .origin-copy > span {
  display: inline !important;
  font-weight: 400 !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body main section.origin .origin-copy > strong {
  display: inline !important;
  font-weight: 750 !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body main section.origin .origin-copy > p.origin-closing {
  display: block !important;
  font-weight: 400 !important;
  margin: 1.6em 0 0 !important;
  padding: 0 !important;
  line-height: inherit !important;
}

/* ==========================================================================
   08 · origin-heading-size-only
   ========================================================================== */
/* 02 heading: match the visual scale of the other chapter headings. */
@media (min-width: 751px) {
  html body main section.origin h2.display {
    font-size: clamp(50px, 8vw, 113px) !important;
  }
}
@media (max-width: 750px) {
  html body main section.origin h2.display {
    font-size: clamp(27px, 8.3vw, 39px) !important;
  }
}

/* ==========================================================================
   09
   ========================================================================== */
/* 03 / PHILOSOPHY: only the two user-selected spans are bold. */
main section.philosophy .bodyrow .copy p strong.philosophy-emphasis {
  font-weight: 800 !important;
  -webkit-text-stroke: 0 !important;
}
main section.philosophy .bodyrow .copy p.philosophy-conclusion {
  margin-top: 1.6em !important;
}

/* ==========================================================================
   10 · body-weight-unification
   ========================================================================== */
/* 03 / PHILOSOPHY is the reference: ordinary prose 400, intentional emphasis 800.
   Only body prose is affected; headings, labels, illustrations and layout stay intact. */
html body main section.story .story-copy .text,
html body main section.story .story-copy .text p,
html body main section.origin .origin-copy,
html body main section.origin .origin-copy > span.origin-normal,
html body main section.origin .origin-copy > p.origin-closing,
html body main section.technology p.dummy,
html body main section.closing .closing-body,
html body main section.closing .closing-body p {
  font-weight: 400 !important;
  -webkit-text-stroke: 0 !important;
}
html body main section.origin .origin-copy > strong.origin-emphasis,
html body main section.story .story-copy .text strong,
html body main section.closing .closing-body strong {
  font-weight: 800 !important;
  -webkit-text-stroke: 0 !important;
}

/* ==========================================================================
   11 · body-weight-unification-corrected
   ========================================================================== */
/* Match 03 PHILOSOPHY prose: normal 400 / intentionally bold 800.
   Do not affect headings, badges, UI labels or spacing. */
html body main section.story .story-copy .text.copy,
html body main section.story .story-copy .text.copy p,
html body main section.origin .origin-copy,
html body main section.origin .origin-copy > span.origin-normal,
html body main section.origin .origin-copy > p.origin-closing,
html body main section.technology p.dummy,
html body main section.lab .lab-bottom .copy,
html body main section.lab .lab-bottom .copy p,
html body main section.closing .closing-body,
html body main section.closing .closing-body p {
  font-weight: 400 !important;
  -webkit-text-stroke: 0 !important;
}
html body main section.origin .origin-copy > strong.origin-emphasis,
html body main section.origin .origin-copy > strong.origin-emphasis *,
html body main section.story .story-copy .text.copy strong,
html body main section.lab .lab-bottom .copy strong,
html body main section.closing .closing-body strong {
  font-weight: 800 !important;
  -webkit-text-stroke: 0 !important;
}

/* ==========================================================================
   12 · body-weight-final-font-match
   ========================================================================== */
/* 03 PHILOSOPHY is the exact typography reference for prose emphasis. */
html body main section.origin .origin-copy > strong.origin-emphasis,
html body main section.origin .origin-copy > strong.origin-emphasis * {
  font-family:
    "Hiragino Kaku Gothic StdN", "Hiragino Sans", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic",
    Meiryo, sans-serif !important;
  font-weight: 800 !important;
}
html body main section.origin .origin-copy > p.origin-closing {
  line-height: 1.85 !important;
}

/* ==========================================================================
   13 · technology-subhead-match-story
   ========================================================================== */
/* Match both 04 subheads to the approved 01 story question. */
html body main section.technology h3.lead::before {
  content: none !important;
  display: none !important;
}
html body main section.technology h3.lead,
html body main section.technology .specs h3 {
  font-family: var(--headline-font) !important;
  font-size: 20.16px !important;
  font-weight: 900 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  -webkit-text-stroke: 0.45px currentColor !important;
  paint-order: stroke fill !important;
}
@media (max-width: 750px) {
  html body main section.technology h3.lead,
  html body main section.technology .specs h3 {
    font-size: 16.8px !important;
  }
}

/* ==========================================================================
   14 · technology-apple-style-specs
   ========================================================================== */
/* 04 / TECHNOLOGY: accessible, Apple-inspired simple feature list. */
#technology .specs .feature-list {
  width: 100%;
  border-top: 1px solid #c9c9c7;
  margin-top: 26px;
}
#technology .specs .feature-row {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  column-gap: 26px;
  align-items: start;
  padding: 27px 8px;
  border-bottom: 1px solid #c9c9c7;
}
#technology .specs .feature-icon {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 4px;
  color: #1c1c1c;
}
#technology .specs .feature-icon svg {
  width: 33px;
  height: 33px;
  display: block;
}
#technology .specs .feature-text h4 {
  margin: 0 0 7px;
  font-family: var(--headline-font, "Noto Sans JP", sans-serif);
  font-size: clamp(17px, 1.55vw, 22px);
  line-height: 1.48;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #1b1b1b;
}
#technology .specs .feature-text p {
  margin: 0;
  font-family: "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Sans", Meiryo, sans-serif;
  font-size: clamp(14px, 1.12vw, 16px);
  line-height: 1.8;
  font-weight: 400;
  color: #41413e;
  letter-spacing: 0;
}
#technology .specs .feature-note {
  font-family: "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.8;
  color: #66665f;
  margin: 18px 0 0;
}
@media (max-width: 750px) {
  #technology .specs .feature-list {
    margin-top: 20px;
  }
  #technology .specs .feature-row {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 15px;
    padding: 23px 0;
  }
  #technology .specs .feature-icon svg {
    width: 27px;
    height: 27px;
  }
  #technology .specs .feature-text h4 {
    font-size: 16px;
    line-height: 1.55;
  }
  #technology .specs .feature-text p {
    font-size: 14px;
    line-height: 1.75;
  }
  #technology .specs .feature-note {
    font-size: 11px;
  }
}

/* ==========================================================================
   15 · specs-pink-option-two
   ========================================================================== */
/* Only the 04 basic-spec feature list: pink accents as in selected option 2. */
#technology .specs .feature-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fce0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #1c1c1c;
  box-sizing: border-box;
}
#technology .specs .feature-row {
  align-items: center;
}
#technology .specs .feature-text h4 .spec-accent {
  color: #e4007f;
}
@media (max-width: 750px) {
  #technology .specs .feature-icon {
    width: 42px;
    height: 42px;
  }
}

/* ==========================================================================
   16 · hero-photo-adjustment
   ========================================================================== */
/* Hero photograph: retain existing responsive placement and typography. */
html body main section.hero .page > img.hero-art {
  opacity: 1 !important;
  object-fit: contain !important;
  border-radius: 8px;
}

/* ==========================================================================
   17 · mai-mobile-only-hero-philosophy-20261023
   ========================================================================== */
/* Both changes are mobile-only. All desktop declarations and markup stay untouched. */
@media screen and (max-width: 750px) {
  /* 01: Hero photograph matches the 05 laboratory photograph's content width. */
  html body main section.hero .page > img.hero-art {
    width: calc(100vw - 24px) !important;
    max-width: none !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    height: auto !important;
    object-fit: contain !important;
    /* Keep the established vertical anchor (--mai-art-mobile-top). */
  }
  /* 02: Illustration lives beside the PHILOSOPHY heading, not beside its body. */
  html body main section.philosophy .page {
    position: relative !important;
  }
  html body main section.philosophy .bodyrow {
    display: block !important;
    margin-top: 60px !important;
    width: 100% !important;
  }
  html body main section.philosophy .bodyrow > .copy {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  html body main section.philosophy .bodyrow > img.philosophy-illustration {
    position: absolute !important;
    top: 45px !important;
    right: 0 !important;
    left: auto !important;
    width: clamp(78px, 25vw, 112px) !important;
    max-width: clamp(78px, 25vw, 112px) !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
    object-fit: contain !important;
    z-index: 1 !important;
  }
}

/* ==========================================================================
   18 · mai-technology-patent-20261023
   ========================================================================== */
/* 04 / TECHNOLOGY — section-scoped editorial rebuild. All other sections remain untouched. */
#technology .tech-intro {
  max-width: 790px;
  margin: 48px 0 0;
}
#technology .tech-intro p,
#technology .patent-copy p,
#technology .tech-bridge p {
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.9;
  font-weight: 400;
  color: #41413e;
  margin: 0 0 18px;
  letter-spacing: 0;
}
#technology .tech-intro .patent-highlight {
  font-weight: 800;
  color: #202020;
  margin-top: 24px;
}
#technology .patent-stories {
  margin-top: 76px;
}
#technology .patent-story {
  padding: 35px 0 56px;
  border-top: 1px solid #bcbcb9;
}
#technology .patent-label {
  font-size: 12px;
  letter-spacing: 0.075em;
  color: #e4007f;
  font-weight: 850;
  line-height: 1.7;
}
#technology .patent-label span {
  color: #66665f;
  font-weight: 600;
  letter-spacing: 0;
  margin-left: 12px;
}
html body main section.technology .patent-story h3.lead {
  font-size: clamp(23px, 2.9vw, 39px) !important;
  line-height: 1.42 !important;
  letter-spacing: -0.04em !important;
  margin: 24px 0 27px !important;
  max-width: 900px !important;
}
#technology .patent-copy {
  max-width: 790px;
}
#technology .patent-copy strong {
  font-weight: 800;
  color: #1d1d1d;
}
#technology .patent-reference {
  font-size: 12px;
  line-height: 1.7;
  color: #77776f;
  margin: 25px 0 0;
}
#technology .tech-bridge {
  border-top: 1px solid #bcbcb9;
  padding-top: 43px;
  margin-top: 12px;
  max-width: 850px;
}
#technology .tech-bridge h3 {
  font-family: var(--headline-font);
  font-size: clamp(24px, 3vw, 39px);
  line-height: 1.45;
  letter-spacing: -0.04em;
  font-weight: 900;
  margin: 0 0 20px;
}
#technology .specs {
  margin-top: 76px;
}
@media (max-width: 750px) {
  #technology .tech-intro {
    margin-top: 38px;
  }
  #technology .tech-intro p,
  #technology .patent-copy p,
  #technology .tech-bridge p {
    font-size: 15px;
    line-height: 1.85;
    margin-bottom: 17px;
  }
  #technology .patent-stories {
    margin-top: 56px;
  }
  #technology .patent-story {
    padding: 28px 0 43px;
  }
  #technology .patent-label {
    font-size: 10px;
    letter-spacing: 0.035em;
  }
  #technology .patent-label span {
    margin-left: 6px;
  }
  html body main section.technology .patent-story h3.lead {
    font-size: clamp(22px, 6vw, 29px) !important;
    margin: 21px 0 24px !important;
  }
  #technology .patent-reference {
    font-size: 11px;
    overflow-wrap: anywhere;
  }
  #technology .tech-bridge {
    padding-top: 34px;
  }
  #technology .tech-bridge h3 {
    font-size: 23px;
  }
  #technology .specs {
    margin-top: 58px;
  }
}

/* ==========================================================================
   19
   ========================================================================== */
/* 04 TECHNOLOGY: compact paired patents; desktop sections unchanged */
#technology .tech-intro {
  max-width: 900px;
  margin-top: 44px;
}
#technology .tech-intro p {
  font-weight: 400;
}
#technology .tech-intro strong {
  font-weight: 700;
  color: #222;
}
#technology .patent-stories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(26px, 4vw, 66px);
  margin-top: 58px;
  align-items: stretch;
}
#technology .patent-story {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 27px 0 24px;
  border-top: 1px solid #bcbcb9;
}
#technology .patent-label {
  font-size: 12px;
  letter-spacing: 0.075em;
  font-weight: 850;
  line-height: 1.7;
}
html body main section.technology .patent-story h3.lead {
  font-size: clamp(21px, 2.05vw, 29px) !important;
  line-height: 1.48 !important;
  margin: 19px 0 18px !important;
}
#technology .patent-copy p {
  font-size: clamp(13px, 1.12vw, 15px);
  line-height: 1.95;
  font-weight: 400;
  margin: 0;
}
#technology .patent-reference {
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.075em;
  line-height: 1.75;
  margin: 26px 0 0;
  margin-top: auto;
  padding-top: 26px;
  overflow-wrap: anywhere;
}
#technology .specs {
  margin-top: 58px;
}
@media (max-width: 700px) {
  #technology .patent-stories {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 42px;
  }
  #technology .patent-story {
    padding: 24px 0 26px;
  }
  #technology .patent-label {
    font-size: 10px;
    letter-spacing: 0.035em;
  }
  html body main section.technology .patent-story h3.lead {
    font-size: clamp(22px, 6vw, 29px) !important;
    margin: 17px 0 17px !important;
  }
  #technology .patent-copy p {
    font-size: 14px;
    line-height: 1.9;
  }
  #technology .patent-reference {
    font-size: 10px;
    padding-top: 20px;
  }
  #technology .specs {
    margin-top: 42px;
  }
}

/* ==========================================================================
   20
   ========================================================================== */
/* Patent filing captions: match PATENT PENDING labels; preserve original grey */
#technology .patent-reference {
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.075em;
  line-height: 1.7;
}
@media (max-width: 700px) {
  #technology .patent-reference {
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.035em;
    line-height: 1.7;
  }
}

/* ==========================================================================
   21
   ========================================================================== */
/* 04: compact patent columns and smaller specifications footnote */
@media (min-width: 701px) {
  html body main section.technology .patent-story h3.lead {
    font-size: clamp(19px, 1.75vw, 25px) !important;
  }
  #technology .patent-copy p {
    font-size: clamp(12px, 1.02vw, 14px) !important;
    line-height: 1.9;
  }
}
@media (max-width: 700px) {
  html body main section.technology .patent-story h3.lead {
    font-size: clamp(20px, 5.4vw, 26px) !important;
  }
  #technology .patent-copy p {
    font-size: 13px !important;
    line-height: 1.9;
  }
}
#technology .feature-note {
  font-size: 11px !important;
  line-height: 1.7;
}
@media (max-width: 700px) {
  #technology .feature-note {
    font-size: 10px !important;
    line-height: 1.7;
  }
}

/* ==========================================================================
   22
   ========================================================================== */
/* 04 typography final: explicit overrides of legacy repeated rules */
#technology .patent-story .patent-reference {
  font-size: 12px !important;
  font-weight: 850 !important;
  letter-spacing: 0.075em !important;
  line-height: 1.7 !important;
  color: #77776f !important;
}
#technology .tech-intro p {
  font-weight: 400 !important;
}
#technology .tech-intro p > strong {
  font-weight: 800 !important;
  color: #222 !important;
}
#technology .specs .feature-text p,
#technology .specs .feature-text p * {
  font-size: clamp(12px, 1.02vw, 14px) !important;
  font-weight: 400 !important;
  line-height: 1.9 !important;
}
@media (max-width: 750px) {
  #technology .patent-story .patent-reference {
    font-size: 10px !important;
    letter-spacing: 0.035em !important;
  }
  #technology .specs .feature-text p,
  #technology .specs .feature-text p * {
    font-size: 13px !important;
  }
}

/* ==========================================================================
   23 · lab-05-final-typography
   ========================================================================== */
/* 05: smaller pink introductory label; retain existing pill styling. */
html body main section.lab .label {
  color: var(--pink) !important;
  border-color: var(--pink) !important;
  font-size: clamp(13px, 1.25vw, 17px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  -webkit-text-stroke: 0 !important;
}
/* 05: body text remains light; the two designated phrases alone are bold. */
html body main section.lab .lab-bottom .copy p {
  font-weight: 400 !important;
  -webkit-text-stroke: 0 !important;
}
html body main section.lab .lab-bottom .copy p strong {
  font-weight: 800 !important;
  -webkit-text-stroke: 0 !important;
}
@media (max-width: 750px) {
  html body main section.lab .label {
    font-size: 13px !important;
  }
}

/* ==========================================================================
   24
   ========================================================================== */
/* 05 ABOUT THE LAB: match the actual 03 PHILOSOPHY .copy typography.
   Keep all other sections, layouts, and the pink label untouched. */
html body main section#lab .lab-bottom .copy {
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif !important;
  font-size: clamp(15px, 1.42vw, 18px) !important;
  line-height: 2 !important;
  letter-spacing: normal !important;
  font-weight: 400 !important;
  -webkit-text-stroke: 0 !important;
}
html body main section#lab .lab-bottom .copy p {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  font-weight: 400 !important;
  -webkit-text-stroke: 0 !important;
}
html body main section#lab .lab-bottom .copy p strong {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  font-weight: 800 !important;
  -webkit-text-stroke: 0 !important;
}

/* ==========================================================================
   25
   ========================================================================== */
/* 05 label colour experiment: pink fill with black lettering. */
html body main section.lab .label {
  background-color: var(--pink) !important;
  color: #171817 !important;
  border-color: var(--pink) !important;
}

/* ==========================================================================
   26 · lab-dark-preview
   ========================================================================== */
/* 05 ABOUT THE LAB: dark editorial variation. Scoped to this section only. */
html body main section#lab {
  background: #111214 !important;
  color: #f7f6f1 !important;
}
html body main section#lab .kicker {
  color: #b6b6b8 !important;
}
html body main section#lab h2.lab-headline,
html body main section#lab h2.lab-headline .lab-line {
  color: #f7f6f1 !important;
}
html body main section#lab h2.lab-headline .pink {
  color: var(--pink) !important;
}
html body main section#lab .label {
  background: transparent !important;
  color: var(--pink) !important;
  border-color: var(--pink) !important;
}
html body main section#lab .lab-bottom .copy,
html body main section#lab .lab-bottom .copy p,
html body main section#lab .lab-bottom .copy p strong {
  color: #f1f0ec !important;
}

/* ==========================================================================
   27
   ========================================================================== */
/* 05: match photo height to the adjacent body copy on desktop. */
@media (min-width: 769px) {
  html body main section#lab .lab-bottom {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    align-items: stretch;
  }
  html body main section#lab .lab-bottom .lab-photo-frame {
    position: relative;
    min-width: 0;
    min-height: 0;
    align-self: stretch;
    overflow: hidden;
  }
  html body main section#lab .lab-bottom .lab-photo-frame img.lab-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center center;
    margin: 0;
  }
}
@media (max-width: 768px) {
  html body main section#lab .lab-bottom .lab-photo-frame {
    width: 100%;
  }
  html body main section#lab .lab-bottom .lab-photo-frame img.lab-art {
    position: static;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    margin: 0 0 35px 0;
  }
}

/* ==========================================================================
   28
   ========================================================================== */
/* 06: first two text lines belong to the same paragraph group; final bold line is separated. */
#contact .closing-body > p:nth-child(1) {
  margin-bottom: 0 !important;
}
#contact .closing-body > p:nth-child(2) {
  margin-top: 0 !important;
}
#contact .closing-body > p:nth-child(3) {
  margin-top: 1.6em !important;
}

/* ==========================================================================
   29
   ========================================================================== */
/* 05/06: typography aligned with 03 PHILOSOPHY (normal and emphasis). */
html body main section#lab .lab-bottom .copy p,
html body main section#contact .closing-body p {
  font-family: "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Sans", Meiryo, sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.85 !important;
  letter-spacing: normal !important;
  -webkit-text-stroke: 0 !important;
}
html body main section#lab .lab-bottom .copy p strong,
html body main section#contact .closing-body p strong {
  font-family:
    "Hiragino Kaku Gothic StdN", "Hiragino Sans", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic",
    Meiryo, sans-serif !important;
  font-size: inherit !important;
  font-weight: 800 !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  -webkit-text-stroke: 0 !important;
}

/* ==========================================================================
   30
   ========================================================================== */
@media (max-width: 750px) {
  html body main section#lab .lab-bottom .copy p,
  html body main section#contact .closing-body p {
    font-size: 15px !important;
  }
}

/* ==========================================================================
   31
   ========================================================================== */
/* 06: desktop-only oversized sticker. Target the actual .site-sticker element. */
@media screen and (min-width: 751px) {
  html body main section.closing .contact {
    justify-content: center;
    padding-right: 0;
  }
  html body main section.closing .contact a.site-sticker {
    width: 480px;
    height: 480px;
    min-width: 480px;
    font-size: 45px;
    padding: 122px 35px 48px;
  }
  html body main section.closing .contact a.site-sticker .sticker-click {
    font-size: 47px;
    margin-top: 28px;
  }
}

/* ==========================================================================
   32 · JA only
   ========================================================================== */
/* 2026-10-24: Preserve approved JP hero typography; colour only inline phrase. */
html[lang="ja"]
  body
  main
  section#top
  .hero-statement
  em.hero-accent-inline:where(html[lang="ja"], html[lang="ja"] *),
html[lang="ja"]
  body
  main
  section#top
  .hero-english
  em.hero-accent-inline:where(html[lang="ja"], html[lang="ja"] *) {
  display: inline !important;
  font: inherit !important;
  font-style: normal !important;
  color: #e4007f !important;
  -webkit-text-stroke: inherit !important;
}
html[lang="ja"]
  body
  main
  section#top
  .hero-statement
  > span.hero-line:where(html[lang="ja"], html[lang="ja"] *) {
  display: block !important;
}

/* ==========================================================================
   33 · EN only
   ========================================================================== */
/* English edition: compact bilingual typography */
.en-jp-sub:where(html[lang="en"], html[lang="en"] *) {
  display: block;
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: clamp(11px, 1.12vw, 14px);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.045em;
  color: #999;
  margin-top: 15px;
  max-width: 100%;
}
#top .en-jp-sub:where(html[lang="en"], html[lang="en"] *) {
  font-size: clamp(11px, 1vw, 13px);
  margin-top: 17px;
  color: #888;
}
#top .hero-english:where(html[lang="en"], html[lang="en"] *) {
  display: none;
}
#story h2.display:where(html[lang="en"], html[lang="en"] *),
#origin h2.display:where(html[lang="en"], html[lang="en"] *),
#philosophy h2.display:where(html[lang="en"], html[lang="en"] *),
#technology h2.display:where(html[lang="en"], html[lang="en"] *),
#lab h2.display:where(html[lang="en"], html[lang="en"] *),
#contact h2.display:where(html[lang="en"], html[lang="en"] *),
#question h2.display:where(html[lang="en"], html[lang="en"] *) {
  overflow-wrap: normal;
  word-break: normal;
}
#technology .feature-text h4:where(html[lang="en"], html[lang="en"] *) {
  overflow-wrap: normal;
}
@media (max-width: 700px) {
  .en-jp-sub:where(html[lang="en"], html[lang="en"] *) {
    font-size: 11px;
    margin-top: 10px;
  }
  #top .hero-statement:where(html[lang="en"], html[lang="en"] *) {
    font-size: clamp(29px, 7vw, 48px);
  }
  #technology .patent-story h3:where(html[lang="en"], html[lang="en"] *) {
    overflow-wrap: normal;
  }
}

/* ==========================================================================
   34 · EN only
   ========================================================================== */
/* EN hero: keep Japanese subtitle discreet and on a single line on phones. */
#top .hero-statement .en-jp-sub:where(html[lang="en"], html[lang="en"] *) {
  display: block;
  width: 100%;
  max-width: 100%;
  white-space: nowrap;
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif !important;
  font-size: clamp(10px, 1vw, 12px) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
  margin-top: 13px;
  color: #888;
}
@media (max-width: 600px) {
  #top .hero-statement .en-jp-sub:where(html[lang="en"], html[lang="en"] *) {
    font-size: clamp(9px, 2.6vw, 10px) !important;
    margin-top: 9px;
  }
}

/* ==========================================================================
   35 · mai-en-final-mobile-fix · EN only
   ========================================================================== */
/* Final EN corrections: mobile-only chapter headings; hero Japanese subtitle on all screens. */
html
  body
  main
  section#top.hero
  div.page
  > h2.hero-statement
  > span.en-jp-sub:where(html[lang="en"], html[lang="en"] *) {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: visible !important;
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  -webkit-text-stroke: 0 !important;
  margin-top: 13px !important;
  color: #888 !important;
}
@media screen and (max-width: 750px) {
  html
    body
    main
    section#top.hero
    div.page
    > h2.hero-statement
    > span.en-jp-sub:where(html[lang="en"], html[lang="en"] *) {
    font-size: clamp(8px, 2.35vw, 10px) !important;
    margin-top: 9px !important;
  }
}

/* ==========================================================================
   36 · EN only
   ========================================================================== */
/* 2026-10-24: Restore full-size EN hero and keep the Japanese caption separate. */
html[lang="en"]
  body
  main
  section#top.hero
  .page
  > h2.hero-statement:where(html[lang="en"], html[lang="en"] *) {
  font-size: clamp(48px, 6vw, 80px) !important;
  line-height: 1.13 !important;
  letter-spacing: -0.055em !important;
  font-weight: 900 !important;
  max-width: 100% !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  -webkit-text-stroke: 0.48px currentColor !important;
}
html[lang="en"]
  body
  main
  section#top.hero
  .page
  > h2.hero-statement
  em.hero-accent-inline:where(html[lang="en"], html[lang="en"] *) {
  display: inline !important;
  font: inherit !important;
  font-style: normal !important;
  color: #e4007f !important;
  -webkit-text-stroke: inherit !important;
}
html[lang="en"]
  body
  main
  section#top.hero
  .page
  > p.hero-jp-caption:where(html[lang="en"], html[lang="en"] *) {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 18px 0 0 !important;
  padding: 0 !important;
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif !important;
  font-size: clamp(10px, 1.05vw, 13px) !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  color: #171717 !important;
  white-space: nowrap !important;
  -webkit-text-stroke: 0 transparent !important;
  position: relative !important;
  z-index: 2 !important;
}
html[lang="en"]
  body
  main
  section#top.hero
  .page
  > p.hero-jp-caption
  em.hero-accent-inline:where(html[lang="en"], html[lang="en"] *) {
  display: inline !important;
  font: inherit !important;
  font-style: normal !important;
  color: #e4007f !important;
  -webkit-text-stroke: 0 transparent !important;
}
@media (max-width: 700px) {
  html[lang="en"]
    body
    main
    section#top.hero
    .page
    > h2.hero-statement:where(html[lang="en"], html[lang="en"] *) {
    font-size: clamp(29px, 7.3vw, 39px) !important;
    line-height: 1.19 !important;
    max-width: 100% !important;
    letter-spacing: -0.055em !important;
  }
  html[lang="en"]
    body
    main
    section#top.hero
    .page
    > p.hero-jp-caption:where(html[lang="en"], html[lang="en"] *) {
    font-size: clamp(8px, 2.45vw, 10px) !important;
    margin-top: 12px !important;
  }
}

/* ==========================================================================
   37 · EN only
   ========================================================================== */
/* EN desktop hero: preserve the original two-column layout and prevent text overlapping the photo. */
@media (min-width: 751px) {
  html[lang="en"]
    body
    main
    section#top.hero
    .page
    > h2.hero-statement:where(html[lang="en"], html[lang="en"] *) {
    box-sizing: border-box !important;
    width: 54% !important;
    max-width: 54% !important;
    font-size: clamp(30px, 3vw, 58px) !important;
    line-height: 1.17 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }
}

/* ==========================================================================
   38 · EN only
   ========================================================================== */
/* Verified hero layout override: text and photograph occupy separate desktop columns. */
@media (min-width: 751px) {
  html[lang="en"]
    body
    main
    section#top.hero
    .page
    > h2.hero-statement:where(html[lang="en"], html[lang="en"] *) {
    display: block !important;
    box-sizing: border-box !important;
    width: 53% !important;
    max-width: 53% !important;
    font-size: clamp(30px, 2.55vw, 49px) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.04em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  html[lang="en"]
    body
    main
    section#top.hero
    .page
    > img.hero-art:where(html[lang="en"], html[lang="en"] *) {
    width: 43% !important;
    right: 0 !important;
    left: auto !important;
  }
}
@media (max-width: 750px) {
  html[lang="en"]
    body
    main
    section#top.hero
    .page
    > h2.hero-statement:where(html[lang="en"], html[lang="en"] *) {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(25px, 6.8vw, 38px) !important;
    line-height: 1.22 !important;
    word-break: normal !important;
  }
}

/* ==========================================================================
   39
   ========================================================================== */
/* HERO REPAIR: intentional, scoped override of historical hero rules */
html body main section#top.hero .page .mai-pink,
html body main section#top.hero .page .hero-statement .mai-pink,
html body main section#top.hero .page .hero-jp-caption .mai-pink,
html body main section#top.hero .page .hero-english .mai-pink {
  display: inline !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  font-style: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  color: #e4007f !important;
  -webkit-text-stroke: 0 !important;
  vertical-align: baseline !important;
}
html[lang="ja"] body main section#top.hero .page h2.hero-statement {
  font-size: clamp(31px, 4vw, 60px) !important;
  line-height: 1.42 !important;
  font-weight: 900 !important;
  max-width: 56% !important;
  width: 56% !important;
}
html[lang="ja"] body main section#top.hero .page h2.hero-statement > .hero-line {
  display: block !important;
  font: inherit !important;
  letter-spacing: inherit !important;
}
html[lang="en"] body main section#top.hero .page h2.hero-statement {
  font-family: Arial, "Helvetica Neue", sans-serif !important;
  font-weight: 900 !important;
  font-style: normal !important;
  line-height: 1.13 !important;
  letter-spacing: -0.045em !important;
  font-size: clamp(34px, 3.75vw, 72px) !important;
  max-width: 53% !important;
  width: 53% !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
html[lang="en"] body main section#top.hero .page p.hero-jp-caption {
  color: #171717 !important;
  white-space: nowrap !important;
  font-size: clamp(10px, 1.05vw, 13px) !important;
  font-weight: 400 !important;
}
@media (max-width: 750px) {
  html[lang="ja"] body main section#top.hero .page h2.hero-statement {
    font-size: clamp(21px, 5.8vw, 29px) !important;
    line-height: 1.43 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  html[lang="en"] body main section#top.hero .page h2.hero-statement {
    font-size: clamp(29px, 7vw, 48px) !important;
    line-height: 1.18 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  html[lang="en"] body main section#top.hero .page p.hero-jp-caption {
    font-size: clamp(8px, 2.45vw, 12px) !important;
    letter-spacing: -0.025em !important;
  }
}

/* ==========================================================================
   40 · mai-jp-english-subtitle-single-line-desktop · JA only
   ========================================================================== */
/* Only Japanese LP English subtitle: keep desktop on one line. Mobile retains natural wrapping. */
@media (min-width: 751px) {
  html[lang="ja"]
    body
    main
    section#top.hero
    .page
    > p.hero-english:where(html[lang="ja"], html[lang="ja"] *) {
    white-space: nowrap !important;
  }
}

/* ==========================================================================
   41 · EN only
   ========================================================================== */
/* EN mobile hero Japanese caption: retain a single line, matching descriptor font. */
@media screen and (max-width: 750px) {
  html[lang="en"]
    body
    main
    section#top.hero
    .page
    > p.hero-jp-caption:where(html[lang="en"], html[lang="en"] *) {
    font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif !important;
    font-weight: 650 !important;
    font-size: clamp(12px, 3.85vw, 16px) !important;
    letter-spacing: -0.075em !important;
    line-height: 1.45 !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    width: max-content !important;
  }
  html[lang="en"]
    body
    main
    section#top.hero
    .page
    > p.hero-jp-caption
    > .mai-pink:where(html[lang="en"], html[lang="en"] *) {
    display: inline !important;
    font: inherit !important;
    color: #e4007f !important;
    white-space: nowrap !important;
  }
}

/* ==========================================================================
   42 · mai-hero-i-baseline-fix
   ========================================================================== */
html body main section.hero .page h1.hero-title .hero-i .hero-i-stem {
  bottom: -0.008em !important;
}

/* ==========================================================================
   43 · mai-en-desktop-caption-weight-fix · EN only
   ========================================================================== */
/* Match mobile Japanese caption typography while preserving desktop single-line layout. */
@media screen and (min-width: 751px) {
  html[lang="en"]
    body
    main
    section#top.hero
    .page
    > p.hero-jp-caption:where(html[lang="en"], html[lang="en"] *) {
    font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    letter-spacing: -0.035em !important;
    white-space: nowrap !important;
  }
}

/* ==========================================================================
   44
   ========================================================================== */
/* Two independent closing CTA stickers: scoped to the existing closing contact only. */
html body main section.closing .contact.cta-pair {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(28px, 5vw, 76px);
  flex-wrap: nowrap;
  padding-right: 0;
}
html body main section.closing .contact.cta-pair a.site-sticker.cta-sticker {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(260px, 29vw, 370px);
  height: clamp(260px, 29vw, 370px);
  min-width: 0;
  aspect-ratio: 1;
  padding: 35px 18px 24px;
  margin: 0;
  border: 3px solid #171717;
  border-radius: 50%;
  transform: none;
  text-decoration: none;
  text-align: center;
  line-height: 1.35;
  white-space: normal;
  transition:
    transform 0.16s cubic-bezier(0.2, 1.6, 0.3, 1),
    box-shadow 0.16s ease;
  touch-action: manipulation;
}
html body main section.closing .contact.cta-pair a.cta-sticker--lab {
  background: #171717;
  color: #fff;
  box-shadow: 8px 9px 0 var(--pink);
}
html body main section.closing .contact.cta-pair a.cta-sticker--talk {
  background: var(--pink);
  color: #171717;
  box-shadow: 8px 9px 0 #171717;
}
html body main section.closing .contact.cta-pair .cta-name {
  display: block;
  font-size: clamp(27px, 3vw, 39px);
  font-weight: 950;
  letter-spacing: -0.04em;
  line-height: 1.25;
}
html body main section.closing .contact.cta-pair .cta-description {
  display: block;
  margin-top: 10px;
  font-size: clamp(12px, 1.3vw, 16px);
  font-weight: 850;
  letter-spacing: -0.045em;
  white-space: nowrap;
}
html body main section.closing .contact.cta-pair .sticker-click {
  display: block;
  margin-top: 24px;
  font-size: clamp(27px, 3vw, 38px);
  line-height: 1.1;
}
@media (hover: hover) {
  html body main section.closing .contact.cta-pair a.cta-sticker:hover {
    transform: scale(1.045);
    box-shadow: 12px 14px 0 var(--pink);
  }
  html body main section.closing .contact.cta-pair a.cta-sticker--talk:hover {
    box-shadow: 12px 14px 0 #171717;
  }
}
html body main section.closing .contact.cta-pair a.cta-sticker:active {
  transform: scale(0.965) translate(6px, 7px);
  box-shadow: 2px 2px 0 var(--pink);
}
html body main section.closing .contact.cta-pair a.cta-sticker--talk:active {
  box-shadow: 2px 2px 0 #171717;
}
html body main section.closing .contact.cta-pair a.cta-sticker:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 12px;
}
@media (max-width: 750px) {
  html body main section.closing .contact.cta-pair {
    flex-direction: column;
    gap: 32px;
  }
  html body main section.closing .contact.cta-pair a.site-sticker.cta-sticker {
    width: min(76vw, 300px);
    height: min(76vw, 300px);
    padding: 30px 14px 22px;
    margin: 0;
    font-size: inherit;
  }
  html body main section.closing .contact.cta-pair .cta-name {
    font-size: clamp(27px, 8vw, 36px);
  }
  html body main section.closing .contact.cta-pair .cta-description {
    font-size: clamp(11px, 3.6vw, 15px);
  }
  html body main section.closing .contact.cta-pair .sticker-click {
    font-size: clamp(27px, 8vw, 35px);
    margin-top: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body main section.closing .contact.cta-pair a.cta-sticker {
    transition: none;
  }
}

/* ==========================================================================
   45 · mai-final-feature-heading-weight · JA only
   ========================================================================== */
#technology .specs .feature-text h4:where(html[lang="ja"], html[lang="ja"] *) {
  font-weight: 900 !important;
}
#technology .specs .feature-text h4 .spec-accent:where(html[lang="ja"], html[lang="ja"] *) {
  font-weight: 900 !important;
}

/* ==========================================================================
   46 · maitalk-official-logo-20261029
   ========================================================================== */
/* Official brand asset; keep logo proportions on all screen sizes. */
html body main section.hero .page h1.hero-title.official-logo-title {
  font-size: 0 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  -webkit-text-stroke: 0 !important;
  margin: 16px 0 36px !important;
  width: min(100%, 1040px) !important;
  max-width: 100% !important;
  white-space: normal !important;
}
html body main section.hero .page h1.hero-title.official-logo-title img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}
html body main section.closing .contact.cta-pair .cta-sticker--talk .cta-name.official-logo-cta {
  display: block;
  width: 76%;
  max-width: 280px;
  line-height: 1;
  margin: 0 auto;
}
html
  body
  main
  section.closing
  .contact.cta-pair
  .cta-sticker--talk
  .cta-name.official-logo-cta
  img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
@media (max-width: 750px) {
  html body main section.hero .page h1.hero-title.official-logo-title {
    width: 100% !important;
    margin: 15px 0 28px !important;
  }
  html body main section.closing .contact.cta-pair .cta-sticker--talk .cta-name.official-logo-cta {
    width: 78%;
    max-width: 240px;
  }
}

/* ==========================================================================
   47 · cta-action-labels-20261029
   ========================================================================== */
/* Action-specific CTA labels; shared by desktop and mobile. */
html body main section.closing .contact.cta-pair .sticker-click .cta-arrow {
  display: inline !important;
  font-family: Arial, sans-serif !important;
  font-size: 0.72em !important;
  font-weight: 700 !important;
  vertical-align: 0.13em !important;
  margin-left: 0.14em !important;
  white-space: nowrap !important;
}
html body main section.closing .contact.cta-pair .sticker-click {
  font-family: Arial, "Helvetica Neue", sans-serif !important;
  font-style: normal !important;
  font-weight: 850 !important;
  letter-spacing: -0.035em !important;
  font-size: clamp(20px, 2.25vw, 29px) !important;
  white-space: nowrap !important;
}
@media (max-width: 750px) {
  html body main section.closing .contact.cta-pair .sticker-click {
    font-size: clamp(19px, 6.2vw, 26px) !important;
  }
}

/* ==========================================================================
   48 · mai-intro-arrow-20261104
   ========================================================================== */
/* Only the introduction-to-scene CTA: arrow replaces the former round icon. */
.lit-intro-slide .lit-intro-content {
  padding-bottom: 0;
}
.lit-intro-slide .lit-intro-teaser {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  width: max-content;
  max-width: 100%;
  min-height: 48px;
  padding: 5px 55px 5px 20px;
  margin: auto 0 0;
  background: #e4007f;
  color: #fff;
  border: 0;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 50%, calc(100% - 34px) 100%, 0 100%);
  text-align: center;
  justify-content: center;
  cursor: pointer;
}
.lit-intro-slide .lit-intro-teaser-title {
  color: #fff;
  font-size: clamp(15px, 1.8vw, 20px);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -0.035em;
}
.lit-intro-slide .lit-intro-teaser:hover {
  filter: brightness(0.94);
}
.lit-intro-slide .lit-intro-teaser:focus-visible {
  outline: 3px solid #151515;
  outline-offset: 4px;
}
@media (max-width: 600px) {
  .lit-intro-slide .lit-intro-teaser {
    min-height: 44px;
    padding: 5px 43px 5px 13px;
    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%);
  }
  .lit-intro-slide .lit-intro-teaser-title {
    font-size: clamp(13px, 3.7vw, 17px);
  }
}

/* ==========================================================================
   49 · intro-prose-linebreak-tuning
   ========================================================================== */
/* Only the Japanese intro prose: four paragraph groups, desktop-specific line breaks. */
.lit-intro-slide .story-copy .text.copy p.intro-prose {
  line-height: 1.7 !important;
}
.lit-intro-slide .story-copy .text.copy .intro-paragraph {
  display: block;
}
.lit-intro-slide .story-copy .text.copy .intro-paragraph + .intro-paragraph {
  margin-top: 1em;
}
@media (max-width: 750px) {
  .lit-intro-slide .story-copy .text.copy p.intro-prose {
    line-height: 1.85 !important;
  }
  .lit-intro-slide .story-copy .text.copy .intro-desktop-break {
    display: none;
  }
}

/* ==========================================================================
   50 · intro-prose-weight-fix
   ========================================================================== */
/* 2026-11-04: Explicit intro-only text weights. Keep paragraph spacing and desktop breaks unchanged. */
.lit-intro-slide .story-copy .text.copy p.intro-prose,
.lit-intro-slide .story-copy .text.copy p.intro-prose .intro-paragraph {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif !important;
  font-weight: 300 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}
.lit-intro-slide .story-copy .text.copy p.intro-prose .intro-paragraph strong {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  font-weight: 800 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  display: inline !important;
  margin: 0 !important;
}

/* ==========================================================================
   51 · patent02-last-character-fit · JA only
   ========================================================================== */
/* Only Japanese patent story 02: tighten tracking slightly to avoid a one-character final line. */
@media (min-width: 701px) {
  #technology
    .patent-stories
    > .patent-story:nth-child(2)
    .patent-copy
    p:where(html[lang="ja"], html[lang="ja"] *) {
    letter-spacing: -0.035em !important;
  }
}

/* ==========================================================================
   52 · mobile-cta-arrow-glyph-fix-20261104 · JA only
   ========================================================================== */
@media (max-width: 750px) {
  html
    body
    main
    section.closing
    .contact.cta-pair
    .sticker-click
    .cta-arrow:where(html[lang="ja"], html[lang="ja"] *) {
    display: inline-block !important;
    width: 0.72em !important;
    height: 0.72em !important;
    font-size: 0 !important;
    line-height: 0 !important;
    vertical-align: -0.015em !important;
    margin-left: 0.16em !important;
    background: currentColor !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19 19 5M8 5h11v11' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center/contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19 19 5M8 5h11v11' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center/contain no-repeat !important;
  }
}

/* ==========================================================================
   53 · mobile-jp-conversation-overlap-repair-20261104 · JA only
   ========================================================================== */
@media (max-width: 750px) {
  /* Keep each Japanese speech turn in normal flow instead of desktop overlap. */
  html[lang="ja"]
    .lit-carousel
    .lit-slide:not(.lit-intro-slide)
    .lit-dark
    .lit-dialog:where(html[lang="ja"], html[lang="ja"] *),
  html[lang="ja"]
    .lit-carousel
    .lit-slide:not(.lit-intro-slide)
    .lit-dark
    .lit-dialog.lit-reply:where(html[lang="ja"], html[lang="ja"] *) {
    position: relative !important;
    transform: none !important;
    margin-top: 16px !important;
    margin-bottom: 16px !important;
    flex-shrink: 0 !important;
  }
  html[lang="ja"]
    .lit-carousel
    .lit-slide:not(.lit-intro-slide)
    .lit-folder
    .lit-dark:where(html[lang="ja"], html[lang="ja"] *) {
    min-height: max-content !important;
    height: auto !important;
  }
  html[lang="ja"]
    .lit-carousel
    .lit-slide:not(.lit-intro-slide)
    .lit-utterance:where(html[lang="ja"], html[lang="ja"] *) {
    min-height: 0 !important;
    align-items: center !important;
  }
}

/* ==========================================================================
   54 · maitalk-specs-usability-20261105 · JA only
   ========================================================================== */
/* New usability item only; existing basic-spec rows and all other sections are unchanged. */
#technology .specs .usability-features:where(html[lang="ja"], html[lang="ja"] *) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  margin-top: 16px;
  font-size: clamp(12px, 1.02vw, 14px);
  line-height: 1.95;
  font-weight: 400;
  color: #41413e;
}
#technology .specs .usability-features .usability-item:where(html[lang="ja"], html[lang="ja"] *) {
  display: inline;
  white-space: normal;
}
#technology
  .specs
  .usability-features
  .usability-item:not(:last-child):where(html[lang="ja"], html[lang="ja"] *)::after {
  content: "／";
  color: #e4007f;
  padding: 0 0.55em;
  font-weight: 600;
}
@media (max-width: 750px) {
  #technology .specs .usability-features:where(html[lang="ja"], html[lang="ja"] *) {
    font-size: 13px;
    line-height: 1.9;
    gap: 4px 0;
  }
}

/* ==========================================================================
   55 · spec-desktop-linebreaks-20261105 · JA only
   ========================================================================== */
@media (max-width: 767px) {
  #technology .specs br.spec-desktop-break:where(html[lang="ja"], html[lang="ja"] *) {
    display: none;
  }
}

/* ==========================================================================
   56 · usability-mobile-bullets-20261105 · JA only
   ========================================================================== */
/* Mobile usability list only: pink leading bullet, one feature per line. */
@media (max-width: 750px) {
  #technology .specs .usability-features:where(html[lang="ja"], html[lang="ja"] *) {
    display: block;
  }
  #technology .specs .usability-features .usability-item:where(html[lang="ja"], html[lang="ja"] *) {
    display: block;
    padding-left: 1.1em;
    position: relative;
  }
  #technology
    .specs
    .usability-features
    .usability-item:where(html[lang="ja"], html[lang="ja"] *)::before {
    content: "・";
    color: #e4007f;
    position: absolute;
    left: 0;
    font-weight: 600;
  }
  #technology
    .specs
    .usability-features
    .usability-item:not(:last-child):where(html[lang="ja"], html[lang="ja"] *)::after {
    content: none;
  }
}

/* ==========================================================================
   57 · lit-carousel-style
   ========================================================================== */
/* Intro-only cue: preserve all scene slides and existing slider styles. */
.lit-intro-slide .lit-intro-content {
  display: flex;
  flex-direction: column;
}
.lit-intro-teaser {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  max-width: 530px;
  margin: clamp(25px, 4vw, 44px) 0 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #151515;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.lit-intro-teaser-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.lit-intro-teaser-overline {
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: #777;
}
.lit-intro-teaser-title {
  font-size: clamp(15px, 1.8vw, 20px);
  font-weight: 800;
  line-height: 1.55;
  letter-spacing: -0.035em;
}
.lit-intro-teaser-icon {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #e4007f;
  color: white;
  font:
    700 28px/1 Arial,
    sans-serif;
  transition: transform 0.2s ease;
}
.lit-intro-teaser:hover .lit-intro-teaser-icon {
  transform: translateX(4px);
}
.lit-intro-teaser:focus-visible {
  outline: 3px solid #e4007f;
  outline-offset: 5px;
  border-radius: 6px;
}
@media (max-width: 600px) {
  .lit-intro-teaser {
    margin-top: 24px;
    gap: 10px;
  }
  .lit-intro-teaser-icon {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
    font-size: 24px;
  }
  .lit-intro-teaser-title {
    font-size: clamp(14px, 4vw, 17px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .lit-intro-teaser-icon {
    transition: none;
  }
}
/* LOST IN TRANSLATION: full-viewport manual horizontal snap slider */
.lit-carousel {
  width: 100%;
  max-width: none;
  margin: clamp(48px, 7vw, 85px) auto 0;
  position: relative;
  left: auto;
  transform: none;
  font-family: inherit;
}
.lit-carousel * {
  box-sizing: border-box;
}
.lit-intro-content {
  padding: 0 2px 12px;
  flex: 1;
  min-width: 0;
}
.lit-intro-slide .story-copy {
  width: 100%;
}
.lit-intro-slide .display {
  max-width: 100%;
}
.lit-viewport {
  width: 100%;
  border-radius: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
}
.lit-viewport::-webkit-scrollbar {
  display: none;
}
.lit-slides {
  display: flex;
  align-items: stretch;
  width: 100%;
  gap: 12px;
}
.lit-slides::after {
  content: "";
  flex: 0 0 8%;
  pointer-events: none;
}
.lit-slide {
  flex: 0 0 calc(92% - 12px);
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
}
.lit-dark {
  background: #151515;
  color: #fff;
  padding: clamp(20px, 3vw, 36px) clamp(20px, 3.5vw, 42px);
  flex: 1;
}
.lit-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.055em;
}
.lit-intro-label {
  font-size: clamp(13px, 1.65vw, 17px);
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: 0.01em;
}
.lit-rule {
  height: 1px;
  background: #505050;
  margin: 17px 0 25px;
}
.lit-scene {
  font-size: clamp(15px, 2vw, 20px);
  font-weight: 800;
  line-height: 1.6;
}
.lit-context {
  font-size: clamp(13px, 1.6vw, 16px);
  margin: 5px 0 22px;
  line-height: 1.8;
}
.lit-dialog {
  max-width: 90%;
  margin: 0 0 22px;
}
.lit-speaker {
  font-size: 12px;
  margin-bottom: 9px;
}
.lit-bubble {
  position: relative;
  border-radius: 12px;
  padding: 14px 18px;
  font-size: clamp(15px, 2vw, 19px);
  line-height: 1.75;
}
.lit-editor {
  border: 1px solid #fff;
  background: #151515;
  color: #fff;
}
.lit-editor:before {
  content: "";
  position: absolute;
  left: 25px;
  bottom: -10px;
  width: 17px;
  height: 17px;
  transform: rotate(45deg);
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  background: #151515;
}
.lit-reply {
  margin-left: auto;
  margin-bottom: 9px;
}
.lit-artist {
  background: #e4007f;
  color: #fff;
}
.lit-artist:after {
  content: "";
  position: absolute;
  right: 27px;
  bottom: -9px;
  width: 18px;
  height: 18px;
  transform: rotate(45deg);
  background: #e4007f;
}
.lit-light {
  background: #fff;
  color: #151515;
  padding: clamp(20px, 3vw, 36px) clamp(20px, 3.5vw, 42px);
}
.lit-light h3 {
  font-size: clamp(15px, 1.9vw, 19px);
  font-weight: 800;
  margin: 0 0 15px;
  letter-spacing: 0.01em;
}
.lit-light p {
  font-size: clamp(14px, 1.65vw, 17px);
  line-height: 1.9;
  margin: 0;
}
.lit-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 18px 0;
}
.lit-arrow {
  border: 1px solid #151515;
  background: #fff;
  color: #151515;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  cursor: pointer;
  font-size: 20px;
}
.lit-dots {
  display: flex;
  gap: 12px;
  align-items: center;
}
.lit-dot {
  border: 0;
  background: #bcbcbc;
  border-radius: 50%;
  width: 9px;
  height: 9px;
  padding: 0;
  cursor: pointer;
}
.lit-dot.is-active {
  background: #e4007f;
  width: 11px;
  height: 11px;
}
.lit-carousel button:focus-visible {
  outline: 3px solid #e4007f;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .lit-viewport {
    scroll-behavior: auto;
  }
}
@media (max-width: 600px) {
  .lit-carousel {
    margin-top: 45px;
  }
  .lit-slide {
    flex-basis: calc(88% - 12px);
  }
  .lit-slides::after {
    flex-basis: 12%;
  }
  .lit-dark,
  .lit-light {
    padding: 24px 20px;
  }
  .lit-dialog {
    max-width: 95%;
  }
  .lit-bubble {
    padding: 13px 15px;
  }
  .lit-controls {
    gap: 22px;
  }
}

/* Folder-shaped scene cards, with white explanation inside the same outline. */
.lit-external-kicker {
  flex: 0 0 auto;
  margin: 0 0 19px;
  align-self: flex-start;
}
.lit-folder {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #151515;
  clip-path: polygon(0 0, 21% 0, 26% 30px, 100% 30px, 100% 100%, 0 100%);
  padding: 2px;
}
.lit-dark {
  clip-path: none;
  flex: 1;
  padding-top: clamp(65px, 7vw, 92px);
}
.lit-scene {
  display: block;
  line-height: 1.35;
  margin-bottom: 18px;
}
.lit-scene-title {
  font-size: clamp(24px, 3.25vw, 43px);
  font-weight: 850;
  letter-spacing: -0.025em;
  line-height: 1.35;
}
.lit-context {
  font-weight: 300 !important;
}
.lit-light {
  flex: 0 0 auto;
  background: #fff;
  color: #151515;
}
.lit-light p {
  font-weight: 300 !important;
}
@media (max-width: 600px) {
  .lit-folder {
    clip-path: polygon(0 0, 27% 0, 35% 19px, 100% 19px, 100% 100%, 0 100%);
  }
  .lit-dark {
    padding-top: 53px;
  }
  .lit-scene-title {
    font-size: clamp(23px, 5.5vw, 34px);
  }
  .lit-external-kicker {
    margin-bottom: 12px;
  }
}

/* Case-card typography only: ensure actual light Japanese face and no artificial stroke. */
html body main .lit-carousel .lit-slide .lit-folder .lit-dark p.lit-context,
html body main .lit-carousel .lit-slide .lit-folder .lit-light p {
  font-family:
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", sans-serif !important;
  font-weight: 300 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  font-synthesis: none;
}

/* Conversation-only styling: side-tail bubbles and supplied human silhouettes. */
.lit-utterance {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.lit-person {
  flex: 0 0 clamp(76px, 8vw, 108px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
}
.lit-person .lit-avatar {
  display: block;
  width: clamp(60px, 6.5vw, 86px);
  height: clamp(60px, 6.5vw, 86px);
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.lit-person .lit-speaker {
  font-size: clamp(10px, 1.05vw, 13px);
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  margin: 0;
  color: #fff;
}
.lit-utterance .lit-bubble {
  flex: 1;
  min-width: 0;
  border-radius: 13px;
  position: relative;
}
.lit-utterance .lit-editor {
  background: #fff;
  color: #151515;
  border: 0;
}
.lit-utterance .lit-editor:before,
.lit-reply .lit-utterance .lit-artist:after {
  content: "";
  position: absolute;
  bottom: auto;
  transform: none;
  width: 17px;
  height: 22px;
  border: 0;
  clip-path: none;
}
.lit-utterance .lit-editor:before {
  left: -16px;
  right: auto;
  background: #fff;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
.lit-reply .lit-utterance {
  flex-direction: row-reverse;
}
.lit-reply .lit-utterance .lit-artist:after {
  right: -16px;
  left: auto;
  background: #e4007f;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.lit-utterance .tail-upper:before,
.lit-reply .lit-utterance .tail-upper:after {
  top: 20%;
}
.lit-utterance .tail-lower:before,
.lit-reply .lit-utterance .tail-lower:after {
  top: 62%;
}
@media (max-width: 600px) {
  .lit-utterance {
    gap: 10px;
  }
  .lit-person {
    flex-basis: 60px;
    gap: 5px;
  }
  .lit-person .lit-avatar {
    width: 52px;
    height: 52px;
  }
  .lit-person .lit-speaker {
    font-size: 9px;
    white-space: normal;
  }
  .lit-utterance .lit-bubble {
    padding: 11px 12px;
  }
}

/* Targeted correction: attached tails, larger speakers, content-sized bubbles. */
.lit-utterance {
  gap: 12px !important;
  align-items: center;
}
.lit-utterance .lit-person {
  flex: 0 0 clamp(116px, 12vw, 164px) !important;
  gap: 5px;
}
.lit-utterance .lit-person .lit-avatar {
  width: clamp(108px, 11vw, 160px) !important;
  height: clamp(108px, 11vw, 160px) !important;
}
.lit-utterance .lit-person .lit-speaker {
  font-size: clamp(11px, 1vw, 13px);
}
.lit-utterance .lit-bubble {
  flex: 0 1 auto !important;
  width: max-content !important;
  max-width: calc(100% - clamp(128px, 12vw, 176px)) !important;
  padding: 10px 16px !important;
  box-sizing: border-box;
}
/* Remove old detached tails and rebuild them flush against the bubble's side. */
.lit-utterance .lit-bubble:before,
.lit-utterance .lit-bubble:after {
  content: none !important;
}
.lit-utterance .lit-bubble.lit-editor:before {
  content: "" !important;
  display: block;
  position: absolute;
  left: -15px;
  right: auto;
  top: 22%;
  bottom: auto;
  width: 16px;
  height: 25px;
  background: #fff;
  border: 0;
  transform: none;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
.lit-reply .lit-utterance .lit-bubble.lit-artist:after {
  content: "" !important;
  display: block;
  position: absolute;
  right: -15px;
  left: auto;
  top: 60%;
  bottom: auto;
  width: 16px;
  height: 25px;
  background: #e4007f;
  border: 0;
  transform: none;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.lit-utterance .lit-bubble.lit-editor.tail-lower:before {
  top: 60%;
}
.lit-utterance .lit-bubble.lit-editor.tail-upper:before {
  top: 22%;
}
.lit-reply .lit-utterance .lit-bubble.lit-artist.tail-upper:after {
  top: 22%;
}
.lit-reply .lit-utterance .lit-bubble.lit-artist.tail-lower:after {
  top: 60%;
}
@media (max-width: 600px) {
  .lit-utterance {
    gap: 8px !important;
  }
  .lit-utterance .lit-person {
    flex-basis: clamp(65px, 21vw, 100px) !important;
  }
  .lit-utterance .lit-person .lit-avatar {
    width: clamp(65px, 20vw, 96px) !important;
    height: clamp(65px, 20vw, 96px) !important;
  }
  .lit-utterance .lit-bubble {
    max-width: calc(100% - clamp(73px, 21vw, 108px)) !important;
    padding: 9px 11px !important;
  }
}
/* 2026-11-04: Only the three requested dialogue-layout adjustments. */
.lit-carousel .lit-dark .lit-dialog {
  margin-bottom: 8px;
}
.lit-carousel .lit-dark .lit-dialog.lit-reply {
  margin-bottom: 5px;
}
.lit-carousel .lit-utterance .lit-person {
  gap: 0 !important;
  justify-content: center;
}
.lit-carousel .lit-utterance .lit-person .lit-avatar {
  width: clamp(124px, 12.5vw, 180px) !important;
  height: clamp(124px, 12.5vw, 180px) !important;
  flex-shrink: 0;
}
.lit-carousel .lit-utterance .lit-person .lit-speaker {
  margin: 0 !important;
  line-height: 1.2;
}
.lit-carousel .lit-utterance .lit-person {
  flex-basis: clamp(128px, 13vw, 186px) !important;
}
.lit-carousel .lit-utterance .lit-bubble {
  max-width: calc(100% - clamp(140px, 13.5vw, 198px)) !important;
}
/* Keep each triangular pointer physically overlapping its bubble edge. */
.lit-carousel .lit-utterance .lit-bubble.lit-editor:before {
  left: -13px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
.lit-carousel .lit-reply .lit-utterance .lit-bubble.lit-artist:after {
  right: -13px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
@media (max-width: 600px) {
  .lit-carousel .lit-utterance .lit-person {
    flex-basis: clamp(72px, 24vw, 108px) !important;
  }
  .lit-carousel .lit-utterance .lit-person .lit-avatar {
    width: clamp(72px, 23vw, 104px) !important;
    height: clamp(72px, 23vw, 104px) !important;
  }
  .lit-carousel .lit-utterance .lit-bubble {
    max-width: calc(100% - clamp(80px, 25vw, 116px)) !important;
  }
}
/* 2026-11-04 follow-up: only silhouette visual size, caption proximity and dialogue vertical spacing. */
.lit-carousel .lit-dark .lit-dialog,
.lit-carousel .lit-dark .lit-dialog.lit-reply {
  margin-bottom: 0 !important;
}
.lit-carousel .lit-dark .lit-dialog + .lit-dialog {
  margin-top: 2px !important;
}
.lit-carousel .lit-utterance .lit-person {
  gap: 2px !important;
  flex-basis: clamp(104px, 10.5vw, 142px) !important;
}
.lit-carousel .lit-utterance .lit-person .lit-avatar {
  width: clamp(100px, 10vw, 136px) !important;
  height: clamp(100px, 10vw, 136px) !important;
}
.lit-carousel .lit-utterance .lit-person .lit-speaker {
  margin: 0 !important;
  line-height: 1.1 !important;
}
.lit-carousel .lit-utterance .lit-bubble {
  max-width: calc(100% - clamp(116px, 11vw, 154px)) !important;
}
@media (max-width: 600px) {
  .lit-carousel .lit-utterance .lit-person {
    flex-basis: clamp(67px, 21vw, 88px) !important;
  }
  .lit-carousel .lit-utterance .lit-person .lit-avatar {
    width: clamp(65px, 20vw, 86px) !important;
    height: clamp(65px, 20vw, 86px) !important;
  }
  .lit-carousel .lit-utterance .lit-bubble {
    max-width: calc(100% - clamp(75px, 23vw, 100px)) !important;
  }
}
/* 2026-11-04: Move only the foreign manga artist's dialogue group upward. */
.lit-carousel .lit-dark .lit-dialog.lit-reply {
  margin-top: -38px !important;
  position: relative;
}
@media (max-width: 600px) {
  .lit-carousel .lit-dark .lit-dialog.lit-reply {
    margin-top: -18px !important;
  }
}

/* ==========================================================================
   58 · intro-copy-position-adjust-20261104
   ========================================================================== */
/* Move only the intro subheading and body upward; keep the title and pink arrow fixed. */
@media (min-width: 751px) {
  .lit-intro-slide .story-copy {
    transform: translateY(-12px);
  }
}

/* ==========================================================================
   59 · mai-en-carousel-layout · EN only
   ========================================================================== */
/* English-only responsive refinement; all Japanese layout untouched. */
.lit-intro-slide h2.display span:where(html[lang="en"], html[lang="en"] *) {
  display: block;
}
.lit-intro-slide h2.display:where(html[lang="en"], html[lang="en"] *) {
  font-size: clamp(31px, 4.1vw, 63px);
  line-height: 1.18;
  letter-spacing: -0.055em;
}
.lit-intro-slide .story-question:where(html[lang="en"], html[lang="en"] *) {
  font-weight: 800;
}
.lit-intro-slide .intro-prose:where(html[lang="en"], html[lang="en"] *) {
  font-size: clamp(13px, 1.15vw, 15px) !important;
  line-height: 1.55 !important;
}
.lit-intro-slide .story-copy .text.copy p.intro-prose:where(html[lang="en"], html[lang="en"] *) {
  line-height: 1.55 !important;
}
.lit-intro-slide
  .story-copy
  .text.copy
  .intro-paragraph
  + .intro-paragraph:where(html[lang="en"], html[lang="en"] *) {
  margin-top: 0.8em;
}
.lit-intro-slide .lit-intro-teaser-title:where(html[lang="en"], html[lang="en"] *) {
  font-size: clamp(13px, 1.5vw, 18px);
}
.lit-carousel .lit-scene-title:where(html[lang="en"], html[lang="en"] *) {
  font-size: clamp(22px, 2.8vw, 36px);
  line-height: 1.25;
}
.lit-carousel .lit-context:where(html[lang="en"], html[lang="en"] *) {
  font-size: clamp(12px, 1.35vw, 15px);
  line-height: 1.45;
  margin-bottom: 12px;
}
.lit-carousel .lit-utterance .lit-bubble:where(html[lang="en"], html[lang="en"] *) {
  font-size: clamp(13px, 1.48vw, 17px);
  line-height: 1.48;
  padding: 9px 14px !important;
}
.lit-carousel .lit-light p:where(html[lang="en"], html[lang="en"] *) {
  font-size: clamp(12px, 1.35vw, 15px);
  line-height: 1.6;
}
.lit-carousel .lit-light:where(html[lang="en"], html[lang="en"] *) {
  padding-top: 20px;
  padding-bottom: 22px;
}
.lit-carousel .lit-light h3:where(html[lang="en"], html[lang="en"] *) {
  margin-bottom: 8px;
}
.lit-carousel #lit-slide-3 .lit-utterance .lit-person:where(html[lang="en"], html[lang="en"] *) {
  flex-basis: clamp(70px, 8vw, 104px) !important;
}
.lit-carousel
  #lit-slide-3
  .lit-utterance
  .lit-person
  .lit-avatar:where(html[lang="en"], html[lang="en"] *) {
  width: clamp(68px, 7.5vw, 100px) !important;
  height: clamp(68px, 7.5vw, 100px) !important;
}
.lit-carousel #lit-slide-3 .lit-utterance .lit-bubble:where(html[lang="en"], html[lang="en"] *) {
  max-width: calc(100% - clamp(80px, 9vw, 116px)) !important;
}
.lit-carousel #lit-slide-3 .lit-dialog.lit-reply:where(html[lang="en"], html[lang="en"] *) {
  margin-top: 0 !important;
}
.lit-carousel #lit-slide-3 .lit-dark .lit-dialog:where(html[lang="en"], html[lang="en"] *) {
  margin-top: 4px !important;
}
@media (max-width: 750px) {
  .lit-intro-slide h2.display:where(html[lang="en"], html[lang="en"] *) {
    font-size: clamp(25px, 6.2vw, 42px);
  }
  .lit-intro-slide .story-copy .text.copy p.intro-prose:where(html[lang="en"], html[lang="en"] *) {
    line-height: 1.7 !important;
  }
  .lit-carousel .lit-scene-title:where(html[lang="en"], html[lang="en"] *) {
    font-size: clamp(19px, 4.5vw, 27px);
  }
  .lit-carousel .lit-dark:where(html[lang="en"], html[lang="en"] *) {
    padding: 50px 15px 16px;
  }
  .lit-carousel .lit-light:where(html[lang="en"], html[lang="en"] *) {
    padding: 17px 15px;
  }
  .lit-carousel .lit-utterance .lit-bubble:where(html[lang="en"], html[lang="en"] *) {
    font-size: 13px;
    padding: 8px 10px !important;
  }
  .lit-carousel #lit-slide-3 .lit-utterance .lit-person:where(html[lang="en"], html[lang="en"] *) {
    flex-basis: 58px !important;
  }
  .lit-carousel
    #lit-slide-3
    .lit-utterance
    .lit-person
    .lit-avatar:where(html[lang="en"], html[lang="en"] *) {
    width: 56px !important;
    height: 56px !important;
  }
  .lit-carousel #lit-slide-3 .lit-utterance .lit-bubble:where(html[lang="en"], html[lang="en"] *) {
    max-width: calc(100% - 66px) !important;
  }
  .lit-carousel .lit-light p:where(html[lang="en"], html[lang="en"] *) {
    font-size: 12px;
    line-height: 1.55;
  }
}

/* ==========================================================================
   60 · mai-en-unified-scene-layout · EN only
   ========================================================================== */
/* EN ONLY: equal-height folder cards; make the conversation compact rather than shrinking type. */
.lit-carousel
  .lit-slide:not(.lit-intro-slide)
  .lit-folder:where(html[lang="en"], html[lang="en"] *) {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.lit-carousel
  .lit-slide:not(.lit-intro-slide)
  .lit-folder
  .lit-dark:where(html[lang="en"], html[lang="en"] *) {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-top: clamp(54px, 6vw, 74px);
  padding-bottom: 18px;
}
.lit-carousel
  .lit-slide:not(.lit-intro-slide)
  .lit-scene:where(html[lang="en"], html[lang="en"] *) {
  margin-bottom: 9px;
}
.lit-carousel
  .lit-slide:not(.lit-intro-slide)
  .lit-context:where(html[lang="en"], html[lang="en"] *) {
  margin-bottom: 12px;
}
.lit-carousel
  .lit-slide:not(.lit-intro-slide)
  .lit-dark
  .lit-dialog:where(html[lang="en"], html[lang="en"] *),
.lit-carousel
  .lit-slide:not(.lit-intro-slide)
  .lit-dark
  .lit-dialog.lit-reply:where(html[lang="en"], html[lang="en"] *) {
  margin-top: 5px !important;
  margin-bottom: 0 !important;
}
/* Group dialogue in the central band of each equal-height dark panel. */
.lit-carousel
  #lit-slide-1
  .lit-dark
  .lit-dialog:first-of-type:where(html[lang="en"], html[lang="en"] *),
.lit-carousel
  #lit-slide-2
  .lit-dark
  .lit-dialog:first-of-type:where(html[lang="en"], html[lang="en"] *) {
  margin-top: auto !important;
}
.lit-carousel
  #lit-slide-1
  .lit-dark
  .lit-dialog:last-child:where(html[lang="en"], html[lang="en"] *),
.lit-carousel
  #lit-slide-2
  .lit-dark
  .lit-dialog:last-child:where(html[lang="en"], html[lang="en"] *) {
  margin-bottom: auto !important;
}
/* Smaller silhouettes on every English scene, not only scene 03. */
.lit-carousel
  .lit-slide:not(.lit-intro-slide)
  .lit-utterance
  .lit-person:where(html[lang="en"], html[lang="en"] *) {
  flex: 0 0 clamp(72px, 8vw, 104px) !important;
  gap: 2px !important;
}
.lit-carousel
  .lit-slide:not(.lit-intro-slide)
  .lit-utterance
  .lit-person
  .lit-avatar:where(html[lang="en"], html[lang="en"] *) {
  width: clamp(70px, 7.7vw, 100px) !important;
  height: clamp(70px, 7.7vw, 100px) !important;
}
.lit-carousel
  .lit-slide:not(.lit-intro-slide)
  .lit-utterance
  .lit-bubble:where(html[lang="en"], html[lang="en"] *) {
  max-width: calc(100% - clamp(84px, 9vw, 116px)) !important;
}
.lit-carousel
  .lit-slide:not(.lit-intro-slide)
  .lit-light:where(html[lang="en"], html[lang="en"] *) {
  flex: 0 0 auto;
  padding-top: 17px;
  padding-bottom: 19px;
}
.lit-carousel
  .lit-slide:not(.lit-intro-slide)
  .lit-light
  h3:where(html[lang="en"], html[lang="en"] *) {
  margin-bottom: 8px;
}
/* Second editor line in scene 03 continues the same speaker: no repeated avatar. */
.lit-carousel #lit-slide-3 .lit-dialog.lit-continuation:where(html[lang="en"], html[lang="en"] *) {
  margin-top: 4px !important;
}
.lit-carousel
  #lit-slide-3
  .lit-continuation
  .lit-utterance:where(html[lang="en"], html[lang="en"] *) {
  padding-left: clamp(84px, 9vw, 116px);
}
.lit-carousel #lit-slide-3 .lit-continuation .lit-bubble:where(html[lang="en"], html[lang="en"] *) {
  max-width: 100% !important;
}
.lit-carousel
  #lit-slide-3
  .lit-continuation
  .lit-bubble:where(html[lang="en"], html[lang="en"] *):before {
  content: none !important;
}
@media (max-width: 750px) {
  .lit-carousel
    .lit-slide:not(.lit-intro-slide)
    .lit-folder
    .lit-dark:where(html[lang="en"], html[lang="en"] *) {
    padding-top: 46px;
    padding-bottom: 12px;
  }
  .lit-carousel
    .lit-slide:not(.lit-intro-slide)
    .lit-utterance
    .lit-person:where(html[lang="en"], html[lang="en"] *) {
    flex-basis: clamp(54px, 16vw, 76px) !important;
  }
  .lit-carousel
    .lit-slide:not(.lit-intro-slide)
    .lit-utterance
    .lit-person
    .lit-avatar:where(html[lang="en"], html[lang="en"] *) {
    width: clamp(52px, 15vw, 72px) !important;
    height: clamp(52px, 15vw, 72px) !important;
  }
  .lit-carousel
    .lit-slide:not(.lit-intro-slide)
    .lit-utterance
    .lit-bubble:where(html[lang="en"], html[lang="en"] *) {
    max-width: calc(100% - clamp(62px, 18vw, 86px)) !important;
  }
  .lit-carousel
    #lit-slide-3
    .lit-continuation
    .lit-utterance:where(html[lang="en"], html[lang="en"] *) {
    padding-left: clamp(62px, 18vw, 86px);
  }
  .lit-carousel
    .lit-slide:not(.lit-intro-slide)
    .lit-light:where(html[lang="en"], html[lang="en"] *) {
    padding-top: 15px;
    padding-bottom: 16px;
  }
}

/* ==========================================================================
   61 · mai-en-scene-01-02-balance · EN only
   ========================================================================== */
/* English scenes 01/02 only. Preserve all three folder dimensions. */
@media (min-width: 751px) {
  /* Two lines of dialogue: give scene 01 stronger visual presence. */
  .lit-carousel #lit-slide-1 .lit-utterance .lit-person:where(html[lang="en"], html[lang="en"] *) {
    flex: 0 0 clamp(102px, 11vw, 140px) !important;
  }
  .lit-carousel
    #lit-slide-1
    .lit-utterance
    .lit-person
    .lit-avatar:where(html[lang="en"], html[lang="en"] *) {
    width: clamp(100px, 10.5vw, 136px) !important;
    height: clamp(100px, 10.5vw, 136px) !important;
  }
  .lit-carousel #lit-slide-1 .lit-utterance .lit-bubble:where(html[lang="en"], html[lang="en"] *) {
    max-width: calc(100% - clamp(116px, 12vw, 156px)) !important;
    font-size: clamp(15px, 1.7vw, 20px) !important;
    padding: 13px 18px !important;
  }
  /* Three lines of dialogue: keep scene 02's sizes, open up the rhythm. */
  .lit-carousel #lit-slide-2 .lit-dark .lit-dialog:where(html[lang="en"], html[lang="en"] *),
  .lit-carousel
    #lit-slide-2
    .lit-dark
    .lit-dialog.lit-reply:where(html[lang="en"], html[lang="en"] *) {
    margin-top: 18px !important;
  }
}
@media (max-width: 750px) {
  .lit-carousel #lit-slide-1 .lit-utterance .lit-person:where(html[lang="en"], html[lang="en"] *) {
    flex-basis: clamp(66px, 19vw, 88px) !important;
  }
  .lit-carousel
    #lit-slide-1
    .lit-utterance
    .lit-person
    .lit-avatar:where(html[lang="en"], html[lang="en"] *) {
    width: clamp(64px, 18vw, 84px) !important;
    height: clamp(64px, 18vw, 84px) !important;
  }
  .lit-carousel #lit-slide-1 .lit-utterance .lit-bubble:where(html[lang="en"], html[lang="en"] *) {
    max-width: calc(100% - clamp(76px, 21vw, 100px)) !important;
    font-size: 14px !important;
    padding: 10px 12px !important;
  }
  .lit-carousel #lit-slide-2 .lit-dark .lit-dialog:where(html[lang="en"], html[lang="en"] *),
  .lit-carousel
    #lit-slide-2
    .lit-dark
    .lit-dialog.lit-reply:where(html[lang="en"], html[lang="en"] *) {
    margin-top: 12px !important;
  }
}

/* ==========================================================================
   62 · mai-en-final-three-scene-grid · EN only
   ========================================================================== */
/* EN only: identical folder geometry, aligned scene headings, evenly distributed dialogue. */
/* Match the question heading's desktop typography and enforce the approved three lines. */
.lit-carousel .lit-intro-slide h2.display:where(html[lang="en"], html[lang="en"] *) {
  font-size: clamp(42px, 6.7vw, 91px) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.065em !important;
}
.lit-carousel .lit-intro-slide h2.display > span:where(html[lang="en"], html[lang="en"] *) {
  display: block !important;
}
/* All three slides share the same stretched card height (existing flex track). */
.lit-carousel .lit-slides:where(html[lang="en"], html[lang="en"] *) {
  align-items: stretch !important;
}
.lit-carousel .lit-slide:not(.lit-intro-slide):where(html[lang="en"], html[lang="en"] *) {
  align-self: stretch !important;
}
.lit-carousel
  .lit-slide:not(.lit-intro-slide)
  .lit-folder:where(html[lang="en"], html[lang="en"] *) {
  flex: 1 1 auto !important;
  min-height: 0;
  display: flex !important;
  flex-direction: column !important;
}
.lit-carousel
  .lit-slide:not(.lit-intro-slide)
  .lit-folder
  .lit-dark:where(html[lang="en"], html[lang="en"] *) {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0;
}
/* The title and explanatory context occupy one consistent-height header band. */
.lit-carousel
  .lit-slide:not(.lit-intro-slide)
  .lit-scene:where(html[lang="en"], html[lang="en"] *) {
  flex: 0 0 auto;
  margin-bottom: 9px !important;
}
.lit-carousel
  .lit-slide:not(.lit-intro-slide)
  .lit-context:where(html[lang="en"], html[lang="en"] *) {
  flex: 0 0 auto;
  min-height: 3em;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* Conversation fills available black area; all utterances have equal vertical spacing. */
.lit-carousel
  .lit-slide:not(.lit-intro-slide)
  .lit-conversation:where(html[lang="en"], html[lang="en"] *) {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  flex: 1 1 auto;
  min-height: 0;
  padding: 8px 0;
}
.lit-carousel
  .lit-slide:not(.lit-intro-slide)
  .lit-conversation
  > .lit-dialog:where(html[lang="en"], html[lang="en"] *),
.lit-carousel
  .lit-slide:not(.lit-intro-slide)
  .lit-conversation
  > .lit-dialog.lit-reply:where(html[lang="en"], html[lang="en"] *),
.lit-carousel
  .lit-slide:not(.lit-intro-slide)
  .lit-conversation
  > .lit-dialog.lit-continuation:where(html[lang="en"], html[lang="en"] *) {
  flex: 0 0 auto;
  margin: 0 !important;
}
/* Remove previous auto-centering on scenes 01/02: the conversation now owns spacing. */
.lit-carousel
  #lit-slide-1
  .lit-conversation
  > .lit-dialog:first-of-type:where(html[lang="en"], html[lang="en"] *),
.lit-carousel
  #lit-slide-2
  .lit-conversation
  > .lit-dialog:first-of-type:where(html[lang="en"], html[lang="en"] *) {
  margin: 0 !important;
}
.lit-carousel
  #lit-slide-1
  .lit-conversation
  > .lit-dialog:last-child:where(html[lang="en"], html[lang="en"] *),
.lit-carousel
  #lit-slide-2
  .lit-conversation
  > .lit-dialog:last-child:where(html[lang="en"], html[lang="en"] *) {
  margin: 0 !important;
}
/* Keep the approved per-scene silhouette/bubble scale, and scene 03's avatar-less continuation. */
@media (max-width: 750px) {
  .lit-carousel .lit-intro-slide h2.display:where(html[lang="en"], html[lang="en"] *) {
    font-size: clamp(29px, 7.3vw, 53px) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.06em !important;
  }
  .lit-carousel
    .lit-slide:not(.lit-intro-slide)
    .lit-context:where(html[lang="en"], html[lang="en"] *) {
    min-height: 4.2em;
  }
  .lit-carousel
    .lit-slide:not(.lit-intro-slide)
    .lit-conversation:where(html[lang="en"], html[lang="en"] *) {
    padding: 6px 0;
  }
}

/* ==========================================================================
   63 · usability-features-en · EN only
   ========================================================================== */
/* New usability item only; existing basic-spec rows and all other sections are unchanged. */
#technology .specs .usability-features:where(html[lang="en"], html[lang="en"] *) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  margin-top: 16px;
  font-size: clamp(12px, 1.02vw, 14px);
  line-height: 1.95;
  font-weight: 400;
  color: #41413e;
}
#technology .specs .usability-features .usability-item:where(html[lang="en"], html[lang="en"] *) {
  display: inline;
  white-space: normal;
}
#technology
  .specs
  .usability-features
  .usability-item:not(:last-child):where(html[lang="en"], html[lang="en"] *)::after {
  content: "／";
  color: #e4007f;
  padding: 0 0.55em;
  font-weight: 600;
}
@media (max-width: 750px) {
  #technology .specs .usability-features:where(html[lang="en"], html[lang="en"] *) {
    font-size: 13px;
    line-height: 1.9;
    gap: 4px 0;
  }
}

/* ==========================================================================
   64 · usability-mobile-bullets-20261105 · EN only
   ========================================================================== */
/* Mobile usability list only: pink leading bullet, one feature per line. */
@media (max-width: 750px) {
  #technology .specs .usability-features:where(html[lang="en"], html[lang="en"] *) {
    display: block;
  }
  #technology .specs .usability-features .usability-item:where(html[lang="en"], html[lang="en"] *) {
    display: block;
    padding-left: 1.1em;
    position: relative;
  }
  #technology
    .specs
    .usability-features
    .usability-item:where(html[lang="en"], html[lang="en"] *)::before {
    content: "・";
    color: #e4007f;
    position: absolute;
    left: 0;
    font-weight: 600;
  }
  #technology
    .specs
    .usability-features
    .usability-item:not(:last-child):where(html[lang="en"], html[lang="en"] *)::after {
    content: none;
  }
}

/* ==========================================================================
   65 · english-hero-two-line-copy · EN only
   ========================================================================== */
.hero-statement .hero-copy-line:where(html[lang="en"], html[lang="en"] *) {
  display: block !important;
  white-space: nowrap !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
}
.hero-statement:where(html[lang="en"], html[lang="en"] *) {
  font-size: clamp(20px, 2.4vw, 36px) !important;
}
@media (max-width: 750px) {
  .hero-statement:where(html[lang="en"], html[lang="en"] *) {
    font-size: clamp(17px, 4.25vw, 25px) !important;
  }
}

/* ==========================================================================
   66 · english-hero-desktop-no-overlap-20261105 · EN only
   ========================================================================== */
@media (min-width: 751px) {
  html[lang="en"]
    body
    main
    section#top.hero
    .page
    > h2.hero-statement:where(html[lang="en"], html[lang="en"] *) {
    font-size: clamp(16px, 1.95vw, 30px) !important;
    width: 53% !important;
    max-width: 53% !important;
    line-height: 1.3 !important;
  }
  html[lang="en"]
    body
    main
    section#top.hero
    .page
    > h2.hero-statement
    > .hero-copy-line:where(html[lang="en"], html[lang="en"] *) {
    display: block !important;
    white-space: nowrap !important;
  }
}

/* ==========================================================================
   67 · mai-en-hero-desktop-20261105-final · EN only
   ========================================================================== */
@media screen and (min-width: 751px) {
  html[lang="en"]
    body
    main
    section#top.hero
    .page
    > h2.hero-statement:where(html[lang="en"], html[lang="en"] *) {
    font-size: clamp(35px, 2.6vw, 42px) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.045em !important;
    width: 56% !important;
    max-width: 56% !important;
  }
  html[lang="en"]
    body
    main
    section#top.hero
    .page
    > img.hero-art:where(html[lang="en"], html[lang="en"] *) {
    width: 36% !important;
    max-width: 430px !important;
  }
}

/* ==========================================================================
   68 · mai-en-desktop-hero-statement-size-20261105 · EN only
   ========================================================================== */
/* English desktop hero statement only; preserve mobile and photo positioning. */
@media screen and (min-width: 751px) {
  html[lang="en"]
    body
    main
    section#top.hero
    .page
    > h2.hero-statement:where(html[lang="en"], html[lang="en"] *) {
    font-size: clamp(35px, 3.15vw, 48px) !important;
    line-height: 1.27 !important;
  }
}

/* ==========================================================================
   69 · mai-en-mobile-story-heading-overflow-fix-20261105 · EN only
   ========================================================================== */
/* English mobile: keep the opening headline within its own carousel slide. */
@media screen and (max-width: 750px) {
  .lit-carousel .lit-intro-slide h2.display > span:where(html[lang="en"], html[lang="en"] *) {
    white-space: normal !important;
    overflow-wrap: normal;
  }
  .lit-carousel .lit-intro-slide h2.display em.pink:where(html[lang="en"], html[lang="en"] *) {
    white-space: normal !important;
    overflow-wrap: break-word;
  }
}

/* ==========================================================================
   70 · en-hero-small-phone-fit-20261105 · EN only
   ========================================================================== */
/* EN hero headline: keep 29px from 375px up, scale down on narrower phones (e.g. 320px) to avoid overflow. */
@media screen and (max-width: 750px) {
  html[lang="en"]
    body
    main
    section#top.hero
    .page
    > h2.hero-statement:where(html[lang="en"], html[lang="en"] *) {
    font-size: clamp(23px, 7.8vw, 29px) !important;
  }
}

/* ==========================================================================
   71 · heroine-and-mobile-art-controls
   ========================================================================== */
/* Heroine title: distinct scale between the main wordmark and body subheading. */
html body main section.hero .page h2.hero-statement {
  font-size: clamp(27px, 2.6vw, 39px) !important;
  font-weight: 900 !important;
  line-height: 1.38 !important;
  letter-spacing: -0.035em !important;
  -webkit-text-stroke: 0.5px currentColor !important;
}
html body main section.hero .page h2.hero-statement > span {
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}
/* The i stem is a drawn shape, not a font glyph; give it matching optical mass. */
html body .hero-title .hero-i-stem {
  width: 0.145em !important;
  left: 0.022em !important;
  height: 0.49em !important;
}
@media (max-width: 750px) {
  html body main section.hero .page h2.hero-statement {
    font-size: clamp(21px, 5.8vw, 29px) !important;
    line-height: 1.43 !important;
  }
  html body .hero img.hero-art {
    width: var(--hero-art-mobile-size, 170px) !important;
    transform: translate(var(--hero-art-mobile-x, 0px), var(--hero-art-mobile-y, 0px)) !important;
    right: 0 !important;
  }
}
.mobile-art-editor {
  position: fixed;
  right: 15px;
  bottom: 15px;
  z-index: 9999;
  width: min(315px, calc(100vw - 30px));
  padding: 15px;
  background: #fff;
  border: 2px solid #111;
  box-shadow: 5px 5px 0 #111;
  font:
    13px/1.5 Arial,
    sans-serif;
  color: #111;
}
.mobile-art-editor h3 {
  font:
    800 15px Arial,
    sans-serif;
  margin: 0 0 8px;
}
.mobile-art-editor label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 7px;
  font-weight: 700;
}
.mobile-art-editor input[type="range"] {
  width: 100%;
  accent-color: #f03583;
}
.mobile-art-editor button {
  cursor: pointer;
  background: #111;
  color: #fff;
  border: 0;
  padding: 8px 10px;
  font-weight: 700;
  margin-top: 9px;
}
.mobile-art-editor .close-editor {
  float: right;
  background: none;
  color: #111;
  padding: 0;
  margin: 0;
  font-size: 17px;
}
.mobile-art-editor p {
  margin: 5px 0;
  font-size: 11px;
}
@media (min-width: 751px) {
  .mobile-art-editor {
    display: none;
  }
}

/* ==========================================================================
   72 · mobile-only-heroine-and-i-fix
   ========================================================================== */
@media screen and (max-width: 750px) {
  /* Heroine title: deliberately larger than the ordinary subheading. */
  html body main section.hero div.page > h2.hero-statement {
    font-size: clamp(25px, 7vw, 29px) !important;
    font-weight: 900 !important;
    line-height: 1.43 !important;
    letter-spacing: -0.035em !important;
    -webkit-text-stroke: 0.5px currentColor !important;
  }
  html body main section.hero div.page > h2.hero-statement > span {
    font-size: inherit !important;
    font-weight: 900 !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    -webkit-text-stroke: inherit !important;
  }
  /* i stem: thicker optical weight to match the bold Ma wordmark. */
  html body main section.hero div.page > h1.hero-title .hero-i .hero-i-stem {
    width: 0.18em !important;
    left: 0.012em !important;
    height: 0.49em !important;
    background: var(--ink) !important;
  }
}

/* ==========================================================================
   73 · mai-mobile-hero-event-and-art
   ========================================================================== */
.event-mobile {
  display: none;
}
@media screen and (max-width: 750px) {
  html body main section.hero .page .event {
    max-width: none !important;
    white-space: nowrap !important;
    font-size: clamp(9px, 2.65vw, 11px) !important;
    letter-spacing: -0.025em !important;
    padding: 9px 11px !important;
  }
  html body main section.hero .page .event .event-desktop {
    display: none !important;
  }
  html body main section.hero .page .event .event-mobile {
    display: inline !important;
  }
  /* Illustration sits between the descriptor and heroine statement in the normal document flow. */
  html body main section.hero .page > img.hero-art {
    display: block !important;
    position: relative !important;
    width: min(108vw, 470px) !important;
    max-width: none !important;
    height: auto !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    margin: 12px 0 22px !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1 !important;
  }
  html body main section.hero .page > p.hero-desc {
    margin-bottom: 0 !important;
  }
  html body main section.hero .page > h2.hero-statement {
    position: relative !important;
    z-index: 2 !important;
  }
}

/* ==========================================================================
   74 · mai-hero-photo-fit-next-to-copy
   ========================================================================== */
/* Desktop: fit the real photo in the right-hand space beside the hero statement.
   Mobile retains the established stacked arrangement. */
@media (min-width: 751px) {
  html body main section.hero .page > img.hero-art {
    position: absolute !important;
    display: block !important;
    width: min(43%, 510px) !important;
    max-width: 510px !important;
    height: auto !important;
    left: auto !important;
    right: 0 !important;
    top: var(--mai-hero-photo-top, 60%) !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    opacity: 1 !important;
    object-fit: contain !important;
    border-radius: 8px !important;
  }
  html body main section.hero .page > h2.hero-statement,
  html body main section.hero .page > p.hero-english {
    max-width: 54% !important;
  }
}

/* ==========================================================================
   75 · mai-mobile-visual-correction-20261023
   ========================================================================== */
@media screen and (max-width: 750px) {
  /* Hero: fit inside the requested inset rectangle without cropping or stretching. */
  html body main section.hero .page > img.hero-art {
    display: block !important;
    position: relative !important;
    box-sizing: border-box !important;
    width: calc(100vw - 30px) !important;
    max-width: calc(100vw - 30px) !important;
    height: auto !important;
    aspect-ratio: auto 1280 / 960 !important;
    object-fit: contain !important;
    object-position: center center !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    margin: 12px 0 22px !important;
  }
  /* Mobile Philosophy: keep the shared kicker-to-heading spacing; fit art in the upper inset. */
  html body main section.philosophy .page {
    position: relative !important;
    overflow: visible !important;
  }
  html body main section.philosophy .page > .kicker {
    padding-right: calc(90px + 24px);
  }
  html body main section.philosophy .bodyrow {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    margin-top: 60px !important;
  }
  html body main section.philosophy .bodyrow > .copy {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  html body main section.philosophy .bodyrow > img.philosophy-illustration {
    position: absolute !important;
    top: -88px !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    width: 90px !important;
    max-width: 90px !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
    object-fit: contain !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }
  html body main section.philosophy h2.display {
    position: relative !important;
    z-index: 2 !important;
  }
}

/* ==========================================================================
   76
   ========================================================================== */
/* Bilingual hero accents and language switch */
.lang-switch {
  position: fixed;
  top: 14px;
  right: clamp(14px, 3vw, 44px);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 11px;
  border-radius: 30px;
  background: rgba(247, 246, 241, 0.94);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.06em;
}
.lang-switch a {
  color: #232321;
  text-decoration: none;
  transition: color 0.15s ease;
}
.lang-switch a.is-active,
.lang-switch a:hover {
  color: #e4007f;
}
.lang-switch .lang-divider {
  color: #999;
}
.hero-accent {
  color: #e4007f !important;
}
.hero-statement .hero-line {
  display: block;
}
html[lang="en"] .hero-statement .en-jp-sub {
  color: #232321 !important;
}
@media (max-width: 600px) {
  .lang-switch {
    top: 9px;
    right: 10px;
    padding: 6px 9px;
    font-size: 11px;
    gap: 7px;
  }
}

/* ==========================================================================
   77 · mai-final-mobile-headline-optical-weight · EN only
   ========================================================================== */
/* Small optical weight correction for the English mobile HERO headline only. */
@media screen and (max-width: 750px) {
  html[lang="en"]
    body
    main
    section#top.hero
    .page
    > h2.hero-statement:where(html[lang="en"], html[lang="en"] *) {
    -webkit-text-stroke: 0.7px currentColor !important;
  }
  html[lang="en"]
    body
    main
    section#top.hero
    .page
    > h2.hero-statement
    > .mai-pink:where(html[lang="en"], html[lang="en"] *) {
    -webkit-text-stroke: 0.2px #e4007f !important;
  }
}

/* ==========================================================================
   Blurred low-res placeholders shown behind the photos while they load.
   Regenerate if hero-*.webp / lab-*.webp are replaced.
   ========================================================================== */
img.hero-art {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18' preserveAspectRatio='xMidYMid slice'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='1'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cimage width='24' height='18' filter='url(%23b)' href='data:image/webp;base64,UklGRuAAAABXRUJQVlA4INQAAAAwBgCdASoYABIAPwF2slOrJySiqAgBYCAJYgC7M2iBXf/7pANmYKw/JoYp2kdCqnEQFs5ahSXowhgAAP7dD3ZngDlGhQE1uP75Y+5q1UTpdIVPskZjodaoqyQUzFzVRnNes9N5iM/I6Ii1v88MBHFcHfUJR+0K4gLKLzPc4HszCRdb1wJI3WMmTdvUVsqCMQMNtFCGlDQaksy533XtU0QN01BYdsmuoBsOZWb+tYN0V272kilGH1HnAkw0s3A7OraLilWEeuiiyjzbsxLdK65YBAAAAA=='/%3E%3C/svg%3E")
    center / cover no-repeat;
}
img.lab-art {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16' preserveAspectRatio='xMidYMid slice'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='1'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cimage width='24' height='16' filter='url(%23b)' href='data:image/webp;base64,UklGRpgAAABXRUJQVlA4IIwAAAAQBACdASoYABAAPwFqrE8rJiQiMAgBYCAJZgCdAB07DT5C9R+Gg4Ox6AD6/likYopqwLbgt0Qa8dkX/SPcENi+whzcmBLO8sciajUYkUuZU/xq3b+msy4XV0RKBH0eHZ7773023x+LvlEEEwg+T/crTJZTQrHanbNxzlg2YqZw7GuL7VG6M7gCtSpAAA=='/%3E%3C/svg%3E")
    center / cover no-repeat;
}