/* DepthX サービスサイト — デザイン案 v0.1
   暗い地で「声の粒」と深さを見せ、相談の章から明るい地に切り替える。 */

:root {
  --bg: #080E09;
  --bg-2: #0D1410;
  --tile: #121915;
  --tile-2: #161E19;
  --line: rgba(255, 255, 255, .08);
  --text: #F5F7F5;
  --text-2: #A9B0AC;
  --text-3: #8E9692;
  --text-dim: #29312C;
  --mint: #8ED9C8;
  --mint-2: #49AB94;
  --mint-3: #1F6A58;

  --paper: #F5F7F5;
  --ink: #080E09;
  --ink-2: #1C211E;
  --ink-3: #4A524E;
  --ink-4: #5C6560;
  --line-ink: rgba(8, 14, 9, .1);
  --err: #B5432F;

  --grad: linear-gradient(90deg, #F0FFF9 0%, #C4F0E4 30%, #8ED9C8 62%, #5DBBA6 86%, #49AB94 100%);
  --grad-ink: linear-gradient(90deg, #12493C 0%, #1F6A58 45%, #49AB94 100%);

  --ease: cubic-bezier(.28, .11, .32, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  --nav-h: 52px;
  --scroll: 1.1;
  --gutter: 22px;
  --wrap: 1120px;
  --wrap-narrow: 840px;
  --r-lg: 28px;

  --font: "SF Pro JP", "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
}
@media (min-width: 735px) { :root { --gutter: 44px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + var(--gmo-header, 0px)); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 6px; }
[data-theme="light"] :focus-visible { outline-color: var(--mint-3); }
::selection { background: rgba(142, 217, 200, .32); }

.wrap { width: min(var(--wrap), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.wrap--narrow { width: min(var(--wrap-narrow), calc(100% - var(--gutter) * 2)); }
.nowrap { white-space: nowrap; }

/* ---------- type ---------- */
.h-super, .h2, .h3, .h4, .hero__title, .hero__sub, .statement__text, .tile h3, .case h3, .principle h4, .found__text, .lead {
  font-feature-settings: "palt";
  word-break: auto-phrase;
  text-wrap: balance;
}
.cb, .bub, .msg p, .log__q, .principle__ex p, .method__points li, .demo__hint {
  word-break: auto-phrase;
  text-wrap: pretty;
}
.h-super { font-size: 80px; line-height: 1.1; font-weight: 600; letter-spacing: .005em; }
.h2 { font-size: 56px; line-height: 1.16; font-weight: 600; letter-spacing: .005em; }
.h3 { font-size: 40px; line-height: 1.22; font-weight: 600; letter-spacing: .005em; }
.h4 { font-size: 24px; line-height: 1.35; font-weight: 600; }
.lead { font-size: 21px; line-height: 1.62; font-weight: 600; color: #8C9590; max-width: 34em; }
.lead strong { color: var(--text); font-weight: 600; }
.lead--sm { font-size: 19px; }
.body { font-size: 17px; line-height: 1.8; color: var(--text-2); }
.dim { color: var(--text-3); }
.grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.eyebrow {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 19px;
  line-height: 1.3;
  font-weight: 600;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.eyebrow--ink { background-image: var(--grad-ink); }

/* ---------- buttons, links, segmented control ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  border-radius: 980px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .25s var(--ease), box-shadow .4s var(--ease);
}
.btn:active { transform: scale(.965); }
.btn--mint { background: var(--mint); color: var(--ink); }
.btn--mint:hover { background: #A9E8DA; box-shadow: 0 0 0 6px rgba(142, 217, 200, .14); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #1E2923; box-shadow: 0 0 0 6px rgba(8, 14, 9, .08); }
.btn--sm { height: 36px; padding: 0 16px; font-size: 14px; }
.btn--xs { height: 28px; padding: 0 12px; font-size: 12px; }
.btn--lg { height: 54px; padding: 0 32px; font-size: 17px; }

.link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--mint);
  font-size: 17px;
  font-weight: 500;
  text-underline-offset: .28em;
  text-decoration-thickness: 1px;
}
.link:hover { text-decoration-line: underline; }
.link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease-out); }
.link--down:hover svg { transform: translateY(3px); }
.link--more[aria-expanded="true"] svg { transform: rotate(180deg); }
[data-theme="light"] .link { color: var(--mint-3); }

.seg {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  padding: 4px;
  border-radius: 980px;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
  overflow-x: auto;
  scrollbar-width: none;
  isolation: isolate;
}
.seg::-webkit-scrollbar { display: none; }
.seg button {
  position: relative;
  z-index: 1;
  flex: none;
  height: 36px;
  padding: 0 18px;
  border-radius: 980px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  transition: color .4s var(--ease);
}
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { color: var(--ink); }
.seg__ink {
  position: absolute;
  z-index: 0;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 0;
  border-radius: 980px;
  background: var(--text);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .28);
  transition: transform .6s var(--ease-out), width .6s var(--ease-out), height .6s var(--ease-out), background-color .5s var(--ease);
}
.seg--sm button { height: 32px; padding: 0 14px; font-size: 13px; }

/* ---------- nav ---------- */
.nav { position: fixed; inset: var(--gmo-header, 0px) 0 auto; z-index: 100; color: var(--text); transition: color .5s var(--ease); }
.nav__bar {
  position: relative;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 var(--gutter);
}
.nav__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(8, 14, 9, .72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08);
  opacity: 0;
  transition: opacity .5s var(--ease), background-color .5s var(--ease), box-shadow .5s var(--ease);
}
.nav.is-stuck .nav__bar::before, .nav.is-open .nav__bar::before { opacity: 1; }
.nav--light { color: var(--ink); }
.nav--light .nav__bar::before { background: rgba(245, 247, 245, .78); box-shadow: inset 0 -1px 0 rgba(8, 14, 9, .08); }
.nav__logo { flex: none; display: block; padding: 6px 0; }
.nav__logo svg { width: auto; height: 32px; fill: currentColor; transition: opacity .3s var(--ease); }
.nav__logo:hover svg { opacity: .72; }
.nav__links { position: relative; display: flex; gap: 24px; margin-left: auto; }
.nav__links a { font-size: 12px; line-height: var(--nav-h); opacity: .74; transition: opacity .3s var(--ease); }
.nav__links a:hover, .nav__links a.is-current { opacity: 1; }
.nav__ink {
  position: absolute;
  left: 0;
  bottom: 13px;
  height: 1px;
  width: 0;
  background: currentColor;
  opacity: 0;
  transition: transform .6s var(--ease-out), width .6s var(--ease-out), opacity .4s var(--ease);
}
.nav__cta { flex: none; }
.nav--light .nav__cta { background: var(--ink); color: #fff; }
.nav__toggle { display: none; flex: none; width: 36px; height: 36px; margin-right: -9px; align-items: center; justify-content: center; }
.nav__burger { position: relative; display: block; width: 16px; height: 1.5px; border-radius: 1px; background: currentColor; transition: background-color .2s var(--ease); }
.nav__burger::before, .nav__burger::after { content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform .45s var(--ease-out); }
.nav__burger::before { top: -5px; }
.nav__burger::after { top: 5px; }
.nav.is-open .nav__burger { background: transparent; }
.nav.is-open .nav__burger::before { transform: translateY(5px) rotate(45deg); }
.nav.is-open .nav__burger::after { transform: translateY(-5px) rotate(-45deg); }
.nav__menu { display: none; }

.to-top {
  position: fixed;
  z-index: 40;
  right: 24px;
  bottom: 24px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(18, 25, 21, .9);
  color: var(--mint);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 10px 24px rgba(0, 0, 0, .28);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .4s var(--ease), transform .5s var(--ease-out), background-color .3s var(--ease);
}
.to-top.is-on { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { background: rgba(28, 38, 33, .94); }
.to-top:active { transform: scale(.94); }
.to-top svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- particle field ---------- */
.voices { position: fixed; inset: 0; display: block; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.no-field .voices { display: none; }
.no-field .hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(70vh, 86vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(240, 255, 249, .5), rgba(142, 217, 200, .22) 38%, transparent 70%);
  filter: blur(8px);
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--nav-h) + 24px) 0 clamp(40px, 7vh, 84px);
}
.hero__content { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; will-change: transform, opacity; }
.hero__eyebrow { font-size: 28px; line-height: 1.18; font-weight: 600; letter-spacing: .01em; }
.hero__title { margin-top: 8px; font-size: clamp(30px, 8.4vw, 64px); line-height: 1.14; font-weight: 600; letter-spacing: .005em; }
.hero__title .line { display: block; width: fit-content; padding-bottom: .04em; }
.hero__sub { margin-top: 16px; font-size: 21px; line-height: 1.5; font-weight: 600; }
.hero__link { margin-top: 24px; }
.hero__buy {
  flex: none;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 12px 12px 22px;
  border-radius: 26px;
  background: rgba(30, 37, 33, .58);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.hero__buy p { font-size: 14px; line-height: 1.45; font-weight: 500; }
.js .hero [data-in] {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(12px);
  transition: opacity 1.2s var(--ease-out) var(--d, 0s), transform 1.6s var(--ease-out) var(--d, 0s), filter 1.4s var(--ease-out) var(--d, 0s);
}
.js .hero.is-ready [data-in] { opacity: 1; transform: none; filter: none; }

/* ---------- proof ---------- */
.proof { position: relative; z-index: 1; padding: 20vh 0 24vh; text-align: center; }
.proof__eyebrow { margin-bottom: 44px; font-size: 17px; font-weight: 600; color: var(--text-2); }
.proof__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.proof__num {
  display: inline-block;
  padding: 0 .04em .06em;
  font-size: 96px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.proof__num small { margin: 0 .05em; font-size: .4em; letter-spacing: 0; }
.proof__label { display: block; margin-top: 16px; font-size: 17px; font-weight: 500; color: var(--text-2); }
.proof__note { margin-top: 52px; font-size: 12px; color: var(--text-3); }

/* ---------- statement ---------- */
.statement { position: relative; z-index: 1; height: calc(380vh / var(--scroll)); }
.statement__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; overflow: hidden; }
.statement__text {
  max-width: 21em;
  padding: 0 var(--gutter);
  text-align: center;
  font-size: clamp(27px, 4.4vw, 60px);
  line-height: 1.44;
  font-weight: 600;
  letter-spacing: .01em;
  will-change: opacity, transform, filter;
}
.statement__line { display: block; }
@media (min-width: 735px) { br.sp-br { display: none; } }
.statement .ch { color: var(--text-dim); transition: color .5s var(--ease); }
.statement .ch.is-lit { color: var(--text); }
.statement__line--key .ch.is-lit { color: var(--mint); }
.statement__logo { position: absolute; left: 50%; top: 50%; width: var(--logo-w, min(64vw, 560px)); transform: translate(calc(-50% + var(--logo-x, 0px)), calc(-50% + var(--logo-y, 0px))); opacity: 0; pointer-events: none; }
.statement__logo svg { width: 100%; height: auto; fill: var(--text); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- section shell ---------- */
.sec { position: relative; z-index: 1; background: var(--bg); padding: clamp(112px, 14vw, 200px) 0; }
.sec--alt { background: var(--bg-2); }
.sec--light { background: var(--paper); color: var(--ink); }
.sec--light .h2, .sec--light .h3 { color: var(--ink); }
.sec--light .lead { color: var(--ink-4); }
.sec--light .lead strong { color: var(--ink); }
.sec-head { margin-bottom: clamp(56px, 7vw, 96px); }
.sec-head .lead { margin-top: 28px; }
.sec-head--center { text-align: center; }
.sec-head--center .lead { margin-inline: auto; }

.js .rv {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 1s var(--ease-out) var(--d, 0s), transform 1.3s var(--ease-out) var(--d, 0s), filter 1.2s var(--ease-out) var(--d, 0s);
}
.js .rv--focus { filter: blur(10px); }
.js .rv.is-in { opacity: 1; transform: none; filter: none; }
.is-instant, .is-instant * { transition: none !important; animation: none !important; }

/* ---------- tiles (shared) ---------- */
.tile {
  position: relative;
  padding: 40px;
  border-radius: var(--r-lg);
  background: var(--tile);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
  overflow: hidden;
  transition: box-shadow .5s var(--ease), background-color .5s var(--ease);
}
.tile:hover { box-shadow: inset 0 0 0 1px rgba(142, 217, 200, .2); }
.tile > h3 { margin-top: 32px; font-size: 28px; line-height: 1.32; font-weight: 600; }
.tile > p { margin-top: 12px; font-size: 17px; line-height: 1.75; color: var(--text-2); }
.viz {
  position: relative;
  height: 210px;
  border-radius: 20px;
  background: radial-gradient(120% 100% at 50% 0%, rgba(142, 217, 200, .07), transparent 62%), rgba(255, 255, 255, .02);
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* ---------- problem ---------- */
.problem .h2 { margin-bottom: clamp(56px, 7vw, 88px); }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.tile--7 { grid-column: span 7; }
.tile--5 { grid-column: span 5; }

.viz-word { align-content: center; gap: 14px; }
.vw__q { font-size: 13px; color: var(--text-3); }
.vw__field {
  display: flex;
  align-items: center;
  min-width: 250px;
  height: 52px;
  padding: 0 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  font-size: 19px;
  font-weight: 600;
}
.vw__caret { width: 2px; height: 22px; margin-left: 2px; border-radius: 1px; background: var(--mint); animation: caret 1.05s steps(1) infinite; }
.vw__end { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 12px; color: var(--text-3); opacity: 0; transform: translateY(6px); transition: opacity .6s var(--ease), transform .7s var(--ease-out); }
.vw__end i { width: 32px; height: 1px; background: currentColor; }
.is-ended .vw__end { opacity: 1; transform: none; }
.is-ended .vw__caret { animation: none; opacity: 0; transition: opacity .3s; }
@keyframes caret { 50% { opacity: 0; } }

.viz-drop { align-content: center; justify-items: center; }
.vd__label { font-size: 13px; color: var(--text-3); }
.vd__num { position: relative; margin-top: 2px; font-size: 76px; line-height: 1; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.vd__num em { position: absolute; right: -.58em; top: -.12em; font-style: normal; font-size: .52em; color: var(--mint); opacity: 0; transform: translateY(12px) scale(.6); transition: opacity .6s var(--ease), transform .9s var(--ease-out); }
.is-q .vd__num em { opacity: 1; transform: none; animation: bob 2.6s ease-in-out .9s infinite; }
.vd__line { position: absolute; left: 0; right: 0; bottom: 16px; width: 100%; height: 56px; fill: none; stroke: rgba(142, 217, 200, .55); stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-play .vd__line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s var(--ease-io); }
@keyframes bob { 50% { transform: translateY(-7px); } }

.viz-back { align-content: end; padding: 0 30px 18px; }
.vb__bars { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; width: 100%; height: 128px; align-items: end; }
.vb__bars span { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; height: 100%; font-size: 11px; color: var(--text-3); }
.vb__bars i { width: 100%; max-width: 30px; height: calc(var(--h) * 100%); border-radius: 7px; background: rgba(255, 255, 255, .13); transform-origin: bottom; transform: scaleY(0); transition: transform 1s var(--ease-out); }
.vb__bars span:nth-child(2) i { transition-delay: .06s; }
.vb__bars span:nth-child(3) i { transition-delay: .12s; }
.vb__bars span:nth-child(4) i { transition-delay: .18s; }
.vb__bars span:nth-child(5) i { transition-delay: .24s; }
.vb__bars span:nth-child(6) i { transition-delay: .3s; }
.is-play .vb__bars i { transform: none; }
.vb__bars .is-dip i { background: var(--mint); box-shadow: 0 0 18px rgba(142, 217, 200, .4); }
.vb__bars .is-dip { color: var(--mint); }
.vb__tip {
  position: absolute;
  top: 18px;
  left: calc(30px + (100% - 60px) * .5833);
  transform: translate(-50%, 8px);
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .6s var(--ease) .9s, transform .8s var(--ease-out) .9s;
}
.vb__tip small { display: block; font-size: 11px; color: var(--text-3); }
.vb__tip b { display: block; font-size: 15px; letter-spacing: .2em; color: var(--text-2); animation: blink 2s ease-in-out infinite; }
.is-play .vb__tip { opacity: 1; transform: translate(-50%, 0); }
@keyframes blink { 50% { opacity: .35; } }

.vo__field { position: absolute; inset: 0; }
.vo__field i { position: absolute; left: var(--x); top: var(--y); width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: rgba(255, 255, 255, .22); animation: twinkle var(--t, 3s) ease-in-out var(--dl, 0s) infinite; }
.vo__own i { position: absolute; left: var(--x); top: var(--y); width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px rgba(142, 217, 200, .9); }
.vo__own {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 116px;
  height: 116px;
  margin: -58px 0 0 -58px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(142, 217, 200, .6), 0 0 40px rgba(142, 217, 200, .12);
  background: radial-gradient(circle, rgba(142, 217, 200, .12), transparent 70%);
  display: grid;
  place-items: end center;
  padding-bottom: 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--mint);
}
.vo__market { position: absolute; left: 18px; top: 14px; font-size: 11px; color: var(--text-3); }
@keyframes twinkle { 0%, 100% { opacity: .15; } 50% { opacity: .7; } }

/* ---------- shift (pinned) ---------- */
.shift { position: relative; z-index: 1; height: calc(400vh / var(--scroll)); background: var(--bg); }
.shift__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.shift__inner { display: flex; flex-direction: column; align-items: center; padding-top: var(--nav-h); }
.shift__head { text-align: center; }
.shift__head .lead { margin: 16px auto 0; max-width: none; }
.shift__switch { margin-top: 32px; }
.shift__switch.is-after .seg__ink { background: var(--mint); }
.shift__stage {
  position: relative;
  display: grid;
  grid-template-columns: 150px minmax(0, 520px) 300px;
  gap: 40px;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 32px;
}
.survey {
  position: relative;
  display: flex;
  flex-direction: column;
  height: min(450px, calc(100svh - 330px));
  min-height: 300px;
  padding: 22px 22px 18px;
  border-radius: 28px;
  background: var(--tile);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 80px rgba(0, 0, 0, .35);
  overflow: hidden;
}
.survey::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 70%;
  background: radial-gradient(80% 100% at 50% 100%, rgba(73, 171, 148, .3), transparent 72%);
  opacity: var(--deep, 0);
  transition: opacity .8s var(--ease);
  pointer-events: none;
}
.survey__q { position: relative; z-index: 1; min-height: calc(1.6em + 14px); padding-bottom: 14px; font-size: 14px; line-height: 1.6; font-weight: 600; color: var(--text-2); box-shadow: 0 1px 0 var(--line); }
.survey__caret { display: none; width: 1.5px; height: 1.1em; margin-left: 2px; border-radius: 1px; background: var(--mint); vertical-align: -.18em; animation: caret 1s steps(1) infinite; }
.survey__q.is-typing .survey__caret { display: inline-block; }
.survey__thread {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 4px;
  overflow: hidden;
}
.survey__thread::after { content: ""; flex: none; height: 4px; transition: height .6s var(--ease-out); }
.survey__thread.is-scrolled { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 40px); mask-image: linear-gradient(to bottom, transparent 0, #000 40px); }
.msg { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .75s var(--ease-out); }
.msg > div { display: flex; min-height: 0; overflow: hidden; }
.msg--a > div { justify-content: flex-end; }
.msg p {
  max-width: 84%;
  margin-top: 10px;
  padding: 11px 16px;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 500;
  opacity: 0;
  transform: translateY(14px) scale(.98);
  filter: blur(5px);
  transition: opacity .5s var(--ease), transform .8s var(--ease-out), filter .6s var(--ease);
}
.msg--a p { border-radius: 20px 20px 6px 20px; background: rgba(245, 247, 245, .94); color: var(--ink); }
.msg--ai p { border-radius: 20px 20px 20px 6px; background: rgba(142, 217, 200, .1); color: var(--mint); box-shadow: inset 0 0 0 1px rgba(142, 217, 200, .26); }
.msg.is-on { grid-template-rows: 1fr; }
.msg.is-on p { opacity: 1; transform: none; filter: none; transition-delay: .1s; }
.msg.is-old p { opacity: .5; }

.gauge { justify-self: end; display: flex; gap: 14px; height: 300px; }
.gauge__track { position: relative; width: 2px; border-radius: 2px; background: rgba(255, 255, 255, .1); }
.gauge__fill { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--g, 0) * 100%); border-radius: inherit; background: linear-gradient(var(--mint), var(--mint-2)); transition: height .9s var(--ease-out); }
.gauge__fill::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 6px rgba(142, 217, 200, .16), 0 0 20px rgba(142, 217, 200, .7);
}
.gauge__ticks { display: flex; flex-direction: column; justify-content: space-between; margin: -6px 0; font-size: 12px; line-height: 12px; color: var(--text-3); white-space: nowrap; }
.gauge__ticks li { transition: color .5s var(--ease); }
.gauge__ticks li.is-on { color: var(--text-2); }
.gauge__ticks li.is-now { color: var(--mint); font-weight: 600; }

.found {
  grid-column: 3;
  grid-row: 1;
  padding: 24px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(142, 217, 200, .13), rgba(142, 217, 200, .04));
  box-shadow: inset 0 0 0 1px rgba(142, 217, 200, .28), 0 0 60px rgba(142, 217, 200, .08);
  opacity: 0;
  transform: translateX(24px);
  filter: blur(6px);
  transition: opacity .6s var(--ease), transform 1s var(--ease-out), filter .8s var(--ease);
}
.found.is-on { opacity: 1; transform: none; filter: none; }
.found__label { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--mint); }
.found__text { margin-top: 10px; font-size: 19px; line-height: 1.5; font-weight: 600; font-feature-settings: "palt"; }
.found__data { display: grid; gap: 10px; margin-top: 18px; }
.found__data div { display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; font-size: 13px; box-shadow: inset 0 1px 0 rgba(142, 217, 200, .16); }
.found__data dt { color: var(--text-3); }
.found__data dd { font-weight: 600; text-align: right; }
.found__data dd.is-none { font-weight: 400; color: var(--text-3); }

/* ---------- demo（ピン留めして、スクロールで再生する） ---------- */
.js .demo-sec { padding: 0; }
.demo-scene { position: relative; }
.js .demo-scene { height: calc(720vh / var(--scroll)); }
.demo-sticky { display: flex; flex-direction: column; justify-content: center; }
.js .demo-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; height: 100dvh; padding-top: var(--nav-h); overflow: hidden; }
.demo-sec .sec-head { margin-bottom: clamp(24px, 4.4vh, 52px); }
.demo { width: min(1240px, calc(100% - var(--gutter) * 2)); margin: 0 auto; }
.demo__tabs { display: none; }
.demo__fit { position: relative; }
.demo__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 336px minmax(0, 1fr); gap: 28px; align-items: stretch; transform-origin: 50% 0; }
.pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 680px;
  padding: 22px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.pane--phone { position: relative; display: grid; place-items: center; padding: 0; background: none; box-shadow: none; }
.pane__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 16px; font-size: 14px; }
.pane__head b { font-weight: 600; }
.pane__head small { font-size: 12px; color: var(--text-3); }

.goal { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .04); font-size: 13px; }
.goal span:first-child { margin-right: 8px; color: var(--text-3); }
.goal__meter { display: flex; gap: 4px; flex: none; }
.goal__meter i { width: 22px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .12); transition: background-color .5s var(--ease), box-shadow .5s var(--ease); }
.goal__meter i.is-on { background: var(--mint); box-shadow: 0 0 10px rgba(142, 217, 200, .6); }
.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.role { position: relative; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px transparent; font-size: 12px; line-height: 1.5; color: var(--text-3); transition: box-shadow .4s var(--ease), background-color .4s var(--ease), color .4s var(--ease); }
.role b { display: block; margin-bottom: 4px; font-size: 13px; color: var(--text-2); transition: color .4s var(--ease); }
.role i { position: absolute; top: 15px; right: 14px; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.role.is-active { background: rgba(142, 217, 200, .08); box-shadow: inset 0 0 0 1px rgba(142, 217, 200, .4); color: var(--text-2); }
.role.is-active b { color: var(--text); }
.role.is-active i { background: var(--mint); animation: ping 1.2s var(--ease-out) infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(142, 217, 200, .6); } 100% { box-shadow: 0 0 0 9px rgba(142, 217, 200, 0); } }
.log { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; margin-top: 14px; overflow: hidden; }
.log.is-scrolled, .phone__chat.is-scrolled { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px); mask-image: linear-gradient(to bottom, transparent 0, #000 28px); }
.log__empty { margin: auto 0; text-align: center; font-size: 13px; color: var(--text-3); }
.log__item { padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .04); font-size: 13px; line-height: 1.7; color: var(--text-2); animation: logIn .6s var(--ease-out) both; }
.log__who { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: #C8D2CD; }
.log__who::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.log__item--maker .log__who { color: var(--mint); }
.log__q { margin-top: 6px; font-weight: 600; color: var(--text); }
.log__item.is-slot { visibility: hidden; animation: none; }
@keyframes logIn { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

.phone {
  position: relative;
  width: 320px;
  height: 660px;
  padding: 11px;
  border-radius: 56px;
  background: linear-gradient(150deg, #39413C 0%, #121714 22%, #0B0F0C 70%, #2A312D 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 90px rgba(0, 0, 0, .6), 0 0 140px rgba(142, 217, 200, .09);
}
.phone__screen { position: relative; display: flex; flex-direction: column; height: 100%; border-radius: 45px; background: #F3F6F4; color: var(--ink); overflow: hidden; }
.phone__island { position: absolute; z-index: 3; top: 11px; left: 50%; width: 98px; height: 29px; margin-left: -49px; border-radius: 20px; background: #000; }
.phone__top { position: relative; z-index: 2; padding: 54px 20px 12px; background: rgba(243, 246, 244, .92); box-shadow: 0 1px 0 rgba(8, 14, 9, .06); }
.phone__top p { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.phone__progress { display: block; height: 4px; margin-top: 10px; border-radius: 2px; background: rgba(8, 14, 9, .08); overflow: hidden; }
.phone__progress i { display: block; width: 8%; height: 100%; border-radius: inherit; background: var(--mint-2); transition: width .8s var(--ease-out); }
.phone__chat { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; overflow: hidden; }
.phone__card { padding: 14px 16px; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(8, 14, 9, .06); font-size: 14px; line-height: 1.6; animation: bubbleIn .5s var(--ease-out) both; }
.phone__card small { display: block; margin-bottom: 4px; font-size: 11px; color: var(--ink-4); }
.bub { max-width: 86%; padding: 10px 14px; border-radius: 18px; font-size: 14px; line-height: 1.6; animation: bubbleIn .5s var(--ease-out) both; }
.bub--a { align-self: flex-end; border-bottom-right-radius: 6px; background: var(--ink); color: #fff; }
.bub--ai { align-self: flex-start; border-bottom-left-radius: 6px; background: #fff; box-shadow: 0 1px 2px rgba(8, 14, 9, .06); }
.typing { align-self: flex-start; display: flex; gap: 4px; padding: 13px 15px; border-radius: 18px; background: #fff; animation: bubbleIn .4s var(--ease-out) both; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); animation: dot 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.phone__input { position: relative; z-index: 2; padding: 12px 14px 24px; background: #fff; box-shadow: 0 -1px 0 rgba(8, 14, 9, .06); transform: translateY(105%); transition: transform .7s var(--ease-out); }
.phone__input.is-up { transform: none; }
.phone__input:empty { padding: 0; }
.scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.scale span { display: grid; place-items: center; height: 48px; border-radius: 14px; background: #EEF2F0; font-size: 17px; font-weight: 600; color: var(--ink); transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease-out); }
.scale span.is-press { transform: scale(.93); background: var(--ink); color: #fff; }
.scale__label { display: flex; justify-content: space-between; margin-top: 7px; font-size: 10px; color: var(--ink-4); }
.compose { display: flex; gap: 6px; transition: opacity .5s var(--ease); }
.compose.is-idle { opacity: .4; }
.compose__field { flex: 1; min-width: 0; display: flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 980px; box-shadow: inset 0 0 0 1px rgba(8, 14, 9, .15); background: #F3F6F4; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; transition: box-shadow .3s var(--ease); }
.compose.is-focus .compose__field { box-shadow: inset 0 0 0 1.5px var(--mint-2), 0 0 0 3px rgba(73, 171, 148, .2); }
.compose__ph { color: var(--ink-4); }
.compose.has-text .compose__ph { display: none; }
.compose__caret { display: none; flex: none; width: 1.5px; height: 17px; margin: 0 1px; border-radius: 1px; background: var(--mint-2); animation: caret 1s steps(1) infinite; }
.compose.is-focus .compose__caret { display: block; }
@keyframes caret { 50% { opacity: 0; } }
.compose__send { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: #fff; opacity: .28; transition: transform .25s var(--ease-out), opacity .3s var(--ease); }
.compose.has-text .compose__send { opacity: 1; }
.compose.is-press .compose__send { transform: scale(.84); }
.compose__send svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.record { padding: 4px 16px 8px; border-radius: 18px; background: rgba(255, 255, 255, .04); }
.record__head { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; font-size: 12px; color: var(--text-3); box-shadow: 0 1px 0 var(--line); }
.record__state { padding: 3px 10px; border-radius: 980px; background: rgba(255, 255, 255, .06); font-size: 11px; color: var(--text-2); transition: background-color .4s var(--ease), color .4s var(--ease); }
.record__state.is-done { background: rgba(142, 217, 200, .14); color: var(--mint); }
.record__row { display: grid; grid-template-columns: 74px 1fr; gap: 12px; margin: 0 -8px; padding: 7px 8px; border-radius: 10px; font-size: 12px; line-height: 1.55; box-shadow: 0 1px 0 var(--line); }
.record__row:last-child { box-shadow: none; }
.record__row dt { color: var(--text-3); }
.record__row dd { min-height: 1.55em; color: var(--text); }
.record__row dd:empty::before { content: ""; display: block; width: 60%; height: 8px; margin-top: 6px; border-radius: 4px; background: rgba(255, 255, 255, .06); }
.record__row.is-new { animation: rowFlash 1.3s var(--ease-out); }
.record__row .q { color: var(--text-3); }
.record__summary { color: var(--text); }
@keyframes rowFlash { 0% { background: rgba(142, 217, 200, .24); } 100% { background: transparent; } }
.tag { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 980px; background: rgba(142, 217, 200, .12); font-size: 10px; color: var(--mint); vertical-align: 1px; }
.tag--fill { margin: 6px 4px 0 0; background: var(--mint); color: var(--ink); }
.record { margin-bottom: 12px; }
.agg { margin-top: auto; padding: 18px 18px 20px; border-radius: 18px; background: rgba(255, 255, 255, .04); }
.agg__head { font-size: 13px; font-weight: 600; }
.agg__sub { margin: 4px 0 16px; font-size: 11px; color: var(--text-3); }
.bars { display: grid; gap: 10px; }
.bars__row { display: grid; grid-template-columns: 92px 1fr 56px; gap: 10px; align-items: center; font-size: 12px; color: var(--text-2); transition: color .4s var(--ease); }
.bars__track { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.bars__fill { display: block; width: 0; height: 100%; border-radius: inherit; background: rgba(255, 255, 255, .3); transition: width 1.1s var(--ease-out), background-color .5s var(--ease); }
.bars__row.is-hit { color: var(--text); }
.bars__row.is-hit .bars__fill { background: var(--mint); }
.bars__val { text-align: right; font-variant-numeric: tabular-nums; }
.bars__val em { display: inline-block; margin-left: 5px; font-style: normal; font-weight: 600; color: var(--mint); animation: odIn .5s var(--ease-out) both; }
.agg.is-pulse { animation: aggPulse 1.4s var(--ease-out); }
@keyframes aggPulse { 0% { box-shadow: 0 0 0 0 rgba(142, 217, 200, .45); } 100% { box-shadow: 0 0 0 18px rgba(142, 217, 200, 0); } }
.demo__wires { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.wire { fill: none; stroke: var(--mint); stroke-width: 1.6; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(142, 217, 200, .75)); opacity: 0; }
.wire__dot { fill: #fff; filter: drop-shadow(0 0 6px rgba(142, 217, 200, 1)); opacity: 0; }
.wire__ring { fill: none; stroke: var(--mint); stroke-width: 1.4; opacity: 0; }

/* ---------- insight: the admin on a laptop ---------- */
.js .insight { padding-top: 0; }
.insight-scene { position: relative; }
.js .insight-scene { height: calc(540vh / var(--scroll)); }
.insight-sticky { display: flex; flex-direction: column; align-items: center; }
.js .insight-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; justify-content: center; padding-top: var(--nav-h); overflow: hidden; }
.insight-head { width: min(880px, calc(100vw - var(--gutter) * 2)); }
.insight-head .lead { max-width: 33em; word-break: auto-phrase; text-wrap: balance; }
.js .insight-head { position: absolute; left: 0; right: 0; top: calc(var(--nav-h) + clamp(24px, 8vh, 96px)); z-index: 3; margin: 0 auto; }
.mac-stage {
  --mac-w: min(1040px, calc(100vw - var(--gutter) * 2), calc((100svh - 290px) * 1.5));
  position: relative;
  width: var(--mac-w);
  transform-origin: 50% 100%;
}
.js .mac-stage { will-change: transform; }
.mac-stage::before {
  content: "";
  position: absolute;
  inset: -12% -16% -20%;
  z-index: -1;
  background: radial-gradient(50% 50% at 50% 46%, rgba(142, 217, 200, .13), transparent 70%);
  opacity: var(--lit, 1);
  pointer-events: none;
}
.mac { position: relative; perspective: 2400px; perspective-origin: 50% 55%; }
.mac__lid {
  position: relative;
  z-index: 1;
  padding: calc(var(--mac-w) * .018) calc(var(--mac-w) * .018) calc(var(--mac-w) * .026);
  border-radius: calc(var(--mac-w) * .034) calc(var(--mac-w) * .034) calc(var(--mac-w) * .012) calc(var(--mac-w) * .012);
  background: #050706;
  box-shadow: 0 0 0 1.5px #2D3230, 0 0 0 2.5px #0E1110, inset 0 1px 0 rgba(255, 255, 255, .1), 0 60px 120px -30px rgba(0, 0, 0, .8);
  transform-origin: 50% 100%;
}
.js .mac__lid { will-change: transform; }
.mac__screen { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: calc(var(--mac-w) * .007); background: #F8F9F8; }
.mac__shade { position: absolute; inset: 0; z-index: 5; background: #040605; opacity: 0; pointer-events: none; }
.js .mac__shade { opacity: 1; }
.mac__notch {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: calc(var(--mac-w) * .018 - 1px);
  width: calc(var(--mac-w) * .12);
  height: calc(var(--mac-w) * .018);
  transform: translateX(-50%);
  border-radius: 0 0 calc(var(--mac-w) * .009) calc(var(--mac-w) * .009);
  background: #050706;
}
.mac__notch::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--mac-w) * .005);
  height: calc(var(--mac-w) * .005);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 35%, #34444C, #0A0E10 70%);
}
.mac__base {
  position: relative;
  z-index: 2;
  width: 112%;
  height: calc(var(--mac-w) * .024);
  margin: -1px 0 0 -6%;
  border-radius: 2px 2px calc(var(--mac-w) * .05) calc(var(--mac-w) * .05) / 2px 2px calc(var(--mac-w) * .022) calc(var(--mac-w) * .022);
  background: linear-gradient(180deg, #6A706F 0%, #363B3A 14%, #1B1F1E 56%, #0C0E0E 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.mac__base::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 15%;
  height: 40%;
  transform: translateX(-50%);
  border-radius: 0 0 calc(var(--mac-w) * .012) calc(var(--mac-w) * .012);
  background: linear-gradient(180deg, #0B0D0D, #232827);
}
.mac__base::after {
  content: "";
  position: absolute;
  left: 3%;
  right: 3%;
  top: 100%;
  height: calc(var(--mac-w) * .07);
  background: radial-gradient(50% 55% at 50% 0%, rgba(0, 0, 0, .8), transparent 75%);
  pointer-events: none;
}
.insight-caps { position: relative; width: min(760px, calc(100vw - var(--gutter) * 2)); height: 4.8em; margin-top: clamp(20px, 3.2vh, 36px); font-size: 21px; line-height: 1.52; text-align: center; }
.insight-cap {
  position: absolute;
  inset: 0;
  font-weight: 600;
  color: #8C9590;
  font-feature-settings: "palt";
  word-break: auto-phrase;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .9s var(--ease-out);
  pointer-events: none;
}
.insight-cap strong { color: var(--text); font-weight: 600; }
.insight-cap.is-on { opacity: 1; transform: none; transition-delay: .12s; }
.insight-steps { margin-top: clamp(12px, 2.2vh, 22px); }

/* the admin screen: design system plan D, laid out at 1280×800 and scaled into the lid */
@property --adm-draw { syntax: "<number>"; inherits: false; initial-value: 0; }
.adm {
  --a-canvas: #F8F9F8;
  --a-ink: #080E09;
  --a-ink-2: #1C211E;
  --a-ink-3: #3A423E;
  --a-ink-4: #4A524E;
  --a-deep: #1F6A58;
  --a-wash: rgba(31, 106, 88, .08);
  --a-line: rgba(11, 15, 12, .16);
  --a-line-2: rgba(11, 15, 12, .28);
  --a-ease: cubic-bezier(.22, 1, .36, 1);
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  width: 1280px;
  height: 800px;
  transform: scale(var(--s, .72));
  transform-origin: 0 0;
  background: var(--a-canvas);
  color: var(--a-ink-2);
  font-family: "Inter", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: .01em;
  text-align: left;
}
.js .adm { pointer-events: none; }
.js .adm.is-lit { pointer-events: auto; }
.adm button { letter-spacing: inherit; }
.adm :focus-visible { outline: 2px solid var(--a-deep); outline-offset: 3px; }
.adm .i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.adm-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.adm-top { flex: none; display: flex; align-items: center; gap: 16px; height: 68px; padding: 0 28px; }
.adm-brand { width: auto; height: 32px; fill: var(--a-ink); }
.adm-crumb { font-size: 13px; letter-spacing: .1em; color: var(--a-ink-3); }
.adm-crumb i { margin: 0 9px; font-style: normal; color: var(--a-line-2); }
.adm-crumb b { font-weight: 400; color: var(--a-ink-2); }
.adm-grow { flex: 1; }
.adm-avatar { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--a-line); border-radius: 50%; background: var(--a-canvas); font-size: 13px; letter-spacing: .04em; color: var(--a-ink-2); transition: color .28s var(--a-ease); }

.adm-shell { flex: 1; min-height: 0; display: grid; grid-template-columns: 244px minmax(0, 1fr); }
.adm-nav { position: relative; display: flex; flex-direction: column; min-height: 0; padding: 12px 18px 22px; }
.adm-nav-thumb { position: absolute; left: 18px; right: 18px; top: 0; height: 44px; border-radius: 999px; background: var(--a-ink); transform: translateY(12px); pointer-events: none; transition: transform .42s var(--a-ease), height .42s var(--a-ease); }
.adm-nav-main { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; }
.adm-nav-foot { position: relative; z-index: 1; margin-top: auto; padding-top: 18px; }
.adm-nav-label { padding: 22px 18px 8px; font-size: 13px; letter-spacing: .12em; color: var(--a-ink-4); }
.adm-navitem { position: relative; display: flex; align-items: center; gap: 13px; width: 100%; height: 44px; padding: 0 18px; border-radius: 999px; font-size: 13px; letter-spacing: .04em; color: var(--a-ink-3); text-align: left; transition: color .28s var(--a-ease); }
.adm-navitem:hover { color: var(--a-ink); }
.adm-navitem.is-active { color: #fff; }
.adm-pill { margin-left: auto; font-size: 13px; letter-spacing: .06em; color: var(--a-ink-4); transition: color .28s var(--a-ease); }
.adm-navitem.is-active .adm-pill { color: rgba(255, 255, 255, .72); }

.adm-main { position: relative; overflow: hidden; background: #fff; }
.adm-page { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .4s var(--a-ease), visibility 0s linear .4s; }
.adm-page.is-on { opacity: 1; visibility: visible; transition: opacity .45s var(--a-ease) .05s, visibility 0s; }
.adm-wrap { position: relative; max-width: 1120px; padding: 34px 40px 110px; }
.js .adm-wrap { will-change: transform; }
.adm-head { margin-bottom: 48px; }
.adm-eyebrow { font-size: 13px; font-weight: 700; line-height: 20px; letter-spacing: .12em; text-transform: uppercase; color: var(--a-ink-4); }
.adm-h1 { margin: 10px 0; font-size: 32px; font-weight: 700; line-height: 1.2; letter-spacing: -.015em; color: var(--a-ink); }
.adm-lead { max-width: 62ch; font-size: 14px; line-height: 24px; color: var(--a-ink-3); }
.adm-sec { margin-bottom: 64px; }
.adm-sh { display: flex; align-items: baseline; gap: 16px; margin-bottom: 26px; padding-bottom: 14px; border-bottom: 1px solid var(--a-line); }
.adm-h2 { font-size: 15px; font-weight: 700; line-height: 1.4; letter-spacing: .04em; color: var(--a-ink); }
.adm-meta { margin-left: auto; font-size: 13px; letter-spacing: .06em; color: var(--a-ink-3); }
.adm-q { margin-left: auto; font-size: 13px; color: var(--a-ink-3); text-align: right; }
.adm-tag { display: inline-flex; align-items: center; height: 22px; margin-left: 10px; padding: 0 9px; border: 1px solid var(--a-line); border-radius: 999px; font-size: 13px; font-weight: 400; letter-spacing: .04em; color: var(--a-deep); vertical-align: 1px; }
.adm-tag.is-down { color: var(--a-ink-2); }

.adm-lbl { margin-bottom: 12px; font-size: 13px; line-height: 20px; letter-spacing: .09em; color: var(--a-ink-3); }
.adm-metric { font-size: 28px; font-weight: 300; line-height: 1.05; letter-spacing: -.03em; color: var(--a-ink); }
.adm-unit { font-size: 13px; color: var(--a-ink-3); }
.adm-delta { display: inline-block; margin-top: 9px; font-size: 13px; letter-spacing: .05em; }
.adm-delta.is-up { color: var(--a-deep); }
.adm-delta.is-down { color: var(--a-ink-2); }
.adm-delta.is-flat { color: var(--a-ink-4); }
.adm-delta.is-pop { animation: admPop .6s var(--a-ease); }
@keyframes admPop { from { opacity: 0; transform: translateY(4px); } }
.adm-panel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 48px; }
.adm-cell { padding: 16px 18px 14px; border: 1px solid var(--a-line); border-radius: 24px; }
.adm-live { position: relative; display: inline-flex; align-items: baseline; }
.adm-plus { position: absolute; left: calc(100% + 6px); top: 4px; font-size: 13px; line-height: 1; color: var(--a-deep); pointer-events: none; animation: admPlus .9s var(--a-ease) forwards; }
@keyframes admPlus { 0% { opacity: 0; transform: translateY(4px); } 18% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-10px); } }

.adm-phase { margin-bottom: 56px; }
.adm-phase .adm-sh { margin-bottom: 18px; }
.adm-frame { padding: 26px 28px 24px; border: 1px solid var(--a-line); border-radius: 24px; }
.adm-phase .adm-frame { margin-top: 4px; }
.adm-pgrid { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.4fr); gap: 40px; align-items: stretch; }
.adm-pside { display: flex; flex-direction: column; gap: 28px; }
.adm-stat .adm-lbl { margin-bottom: 10px; }
.adm-pchart { display: flex; flex-direction: column; min-width: 0; }
.adm-scap { margin-bottom: 10px; font-size: 13px; letter-spacing: .08em; color: var(--a-ink-4); }
.adm-well { position: relative; padding-top: 8px; }
.adm-pchart .adm-well { flex: 1; }
.adm-spark { width: 100%; height: auto; min-height: 228px; overflow: visible; }
.adm-spark line { stroke: rgba(11, 15, 12, .14); }
.adm-spark text, .adm-chart text { fill: #4A524E; font-size: 13px; letter-spacing: .06em; text-rendering: geometricPrecision; }
.adm-spark text.v, .adm-chart text.v { fill: #080E09; font-size: 15px; letter-spacing: -.01em; }
.adm-spark .ln { fill: none; stroke: #1F6A58; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.adm-spark circle { fill: #1F6A58; }
.js .adm-spark .ln { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .adm-spark .end { opacity: 0; }
.adm-page.is-drawn .adm-spark .ln { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s var(--a-ease) .25s; }
.adm-page.is-drawn .adm-spark .end { opacity: 1; transition: opacity .5s var(--a-ease) 1.1s; }
.adm-mbar { display: flex; align-items: center; gap: 12px; margin: 10px 0; font-size: 13px; }
.adm-mbar .n { flex: none; width: 108px; color: var(--a-ink-3); }
.adm-mbar .t { flex: 1; height: 8px; overflow: hidden; border: 1px solid var(--a-line); border-radius: 999px; }
.adm-mbar .t i { display: block; height: 100%; border-radius: 999px; background: var(--a-deep); transform-origin: left center; }
.js .adm-mbar .t i { transform: scaleX(0); }
.adm-page.is-drawn .adm-mbar .t i { transform: scaleX(1); transition: transform .9s var(--a-ease) .2s; }
.adm-mbar .v { flex: none; width: 44px; text-align: right; color: var(--a-ink-2); }
.adm-dots { display: flex; gap: 6px; margin-top: 10px; }
.adm-dots i { width: 10px; height: 10px; border: 1px solid var(--a-line); border-radius: 50%; }
.adm-dots i.on { background: var(--a-deep); border-color: var(--a-deep); }
.adm-dots i.half { background: linear-gradient(90deg, var(--a-deep) 50%, transparent 50%); }
.adm-empty { padding: 40px 0 44px; text-align: center; }
.adm-empty-ic { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 20px; border: 1px solid var(--a-line); border-radius: 50%; color: var(--a-ink-4); }
.adm-empty-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.adm-empty-t { margin-bottom: 6px; color: var(--a-ink-2); }
.adm-empty-d { color: var(--a-ink-3); }

.adm-track { margin-bottom: 64px; }
.adm-rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 28px; }
.adm-rail-item { position: relative; display: block; padding: 16px 18px 14px; border: 1px solid var(--a-line); border-radius: 24px; background: #fff; text-align: left; transition: background-color .28s var(--a-ease), border-color .28s var(--a-ease); }
.adm-rail-item.is-active { background: var(--a-ink); border-color: var(--a-ink); }
.adm-rail-name { display: block; margin-bottom: 12px; overflow: hidden; font-size: 13px; line-height: 20px; letter-spacing: .09em; color: var(--a-ink-3); white-space: nowrap; text-overflow: ellipsis; }
.adm-rail-item.is-active .adm-rail-name { color: rgba(255, 255, 255, .72); }
.adm-rail-val { display: flex; align-items: baseline; gap: 3px; }
.adm-rail-val .adm-metric { color: var(--a-ink-3); transition: color .3s var(--a-ease); }
.adm-rail-item.is-active .adm-metric { color: #fff; }
.adm-rail-item.is-active .adm-unit { color: rgba(255, 255, 255, .7); }
.adm-rail-item.is-active .adm-delta { color: #8ED9C8; }
.adm-rail-item.is-active .adm-delta.is-down { color: #fff; }
.adm-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-bottom: 22px; }
.adm-ff { display: flex; align-items: center; gap: 12px; }
.adm-flbl { font-size: 13px; letter-spacing: .1em; color: var(--a-ink-4); }
.adm-seg { position: relative; display: flex; padding: 4px; border: 1px solid var(--a-line); border-radius: 999px; }
.adm-seg-thumb { position: absolute; top: 4px; left: 0; width: 0; height: calc(100% - 8px); border-radius: 999px; background: var(--a-ink); transition: transform .4s var(--a-ease), width .4s var(--a-ease); }
.adm-seg button { position: relative; z-index: 1; height: 34px; padding: 0 17px; border-radius: 999px; font-size: 13px; letter-spacing: .05em; color: var(--a-ink-3); transition: color .3s var(--a-ease); }
.adm-seg button:hover { color: var(--a-ink-2); }
.adm-seg button.is-on { color: #fff; }
.adm-select { position: relative; display: inline-flex; align-items: center; }
.adm-select::after { content: ""; position: absolute; right: 17px; width: 6px; height: 6px; border-right: 1px solid var(--a-ink-4); border-bottom: 1px solid var(--a-ink-4); transform: translateY(-2px) rotate(45deg); pointer-events: none; }
.adm-field { height: 38px; padding: 0 38px 0 18px; border: 1px solid var(--a-line); border-radius: 999px; background: var(--a-canvas); color: var(--a-ink-2); font: inherit; font-size: 13px; letter-spacing: .04em; -webkit-appearance: none; appearance: none; cursor: pointer; transition: border-color .25s var(--a-ease), color .25s var(--a-ease); }
.adm-field:hover, .adm-field:focus { outline: none; border-color: var(--a-ink); color: var(--a-ink); }
.adm-legend { display: flex; align-items: center; gap: 24px; margin-bottom: 18px; font-size: 13px; letter-spacing: .06em; color: var(--a-ink-3); }
.adm-legend span { display: inline-flex; align-items: center; gap: 8px; }
.adm-legend i { width: 14px; height: 1px; }
.adm-chart { display: block; width: 100%; height: auto; overflow: visible; cursor: crosshair; }
.adm-chart:focus-visible { outline-offset: 6px; border-radius: 12px; }
.adm-tip { position: absolute; z-index: 5; min-width: 152px; padding: 14px 16px; border: 1px solid var(--a-line); border-radius: 18px; background: var(--a-canvas); pointer-events: none; }
.adm-tip .when { margin-bottom: 9px; font-size: 13px; letter-spacing: .14em; color: var(--a-ink-4); }
.adm-tip .row { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; font-size: 13px; line-height: 20px; color: var(--a-ink-3); }
.adm-tip .row b { font-weight: 400; color: var(--a-ink); }
.adm-note { margin-top: 14px; color: var(--a-ink-3); }
.adm-ask { display: grid; gap: 18px; max-width: 760px; }
.adm-ask__q { justify-self: end; max-width: 34em; margin: 0; padding: 14px 18px; border-radius: 20px 20px 6px 20px; background: var(--a-ink); color: #fff; font-size: 14px; line-height: 22px; }
.adm-ask__a { max-width: 40em; padding: 18px 20px 16px; border-radius: 6px 20px 20px 20px; background: var(--a-canvas); box-shadow: inset 0 0 0 1px var(--a-line); }
.adm-ask__a p { font-size: 15px; line-height: 26px; color: var(--a-ink); }
.adm-ask__a small { display: block; margin-top: 12px; font-size: 12px; line-height: 18px; color: var(--a-ink-3); }
.adm-ask__compose { display: flex; align-items: center; gap: 12px; max-width: 760px; padding: 8px 8px 8px 20px; border: 1px solid var(--a-line); border-radius: 999px; background: #fff; }
.adm-ask__compose p { flex: 1; margin: 0; font-size: 14px; color: var(--a-ink-4); }
.adm-ask__compose button { flex: none; height: 40px; padding: 0 18px; border-radius: 999px; background: var(--a-ink); color: #fff; font-size: 13px; }
.adm-qual { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.adm-voice { padding: 22px 24px 20px; border: 1px solid var(--a-line); border-radius: 24px; }
.adm-voice .t { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; font-size: 13.5px; letter-spacing: .01em; color: var(--a-ink); }
.adm-voice .t .adm-tag { margin-left: auto; }
.adm-voice .d { font-size: 13px; line-height: 23px; color: var(--a-ink-3); }
.adm-src { margin-top: 14px; font-size: 12px; line-height: 18px; letter-spacing: .02em; color: rgba(11, 15, 12, .62); }
.adm-qual-box.is-in .adm-voice { animation: admIn .55s var(--a-ease) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes admIn { from { opacity: 0; transform: translateY(8px); } }

.adm-tbl { width: 100%; border-collapse: collapse; }
.adm-tbl th, .adm-tbl td { padding: 14px 8px; border-bottom: 1px solid var(--a-line); font-size: 13px; font-weight: 400; text-align: left; }
.adm-tbl th { color: var(--a-ink-4); letter-spacing: .08em; }
.adm-tbl td { color: var(--a-ink-2); transition: background-color .28s var(--a-ease); }
.adm-tbl tbody tr { cursor: pointer; }
.adm-tbl tbody tr:last-child td { border-bottom: 0; }
.adm-tbl tbody tr:hover td { background: var(--a-wash); }
.adm-tbl tbody tr:focus-visible { outline-offset: -2px; }
.adm-tbl .go { width: 22px; padding-right: 0; text-align: right; }
.adm-tbl tbody .go::after { content: "→"; color: var(--a-ink-4); }
.adm-page.is-in .adm-tbl tbody tr { animation: admIn .5s var(--a-ease) both; animation-delay: calc(var(--i) * 45ms + .1s); }

.adm-toast { position: absolute; right: 26px; bottom: 26px; z-index: 20; display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; border: 1px solid var(--a-line); border-radius: 20px; background: var(--a-canvas); box-shadow: 0 8px 32px rgba(8, 14, 9, .12); color: var(--a-ink-2); }
.adm-toast .i { width: 14px; height: 14px; color: var(--a-deep); }
.adm-toast.is-in { animation: admRise .5s var(--a-ease); }
@keyframes admRise { from { opacity: 0; transform: translateY(10px); } }

/* clickable surfaces: a 1px line is drawn along the corners on hover */
.adm-navitem::after, .adm-rail-item::after, .adm-avatar::after, .adm-seg::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 2;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    conic-gradient(from 180deg, var(--a-ink) calc(var(--adm-draw) * .25%), transparent 0),
    conic-gradient(from 180deg, transparent 0, transparent calc(100% - var(--adm-draw) * .25%), var(--a-ink) calc(100% - var(--adm-draw) * .25%), var(--a-ink) 100%),
    conic-gradient(from 0deg, var(--a-ink) calc(var(--adm-draw) * .25%), transparent 0),
    conic-gradient(from 0deg, transparent 0, transparent calc(100% - var(--adm-draw) * .25%), var(--a-ink) calc(100% - var(--adm-draw) * .25%), var(--a-ink) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  transition: --adm-draw .5s var(--a-ease);
}
.adm-navitem:hover::after, .adm-rail-item:hover::after, .adm-avatar:hover::after, .adm-seg:hover::after { --adm-draw: 100; }
.adm-navitem.is-active::after, .adm-rail-item.is-active::after { opacity: 0; }
/* ---------- technology ---------- */
.caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cap { padding: 32px; }
.cap .viz { height: auto; aspect-ratio: 2 / 1; }
.cap > h3 { font-size: 24px; margin-top: 28px; }
.cap > p { font-size: 15px; }

.viz-branch { display: block; }
.viz-branch svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(142, 217, 200, .5); stroke-width: 1.5; }
.viz-branch path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-play .viz-branch path { stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--ease-io); }
.is-play .viz-branch path:nth-child(2) { transition-delay: .12s; }
.is-play .viz-branch path:nth-child(3) { transition-delay: .24s; }
.vbr__root { position: absolute; left: 4%; top: 50%; transform: translateY(-50%); padding: 6px 10px; border-radius: 980px; background: rgba(255, 255, 255, .1); font-size: 12px; font-weight: 600; white-space: nowrap; }
.vbr__leaf { position: absolute; left: 52%; top: var(--y); display: flex; flex-direction: column; gap: 1px; font-size: 11px; line-height: 1.35; color: var(--text-3); white-space: nowrap; opacity: 0; transform: translate(-6px, -50%); transition: opacity .5s var(--ease), transform .7s var(--ease-out); }
.vbr__leaf em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--mint); }
.is-play .vbr__leaf { opacity: 1; transform: translate(0, -50%); transition-delay: .8s; }
.is-play .vbr__leaf:nth-of-type(3) { transition-delay: .92s; }
.is-play .vbr__leaf:nth-of-type(4) { transition-delay: 1.04s; }

.viz-goal { align-content: center; justify-items: center; gap: 8px; text-align: center; }
.vg__label { font-size: 11px; color: var(--text-3); }
.vg__name { font-size: 14px; font-weight: 600; }
.vg__meter { display: flex; gap: 6px; margin-top: 6px; }
.vg__meter i { width: 40px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .1); transition: background-color .4s var(--ease), box-shadow .4s var(--ease); }
.is-play .vg__meter i { background: var(--mint); box-shadow: 0 0 10px rgba(142, 217, 200, .5); }
.is-play .vg__meter i:nth-child(1) { transition-delay: .4s; }
.is-play .vg__meter i:nth-child(2) { transition-delay: .9s; }
.is-play .vg__meter i:nth-child(3) { transition-delay: 1.4s; }
.vg__next { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--mint); opacity: 0; transform: translateX(-8px); transition: opacity .5s var(--ease) 1.9s, transform .7s var(--ease-out) 1.9s; }
.vg__next svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.is-play .vg__next { opacity: 1; transform: none; }

.viz-image { gap: 10px; align-content: center; }
.vi__frame { position: relative; width: 150px; height: 92px; border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, #1F3B33, #10201B); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.vi__sun { position: absolute; right: 26px; top: 16px; width: 22px; height: 22px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 20px rgba(142, 217, 200, .6); }
.vi__hill { position: absolute; left: -20px; bottom: -40px; width: 130px; height: 80px; border-radius: 50%; background: #2E5A4D; }
.vi__hill--2 { left: 60px; bottom: -48px; width: 140px; background: #3F7766; }
.vi__bubble { max-width: 92%; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: rgba(142, 217, 200, .1); box-shadow: inset 0 0 0 1px rgba(142, 217, 200, .25); font-size: 12px; color: var(--mint); opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease) .5s, transform .7s var(--ease-out) .5s; }
.is-play .vi__bubble { opacity: 1; transform: none; }

.sub-head { margin: clamp(120px, 14vw, 184px) 0 48px; }
.sub-head .lead { margin-top: 22px; }
.principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.principle {
  position: relative;
  padding: 32px;
  border-radius: var(--r-lg);
  background: var(--tile);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
  cursor: pointer;
  transition: box-shadow .45s var(--ease);
}
.principle:hover, .principle:focus-visible { box-shadow: inset 0 0 0 1px rgba(142, 217, 200, .26); outline: none; }
.principle__num { font-size: 13px; font-weight: 600; color: var(--mint); font-variant-numeric: tabular-nums; }
.principle h4 { margin-top: 10px; font-size: 24px; line-height: 1.4; font-weight: 600; }
.principle__ex { position: relative; height: 80px; margin-top: 24px; }
.principle__ex p { position: absolute; inset: 0; display: flex; align-items: center; gap: 12px; padding: 15px 16px; border-radius: 14px; font-size: 15px; line-height: 1.6; transition: opacity .5s var(--ease), transform .75s var(--ease-out), filter .6s var(--ease); }
.principle__ex small { flex: none; padding: 2px 8px; border-radius: 980px; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.principle__ng { background: rgba(255, 255, 255, .04); color: var(--text-3); }
.principle__ng small { background: rgba(255, 255, 255, .08); color: var(--text-2); }
.principle__ng i { font-style: normal; background: linear-gradient(currentColor, currentColor) no-repeat 0 56% / 0 1.5px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .55s var(--ease-io); }
.principle__ok { background: rgba(142, 217, 200, .08); box-shadow: inset 0 0 0 1px rgba(142, 217, 200, .25); color: var(--text); opacity: 0; transform: translateY(14px); filter: blur(4px); }
.principle__ok small { background: var(--mint); color: var(--ink); }
.principle.is-ok .principle__ng i { background-size: 100% 1.5px; }
.principle.is-ok .principle__ng { opacity: 0; transform: translateY(-12px); filter: blur(4px); transition-delay: .45s; }
.principle.is-ok .principle__ok { opacity: 1; transform: none; filter: none; transition-delay: .55s; }
@media (hover: none) {
  .principle { cursor: default; }
  .principle .principle__ex { display: grid; gap: 8px; height: auto; }
  .principle__ex p { position: relative; inset: auto; }
  .principle__ok, .principle.is-ok .principle__ng { opacity: 1; transform: none; filter: none; }
  .principle.is-ok .principle__ng { color: var(--text-3); }
  .principle__ng i { background-image: linear-gradient(rgba(255, 255, 255, .82), rgba(255, 255, 255, .82)); background-size: 0 2px; }
  .principle.is-ok .principle__ng i { background-size: 100% 2px; transition-delay: .2s; }
  .principle__ok { opacity: .45; transition-delay: 0s; }
  .principle.is-ok .principle__ok { opacity: 1; transition-delay: .5s; }
}

.strengths { display: grid; gap: 20px; margin-top: clamp(64px, 8vw, 104px); }
.strength { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px 40px; align-items: start; min-width: 0; padding: 40px; border-radius: var(--r-lg); background: var(--tile); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); transition: box-shadow .45s var(--ease); }
.strength:hover { box-shadow: inset 0 0 0 1px rgba(142, 217, 200, .22); }
.strength__num { font-size: 13px; font-weight: 600; color: var(--mint); font-variant-numeric: tabular-nums; }
.strength h3 { margin-top: 10px; font-size: 20px; line-height: 1.45; font-weight: 600; color: var(--mint); }
.strength__body { min-width: 0; }
.strength__body h4 { font-size: 26px; line-height: 1.45; font-weight: 600; }
.strength__note { margin-top: 14px; font-size: 16px; line-height: 1.85; color: var(--text-2); }
.roster { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; min-width: 0; }
.roster li { min-width: 0; padding: 18px 18px 16px; border-radius: 16px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.roster b { display: block; font-size: 18px; line-height: 1.45; font-weight: 600; }
.roster small { display: block; margin-top: 4px; font-size: 12px; line-height: 1.55; color: var(--text-3); overflow-wrap: anywhere; }
.roster p { margin-top: 12px; font-size: 14px; line-height: 1.65; color: var(--text-2); }
.facets { display: grid; gap: 12px; margin-top: 22px; }
.facets div { padding: 16px 18px; border-radius: 16px; background: rgba(142, 217, 200, .08); box-shadow: inset 0 0 0 1px rgba(142, 217, 200, .22); }
.facets dt { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--mint); }
.facets dd { margin-top: 6px; font-size: 15px; line-height: 1.7; }
.notes { display: grid; gap: 12px; margin-top: 22px; min-width: 0; }
.notes li { min-width: 0; padding: 20px 18px; border-radius: 16px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); font-size: 16px; line-height: 1.75; word-break: keep-all; overflow-wrap: anywhere; }
.rates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.rates p { padding: 22px 20px 18px; border-radius: 16px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.rates b { display: block; font-size: 52px; line-height: 1; font-weight: 600; letter-spacing: -.03em; color: var(--mint); font-variant-numeric: tabular-nums; }
.rates b small { margin-left: 2px; font-size: .38em; font-weight: 600; letter-spacing: 0; }
.rates span { display: block; margin-top: 10px; font-size: 13px; color: var(--text-2); }
.expert { max-width: 840px; margin: clamp(120px, 14vw, 184px) auto 0; text-align: center; }
.expert .lead { margin: 26px auto 0; }
.splits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: clamp(88px, 10vw, 128px); }
.split__icon { width: 36px; height: 36px; fill: none; stroke: var(--mint); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.split > h3 { margin-top: 22px; font-size: 24px; line-height: 1.45; }
.split > p { font-size: 15px; line-height: 1.9; }

/* ---------- embed ---------- */
.chapter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.chapter--rev .chapter__text { order: 2; }
.chapter--rev { margin-top: clamp(112px, 13vw, 176px); }
.chapter__num { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.chapter__num span { padding: 4px 10px; border-radius: 980px; background: rgba(142, 217, 200, .12); font-size: 13px; color: var(--mint); font-variant-numeric: tabular-nums; }
.chapter .body { margin-top: 22px; }
.method__where { margin-top: 22px; font-size: 13px; font-weight: 600; color: var(--mint); }
.method__points { display: grid; gap: 8px; margin-top: 12px; }
.method__points li { padding: 10px 14px; border-radius: 14px; background: rgba(142, 217, 200, .08); box-shadow: inset 0 0 0 1px rgba(142, 217, 200, .22); font-size: 14px; line-height: 1.5; }
.orbit { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1; margin: 0 auto; }
.orbit__ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
.orbit__ring--out { width: 79%; height: 79%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); background: radial-gradient(circle, transparent 60%, rgba(255, 255, 255, .025)); }
.orbit__ring--in { width: 41%; height: 41%; box-shadow: inset 0 0 0 1px rgba(142, 217, 200, .38); background: radial-gradient(circle, rgba(142, 217, 200, .09), transparent 70%); }
.orbit__ring span { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); padding: 3px 10px; border-radius: 980px; background: var(--bg); font-size: 11px; color: var(--text-3); white-space: nowrap; }
.orbit__ring--in span { color: var(--mint); }
.orbit__ring--out::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 78%, rgba(142, 217, 200, .7) 99.5%, transparent 100%); -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); animation: spin 9s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
.orbit__core { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 16%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: var(--mint); color: var(--ink); font-size: 13px; font-weight: 600; box-shadow: 0 0 0 10px rgba(142, 217, 200, .1), 0 0 60px rgba(142, 217, 200, .45); }
.orbit__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit__lines line { stroke: rgba(255, 255, 255, .07); stroke-width: .25; }
.orbit__lines line.is-active { stroke: var(--mint); stroke-width: .45; stroke-dasharray: 1.2 1.2; animation: flow 1s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -2.4; } }
.orbit__node { position: absolute; display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 1.4; white-space: nowrap; color: var(--text-2); transition: color .3s var(--ease); }
.orbit__node[data-ring="out"] { white-space: normal; }
.orbit__node[data-ring="out"] span { flex: none; white-space: pre-line; text-align: center; line-height: 1.35; }
.orbit__node span { padding: 2px 8px; border-radius: 980px; background: var(--bg); }
.orbit__node.is-e { transform: translate(-7px, -50%); }
.orbit__node.is-w { flex-direction: row-reverse; transform: translate(calc(-100% + 7px), -50%); }
.orbit__node.is-n { flex-direction: column-reverse; transform: translate(-50%, calc(-100% + 7px)); }
.orbit__node.is-s { flex-direction: column; transform: translate(-50%, -7px); }
.orbit__node i { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .42); transition: transform .45s var(--ease-out), background-color .4s var(--ease), box-shadow .4s var(--ease); }
.orbit__node[data-ring="in"] i { box-shadow: inset 0 0 0 1.5px var(--mint); }
.orbit__node:hover { color: var(--text); }
.orbit__node:hover i { transform: scale(1.25); }
.orbit__node.is-active { color: var(--text); }
.orbit__node.is-active i { background: var(--mint); box-shadow: 0 0 0 6px rgba(142, 217, 200, .18), 0 0 18px rgba(142, 217, 200, .8); transform: scale(1.2); }
@keyframes odIn { from { opacity: 0; transform: translateY(8px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }

.methods { margin-top: clamp(112px, 13vw, 176px); text-align: center; }
.methods .h4 { margin-bottom: 24px; }
.methods__panels { display: grid; gap: 20px; margin-top: 28px; }
.method { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 40px; border-radius: var(--r-lg); background: var(--tile); text-align: left; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); }
.method__viz { position: relative; height: 260px; border-radius: 20px; background: radial-gradient(120% 100% at 50% 0%, rgba(142, 217, 200, .07), transparent 62%), rgba(255, 255, 255, .02); overflow: hidden; display: grid; place-items: center; }
.method__tag { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--mint); }
.method__text h4 { margin-top: 8px; font-size: 28px; line-height: 1.35; font-weight: 600; }
.method__text p { margin-top: 12px; line-height: 1.85; color: var(--text-2); }
.mv-line { display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .1); }
.mv-line--s { width: 60%; }
.mv-mail { display: grid; gap: 12px; width: 240px; padding: 20px; border-radius: 16px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.mv-mail__from { width: 40%; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .18); }
.mv-mail__btn { justify-self: start; margin-top: 6px; padding: 8px 16px; border-radius: 980px; background: var(--mint); color: var(--ink); font-size: 12px; font-weight: 600; animation: press 3.2s var(--ease) infinite; }
.mv-cursor { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 6px rgba(255, 255, 255, .15); animation: cursor 3.2s var(--ease) infinite; }
@keyframes cursor { 0% { transform: translate(70px, 60px); opacity: 0; } 20% { opacity: 1; } 45%, 60% { transform: translate(-58px, 34px); } 52% { transform: translate(-58px, 34px) scale(.8); } 100% { transform: translate(-58px, 34px); opacity: 0; } }
@keyframes press { 0%, 48% { transform: none; box-shadow: 0 0 0 0 rgba(142, 217, 200, .5); } 53% { transform: scale(.94); } 60% { transform: none; box-shadow: 0 0 0 10px rgba(142, 217, 200, 0); } 100% { transform: none; } }
.mv-page { position: relative; display: grid; gap: 10px; width: 280px; height: 196px; padding: 16px; border-radius: 14px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); align-content: start; }
.mv-page__nav { height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .14); }
.mv-block { height: 64px; border-radius: 10px; background: rgba(255, 255, 255, .06); }
.mv-widget { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 4px; align-items: center; padding: 12px 14px; border-radius: 14px 14px 4px 14px; background: var(--mint); animation: widget 3.6s var(--ease-out) infinite; }
.mv-widget i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); animation: dot 1.2s infinite; }
.mv-widget i:nth-child(2) { animation-delay: .15s; }
.mv-widget i:nth-child(3) { animation-delay: .3s; }
@keyframes widget { 0% { opacity: 0; transform: translateY(16px) scale(.9); } 18%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(8px); } }
.mv-api { display: flex; align-items: center; justify-content: center; gap: 0; }
.mv-sys { display: grid; place-items: center; width: 108px; height: 108px; border-radius: 22px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); font-size: 12px; font-weight: 600; color: var(--text-2); }
.mv-sys--dx { background: rgba(142, 217, 200, .12); box-shadow: inset 0 0 0 1px rgba(142, 217, 200, .4), 0 0 40px rgba(142, 217, 200, .15); color: var(--mint); }
.mv-wire { position: relative; width: 110px; height: 2px; background: rgba(255, 255, 255, .12); }
.mv-wire i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px rgba(142, 217, 200, .9); animation: packet 2.4s var(--ease-io) infinite; }
.mv-wire i:nth-child(2) { animation-delay: .8s; }
.mv-wire i:nth-child(3) { animation-delay: 1.6s; background: #fff; animation-direction: reverse; }
@keyframes packet { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(102px); opacity: 0; } }
.mv-panel .vo__field { z-index: 0; }
.mv-panel .vo__field i { background: rgba(255, 255, 255, .28); opacity: .28; animation: marketWave 3.2s var(--ease) var(--dl, 0s) infinite; }
.mv-panel .vo__own { z-index: 2; width: 132px; height: 132px; margin: -66px 0 0 -66px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); background: radial-gradient(circle, rgba(255, 255, 255, .05), transparent 70%); color: var(--text-3); font-weight: 500; }
.mv-panel .vo__own i { background: rgba(255, 255, 255, .28); box-shadow: none; }
.mv-panel .vo__market { z-index: 2; color: var(--mint); font-weight: 600; }
.mv-radar { position: absolute; left: 50%; top: 50%; z-index: 1; width: 132px; height: 132px; margin: -66px 0 0 -66px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(142, 217, 200, .75); pointer-events: none; animation: marketRing 3.2s var(--ease-out) infinite; }
.mv-radar--2 { animation-delay: 1.6s; }
@keyframes marketWave { 0%, 16% { opacity: .22; background: rgba(255, 255, 255, .3); box-shadow: none; } 34%, 50% { opacity: 1; background: var(--mint); box-shadow: 0 0 10px rgba(142, 217, 200, .9); } 72%, 100% { opacity: .22; background: rgba(255, 255, 255, .3); box-shadow: none; } }
@keyframes marketRing { 0% { transform: scale(1); opacity: .8; } 72% { opacity: .2; } 100% { transform: scale(2.35); opacity: 0; } }

.plans-head { margin: clamp(120px, 14vw, 184px) 0 48px; text-align: center; }
.plans-head .lead { margin: 22px auto 0; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.plan { padding: 40px; border-radius: var(--r-lg); background: var(--tile); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); transition: box-shadow .45s var(--ease); }
.plan:hover { box-shadow: inset 0 0 0 1px rgba(142, 217, 200, .2); }
.plan__kind { font-size: 13px; font-weight: 600; color: var(--mint); }
.plan h4 { margin-top: 6px; font-size: 32px; line-height: 1.3; font-weight: 600; }
.plan dl { margin-top: 28px; }
.plan dl div { display: grid; grid-template-columns: 124px 1fr; gap: 16px; padding: 16px 0; font-size: 15px; box-shadow: inset 0 1px 0 var(--line); }
.plan dt { padding-top: 2px; font-size: 13px; color: var(--text-3); }

/* ---------- use cases ---------- */
.use .sec-head { margin-bottom: 40px; }
.seg--filter { margin-bottom: 36px; }
.gallery__track {
  display: flex;
  gap: 20px;
  padding: 8px max(var(--gutter), calc((100% - var(--wrap)) / 2)) 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2));
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track:focus-visible { outline-offset: -2px; }
.case {
  flex: none;
  display: flex;
  flex-direction: column;
  width: min(420px, 84vw);
  padding: 32px;
  border-radius: var(--r-lg);
  background: var(--tile-2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
  scroll-snap-align: start;
  transition: box-shadow .45s var(--ease);
}
.case:hover { box-shadow: inset 0 0 0 1px rgba(142, 217, 200, .2); }
.case[hidden] { display: none; }
.case__num { font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--text-3); }
.case__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.case__tags span { padding: 4px 10px; border-radius: 980px; background: rgba(255, 255, 255, .06); font-size: 11px; color: var(--text-2); }
.case__tags .is-target { background: rgba(142, 217, 200, .14); color: var(--mint); }
.case h3 { min-height: 2.9em; margin-top: 16px; font-size: 22px; line-height: 1.45; font-weight: 600; word-break: keep-all; overflow-wrap: anywhere; }
.seg--stack { display: flex; flex-direction: column; width: 100%; border-radius: 18px; }
.seg--stack button { width: 100%; height: 36px; padding: 0 14px; border-radius: 14px; font-size: 13px; }
.seg--stack .seg__ink { top: 0; right: 4px; bottom: auto; left: 4px; width: auto; }
.case__switch { display: flex; width: 100%; margin-top: 16px; overflow: visible; transition: margin-top .45s var(--ease); }
.case__switch button { flex: 1; padding: 0 8px; font-size: 13px; }
.case__hint {
  position: absolute;
  z-index: 3;
  left: 75%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(6px);
  margin: 0;
  padding: 6px 12px;
  border-radius: 12px;
  background: var(--mint);
  color: #083028;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s var(--ease), transform .55s var(--ease-out);
}
.case__hint::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 10px;
  height: 10px;
  background: var(--mint);
  border-radius: 2px;
  transform: translate(-50%, -6px) rotate(45deg);
}
.case.is-hint:not(.is-hint-out) .case__switch { margin-top: 52px; }
.case.is-hint:not(.is-hint-out) .case__hint { opacity: 1; transform: translateX(-50%); animation: hintBob 1.8s var(--ease-io) .45s infinite; }
.case.is-hint-out .case__hint { opacity: 0; transform: translateX(-50%) translateY(-6px); animation: none; }
@keyframes hintBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-4px); }
}
.case.is-dx .case__switch .seg__ink { background: var(--mint); }
.case__dialog { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding: 16px; border-radius: 18px; background: rgba(0, 0, 0, .28); }
.case:not(.is-dx) .cb.is-probe { visibility: hidden; opacity: 0; transform: none; transition: none; }
.cb { max-width: 88%; padding: 8px 12px; border-radius: 14px; font-size: 13px; line-height: 1.55; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .7s var(--ease-out); transition-delay: calc(var(--i) * 110ms); }
.case.is-in .cb { opacity: 1; transform: none; }
.case.is-dx .cb { opacity: 0; transform: translateY(8px); }
.case.is-dx.is-play .cb { opacity: 1; transform: none; transition-delay: calc(var(--i) * 160ms); }
.cb--q { align-self: stretch; max-width: none; padding: 0 0 8px; border-radius: 0; font-size: 12px; color: var(--text-3); box-shadow: 0 1px 0 var(--line); }
.cb--a { align-self: flex-end; border-bottom-right-radius: 4px; background: rgba(245, 247, 245, .92); color: var(--ink); }
.cb--ai { align-self: flex-start; border-bottom-left-radius: 4px; background: rgba(142, 217, 200, .1); color: var(--mint); }
.case:not(.is-dx) .case__gain { display: none; }
.case__gain { margin-top: 18px; padding-top: 16px; font-size: 15px; font-weight: 600; box-shadow: inset 0 1px 0 var(--line); opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .7s var(--ease-out); transition-delay: calc(var(--i, 8) * 160ms); }
.case.is-dx.is-play .case__gain { opacity: 1; transform: none; }
.case__gain small { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 600; color: var(--mint); }
.gallery__ctrl { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dots { display: flex; gap: 8px; padding: 14px 18px; border-radius: 980px; background: rgba(255, 255, 255, .07); }
.dots button { width: 8px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .3); transition: width .55s var(--ease-out), background-color .3s var(--ease); }
.dots button:hover { background: rgba(255, 255, 255, .55); }
.dots button.is-active { width: 34px; background: var(--text); }
.paddles { display: flex; gap: 12px; }
.paddles button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: var(--text); transition: background-color .3s var(--ease), opacity .3s var(--ease), transform .2s var(--ease); }
.paddles button:hover:not(:disabled) { background: rgba(255, 255, 255, .18); }
.paddles button:active:not(:disabled) { transform: scale(.92); }
.paddles button:disabled { opacity: .32; cursor: default; }
.paddles svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- FAQ ---------- */
.faq .sec-head { margin-bottom: 56px; }
.qa { box-shadow: 0 1px 0 var(--line-ink); }
.qa-list:not(.qa-list--more) .qa:first-child { box-shadow: 0 1px 0 var(--line-ink), 0 -1px 0 var(--line-ink); }
.qa h3 { font-size: inherit; font-weight: inherit; }
.qa h3 button { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 26px 0; text-align: left; font-size: 19px; line-height: 1.5; font-weight: 600; color: var(--ink); transition: color .3s var(--ease); }
.qa h3 button:hover { color: var(--mint-3); }
.qa h3 i { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: rgba(8, 14, 9, .06); color: var(--ink); transition: background-color .35s var(--ease), color .35s var(--ease), transform .55s var(--ease-out); }
.qa h3 i::before, .qa h3 i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.6px; margin: -.8px 0 0 -5.5px; border-radius: 1px; background: currentColor; }
.qa h3 i::after { transform: rotate(90deg); }
.qa.is-open h3 i { transform: rotate(135deg); background: var(--ink); color: #fff; }
.qa__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease-out); }
.qa__a > div { min-height: 0; overflow: hidden; }
.qa__a p { padding: 0 54px 28px 0; font-size: 16px; line-height: 1.9; color: var(--ink-3); opacity: 0; transform: translateY(-6px); transition: opacity .4s var(--ease), transform .55s var(--ease-out); }
.qa.is-open .qa__a { grid-template-rows: 1fr; }
.qa.is-open .qa__a p { opacity: 1; transform: none; transition-delay: .08s; }
.qa-list--more[hidden] { display: none; }
.qa-list--more.is-shown .qa { animation: odIn .6s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); }
.faq__foot { margin-top: 36px; text-align: center; }

