:root {
  --color-midnight-ink: #0e0e11;
  --color-canvas-white: #ffffff;
  --color-slate-gray: #353535;
  --color-near-black: #141417;
  --color-ash-gray: #1d1d1f;
  --color-supporting-gray: #666666;
  --color-peach-halo: #ffdad2;
  --gradient-cosmic-gradient-hue: linear-gradient(to right, rgb(147, 112, 233), rgb(254, 147, 125), rgb(243, 188, 185), rgb(232, 229, 246));
  --gradient-plasma-gradient-hue: linear-gradient(125deg, rgb(65, 103, 233) 8.27%, rgb(125, 104, 255) 32.42%, rgb(255, 147, 124) 64.48%, rgb(255, 188, 68) 96.1%);
  --font-graphik: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --radius-card: 24px;
  --radius-small: 8px;
  --radius-pill: 100px;
}

html {
  background: var(--color-canvas-white);
}

body {
  font-family: var(--font-graphik) !important;
  background: var(--color-canvas-white) !important;
  color: var(--color-midnight-ink) !important;
  letter-spacing: 0 !important;
}

.bg-animation {
  background: var(--color-canvas-white) !important;
}

.bg-animation::before,
.particles,
.particle {
  display: none !important;
}

nav {
  min-height: 84px !important;
  padding: 18px clamp(18px, 4vw, 48px) !important;
  background: rgba(255, 255, 255, 0.86) !important;
  border-bottom: 1px solid rgba(14, 14, 17, 0.08) !important;
  box-shadow: none !important;
}

.logo,
.footer-brand,
.footer-brand .logo {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--color-midnight-ink) !important;
  font-weight: 500 !important;
  letter-spacing: -0.2px !important;
}

.logo img {
  display: block !important;
  width: 35px !important;
  height: 35px !important;
  object-fit: contain !important;
  filter: none !important;
}

.logo::before {
  content: none !important;
}

.btn,
button,
.logout-btn,
.pagination-btn,
.summary-tab,
.checkbox-pill,
.nav-credits {
  border-radius: var(--radius-pill) !important;
  box-shadow: none !important;
  transform: none !important;
  font-weight: 500 !important;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease !important;
}

.btn-primary,
button[type="submit"].btn,
.pricing-card .btn,
.logout-btn {
  background: var(--color-midnight-ink) !important;
  color: var(--color-canvas-white) !important;
  border: 1px solid var(--color-midnight-ink) !important;
}

.btn-primary:hover,
button[type="submit"].btn:hover {
  background: var(--color-ash-gray) !important;
  border-color: var(--color-ash-gray) !important;
}

.btn-ghost,
.btn-secondary,
.btn-chat,
.btn-download,
.pagination-btn,
.summary-tab {
  background: transparent !important;
  color: var(--color-midnight-ink) !important;
  border: 1px solid rgba(14, 14, 17, 0.22) !important;
}

.btn-ghost:hover,
.btn-secondary:hover,
.btn-chat:hover,
.btn-download:hover,
.pagination-btn:hover:not(:disabled),
.summary-tab:hover {
  background: rgba(14, 14, 17, 0.06) !important;
  border-color: rgba(14, 14, 17, 0.42) !important;
}

.btn-danger {
  background: #fff1ef !important;
  color: #9f1d12 !important;
  border: 1px solid #ffc7bd !important;
}

main,
.section,
.cta-section {
  position: relative;
  z-index: 1;
}

.hero {
  background: var(--gradient-cosmic-gradient-hue) !important;
  color: var(--color-near-black) !important;
  margin: 0 calc(50% - 50vw) 48px !important;
  min-height: min(760px, calc(100vh - 28px)) !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding-top: clamp(132px, 15vh, 176px) !important;
  padding-bottom: 72px !important;
  padding-left: max(24px, calc((100vw - 1200px) / 2)) !important;
  padding-right: max(24px, calc((100vw - 1200px) / 2)) !important;
  overflow: hidden !important;
}

.hero-badge,
.hero h1,
.hero-subtitle,
.hero-buttons,
.demo-preview {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.hero-content,
.container,
.footer-container,
.footer-bottom {
  max-width: 1200px !important;
}

h1,
h2,
h3,
h4,
.hero h1,
.section h2,
.card-header h3 {
  color: var(--color-near-black) !important;
  font-weight: 400 !important;
  letter-spacing: -0.015em !important;
}

.hero h1,
h1 {
  line-height: 1.12 !important;
}

.hero h1 {
  font-size: clamp(48px, 9vw, 100px) !important;
  letter-spacing: -2.5px !important;
  max-width: 1050px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.hero h1 .gradient {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--color-near-black) !important;
}

.hero-subtitle,
.section-subtitle,
.subtitle,
.description,
.section-desc,
p,
label,
.user-email,
.video-channel,
.video-date,
.pagination-info,
.search-hint,
.card-features li,
.faq-item p,
.footer-column ul li a,
.footer-copyright {
  color: var(--color-slate-gray) !important;
}

.hero-badge,
.badge,
.card-header .badge,
.mode-badge,
.summary-badge,
.tag-badge,
.nav-credits,
.checkbox-pill {
  background: rgba(255, 255, 255, 0.55) !important;
  color: var(--color-midnight-ink) !important;
  border: 1px solid rgba(14, 14, 17, 0.14) !important;
}

.hero-badge {
  background: rgba(255, 255, 255, 0.72) !important;
  color: var(--color-slate-gray) !important;
}

.hero-badge span {
  color: var(--color-midnight-ink) !important;
}

.hero-badge span,
.feature-card h3,
.type-card h4,
.summary-header h3,
.faq-item h3,
.section h2,
.subtitle,
.card-price .price,
.card-price .credits,
.credits-col,
.footer-column h4 {
  color: var(--color-near-black) !important;
}

.demo-window,
.card,
.collection,
.pricing-card,
.faq-item,
.type-card,
.feature-card,
.cta-section,
.modal-content,
.share-modal,
.settings-panel,
.admin-card,
.stat-card,
.stat-box,
.chart-card,
.quick-access-card,
.modal {
  background: rgba(255, 255, 255, 0.62) !important;
  border: 1px solid rgba(14, 14, 17, 0.10) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: none !important;
  backdrop-filter: blur(16px) !important;
}

.feature-card,
.type-card,
.faq-item,
.pricing-card {
  padding: 24px !important;
}

.demo-header {
  background: rgba(255, 255, 255, 0.5) !important;
  border-bottom: 1px solid rgba(14, 14, 17, 0.08) !important;
}

.demo-dot {
  background: var(--color-midnight-ink) !important;
  opacity: 0.28 !important;
}

.demo-floating-logo {
  background: var(--color-near-black) !important;
  border: 0 !important;
  border-radius: var(--radius-card) !important;
  box-shadow: none !important;
}

.demo-input,
.demo-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
textarea,
select,
.control-select,
.search-input-wrapper input,
.summary-content {
  background: #ffffff !important;
  color: var(--color-midnight-ink) !important;
  border: 1px solid rgba(14, 14, 17, 0.18) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

input:focus,
textarea:focus,
select:focus,
.control-select:focus,
.search-input-wrapper input:focus {
  border-color: var(--color-midnight-ink) !important;
  box-shadow: 0 0 0 3px rgba(14, 14, 17, 0.08) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-supporting-gray) !important;
}

.types-section,
.cta-section,
.welcome-message,
.soft-section,
.section[style*="background"] {
  background: var(--color-peach-halo) !important;
}

.collection,
.summary-content,
.video-item,
.video-skeleton,
.usage-table,
.table,
table {
  background: rgba(255, 255, 255, 0.7) !important;
  color: var(--color-midnight-ink) !important;
}

.video-item,
.video-skeleton {
  border: 1px solid rgba(14, 14, 17, 0.10) !important;
  border-radius: 16px !important;
}

.video-item:hover {
  border-color: rgba(14, 14, 17, 0.35) !important;
}

.video-info h4,
.collection h2,
.summary-content h1,
.summary-content h2,
.summary-content h3,
.summary-content strong {
  color: var(--color-near-black) !important;
}

.summary-tab.active {
  background: var(--color-midnight-ink) !important;
  color: var(--color-canvas-white) !important;
  border-color: var(--color-midnight-ink) !important;
}

.btn-active,
.btn-nav.btn-active {
  background: var(--color-midnight-ink) !important;
  color: var(--color-canvas-white) !important;
  border-color: var(--color-midnight-ink) !important;
}

.stat-number,
.quick-access-label,
.chart-card h4,
.section-title {
  color: var(--color-near-black) !important;
}

.stat-label,
.muted {
  color: var(--color-slate-gray) !important;
}

.pill,
.pill.red,
.pill.green,
.pill.blue,
.pill.gray {
  background: rgba(255, 255, 255, 0.72) !important;
  color: var(--color-midnight-ink) !important;
  border: 1px solid rgba(14, 14, 17, 0.14) !important;
}

.pricing-card.popular {
  background: var(--color-peach-halo) !important;
  border: 1px solid rgba(14, 14, 17, 0.22) !important;
}

.card-badge {
  background: var(--color-midnight-ink) !important;
  color: var(--color-canvas-white) !important;
  border-radius: var(--radius-pill) !important;
}

.usage-table th,
thead th {
  background: var(--color-near-black) !important;
  color: var(--color-canvas-white) !important;
}

.usage-table td,
td,
th {
  border-color: rgba(14, 14, 17, 0.10) !important;
}

.separator td {
  background: #f6f3ff !important;
  color: var(--color-slate-gray) !important;
}

footer {
  background: var(--color-near-black) !important;
  border-top: 0 !important;
  color: var(--color-canvas-white) !important;
}

footer .footer-column h4,
footer .footer-brand,
footer .footer-brand .logo {
  color: var(--color-canvas-white) !important;
}

footer .footer-brand {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

footer .footer-brand img {
  width: 26px !important;
  height: 26px !important;
  display: block !important;
  object-fit: contain !important;
}

footer .footer-column ul li a,
footer .footer-copyright {
  color: rgba(255, 255, 255, 0.68) !important;
}

footer .footer-social {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1rem !important;
}

footer .footer-social a {
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 36px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  color: var(--color-canvas-white) !important;
  text-decoration: none !important;
  font-size: 0.9rem !important;
  line-height: 1 !important;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

footer .footer-social a:hover {
  background: rgba(255, 218, 210, 0.14) !important;
  border-color: rgba(255, 218, 210, 0.42) !important;
  color: rgba(255, 218, 210, 0.98) !important;
}

.error-message {
  background: #fff1ef !important;
  border-color: #ffc7bd !important;
  color: #9f1d12 !important;
}

.success-message,
.badge-success {
  background: #effaf2 !important;
  border-color: #bfe7c8 !important;
  color: #17692a !important;
}

a,
.video-info a,
.summary-content a,
.card-footer a,
.error-message a {
  color: var(--color-midnight-ink) !important;
}

.fade-in {
  transition: opacity 420ms ease, transform 420ms ease !important;
}

@media (max-width: 768px) {
  nav {
    min-height: auto !important;
  }

  .hero {
    padding-top: 120px !important;
    padding-bottom: 64px !important;
  }

  .hero h1 {
    font-size: clamp(42px, 13vw, 64px) !important;
    letter-spacing: -1.2px !important;
  }

  .card,
  .collection,
  .pricing-card,
  .faq-item,
  .type-card,
  .feature-card {
    border-radius: 18px !important;
  }
}

/* App dashboard polish */
.app-page {
  background:
    linear-gradient(180deg, rgba(255, 218, 210, 0.42), rgba(255, 255, 255, 0) 310px),
    var(--color-canvas-white) !important;
}

.app-page nav {
  position: sticky !important;
}

.app-page main {
  padding: 24px clamp(18px, 3vw, 32px) 72px !important;
}

.app-page .container {
  max-width: 1180px !important;
}

.app-page .welcome-message {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 12px 0 24px !important;
  padding: 14px 18px !important;
  background: rgba(255, 218, 210, 0.72) !important;
  border: 0 !important;
  border-left: 4px solid var(--color-midnight-ink) !important;
  border-radius: var(--radius-small) !important;
  color: var(--color-slate-gray) !important;
  font-size: 15px !important;
}

.app-page .welcome-message strong {
  color: var(--color-midnight-ink) !important;
  font-weight: 600 !important;
}

.app-page .app-command-card {
  padding: clamp(24px, 4vw, 42px) !important;
  margin-bottom: 32px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.48)),
    radial-gradient(circle at 82% 0%, rgba(147, 112, 233, 0.16), transparent 34%) !important;
}

.app-card-heading,
.collection-heading {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}

.app-kicker {
  color: var(--color-supporting-gray) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  margin: 0 0 5px !important;
  text-transform: uppercase !important;
}

.app-card-heading h1,
.collection-heading h2 {
  margin: 0 !important;
  color: var(--color-near-black) !important;
  font-size: clamp(30px, 4vw, 49px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.015em !important;
  font-weight: 400 !important;
}

.app-mode-pill {
  flex: 0 0 auto !important;
  padding: 8px 14px !important;
  border-radius: var(--radius-pill) !important;
  background: var(--color-midnight-ink) !important;
  color: var(--color-canvas-white) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.app-page .input-group {
  display: grid !important;
  grid-template-columns: minmax(280px, 1.25fr) minmax(240px, 0.75fr) !important;
  gap: 16px !important;
  margin-bottom: 18px !important;
}

.app-page .input-wrapper {
  min-width: 0 !important;
}

.app-page label {
  color: var(--color-ash-gray) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin-bottom: 8px !important;
}

.app-page input[type="text"],
.app-page select,
.app-page .control-select,
.app-page .search-input-wrapper input {
  min-height: 48px !important;
  border-radius: 15px !important;
}

.app-submit-row {
  display: flex !important;
  justify-content: flex-start !important;
}

.app-submit-row .btn {
  min-height: 48px !important;
  padding-inline: 24px !important;
}

.app-page .collection {
  margin-top: 0 !important;
  padding: clamp(22px, 3vw, 32px) !important;
}

.app-page .search-wrapper {
  padding: 18px !important;
  margin-bottom: 10px !important;
  background: rgba(255, 255, 255, 0.58) !important;
  border: 1px solid rgba(14, 14, 17, 0.08) !important;
  border-radius: 20px !important;
}

.app-page .filters-row {
  gap: 10px !important;
}

.app-page .filters-row.nowrap {
  align-items: center !important;
}

.app-page .search-input-wrapper.narrow {
  flex: 1 1 420px !important;
}

.app-page .checkbox-pill {
  min-height: 44px !important;
  border-radius: var(--radius-pill) !important;
  background: #fff !important;
}

.app-page .search-hint {
  margin: 0 0 16px !important;
  color: var(--color-supporting-gray) !important;
}

.app-page .video-list {
  gap: 12px !important;
}

.app-page .video-item {
  align-items: stretch !important;
  gap: 16px !important;
  padding: 14px !important;
  background: #fff !important;
  border-radius: 20px !important;
}

.app-page .video-thumbnail {
  width: 176px !important;
  min-width: 176px !important;
  height: 99px !important;
  border-radius: 12px !important;
  background: #f3f3f3 !important;
}

.app-page .video-thumbnail:hover {
  opacity: 0.94 !important;
  transform: none !important;
}

.app-page .video-info {
  padding: 4px 0 !important;
}

.app-page .video-info h4 {
  color: var(--color-midnight-ink) !important;
  font-size: 17px !important;
  line-height: 1.28 !important;
  margin-bottom: 6px !important;
}

.app-page .video-channel,
.app-page .video-date,
.app-page .video-info a {
  font-size: 13px !important;
}

.app-page .video-info a {
  color: var(--color-slate-gray) !important;
  text-decoration: none !important;
}

.app-page .video-info a:hover {
  color: var(--color-midnight-ink) !important;
}

.app-page .video-summaries {
  gap: 6px !important;
  margin-top: 8px !important;
}

.app-page .summary-badge,
.app-page .tag-badge {
  padding: 4px 8px !important;
  border-radius: var(--radius-pill) !important;
  font-size: 11px !important;
}

.app-page .video-actions {
  min-width: 92px !important;
  justify-content: center !important;
}

.app-page .video-actions .btn {
  justify-content: center !important;
  min-height: 34px !important;
  padding: 7px 13px !important;
  font-size: 13px !important;
}

.app-page .pagination-controls {
  padding: 16px 0 0 !important;
  margin-top: 8px !important;
}

@media (max-width: 900px) {
  .app-page .input-group {
    grid-template-columns: 1fr !important;
  }

  .app-page .filters-row.nowrap {
    flex-wrap: wrap !important;
  }
}

@media (max-width: 700px) {
  .app-page nav {
    position: relative !important;
  }

  .app-page .welcome-message {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }

  .app-card-heading,
  .collection-heading {
    flex-direction: column !important;
  }

  .app-page .video-thumbnail {
    width: 100% !important;
    min-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }

  .app-page .video-actions {
    flex-direction: row !important;
    justify-content: flex-start !important;
  }
}

/* Braintrust-inspired homepage sections */
.home-page {
  background:
    linear-gradient(90deg, rgba(14, 14, 17, 0.025) 1px, transparent 1px),
    linear-gradient(180deg, rgba(14, 14, 17, 0.018) 1px, transparent 1px),
    var(--color-canvas-white) !important;
  background-size: 56px 56px, 56px 56px, auto !important;
}

.home-page nav {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.94), rgba(255, 248, 247, 0.88)) !important;
}

.home-page nav .logo {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 56px !important;
  padding: 7px 42px 7px 8px !important;
  border: 1px solid rgba(14, 14, 17, 0.10) !important;
  border-radius: 6px 24px 24px 6px !important;
  background:
    radial-gradient(circle at 24% 50%, rgba(255, 218, 210, 0.58), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 248, 244, 0.92)) !important;
  color: var(--color-midnight-ink) !important;
  text-decoration: none !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    0 12px 32px rgba(126, 78, 72, 0.08) !important;
}

.home-page nav .logo::after {
  content: "\4F8D" !important;
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 8px 3px 8px 3px !important;
  display: grid !important;
  place-items: center !important;
  color: rgba(14, 14, 17, 0.42) !important;
  border: 1px solid rgba(226, 95, 77, 0.18) !important;
  background: rgba(255, 218, 210, 0.44) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  transform: translateY(-50%) rotate(-6deg) !important;
}

.home-page nav .logo img {
  width: 38px !important;
  height: 38px !important;
  padding: 4px !important;
  border-radius: 12px 4px 12px 4px !important;
  border: 1px solid rgba(226, 95, 77, 0.22) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 218, 210, 0.90), rgba(255, 255, 255, 0.92)) !important;
  box-shadow: 0 8px 18px rgba(226, 95, 77, 0.16) !important;
}

.home-page nav .brand-copy {
  display: grid !important;
  gap: 1px !important;
  line-height: 1.05 !important;
}

.home-page nav .brand-name {
  font-size: 18px !important;
  font-weight: 650 !important;
  letter-spacing: -0.01em !important;
}

.home-page nav .brand-subline {
  color: rgba(14, 14, 17, 0.52) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.home-page nav .nav-cta-short {
  display: none !important;
}

nav .nav-cta-short {
  display: none !important;
}

.home-page .mobile-line {
  display: inline !important;
}

.home-page .hero-cta-short {
  display: none !important;
}

.home-page .jp-decor {
  --sakura-branch: rgba(14, 14, 17, 0.50);
  --sakura-twig: rgba(14, 14, 17, 0.32);
  --sakura-petal: rgba(255, 218, 210, 0.88);
  --sakura-petal-stroke: rgba(14, 14, 17, 0.15);
  --sakura-center: #0e0e11;
  position: absolute !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.home-page .jp-symbols {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

.home-page .jp-decor svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

.home-page .jp-decor .branch,
.home-page .jp-decor .twig,
.home-page .dragon-body,
.home-page .dragon-spine,
.home-page .dragon-head,
.home-page .dragon-horn,
.home-page .dragon-whisker,
.home-page .dragon-claw {
  fill: none !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.home-page .jp-decor .branch {
  stroke: rgba(14, 14, 17, 0.50) !important;
  stroke-width: 5 !important;
}

.home-page .jp-decor .twig {
  stroke: rgba(14, 14, 17, 0.32) !important;
  stroke-width: 3 !important;
}

.home-page .jp-decor .flower ellipse {
  fill: rgba(255, 218, 210, 0.88) !important;
  stroke: rgba(14, 14, 17, 0.15) !important;
  stroke-width: 1.5 !important;
}

.home-page .jp-decor .flower circle {
  fill: var(--color-midnight-ink) !important;
}

.home-page .jp-decor .flower.small {
  opacity: 0.82 !important;
}

.home-page .jp-blossom-hero {
  display: none !important;
}

.home-page .jp-blossom-hero .branch {
  stroke: rgba(14, 14, 17, 0.34) !important;
}

.home-page .jp-blossom-hero .twig {
  stroke: rgba(14, 14, 17, 0.22) !important;
}

.home-page .jp-blossom-hero .flower circle {
  fill: rgba(14, 14, 17, 0.72) !important;
}

.home-page .jp-blossom-mid {
  width: 240px !important;
  height: 180px !important;
  left: max(10px, calc((100vw - 1200px) / 2 - 76px)) !important;
  top: 1200px !important;
  transform: rotate(-10deg) !important;
  opacity: 0.78 !important;
  z-index: 3 !important;
}

.home-page .section-blossom {
  width: clamp(190px, 20vw, 280px) !important;
  height: clamp(160px, 17vw, 238px) !important;
  top: clamp(22px, 4vw, 54px) !important;
  opacity: 0.68 !important;
  z-index: 0 !important;
}

.home-page .section-blossom.blossom-right {
  right: max(14px, calc((100vw - 1200px) / 2 - 88px)) !important;
  transform: rotate(7deg) !important;
}

.home-page .section-blossom.blossom-left {
  left: max(12px, calc((100vw - 1200px) / 2 - 92px)) !important;
  transform: rotate(-13deg) scale(0.92) !important;
}

.home-page .section-blossom.light-blossom {
  --sakura-branch: rgba(255, 255, 255, 0.58);
  --sakura-twig: rgba(255, 218, 210, 0.50);
  --sakura-petal: rgba(255, 218, 210, 0.92);
  --sakura-petal-stroke: rgba(255, 255, 255, 0.32);
  --sakura-center: rgba(255, 255, 255, 0.92);
  opacity: 0.54 !important;
}

.home-page .section-blossom.light-blossom .branch {
  stroke: rgba(255, 255, 255, 0.58) !important;
}

.home-page .section-blossom.light-blossom .twig {
  stroke: rgba(255, 218, 210, 0.50) !important;
}

.home-page .section-blossom.light-blossom .flower ellipse {
  fill: rgba(255, 218, 210, 0.92) !important;
  stroke: rgba(255, 255, 255, 0.32) !important;
}

.home-page .section-blossom.light-blossom .flower circle {
  fill: rgba(255, 255, 255, 0.92) !important;
}

.home-page .jp-dragon {
  width: min(520px, 42vw) !important;
  height: 260px !important;
  right: max(18px, calc((100vw - 1200px) / 2 - 74px)) !important;
  top: 3560px !important;
  opacity: 0.26 !important;
  z-index: 1 !important;
}

.home-page .dragon-body {
  stroke: rgba(255, 255, 255, 0.92) !important;
  stroke-width: 11 !important;
}

.home-page .dragon-spine,
.home-page .dragon-head,
.home-page .dragon-horn,
.home-page .dragon-whisker,
.home-page .dragon-claw {
  stroke: rgba(255, 218, 210, 0.92) !important;
  stroke-width: 4 !important;
}

.home-page .dragon-eye {
  fill: rgba(255, 218, 210, 0.95) !important;
}

.home-page .hero {
  justify-content: center !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.46) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,0.34) 1px, transparent 1px),
    #fff7f3 !important;
  background-size: 72px 72px, 72px 72px, auto !important;
}

.home-page .hero-poster-art,
.home-page .hero-poster-art-mobile {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  z-index: 0 !important;
  pointer-events: none !important;
  user-select: none !important;
}

.home-page .hero-poster-art-mobile {
  display: none !important;
}

.home-page .hero::before,
.home-page .hero::after {
  content: "" !important;
  position: absolute !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.home-page .hero::before {
  inset: 0 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.34) 34%, rgba(255, 255, 255, 0.04) 100%),
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.70) 0 220px, rgba(255, 255, 255, 0.30) 360px, transparent 620px) !important;
  opacity: 1 !important;
}

.home-page .hero::after {
  width: 168px !important;
  height: 168px !important;
  right: max(24px, calc((100vw - 1200px) / 2)) !important;
  bottom: 132px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(14, 14, 17, 0.18) !important;
  background:
    linear-gradient(90deg, transparent 48%, rgba(14, 14, 17, 0.13) 49% 51%, transparent 52%),
    linear-gradient(0deg, transparent 48%, rgba(14, 14, 17, 0.13) 49% 51%, transparent 52%) !important;
  opacity: 0.65 !important;
}

.home-page .japanese-seal,
.home-page .jp-seal {
  position: absolute !important;
  pointer-events: none !important;
  width: 74px !important;
  height: 74px !important;
  border-radius: 18px 6px 18px 6px !important;
  display: grid !important;
  place-items: center !important;
  color: rgba(14, 14, 17, 0.68) !important;
  border: 1px solid rgba(255, 255, 255, 0.48) !important;
  background: rgba(255, 255, 255, 0.18) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  writing-mode: vertical-rl !important;
  letter-spacing: 0.12em !important;
  backdrop-filter: blur(10px) !important;
  opacity: 0.78 !important;
}

.home-page .japanese-seal {
  top: 126px !important;
  left: clamp(-96px, -5vw, -56px) !important;
}

.home-page .section-seal {
  width: 82px !important;
  height: 82px !important;
  z-index: 0 !important;
  opacity: 0.18 !important;
  color: var(--color-midnight-ink) !important;
  background: rgba(255, 255, 255, 0.34) !important;
  transform: rotate(-8deg) !important;
}

.home-page .section-seal.light-seal {
  color: var(--color-canvas-white) !important;
  border-color: rgba(255, 255, 255, 0.30) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  opacity: 0.22 !important;
}

.home-page .section-seal.seal-top-left {
  left: max(20px, calc((100vw - 1200px) / 2 - 74px)) !important;
  top: 42px !important;
}

.home-page .section-seal.seal-top-right {
  right: max(22px, calc((100vw - 1200px) / 2 - 72px)) !important;
  top: 42px !important;
  transform: rotate(9deg) !important;
}

.home-page .section-seal.seal-bottom-left {
  left: max(20px, calc((100vw - 1200px) / 2 - 70px)) !important;
  bottom: 42px !important;
  transform: rotate(7deg) !important;
}

.home-page .section-seal.seal-bottom-right {
  right: max(22px, calc((100vw - 1200px) / 2 - 68px)) !important;
  bottom: 42px !important;
}

.home-page .hero-content {
  position: relative !important;
  z-index: 2 !important;
  width: min(900px, calc(100vw - 40px)) !important;
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  padding: 42px 0 0 !important;
}

.home-page .hero h1 {
  color: rgba(14, 14, 17, 0.84) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  text-align: center !important;
  font-size: clamp(60px, 5.5vw, 92px) !important;
}

.home-page .hero h1 .gradient {
  background: linear-gradient(100deg, #6f55cf 0%, #8d536d 46%, #e25f4d 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #8d536d !important;
}

.home-page .hero .btn-primary,
.home-page .demo-window .btn-primary {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 218, 210, 0.94)) !important;
  border-color: rgba(14, 14, 17, 0.16) !important;
  color: var(--color-midnight-ink) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.56),
    0 16px 36px rgba(254, 147, 125, 0.24) !important;
}

.home-page .hero .btn-primary:hover,
.home-page .demo-window .btn-primary:hover {
  background: linear-gradient(135deg, #ffffff, rgba(255, 228, 222, 0.98)) !important;
  border-color: rgba(14, 14, 17, 0.24) !important;
  color: var(--color-midnight-ink) !important;
}

.home-page .hero .btn-ghost {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(14, 14, 17, 0.18) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24) !important;
}

