@charset "UTF-8";
/* Givery AI for Web | 20261105 */
/* ---------- product UI kit (inside frames) ---------- */
.app {
  --r: 12px;
  position: relative;
  background: var(--ui-bg);
  color: var(--ui-text);
  border-radius: var(--r);
  overflow: hidden;
  font-family: "Noto Sans JP", var(--jp);
  letter-spacing: 0.02em;
  line-height: 1.6;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 30px 80px -30px rgba(0, 0, 0, 0.55);
}
.app * {
  letter-spacing: inherit;
}
.ui-ico {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--ui-line);
  border-radius: 999px;
  font-size: 11px;
  color: var(--ui-text);
  background: #fff;
  white-space: nowrap;
}
.ui-chip.on {
  border-color: var(--ui-accent);
  color: var(--ui-accent);
  background: var(--ui-accent-tint);
}
.ui-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex: none;
  height: 28px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 700;
  border: 1px solid var(--ui-line);
  background: #fff;
  color: var(--ui-text);
}
.ui-btn.pri {
  background: var(--ui-accent);
  border-color: var(--ui-accent);
  color: #fff;
}
.ui-btn.ok {
  background: var(--ui-ok);
  border-color: var(--ui-ok);
  color: #fff;
}
.ui-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--ui-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}
.ui-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
}
.ui-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.ui-status.wait {
  color: var(--ui-warn);
  background: #fdf4df;
}
.ui-status.live {
  color: var(--ui-ok);
  background: #e3f5ec;
}
.frame-note {
  font-size: 12.5px;
  color: var(--mute);
  margin-top: 14px;
  letter-spacing: 0.03em;
}

/* browser chrome for sites */
.bw {
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.07),
    0 24px 60px -28px rgba(0, 0, 0, 0.45);
  color: #1b1b20;
}
.bw-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 12px;
  background: #eef0f3;
  border-bottom: 1px solid #e1e4e8;
}
.bw-dots {
  display: flex;
  gap: 6px;
}
.bw-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #cfd3d9;
}
.bw-url {
  flex: 1;
  height: 22px;
  border-radius: 6px;
  background: #fff;
  font-size: 11px;
  color: #666b75;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-family: var(--en);
  letter-spacing: 0.02em;
  overflow: hidden;
  white-space: nowrap;
}
.bw-tag {
  font-size: 10.5px;
  font-weight: 700;
  color: #4a4f5a;
  background: #fff;
  border: 1px solid #d9dde3;
  border-radius: 4px;
  padding: 1px 7px;
  white-space: nowrap;
}

/* ---------- Sample Cloud (fictional site rendered inside mocks) ---------- */
.scale-box {
  position: relative;
  overflow: hidden;
}
.scale-box > .sc {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}
.sc {
  width: 720px;
  letter-spacing: 0.02em;
  background: #fff;
  color: var(--sc-text);
  font-family: "Noto Sans JP", var(--jp);
  letter-spacing: 0.02em;
  line-height: 1.6;
  transition: transform 0.9s var(--ease);
}
.sc-hdr {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 46px;
  padding: 0 26px;
  font-size: 11px;
  color: #4b5568;
  border-bottom: 1px solid #e8edf4;
}
.sc-logo {
  font: 900 15px var(--en);
  color: var(--sc-navy);
  letter-spacing: 0.01em;
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 7px;
}
.sc-logo i {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--sc-teal), var(--sc-navy));
}
.sc-hbtn {
  background: var(--sc-teal);
  color: #fff;
  padding: 5px 12px;
  border-radius: 6px;
  font-weight: 700;
}
.sc-fv {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 22px;
  padding: 34px 26px 30px;
  background: linear-gradient(180deg, #f2f6fc, #fff);
  position: relative;
}
.sc-kick {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--sc-teal);
  margin: 0 0 6px;
}
.sc-h1 {
  font-size: 25px;
  line-height: 1.45;
  font-weight: 900;
  color: var(--sc-navy);
  margin: 0;
  letter-spacing: 0.02em;
}
.sc-sub {
  font-size: 12px;
  color: #4b5568;
  margin: 10px 0 16px;
}
.sc-btn {
  display: inline-block;
  background: var(--sc-navy);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 6px;
}
.sc-btn.teal {
  background: var(--sc-teal);
}
.sc-fv-img {
  background: #fff;
  border: 1px solid #dfe6f0;
  border-radius: 10px;
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: start;
  box-shadow: 0 14px 30px -20px rgba(19, 48, 107, 0.5);
}
.sc-fv-img .r {
  height: 10px;
  border-radius: 5px;
  background: #e6edf6;
}
.sc-fv-img .r.t {
  background: var(--sc-teal);
  width: 46%;
}
.sc-fv-img .r.s {
  width: 72%;
}
.sc-fv-img .row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.sc-fv-img .row span {
  height: 34px;
  border-radius: 6px;
  background: #f1f5fa;
  border: 1px solid #e4eaf2;
}
.sc-sec {
  padding: 22px 26px;
}
.sc-st {
  font-size: 14px;
  font-weight: 900;
  color: var(--sc-navy);
  text-align: center;
  margin: 0 0 14px;
}
.sc-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.sc-card {
  border: 1px solid #e3e9f1;
  border-radius: 8px;
  padding: 12px;
  font-size: 10.5px;
  color: #4b5568;
  background: #fff;
}
.sc-card b {
  display: block;
  font-size: 11.5px;
  color: var(--sc-text);
  margin-bottom: 4px;
}
.sc-card .ic {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #e4f4f1;
  margin-bottom: 8px;
  position: relative;
}
.sc-card .ic::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 2px;
  background: var(--sc-teal);
}
.sc-case .lg {
  height: 22px;
  width: 60%;
  border-radius: 4px;
  background: #eef2f7;
  margin-bottom: 8px;
  font: 900 10px/22px var(--en);
  color: #9aa6b8;
  text-align: center;
}
.sc-issues {
  background: #fafcfe;
}
.sc-cta {
  margin: 0 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--sc-navy);
  color: #fff;
  border-radius: 10px;
  padding: 0 20px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 0.8s var(--ease),
    opacity 0.6s var(--ease),
    padding 0.8s var(--ease),
    margin 0.8s var(--ease);
}
.sc-cta p {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}
.sc-cta .sc-btn {
  background: var(--sc-teal);
}
.sc.has-cta .sc-cta {
  max-height: 120px;
  opacity: 1;
  padding: 18px 20px;
  margin: 4px 26px 18px;
}
.sc-foot {
  height: 44px;
  background: #0f1d3d;
  margin-top: 14px;
}
/* changed-element highlight */
[data-el].chg {
  outline: 2px solid var(--ui-accent);
  outline-offset: 3px;
  border-radius: 6px;
  box-shadow: 0 0 0 7px rgba(61, 53, 181, 0.12);
}
[data-el].insp {
  outline: 2px dashed var(--ui-accent);
  outline-offset: 3px;
  border-radius: 6px;
}
.sc .txt-swap {
  transition: opacity 0.35s ease;
}
/* phone layout */
.sc.phone {
  width: 360px;
}
.sc.phone .sc-hdr span:not(.sc-hbtn):not(.sc-logo) {
  display: none;
}
.sc.phone .sc-fv {
  grid-template-columns: 1fr;
  padding: 24px 18px;
}
.sc.phone .sc-h1 {
  font-size: 22px;
}
.sc.phone .sc-3 {
  grid-template-columns: 1fr;
}
.sc.phone .sc-sec {
  padding: 18px;
}
.sc.phone .sc-cta {
  flex-direction: column;
  align-items: flex-start;
}
.sc.phone .sc-fv-img {
  display: none;
}
/* build-in animation for CREATE */
.sc .bld {
  transition:
    opacity 0.5s var(--ease),
    transform 0.6s var(--ease);
}
.sc.building .bld {
  opacity: 0;
  transform: translateY(10px);
}
.sc.building .bld.in {
  opacity: 1;
  transform: none;
}

.live .app {
  display: grid;
  grid-template-columns: 36% 64%;
  height: 440px;
}
.live-chat {
  border-right: 1px solid var(--ui-line);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  font-size: 11.5px;
  position: relative;
}
.live-chat .who {
  font-size: 10px;
  color: var(--ui-mute);
}
.bubble {
  align-self: flex-end;
  max-width: 92%;
  background: var(--ui-sub);
  border-radius: 12px 12px 4px 12px;
  padding: 9px 11px;
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--ui-text);
  min-height: 1em;
}
.ai-msg {
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--ui-text);
}
.step-line {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--ui-mute);
  line-height: 1.5;
}
.step-line .ck {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--ui-line);
  flex: none;
  position: relative;
}
.step-line.done {
  color: var(--ui-text);
}
.step-line.done .ck {
  border-color: var(--ui-ok);
  background: var(--ui-ok);
}
.step-line.done .ck::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1.5px;
  width: 3px;
  height: 6px;
  border: solid #fff;
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}
.step-line.run .ck {
  border-color: var(--ui-accent);
  border-top-color: transparent;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.composer {
  margin-top: auto;
  border: 1px solid var(--ui-line);
  border-radius: 12px;
  padding: 9px 10px 8px;
  background: #fff;
  box-shadow: 0 4px 14px -10px rgba(0, 0, 0, 0.3);
}
.composer .ph {
  font-size: 11.5px;
  color: var(--ui-mute);
  min-height: 18px;
}
.composer .ph.typed {
  color: var(--ui-text);
}
.composer .row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.composer .send {
  margin-left: auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ui-accent);
  display: grid;
  place-items: center;
  color: #fff;
}
.composer .send svg {
  width: 12px;
  height: 12px;
}
.caret::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1.1em;
  background: var(--ui-text);
  vertical-align: -2px;
  margin-left: 1px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
