/* PlanTo case study — project-level identity derived from the portfolio system. */
.is-planto-detail {
  --planto-paper: #f7f8f5;
  --planto-paper-deep: #eff3ef;
  --planto-mint: #e4eee9;
  --planto-sage: #b6d4c8;
  --planto-forest: #30534e;
  --planto-ink: #202c2a;
  --planto-muted: #6e7b77;
  --planto-line: rgba(48, 83, 78, .16);
  --planto-content: 1240px;
  overflow-x: clip;
  background: var(--planto-paper);
  color: var(--planto-ink);
  font-family: "Helvetica Neue", "Noto Sans JP", "Avenir Next", Arial, sans-serif;
}

.is-planto-detail .project-header {
  position: fixed;
  z-index: 100;
  top: 20px;
  left: clamp(18px, 3.4vw, 56px);
  right: clamp(18px, 3.4vw, 56px);
  display: grid;
  grid-template-columns: auto minmax(28px, 1fr) auto;
  align-items: center;
  gap: clamp(18px, 2vw, 34px);
  padding: 11px 14px;
  border: 1px solid rgba(76, 101, 94, .18);
  border-radius: 18px;
  background: rgba(247, 248, 245, .72);
  box-shadow: inset 0 1px rgba(255, 255, 255, .8), 0 12px 42px rgba(47, 71, 65, .045);
  backdrop-filter: blur(18px) saturate(.94);
  -webkit-backdrop-filter: blur(18px) saturate(.94);
}

.is-planto-detail .project-header .wordmark {
  grid-column: 1;
  padding: 7px 6px;
  color: var(--planto-ink);
  font: 600 10px/1 "Space Grotesk", sans-serif;
  letter-spacing: .15em;
}

.is-planto-detail .project-header .wordmark span {
  margin-left: 9px;
  color: rgba(32, 44, 42, .43);
  font-size: 8px;
}

.is-planto-detail .project-header-rule {
  width: 100%;
  height: 1px;
  background: var(--planto-line);
}

.is-planto-detail .project-header .project-return {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px 6px 10px;
  border: 0;
  color: var(--planto-forest);
  font: 600 9px/1 "Space Grotesk", sans-serif;
  letter-spacing: .14em;
  background: transparent;
  box-shadow: none;
}

.is-planto-detail .project-header .project-return i {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--planto-line);
  border-radius: 50%;
  background: rgba(255, 255, 255, .28);
  font-style: normal;
  font-size: 12px;
  transition: transform 260ms var(--ease-out), border-color 260ms ease;
}

.is-planto-detail .project-header .project-return:hover { transform: none; background: transparent; box-shadow: none; }
.is-planto-detail .project-header .project-return:hover i { transform: translate(2px, -2px); border-color: rgba(48, 83, 78, .34); }

.is-planto-detail #project-content {
  max-width: none;
  margin: 0;
  padding: 0;
  background:
    linear-gradient(to right, transparent calc(100% - 1px), rgba(48, 83, 78, .035) 1px) 0 0 / 20vw 100%,
    var(--planto-paper);
}

.planto-shell {
  position: relative;
  display: grid;
  width: min(93vw, 1510px);
  margin: 0 auto;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: clamp(46px, 5vw, 82px);
  justify-content: center;
}

.planto-case { position: relative; z-index: 1; width: 100%; max-width: var(--planto-content); min-width: 0; padding: 136px 0 84px; }
.planto-case :lang(ja) {
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
  text-wrap: pretty;
}
.planto-lines > span { display: block; }
.planto-section { position: relative; scroll-margin-top: 118px; }
.planto-section + .planto-section { margin-top: clamp(132px, 13vw, 184px); }

.planto-chapter-nav { position: relative; z-index: 20; }
.planto-chapter-nav-inner {
  position: sticky;
  top: 116px;
  display: flex;
  max-height: calc(100svh - 148px);
  flex-direction: column;
  padding-top: 3px;
}

.planto-chapter-nav p { margin: 0 0 28px; }
.planto-chapter-nav p b,
.planto-chapter-nav p span { display: block; }
.planto-chapter-nav p b { font: 600 11px/1 "Space Grotesk", sans-serif; letter-spacing: .17em; }
.planto-chapter-nav p span { margin-top: 7px; color: rgba(32, 44, 42, .42); font: 500 8px/1 "Space Grotesk", sans-serif; letter-spacing: .2em; }
.planto-chapter-nav nav { display: grid; gap: 3px; }
.planto-chapter-nav nav a {
  position: relative;
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: baseline;
  min-height: 29px;
  padding: 7px 0 7px 11px;
  color: rgba(32, 44, 42, .38);
  font: 500 9px/1.4 "Space Grotesk", sans-serif;
  letter-spacing: .035em;
  transition: color 220ms ease, transform 220ms ease;
}
.planto-chapter-nav nav a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--planto-forest);
  transform: scaleY(0);
  transition: transform 220ms ease;
}
.planto-chapter-nav nav a span { font-size: 7px; opacity: .62; }
.planto-chapter-nav nav a:hover,
.planto-chapter-nav nav a:focus-visible,
.planto-chapter-nav nav a.is-active { color: var(--planto-ink); transform: translateX(3px); }
.planto-chapter-nav nav a.is-active::before { transform: scaleY(1); }
.planto-chapter-nav nav a:focus-visible { outline: 1px solid var(--planto-forest); outline-offset: 3px; }