.home-page .hero-badge,
.home-page .hero-subtitle,
.home-page .hero-buttons {
  margin-left: auto !important;
  margin-right: auto !important;
}

.home-page .hero-buttons {
  justify-content: center !important;
}

.home-page .demo-preview {
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.home-page .demo-window {
  border-radius: 4px 24px 24px 24px !important;
  position: relative !important;
  overflow: visible !important;
}

.home-page .demo-window::after {
  content: "" !important;
  position: absolute !important;
  left: 28px !important;
  right: 28px !important;
  bottom: -12px !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.50), rgba(14, 14, 17, 0.12), transparent) !important;
  transform: rotate(-1deg) !important;
}

.home-page .demo-floating-logo {
  background: #ffffff !important;
}

.home-page .demo-floating-logo img {
  filter: none !important;
}

.home-page .section-kicker {
  color: var(--color-supporting-gray) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin: 0 0 12px !important;
  text-transform: uppercase !important;
}

.home-page .productivity-section,
.home-page .industry-section,
.home-page .home-faq-section,
.home-page .problem-different-section,
.home-page .who-for-section,
.home-page .workflow-section,
.home-page .agent-integration-section {
  position: relative !important;
  z-index: 1 !important;
  overflow: hidden !important;
  padding: clamp(72px, 10vw, 108px) clamp(20px, 5vw, 56px) !important;
}

.home-page .productivity-section .fade-in,
.home-page .industry-section .fade-in,
.home-page .home-faq-section .fade-in,
.home-page .problem-different-section .fade-in,
.home-page .who-for-section .fade-in,
.home-page .workflow-section .fade-in,
.home-page .agent-integration-section .fade-in {
  opacity: 1 !important;
  transform: none !important;
}

.home-page .problem-different-inner,
.home-page .who-for-inner,
.home-page .workflow-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.home-page .productivity-inner,
.home-page .industry-header,
.home-page .industry-grid,
.home-page .home-faq-inner,
.home-page .problem-different-inner,
.home-page .who-for-inner,
.home-page .workflow-inner,
.home-page .agent-shell,
.home-page .cta-section > .fade-in {
  position: relative !important;
  z-index: 1 !important;
}

.home-page .problem-different-section {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    var(--color-near-black) !important;
  background-size: 72px 72px, 72px 72px, auto !important;
  color: var(--color-canvas-white) !important;
}

.home-page .problem-different-inner {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.home-page .problem-panel,
.home-page .different-panel {
  min-height: 520px !important;
  padding: clamp(28px, 5vw, 56px) !important;
  border-radius: 24px !important;
  position: relative !important;
  overflow: hidden !important;
}

.home-page .problem-panel::after,
.home-page .different-panel::after,
.home-page .agent-copy::after {
  content: "" !important;
  position: absolute !important;
  width: 220px !important;
  height: 1px !important;
  right: 36px !important;
  top: 38px !important;
  transform: rotate(-12deg) !important;
  background: linear-gradient(90deg, transparent, currentColor, transparent) !important;
  opacity: 0.22 !important;
}

.home-page .problem-panel {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
}

.home-page .different-panel {
  background:
    radial-gradient(circle at 80% 22%, rgba(255, 255, 255, 0.42), transparent 26%),
    var(--color-peach-halo) !important;
  color: var(--color-midnight-ink) !important;
}

.home-page .problem-panel .section-kicker,
.home-page .problem-panel h2,
.home-page .problem-panel li {
  color: var(--color-canvas-white) !important;
}

.home-page .different-panel .section-kicker,
.home-page .different-panel h2,
.home-page .different-panel li {
  color: var(--color-midnight-ink) !important;
}

.home-page .problem-panel h2,
.home-page .different-panel h2,
.home-page .who-for-header h2,
.home-page .workflow-copy h2 {
  font-size: clamp(36px, 4.7vw, 58px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em !important;
  font-weight: 400 !important;
  margin: 0 0 32px !important;
}

.home-page .problem-list,
.home-page .different-list {
  display: grid !important;
  gap: 18px !important;
  list-style: none !important;
  margin: 0 0 36px !important;
  padding: 0 !important;
}

.home-page .problem-list li,
.home-page .different-list li {
  position: relative !important;
  padding-left: 34px !important;
  font-size: 18px !important;
  line-height: 1.45 !important;
}

.home-page .problem-list li::before,
.home-page .different-list li::before {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  display: inline-grid !important;
  place-items: center !important;
  font-size: 14px !important;
}

.home-page .problem-list li::before {
  content: "x" !important;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
  color: rgba(255, 255, 255, 0.74) !important;
}

.home-page .different-list li::before {
  content: "" !important;
  background: var(--color-midnight-ink) !important;
}

.home-page .who-for-section {
  background: #fff !important;
}

.home-page .who-for-header {
  max-width: 840px !important;
  margin-bottom: 42px !important;
}

.home-page .who-for-header h2,
.home-page .workflow-copy h2 {
  color: var(--color-near-black) !important;
}

.home-page .who-card-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.home-page .who-card {
  min-height: 300px !important;
  padding: 24px !important;
  border-radius: 4px 24px 24px 24px !important;
  border: 1px solid rgba(14, 14, 17, 0.1) !important;
  background: rgba(255, 255, 255, 0.66) !important;
  position: relative !important;
  overflow: hidden !important;
}

.home-page .who-icon {
  display: block !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  margin-bottom: 80px !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 218, 210, 0.92) 0 35%, transparent 36%),
    linear-gradient(125deg, rgba(65, 103, 233, 0.2), rgba(255, 147, 124, 0.24)),
    #fff !important;
  border: 1px solid rgba(14, 14, 17, 0.12) !important;
}

.home-page .who-card h3 {
  color: var(--color-near-black) !important;
  font-size: 24px !important;
  line-height: 1.15 !important;
  font-weight: 400 !important;
  margin: 0 0 12px !important;
}

.home-page .who-card p {
  color: var(--color-slate-gray) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

.home-page .workflow-section {
  background:
    linear-gradient(90deg, rgba(14, 14, 17, 0.025) 1px, transparent 1px),
    var(--color-peach-halo) !important;
  background-size: 64px 64px, auto !important;
}

.home-page .workflow-inner {
  display: grid !important;
  grid-template-columns: minmax(260px, 0.72fr) minmax(520px, 1.28fr) !important;
  gap: clamp(28px, 5vw, 64px) !important;
  align-items: start !important;
}

.home-page .workflow-copy p {
  color: var(--color-slate-gray) !important;
  font-size: 18px !important;
  line-height: 1.54 !important;
  margin: 0 !important;
}

.home-page .workflow-container {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  position: relative !important;
}

.home-page .workflow-container::before {
  content: "" !important;
  position: absolute !important;
  left: 10% !important;
  right: 10% !important;
  top: 42px !important;
  height: 1px !important;
  background: rgba(14, 14, 17, 0.14) !important;
}

.home-page .workflow-step {
  position: relative !important;
  min-height: 340px !important;
  padding: 24px !important;
  border-radius: 4px 24px 24px 24px !important;
  background: rgba(255, 255, 255, 0.66) !important;
  border: 1px solid rgba(14, 14, 17, 0.1) !important;
  overflow: hidden !important;
}

.home-page .workflow-number {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: var(--color-midnight-ink) !important;
  color: var(--color-canvas-white) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin-bottom: 92px !important;
}

.home-page .workflow-number::after {
  content: "" !important;
  position: absolute !important;
  width: 68px !important;
  height: 1px !important;
  background: rgba(14, 14, 17, 0.2) !important;
  transform: rotate(-18deg) !important;
}

.home-page .workflow-step h3 {
  color: var(--color-near-black) !important;
  font-size: 26px !important;
  line-height: 1.16 !important;
  font-weight: 400 !important;
  margin: 0 0 12px !important;
}

.home-page .workflow-step p {
  color: var(--color-slate-gray) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

.home-page .agent-integration-section {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    radial-gradient(circle at 74% 18%, rgba(255, 147, 124, 0.26), transparent 28%),
    radial-gradient(circle at 16% 74%, rgba(125, 104, 255, 0.20), transparent 32%),
    var(--color-near-black) !important;
  background-size: 72px 72px, 72px 72px, auto, auto, auto !important;
  color: var(--color-canvas-white) !important;
}

.home-page .agent-shell {
  max-width: 1200px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(320px, 0.92fr) minmax(440px, 1.08fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

.home-page .agent-copy {
  min-height: 520px !important;
  padding: clamp(28px, 5vw, 56px) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
}

.home-page .agent-copy .section-kicker,
.home-page .agent-copy h2 {
  color: var(--color-canvas-white) !important;
}

.home-page .agent-copy h2 {
  font-size: clamp(42px, 6vw, 78px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.025em !important;
  font-weight: 400 !important;
  margin: 0 0 22px !important;
}

.home-page .agent-copy p {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 18px !important;
  line-height: 1.55 !important;
  margin: 0 0 30px !important;
}

.home-page .agent-actions {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.home-page .agent-integration-section .agent-actions .btn-primary {
  background: var(--color-canvas-white) !important;
  color: var(--color-midnight-ink) !important;
  border-color: var(--color-canvas-white) !important;
}

.home-page .agent-integration-section .agent-actions .btn-ghost {
  color: var(--color-canvas-white) !important;
  border-color: rgba(255, 255, 255, 0.34) !important;
}

.home-page .agent-console {
  min-height: 520px !important;
  padding: 24px !important;
  border-radius: 4px 24px 24px 24px !important;
  background: rgba(255, 255, 255, 0.90) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: var(--color-midnight-ink) !important;
  display: grid !important;
  align-content: space-between !important;
}

.home-page .agent-console-top {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--color-supporting-gray) !important;
  font-size: 13px !important;
}

.home-page .agent-console-top span {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: rgba(14, 14, 17, 0.22) !important;
}

.home-page .agent-console-top strong {
  margin-left: auto !important;
  color: var(--color-midnight-ink) !important;
  font-weight: 600 !important;
}

.home-page .agent-flow {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 34px 0 36px !important;
}

.home-page .agent-node {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  width: min(64%, 360px) !important;
  min-height: 78px !important;
  border-radius: 20px !important;
  display: grid !important;
  place-items: center !important;
  padding: 16px 18px !important;
  text-align: center !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  border: 1px solid rgba(14, 14, 17, 0.1) !important;
  background: #fff !important;
}

.home-page .agent-flow .agent-node:nth-child(1) {
  justify-self: start !important;
}

.home-page .agent-flow .agent-node:nth-child(3) {
  justify-self: center !important;
}

.home-page .agent-flow .agent-node:nth-child(5) {
  justify-self: end !important;
}

.home-page .agent-flow .agent-node:nth-child(7) {
  justify-self: center !important;
}

.home-page .agent-flow .agent-node:nth-child(9) {
  justify-self: start !important;
}

.home-page .agent-node.user {
  background: rgba(255, 255, 255, 0.72) !important;
}

.home-page .agent-node.agent {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(232, 229, 246, 0.92)),
    #ffffff !important;
  border-color: rgba(125, 104, 255, 0.18) !important;
}

.home-page .agent-node.core {
  color: var(--color-midnight-ink) !important;
  border: 1px solid rgba(126, 78, 72, 0.22) !important;
  background:
    radial-gradient(circle at 19% 24%, rgba(255, 218, 210, 0.94) 0 10px, transparent 11px),
    radial-gradient(circle at 28% 34%, rgba(255, 180, 170, 0.72) 0 7px, transparent 8px),
    radial-gradient(circle at 79% 70%, rgba(255, 218, 210, 0.80) 0 12px, transparent 13px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 228, 222, 0.96) 46%, rgba(255, 248, 244, 0.90)) !important;
  box-shadow:
    inset 5px 0 0 rgba(226, 95, 77, 0.46),
    inset 0 0 0 1px rgba(255, 255, 255, 0.62),
    0 18px 40px rgba(226, 95, 77, 0.18) !important;
}

.home-page .agent-node.core::before {
  content: "" !important;
  position: absolute !important;
  width: 130px !important;
  height: 130px !important;
  right: -46px !important;
  bottom: -50px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(226, 95, 77, 0.16) !important;
  background:
    linear-gradient(90deg, transparent 48%, rgba(226, 95, 77, 0.12) 49% 51%, transparent 52%),
    linear-gradient(0deg, transparent 48%, rgba(226, 95, 77, 0.12) 49% 51%, transparent 52%) !important;
  opacity: 0.72 !important;
  z-index: 0 !important;
}

.home-page .agent-node.core::after {
  content: "\8981\7D04" !important;
  position: absolute !important;
  left: 16px !important;
  top: 12px !important;
  color: rgba(14, 14, 17, 0.30) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  writing-mode: vertical-rl !important;
  z-index: 0 !important;
}

.home-page .agent-line {
  position: relative !important;
  width: min(42%, 230px) !important;
  height: 44px !important;
  justify-self: center !important;
  margin: -2px 0 !important;
  background:
    radial-gradient(circle at 100% 100%, rgba(14, 14, 17, 0.22) 0 2px, transparent 3px),
    linear-gradient(135deg, transparent 49%, rgba(14, 14, 17, 0.24) 50%, transparent 52%) !important;
  border-right: 2px solid rgba(14, 14, 17, 0.24) !important;
  border-bottom: 2px solid rgba(14, 14, 17, 0.24) !important;
  border-radius: 0 0 28px 0 !important;
  transform: rotate(2deg) !important;
  opacity: 0.78 !important;
}

.home-page .agent-flow .agent-line:nth-child(4),
.home-page .agent-flow .agent-line:nth-child(8) {
  transform: scaleX(-1) rotate(2deg) !important;
}

.home-page .agent-flow .agent-line:nth-child(2) {
  justify-self: start !important;
  margin-left: 26% !important;
}

.home-page .agent-flow .agent-line:nth-child(4) {
  justify-self: end !important;
  margin-right: 24% !important;
}

.home-page .agent-flow .agent-line:nth-child(6) {
  justify-self: end !important;
  margin-right: 24% !important;
}

.home-page .agent-flow .agent-line:nth-child(8) {
  justify-self: start !important;
  margin-left: 26% !important;
}

.home-page .agent-line::after {
  content: "" !important;
  position: absolute !important;
  right: -6px !important;
  bottom: -5px !important;
  width: 11px !important;
  height: 11px !important;
  border-bottom: 2px solid rgba(14, 14, 17, 0.38) !important;
  border-right: 2px solid rgba(14, 14, 17, 0.38) !important;
  transform: rotate(45deg) !important;
}

.home-page .agent-line::before {
  content: "" !important;
  position: absolute !important;
  right: -2px !important;
  bottom: -2px !important;
  width: 32px !important;
  height: 2px !important;
  background: rgba(226, 95, 77, 0.32) !important;
  border-radius: 999px !important;
  transform: rotate(-18deg) !important;
  transform-origin: right center !important;
}

.home-page .agent-terminal {
  border-radius: 18px !important;
  background: var(--color-near-black) !important;
  color: var(--color-canvas-white) !important;
  padding: 18px !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important;
  font-size: 13px !important;
}

.home-page .agent-terminal p {
  margin: 0 0 8px !important;
  color: rgba(255, 255, 255, 0.76) !important;
}

.home-page .agent-terminal p:last-child {
  margin-bottom: 0 !important;
}

.home-page .agent-terminal span {
  display: inline-block !important;
  min-width: 58px !important;
  color: #ffdad2 !important;
}

.home-page .agent-platform-grid {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.home-page .agent-platform-card {
  min-height: 220px !important;
  padding: 22px !important;
  border-radius: 4px 24px 24px 24px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: var(--color-canvas-white) !important;
  text-decoration: none !important;
}

.home-page .industry-card::before,
.home-page .who-card::before,
.home-page .workflow-step::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 4px !important;
  background: var(--color-midnight-ink) !important;
  opacity: 0.9 !important;
}

.home-page .who-card {
  --who-accent: #ff6f61;
  --who-accent-soft: rgba(255, 111, 97, 0.18);
  --who-petal: rgba(255, 118, 104, 0.92);
  min-height: 340px !important;
  padding: 26px !important;
  border-radius: 6px 30px 30px 30px !important;
  border: 1px solid rgba(14, 14, 17, 0.12) !important;
  background:
    linear-gradient(90deg, rgba(14, 14, 17, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(14, 14, 17, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 82% 20%, var(--who-accent-soft), transparent 34%),
    rgba(255, 255, 255, 0.78) !important;
  background-size: 36px 36px, 36px 36px, auto, auto !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55) !important;
}

.home-page .who-card:nth-child(2) {
  --who-accent: #9370e9;
  --who-accent-soft: rgba(147, 112, 233, 0.18);
  --who-petal: rgba(147, 112, 233, 0.82);
}

.home-page .who-card:nth-child(3) {
  --who-accent: #4167e9;
  --who-accent-soft: rgba(65, 103, 233, 0.16);
  --who-petal: rgba(93, 132, 255, 0.84);
}

.home-page .who-card:nth-child(4) {
  --who-accent: #ffbc44;
  --who-accent-soft: rgba(255, 188, 68, 0.20);
  --who-petal: rgba(255, 188, 68, 0.88);
}

.home-page .who-card::before {
  left: 0 !important;
  right: auto !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 5px !important;
  background: var(--who-accent) !important;
  opacity: 1 !important;
}

.home-page .who-card::after {
  content: "" !important;
  position: absolute !important;
  right: -46px !important;
  top: -46px !important;
  width: 150px !important;
  height: 150px !important;
  border-radius: 50% !important;
  border: 1px solid color-mix(in srgb, var(--who-accent) 45%, transparent) !important;
  background:
    linear-gradient(90deg, transparent 48%, color-mix(in srgb, var(--who-accent) 28%, transparent) 49% 51%, transparent 52%),
    linear-gradient(0deg, transparent 48%, color-mix(in srgb, var(--who-accent) 22%, transparent) 49% 51%, transparent 52%) !important;
  opacity: 0.62 !important;
}

.home-page .who-icon {
  --card-branch: rgba(14, 14, 17, 0.42);
  --card-twig: rgba(14, 14, 17, 0.25);
  --card-petal: var(--who-petal);
  --card-petal-stroke: color-mix(in srgb, var(--who-accent) 18%, rgba(14, 14, 17, 0.08));
  --card-center: var(--color-midnight-ink);
  display: block !important;
  position: relative !important;
  z-index: 1 !important;
  width: 142px !important;
  height: 94px !important;
  margin: -8px 0 54px -6px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  filter: drop-shadow(0 14px 26px var(--who-accent-soft)) !important;
}

.home-page .who-icon svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

.home-page .who-card h3,
.home-page .who-card p {
  position: relative !important;
  z-index: 1 !important;
}

.home-page .platform-mark {
  display: block !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 13px !important;
  margin-bottom: 44px !important;
  background: var(--gradient-plasma-gradient-hue) !important;
}

.home-page .platform-mark.chatgpt {
  background: linear-gradient(135deg, #ffffff, #d9d7ff) !important;
}

.home-page .platform-mark.openclaw {
  background: linear-gradient(135deg, #61d394, #4167e9) !important;
}

.home-page .platform-mark.hermes {
  background: linear-gradient(135deg, #4167e9, #ffbc44) !important;
}

.home-page .agent-platform-card h3 {
  color: var(--color-canvas-white) !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  margin: 0 0 10px !important;
}

.home-page .agent-platform-card p {
  color: rgba(255, 255, 255, 0.68) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin: 0 0 22px !important;
}

.home-page .agent-platform-card strong {
  color: var(--color-canvas-white) !important;
  font-weight: 500 !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
}

.home-page .productivity-section {
  background:
    linear-gradient(90deg, rgba(14, 14, 17, 0.025) 1px, transparent 1px),
    var(--color-peach-halo) !important;
  background-size: 64px 64px, auto !important;
}

.home-page .productivity-inner,
.home-page .industry-header,
.home-page .industry-grid,
.home-page .home-faq-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.home-page .productivity-inner {
  display: grid !important;
  grid-template-columns: minmax(280px, 0.95fr) minmax(420px, 1.05fr) !important;
  gap: clamp(32px, 6vw, 72px) !important;
  align-items: center !important;
}

.home-page .productivity-copy h2,
.home-page .industry-header h2,
.home-page .home-faq-copy h2 {
  color: var(--color-near-black) !important;
  font-size: clamp(42px, 6vw, 72px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em !important;
  font-weight: 400 !important;
  margin: 0 0 20px !important;
}

.home-page .productivity-copy p,
.home-page .industry-header p,
.home-page .home-faq-copy p {
  color: var(--color-slate-gray) !important;
  font-size: 18px !important;
  line-height: 1.54 !important;
  max-width: 620px !important;
  margin: 0 0 28px !important;
}

.home-page .productivity-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.home-page .productivity-card {
  min-height: 220px !important;
  padding: 24px !important;
  border-radius: 4px 24px 24px 24px !important;
  background: rgba(255, 255, 255, 0.58) !important;
  border: 1px solid rgba(14, 14, 17, 0.08) !important;
  position: relative !important;
  overflow: hidden !important;
}

.home-page .productivity-card::after {
  content: "" !important;
  position: absolute !important;
  right: 18px !important;
  top: 18px !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(14, 14, 17, 0.12) !important;
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 218, 210, 0.55) 0 10%, transparent 11%),
    radial-gradient(circle at 76% 50%, rgba(255, 218, 210, 0.45) 0 10%, transparent 11%),
    radial-gradient(circle at 50% 76%, rgba(255, 218, 210, 0.50) 0 10%, transparent 11%),
    radial-gradient(circle at 24% 50%, rgba(255, 218, 210, 0.45) 0 10%, transparent 11%) !important;
  opacity: 0.5 !important;
}

.home-page .productivity-card .line-icon {
  display: block !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  margin-bottom: 28px !important;
  border: 1px solid rgba(14, 14, 17, 0.18) !important;
  background:
    linear-gradient(135deg, rgba(147, 112, 233, 0.18), rgba(255, 255, 255, 0)),
    #fff !important;
}

.home-page .productivity-card h3,
.home-page .industry-card h3 {
  color: var(--color-near-black) !important;
  font-size: 22px !important;
  line-height: 1.24 !important;
  font-weight: 400 !important;
  margin: 0 0 12px !important;
}

.home-page .productivity-card p,
.home-page .industry-card p,
.home-page .industry-card span,
.home-page .faq-list p {
  color: var(--color-slate-gray) !important;
  font-size: 15px !important;
  line-height: 1.58 !important;
  margin: 0 !important;
}

.home-page .productivity-card {
  --productivity-accent: #ff927c;
  --productivity-accent-soft: rgba(255, 147, 124, 0.16);
  --productivity-petal: rgba(255, 173, 162, 0.82);
  min-height: 238px !important;
  padding: 26px !important;
  border-radius: 6px 28px 28px 28px !important;
  border: 1px solid rgba(14, 14, 17, 0.075) !important;
  background:
    linear-gradient(90deg, rgba(14, 14, 17, 0.030) 1px, transparent 1px),
    linear-gradient(180deg, rgba(14, 14, 17, 0.024) 1px, transparent 1px),
    radial-gradient(circle at 88% 18%, var(--productivity-accent-soft), transparent 34%),
    rgba(255, 255, 255, 0.54) !important;
  background-size: 34px 34px, 34px 34px, auto, auto !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.52) !important;
}

.home-page .productivity-card:nth-child(2) {
  --productivity-accent: #cbbcff;
  --productivity-accent-soft: rgba(147, 112, 233, 0.13);
  --productivity-petal: rgba(190, 170, 255, 0.78);
}

.home-page .productivity-card:nth-child(3) {
  --productivity-accent: #9fb8ff;
  --productivity-accent-soft: rgba(65, 103, 233, 0.12);
  --productivity-petal: rgba(147, 174, 255, 0.78);
}

.home-page .productivity-card:nth-child(4) {
  --productivity-accent: #ffd38a;
  --productivity-accent-soft: rgba(255, 188, 68, 0.14);
  --productivity-petal: rgba(255, 205, 118, 0.80);
}

.home-page .productivity-card::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 4px !important;
  background: linear-gradient(180deg, var(--productivity-accent), transparent 88%) !important;
  opacity: 0.72 !important;
}

.home-page .productivity-card::after {
  right: -34px !important;
  top: -34px !important;
  width: 112px !important;
  height: 112px !important;
  border: 1px solid color-mix(in srgb, var(--productivity-accent) 40%, transparent) !important;
  background:
    linear-gradient(90deg, transparent 48%, color-mix(in srgb, var(--productivity-accent) 19%, transparent) 49% 51%, transparent 52%),
    linear-gradient(0deg, transparent 48%, color-mix(in srgb, var(--productivity-accent) 17%, transparent) 49% 51%, transparent 52%) !important;
  opacity: 0.44 !important;
}

.home-page .productivity-card .line-icon {
  --card-branch: rgba(14, 14, 17, 0.34);
  --card-twig: rgba(14, 14, 17, 0.20);
  --card-petal: var(--productivity-petal);
  --card-petal-stroke: color-mix(in srgb, var(--productivity-accent) 16%, rgba(14, 14, 17, 0.07));
  --card-center: rgba(14, 14, 17, 0.74);
  display: block !important;
  position: relative !important;
  z-index: 1 !important;
  width: 116px !important;
  height: 78px !important;
  margin: -4px 0 22px -4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  filter: drop-shadow(0 10px 20px var(--productivity-accent-soft)) !important;
}

.home-page .productivity-card .line-icon svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

.home-page .productivity-card h3,
.home-page .productivity-card p {
  position: relative !important;
  z-index: 1 !important;
}

.home-page .industry-section {
  background: #fff !important;
}

.home-page .industry-header {
  text-align: center !important;
  margin-bottom: 48px !important;
}

.home-page .industry-header p {
  margin-left: auto !important;
  margin-right: auto !important;
}

.home-page .industry-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.home-page .industry-card {
  --industry-accent: #ff927c;
  --industry-accent-soft: rgba(255, 147, 124, 0.13);
  --industry-petal: rgba(255, 173, 162, 0.76);
  min-height: 282px !important;
  padding: 98px 26px 26px !important;
  border-radius: 6px 28px 28px 28px !important;
  background:
    linear-gradient(90deg, rgba(14, 14, 17, 0.026) 1px, transparent 1px),
    linear-gradient(180deg, rgba(14, 14, 17, 0.020) 1px, transparent 1px),
    radial-gradient(circle at 88% 18%, var(--industry-accent-soft), transparent 34%),
    rgba(255, 255, 255, 0.72) !important;
  background-size: 34px 34px, 34px 34px, auto, auto !important;
  border: 1px solid rgba(14, 14, 17, 0.085) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.60) !important;
  position: relative !important;
  overflow: hidden !important;
}

.home-page .industry-card:nth-child(2) {
  --industry-accent: #cbbcff;
  --industry-accent-soft: rgba(147, 112, 233, 0.12);
  --industry-petal: rgba(190, 170, 255, 0.74);
}

.home-page .industry-card:nth-child(3) {
  --industry-accent: #9fb8ff;
  --industry-accent-soft: rgba(65, 103, 233, 0.11);
  --industry-petal: rgba(147, 174, 255, 0.74);
}

.home-page .industry-card:nth-child(4) {
  --industry-accent: #ffd38a;
  --industry-accent-soft: rgba(255, 188, 68, 0.13);
  --industry-petal: rgba(255, 205, 118, 0.76);
}

.home-page .industry-card:nth-child(5) {
  --industry-accent: #8fd9b6;
  --industry-accent-soft: rgba(97, 211, 148, 0.12);
  --industry-petal: rgba(129, 217, 180, 0.74);
}

.home-page .industry-card:nth-child(6) {
  --industry-accent: #f4a7d8;
  --industry-accent-soft: rgba(244, 167, 216, 0.13);
  --industry-petal: rgba(244, 167, 216, 0.76);
}

.home-page .industry-card::before {
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 4px !important;
  background: linear-gradient(180deg, var(--industry-accent), transparent 86%) !important;
  opacity: 0.78 !important;
}

.home-page .industry-card::after {
  content: "" !important;
  position: absolute !important;
  right: -32px !important;
  top: -34px !important;
  width: 118px !important;
  height: 118px !important;
  border-radius: 50% !important;
  border: 1px solid color-mix(in srgb, var(--industry-accent) 40%, transparent) !important;
  background:
    linear-gradient(90deg, transparent 48%, color-mix(in srgb, var(--industry-accent) 18%, transparent) 49% 51%, transparent 52%),
    linear-gradient(0deg, transparent 48%, color-mix(in srgb, var(--industry-accent) 16%, transparent) 49% 51%, transparent 52%) !important;
  opacity: 0.44 !important;
}

.home-page .industry-card h3,
.home-page .industry-card p,
.home-page .industry-card .industry-icon,
.home-page .industry-card span {
  position: relative !important;
  z-index: 1 !important;
}

.home-page .industry-card .industry-icon {
  --card-branch: rgba(14, 14, 17, 0.34);
  --card-twig: rgba(14, 14, 17, 0.20);
  --card-petal: var(--industry-petal);
  --card-petal-stroke: color-mix(in srgb, var(--industry-accent) 16%, rgba(14, 14, 17, 0.07));
  --card-center: rgba(14, 14, 17, 0.72);
  display: block !important;
  width: 116px !important;
  height: 78px !important;
  margin: -72px 0 20px -4px !important;
  filter: drop-shadow(0 10px 20px var(--industry-accent-soft)) !important;
}

.home-page .industry-card .industry-icon svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

.home-page .industry-card span {
  display: inline-flex !important;
  margin-top: 24px !important;
  padding: 7px 11px !important;
  border-radius: 999px !important;
  color: rgba(14, 14, 17, 0.62) !important;
  background: color-mix(in srgb, var(--industry-accent) 14%, rgba(255, 255, 255, 0.62)) !important;
  border: 1px solid color-mix(in srgb, var(--industry-accent) 28%, rgba(14, 14, 17, 0.08)) !important;
}

.home-page .home-faq-section {
  background: var(--color-near-black) !important;
  color: var(--color-canvas-white) !important;
}

.home-page .home-faq-inner {
  display: grid !important;
  grid-template-columns: minmax(260px, 0.8fr) minmax(420px, 1.2fr) !important;
  gap: clamp(32px, 6vw, 72px) !important;
  align-items: start !important;
}

.home-page .home-faq-copy h2,
.home-page .home-faq-copy .section-kicker {
  color: var(--color-canvas-white) !important;
}

.home-page .home-faq-copy p {
  color: rgba(255, 255, 255, 0.68) !important;
}

.home-page .home-faq-section .btn-ghost {
  color: var(--color-canvas-white) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

.home-page .faq-list {
  display: grid !important;
  gap: 10px !important;
}

.home-page .faq-list details {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 18px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.home-page .faq-list summary {
  cursor: pointer !important;
  list-style: none !important;
  padding: 20px 22px !important;
  color: var(--color-canvas-white) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
}

.home-page .faq-list summary::-webkit-details-marker {
  display: none !important;
}

.home-page .faq-list summary::after {
  content: "+" !important;
  float: right !important;
  color: rgba(255, 255, 255, 0.64) !important;
}

.home-page .faq-list details[open] summary::after {
  content: "-" !important;
}

.home-page .faq-list p {
  color: rgba(255, 255, 255, 0.68) !important;
  padding: 0 22px 22px !important;
}

@media (max-width: 920px) {
  .home-page .productivity-inner,
  .home-page .home-faq-inner,
  .home-page .problem-different-inner,
  .home-page .workflow-inner,
  .home-page .agent-shell {
    grid-template-columns: 1fr !important;
  }

  .home-page .industry-grid,
  .home-page .who-card-grid,
  .home-page .workflow-container,
  .home-page .agent-platform-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .home-page .problem-panel,
  .home-page .different-panel {
    min-height: auto !important;
  }
}

@media (max-width: 640px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  .home-page nav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
    justify-items: start !important;
    gap: 12px !important;
    min-height: 154px !important;
    padding: 12px 16px 14px !important;
    overflow: hidden !important;
  }

  .home-page nav .nav-buttons,
  .home-page nav #navLogout,
  .home-page nav #navLogin {
    width: fit-content !important;
    max-width: calc(100vw - 32px) !important;
    min-width: 0 !important;
    overflow: hidden !important;
    justify-self: center !important;
  }

  .home-page nav #navLogout,
  .home-page nav #navLogin {
    grid-template-columns: auto auto !important;
    gap: 8px !important;
  }

  .home-page nav #navLogin {
    grid-template-columns: 1fr !important;
  }

  .home-page nav #navLogout[style*="grid"],
  .home-page nav #navLogin[style*="grid"] {
    display: grid !important;
  }

  .home-page nav .nav-buttons .btn {
    min-height: 42px !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 18px !important;
    font-size: clamp(13px, 3.9vw, 15px) !important;
    white-space: nowrap !important;
    text-align: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .home-page nav .nav-buttons .btn-primary {
    min-width: 0 !important;
  }

  .home-page nav .nav-cta-full {
    display: none !important;
  }

  .home-page nav .nav-cta-short {
    display: inline !important;
  }

  nav .nav-buttons,
  nav #navLogout,
  nav #navLogin {
    width: fit-content !important;
    max-width: calc(100vw - 32px) !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  nav #navLogout,
  nav #navLogin {
    grid-template-columns: auto auto !important;
    gap: 8px !important;
  }

  nav #navLogin {
    grid-template-columns: 1fr !important;
  }

  nav #navLogout[style*="grid"],
  nav #navLogin[style*="grid"] {
    display: grid !important;
  }

  nav #navLogin[style*="none"],
  nav #navLogout[style*="none"] {
    display: none !important;
  }

  nav .nav-buttons .btn {
    min-height: 42px !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 18px !important;
    font-size: clamp(13px, 3.9vw, 15px) !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  nav .nav-cta-full {
    display: none !important;
  }

  nav .nav-cta-short {
    display: inline !important;
  }

  .home-page .hero {
    padding-top: 214px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    justify-content: center !important;
  }

  .home-page .hero-poster-art {
    display: none !important;
  }

  .home-page .hero-poster-art-mobile {
    display: block !important;
    object-position: center center !important;
    opacity: 0.90 !important;
  }

  .home-page .hero::before {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.74) 42%, rgba(255, 255, 255, 0.42) 100%),
      linear-gradient(90deg, rgba(255, 247, 243, 0.72) 0%, rgba(255, 255, 255, 0.82) 100%) !important;
  }

  .home-page .hero-content {
    width: 100% !important;
    max-width: calc(100vw - 32px) !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 0 !important;
    text-align: center !important;
  }

  .home-page .hero-badge {
    width: min(100%, 420px) !important;
    max-width: calc(100vw - 40px) !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.28 !important;
    padding: 10px 16px !important;
    font-size: clamp(13px, 3.7vw, 15px) !important;
  }

  .home-page .hero h1 {
    font-size: clamp(30px, 8.9vw, 37px) !important;
    letter-spacing: -0.7px !important;
    line-height: 1.12 !important;
    max-width: 100% !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    text-wrap: balance !important;
    text-align: center !important;
  }

  .home-page .hero h1 .mobile-line {
    max-width: 100% !important;
    white-space: nowrap !important;
  }

  .home-page .hero h1 .mobile-line {
    display: block !important;
    padding-bottom: 0.04em !important;
  }

  .home-page .hero h1 .gradient.mobile-line {
    margin-bottom: 0.08em !important;
  }

  .home-page .hero-subtitle {
    max-width: calc(100vw - 40px) !important;
    font-size: clamp(18px, 5vw, 22px) !important;
    line-height: 1.45 !important;
    overflow-wrap: break-word !important;
  }

  .home-page .hero-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: calc(100vw - 32px) !important;
    justify-content: center !important;
  }

  .home-page .hero-buttons .btn {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 0 10px !important;
    font-size: clamp(14px, 3.9vw, 16px) !important;
    white-space: nowrap !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .home-page .hero-buttons .btn-primary {
    font-size: clamp(13px, 3.7vw, 15px) !important;
  }

  .home-page .hero-cta-full {
    display: none !important;
  }

  .home-page .hero-cta-short {
    display: inline !important;
  }

  .home-page .jp-blossom-hero {
    width: 170px !important;
    height: 144px !important;
    right: -18px !important;
    top: 340px !important;
    opacity: 0.56 !important;
  }

  .home-page .japanese-seal {
    display: none !important;
  }

  .home-page .section-seal {
    width: 58px !important;
    height: 58px !important;
    font-size: 17px !important;
    opacity: 0.12 !important;
  }

  .home-page .section-seal.light-seal {
    opacity: 0.16 !important;
  }

  .home-page .section-seal.seal-top-left,
  .home-page .section-seal.seal-bottom-left {
    left: 10px !important;
  }

  .home-page .section-seal.seal-top-right,
  .home-page .section-seal.seal-bottom-right {
    right: 10px !important;
  }

  .home-page .jp-blossom-mid {
    display: none !important;
  }

  .home-page .section-blossom {
    width: 150px !important;
    height: 128px !important;
    top: 22px !important;
    opacity: 0.36 !important;
  }

  .home-page .section-blossom.blossom-left {
    left: -40px !important;
  }

  .home-page .section-blossom.blossom-right {
    right: -34px !important;
  }

  .home-page .jp-dragon {
    width: 280px !important;
    right: -90px !important;
    opacity: 0.20 !important;
  }

  .home-page .productivity-grid,
  .home-page .industry-grid,
  .home-page .who-card-grid,
  .home-page .workflow-container,
  .home-page .agent-platform-grid,
  .home-page .agent-flow {
    grid-template-columns: 1fr !important;
  }

  .home-page .productivity-copy h2,
  .home-page .industry-header h2,
  .home-page .home-faq-copy h2,
  .home-page .problem-panel h2,
  .home-page .different-panel h2,
  .home-page .who-for-header h2,
  .home-page .workflow-copy h2 {
    font-size: clamp(38px, 11vw, 52px) !important;
  }

  .home-page .who-icon,
  .home-page .workflow-number {
    margin-bottom: 42px !important;
  }

  .home-page .workflow-container::before {
    display: none !important;
  }

  .home-page .agent-console,
  .home-page .agent-copy {
    min-height: auto !important;
  }

  .home-page nav .logo {
    width: 100% !important;
    max-width: calc(100vw - 32px) !important;
    min-height: 58px !important;
    gap: 9px !important;
    padding: 7px 42px 7px 8px !important;
  }

  .home-page nav .logo::after {
    content: "\4F8D" !important;
    right: 11px !important;
    width: 24px !important;
    height: 24px !important;
    font-size: 13px !important;
  }

  .home-page nav .logo img {
    width: 31px !important;
    height: 31px !important;
    padding: 3px !important;
  }

  .home-page nav .brand-name {
    font-size: clamp(17px, 4.8vw, 20px) !important;
    white-space: nowrap !important;
  }

  .home-page nav .brand-subline {
    display: block !important;
    font-size: 8px !important;
    letter-spacing: 0.10em !important;
  }

  .home-page .agent-line {
    width: 1px !important;
    height: 34px !important;
    justify-self: center !important;
  }

  .home-page .platform-mark {
    margin-bottom: 34px !important;
  }
}

