/* Art direction: ink, warm light and generous composition. Original font families are preserved. */
:root { --studio-ink: #172530; --studio-gold: #efc780; --studio-paper: #f6f7f8; }
.has-site-header .site-header {
  background: linear-gradient(180deg, #15232ff5, #172530ed);
  border-bottom-color: #ffffff12;
}
.has-site-header .site-header-cta { border: 1px solid #f6d99d; box-shadow: inset 0 1px 0 #ffffff55; }
.has-site-header .home-slider-area .slider-content-two-area,
.has-site-header :is(.lab-hero,.quote-hero),
[data-site-page="app_market"] .hero-section {
  background-image: radial-gradient(ellipse at 78% 38%, #56736838, transparent 45%), radial-gradient(ellipse at 8% 90%, #b28a4d16, transparent 45%), linear-gradient(120deg, #14212d, #1b303c) !important;
  background-color: #14212d; position: relative; overflow: hidden;
}
.has-site-header .home-slider-area .slider-content-two-area::before,
.has-site-header :is(.lab-hero,.quote-hero)::before,
[data-site-page="app_market"] .hero-section::before {
  content: ''; position: absolute; pointer-events: none; width: 700px; height: 700px;
  right: -180px; top: -240px; border: 1px solid #d6bc8415; border-radius: 50%;
  background: none; box-shadow: 0 0 0 100px #b9c9c804, 0 0 0 200px #b9c9c804;
  animation: none;
}
.has-site-header .slider-content-two-area > .container,
.has-site-header :is(.lab-hero,.quote-hero,.hero-section) > .container,
[data-site-page="app_market"] .hero-section > .container { position: relative; z-index: 1; }
.has-site-header .slider-content-two-area .home-overlay { display: none; }
.has-site-header .home-slider-area .hero-eyebrow { color: #e4bf7d; letter-spacing: .24em; }
.has-site-header .home-slider-area .hero-accent { color: #f0ca85; }
.has-site-header .home-slider-area .slider-content-two-area .slider-content .desc { color: #bfccd3; line-height: 1.95; }
.has-site-header .home-slider-area .hero-tags { color: #a5b5bf; }
.has-site-header .home-slider-area .ux-primary { background: #f0c77d; border-color: #f0c77d; box-shadow: 0 8px 28px #080e1420, inset 0 1px #ffffff60; }
.has-site-header .home-slider-area .ux-outline { background: #ffffff05; border-color: #ffffff35; color: #e5eaed; }
.has-site-header .home-slider-area .ux-outline:hover { background: #ffffff0c; border-color: #e7c790; color: #f3d49f; }
.has-site-header .home-slider-area .ux-preview {
  background: #13232d; border-color: #78918b55; border-radius: 18px;
  box-shadow: 0 36px 70px #070e1655, 0 1px 0 #ffffff0c inset;
  transform: perspective(1400px) rotateY(-5deg) rotateX(2deg);
}
.has-site-header .ux-window-line { padding: 15px 19px; background: #ffffff04; border-color: #ffffff0c; letter-spacing: .12em; }
.has-site-header .ux-concept { background: radial-gradient(ellipse, #d6ae6515, transparent 70%), #192d37; border-color: #77908845; box-shadow: 0 28px 65px #070e1640; border-radius: 18px; }
/* A working miniature sits next to its block logic, inside the existing hero window. */
.studio-canvas { display: grid; grid-template-columns: minmax(0, 1fr) 174px; gap: 18px; align-items: center; padding: 28px 22px; background-image: radial-gradient(#abc2c116 .8px, transparent .8px); background-size: 18px 18px; }
.studio-label { color: #9bafb8; font-size: 9px; letter-spacing: .08em; }
.studio-block { position: relative; width: max-content; max-width: 100%; padding: 13px 11px; color: #f5e7c8; border: 1px solid #c4a76b6b; border-radius: 5px; font-size: 13px; line-height: 1.5; box-shadow: 0 5px 12px #070f1420; }
.studio-block b { font-weight: 500; }
.studio-event { margin-top: 28px; background: #886b31; }
.studio-action { margin-left: 12px; background: #60527b; color: #e7ddf3; border-color: #a18cb155; }
.studio-result { margin-left: 12px; background: #365e5c; color: #d7eeea; border-color: #83b1a755; }
.studio-event::before { content: ''; position: absolute; width: 20px; height: 6px; top: -6px; left: 13px; border: 1px solid #c4a76b6b; border-bottom: 0; border-radius: 4px 4px 0 0; background: #886b31; }
.studio-connection { display: flex; align-items: center; gap: 9px; margin: 23px 2px 13px; color: #d4b57d; }
.studio-connection span { height: 1px; width: 65%; background: linear-gradient(90deg, #b8985555, #d4b57d); }
.studio-connection i { font-size: 17px; font-style: normal; }
.studio-logic-note { color: #91a7b1; font-size: 10px; line-height: 1.8; margin: 0; }
.studio-app { position: relative; border-radius: 23px; border: 5px solid #3e5059; background: #fbf7ef; padding: 10px 13px 13px; box-shadow: 0 16px 32px #050b123d, 0 0 0 1px #acc1c245; color: #344240; transform: rotate(4deg); transition: transform .45s ease; }
.studio-app-top { display: flex; justify-content: space-between; font-size: 7px; color: #65706b; margin-bottom: 18px; }
.studio-app-mark { width: 31px; height: 31px; background: #e8b960; color: #fffdf6; display: grid; place-items: center; border-radius: 9px; font-size: 26px; line-height: 1; margin-bottom: 12px; }
.has-site-header .studio-app h3 { font-size: 16px; line-height: 1.4; margin: 0 0 6px; color: #293a36; }
.studio-app > p { font-size: 8px; color: #7b8177; line-height: 1.7; margin-bottom: 15px; }
.studio-idea { background: #f0e6d0; border: 1px solid #e4d5b5; padding: 12px 10px; border-radius: 9px; }
.studio-idea span { display: block; font-size: 8px; color: #91794f; margin-bottom: 9px; }
.studio-idea strong { display: block; font-size: 12px; font-weight: 500; color: #5a513b; line-height: 1.65; }
.studio-record { display: block; width: 100%; min-height: 36px; background: #283f3c; color: #f7f3e8; border: 1px solid #283f3c; border-radius: 7px; margin: 15px 0 19px; padding: 8px 3px; font: inherit; font-size: 10px; cursor: pointer; transition: background .2s, transform .2s; }
.studio-record:hover { background: #3b5750; }
.studio-record:active { transform: scale(.97); }
.studio-app-home { width: 42px; height: 3px; border-radius: 3px; background: #bdc2b9; margin: auto; }
.studio-preview-note { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid #ffffff0a; color: #a1b2ba; padding: 14px 18px; font-size: 9px; }
.studio-preview-note > span:last-child { font-size: 8px; color: #7e959f; white-space: nowrap; }
/* Clear contrast between the key capability and its supporting cards. */
.has-site-header[data-site-page="index"] #features { background: linear-gradient(180deg, #fff, #f5f7f8); }
.has-site-header .vs-feature-card { border-color: #e1e7eb; border-radius: 16px; padding: 30px; box-shadow: 0 3px 12px #182d3a03; }
.has-site-header .vs-feature-large { background: radial-gradient(ellipse at top right, #47756d33, transparent 65%), #1b303a; border-color: #263f47; padding: 36px; }
.has-site-header .vs-feature-large h3 { color: #f0f2ec; }
.has-site-header .vs-feature-large > p { color: #b0c1c8; }
.has-site-header .vs-feature-large .vs-tag { color: #e7c78e; border-color: #b29d6b55; background: #dbc1830b; }
.has-site-header .vs-feature-large .vs-ai-conversation { background: #0c1b2455; border-color: #8ba5a526; padding: 22px; border-radius: 12px; }
.has-site-header .vs-feature-large .vs-user-prompt { background: #d5b477; color: #243330; }
.has-site-header .vs-feature-large .vs-feature-footnote { color: #9bb0b8; }
.has-site-header .vs-capability-strip > div { border-color: #dce3e7; }
.has-site-header .vs-heading h2 { line-height: 1.45; }
.has-site-header .product-advisor { border-top: 1px solid #d9c9a7; background: #fff; box-shadow: 0 16px 45px #20333e08; border-radius: 16px; }
.has-site-header .advisor-eyebrow::before { content: ''; display: inline-block; width: 18px; height: 1px; background: #b28a49; margin-right: 9px; vertical-align: middle; }
.has-site-header .has-recommendation .advisor-result { background: #f5f3ec; border-color: #e5decd; }
.has-site-header .teaching-advisor-section { background: #f5f7f8; }
.has-site-header .vs-edition-card { border-color: #e0e6e9; border-radius: 15px; box-shadow: 0 8px 28px #1b303907; }
.has-site-header .vs-edition-card:first-child { background: radial-gradient(ellipse at 100% 0, #567b6738, transparent 65%), #1b303a; border-color: #29434b; box-shadow: 0 16px 35px #1b303916; }
.has-site-header .vs-edition-card:first-child :is(h3,.vs-edition-audience) { color: #eef1ec; }
.has-site-header .vs-edition-card:first-child :is(.vs-edition-intro,ul) { color: #b5c4cb; }
.has-site-header .vs-edition-card:first-child .vs-edition-number { color: #eac891; }
.has-site-header .vs-edition-card:first-child .vs-tag { background: #ecd3a115; color: #eac891; border-color: #c1a66d55; }
.has-site-header .vs-edition-card:first-child .vs-edition-visual { color: #e0c38e; border-color: #ffffff15; }
.has-site-header .vs-edition-card:first-child .vs-edition-secondary { color: #e0c38e; }
.has-site-header .vs-edition-card .vs-edition-title h3 { font-size: 24px; }
.has-site-header .vs-edition-card .vs-edition-intro { line-height: 1.9; }
.has-site-header .section-title.shape-center::after { opacity: .4; }
.has-site-header .footer-main { background: radial-gradient(ellipse at top left, #45636125, transparent 50%), #172630; border-top: 1px solid #ffffff0a; }
.has-site-header .footer-bottom { background: #13222c; }
.has-site-header .vs-closing { background: #1b303a; border-radius: 18px; }
.has-site-header .vs-closing :is(h2,p) { color: #edf0e9; }
.has-site-header .vs-closing-art { color: #f0c77d10; }
.has-site-header :is(.lab-badge,.quote-badge,.hero-badge) { background: #ffffff06; border: 1px solid #ffffff2b; color: #e7d7b8; font-size: 12px; letter-spacing: .05em; }
.has-site-header :is(.lab-hero,.quote-hero) .lead { color: #c0cdd4; }
/* One visual rhythm on narrow screens, with no change to the site's font family. */
@media (min-width: 992px) {
  .has-site-header[data-site-page="index"] .home-slider-area .slider-content-two-area .slider-content .title { font-size: clamp(48px, 4.6vw, 66px); line-height: 1.3; }
  .has-site-header[data-site-page="index"] .home-slider-area .slider-content-two-area .slider-content { margin-top: 20px; margin-right: 40px; }
  .has-site-header[data-site-page="index"] .home-slider-area .ux-hero-art { width: calc(100% + 24px); margin-left: -12px; }
  .has-site-header[data-site-page="versions"] .vs-editions { padding-top: 72px; background: linear-gradient(180deg, #f4f6f7, #fff 70%); }
}
@media (hover: hover) and (pointer: fine) {
  .has-site-header .ux-preview:hover { transform: perspective(1400px) rotateY(-2deg) rotateX(0); }
  .has-site-header .ux-preview:hover .studio-app { transform: rotate(1deg) translateY(-3px); }
  .has-site-header .vs-feature-card:hover { box-shadow: 0 14px 32px #182d3a0b; border-color: #c3d0d4; }
  .has-site-header .vs-feature-large:hover { border-color: #688480; }
}
@media (max-width: 991px) {
  .has-site-header .home-slider-area .ux-preview { transform: none; }
  .studio-canvas { padding: 24px; grid-template-columns: minmax(0, 1fr) 158px; }
}
@media (max-width: 575px) {
  .has-site-header .home-slider-area .slider-content-two-area:has(.studio-canvas) { padding-top: 44px; padding-bottom: 32px; }
  .studio-canvas { padding: 20px 15px; grid-template-columns: minmax(0, 1fr) 140px; gap: 12px; }
  .studio-block { font-size: 10px; padding: 11px 8px; }
  .studio-app { padding-inline: 10px; border-width: 4px; border-radius: 20px; }
  .studio-app-top { margin-bottom: 12px; }
  .studio-app-mark { width: 26px; height: 26px; font-size: 22px; margin-bottom: 10px; }
  .studio-app > p { display: none; }
  .studio-idea { padding: 10px 8px; }
  .studio-logic-note { font-size: 9px; }
  .studio-label { font-size: 8px; }
  .studio-preview-note { padding: 12px 15px; }
  .studio-preview-note > span:last-child { display: none; }
  .studio-record { min-height: 44px; margin: 12px 0; }
  .has-site-header .vs-feature-card, .has-site-header .vs-feature-large { padding: 25px; border-radius: 14px; }
  .has-site-header .vs-feature-large .vs-ai-conversation { padding: 17px; }
  .has-site-header .footer-main { padding-top: 48px; }
}
@media (max-width: 360px) {
  .studio-canvas { grid-template-columns: minmax(0, 1fr) 120px; gap: 8px; padding: 20px 12px; }
  .studio-block { font-size: 9px; padding: 10px 6px; }
  .studio-action,.studio-result { margin-left: 6px; }
  .has-site-header .studio-app h3 { font-size: 14px; }
  .studio-app > p { font-size: 7px; }
  .studio-idea strong { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .has-site-header .home-slider-area .ux-preview,
  .has-site-header .home-slider-area .ux-preview:hover,
  .has-site-header .studio-app,
  .has-site-header .ux-preview:hover .studio-app { transform: none; transition: none; }
}
/* Bring the detailed product page into the same palette, preserving its own font. */
[data-site-page="product"] { background: linear-gradient(135deg, #172a36, #233c46); }
[data-site-page="product"]::before { background-image: radial-gradient(#b8c9ca16 .8px, transparent .8px); background-size: 24px 24px; animation: none; }
[data-site-page="product"] .content-section::before { animation: none; background: none; }
[data-site-page="product"] .nav-tab.active { color: #866328; border-bottom-color: #d4b37a; background: #f5ebd8; }
[data-site-page="product"] .nav-tab:hover { background: #f7f3eb; }
[data-site-page="product"] .feature-card { background: #fffffff5; border-color: #ffffff60; box-shadow: 0 10px 30px #09162118; }
[data-site-page="product"] .feature-icon { background: #f4e7cc; color: #937037; border: 1px solid #e9d9b7; }
[data-site-page="product"] .cta-button { background: #edc77f; color: #263c3b; border: 1px solid #f4dba9; }
[data-site-page="product"] .cta-button:hover { background: #f4d8a1; color: #263c3b; }
[data-site-page="product"] .loading-overlay { background: #172a36; }
/* A quieter, compact statistics band replaces the old oversized red counters. */
.has-site-header .product-area:has(.attr) { background: #f5f7f8; border-block: 1px solid #e9edef; }
.has-site-header .product-area:has(.attr) > .container { padding-block: 56px !important; }
.has-site-header .attr dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; margin: 0; }
.has-site-header .attr dd { width: auto; float: none; display: block; border-top: 1px solid #dce4e8; padding-top: 18px; margin: 0; }
.has-site-header .attr dd h5 { color: #687984; font-size: 14px; margin-bottom: 12px; }
.has-site-header .attr dd h3 { color: #29424d; font-size: 36px; margin: 0; }
.has-site-header .attr dd .dw { color: #85939a; font-size: 13px; }
@media (max-width: 575px) {
  .has-site-header .attr dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; }
  .has-site-header .attr dd h3 { font-size: 27px; }
  .has-site-header .attr dd h5 { font-size: 12px; }
  .has-site-header .attr dd .dw { font-size: 11px; }
}