/* ===== Section switches =====
   料金と事例の表示切り替えは、ここ1か所で行います（全ページ共通）。
   - 料金を隠す: 下の .js-pricing の行のコメントを外す（ナビの「料金」も一緒に消えます）
   - 事例を出す: 下の .js-cases の行を消す（掲載できる事例が決まってから）
*/
/* .js-pricing { display: none !important; } */
.js-cases { display: none !important; }

/* Overrides on top of the Webflow export. Load after the Webflow stylesheet. */

/* Mobile / tablet navigation (Webflow collapses the nav below 992px) */
@media screen and (max-width: 991px) {
  .menu-button-2 {
    border-radius: 8px;
  }

  /* Webflow painted the open button grey with a white icon on a white box,
     which made the icon vanish. Keep it visible and turn it into a close icon. */
  .menu-button-2.w--open {
    color: #1a1b1f;
    background-color: transparent;
  }

  .burger-icon {
    background-color: transparent;
    align-items: center;
    font-size: 26px;
    color: #1a1b1f;
  }

  .menu-button-2.w--open .w-icon-nav-menu:before {
    content: "\e900";
  }

  /* Dim the page behind the open menu; tapping it closes the menu */
  .w-nav-overlay {
    background-color: rgba(10, 16, 40, 0.45);
  }

  .nav-menu-wrapper[data-nav-menu-open] {
    background-color: #fff;
    box-shadow: 0 12px 24px rgba(10, 16, 40, 0.12);
  }

  .nav-menu-wrapper[data-nav-menu-open] .nav-menu-2 {
    flex-direction: column;
    align-items: stretch;
    padding: 4px 0 12px;
  }

  .nav-menu-wrapper[data-nav-menu-open] .nav-menu-2 li + li {
    border-top: 1px solid #eef0f4;
  }

  .nav-menu-wrapper[data-nav-menu-open] .nav-link-2 {
    display: block;
    margin: 0;
    padding: 16px 20px;
    text-align: left;
    font-size: 16px;
    line-height: 24px;
  }

  .nav-menu-wrapper[data-nav-menu-open] .nav-link-2.w--current {
    color: #1a3fd8;
    font-weight: 600;
  }
}

/* Language switch (replaces the globe dropdown) */
.navbar-wrapper {
  gap: 16px;
}

.navbar-wrapper .top-logo {
  margin-right: auto;
}

.navbar-wrapper .nav-menu-wrapper {
  order: 1;
}

.lang-switch {
  order: 2;
  display: inline-flex;
  flex: none;
  padding: 3px;
  border: 1px solid #dfe3ea;
  border-radius: 999px;
  background-color: #fff;
}

.lang-switch-link {
  min-width: 36px;
  padding: 4px 10px;
  border-radius: 999px;
  color: #6b7280;
  font-family: Roboto, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-align: center;
  text-decoration: none;
  transition: color 0.15s, background-color 0.15s;
}

.lang-switch-link:hover {
  color: #1a1b1f;
}