.planto-reading-progress {
  position: relative;
  width: 1px;
  height: clamp(64px, 10vh, 112px);
  margin: 24px 0 0 11px;
  background: rgba(48, 83, 78, .14);
}
.planto-reading-progress span {
  position: absolute;
  inset: 0;
  background: var(--planto-forest);
  transform: scaleY(0);
  transform-origin: top;
  will-change: transform;
}
.planto-reading-progress i {
  position: absolute;
  left: -3px;
  bottom: -7px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--planto-forest);
  border-radius: 50%;
  background: var(--planto-paper);
}

.planto-mobile-progress { display: none; }

.planto-kicker,
.planto-eyebrow {
  margin: 0 0 28px;
  color: rgba(48, 83, 78, .66);
  font: 600 clamp(9px, .75vw, 11px)/1.3 "Space Grotesk", sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.planto-section-heading { max-width: 760px; margin-bottom: clamp(42px, 5vw, 68px); }
.planto-section-heading--narrow { max-width: 820px; }
.planto-section-heading h2,
.planto-product-decision h2,
.planto-editorial-pause h2,
.planto-pipeline-block h2,
.planto-animation-pool h2,
.planto-closing h2 {
  margin: 0;
  font: 500 clamp(44px, 6.2vw, 82px)/.98 "Space Grotesk", "Noto Sans JP", sans-serif;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.planto-section-heading h3 {
  margin: 26px 0 0;
  color: var(--planto-forest);
  font-size: clamp(18px, 2vw, 27px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .02em;
}
.planto-body-copy,
.planto-copy-column p,
.planto-product-decision header p,
.planto-editorial-pause p,
.planto-pipeline-block header p,
.planto-animation-pool header p,
.planto-closing-copy p {
  max-width: 29em;
  margin: 28px 0 0;
  color: var(--planto-muted);
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.85;
  text-wrap: balance;
}

.planto-hero { min-height: calc(100svh - 48px); }
.planto-hero-copy { position: relative; z-index: 1; margin-bottom: clamp(56px, 7vw, 94px); }
.planto-hero h1 {
  margin: 0;
  line-height: 0;
}
.planto-hero-logo {
  display: block;
  width: auto;
  height: clamp(82px, 8.7vw, 116px);
  max-width: 100%;
  margin-left: -18px;
  object-fit: contain;
  object-position: left center;
  mix-blend-mode: multiply;
}
.planto-hero-subtitle { margin: 38px 0 0; color: var(--planto-forest); font-size: clamp(19px, 2vw, 29px); font-weight: 500; letter-spacing: .05em; }
.planto-hero-statement { max-width: 760px; margin: 40px 0 0; font: 500 clamp(32px, 4.2vw, 58px)/1.08 "Space Grotesk", sans-serif; letter-spacing: -.045em; text-wrap: balance; }
.planto-hero-description { max-width: 610px; margin: 26px 0 0; color: var(--planto-muted); font-size: clamp(13px, 1.1vw, 16px); line-height: 1.85; }

.planto-media { min-width: 0; margin: 0; }
.planto-media > img,
.planto-media > video,
.planto-placeholder {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--media-ratio);
  border: 1px solid rgba(48, 83, 78, .11);
  border-radius: 6px;
  object-fit: cover;
}
.planto-media > .planto-video-mobile-fallback { display: none; }
.planto-media--contain > img {
  object-fit: contain;
  background: rgba(244, 246, 242, .82);
}
.planto-placeholder {
  display: grid;
  min-height: 140px;
  place-content: center;
  padding: clamp(20px, 3vw, 44px);
  color: var(--planto-ink);
  text-align: center;
}
.planto-media--hero .planto-placeholder { background: #cfddd5; }
.planto-media--product .planto-placeholder { background: #dfe6e2; }
.planto-media--hardware .planto-placeholder { background: #d9e1df; }
.planto-media--character .planto-placeholder { background: #e4eee9; }
.planto-media--app .planto-placeholder { background: #e1e8e9; }
.planto-media--research .planto-placeholder { background: #ecefeb; }
.planto-media--brand .planto-placeholder { background: #eeeae0; }
.planto-placeholder-id { display: block; margin-bottom: 16px; color: rgba(32, 44, 42, .5); font: 600 9px/1 "Space Grotesk", monospace; letter-spacing: .17em; }
.planto-placeholder strong { display: block; font: 500 clamp(15px, 1.5vw, 21px)/1.3 "Space Grotesk", sans-serif; letter-spacing: -.02em; }
.planto-placeholder p { max-width: 360px; margin: 11px auto 0; color: rgba(32, 44, 42, .6); font-size: clamp(10px, .9vw, 13px); line-height: 1.65; }
.planto-placeholder small { display: block; margin-top: 15px; color: rgba(32, 44, 42, .4); font: 500 8px/1 "Space Grotesk", sans-serif; letter-spacing: .16em; }
.planto-media figcaption { margin-top: 12px; color: rgba(32, 44, 42, .58); font: 550 clamp(9px, .72vw, 11px)/1.55 "Space Grotesk", "Noto Sans JP", sans-serif; letter-spacing: .08em; }
.planto-media-error { padding: 30px; border: 1px solid #b34; color: #b34; }

.planto-overview-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(260px, 4fr); gap: clamp(64px, 8vw, 128px); }
.planto-copy-column h3 { max-width: 650px; margin: 0; font-size: clamp(25px, 3.2vw, 42px); font-weight: 500; line-height: 1.4; letter-spacing: -.025em; }
.planto-metadata { margin: 0; border-top: 1px solid var(--planto-line); }
.planto-metadata div { display: grid; grid-template-columns: 94px 1fr; gap: 22px; padding: 14px 0; border-bottom: 1px solid var(--planto-line); }
.planto-metadata dt { color: rgba(48, 83, 78, .55); font: 600 8px/1.6 "Space Grotesk", sans-serif; letter-spacing: .13em; }
.planto-metadata dd { margin: 0; color: rgba(32, 44, 42, .78); font-size: 11px; line-height: 1.7; }
.planto-media-triptych { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); margin-top: clamp(60px, 8vw, 104px); }
.planto-overview-media > img { object-fit: cover; }
.planto-overview-media--hardware > img { object-position: center 48%; }
.planto-overview-media--character > img { object-position: center 43%; }
.planto-overview-media--app > img { object-position: center 50%; }

.planto-challenge .planto-section-heading--narrow { max-width: none; }
.planto-challenge .planto-statement { max-width: none; margin: 36px 0 0; font-size: clamp(27px, 3.4vw, 44px); font-weight: 500; line-height: 1.35; letter-spacing: -.03em; text-wrap: balance; }
.planto-challenge .planto-body-copy { max-width: 680px; }
.planto-compare { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(14px, 2.8vw, 44px); }
.planto-compare > div > p { margin: 17px 0 0; color: var(--planto-forest); font: 600 clamp(12px, 1vw, 15px)/1 "Space Grotesk", sans-serif; letter-spacing: .13em; }
.planto-compare > span { color: rgba(48, 83, 78, .6); font-size: 22px; }
.planto-challenge-media--numerical > img {
  box-sizing: border-box;
  padding-top: 7px;
  background: #b7baae;
  object-fit: contain;
  object-position: center center;
}
.planto-challenge blockquote { max-width: 820px; margin: clamp(64px, 8vw, 110px) 0 0 auto; padding: 0 0 0 28px; border-left: 1px solid var(--planto-forest); }
.planto-challenge blockquote p { margin: 0; font: 500 clamp(25px, 3.7vw, 49px)/1.2 "Space Grotesk", sans-serif; letter-spacing: -.035em; }
.planto-challenge blockquote small { display: block; margin-top: 21px; color: var(--planto-muted); font-size: clamp(13px, 1.15vw, 16px); font-weight: 500; line-height: 1.8; letter-spacing: .02em; }

.planto-experience {
  position: relative;
  isolation: isolate;
  margin-inline: 0;
  padding: clamp(100px, 10vw, 142px) 0;
  background: transparent;
}
.planto-experience::before,
.planto-ai::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: -3.5vw;
  bottom: 0;
  left: clamp(-46px, -3vw, -28px);
  background: var(--planto-mint);
  pointer-events: none;
}

@media (min-width: 1624px) {
  .planto-experience::before,
  .planto-ai::before { right: calc(755px - 50vw); }
}
.planto-experience .planto-section-heading { max-width: var(--planto-content); margin-inline: auto; }
.planto-storyboard { display: grid; max-width: var(--planto-content); margin: 0 auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.5vw, 38px); }
.planto-storyboard h3,
.planto-conditions h3 { margin: 24px 0 0; font: 600 10px/1.4 "Space Grotesk", sans-serif; letter-spacing: .15em; }
.planto-storyboard > div > p,
.planto-conditions > div > p { margin: 11px 0 0; color: var(--planto-muted); font-size: 13px; line-height: 1.75; text-wrap: balance; }

.planto-product > div + div,
.planto-engineering > div + div,
.planto-ai > div + div,
.planto-app > div + div,
.planto-research > div + div { margin-top: clamp(110px, 12vw, 170px); }
.planto-product-exploration { display: grid; grid-template-columns: minmax(320px, 5fr) minmax(0, 7fr); gap: clamp(44px, 7vw, 100px); align-items: center; }
.planto-concept-collage { display: grid; gap: clamp(14px, 1.8vw, 22px); }
.planto-concept-collage > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.planto-concept-alt > img { object-fit: cover; }
.planto-concept-alt--hanging > img { object-position: center 55%; }
.planto-product-decision header { max-width: 690px; margin: 0 0 clamp(46px, 6vw, 74px) auto; }
.planto-decision-grid { display: block; width: 100%; }
.planto-criteria { margin: 22px 0 0; color: rgba(48, 83, 78, .63); font: 600 9px/1 "Space Grotesk", sans-serif; letter-spacing: .18em; }
.planto-final-product-title { max-width: 820px; margin: 54px 0; }
.planto-final-product-title h2 { margin: 0; font: 500 clamp(34px, 5vw, 68px)/1.05 "Space Grotesk", sans-serif; letter-spacing: -.05em; }
.planto-final-product-title p { max-width: 35em; margin: 20px 0 0; color: var(--planto-muted); font-size: clamp(13px, 1.1vw, 16px); line-height: 1.8; }
.planto-media-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(15px, 2vw, 26px); margin-top: clamp(22px, 3vw, 38px); }
.planto-final-product .planto-media-pair { grid-template-columns: minmax(0, 1.421fr) minmax(0, 1fr); align-items: end; }

.planto-parts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; padding: 0; list-style: none; }
.planto-parts li { padding: 8px 0; border-bottom: 1px solid var(--planto-line); color: rgba(32, 44, 42, .7); font: 600 9px/1 "Space Grotesk", sans-serif; letter-spacing: .1em; }
.planto-hardware-gallery { display: grid; grid-template-columns: minmax(0, 8fr) minmax(260px, 4fr); gap: clamp(16px, 2vw, 28px); align-items: stretch; }
.planto-hardware-gallery > div { display: grid; gap: clamp(16px, 2vw, 28px); }
.planto-hardware-gallery > div > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.planto-hardware-gallery > .planto-media { display: grid; height: 100%; grid-template-rows: minmax(0, 1fr) auto; }
.planto-hardware-gallery > .planto-media > img { min-height: 0; height: 100%; }
.planto-hardware-gallery > .planto-media .planto-placeholder { height: 100%; }
.planto-editorial-pause { max-width: 720px; margin-left: auto; padding: clamp(64px, 8vw, 104px) 0 clamp(30px, 4vw, 60px); border-top: 1px solid var(--planto-line); }

.planto-ai {
  position: relative;
  isolation: isolate;
  margin-inline: 0;
  padding: clamp(106px, 11vw, 156px) 0;
  background: transparent;
}
.planto-ai > div { max-width: var(--planto-content); margin-inline: auto; }
.planto-character-states { margin-top: 22px; }
.planto-pipeline-block header { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 3vw, 44px); align-items: start; }
.planto-pipeline-block h2 { font-size: clamp(40px, 3.5vw, 48px); line-height: 1.03; letter-spacing: -.045em; }
.planto-pipeline-block header p { min-width: 0; max-width: 29em; margin: 7px 0 0; font-size: clamp(14px, 1.05vw, 16px); }
.planto-pipeline { display: grid; margin: 64px 0 0; padding: 0; grid-template-columns: repeat(6, minmax(0, 1fr)); list-style: none; }
.planto-pipeline li { position: relative; display: grid; min-height: 112px; align-content: center; padding: 20px 18px; border: 1px solid rgba(48, 83, 78, .24); border-right: 0; background: rgba(247, 248, 245, .38); }
.planto-pipeline li:last-child { border-right: 1px solid rgba(48, 83, 78, .24); }
.planto-pipeline li:not(:last-child)::after { content: "→"; position: absolute; z-index: 2; top: 50%; right: -8px; color: var(--planto-forest); transform: translateY(-50%); }
.planto-pipeline span { color: rgba(48, 83, 78, .5); font: 600 8px/1 "Space Grotesk", sans-serif; letter-spacing: .13em; }
.planto-pipeline b { margin-top: 10px; font: 600 10px/1.35 "Space Grotesk", sans-serif; letter-spacing: .04em; }
.planto-animation-pool header { max-width: 760px; }
.planto-animation-pool .planto-media-triptych { margin-top: 55px; }
.planto-pool-closing { max-width: 600px; margin: 34px 0 0 auto; font-size: 15px; line-height: 1.9; text-wrap: balance; }

.planto-onboarding > ol,
.planto-experiment > ol { display: grid; margin: 0 0 34px; padding: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; }
.planto-onboarding > ol li {
  position: relative;
  display: flex;
  min-height: 62px;
  align-items: center;
  padding: 12px clamp(38px, 4vw, 56px) 12px 0;
  border-top: 1px solid rgba(48, 83, 78, .16);
  color: var(--planto-forest);
}
.planto-onboarding > ol li:last-child { padding-right: 0; }
.planto-onboarding > ol li > span { display: flex; min-width: 0; align-items: baseline; gap: clamp(9px, 1vw, 14px); }
.planto-onboarding > ol b { flex: 0 0 auto; color: rgba(48, 83, 78, .6); font: 600 clamp(10px, .8vw, 12px)/1 "Space Grotesk", sans-serif; letter-spacing: .12em; }
.planto-onboarding > ol em { color: var(--planto-forest); font: 520 clamp(15px, 1.35vw, 19px)/1.2 "Space Grotesk", sans-serif; font-style: normal; letter-spacing: -.02em; }
.planto-onboarding > ol i {
  position: absolute;
  top: 50%;
  right: clamp(10px, 1.5vw, 22px);
  color: rgba(48, 83, 78, .52);
  font: 400 clamp(18px, 1.8vw, 24px)/1 "Space Grotesk", sans-serif;
  font-style: normal;
  transform: translateY(-50%);
}
.planto-phone-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.planto-app-main { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); align-items: start; }
.planto-phone-strip .planto-media > img,
.planto-app-main .planto-media > img {
  border: 0;
  border-radius: 0;
  background: transparent;
}
.planto-collection-media > img {
  border-color: transparent;
  background: transparent;
}
.planto-collection-intro {
  margin: 0 0 clamp(42px, 5vw, 70px);
}
.planto-collection-intro h2 {
  margin: 0;
  font: 500 clamp(40px, 5.25vw, 72px)/1.02 "Space Grotesk", "Noto Sans JP", sans-serif;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.planto-collection-intro p {
  margin: 26px 0 0;
  color: var(--planto-forest);
  font-size: clamp(18px, 2vw, 27px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .02em;
}
.planto-companion-explorer { position: relative; }
.planto-companion-hint {
  display: grid;
  grid-template-columns: 34px auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(28px, 3vw, 42px);
  padding: 13px 0;
  border-top: 1px solid var(--planto-line);
  border-bottom: 1px solid var(--planto-line);
  color: var(--planto-forest);
}
.planto-companion-hint > span {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border: 1px solid rgba(48, 83, 78, .26);
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  font-size: 15px;
  animation: plantoHintTurn 2.8s var(--ease-out) infinite;
}
.planto-companion-hint b {
  font: 600 10px/1 "Space Grotesk", sans-serif;
  letter-spacing: .15em;
}
.planto-companion-hint em {
  justify-self: end;
  color: var(--planto-muted);
  font-size: clamp(11px, 1vw, 14px);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: .03em;
}
.planto-companion-grid {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(13px, 1.5vw, 22px);
  list-style: none;
}
.planto-companion-item { min-width: 0; perspective: 1300px; }
.planto-companion-card {
  display: block;
  width: 100%;
  aspect-ratio: 298 / 470;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
  transform: translateY(0);
  transition: transform 320ms var(--ease-out), filter 320ms ease;
  -webkit-tap-highlight-color: transparent;
}
.planto-companion-card.is-flipping { pointer-events: none; }
.planto-companion-card-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform: rotateY(0deg);
  transform-origin: 50% 50%;
  transition: transform 820ms cubic-bezier(.38, .02, .16, 1);
  will-change: transform;
}
.planto-companion-face {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}
.planto-companion-front {
  display: grid;
  place-items: center;
  border: 1px solid rgba(48, 83, 78, .24);
  border-radius: clamp(18px, 2vw, 30px);
  background: rgba(252, 253, 249, .86);
  box-shadow:
    0 18px 38px rgba(39, 64, 58, .08),
    inset 0 1px 0 rgba(255, 255, 255, .88);
  transform: rotateY(0deg) translateZ(1px);
}
.planto-companion-front img {
  display: block;
  width: 88%;
  height: auto;
  max-height: 80%;
  object-fit: contain;
  filter: saturate(.94) contrast(.98);
  transform: translateY(3%);
}
.planto-companion-back {
  border: 1px solid rgba(48, 83, 78, .24);
  border-radius: clamp(18px, 2vw, 30px);
  background: rgba(232, 239, 233, .72);
  box-shadow:
    0 18px 38px rgba(39, 64, 58, .1),
    inset 0 1px 0 rgba(255, 255, 255, .72);
  transform: rotateY(180deg) translateZ(1px);
}
.planto-companion-back > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.88) contrast(.94) brightness(1.015);
}
.planto-companion-back::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(20, 35, 31, .08) 56%, rgba(20, 35, 31, .82) 100%);
  pointer-events: none;
}
.planto-companion-back-copy {
  position: absolute;
  z-index: 1;
  right: clamp(14px, 1.5vw, 20px);
  bottom: clamp(14px, 1.5vw, 21px);
  left: clamp(14px, 1.5vw, 20px);
  display: grid;
  color: #fff;
  text-align: left;
  text-shadow: 0 1px 10px rgba(13, 27, 23, .28);
}
.planto-companion-back-copy small {
  margin-bottom: 8px;
  color: rgba(255, 255, 255, .68);
  font: 600 clamp(7px, .62vw, 9px)/1 "Space Grotesk", sans-serif;
  letter-spacing: .16em;
}
.planto-companion-back-copy b {
  font: 600 clamp(14px, 1.25vw, 19px)/1.2 "Noto Sans JP", sans-serif;
  letter-spacing: -.02em;
}
.planto-companion-back-copy em {
  margin-top: 5px;
  color: rgba(255, 255, 255, .86);
  font: 500 clamp(8px, .7vw, 10px)/1.35 "Space Grotesk", sans-serif;
  font-style: italic;
}
.planto-companion-back-copy > span {
  margin-top: 12px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, .3);
  color: rgba(255, 255, 255, .68);
  font-size: clamp(7px, .62vw, 9px);
  letter-spacing: .05em;
}
.planto-companion-card.is-flipped .planto-companion-card-inner { transform: rotateY(180deg); }
.planto-companion-card:not(.is-flipped):hover .planto-companion-card-inner,
.planto-companion-card:not(.is-flipped):focus-visible .planto-companion-card-inner {
  transform: rotateY(0deg);
}
.planto-companion-card:hover,
.planto-companion-card:focus-visible {
  filter: drop-shadow(0 18px 22px rgba(39, 64, 58, .11));
  transform: translateY(-7px);
}
.planto-companion-card.is-flipped:hover .planto-companion-card-inner,
.planto-companion-card.is-flipped:focus-visible .planto-companion-card-inner { transform: rotateY(180deg); }
.planto-companion-card:focus-visible { outline: 2px solid rgba(48, 83, 78, .56); outline-offset: 5px; border-radius: clamp(18px, 2vw, 30px); }
@keyframes plantoHintTurn {
  0%, 64%, 100% { transform: rotate(0deg); }
  82% { transform: rotate(180deg); }
}
.planto-app .planto-media figcaption {
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px solid rgba(48, 83, 78, .16);
  color: rgba(32, 44, 42, .6);
  font-size: clamp(9px, .72vw, 11px);
  line-height: 1.55;
  letter-spacing: .09em;
}
.planto-implementation-note { max-width: 720px; margin: 30px 0 0 auto; padding-left: 22px; border-left: 1px solid var(--planto-line); color: var(--planto-muted); font-size: 12px; line-height: 1.9; }