/* ---------- flow ---------- */
.steps { --rail: 46px; position: relative; padding-top: var(--rail); }
.steps ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.steps__line { position: absolute; left: 39px; top: 6px; width: calc((100% - 40px) * 2 / 3 + 40px); height: 2px; border-radius: 2px; background: rgba(8, 14, 9, .1); pointer-events: none; }
.steps__line i { display: block; width: calc(var(--t, 0) * 100%); height: 100%; border-radius: inherit; background: var(--grad-ink); }
.steps.is-vertical .steps__line i { width: 100%; height: calc(var(--t, 0) * 100%); background: linear-gradient(180deg, var(--mint-3), var(--mint-2)); }
.step { --pt: 40px; position: relative; padding: var(--pt) 32px 34px; border-radius: var(--r-lg); background: #fff; box-shadow: 0 0 0 1px rgba(8, 14, 9, .05), 0 24px 48px rgba(8, 14, 9, .04); }
.step__dot { position: absolute; z-index: 1; left: 32px; top: calc(var(--rail) * -1); width: 14px; height: 14px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px rgba(8, 14, 9, .2); transition: background-color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease-out); }
.step.is-reached .step__dot { background: var(--mint-2); box-shadow: 0 0 0 6px rgba(73, 171, 148, .16); transform: scale(1.08); }
.step__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.step__num { font-size: 52px; line-height: 1; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; background: var(--grad-ink); -webkit-background-clip: text; background-clip: text; color: transparent; }
.step__time { padding: 5px 12px; border-radius: 980px; background: rgba(73, 171, 148, .12); font-size: 13px; font-weight: 600; color: var(--mint-3); }
.step h3 { margin-top: 20px; font-size: 26px; line-height: 1.35; font-weight: 600; }
.step > p { margin-top: 10px; font-size: 15px; line-height: 1.85; color: var(--ink-3); }
.step ul { display: grid; gap: 8px; margin-top: 18px; }
.step li { position: relative; padding-left: 24px; font-size: 14px; color: var(--ink-2); }
.step li::before { content: ""; position: absolute; left: 3px; top: .45em; width: 10px; height: 6px; border-left: 1.6px solid var(--mint-2); border-bottom: 1.6px solid var(--mint-2); transform: rotate(-45deg); }