.lang-switch-link.is-active {
  color: #fff;
  background-color: var(--primary, #081baa);
}

.navbar-wrapper .menu-button-2 {
  order: 3;
}

/* Closing call to action */
.section.closing-cta {
  padding: 40px 20px 100px;
}

.closing-cta-box {
  max-width: 960px;
  margin: 0 auto;
  padding: 64px 32px;
  border-radius: 24px;
  background-image: linear-gradient(135deg, #0046ff, #002b9e 51%, #0046ff);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.closing-cta-title {
  margin: 0;
  color: #fff;
  font-family: Roboto, sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.4;
}

.closing-cta-text {
  max-width: 560px;
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  line-height: 1.8;
}

@media screen and (max-width: 767px) {
  .closing-cta-box {
    padding: 44px 20px;
    border-radius: 16px;
  }

  .closing-cta-title {
    font-size: 26px;
  }
}

/* Hero: clearer hierarchy between headline and sub-headline */
.section.hero ._32px-white-700 {
  margin-top: 12px;
  font-size: 28px;
  line-height: 1.5;
  opacity: 0.92;
}

.section.hero .text-block-5 {
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.8;
}

@media screen and (max-width: 767px) {
  .section.hero ._32px-white-700 {
    font-size: 20px;
  }
}

/* Service card titles wrap mid-word at tablet widths */
#service ._28px_black_700 {
  font-size: 24px;
  line-height: 1.4;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

@media screen and (max-width: 479px) {
  .section.hero ._50px-white-700 {
    font-size: 34px;
    line-height: 1.45;
  }

  .section.hero .white-translucent-bg-badge {
    align-self: center;
  }
}

.sp-only {
  display: none;
}

@media screen and (max-width: 479px) {
  .sp-only {
    display: inline;
  }
}

/* Cards were sized by their text, so shorter copy made them uneven */
#solutions .container > .white-bg-blue-hover,
#why-choose-us .container > .blue-bg {
  align-self: stretch;
}


/* Global nav: CTA button and anchor offset */
.nav-menu-2 { gap: 4px; }

.nav-cta {
  display: inline-block;
  margin-left: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background-color: var(--primary, #081baa);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
}

.nav-cta:hover { background-color: #0b3df0; color: #fff; }

.nav-link-2 { white-space: nowrap; }

.lx section[id] { scroll-margin-top: 16px; }

@media screen and (max-width: 1199px) and (min-width: 992px) {
  .nav-link-2 { margin-left: 0; margin-right: 0; padding-left: 8px; padding-right: 8px; font-size: 15px; }
}

@media screen and (max-width: 991px) {
  .nav-menu-wrapper[data-nav-menu-open] .nav-cta-item { padding: 12px 20px 4px; border-top: 0 !important; }
  .nav-menu-wrapper[data-nav-menu-open] .nav-cta { display: block; margin: 0; padding: 14px; text-align: center; }
}


/* ===== Homepage ===== */
.lx {
  --lx-blue: #0b3df0;
  --lx-blue-soft: #e8eeff;
  --lx-ink: #14171a;
  --lx-muted: #6b7280;
  --lx-line: #e6e8ee;
  --lx-soft: #f7f8fb;
  --lx-red: #d92d20;
  --lx-green: #0f9f6e;
  --lx-amber: #b45309;
  color: var(--lx-ink);
  font-family: "Open Sans", "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.7;
}

.lx p, .lx figure, .lx ul { margin: 0; }
.lx ul { padding: 0; list-style: none; }
.lx h1, .lx h2, .lx h3 { word-break: keep-all; overflow-wrap: anywhere; }

.lx-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.lx-narrow { max-width: 760px; }
.lx-center { text-align: center; }
.lx-section { padding: 112px 0; }
.lx-soft { background-color: var(--lx-soft); }

/* Two-tone headings */
.lx-title, .lx-h2 {
  margin: 0;
  font-family: Roboto, "Hiragino Sans", sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.lx-title span, .lx-h2 span { display: block; color: #9aa1ad; }

.lx-title { font-size: 52px; line-height: 1.3; }
.lx-h2 { margin-bottom: 56px; font-size: 36px; line-height: 1.35; text-align: center; }
.lx-h2.lx-left { margin-bottom: 32px; text-align: left; }

.lx-lead { max-width: 760px; margin: 24px auto 32px !important; color: var(--lx-muted); font-size: 18px; }

.lx-btn {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 12px;
  background-color: var(--lx-blue);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(11, 61, 240, 0.25);
  transition: transform 0.15s, box-shadow 0.15s;
}

.lx-btn:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 12px 26px rgba(11, 61, 240, 0.3); }

.lx a:focus-visible, .lx summary:focus-visible { outline: 3px solid #ffbf47; outline-offset: 3px; }

.lx-ticks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin-top: 20px !important; }
.lx-ticks li { color: var(--lx-muted); font-size: 14px; }
.lx-ticks li::before { content: "✓"; margin-right: 6px; color: var(--lx-green); font-weight: 700; }

.lx-caption { margin-top: 14px !important; color: #a0a6b1; font-size: 12px; text-align: center; }
.lx-note { max-width: 680px; margin: 32px auto 0 !important; color: var(--lx-muted); font-size: 14px; text-align: center; }
.lx-pc { display: inline; }

.lx-tbc {
  display: inline-block;
  padding: 0 6px;
  border-radius: 4px;
  background-color: #fff3cd;
  color: #7a4d00;
  font-size: 0.85em;
  font-weight: 700;
}

/* Hero */
.lx-hero {
  padding: 96px 0 88px;
  background:
    radial-gradient(60% 50% at 50% 100%, rgba(11, 61, 240, 0.10), transparent 70%),
    linear-gradient(#fff, #f6f8ff);
}

.lx-hero-app { margin-top: 64px; }

/* App window mock */
.lx-window {
  overflow: hidden;
  border: 1px solid var(--lx-line);
  border-radius: 16px;
  background-color: #fff;
  box-shadow: 0 30px 60px rgba(20, 30, 70, 0.12), 0 2px 6px rgba(20, 30, 70, 0.06);
  text-align: left;
}

.lx-window-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--lx-line);
  background-color: #fafbfc;
}

.lx-window-bar i { width: 10px; height: 10px; border-radius: 50%; background-color: #e2e5ea; }
.lx-window-bar span { margin-left: 10px; color: var(--lx-muted); font-size: 12px; }

.lx-app { display: grid; grid-template-columns: 180px 1fr; min-height: 380px; }

.lx-app-side { display: flex; flex-direction: column; gap: 2px; padding: 18px 12px; border-right: 1px solid var(--lx-line); background-color: #fbfbfd; }
.lx-app-side b { margin: 0 8px 14px; font-family: "Droid Serif", serif; font-size: 16px; }
.lx-app-side span { padding: 7px 10px; border-radius: 8px; color: var(--lx-muted); font-size: 13px; }
.lx-app-side .is-on { background-color: var(--lx-blue-soft); color: var(--lx-blue); font-weight: 700; }

.lx-app-main { padding: 22px 24px; }
.lx-app-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.lx-app-head h2 { margin: 0; font-size: 18px; font-weight: 700; }

.lx-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.lx-kpis div { padding: 12px 14px; border: 1px solid var(--lx-line); border-radius: 10px; }
.lx-kpis small { display: block; color: var(--lx-muted); font-size: 11px; }
.lx-kpis b { font-size: 18px; }

.lx-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lx-table th { padding: 8px 10px; border-bottom: 1px solid var(--lx-line); color: var(--lx-muted); font-size: 11px; font-weight: 600; text-align: left; }
.lx-table td { padding: 11px 10px; border-bottom: 1px solid #f0f1f4; white-space: nowrap; }
.lx-table tr:last-child td { border-bottom: 0; }
.lx-num { text-align: right !important; font-variant-numeric: tabular-nums; }

.lx-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background-color: #f0f1f4;
  color: var(--lx-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.8;
  white-space: nowrap;
}

.lx-chip-blue { background-color: var(--lx-blue-soft); color: var(--lx-blue); }
.lx-chip-green { background-color: #e3f6ee; color: var(--lx-green); }
.lx-chip-amber { background-color: #fdf0dc; color: var(--lx-amber); }

/* Problem panels */
.lx-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.lx-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.lx-panel {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border-radius: 20px;
  background: linear-gradient(160deg, #f7f9ff, #fdf6f6);
}

.lx-panel h3 { margin: 0 0 4px; font-size: 20px; font-weight: 700; line-height: 1.45; }
.lx-panel > p { margin-bottom: 24px !important; color: var(--lx-muted); font-size: 15px; }

.lx-mock {
  margin-top: auto;
  padding: 16px;
  border: 1px solid var(--lx-line);
  border-radius: 14px;
  background-color: #fff;
  box-shadow: 0 10px 24px rgba(20, 30, 70, 0.06);
  font-size: 13px;
}

.lx-mock-label { margin-bottom: 10px !important; color: var(--lx-muted); font-size: 12px; font-weight: 700; }

.lx-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 4px;
  border-bottom: 1px solid #f0f1f4;
}

.lx-row:last-child { border-bottom: 0; }
.lx-row span { flex: 1; }
.lx-row small { color: var(--lx-muted); font-size: 11px; }
.lx-row b { font-variant-numeric: tabular-nums; }
.lx-tool { color: var(--lx-muted); }

.lx-row-bad b { padding: 0 6px; border: 2px solid var(--lx-red); border-radius: 999px; color: var(--lx-red); }
.lx-row-bad em { color: var(--lx-red); font-size: 11px; font-style: normal; font-weight: 700; }
.lx-row-total { margin-top: 4px; border-top: 1px solid var(--lx-line); font-weight: 700; }
.lx-row-total b { color: var(--lx-red); font-size: 15px; }

.lx-paper { background: repeating-linear-gradient(#fffdf7, #fffdf7 27px, #efe9da 28px); }
.lx-paper-head { display: flex; justify-content: space-between; margin-bottom: 8px; }
.lx-paper-head span { color: var(--lx-muted); font-size: 12px; }
.lx-hand { font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: 14px; line-height: 28px; transform: rotate(-0.6deg); }

.lx-stamp {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 10px;
  border: 2px solid var(--lx-red);
  border-radius: 6px;
  color: var(--lx-red);
  font-size: 12px;
  font-weight: 700;
  transform: rotate(-2deg);
}

.lx-chat { display: flex; flex-direction: column; gap: 8px; }

.lx-msg {
  align-self: flex-start;
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 14px 14px 14px 4px;
  background-color: #f0f1f4;
}

.lx-msg small { margin-left: 8px; color: #a0a6b1; font-size: 10px; }
.lx-msg-me { align-self: flex-end; border-radius: 14px 14px 4px 14px; background-color: var(--lx-blue-soft); }

/* Steps */
.lx-step .lx-mock-tall { min-height: 180px; margin-bottom: 24px; }

.lx-step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-bottom: 10px;
  border-radius: 8px;
  background-color: var(--lx-blue);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.lx-step h3 { margin: 0 0 6px; font-size: 19px; font-weight: 700; line-height: 1.45; }
.lx-step > p { color: var(--lx-muted); font-size: 15px; }

.lx-notes li { padding: 7px 0 7px 16px; border-bottom: 1px dashed var(--lx-line); position: relative; }
.lx-notes li::before { content: "・"; position: absolute; left: 0; color: var(--lx-blue); }

.lx-checks { margin-bottom: 12px !important; }
.lx-checks li { padding: 7px 0 7px 28px; position: relative; }

.lx-checks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #e3f6ee;
  color: var(--lx-green);
  font-size: 11px;
  font-weight: 700;
}

.lx-log li { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f0f1f4; }
.lx-log li:last-child { border-bottom: 0; }
.lx-log small { color: var(--lx-blue); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Compare */
.lx-compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.lx-col { padding: 28px; border: 1px solid var(--lx-line); border-radius: 20px; }
.lx-col h3 { margin: 0 0 14px; color: var(--lx-muted); font-size: 16px; font-weight: 700; }
.lx-col li { padding: 10px 0 10px 22px; border-top: 1px solid #f0f1f4; position: relative; color: var(--lx-muted); font-size: 15px; line-height: 1.6; }
.lx-col li::before { content: "–"; position: absolute; left: 2px; color: #c2c7d0; }

.lx-col-us { border: 2px solid var(--lx-blue); box-shadow: 0 20px 40px rgba(11, 61, 240, 0.12); }
.lx-col-us h3 { color: var(--lx-blue); }
.lx-col-us li { color: var(--lx-ink); font-weight: 700; }
.lx-col-us li::before { content: "✓"; color: var(--lx-green); }

/* Use cases */
.lx-case { padding: 28px; border: 1px solid var(--lx-line); border-radius: 20px; background-color: #fff; }
.lx-case h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
.lx-case p { color: var(--lx-muted); font-size: 15px; }
.lx-case-main { border: 2px solid var(--lx-blue); }
.lx-case-main h3 { color: var(--lx-blue); }

/* Why */
.lx-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; }
.lx-points li { padding: 16px 0; border-top: 1px solid var(--lx-line); color: var(--lx-muted); font-size: 15px; }
.lx-points b { display: block; color: var(--lx-ink); font-size: 17px; }
.lx-mock-card { max-width: 360px; justify-self: center; width: 100%; padding: 24px; font-size: 14px; }

/* Pricing */
.lx-price { padding: 28px; border: 1px solid var(--lx-line); border-radius: 20px; background-color: #fff; }
.lx-price h3 { margin: 0 0 10px; color: var(--lx-muted); font-size: 15px; font-weight: 700; }
.lx-price b { display: block; margin-bottom: 10px; font-size: 22px; }
.lx-price p { color: var(--lx-muted); font-size: 14px; }

/* FAQ */
.lx-faq { display: grid; gap: 10px; }
.lx-faq details { border: 1px solid var(--lx-line); border-radius: 14px; background-color: #fff; }

.lx-faq summary {
  position: relative;
  padding: 18px 48px 18px 20px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.lx-faq summary::-webkit-details-marker { display: none; }

.lx-faq summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--lx-blue);
  font-size: 22px;
}

.lx-faq details[open] summary::after { content: "−"; }
.lx-faq details p { padding: 0 20px 20px; color: var(--lx-muted); font-size: 15px; }

/* Final CTA */
.lx-final {
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(11, 61, 240, 0.10), transparent 70%),
    var(--lx-soft);
}

.lx-final .lx-h2 { margin-bottom: 0; }

/* Tablet */
@media screen and (max-width: 991px) {
  .lx-grid-3, .lx-compare { grid-template-columns: 1fr; }
  .lx-split { grid-template-columns: 1fr; gap: 40px; }
  .lx-app { grid-template-columns: 1fr; }
  .lx-app-side { display: none; }
}

/* Phone */
@media screen and (max-width: 767px) {
  .lx-section { padding: 72px 0; }
  .lx-hero { padding: 56px 0 56px; }
  .lx-title { font-size: 32px; }
  .lx-h2 { margin-bottom: 36px; font-size: 25px; }
  .lx-lead { font-size: 16px; }
  .lx-pc { display: none; }
  .lx-grid-2 { grid-template-columns: 1fr; }
  .lx-panel { padding: 24px; }
  .lx-hero-app { margin-top: 44px; }
  .lx-app-main { padding: 16px; }
  .lx-kpis { grid-template-columns: repeat(2, 1fr); }
  .lx-kpis div:last-child { display: none; }
  .lx-hide-sp { display: none; }
  .lx-table td { padding: 10px 6px; }
  .lx-btn { display: block; }
}

/* ===== Hub and new-business additions ===== */
.lx-eyebrow {
  display: inline-block;
  margin-bottom: 18px !important;
  padding: 4px 14px;
  border-radius: 999px;
  background-color: var(--lx-blue-soft);
  color: var(--lx-blue);
  font-size: 13px;
  font-weight: 700;
}

.lx-hero-hub { padding-bottom: 72px; }

/* Service cards on the hub */
.lx-services-section { padding-top: 72px; }

.lx-service {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border: 1px solid var(--lx-line);
  border-radius: 20px;
  background: linear-gradient(160deg, #f7f9ff, #ffffff 60%);
  color: var(--lx-ink);
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.lx-service:hover {
  border-color: var(--lx-blue);
  box-shadow: 0 20px 40px rgba(11, 61, 240, 0.12);
  transform: translateY(-2px);
  color: var(--lx-ink);
}

.lx-service-no { color: var(--lx-blue); font-size: 13px; font-weight: 700; }
.lx-service h3 { margin: 10px 0 8px; font-family: Roboto, "Hiragino Sans", sans-serif; font-size: 26px; font-weight: 700; line-height: 1.4; }
.lx-service > p { margin-bottom: 24px !important; color: var(--lx-muted); font-size: 15px; }
.lx-service-mock { margin-top: auto; margin-bottom: 20px; }
.lx-service-mock .lx-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-service-more { color: var(--lx-blue); font-weight: 700; }

/* New-business hero: chart + hypothesis board */
.lx-split-app { display: grid; grid-template-columns: 1fr 1.2fr; gap: 16px; }

.lx-bars { padding: 14px; border: 1px solid var(--lx-line); border-radius: 10px; }
.lx-bars small { color: var(--lx-muted); font-size: 11px; }
.lx-bars-row { display: flex; align-items: flex-end; gap: 14px; height: 120px; margin-top: 10px; padding: 0 6px; border-bottom: 1px solid var(--lx-line); }
.lx-bars-row i { flex: 1; border-radius: 6px 6px 0 0; background: linear-gradient(#5b84ff, var(--lx-blue)); }
.lx-bars-x { display: flex; gap: 14px; padding: 6px 6px 0; }
.lx-bars-x span { flex: 1; color: var(--lx-muted); font-size: 10px; text-align: center; }

.lx-hypo { padding: 6px 14px !important; border: 1px solid var(--lx-line); border-radius: 10px; }
.lx-hypo li { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid #f0f1f4; font-size: 13px; }
.lx-hypo li:last-child { border-bottom: 0; }
.lx-hypo span { flex: 1; }
.lx-hypo em { font-style: normal; }

/* New-business problem mocks */
.lx-bad { padding: 0 6px; border: 2px solid var(--lx-red); border-radius: 999px; color: var(--lx-red); }

.lx-timeline-mock { display: flex; gap: 4px; margin: 4px 0 12px; font-size: 11px; font-weight: 700; }
.lx-timeline-mock span { padding: 8px 6px; border-radius: 6px; background-color: #eef1f6; color: var(--lx-muted); text-align: center; white-space: nowrap; }
.lx-timeline-mock .lx-tl-end { flex: 1; background-color: var(--lx-blue-soft); color: var(--lx-blue); }
.lx-flag { color: var(--lx-red); font-size: 12px; font-weight: 700; }
.lx-flag::before { content: "▲ "; }

/* Four-step process */
.lx-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.lx-phone-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; }

.lx-phone {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 128px;
  padding: 14px 10px;
  border: 3px solid #d7dbe3;
  border-radius: 18px;
  font-size: 11px;
}

.lx-phone b { font-size: 12px; }
.lx-phone span { padding: 6px 8px; border-radius: 6px; background-color: #f0f1f4; }
.lx-phone i { margin-top: 2px; padding: 6px; border-radius: 6px; background-color: var(--lx-blue); color: #fff; font-style: normal; font-weight: 700; text-align: center; }

.lx-narrow-grid { max-width: 760px; margin: 0 auto; }

@media screen and (max-width: 991px) {
  .lx-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .lx-split-app { grid-template-columns: 1fr; }
}

@media screen and (max-width: 767px) {
  .lx-grid-4 { grid-template-columns: 1fr; }
  .lx-service { padding: 24px; }
  .lx-service h3 { font-size: 22px; }
  .lx-bars { display: none; }
  .lx-app { min-height: 0; }
}

/* ===== Interactive mockups ===== */
.lx-try {
  margin-left: auto;
  padding: 2px 10px;
  border-radius: 999px;
  background-color: var(--lx-blue-soft);
  color: var(--lx-blue);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.lx-app { min-height: 430px; }
.lx-app-main { position: relative; }

.lx-app-side button {
  position: relative;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--lx-muted);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.lx-app-side button:hover { background-color: #f0f2f7; color: var(--lx-ink); }
.lx-app-side button.is-on { background-color: var(--lx-blue-soft); color: var(--lx-blue); font-weight: 700; }

.lx-app-side button i {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background-color: var(--lx-red);
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.lx-app button:focus-visible, .lx-app [tabindex]:focus-visible, .lx-phone button:focus-visible {
  outline: 2px solid var(--lx-blue);
  outline-offset: 2px;
}

button.lx-chip { border: 0; font-family: inherit; cursor: pointer; }
button.lx-chip:disabled { cursor: default; }

.lx-app-muted { color: var(--lx-muted); font-size: 12px; }
.lx-app-sub { margin: 4px 0 8px !important; color: var(--lx-muted); font-size: 12px; font-weight: 700; }
.lx-app-note { margin-top: 12px !important; color: var(--lx-muted); font-size: 12px; }

.lx-app-btn {
  margin-top: 16px;
  padding: 10px 18px;
  border: 0;
  border-radius: 10px;
  background-color: var(--lx-blue);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.lx-app-btn:hover { background-color: #0a33cc; }
.lx-app-btn:disabled { background-color: #c7cede; cursor: default; }

/* Deals */
[data-open-deal] { cursor: pointer; }
[data-open-deal]:hover td { background-color: #f7f9ff; }
tr.is-new td { animation: lx-flash 1.6s ease; }
@keyframes lx-flash { from { background-color: #e6edff; } to { background-color: transparent; } }

.lx-back { padding: 4px 0; border: 0; background: none; color: var(--lx-blue); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.lx-detail-title { margin: 4px 0 16px; font-size: 20px; font-weight: 700; }

.lx-stepper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; }

.lx-stepper li {
  padding: 8px 4px;
  border-radius: 8px;
  background-color: #f0f1f4;
  color: var(--lx-muted);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.lx-stepper li.is-done { background-color: #e3f6ee; color: var(--lx-green); }
.lx-stepper li.is-now { background-color: var(--lx-blue); color: #fff; }

.lx-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lx-detail-grid div { padding: 12px 14px; border: 1px solid var(--lx-line); border-radius: 10px; }
.lx-detail-grid small { display: block; color: var(--lx-muted); font-size: 11px; }

/* Home todo */
.lx-todo li { padding: 9px 0; border-bottom: 1px solid #f0f1f4; font-size: 13px; }
.lx-todo label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.lx-todo input { width: 16px; height: 16px; accent-color: var(--lx-blue); }
.lx-todo input:checked + * , .lx-todo label:has(input:checked) { color: #a0a6b1; text-decoration: line-through; }

/* Quote */
.lx-qty { display: inline-flex; align-items: center; gap: 8px; }

.lx-qty button {
  width: 24px;
  height: 24px;
  border: 1px solid var(--lx-line);
  border-radius: 6px;
  background-color: #fff;
  color: var(--lx-ink);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.lx-qty button:hover { border-color: var(--lx-blue); color: var(--lx-blue); }
.lx-qty b { min-width: 16px; text-align: center; }

.lx-total { display: flex; justify-content: space-between; margin-top: 8px; padding: 12px 10px; border-radius: 10px; background-color: var(--lx-soft); font-size: 14px; }
.lx-total b { font-size: 18px; font-variant-numeric: tabular-nums; }

/* Feeds (daily reports, bookings) */
.lx-feed li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f0f1f4; font-size: 13px; }
.lx-feed li:last-child { border-bottom: 0; }
.lx-feed li > div { flex: 1; min-width: 0; }
.lx-feed small { display: block; color: var(--lx-muted); font-size: 11px; }
.lx-feed p { margin-top: 2px !important; color: var(--lx-ink); }
.lx-feed .is-wait b { color: var(--lx-muted); }

.lx-avatar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--lx-blue-soft);
  color: var(--lx-blue);
  font-size: 12px;
  font-weight: 700;
}

/* Report bars */
.lx-bars-wide { margin-top: 4px; }

/* Segmented filter */
.lx-seg { display: inline-flex; padding: 2px; border-radius: 8px; background-color: #f0f1f4; }
.lx-seg button { padding: 4px 12px; border: 0; border-radius: 6px; background: none; color: var(--lx-muted); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.lx-seg button.is-on { background-color: #fff; color: var(--lx-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }

/* Form fields */
.lx-field { display: block; margin-bottom: 10px; }
.lx-field small { display: block; margin-bottom: 4px; color: var(--lx-muted); font-size: 11px; font-weight: 700; }

.lx-field input, .lx-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1px solid var(--lx-line);
  border-radius: 8px;
  color: var(--lx-ink);
  font: inherit;
  font-size: 13px;
  resize: none;
}

.lx-field input:focus, .lx-field textarea:focus { border-color: var(--lx-blue); outline: none; }

/* Switches */
.lx-switches li { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid #f0f1f4; font-size: 14px; }
.lx-switches span { flex: 1; }
.lx-switches small { display: block; color: var(--lx-muted); font-size: 11px; }

.lx-switch {
  position: relative;
  width: 40px;
  height: 24px;
  flex: none;
  border: 0;
  border-radius: 999px;
  background-color: #d4d8e1;
  cursor: pointer;
  transition: background-color 0.15s;
}

.lx-switch::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s;
}

.lx-switch.is-on { background-color: var(--lx-green); }
.lx-switch.is-on::after { transform: translateX(16px); }

/* Toast */
.lx-toast {
  position: absolute;
  left: 50%;
  bottom: 16px;
  padding: 10px 16px;
  border-radius: 10px;
  background-color: var(--lx-ink);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity 0.2s, transform 0.2s;
}

.lx-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.lx-toast::before { content: "✓ "; color: #6ee7b7; }

/* Phone booking prototype */
.lx-phone button {
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background-color: #f0f1f4;
  color: var(--lx-ink);
  font: inherit;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}

.lx-phone button.is-on { border-color: var(--lx-blue); background-color: var(--lx-blue-soft); color: var(--lx-blue); font-weight: 700; }

.lx-phone .lx-phone-cta {
  margin-top: 2px;
  background-color: var(--lx-blue);
  color: #fff;
  font-weight: 700;
  text-align: center;
}

.lx-phone .lx-phone-cta:disabled { background-color: #c7cede; cursor: default; }
.lx-phone-done { display: none; }
.lx-phone.is-done > :not(.lx-phone-done) { display: none; }

.lx-phone.is-done .lx-phone-done {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 18px 0;
  color: var(--lx-green);
  font-weight: 700;
  text-align: center;
}

.lx-phone.is-done .lx-phone-done::before { content: "✓"; font-size: 22px; }
.lx-phone .lx-phone-done button { background: none; color: var(--lx-blue); text-align: center; }

/* Tablet and phone: sidebar becomes a scrollable tab bar inside the mock */
@media screen and (max-width: 991px) {
  .lx-app .lx-app-side {
    display: flex;
    flex-direction: row;
    gap: 4px;
    padding: 8px 10px;
    border-right: 0;
    border-bottom: 1px solid var(--lx-line);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .lx-app .lx-app-side::-webkit-scrollbar { display: none; }
  .lx-app .lx-app-side b { display: none; }
  .lx-app-side button { flex: none; white-space: nowrap; }
  .lx-app-side button i { position: static; display: inline-block; margin-left: 4px; transform: none; }
}

@media screen and (max-width: 767px) {
  .lx-app { min-height: 0; }
  .lx-try { display: none; }
  .lx-detail-grid { grid-template-columns: repeat(2, 1fr); }
  .lx-detail-grid div:last-child { display: none; }
  .lx-toast { white-space: normal; width: max-content; max-width: 90%; text-align: center; }
}

@media screen and (max-width: 767px) {
  .lx-bars.lx-bars-wide { display: block; }
}

/* ===== Mockup refinement: calm, credible operations software ===== */
.lx-window {
  --mk-canvas: #fcfcfb;
  --mk-side: #f6f6f4;
  --mk-hair: rgba(20, 23, 26, 0.08);
  --mk-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  border: 1px solid var(--mk-hair);
  border-radius: 14px;
  background-color: var(--mk-canvas);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 2px 4px rgba(16, 24, 40, 0.04),
    0 28px 56px -16px rgba(16, 24, 40, 0.20);
}

.lx-window-bar { height: 40px; box-sizing: border-box; padding: 0 14px; background-color: #f3f3f1; border-bottom-color: var(--mk-hair); }
.lx-window-bar i { width: 9px; height: 9px; background-color: #d9d9d5; }

.lx-url {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 !important;
  padding: 3px 14px;
  border-radius: 6px;
  background-color: #fff;
  border: 1px solid var(--mk-hair);
  color: #8a9099 !important;
  font-family: var(--mk-mono);
  font-size: 11px !important;
  letter-spacing: 0.01em;
}

.lx-window-bar { position: relative; }

/* Fixed height so switching views never shifts the page */
.lx-app { height: 452px; min-height: 0; }
.lx-app-main { overflow: hidden; padding: 24px 28px; background-color: var(--mk-canvas); }

/* Sidebar: quiet, indicator-line selection */
.lx-app .lx-app-side { position: relative; width: auto; padding: 16px 10px; background-color: var(--mk-side); border-right-color: var(--mk-hair); }

.lx-app-side b {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 8px 18px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 700;
  color: var(--lx-ink);
}

.lx-org-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background-color: var(--lx-ink);
  color: #fff;
  font-family: var(--mk-mono);
  font-size: 11px;
}

.lx-app-side button { padding: 8px 12px; border-radius: 6px; color: #5d636d; }
.lx-app-side button:hover { background-color: rgba(20, 23, 26, 0.04); }

.lx-app-side button.is-on {
  background-color: #fff;
  color: var(--lx-ink);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 0 0 1px var(--mk-hair);
}

.lx-app-side button.is-on::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background-color: var(--lx-blue);
}

/* Headings and numbers */
.lx-app-head h2 { font-size: 17px; letter-spacing: 0.01em; }

.lx-kpis div { padding: 12px 14px; border-color: var(--mk-hair); border-radius: 10px; background-color: #fff; }
.lx-kpis small { font-size: 11px; letter-spacing: 0.02em; }
.lx-kpis b, .lx-detail-grid b, .lx-total b { font-family: var(--mk-mono); font-weight: 600; letter-spacing: -0.01em; }
.lx-kpis b { display: block; margin-top: 2px; font-size: 19px; }

.lx-delta { display: block; margin-top: 2px; color: var(--lx-green); font-family: var(--mk-mono); font-size: 10.5px; font-style: normal; }
.lx-delta-flat { color: #8a9099; }

.lx-app .lx-num { font-family: var(--mk-mono); font-size: 12.5px; }

.lx-app .lx-table th {
  padding: 8px 10px;
  border-bottom-color: var(--mk-hair);
  color: #8a9099;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.lx-app .lx-table td { padding: 10px; border-bottom-color: rgba(20, 23, 26, 0.05); }
[data-open-deal]:hover td { background-color: #f5f7fc; }

/* Status: dot + label instead of filled pills */
.lx-app span.lx-chip, .lx-app em.lx-chip, .lx-app button.lx-chip:disabled, .lx-app [data-detail-chip] {
  padding: 0;
  background: none !important;
  color: #5d636d;
  font-weight: 600;
}

.lx-app span.lx-chip::before, .lx-app em.lx-chip::before, .lx-app button.lx-chip:disabled::before, .lx-app [data-action="hypo"]::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background-color: #b4b9c2;
  vertical-align: 1px;
}

.lx-app .lx-chip-blue::before { background-color: var(--lx-blue) !important; }
.lx-app .lx-chip-amber::before { background-color: #d97706 !important; }
.lx-app .lx-chip-green::before { background-color: var(--lx-green) !important; }
.lx-app span.lx-chip-green, .lx-app button.lx-chip-green:disabled { color: var(--lx-green); }

/* Action buttons inside the app: hairline, quiet */
.lx-app button.lx-chip:not(:disabled) {
  padding: 3px 10px;
  border: 1px solid rgba(20, 23, 26, 0.14);
  border-radius: 6px;
  background-color: #fff !important;
  color: var(--lx-ink);
  font-weight: 600;
  transition: border-color 0.15s, background-color 0.15s;
}

.lx-app button.lx-chip:not(:disabled):hover { border-color: var(--lx-blue); color: var(--lx-blue); }
.lx-app button.lx-chip-blue:not(:disabled) { border-color: rgba(11, 61, 240, 0.35); color: var(--lx-blue); }

.lx-app-btn { padding: 9px 16px; border-radius: 8px; box-shadow: 0 1px 2px rgba(11, 61, 240, 0.25); }

.lx-stepper li { border-radius: 6px; background-color: #f1f1ef; font-size: 11.5px; }
.lx-detail-grid div, .lx-bars, .lx-hypo, .lx-mock { border-color: var(--mk-hair); }
.lx-total { background-color: #f3f3f1; }
.lx-total b.is-bump { animation: lx-bump 0.5s ease; }
@keyframes lx-bump { 0% { color: var(--lx-blue); } 100% { color: var(--lx-ink); } }

.lx-bars-row i { background: linear-gradient(#7d9bff, var(--lx-blue)); opacity: 0.9; }

/* Panel transition */
/* No fill-mode: a lingering transform would trap the absolutely positioned PDF overlay */
[data-panel].is-enter, [data-detail].is-enter { animation: lx-enter 0.28s ease; }
@keyframes lx-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.lx-toast { background-color: rgba(20, 23, 26, 0.92); backdrop-filter: blur(4px); font-weight: 600; bottom: 52px; }

/* ===== Autoplay demo: cursor and caption ===== */
.lx-demo-host { position: relative; }

.lx-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  width: 20px;
  height: 22px;
  opacity: 0;
  pointer-events: none;
  transform: translate(60%, 60%);
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s;
  filter: drop-shadow(0 2px 3px rgba(16, 24, 40, 0.25));
}

.lx-cursor.is-on { opacity: 1; }
.lx-cursor.is-paused { opacity: 0.35; }

.lx-cursor::after {
  content: "";
  position: absolute;
  left: -9px;
  top: -9px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--lx-blue);
  opacity: 0;
}

.lx-cursor.is-click::after { animation: lx-ripple 0.5s ease-out; }
@keyframes lx-ripple { from { opacity: 0.8; transform: scale(0.4); } to { opacity: 0; transform: scale(1.4); } }

.lx-demo-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 16px;
  border-top: 1px solid var(--mk-hair);
  background-color: rgba(252, 252, 251, 0.94);
  backdrop-filter: blur(6px);
  font-size: 12px;
  font-weight: 600;
  color: var(--lx-ink);
}

.lx-demo-dot { width: 7px; height: 7px; border-radius: 50%; background-color: #b4b9c2; }
.is-demo .lx-demo-dot { background-color: var(--lx-blue); animation: lx-pulse 1.6s ease-in-out infinite; }
@keyframes lx-pulse { 50% { opacity: 0.3; } }
.lx-demo-hint { margin-left: auto; color: #8a9099; font-weight: 500; }
.lx-demo-host:not(.is-demo) .lx-demo-hint { display: none; }

/* Leave room for the caption bar */
.lx-app { padding-bottom: 38px; box-sizing: content-box; }
.lx-try { display: none; }

@media screen and (max-width: 991px) {
  .lx-app { height: 520px; grid-template-rows: auto 1fr; }
  .lx-app .lx-app-side { padding: 8px 10px; border-bottom-color: var(--mk-hair); }
  .lx-app-side button.is-on::before { left: 12px; right: 12px; top: auto; bottom: 0; width: auto; height: 2px; }
  .lx-url { display: none; }
}

@media screen and (max-width: 767px) {
  .lx-app { height: 500px; }
  .lx-app-main { padding: 16px; }
  .lx-demo-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lx-cursor { display: none; }
  [data-panel].is-enter, [data-detail].is-enter { animation: none; }
}

.lx-stepper li.is-now { background-color: #fff; color: var(--lx-blue); box-shadow: inset 0 0 0 1.5px var(--lx-blue); }
.lx-stepper li.is-done { background-color: #eef6f2; }

/* New-business problem mocks: vibe-coded prototypes */
.lx-mini-form { display: grid; gap: 6px; }
.lx-mini-form span { padding: 7px 10px; border: 1px solid var(--lx-line); border-radius: 6px; color: #a0a6b1; font-size: 12px; }
.lx-mini-form i { padding: 7px; border-radius: 6px; background-color: var(--lx-ink); color: #fff; font-size: 12px; font-style: normal; font-weight: 700; text-align: center; }
.lx-err { margin-top: 10px !important; padding: 8px 10px; border-radius: 6px; background-color: #fdecea; color: var(--lx-red); font-size: 12px; font-weight: 700; }
.lx-err::before { content: "⚠ "; }
.lx-msg-bad { background-color: #fdecea !important; color: var(--lx-red); font-weight: 600; }
.lx-q { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background-color: #fdf0dc; color: #b45309; font-size: 12px; }

.lx-grid-4 .lx-mock-tall { height: 232px; box-sizing: border-box; }

/* ===== PDF-looking documents (quote output and received invoice) ===== */
.lx-paper-doc {
  position: relative;
  box-sizing: border-box;
  padding: 24px 28px;
  border-radius: 2px;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 8px 24px rgba(16, 24, 40, 0.12);
  color: #23272c;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 10.5px;
  line-height: 1.6;
}

.lx-paper-doc header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
.lx-paper-doc h4 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: 0.35em; }
.lx-paper-doc header span { color: #6b7280; font-size: 9.5px; text-align: right; }
.lx-doc-parties { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.lx-doc-parties p { margin: 0; }
.lx-doc-parties b { font-size: 11.5px; border-bottom: 1px solid #23272c; }
.lx-doc-from { position: relative; padding-right: 40px; text-align: right; }

.lx-doc-stamp {
  position: absolute;
  right: 0;
  top: -2px;
  width: 34px;
  height: 34px;
  border: 1.5px solid #c8372d;
  border-radius: 3px;
  color: #c8372d;
  font-size: 8.5px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-4deg);
  opacity: 0.85;
}

.lx-doc-total { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 10px !important; padding: 6px 10px; background-color: #f3f3f1; }
.lx-doc-total b { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 15px; }

.lx-paper-doc table { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.lx-paper-doc th { padding: 4px 6px; border-bottom: 1px solid #23272c; font-weight: 700; text-align: left; }
.lx-paper-doc td { padding: 4px 6px; border-bottom: 1px solid #e3e3df; }
.lx-paper-doc th:not(:first-child), .lx-paper-doc td:not(:first-child) { text-align: right; font-family: "IBM Plex Mono", ui-monospace, monospace; }
.lx-paper-doc dl { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; width: 55%; margin: 0 0 0 auto; }
.lx-paper-doc dt { color: #6b7280; }
.lx-paper-doc dd { margin: 0; text-align: right; font-family: "IBM Plex Mono", ui-monospace, monospace; }
.lx-paper-doc dt:last-of-type, .lx-paper-doc dd:last-of-type { color: #23272c; font-weight: 700; border-top: 1px solid #23272c; padding-top: 2px; }
.lx-paper-doc footer { margin-top: 10px; color: #6b7280; font-size: 9px; }

/* PDF viewer overlay inside the app */
.lx-pdf {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  background-color: #e7e7e3;
  animation: lx-enter 0.25s ease both;
}

.lx-pdf-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  flex: none;
  padding: 0 14px;
  border-bottom: 1px solid var(--mk-hair);
  background-color: #fbfbfa;
  font-size: 12px;
}

.lx-pdf-file { padding: 2px 6px; border-radius: 4px; background-color: #c8372d; color: #fff; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10px; font-weight: 600; }
.lx-pdf-bar b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-pdf-actions { display: flex; gap: 6px; margin-left: auto; }

.lx-pdf-actions button {
  padding: 5px 10px;
  border: 1px solid rgba(20, 23, 26, 0.14);
  border-radius: 6px;
  background-color: #fff;
  color: var(--lx-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.lx-pdf-actions button:hover { border-color: var(--lx-blue); color: var(--lx-blue); }
.lx-pdf-stage { flex: 1; overflow: hidden; padding: 18px; display: flex; justify-content: center; align-items: flex-start; }
.lx-pdf-stage .lx-paper-doc { width: 100%; max-width: 440px; }
.lx-paper-doc.is-enter { animation: lx-paper-in 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
@keyframes lx-paper-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }

.lx-pdf-loading { align-self: center; margin: 0 auto !important; color: var(--lx-muted); font-size: 13px; font-weight: 600; }
.lx-pdf-loading::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border: 2px solid #c7cede;
  border-top-color: var(--lx-blue);
  border-radius: 50%;
  vertical-align: -1px;
  animation: lx-spin 0.7s linear infinite;
}

@keyframes lx-spin { to { transform: rotate(360deg); } }

/* AI reading */
.lx-ai { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 20px; align-items: start; }
.lx-paper-in { padding: 18px 20px; font-size: 9.5px; overflow: hidden; }
.lx-paper-in h4 { font-size: 14px; }
.lx-paper-in .lx-doc-from { padding-right: 0; }

.lx-scan { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.is-scanning .lx-scan { opacity: 1; background: rgba(11, 61, 240, 0.04); }

.is-scanning .lx-scan::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 36px;
  background: linear-gradient(rgba(11, 61, 240, 0), rgba(11, 61, 240, 0.22));
  border-bottom: 2px solid var(--lx-blue);
  animation: lx-scanline 1.25s ease-in-out;
}

@keyframes lx-scanline { from { top: -36px; } to { top: 100%; } }

.lx-ai-status { margin-bottom: 10px !important; color: var(--lx-muted); font-size: 12px; font-weight: 600; }
.lx-ai-fields dl { display: grid; grid-template-columns: 84px 1fr; margin: 0; border-top: 1px solid var(--mk-hair); }
.lx-ai-fields dt, .lx-ai-fields dd { padding: 8px 0; border-bottom: 1px solid var(--mk-hair); font-size: 12.5px; }
.lx-ai-fields dt { color: #8a9099; font-size: 11.5px; }
.lx-ai-fields dd { margin: 0; color: #b4b9c2; }
.lx-ai-fields dd.is-filled { color: var(--lx-ink); font-weight: 600; animation: lx-fill 0.9s ease; }
.lx-mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }
@keyframes lx-fill { 0% { background-color: #e6edff; } 100% { background-color: transparent; } }
.lx-ai-fields .lx-app-btn { margin-top: 14px; }

@media screen and (max-width: 767px) {
  .lx-app-main [data-panel="docs"] { height: 100%; overflow-y: auto; }
  .lx-ai { grid-template-columns: 1fr; gap: 14px; }
  .lx-paper-in { max-height: 150px; }
  .lx-paper-in::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(rgba(255,255,255,0), #fff); }
  .lx-pdf-actions button:not([data-action="close-pdf"]) { display: none; }
  .lx-pdf-stage { padding: 12px; }
  .lx-paper-doc { padding: 16px 16px; font-size: 9.5px; }
}

/* `hidden` must win over component display rules (e.g. the PDF overlay's flex) */
.lx [hidden] { display: none !important; }

/* ===== Repositioning 2026-11: shared additions ===== */
.lx-split-lead { margin-top: 20px !important; color: var(--lx-muted); font-size: 15px; line-height: 1.8; }
.lx-case .lx-service-no, .lx-case .lx-step-no { margin-bottom: 10px; }
.lx-case .lx-service-no { display: block; }
#why-now .lx-case h3, #process .lx-case h3, #fit .lx-case h3, #use .lx-case h3 { line-height: 1.5; }

/* Compare with four options (new-business adds "build it yourself with AI") */
.lx-compare-4 { grid-template-columns: repeat(4, 1fr); }
@media screen and (max-width: 991px) {
  .lx-compare-4 { grid-template-columns: 1fr 1fr; }
}
@media screen and (max-width: 767px) {
  .lx-compare-4 { grid-template-columns: 1fr; }
}

/* An odd last problem card spans the full row */
#problems .lx-grid-2 > .lx-panel:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Email application shown on /contact until the Google Form is set up */
.lx-mail-apply { padding: 8px 0 96px; }
.lx-mail-apply .lx-lead { margin-bottom: 28px !important; }
.lx-mail-steps { max-width: 520px; margin: 40px auto 0 !important; padding: 0; list-style: none; text-align: left; }
.lx-mail-steps li { display: flex; gap: 14px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--lx-line); color: var(--lx-ink); font-size: 15px; }
.lx-mail-steps b { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background-color: var(--lx-blue); color: #fff; font-size: 13px; }

/* ===== Airdev-structure rebuild (2026-11) ===== */
.lx-lead-strong { color: var(--lx-ink); font-size: 20px; font-weight: 700; }
.lx-lead-strong + .lx-lead { margin-top: 10px !important; }

/* Proof: big figures */
.lx-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; }
.lx-stats > div { padding: 28px 24px; border: 1px solid var(--lx-line); border-radius: 20px; background-color: #fff; }
.lx-stats b { display: block; margin-bottom: 10px; color: var(--lx-blue); font-family: Roboto, "Hiragino Sans", sans-serif; font-size: 40px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }
.lx-stats p { color: var(--lx-muted); font-size: 14px; line-height: 1.7; }
.lx-works { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; margin-top: 36px; }
.lx-works-label { color: var(--lx-muted); font-size: 13px; font-weight: 700; }
.lx-works ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 !important; padding: 0; list-style: none; }
.lx-works li { padding: 8px 16px; border: 1px solid var(--lx-line); border-radius: 999px; background-color: #fff; color: var(--lx-ink); font-size: 14px; font-weight: 700; }
.lx-works small { margin-right: 8px; color: var(--lx-blue); font-size: 12px; }

/* Solution: many tools into one system */
.lx-merge { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.lx-merge ul { display: grid; gap: 8px; margin: 0 !important; padding: 0; list-style: none; }
.lx-merge li { padding: 10px 14px; border: 1px dashed #c9cfda; border-radius: 10px; background-color: #fff; color: var(--lx-muted); font-size: 14px; text-align: center; }
.lx-merge-arrow { color: var(--lx-blue); font-size: 28px; font-weight: 700; }
.lx-merge-one { display: flex; flex-direction: column; justify-content: center; min-height: 200px; padding: 24px; border: 2px solid var(--lx-blue); border-radius: 20px; background-color: #fff; box-shadow: 0 20px 40px rgba(11, 61, 240, 0.12); color: var(--lx-ink); font-size: 18px; font-weight: 700; text-align: center; }
.lx-merge-one small { color: var(--lx-blue); font-size: 13px; }

/* Pricing with what's included */
.lx-price-list ul { margin: 16px 0 0 !important; padding: 16px 0 0; border-top: 1px solid var(--lx-line); list-style: none; }
.lx-price-list li { padding: 5px 0 5px 24px; position: relative; font-size: 14px; }
.lx-price-list li::before { content: "✓"; position: absolute; left: 0; color: var(--lx-green); font-weight: 700; }

/* Ticks inside the hub's service cards */
.lx-service-ticks { margin: 0 0 24px !important; padding: 0; list-style: none; }
.lx-service-ticks li { padding: 6px 0 6px 24px; position: relative; color: var(--lx-ink); font-size: 14px; }
.lx-service-ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--lx-green); font-weight: 700; }

@media screen and (max-width: 991px) {
  .lx-stats { grid-template-columns: 1fr 1fr; }
}
@media screen and (max-width: 767px) {
  .lx-lead-strong { font-size: 17px; }
  .lx-stats b { font-size: 32px; }
  .lx-merge { grid-template-columns: 1fr; }
  .lx-merge-arrow { transform: rotate(90deg); justify-self: center; }
  .lx-merge-one { min-height: 0; }
}
.lx-stats b { font-size: clamp(28px, 2.8vw, 40px); white-space: nowrap; }
.lx-merge-one { word-break: keep-all; }
@media screen and (max-width: 767px) {
  .lx-stats { grid-template-columns: 1fr; }
  .lx-stats b { font-size: 30px; }
}

/* ===== NQU-look rebuild (2026-11): sky hero, proof pill, method, benefits ===== */
.lx-hero-sky {
  position: relative;
  overflow: hidden;
  padding: 72px 0 96px;
  background: linear-gradient(180deg, #e9eeff 0%, #f1edff 38%, #ffffff 640px);
}
.lx-hero-sky > .lx-wrap { position: relative; z-index: 1; }
.lx-hills { position: absolute; left: 0; right: 0; top: 300px; width: 100%; height: 360px; z-index: 0; pointer-events: none; }
.lx-hero-sky .lx-title { font-size: clamp(36px, 5.2vw, 64px); line-height: 1.25; }
.lx-hero-sky .lx-eyebrow { margin-top: 20px; }

.lx-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  padding: 6px 14px 6px 6px;
  border: 1px solid rgba(11, 61, 240, 0.15);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 6px 20px rgba(40, 40, 120, 0.08);
  color: var(--lx-ink);
  font-size: 13px;
  font-weight: 700;
  backdrop-filter: blur(6px);
}
.lx-pill:hover { color: var(--lx-blue); }
.lx-pill-mark { padding: 2px 8px; border-radius: 999px; background-color: var(--lx-blue); color: #fff; font-size: 11px; }
.lx-pill i { font-style: normal; color: var(--lx-blue); }
.lx-hero-sky .lx-pill + .lx-eyebrow { display: block; width: fit-content; margin: 0 auto 18px !important; }

.lx-micro { margin-top: 14px !important; color: var(--lx-muted); font-size: 13px; }

/* Hub: one model that answers the problems */
.lx-model-lead { max-width: 720px; margin: 20px auto 40px !important; color: var(--lx-muted); font-size: 16px; line-height: 1.9; }
.lx-themes { text-align: left; }

/* Benefits list near the CTA */
.lx-benefits { margin: 0 !important; padding: 0; list-style: none; }
.lx-benefits li { padding: 22px 0 22px 44px; border-top: 1px solid var(--lx-line); position: relative; color: var(--lx-muted); font-size: 15px; }
.lx-benefits li:last-child { border-bottom: 1px solid var(--lx-line); }
.lx-benefits li::before { content: "✓"; position: absolute; left: 0; top: 20px; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background-color: var(--lx-blue-soft); color: var(--lx-blue); font-weight: 700; }
.lx-benefits b { display: block; margin-bottom: 4px; color: var(--lx-ink); font-size: 18px; }

/* Method: work backwards from the result */
.lx-method { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; margin-top: 48px; }
.lx-method-steps { margin: 0 !important; padding: 0; list-style: none; counter-reset: lxm; }
.lx-method-steps li { padding: 18px 0 18px 48px; border-top: 1px solid var(--lx-line); position: relative; color: var(--lx-muted); font-size: 15px; counter-increment: lxm; }
.lx-method-steps li::before { content: counter(lxm); position: absolute; left: 0; top: 18px; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background-color: var(--lx-blue); color: #fff; font-size: 13px; font-weight: 700; }
.lx-method-steps b { display: block; margin-bottom: 4px; color: var(--lx-ink); font-size: 17px; }
.lx-flow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lx-flow-card { padding: 20px; border: 1px solid var(--lx-line); border-radius: 18px; background-color: #fff; }
.lx-flow-card ul { margin: 0 !important; padding: 0; list-style: none; }
.lx-flow-card li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; padding: 9px 0 9px 26px; border-top: 1px solid #f0f1f4; position: relative; font-size: 14px; }
.lx-flow-card li::before { position: absolute; left: 0; top: 9px; font-weight: 700; }
.lx-flow-card li.is-ok::before { content: "✓"; color: var(--lx-green); }
.lx-flow-card li.is-ng { color: var(--lx-muted); }
.lx-flow-card li.is-ng::before { content: "×"; color: var(--lx-red); }
.lx-flow-card em { color: var(--lx-red); font-size: 12px; font-style: normal; font-weight: 700; }
.lx-flow-us { border: 2px solid var(--lx-blue); box-shadow: 0 20px 40px rgba(11, 61, 240, 0.12); }
.lx-flow-us em { color: var(--lx-green); }
.lx-flow-sum { margin-top: 12px !important; font-size: 13px; font-weight: 700; }
.lx-flow-us .lx-flow-sum { color: var(--lx-blue); }

/* Job-post mock in the problems */
.lx-job b { display: block; margin: 6px 0 8px; font-size: 15px; }
.lx-job ul { margin: 0 !important; padding: 0; list-style: none; }
.lx-job li { padding: 4px 0 4px 14px; position: relative; color: var(--lx-muted); font-size: 13px; }
.lx-job li::before { content: "・"; position: absolute; left: 0; }
.lx-job .lx-mock-label { display: flex; justify-content: space-between; align-items: center; }

@media screen and (max-width: 991px) {
  .lx-method { grid-template-columns: 1fr; }
}
@media screen and (max-width: 767px) {
  .lx-hero-sky { padding: 48px 0 72px; }
  .lx-hills { top: 360px; height: 240px; }
  .lx-pill { font-size: 12px; text-align: left; }
  .lx-flow { grid-template-columns: 1fr; }
}
.lx-panel h3, .lx-service h3, .lx-case h3 { word-break: keep-all; overflow-wrap: anywhere; }
.lx-tool { white-space: nowrap; }
.lx-hero-sky:not(:has(.lx-hero-app)) .lx-hills { top: auto; bottom: 0; height: 200px; }
.lx-pill, .lx-pill:hover { text-decoration: none; }
.lx-lead-strong { word-break: keep-all; overflow-wrap: anywhere; }

/* Standalone AI demo on /business */
.lx-ai-window { max-width: 980px; margin: 40px auto 0; }
.lx-app.lx-app-solo { grid-template-columns: 1fr; height: auto; min-height: 0; }
.lx-ai-uses { margin-top: 28px; }
.lx-ai-uses li { font-weight: 400; }

/* Members (proof) */
.lx-members { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 980px; margin: 48px auto 0; }
.lx-members > div { padding: 32px; border: 1px solid var(--lx-line); border-radius: 20px; background-color: #fff; }
.lx-members b { display: block; margin-bottom: 14px; color: var(--lx-blue); font-family: Roboto, "Hiragino Sans", sans-serif; font-size: clamp(32px, 3.4vw, 48px); font-weight: 700; line-height: 1.1; white-space: nowrap; }
.lx-members h3 { margin: 0 0 8px; font-size: 19px; font-weight: 700; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.lx-members p { color: var(--lx-muted); font-size: 15px; }

/* Before / after example in the AI section */
.lx-flow-ba { max-width: 980px; margin: 40px auto 0; }
.lx-flow-steps { margin: 0 !important; padding: 0; list-style: none; counter-reset: lxf; }
.lx-flow-steps li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 12px 0 12px 34px; border-top: 1px solid #f0f1f4; position: relative; font-size: 15px; counter-increment: lxf; }
.lx-flow-steps li::before { content: counter(lxf); position: absolute; left: 0; top: 11px; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background-color: #eef0f4; color: var(--lx-muted); font-size: 12px; font-weight: 700; }
.lx-flow-us .lx-flow-steps li::before { background-color: var(--lx-blue); color: #fff; }
.lx-flow-steps em { color: var(--lx-green); font-size: 12px; font-style: normal; font-weight: 700; }
.lx-flow-sum-bad { color: var(--lx-red); }
.lx-flow-ba + .lx-ai-stage .lx-ai-window { margin-top: 32px; }

@media screen and (max-width: 767px) {
  .lx-members { grid-template-columns: 1fr; }
  .lx-members > div { padding: 24px; }
}

/* "Why now" band between problems and solution */
.lx-band { background: linear-gradient(135deg, #0a2fc4 0%, #0b3df0 55%, #4a5cff 100%); color: #fff; }
.lx-band-title { max-width: 900px; margin: 0 auto !important; font-family: Roboto, "Hiragino Sans", sans-serif; font-size: clamp(26px, 3.4vw, 40px); font-weight: 700; line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; color: #fff; }
.lx-band-lead { max-width: 760px; margin: 24px auto 0 !important; color: rgba(255, 255, 255, 0.85); font-size: 17px; line-height: 1.9; }
@media screen and (max-width: 767px) {
  .lx-band-lead { font-size: 15px; }
}

/* Problem cards: every mock fills the same space under the text, content centred */
#problems .lx-panel > .lx-mock {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 200px;
  margin-top: 0;
  box-sizing: border-box;
}
#problems .lx-panel > p { min-height: 1.8em; }
#problems .lx-timeline-mock { margin-bottom: 14px; }
/* Line up heading, text and mock across each row of problem cards */
@supports (grid-template-rows: subgrid) {
  #problems .lx-panel { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
  #problems .lx-panel > .lx-mock { align-self: stretch; }
}

/* ===== AI-filled editable form, loading and empty states (business hero, 2026-11) ===== */
.lx-ai-wait {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 240px;
  padding: 20px;
  border: 1px dashed #d5d9e2;
  border-radius: 14px;
  color: var(--lx-muted);
  font-size: 12.5px;
  text-align: center;
}
.lx-ai-wait b { color: var(--lx-ink); font-size: 14px; }
.lx-spin { width: 26px; height: 26px; border: 3px solid #dfe3ec; border-top-color: var(--lx-blue); border-radius: 50%; animation: lx-spin 0.8s linear infinite; }
.lx-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.lx-form label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-weight: 400; }
.lx-form label span { color: #8a9099; font-size: 11px; font-weight: 600; }
.lx-form input {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #dfe3ec;
  border-radius: 8px;
  background-color: #fff;
  color: var(--lx-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
}
.lx-form input:focus { border-color: var(--lx-blue); outline: 0; box-shadow: 0 0 0 3px rgba(11, 61, 240, 0.12); }
.lx-form input.is-filled { animation: lx-fill 0.9s ease; }
.lx-form-note { grid-column: 1 / -1; color: var(--lx-muted); font-size: 11.5px; }
.lx-form .lx-app-btn { grid-column: 1 / -1; justify-self: start; }


/* ===== Received invoice: AI read -> editable form -> approve (business hero, 2026-11) ===== */
.lx-ap { grid-template-columns: 1fr 1fr; gap: 20px; }
.lx-ap-side { min-width: 0; }
.lx-ap-side .lx-ai-wait { min-height: 300px; }
.lx-ap-side .lx-ai-wait .lx-app-btn { margin-top: 6px; }
.lx-form-wide { grid-column: 1 / -1; }
.lx-form-total { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; padding: 10px 12px; border-radius: 10px; background-color: #f3f3f1; font-size: 12px; }
.lx-form-total span { color: var(--lx-muted); font-weight: 600; }
.lx-form-total b { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 18px; }
.lx-form-total b.is-bump { animation: lx-bump 0.5s ease; }

@media screen and (max-width: 991px) {
  .lx-app-main [data-panel="docs"] { height: 100%; overflow-y: auto; }
}
@media screen and (max-width: 767px) {
  .lx-ap-side .lx-ai-wait { min-height: 180px; }
}


/* Sub-tabs inside a panel (請求書: AIで読み取る / PDFを作成) */
.lx-seg { display: inline-flex; gap: 2px; margin-bottom: 14px; padding: 3px; border-radius: 9px; background-color: #efefec; }
.lx-seg button { padding: 6px 14px; border: 0; border-radius: 7px; background: none; color: #5d636d; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.lx-seg button.is-on { background-color: #fff; color: var(--lx-ink); box-shadow: 0 1px 2px rgba(20, 23, 26, 0.12); }
[data-subpanel].is-enter { animation: lx-enter 0.28s ease; }
[data-panel="docs"] .lx-app-head { margin-bottom: 12px; }

/* Process steps: line up mock, number, heading and text across the row */
@supports (grid-template-rows: subgrid) {
  @media screen and (min-width: 992px) {
    #process .lx-step { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
    #process .lx-step .lx-mock-tall { align-self: stretch; margin-top: 0; }
    #process .lx-step-no { justify-self: start; }
  }
}
.lx-members-lead { max-width: 760px; margin: 20px auto 0 !important; color: var(--lx-muted); font-size: 16px; text-align: center; }

/* ===== Development process, 4 steps (business, 2026-11) ===== */
.lx-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; counter-reset: flow; }
.lx-flow-step {
  display: flex;
  flex-direction: column;
  padding: 24px 22px;
  border: 1px solid var(--lx-line);
  border-radius: 18px;
  background-color: #fff;
  position: relative;
}
.lx-flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 34px;
  right: -13px;
  z-index: 1;
  width: 10px;
  height: 10px;
  border-top: 2px solid #c4cad6;
  border-right: 2px solid #c4cad6;
  transform: rotate(45deg);
}
.lx-flow-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px !important; }
.lx-flow-head .lx-step-no { margin: 0; }
.lx-flow-head b { font-size: 15px; }
.lx-flow-head em { margin-left: auto; padding: 3px 9px; border-radius: 999px; background-color: var(--lx-blue-soft); color: var(--lx-blue); font-size: 11px; font-style: normal; font-weight: 700; white-space: nowrap; }
.lx-flow-step h3 { margin: 0 0 6px; font-size: 19px; font-weight: 700; line-height: 1.45; }
.lx-flow-lead { margin-bottom: 14px !important; color: var(--lx-muted); font-size: 13.5px; line-height: 1.7; }
.lx-flow-step .lx-checks { flex: 1; margin: 0 !important; padding: 0; list-style: none; font-size: 13.5px; line-height: 1.6; }
.lx-flow-step .lx-checks li { padding: 6px 0 6px 26px; border-top: 1px solid #f0f1f4; }

@media screen and (max-width: 991px) {
  .lx-flow { grid-template-columns: repeat(2, 1fr); }
  .lx-flow-step::after { display: none; }
}
@media screen and (max-width: 767px) {
  .lx-flow { grid-template-columns: 1fr; margin-top: 32px; }
}
.lx-flow-head b { white-space: nowrap; }
@supports (grid-template-rows: subgrid) {
  @media screen and (min-width: 992px) {
    .lx-flow-step { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  }
}

/* ===== /bubble page (2026-11) ===== */
.lx-chip-red { background-color: #fdecea; color: var(--lx-red); }

/* Plain cards used across the page */
.lx-bb-card { display: flex; flex-direction: column; padding: 28px 26px; border: 1px solid var(--lx-line); border-radius: 20px; background-color: #fff; text-align: left; }
.lx-bb-kicker { margin-bottom: 6px !important; color: var(--lx-blue); font-size: 13px; font-weight: 700; }
.lx-bb-card h3 { margin: 0 0 10px; font-size: 21px; font-weight: 700; line-height: 1.45; }
.lx-bb-card > p:not(.lx-bb-kicker) { color: var(--lx-muted); font-size: 15px; line-height: 1.75; }
.lx-bb-card .lx-step-no { margin-bottom: 14px; }
.lx-bb-card .lx-checks { margin: 4px 0 0 !important; padding: 0; list-style: none; font-size: 15px; line-height: 1.6; }
.lx-bb-card .lx-checks li { padding: 9px 0 9px 28px; border-top: 1px solid #f0f1f4; }

.lx-bb-offers { margin-top: 64px; position: relative; z-index: 1; }
.lx-bb-cause { max-width: 980px; margin: 40px auto 0; }
.lx-bb-point { max-width: 760px; margin: 28px auto 0 !important; font-size: 17px; font-weight: 700; text-align: center; }
.lx-bb-steps { margin-top: 48px; }

/* Pricing */
.lx-bb-prices { max-width: 1080px; margin: 40px auto 0; }

@media screen and (max-width: 767px) {
  .lx-bb-offers { margin-top: 40px; }
  .lx-bb-card { padding: 22px 20px; }
}

/* ===== /new-business process: step 02 holds the clickable phone prototype (2026-11) ===== */
.lx-flow-body { display: flex; flex-direction: column; gap: 14px; }
.lx-flow-body .lx-checks { flex: 0 0 auto; }
.lx-flow-body .lx-phone-wrap { flex: 1 1 auto; margin: 0; padding: 14px; }
.lx-flow-body .lx-phone-wrap .lx-mock-label { align-self: stretch; }
/* /new-business AI cards: same row alignment as the problem cards */
#ai-worries .lx-panel > .lx-mock { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; min-height: 170px; margin-top: 0; box-sizing: border-box; }
@supports (grid-template-rows: subgrid) {
  #ai-worries .lx-panel { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
  #ai-worries .lx-panel > .lx-mock { align-self: stretch; }
}

/* Rotating phrase in the /bubble headline */
.lx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lx-rotate { display: inline-grid; justify-items: center; color: var(--lx-blue); overflow: hidden; vertical-align: bottom; }
@media screen and (max-width: 767px) { .lx-hero-sky .lx-rotate-title { font-size: 30px; } }
.lx-rotate > span { grid-area: 1 / 1; opacity: 0; transform: translateY(60%); transition: opacity 0.45s ease, transform 0.45s ease; white-space: nowrap; }
.lx-rotate > span.is-on { opacity: 1; transform: none; }
.lx-rotate > span.is-off { opacity: 0; transform: translateY(-60%); }
@media (prefers-reduced-motion: reduce) {
  .lx-rotate > span { transition: none; }
}
/* Override `.lx-title span { display:block; color:grey }` for the rotating headline */
.lx-title.lx-rotate-title span { color: inherit; }
.lx-title.lx-rotate-title > span[aria-hidden] { display: inline; }
.lx-title.lx-rotate-title .lx-rotate { display: inline-grid; color: var(--lx-blue); clip-path: inset(0); }
.lx-title.lx-rotate-title .lx-rotate > span { display: block; color: var(--lx-blue); }
.lx-title.lx-rotate-title .lx-sr { display: block; }

/* ===== Contact form (posts to /api/contact, 2026-11) ===== */
.lx-contact-page { padding: 0 0 96px; }
.lx-contact { margin-top: 32px; padding: 32px; border: 1px solid var(--lx-line); border-radius: 20px; background-color: #fff; }
.lx-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; margin-bottom: 24px; }
.lx-contact-grid label { display: flex; flex-direction: column; gap: 6px; margin: 0; font-weight: 400; }
.lx-contact-grid label > span { color: var(--lx-ink); font-size: 14px; font-weight: 700; }
.lx-contact-grid em, .lx-contact-grid small { margin-left: 6px; padding: 1px 6px; border-radius: 4px; font-size: 11px; font-style: normal; font-weight: 700; }
.lx-contact-grid em { background-color: #fdecea; color: var(--lx-red); }
.lx-contact-grid small { background-color: #f0f1f4; color: var(--lx-muted); }
.lx-contact-grid input, .lx-contact-grid select, .lx-contact-grid textarea {
  width: 100%;
  margin: 0;
  padding: 11px 14px;
  border: 1px solid #d5d9e2;
  border-radius: 10px;
  background-color: #fff;
  color: var(--lx-ink);
  font: inherit;
  font-size: 15px;
  box-sizing: border-box;
}
.lx-contact-grid textarea { resize: vertical; min-height: 140px; line-height: 1.7; }
.lx-contact-grid input:focus, .lx-contact-grid select:focus, .lx-contact-grid textarea:focus { border-color: var(--lx-blue); outline: 0; box-shadow: 0 0 0 3px rgba(11, 61, 240, 0.12); }
.lx-contact-wide { grid-column: 1 / -1; }
.lx-contact .lx-btn { border: 0; cursor: pointer; }
.lx-contact .lx-btn:disabled { opacity: 0.6; cursor: default; }
.lx-contact .cf-turnstile { margin-bottom: 16px; }
.lx-contact-status { min-height: 1.6em; margin-top: 12px !important; color: var(--lx-muted); font-size: 14px; }
.lx-contact-status.is-error { color: var(--lx-red); }
.lx-contact .lx-note { margin-top: 4px !important; text-align: left; }
.lx-contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lx-contact-done { margin-top: 32px; padding: 40px 32px; border: 2px solid var(--lx-blue); border-radius: 20px; background-color: #fff; }
.lx-contact-done h3 { margin: 0 0 8px; font-size: 22px; font-weight: 700; }
.lx-contact-done p { color: var(--lx-muted); }
@media screen and (max-width: 767px) {
  .lx-contact { padding: 22px 18px; }
  .lx-contact-grid { grid-template-columns: 1fr; }
}

/* ===== About: company profile (replaces the old Webflow table, 2026-11) ===== */
.lx-company { margin: 40px 0 0; border-top: 1px solid var(--lx-line); }
.lx-company > div { display: grid; grid-template-columns: 160px 1fr; gap: 16px; padding: 16px 4px; border-bottom: 1px solid var(--lx-line); font-size: 15px; }
.lx-company dt { color: var(--lx-muted); font-weight: 700; }
.lx-company dd { margin: 0; color: var(--lx-ink); }
.lx-company a { color: var(--lx-blue); }
.lx-company-sub { margin: 48px 0 8px; font-size: 18px; font-weight: 700; }
@media screen and (max-width: 767px) {
  .lx-company > div { grid-template-columns: 1fr; gap: 2px; }
}