.planto-brand .planto-media--wide + .planto-media-pair { margin-top: 22px; }
.planto-brand .planto-media-pair + .planto-media--wide { margin-top: 22px; }

.planto-conditions { margin-top: 68px; }
.planto-experiment > ol { gap: clamp(10px, 1.2vw, 16px); margin: 0; }
.planto-experiment > ol li {
  position: relative;
  display: grid;
  min-height: 168px;
  align-content: start;
  gap: 12px;
  padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid rgba(48, 83, 78, .15);
  border-radius: 7px;
  background: rgba(255, 255, 255, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.planto-experiment > ol li::after { content: "→"; position: absolute; z-index: 2; top: 50%; right: -8px; color: rgba(48, 83, 78, .54); font-size: 18px; transform: translate(50%, -50%); }
.planto-experiment > ol li:last-child::after { display: none; }
.planto-experiment > ol span { color: rgba(48, 83, 78, .5); font: 600 11px/1 "Space Grotesk", sans-serif; letter-spacing: .14em; }
.planto-experiment > ol b { margin-top: 8px; color: var(--planto-ink); font: 520 clamp(17px, 1.5vw, 21px)/1.2 "Space Grotesk", sans-serif; letter-spacing: -.02em; }
.planto-experiment > ol small { margin-top: auto; color: var(--planto-muted); font-size: clamp(12px, 1vw, 14px); font-weight: 500; line-height: 1.65; }

.planto-body-copy:lang(ja) {
  max-width: 40em;
  overflow-wrap: normal;
  word-break: auto-phrase;
  line-break: strict;
  text-wrap: pretty;
}
.planto-evaluation-focus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--planto-line); border-bottom: 1px solid var(--planto-line); }
.planto-evaluation-focus > div { padding: 34px clamp(18px, 2.2vw, 32px) 40px 0; }
.planto-evaluation-focus > div + div { padding-left: clamp(18px, 2.2vw, 32px); border-left: 1px solid var(--planto-line); }
.planto-evaluation-focus h3 { margin: 0; font: 500 clamp(20px, 2vw, 28px)/1.2 "Space Grotesk", sans-serif; letter-spacing: -.025em; }
.planto-evaluation-focus p { margin: 18px 0 0; color: var(--planto-muted); font-size: 12px; line-height: 1.8; }
.planto-evaluation-status { display: flex; align-items: center; justify-content: flex-start; gap: 14px; margin: clamp(78px, 8vw, 118px) 0 30px; color: var(--planto-forest); font: 600 clamp(13px, 1.25vw, 17px)/1.2 "Space Grotesk", sans-serif; letter-spacing: .12em; text-align: left; text-transform: uppercase; }
.planto-evaluation-status span { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--planto-sage); box-shadow: 0 0 0 5px rgba(182, 212, 200, .3); }