.live-prev {
  background: var(--ui-sub);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.prev-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border-bottom: 1px solid var(--ui-line);
  background: #fff;
  font-size: 11.5px;
  font-weight: 700;
  min-width: 0;
}
.prev-bar .ttl {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.prev-bar .sp {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ui-mute);
}
.prev-stage {
  position: relative;
  flex: 1;
  overflow: hidden;
  padding: 14px;
}
.prev-stage .scale-box {
  height: 100%;
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--ui-line);
  background: #fff;
}
.fan {
  position: absolute;
  inset: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.fan .th {
  position: absolute;
  width: 52%;
  aspect-ratio: 3/4;
  background: #fff;
  border-radius: 8px;
  box-shadow:
    0 0 0 1px var(--ui-line),
    0 18px 36px -18px rgba(19, 48, 107, 0.6);
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px) scale(0.9);
  transition: all 0.8s var(--ease);
}
.fan .th .tt {
  height: 44%;
  background: linear-gradient(180deg, #eef3fb, #fff);
  padding: 12px 12px 0;
}
.fan .th .tt b {
  display: block;
  font-size: 12px;
  color: var(--sc-navy);
  line-height: 1.45;
  font-weight: 900;
}
.fan .th .tt i {
  display: block;
  font-style: normal;
  font-size: 9px;
  color: var(--sc-teal);
  font-weight: 700;
  margin-bottom: 4px;
}
.fan .th .bars {
  padding: 8px 12px;
  display: grid;
  gap: 6px;
}
.fan .th .bars span {
  height: 8px;
  border-radius: 4px;
  background: #edf1f6;
}
.fan .th .bars span:nth-child(2) {
  width: 70%;
}
.fan .th .lbl {
  position: absolute;
  left: 10px;
  bottom: 10px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--sc-navy);
  padding: 2px 8px;
  border-radius: 4px;
}
.fan.on .th {
  opacity: 1;
}
.fan.on .th:nth-child(1) {
  transform: translateX(-46%) rotate(-7deg);
}
.fan.on .th:nth-child(2) {
  transform: translateY(-4%);
  z-index: 2;
}
.fan.on .th:nth-child(3) {
  transform: translateX(46%) rotate(7deg);
}
.tags {
  position: absolute;
  right: -18px;
  bottom: 22px;
  display: grid;
  gap: 8px;
  z-index: 5;
}
.tag-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: #1b1b20;
  border-radius: 8px;
  padding: 9px 13px;
  font-size: 12px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 14px 30px -14px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.5s var(--ease);
  font-family: "Noto Sans JP", var(--jp);
}
.tag-chip.on {
  opacity: 1;
  transform: none;
}
.tag-chip time {
  font: 500 10.5px var(--en);
  color: #8a8f99;
}
.tag-chip b {
  font-weight: 700;
}
.tag-chip .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ui-accent);
}
.tag-chip .dot.ok {
  background: var(--ui-ok);
}
.tag-chip .dot.wait {
  background: var(--ui-warn);
}
.icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--ui-line);
  background: #fff;
  color: var(--ui-text);
  display: grid;
  place-items: center;
}
.icon-btn svg {
  width: 12px;
  height: 12px;
}
.demo .app {
  aspect-ratio: 16/9.4;
  display: grid;
  grid-template-columns: 46px 36% 1fr;
  min-height: 520px;
}
.app-rail {
  background: #fafafb;
  border-right: 1px solid var(--ui-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  color: var(--ui-mute);
}
.app-rail .mk {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--ui-text);
  color: #fff;
  display: grid;
  place-items: center;
  font: 900 11px var(--en);
  margin-bottom: 6px;
}
.app-rail .me {
  margin-top: auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #c9b8ff;
  color: #3b2a8a;
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.app-chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--ui-line);
  background: #fff;
}
.chat-log {
  flex: 1;
  overflow: hidden;
  padding: 18px 18px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: flex-end;
}
.chat-log > * {
  flex: none;
}
.chat-log .bubble {
  font-size: 12.5px;
}
.chat-log .ai-msg {
  font-size: 12.5px;
}
.chat-log .step-line {
  font-size: 12px;
}
.chat-log .cchips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.chat-log .cchips .ui-chip {
  font-family: var(--en);
  font-size: 10.5px;
  color: var(--ui-mute);
}
.art-card {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  padding: 9px 11px;
  font-size: 11.5px;
}
.art-card .ib {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--ui-accent-tint);
  color: var(--ui-accent);
  display: grid;
  place-items: center;
}
.art-card small {
  display: block;
  color: var(--ui-mute);
  font-size: 10.5px;
}
.msg-in {
  animation: msgin 0.45s var(--ease) both;
}
@keyframes msgin {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
.app-chat .composer {
  margin: 0 14px 14px;
}
.app-prev {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--ui-sub);
  position: relative;
}
.app-prev .prev-bar {
  height: 44px;
  gap: 10px;
}
.seg-ctl {
  display: inline-flex;
  border: 1px solid var(--ui-line);
  border-radius: 7px;
  overflow: hidden;
}
.seg-ctl span {
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ui-mute);
  display: flex;
  align-items: center;
  gap: 4px;
}
.seg-ctl span.on {
  background: var(--ui-accent-tint);
  color: var(--ui-accent);
}
.prev-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 0;
  min-height: 38px;
}
.insp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 11px;
  border: 1px solid var(--ui-line);
  border-radius: 999px;
  font-size: 11px;
  background: #fff;
  color: var(--ui-text);
  transition: all 0.3s;
}
.insp-pill.on {
  border-color: var(--ui-accent);
  color: var(--ui-accent);
  background: var(--ui-accent-tint);
}
.var-tabs {
  display: none;
  gap: 4px;
  margin-left: auto;
}
.var-tabs.on {
  display: flex;
}
.var-tabs span {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  color: var(--ui-mute);
  border: 1px solid transparent;
}
.var-tabs span.on {
  background: #fff;
  color: var(--ui-text);
  border-color: var(--ui-line);
}
.app-prev .prev-stage {
  padding: 10px 14px 14px;
}
.app-prev .scale-box {
  transition:
    width 0.7s var(--ease),
    margin 0.7s var(--ease);
}
.app-home {
  position: absolute;
  inset: 0 0 0 46px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 8;
  transition: opacity 0.5s var(--ease);
}
.app-home.off {
  opacity: 0;
  pointer-events: none;
}
.app-home .mk {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--ui-text);
  color: #fff;
  display: grid;
  place-items: center;
  font: 900 14px var(--en);
}
.app-home h4 {
  font-size: 22px;
  font-weight: 700;
  color: var(--ui-text);
  font-family: "Noto Sans JP", var(--jp);
}
.app-home .composer {
  width: min(560px, 78%);
  margin: 6px 0 0;
  padding: 14px 14px 10px;
}
.app-home .composer .ph {
  font-size: 13px;
  min-height: 44px;
  line-height: 1.7;
}
.app-home .hint {
  font-size: 11px;
  color: var(--ui-mute);
}
.cursor {
  position: absolute;
  z-index: 20;
  width: 18px;
  height: 18px;
  left: 70%;
  top: 60%;
  pointer-events: none;
  transition:
    left 0.9s var(--ease),
    top 0.9s var(--ease),
    transform 0.15s;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
  opacity: 0;
}
.cursor.on {
  opacity: 1;
}
.cursor.click {
  transform: scale(0.82);
}
.popover {
  position: absolute;
  z-index: 15;
  width: 250px;
  background: #fff;
  border-radius: 10px;
  box-shadow:
    0 0 0 1px var(--ui-line),
    0 18px 40px -16px rgba(0, 0, 0, 0.45);
  padding: 10px;
  font-size: 11.5px;
  opacity: 0;
  transform: translateY(6px);
  transition: all 0.35s var(--ease);
  pointer-events: none;
}
.popover.on {
  opacity: 1;
  transform: none;
}
.popover .path {
  font: 500 10.5px var(--en);
  color: var(--ui-mute);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.popover .ta {
  border: 1.5px solid var(--ui-accent);
  border-radius: 7px;
  padding: 7px 8px;
  min-height: 38px;
  color: var(--ui-text);
}
.popover .ft {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.pin {
  position: absolute;
  z-index: 14;
  width: 20px;
  height: 20px;
  border-radius: 50% 50% 50% 4px;
  background: var(--ui-accent);
  color: #fff;
  font: 700 10.5px/20px var(--en);
  text-align: center;
  transform: scale(0);
  transition: transform 0.35s var(--ease);
}
.pin.on {
  transform: scale(1);
}
.pub-panel {
  position: absolute;
  z-index: 16;
  right: 14px;
  top: 52px;
  width: 270px;
  background: #fff;
  border-radius: 12px;
  box-shadow:
    0 0 0 1px var(--ui-line),
    0 24px 50px -18px rgba(0, 0, 0, 0.5);
  padding: 14px;
  font-size: 11.5px;
  opacity: 0;
  transform: translateY(-6px);
  transition: all 0.4s var(--ease);
  pointer-events: none;
}
.pub-panel.on {
  opacity: 1;
  transform: none;
}
.pub-panel h5 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ui-text);
}
.pub-panel dl {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 6px 8px;
  margin: 0 0 12px;
}
.pub-panel dt {
  color: var(--ui-mute);
}
.pub-panel dd {
  margin: 0;
  color: var(--ui-text);
  font-weight: 500;
  word-break: break-all;
}
.pub-panel .act {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--ui-line);
  padding-top: 10px;
}
/* design system mock */
.ds .app {
  display: grid;
  grid-template-columns: 38% 1fr;
  min-height: 470px;
}
.ds-head {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid var(--ui-line);
  font-size: 13px;
  font-weight: 700;
}
.ds-head .draft {
  font-size: 10px;
  font-weight: 500;
  color: var(--ui-mute);
  background: var(--ui-sub);
  padding: 1px 7px;
  border-radius: 4px;
}
.ds-head .sp {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}
.ds-src {
  padding: 16px;
  border-right: 1px solid var(--ui-line);
  font-size: 11.5px;
}
.ds-src h6 {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ui-text);
}
.ds-src p {
  margin: 0 0 10px;
  color: var(--ui-mute);
  font-size: 10.5px;
  line-height: 1.6;
}
.drop {
  border: 1.5px dashed var(--ui-line);
  border-radius: 9px;
  height: 78px;
  display: grid;
  place-items: center;
  color: var(--ui-mute);
  font-size: 10.5px;
  margin-bottom: 16px;
  text-align: center;
}
.urlrow {
  display: flex;
  gap: 6px;
}
.urlrow .in {
  flex: 1;
  height: 30px;
  border: 1px solid var(--ui-line);
  border-radius: 7px;
  display: flex;
  align-items: center;
  padding: 0 9px;
  font: 400 11px var(--en);
  color: var(--ui-text);
  overflow: hidden;
  white-space: nowrap;
}
.urlrow .in.ph {
  color: var(--ui-mute);
}
.src-chip {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--ui-line);
  border-radius: 7px;
  padding: 6px 9px;
  font: 400 11px var(--en);
  opacity: 0;
  transition: opacity 0.4s;
}
.src-chip.on {
  opacity: 1;
}
.src-chip b {
  font-family: "Noto Sans JP", var(--jp);
  font-size: 10px;
  background: var(--ui-sub);
  padding: 1px 6px;
  border-radius: 4px;
}
.ds-out {
  padding: 16px;
  position: relative;
  overflow: hidden;
}
.ds-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
}
.ds-tabs span {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  color: var(--ui-mute);
}
.ds-tabs span.on {
  background: var(--ui-sub);
  color: var(--ui-text);
}
.ds-empty {
  position: absolute;
  inset: 56px 16px 16px;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--ui-mute);
  font-size: 11.5px;
  background: var(--ui-sub);
  border-radius: 10px;
  transition: opacity 0.4s;
}
.ds-empty b {
  display: block;
  color: var(--ui-text);
  font-size: 12.5px;
  margin-bottom: 4px;
}
.ds-skel {
  position: absolute;
  inset: 56px 16px 16px;
  display: grid;
  gap: 10px;
  align-content: start;
  opacity: 0;
  transition: opacity 0.3s;
}
.ds-skel i {
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(90deg, #f0f0f4 0%, #f8f8fb 50%, #f0f0f4 100%);
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}
.ds-skel i:nth-child(odd) {
  width: 70%;
}
@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}
.ds-res {
  opacity: 0;
}
.ds.gen .ds-empty {
  opacity: 0;
}
.ds.gen .ds-skel {
  opacity: 1;
}
.ds.done .ds-empty,
.ds.done .ds-skel {
  opacity: 0;
}
.ds.done .ds-res {
  opacity: 1;
}
.ds-res h6 {
  font-size: 11px;
  font-weight: 700;
  color: var(--ui-mute);
  margin: 0 0 8px;
}
.sw-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.sw {
  font: 400 9.5px/1.4 var(--en);
  color: var(--ui-mute);
  opacity: 0;
  transform: translateY(6px);
  transition: all 0.45s var(--ease);
}
.sw i {
  display: block;
  height: 34px;
  border-radius: 6px;
  margin-bottom: 4px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.sw b {
  display: block;
  color: var(--ui-text);
  font-weight: 500;
}
.ds.done .sw {
  opacity: 1;
  transform: none;
}
.type-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.type-row div {
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 10px;
  color: var(--ui-mute);
}
.type-row div b {
  display: block;
  color: var(--sc-navy);
  font-family: "Noto Sans JP";
  margin-bottom: 2px;
}
.cmp-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.cmp-row .sc-btn {
  font-size: 10px;
  padding: 6px 12px;
}
.cmp-row .mini-card {
  border: 1px solid #e3e9f1;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 10px;
  color: var(--sc-text);
}
.replay {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
}
/* content model + skill */
.model {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 28px;
}
.model-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.mtype {
  border: 1px solid var(--line);
  padding: 16px 18px;
  background: var(--mist-2);
}
.mtype h5 {
  margin: 0 0 10px;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mtype h5 small {
  font: 500 11px var(--en);
  color: var(--mute);
  letter-spacing: 0.04em;
}
.mtype ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  display: grid;
  gap: 6px;
}
.mtype li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px dashed var(--line);
  padding-bottom: 5px;
}
.mtype li span:last-child {
  font: 500 11px var(--en);
  color: var(--mute);
}
.skill-card .app {
  padding: 0;
}
.skill-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ui-line);
}
.skill-head .ib {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--ui-accent-tint);
  color: var(--ui-accent);
  display: grid;
  place-items: center;
}
.skill-head b {
  font-size: 14px;
}
.skill-head small {
  display: block;
  font-size: 10.5px;
  color: var(--ui-mute);
}
.skill-head .ui-chip {
  margin-left: auto;
}
.skill-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.skill-body section {
  padding: 14px 18px;
  border-bottom: 1px solid var(--ui-line);
  font-size: 12px;
}
.skill-body section:nth-child(odd) {
  border-right: 1px solid var(--ui-line);
}
.skill-body h6 {
  margin: 0 0 8px;
  font-size: 11px;
  color: var(--ui-mute);
  font-weight: 700;
}
.skill-body ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 5px;
}
.skill-body li {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  line-height: 1.55;
}
.skill-body li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ui-accent);
  margin-top: 6px;
}
.skill-body .ng li::before {
  background: var(--ui-pink);
  border-radius: 1px;
}
.skill-body .pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* mini visuals */
.mv {
  position: relative;
  background: var(--ui-sub);
  padding: 16px;
  height: 300px;
  overflow: hidden;
  border-radius: 0 0 12px 12px;
}
.mv .fan {
  inset: 16px;
}
.mv .fan .th {
  width: 46%;
}
.mv .url-chip {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 4;
  background: #fff;
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  padding: 7px 10px;
  font: 500 11px var(--en);
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--ui-text);
}
.mv .url-chip b {
  font-family: "Noto Sans JP";
  font-size: 10px;
  color: var(--ui-accent);
}
.mv .scale-box {
  height: 100%;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--ui-line);
}
.split {
  position: absolute;
  inset: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.split > div {
  position: relative;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 0 0 1px var(--ui-line);
  overflow: hidden;
}
.split .lab {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 3;
  font-size: 10px;
  font-weight: 700;
  background: var(--ui-text);
  color: #fff;
  padding: 1px 7px;
  border-radius: 4px;
}
.split .lab.af {
  background: var(--ui-accent);
}
.mv-foot {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border: 1px solid var(--ui-line);
  border-radius: 9px;
  padding: 8px 10px;
  font-size: 11px;
}
.meta-panel {
  position: absolute;
  inset: 16px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--ui-line);
  padding: 14px;
  font-size: 11px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.meta-panel .f {
  display: grid;
  gap: 3px;
}
.meta-panel .f span {
  color: var(--ui-mute);
  font-size: 10px;
}
.meta-panel .f div {
  border: 1px solid var(--ui-line);
  border-radius: 6px;
  padding: 6px 8px;
  color: var(--ui-text);
}
.tree {
  font: 500 11px/1.9 var(--en);
  color: var(--ui-text);
  border: 1px solid var(--ui-line);
  border-radius: 6px;
  padding: 6px 10px;
}
.tree span {
  display: block;
}
.tree span.l2 {
  padding-left: 16px;
  color: var(--ui-mute);
}
.tree em {
  font-style: normal;
  color: var(--ui-accent);
  font-weight: 700;
  margin-right: 6px;
}
.dg {
  position: relative;
  height: 600px;
  overflow: hidden;
  background: #f6f6fa;
  font-family: "Noto Sans JP", var(--jp);
  letter-spacing: 0.02em;
  color: #1d1a33;
}
.dg-scr {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
  overflow: hidden;
}
.dg-scr.on {
  opacity: 1;
  pointer-events: auto;
}
.dg-hero {
  background:
    radial-gradient(120% 90% at 85% 0%, #8d1a8f 0%, transparent 55%),
    radial-gradient(90% 80% at 0% 100%, #5b3aa6 0%, transparent 60%), #24086b;
  color: #fff;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  align-items: center;
  padding: 0 40px;
}
.dg-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}
.dg-hero h4 {
  font-size: 30px;
  line-height: 1.4;
  font-weight: 900;
  color: #fff;
  margin: 14px 0 10px;
}
.dg-hero h4 span {
  color: #ff8fd2;
}
.dg-hero p {
  font-size: 12px;
  opacity: 0.85;
  margin: 0 0 20px;
  line-height: 1.8;
}
.dg-go {
  border: 0;
  background: #fff;
  color: #2a0a6e;
  font-weight: 900;
  font-size: 13px;
  padding: 11px 22px;
  border-radius: 999px;
}
.dg-ex {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  padding: 16px;
  font-size: 11px;
  line-height: 1.7;
}
.dg-ex b {
  display: block;
  font-size: 12.5px;
  margin: 4px 0;
}
.dg-ex .g {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}
.dg-ex .g span {
  border-left: 2px solid #ff8fd2;
  background: rgba(255, 255, 255, 0.08);
  padding: 3px 7px;
  border-radius: 3px;
}
.dg-form {
  padding: 20px 30px;
  overflow: auto;
}
.dg-form h5,
.dg-run h5 {
  font-size: 18px;
  font-weight: 900;
  margin: 0 0 4px;
}
.dg-form .sub {
  font-size: 11px;
  color: #6d6a85;
  margin: 0 0 14px;
}
.dg-box {
  background: #fff;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 8px;
  box-shadow: 0 0 0 1px #e6e4f0;
}
.dg-box .lb {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.dg-box .lb i {
  font-style: normal;
  font-size: 9.5px;
  background: #2a0a6e;
  color: #fff;
  padding: 1px 6px;
  border-radius: 3px;
}
.dg-in {
  border: 1.5px solid #6b4bd1;
  border-radius: 7px;
  padding: 7px 10px;
  font-size: 12px;
  min-height: 32px;
}
.dg-opts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.dg-opts span {
  border: 1px solid #e0ddeb;
  border-radius: 7px;
  padding: 6px 4px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  transition: all 0.3s;
}
.dg-opts span.on {
  border-color: #2a0a6e;
  background: #efeafd;
  box-shadow: inset 0 0 0 1px #2a0a6e;
}
.dg-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.dg-chips span {
  border: 1px solid #e0ddeb;
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 11px;
  transition: all 0.3s;
}
.dg-chips span.on {
  background: #2a0a6e;
  color: #fff;
  border-color: #2a0a6e;
}
.dg-q {
  display: grid;
  gap: 5px;
  font-size: 11px;
}
.dg-q div {
  display: flex;
  gap: 7px;
  align-items: center;
  border: 1px solid #e6e4f0;
  border-radius: 6px;
  padding: 5px 8px;
  opacity: 0;
  transition: opacity 0.4s;
}
.dg-q.on div {
  opacity: 1;
}
.dg-q div::before {
  content: "✓";
  font-size: 9px;
  color: #fff;
  background: #2a0a6e;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  display: grid;
  place-items: center;
  flex: none;
}
.dg-act {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}
.dg-act button {
  border: 0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 18px;
}
.dg-act .bk {
  background: #fff;
  box-shadow: 0 0 0 1px #e0ddeb;
  color: #1d1a33;
}
.dg-act .ask {
  background: #2a0a6e;
  color: #fff;
}
.dg-run {
  padding: 30px 34px;
}
.dg-bar {
  height: 3px;
  background: #e6e4f0;
  margin: 10px 0 18px;
  position: relative;
}
.dg-bar i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: linear-gradient(90deg, #2a0a6e, #d6358f);
  transition: width 3.6s linear;
}
.dg-run.go .dg-bar i {
  width: 100%;
}
.dg-run .cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.dg-run .ql {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 0 1px #e6e4f0;
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: start;
}
.dg-run .ql div {
  font-size: 10.5px;
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 6px;
  background: #f7f6fb;
  border-radius: 6px;
  padding: 7px;
}
.dg-run .ql .st {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid #c9c5da;
  margin-top: 1px;
}
.dg-run .ql .st.run {
  border-color: #6b4bd1;
  border-top-color: transparent;
  animation: spin 0.8s linear infinite;
}
.dg-run .ql .st.ok {
  background: #1f9d61;
  border-color: #1f9d61;
}
.dg-run .info {
  border-radius: 12px;
  padding: 18px;
  color: #fff;
  background: linear-gradient(135deg, #2a0a6e, #a3187f);
  font-size: 11.5px;
  line-height: 1.8;
}
.dg-run .info small {
  font-size: 10px;
  opacity: 0.75;
}
.dg-run .info b {
  display: block;
  font-size: 18px;
  line-height: 1.45;
  margin: 6px 0 8px;
}
.dg-res {
  padding: 22px 34px;
  overflow: auto;
}
.dg-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 0 1px #e6e4f0;
  border-top: 3px solid #b73a12;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.dg-card .tg {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  color: #b73a12;
  border: 1px solid #b73a12;
  border-radius: 999px;
  padding: 1px 10px;
}
.dg-card h6 {
  font-size: 13px;
  margin: 8px 0 10px;
}
.dg-step {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  font-size: 11px;
  margin-bottom: 8px;
}
.dg-step .c {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  color: #fff;
  background: #c9c5da;
}
.dg-step .c.ng {
  background: #c0392b;
}
.dg-step .warn {
  border: 1.5px dashed #e07a4f;
  background: #fff5ef;
  color: #b73a12;
  border-radius: 6px;
  padding: 6px 8px;
  margin-top: 4px;
  font-size: 10.5px;
}
.dg-dest {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  border: 2px solid #6b2bd9;
  background: #f3eafe;
  border-radius: 8px;
  padding: 8px 14px;
  margin-top: 6px;
}
.dg-dest b {
  font-size: 15px;
  color: #4a14a8;
}
.dg-dest small {
  display: block;
  font-size: 9.5px;
  color: #6d6a85;
}
.dg-dest .ic {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #4a14a8;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
}
:root {
  --black: #000;
  --white: #fff;
  --gray: #e1e2de;
  --gray-2: #e9eae6;
  --gray-3: #f4f4f2;
  --line: #cfd0ca;
  --mute: #5b5d58;
  --ink-2: #2a2b28;
  --purple: #4a28b4;
  --purple-deep: #3a1f91;
  --purple-tint: #efebfa;
  --red: #c60000;
  --red-tint: #fbeaea;
  --grad: linear-gradient(
    115deg,
    #e6163d 0%,
    #d2186f 32%,
    #8f22b3 64%,
    #4a28b4 100%
  );
  --glow: radial-gradient(
    120% 70% at 50% 0%,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0) 62%
  );
  --ink: var(--black);
  --paper: var(--white);
  --mist: var(--gray-2);
  --mist-2: var(--gray-3);
  --steel: #8d9ea5;
  --jp:
    Roboto, "游ゴシック体", YuGothic, "Yu Gothic Medium", "Yu Gothic",
    "Noto Sans JP", "Hiragino Sans", sans-serif;
  --en: Roboto, "Helvetica Neue", Arial, sans-serif;
  --disp: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wrap: 1200px;
  --gutter: 40px;
  --sec: 150px;
  --hdr: 80px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ui-bg: #ffffff;
  --ui-sub: #f6f6f8;
  --ui-line: #e6e6ec;
  --ui-text: #1d1d24;
  --ui-mute: #7b7b88;
  --ui-accent: #3d35b5;
  --ui-accent-tint: #ecebfb;
  --ui-pink: #e2187a;
  --ui-ok: #1f9d61;
  --ui-warn: #c98a06;
  --sc-navy: #13306b;
  --sc-teal: #149e8e;
  --sc-bg: #f4f7fb;
  --sc-text: #1b2433;
  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --black: #f2f2ef;
    --ink: #f2f2ef;
    --white: #121311;
    --paper: #121311;
    --gray: #1c1d1b;
    --gray-2: #20211f;
    --gray-3: #191a18;
    --line: #3a3c37;
    --mute: #a6a8a1;
    --ink-2: #d8dad3;
    --purple: #8f78ff;
    --purple-deep: #a593ff;
    --purple-tint: #271e4d;
    --red: #ff4d4d;
    --red-tint: #3a1414;
    --glow: radial-gradient(
      120% 70% at 50% 0%,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0) 62%
    );
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --black: #f2f2ef;
  --ink: #f2f2ef;
  --white: #121311;
  --paper: #121311;
  --gray: #1c1d1b;
  --gray-2: #20211f;
  --gray-3: #191a18;
  --line: #3a3c37;
  --mute: #a6a8a1;
  --ink-2: #d8dad3;
  --purple: #8f78ff;
  --purple-deep: #a593ff;
  --purple-tint: #271e4d;
  --red: #ff4d4d;
  --red-tint: #3a1414;
  --glow: radial-gradient(
    120% 70% at 50% 0%,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0) 62%
  );
  color-scheme: dark;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-padding-top: calc(var(--hdr) + env(safe-area-inset-top, 0px));
  -webkit-text-size-adjust: 100%;
}
main {
  overflow-x: clip;
}
body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--jp);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.1em;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 60;
  background: var(--white);
}
img,
svg {
  max-width: 100%;
}
a {
  color: inherit;
}
button {
  font-family: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 3px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: 700;
  color: var(--black);
}
h1,
h2,
h3,
h4,
.bridge,
.principle,
.sub,
.band,
.closing p {
  word-break: auto-phrase;
  text-wrap: balance;
}
.wrap {
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.sec {
  padding: var(--sec) 0;
  position: relative;
}
.bg-gray {
  background: var(--glow), var(--gray);
}
.bg-white {
  background: var(--white);
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.en {
  font-family: var(--en);
}

/* ---------- brand heading system ---------- */
.disp {
  font-family: var(--disp);
  font-weight: 900;
  font-size: 96px;
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--black);
}
.band {
  display: inline;
  background: var(--black);
  color: var(--white);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.75;
  padding: 0.08em 0.4em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  letter-spacing: 0.08em;
}
.band-wrap {
  margin: 18px 0 0;
}
.tag {
  display: inline-block;
  background: var(--black);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  padding: 1px 8px;
  letter-spacing: 0.06em;
}
.tag.en {
  font-family: var(--en);
  letter-spacing: 0.1em;
}
.shead {
  margin-bottom: 72px;
}
.shead .h2 {
  margin-top: 36px;
}
.h2 {
  font-size: 36px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.h3 {
  font-size: 26px;
  line-height: 1.55;
  letter-spacing: 0.08em;
}
.h4 {
  font-size: 18px;
  line-height: 1.6;
}
.lead {
  font-size: 16px;
  color: var(--ink-2);
  max-width: 42em;
  margin: 22px 0 0;
  line-height: 1.85;
}
.note {
  font-size: 12.5px;
  color: var(--mute);
  line-height: 1.7;
  letter-spacing: 0.05em;
  margin: 14px 0 0;
}
.frame-note {
  font-size: 12.5px;
  color: var(--mute);
  margin-top: 14px;
  letter-spacing: 0.05em;
}
.bridge {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 0.1em;
  text-align: center;
  margin: 0 auto;
  max-width: 28em;
}
.bridge.end {
  margin-top: 120px;
}
.principle {
  margin: 44px 0 0;
  display: flex;
  align-items: baseline;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.5;
}
.principle .q {
  background: linear-gradient(transparent 62%, var(--red-tint) 62%);
}
.principle small {
  font-size: 13px;
  color: var(--mute);
  font-weight: 700;
}
mark.hl {
  background: linear-gradient(transparent 58%, var(--purple-tint) 58%);
  color: inherit;
  padding: 0 0.08em;
}
em.r {
  font-style: normal;
  color: var(--red);
}

/* red offset block behind a visual */
.offset {
  position: relative;
  isolation: isolate;
}
.offset::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: clamp(48px, 6vw, 72px);
  background: var(--red);
  right: calc(-1 * clamp(18px, 2.2vw, 30px));
  top: -30px;
  height: 72%;
}
.offset.lb::before {
  right: auto;
  left: calc(-1 * clamp(18px, 2.2vw, 30px));
  top: auto;
  bottom: -30px;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 0 34px 0 22px;
  border-radius: 2px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  border: 0;
  background: var(--purple);
  color: #fff;
  transition: background 0.25s var(--ease);
}
.btn::before {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  flex: none;
}
.btn:hover {
  background: var(--purple-deep);
}
.btn.sm {
  min-height: 48px;
  font-size: 15px;
  padding: 0 24px 0 18px;
}
.btn.ghost {
  background: transparent;
  color: var(--black);
  box-shadow: inset 0 0 0 1.5px var(--black);
}
.btn.ghost:hover {
  background: var(--black);
  color: var(--white);
}
.btn.ext::after {
  content: "";
  width: 11px;
  height: 11px;
  border: 1.5px solid currentColor;
  border-left: 0;
  border-bottom: 0;
  margin-left: 2px;
}
.tlink {
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 2px;
}

/* ---------- header ---------- */
.hdr {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  height: var(--hdr);
  background: color-mix(in srgb, var(--white) 94%, transparent);
  backdrop-filter: blur(10px);
}
.hdr .wrap {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: none;
  padding: 0 36px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  flex: none;
  color: var(--black);
}
.logo {
  display: flex;
  align-items: center;
  gap: 6px;
}
.logo svg {
  width: 15px;
  height: 24px;
}
.logo b {
  font-family: var(--disp);
  font-weight: 900;
  font-size: 25px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.brand .prod {
  font-size: 13px;
  font-weight: 700;
  padding-left: 14px;
  border-left: 1px solid var(--line);
  letter-spacing: 0.06em;
}
.gnav {
  display: flex;
  gap: 26px;
  margin-left: auto;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.gnav a {
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.gnav a:hover {
  border-bottom-color: var(--purple);
}
.hdr .btn {
  min-height: 44px;
  font-size: 14px;
  padding: 0 20px 0 16px;
  gap: 10px;
}
.hdr .btn::before {
  width: 6px;
  height: 6px;
}

/* ---------- reveal (reversible) ---------- */
[data-rv] {
  transition:
    opacity 0.9s var(--ease),
    transform 0.9s var(--ease),
    clip-path 1s var(--ease);
  transition-delay: var(--d, 0s);
}
.js [data-rv] {
  opacity: 0;
  transform: translateY(32px);
}
.js [data-rv="mask"] {
  opacity: 1;
  transform: none;
  clip-path: inset(-20% 100% -30% -2%);
}
.js [data-rv="left"] {
  transform: translateX(-36px);
}
.js [data-rv="right"] {
  transform: translateX(36px);
}
.js [data-rv="scale"] {
  transform: scale(0.96);
}
.js [data-rv].is-in {
  opacity: 1;
  transform: none;
}
.js [data-rv="mask"].is-in {
  clip-path: inset(-20% -4% -30% -2%);
}

/* ---------- 01 HERO ---------- */
.hero {
  padding: 64px 0 110px;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr);
  gap: 64px;
  align-items: center;
}
.hero-grid > * {
  min-width: 0;
}
.hero .prodname {
  font-family: var(--disp);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hero .prodname small {
  font-family: var(--jp);
  font-size: 12px;
  font-weight: 700;
  color: var(--mute);
  letter-spacing: 0.06em;
}
.hero .h1main {
  font-size: 58px;
  font-weight: 900;
  line-height: 1.38;
  letter-spacing: 0.04em;
  margin: 30px 0 0;
}
.hero .h1main em {
  font-style: normal;
  color: var(--red);
}
.hero .sub {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.75;
  margin: 28px 0 0;
}
.hero .lead {
  font-size: 15px;
  margin-top: 16px;
}
.hero-cta {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
  margin-top: 38px;
}
.promises {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 84px 0 0;
  padding: 0;
  list-style: none;
}
.promises li {
  background: var(--white);
  padding: 26px 28px;
  position: relative;
}
.promises li .tag {
  position: absolute;
  left: 0;
  top: -13px;
}
.promises b {
  display: block;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.5;
}
.promises span {
  display: block;
  font-size: 14px;
  color: var(--ink-2);
  margin-top: 6px;
  line-height: 1.7;
}
/* hero live */
.live {
  position: relative;
}
.live-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.live-tabs {
  display: flex;
  background: var(--white);
}
.live-tabs button {
  border: 0;
  background: transparent;
  color: var(--black);
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  gap: 8px;
  align-items: center;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.06em;
}
.live-tabs button .en {
  font-size: 11px;
  letter-spacing: 0.12em;
}
.live-tabs button[aria-selected="true"] {
  background: var(--black);
  color: var(--white);
}
.live-tabs button .prog {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  background: var(--red);
  width: 0;
}
.live-tabs button[aria-selected="true"] .prog {
  animation: prog var(--dur, 14s) linear forwards;
}
.paused .live-tabs button .prog {
  animation-play-state: paused;
}
@keyframes prog {
  to {
    width: 100%;
  }
}
.live .icon-btn {
  margin-left: auto;
  border: 0;
  background: var(--white);
  color: var(--black);
  width: 36px;
  height: 36px;
}
.live .app {
  grid-template-columns: 40px 37% 1fr;
  height: 520px;
}
.live .app-home {
  inset: 0 0 0 40px;
}
.live .app-rail {
  gap: 12px;
}
.live .chat-log {
  padding: 14px 14px 6px;
  gap: 10px;
}
.live .chat-log .bubble,
.live .chat-log .ai-msg {
  font-size: 11.5px;
}
.live .chat-log .step-line {
  font-size: 11px;
}
.live .app-chat .composer {
  margin: 0 10px 10px;
}
.live .tags {
  position: absolute;
  right: -26px;
  left: auto;
  bottom: 70px;
  z-index: 7;
}
.turn {
  font: 700 9.5px var(--en);
  color: var(--ui-mute);
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}
.turn::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ui-line);
}

/* ---------- 02 PROBLEM ---------- */
.prob-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 72px;
  align-items: start;
}
.prob-grid .shead {
  position: sticky;
  top: calc(var(--hdr) + 48px);
  margin: 0;
}
.scenes {
  display: grid;
  gap: 28px;
}
.scene {
  min-width: 0;
  background: var(--gray-3);
  padding: 36px 38px 34px;
  position: relative;
}
.scene .tag {
  position: absolute;
  left: 0;
  top: -12px;
}
.scene q {
  display: block;
  quotes: "「" "」";
  font-size: 22px;
  font-weight: 700;
  line-height: 1.6;
  margin: 4px 0 12px;
  letter-spacing: 0.06em;
}
.scene p {
  margin: 0;
  color: var(--ink-2);
  font-size: 15px;
}
.pbar {
  margin-top: 26px;
}
.pbar .track {
  display: flex;
  height: 36px;
  gap: 3px;
}
.pbar .seg {
  position: relative;
  transform-origin: left;
  transform: scaleX(var(--s, 0));
}
.pbar .seg.work {
  background: var(--black);
}
.pbar .seg.wait {
  background: repeating-linear-gradient(
    135deg,
    var(--steel) 0 6px,
    color-mix(in srgb, var(--steel) 55%, var(--white)) 6px 12px
  );
}
.pbar .labels {
  display: flex;
  gap: 3px;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--mute);
  line-height: 1.4;
  letter-spacing: 0.04em;
}
.pbar .labels span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pbar .sum {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 700;
}
.pbar .sum b {
  color: var(--red);
}
.legend {
  display: flex;
  gap: 18px;
  font-size: 12.5px;
  color: var(--mute);
  margin-top: 6px;
  flex-wrap: wrap;
}
.legend i {
  display: inline-block;
  width: 14px;
  height: 10px;
  margin-right: 6px;
  vertical-align: -1px;
}
.more {
  margin-top: 28px;
  background: var(--black);
  color: var(--white);
  padding: 30px 38px;
}
.more h3 {
  color: var(--white);
  font-size: 19px;
}
.more ul {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.more li {
  font-size: 15.5px;
  font-weight: 700;
  display: flex;
  gap: 14px;
  align-items: baseline;
}
.more li::before {
  content: "";
  width: 12px;
  height: 2px;
  background: var(--red);
  transform: translateY(-4px);
  flex: none;
}

/* ---------- 03 SOLUTION ---------- */
.interlude {
  position: relative;
  color: #fff;
  overflow: hidden;
  background: var(--grad);
  padding: 140px 0 150px;
}
.interlude canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.interlude .wrap {
  position: relative;
}
.interlude .tag {
  background: #fff;
  color: #000;
}
.interlude h2 {
  color: #fff;
  font-size: 64px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.04em;
  margin-top: 28px;
}
.interlude p.sub {
  font-size: 20px;
  font-weight: 700;
  margin: 28px 0 0;
  letter-spacing: 0.08em;
}
.interlude .bridge-in {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: 0 0 40px;
  opacity: 0.92;
}
.demo-sec {
  padding: 110px 0 var(--sec);
}
.demo-tabs {
  display: flex;
  background: var(--white);
  width: max-content;
  max-width: 100%;
}
.demo-tabs button {
  background: none;
  border: 0;
  color: var(--black);
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.06em;
}
.demo-tabs button .en {
  font-size: 11.5px;
  letter-spacing: 0.14em;
}
.demo-tabs button[aria-selected="true"] {
  background: var(--black);
  color: var(--white);
}
.rail {
  list-style: none;
  margin: 28px 0 24px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line);
}
.rail li {
  position: relative;
}
.rail button {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  color: var(--mute);
  padding: 16px 16px 6px 0;
  transition: color 0.3s;
  letter-spacing: 0.06em;
}
.rail button::before {
  content: "";
  position: absolute;
  left: 0;
  top: -2px;
  height: 3px;
  width: 0;
  background: var(--red);
  transition: width 0.4s var(--ease);
}
.rail .n {
  font: 700 12px var(--en);
  letter-spacing: 0.12em;
}
.rail .t {
  display: block;
  font-size: 17px;
  font-weight: 700;
  margin-top: 2px;
}
.rail .d {
  display: block;
  font-size: 12.5px;
  line-height: 1.65;
  margin-top: 4px;
  letter-spacing: 0.04em;
}
.rail li.done button {
  color: var(--ink-2);
}
.rail li.cur button {
  color: var(--black);
}
.rail li.cur button::before {
  width: 100%;
}
.rail li.done button::before {
  width: 100%;
  background: var(--black);
}
.demo .app {
  aspect-ratio: 16/9.4;
  grid-template-columns: 46px 36% 1fr;
  min-height: 520px;
}
.demo-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.demo-ctrl {
  display: flex;
  gap: 8px;
}
.demo-ctrl button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  background: var(--white);
  color: var(--black);
  display: grid;
  place-items: center;
}
.demo-ctrl svg {
  width: 14px;
  height: 14px;
}
.demo-cap {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  min-height: 1.8em;
  margin: 0;
}
.demo-cap .n {
  font: 700 12px var(--en);
  color: var(--red);
  letter-spacing: 0.12em;
  margin-right: 10px;
}
.mid-cta {
  margin-top: 96px;
  background: var(--white);
  padding: 44px 48px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px 40px;
  align-items: center;
  position: relative;
}
.mid-cta .tag {
  position: absolute;
  left: 0;
  top: -13px;
}
.mid-cta h3 {
  font-size: 24px;
  line-height: 1.55;
}
.mid-cta p {
  margin: 8px 0 0;
  color: var(--ink-2);
  font-size: 15px;
}