/* ---------- contact ---------- */
.contact { padding-top: clamp(80px, 9vw, 128px); }
.contact__inner { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(40px, 5vw, 64px) clamp(40px, 6vw, 88px); align-items: start; }
.contact__intro { grid-column: 1 / -1; }
.contact__head { position: sticky; top: calc(var(--nav-h) + 40px); }
.contact__reply { margin-top: 20px; font-size: 14px; color: var(--ink-4); }
.contact__card { padding: 40px; border-radius: 32px; background: #fff; box-shadow: 0 0 0 1px rgba(8, 14, 9, .05), 0 30px 70px rgba(8, 14, 9, .07); }
.form { display: grid; gap: 28px; }
.form__group { margin: 0; padding: 0; border: 0; min-width: 0; }
.form__group legend { margin-bottom: 12px; padding: 0; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.form__group legend small, .field label small { margin-left: 8px; font-size: 12px; font-weight: 400; color: var(--ink-4); }
.purpose { display: grid; gap: 10px; }
.purpose__opt { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(8, 14, 9, .14); cursor: pointer; transition: box-shadow .3s var(--ease), background-color .3s var(--ease), transform .2s var(--ease); }
.purpose__opt:hover { box-shadow: inset 0 0 0 1px rgba(8, 14, 9, .34); }
.purpose__opt:active { transform: scale(.99); }
.purpose__opt input { position: absolute; opacity: 0; pointer-events: none; }
.purpose__body { flex: 1; }
.purpose__body b { display: block; font-size: 16px; font-weight: 600; }
.purpose__body small { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-4); }
.purpose__check { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(8, 14, 9, .24); transition: box-shadow .3s var(--ease), background-color .3s var(--ease); }
.purpose__check::after { content: ""; position: absolute; left: 8px; top: 4.5px; width: 5px; height: 10px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg) scale(0); transition: transform .4s var(--ease-out); }
.purpose__opt.is-checked { box-shadow: inset 0 0 0 2px var(--mint-3); background: rgba(73, 171, 148, .05); }
.purpose__opt.is-checked .purpose__check { background: var(--mint-3); box-shadow: none; }
.purpose__opt.is-checked .purpose__check::after { transform: rotate(45deg) scale(1); }
.purpose__opt:has(input:focus-visible) { outline: 2px solid var(--mint-3); outline-offset: 2px; }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field { position: relative; }
.field input, .field textarea {
  display: block;
  width: 100%;
  height: 58px;
  padding: 24px 16px 8px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(8, 14, 9, .16);
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
  transition: box-shadow .3s var(--ease);
}
.field textarea { height: auto; min-height: 136px; padding-top: 30px; line-height: 1.6; resize: vertical; }
.field input:hover, .field textarea:hover { box-shadow: inset 0 0 0 1px rgba(8, 14, 9, .34); }
.field input:focus, .field textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--mint-3), 0 0 0 4px rgba(73, 171, 148, .14); }
.field label { position: absolute; left: 17px; top: 18px; font-size: 16px; color: var(--ink-4); pointer-events: none; transform-origin: left top; transition: transform .35s var(--ease-out), color .3s var(--ease); }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { transform: translateY(-10px) scale(.75); color: var(--ink-3); }
.field__err { display: none; margin-top: 6px; font-size: 12px; color: var(--err); }
.field.is-invalid input { box-shadow: inset 0 0 0 2px var(--err); }
.field.is-invalid .field__err, .agree-row.is-invalid .field__err { display: block; animation: odIn .3s var(--ease-out); }
.field.is-invalid { animation: shake .42s var(--ease); }
@keyframes shake { 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-flex; align-items: center; padding: 9px 15px; border-radius: 980px; box-shadow: inset 0 0 0 1px rgba(8, 14, 9, .16); font-size: 14px; transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease), transform .2s var(--ease); }
.chip span::before { content: ""; width: 0; height: 5px; margin: -3px 0 0; border-left: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; opacity: 0; transform: rotate(-45deg); transition: width .35s var(--ease-out), margin .35s var(--ease-out), opacity .3s var(--ease); }
.chip:hover span { box-shadow: inset 0 0 0 1px rgba(8, 14, 9, .38); }
.chip:active span { transform: scale(.96); }
.chip input:checked + span { background: var(--ink); color: #fff; box-shadow: none; }
.chip input:checked + span::before { width: 9px; margin: -3px 8px 0 0; opacity: 1; }
.chip input:focus-visible + span { outline: 2px solid var(--mint-3); outline-offset: 2px; }
.agree { position: relative; display: inline-flex; align-items: center; gap: 12px; font-size: 15px; cursor: pointer; }
.agree input { position: absolute; opacity: 0; pointer-events: none; }
.agree__box { position: relative; flex: none; width: 22px; height: 22px; border-radius: 7px; box-shadow: inset 0 0 0 1.5px rgba(8, 14, 9, .3); transition: background-color .3s var(--ease), box-shadow .3s var(--ease); }
.agree__box::after { content: ""; position: absolute; left: 8px; top: 4px; width: 5px; height: 10px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg) scale(0); transition: transform .4s var(--ease-out); }
.agree input:checked + .agree__box { background: var(--mint-3); box-shadow: none; }
.agree input:checked + .agree__box::after { transform: rotate(45deg) scale(1); }
.agree input:focus-visible + .agree__box { outline: 2px solid var(--mint-3); outline-offset: 2px; }
.agree a { color: var(--mint-3); text-decoration: underline; text-underline-offset: .22em; }
.agree-row.is-invalid .agree__box { box-shadow: inset 0 0 0 2px var(--err); }
.form__submit { justify-self: start; }
.done { padding: 56px 12px; text-align: center; }
.done:focus { outline: none; }
.done__check { width: 76px; height: 76px; margin: 0 auto; fill: none; stroke: var(--mint-3); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.done__check circle, .done__check path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.done:not([hidden]) .done__check circle { animation: draw .9s var(--ease-io) forwards; }
.done:not([hidden]) .done__check path { animation: draw .55s var(--ease-out) .7s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.done h3 { margin-top: 26px; font-size: 26px; font-weight: 600; }
.done p { margin-top: 10px; color: var(--ink-3); }

/* ---------- company & footer ---------- */
.company { padding-top: clamp(40px, 5vw, 72px); }
.company .h3 { font-size: 32px; }
.company__lead { margin-top: 16px; font-size: 16px; line-height: 1.9; color: var(--ink-3); }
.spec { margin-top: 32px; }
.spec div { display: grid; grid-template-columns: 160px 1fr; gap: 24px; padding: 18px 0; font-size: 15px; box-shadow: inset 0 1px 0 var(--line-ink); }
.spec div:last-child { box-shadow: inset 0 1px 0 var(--line-ink), 0 1px 0 var(--line-ink); }
.spec dt { color: var(--ink-4); }
.footer { position: relative; z-index: 1; padding: 36px 0 28px; background: var(--paper); color: var(--ink-4); font-size: 12px; line-height: 1.7; }
.footer__notes { display: grid; gap: 6px; padding-bottom: 20px; counter-reset: note; box-shadow: 0 1px 0 var(--line-ink); }
.footer__notes li { counter-increment: note; padding-left: 18px; text-indent: -18px; }
.footer__notes li::before { content: counter(note) ". "; display: inline-block; width: 18px; text-indent: 0; }
.footer__main { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; padding: 26px 0; }
.footer__logo svg { width: auto; height: 22px; fill: var(--ink); }
.footer__tag { color: var(--ink-3); }
.footer__links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-left: auto; }
.footer__links a:hover, .footer__links a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.contact__mail { margin-top: 14px; font-size: 15px; color: var(--ink-2); }
.contact__mail a, .spec a { color: var(--mint-3); text-decoration: underline; text-underline-offset: .18em; }

/* ---------- legal pages ---------- */
body.legal { background: var(--paper); color: var(--ink); }
.legal-home { margin-left: auto; font-size: 13px; letter-spacing: .04em; }
.legal-home:hover { opacity: .65; }
.legal main { position: relative; z-index: 1; padding: calc(var(--nav-h) + clamp(40px, 6vw, 72px)) 0 clamp(64px, 8vw, 96px); }
.doc { width: min(760px, calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.doc h1 { font-size: clamp(21px, 6.2vw, 40px); font-weight: 700; letter-spacing: .01em; line-height: 1.35; }
.doc h2 { margin-top: 48px; padding-top: 28px; box-shadow: inset 0 1px 0 var(--line-ink); font-size: 18px; font-weight: 700; line-height: 1.5; }
.doc h2 + h2 { margin-top: 20px; padding-top: 0; box-shadow: none; }
.doc h3 { margin-top: 28px; font-size: 15px; font-weight: 700; line-height: 1.6; }
.doc p { margin-top: 14px; font-size: 15px; line-height: 1.9; color: var(--ink-2); }
.doc p.doc__item { margin-top: 8px; padding-left: 2.4em; text-indent: -2.4em; }
.doc p.doc__sign { margin-top: 4px; }
.doc p.doc__date { margin-top: 36px; color: var(--ink-4); }
.doc a { color: var(--mint-3); text-decoration: underline; text-underline-offset: .18em; overflow-wrap: anywhere; }
.legal .footer { box-shadow: inset 0 1px 0 var(--line-ink); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-top: 16px; box-shadow: inset 0 1px 0 var(--line-ink); }

/* ---------- medium ---------- */
@media (max-width: 1068px) {
  .h-super { font-size: 64px; }
  .h2 { font-size: 48px; }
  .h3 { font-size: 34px; }
  .lead { font-size: 19px; }
  .lead--sm { font-size: 17px; }
  .proof__num { font-size: 72px; }
  .tile--7, .tile--5 { grid-column: span 6; }
  .shift__stage { grid-template-columns: minmax(0, 540px); gap: 0; }
  .gauge { display: none; }
  .found { position: absolute; left: 50%; bottom: 14px; width: min(500px, calc(100% - 28px)); padding: 18px 20px; transform: translate(-50%, 24px); z-index: 3; background: linear-gradient(180deg, rgba(25, 46, 40, .96), rgba(18, 30, 26, .97)); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
  .found.is-on { transform: translate(-50%, 0); }
  .survey.has-found .survey__thread::after { height: 128px; }
  .found__text { font-size: 17px; }
  .found__data { display: none; }
  .demo__tabs { display: flex; width: fit-content; margin: 0 auto 16px; }
  .demo__tabs [data-tab] { position: relative; z-index: 1; display: grid; place-items: center; height: 32px; padding: 0 14px; border-radius: 980px; font-size: 13px; font-weight: 500; color: var(--text-2); white-space: nowrap; transition: color .4s var(--ease); }
  .demo__tabs [data-tab].is-on { color: var(--ink); }
  .record__row .q, .record__row .q + br { display: none; }
  .record { margin-bottom: 10px; }
  .record__head { padding: 8px 0; }
  .record__row { padding: 5px 8px; }
  .agg { padding: 14px 16px 16px; }
  .agg__sub { margin-bottom: 12px; }
  .bars { gap: 8px; }
  .demo__stage { grid-template-columns: minmax(0, 420px); justify-content: center; }
  .demo__stage .pane { display: none; height: 640px; }
  .demo__stage[data-active="phone"] .pane--phone,
  .demo__stage[data-active="ai"] .pane--ai,
  .demo__stage[data-active="data"] .pane--data { display: flex; animation: odIn .45s var(--ease-out) both; }
  .demo__stage[data-active="phone"] .pane--phone { display: grid; }
  .demo__stage.is-pip { display: block; height: 660px; clip-path: inset(0 -48px -16px -48px); }
  .demo__stage.is-pip .pane { position: absolute; inset: 0; display: flex; height: auto; animation: none; will-change: transform, opacity; }
  .demo__stage.is-pip .pane--phone { display: block; z-index: 3; pointer-events: none; }
  .demo__stage.is-pip .phone { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; pointer-events: auto; }
  .demo__stage.is-pip.is-docked .phone,
  .demo__stage.is-pip.is-open .phone { cursor: pointer; touch-action: manipulation; }
  .demo__stage.is-pip.is-docked .phone { filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .45)); }
  .demo__stage.is-pip .pane--ai,
  .demo__stage.is-pip .pane--data { background: #0e1611; }
  .demo__stage.is-pip .goal p { flex: 1; min-width: 0; line-height: 1.5; }
  .demo__stage.is-pip .pane--ai { padding-bottom: 14px; opacity: 0; }
  .demo__stage.is-pip .roles { display: none; }
  .demo__stage.is-pip .log__item { min-width: 0; font-size: 14px; line-height: 1.7; }
  .demo__stage.is-pip .pane--data { opacity: 0; }
  .caps { grid-template-columns: 1fr; max-width: 600px; margin-inline: auto; }
  .strength { grid-template-columns: 1fr; gap: 18px; padding: 28px; }
  .roster { grid-template-columns: 1fr; }
  .chapter { grid-template-columns: 1fr; }
  .chapter--rev .chapter__text { order: 0; }
  .method { grid-template-columns: 1fr; gap: 28px; }
  .steps { --rail: 40px; padding-top: 0; padding-left: var(--rail); }
  .steps ol { grid-template-columns: 1fr; }
  .step__dot { left: calc(var(--rail) * -1); top: calc(var(--pt) + 19px); }
  .contact__inner { grid-template-columns: 1fr; }
  .contact__head { position: static; }
}
@media (max-width: 999px) {
  .nav__bar { gap: 16px; }
  .nav__links { display: none; }
  .nav__cta { margin-left: auto; }
  .nav__toggle { display: inline-flex; }
  .to-top { width: 36px; height: 36px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
  .to-top svg { width: 14px; height: 14px; }
  .nav__menu {
    display: block;
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    max-height: 0;
    overflow: hidden;
    background: rgba(8, 14, 9, .94);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    transition: max-height .6s var(--ease-out), visibility 0s linear .6s;
    visibility: hidden;
  }
  .nav--light .nav__menu { background: rgba(245, 247, 245, .96); }
  .nav.is-open .nav__menu { max-height: 90vh; visibility: visible; transition: max-height .6s var(--ease-out); }
  .nav__menu ul { padding: 8px var(--gutter) 32px; }
  .nav__menu a { display: block; padding: 10px 0; font-size: 24px; font-weight: 600; opacity: 0; transform: translateY(-8px); transition: opacity .35s var(--ease), transform .5s var(--ease-out); }
  .nav.is-open .nav__menu a { opacity: 1; transform: none; }
  .nav.is-open .nav__menu li:nth-child(1) a { transition-delay: .06s; }
  .nav.is-open .nav__menu li:nth-child(2) a { transition-delay: .09s; }
  .nav.is-open .nav__menu li:nth-child(3) a { transition-delay: .12s; }
  .nav.is-open .nav__menu li:nth-child(4) a { transition-delay: .15s; }
  .nav.is-open .nav__menu li:nth-child(5) a { transition-delay: .18s; }
  .nav.is-open .nav__menu li:nth-child(6) a { transition-delay: .21s; }
  .nav.is-open .nav__menu li:nth-child(7) a { transition-delay: .24s; }
  .nav.is-open .nav__menu li:nth-child(8) a { transition-delay: .27s; }
}

/* ---------- small ---------- */
@media (max-width: 734px) {
  body { font-size: 16px; }
  .h-super { font-size: 38px; line-height: 1.16; }
  .h2 { font-size: 32px; line-height: 1.22; }
  .h3 { font-size: 27px; }
  .h4 { font-size: 21px; }
  .lead, .lead--sm { font-size: 17px; }
  .lead-br { display: none; }
  .eyebrow { font-size: 17px; margin-bottom: 12px; }
  .body { font-size: 16px; }
  .hero__content { flex-direction: column; align-items: stretch; gap: 28px; }
  .hero__eyebrow { font-size: 21px; }
  .hero__sub { font-size: 17px; }
  .hero__buy { justify-content: space-between; }
  .proof { padding: 14vh 0 18vh; }
  .proof__list { grid-template-columns: 1fr; gap: 44px; }
  .proof__num { font-size: 64px; }
  .statement { height: calc(340vh / var(--scroll)); }
  .tile { padding: 28px; }
  .tile--7, .tile--5 { grid-column: span 12; }
  .tile > h3 { margin-top: 24px; font-size: 22px; }
  .tile > p { font-size: 15px; }
  .viz { height: 180px; }
  .vd__num { font-size: 60px; }
  .shift { height: calc(480vh / var(--scroll)); }
  .shift__switch { margin-top: 20px; }
  .shift__switch button { padding: 0 12px; font-size: 13px; }
  .shift__stage { margin-top: 18px; }
  .shift__head .lead { margin-top: 12px; }
  .survey { height: calc(100svh - 360px); min-height: 280px; padding: 18px 16px 14px; border-radius: 24px; }
  .msg p { font-size: 14px; padding: 10px 14px; }
  .js .demo-scene { height: calc(680vh / var(--scroll)); }
  .demo__stage .pane { height: 620px; padding: 18px; }
  .demo__stage.is-pip { height: 620px; }
  .demo__stage.is-pip .pane { height: auto; min-height: 0; padding: 12px; }
  .demo__stage.is-pip .pane--data { overflow: hidden; }
  .demo__stage.is-pip .record { margin-bottom: 0; }
  .demo__stage.is-pip .record__head { padding: 4px 0; }
  .demo__stage.is-pip .record__row { grid-template-columns: 64px minmax(0, 1fr); gap: 8px; padding: 2px 8px; line-height: 1.4; }
  .demo__stage.is-pip .record__row dd > div { display: inline; }
  .demo__stage.is-pip .agg { margin-top: 12px; padding: 8px 12px; }
  .demo__stage.is-pip .agg__sub { margin: 2px 0 8px; }
  .demo__stage.is-pip .bars { grid-template-columns: 1fr 1fr; gap: 6px 12px; }
  .demo__stage.is-pip .bars__row { grid-template-columns: minmax(0, 1fr) 22px 30px; gap: 4px; font-size: 11px; }
  .demo__stage.is-pip .bars__row > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .demo__stage.is-pip .bars__track { height: 4px; }
  .demo-sec .sec-head { margin-bottom: 12px; }
  .phone { width: 300px; height: 620px; border-radius: 52px; }
  .phone__screen { border-radius: 42px; }
  .js .insight-scene { height: calc(500vh / var(--scroll)); }
  .insight-caps { height: 7.2em; font-size: 17px; }
  .insight-steps button { padding: 0 12px; }
  .cap { padding: 26px; }
  .principles { grid-template-columns: 1fr; }
  .strength { padding: 24px; }
  .strength__body h4 { font-size: 22px; }
  .rates { grid-template-columns: 1fr; }
  .rates b { font-size: 44px; }
  .principle { padding: 26px; }
  .principle h4 { font-size: 20px; }
  .principle__ex { height: 96px; }
  .principle__ex p { font-size: 14px; }
  .splits { grid-template-columns: 1fr; }
  .split { padding: 28px; }
  .split > h3 { font-size: 21px; }
  .orbit__ring span { font-size: 10px; padding: 2px 7px; }
  .orbit__node { font-size: 10px; }
  .orbit__node span { padding: 2px 6px; }
  .orbit__core { font-size: 11px; }
  .method { padding: 24px; }
  .method__viz { height: 220px; }
  .method__text h4 { font-size: 22px; }
  .plans { grid-template-columns: 1fr; }
  .plan { padding: 28px; }
  .plan h4 { font-size: 26px; }
  .plan dl div { grid-template-columns: 1fr; gap: 4px; }
  .case { padding: 24px; }
  .case h3 { font-size: 19px; }
  .gallery__ctrl { justify-content: flex-end; }
  .dots { display: none; }
  .qa h3 button { padding: 22px 0; font-size: 16px; gap: 16px; }
  .qa__a p { padding-right: 0; font-size: 15px; }
  .steps { --rail: 30px; }
  .step { --pt: 30px; padding: var(--pt) 24px 28px; }
  .contact__card { padding: 24px 18px; border-radius: 24px; }
  .form__grid { grid-template-columns: 1fr; }
  .spec div { grid-template-columns: 1fr; gap: 2px; }
  .footer__links { margin-left: 0; }
}

/* 自動送信よけ。人には見せず、入力されていれば bot と判断する。
   display:none だと埋めない bot がいるため、画面外へ出して隠す。 */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__error{margin-top:16px;color:#b3261e;font-size:.875rem;line-height:1.7}
.form__error a{color:inherit;text-decoration:underline}
@media (prefers-color-scheme:dark){.form__error{color:#f2b8b5}}

/* GMOグループのサイトシール。登録ドメインでのみ表示されるため、
   出ないあいだは空の行として詰まらないよう gap だけで整える。 */
.footer__seals{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:38px 0}
.footer__seal{max-width:calc((100% - 20px) / 3)}
.footer__seal img{max-width:100%;height:auto}