/* Sakura Samuraizer shared language for all inner pages */
body:not(.home-page) {
  position: relative !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
  background:
    linear-gradient(90deg, rgba(14, 14, 17, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(14, 14, 17, 0.025) 1px, transparent 1px),
    radial-gradient(circle at 12% 16%, rgba(147, 112, 233, 0.16), transparent 28%),
    radial-gradient(circle at 86% 10%, rgba(255, 147, 124, 0.20), transparent 30%),
    linear-gradient(135deg, #fffaf8 0%, #fff 42%, #f3f0ff 100%) !important;
  background-size: 72px 72px, 72px 72px, auto, auto, auto !important;
}

body:not(.home-page)::before,
body:not(.home-page)::after {
  content: "" !important;
  position: fixed !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

body:not(.home-page)::before {
  width: min(34vw, 360px) !important;
  height: min(28vw, 300px) !important;
  right: -42px !important;
  top: 96px !important;
  opacity: 0.34 !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 260 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 176 C78 120 118 90 202 36' fill='none' stroke='rgba(14,14,17,.38)' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M94 110 C126 108 152 120 176 144' fill='none' stroke='rgba(14,14,17,.20)' stroke-width='3' stroke-linecap='round'/%3E%3Cg fill='rgba(255,218,210,.88)' stroke='rgba(14,14,17,.12)' stroke-width='1.5'%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(18 82 124)'/%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(90 82 124)'/%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(162 82 124)'/%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(234 82 124)'/%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(306 82 124)'/%3E%3C/g%3E%3Ccircle cx='82' cy='124' r='6' fill='rgba(14,14,17,.72)'/%3E%3Cg opacity='.78' fill='rgba(255,218,210,.84)' stroke='rgba(14,14,17,.10)' stroke-width='1.2'%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(10 150 66)'/%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(82 150 66)'/%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(154 150 66)'/%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(226 150 66)'/%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(298 150 66)'/%3E%3C/g%3E%3Ccircle cx='150' cy='66' r='4.5' fill='rgba(14,14,17,.68)'/%3E%3C/svg%3E") !important;
}

body:not(.home-page)::after {
  content: "\8981\7D04" !important;
  width: 88px !important;
  height: 88px !important;
  left: max(16px, calc((100vw - 1200px) / 2 - 76px)) !important;
  top: 160px !important;
  border-radius: 20px 7px 20px 7px !important;
  display: grid !important;
  place-items: center !important;
  color: rgba(14, 14, 17, 0.16) !important;
  border: 1px solid rgba(14, 14, 17, 0.08) !important;
  background: rgba(255, 255, 255, 0.26) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42) !important;
}

body:not(.home-page) header {
  position: relative !important;
  z-index: 5 !important;
}

body:not(.home-page):not(.app-page) nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 100 !important;
}

body:not(.home-page) main,
body:not(.home-page) .container,
body:not(.home-page) .section,
body:not(.home-page) footer,
body:not(.home-page) .content,
body:not(.home-page) .page-container,
body:not(.home-page) .auth-container,
body:not(.home-page) .admin-container,
body:not(.home-page) .dashboard-container {
  position: relative !important;
  z-index: 1 !important;
}

body:not(.home-page) nav .logo {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 54px !important;
  padding: 7px 42px 7px 8px !important;
  border: 1px solid rgba(14, 14, 17, 0.10) !important;
  border-radius: 6px 24px 24px 6px !important;
  background:
    radial-gradient(circle at 24% 50%, rgba(255, 218, 210, 0.58), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 248, 244, 0.92)) !important;
  color: var(--color-midnight-ink) !important;
  text-decoration: none !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    0 12px 32px rgba(126, 78, 72, 0.08) !important;
}

body:not(.home-page) nav .logo::after {
  content: "\4F8D" !important;
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 8px 3px 8px 3px !important;
  display: grid !important;
  place-items: center !important;
  color: rgba(14, 14, 17, 0.42) !important;
  border: 1px solid rgba(226, 95, 77, 0.18) !important;
  background: rgba(255, 218, 210, 0.44) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  transform: translateY(-50%) rotate(-6deg) !important;
}

body:not(.home-page) nav .logo img,
body:not(.home-page) .logo img {
  width: 38px !important;
  height: 38px !important;
  padding: 4px !important;
  border-radius: 12px 4px 12px 4px !important;
  border: 1px solid rgba(226, 95, 77, 0.22) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 218, 210, 0.90), rgba(255, 255, 255, 0.92)) !important;
  box-shadow: 0 8px 18px rgba(226, 95, 77, 0.16) !important;
}

body:not(.home-page) h1,
body:not(.home-page) .hero h1,
body:not(.home-page) .section-title,
body:not(.home-page) .page-title {
  color: rgba(14, 14, 17, 0.88) !important;
  letter-spacing: -0.02em !important;
}

body:not(.home-page) h1::before,
body:not(.home-page) .section-title::before,
body:not(.home-page) .page-title::before {
  content: "\8981\7D04" !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  margin-right: 12px !important;
  vertical-align: 0.10em !important;
  border-radius: 12px 4px 12px 4px !important;
  color: rgba(14, 14, 17, 0.48) !important;
  background: rgba(255, 218, 210, 0.46) !important;
  border: 1px solid rgba(226, 95, 77, 0.18) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
}

body:not(.home-page) .card,
body:not(.home-page) .feature-card,
body:not(.home-page) .type-card,
body:not(.home-page) .pricing-card,
body:not(.home-page) .faq-item,
body:not(.home-page) .auth-card,
body:not(.home-page) .form-card,
body:not(.home-page) .admin-card,
body:not(.home-page) .stat-card,
body:not(.home-page) .chart-card,
body:not(.home-page) .quick-access-card,
body:not(.home-page) .setup-card,
body:not(.home-page) .step-card,
body:not(.home-page) .content-card,
body:not(.home-page) .contact-card {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 4px 24px 24px 24px !important;
  background:
    linear-gradient(90deg, rgba(14, 14, 17, 0.025) 1px, transparent 1px),
    linear-gradient(180deg, rgba(14, 14, 17, 0.018) 1px, transparent 1px),
    rgba(255, 255, 255, 0.70) !important;
  background-size: 48px 48px, 48px 48px, auto !important;
  border: 1px solid rgba(14, 14, 17, 0.10) !important;
  box-shadow: 0 18px 50px rgba(126, 78, 72, 0.08) !important;
}

body:not(.home-page) .card::before,
body:not(.home-page) .feature-card::before,
body:not(.home-page) .type-card::before,
body:not(.home-page) .pricing-card::before,
body:not(.home-page) .faq-item::before,
body:not(.home-page) .auth-card::before,
body:not(.home-page) .admin-card::before,
body:not(.home-page) .setup-card::before,
body:not(.home-page) .step-card::before,
body:not(.home-page) .content-card::before,
body:not(.home-page) .contact-card::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 4px !important;
  background: linear-gradient(180deg, #ff927c, rgba(147, 112, 233, 0.46), transparent 86%) !important;
  opacity: 0.78 !important;
}

body:not(.home-page) .card::after,
body:not(.home-page) .feature-card::after,
body:not(.home-page) .type-card::after,
body:not(.home-page) .pricing-card::after,
body:not(.home-page) .faq-item::after,
body:not(.home-page) .auth-card::after,
body:not(.home-page) .admin-card::after,
body:not(.home-page) .setup-card::after,
body:not(.home-page) .step-card::after,
body:not(.home-page) .content-card::after,
body:not(.home-page) .contact-card::after {
  content: "" !important;
  position: absolute !important;
  right: -24px !important;
  top: -24px !important;
  width: 104px !important;
  height: 84px !important;
  opacity: 0.46 !important;
  pointer-events: none !important;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 150 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 76 C44 44 78 28 128 14' fill='none' stroke='rgba(14,14,17,.34)' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M58 42 C82 42 98 52 112 66' fill='none' stroke='rgba(14,14,17,.18)' stroke-width='2' stroke-linecap='round'/%3E%3Cg fill='rgba(255,173,162,.82)' stroke='rgba(14,14,17,.08)' stroke-width='1'%3E%3Cellipse cx='48' cy='54' rx='9' ry='20' transform='rotate(18 48 54)'/%3E%3Cellipse cx='48' cy='54' rx='9' ry='20' transform='rotate(90 48 54)'/%3E%3Cellipse cx='48' cy='54' rx='9' ry='20' transform='rotate(162 48 54)'/%3E%3Cellipse cx='48' cy='54' rx='9' ry='20' transform='rotate(234 48 54)'/%3E%3Cellipse cx='48' cy='54' rx='9' ry='20' transform='rotate(306 48 54)'/%3E%3C/g%3E%3Ccircle cx='48' cy='54' r='4' fill='rgba(14,14,17,.72)'/%3E%3Cg opacity='.82' fill='rgba(190,170,255,.78)' stroke='rgba(14,14,17,.07)' stroke-width='1'%3E%3Cellipse cx='92' cy='28' rx='6' ry='14' transform='rotate(14 92 28)'/%3E%3Cellipse cx='92' cy='28' rx='6' ry='14' transform='rotate(86 92 28)'/%3E%3Cellipse cx='92' cy='28' rx='6' ry='14' transform='rotate(158 92 28)'/%3E%3Cellipse cx='92' cy='28' rx='6' ry='14' transform='rotate(230 92 28)'/%3E%3Cellipse cx='92' cy='28' rx='6' ry='14' transform='rotate(302 92 28)'/%3E%3C/g%3E%3Ccircle cx='92' cy='28' r='3' fill='rgba(14,14,17,.68)'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

body:not(.home-page) input,
body:not(.home-page) select,
body:not(.home-page) textarea {
  border-radius: 14px 6px 14px 6px !important;
  border: 1px solid rgba(14, 14, 17, 0.14) !important;
  background: rgba(255, 255, 255, 0.78) !important;
}

body:not(.home-page) table,
body:not(.home-page) .table-container {
  border-radius: 4px 22px 22px 22px !important;
  overflow: hidden !important;
  border: 1px solid rgba(14, 14, 17, 0.10) !important;
}

body:not(.home-page) .password-requirements {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 4px 18px 18px 18px !important;
  padding: 16px !important;
  background:
    linear-gradient(90deg, rgba(14, 14, 17, 0.022) 1px, transparent 1px),
    linear-gradient(180deg, rgba(14, 14, 17, 0.016) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.90), rgba(255, 238, 233, 0.82)) !important;
  background-size: 34px 34px, 34px 34px, auto !important;
  border: 1px solid rgba(226, 95, 77, 0.20) !important;
  box-shadow: inset 4px 0 0 rgba(226, 95, 77, 0.34) !important;
}

body:not(.home-page) .password-requirements::after {
  content: "\5B88" !important;
  position: absolute !important;
  right: 14px !important;
  top: 12px !important;
  color: rgba(14, 14, 17, 0.13) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  writing-mode: vertical-rl !important;
}

body:not(.home-page) .password-requirements h4 {
  position: relative !important;
  z-index: 1 !important;
  color: var(--color-midnight-ink) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  margin-bottom: 10px !important;
}

body:not(.home-page) .password-requirements li {
  position: relative !important;
  z-index: 1 !important;
  color: rgba(14, 14, 17, 0.70) !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

body:not(.home-page) .password-requirements li::before {
  color: rgba(14, 14, 17, 0.42) !important;
}

body:not(.home-page) .password-requirements li.valid {
  color: #147a43 !important;
}

body:not(.home-page) .password-requirements li.invalid {
  color: #a43a2f !important;
}

body:not(.home-page) footer {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    var(--color-near-black) !important;
  background-size: 72px 72px, 72px 72px, auto !important;
}

@media (max-width: 700px) {
  body:not(.home-page)::before {
    width: 210px !important;
    height: 178px !important;
    right: -86px !important;
    top: 120px !important;
    opacity: 0.22 !important;
  }

  body:not(.home-page)::after {
    display: none !important;
  }

  body:not(.home-page) nav .logo {
    min-height: 50px !important;
    max-width: calc(100vw - 32px) !important;
    padding: 7px 38px 7px 8px !important;
  }
}

/* Features page Sakura system */
.features-page main {
  padding-top: 0 !important;
}

.features-page .container {
  max-width: none !important;
}

.features-page .features-hero {
  position: relative !important;
  min-height: clamp(480px, 58vh, 660px) !important;
  margin: 0 calc(50% - 50vw) clamp(56px, 8vw, 92px) !important;
  padding: clamp(72px, 8vh, 104px) max(24px, calc((100vw - 1120px) / 2)) 72px !important;
  display: grid !important;
  place-items: center !important;
  align-content: start !important;
  overflow: hidden !important;
  text-align: center !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.10) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 50% 42%, rgba(255, 218, 210, 0.92) 0 94px, rgba(255, 218, 210, 0.14) 95px 170px, transparent 171px),
    linear-gradient(115deg, rgba(147, 112, 233, 0.88), rgba(254, 147, 125, 0.90) 47%, rgba(243, 188, 185, 0.70), rgba(232, 229, 246, 0.92)) !important;
  background-size: 72px 72px, 72px 72px, auto, auto !important;
}

.features-page .features-hero::before {
  content: "" !important;
  position: absolute !important;
  width: min(68vw, 820px) !important;
  height: 2px !important;
  left: 50% !important;
  top: 30% !important;
  transform: translateX(-50%) rotate(-7deg) !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.58), rgba(14, 14, 17, 0.12), transparent) !important;
}