/* ---------- 04 CORE ---------- */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 20px;
}
.compare-q {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  font-weight: 700;
  margin-top: 88px;
}
.compare-q .bubble {
  font-size: 14px;
  padding: 10px 16px;
  background: var(--gray-3);
  color: var(--black);
  border-radius: 14px 14px 4px 14px;
}
.cmp {
  background: var(--gray-3);
  padding: 30px;
}
.cmp h3 {
  font-size: 17px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  letter-spacing: 0.06em;
}
.cmp.bad h3 {
  color: var(--mute);
}
.cmp-stage {
  position: relative;
  height: 330px;
  background: #e8eaee;
  padding: 12px;
}
.cmp-stage .scale-box {
  height: 100%;
  background: #fff;
  box-shadow: 0 0 0 1px #dde1e6;
}
.cmp ol {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.cmp li {
  display: flex;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.6;
  letter-spacing: 0.06em;
}
.cmp li .no {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font: 700 11.5px/22px var(--en);
  text-align: center;
  background: var(--black);
  color: var(--white);
  letter-spacing: 0;
}
.cmp.bad li .no {
  background: transparent;
  color: var(--mute);
  box-shadow: inset 0 0 0 1px var(--mute);
}
.cmp.bad li {
  color: var(--mute);
}
.ann {
  position: absolute;
  z-index: 3;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font: 700 12px/24px var(--en);
  text-align: center;
  background: var(--black);
  color: #fff;
  box-shadow: 0 0 0 3px #fff;
  letter-spacing: 0;
}
.cmp.bad .ann {
  background: #6f726b;
}
.gx {
  width: 720px;
  background: #fff;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  color: #222;
  letter-spacing: 0.02em;
}
.gx-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  padding: 0 26px;
  font-size: 12px;
  background: #1b1330;
  color: #fff;
}
.gx-hdr b {
  font-size: 15px;
  letter-spacing: 0.1em;
}
.gx-fv {
  padding: 40px 26px;
  background: linear-gradient(120deg, #7b2ff7, #f107a3);
  color: #fff;
  text-align: center;
}
.gx-fv h1 {
  font-size: 28px;
  margin: 0 0 10px;
  font-weight: 700;
  color: #fff;
}
.gx-fv p {
  margin: 0;
  font-size: 12px;
  opacity: 0.9;
}
.gx-sec {
  padding: 22px 26px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.gx-card {
  border-radius: 22px;
  background: #f6efff;
  padding: 16px;
  font-size: 11px;
  text-align: center;
}
.gx-card b {
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
  color: #5b1fc4;
}
.gx-strip {
  margin: 0 26px 20px;
  padding: 16px;
  border-radius: 30px;
  background: #fff3c4;
  font-size: 12px;
  text-align: center;
  font-weight: 700;
}
/* sticky layers story */
.story {
  position: relative;
  height: 330vh;
  margin-top: 130px;
}
.story-pin {
  position: sticky;
  top: calc(var(--hdr) + 24px);
  height: calc(100vh - var(--hdr) - 48px);
  min-height: 560px;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 56px;
  align-items: center;
}
.story-left h3 {
  font-size: 30px;
  line-height: 1.5;
  letter-spacing: 0.08em;
}
.layer-list {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  position: relative;
}
.layer-list::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--line);
}
.layer-list .bar {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  background: var(--red);
  height: calc(var(--p, 0) * 100%);
}
.layer-list li {
  padding: 14px 0 14px 26px;
  color: var(--mute);
  transition: color 0.4s;
}
.layer-list li.on {
  color: var(--black);
}
.layer-list button {
  all: unset;
  cursor: pointer;
  display: block;
  width: 100%;
}
.layer-list .n {
  font: 700 12px var(--en);
  letter-spacing: 0.12em;
}
.layer-list .t {
  display: block;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-top: 2px;
}
.layer-list .s {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.layer-list .d {
  display: block;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.6s var(--ease),
    opacity 0.5s,
    margin 0.5s;
}
.layer-list li.on .d {
  max-height: 9em;
  opacity: 1;
  margin-top: 8px;
}
.layer-reuse {
  margin-top: 26px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.06em;
}
.layer-reuse span {
  display: flex;
  gap: 10px;
  align-items: center;
}
.story-view {
  position: relative;
  height: 100%;
  display: grid;
  align-items: center;
}
.layer-pane {
  grid-area: 1/1;
  opacity: 0;
  transform: translateY(24px) scale(0.985);
  transition:
    opacity 0.6s var(--ease),
    transform 0.7s var(--ease);
  pointer-events: none;
}
.layer-pane.on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.layer-pane .note {
  margin-top: 10px;
}
.model {
  background: var(--gray-3);
  padding: 28px;
}
.model-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.mtype {
  background: var(--white);
  padding: 16px 18px;
  position: relative;
}
.mtype h5 {
  margin: 0 0 10px;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mtype h5 small {
  font: 500 11px var(--en);
  color: var(--mute);
  letter-spacing: 0.04em;
}
.mtype ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  display: grid;
  gap: 6px;
  letter-spacing: 0.04em;
}
.mtype li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px dashed var(--line);
  padding-bottom: 5px;
  opacity: 0;
  transform: translateX(-8px);
  transition: all 0.45s var(--ease);
  transition-delay: var(--d, 0s);
}
.layer-pane.on .mtype li {
  opacity: 1;
  transform: none;
}
.mtype li span:last-child {
  font: 500 11px var(--en);
  color: var(--mute);
}
.skill-card .app {
  padding: 0;
}

