@charset "UTF-8";
/*
 * index.v2.css — TOPページ専用
 * 依存: /data/css/v2/tokens.css, /data/css/v2/common.css
 */

/* ============================================================
   セクション共通
   ============================================================ */
.section-title {
  text-align: center;
  font-size: 2.8125rem;
  font-weight: var(--fw-medium);
  margin-bottom: .5rem;
}
.section-title--light { color: #fff; }
.section-title .ai-mark { color: var(--c-coral); margin-right: .25em; }
.section-lead {
  text-align: center;
  color: var(--c-text-muted);
  margin-bottom: 2rem;
}
.section-lead--light { color: #ffffffc7; }

.section--dark {
  background: var(--c-bg-dark);
  color: #fff;
}

/* ============================================================
   ヒーロー
   ============================================================ */
.hero {
  position: relative;
  background: var(--grad-hero);
  color: #fff;
  overflow: hidden;
}
.hero__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 2.5rem var(--container-pad) 0;
  display: grid;
  gap: 1rem;
}
.hero__copy {
  padding-block: 1.5rem 2.5rem;
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  margin-bottom: 1rem;
  padding: .35rem 1rem;
  border-radius: var(--radius-pill-lg);
  background : linear-gradient(135deg, #ed1e79 0%, #ff1d25 100%);
  color: #fff;
  font-size: .92rem;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
}
.hero__badge-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}
.hero h1 {
  color: #fff;
  font-size: 4rem;
  font-weight: var(--fw-cta);
  letter-spacing: .02em;
}
/* ワイドレイアウト(≥1200px)未満ではコピー幅が狭く、h1・leadの各行が1行に
   収まらないため、強制改行を無効化して自然な折り返しにする(段落ち防止) */
@media (max-width: 1199.98px) {
  .hero h1 .hero-title-br,
  .hero__lead .hero-lead-br { display: none; }
}
.hero__lead {
  margin-top: 1rem;
  color: #dde6ff;
  font-size: 1rem;
  max-width: 34em;
  line-height: 1.8;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
}
.hero__cta .btn-primary {
  min-width: min(100%, 220px);
  min-height: 60px;
  border: 1px solid #00CFFF;
  border-radius: 20px;
  background: linear-gradient(135deg, #169dda 0%, #3666ff 100%);
  color: #fff;
  box-shadow: 0px 8px 10px #00000033;
}
.hero__cta .btn-primary:hover {
  border-color: #00cfffb3;
  background: linear-gradient(135deg, #1aa9e8 0%, #416fff 100%);
  color: #fff;
}
.hero__cta .btn-outline-light {
  --hero-outline-bg: #0b1e4f38;
  --hero-outline-hover-color: #2176c9;
  background: var(--hero-outline-bg);
  border-color: #00cfff73;
  border-radius: 20px;
}
.hero__cta .btn-outline-light:hover {
  background: #fff;
  border-color: var(--hero-outline-hover-color);
  color: var(--hero-outline-hover-color);
}

.hero__visual {
  position: relative;
  justify-self: end;
  width: min(58vw, 640px);
  aspect-ratio: 640 / 740;
  translate: -8% 0;
}
.hero__layer {
  position: absolute;
  inset: auto;
  width: auto;
  height: auto;
  max-width: none;
  opacity: 1;
  transform: none;
}
.hero__layer--phone {
  z-index: 1;
  top: 1.38%;
  left: 41.55%;
  width: 38.12%;
}
.hero__layer--graph {
  z-index: 2;
  top: 0.31%;
  left: 34.3%;
  width: 28%;
}
.hero__layer--md {
  z-index: 3;
  top: -1.3%;
  left: 17.7%;
  width: 28%;
}
html.js-hero-ready .hero__layer {
  opacity: 0;
  transform: translate3d(0, 42px, 0);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  will-change: opacity, transform;
}
html.js-hero-ready [data-hero].is-in .hero__layer { opacity: 1; transform: none; }
html.js-hero-ready [data-hero].is-in .hero__layer--phone { transition-delay: .05s; }
html.js-hero-ready [data-hero].is-in .hero__layer--graph { transition-delay: .25s; }
html.js-hero-ready [data-hero].is-in .hero__layer--md { transition-delay: .45s; }

@media (min-width: 950px) {
  .hero__inner {
    padding-top: 4rem;
    padding-inline: clamp(5rem, 13vw, 8.5rem) var(--container-pad);
  }
  .hero__copy {
    padding-block: 1.5rem 3rem;
  }
  .hero__visual {
    width: min(58vw, 640px);
    max-width: 100%;
    /* 箱の下端をフォン可視下端に合わせ(高さ≒幅×0.804)、margin-bottomで下余白70pxを確保 */
    aspect-ratio: 640 / 515;
    translate: 1% 0;
    margin-bottom: 70px;
  }
}

/* ワイド（最大化）: ビジュアルをテキスト右端から一定間隔(160px)で配置。
   コンテナ(.hero__inner)基準で左寄せするため、ウィンドウ幅を広げても隙間は一定。 */
@media (min-width: 1200px) {
  .hero {
    /* ビジュアル上端(80px) + フォン可視下端(箱幅×0.808: top1.38%×710/640 + 幅38.12%×1258/605実描画) + 下余白70px固定 */
    min-height: calc(80px + max(750px, min(50vw, 860px)) * 0.808 + 70px);
  }
  .hero__inner {
    position: relative;
    grid-template-columns: 1fr;
  }
  .hero__copy {
    max-width: 615px;
  }
  .hero__visual {
    position: absolute;
    top: 80px;
    /* h1が縮み始める約1362px(4.7vw=4rem)以下で、テキスト右端との隙間を最大60px詰める。
       1362px以上は510pxのまま(min側で頭打ち=段差なし) */
    left: min(510px, calc(450px + (100vw - 1200px) * 60 / 162));
    right: auto;
    /* 1500px時点の大きさ(750px=1500の50vw)を下限に。1200〜1500pxは固定、1500px以上は拡大(1720pxで860px上限) */
    width: max(750px, min(50vw, 860px));
    aspect-ratio: 640 / 710;
    translate: none;
    margin: 0;
  }
  .hero__layer--phone { left: 53.88%; }
  .hero__layer--graph { left: 46.60%; }
  .hero__layer--md { left: 30.3%; }
}

/* 1000px未満: 画像を下段へ回し、コピー・画像を縦積みで画面中央に配置
   (1000px以上は1行＝横並びを維持。1200px以上のワイド版には波及させない) */
@media (max-width: 999.98px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    /* コピー内のテキストは左揃えのまま、ブロックごと中央に配置 */
    justify-items: center;
    padding-inline: var(--container-pad);
    /* 縦積み時の上余白はバッジ上端より上を計50pxに集約。下は従来どおり4.5rem */
    padding-block: 50px 4.5rem;
  }
  .hero__copy {
    /* 中身に密着する幅(CTA約427px・lead約422pxが収まる460px)で中央配置。
       右側の余白を抑え、テキストの見た目の中心を画像中心とそろえる */
    width: min(100%, 460px);
    /* バッジ上の余白は.hero__innerのpadding-topに集約（計50px）。下余白は維持 */
    padding-top: 0;
  }
  .hero__visual {
    justify-self: center;
    translate: none;
    /* ≥950由来のmargin-bottom:70pxを解除（padding-bottomと二重になり下余白が増えていた）。
       下余白をpadding-bottomのみ＝≥1200と同程度に揃える */
    margin-bottom: 0;
  }
}

/* 1000〜1199.98px: 段落ちさせず1行（コピー左・画像右）を維持。
   画像はコピーより縦に長いので、画像の高さ分のmin-heightを確保し、
   画像は絶対配置で縦中央に。コピーはalign-content:centerで縦中央に揃える。 */
@media (min-width: 1000px) and (max-width: 1199.98px) {
  .hero__inner {
    position: relative;
    /* 画像620px固定。テキストブロックは385pxに縮小 */
    grid-template-columns: minmax(0, 385px) minmax(0, 1fr);
    column-gap: clamp(1rem, 2vw, 2rem);
    /* コピーは上揃え。上部余白は1200px以上(ワイド版)と同じ4rem */
    padding-top: 4rem;
    padding-bottom: 0;
    /* コピー＋画像のセットを画面中央に配置（左右マージンを均等に）。
       同時にテキストと画像の余白は80px一定を維持。画像位置は下の left と連動。 */
    padding-left: calc(50vw - 393px);
    padding-right: var(--container-pad);
    /* 画像を固定620pxにしたので高さも固定。画像は絶対配置で縦中央のまま */
    min-height: calc(620px * 0.766 + 220px);
    align-content: start;
  }
  .hero__copy {
    width: auto;
    max-width: 385px;
    justify-self: start;
  }
  /* h1(11文字)を385px幅で2行に収める: フォントサイズは変えず字間を詰め、
     1行6文字(約380px)が入るようにする(.02emのままだと5文字＝3行になる) */
  .hero h1 {
    letter-spacing: -0.01em;
  }
  /* CTAボタン2つを縮小した幅でも1行にキープ（min-width:220pxを解除） */
  .hero__cta {
    flex-wrap: nowrap;
  }
  .hero__cta .btn-primary {
    min-width: 0;
  }
  .hero__visual {
    position: absolute;
    top: 50%;
    /* セット中央揃え: 画像も右寄せをやめ、コピーとの余白80pxを保つ位置に固定 */
    left: calc(50vw - 65px);
    right: auto;
    translate: 0 -50%;
    /* 1000〜1199pxの全域で画像サイズを固定（1200px相当の大きさに近づける） */
    width: 620px;
    /* ボックスを可視絵柄にほぼ一致させる(640/490≒0.766)。中央寄せ時に絵柄が上に寄らない */
    aspect-ratio: 640 / 490;
    margin: 0;
  }
}

@media (max-width: 949.98px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero__visual {
    width: min(92vw, 520px);
    /* 950〜999pxと同じ短い箱にして、電話下の余白(下余白)を≥1200と同程度に揃える */
    aspect-ratio: 640 / 515;
    translate: none;
    justify-self: center;
    margin-inline: 0;
  }
}

@media (max-width: 600px) {
  .hero h1 {
    font-size: 3.4rem;
  }
  .hero__badge {
    font-size: .78rem;
  }
}

@media (max-width: 520px) {
  .hero__visual {
    width: min(94vw, 430px);
  }
  /* CTAボタンを1行に収める: 等幅で横並びにし、折り返し禁止＋文字幅に応じてフォント縮小 */
  .hero__cta {
    flex-wrap: nowrap;
    gap: .5rem;
  }
  .hero__cta .btn {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: .8em;
    white-space: nowrap;
  }
  .hero__cta .btn-primary {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__layer,
  .slide-experience__btn,
  .slide-experience__btn:hover,
  .slide-experience__btn:active,
  html.js-hero-ready .hero__layer {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}

/* ============================================================
   お知らせバー（ヒーロー直下）
   ============================================================ */
.news-bar {
  background: #004dc7;
  color: #fff;
}
.news-bar[hidden] { display: none; }
.news-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 72px;
  padding-block: .75rem;
  font-size: .875rem;
}
.news-bar__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  flex: 1;
  min-width: 0;
  opacity: 0;
  transition: opacity .4s ease;
}
.news-bar.is-loaded .news-bar__item { opacity: 1; }
/* 複数件のローテーション切替: フェードアウト → 内容差し替え → フェードイン */
.news-bar.is-loaded .news-bar__item.is-switching { opacity: 0; }
.news-bar__date {
  flex-shrink: 0;
  color: #ffffffd9;
  white-space: nowrap;
}
.news-bar__title {
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.news-bar__title:hover { color: #fff; text-decoration: underline; }
.news-bar__more {
  flex-shrink: 0;
  color: #fff;
  font-size: .875rem;
  text-decoration: none;
  white-space: nowrap;
}
.news-bar__more:hover { color: #fff; text-decoration: underline; }
@media (max-width: 640px) {
  .news-bar__inner { gap: .5rem; padding-block: .65rem; }
  .news-bar__item { gap: .5rem; }
}

/* ============================================================
   カルーセル（AIフレンドリー）
   ============================================================ */
.feature-carousel {
  --carousel-card-height: 560px;
  background: #fff;
  color: #000;
  /* ウィンドウ幅で高さ/位置を変えないため、vwをやめて固定値にする */
  padding-block: 6.5rem;
}
.feature-carousel__title {
  color: #000;
  font-weight: var(--fw-medium);
  /* 同上: 幅で動かないよう固定 */
  margin-bottom: 4rem;
  transition: opacity .3s ease;
}
.feature-carousel__title.is-fading { opacity: 0; }
/* reveal（.reveal-item）の opacity:1 / transition .6s より優先させ、
   カルーセル切替時のタイトルのフェード（JSの is-fading／300ms）を有効にする */
html.js-reveal-ready .reveal--children.is-visible .reveal-item.feature-carousel__title {
  transition: opacity .3s ease, transform .6s var(--ease);
}
html.js-reveal-ready .reveal--children.is-visible .reveal-item.feature-carousel__title.is-fading {
  opacity: 0;
}
.feature-carousel__title .ai-mark {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: .35em;
  vertical-align: -.08em;
}

.slide-card {
  margin: 0 auto;
  max-width: 1180px;
  padding: 80px 0 40px;
  background: #e5e5e5;
  box-shadow: none;
  color: #000;
}
.feature-carousel .carousel__slide {
  display: flex;
}
.feature-carousel .slide-card {
  flex: 1;
  width: 100%;
  height: var(--carousel-card-height);
  max-height: var(--carousel-card-height);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.feature-carousel .carousel__slide:first-child .slide-card {
  padding-inline: 0;
}
.slide-card--dark {
  background:
    radial-gradient(ellipse 85% 70% at 50% 40%, #6c757e 0%, #2b2e34 48%, #0d0e12 100%);
  color: #eef2ff;
  box-shadow: inset 0 1px 0 #ffffff14;
}
.slide-card--blue { background: linear-gradient(135deg, #169dda 0%, #2f6eec 50%, #4840ff 100%); color: #fff; }
.slide-card--analytics {
  /* 背景画像をカード全体に敷く（#0a0f1f はフォールバック）。
     画像は元 .slide-figs--analytics のインライン指定から移動 */
  background: #0a0f1f url('/data/img/v2/cards/04_bg.jpg') center bottom / cover no-repeat;
  color: #fff;
}
.slide-figs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 3.5vw, 2.75rem);
  flex-wrap: wrap;
}
.slide-figs img { max-width: 100%; height: auto; }
.slide-figs--ocr {
  /* 3枚を一定の余白で中央に並べ、はみ出した左右画像をカードの
     overflow:hidden でクリップする。ウィンドウ幅が狭まるほど
     左右画像がカード外へはみ出し、見切れ量が増える。
     余白(--ocr-gap)は一定で、左右画像は縮小しない。 */
  --ocr-h: 340px;          /* 画像の高さ（左右は固定・縮小しない） */
  --ocr-gap: 70px;       /* 中央画像と左右画像の余白（一定） */
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: var(--ocr-gap);
  width: 100%;
  margin-inline: 0;
}
.slide-figs.slide-figs--ocr img {
  flex: 0 0 auto;
  width: auto;
  height: var(--ocr-h);
  max-width: none;
}
.slide-figs.slide-figs--ocr .slide-fig-center {
  /* 中央は完全表示。画面に収まらない極狭幅でのみアスペクト維持で縮む */
  flex: 0 1 auto;
  width: auto;
  height: 320px;
  max-height: var(--ocr-h);
  max-width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  transform: translate(15px, -32px);
}
.slide-figs--ocr img:not(.slide-fig-center) {
  border-radius: 4px;
}
.slide-figs--ocr img:nth-child(1) {
  transform: translateX(8px);
}
.slide-figs--phones img { max-height: 330px; width: auto; filter: drop-shadow(0 20px 40px #00000066); }
/* 3枚目（青）: 2台のスマホを扇状に開き、ボタンが各スマホ真下に来るよう間隔を広げる。
   全幅で同じ状態を維持する（769px以下でもPC時と同レイアウト。.slide-card--blue の
   詳細度がモバイル一般ルールに勝つため、@media で囲まなくても768px以下に波及しない）。 */
/* 上から自然に流し、ボタン＋テキストをまとめて配置（余りは下端の余白に） */
.feature-carousel .slide-card--blue {
  /* スマホ間隔と高さ。ボタン配置はこの2値から算出するので、ここを変えると追従する */
  --p3-gap: 120px;
  --p3-phone-h: 370px;
  /* スマホ画像の実寸比 251:800 から導く描画幅 */
  --p3-phone-w: calc(var(--p3-phone-h) * 251 / 800);
  /* 2台のスマホ中心の間隔（= 画像幅 + 余白） */
  --p3-center-span: calc(var(--p3-phone-w) + var(--p3-gap));
  justify-content: flex-start;
  padding-top: 60px;
}
.slide-card--blue .slide-figs--phones {
  gap: var(--p3-gap);
  align-items: flex-end;
}
/* 元画像が既に左右へ開いた3Dパースのため、CSS回転は加えない（垂直に配置）。
   translateYで全体を引き上げ、上部の余白を詰める。 */
.slide-card--blue .slide-figs--phones img {
  max-height: var(--p3-phone-h);
  transform: translateY(-30px);
}
/* 各ボタンをスマホ中心に揃える: 中心間隔(=center-span)の2倍を全幅とし、
   1fr×2の各列中央にボタンを置くと、列中心がスマホ中心と一致する */
.slide-card--blue .slide-experience {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  gap: 0; /* 基底のflex用gapを打ち消し、各列を等幅(=center-span)にする */
  width: calc(var(--p3-center-span) * 2);
  margin-inline: auto;
  margin-top: -50px;
}
/* CTAボタンの大きさを変えない（基底の min-width:clamp(8.5rem,15vw,11rem) の
   15vw による可変を打ち消し、11rem固定にする） */
.slide-card--blue .slide-experience__btn {
  min-width: 11rem;
}
/* 520px以下: 画像を340pxに縮小し、スマホ間隔(--p3-gap)を50pxに。
   どちらも変数経由なので、CTAボタンの中央揃え基準(--p3-center-span)が自動追従し、
   ボタンは各スマホ中央に来る。 */
@media (max-width: 600px) {
  .feature-carousel .slide-card--blue {
    --p3-phone-h: 340px;
    --p3-gap: 50px;
  }
  /* ボタンを少し小さく。列幅(center-span≈157px)に収まり中央揃えを保てる範囲 */
  .slide-card--blue .slide-experience__btn {
    min-width: 9.5rem;
  }
}
.slide-figs--monitor {
  /* 1枚目と同様、画像は固定サイズで縮小せず、幅が狭まるほど
     左右画像がカード外へはみ出して見切れる。余白は一定。 */
  --monitor-h: 340px;       /* 画像の高さ（固定・縮小しない） */
  --monitor-gap: 2.25rem;   /* 2枚の余白（一定） */
  flex-wrap: nowrap;
  justify-content: center;
  gap: var(--monitor-gap);
  width: 100%;
}
.slide-card--dark .slide-figs--monitor {
  align-items: flex-start;
  padding-top: 0;
}
.slide-figs--monitor img {
  flex: 0 0 auto;
  width: auto;
  height: var(--monitor-h);
  max-width: none;
  filter: drop-shadow(0 22px 34px #0000007a);
}
.slide-figs--analytics {
  justify-content: flex-start;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2rem);
  overflow: hidden;
}
.slide-figs--analytics img { max-width: 74%; height: auto; }

.slide-experience {
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 4vw, 3.25rem);
  margin-top: clamp(1.1rem, 2.5vw, 1.55rem);
}
.slide-experience__btn {
  --slide-experience-invert-color: #0a0d12;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(8.5rem, 15vw, 11rem);
  min-height: 40px;
  padding: .55rem 1.6rem;
  border: 1px solid #ffffff5c;
  border-radius: 10px;
  color: #fff;
  font-size: .85rem;
  font-weight: var(--fw-cta);
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 10px 24px #0f236e2e;
  transform: translateY(0);
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.slide-experience__btn:hover {
  background: #fff;
  border-color: currentColor;
  color: var(--slide-experience-invert-color);
  text-decoration: none;
  transform: none;
  box-shadow: none;
}
.slide-experience__btn:active {
  transform: none;
  box-shadow: none;
}
.slide-experience__btn--pdf {
  /* ホバー時に白フィルへ反転し、ボーダー色・文字色をこの青にする
     （:hover の color:var(--slide-experience-invert-color) と border-color:currentColor を流用） */
  --slide-experience-invert-color: #2d72eb;
  background: #ffffff14;
}
.slide-experience__btn--pdf:hover {
  background: #fff;
}
.slide-experience__btn--ebook {
  background: linear-gradient(90deg, #19a6e8f2 0%, #346afcf2 100%);
  border-color: transparent;
  border-radius: var(--radius-pill-lg);
}
/* 背景だけを拡大する層。文字（本体）は等倍のままなのでぼやけない */
.slide-experience__btn--ebook::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: inherit;
  transform: scale(1);
  transition: transform var(--dur) var(--ease);
}
.slide-experience__btn--ebook:hover {
  background: linear-gradient(90deg, #24bdf4 0%, #4978ff 100%);
  border-color: transparent;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-button-hover);
}
.slide-experience__btn--ebook:hover::before {
  transform: scale(1.03);
}
.slide-experience__btn--ebook:active {
  transform: translateY(0);
  box-shadow: var(--shadow);
}
.slide-experience__btn--ebook:active::before {
  transform: scale(.99);
}

.slide-text {
  text-align: center;
  margin-top: clamp(2rem, 4.5vw, 3.25rem);
  font-size: 1.5rem;
  font-weight: var(--fw-cta);
  line-height: 1.75;
  color: #000;
}
.feature-carousel .slide-text {
  margin-top: auto;
  padding-top: 0;
  transform: translateY(-15px);
}
.feature-carousel .carousel__slide:first-child .slide-text {
  padding-inline: clamp(1.5rem, 6vw, 5rem);
  text-align: left;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  transform: translateY(-10px);
  /* ウィンドウ幅を縮めてもフォントサイズは固定（メディアクエリで変えない） */
  font-size: 1.5rem;
}
/* 2枚目: 1枚目と同様にテキストは左揃え・ブロックは中央寄せ */
.feature-carousel .slide-text--monitor {
  padding-inline: clamp(1.5rem, 6vw, 5rem);
  text-align: left;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
.slide-text strong { font-weight: var(--fw-cta); }
.slide-text--invert { color: #eef2ff; }
.slide-text--monitor {
  color: #ccc;
  font-size: 1.5rem;
  line-height: 1.7;
  letter-spacing: .02em;
  text-shadow: 0 2px 18px #0000008c;
}
.slide-text__html {
  color: #90d66b;
}
.slide-text__ai {
  color: #f764ff;
}
.slide-text small { display: block; margin-top: .5rem; font-size: .78rem; opacity: .75; font-weight: var(--fw-normal); }
/* スマホメニュー表示（900px以下）では「アウトライン済みの PDF も」直後の改行を無効化 */
@media (max-width: 900px) {
  .slide-text__br--nomobile { display: none; }
  /* カルーセル内の 1.5rem テキストボックスを 1.3rem に縮小（各セレクタの詳細度に合わせて上書き） */
  .slide-text,
  .feature-carousel .carousel__slide:first-child .slide-text,
  .slide-text--monitor,
  .feature-carousel .slide-card--blue .slide-text {
    font-size: 1.3rem;
  }
}
/* 3枚目（青）: メインテキストを大きく中央寄せ、注釈は右寄せ。
   下端に貼り付けず（auto解除）、ボタンの直下に小さな余白でまとめる。 */
/* セレクタを .feature-carousel 付き(詳細度0,3,0)にして、@media(max-width:1050px)の
   .feature-carousel .slide-text{font-size:1.2rem}(0,2,0)に負けないようにする。
   ＝ウィンドウ幅に依らず常に1.5remを維持（位置/高さが変わらない）。
   vw依存の余白も固定値にして幅で動かないようにする。 */
.feature-carousel .slide-card--blue .slide-text {
  margin-top: .9rem;
  transform: none;
  font-size: 1.5rem;
  line-height: 1.6;
  text-align: center;
  /* ブロック幅を本文に合わせて中央配置し、注釈の右端を本文の右端に揃える */
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  /* 1枚目と同じ左右余白（clamp で幅に追従） */
  padding-inline: clamp(1.5rem, 6vw, 5rem);
}
.slide-card--blue .slide-text small {
  text-align: right;
  margin-top: .2rem;
  font-size: .8rem;
}
/* 4枚目（analytics）: 1・2枚目と同じ左右余白（中央揃えは維持） */
.slide-card--analytics .slide-text {
  padding-inline: clamp(1.5rem, 6vw, 5rem);
  /* 1枚目と同様: 文字は左揃え、ブロックは中央寄せ */
  text-align: left;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

.feature-carousel .carousel__btn { display: none; }
.feature-carousel .carousel__track { align-items: stretch; }
/* スライドのマスク（クリップ）領域を .slide-card と同じ横幅・角丸にする。
   これにより、横スライドのアニメーションが .slide-card の幅の中で
   border-radius:48px のマスクに切り取られて見える。 */
.feature-carousel .carousel__viewport {
  max-width: 1180px;
  margin-inline: auto;
  border-radius: 48px;
}

/* ============================================================
   カルーセル: スライド切替時の要素登場アニメ（題材連動・スライド別）
   - go(i) がアクティブスライドの .slide-card に .is-active を付与
   - JS有効時(html.js-carousel-ready)のみ初期状態で要素を隠し、初期描画の
     ちらつきを防止。reduceMotion 時は js-carousel-ready を付与しない
   - 静的 transform を持つ要素は keyframe 終端でその値を再現して衝突回避。
     ただし .slide-fig-center は transform がブレークポイントで変わるため、
     transform を使わず opacity+clip-path のみで演出する
   ============================================================ */
html.js-carousel-ready .feature-carousel .slide-card:not(.is-active) .slide-figs img,
html.js-carousel-ready .feature-carousel .slide-card:not(.is-active) .slide-text,
html.js-carousel-ready .feature-carousel .slide-card:not(.is-active) .slide-experience__btn {
  opacity: 0;
}

@keyframes ce-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ce-rise-l8 { from { opacity: 0; transform: translate(8px, 16px); } to { opacity: 1; transform: translateX(8px); } }
@keyframes ce-in-left { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes ce-in-right { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes ce-txt-10 { from { opacity: 0; transform: translateY(0); } to { opacity: 1; transform: translateY(-10px); } }
@keyframes ce-txt-15 { from { opacity: 0; transform: translateY(0); } to { opacity: 1; transform: translateY(-15px); } }
@keyframes ce-ocr-center { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes ce-strong-pop { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }
@keyframes ce-phone-left { from { opacity: 0; transform: translate(-20px, -30px); } to { opacity: 1; transform: translate(0, -30px); } }
@keyframes ce-phone-right { from { opacity: 0; transform: translate(20px, -30px); } to { opacity: 1; transform: translate(0, -30px); } }
@keyframes ce-btn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ce-graph { from { opacity: 0; clip-path: inset(100% 0 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }

/* 1枚目 AI-OCR: 文字が生成される（中央SVGを左→右ワイプ） */
html.js-carousel-ready .feature-carousel .carousel__slide:first-child .slide-card.is-active .slide-figs--ocr img:nth-child(1) {
  animation: ce-rise-l8 .5s var(--ease) both;
}
html.js-carousel-ready .feature-carousel .carousel__slide:first-child .slide-card.is-active .slide-fig-center {
  animation: ce-ocr-center .7s var(--ease) .16s both;
}
html.js-carousel-ready .feature-carousel .carousel__slide:first-child .slide-card.is-active .slide-figs--ocr img:nth-child(3) {
  animation: ce-rise .5s var(--ease) .3s both;
}
html.js-carousel-ready .feature-carousel .carousel__slide:first-child .slide-card.is-active .slide-text {
  animation: ce-txt-10 .5s var(--ease) .44s both;
}

/* 2枚目 dark/Markdown: コードが左右から流入 */
html.js-carousel-ready .feature-carousel .slide-card--dark.is-active .slide-figs--monitor img:first-child {
  animation: ce-in-left .55s var(--ease) both;
}
html.js-carousel-ready .feature-carousel .slide-card--dark.is-active .slide-figs--monitor img:last-child {
  animation: ce-in-right .55s var(--ease) .14s both;
}
html.js-carousel-ready .feature-carousel .slide-card--dark.is-active .slide-text {
  animation: ce-txt-15 .5s var(--ease) .3s both;
}
html.js-carousel-ready .feature-carousel .slide-card--dark.is-active .slide-text__html {
  display: inline-block;
  animation: ce-strong-pop .4s var(--ease) .38s both;
}

/* 3枚目 blue/速度: 2台のスマホで速度差を体感、体験ボタンが連続登場 */
html.js-carousel-ready .feature-carousel .slide-card--blue.is-active .slide-figs--phones img:first-child {
  animation: ce-phone-left .6s var(--ease) both;
}
html.js-carousel-ready .feature-carousel .slide-card--blue.is-active .slide-figs--phones img:last-child {
  animation: ce-phone-right .42s cubic-bezier(.16, 1, .3, 1) .12s both;
}
html.js-carousel-ready .feature-carousel .slide-card--blue.is-active .slide-text {
  animation: ce-rise .5s var(--ease) .3s both;
}
html.js-carousel-ready .feature-carousel .slide-card--blue.is-active .slide-experience__btn:first-child {
  animation: ce-btn .4s var(--ease) .36s both;
}
html.js-carousel-ready .feature-carousel .slide-card--blue.is-active .slide-experience__btn:last-child {
  animation: ce-btn .4s var(--ease) .42s both;
}

/* 4枚目 analytics: グラフが下から伸びる */
html.js-carousel-ready .feature-carousel .slide-card--analytics.is-active .slide-figs--analytics img {
  animation: ce-graph .7s var(--ease) both;
}
html.js-carousel-ready .feature-carousel .slide-card--analytics.is-active .slide-text {
  animation: ce-txt-15 .5s var(--ease) .38s both;
}

/* reduceMotion: 登場アニメを完全無効化（静的 transform は保持するため transform は触らない） */
@media (prefers-reduced-motion: reduce) {
  .feature-carousel .slide-card .slide-figs img,
  .feature-carousel .slide-card .slide-text,
  .feature-carousel .slide-card .slide-experience__btn {
    opacity: 1 !important;
    animation: none !important;
    clip-path: none !important;
  }
}

/* ギャラリーナビ（Apple iPad Pro 風）: ドットを内包したピル + 再生/一時停止ボタン。
   カレント表示は既存の青丸のまま。 */
.feature-carousel .carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14.4px;
  margin-top: 28px;
}
.feature-carousel .carousel__dots {
  margin-top: 0;
  gap: 16.8px;
  padding: 13.2px 21.6px;
  background: var(--carousel-nav-bg, #333);
  border-radius: 999px;
  transition: background-color 0.5s ease;
}
.feature-carousel .carousel-dot {
  position: relative;
  width: 9.6px;
  height: 9.6px;
  background: #8e8e93;
  transform: none;
}
/* 見た目の●は8pxのまま、透明な疑似要素でクリック領域だけを拡張する */
.feature-carousel .carousel-dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28.8px;
  height: 28.8px;
  transform: translate(-50%, -50%);
}
.feature-carousel .carousel-dot:hover {
  background: #aeaeb2;
}
.feature-carousel .carousel-dot[aria-current="true"] {
  background: var(--c-cyan);
  transform: none;
}
.feature-carousel .carousel__playpause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45.6px;
  height: 45.6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--carousel-nav-bg, #333);
  color: #8e8e93;
  cursor: pointer;
  transition: background-color 0.5s ease;
}
.feature-carousel .carousel__playpause::before {
  content: "";
  width: 15.6px;
  height: 15.6px;
  background: currentColor;
  /* 再生中（aria-pressed="true"）は一時停止アイコン */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Crect x='1.5' width='3' height='14' rx='1'/%3E%3Crect x='7.5' width='3' height='14' rx='1'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Crect x='1.5' width='3' height='14' rx='1'/%3E%3Crect x='7.5' width='3' height='14' rx='1'/%3E%3C/svg%3E") center / contain no-repeat;
}
.feature-carousel .carousel__playpause[aria-pressed="false"]::before {
  /* 一時停止中は再生アイコン */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M1.5 1 11 7 1.5 13Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M1.5 1 11 7 1.5 13Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (min-width: 1200px) {
  .slide-figs--phones img { max-height: 400px; }
  .slide-figs--analytics img { max-width: 76%; }
}

/* 850px未満: 1枚目OCRの画像を縮小。見切れの仕組み（固定高さ＋カードの
   overflow:hiddenで左右をクリップ）はそのまま、高さ変数だけ小さくする。 */
@media (max-width: 800.98px) {
  .slide-figs--ocr {
    --ocr-h: 280px;   /* 左右画像の高さ（固定・縮小しない） */
    --ocr-gap: 30px;  /* 中央と左右の余白 */
  }
  .slide-figs.slide-figs--ocr .slide-fig-center {
    height: 260px;
    transform: translate(12px, -26px);
  }
  /* 2枚目（モニター）: 画像の高さを270pxに縮小 */
  .slide-figs--monitor {
    --monitor-h: 270px;
  }
}

@media (max-width: 768px) {
  /* ウィンドウ幅を縮めても高さは変えない（560px固定を維持）。
     以前はここで --carousel-card-height:auto にして可変にしていた。 */
  .slide-card { border-radius: 32px; }
  .slide-figs--phones img { max-height: 320px; }
  .slide-figs--analytics img { max-width: 82%; }
  .slide-experience {
    flex-wrap: wrap;
    gap: .75rem;
  }
  .slide-experience__btn {
    min-width: min(100%, 9.5rem);
  }
}

/* 768px以下で carousel-card-height が auto になるが、1枚目OCRスライドだけは
   PCと同じ高さ(560px)を維持して画像とテキストの配置バランスを保つ。 */
@media (max-width: 768px) {
  .feature-carousel .carousel__slide:first-child .slide-card {
    height: 560px;
    max-height: 560px;
  }
}

/* スマホ: OCR画像を段階的に縮小し、小さな画面でも3枚とも表示されるようにする。
   ビューポート比例(vw)は使わずブレークポイントごとに固定値で調整。 */
/* 600px以下: 1枚目OCRの画像は縮小せず（800.98px時の高さを維持）、
   3枚を重ねて表示する。中央画像を最前面（z-index）に。
   はみ出した部分はカードの overflow:hidden でクリップされる。 */
@media (max-width: 600px) {
  .slide-figs--ocr {
    --ocr-h: 280px;   /* 縮小しない（801px以上と同じ高さ） */
    --ocr-gap: 0px;
  }
  .slide-figs.slide-figs--ocr img {
    position: relative;
    z-index: 1;
    margin-inline: -20px;   /* 隣の画像と重ねる量 */
  }
  .slide-figs.slide-figs--ocr .slide-fig-center {
    height: 260px;
    transform: translate(16px, -26px);
    z-index: 2;             /* 中央画像を最前面に */
  }
}

/* ============================================================
   実績
   ============================================================ */
.stats {
  background: #fff;
  color: #000;
  padding-block: clamp(3rem, 5.2vw, 4rem) clamp(2rem, 4vw, 3rem);
}
.stats .container {
  max-width: var(--container-max);
}
.stats .section-title {
  color: #000;
  font-size: 2.8125rem;
  margin-bottom: clamp(3rem, 6vw, 4.1rem);
}

.stat-grid {
  display: grid;
  gap: clamp(.75rem, 1.6vw, 1rem);
  grid-template-columns: 1fr;
  max-width: 420px;
  margin: 0 auto;
}
.stat-card {
  background: #fff;
  border: none;
  border-radius: 22px;
  min-height: 284px;
  padding: 70px 0;
  text-align: center;
  box-shadow: 0 22px 42px #1118271a;
}
.stat-card dt {
  /* アイコン枠の高さを固定し（1行目）、その下に文字（2行目）を置く。
     アイコンの高さが個別でも、文字の開始位置が3カードで揃う。 */
  display: grid;
  grid-template-rows: var(--stat-icon-slot, 83px) auto;
  justify-items: center;
  align-items: end; /* アイコンを枠の下端に揃える */
  gap: clamp(1.55rem, 3vw, 2.15rem);
  color: #000;
  font-size: .875rem;
  font-weight: var(--fw-bold);
  line-height: 1.4;
}
.stat-card dt img {
  width: auto;
  height: var(--stat-icon-h, 64px);
}
/* アイコンごとの高さ（幅はautoでアスペクト比を保持） */
.stat-card--account dt img { --stat-icon-h: 83px; }
.stat-card--books   dt img { --stat-icon-h: 70px; }
.stat-card--public  dt img { --stat-icon-h: 80px; transform: translateY(10px); }
.stat-card dd { margin: .45rem 0 0; padding-bottom: clamp(1rem, 2vw, 1.5rem); }
.stat-card dd strong {
  font-family: "Inter", sans-serif;
  font-size: 4rem;
  font-weight: var(--fw-cta);
  line-height: 1;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(90deg, #16a5df 0%, #2c4fe0 78%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.stat-card dd span {
  font-weight: var(--fw-normal);
  -webkit-text-fill-color: #178fd1;
}
@media (min-width: 900px) {
  .stat-grid {
    max-width: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 900px) and (max-width: 1100px) {
  .stat-card dd strong {
    font-size: 3.2rem;
  }
}

/* ============================================================
   導入事例ロゴ（デスクトップ: 6列・5列・5列の3段）
   ============================================================ */
.brands {
  background: #fff;
  color: #000;
  padding-top: clamp(5.75rem, 10vw, 7.25rem);
}
.brands .section-title {
  color: #000;
  margin-bottom: 80px;
}

.brand-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  gap: 40px 30px;
  align-items: center;
  justify-items: center;
}
.brand-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 56px;
}
.brand-item img {
  display: block;
  width: auto;
  height: var(--brand-h);
  /* セル幅を超える横長ロゴは見切れさせず縮小（object-fit: contain で比率維持） */
  max-width: 100%;
  object-fit: contain;
  transition: transform var(--dur);
}
.brand-item img:hover { transform: scale(1.03); }

/* 各ロゴの縦横比に合わせた視覚的バランス調整（正方形系は高め、横長系は低めに正規化） */
.brand-item--aneby                  { --brand-h: 52px; --brand-w: auto; }
.brand-item--aoyamagakuin           { --brand-h: 68px; --brand-w: auto; }
.brand-item--brooksbrothers         { --brand-h: 40px; --brand-w: auto; }
.brand-item--ferris                 { --brand-h: 55px; --brand-w: auto; }
.brand-item--ginzataya              { --brand-h: 28px; --brand-w: auto; }
.brand-item--hankyu-cm              { --brand-h: 70px; --brand-w: auto; }
.brand-item--hirsch                 { --brand-h: 40px; --brand-w: auto; }
.brand-item--houseidaigaku          { --brand-h: 42px; --brand-w: auto; }
.brand-item--husqvarnazenoah        { --brand-h: 70px; --brand-w: auto; }
.brand-item--karcher                { --brand-h: 34px; --brand-w: auto; }
.brand-item--keio                   { --brand-h: 30px; --brand-w: auto; }
.brand-item--kinoshita              { --brand-h: 38px; --brand-w: auto; }
.brand-item--kinotoya               { --brand-h: 55px; --brand-w: auto; }
.brand-item--marriottosaka          { --brand-h: 60px; --brand-w: auto; }
.brand-item--meiseigakuen           { --brand-h: 80px; --brand-w: auto; }
.brand-item--mikihouse              { --brand-h: 35px; --brand-w: auto; }
.brand-item--mtg                    { --brand-h: 24px; --brand-w: auto; }
.brand-item--oisix                  { --brand-h: 23px; --brand-w: auto; }
.brand-item--riei                   { --brand-h: 40px; --brand-w: auto; }
.brand-item--saraya                 { --brand-h: 38px; --brand-w: auto; }
.brand-item--sekaibunka             { --brand-h: 63px; --brand-w: auto; }
.brand-item--sheratongrandetokyobay { --brand-h: 90px; --brand-w: auto; }
.brand-item--tamashima              { --brand-h: 26px; --brand-w: auto; }
.brand-item--theritzcarltonkyoto    { --brand-h: 100px; --brand-w: auto; }
.brand-item--tokyufudosan           { --brand-h: 30px; --brand-w: auto; }
.brand-item--toyokitchenstyle       { --brand-h: 20px; --brand-w: auto; }
.brand-item--umios                  { --brand-h: 36px; --brand-w: auto; }
.brand-item--yokumoku               { --brand-h: 36px; --brand-w: auto; }
.brand-item--yomiuri                { --brand-h: 42px; --brand-w: auto; }
.brand-item--yozemi                 { --brand-h: 32px; --brand-w: auto; }

/* 導入事例だけ登場演出を格上げ：expo-out で fade + 持ち上げ + 微縮小。
   既存 reveal の --reveal-i（出現順の連番）をそのまま使い、左上→右下へ波打たせる。
   30ロゴ＋見出し＋リード＋CTA と要素が多いため stagger は 60ms に抑え、
   グリッド最後まで約1秒以内で出し切る。reduced-motion は common.css 側で無効化済み。 */
html.js-reveal-ready .brands .reveal--children:not(.is-visible) .reveal-item {
  opacity: 0;
  transform: translateY(16px) scale(0.96);
}
html.js-reveal-ready .brands .reveal--children.is-visible .reveal-item {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--reveal-i, 0) * 0.06s);
}

.brands__lead {
  text-align: center;
  color: #000;
  margin-top: 90px;
  margin-bottom: 60px;
  font-size: 1.5rem;
}
.brands__cta { text-align: center; margin-top: 0; }
.brands__cta .btn-primary {
  min-width: min(100%, 220px);
  min-height: 52px;
  border: 1px solid #00cfff73;
  background: var(--grad-trial);
  border-radius: var(--radius-pill-lg);
  color: #fff;
  box-shadow: none;
}
.brands__cta .btn-primary:hover {
  border-color: #00cfffb3;
  background: linear-gradient(135deg, #1aa9e8 0%, #416fff 100%);
  color: #fff;
}

@media (min-width: 900px) {
  .brand-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1416px;
    gap: 40px 50px;
  }
  .brand-item { min-height: 60px; }
}

/* ============================================================
   料金プラン抜粋
   ============================================================ */
.pricing-excerpt {
  --price-check-icon: url("data:image/svg+xml,%3Csvg%20id%3D%22uuid-34c67fb1-b057-4f94-858a-a970952cd42a%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016.97%2012.73%22%3E%3Cdefs%3E%3Cstyle%3E.uuid-f4ff947f-2eaa-44ca-85e9-107de581445c%7Bfill%3A%2300cfff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22uuid-71d334b5-0b32-473b-b662-dd19554356e7%22%3E%3Crect%20class%3D%22uuid-f4ff947f-2eaa-44ca-85e9-107de581445c%22%20x%3D%22.62%22%20y%3D%224.86%22%20width%3D%223%22%20height%3D%223%22%20transform%3D%22translate(-3.88%203.36)%20rotate(-45)%22%2F%3E%3Crect%20class%3D%22uuid-f4ff947f-2eaa-44ca-85e9-107de581445c%22%20x%3D%222.74%22%20y%3D%226.99%22%20width%3D%223%22%20height%3D%223%22%20transform%3D%22translate(-4.76%205.49)%20rotate(-45)%22%2F%3E%3Crect%20class%3D%22uuid-f4ff947f-2eaa-44ca-85e9-107de581445c%22%20x%3D%224.86%22%20y%3D%229.11%22%20width%3D%223%22%20height%3D%223%22%20transform%3D%22translate(-5.64%207.61)%20rotate(-45)%22%2F%3E%3Crect%20class%3D%22uuid-f4ff947f-2eaa-44ca-85e9-107de581445c%22%20x%3D%226.99%22%20y%3D%226.99%22%20width%3D%223%22%20height%3D%223%22%20transform%3D%22translate(-3.51%208.49)%20rotate(-45)%22%2F%3E%3Crect%20class%3D%22uuid-f4ff947f-2eaa-44ca-85e9-107de581445c%22%20x%3D%229.11%22%20y%3D%224.86%22%20width%3D%223%22%20height%3D%223%22%20transform%3D%22translate(-1.39%209.36)%20rotate(-45)%22%2F%3E%3Crect%20class%3D%22uuid-f4ff947f-2eaa-44ca-85e9-107de581445c%22%20x%3D%2211.23%22%20y%3D%222.74%22%20width%3D%223%22%20height%3D%223%22%20transform%3D%22translate(.73%2010.24)%20rotate(-45)%22%2F%3E%3Crect%20class%3D%22uuid-f4ff947f-2eaa-44ca-85e9-107de581445c%22%20x%3D%2213.35%22%20y%3D%22.62%22%20width%3D%223%22%20height%3D%223%22%20transform%3D%22translate(2.85%2011.12)%20rotate(-45)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --price-button-hover-color: #3c8eef;
  background: linear-gradient(135deg, #169dda 0%, #3666ff 100%);
  color: #fff;
  padding-block: clamp(4rem, 7vw, 7rem) clamp(3.25rem, 6vw, 5rem);
}
.pricing-excerpt .container {
  max-width: var(--container-max);
}
.pricing-excerpt .section-title {
  color: #fff;
  margin-bottom: 0;
  font-size: 3rem;
  font-weight: var(--fw-medium);
  letter-spacing: .04em;
  text-shadow: 0 2px 18px #0818502e;
}

.pricing-excerpt__billing-wrap {
  text-align: center;
}
.pricing-excerpt .billing {
  position: relative;
  display: inline-flex;
  gap: 0;
  margin: 3rem auto 0;
  padding: 0;
  background: #4c4c4c;
  border: 0;
  border-radius: 9999px;
  isolation: isolate;
}
.pricing-excerpt .billing.is-billing-ready::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: var(--billing-indicator-y, 0);
  left: 0;
  width: var(--billing-indicator-w, 50%);
  height: var(--billing-indicator-h, 100%);
  border-radius: 9999px;
  background: var(--c-cyan);
  box-shadow: 0 4px 12px #05436e47;
  transform: translateX(var(--billing-indicator-x, 0));
  transition:
    transform var(--dur) var(--ease),
    width var(--dur) var(--ease);
}
.pricing-excerpt .billing button {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: .5rem 1.1rem;
  border-radius: 9999px;
  font-weight: var(--fw-bold);
  font-size: .84rem;
  color: #a6a6a6;
  transition:
    color var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.pricing-excerpt .billing button[aria-selected="true"] {
  margin: -2px;
  background: var(--c-cyan);
  color: #fff;
  box-shadow: 0 4px 12px #05436e47;
}
.pricing-excerpt .billing.is-billing-ready button[aria-selected="true"] {
  background: transparent;
  box-shadow: none;
}
.pricing-excerpt .billing .billing__save { font-size: .75rem; }

.plans {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.7rem);
  grid-template-columns: 1fr;
  max-width: 420px;
  margin: 3.2rem auto 0;
}
.plan {
  --price-button-hover-color: #2d48e0;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 365px;
  overflow: hidden;
  background: linear-gradient(135deg, #2a9bee47 0%, #2d48e0db 72%);
  border: 1px solid #2164d9;
  border-radius: var(--radius-lg);
  padding: clamp(3rem, 4vw, 4.5rem) clamp(1.5rem, 3vw, 3rem) 2rem;
}
.plan--business10 {
  background: linear-gradient(135deg, #1784d3 0%, #3b3fef 72%);
}
.plan--business30 {
  background: linear-gradient(135deg, #2a9bee47 0%, #2d48e0db 72%);
}
.plan--featured {
  --price-button-hover-color: #2960e1;
  border-color: #77afe8;
  background: linear-gradient(150deg, #1784d4, #2960e1, #3b40ee);
}
.plan__badge {
  position: absolute;
  top: 1.15rem;
  right: -2.3rem;
  width: 8.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1.75rem;
  transform: rotate(45deg);
  background: linear-gradient(90deg, #dd47d3 0%, #ff1f96 99.94%);
  color: #fff;
  white-space: nowrap;
  font-size: .72rem;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  z-index: 1;
}
.plan__name {
  position: relative;
  z-index: 1;
  font-size: 1.3125rem;
  font-weight: var(--fw-bold);
  letter-spacing: .03em;
}
.plan__name span { color: inherit; }
.plan__price {
  position: relative;
  z-index: 1;
  margin: .45rem 0 0;
  font-family: "Inter", sans-serif;
  line-height: 1.1;
}
.plan__price strong {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  font-size: 3.45rem;
  font-weight: 500;
  font-style: italic;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
}
.plan__price strong::after,
.price-subplan__amount::after {
  content: "";
  position: absolute;
  inset: -0.08em -0.2em;
  border-radius: .35em;
  background: linear-gradient(90deg, transparent, #ffffff78, transparent);
  opacity: 0;
  transform: translateX(-55%) skewX(-16deg);
  pointer-events: none;
}
.plan__price [data-monthly],
.price-subplan [data-monthly] {
  display: inline-block;
  min-width: 2.2em;
  transition:
    opacity .22s var(--ease),
    transform .22s var(--ease),
    filter .22s var(--ease),
    text-shadow .36s var(--ease);
  will-change: opacity, transform, filter;
}
.plan__price [data-monthly].is-price-out,
.price-subplan [data-monthly].is-price-out {
  animation: price-vanish .2s var(--ease) forwards;
}
.plan__price [data-monthly].is-price-in,
.price-subplan [data-monthly].is-price-in {
  animation: price-pop .58s cubic-bezier(.18, .9, .22, 1.2);
  color: #fff;
  text-shadow: 0 0 18px #7ddfffad, 0 0 34px #ffffff59;
}
.plan__price strong.is-price-active::after,
.price-subplan__amount.is-price-active::after {
  animation: price-shine .62s var(--ease);
}
.plan__price em {
  color: #ffffffeb;
  font-style: normal;
  font-size: .98rem;
  font-weight: var(--fw-bold);
}
.plan__cycle-note {
  position: relative;
  z-index: 1;
  margin-top: .55rem;
  color: #ffffffe6;
  font-size: .83rem;
  font-weight: var(--fw-bold);
}
.plan__cycle-yearly {
  display: none;
  position: relative;
  margin-left: .65em;
  color: #ffffffe6;
  font-weight: var(--fw-bold);
}
.plan__cycle-yearly::after {
  content: "";
  position: absolute;
  inset: -0.08em -0.2em;
  border-radius: .35em;
  background: linear-gradient(90deg, transparent, #ffffff78, transparent);
  opacity: 0;
  transform: translateX(-55%) skewX(-16deg);
  pointer-events: none;
}
.pricing-excerpt[data-active-cycle="yearly"] .plan__cycle-yearly {
  display: inline-block;
  animation: price-pop .58s cubic-bezier(.18, .9, .22, 1.2);
}
.pricing-excerpt[data-active-cycle="yearly"] .plan__cycle-yearly::after {
  animation: price-shine .62s var(--ease);
}
.plan__cycle-amount {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-style: italic;
  font-variant-numeric: tabular-nums;
}
.plan__features {
  position: relative;
  z-index: 1;
  margin: 3.5rem 0 1.3rem;
  display: grid;
  gap: .5rem;
}
.plan__features li {
  font-size: .82rem;
  padding-left: 1.65rem;
  position: relative;
}
.plan__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .2em;
  width: 1.05rem;
  height: .8rem;
  background: var(--price-check-icon) center / contain no-repeat;
}
.plan__capability {
  position: relative;
  z-index: 1;
  margin-top: auto;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: #2d44b5;
  color: #fff;
  font-size: .8rem;
  font-weight: var(--fw-bold);
}
.plan .btn {
  --btn-outline-invert-color: var(--price-button-hover-color);
  position: relative;
  z-index: 1;
  margin-top: .75rem;
  min-height: 42px;
  color: #fff;
  border-color: #ffffff6b;
  background: #ffffff0a;
}
.plan .btn[href*="/app/store/"] {
  background: transparent;
}
.plan .btn:hover {
  color: var(--btn-outline-invert-color);
  border-color: currentColor;
  background: #fff;
  box-shadow: none;
  transform: none;
}

.price-subplans {
  display: grid;
  gap: .3rem;
  width: min(100%, 420px);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 420px;
  margin-inline: auto;
}
.price-subplan {
  --btn-outline-invert-color: var(--price-button-hover-color);
  display: grid;
  gap: .75rem;
  align-items: center;
  padding: .9rem clamp(1.2rem, 2.5vw, 2.2rem);
  background: #ffffff1f;
  color: #fff;
}
.price-subplan p {
  font-size: 1.15rem;
  font-weight: var(--fw-bold);
}
.price-subplan strong {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  font-size: 1.05em;
}
.price-subplan__amount {
  position: relative;
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-style: italic;
  font-variant-numeric: tabular-nums;
}
.price-subplan .btn {
  min-height: 40px;
  width: min(100%, 145px);
  justify-self: center;
  color: #fff;
  border-color: #ffffff73;
  background: #ffffff0a;
}
.price-subplan .btn[href*="/app/store/"] {
  background: transparent;
}
.price-subplan .btn:hover {
  color: var(--btn-outline-invert-color);
  border-color: currentColor;
  background: #fff;
  box-shadow: none;
  transform: none;
}
.pricing-excerpt__more {
  text-align: center;
  margin-top: clamp(1.8rem, 3.6vw, 2.8rem);
}
.pricing-excerpt__more .btn {
  --btn-outline-invert-color: var(--price-button-hover-color);
  min-width: min(100%, 180px);
  min-height: 40px;
  color: #fff;
  border-color: #ffffff73;
  background: #ffffff0a;
}
.pricing-excerpt__more .btn:hover {
  color: var(--btn-outline-invert-color);
  border-color: currentColor;
  background: #fff;
  box-shadow: none;
  transform: none;
}

@media (min-width: 900px) {
  .plans {
    max-width: none;
    grid-template-columns: repeat(3, 1fr);
  }
  .price-subplans {
    width: 100%;
    max-width: none;
    grid-template-columns: 1fr 1fr;
  }
  .price-subplan {
    grid-template-columns: 1fr minmax(120px, 145px);
  }
}
@media (max-width: 767px) {
  .pricing-excerpt {
    padding-block: 3rem 3.5rem;
  }
  .pricing-excerpt .billing {
    margin-top: 1.8rem;
  }
  .pricing-excerpt .billing button {
    padding-inline: .8rem;
  }
  .plan {
    min-height: auto;
  }
}
@keyframes price-vanish {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1) rotateX(0);
  }
  100% {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(-42%) scale(.92) rotateX(60deg);
  }
}
@keyframes price-pop {
  0% {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(45%) scale(.9) rotateX(-65deg);
  }
  58% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(-9%) scale(1.08) rotateX(0);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1) rotateX(0);
  }
}
@keyframes price-shine {
  0% {
    opacity: 0;
    transform: translateX(-65%) skewX(-16deg);
  }
  35% {
    opacity: .7;
  }
  100% {
    opacity: 0;
    transform: translateX(65%) skewX(-16deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pricing-excerpt .billing button,
  .pricing-excerpt .billing.is-billing-ready::before,
  .plan__price [data-monthly],
  .price-subplan [data-monthly],
  .pricing-excerpt[data-active-cycle="yearly"] .plan__cycle-yearly,
  .pricing-excerpt[data-active-cycle="yearly"] .plan__cycle-yearly::after {
    transition: none;
    animation: none;
  }
}