.features-page .features-hero::after {
  content: "" !important;
  position: absolute !important;
  right: max(24px, calc((100vw - 1120px) / 2 - 40px)) !important;
  top: 34% !important;
  width: clamp(180px, 24vw, 310px) !important;
  height: clamp(150px, 20vw, 250px) !important;
  opacity: 0.62 !important;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 260 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 176 C78 120 118 90 202 36' fill='none' stroke='rgba(14,14,17,.42)' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M94 110 C126 108 152 120 176 144' fill='none' stroke='rgba(14,14,17,.22)' stroke-width='3' stroke-linecap='round'/%3E%3Cg fill='rgba(255,218,210,.90)' stroke='rgba(14,14,17,.12)' stroke-width='1.5'%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(18 82 124)'/%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(90 82 124)'/%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(162 82 124)'/%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(234 82 124)'/%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(306 82 124)'/%3E%3C/g%3E%3Ccircle cx='82' cy='124' r='6' fill='rgba(14,14,17,.72)'/%3E%3Cg opacity='.78' fill='rgba(255,218,210,.84)' stroke='rgba(14,14,17,.10)' stroke-width='1.2'%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(10 150 66)'/%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(82 150 66)'/%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(154 150 66)'/%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(226 150 66)'/%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(298 150 66)'/%3E%3C/g%3E%3Ccircle cx='150' cy='66' r='4.5' fill='rgba(14,14,17,.68)'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.features-page .features-hero > * {
  position: relative !important;
  z-index: 1 !important;
}

.features-page .features-hero-seal {
  width: 64px !important;
  height: 64px !important;
  margin-bottom: 18px !important;
  border-radius: 17px 6px 17px 6px !important;
  display: grid !important;
  place-items: center !important;
  color: rgba(14, 14, 17, 0.62) !important;
  border: 1px solid rgba(255, 255, 255, 0.48) !important;
  background: rgba(255, 255, 255, 0.18) !important;
  font-weight: 700 !important;
  writing-mode: vertical-rl !important;
  letter-spacing: 0.12em !important;
  backdrop-filter: blur(10px) !important;
}

.features-page .features-hero h1 {
  max-width: 940px !important;
  margin: 0 auto 22px !important;
  color: rgba(14, 14, 17, 0.86) !important;
  font-size: clamp(54px, 8vw, 104px) !important;
  font-weight: 400 !important;
  line-height: 1.03 !important;
  letter-spacing: -0.025em !important;
}

.features-page .features-hero h1 .gradient {
  background: linear-gradient(100deg, #6f55cf 0%, #8d536d 46%, #e25f4d 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.features-page .features-hero p:not(.section-kicker) {
  max-width: 720px !important;
  color: rgba(14, 14, 17, 0.72) !important;
  font-size: clamp(18px, 2.2vw, 24px) !important;
  line-height: 1.42 !important;
}

.features-page .feature-overview-section,
.features-page .modes-section,
.features-page .features-agent-section,
.features-page .cta {
  width: min(1200px, calc(100vw - 48px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.features-page .feature-overview-section .section-title {
  margin-bottom: 34px !important;
}

.features-page .feature-icon {
  --card-branch: rgba(14, 14, 17, 0.34);
  --card-twig: rgba(14, 14, 17, 0.20);
  --card-petal: rgba(255, 173, 162, 0.82);
  --card-petal-small: rgba(190, 170, 255, 0.78);
  --card-petal-stroke: rgba(14, 14, 17, 0.08);
  --card-center: rgba(14, 14, 17, 0.72);
  width: 118px !important;
  height: 78px !important;
  margin: -8px 0 24px -4px !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  display: block !important;
  filter: drop-shadow(0 12px 22px rgba(226, 95, 77, 0.14)) !important;
}

.features-page .feature-icon svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

.features-page .feature-card:nth-child(2n) .feature-icon {
  --card-petal: rgba(190, 170, 255, 0.82);
  --card-petal-small: rgba(255, 205, 118, 0.78);
}

.features-page .feature-card:nth-child(3n) .feature-icon {
  --card-petal: rgba(147, 174, 255, 0.78);
  --card-petal-small: rgba(255, 173, 162, 0.80);
}

.features-page .modes-section {
  position: relative !important;
  overflow: hidden !important;
  padding: clamp(48px, 7vw, 78px) !important;
  border-radius: 4px 34px 34px 34px !important;
  background:
    linear-gradient(90deg, rgba(14, 14, 17, 0.032) 1px, transparent 1px),
    linear-gradient(180deg, rgba(14, 14, 17, 0.022) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255, 218, 210, 0.82), rgba(255, 255, 255, 0.78) 48%, rgba(232, 229, 246, 0.78)) !important;
  background-size: 72px 72px, 72px 72px, auto !important;
  border: 1px solid rgba(14, 14, 17, 0.10) !important;
  box-shadow: 0 24px 70px rgba(126, 78, 72, 0.08) !important;
}

.features-page .modes-section::after {
  content: "\8981\7D04" !important;
  position: absolute !important;
  right: 32px !important;
  top: 28px !important;
  color: rgba(14, 14, 17, 0.12) !important;
  font-size: 68px !important;
  font-weight: 700 !important;
  writing-mode: vertical-rl !important;
}

.features-page .modes-copy {
  max-width: 760px !important;
  margin-bottom: 34px !important;
}

.features-page .modes-copy .section-title,
.features-page .modes-copy p {
  text-align: left !important;
}

.features-page .modes-copy p:not(.section-kicker) {
  color: var(--color-slate-gray) !important;
  font-size: 18px !important;
  line-height: 1.55 !important;
}

.features-page .modes-grid {
  counter-reset: mode !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.features-page .mode-card {
  counter-increment: mode !important;
  position: relative !important;
  min-height: 142px !important;
  padding: 22px 18px 20px !important;
  border-radius: 4px 22px 22px 22px !important;
  display: grid !important;
  grid-template-columns: 50px 1fr auto !important;
  gap: 14px !important;
  background: rgba(255, 255, 255, 0.68) !important;
  border: 1px solid rgba(14, 14, 17, 0.10) !important;
  box-shadow: none !important;
}

.features-page .mode-card::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 4px !important;
  background: linear-gradient(180deg, #ff927c, rgba(147, 112, 233, 0.44), transparent) !important;
}

.features-page .mode-icon {
  width: 46px !important;
  height: 46px !important;
  border-radius: 14px 5px 14px 5px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255, 218, 210, 0.62) !important;
  border: 1px solid rgba(226, 95, 77, 0.18) !important;
  font-size: 0 !important;
}

.features-page .mode-icon::after {
  content: counter(mode, decimal-leading-zero) !important;
  color: rgba(14, 14, 17, 0.72) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.features-page .mode-name {
  color: var(--color-midnight-ink) !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
}

.features-page .mode-desc {
  color: rgba(14, 14, 17, 0.62) !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

.features-page .mode-credits {
  align-self: start !important;
  background: rgba(143, 217, 182, 0.24) !important;
  color: #126d42 !important;
  border: 1px solid rgba(18, 109, 66, 0.14) !important;
  border-radius: 999px !important;
}

.features-page .features-agent-section {
  position: relative !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: minmax(280px, 0.8fr) minmax(360px, 1.2fr) !important;
  gap: clamp(28px, 5vw, 58px) !important;
  align-items: center !important;
  padding: clamp(52px, 7vw, 82px) !important;
  border-radius: 4px 34px 34px 34px !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    radial-gradient(circle at 78% 18%, rgba(255, 147, 124, 0.24), transparent 30%),
    radial-gradient(circle at 12% 78%, rgba(147, 112, 233, 0.26), transparent 34%),
    var(--color-near-black) !important;
  background-size: 72px 72px, 72px 72px, auto, auto, auto !important;
  color: var(--color-canvas-white) !important;
}

.features-page .features-agent-section::after {
  content: "" !important;
  position: absolute !important;
  right: -42px !important;
  top: 24px !important;
  width: 260px !important;
  height: 220px !important;
  opacity: 0.22 !important;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 260 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 176 C78 120 118 90 202 36' fill='none' stroke='rgba(255,255,255,.58)' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M94 110 C126 108 152 120 176 144' fill='none' stroke='rgba(255,218,210,.34)' stroke-width='3' stroke-linecap='round'/%3E%3Cg fill='rgba(255,218,210,.82)' stroke='rgba(255,255,255,.14)' stroke-width='1.4'%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(18 82 124)'/%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(90 82 124)'/%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(162 82 124)'/%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(234 82 124)'/%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(306 82 124)'/%3E%3C/g%3E%3Ccircle cx='82' cy='124' r='6' fill='rgba(255,255,255,.58)'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.features-page .features-agent-copy,
.features-page .features-agent-loop,
.features-page .features-agent-grid {
  position: relative !important;
  z-index: 1 !important;
}

.features-page .features-agent-copy h2 {
  color: var(--color-canvas-white) !important;
  font-size: clamp(42px, 5vw, 72px) !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
}

.features-page .features-agent-copy p:not(.section-kicker) {
  color: rgba(255, 255, 255, 0.70) !important;
  font-size: 18px !important;
  line-height: 1.55 !important;
}

.features-page .features-agent-loop {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  padding: 20px !important;
  border-radius: 4px 24px 24px 24px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

.features-page .features-agent-loop span,
.features-page .features-agent-loop strong {
  min-height: 56px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 16px !important;
  color: var(--color-canvas-white) !important;
  background: rgba(255, 255, 255, 0.10) !important;
}

.features-page .features-agent-loop strong {
  color: var(--color-midnight-ink) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 218, 210, 0.92)) !important;
}

.features-page .features-agent-loop i {
  width: 1px !important;
  height: 22px !important;
  justify-self: center !important;
  background: rgba(255, 255, 255, 0.28) !important;
}

.features-page .features-agent-grid {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.features-page .features-agent-card {
  min-height: 190px !important;
  padding: 22px !important;
  border-radius: 4px 22px 22px 22px !important;
  color: var(--color-canvas-white) !important;
  text-decoration: none !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

.features-page .features-agent-card span {
  display: block !important;
  width: 42px !important;
  height: 42px !important;
  margin-bottom: 32px !important;
  border-radius: 14px 5px 14px 5px !important;
  background: linear-gradient(135deg, #ff927c, #9370e9) !important;
}

.features-page .features-agent-card.chatgpt span {
  background: linear-gradient(135deg, #ffffff, #e8e5f6) !important;
}

.features-page .features-agent-card.openclaw span {
  background: linear-gradient(135deg, #8fd9b6, #4167e9) !important;
}

.features-page .features-agent-card.hermes span {
  background: linear-gradient(135deg, #9fb8ff, #ffd38a) !important;
}

.features-page .features-agent-card h3 {
  color: var(--color-canvas-white) !important;
  font-size: 22px !important;
  margin-bottom: 8px !important;
}

.features-page .features-agent-card p {
  color: rgba(255, 255, 255, 0.68) !important;
  line-height: 1.5 !important;
}

.features-page .features-agent-card strong {
  color: var(--color-canvas-white) !important;
  text-decoration: underline !important;
  font-weight: 500 !important;
}

.features-page .cta {
  padding: clamp(48px, 7vw, 76px) !important;
  border-radius: 4px 34px 34px 34px !important;
  background: rgba(255, 218, 210, 0.74) !important;
  border: 1px solid rgba(226, 95, 77, 0.16) !important;
}

.features-page .cta h2,
.features-page .cta p {
  color: var(--color-midnight-ink) !important;
}

@media (max-width: 920px) {
  .features-page .modes-grid,
  .features-page .features-agent-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .features-page .features-agent-section {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .features-page .features-hero {
    min-height: auto !important;
    padding-top: 72px !important;
    padding-bottom: 68px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    align-content: start !important;
  }

  .features-page .features-hero h1 {
    font-size: clamp(42px, 12vw, 56px) !important;
  }

  .features-page .feature-overview-section,
  .features-page .modes-section,
  .features-page .features-agent-section,
  .features-page .cta {
    width: calc(100vw - 32px) !important;
  }

  .features-page .modes-section,
  .features-page .features-agent-section {
    padding: 28px !important;
  }

  .features-page .modes-grid,
  .features-page .features-agent-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Pricing page Sakura system */
.pricing-page main {
  padding-top: 0 !important;
}

.pricing-page .container {
  max-width: none !important;
  width: 100% !important;
}

.pricing-page .pricing-hero {
  position: relative !important;
  min-height: clamp(560px, 66vh, 720px) !important;
  margin: 0 calc(50% - 50vw) clamp(34px, 5vw, 64px) !important;
  padding: clamp(120px, 14vw, 190px) clamp(24px, 7vw, 86px) clamp(72px, 9vw, 116px) !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.15) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.10) 1px, transparent 1px),
    radial-gradient(circle at 50% 46%, rgba(255, 247, 230, 0.68) 0 13%, transparent 14%),
    radial-gradient(circle at 52% 46%, rgba(255, 218, 210, 0.20) 0 30%, transparent 31%),
    linear-gradient(112deg, rgba(147, 112, 233, 0.92), rgba(255, 147, 124, 0.82) 51%, rgba(232, 229, 246, 0.90)) !important;
  background-size: 72px 72px, 72px 72px, auto, auto, auto !important;
  color: var(--color-midnight-ink) !important;
}

.pricing-page .pricing-hero::before {
  content: "" !important;
  position: absolute !important;
  right: 9vw !important;
  top: 24% !important;
  width: min(28vw, 320px) !important;
  height: min(24vw, 260px) !important;
  opacity: 0.56 !important;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 260 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 176 C78 120 118 90 202 36' fill='none' stroke='rgba(14,14,17,.42)' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M94 110 C126 108 152 120 176 144' fill='none' stroke='rgba(14,14,17,.20)' stroke-width='3' stroke-linecap='round'/%3E%3Cg fill='rgba(255,218,210,.90)' stroke='rgba(14,14,17,.13)' stroke-width='1.4'%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(18 82 124)'/%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(90 82 124)'/%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(162 82 124)'/%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(234 82 124)'/%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(306 82 124)'/%3E%3C/g%3E%3Ccircle cx='82' cy='124' r='6' fill='rgba(14,14,17,.72)'/%3E%3Cg opacity='.86' fill='rgba(255,218,210,.86)' stroke='rgba(14,14,17,.10)' stroke-width='1.2'%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(10 150 66)'/%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(82 150 66)'/%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(154 150 66)'/%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(226 150 66)'/%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(298 150 66)'/%3E%3C/g%3E%3Ccircle cx='150' cy='66' r='4.5' fill='rgba(14,14,17,.68)'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.pricing-page .pricing-hero::after {
  content: "\4FA1\683C" !important;
  position: absolute !important;
  left: clamp(22px, 9vw, 130px) !important;
  top: 42% !important;
  width: 78px !important;
  height: 78px !important;
  display: grid !important;
  place-items: center !important;
  writing-mode: vertical-rl !important;
  border-radius: 18px 6px 18px 6px !important;
  color: rgba(14, 14, 17, 0.34) !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.36) !important;
  backdrop-filter: blur(10px) !important;
  transform: rotate(-3deg) !important;
}

.pricing-page .pricing-hero > * {
  position: relative !important;
  z-index: 1 !important;
}

.pricing-page .pricing-seal,
.pricing-page .pricing-hero h1::before {
  display: none !important;
}

.pricing-page .pricing-hero .section-kicker {
  margin-bottom: 18px !important;
  color: rgba(14, 14, 17, 0.62) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.pricing-page .pricing-hero h1 {
  max-width: 920px !important;
  margin: 0 auto 20px !important;
  color: rgba(14, 14, 17, 0.88) !important;
  font-size: clamp(58px, 8vw, 112px) !important;
  font-weight: 400 !important;
  line-height: 0.96 !important;
  letter-spacing: 0 !important;
}

.pricing-page .pricing-hero .subtitle {
  margin: 0 auto 18px !important;
  color: rgba(14, 14, 17, 0.84) !important;
  font-size: clamp(20px, 2.5vw, 28px) !important;
  font-weight: 500 !important;
}

.pricing-page .pricing-hero .description {
  max-width: 720px !important;
  margin: 0 auto !important;
  color: rgba(14, 14, 17, 0.66) !important;
  font-size: 18px !important;
  line-height: 1.55 !important;
}

.pricing-page .pricing-hero-stats {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-top: 30px !important;
}

.pricing-page .pricing-hero-stats span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 46px !important;
  padding: 9px 18px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.50) !important;
  border: 1px solid rgba(14, 14, 17, 0.10) !important;
  color: rgba(14, 14, 17, 0.68) !important;
}

.pricing-page .pricing-hero-stats strong {
  color: var(--color-midnight-ink) !important;
  font-size: 20px !important;
}

.pricing-page .pricing-grid,
.pricing-page .credit-usage-section,
.pricing-page .pricing-faq-section,
.pricing-page .cta-section {
  width: min(1200px, calc(100vw - 48px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.pricing-page .pricing-grid {
  gap: 24px !important;
  margin-bottom: clamp(56px, 8vw, 92px) !important;
}

.pricing-page .pricing-card {
  min-height: 470px !important;
  padding: 30px 24px !important;
  border-color: rgba(14, 14, 17, 0.10) !important;
  box-shadow: 0 24px 70px rgba(126, 78, 72, 0.08) !important;
}

.pricing-page .pricing-card.popular,
.pricing-page .pricing-card.pro {
  padding-top: 44px !important;
}

.pricing-page .pricing-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 30px 90px rgba(126, 78, 72, 0.12) !important;
}

.pricing-page .card-header h3,
.pricing-page .card-price .price {
  color: var(--color-midnight-ink) !important;
}

.pricing-page .card-header .badge,
.pricing-page .card-features li {
  color: rgba(14, 14, 17, 0.68) !important;
}

.pricing-page .card-price .credits {
  color: rgba(14, 14, 17, 0.88) !important;
}

.pricing-page .card-badge {
  top: 14px !important;
  right: 20px !important;
  z-index: 3 !important;
  background: var(--color-midnight-ink) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 10px 24px rgba(14, 14, 17, 0.12) !important;
}

.pricing-page .credit-usage-section {
  position: relative !important;
  overflow: hidden !important;
  padding: clamp(48px, 7vw, 78px) !important;
  border-radius: 4px 34px 34px 34px !important;
  background:
    linear-gradient(90deg, rgba(14, 14, 17, 0.030) 1px, transparent 1px),
    linear-gradient(180deg, rgba(14, 14, 17, 0.022) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255, 218, 210, 0.82), rgba(255, 255, 255, 0.78) 48%, rgba(232, 229, 246, 0.80)) !important;
  background-size: 72px 72px, 72px 72px, auto !important;
  border: 1px solid rgba(14, 14, 17, 0.10) !important;
  box-shadow: 0 24px 70px rgba(126, 78, 72, 0.08) !important;
}

.pricing-page .credit-usage-section::after {
  content: "\8981\7D04" !important;
  position: absolute !important;
  right: 28px !important;
  top: 24px !important;
  color: rgba(14, 14, 17, 0.10) !important;
  font-size: 76px !important;
  font-weight: 700 !important;
  writing-mode: vertical-rl !important;
}

.pricing-page .credit-usage-copy {
  position: relative !important;
  z-index: 1 !important;
  max-width: 760px !important;
  margin-bottom: 34px !important;
}

.pricing-page .credit-usage-copy h2 {
  margin-bottom: 10px !important;
  color: var(--color-midnight-ink) !important;
  font-size: clamp(38px, 5vw, 72px) !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
}

.pricing-page .credit-usage-copy h2::before {
  content: none !important;
}

.pricing-page .credit-usage-copy .section-desc {
  max-width: 720px !important;
  color: rgba(14, 14, 17, 0.64) !important;
  font-size: 18px !important;
  line-height: 1.55 !important;
}

.pricing-page .credit-mode-grid {
  counter-reset: credit-mode !important;
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.pricing-page .credit-mode-card {
  counter-increment: credit-mode !important;
  position: relative !important;
  min-height: 152px !important;
  padding: 22px 20px 22px 76px !important;
  border-radius: 4px 22px 22px 22px !important;
  background: rgba(255, 255, 255, 0.66) !important;
  border: 1px solid rgba(14, 14, 17, 0.10) !important;
  box-shadow: none !important;
}

.pricing-page .credit-mode-card::before {
  content: counter(credit-mode, decimal-leading-zero) !important;
  position: absolute !important;
  left: 20px !important;
  top: 22px !important;
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 14px 5px 14px 5px !important;
  color: rgba(14, 14, 17, 0.72) !important;
  background: rgba(255, 218, 210, 0.62) !important;
  border: 1px solid rgba(226, 95, 77, 0.16) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.pricing-page .credit-mode-card.premium::before {
  background: rgba(232, 229, 246, 0.72) !important;
  border-color: rgba(147, 112, 233, 0.18) !important;
}

.pricing-page .credit-mode-card h3 {
  margin: 0 86px 8px 0 !important;
  color: var(--color-midnight-ink) !important;
  font-size: 19px !important;
  line-height: 1.18 !important;
}

.pricing-page .credit-mode-card p {
  margin: 0 !important;
  color: rgba(14, 14, 17, 0.62) !important;
  font-size: 15px !important;
  line-height: 1.42 !important;
}

.pricing-page .credit-count {
  position: absolute !important;
  right: 18px !important;
  top: 18px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  color: #126d42 !important;
  background: rgba(143, 217, 182, 0.24) !important;
  border: 1px solid rgba(18, 109, 66, 0.14) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.pricing-page .pricing-faq-section h2 {
  margin-bottom: 28px !important;
  color: var(--color-midnight-ink) !important;
  font-size: clamp(36px, 4.4vw, 62px) !important;
  font-weight: 400 !important;
}

.pricing-page .pricing-faq-section h2::before {
  content: "\554F" !important;
}

.pricing-page .cta-section {
  padding: clamp(48px, 7vw, 76px) !important;
  border-radius: 4px 34px 34px 34px !important;
  background: rgba(255, 218, 210, 0.76) !important;
  border: 1px solid rgba(226, 95, 77, 0.16) !important;
}

@media (max-width: 1024px) {
  .pricing-page .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .pricing-page .credit-mode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .pricing-page .pricing-hero {
    min-height: 560px !important;
    padding: 120px 18px 64px !important;
  }

  .pricing-page .pricing-hero h1 {
    font-size: clamp(42px, 12vw, 58px) !important;
  }

  .pricing-page .pricing-hero::before {
    right: -80px !important;
    top: 38% !important;
    width: 240px !important;
    height: 210px !important;
  }

  .pricing-page .pricing-grid,
  .pricing-page .credit-usage-section,
  .pricing-page .pricing-faq-section,
  .pricing-page .cta-section {
    width: calc(100vw - 32px) !important;
  }

  .pricing-page .pricing-grid,
  .pricing-page .credit-mode-grid,
  .pricing-page .faq-grid {
    grid-template-columns: 1fr !important;
  }

  .pricing-page .credit-usage-section {
    padding: 30px 22px !important;
  }

  .pricing-page .credit-mode-card {
    min-height: 132px !important;
    padding: 20px 18px 20px 70px !important;
  }
}

/* About page Sakura system */
.about-page main {
  padding-top: 0 !important;
}

.about-page .container {
  max-width: none !important;
  width: 100% !important;
}

.about-page .about-hero {
  position: relative !important;
  min-height: clamp(560px, 66vh, 720px) !important;
  margin: 0 calc(50% - 50vw) clamp(36px, 5vw, 66px) !important;
  padding: clamp(120px, 14vw, 190px) clamp(24px, 7vw, 86px) clamp(72px, 9vw, 116px) !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.15) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.10) 1px, transparent 1px),
    radial-gradient(circle at 50% 48%, rgba(255, 247, 230, 0.66) 0 13%, transparent 14%),
    radial-gradient(circle at 50% 48%, rgba(255, 218, 210, 0.22) 0 31%, transparent 32%),
    linear-gradient(112deg, rgba(147, 112, 233, 0.92), rgba(255, 147, 124, 0.82) 51%, rgba(232, 229, 246, 0.90)) !important;
  background-size: 72px 72px, 72px 72px, auto, auto, auto !important;
}

.about-page .about-hero::before {
  content: "" !important;
  position: absolute !important;
  right: 8vw !important;
  top: 23% !important;
  width: min(29vw, 330px) !important;
  height: min(25vw, 270px) !important;
  opacity: 0.54 !important;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 260 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 176 C78 120 118 90 202 36' fill='none' stroke='rgba(14,14,17,.42)' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M94 110 C126 108 152 120 176 144' fill='none' stroke='rgba(14,14,17,.20)' stroke-width='3' stroke-linecap='round'/%3E%3Cg fill='rgba(255,218,210,.90)' stroke='rgba(14,14,17,.13)' stroke-width='1.4'%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(18 82 124)'/%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(90 82 124)'/%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(162 82 124)'/%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(234 82 124)'/%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(306 82 124)'/%3E%3C/g%3E%3Ccircle cx='82' cy='124' r='6' fill='rgba(14,14,17,.72)'/%3E%3Cg opacity='.86' fill='rgba(255,218,210,.86)' stroke='rgba(14,14,17,.10)' stroke-width='1.2'%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(10 150 66)'/%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(82 150 66)'/%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(154 150 66)'/%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(226 150 66)'/%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(298 150 66)'/%3E%3C/g%3E%3Ccircle cx='150' cy='66' r='4.5' fill='rgba(14,14,17,.68)'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.about-page .about-hero > * {
  position: relative !important;
  z-index: 1 !important;
}

.about-page .about-hero h1::before {
  content: none !important;
}

.about-page .about-hero .section-kicker {
  margin-bottom: 18px !important;
  color: rgba(14, 14, 17, 0.62) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.about-page .about-hero h1 {
  max-width: 940px !important;
  margin: 0 auto 24px !important;
  color: rgba(14, 14, 17, 0.88) !important;
  font-size: clamp(58px, 8vw, 112px) !important;
  font-weight: 400 !important;
  line-height: 0.96 !important;
  letter-spacing: 0 !important;
}

.about-page .about-hero p:not(.section-kicker) {
  max-width: 760px !important;
  color: rgba(14, 14, 17, 0.70) !important;
  font-size: clamp(18px, 2.2vw, 24px) !important;
  line-height: 1.45 !important;
}

.about-page .about-hero-mark {
  position: absolute !important;
  left: clamp(22px, 9vw, 130px) !important;
  top: 42% !important;
  width: 78px !important;
  height: 78px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 18px 6px 18px 6px !important;
  color: rgba(14, 14, 17, 0.34) !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.36) !important;
  backdrop-filter: blur(10px) !important;
  font-size: 28px !important;
  transform: rotate(-3deg) !important;
}

.about-page .stats,
.about-page .card,
.about-page .cta {
  width: min(1200px, calc(100vw - 48px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.about-page .stats {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 34px !important;
}

.about-page .stat {
  position: relative !important;
  overflow: hidden !important;
  min-height: 148px !important;
  padding: 26px 22px !important;
  border-radius: 4px 24px 24px 24px !important;
  text-align: left !important;
  background:
    linear-gradient(90deg, rgba(14, 14, 17, 0.025) 1px, transparent 1px),
    linear-gradient(180deg, rgba(14, 14, 17, 0.018) 1px, transparent 1px),
    rgba(255, 255, 255, 0.70) !important;
  background-size: 72px 72px, 72px 72px, auto !important;
  border: 1px solid rgba(14, 14, 17, 0.10) !important;
  box-shadow: 0 24px 70px rgba(126, 78, 72, 0.08) !important;
}

.about-page .stat::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 4px !important;
  background: linear-gradient(180deg, #ff927c, rgba(147, 112, 233, 0.48), transparent) !important;
}

.about-page .stat::after {
  content: "\8981\7D04" !important;
  position: absolute !important;
  right: 16px !important;
  top: 12px !important;
  color: rgba(14, 14, 17, 0.08) !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  writing-mode: vertical-rl !important;
}

.about-page .stat-value {
  color: var(--color-midnight-ink) !important;
  font-size: clamp(34px, 4vw, 52px) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

.about-page .stat-label {
  margin-top: 18px !important;
  color: rgba(14, 14, 17, 0.62) !important;
  font-size: 15px !important;
}

.about-page .card {
  padding: clamp(34px, 5vw, 58px) !important;
  margin-bottom: 34px !important;
}

.about-page .card h2,
.about-page .card h3 {
  color: var(--color-midnight-ink) !important;
  font-weight: 400 !important;
}

.about-page .card h2::before {
  content: none !important;
}

.about-page .card p,
.about-page .card li {
  color: rgba(14, 14, 17, 0.66) !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
}

body.about-page .card.values-section {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    radial-gradient(circle at 78% 18%, rgba(255, 147, 124, 0.24), transparent 30%),
    radial-gradient(circle at 12% 78%, rgba(147, 112, 233, 0.26), transparent 34%),
    var(--color-near-black) !important;
  background-size: 72px 72px, 72px 72px, auto, auto, auto !important;
  color: var(--color-canvas-white) !important;
}

body.about-page .card.values-section .section-kicker,
body.about-page .card.values-section h2 {
  color: var(--color-canvas-white) !important;
}

body.about-page .card.values-section h2 {
  font-size: clamp(42px, 5vw, 72px) !important;
}

.about-page .values {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

body.about-page .values-section .value-card {
  min-height: 240px !important;
  padding: 22px !important;
  border-radius: 4px 22px 22px 22px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

body.about-page .values-section .value-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(255, 218, 210, 0.34) !important;
}

body.about-page .values-section .value-icon {
  width: 116px !important;
  height: 78px !important;
  margin: -6px 0 28px -6px !important;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 104' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 78 C42 44 76 30 140 10' fill='none' stroke='rgba(255,255,255,.44)' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M52 54 C78 52 96 62 114 80' fill='none' stroke='rgba(255,218,210,.34)' stroke-width='2.4' stroke-linecap='round'/%3E%3Cg fill='rgba(255,218,210,.88)' stroke='rgba(255,255,255,.18)' stroke-width='1.2'%3E%3Cellipse cx='48' cy='62' rx='11' ry='25' transform='rotate(18 48 62)'/%3E%3Cellipse cx='48' cy='62' rx='11' ry='25' transform='rotate(90 48 62)'/%3E%3Cellipse cx='48' cy='62' rx='11' ry='25' transform='rotate(162 48 62)'/%3E%3Cellipse cx='48' cy='62' rx='11' ry='25' transform='rotate(234 48 62)'/%3E%3Cellipse cx='48' cy='62' rx='11' ry='25' transform='rotate(306 48 62)'/%3E%3C/g%3E%3Ccircle cx='48' cy='62' r='5' fill='rgba(14,14,17,.74)'/%3E%3Cg fill='rgba(190,170,255,.82)' stroke='rgba(255,255,255,.16)' stroke-width='1'%3E%3Cellipse cx='88' cy='34' rx='8' ry='18' transform='rotate(20 88 34)'/%3E%3Cellipse cx='88' cy='34' rx='8' ry='18' transform='rotate(92 88 34)'/%3E%3Cellipse cx='88' cy='34' rx='8' ry='18' transform='rotate(164 88 34)'/%3E%3Cellipse cx='88' cy='34' rx='8' ry='18' transform='rotate(236 88 34)'/%3E%3Cellipse cx='88' cy='34' rx='8' ry='18' transform='rotate(308 88 34)'/%3E%3C/g%3E%3Ccircle cx='88' cy='34' r='4' fill='rgba(14,14,17,.72)'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

body.about-page .values-section .value-card:nth-child(2) .value-icon {
  filter: hue-rotate(38deg) saturate(1.1) !important;
}

body.about-page .values-section .value-card:nth-child(3) .value-icon {
  filter: hue-rotate(156deg) saturate(1.05) !important;
}

body.about-page .values-section .value-card:nth-child(4) .value-icon {
  filter: hue-rotate(260deg) saturate(1.08) !important;
}

body.about-page .values-section .value-title {
  color: var(--color-canvas-white) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
}

body.about-page .values-section .value-card p {
  color: rgba(255, 255, 255, 0.68) !important;
}

.about-page .cta {
  padding: clamp(48px, 7vw, 76px) !important;
  border-radius: 4px 34px 34px 34px !important;
  background: rgba(255, 218, 210, 0.76) !important;
  border: 1px solid rgba(226, 95, 77, 0.16) !important;
}

.about-page .cta h2,
.about-page .cta p {
  color: var(--color-midnight-ink) !important;
}

@media (max-width: 1024px) {
  .about-page .stats,
  .about-page .values {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .about-page .about-hero {
    min-height: 560px !important;
    padding: 120px 18px 64px !important;
  }

  .about-page .about-hero h1 {
    font-size: clamp(42px, 12vw, 58px) !important;
  }

  .about-page .about-hero::before {
    right: -80px !important;
    top: 38% !important;
    width: 240px !important;
    height: 210px !important;
  }

  .about-page .stats,
  .about-page .card,
  .about-page .cta {
    width: calc(100vw - 32px) !important;
  }

  .about-page .stats,
  .about-page .values {
    grid-template-columns: 1fr !important;
  }
}

/* FAQ page Sakura system */
.faq-page main {
  padding-top: 0 !important;
}

.faq-page .container {
  max-width: none !important;
  width: 100% !important;
}

.faq-page .faq-hero {
  position: relative !important;
  min-height: clamp(560px, 66vh, 720px) !important;
  margin: 0 calc(50% - 50vw) clamp(34px, 5vw, 64px) !important;
  padding: clamp(120px, 14vw, 190px) clamp(24px, 7vw, 86px) clamp(72px, 9vw, 116px) !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.15) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.10) 1px, transparent 1px),
    radial-gradient(circle at 50% 48%, rgba(255, 247, 230, 0.66) 0 13%, transparent 14%),
    radial-gradient(circle at 50% 48%, rgba(255, 218, 210, 0.22) 0 31%, transparent 32%),
    linear-gradient(112deg, rgba(147, 112, 233, 0.92), rgba(255, 147, 124, 0.82) 51%, rgba(232, 229, 246, 0.90)) !important;
  background-size: 72px 72px, 72px 72px, auto, auto, auto !important;
}

.faq-page .faq-hero::before {
  content: "" !important;
  position: absolute !important;
  right: 8vw !important;
  top: 23% !important;
  width: min(29vw, 330px) !important;
  height: min(25vw, 270px) !important;
  opacity: 0.54 !important;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 260 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 176 C78 120 118 90 202 36' fill='none' stroke='rgba(14,14,17,.42)' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M94 110 C126 108 152 120 176 144' fill='none' stroke='rgba(14,14,17,.20)' stroke-width='3' stroke-linecap='round'/%3E%3Cg fill='rgba(255,218,210,.90)' stroke='rgba(14,14,17,.13)' stroke-width='1.4'%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(18 82 124)'/%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(90 82 124)'/%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(162 82 124)'/%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(234 82 124)'/%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(306 82 124)'/%3E%3C/g%3E%3Ccircle cx='82' cy='124' r='6' fill='rgba(14,14,17,.72)'/%3E%3Cg opacity='.86' fill='rgba(255,218,210,.86)' stroke='rgba(14,14,17,.10)' stroke-width='1.2'%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(10 150 66)'/%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(82 150 66)'/%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(154 150 66)'/%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(226 150 66)'/%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(298 150 66)'/%3E%3C/g%3E%3Ccircle cx='150' cy='66' r='4.5' fill='rgba(14,14,17,.68)'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.faq-page .faq-hero > * {
  position: relative !important;
  z-index: 1 !important;
}

.faq-page .faq-hero h1::before {
  content: none !important;
}

.faq-page .faq-hero .section-kicker {
  margin-bottom: 18px !important;
  color: rgba(14, 14, 17, 0.62) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.faq-page .faq-hero h1 {
  max-width: 940px !important;
  margin: 0 auto 24px !important;
  color: rgba(14, 14, 17, 0.88) !important;
  font-size: clamp(58px, 8vw, 112px) !important;
  font-weight: 400 !important;
  line-height: 0.96 !important;
  letter-spacing: 0 !important;
}

.faq-page .faq-hero p:not(.section-kicker) {
  max-width: 780px !important;
  color: rgba(14, 14, 17, 0.70) !important;
  font-size: clamp(18px, 2.2vw, 24px) !important;
  line-height: 1.45 !important;
}

.faq-page .faq-hero-mark {
  position: absolute !important;
  left: clamp(22px, 9vw, 130px) !important;
  top: 42% !important;
  width: 78px !important;
  height: 78px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 18px 6px 18px 6px !important;
  color: rgba(14, 14, 17, 0.34) !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.36) !important;
  backdrop-filter: blur(10px) !important;
  font-size: 28px !important;
  transform: rotate(-3deg) !important;
  z-index: 0 !important;
  opacity: 0.42 !important;
}

.faq-page .search-box,
.faq-page .category-tabs,
.faq-page .faq-list,
.faq-page .contact-hint {
  width: min(1100px, calc(100vw - 48px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.faq-page .search-box {
  margin-bottom: 18px !important;
}

.faq-page .search-input {
  min-height: 62px !important;
  padding: 0 22px !important;
  border-radius: 4px 22px 22px 22px !important;
  color: var(--color-midnight-ink) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid rgba(14, 14, 17, 0.14) !important;
  box-shadow: 0 18px 46px rgba(126, 78, 72, 0.08) !important;
}

.faq-page .search-input::placeholder {
  color: rgba(14, 14, 17, 0.46) !important;
}

.faq-page .search-input:focus {
  border-color: rgba(226, 95, 77, 0.48) !important;
  box-shadow: 0 0 0 4px rgba(255, 218, 210, 0.55), 0 18px 46px rgba(126, 78, 72, 0.08) !important;
}

.faq-page .category-tabs {
  display: flex !important;
  gap: 10px !important;
  margin-bottom: 24px !important;
  padding: 8px !important;
  border-radius: 4px 24px 24px 24px !important;
  background: rgba(255, 255, 255, 0.62) !important;
  border: 1px solid rgba(14, 14, 17, 0.10) !important;
}

.faq-page .category-tab {
  min-height: 40px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  color: rgba(14, 14, 17, 0.70) !important;
  background: rgba(255, 255, 255, 0.60) !important;
  border: 1px solid rgba(14, 14, 17, 0.10) !important;
  font-weight: 600 !important;
}

.faq-page .category-tab:hover {
  color: var(--color-midnight-ink) !important;
  background: rgba(255, 218, 210, 0.48) !important;
  border-color: rgba(226, 95, 77, 0.20) !important;
}

.faq-page .category-tab.active {
  color: var(--color-canvas-white) !important;
  background: var(--color-midnight-ink) !important;
  border-color: var(--color-midnight-ink) !important;
}

.faq-page .faq-list {
  gap: 12px !important;
}

body.faq-page .faq-list .faq-item {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 4px 24px 24px 24px !important;
  background:
    linear-gradient(90deg, rgba(14, 14, 17, 0.025) 1px, transparent 1px),
    linear-gradient(180deg, rgba(14, 14, 17, 0.018) 1px, transparent 1px),
    rgba(255, 255, 255, 0.78) !important;
  background-size: 72px 72px, 72px 72px, auto !important;
  border: 1px solid rgba(14, 14, 17, 0.11) !important;
  box-shadow: none !important;
}

body.faq-page .faq-list .faq-item::before {
  width: 4px !important;
  background: linear-gradient(180deg, #ff927c, rgba(147, 112, 233, 0.48), transparent) !important;
}

body.faq-page .faq-list .faq-item::after {
  left: 20px !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) scaleX(-1) !important;
  opacity: 0.50 !important;
}

.faq-page .faq-question {
  min-height: 86px !important;
  padding: 24px 28px 24px 112px !important;
  color: var(--color-midnight-ink) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  background: transparent !important;
  position: relative !important;
  z-index: 1 !important;
}

.faq-page .faq-question:hover {
  color: var(--color-midnight-ink) !important;
}

.faq-page .faq-icon {
  flex: 0 0 auto !important;
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  color: var(--color-midnight-ink) !important;
  background: rgba(255, 218, 210, 0.62) !important;
  border: 1px solid rgba(226, 95, 77, 0.18) !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

.faq-page .faq-answer-content {
  padding: 0 28px 26px !important;
  color: rgba(14, 14, 17, 0.68) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

.faq-page .faq-answer-content strong,
.faq-page .faq-answer-content a {
  color: var(--color-midnight-ink) !important;
}

.faq-page .faq-answer-content ul,
.faq-page .faq-answer-content ol {
  margin-top: 10px !important;
  margin-left: 22px !important;
}

.faq-page .contact-hint {
  position: relative !important;
  overflow: hidden !important;
  margin-top: 34px !important;
  margin-bottom: 44px !important;
  padding: clamp(44px, 6vw, 72px) !important;
  border-radius: 4px 34px 34px 34px !important;
  background: rgba(255, 218, 210, 0.76) !important;
  border: 1px solid rgba(226, 95, 77, 0.16) !important;
  box-shadow: 0 24px 70px rgba(126, 78, 72, 0.08) !important;
}

.faq-page .contact-hint::before {
  content: "" !important;
  position: absolute !important;
  left: 34px !important;
  top: 32px !important;
  width: 160px !important;
  height: 120px !important;
  opacity: 0.44 !important;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 102 C46 62 86 34 142 10' fill='none' stroke='rgba(14,14,17,.42)' stroke-width='5' stroke-linecap='round'/%3E%3Cg fill='rgba(255,255,255,.60)' stroke='rgba(14,14,17,.10)' stroke-width='1.2'%3E%3Cellipse cx='48' cy='70' rx='11' ry='25' transform='rotate(18 48 70)'/%3E%3Cellipse cx='48' cy='70' rx='11' ry='25' transform='rotate(90 48 70)'/%3E%3Cellipse cx='48' cy='70' rx='11' ry='25' transform='rotate(162 48 70)'/%3E%3Cellipse cx='48' cy='70' rx='11' ry='25' transform='rotate(234 48 70)'/%3E%3Cellipse cx='48' cy='70' rx='11' ry='25' transform='rotate(306 48 70)'/%3E%3C/g%3E%3Ccircle cx='48' cy='70' r='5' fill='rgba(14,14,17,.72)'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.faq-page .contact-hint p,
.faq-page .contact-hint .btn {
  position: relative !important;
  z-index: 1 !important;
}

.faq-page .contact-hint p {
  color: var(--color-midnight-ink) !important;
  font-size: clamp(28px, 4vw, 46px) !important;
  font-weight: 400 !important;
  line-height: 1.08 !important;
}

@media (max-width: 720px) {
  .faq-page .faq-hero {
    min-height: 560px !important;
    padding: 120px 18px 64px !important;
  }

  .faq-page .faq-hero h1 {
    font-size: clamp(42px, 12vw, 58px) !important;
  }

  .faq-page .faq-hero::before {
    right: -80px !important;
    top: 38% !important;
    width: 240px !important;
    height: 210px !important;
  }

  .faq-page .search-box,
  .faq-page .category-tabs,
  .faq-page .faq-list,
  .faq-page .contact-hint {
    width: calc(100vw - 32px) !important;
  }

  .faq-page .category-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }

  .faq-page .category-tab {
    flex: 0 0 auto !important;
  }
}

/* Contact page Sakura system */
.contact-page main {
  padding-top: 0 !important;
}

.contact-page .container {
  max-width: none !important;
  width: 100% !important;
}

.contact-page .contact-hero {
  position: relative !important;
  min-height: clamp(560px, 66vh, 720px) !important;
  margin: 0 calc(50% - 50vw) clamp(34px, 5vw, 64px) !important;
  padding: clamp(120px, 14vw, 190px) clamp(24px, 7vw, 86px) clamp(72px, 9vw, 116px) !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.15) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.10) 1px, transparent 1px),
    radial-gradient(circle at 50% 48%, rgba(255, 247, 230, 0.66) 0 13%, transparent 14%),
    radial-gradient(circle at 50% 48%, rgba(255, 218, 210, 0.22) 0 31%, transparent 32%),
    linear-gradient(112deg, rgba(147, 112, 233, 0.92), rgba(255, 147, 124, 0.82) 51%, rgba(232, 229, 246, 0.90)) !important;
  background-size: 72px 72px, 72px 72px, auto, auto, auto !important;
}

.contact-page .contact-hero::before {
  content: "" !important;
  position: absolute !important;
  right: 8vw !important;
  top: 23% !important;
  width: min(29vw, 330px) !important;
  height: min(25vw, 270px) !important;
  opacity: 0.54 !important;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 260 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 176 C78 120 118 90 202 36' fill='none' stroke='rgba(14,14,17,.42)' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M94 110 C126 108 152 120 176 144' fill='none' stroke='rgba(14,14,17,.20)' stroke-width='3' stroke-linecap='round'/%3E%3Cg fill='rgba(255,218,210,.90)' stroke='rgba(14,14,17,.13)' stroke-width='1.4'%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(18 82 124)'/%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(90 82 124)'/%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(162 82 124)'/%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(234 82 124)'/%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(306 82 124)'/%3E%3C/g%3E%3Ccircle cx='82' cy='124' r='6' fill='rgba(14,14,17,.72)'/%3E%3Cg opacity='.86' fill='rgba(255,218,210,.86)' stroke='rgba(14,14,17,.10)' stroke-width='1.2'%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(10 150 66)'/%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(82 150 66)'/%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(154 150 66)'/%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(226 150 66)'/%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(298 150 66)'/%3E%3C/g%3E%3Ccircle cx='150' cy='66' r='4.5' fill='rgba(14,14,17,.68)'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.contact-page .contact-hero > * {
  position: relative !important;
  z-index: 1 !important;
}

.contact-page .contact-hero h1::before {
  content: none !important;
}

.contact-page .contact-hero .section-kicker {
  margin-bottom: 18px !important;
  color: rgba(14, 14, 17, 0.62) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.contact-page .contact-hero h1 {
  max-width: 980px !important;
  margin: 0 auto 24px !important;
  color: rgba(14, 14, 17, 0.88) !important;
  font-size: clamp(54px, 7.5vw, 104px) !important;
  font-weight: 400 !important;
  line-height: 0.98 !important;
  letter-spacing: 0 !important;
}

.contact-page .contact-hero p:not(.section-kicker) {
  max-width: 780px !important;
  color: rgba(14, 14, 17, 0.70) !important;
  font-size: clamp(18px, 2.2vw, 24px) !important;
  line-height: 1.45 !important;
}

.contact-page .contact-hero-mark {
  position: absolute !important;
  left: clamp(22px, 9vw, 130px) !important;
  top: 42% !important;
  width: 78px !important;
  height: 78px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 18px 6px 18px 6px !important;
  color: rgba(14, 14, 17, 0.34) !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.36) !important;
  backdrop-filter: blur(10px) !important;
  font-size: 28px !important;
  transform: rotate(-3deg) !important;
}

.contact-page .grid {
  width: min(1120px, calc(100vw - 48px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.92fr) !important;
  gap: 32px !important;
}

.contact-page .card {
  padding: clamp(30px, 4vw, 44px) !important;
}

.contact-page .card h2 {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: var(--color-midnight-ink) !important;
  font-size: 28px !important;
  font-weight: 400 !important;
}

.contact-page .card h2::before {
  content: none !important;
}

.contact-page .heading-seal,
.contact-page .info-icon {
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  border-radius: 14px 5px 14px 5px !important;
  color: rgba(14, 14, 17, 0.74) !important;
  background: rgba(255, 218, 210, 0.62) !important;
  border: 1px solid rgba(226, 95, 77, 0.16) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

.contact-page .info-item:nth-child(2) .info-icon {
  background: rgba(232, 229, 246, 0.82) !important;
  border-color: rgba(147, 112, 233, 0.18) !important;
}

.contact-page .info-item:nth-child(3) .info-icon {
  background: rgba(143, 217, 182, 0.24) !important;
  border-color: rgba(18, 109, 66, 0.14) !important;
}

.contact-page label,
.contact-page .info-content h3 {
  color: rgba(14, 14, 17, 0.78) !important;
}

.contact-page input,
.contact-page textarea,
.contact-page select {
  color: var(--color-midnight-ink) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(14, 14, 17, 0.14) !important;
  border-radius: 4px 18px 18px 18px !important;
}

.contact-page input::placeholder,
.contact-page textarea::placeholder {
  color: rgba(14, 14, 17, 0.42) !important;
}

.contact-page input:focus,
.contact-page textarea:focus,
.contact-page select:focus {
  border-color: rgba(226, 95, 77, 0.48) !important;
  box-shadow: 0 0 0 4px rgba(255, 218, 210, 0.55) !important;
}

.contact-page .info-content p,
.contact-page .privacy-hint,
.contact-page .card p {
  color: rgba(14, 14, 17, 0.64) !important;
}

.contact-page .info-content a,
.contact-page .privacy-hint a {
  color: var(--color-midnight-ink) !important;
}

.contact-page .social-link {
  color: var(--color-midnight-ink) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(14, 14, 17, 0.10) !important;
}

@media (max-width: 860px) {
  .contact-page .grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  .contact-page .contact-hero {
    min-height: 560px !important;
    padding: 120px 18px 64px !important;
  }

  .contact-page .contact-hero h1 {
    font-size: clamp(42px, 12vw, 58px) !important;
  }

  .contact-page .contact-hero::before {
    right: -80px !important;
    top: 38% !important;
    width: 240px !important;
    height: 210px !important;
  }

  .contact-page .grid {
    width: calc(100vw - 32px) !important;
  }
}

/* AI Agent Guide technical Sakura system */
.agent-guide-page main {
  padding-top: 0 !important;
}

.agent-guide-page .container {
  width: 100% !important;
  max-width: none !important;
}

.agent-guide-page .agent-guide-hero {
  position: relative !important;
  min-height: clamp(560px, 66vh, 720px) !important;
  margin: 0 calc(50% - 50vw) clamp(34px, 5vw, 64px) !important;
  padding: clamp(118px, 13vw, 184px) clamp(24px, 7vw, 86px) clamp(72px, 9vw, 116px) !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    radial-gradient(circle at 50% 48%, rgba(255, 218, 210, 0.30) 0 14%, transparent 15%),
    radial-gradient(circle at 50% 46%, rgba(147, 112, 233, 0.28) 0 35%, transparent 36%),
    linear-gradient(112deg, #15151c 0%, #332337 44%, #1a2638 100%) !important;
  background-size: 72px 72px, 72px 72px, auto, auto, auto !important;
}

.agent-guide-page .agent-guide-hero::before {
  content: "" !important;
  position: absolute !important;
  right: max(-28px, calc((100vw - 1120px) / 2 - 74px)) !important;
  top: 11% !important;
  width: clamp(230px, 28vw, 380px) !important;
  height: clamp(194px, 23vw, 322px) !important;
  opacity: 0.38 !important;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 260 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 170 C70 136, 112 124, 170 68 C190 49, 212 32, 242 18' fill='none' stroke='%23ffffff' stroke-opacity='.42' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M94 124 C92 92, 104 68, 128 44' fill='none' stroke='%23ffffff' stroke-opacity='.24' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M154 82 C178 84, 202 96, 226 116' fill='none' stroke='%23ffffff' stroke-opacity='.24' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cg transform='translate(76 138) scale(.82)'%3E%3Cellipse cx='0' cy='-24' rx='14' ry='25' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.20' stroke-width='1.5'/%3E%3Cellipse cx='23' cy='-7' rx='14' ry='25' transform='rotate(72 23 -7)' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.20' stroke-width='1.5'/%3E%3Cellipse cx='14' cy='20' rx='14' ry='25' transform='rotate(144 14 20)' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.20' stroke-width='1.5'/%3E%3Cellipse cx='-14' cy='20' rx='14' ry='25' transform='rotate(216 -14 20)' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.20' stroke-width='1.5'/%3E%3Cellipse cx='-23' cy='-7' rx='14' ry='25' transform='rotate(288 -23 -7)' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.20' stroke-width='1.5'/%3E%3Ccircle cx='0' cy='0' r='6' fill='%23ffffff' fill-opacity='.70'/%3E%3C/g%3E%3Cg transform='translate(130 52) scale(.56)' opacity='.84'%3E%3Cellipse cx='0' cy='-24' rx='14' ry='25' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.20' stroke-width='1.5'/%3E%3Cellipse cx='23' cy='-7' rx='14' ry='25' transform='rotate(72 23 -7)' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.20' stroke-width='1.5'/%3E%3Cellipse cx='14' cy='20' rx='14' ry='25' transform='rotate(144 14 20)' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.20' stroke-width='1.5'/%3E%3Cellipse cx='-14' cy='20' rx='14' ry='25' transform='rotate(216 -14 20)' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.20' stroke-width='1.5'/%3E%3Cellipse cx='-23' cy='-7' rx='14' ry='25' transform='rotate(288 -23 -7)' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.20' stroke-width='1.5'/%3E%3Ccircle cx='0' cy='0' r='6' fill='%23ffffff' fill-opacity='.70'/%3E%3C/g%3E%3Cg transform='translate(216 112) scale(.48)' opacity='.84'%3E%3Cellipse cx='0' cy='-24' rx='14' ry='25' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.20' stroke-width='1.5'/%3E%3Cellipse cx='23' cy='-7' rx='14' ry='25' transform='rotate(72 23 -7)' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.20' stroke-width='1.5'/%3E%3Cellipse cx='14' cy='20' rx='14' ry='25' transform='rotate(144 14 20)' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.20' stroke-width='1.5'/%3E%3Cellipse cx='-14' cy='20' rx='14' ry='25' transform='rotate(216 -14 20)' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.20' stroke-width='1.5'/%3E%3Cellipse cx='-23' cy='-7' rx='14' ry='25' transform='rotate(288 -23 -7)' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.20' stroke-width='1.5'/%3E%3Ccircle cx='0' cy='0' r='6' fill='%23ffffff' fill-opacity='.70'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat !important;
}

.agent-guide-page .agent-guide-hero > * {
  position: relative !important;
  z-index: 1 !important;
}

.agent-guide-page .agent-guide-hero .section-kicker {
  margin-bottom: 18px !important;
  color: rgba(255, 218, 210, 0.76) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

body.agent-guide-page .agent-guide-hero h1 {
  max-width: 1050px !important;
  margin: 0 auto 24px !important;
  color: rgba(255, 255, 255, 0.94) !important;
  background: none !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.94) !important;
  font-size: clamp(52px, 7.4vw, 108px) !important;
  font-weight: 400 !important;
  line-height: 0.98 !important;
  letter-spacing: 0 !important;
}

body.agent-guide-page .agent-guide-hero h1::before {
  content: none !important;
  display: none !important;
}

.agent-guide-page .agent-guide-hero p:not(.section-kicker) {
  max-width: 820px !important;
  color: rgba(255, 255, 255, 0.70) !important;
  font-size: clamp(18px, 2.2vw, 24px) !important;
  line-height: 1.45 !important;
}

.agent-guide-page .agent-hero-terminal {
  margin-top: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  max-width: min(720px, calc(100vw - 40px)) !important;
  padding: 14px 18px !important;
  border-radius: 4px 18px 18px 18px !important;
  background: rgba(5, 8, 15, 0.66) !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24) !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace !important;
  overflow: hidden !important;
}

.agent-guide-page .agent-hero-terminal span {
  color: rgba(143, 217, 182, 0.90) !important;
  white-space: nowrap !important;
}

.agent-guide-page .agent-hero-terminal code {
  color: rgba(255, 218, 210, 0.96) !important;
  white-space: nowrap !important;
}

.agent-guide-page .section {
  position: relative !important;
  width: min(1120px, calc(100vw - 48px)) !important;
  margin: 0 auto 28px !important;
  padding: clamp(28px, 4vw, 44px) !important;
  border-radius: 4px 28px 28px 28px !important;
  overflow: hidden !important;
  color: rgba(255, 255, 255, 0.88) !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255, 218, 210, 0.08), rgba(147, 112, 233, 0.08)),
    #171820 !important;
  background-size: 72px 72px, 72px 72px, auto, auto !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 24px 80px rgba(20, 16, 28, 0.16) !important;
}

.agent-guide-page .section::after {
  content: "" !important;
  position: absolute !important;
  right: -22px !important;
  top: -12px !important;
  width: 120px !important;
  height: 92px !important;
  opacity: 0.22 !important;
  pointer-events: none !important;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 110' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 88 C46 58 75 42 118 20' fill='none' stroke='rgba(255,255,255,.45)' stroke-width='4' stroke-linecap='round'/%3E%3Cg fill='rgba(255,218,210,.92)' stroke='rgba(14,14,17,.16)' stroke-width='1'%3E%3Cellipse cx='58' cy='55' rx='8' ry='18' transform='rotate(18 58 55)'/%3E%3Cellipse cx='58' cy='55' rx='8' ry='18' transform='rotate(90 58 55)'/%3E%3Cellipse cx='58' cy='55' rx='8' ry='18' transform='rotate(162 58 55)'/%3E%3Cellipse cx='58' cy='55' rx='8' ry='18' transform='rotate(234 58 55)'/%3E%3Cellipse cx='58' cy='55' rx='8' ry='18' transform='rotate(306 58 55)'/%3E%3C/g%3E%3Ccircle cx='58' cy='55' r='3.5' fill='rgba(14,14,17,.72)'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.agent-guide-page .section > * {
  position: relative !important;
  z-index: 1 !important;
}

.agent-guide-page .section h2 {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 22px !important;
  color: rgba(255, 255, 255, 0.94) !important;
  font-size: clamp(28px, 3.5vw, 42px) !important;
  font-weight: 400 !important;
  line-height: 1.08 !important;
}

.agent-guide-page .section h2::before {
  content: none !important;
}

.agent-guide-page .heading-seal {
  width: 44px !important;
  height: 44px !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  border-radius: 14px 5px 14px 5px !important;
  color: rgba(14, 14, 17, 0.76) !important;
  background: rgba(255, 218, 210, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  font: 800 13px/1 ui-monospace, SFMono-Regular, Consolas, monospace !important;
}

.agent-guide-page .section p,
.agent-guide-page .tool-desc,
.agent-guide-page .section li {
  color: rgba(255, 255, 255, 0.70) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

.agent-guide-page .section a {
  color: rgba(255, 218, 210, 0.96) !important;
}

.agent-guide-page .note-box {
  margin-top: 22px !important;
  padding: 18px 20px !important;
  border-radius: 4px 18px 18px 18px !important;
  background: rgba(255, 218, 210, 0.12) !important;
  border: 1px solid rgba(255, 218, 210, 0.32) !important;
  color: rgba(255, 255, 255, 0.84) !important;
}

.agent-guide-page .note-box strong {
  color: rgba(255, 210, 82, 0.94) !important;
}

.agent-guide-page .note-box p {
  margin: 4px 0 0 !important;
}

.agent-guide-page .agent-tools-section,
.agent-guide-page .agent-faq-section {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.agent-guide-page .agent-tools-section h2,
.agent-guide-page .agent-faq-section h2 {
  grid-column: 1 / -1 !important;
}

.agent-guide-page .tool-card {
  margin: 0 !important;
  padding: 24px !important;
  border-radius: 4px 22px 22px 22px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
}

.agent-guide-page .tool-card h3 {
  margin: 0 0 10px !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

.agent-guide-page .example {
  margin: 12px 0 0 !important;
  padding: 13px 15px !important;
  border-radius: 4px 14px 14px 14px !important;
  color: rgba(255, 222, 112, 0.98) !important;
  background: rgba(5, 8, 15, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace !important;
  font-size: 14px !important;
  overflow-x: auto !important;
  white-space: nowrap !important;
}

.agent-guide-page .credits-box {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 14px !important;
}

.agent-guide-page .credit-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  padding: 5px 10px !important;
  font: 800 13px/1.1 ui-monospace, SFMono-Regular, Consolas, monospace !important;
  color: rgba(14, 14, 17, 0.84) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

.agent-guide-page .credit-badge.free,
.agent-guide-page .credit-badge.cost-1 {
  background: rgba(143, 217, 182, 0.86) !important;
}

.agent-guide-page .credit-badge.cost-2 {
  background: rgba(255, 181, 111, 0.86) !important;
}

.agent-guide-page .credit-badge.cost-3 {
  background: rgba(196, 183, 255, 0.90) !important;
}

.agent-guide-page .detail-table {
  display: none !important;
}

.agent-guide-page .detail-card-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 22px !important;
}

.agent-guide-page .detail-card {
  min-height: 132px !important;
  padding: 18px !important;
  border-radius: 4px 18px 18px 18px !important;
  background: rgba(255, 255, 255, 0.065) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.agent-guide-page .mode-name {
  display: block !important;
  margin-bottom: 12px !important;
  color: rgba(255, 218, 210, 0.98) !important;
  font: 800 15px/1 ui-monospace, SFMono-Regular, Consolas, monospace !important;
}

.agent-guide-page .detail-card .credit-badge {
  float: right !important;
  margin-top: -28px !important;
}

.agent-guide-page .command-list,
.agent-guide-page .agent-link-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.agent-guide-page .command-list li,
.agent-guide-page .agent-link-list li {
  padding: 16px 18px !important;
  border-radius: 4px 16px 16px 16px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

.agent-guide-page .command-list li::before,
.agent-guide-page .agent-link-list li::before {
  content: "->" !important;
  margin-right: 8px !important;
  color: rgba(255, 147, 124, 0.95) !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important;
}

.agent-guide-page .command-list strong {
  color: rgba(255, 255, 255, 0.94) !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important;
}

.agent-guide-page .agent-link-list a {
  color: rgba(255, 218, 210, 0.98) !important;
  font-weight: 800 !important;
}

@media (max-width: 900px) {
  .agent-guide-page .agent-tools-section,
  .agent-guide-page .agent-faq-section,
  .agent-guide-page .detail-card-grid,
  .agent-guide-page .command-list,
  .agent-guide-page .agent-link-list {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  .agent-guide-page .agent-guide-hero {
    min-height: 560px !important;
    padding: 118px 18px 64px !important;
  }

  body.agent-guide-page .agent-guide-hero h1 {
    font-size: clamp(42px, 12vw, 58px) !important;
  }

  .agent-guide-page .agent-guide-hero::before {
    right: -80px !important;
    top: 38% !important;
    width: 240px !important;
    height: 210px !important;
  }

  .agent-guide-page .agent-hero-terminal {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .agent-guide-page .agent-hero-terminal code,
  .agent-guide-page .agent-hero-terminal span,
  .agent-guide-page .example {
    max-width: 100% !important;
  }

  .agent-guide-page .section {
    width: calc(100vw - 32px) !important;
    padding: 24px 18px !important;
  }

  .agent-guide-page .section h2 {
    align-items: flex-start !important;
    font-size: 30px !important;
  }
}

/* Claude Desktop setup technical Sakura system */
.claude-setup-page main {
  padding-top: 0 !important;
}

.claude-setup-page .container {
  width: 100% !important;
  max-width: none !important;
}

.claude-setup-page .claude-setup-hero {
  position: relative !important;
  min-height: clamp(560px, 66vh, 720px) !important;
  margin: 0 calc(50% - 50vw) clamp(34px, 5vw, 64px) !important;
  padding: clamp(118px, 13vw, 184px) clamp(24px, 7vw, 86px) clamp(72px, 9vw, 116px) !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    radial-gradient(circle at 50% 48%, rgba(255, 218, 210, 0.30) 0 14%, transparent 15%),
    radial-gradient(circle at 50% 46%, rgba(204, 112, 72, 0.30) 0 35%, transparent 36%),
    linear-gradient(112deg, #15151c 0%, #3a252c 45%, #1b2638 100%) !important;
  background-size: 72px 72px, 72px 72px, auto, auto, auto !important;
}

.claude-setup-page .claude-setup-hero::before {
  content: "" !important;
  position: absolute !important;
  right: 8vw !important;
  top: 20% !important;
  width: min(30vw, 350px) !important;
  height: min(25vw, 280px) !important;
  opacity: 0.44 !important;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 260 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 176 C78 120 118 90 202 36' fill='none' stroke='rgba(255,255,255,.34)' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M94 110 C126 108 152 120 176 144' fill='none' stroke='rgba(255,255,255,.16)' stroke-width='3' stroke-linecap='round'/%3E%3Cg fill='rgba(255,218,210,.82)' stroke='rgba(14,14,17,.18)' stroke-width='1.4'%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(18 82 124)'/%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(90 82 124)'/%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(162 82 124)'/%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(234 82 124)'/%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(306 82 124)'/%3E%3C/g%3E%3Ccircle cx='82' cy='124' r='6' fill='rgba(14,14,17,.72)'/%3E%3Cg opacity='.86' fill='rgba(255,218,210,.76)' stroke='rgba(14,14,17,.12)' stroke-width='1.2'%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(10 150 66)'/%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(82 150 66)'/%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(154 150 66)'/%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(226 150 66)'/%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(298 150 66)'/%3E%3C/g%3E%3Ccircle cx='150' cy='66' r='4.5' fill='rgba(14,14,17,.68)'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.claude-setup-page .claude-setup-hero > * {
  position: relative !important;
  z-index: 1 !important;
}

.claude-setup-page .claude-setup-hero .section-kicker {
  margin-bottom: 18px !important;
  color: rgba(255, 218, 210, 0.78) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

body.claude-setup-page .claude-setup-hero h1 {
  max-width: 1050px !important;
  margin: 0 auto 24px !important;
  color: rgba(255, 255, 255, 0.94) !important;
  background: none !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.94) !important;
  font-size: clamp(52px, 7.4vw, 108px) !important;
  font-weight: 400 !important;
  line-height: 0.98 !important;
  letter-spacing: 0 !important;
}

body.claude-setup-page .claude-setup-hero h1::before {
  content: none !important;
  display: none !important;
}

.claude-setup-page .claude-setup-hero p:not(.section-kicker) {
  max-width: 820px !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: clamp(18px, 2.2vw, 24px) !important;
  line-height: 1.45 !important;
}

.claude-setup-page .agent-hero-terminal {
  margin-top: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  max-width: min(760px, calc(100vw - 40px)) !important;
  padding: 14px 18px !important;
  border-radius: 4px 18px 18px 18px !important;
  background: rgba(5, 8, 15, 0.66) !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24) !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace !important;
  overflow: hidden !important;
}

.claude-setup-page .agent-hero-terminal span {
  color: rgba(143, 217, 182, 0.90) !important;
  white-space: nowrap !important;
}

.claude-setup-page .agent-hero-terminal code {
  color: rgba(255, 218, 210, 0.96) !important;
  white-space: nowrap !important;
}

.claude-setup-page .step-box {
  position: relative !important;
  width: min(1120px, calc(100vw - 48px)) !important;
  margin: 0 auto 28px !important;
  padding: clamp(28px, 4vw, 44px) !important;
  border-radius: 4px 28px 28px 28px !important;
  overflow: hidden !important;
  color: rgba(255, 255, 255, 0.88) !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255, 218, 210, 0.08), rgba(204, 112, 72, 0.09)),
    #171820 !important;
  background-size: 72px 72px, 72px 72px, auto, auto !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 24px 80px rgba(20, 16, 28, 0.16) !important;
}

.claude-setup-page .step-box::after {
  content: "" !important;
  position: absolute !important;
  right: -22px !important;
  top: -12px !important;
  width: 120px !important;
  height: 92px !important;
  opacity: 0.22 !important;
  pointer-events: none !important;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 110' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 88 C46 58 75 42 118 20' fill='none' stroke='rgba(255,255,255,.45)' stroke-width='4' stroke-linecap='round'/%3E%3Cg fill='rgba(255,218,210,.92)' stroke='rgba(14,14,17,.16)' stroke-width='1'%3E%3Cellipse cx='58' cy='55' rx='8' ry='18' transform='rotate(18 58 55)'/%3E%3Cellipse cx='58' cy='55' rx='8' ry='18' transform='rotate(90 58 55)'/%3E%3Cellipse cx='58' cy='55' rx='8' ry='18' transform='rotate(162 58 55)'/%3E%3Cellipse cx='58' cy='55' rx='8' ry='18' transform='rotate(234 58 55)'/%3E%3Cellipse cx='58' cy='55' rx='8' ry='18' transform='rotate(306 58 55)'/%3E%3C/g%3E%3Ccircle cx='58' cy='55' r='3.5' fill='rgba(14,14,17,.72)'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.claude-setup-page .step-box > * {
  position: relative !important;
  z-index: 1 !important;
}

.claude-setup-page .step-box h2 {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 22px !important;
  color: rgba(255, 255, 255, 0.94) !important;
  font-size: clamp(28px, 3.4vw, 42px) !important;
  font-weight: 400 !important;
  line-height: 1.08 !important;
}

.claude-setup-page .heading-seal {
  width: 44px !important;
  height: 44px !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  border-radius: 14px 5px 14px 5px !important;
  color: rgba(14, 14, 17, 0.76) !important;
  background: rgba(255, 218, 210, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  font: 800 13px/1 ui-monospace, SFMono-Regular, Consolas, monospace !important;
}

.claude-setup-page .step-box p,
.claude-setup-page .step-box p[style],
.claude-setup-page .step-box li {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 16px !important;
  line-height: 1.52 !important;
}

.claude-setup-page .step-box a {
  color: rgba(255, 218, 210, 0.96) !important;
}

.claude-setup-page .step-box ul {
  display: grid !important;
  gap: 10px !important;
  margin: 18px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.claude-setup-page .step-box li {
  padding-left: 0 !important;
}

.claude-setup-page .step-box li::before {
  content: "->" !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  margin-right: 8px !important;
  color: rgba(255, 147, 124, 0.95) !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important;
}

.claude-setup-page .code-block {
  margin: 14px 0 24px !important;
  padding: 18px !important;
  border-radius: 4px 18px 18px 18px !important;
  background: rgba(5, 8, 15, 0.74) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  overflow-x: auto !important;
}

.claude-setup-page .code-block code {
  display: block !important;
  min-width: 720px !important;
  color: rgba(232, 238, 248, 0.94) !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.claude-setup-page .inline-code {
  display: inline-flex !important;
  align-items: center !important;
  max-width: 100% !important;
  padding: 4px 8px !important;
  border-radius: 7px !important;
  color: rgba(255, 222, 112, 0.98) !important;
  background: rgba(5, 8, 15, 0.62) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace !important;
  hyphens: manual !important;
  overflow-wrap: normal !important;
}

.claude-setup-page .note-box {
  margin-top: 22px !important;
  padding: 18px 20px !important;
  border-radius: 4px 18px 18px 18px !important;
  background: rgba(255, 218, 210, 0.12) !important;
  border: 1px solid rgba(255, 218, 210, 0.32) !important;
  color: rgba(255, 255, 255, 0.84) !important;
}

.claude-setup-page .note-box strong {
  color: rgba(255, 210, 82, 0.94) !important;
}

.claude-setup-page .note-box p {
  margin: 4px 0 0 !important;
}

@media (max-width: 720px) {
  .claude-setup-page .claude-setup-hero {
    min-height: 560px !important;
    padding: 118px 18px 64px !important;
  }

  body.claude-setup-page .claude-setup-hero h1 {
    font-size: clamp(42px, 12vw, 58px) !important;
  }

  .claude-setup-page .claude-setup-hero::before {
    right: -80px !important;
    top: 38% !important;
    width: 240px !important;
    height: 210px !important;
  }

  .claude-setup-page .agent-hero-terminal {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .claude-setup-page .agent-hero-terminal code,
  .claude-setup-page .agent-hero-terminal span {
    max-width: 100% !important;
  }

  .claude-setup-page .step-box {
    width: calc(100vw - 32px) !important;
    padding: 24px 18px !important;
  }

  .claude-setup-page .step-box h2 {
    align-items: flex-start !important;
    font-size: 30px !important;
  }

  .claude-setup-page .code-block code {
    min-width: 620px !important;
    font-size: 13px !important;
  }
}

/* ChatGPT Desktop setup technical Sakura system */
.chatgpt-setup-page main {
  padding-top: 0 !important;
}

.chatgpt-setup-page .container {
  width: 100% !important;
  max-width: none !important;
}

.chatgpt-setup-page .chatgpt-setup-hero {
  position: relative !important;
  min-height: clamp(560px, 66vh, 720px) !important;
  margin: 0 calc(50% - 50vw) clamp(34px, 5vw, 64px) !important;
  padding: clamp(118px, 13vw, 184px) clamp(24px, 7vw, 86px) clamp(72px, 9vw, 116px) !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    radial-gradient(circle at 50% 48%, rgba(255, 218, 210, 0.28) 0 14%, transparent 15%),
    radial-gradient(circle at 50% 46%, rgba(143, 217, 182, 0.22) 0 35%, transparent 36%),
    linear-gradient(112deg, #15151c 0%, #263238 45%, #1a2638 100%) !important;
  background-size: 72px 72px, 72px 72px, auto, auto, auto !important;
}

.chatgpt-setup-page .chatgpt-setup-hero::before {
  content: "" !important;
  position: absolute !important;
  right: 8vw !important;
  top: 20% !important;
  width: min(30vw, 350px) !important;
  height: min(25vw, 280px) !important;
  opacity: 0.44 !important;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 260 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 176 C78 120 118 90 202 36' fill='none' stroke='rgba(255,255,255,.34)' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M94 110 C126 108 152 120 176 144' fill='none' stroke='rgba(255,255,255,.16)' stroke-width='3' stroke-linecap='round'/%3E%3Cg fill='rgba(255,218,210,.82)' stroke='rgba(14,14,17,.18)' stroke-width='1.4'%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(18 82 124)'/%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(90 82 124)'/%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(162 82 124)'/%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(234 82 124)'/%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(306 82 124)'/%3E%3C/g%3E%3Ccircle cx='82' cy='124' r='6' fill='rgba(14,14,17,.72)'/%3E%3Cg opacity='.86' fill='rgba(255,218,210,.76)' stroke='rgba(14,14,17,.12)' stroke-width='1.2'%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(10 150 66)'/%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(82 150 66)'/%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(154 150 66)'/%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(226 150 66)'/%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(298 150 66)'/%3E%3C/g%3E%3Ccircle cx='150' cy='66' r='4.5' fill='rgba(14,14,17,.68)'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.chatgpt-setup-page .chatgpt-setup-hero > * {
  position: relative !important;
  z-index: 1 !important;
}

.chatgpt-setup-page .chatgpt-setup-hero .section-kicker {
  margin-bottom: 18px !important;
  color: rgba(255, 218, 210, 0.78) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

body.chatgpt-setup-page .chatgpt-setup-hero h1 {
  max-width: 1050px !important;
  margin: 0 auto 24px !important;
  color: rgba(255, 255, 255, 0.94) !important;
  background: none !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.94) !important;
  font-size: clamp(52px, 7.4vw, 108px) !important;
  font-weight: 400 !important;
  line-height: 0.98 !important;
  letter-spacing: 0 !important;
}

body.chatgpt-setup-page .chatgpt-setup-hero h1::before {
  content: none !important;
  display: none !important;
}

.chatgpt-setup-page .chatgpt-setup-hero p:not(.section-kicker) {
  max-width: 820px !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: clamp(18px, 2.2vw, 24px) !important;
  line-height: 1.45 !important;
}

.chatgpt-setup-page .agent-hero-terminal {
  margin-top: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  max-width: min(760px, calc(100vw - 40px)) !important;
  padding: 14px 18px !important;
  border-radius: 4px 18px 18px 18px !important;
  background: rgba(5, 8, 15, 0.66) !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24) !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace !important;
  overflow: hidden !important;
}

.chatgpt-setup-page .agent-hero-terminal span {
  color: rgba(143, 217, 182, 0.90) !important;
  white-space: nowrap !important;
}

.chatgpt-setup-page .agent-hero-terminal code {
  color: rgba(255, 218, 210, 0.96) !important;
  white-space: nowrap !important;
}

.chatgpt-setup-page .step-box {
  position: relative !important;
  width: min(1120px, calc(100vw - 48px)) !important;
  margin: 0 auto 28px !important;
  padding: clamp(28px, 4vw, 44px) !important;
  border-radius: 4px 28px 28px 28px !important;
  overflow: hidden !important;
  color: rgba(255, 255, 255, 0.88) !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255, 218, 210, 0.07), rgba(143, 217, 182, 0.08)),
    #171820 !important;
  background-size: 72px 72px, 72px 72px, auto, auto !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 24px 80px rgba(20, 16, 28, 0.16) !important;
}

.chatgpt-setup-page .step-box::after {
  content: "" !important;
  position: absolute !important;
  right: -22px !important;
  top: -12px !important;
  width: 120px !important;
  height: 92px !important;
  opacity: 0.22 !important;
  pointer-events: none !important;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 110' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 88 C46 58 75 42 118 20' fill='none' stroke='rgba(255,255,255,.45)' stroke-width='4' stroke-linecap='round'/%3E%3Cg fill='rgba(255,218,210,.92)' stroke='rgba(14,14,17,.16)' stroke-width='1'%3E%3Cellipse cx='58' cy='55' rx='8' ry='18' transform='rotate(18 58 55)'/%3E%3Cellipse cx='58' cy='55' rx='8' ry='18' transform='rotate(90 58 55)'/%3E%3Cellipse cx='58' cy='55' rx='8' ry='18' transform='rotate(162 58 55)'/%3E%3Cellipse cx='58' cy='55' rx='8' ry='18' transform='rotate(234 58 55)'/%3E%3Cellipse cx='58' cy='55' rx='8' ry='18' transform='rotate(306 58 55)'/%3E%3C/g%3E%3Ccircle cx='58' cy='55' r='3.5' fill='rgba(14,14,17,.72)'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.chatgpt-setup-page .step-box > * {
  position: relative !important;
  z-index: 1 !important;
}

.chatgpt-setup-page .step-box h2 {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 22px !important;
  color: rgba(255, 255, 255, 0.94) !important;
  font-size: clamp(28px, 3.4vw, 42px) !important;
  font-weight: 400 !important;
  line-height: 1.08 !important;
}

.chatgpt-setup-page .heading-seal {
  width: 44px !important;
  height: 44px !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  border-radius: 14px 5px 14px 5px !important;
  color: rgba(14, 14, 17, 0.76) !important;
  background: rgba(255, 218, 210, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  font: 800 13px/1 ui-monospace, SFMono-Regular, Consolas, monospace !important;
}

.chatgpt-setup-page .step-box p,
.chatgpt-setup-page .step-box p[style],
.chatgpt-setup-page .step-box li {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 16px !important;
  line-height: 1.52 !important;
}

.chatgpt-setup-page .step-box a {
  color: rgba(255, 218, 210, 0.96) !important;
}

.chatgpt-setup-page .step-box ul {
  display: grid !important;
  gap: 10px !important;
  margin: 18px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.chatgpt-setup-page .step-box li {
  padding-left: 0 !important;
}

.chatgpt-setup-page .step-box li::before {
  content: "->" !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  margin-right: 8px !important;
  color: rgba(255, 147, 124, 0.95) !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important;
}

.chatgpt-setup-page .code-block {
  margin: 14px 0 24px !important;
  padding: 18px !important;
  border-radius: 4px 18px 18px 18px !important;
  background: rgba(5, 8, 15, 0.74) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  overflow-x: auto !important;
}

.chatgpt-setup-page .code-block code {
  display: block !important;
  min-width: 680px !important;
  color: rgba(232, 238, 248, 0.94) !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.chatgpt-setup-page .inline-code {
  display: inline-flex !important;
  align-items: center !important;
  max-width: 100% !important;
  padding: 4px 8px !important;
  border-radius: 7px !important;
  color: rgba(255, 222, 112, 0.98) !important;
  background: rgba(5, 8, 15, 0.62) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace !important;
  overflow-wrap: anywhere !important;
}

.chatgpt-setup-page .note-box {
  margin-top: 22px !important;
  padding: 18px 20px !important;
  border-radius: 4px 18px 18px 18px !important;
  background: rgba(255, 218, 210, 0.12) !important;
  border: 1px solid rgba(255, 218, 210, 0.32) !important;
  color: rgba(255, 255, 255, 0.84) !important;
}

.chatgpt-setup-page .note-box strong {
  color: rgba(255, 210, 82, 0.94) !important;
}

.chatgpt-setup-page .note-box p {
  margin: 4px 0 0 !important;
}

@media (max-width: 720px) {
  .chatgpt-setup-page .chatgpt-setup-hero {
    min-height: 560px !important;
    padding: 118px 18px 64px !important;
  }

  body.chatgpt-setup-page .chatgpt-setup-hero h1 {
    font-size: clamp(42px, 12vw, 58px) !important;
  }

  .chatgpt-setup-page .chatgpt-setup-hero::before {
    right: -80px !important;
    top: 38% !important;
    width: 240px !important;
    height: 210px !important;
  }

  .chatgpt-setup-page .agent-hero-terminal {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .chatgpt-setup-page .agent-hero-terminal code,
  .chatgpt-setup-page .agent-hero-terminal span {
    max-width: 100% !important;
  }

  .chatgpt-setup-page .step-box {
    width: calc(100vw - 32px) !important;
    padding: 24px 18px !important;
  }

  .chatgpt-setup-page .step-box h2 {
    align-items: flex-start !important;
    font-size: 30px !important;
  }

  .chatgpt-setup-page .code-block code {
    min-width: 560px !important;
    font-size: 13px !important;
  }
}

/* Generic technical setup page layer for agent integrations */
.tech-setup-page main {
  padding-top: 0 !important;
}

.tech-setup-page .container {
  width: 100% !important;
  max-width: none !important;
}

.tech-setup-page .tech-setup-hero {
  position: relative !important;
  min-height: clamp(560px, 66vh, 720px) !important;
  margin: 0 calc(50% - 50vw) clamp(34px, 5vw, 64px) !important;
  padding: clamp(118px, 13vw, 184px) clamp(24px, 7vw, 86px) clamp(72px, 9vw, 116px) !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    radial-gradient(circle at 50% 48%, rgba(255, 218, 210, 0.26) 0 14%, transparent 15%),
    radial-gradient(circle at 50% 46%, rgba(143, 217, 182, 0.28) 0 35%, transparent 36%),
    linear-gradient(112deg, #15151c 0%, #21352e 45%, #1a2638 100%) !important;
  background-size: 72px 72px, 72px 72px, auto, auto, auto !important;
}

.tech-setup-page .tech-setup-hero::before {
  content: "" !important;
  position: absolute !important;
  right: 8vw !important;
  top: 20% !important;
  width: min(30vw, 350px) !important;
  height: min(25vw, 280px) !important;
  opacity: 0.44 !important;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 260 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 176 C78 120 118 90 202 36' fill='none' stroke='rgba(255,255,255,.34)' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M94 110 C126 108 152 120 176 144' fill='none' stroke='rgba(255,255,255,.16)' stroke-width='3' stroke-linecap='round'/%3E%3Cg fill='rgba(255,218,210,.82)' stroke='rgba(14,14,17,.18)' stroke-width='1.4'%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(18 82 124)'/%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(90 82 124)'/%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(162 82 124)'/%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(234 82 124)'/%3E%3Cellipse cx='82' cy='124' rx='15' ry='34' transform='rotate(306 82 124)'/%3E%3C/g%3E%3Ccircle cx='82' cy='124' r='6' fill='rgba(14,14,17,.72)'/%3E%3Cg opacity='.86' fill='rgba(255,218,210,.76)' stroke='rgba(14,14,17,.12)' stroke-width='1.2'%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(10 150 66)'/%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(82 150 66)'/%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(154 150 66)'/%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(226 150 66)'/%3E%3Cellipse cx='150' cy='66' rx='10' ry='24' transform='rotate(298 150 66)'/%3E%3C/g%3E%3Ccircle cx='150' cy='66' r='4.5' fill='rgba(14,14,17,.68)'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.tech-setup-page .tech-setup-hero > * {
  position: relative !important;
  z-index: 1 !important;
}

.tech-setup-page .tech-setup-hero .section-kicker {
  margin-bottom: 18px !important;
  color: rgba(255, 218, 210, 0.78) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

body.tech-setup-page .tech-setup-hero h1 {
  max-width: 1050px !important;
  margin: 0 auto 24px !important;
  color: rgba(255, 255, 255, 0.94) !important;
  background: none !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.94) !important;
  font-size: clamp(52px, 7.4vw, 108px) !important;
  font-weight: 400 !important;
  line-height: 0.98 !important;
  letter-spacing: 0 !important;
}

body.tech-setup-page .tech-setup-hero h1::before {
  content: none !important;
  display: none !important;
}

.tech-setup-page .tech-setup-hero p:not(.section-kicker) {
  max-width: 820px !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: clamp(18px, 2.2vw, 24px) !important;
  line-height: 1.45 !important;
}

.tech-setup-page .agent-hero-terminal {
  margin-top: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  max-width: min(760px, calc(100vw - 40px)) !important;
  padding: 14px 18px !important;
  border-radius: 4px 18px 18px 18px !important;
  background: rgba(5, 8, 15, 0.66) !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24) !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace !important;
  overflow: hidden !important;
}

.tech-setup-page .agent-hero-terminal span {
  color: rgba(143, 217, 182, 0.90) !important;
  white-space: nowrap !important;
}

.tech-setup-page .agent-hero-terminal code {
  color: rgba(255, 218, 210, 0.96) !important;
  white-space: nowrap !important;
}

.tech-setup-page .step-box {
  position: relative !important;
  width: min(1120px, calc(100vw - 48px)) !important;
  margin: 0 auto 28px !important;
  padding: clamp(28px, 4vw, 44px) !important;
  border-radius: 4px 28px 28px 28px !important;
  overflow: hidden !important;
  color: rgba(255, 255, 255, 0.88) !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255, 218, 210, 0.07), rgba(143, 217, 182, 0.10)),
    #171820 !important;
  background-size: 72px 72px, 72px 72px, auto, auto !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 24px 80px rgba(20, 16, 28, 0.16) !important;
}

.tech-setup-page .step-box::after {
  content: "" !important;
  position: absolute !important;
  right: -22px !important;
  top: -12px !important;
  width: 120px !important;
  height: 92px !important;
  opacity: 0.22 !important;
  pointer-events: none !important;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 110' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 88 C46 58 75 42 118 20' fill='none' stroke='rgba(255,255,255,.45)' stroke-width='4' stroke-linecap='round'/%3E%3Cg fill='rgba(255,218,210,.92)' stroke='rgba(14,14,17,.16)' stroke-width='1'%3E%3Cellipse cx='58' cy='55' rx='8' ry='18' transform='rotate(18 58 55)'/%3E%3Cellipse cx='58' cy='55' rx='8' ry='18' transform='rotate(90 58 55)'/%3E%3Cellipse cx='58' cy='55' rx='8' ry='18' transform='rotate(162 58 55)'/%3E%3Cellipse cx='58' cy='55' rx='8' ry='18' transform='rotate(234 58 55)'/%3E%3Cellipse cx='58' cy='55' rx='8' ry='18' transform='rotate(306 58 55)'/%3E%3C/g%3E%3Ccircle cx='58' cy='55' r='3.5' fill='rgba(14,14,17,.72)'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.tech-setup-page .step-box > * {
  position: relative !important;
  z-index: 1 !important;
}

.tech-setup-page .step-box h2 {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 22px !important;
  color: rgba(255, 255, 255, 0.94) !important;
  font-size: clamp(28px, 3.4vw, 42px) !important;
  font-weight: 400 !important;
  line-height: 1.08 !important;
}

.tech-setup-page .heading-seal {
  width: 44px !important;
  height: 44px !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  border-radius: 14px 5px 14px 5px !important;
  color: rgba(14, 14, 17, 0.76) !important;
  background: rgba(255, 218, 210, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  font: 800 13px/1 ui-monospace, SFMono-Regular, Consolas, monospace !important;
}

.tech-setup-page .step-box p,
.tech-setup-page .step-box p[style],
.tech-setup-page .step-box li {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 16px !important;
  line-height: 1.52 !important;
}

.tech-setup-page .step-box a {
  color: rgba(255, 218, 210, 0.96) !important;
}

.tech-setup-page .step-box ul {
  display: grid !important;
  gap: 10px !important;
  margin: 18px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.tech-setup-page .step-box li {
  padding-left: 0 !important;
}

.tech-setup-page .step-box li::before {
  content: "->" !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  margin-right: 8px !important;
  color: rgba(255, 147, 124, 0.95) !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important;
}

.tech-setup-page .code-block {
  margin: 14px 0 24px !important;
  padding: 18px !important;
  border-radius: 4px 18px 18px 18px !important;
  background: rgba(5, 8, 15, 0.74) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  overflow-x: auto !important;
}

.tech-setup-page .code-block code {
  display: block !important;
  min-width: 760px !important;
  color: rgba(232, 238, 248, 0.94) !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.tech-setup-page .inline-code {
  display: inline-flex !important;
  align-items: center !important;
  max-width: 100% !important;
  padding: 4px 8px !important;
  border-radius: 7px !important;
  color: rgba(255, 222, 112, 0.98) !important;
  background: rgba(5, 8, 15, 0.62) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace !important;
  overflow-wrap: anywhere !important;
}

.tech-setup-page .note-box {
  margin-top: 22px !important;
  padding: 18px 20px !important;
  border-radius: 4px 18px 18px 18px !important;
  background: rgba(255, 218, 210, 0.12) !important;
  border: 1px solid rgba(255, 218, 210, 0.32) !important;
  color: rgba(255, 255, 255, 0.84) !important;
}

.tech-setup-page .note-box strong {
  color: rgba(255, 210, 82, 0.94) !important;
}

.tech-setup-page .note-box p {
  margin: 4px 0 0 !important;
}

@media (max-width: 720px) {
  .tech-setup-page .tech-setup-hero {
    min-height: 560px !important;
    padding: 118px 18px 64px !important;
  }

  body.tech-setup-page .tech-setup-hero h1 {
    font-size: clamp(42px, 12vw, 58px) !important;
  }

  .tech-setup-page .tech-setup-hero::before {
    right: -80px !important;
    top: 38% !important;
    width: 240px !important;
    height: 210px !important;
  }

  .tech-setup-page .agent-hero-terminal {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .tech-setup-page .agent-hero-terminal code,
  .tech-setup-page .agent-hero-terminal span {
    max-width: 100% !important;
  }

  .tech-setup-page .step-box {
    width: calc(100vw - 32px) !important;
    padding: 24px 18px !important;
  }

  .tech-setup-page .step-box h2 {
    align-items: flex-start !important;
    font-size: 30px !important;
  }

  .tech-setup-page .code-block code {
    min-width: 720px !important;
    font-size: 13px !important;
  }
}

/* Individual MCP setup hero colorways */
body.chatgpt-setup-page .chatgpt-setup-hero {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    radial-gradient(circle at 50% 48%, rgba(255, 218, 210, 0.24) 0 14%, transparent 15%),
    radial-gradient(circle at 50% 46%, rgba(146, 119, 255, 0.26) 0 35%, transparent 36%),
    linear-gradient(112deg, #12141f 0%, #283254 46%, #31263d 100%) !important;
  background-size: 72px 72px, 72px 72px, auto, auto, auto !important;
}

body.openclaw-setup-page .tech-setup-hero {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    radial-gradient(circle at 50% 48%, rgba(255, 218, 210, 0.26) 0 14%, transparent 15%),
    radial-gradient(circle at 50% 46%, rgba(255, 87, 87, 0.30) 0 35%, transparent 36%),
    linear-gradient(112deg, #171113 0%, #5b2024 46%, #34141f 100%) !important;
  background-size: 72px 72px, 72px 72px, auto, auto, auto !important;
}

body.openclaw-setup-page .agent-hero-terminal span {
  color: rgba(255, 146, 126, 0.92) !important;
}

body.hermes-setup-page .tech-setup-hero {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    radial-gradient(circle at 50% 48%, rgba(255, 218, 210, 0.22) 0 14%, transparent 15%),
    radial-gradient(circle at 50% 46%, rgba(88, 166, 255, 0.32) 0 35%, transparent 36%),
    linear-gradient(112deg, #101623 0%, #1e3158 46%, #142d42 100%) !important;
  background-size: 72px 72px, 72px 72px, auto, auto, auto !important;
}

body.hermes-setup-page .agent-hero-terminal span {
  color: rgba(136, 192, 255, 0.92) !important;
}

.claude-setup-page .claude-setup-hero::before,
.chatgpt-setup-page .chatgpt-setup-hero::before,
.tech-setup-page .tech-setup-hero::before {
  right: max(-28px, calc((100vw - 1120px) / 2 - 74px)) !important;
  top: 11% !important;
  width: clamp(230px, 28vw, 380px) !important;
  height: clamp(194px, 23vw, 322px) !important;
  opacity: 0.38 !important;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 260 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 170 C70 136, 112 124, 170 68 C190 49, 212 32, 242 18' fill='none' stroke='%23ffffff' stroke-opacity='.42' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M94 124 C92 92, 104 68, 128 44' fill='none' stroke='%23ffffff' stroke-opacity='.24' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M154 82 C178 84, 202 96, 226 116' fill='none' stroke='%23ffffff' stroke-opacity='.24' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cg transform='translate(76 138) scale(.82)'%3E%3Cellipse cx='0' cy='-24' rx='14' ry='25' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.20' stroke-width='1.5'/%3E%3Cellipse cx='23' cy='-7' rx='14' ry='25' transform='rotate(72 23 -7)' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.20' stroke-width='1.5'/%3E%3Cellipse cx='14' cy='20' rx='14' ry='25' transform='rotate(144 14 20)' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.20' stroke-width='1.5'/%3E%3Cellipse cx='-14' cy='20' rx='14' ry='25' transform='rotate(216 -14 20)' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.20' stroke-width='1.5'/%3E%3Cellipse cx='-23' cy='-7' rx='14' ry='25' transform='rotate(288 -23 -7)' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.20' stroke-width='1.5'/%3E%3Ccircle cx='0' cy='0' r='6' fill='%23ffffff' fill-opacity='.70'/%3E%3C/g%3E%3Cg transform='translate(130 52) scale(.56)' opacity='.84'%3E%3Cellipse cx='0' cy='-24' rx='14' ry='25' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.20' stroke-width='1.5'/%3E%3Cellipse cx='23' cy='-7' rx='14' ry='25' transform='rotate(72 23 -7)' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.20' stroke-width='1.5'/%3E%3Cellipse cx='14' cy='20' rx='14' ry='25' transform='rotate(144 14 20)' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.20' stroke-width='1.5'/%3E%3Cellipse cx='-14' cy='20' rx='14' ry='25' transform='rotate(216 -14 20)' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.20' stroke-width='1.5'/%3E%3Cellipse cx='-23' cy='-7' rx='14' ry='25' transform='rotate(288 -23 -7)' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.20' stroke-width='1.5'/%3E%3Ccircle cx='0' cy='0' r='6' fill='%23ffffff' fill-opacity='.70'/%3E%3C/g%3E%3Cg transform='translate(216 112) scale(.48)' opacity='.84'%3E%3Cellipse cx='0' cy='-24' rx='14' ry='25' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.20' stroke-width='1.5'/%3E%3Cellipse cx='23' cy='-7' rx='14' ry='25' transform='rotate(72 23 -7)' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.20' stroke-width='1.5'/%3E%3Cellipse cx='14' cy='20' rx='14' ry='25' transform='rotate(144 14 20)' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.20' stroke-width='1.5'/%3E%3Cellipse cx='-14' cy='20' rx='14' ry='25' transform='rotate(216 -14 20)' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.20' stroke-width='1.5'/%3E%3Cellipse cx='-23' cy='-7' rx='14' ry='25' transform='rotate(288 -23 -7)' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.20' stroke-width='1.5'/%3E%3Ccircle cx='0' cy='0' r='6' fill='%23ffffff' fill-opacity='.70'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat !important;
}

@media (max-width: 700px) {
  .claude-setup-page .claude-setup-hero::before,
  .chatgpt-setup-page .chatgpt-setup-hero::before,
  .tech-setup-page .tech-setup-hero::before {
    right: -96px !important;
    top: 18% !important;
    width: 230px !important;
    height: 194px !important;
    opacity: 0.28 !important;
  }
}

/* Legal pages: readable Sakura document layout */
body.legal-page main {
  padding: clamp(118px, 12vw, 150px) 24px 64px !important;
}

body.legal-page .container {
  width: min(1220px, calc(100vw - 48px)) !important;
  max-width: none !important;
}

body.legal-page .card {
  position: relative !important;
  overflow: hidden !important;
  padding: clamp(30px, 5vw, 64px) !important;
  text-align: left !important;
  color: rgba(14, 14, 17, 0.76) !important;
  background:
    linear-gradient(90deg, rgba(14, 14, 17, 0.032) 1px, transparent 1px),
    linear-gradient(180deg, rgba(14, 14, 17, 0.028) 1px, transparent 1px),
    radial-gradient(circle at 92% 8%, rgba(255, 218, 210, 0.62), transparent 22%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 249, 247, 0.88)) !important;
  background-size: 72px 72px, 72px 72px, auto, auto !important;
  border: 1px solid rgba(14, 14, 17, 0.12) !important;
  border-left: 4px solid rgba(255, 143, 124, 0.78) !important;
  border-radius: 6px 28px 28px 28px !important;
  box-shadow: 0 34px 110px rgba(126, 78, 72, 0.12) !important;
  backdrop-filter: blur(18px) !important;
}

body.legal-page .card::before {
  opacity: 0.72 !important;
  right: -18px !important;
  top: -18px !important;
}

body.legal-page .card::after {
  right: -30px !important;
  top: -28px !important;
  width: 260px !important;
  height: 220px !important;
  opacity: 0.36 !important;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 260 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 170 C70 136, 112 124, 170 68 C190 49, 212 32, 242 18' fill='none' stroke='%230e0e11' stroke-opacity='.34' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M94 124 C92 92, 104 68, 128 44' fill='none' stroke='%230e0e11' stroke-opacity='.22' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M154 82 C178 84, 202 96, 226 116' fill='none' stroke='%230e0e11' stroke-opacity='.22' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cg transform='translate(76 138) scale(.82)'%3E%3Cellipse cx='0' cy='-24' rx='14' ry='25' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='23' cy='-7' rx='14' ry='25' transform='rotate(72 23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='14' cy='20' rx='14' ry='25' transform='rotate(144 14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-14' cy='20' rx='14' ry='25' transform='rotate(216 -14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-23' cy='-7' rx='14' ry='25' transform='rotate(288 -23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Ccircle cx='0' cy='0' r='6' fill='%230e0e11' fill-opacity='.72'/%3E%3C/g%3E%3Cg transform='translate(130 52) scale(.56)' opacity='.82'%3E%3Cellipse cx='0' cy='-24' rx='14' ry='25' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='23' cy='-7' rx='14' ry='25' transform='rotate(72 23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='14' cy='20' rx='14' ry='25' transform='rotate(144 14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-14' cy='20' rx='14' ry='25' transform='rotate(216 -14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-23' cy='-7' rx='14' ry='25' transform='rotate(288 -23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Ccircle cx='0' cy='0' r='6' fill='%230e0e11' fill-opacity='.72'/%3E%3C/g%3E%3Cg transform='translate(216 112) scale(.48)' opacity='.82'%3E%3Cellipse cx='0' cy='-24' rx='14' ry='25' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='23' cy='-7' rx='14' ry='25' transform='rotate(72 23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='14' cy='20' rx='14' ry='25' transform='rotate(144 14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-14' cy='20' rx='14' ry='25' transform='rotate(216 -14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-23' cy='-7' rx='14' ry='25' transform='rotate(288 -23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Ccircle cx='0' cy='0' r='6' fill='%230e0e11' fill-opacity='.72'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat !important;
}

body.legal-page::before {
  width: min(34vw, 360px) !important;
  height: min(28vw, 300px) !important;
  right: -42px !important;
  top: 96px !important;
  opacity: 0.30 !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 260 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 170 C70 136, 112 124, 170 68 C190 49, 212 32, 242 18' fill='none' stroke='%230e0e11' stroke-opacity='.34' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M94 124 C92 92, 104 68, 128 44' fill='none' stroke='%230e0e11' stroke-opacity='.22' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M154 82 C178 84, 202 96, 226 116' fill='none' stroke='%230e0e11' stroke-opacity='.22' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cg transform='translate(76 138) scale(.82)'%3E%3Cellipse cx='0' cy='-24' rx='14' ry='25' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='23' cy='-7' rx='14' ry='25' transform='rotate(72 23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='14' cy='20' rx='14' ry='25' transform='rotate(144 14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-14' cy='20' rx='14' ry='25' transform='rotate(216 -14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-23' cy='-7' rx='14' ry='25' transform='rotate(288 -23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Ccircle cx='0' cy='0' r='6' fill='%230e0e11' fill-opacity='.72'/%3E%3C/g%3E%3Cg transform='translate(130 52) scale(.56)' opacity='.82'%3E%3Cellipse cx='0' cy='-24' rx='14' ry='25' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='23' cy='-7' rx='14' ry='25' transform='rotate(72 23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='14' cy='20' rx='14' ry='25' transform='rotate(144 14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-14' cy='20' rx='14' ry='25' transform='rotate(216 -14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-23' cy='-7' rx='14' ry='25' transform='rotate(288 -23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Ccircle cx='0' cy='0' r='6' fill='%230e0e11' fill-opacity='.72'/%3E%3C/g%3E%3Cg transform='translate(216 112) scale(.48)' opacity='.82'%3E%3Cellipse cx='0' cy='-24' rx='14' ry='25' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='23' cy='-7' rx='14' ry='25' transform='rotate(72 23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='14' cy='20' rx='14' ry='25' transform='rotate(144 14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-14' cy='20' rx='14' ry='25' transform='rotate(216 -14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-23' cy='-7' rx='14' ry='25' transform='rotate(288 -23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Ccircle cx='0' cy='0' r='6' fill='%230e0e11' fill-opacity='.72'/%3E%3C/g%3E%3C/svg%3E") !important;
}

/* Use the refined homepage Sakura branch as the default for all inner pages. */
body:not(.home-page)::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 260 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 170 C70 136, 112 124, 170 68 C190 49, 212 32, 242 18' fill='none' stroke='%230e0e11' stroke-opacity='.34' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M94 124 C92 92, 104 68, 128 44' fill='none' stroke='%230e0e11' stroke-opacity='.22' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M154 82 C178 84, 202 96, 226 116' fill='none' stroke='%230e0e11' stroke-opacity='.22' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cg transform='translate(76 138) scale(.82)'%3E%3Cellipse cx='0' cy='-24' rx='14' ry='25' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='23' cy='-7' rx='14' ry='25' transform='rotate(72 23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='14' cy='20' rx='14' ry='25' transform='rotate(144 14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-14' cy='20' rx='14' ry='25' transform='rotate(216 -14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-23' cy='-7' rx='14' ry='25' transform='rotate(288 -23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Ccircle cx='0' cy='0' r='6' fill='%230e0e11' fill-opacity='.72'/%3E%3C/g%3E%3Cg transform='translate(130 52) scale(.56)' opacity='.82'%3E%3Cellipse cx='0' cy='-24' rx='14' ry='25' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='23' cy='-7' rx='14' ry='25' transform='rotate(72 23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='14' cy='20' rx='14' ry='25' transform='rotate(144 14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-14' cy='20' rx='14' ry='25' transform='rotate(216 -14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-23' cy='-7' rx='14' ry='25' transform='rotate(288 -23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Ccircle cx='0' cy='0' r='6' fill='%230e0e11' fill-opacity='.72'/%3E%3C/g%3E%3Cg transform='translate(216 112) scale(.48)' opacity='.82'%3E%3Cellipse cx='0' cy='-24' rx='14' ry='25' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='23' cy='-7' rx='14' ry='25' transform='rotate(72 23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='14' cy='20' rx='14' ry='25' transform='rotate(144 14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-14' cy='20' rx='14' ry='25' transform='rotate(216 -14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-23' cy='-7' rx='14' ry='25' transform='rotate(288 -23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Ccircle cx='0' cy='0' r='6' fill='%230e0e11' fill-opacity='.72'/%3E%3C/g%3E%3C/svg%3E") !important;
}

body:not(.home-page) .card::after,
body:not(.home-page) .feature-card::after,
body:not(.home-page) .type-card::after,
body:not(.home-page) .pricing-card::after,
body:not(.home-page) .faq-item::after,
body:not(.home-page) .faq-card::after,
body:not(.home-page) .auth-card::after,
body:not(.home-page) .admin-card::after,
body:not(.home-page) .setup-card::after,
body:not(.home-page) .step-card::after,
body:not(.home-page) .content-card::after,
body:not(.home-page) .contact-card::after {
  right: -30px !important;
  top: -28px !important;
  width: 168px !important;
  height: 142px !important;
  opacity: 0.30 !important;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 260 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 170 C70 136, 112 124, 170 68 C190 49, 212 32, 242 18' fill='none' stroke='%230e0e11' stroke-opacity='.34' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M94 124 C92 92, 104 68, 128 44' fill='none' stroke='%230e0e11' stroke-opacity='.22' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M154 82 C178 84, 202 96, 226 116' fill='none' stroke='%230e0e11' stroke-opacity='.22' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cg transform='translate(76 138) scale(.82)'%3E%3Cellipse cx='0' cy='-24' rx='14' ry='25' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='23' cy='-7' rx='14' ry='25' transform='rotate(72 23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='14' cy='20' rx='14' ry='25' transform='rotate(144 14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-14' cy='20' rx='14' ry='25' transform='rotate(216 -14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-23' cy='-7' rx='14' ry='25' transform='rotate(288 -23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Ccircle cx='0' cy='0' r='6' fill='%230e0e11' fill-opacity='.72'/%3E%3C/g%3E%3Cg transform='translate(130 52) scale(.56)' opacity='.82'%3E%3Cellipse cx='0' cy='-24' rx='14' ry='25' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='23' cy='-7' rx='14' ry='25' transform='rotate(72 23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='14' cy='20' rx='14' ry='25' transform='rotate(144 14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-14' cy='20' rx='14' ry='25' transform='rotate(216 -14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-23' cy='-7' rx='14' ry='25' transform='rotate(288 -23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Ccircle cx='0' cy='0' r='6' fill='%230e0e11' fill-opacity='.72'/%3E%3C/g%3E%3Cg transform='translate(216 112) scale(.48)' opacity='.82'%3E%3Cellipse cx='0' cy='-24' rx='14' ry='25' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='23' cy='-7' rx='14' ry='25' transform='rotate(72 23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='14' cy='20' rx='14' ry='25' transform='rotate(144 14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-14' cy='20' rx='14' ry='25' transform='rotate(216 -14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-23' cy='-7' rx='14' ry='25' transform='rotate(288 -23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Ccircle cx='0' cy='0' r='6' fill='%230e0e11' fill-opacity='.72'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat !important;
}

body:not(.home-page) .feature-icon {
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 260 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 170 C70 136, 112 124, 170 68 C190 49, 212 32, 242 18' fill='none' stroke='%230e0e11' stroke-opacity='.34' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M94 124 C92 92, 104 68, 128 44' fill='none' stroke='%230e0e11' stroke-opacity='.22' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M154 82 C178 84, 202 96, 226 116' fill='none' stroke='%230e0e11' stroke-opacity='.22' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cg transform='translate(76 138) scale(.82)'%3E%3Cellipse cx='0' cy='-24' rx='14' ry='25' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='23' cy='-7' rx='14' ry='25' transform='rotate(72 23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='14' cy='20' rx='14' ry='25' transform='rotate(144 14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-14' cy='20' rx='14' ry='25' transform='rotate(216 -14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-23' cy='-7' rx='14' ry='25' transform='rotate(288 -23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Ccircle cx='0' cy='0' r='6' fill='%230e0e11' fill-opacity='.72'/%3E%3C/g%3E%3Cg transform='translate(130 52) scale(.56)' opacity='.82'%3E%3Cellipse cx='0' cy='-24' rx='14' ry='25' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='23' cy='-7' rx='14' ry='25' transform='rotate(72 23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='14' cy='20' rx='14' ry='25' transform='rotate(144 14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-14' cy='20' rx='14' ry='25' transform='rotate(216 -14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-23' cy='-7' rx='14' ry='25' transform='rotate(288 -23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Ccircle cx='0' cy='0' r='6' fill='%230e0e11' fill-opacity='.72'/%3E%3C/g%3E%3Cg transform='translate(216 112) scale(.48)' opacity='.82'%3E%3Cellipse cx='0' cy='-24' rx='14' ry='25' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='23' cy='-7' rx='14' ry='25' transform='rotate(72 23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='14' cy='20' rx='14' ry='25' transform='rotate(144 14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-14' cy='20' rx='14' ry='25' transform='rotate(216 -14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-23' cy='-7' rx='14' ry='25' transform='rotate(288 -23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Ccircle cx='0' cy='0' r='6' fill='%230e0e11' fill-opacity='.72'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat !important;
}

body:not(.home-page) .feature-icon svg {
  opacity: 0 !important;
}

body.legal-page .card > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Feature page: keep hero and dark agent panel on the refined Sakura branch system. */
.features-page .features-hero::after {
  right: max(18px, calc((100vw - 1120px) / 2 - 28px)) !important;
  top: 33% !important;
  width: clamp(210px, 25vw, 340px) !important;
  height: clamp(178px, 21vw, 288px) !important;
  opacity: 0.42 !important;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 260 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 170 C70 136, 112 124, 170 68 C190 49, 212 32, 242 18' fill='none' stroke='%230e0e11' stroke-opacity='.34' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M94 124 C92 92, 104 68, 128 44' fill='none' stroke='%230e0e11' stroke-opacity='.22' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M154 82 C178 84, 202 96, 226 116' fill='none' stroke='%230e0e11' stroke-opacity='.22' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cg transform='translate(76 138) scale(.82)'%3E%3Cellipse cx='0' cy='-24' rx='14' ry='25' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='23' cy='-7' rx='14' ry='25' transform='rotate(72 23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='14' cy='20' rx='14' ry='25' transform='rotate(144 14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-14' cy='20' rx='14' ry='25' transform='rotate(216 -14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-23' cy='-7' rx='14' ry='25' transform='rotate(288 -23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Ccircle cx='0' cy='0' r='6' fill='%230e0e11' fill-opacity='.72'/%3E%3C/g%3E%3Cg transform='translate(130 52) scale(.56)' opacity='.82'%3E%3Cellipse cx='0' cy='-24' rx='14' ry='25' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='23' cy='-7' rx='14' ry='25' transform='rotate(72 23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='14' cy='20' rx='14' ry='25' transform='rotate(144 14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-14' cy='20' rx='14' ry='25' transform='rotate(216 -14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-23' cy='-7' rx='14' ry='25' transform='rotate(288 -23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Ccircle cx='0' cy='0' r='6' fill='%230e0e11' fill-opacity='.72'/%3E%3C/g%3E%3Cg transform='translate(216 112) scale(.48)' opacity='.82'%3E%3Cellipse cx='0' cy='-24' rx='14' ry='25' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='23' cy='-7' rx='14' ry='25' transform='rotate(72 23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='14' cy='20' rx='14' ry='25' transform='rotate(144 14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-14' cy='20' rx='14' ry='25' transform='rotate(216 -14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-23' cy='-7' rx='14' ry='25' transform='rotate(288 -23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Ccircle cx='0' cy='0' r='6' fill='%230e0e11' fill-opacity='.72'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat !important;
}

.features-page .features-agent-section::after {
  right: -38px !important;
  top: 38px !important;
  width: 300px !important;
  height: 254px !important;
  opacity: 0.34 !important;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 260 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 170 C70 136, 112 124, 170 68 C190 49, 212 32, 242 18' fill='none' stroke='%23ffffff' stroke-opacity='.52' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M94 124 C92 92, 104 68, 128 44' fill='none' stroke='%23ffdad2' stroke-opacity='.42' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M154 82 C178 84, 202 96, 226 116' fill='none' stroke='%23ffdad2' stroke-opacity='.42' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cg transform='translate(76 138) scale(.82)'%3E%3Cellipse cx='0' cy='-24' rx='14' ry='25' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.22' stroke-width='1.5'/%3E%3Cellipse cx='23' cy='-7' rx='14' ry='25' transform='rotate(72 23 -7)' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.22' stroke-width='1.5'/%3E%3Cellipse cx='14' cy='20' rx='14' ry='25' transform='rotate(144 14 20)' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.22' stroke-width='1.5'/%3E%3Cellipse cx='-14' cy='20' rx='14' ry='25' transform='rotate(216 -14 20)' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.22' stroke-width='1.5'/%3E%3Cellipse cx='-23' cy='-7' rx='14' ry='25' transform='rotate(288 -23 -7)' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.22' stroke-width='1.5'/%3E%3Ccircle cx='0' cy='0' r='6' fill='%23ffffff' fill-opacity='.7'/%3E%3C/g%3E%3Cg transform='translate(130 52) scale(.56)' opacity='.82'%3E%3Cellipse cx='0' cy='-24' rx='14' ry='25' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.22' stroke-width='1.5'/%3E%3Cellipse cx='23' cy='-7' rx='14' ry='25' transform='rotate(72 23 -7)' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.22' stroke-width='1.5'/%3E%3Cellipse cx='14' cy='20' rx='14' ry='25' transform='rotate(144 14 20)' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.22' stroke-width='1.5'/%3E%3Cellipse cx='-14' cy='20' rx='14' ry='25' transform='rotate(216 -14 20)' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.22' stroke-width='1.5'/%3E%3Cellipse cx='-23' cy='-7' rx='14' ry='25' transform='rotate(288 -23 -7)' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.22' stroke-width='1.5'/%3E%3Ccircle cx='0' cy='0' r='6' fill='%23ffffff' fill-opacity='.7'/%3E%3C/g%3E%3Cg transform='translate(216 112) scale(.48)' opacity='.82'%3E%3Cellipse cx='0' cy='-24' rx='14' ry='25' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.22' stroke-width='1.5'/%3E%3Cellipse cx='23' cy='-7' rx='14' ry='25' transform='rotate(72 23 -7)' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.22' stroke-width='1.5'/%3E%3Cellipse cx='14' cy='20' rx='14' ry='25' transform='rotate(144 14 20)' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.22' stroke-width='1.5'/%3E%3Cellipse cx='-14' cy='20' rx='14' ry='25' transform='rotate(216 -14 20)' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.22' stroke-width='1.5'/%3E%3Cellipse cx='-23' cy='-7' rx='14' ry='25' transform='rotate(288 -23 -7)' fill='%23ffdad2' fill-opacity='.86' stroke='%23ffffff' stroke-opacity='.22' stroke-width='1.5'/%3E%3Ccircle cx='0' cy='0' r='6' fill='%23ffffff' fill-opacity='.7'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat !important;
}

@media (max-width: 700px) {
  .features-page .features-hero::after {
    right: -86px !important;
    top: 40% !important;
    width: 220px !important;
    height: 186px !important;
    opacity: 0.28 !important;
  }

  .features-page .features-agent-section::after {
    right: -96px !important;
    top: 24px !important;
    width: 230px !important;
    height: 194px !important;
    opacity: 0.22 !important;
  }
}

/* Pricing hero: align the decorative branch with the homepage Sakura SVG. */
.pricing-page .pricing-hero::before {
  right: max(18px, calc((100vw - 1120px) / 2 - 28px)) !important;
  top: 29% !important;
  width: clamp(220px, 27vw, 360px) !important;
  height: clamp(186px, 22vw, 304px) !important;
  opacity: 0.42 !important;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 260 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 170 C70 136, 112 124, 170 68 C190 49, 212 32, 242 18' fill='none' stroke='%230e0e11' stroke-opacity='.34' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M94 124 C92 92, 104 68, 128 44' fill='none' stroke='%230e0e11' stroke-opacity='.22' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M154 82 C178 84, 202 96, 226 116' fill='none' stroke='%230e0e11' stroke-opacity='.22' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cg transform='translate(76 138) scale(.82)'%3E%3Cellipse cx='0' cy='-24' rx='14' ry='25' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='23' cy='-7' rx='14' ry='25' transform='rotate(72 23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='14' cy='20' rx='14' ry='25' transform='rotate(144 14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-14' cy='20' rx='14' ry='25' transform='rotate(216 -14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-23' cy='-7' rx='14' ry='25' transform='rotate(288 -23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Ccircle cx='0' cy='0' r='6' fill='%230e0e11' fill-opacity='.72'/%3E%3C/g%3E%3Cg transform='translate(130 52) scale(.56)' opacity='.82'%3E%3Cellipse cx='0' cy='-24' rx='14' ry='25' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='23' cy='-7' rx='14' ry='25' transform='rotate(72 23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='14' cy='20' rx='14' ry='25' transform='rotate(144 14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-14' cy='20' rx='14' ry='25' transform='rotate(216 -14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-23' cy='-7' rx='14' ry='25' transform='rotate(288 -23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Ccircle cx='0' cy='0' r='6' fill='%230e0e11' fill-opacity='.72'/%3E%3C/g%3E%3Cg transform='translate(216 112) scale(.48)' opacity='.82'%3E%3Cellipse cx='0' cy='-24' rx='14' ry='25' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='23' cy='-7' rx='14' ry='25' transform='rotate(72 23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='14' cy='20' rx='14' ry='25' transform='rotate(144 14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-14' cy='20' rx='14' ry='25' transform='rotate(216 -14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-23' cy='-7' rx='14' ry='25' transform='rotate(288 -23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Ccircle cx='0' cy='0' r='6' fill='%230e0e11' fill-opacity='.72'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat !important;
}

@media (max-width: 700px) {
  .pricing-page .pricing-hero::before {
    right: -86px !important;
    top: 36% !important;
    width: 230px !important;
    height: 194px !important;
    opacity: 0.28 !important;
  }
}

/* About hero: align the decorative branch with the homepage Sakura SVG. */
.about-page .about-hero::before {
  right: max(-82px, calc((100vw - 1120px) / 2 - 172px)) !important;
  top: 27% !important;
  width: clamp(220px, 27vw, 360px) !important;
  height: clamp(186px, 22vw, 304px) !important;
  opacity: 0.38 !important;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 260 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 170 C70 136, 112 124, 170 68 C190 49, 212 32, 242 18' fill='none' stroke='%230e0e11' stroke-opacity='.34' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M94 124 C92 92, 104 68, 128 44' fill='none' stroke='%230e0e11' stroke-opacity='.22' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M154 82 C178 84, 202 96, 226 116' fill='none' stroke='%230e0e11' stroke-opacity='.22' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cg transform='translate(76 138) scale(.82)'%3E%3Cellipse cx='0' cy='-24' rx='14' ry='25' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='23' cy='-7' rx='14' ry='25' transform='rotate(72 23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='14' cy='20' rx='14' ry='25' transform='rotate(144 14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-14' cy='20' rx='14' ry='25' transform='rotate(216 -14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-23' cy='-7' rx='14' ry='25' transform='rotate(288 -23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Ccircle cx='0' cy='0' r='6' fill='%230e0e11' fill-opacity='.72'/%3E%3C/g%3E%3Cg transform='translate(130 52) scale(.56)' opacity='.82'%3E%3Cellipse cx='0' cy='-24' rx='14' ry='25' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='23' cy='-7' rx='14' ry='25' transform='rotate(72 23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='14' cy='20' rx='14' ry='25' transform='rotate(144 14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-14' cy='20' rx='14' ry='25' transform='rotate(216 -14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-23' cy='-7' rx='14' ry='25' transform='rotate(288 -23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Ccircle cx='0' cy='0' r='6' fill='%230e0e11' fill-opacity='.72'/%3E%3C/g%3E%3Cg transform='translate(216 112) scale(.48)' opacity='.82'%3E%3Cellipse cx='0' cy='-24' rx='14' ry='25' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='23' cy='-7' rx='14' ry='25' transform='rotate(72 23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='14' cy='20' rx='14' ry='25' transform='rotate(144 14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-14' cy='20' rx='14' ry='25' transform='rotate(216 -14 20)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Cellipse cx='-23' cy='-7' rx='14' ry='25' transform='rotate(288 -23 -7)' fill='%23ffdad2' fill-opacity='.88' stroke='%230e0e11' stroke-opacity='.15' stroke-width='1.5'/%3E%3Ccircle cx='0' cy='0' r='6' fill='%230e0e11' fill-opacity='.72'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat !important;
}

@media (max-width: 700px) {
  .about-page .about-hero::before {
    right: -148px !important;
    top: 36% !important;
    width: 230px !important;
    height: 194px !important;
    opacity: 0.28 !important;
  }
}

/* Home header: keep desktop and tablet widths in one clean row. */
@media (min-width: 641px) {
  .home-page nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    min-height: 84px !important;
  }

  .home-page nav .nav-buttons,
  .home-page nav #navLogout,
  .home-page nav #navLogin,
  nav .nav-buttons,
  nav #navLogout,
  nav #navLogin {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .home-page nav #navLogin[style*="none"] {
    display: none !important;
  }

  .home-page nav #navLogout[style*="none"] {
    display: none !important;
  }

  nav #navLogin[style*="none"] {
    display: none !important;
  }

  nav #navLogout[style*="none"] {
    display: none !important;
  }

  .home-page nav .nav-buttons .btn,
  nav .nav-buttons .btn {
    min-height: 50px !important;
    padding: 0 28px !important;
    white-space: nowrap !important;
  }
}

/* Unified Sakura Samuraizer logo: match the homepage mark across every page. */
nav .logo {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 56px !important;
  padding: 7px 42px 7px 8px !important;
  border: 1px solid rgba(14, 14, 17, 0.10) !important;
  border-radius: 6px 24px 24px 6px !important;
  background:
    radial-gradient(circle at 24% 50%, rgba(255, 218, 210, 0.58), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 248, 244, 0.92)) !important;
  color: var(--color-midnight-ink) !important;
  text-decoration: none !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    0 12px 32px rgba(126, 78, 72, 0.08) !important;
}

nav .logo::after {
  content: "\4F8D" !important;
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 8px 3px 8px 3px !important;
  display: grid !important;
  place-items: center !important;
  color: rgba(14, 14, 17, 0.42) !important;
  border: 1px solid rgba(226, 95, 77, 0.18) !important;
  background: rgba(255, 218, 210, 0.44) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  transform: translateY(-50%) rotate(-6deg) !important;
}

nav .logo img {
  width: 38px !important;
  height: 38px !important;
  padding: 4px !important;
  border-radius: 12px 4px 12px 4px !important;
  border: 1px solid rgba(226, 95, 77, 0.22) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 218, 210, 0.90), rgba(255, 255, 255, 0.92)) !important;
  box-shadow: 0 8px 18px rgba(226, 95, 77, 0.16) !important;
}

nav .brand-copy {
  display: grid !important;
  gap: 1px !important;
  line-height: 1.05 !important;
}

nav .brand-name {
  color: var(--color-midnight-ink) !important;
  font-size: 18px !important;
  font-weight: 650 !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
}

nav .brand-subline {
  display: block !important;
  color: rgba(14, 14, 17, 0.52) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

@media (max-width: 640px) {
  body:not(.home-page) nav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
    justify-items: start !important;
    gap: 12px !important;
    min-height: 154px !important;
    padding: 12px 16px 14px !important;
    overflow: hidden !important;
  }

  nav .logo {
    width: 100% !important;
    max-width: calc(100vw - 32px) !important;
    min-height: 58px !important;
    gap: 9px !important;
    padding: 7px 42px 7px 8px !important;
  }

  nav .logo::after {
    right: 11px !important;
  }

  nav .logo img {
    width: 31px !important;
    height: 31px !important;
    padding: 3px !important;
  }

  nav .brand-name {
    font-size: clamp(17px, 4.8vw, 20px) !important;
  }

  nav .brand-subline {
    font-size: 8px !important;
    letter-spacing: 0.10em !important;
  }

  .home-page nav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
    justify-items: start !important;
    gap: 12px !important;
    min-height: 154px !important;
    padding: 12px 16px 14px !important;
    overflow: hidden !important;
  }

  .home-page nav .nav-buttons,
  .home-page nav #navLogout,
  .home-page nav #navLogin {
    width: fit-content !important;
    max-width: calc(100vw - 32px) !important;
    min-width: 0 !important;
    overflow: hidden !important;
    justify-self: center !important;
  }

  .home-page nav #navLogout,
  .home-page nav #navLogin {
    grid-template-columns: auto auto !important;
    gap: 8px !important;
  }

  .home-page nav #navLogin {
    grid-template-columns: 1fr !important;
  }

  .home-page nav #navLogout[style*="grid"],
  .home-page nav #navLogin[style*="grid"] {
    display: grid !important;
  }

  .home-page nav #navLogin[style*="none"],
  .home-page nav #navLogout[style*="none"] {
    display: none !important;
  }

  .home-page nav .nav-buttons .btn {
    min-height: 42px !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 18px !important;
    font-size: clamp(13px, 3.9vw, 15px) !important;
    white-space: nowrap !important;
    text-align: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  body:not(.home-page) nav .nav-buttons,
  body:not(.home-page) nav .nav-user,
  body:not(.home-page) nav .nav-links,
  body:not(.home-page) nav #navLogout,
  body:not(.home-page) nav #navLogin {
    width: fit-content !important;
    max-width: calc(100vw - 32px) !important;
    min-width: 0 !important;
    overflow: hidden !important;
    justify-self: center !important;
  }

  body:not(.home-page) nav .nav-user,
  body:not(.home-page) nav .nav-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
  }

  body:not(.home-page) nav #navLogout,
  body:not(.home-page) nav #navLogin {
    grid-template-columns: auto auto !important;
    gap: 8px !important;
  }

  body:not(.home-page) nav #navLogin {
    grid-template-columns: 1fr !important;
  }

  body:not(.home-page) nav .nav-buttons .btn {
    min-height: 42px !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 18px !important;
    font-size: clamp(13px, 3.9vw, 15px) !important;
    white-space: nowrap !important;
    text-align: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  body:not(.home-page) nav .nav-user .btn,
  body:not(.home-page) nav .nav-links .btn,
  body:not(.home-page) nav .logout-btn {
    min-height: 38px !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 14px !important;
    font-size: clamp(12px, 3.6vw, 14px) !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 768px) {
  html,
  body.home-page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overscroll-behavior-x: none !important;
    touch-action: pan-y !important;
    overflow-x: hidden !important;
    overflow-x: clip !important;
  }

  body.home-page {
    position: relative !important;
  }

  body.home-page > * {
    max-width: 100vw !important;
  }

  body.home-page .bg-animation,
  body.home-page .particles {
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    overflow: clip !important;
    contain: paint !important;
  }

  body.home-page .bg-animation::before {
    left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  body.home-page .jp-decor {
    max-width: 100vw !important;
    overflow: hidden !important;
    overflow: clip !important;
    contain: paint !important;
  }

  body.home-page .jp-decor svg,
  body.home-page .line-icon svg,
  body.home-page .who-icon svg {
    overflow: hidden !important;
  }

  body.home-page section,
  body.home-page footer,
  body.home-page .section,
  body.home-page .demo-window,
  body.home-page .productivity-section,
  body.home-page .industry-section,
  body.home-page .home-faq-section,
  body.home-page .problem-different-section,
  body.home-page .who-for-section,
  body.home-page .workflow-section,
  body.home-page .agent-integration-section,
  body.home-page .cta-section {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-x: clip !important;
    contain: paint !important;
  }

  body.home-page .demo-preview {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    contain: layout !important;
  }

  body.home-page .demo-floating-logo {
    top: -36px !important;
    width: 62px !important;
    height: 62px !important;
    border-radius: 18px !important;
    z-index: 8 !important;
  }

  body.home-page .demo-floating-logo img {
    width: 42px !important;
    height: 42px !important;
  }

  body.home-page nav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
    justify-items: start !important;
    gap: 12px !important;
    min-height: 154px !important;
    padding: 12px 16px 14px !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }

  body.home-page nav .logo {
    width: 100% !important;
    max-width: calc(100vw - 32px) !important;
    min-height: 58px !important;
    gap: 9px !important;
    padding: 7px 42px 7px 8px !important;
  }

  body.home-page nav .logo::after {
    right: 11px !important;
  }

  body.home-page nav .logo img {
    width: 31px !important;
    height: 31px !important;
    padding: 3px !important;
  }

  body.home-page nav .brand-name {
    font-size: clamp(17px, 4.8vw, 20px) !important;
  }

  body.home-page nav .brand-subline {
    font-size: 8px !important;
    letter-spacing: 0.10em !important;
  }

  body.home-page nav .nav-buttons,
  body.home-page nav #navLogout,
  body.home-page nav #navLogin {
    width: fit-content !important;
    max-width: calc(100vw - 32px) !important;
    min-width: 0 !important;
    overflow: hidden !important;
    justify-self: center !important;
  }

  body.home-page nav #navLogout,
  body.home-page nav #navLogin {
    grid-template-columns: auto auto !important;
    gap: 8px !important;
  }

  body.home-page nav #navLogin {
    grid-template-columns: 1fr !important;
  }

  body.home-page nav #navLogout[style*="grid"],
  body.home-page nav #navLogin[style*="grid"] {
    display: grid !important;
  }

  body.home-page nav #navLogin[style*="none"],
  body.home-page nav #navLogout[style*="none"] {
    display: none !important;
  }

  body.home-page nav .nav-buttons .btn {
    min-height: 42px !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 18px !important;
    font-size: clamp(13px, 3.9vw, 15px) !important;
    white-space: nowrap !important;
    text-align: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  body.home-page nav .nav-cta-full {
    display: none !important;
  }

  body.home-page nav .nav-cta-short {
    display: inline !important;
  }

  body.home-page .hero {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding-top: 214px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body.home-page .hero-content {
    width: 100% !important;
    max-width: calc(100vw - 32px) !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body.home-page .hero-badge,
  body.home-page .hero-subtitle {
    max-width: calc(100vw - 40px) !important;
  }

  body.home-page .hero h1 {
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: clamp(28px, 8.4vw, 34px) !important;
    overflow-wrap: normal !important;
  }

  body.home-page .hero h1 .mobile-line {
    display: block !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  body.home-page .hero-buttons {
    width: 100% !important;
    max-width: calc(100vw - 32px) !important;
    min-width: 0 !important;
  }

  body.home-page .japanese-seal {
    left: 10px !important;
  }

  body.home-page .section-blossom.blossom-left {
    left: 0 !important;
  }
}

@media (max-width: 640px) {
  body:not(.home-page) nav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
    justify-items: stretch !important;
    gap: 8px !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 8px 12px 10px !important;
    overflow: visible !important;
  }

  body:not(.home-page) main {
    padding-top: 166px !important;
  }

  body:not(.home-page) nav .logo {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 46px !important;
    padding: 6px 38px 6px 8px !important;
    gap: 8px !important;
  }

  body:not(.home-page) nav .logo img {
    width: 30px !important;
    height: 30px !important;
  }

  body:not(.home-page) nav .brand-name {
    font-size: clamp(16px, 4.8vw, 19px) !important;
    line-height: 1.05 !important;
  }

  body:not(.home-page) nav .brand-subline {
    font-size: 8px !important;
    letter-spacing: 0.08em !important;
  }

  body:not(.home-page) nav .nav-links,
  body:not(.home-page) nav .nav-user {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 0 2px 1px !important;
  }

  body:not(.home-page) nav .nav-links::-webkit-scrollbar,
  body:not(.home-page) nav .nav-user::-webkit-scrollbar {
    display: none !important;
  }

  body:not(.home-page) nav .nav-links .btn,
  body:not(.home-page) nav .nav-user .btn {
    min-height: 32px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  body:not(.home-page) nav .btn-primary {
    min-width: max-content !important;
  }

  body:not(.home-page) nav .user-email {
    display: none !important;
  }
}

/* Registration AGB modal must override the global legal/text refresh colors. */
.agb-modal {
  background: rgba(14, 14, 17, 0.72) !important;
}

.agb-modal .agb-modal-content {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(14, 14, 17, 0.12) !important;
  box-shadow: 0 28px 80px rgba(14, 14, 17, 0.28) !important;
  backdrop-filter: blur(20px) !important;
}

.agb-modal .agb-modal-header {
  border-bottom-color: rgba(14, 14, 17, 0.12) !important;
}

.agb-modal .agb-modal-header h2,
.agb-modal .agb-text h2,
.agb-modal .agb-text h3 {
  color: var(--color-midnight-ink) !important;
}

.agb-modal .agb-text,
.agb-modal .agb-text p,
.agb-modal .agb-text li,
.agb-modal .agb-consent-section label,
.agb-modal .agb-loading {
  color: rgba(14, 14, 17, 0.74) !important;
}

.agb-modal .agb-text h2 {
  font-size: 1rem !important;
  line-height: 1.35 !important;
  margin: 1.25rem 0 0.5rem !important;
}

.agb-modal .agb-text ol,
.agb-modal .agb-text ul {
  padding-left: 1.25rem !important;
  margin: 0 0 0.75rem !important;
}

.agb-modal .agb-text a {
  color: var(--color-midnight-ink) !important;
  text-decoration-color: rgba(226, 95, 77, 0.55) !important;
}

.agb-modal .agb-text p[style] {
  color: rgba(14, 14, 17, 0.52) !important;
}

.agb-modal .agb-text::-webkit-scrollbar-track {
  background: rgba(14, 14, 17, 0.08) !important;
}

.agb-modal .agb-text::-webkit-scrollbar-thumb {
  background: rgba(14, 14, 17, 0.28) !important;
}

.agb-modal .agb-consent-section {
  background: rgba(14, 14, 17, 0.04) !important;
  border-color: rgba(14, 14, 17, 0.14) !important;
}

.pricing-page .pricing-hero,
.about-page .about-hero,
.faq-page .faq-hero,
.contact-page .contact-hero,
.agent-guide-page .agent-guide-hero,
.claude-setup-page .claude-setup-hero,
.chatgpt-setup-page .chatgpt-setup-hero,
.tech-setup-page .tech-setup-hero {
  min-height: clamp(480px, 58vh, 660px) !important;
  padding-top: clamp(72px, 8vh, 104px) !important;
  align-content: start !important;
}

@media (max-width: 640px) {
  .pricing-page .pricing-hero,
  .about-page .about-hero,
  .faq-page .faq-hero,
  .contact-page .contact-hero,
  .agent-guide-page .agent-guide-hero,
  .claude-setup-page .claude-setup-hero,
  .chatgpt-setup-page .chatgpt-setup-hero,
  .tech-setup-page .tech-setup-hero {
    min-height: auto !important;
    padding-top: 72px !important;
    padding-bottom: 68px !important;
    align-content: start !important;
  }
}

body.legal-page h1 {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 0 28px !important;
  color: var(--color-midnight-ink) !important;
  font-size: clamp(36px, 5.4vw, 68px) !important;
  line-height: 0.98 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

body.legal-page h1::before {
  content: "規" !important;
  flex: 0 0 auto !important;
  width: 46px !important;
  height: 46px !important;
  display: grid !important;
  place-items: center !important;
  color: rgba(14, 14, 17, 0.58) !important;
  background: rgba(255, 218, 210, 0.56) !important;
  border: 1px solid rgba(255, 143, 124, 0.22) !important;
  border-radius: 7px 16px 7px 16px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

body.legal-page .toc {
  margin: 0 0 clamp(34px, 5vw, 58px) !important;
  padding: clamp(22px, 3vw, 34px) !important;
  color: rgba(14, 14, 17, 0.76) !important;
  background:
    linear-gradient(135deg, rgba(255, 218, 210, 0.72), rgba(232, 229, 246, 0.56)),
    rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(14, 14, 17, 0.10) !important;
  border-radius: 4px 22px 22px 22px !important;
}

body.legal-page .toc h3 {
  margin: 0 0 16px !important;
  color: var(--color-midnight-ink) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
}

body.legal-page .toc ol {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px 28px !important;
  margin: 0 !important;
  padding-left: 20px !important;
}

body.legal-page .toc li,
body.legal-page .card li,
body.legal-page .card p {
  color: rgba(14, 14, 17, 0.72) !important;
  font-size: 16px !important;
  line-height: 1.72 !important;
}

body.legal-page .card h2 {
  margin: clamp(34px, 5vw, 56px) 0 14px !important;
  padding-top: 22px !important;
  color: var(--color-midnight-ink) !important;
  border-top: 1px solid rgba(14, 14, 17, 0.11) !important;
  font-size: clamp(24px, 3vw, 34px) !important;
  font-weight: 500 !important;
  line-height: 1.16 !important;
}

body.legal-page .card h2::before {
  content: none !important;
}

body.legal-page .card ol,
body.legal-page .card ul {
  display: grid !important;
  gap: 10px !important;
  margin: 0 0 0 22px !important;
  padding: 0 !important;
}

body.legal-page .card ul {
  margin-top: 10px !important;
}

body.legal-page .card a {
  color: var(--color-midnight-ink) !important;
  text-decoration-color: rgba(255, 111, 97, 0.55) !important;
  text-underline-offset: 3px !important;
}

body.legal-page .muted,
body.legal-page .placeholder {
  color: rgba(14, 14, 17, 0.54) !important;
}

/* Refund policy page: Sakura legal landing layout */
.refund-policy-page .refund-policy-shell {
  display: grid !important;
  gap: clamp(22px, 3vw, 34px) !important;
}

.refund-policy-page .refund-hero {
  position: relative !important;
  overflow: hidden !important;
  padding: clamp(34px, 6vw, 74px) !important;
  border: 1px solid rgba(14, 14, 17, 0.12) !important;
  border-radius: 8px 34px 34px 34px !important;
  background:
    linear-gradient(90deg, rgba(14, 14, 17, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(14, 14, 17, 0.030) 1px, transparent 1px),
    radial-gradient(circle at 86% 20%, rgba(255, 218, 210, 0.78), transparent 26%),
    linear-gradient(135deg, rgba(255, 250, 247, 0.96), rgba(255, 237, 232, 0.70)) !important;
  background-size: 72px 72px, 72px 72px, auto, auto !important;
  box-shadow: 0 34px 110px rgba(126, 78, 72, 0.12) !important;
}

.refund-policy-page .refund-hero > * {
  position: relative !important;
  z-index: 1 !important;
}

.refund-policy-page .refund-seal {
  margin-bottom: 18px !important;
}

.refund-policy-page .refund-hero .section-kicker {
  color: var(--color-coral-ember) !important;
  font-size: 0.84rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

.refund-policy-page .refund-hero h1 {
  display: block !important;
  max-width: 850px !important;
  margin: 10px 0 16px !important;
  color: var(--color-midnight-ink) !important;
  font-size: clamp(2.5rem, 6vw, 5.4rem) !important;
  line-height: 0.94 !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere !important;
}

.refund-policy-page .refund-hero h1::before {
  content: none !important;
}

.refund-policy-page .refund-hero h1 span {
  display: inline !important;
}

.refund-policy-page .refund-hero p:not(.section-kicker) {
  max-width: 760px !important;
  color: rgba(14, 14, 17, 0.70) !important;
  font-size: clamp(1rem, 2vw, 1.2rem) !important;
  line-height: 1.72 !important;
}

.refund-policy-page .refund-summary-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.refund-policy-page .refund-summary-card {
  position: relative !important;
  overflow: hidden !important;
  min-height: 196px !important;
  padding: 22px !important;
  border: 1px solid rgba(14, 14, 17, 0.12) !important;
  border-radius: 6px 24px 24px 24px !important;
  background:
    radial-gradient(circle at 94% 8%, rgba(255, 218, 210, 0.62), transparent 34%),
    rgba(255, 255, 255, 0.84) !important;
  box-shadow: 0 22px 70px rgba(126, 78, 72, 0.10) !important;
}

.refund-policy-page .refund-summary-label {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(226, 95, 77, 0.18) !important;
  border-radius: 999px !important;
  color: #9a3412 !important;
  background: rgba(255, 218, 210, 0.46) !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

.refund-policy-page .refund-summary-card h2 {
  margin: 18px 0 10px !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--color-midnight-ink) !important;
  font-size: 1.18rem !important;
  line-height: 1.22 !important;
}

.refund-policy-page .refund-summary-card h2::before {
  display: none !important;
}

.refund-policy-page .refund-summary-card p {
  color: rgba(14, 14, 17, 0.66) !important;
  font-size: 0.96rem !important;
  line-height: 1.62 !important;
}

.refund-policy-page .refund-document {
  margin-top: 2px !important;
}

@media (max-width: 900px) {
  .refund-policy-page .refund-summary-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 700px) {
  .refund-policy-page .refund-hero {
    padding: 28px 20px !important;
  }

  .refund-policy-page .refund-hero h1 {
    font-size: clamp(1.95rem, 8.7vw, 2.15rem) !important;
    line-height: 1.02 !important;
  }

  .refund-policy-page .refund-hero h1 span {
    display: block !important;
  }

  .refund-policy-page .refund-summary-card {
    min-height: 0 !important;
  }
}

@media (max-width: 820px) {
  body.legal-page main {
    padding: 104px 16px 48px !important;
  }

  body.legal-page .container {
    width: 100% !important;
  }

  body.legal-page .card {
    padding: 26px 18px !important;
    border-radius: 4px 20px 20px 20px !important;
  }

  body.legal-page h1 {
    align-items: flex-start !important;
    font-size: clamp(34px, 11vw, 48px) !important;
  }

  body.legal-page .toc ol {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  body:not(.home-page) nav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
    justify-items: stretch !important;
    gap: 8px !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 8px 12px 10px !important;
    overflow: visible !important;
  }

  body:not(.home-page) main {
    padding-top: 166px !important;
  }

  body:not(.home-page) nav .logo {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 46px !important;
    padding: 6px 38px 6px 8px !important;
    gap: 8px !important;
  }

  body:not(.home-page) nav .logo img {
    width: 30px !important;
    height: 30px !important;
  }

  body:not(.home-page) nav .brand-name {
    font-size: clamp(16px, 4.8vw, 19px) !important;
    line-height: 1.05 !important;
  }

  body:not(.home-page) nav .brand-subline {
    font-size: 8px !important;
    letter-spacing: 0.08em !important;
  }

  body:not(.home-page) nav .nav-links,
  body:not(.home-page) nav .nav-user {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 0 2px 1px !important;
  }

  body:not(.home-page) nav .nav-links::-webkit-scrollbar,
  body:not(.home-page) nav .nav-user::-webkit-scrollbar {
    display: none !important;
  }

  body:not(.home-page) nav .nav-links .btn,
  body:not(.home-page) nav .nav-user .btn {
    min-height: 32px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  body:not(.home-page) nav .btn-primary {
    min-width: max-content !important;
  }

  body:not(.home-page) nav .user-email {
    display: none !important;
  }
}