/* ---------- 05 FEATURES ---------- */
.fgroups {
  display: flex;
  background: var(--white);
  width: max-content;
  max-width: 100%;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.fgroups button {
  background: none;
  border: 0;
  color: var(--black);
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.4;
  gap: 2px;
  letter-spacing: 0.06em;
}
.fgroups button small {
  font: 700 10.5px var(--en);
  letter-spacing: 0.14em;
  color: var(--mute);
}
.fgroups button[aria-selected="true"] {
  background: var(--black);
  color: var(--white);
}
.fgroups button[aria-selected="true"] small {
  color: inherit;
  opacity: 0.75;
}
.fpanel {
  display: none;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: 44px;
  align-items: start;
}
.fpanel.on {
  display: grid;
}
.fvis {
  position: sticky;
  top: calc(var(--hdr) + 24px);
}
.fvis .app {
  min-height: 300px;
}
.flist {
  background: var(--white);
  padding: 4px 30px;
}
.fitem + .fitem {
  border-top: 1px solid var(--line);
}
.fitem summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 40px 22px 0;
  position: relative;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 2px 6px;
}
.fitem summary::-webkit-details-marker {
  display: none;
}
.fitem summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 30px;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--purple);
  border-bottom: 2px solid var(--purple);
  transform: rotate(45deg);
  transition: transform 0.3s;
}
.fitem[open] summary::after {
  transform: rotate(-135deg);
  top: 35px;
}
.fitem .no {
  font: 700 13px var(--en);
  color: var(--red);
  grid-row: 1/3;
  padding-top: 3px;
}
.fitem .tt {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.fitem .ds1 {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.7;
  letter-spacing: 0.05em;
}
.fbody {
  padding: 0 0 24px 44px;
  display: grid;
  gap: 16px;
}
.fbody h6 {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--mute);
  letter-spacing: 0.08em;
}
.fbody ul {
  margin: 0;
  padding-left: 1.1em;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
.konna div {
  background: var(--gray-3);
  padding: 13px 16px;
}
.konna small {
  display: block;
  font-size: 11.5px;
  color: var(--mute);
  margin-bottom: 2px;
  font-weight: 700;
}
.konna b {
  display: block;
  font-size: 14px;
}
.konna p {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.75;
}
.checklist {
  margin-top: 56px;
  background: var(--white);
  padding: 0 30px;
}
.checklist summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 0;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  letter-spacing: 0.06em;
}
.checklist summary::-webkit-details-marker {
  display: none;
}
.checklist summary::after {
  content: "＋";
  color: var(--purple);
}
.checklist[open] summary::after {
  content: "－";
}
.tbl-scroll {
  overflow-x: auto;
  padding-bottom: 20px;
}
.ftable {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 640px;
  letter-spacing: 0.05em;
}
.ftable th,
.ftable td {
  border-bottom: 1px solid var(--line);
  padding: 12px 10px;
  text-align: left;
  vertical-align: top;
}
.ftable th {
  font-size: 12px;
  color: var(--mute);
}
/* case player */
.cases {
  margin-top: 150px;
}
.case-grid {
  display: grid;
  grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr);
  gap: 48px;
  align-items: start;
  margin-top: 48px;
}
.case-list {
  display: grid;
  gap: 24px;
}
.case-grp .tag {
  margin-bottom: 10px;
}
.case-btn {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  width: 100%;
  text-align: left;
  background: var(--white);
  border: 0;
  padding: 16px 18px;
  margin-top: 6px;
  color: var(--black);
  position: relative;
  transition: background 0.3s;
}
.case-btn small {
  font-size: 11.5px;
  color: var(--mute);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.case-btn b {
  font-size: 15.5px;
  letter-spacing: 0.06em;
}
.case-btn::after {
  content: "";
  grid-row: 1/3;
  grid-column: 2;
  align-self: center;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--purple);
  border-right: 2px solid var(--purple);
  transform: rotate(45deg);
}
.case-btn[aria-selected="true"] {
  background: var(--black);
  color: var(--white);
}
.case-btn[aria-selected="true"] small {
  color: #bdbdb8;
}
.case-btn[aria-selected="true"]::after {
  border-color: #fff;
}
.case-btn .pg {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  background: var(--red);
  width: 0;
}
.case-btn[aria-selected="true"] .pg {
  animation: prog var(--dur, 7s) linear forwards;
}
.case-stage .app {
  display: grid;
  grid-template-columns: 34% 1fr;
  height: 470px;
}
.case-stage .app-chat .chat-log {
  padding: 16px 14px 6px;
}
.case-cap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 18px;
}
.case-cap div {
  background: var(--white);
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.05em;
}
.case-cap small {
  display: block;
  font-size: 11.5px;
  color: var(--mute);
  font-weight: 700;
}
.ev {
  position: absolute;
  inset: 0;
  background: #fff;
  font-family: "Noto Sans JP", var(--jp);
  color: var(--sc-text);
  letter-spacing: 0.02em;
}
/* showcase */
.showcase {
  margin-top: 150px;
  display: grid;
  grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr);
  gap: 48px;
  align-items: start;
}
.show-steps {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}
.show-steps li {
  padding: 13px 0;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 6px;
  letter-spacing: 0.05em;
  color: var(--mute);
  transition: color 0.3s;
}
.show-steps li b {
  font: 700 12px var(--en);
  padding-top: 3px;
}
.show-steps li.cur {
  color: var(--black);
  font-weight: 700;
}
.show-steps li.cur b {
  color: var(--red);
}
.dg-ctrl {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 18px;
  flex-wrap: wrap;
}
.dg-ctrl .icon-btn {
  width: 48px;
  height: 48px;
  border: 0;
  background: var(--white);
  color: var(--black);
}

/* ---------- 06 AEO ---------- */
.aeo {
  background: var(--white);
  padding: 76px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.aeo-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: center;
}
.aeo .bridge-s {
  font-size: 14px;
  font-weight: 700;
  color: var(--mute);
  margin: 0 0 16px;
  letter-spacing: 0.1em;
}
.aeo h2 {
  font-size: 22px;
  line-height: 1.65;
  margin-top: 14px;
}
.aeo p {
  font-size: 14.5px;
  color: var(--ink-2);
  margin: 12px 0 0;
}
.aeo-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.aeo-steps li {
  background: var(--gray-3);
  padding: 18px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-2);
  letter-spacing: 0.05em;
}
.aeo-steps b {
  display: block;
  font-size: 15px;
  color: var(--black);
  margin-bottom: 4px;
}
.aeo-steps b span {
  font: 700 11px var(--en);
  color: var(--red);
  margin-right: 8px;
}
.aeo .btn {
  margin-top: 22px;
}

/* ---------- 07 SAFETY ---------- */
.gstory {
  position: relative;
  height: 280vh;
  margin-top: 56px;
}
.gpin {
  position: sticky;
  top: calc(var(--hdr) + 24px);
  min-height: calc(100vh - var(--hdr) - 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.gbox {
  background: var(--white);
  padding: 44px 44px 36px;
  position: relative;
}
.gbox .tag {
  position: absolute;
  left: 0;
  top: -13px;
}
.gates {
  position: relative;
  --i: 0;
}
.g-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.g-head p {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.g-head .prog {
  font: 700 12px var(--en);
  color: var(--mute);
  letter-spacing: 0.12em;
}
.g-track {
  position: relative;
  height: 200px;
}
.g-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 199px;
  height: 1px;
  background: var(--line);
}
.g-fill {
  position: absolute;
  left: 0;
  top: 198px;
  height: 3px;
  background: var(--red);
  width: calc(100% / 5 * var(--i) + 8px);
}
.g-card {
  position: absolute;
  top: 0;
  width: 236px;
  height: 134px;
  left: min(calc(100% / 5 * var(--i)), calc(100% - 236px));
  background: var(--black);
  color: var(--white);
  padding: 14px 16px;
  z-index: 2;
}
.g-card b {
  display: block;
  font-size: 14px;
}
.g-card small {
  display: block;
  font-size: 11.5px;
  color: #bdbdb8;
}
.g-card .tg {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
}
.g-card .tg span {
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  background: #fff;
  color: #000;
  letter-spacing: 0.04em;
  opacity: 0;
  transform: translateY(4px);
  transition: all 0.35s var(--ease);
}
.g-card .tg span.on {
  opacity: 1;
  transform: none;
}
.g-card .tg span.back {
  background: var(--red);
  color: #fff;
}
.g-stem {
  position: absolute;
  top: 134px;
  height: 65px;
  width: 1px;
  background: var(--black);
  left: calc(100% / 5 * var(--i) + 7px);
}
.g-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.g-list li {
  position: relative;
  padding: 28px 14px 0 0;
  color: var(--mute);
  transition: color 0.35s;
}
.g-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -8px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--line);
  transition: all 0.35s;
}
.g-list li.pass {
  color: var(--ink-2);
}
.g-list li.pass::before {
  background: var(--black);
  box-shadow: none;
}
.g-list li.cur {
  color: var(--black);
}
.g-list li.cur::before {
  background: var(--red);
  box-shadow: 0 0 0 6px var(--red-tint);
}
.g-list .n {
  font: 700 12px var(--en);
  letter-spacing: 0.12em;
}
.g-list .t {
  display: block;
  font-size: 19px;
  font-weight: 700;
  margin: 2px 0 4px;
  letter-spacing: 0.08em;
}
.g-list .d {
  display: block;
  font-size: 12.5px;
  line-height: 1.7;
  letter-spacing: 0.04em;
}
.layers3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.l3 {
  background: var(--white);
  padding: 30px 28px;
  position: relative;
}
.l3 .ab {
  font-family: var(--disp);
  font-weight: 900;
  font-size: 40px;
  line-height: 1;
}
.l3 h3 {
  font-size: 18px;
  margin: 12px 0 14px;
  line-height: 1.5;
  letter-spacing: 0.06em;
}
.l3 ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  font-size: 14px;
  letter-spacing: 0.05em;
}
.l3 li {
  padding-left: 16px;
  position: relative;
  line-height: 1.65;
}
.l3 li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 8px;
  height: 2px;
  background: var(--red);
}
.never {
  margin-top: 20px;
  background: var(--black);
  color: var(--white);
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
}
.never h3 {
  color: var(--white);
  font-size: 20px;
  padding: 30px;
  display: flex;
  align-items: center;
  border-right: 1px solid #333;
}
.never ul {
  margin: 0;
  padding: 24px 30px;
  list-style: none;
  display: grid;
  gap: 10px;
}
.never li {
  display: flex;
  gap: 12px;
  font-size: 15px;
  font-weight: 700;
  align-items: baseline;
  letter-spacing: 0.06em;
}
.never li svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: #ff6b6b;
}

/* ---------- 08 START ---------- */
.entries {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.entry {
  background: var(--gray-3);
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.entry .tag {
  position: absolute;
  left: 0;
  top: -12px;
}
.entry h3 {
  font-size: 22px;
  margin: 4px 0 12px;
  letter-spacing: 0.08em;
}
.entry p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.8;
}
.entry .fit {
  margin-top: auto;
  padding-top: 18px;
  font-size: 13.5px;
}
.entry .fit b {
  display: block;
  font-size: 12px;
  color: var(--mute);
}
.entry .dia {
  margin: 22px 0 18px;
  height: 150px;
  position: relative;
}
.price-note {
  margin: 24px 0 0;
  font-size: 14px;
  color: var(--ink-2);
}
.flow {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  counter-reset: f;
}
.flow li {
  background: var(--gray-3);
  padding: 20px 18px;
  position: relative;
}
.flow li::after {
  content: "";
  position: absolute;
  right: -8px;
  top: 50%;
  width: 8px;
  height: 2px;
  background: var(--red);
}
.flow li:last-child::after {
  display: none;
}
.flow .n {
  font: 700 12px var(--en);
  letter-spacing: 0.12em;
  color: var(--red);
}
.flow b {
  display: block;
  font-size: 16px;
  margin: 4px 0;
  letter-spacing: 0.06em;
}
.flow span {
  display: block;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.7;
}
.sub-h {
  margin-top: 110px;
}
.stack {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px;
  margin-top: 30px;
  align-items: start;
}
.tier {
  display: grid;
  gap: 8px;
}
.tier div {
  padding: 16px 20px;
  font-size: 14px;
  display: grid;
  gap: 2px;
  background: var(--gray-3);
}
.tier div b {
  font-size: 15px;
}
.tier div span {
  font-size: 12.5px;
  color: var(--ink-2);
}
.tier .t1 {
  background: var(--black);
  color: var(--white);
}
.tier .t1 span {
  color: #bdbdb8;
}
.tier .t3 {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px dashed;
}
.menus {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.menu {
  background: var(--gray-3);
  padding: 20px 22px;
}
.menu b {
  display: block;
  font-size: 16px;
  margin-bottom: 6px;
  letter-spacing: 0.06em;
}
.menu p {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.75;
}
.menu a {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
}
.roadmap {
  margin-top: 90px;
  background: var(--black);
  color: var(--white);
  padding: 34px 38px;
}
.roadmap h3 {
  color: var(--white);
}
.roadmap ol {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.roadmap li {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.6;
  border-top: 2px solid var(--red);
  padding-top: 12px;
  letter-spacing: 0.06em;
}
.roadmap li span {
  display: block;
  font: 700 11.5px var(--en);
  color: #bdbdb8;
  letter-spacing: 0.12em;
}
.roadmap .note {
  color: #bdbdb8;
}

/* ---------- 09 FAQ ---------- */
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: 48px;
}
.faq-cats {
  position: sticky;
  top: calc(var(--hdr) + 24px);
  align-self: start;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.faq-cats a {
  display: block;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 14px;
  background: var(--gray-3);
  letter-spacing: 0.06em;
}
.faq-block + .faq-block {
  margin-top: 44px;
}
.faq-block h3 {
  font-size: 15px;
  margin-bottom: 10px;
}
.faq-block h3 span {
  background: var(--black);
  color: var(--white);
  padding: 1px 8px;
}
.qa {
  background: var(--gray-3);
}
.qa + .qa {
  margin-top: 6px;
}
.qa summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 50px 20px 52px;
  position: relative;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: 0.06em;
}
.qa summary::-webkit-details-marker {
  display: none;
}
.qa summary::before {
  content: "Q";
  position: absolute;
  left: 20px;
  top: 18px;
  font: 900 19px var(--disp);
  color: var(--purple);
}
.qa summary::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 28px;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--purple);
  border-bottom: 2px solid var(--purple);
  transform: rotate(45deg);
  transition: transform 0.3s;
}
.qa[open] summary::after {
  transform: rotate(-135deg);
  top: 33px;
}
.qa .a {
  padding: 0 50px 22px 52px;
  position: relative;
  font-size: 15px;
  color: var(--ink-2);
}
.qa .a::before {
  content: "A";
  position: absolute;
  left: 20px;
  top: -2px;
  font: 900 19px var(--disp);
  color: var(--red);
}
.qa .a p {
  margin: 0;
}