.planto-insight { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(54px, 8vw, 120px); align-items: center; margin-top: clamp(74px, 9vw, 118px); }
.planto-insight--reverse { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.planto-insight > div > span { color: rgba(48, 83, 78, .56); font: 600 8px/1 "Space Grotesk", sans-serif; letter-spacing: .17em; }
.planto-insight h2 { margin: 24px 0 0; font: 500 clamp(38px, 5vw, 68px)/1 "Space Grotesk", sans-serif; letter-spacing: -.055em; }
.planto-insight h2.planto-lines > span:nth-child(2) { padding-block: .2em; color: rgba(48, 83, 78, .5); font-size: .42em; line-height: 1.15; letter-spacing: .02em; }
.planto-insight > div > p { margin: 28px 0 0; color: var(--planto-muted); font-size: clamp(14px, 1.1vw, 16px); line-height: 1.9; text-wrap: balance; }
.planto-insight .planto-media > img {
  filter: saturate(.9) contrast(.96) brightness(1.015);
}

.planto-closing { padding-bottom: 24px; }
.planto-closing-copy { display: grid; grid-template-columns: minmax(0, 7fr) minmax(260px, 4fr); gap: clamp(64px, 8vw, 120px); margin-top: clamp(56px, 7vw, 88px); }
.planto-closing-copy p { max-width: 32em; }
.planto-closing-copy ul { align-self: end; margin: 0; padding: 0; border-top: 1px solid var(--planto-line); list-style: none; }
.planto-closing-copy li { padding: 15px 0; border-bottom: 1px solid var(--planto-line); font: 600 9px/1.4 "Space Grotesk", sans-serif; letter-spacing: .1em; }
.planto-closing-line { margin: clamp(90px, 12vw, 150px) 0 0; font: 500 clamp(24px, 4.1vw, 54px)/1 "Space Grotesk", sans-serif; letter-spacing: -.045em; white-space: nowrap; }
.planto-pagination { margin-top: clamp(100px, 13vw, 168px); padding-bottom: 12px; }
.planto-pagination .project-return { border-color: var(--planto-line); color: var(--planto-forest); background: rgba(255, 255, 255, .14); }

.is-planto-detail [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 680ms ease, transform 820ms var(--ease-out); }
.is-planto-detail [data-reveal].is-visible { opacity: 1; transform: none; }

@media (max-width: 1279px) {
  .planto-experience::before,
  .planto-ai::before { right: -5vw; left: -5vw; }
  .planto-shell { display: block; width: min(90vw, var(--planto-content)); }
  .planto-chapter-nav { display: none; }
  .planto-case { padding-top: 162px; }
  .planto-mobile-progress {
    position: fixed;
    z-index: 92;
    top: 85px;
    left: 5vw;
    right: 5vw;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 7px 28px;
    align-items: center;
    padding: 9px 12px 10px;
    border: 1px solid rgba(76, 101, 94, .15);
    border-radius: 12px;
    background: rgba(247, 248, 245, .78);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    font-family: "Space Grotesk", sans-serif;
  }
  .planto-mobile-progress > a { font-size: 8px; letter-spacing: .11em; }
  .planto-mobile-progress > span { display: flex; justify-self: end; gap: 14px; color: rgba(32, 44, 42, .56); font-size: 8px; font-style: normal; letter-spacing: .1em; }
  .planto-mobile-progress > span b { color: var(--planto-ink); font-weight: 600; }
  .planto-mobile-progress > span em { font-style: normal; }
  .planto-mobile-progress > i { position: relative; grid-column: 1 / -1; overflow: hidden; height: 1px; background: rgba(48, 83, 78, .14); }
  .planto-mobile-progress > i u { position: absolute; inset: 0; background: var(--planto-forest); transform: scaleX(0); transform-origin: left; text-decoration: none; will-change: transform; }
}

@media (max-width: 1100px) {
  .planto-companion-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .planto-section + .planto-section { margin-top: 124px; }
  .planto-overview-grid,
  .planto-product-exploration,
  .planto-pipeline-block header,
  .planto-closing-copy { grid-template-columns: 1fr; gap: 46px; }
  .planto-metadata { max-width: 650px; }
  .planto-experience,
  .planto-ai { padding-inline: 0; }
  .planto-pipeline { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; }
  .planto-pipeline li { border: 1px solid rgba(48, 83, 78, .24); }
  .planto-pipeline li:nth-child(3)::after { display: none; }
  .planto-hardware-gallery { grid-template-columns: minmax(0, 1.35fr) minmax(220px, .75fr); }
  .planto-app-main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .planto-companion-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .planto-experiment > ol { grid-template-columns: 1fr; gap: 12px; }
  .planto-experiment > ol li { min-height: 132px; }
  .planto-experiment > ol li::after { top: auto; right: 28px; bottom: -17px; transform: rotate(90deg); }
  .planto-insight,
  .planto-insight--reverse { gap: 46px; }
}

@media (max-width: 767px) {
  .planto-experience::before,
  .planto-ai::before { right: -20px; left: -20px; }
  .is-planto-detail .project-header { top: 12px; left: 12px; right: 12px; grid-template-columns: auto 1fr auto; padding: 8px 9px; border-radius: 14px; }
  .is-planto-detail .project-header .wordmark { font-size: 8px; letter-spacing: .12em; }
  .is-planto-detail .project-header .wordmark span { display: none; }
  .is-planto-detail .project-header-rule { opacity: .65; }
  .is-planto-detail .project-header .project-return { padding-left: 3px; font-size: 7px; letter-spacing: .08em; }
  .is-planto-detail .project-header .project-return i { width: 26px; height: 26px; }
  .planto-mobile-progress { top: 84px; left: 12px; right: 12px; gap: 7px 12px; }
  .planto-mobile-progress > span { gap: 8px; }
  .planto-mobile-progress > span em { display: none; }
  .planto-shell { width: auto; margin-inline: 20px; }
  .planto-case { padding-top: 164px; padding-bottom: 58px; }
  .planto-section { scroll-margin-top: 132px; }
  .planto-section + .planto-section { margin-top: 104px; }
  .planto-kicker, .planto-eyebrow { margin-bottom: 22px; font-size: 8px; }
  .planto-section-heading { margin-bottom: 38px; }
  .planto-section-heading h2,
  .planto-product-decision h2,
  .planto-editorial-pause h2,
  .planto-pipeline-block h2,
  .planto-animation-pool h2,
  .planto-closing h2 { font-size: clamp(38px, 13vw, 56px); line-height: 1.02; }
  .planto-hero { min-height: auto; }
  .planto-hero-copy { margin-bottom: 46px; }
  .planto-hero-logo { height: clamp(72px, 20vw, 96px); margin-left: -8px; }
  .planto-hero-subtitle { margin-top: 29px; font-size: 20px; }
  .planto-hero-statement { margin-top: 29px; font-size: clamp(29px, 9vw, 42px); }
  .planto-hero-description { font-size: 13px; }
  .planto-placeholder { min-height: 120px; padding: 18px 14px; }
  .planto-placeholder-id { margin-bottom: 11px; font-size: 7px; }
  .planto-placeholder strong { font-size: 14px; }
  .planto-placeholder p { margin-top: 8px; font-size: 9px; }
  .planto-placeholder small { margin-top: 10px; font-size: 7px; }
  .planto-media-triptych,
  .planto-storyboard,
  .planto-media-pair,
  .planto-evaluation-focus { grid-template-columns: 1fr; }
  .planto-final-product .planto-media-pair { grid-template-columns: 1fr; }
  .planto-media-triptych { gap: 34px; margin-top: 54px; }
  .planto-storyboard { gap: 54px; }
  .planto-overview-grid { gap: 44px; }
  .planto-metadata div { grid-template-columns: 78px 1fr; }
  .planto-challenge .planto-statement { font-size: clamp(25px, 8vw, 36px); }
  .planto-pipeline-block h2 { font-size: clamp(27px, 8.6vw, 34px); }
  .planto-compare { grid-template-columns: 1fr; gap: 22px; }
  .planto-compare > span { justify-self: center; transform: rotate(90deg); }
  .planto-challenge blockquote { margin-top: 66px; font-size: 28px; }
  .planto-experience,
  .planto-ai { margin-inline: 0; padding: 86px 0; }
  .planto-product > div + div,
  .planto-engineering > div + div,
  .planto-ai > div + div,
  .planto-app > div + div,
  .planto-research > div + div { margin-top: 94px; }
  .planto-product-exploration,
  .planto-decision-grid,
  .planto-hardware-gallery,
  .planto-app-main,
  .planto-insight,
  .planto-insight--reverse { grid-template-columns: 1fr; }
  .planto-concept-collage > div,
  .planto-hardware-gallery > div > div { grid-template-columns: 1fr; }
  .planto-product-decision header { margin-left: 0; }
  .planto-final-product-title { margin-block: 42px; }
  .planto-hardware-gallery > .planto-media,
  .planto-hardware-gallery > .planto-media .planto-placeholder,
  .planto-app-main > .planto-media,
  .planto-app-main > .planto-media .planto-placeholder { height: auto; }
  .planto-hardware-gallery > .planto-media { display: block; }
  .planto-hardware-gallery > .planto-media > img { height: auto; }
  .planto-pipeline { display: grid; grid-template-columns: 1fr; gap: 0; }
  .planto-pipeline li { min-height: 80px; border-bottom: 0; }
  .planto-pipeline li:last-child { border-bottom: 1px solid rgba(48, 83, 78, .24); }
  .planto-pipeline li:not(:last-child)::after { top: auto; right: 20px; bottom: -9px; transform: rotate(90deg); }
  .planto-pipeline li:nth-child(3)::after { display: block; }
  .planto-phone-strip { display: flex; overflow-x: auto; gap: 14px; margin-inline: -20px; padding: 0 20px 15px; scroll-snap-type: x mandatory; }
  .planto-phone-strip .planto-media { min-width: min(72vw, 280px); scroll-snap-align: center; }
  .planto-app-main { display: flex; overflow-x: auto; gap: 14px; margin-inline: -20px; padding: 0 20px 15px; scroll-snap-type: x mandatory; }
  .planto-app-main .planto-media { min-width: min(76vw, 300px); scroll-snap-align: center; }
  .planto-onboarding > ol { grid-template-columns: 1fr; gap: 0; }
  .planto-onboarding > ol li { min-height: 58px; padding: 13px 48px 13px 0; border-bottom: 0; }
  .planto-onboarding > ol li:last-child { border-bottom: 1px solid rgba(48, 83, 78, .16); }
  .planto-onboarding > ol em { font-size: 16px; }
  .planto-onboarding > ol i { right: 16px; transform: translateY(-50%) rotate(90deg); }
  .planto-collection-intro { margin-bottom: 34px; }
  .planto-companion-hint { grid-template-columns: 30px 1fr; gap: 10px; margin-bottom: 24px; }
  .planto-companion-hint > span { width: 27px; height: 27px; }
  .planto-companion-hint em { grid-column: 1 / -1; justify-self: start; margin-top: 2px; }
  .planto-companion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .planto-companion-back-copy { right: 12px; bottom: 13px; left: 12px; }
  .planto-companion-back-copy b { font-size: clamp(13px, 4vw, 17px); }
  .planto-companion-back-copy em { font-size: clamp(8px, 2.5vw, 10px); }
  .planto-conditions { gap: 52px; }
  .planto-experiment > ol { grid-template-columns: 1fr; }
  .planto-evaluation-status { margin-top: 72px; }
  .planto-evaluation-focus > div { padding: 26px 0; }
  .planto-evaluation-focus > div + div { padding-left: 0; border-top: 1px solid var(--planto-line); border-left: 0; }
  .planto-insight--reverse .planto-media { order: 2; }
  .planto-insight--reverse > div { order: 1; }
  .planto-closing-copy { grid-template-columns: 1fr; gap: 46px; }
  .planto-closing-line { font-size: clamp(13px, 4.6vw, 22px); letter-spacing: -.035em; }
  .planto-pagination { flex-wrap: wrap; gap: 8px; }
  .planto-pagination .project-return { padding-inline: 9px; font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .is-planto-detail [data-reveal] { opacity: 1; transform: none; transition: none; }
  .planto-chapter-nav nav a,
  .is-planto-detail .project-header .project-return i,
  .planto-companion-card,
  .planto-companion-card-inner { transition: none; }
  .planto-companion-hint > span { animation: none; }
  html:has(.is-planto-detail) { scroll-behavior: auto; }
}

@media (max-width: 760px) {
  /* Mobile Safari can refuse several simultaneous muted autoplay videos,
     especially over a local server without byte-range responses. The
     lightweight animated fallbacks preserve the same looping content. */
  .planto-animation-pool .planto-media > video[data-planto-loop-video] { display: none; }
  .planto-animation-pool .planto-media > .planto-video-mobile-fallback { display: block; }
}