/* ---------- 10 CONTACT ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: start;
}
.contact .h2 {
  font-size: 30px;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}
.chips button {
  border: 0;
  background: var(--white);
  color: var(--black);
  font-size: 13.5px;
  font-weight: 700;
  padding: 10px 16px;
  letter-spacing: 0.06em;
}
.chips button[aria-pressed="true"] {
  background: var(--black);
  color: var(--white);
}
.form {
  background: var(--white);
  padding: 40px;
}
.field {
  display: grid;
  gap: 6px;
  margin-bottom: 18px;
}
.field label,
.field .lb {
  font-size: 13.5px;
  font-weight: 700;
  display: flex;
  gap: 8px;
  align-items: center;
  letter-spacing: 0.06em;
}
.req {
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  background: var(--red);
  padding: 1px 6px;
}
.opt {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--mute);
  box-shadow: inset 0 0 0 1px var(--line);
  padding: 0 6px;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="url"],
.field textarea,
.field select {
  font: inherit;
  font-size: 15px;
  letter-spacing: 0.05em;
  padding: 12px 14px;
  border: 0;
  background: var(--gray-3);
  color: var(--black);
  border-radius: 2px;
  width: 100%;
  box-shadow: inset 0 0 0 1px transparent;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  box-shadow: inset 0 0 0 1.5px var(--purple);
  outline: none;
}
.field textarea {
  min-height: 110px;
  resize: vertical;
}
.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.radios {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.radios label {
  background: var(--gray-3);
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  gap: 8px;
  align-items: center;
  cursor: pointer;
  letter-spacing: 0.05em;
}
.radios input,
.check input {
  accent-color: var(--purple);
}
.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.6;
}
.check input {
  margin-top: 5px;
}
.form .btn {
  width: 100%;
  justify-content: center;
  margin-top: 12px;
}
.form-done {
  display: none;
  background: var(--black);
  color: var(--white);
  padding: 18px 20px;
  font-size: 14.5px;
  margin-top: 16px;
}
.form-done.on {
  display: block;
}
.closing {
  position: relative;
  overflow: hidden;
  background: var(--grad);
  color: #fff;
  padding: 120px 0;
}
.closing canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.closing .wrap {
  position: relative;
  text-align: center;
}
.closing p {
  font-size: 48px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.06em;
  margin: 0;
}
.closing .btn {
  margin-top: 40px;
  background: #fff;
  color: #000;
}
.closing .btn:hover {
  background: #e9e9e9;
}
.ftr {
  padding: 48px 0 calc(48px + env(safe-area-inset-bottom, 0px));
  font-size: 13px;
  background: var(--white);
}
.ftr .wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.ftr nav {
  display: flex;
  gap: 18px;
}
.ftr address {
  font-style: normal;
  color: var(--mute);
}
.ftr .cp {
  margin-left: auto;
  color: var(--mute);
  font-family: var(--en);
}
.sp-cta {
  display: none;
}
.review-toggle {
  position: fixed;
  left: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  font: 700 12px var(--jp);
  letter-spacing: 0.04em;
  padding: 9px 14px;
  border-radius: 2px;
  border: 0;
  background: var(--black);
  color: var(--white);
}
body.review .review-toggle {
  background: #fff4d6;
  color: #5c3d00;
}
.rv {
  display: none;
  align-items: center;
  gap: 6px;
  font: 700 11px/1.5 var(--en);
  letter-spacing: 0.04em;
  color: #8a5a00;
  background: #fff4d6;
  border: 1px dashed #d9a400;
  padding: 2px 8px;
  vertical-align: middle;
  margin-left: 6px;
}
body.review .rv {
  display: inline-flex;
}
body.review .rv.block {
  display: flex;
  margin: 10px 0 0;
}

/* helpers used by mocks */
.instant,
.instant * {
  transition: none !important;
  animation: none !important;
}
.scale-box > .gx {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}
.scale-box.phone {
  width: 40%;
  margin: 0 auto;
}
.ui-btn.pressed {
  transform: scale(0.94);
}
.ui-btn {
  transition:
    transform 0.15s,
    background 0.3s;
  white-space: nowrap;
  flex: none;
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .gnav {
    display: none;
  }
  .hdr .btn {
    margin-left: auto;
  }
  .hero-grid,
  .prob-grid,
  .showcase,
  .case-grid,
  .aeo-grid,
  .contact-grid,
  .faq-grid,
  .stack {
    grid-template-columns: 1fr;
  }
  .prob-grid .shead {
    position: static;
    margin-bottom: 24px;
  }
  .live .tags {
    left: 12px;
  }
  .fpanel {
    grid-template-columns: 1fr;
  }
  .fvis {
    position: static;
  }
  .faq-cats {
    position: static;
    grid-template-columns: repeat(4, auto);
    justify-content: start;
  }
  .entries {
    grid-template-columns: 1fr;
  }
  .story {
    height: auto;
  }
  .story-pin {
    position: static;
    height: auto;
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .story-view {
    display: grid;
    gap: 36px;
  }
  .layer-pane {
    grid-area: auto;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .layer-list li .d {
    max-height: none;
    opacity: 1;
    margin-top: 6px;
  }
  .layer-list li {
    color: var(--black);
  }
  .layer-list .bar {
    display: none;
  }
}
@media (max-width: 760px) {
  :root {
    --gutter: 20px;
    --sec: 96px;
    --hdr: 62px;
  }
  .hdr .wrap {
    padding: 0 16px;
  }
  .brand .prod {
    display: none;
  }
  .disp {
    font-size: 54px;
  }
  .band {
    font-size: 15px;
  }
  .h2 {
    font-size: 24px;
  }
  .h3 {
    font-size: 20px;
  }
  .hero {
    padding: 36px 0 72px;
  }
  .hero .h1main {
    font-size: 36px;
  }
  .hero .sub {
    font-size: 16px;
  }
  .live .app {
    grid-template-columns: 1fr;
    height: auto;
    display: flex;
    flex-direction: column;
  }
  .live .app-rail {
    display: none;
  }
  .live .app-home {
    inset: 0;
  }
  .live .app-prev {
    order: 1;
    height: 300px;
    flex: none;
  }
  .live .app-chat {
    order: 2;
    height: 210px;
    border-right: 0;
    border-top: 1px solid var(--ui-line);
    flex: none;
  }
  .live .tags {
    position: static;
    display: flex;
    flex-wrap: wrap;
    margin-top: 12px;
  }
  .live-tabs {
    flex: 1;
  }
  .live-tabs button {
    flex: 1;
    padding: 9px 8px;
    font-size: 12px;
    flex-direction: column;
    gap: 0;
  }
  .promises {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-top: 56px;
  }
  .scene {
    padding: 28px 22px;
  }
  .scene q {
    font-size: 18px;
  }
  .more {
    padding: 24px 22px;
  }
  .bridge {
    font-size: 19px;
  }
  .bridge.end {
    margin-top: 72px;
  }
  .principle {
    font-size: 22px;
  }
  .interlude {
    padding: 96px 0;
  }
  .interlude h2 {
    font-size: 34px;
  }
  .interlude p.sub {
    font-size: 16px;
  }
  .demo-sec {
    padding-top: 72px;
  }
  .demo-tabs {
    width: 100%;
  }
  .demo-tabs button {
    flex: 1;
    padding: 11px 8px;
    font-size: 12.5px;
    flex-direction: column;
    gap: 0;
  }
  .rail {
    grid-template-columns: 1fr;
  }
  .rail li {
    border-bottom: 1px solid var(--line);
  }
  .rail button {
    padding: 10px 0 10px 16px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 12px;
    align-items: baseline;
  }
  .rail button::before {
    top: 0;
    bottom: 0;
    height: auto;
    width: 3px !important;
    background: transparent;
  }
  .rail li.cur button::before {
    background: var(--red);
  }
  .rail li.done button::before {
    background: transparent;
  }
  .rail .t {
    font-size: 15px;
    margin: 0;
  }
  .rail .d {
    grid-column: 2;
    margin-top: 0;
  }
  .demo .app {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
    min-height: 0;
  }
  .app-rail {
    display: none;
  }
  .app-prev {
    order: 1;
    height: 360px;
    flex: none;
  }
  .app-chat {
    order: 2;
    border-right: 0;
    border-top: 1px solid var(--ui-line);
    height: 250px;
    flex: none;
  }
  .app-home {
    inset: 0;
  }
  .app-home .composer {
    width: 88%;
  }
  .pub-panel {
    right: 8px;
    left: 8px;
    width: auto;
  }
  .popover {
    width: 210px;
  }
  .mid-cta {
    grid-template-columns: 1fr;
    padding: 30px 22px;
    margin-top: 64px;
  }
  .mid-cta h3 {
    font-size: 19px;
  }
  .compare {
    grid-template-columns: 1fr;
  }
  .cmp {
    padding: 18px;
  }
  .cmp-stage {
    height: 250px;
  }
  .ds .app {
    grid-template-columns: 1fr;
  }
  .ds-src {
    border-right: 0;
    border-bottom: 1px solid var(--ui-line);
  }
  .ds-out {
    min-height: 300px;
  }
  .model-grid,
  .skill-body {
    grid-template-columns: 1fr;
  }
  .skill-body section:nth-child(odd) {
    border-right: 0;
  }
  .fgroups {
    width: 100%;
  }
  .fgroups button {
    flex: 1 1 50%;
    padding: 10px 12px;
    font-size: 13.5px;
  }
  .flist {
    padding: 0 18px;
  }
  .case-stage .app {
    grid-template-columns: 1fr;
    height: auto;
    display: flex;
    flex-direction: column;
  }
  .case-stage .app-prev {
    order: 1;
    height: 300px;
    flex: none;
  }
  .case-stage .app-chat {
    order: 2;
    height: 190px;
    border-right: 0;
    border-top: 1px solid var(--ui-line);
    flex: none;
  }
  .case-cap {
    grid-template-columns: 1fr;
  }
  .dg {
    height: 560px;
  }
  .dg-hero {
    grid-template-columns: 1fr;
    padding: 0 22px;
    align-content: center;
  }
  .dg-ex {
    display: none;
  }
  .dg-form,
  .dg-run,
  .dg-res {
    padding: 18px;
  }
  .dg-opts {
    grid-template-columns: repeat(2, 1fr);
  }
  .dg-run .cols {
    grid-template-columns: 1fr;
  }
  .dg-run .info {
    display: none;
  }
  .aeo-steps {
    grid-template-columns: 1fr;
  }
  .gstory {
    height: auto;
  }
  .gpin {
    position: static;
    min-height: 0;
  }
  .gbox {
    padding: 28px 18px;
  }
  .g-track {
    display: none;
  }
  .g-list {
    grid-template-columns: 1fr;
  }
  .g-list li {
    padding: 14px 0 14px 30px;
    border-left: 1px solid var(--line);
    margin-left: 7px;
  }
  .g-list li::before {
    left: -8px;
    top: 20px;
  }
  .layers3 {
    grid-template-columns: 1fr;
  }
  .never {
    grid-template-columns: 1fr;
  }
  .never h3 {
    border-right: 0;
    border-bottom: 1px solid #333;
    padding: 20px;
  }
  .flow {
    grid-template-columns: 1fr;
  }
  .flow li::after {
    display: none;
  }
  .menus {
    grid-template-columns: 1fr;
  }
  .roadmap {
    padding: 26px 20px;
  }
  .roadmap ol {
    grid-template-columns: 1fr;
  }
  .faq-cats {
    grid-template-columns: repeat(2, 1fr);
  }
  .qa summary {
    font-size: 15px;
    padding-right: 40px;
  }
  .form {
    padding: 22px;
  }
  .two {
    grid-template-columns: 1fr;
  }
  .contact .h2 {
    font-size: 24px;
  }
  .closing p {
    font-size: 28px;
  }
  .ftr .cp {
    margin-left: 0;
  }
  .sp-cta {
    display: block;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 55;
    transition:
      transform 0.4s var(--ease),
      opacity 0.4s;
  }
  .sp-cta.hide {
    transform: translateY(140%);
    opacity: 0;
  }
  .sp-cta .btn {
    width: 100%;
    justify-content: center;
    min-height: 52px;
  }
  .review-toggle {
    bottom: auto;
    top: calc(var(--hdr) + 8px + env(safe-area-inset-top, 0px));
    left: auto;
    right: 8px;
    padding: 6px 10px;
    font-size: 11px;
  }
  .offset::before {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js [data-rv] {
    opacity: 1;
    transform: none;
    clip-path: none;
  }
}

.send.pressed {
  transform: scale(0.86);
}
.composer .send {
  transition: transform 0.15s;
}
.tier .t3 {
  background: transparent;
  box-shadow: none;
  outline: 1.5px dashed var(--mute);
  outline-offset: -1.5px;
}
.dg2 {
  display: flex;
  align-items: stretch;
  gap: 10px;
  height: 100%;
}
.dg2 .bx {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  background: var(--white);
  padding: 10px;
  letter-spacing: 0.05em;
  line-height: 1.5;
}
.dg2 .bx small {
  font-size: 11px;
  color: var(--mute);
  font-weight: 700;
}
.dg2 .bx.dash {
  background: transparent;
  outline: 1.5px dashed var(--mute);
  outline-offset: -1.5px;
  color: var(--mute);
}
.dg2 .bx.blk {
  background: var(--black);
  color: var(--white);
}
.dg2 .bx.blk small {
  color: #bdbdb8;
}
.dg2 .ln {
  align-self: center;
  width: 16px;
  border-top: 2px dashed var(--black);
}
.dg2 .ar {
  align-self: center;
  width: 18px;
  height: 2px;
  background: var(--red);
  position: relative;
  flex: none;
}
.dg2 .ar::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -4px;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--red);
  border-right: 2px solid var(--red);
  transform: rotate(45deg);
}
.t9 {
  display: grid;
  grid-template-columns: repeat(3, 16px);
  gap: 4px;
  margin-bottom: 10px;
}
.t9 i {
  height: 11px;
  background: var(--gray);
  transition: background 0.4s;
}
.bx.blk .t9 i {
  background: #3a3a3a;
}
.entry.is-in .bx.blk .t9 i {
  background: #fff;
  transition-delay: calc(var(--n, 0) * 0.07s + 0.3s);
}
.bx.blk .t9 i.ai {
  background: var(--red) !important;
}
.t9 i:nth-child(1) {
  --n: 1;
}
.t9 i:nth-child(2) {
  --n: 2;
}
.t9 i:nth-child(3) {
  --n: 3;
}
.t9 i:nth-child(4) {
  --n: 4;
}
.t9 i:nth-child(5) {
  --n: 5;
}
.t9 i:nth-child(6) {
  --n: 6;
}
.t9 i:nth-child(7) {
  --n: 7;
}
.t9 i:nth-child(8) {
  --n: 8;
}
.t9 i:nth-child(9) {
  --n: 9;
}
.fvis .frame-note {
  margin-top: 10px;
}
.bw {
  border-radius: 10px;
}
.offset > .app,
.offset > .bw,
.offset > .form {
  position: relative;
}
.case-stage .app-prev .prev-stage {
  padding: 10px 12px 12px;
}
.case-stage .fan {
  inset: 10px;
}
.story-view .ds .app {
  min-height: 470px;
}
.layer-reuse .tag {
  font-style: normal;
}

.mv .fan .th {
  width: 38%;
}
.fvis .mv {
  height: 320px;
}

.live .scale-box > .sc,
.case-stage .scale-box > .sc {
  width: 600px;
}
.live .scale-box > .sc.phone {
  width: 360px;
}

/* ===== v3: header phone & phone CTA ===== */
.hdr-tel {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-decoration: none;
  line-height: 1.25;
  color: var(--black);
  margin-left: 8px;
}
.hdr-tel b {
  font-size: 17px;
  letter-spacing: 0.04em;
}
.hdr-tel small {
  font-size: 10.5px;
  color: var(--mute);
  letter-spacing: 0.04em;
}
.tel {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 2px 14px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  max-width: 26em;
}
.tel-l {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.tel-n {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--black);
  line-height: 1.2;
}
.tel-n:hover {
  color: var(--purple);
}
.tel-h {
  grid-column: 1/-1;
  font-size: 12.5px;
  color: var(--mute);
  letter-spacing: 0.05em;
}
.tel-lg {
  background: var(--white);
  border-top: 0;
  padding: 20px 24px;
  margin-top: 28px;
}
.tel-lg .tel-n {
  font-size: 30px;
}

/* ===== v3: FV pattern switch ===== */
#heroLive {
  display: none;
}
body.hero-a #heroLive {
  display: block;
}
body.hero-a #grow {
  display: none;
}
.hero-vis {
  min-width: 0;
}
.rv-hero {
  display: none;
  position: fixed;
  left: 16px;
  bottom: calc(58px + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  font: 700 12px var(--jp);
  padding: 9px 14px;
  border: 0;
  background: #fff4d6;
  color: #5c3d00;
  border-radius: 2px;
}
body.review .rv-hero {
  display: block;
}

/* ===== v3: FV pattern B (page grows by dialogue) ===== */
.grow {
  position: relative;
  --gwc: #3d5af1;
}
.gw-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.gw-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--mute);
  letter-spacing: 0.06em;
}
.gw-count b {
  color: var(--red);
  font-family: var(--en);
  font-size: 15px;
}
.grow .icon-btn {
  margin-left: auto;
  border: 0;
  background: var(--white);
  color: var(--black);
  width: 36px;
  height: 36px;
}
.gw-stage {
  position: relative;
  height: 540px;
}
.gw-page {
  position: absolute;
  left: 10%;
  right: 0;
  top: 0;
  bottom: 44px;
  background: #fff;
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 30px 70px -30px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.gw-bar {
  flex: none;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  background: #eef0f3;
  border-bottom: 1px solid #e1e4e8;
  font: 500 10.5px var(--en);
  color: #666b75;
  letter-spacing: 0.02em;
}
.gw-bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cfd3d9;
}
.gw-bar span {
  margin-left: 8px;
  background: #fff;
  border-radius: 5px;
  padding: 2px 10px;
}
.gw-box {
  flex: 1;
}
.scale-box > .gwp {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}
.gwp {
  width: 640px;
  font-family: "Noto Sans JP", var(--jp);
  letter-spacing: 0.02em;
  color: #1f2430;
  line-height: 1.6;
  transition: transform 0.9s var(--ease);
}
.gw-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 46px;
  padding: 0 24px;
  font-size: 11px;
  color: #5a6270;
}
.gw-nav b {
  font: 900 15px var(--en);
  color: #1f2430;
  margin-right: auto;
  display: flex;
  gap: 6px;
  align-items: center;
}
.gw-nav b i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gwc);
}
.gw-nav em {
  font-style: normal;
  background: var(--gwc);
  color: #fff;
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 700;
}
.gw-hero {
  position: relative;
  margin: 0 16px;
  height: 260px;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.gw-img,
.gw-pimg {
  position: absolute;
  inset: 0;
}
.gw-pimg {
  position: relative;
  height: 84px;
  border-radius: 10px;
  overflow: hidden;
}
.gw-img span,
.gw-pimg span {
  position: absolute;
  inset: 0;
  transition: opacity 1.3s ease;
}
.cool {
  background: linear-gradient(135deg, #1f2a5a 0%, #3a4f9a 55%, #6c86d6 100%);
}
.warm {
  background: linear-gradient(135deg, #ff8a5b 0%, #ff5f8f 48%, #ffd36e 100%);
  opacity: 0;
}
.grow.bright .warm {
  opacity: 1;
}
.gw-img i {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  transition:
    background 1.2s,
    transform 1.4s var(--ease);
}
.gw-img .o1 {
  width: 190px;
  height: 190px;
  right: -36px;
  top: -46px;
}
.gw-img .o2 {
  width: 120px;
  height: 120px;
  right: 130px;
  bottom: -36px;
}
.gw-img .o3 {
  width: 58px;
  height: 58px;
  right: 66px;
  top: 118px;
  background: rgba(255, 255, 255, 0.28);
}
.grow.bright .gw-img i {
  background: rgba(255, 255, 255, 0.34);
  transform: scale(1.12);
}
.gw-txt {
  position: relative;
  padding: 22px 24px;
  color: #fff;
  max-width: 74%;
}
.gw-k {
  margin: 0;
  font-size: 10.5px;
  font-weight: 700;
  opacity: 0.88;
  letter-spacing: 0.14em;
}
.gw-h {
  margin: 6px 0;
  color: #fff !important;
  font-size: 25px;
  line-height: 1.32;
  font-weight: 900;
  letter-spacing: 0.02em;
  transition: font-size 0.7s var(--ease);
}
.grow.short .gw-h {
  font-size: 42px;
}
.gw-s {
  margin: 0 0 12px;
  font-size: 11px;
  opacity: 0.92;
}
.gw-btn {
  display: inline-block;
  background: #fff;
  color: #1f2430;
  font-size: 11px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 999px;
}
.gw-feat {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 16px 16px 6px;
}
.gw-feat div {
  background: #f5f6fa;
  border-radius: 10px;
  padding: 12px;
  font-size: 10px;
  color: #5a6270;
}
.gw-feat i {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--gwc);
  opacity: 0.85;
  margin-bottom: 8px;
}
.gw-feat b {
  display: block;
  font-size: 12px;
  color: #1f2430;
}
.gw-voice {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 16px;
  transition:
    max-height 0.9s var(--ease),
    opacity 0.6s,
    padding 0.6s;
}
.grow.voice .gw-voice {
  max-height: 170px;
  opacity: 1;
  padding: 12px 16px 4px;
}
.gw-vt {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}
.gw-vr {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.gw-vr div {
  border: 1px solid #e6e8ef;
  border-radius: 10px;
  padding: 10px;
  font-size: 10.5px;
}
.gw-vr b {
  display: block;
  font-size: 11px;
  line-height: 1.5;
}
.gw-vr small {
  color: #8a90a0;
}
.gw-foot {
  height: 40px;
  margin-top: 12px;
  background: #1f2430;
}
.gw-b {
  transition:
    opacity 0.6s var(--ease),
    transform 0.7s var(--ease);
}
.grow.empty .gw-b {
  opacity: 0;
  transform: translateY(14px);
}
.grow.empty .gw-b.in {
  opacity: 1;
  transform: none;
}
.grow.empty .gw-box {
  background: repeating-linear-gradient(
    180deg,
    transparent 0 46px,
    #f3f4f7 46px 58px
  );
}
.gflash {
  outline: 2.5px solid #3d35b5;
  outline-offset: 3px;
  animation: gflash 1.4s ease-out;
}
@keyframes gflash {
  0% {
    box-shadow: 0 0 0 0 rgba(61, 53, 181, 0.45);
  }
  100% {
    box-shadow: 0 0 0 18px rgba(61, 53, 181, 0);
  }
}
.gw-phone {
  position: absolute;
  right: -18px;
  bottom: 6px;
  width: 150px;
  height: 300px;
  background: #121318;
  border-radius: 26px;
  padding: 8px;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(46px) rotate(8deg);
  transition: all 0.9s var(--ease);
  z-index: 4;
}
.grow.phone .gw-phone {
  opacity: 1;
  transform: rotate(0);
}
.gw-notch {
  position: absolute;
  left: 50%;
  top: 13px;
  width: 38px;
  height: 5px;
  margin-left: -19px;
  background: #2a2c33;
  border-radius: 3px;
  z-index: 2;
}
.gw-pb {
  background: #fff;
  border-radius: 19px;
  height: 100%;
  overflow: hidden;
  padding: 22px 10px 10px;
  display: grid;
  gap: 8px;
  align-content: start;
  font-family: "Noto Sans JP", var(--jp);
  letter-spacing: 0.02em;
}
.gw-ph {
  font-size: 12px;
  line-height: 1.4;
  color: #1f2430;
  transition: font-size 0.6s;
}
.grow.short .gw-ph {
  font-size: 17px;
}
.gw-pbtn {
  justify-self: start;
  background: var(--gwc);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}
.gw-pb > i {
  height: 9px;
  border-radius: 4px;
  background: #eef0f5;
}
.gw-pb > i.s {
  width: 60%;
}
.gw-chat {
  position: absolute;
  left: 0;
  top: 40px;
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 6;
  pointer-events: none;
}
.gw-msg {
  align-self: flex-start;
  background: #fff;
  border-radius: 16px 16px 16px 4px;
  padding: 12px 15px 12px 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.04em;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.05),
    0 18px 36px -16px rgba(0, 0, 0, 0.5);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  animation: msgin 0.5s var(--ease) both;
  transition:
    opacity 0.5s,
    transform 0.5s;
}
.gw-msg .av {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--black);
  color: #fff;
  font: 700 10px/26px var(--en);
  text-align: center;
  letter-spacing: 0;
}
.gw-msg.typing .tx::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1em;
  background: currentColor;
  margin-left: 2px;
  vertical-align: -2px;
  animation: blink 1s steps(1) infinite;
}
.gw-ai {
  align-self: flex-start;
  margin-left: 36px;
  background: var(--purple);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 13px;
  border-radius: 999px;
  letter-spacing: 0.06em;
  animation: msgin 0.4s var(--ease) both;
}
.gw-chat .fade {
  opacity: 0;
  transform: translateY(-12px);
}
.gw-stamp {
  position: absolute;
  left: 55%;
  top: 44%;
  transform: translate(-50%, -50%) scale(0.6) rotate(-6deg);
  background: var(--red);
  color: #fff;
  padding: 16px 28px;
  text-align: center;
  opacity: 0;
  transition: all 0.55s cubic-bezier(0.2, 1.6, 0.4, 1);
  z-index: 7;
  box-shadow: 0 20px 40px -18px rgba(198, 0, 0, 0.7);
}
.gw-stamp.on {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(-6deg);
}
.gw-stamp b {
  display: block;
  font-size: 22px;
  letter-spacing: 0.12em;
}
.gw-stamp span {
  font-size: 11px;
  letter-spacing: 0.04em;
}
.gw-hist {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 0 10%;
  padding: 0;
  min-height: 26px;
  position: relative;
  top: -30px;
}
.gw-hist li {
  font: 700 11px var(--en);
  background: var(--white);
  padding: 3px 10px;
  letter-spacing: 0.06em;
  animation: msgin 0.4s var(--ease) both;
}
.gw-hist li.cur {
  background: var(--black);
  color: #fff;
}
.gw-hist li.pub {
  background: var(--red);
  color: #fff;
}
.grow .frame-note {
  margin-top: -14px;
}

/* ===== v3: trust layers ===== */
.l3wrap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  margin-top: 96px;
  align-items: start;
}
.l3-intro {
  position: sticky;
  top: calc(var(--hdr) + 32px);
}
.l3-intro .h3 {
  margin-top: 14px;
}
.l3-intro p {
  font-size: 15px;
  color: var(--ink-2);
  margin: 16px 0 0;
  line-height: 1.85;
}
.l3-stack {
  margin-top: 30px;
  display: grid;
}
.st {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
}
.st b {
  font-family: var(--disp);
  font-weight: 900;
  font-size: 26px;
  width: 26px;
  line-height: 1;
}
.st small {
  display: block;
  font-size: 12px;
  opacity: 0.8;
}
.st.a {
  background: var(--red);
  color: #fff;
  margin: 0 40px;
}
.st.b {
  background: var(--black);
  color: var(--white);
  margin: 0 20px;
}
.st.c {
  background: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--black);
}
.l3wrap .layers3 {
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 0;
}
.l3-lead {
  margin: -4px 0 14px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: 0.06em;
}
.l3wrap .l3:first-child {
  box-shadow: inset 4px 0 0 var(--red);
}
.gstory {
  height: auto;
}
.gpin {
  min-height: 0;
  display: block;
}

/* ===== v3: 9-square entry diagrams ===== */
.entry .dia {
  height: auto;
  margin: 22px 0 4px;
}
.sq9 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 22px 10px 18px;
  background: var(--white);
}
.sq9 .g {
  display: grid;
  grid-template-columns: repeat(3, 30px);
  gap: 7px;
}
.sq9 .g i {
  height: 30px;
  background: var(--gray-2);
  position: relative;
  transition:
    background 0.5s,
    outline-color 0.5s,
    transform 0.5s,
    box-shadow 0.5s;
}
.sq9 .g i:nth-child(1) {
  --n: 1;
}
.sq9 .g i:nth-child(2) {
  --n: 2;
}
.sq9 .g i:nth-child(3) {
  --n: 3;
}
.sq9 .g i:nth-child(4) {
  --n: 4;
}
.sq9 .g i:nth-child(5) {
  --n: 5;
}
.sq9 .g i:nth-child(6) {
  --n: 6;
}
.sq9 .g i:nth-child(7) {
  --n: 7;
}
.sq9 .g i:nth-child(8) {
  --n: 8;
}
.sq9 .g i:nth-child(9) {
  --n: 9;
}
.sq9 p {
  margin: 0;
  font-size: 12.5px;
  text-align: center;
  line-height: 1.65;
  color: var(--ink-2);
  letter-spacing: 0.04em;
}
.sq9 p b {
  color: var(--black);
}
.ga .g i {
  background: transparent;
  outline: 1.5px dashed var(--mute);
  outline-offset: -1.5px;
}
.ga .g i.n {
  outline-color: var(--red);
}
.entry.is-in .ga .g i.n {
  background: var(--red);
  outline-color: transparent;
  transform: scale(1.12);
  transition-delay: 0.45s;
}
.gb .g i {
  background: var(--gray-2);
}
.entry.is-in .gb .g i.e {
  background: var(--red-tint);
  box-shadow: inset 0 0 0 2px var(--red);
  transition-delay: calc(var(--n) * 0.06s + 0.35s);
}
.gb .g i.e::after {
  content: "";
  position: absolute;
  right: -6px;
  top: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--red);
  transform: scale(0);
  transition: transform 0.4s var(--ease) 0.8s;
}
.entry.is-in .gb .g i.e::after {
  transform: scale(1);
  animation: pen 1.6s ease-in-out 1.2s infinite;
}
@keyframes pen {
  50% {
    transform: scale(0.6);
  }
}
.gc .g i {
  background: var(--gray-2);
}
.entry.is-in .gc .g i {
  background: var(--red);
  transition-delay: calc(var(--n) * 0.08s + 0.3s);
}

/* ===== v3: story tabs (narrow screens) ===== */
.layer-desc {
  display: none;
}

@media (max-width: 1280px) {
  .hdr-tel {
    display: none;
  }
}
@media (max-width: 1100px) {
  .l3wrap {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 64px;
  }
  .l3-intro {
    position: static;
  }
  .story-view {
    display: grid;
  }
  .story-view .layer-pane {
    display: none;
  }
  .story-view .layer-pane.on {
    display: block;
  }
  .layer-list {
    display: flex;
    gap: 6px;
    margin-top: 18px;
  }
  .layer-list::before,
  .layer-list .bar {
    display: none;
  }
  .layer-list li {
    padding: 0;
    flex: 1;
    color: var(--black);
  }
  .layer-list button {
    background: var(--gray-3);
    padding: 10px 10px 12px;
    box-sizing: border-box;
    height: 100%;
  }
  .layer-list li.on button {
    background: var(--black);
    color: var(--white);
  }
  .layer-list .t {
    font-size: 13.5px;
    letter-spacing: 0.04em;
  }
  .layer-list .s {
    font-size: 10.5px;
    opacity: 0.75;
  }
  .layer-list li .d,
  .layer-list li.on .d {
    display: none;
  }
  .layer-desc {
    display: block;
    font-size: 14px;
    line-height: 1.8;
    color: var(--ink-2);
    margin: 14px 0 0;
    letter-spacing: 0.05em;
  }
  .story-pin {
    gap: 24px;
  }
}
@media (max-width: 760px) {
  :root {
    --sec: 72px;
  }
  .disp {
    font-size: clamp(32px, 9.6vw, 44px);
  }
  .band {
    font-size: 14px;
  }
  .h2 {
    font-size: 22px;
    line-height: 1.6;
  }
  .shead {
    margin-bottom: 32px;
  }
  .shead .h2 {
    margin-top: 18px;
  }
  .lead {
    font-size: 14px;
    margin-top: 12px;
    line-height: 1.75;
  }
  .bridge {
    font-size: 17px;
  }
  .bridge[style] {
    margin-bottom: 52px !important;
  }
  .bridge.end {
    margin-top: 56px;
  }
  .principle {
    font-size: 19px;
    margin-top: 22px;
    gap: 8px;
  }
  .principle small {
    font-size: 11.5px;
  }
  /* horizontal snap lists */
  .snap {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    padding: 16px var(--gutter) 12px;
    scrollbar-width: none;
    grid-template-columns: none !important;
  }
  .snap::-webkit-scrollbar {
    display: none;
  }
  .snap > * {
    flex: 0 0 84%;
    scroll-snap-align: center;
    min-width: 0;
  }
  .js .snap > [data-rv="left"],
  .js .snap > [data-rv="right"] {
    transform: translateY(20px);
  }
  .js .snap > [data-rv].is-in {
    transform: none;
  }
  /* hero */
  .hero {
    padding: 24px 0 56px;
  }
  .hero .prodname {
    font-size: 18px;
    margin-bottom: 8px;
  }
  .hero .h1main {
    font-size: 33px;
    margin-top: 18px;
  }
  .hero .sub {
    font-size: 15px;
    margin-top: 16px;
  }
  .hero .lead {
    font-size: 13px;
  }
  .hero-cta {
    margin-top: 22px;
    gap: 18px;
  }
  .tel {
    margin-top: 16px;
    padding-top: 12px;
    gap: 0;
    grid-template-columns: 1fr;
  }
  .tel-n {
    font-size: 22px;
  }
  .hero-grid {
    gap: 36px;
  }
  .gw-stage {
    height: 400px;
  }
  .gw-page {
    left: 0;
    bottom: 40px;
  }
  .gw-chat {
    top: auto;
    bottom: 52px;
    left: 8px;
    width: 82%;
  }
  .gw-msg {
    font-size: 12.5px;
    padding: 10px 12px 10px 10px;
  }
  .gw-phone {
    width: 104px;
    height: 208px;
    right: -6px;
    border-radius: 20px;
    padding: 6px;
  }
  .gw-pb {
    border-radius: 15px;
    padding: 16px 7px 7px;
    gap: 6px;
  }
  .gw-pimg {
    height: 56px;
  }
  .gw-hist {
    margin-left: 0;
    top: -26px;
  }
  /* problem */
  .scene {
    padding: 24px 20px;
  }
  .scene q {
    font-size: 17px;
  }
  .scene p {
    font-size: 13.5px;
  }
  .pbar .track {
    height: 28px;
  }
  .pbar .labels {
    font-size: 10px;
  }
  .more {
    margin-top: 16px;
    padding: 20px;
  }
  .more li {
    font-size: 13.5px;
  }
  /* solution */
  .interlude {
    padding: 72px 0;
  }
  .interlude h2 {
    font-size: 30px;
  }
  .demo-sec {
    padding: 56px 0 var(--sec);
  }
  .rail {
    margin: 14px 0 14px;
  }
  .rail button {
    padding: 8px 0 8px 14px;
  }
  .rail .d {
    display: none;
  }
  .app-prev {
    height: 320px;
  }
  .app-chat {
    height: 200px;
  }
  .demo-cap {
    font-size: 13px;
  }
  /* core */
  .compare-q {
    margin-top: 40px;
    flex-wrap: wrap;
  }
  .compare.snap > .cmp {
    flex-basis: 88%;
  }
  .cmp-stage {
    height: 220px;
  }
  .cmp li {
    font-size: 13px;
  }
  .story {
    margin-top: 72px;
  }
  .story-left h3 {
    font-size: 20px;
  }
  .layer-reuse {
    font-size: 13px;
    margin-top: 16px;
  }
  /* features */
  .fgroups button {
    padding: 9px 10px;
    font-size: 13px;
  }
  .fvis .mv {
    height: 220px;
  }
  .fitem summary {
    padding: 16px 32px 16px 0;
  }
  .fitem .tt {
    font-size: 15px;
  }
  .fitem .ds1 {
    font-size: 12.5px;
  }
  .cases {
    margin-top: 88px;
  }
  .cases .disp {
    font-size: 40px !important;
  }
  .case-grid {
    margin-top: 20px;
    gap: 14px;
  }
  .case-list {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    margin: 0 calc(-1 * var(--gutter));
    padding: 4px var(--gutter) 6px;
    scrollbar-width: none;
  }
  .case-list::-webkit-scrollbar {
    display: none;
  }
  .case-grp {
    display: flex;
    gap: 8px;
    flex: none;
  }
  .case-grp .tag {
    display: none;
  }
  .case-btn {
    flex: 0 0 200px;
    margin: 0;
    padding: 12px 14px;
  }
  .case-btn b {
    font-size: 13.5px;
  }
  .case-stage .app-prev {
    height: 270px;
  }
  .case-stage .app-chat {
    height: 170px;
  }
  .case-cap {
    gap: 8px;
    margin-top: 10px;
  }
  .case-cap div {
    padding: 10px 14px;
    font-size: 13px;
  }
  .showcase {
    margin-top: 88px;
    gap: 20px;
  }
  .show-steps {
    display: none;
  }
  .dg {
    height: 480px;
  }
  /* aeo */
  .aeo {
    padding: 52px 0;
  }
  .aeo h2 {
    font-size: 18px;
  }
  .aeo-steps.snap > li {
    flex-basis: 72%;
  }
  /* safety */
  .gstory {
    margin-top: 28px;
  }
  .gbox {
    padding: 24px 16px;
  }
  .g-head {
    margin-bottom: 14px;
  }
  .g-list {
    grid-template-columns: 1fr 1fr;
    gap: 0 10px;
  }
  .g-list li {
    padding: 10px 0 10px 24px;
    margin-left: 7px;
  }
  .g-list .t {
    font-size: 15px;
  }
  .g-list .d {
    font-size: 11.5px;
  }
  .l3-intro p {
    font-size: 14px;
  }
  .st {
    padding: 10px 14px;
    font-size: 13.5px;
  }
  .st.a {
    margin: 0 24px;
  }
  .st.b {
    margin: 0 12px;
  }
  .l3 {
    padding: 22px 20px;
  }
  .never li {
    font-size: 13.5px;
  }
  /* start */
  .entries.snap > .entry {
    flex-basis: 82%;
  }
  .entry {
    padding: 26px 22px;
  }
  .flow {
    gap: 6px;
  }
  .flow li {
    padding: 12px 16px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 12px;
    align-items: baseline;
  }
  .flow .n {
    grid-row: 1/3;
  }
  .flow b {
    margin: 0;
    font-size: 14.5px;
  }
  .flow span {
    font-size: 12px;
  }
  .sub-h {
    margin-top: 64px;
  }
  .menus {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .menu {
    padding: 14px;
  }
  .menu b {
    font-size: 14px;
  }
  .menu p {
    font-size: 12px;
    line-height: 1.65;
  }
  .tier div {
    padding: 12px 16px;
  }
  .roadmap {
    margin-top: 56px;
  }
  .roadmap ol {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .roadmap li {
    font-size: 13px;
  }
  /* faq */
  .faq-cats {
    display: none;
  }
  .faq-block + .faq-block {
    margin-top: 28px;
  }
  /* contact */
  .tel-lg {
    padding: 16px 18px;
  }
  .tel-lg .tel-n {
    font-size: 24px;
  }
  .chips button {
    font-size: 12.5px;
    padding: 8px 12px;
  }
  .sp-cta {
    display: flex;
    gap: 8px;
  }
  .sp-cta .btn {
    flex: 1;
  }
  .sp-tel {
    flex: none;
    width: 52px;
    display: grid;
    place-items: center;
    background: var(--white);
    color: var(--black);
    box-shadow: inset 0 0 0 1.5px var(--black);
  }
  .sp-tel svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    stroke: none;
  }
  .rv-hero {
    bottom: auto;
    top: calc(var(--hdr) + 44px + env(safe-area-inset-top, 0px));
    left: auto;
    right: 8px;
    padding: 6px 10px;
    font-size: 11px;
  }
}

/* ===== v4: spacing ===== */
:root {
  --sec: 124px;
}
.bridge[style] {
  margin-bottom: 84px !important;
}

/* ===== v4: bridges (stronger connective lines) ===== */
.bridge {
  position: relative;
  padding-top: 72px;
  font-size: 27px;
  line-height: 1.8;
  letter-spacing: 0.1em;
}
.bridge::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 50px;
  margin-left: -1px;
  background: linear-gradient(var(--line), var(--red));
  transform-origin: top;
  transition: transform 0.9s var(--ease);
}
.bridge::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--red);
}
.js .bridge::before {
  transform: scaleY(0);
}
.js .bridge.is-in::before {
  transform: scaleY(1);
}
.bq {
  background: linear-gradient(transparent 62%, var(--red-tint) 62%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 0.12em;
}
.bridge.end {
  margin-top: 96px;
}
.bridge.sm {
  font-size: 23px;
  margin: 110px auto 56px;
}

/* ===== v4: Sample Hotel & Resort (story site) ===== */
.sc {
  width: 720px;
  background: #faf8f4;
  color: #2b2722;
  font-family: "Noto Sans JP", var(--jp);
  letter-spacing: 0.03em;
}
.sc-hdr {
  height: 54px;
  padding: 0 26px;
  gap: 20px;
  font-size: 11px;
  color: #5a544b;
  background: #fff;
  border-bottom: 1px solid #ebe5da;
}
.sc-logo {
  margin-right: auto;
  display: flex;
  flex-direction: column;
  line-height: 1;
  color: #23352f;
}
.sc-logo b {
  font:
    600 15px "Noto Serif JP",
    serif;
  letter-spacing: 0.24em;
}
.sc-logo small {
  font: 500 7.5px var(--en);
  letter-spacing: 0.32em;
  margin-top: 4px;
}
.sc-hbtn {
  background: #a8844f;
  color: #fff;
  padding: 7px 16px;
  border-radius: 0;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.sc-fv {
  position: relative;
  display: block;
  height: 330px;
  padding: 0;
  background: #23352f;
  overflow: hidden;
  grid-template-columns: none;
}
.sc-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 60%;
  transition: opacity 0.5s ease;
}
.sc-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(18, 26, 23, 0.66) 0%,
    rgba(18, 26, 23, 0.28) 55%,
    rgba(18, 26, 23, 0) 85%
  );
}
.sc-fvt {
  position: absolute;
  left: 34px;
  top: 58px;
  max-width: 64%;
  z-index: 2;
  color: #fff;
}
.sc-kick {
  font-size: 10.5px;
  letter-spacing: 0.24em;
  color: #ead9b8;
  margin: 0 0 10px;
  font-weight: 500;
}
.sc-h1 {
  font:
    600 27px/1.55 "Noto Serif JP",
    serif;
  color: #fff;
  letter-spacing: 0.08em;
  margin: 0;
}
.sc-sub {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.9);
  margin: 12px 0 0;
}
.sc-book {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 22px;
  z-index: 2;
  background: #fff;
  display: grid;
  grid-template-columns: 1.2fr 0.7fr 0.9fr 1fr;
  box-shadow: 0 12px 26px -16px rgba(0, 0, 0, 0.5);
}
.sc-book span {
  padding: 9px 14px;
  border-right: 1px solid #eee5d8;
  font-size: 11.5px;
  color: #2b2722;
  white-space: nowrap;
}
.sc-book small {
  display: block;
  font-size: 9px;
  color: #8b8478;
  letter-spacing: 0.06em;
}
.sc-book em {
  font-style: normal;
  background: #23352f;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.sc-sec {
  padding: 28px 26px 6px;
}
.sc-issues {
  background: transparent;
}
.sc-st {
  font:
    600 16px "Noto Serif JP",
    serif;
  color: #23352f;
  letter-spacing: 0.18em;
  text-align: center;
  margin: 0 0 18px;
}
.sc-st::after {
  content: "";
  display: block;
  width: 22px;
  height: 1px;
  background: #a8844f;
  margin: 10px auto 0;
}
.sc-3 {
  gap: 12px;
}
.sc-card {
  background: #fff;
  border: 0;
  border-radius: 0;
  padding: 0 0 13px;
  font-size: 10.5px;
  color: #6b655b;
  box-shadow: 0 1px 0 #ebe5da;
}
.sc-card .ph {
  display: block;
  height: 92px;
  background-size: cover;
  background-position: center;
  margin-bottom: 10px;
  transition: opacity 0.5s;
}
.sc-card b {
  display: block;
  padding: 0 12px;
  font:
    600 12.5px/1.5 "Noto Serif JP",
    serif;
  color: #2b2722;
  margin-bottom: 2px;
}
.sc-card span {
  display: block;
  padding: 0 12px;
}
.sc-card .ic {
  display: none;
}
.sc-case {
  padding: 14px 14px 16px;
}
.sc-case .lg {
  background: none;
  height: auto;
  width: auto;
  text-align: left;
  font: 12px var(--en);
  color: #b8955c;
  letter-spacing: 0.12em;
  margin: 0 0 6px;
}
.sc-case b {
  padding: 0;
  font: 500 10px var(--jp);
  color: #8b8478;
  letter-spacing: 0.06em;
}
.sc-case span {
  padding: 0;
  font:
    500 12.5px/1.6 "Noto Serif JP",
    serif;
  color: #2b2722;
  margin-top: 4px;
}
.sc-cta {
  background: #23352f;
  border-radius: 0;
}
.sc-cta p {
  font:
    600 13px "Noto Serif JP",
    serif;
  letter-spacing: 0.08em;
}
.sc-cta .sc-btn {
  background: #a8844f;
}
.sc-btn {
  border-radius: 0;
  letter-spacing: 0.1em;
}
.sc-foot {
  height: 54px;
  margin-top: 18px;
  background: #23352f;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 9px var(--en);
  letter-spacing: 0.32em;
  color: rgba(255, 255, 255, 0.6);
}
.sc.phone {
  width: 360px;
}
.sc.phone .sc-hdr > span:not(.sc-hbtn):not(.sc-logo) {
  display: none;
}
.sc.phone .sc-fv {
  height: 380px;
}
.sc.phone .sc-fvt {
  left: 20px;
  top: 36px;
  max-width: 86%;
}
.sc.phone .sc-h1 {
  font-size: 22px;
}
.sc.phone .sc-book {
  grid-template-columns: 1fr 1fr;
  left: 16px;
  right: 16px;
}
.sc.phone .sc-book em {
  grid-column: 1/-1;
  padding: 9px;
}
.sc.phone .sc-3 {
  grid-template-columns: 1fr;
}
/* the "fan" thumbnails used in the demo/use cases */
.fan .th {
  background: #fff;
}
.fan .th .tt {
  height: auto;
  padding: 0;
  background: none;
}
.fan .th .tim {
  height: 46%;
  background-size: cover;
  background-position: center;
}
.fan .th .tx {
  padding: 10px 12px;
}
.fan .th .tx i {
  display: block;
  font-style: normal;
  font-size: 9px;
  color: var(--mc, #a8844f);
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: 0.1em;
}
.fan .th .tx b {
  display: block;
  font:
    600 12px/1.5 var(--mf, "Noto Serif JP"),
    serif;
  color: #2b2722;
}
.fan .th .bars {
  padding: 0 12px;
}

/* ===== v4: mini pages for other industries ===== */
.scale-box > .mp {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  transition: transform 0.9s var(--ease);
}
.mp {
  width: 600px;
  background: var(--bgc);
  color: #22252b;
  font-family: "Noto Sans JP", var(--jp);
  letter-spacing: 0.03em;
  line-height: 1.6;
}
.mp-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 48px;
  padding: 0 22px;
  font-size: 10.5px;
  color: #5d6470;
  background: #fff;
  border-bottom: 1px solid #eceef2;
}
.mp-nav b {
  margin-right: auto;
  font: 800 14px var(--en);
  color: var(--c);
  letter-spacing: 0.04em;
}
.mp-nav em {
  font-style: normal;
  background: var(--c);
  color: #fff;
  padding: 6px 13px;
  font-weight: 700;
  border-radius: var(--r, 4px);
}
.mp-hero {
  position: relative;
  transition: outline-color 0.3s;
}
.mp-hero.photo {
  height: 250px;
  overflow: hidden;
  background: #222;
}
.mp-ph {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.mp-ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.55),
    rgba(0, 0, 0, 0.08) 70%
  );
}
.mp-hero.photo .mp-ht {
  position: absolute;
  left: 28px;
  top: 42px;
  max-width: 66%;
  color: #fff;
}
.mp-hero.split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 16px;
  align-items: center;
  padding: 30px 22px 26px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--c) 7%, #fff),
    #fff
  );
}
.mp-k {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--a);
}
.mp-hero.photo .mp-k {
  color: #fff;
  opacity: 0.85;
}
.mp-h {
  margin: 0;
  font-size: 23px;
  line-height: 1.45;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: inherit;
  font-family: var(--hf, "Noto Sans JP");
}
.mp-hero.split .mp-h {
  color: #1c2230;
}
.mp-s {
  margin: 10px 0 14px;
  font-size: 11px;
  opacity: 0.88;
}
.mp-btn {
  display: inline-block;
  background: var(--a);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: var(--r, 4px);
  letter-spacing: 0.06em;
}
.mp-note {
  margin: 8px 0 0;
  font-size: 10px;
  color: #6a707c;
}
.mp-vis {
  position: relative;
  height: 170px;
}
.mp-sec {
  padding: 22px 22px 8px;
}
.mp-st {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.08em;
  color: #1c2230;
}
.mp-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.mp-card {
  background: #fff;
  border: 1px solid #eceef2;
  border-radius: var(--r, 4px);
  padding: 12px;
  font-size: 10px;
  color: #6a707c;
  overflow: hidden;
  transition: background 0.4s;
}
.mp-ci {
  display: block;
  height: 58px;
  margin: -12px -12px 10px;
  background-size: cover;
  background-position: center;
}
.mp-card b {
  display: block;
  font-size: 11.5px;
  color: #1c2230;
  margin-bottom: 2px;
}
.mp-cta {
  margin: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--c);
  color: #fff;
  border-radius: var(--r, 4px);
  padding: 0 18px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 0.8s var(--ease),
    opacity 0.6s,
    padding 0.8s,
    margin 0.8s;
}
.mp-cta p {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
}
.mp-cta .mp-btn {
  background: #fff;
  color: var(--c);
}
.mp.has-cta .mp-cta {
  max-height: 120px;
  opacity: 1;
  padding: 16px 18px;
  margin: 10px 22px 14px;
}
.mp-foot {
  height: 40px;
  margin-top: 12px;
  background: #1c2230;
  color: rgba(255, 255, 255, 0.55);
  font: 700 9px/40px var(--en);
  text-align: center;
  letter-spacing: 0.2em;
}
.mp .tbl {
  display: grid;
  grid-template-columns: 90px 1fr;
  font-size: 11px;
  background: #fff;
  border: 1px solid #eceef2;
}
.mp .tbl span {
  padding: 8px 12px;
  border-bottom: 1px solid #eceef2;
}
.mp .tbl span:nth-child(odd) {
  background: #f7f7f9;
  color: #6a707c;
  font-weight: 700;
}
.mp .tbl span:nth-last-child(-n + 2) {
  border-bottom: 0;
}
.mp .form {
  display: grid;
  gap: 6px;
  padding: 12px;
  background: #fff;
  border: 1px solid #eceef2;
}
.mp .form i {
  height: 20px;
  border: 1px solid #e3e6ec;
  border-radius: 3px;
}
.mp .form em {
  font-style: normal;
  justify-self: start;
  background: var(--a);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 3px;
}
.mp [data-el].chg,
.mp .chg {
  outline: 2px solid var(--ui-accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 7px rgba(61, 53, 181, 0.12);
}
.mp .newb {
  display: inline-block;
  font: 700 8.5px var(--en);
  color: #fff;
  background: #d33;
  padding: 1px 5px;
  margin-left: 4px;
  vertical-align: 2px;
  letter-spacing: 0.06em;
}
.mp.building .bld {
  opacity: 0;
  transform: translateY(10px);
}
.mp.building .bld.in {
  opacity: 1;
  transform: none;
}
.mp .bld {
  transition:
    opacity 0.5s var(--ease),
    transform 0.6s var(--ease);
}
/* product & dashboard visuals */
.bottle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 160px;
}
.bottle .b1 {
  position: absolute;
  left: 34px;
  top: 0;
  width: 52px;
  height: 24px;
  background: #c9b8a6;
  border-radius: 4px 4px 0 0;
}
.bottle .b2 {
  position: absolute;
  left: 14px;
  top: 22px;
  width: 92px;
  height: 130px;
  border-radius: 18px;
  background: linear-gradient(110deg, #f7efe6 0%, #efe2d3 45%, #e6d4c1 100%);
  box-shadow: 0 18px 30px -18px rgba(90, 60, 30, 0.6);
}
.bottle .b2::after {
  content: "SAMPLE\A BOTANICS";
  white-space: pre;
  position: absolute;
  left: 0;
  right: 0;
  top: 46px;
  text-align: center;
  font: 700 8px/1.6 var(--en);
  letter-spacing: 0.18em;
  color: #7a6450;
}
.bottle .lf {
  position: absolute;
  border-radius: 0 60% 0 60%;
  background: #8fae86;
}
.bottle .lf.a {
  width: 46px;
  height: 28px;
  left: -14px;
  top: 96px;
  transform: rotate(-24deg);
}
.bottle .lf.b {
  width: 38px;
  height: 22px;
  right: -10px;
  top: 58px;
  transform: rotate(30deg);
  background: #a7c19c;
}
.dash {
  position: absolute;
  inset: 6px 0 6px 0;
  background: #fff;
  border-radius: 8px;
  box-shadow:
    0 0 0 1px #e3e7ef,
    0 16px 30px -18px rgba(20, 40, 90, 0.45);
  padding: 10px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
}
.dash .top {
  display: flex;
  gap: 6px;
}
.dash .top i {
  flex: 1;
  height: 28px;
  border-radius: 5px;
  background: #eef2f9;
}
.dash .top i:first-child {
  background: color-mix(in srgb, var(--c) 18%, #fff);
}
.dash .chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 6px;
  border-radius: 5px;
  background: #f6f8fc;
}
.dash .chart b {
  flex: 1;
  background: var(--c);
  border-radius: 3px 3px 0 0;
  opacity: 0.85;
}
.avatar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: -2px 0 8px;
}
.avatar i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c9d6ea, #8fa6c8);
  flex: none;
}

/* ===== v4: feature map ===== */
.fmap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.fm {
  background: var(--white);
  padding: 22px 20px 20px;
  position: relative;
}
.fm .tag {
  position: absolute;
  left: 0;
  top: -12px;
}
.fm svg {
  display: block;
  width: 100%;
  height: 88px;
  margin: 4px 0 14px;
}
.fm h3 {
  font-size: 17px;
  letter-spacing: 0.08em;
}
.fm ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.fm li {
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  padding-left: 14px;
  position: relative;
  color: var(--ink-2);
}
.fm li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 6px;
  height: 6px;
  background: var(--red);
}
.fm a {
  display: inline-block;
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 700;
}
.fm-ill .ln {
  fill: none;
  stroke: var(--line);
  stroke-width: 1.5;
}
.fm-ill .bx {
  fill: var(--gray-3);
}
.fm-ill .bk {
  fill: var(--black);
}
.fm-ill .rd {
  fill: var(--red);
}
.fm-ill .pu {
  fill: none;
  stroke: #3d35b5;
  stroke-width: 2;
}
.checklist {
  margin-top: 14px;
}

/* ===== v4: trust layers (simplified) ===== */
.l3x {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  align-items: center;
}
.l3-ring {
  position: relative;
  aspect-ratio: 1/1;
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
}
.l3-ring .rc,
.l3-ring .rb,
.l3-ring .ra {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}
.l3-ring .rc {
  inset: 0;
  background: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--black);
  padding-top: 16px;
}
.l3-ring .rb {
  inset: 14% 12% 12%;
  background: var(--black);
  color: var(--white);
  padding-top: 14px;
}
.l3-ring .ra {
  inset: 32% 26% 22%;
  background: var(--red);
  color: #fff;
  justify-content: center;
}
.l3-ring .lb {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.l3-ring .lb b,
.l3-ring .ra b {
  font-family: var(--disp);
  font-weight: 900;
  font-size: 20px;
  margin-right: 6px;
}
.l3-ring .ra span {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.l3-ring .ra small {
  display: block;
  font-size: 11.5px;
  opacity: 0.9;
  margin-top: 4px;
}
.js .l3-ring .rb,
.js .l3-ring .ra {
  transform: scale(0.86);
  opacity: 0;
  transition:
    transform 0.8s var(--ease),
    opacity 0.6s;
}
.js .l3-ring.is-in .rb {
  transform: none;
  opacity: 1;
  transition-delay: 0.15s;
}
.js .l3-ring.is-in .ra {
  transform: none;
  opacity: 1;
  transition-delay: 0.35s;
}
.l3-rows {
  display: grid;
  gap: 12px;
}
.l3r {
  background: var(--white);
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 4px 16px;
  align-items: start;
}
.l3r .k {
  font-family: var(--disp);
  font-weight: 900;
  font-size: 34px;
  line-height: 1;
}
.l3r.a {
  box-shadow: inset 4px 0 0 var(--red);
}
.l3r.a .k {
  color: var(--red);
}
.l3r h4 {
  font-size: 17px;
  letter-spacing: 0.08em;
}
.l3r p {
  margin: 4px 0 10px;
  font-size: 14px;
  color: var(--ink-2);
  letter-spacing: 0.04em;
}
.pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pills li {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  background: var(--gray-3);
  letter-spacing: 0.04em;
}
.l3x + .note {
  margin-top: 18px;
}

/* ===== v4: FV crafted (hotel campaign) ===== */
.grow {
  --gwc: #a8844f;
}
.gwp {
  background: #faf8f4;
  color: #2b2722;
}
.gw-nav {
  height: 52px;
  background: #fff;
  border-bottom: 1px solid #ebe5da;
  color: #5a544b;
}
.gw-nav b {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  font:
    600 14px "Noto Serif JP",
    serif;
  letter-spacing: 0.24em;
  color: #23352f;
  gap: 0;
}
.gw-nav b small {
  font: 500 7px var(--en);
  letter-spacing: 0.32em;
  margin-top: 4px;
}
.gw-nav b i {
  display: none;
}
.gw-nav em {
  border-radius: 0;
  background: #a8844f;
  letter-spacing: 0.12em;
  padding: 6px 14px;
}
.gw-hero {
  margin: 0;
  height: 300px;
  border-radius: 0;
  align-items: stretch;
}
.gw-img span {
  background-size: cover;
  background-position: center 62%;
}
.gw-img .cool {
  background-image: var(--img-a);
}
.gw-img .warm {
  background-image: var(--img-b);
}
.gw-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(18, 26, 23, 0.66) 0%,
    rgba(18, 26, 23, 0.25) 58%,
    rgba(18, 26, 23, 0) 85%
  );
}
.gw-img i {
  display: none;
}
.gw-txt {
  position: relative;
  z-index: 2;
  padding: 52px 34px 0;
  max-width: 68%;
}
.gw-k {
  color: #ead9b8;
  letter-spacing: 0.26em;
  font-weight: 500;
}
.gw-h {
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  font-size: 27px;
  line-height: 1.55;
  letter-spacing: 0.08em;
}
.grow.short .gw-h {
  font-size: 40px;
  line-height: 1.35;
}
.gw-s {
  font-size: 11.5px;
  margin-top: 10px;
}
.gw-btn {
  display: none;
}
.gw-book {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 20px;
  z-index: 3;
  background: #fff;
  display: grid;
  grid-template-columns: 1.2fr 0.7fr 0.9fr 1fr;
  box-shadow: 0 12px 26px -16px rgba(0, 0, 0, 0.5);
}
.gw-book span {
  padding: 8px 12px;
  border-right: 1px solid #eee5d8;
  font-size: 11px;
  white-space: nowrap;
}
.gw-book small {
  display: block;
  font-size: 8.5px;
  color: #8b8478;
}
.gw-book em {
  font-style: normal;
  background: #23352f;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.gw-band {
  display: flex;
  justify-content: center;
  gap: 26px;
  padding: 14px 0;
  font-size: 11px;
  color: #5a544b;
  letter-spacing: 0.08em;
  border-bottom: 1px solid #ebe5da;
  background: #fff;
}
.gw-band span::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #a8844f;
  transform: rotate(45deg);
  margin-right: 8px;
  vertical-align: 2px;
}
.gw-feat {
  display: none;
}
.gw-plans {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.9s var(--ease),
    opacity 0.6s,
    padding 0.6s;
  padding: 0 22px;
}
.grow.plans .gw-plans {
  max-height: 260px;
  opacity: 1;
  padding: 22px 22px 6px;
}
.gw-pt {
  margin: 0 0 14px;
  text-align: center;
  font:
    600 15px "Noto Serif JP",
    serif;
  letter-spacing: 0.18em;
  color: #23352f;
}
.gw-pr {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.gw-pr div {
  background: #fff;
  font-size: 10.5px;
  color: #6b655b;
  padding-bottom: 12px;
  box-shadow: 0 1px 0 #ebe5da;
}
.gw-pr i {
  display: block;
  height: 84px;
  background-size: cover;
  background-position: center;
  margin-bottom: 9px;
}
.gw-pr b {
  display: block;
  padding: 0 11px;
  font:
    600 12px/1.5 "Noto Serif JP",
    serif;
  color: #2b2722;
}
.gw-pr span {
  display: block;
  padding: 0 11px;
}
.gw-voice {
  display: none;
}
.gw-foot {
  background: #23352f;
  height: 46px;
  margin-top: 16px;
}
.gw-phone {
  width: 156px;
  height: 316px;
}
.gw-pb {
  padding: 20px 0 10px;
  gap: 0;
  background: #faf8f4;
}
.gw-plogo {
  display: block;
  text-align: center;
  font:
    600 9px "Noto Serif JP",
    serif;
  letter-spacing: 0.24em;
  color: #23352f;
  padding-bottom: 8px;
  border-bottom: 1px solid #ebe5da;
}
.gw-pimg {
  height: 130px;
  border-radius: 0;
}
.gw-pimg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(18, 26, 23, 0.6),
    rgba(18, 26, 23, 0) 70%
  );
}
.gw-pimg span {
  background-size: cover;
  background-position: center 62%;
}
.gw-pimg .cool {
  background-image: var(--img-a);
}
.gw-pimg .warm {
  background-image: var(--img-b);
}
.gw-ph {
  position: relative;
  margin: -46px 10px 0;
  z-index: 2;
  color: #fff;
  font:
    600 12px/1.45 "Noto Serif JP",
    serif;
  letter-spacing: 0.06em;
  min-height: 36px;
}
.grow.short .gw-ph {
  font-size: 15px;
}
.gw-pbtn {
  justify-self: stretch;
  margin: 14px 10px 10px;
  text-align: center;
  background: #23352f;
  border-radius: 0;
  padding: 7px 0;
  font-size: 9px;
  letter-spacing: 0.12em;
}
.gw-pb > i {
  margin: 0 10px 6px;
  height: 44px;
  border-radius: 0;
  background: #fff;
  box-shadow: 0 1px 0 #ebe5da;
}
.gw-pb > i.s {
  width: auto;
  height: 44px;
}
.gw-chat {
  top: auto;
  bottom: 96px;
  justify-content: flex-end;
  width: 52%;
}
.gw-msg {
  border-radius: 14px 14px 14px 4px;
  font-size: 13.5px;
  font-weight: 600;
  padding: 11px 15px 11px 11px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.05),
    0 16px 34px -16px rgba(0, 0, 0, 0.45);
}
.gw-msg .av {
  background: #e9e6f6;
  color: #3d35b5;
  font-size: 10px;
}
.gw-ai {
  background: #fff;
  color: #2a2b28;
  border-radius: 4px;
  border-left: 3px solid #3d35b5;
  font-weight: 700;
  font-size: 11.5px;
  padding: 5px 12px;
  box-shadow: 0 8px 20px -14px rgba(0, 0, 0, 0.5);
}
.gw-stamp {
  display: none;
}
.gw-toast {
  position: absolute;
  left: calc(10% + 18px);
  bottom: 62px;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #111;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 6px;
  letter-spacing: 0.04em;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.5s var(--ease);
  box-shadow: 0 18px 36px -16px rgba(0, 0, 0, 0.6);
}
.gw-toast::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2fbf71;
}
.gw-toast small {
  font: 500 11px var(--en);
  opacity: 0.7;
}
.gw-toast.on {
  opacity: 1;
  transform: none;
}
.gw-hist {
  top: -34px;
}
.gw-hist::before {
  content: "変更の履歴";
  font-size: 11px;
  font-weight: 700;
  color: var(--mute);
  margin-right: 4px;
  align-self: center;
  letter-spacing: 0.06em;
}
.gw-hist li {
  background: var(--white);
  color: var(--ink-2);
}
.gflash {
  outline: 2px solid #3d35b5;
  outline-offset: -2px;
}
.gw-tag {
  position: absolute;
  z-index: 6;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: #3d35b5;
  padding: 2px 7px;
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.3s;
}
.gw-tag.on {
  opacity: 1;
}

.stack.one {
  grid-template-columns: 1fr;
}
.stack.one .menus {
  grid-template-columns: repeat(4, 1fr);
}
.case-grid > *,
.case-stage {
  min-width: 0;
}
@media (max-width: 1100px) {
  .stack.one .menus {
    grid-template-columns: 1fr 1fr;
  }
  .fmap {
    grid-template-columns: 1fr 1fr;
  }
  .l3x {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .l3-ring {
    max-width: 320px;
  }
}
@media (max-width: 760px) {
  :root {
    --sec: 72px;
  }
  .bridge {
    font-size: 18px;
    padding-top: 52px;
  }
  .bridge::before {
    height: 34px;
  }
  .bridge::after {
    top: 34px;
    width: 8px;
    height: 8px;
    margin-left: -4px;
  }
  .bridge.sm {
    font-size: 17px;
    margin: 56px auto 28px;
  }
  .bridge[style] {
    margin-bottom: 44px !important;
  }
  .bridge.end {
    margin-top: 56px;
  }
  .fmap.snap > .fm {
    flex-basis: 78%;
  }
  .fm svg {
    height: 70px;
  }
  .l3-ring {
    max-width: 300px;
  }
  .l3-ring .rb {
    inset: 15% 9% 9%;
  }
  .l3-ring .ra {
    inset: 36% 16% 15%;
  }
  .l3-ring .lb {
    font-size: 12px;
  }
  .l3-ring .ra span {
    font-size: 12px;
  }
  .l3-ring .ra small {
    font-size: 10.5px;
  }
  .l3-ring .lb b,
  .l3-ring .ra b {
    font-size: 16px;
  }
  .l3r {
    padding: 16px 18px;
    grid-template-columns: 30px 1fr;
    gap: 2px 12px;
  }
  .l3r .k {
    font-size: 26px;
  }
  .l3r h4 {
    font-size: 15px;
  }
  .l3r p {
    font-size: 13px;
  }
  .gw-toast {
    left: 12px;
    bottom: 56px;
    font-size: 11px;
  }
  .gw-chat {
    bottom: 56px;
    width: 82%;
  }
  .gw-hist::before {
    display: none;
  }
}

/* release */
.review-toggle,
.rv-hero {
  display: none !important;
}
body.has-review .review-toggle {
  display: block !important;
}
body.has-review.review .rv-hero {
  display: block !important;
}
.rv-only {
  display: none !important;
}
body.review .rv-only {
  display: grid !important;
}
.form-embed {
  padding: 24px 24px 18px;
}
.tel-lg {
  grid-template-columns: 1fr;
  gap: 2px;
}
.tel-lg .tel-n {
  white-space: nowrap;
}
.form-embed iframe {
  display: block;
  width: 100%;
  min-height: 500px;
  background: var(--white);
}
.form-embed .note a {
  font-weight: 700;
}
.chips-t {
  margin: 26px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--mute);
  letter-spacing: 0.06em;
}
.chips {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}
.chips li {
  background: var(--white);
  font-size: 13.5px;
  font-weight: 700;
  padding: 10px 16px;
  letter-spacing: 0.06em;
}
@media (max-width: 760px) {
  .form-embed {
    padding: 14px;
  }
  .chips li {
    font-size: 12.5px;
    padding: 8px 12px;
  }
}

/* thanks page */
.thanks-sec {
  min-height: calc(100vh - var(--hdr) - 140px);
  display: flex;
  align-items: center;
}
.thanks-sec .wrap {
  width: 100%;
}
.thanks-box {
  max-width: 760px;
}
.thanks-box .h2 {
  margin-top: 34px;
}
.thanks-box .tel-lg {
  max-width: 30em;
}
.thanks-cta {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 36px;
}

/* form: show the whole form without inner scroll */
.form-embed iframe {
  min-height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}
@media (max-width: 760px) {
  .form-embed iframe {
    height: 1320px;
  }
}

/* ===== fit to viewport height (laptops) ===== */
/* FV: keep the whole first view inside the screen */
.hero {
  padding: clamp(28px, 5vh, 64px) 0 clamp(64px, 9vh, 110px);
}
.hero .h1main {
  font-size: clamp(44px, 6.6vh, 58px);
  margin-top: clamp(16px, 3vh, 30px);
}
.hero .sub {
  margin-top: clamp(14px, 2.6vh, 28px);
}
.hero-cta {
  margin-top: clamp(20px, 3.6vh, 38px);
}
.hero .tel {
  margin-top: clamp(14px, 2.4vh, 24px);
  padding-top: clamp(10px, 1.8vh, 18px);
}
.gw-stage {
  height: clamp(380px, calc(100vh - 300px), 540px);
}
/* 03 demo: the app always fits under the tabs and rail */
.demo .app {
  aspect-ratio: auto;
  height: clamp(470px, calc(100vh - var(--hdr) - 200px), 660px);
  min-height: 0;
}
/* 04 three layers: sticky area follows the screen height, content is scaled to fit */
.story-pin {
  top: calc(var(--hdr) + 16px);
  height: calc(100vh - var(--hdr) - 32px);
  min-height: 0;
}
.story-left,
.story-view {
  zoom: var(--fz, 1);
}
.story-left h3 {
  margin-top: 10px;
}
.layer-list {
  margin-top: 20px;
}
.layer-list li {
  padding: 11px 0 11px 26px;
}
.layer-reuse {
  margin-top: 18px;
}
/* 05 example (diagnosis) */
.dg {
  height: clamp(460px, calc(100vh - 210px), 600px);
}
/* 07 gates: same rule as the layers */
.gpin {
  top: calc(var(--hdr) + 16px);
}
.gbox {
  zoom: var(--gz, 1);
}
@media (max-width: 1100px) {
  .story-pin {
    height: auto;
  }
  .story-left,
  .story-view,
  .gbox {
    zoom: 1;
  }
}
@media (max-width: 760px) {
  .gw-stage {
    height: 400px;
  }
  .demo .app {
    height: auto;
  }
  .dg {
    height: 480px;
  }
}
@media (max-width: 1100px) {
  .layer-list li {
    padding: 0;
  }
  .layer-list {
    margin-top: 16px;
  }
}
@media (max-width: 760px) {
  .hero {
    padding: 24px 0 56px;
  }
  .hero .h1main {
    font-size: 33px;
    margin-top: 18px;
  }
  .hero .sub {
    margin-top: 16px;
  }
  .hero-cta {
    margin-top: 22px;
  }
}

/* no change-highlight feature: edits are shown with a short pulse only */
[data-el].chg,
.mp .chg,
.mp [data-el].chg {
  outline: none !important;
  box-shadow: none;
  animation: editpulse 1.6s ease-out;
}
.gflash {
  outline: none !important;
  animation: editpulse 1.6s ease-out;
}
@keyframes editpulse {
  0% {
    box-shadow: 0 0 0 0 rgba(61, 53, 181, 0.45);
  }
  100% {
    box-shadow: 0 0 0 16px rgba(61, 53, 181, 0);
  }
}
.gw-tag {
  display: none !important;
}
#dBA {
  display: none !important;
}

/* ===== 3 layers: two layers (A inside B) ===== */
.l3-ring > .rb {
  inset: 0;
  padding-top: 20px;
}
.l3-ring > .rb .ra {
  inset: 24% 16% 16%;
}
.l3-ring {
  max-width: 400px;
}
/* ===== FV: taller page, chat bubbles in their own space below the page ===== */
.gw-stage {
  height: clamp(480px, calc(100vh - 205px), 640px);
}
.gw-page {
  left: 0;
  right: 7%;
  top: 0;
  bottom: 118px;
}
.gw-chat {
  left: 0;
  right: auto;
  top: auto;
  bottom: 0;
  width: 74%;
  height: 110px;
  justify-content: flex-start;
  gap: 8px;
}
.gw-ai {
  margin-left: 36px;
}
.gw-phone {
  right: -6px;
  bottom: 66px;
}
.gw-toast {
  left: 18px;
  bottom: 136px;
}
.gw-head .gw-hist {
  position: static;
  top: auto;
  margin: 0 0 0 auto;
}
.gw-head .icon-btn {
  margin-left: 12px;
}
.grow .frame-note {
  margin-top: 10px;
}
@media (max-width: 760px) {
  .gw-stage {
    height: 500px;
  }
  .gw-page {
    right: 0;
    bottom: 112px;
  }
  .gw-chat {
    width: 100%;
    height: 104px;
    left: 0;
  }
  .gw-phone {
    width: 96px;
    height: 196px;
    right: -4px;
    bottom: 74px;
  }
  .gw-toast {
    left: 10px;
    bottom: 126px;
  }
  .gw-head .gw-hist {
    display: none;
  }
  .gw-head .icon-btn {
    margin-left: auto;
  }
}

/* FV: fading bubbles leave the flow so the new pair stays in place */
.gw-chat .fade {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
/* two-layer diagram: wider, lighter */
.l3-ring {
  aspect-ratio: 4/3;
  max-width: 440px;
}
.l3-ring > .rb {
  padding-top: 22px;
}
.l3-ring > .rb .ra {
  inset: 30% 13% 13%;
}
@media (max-width: 760px) {
  .gw-stage {
    height: 440px;
  }
  .l3-ring {
    max-width: 320px;
  }
}

/* FV: keep the visual on the right of the copy on PC widths (861px and up) */
@media (min-width: 861px) and (max-width: 1100px) {
  .hero-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 32px;
  }
  .hero .h1main {
    font-size: clamp(34px, 4.3vw, 48px);
  }
  .hero .sub {
    font-size: 16px;
  }
  .hero .lead {
    font-size: 13.5px;
  }
  .hero .prodname {
    font-size: 19px;
  }
  .hero .band {
    font-size: 13px;
  }
  .hero-cta {
    gap: 18px;
  }
  .hero .btn {
    padding: 0 22px 0 16px;
  }
  .tel-n {
    font-size: 22px;
  }
  .gw-stage {
    height: clamp(420px, calc(100vh - 220px), 560px);
  }
  .gw-msg {
    font-size: 12.5px;
  }
  .gw-phone {
    width: 128px;
    height: 258px;
  }
  .gw-head .gw-hist::before {
    display: none;
  }
}

/* official Givery logo */
.logo img,
.logo svg.lg {
  display: block;
  height: 30px;
  width: auto;
}
.ftr .logo img,
.ftr .logo svg.lg {
  height: 26px;
}
@media (max-width: 760px) {
  .logo img,
  .logo svg.lg {
    height: 24px;
  }
}

/* light mid CTA (after use cases) */
.mid-cta.slim {
  margin-top: 80px;
  padding: 28px 36px;
  gap: 16px 32px;
}
.mid-cta.slim h3 {
  font-size: 20px;
}
.mid-cta.slim p {
  font-size: 14px;
  margin-top: 4px;
}
.mid-cta.slim .btn {
  min-height: 50px;
  font-size: 15px;
}
@media (max-width: 760px) {
  .mid-cta.slim {
    margin-top: 56px;
    padding: 22px 20px;
  }
  .mid-cta.slim h3 {
    font-size: 17px;
  }
}