/* A spacious product preview alongside the introduction. */
.hero { padding: 48px 0 62px; }
.hero > .container { width: min(1360px, calc(100% - 80px)); }
.hero-grid { grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); gap: 46px; }
.hero-copy { padding-top: 0; }
.hero-edition { margin-bottom: 25px; }
.hero-description { max-width: 460px; }
.hero-visual { height: auto; min-height: 0; padding: 0; max-width: none; }
.hero-visual:before { display: none; }
.hero-visual .workspace { position: relative; right: auto; bottom: auto; width: 100%; border-radius: 7px; box-shadow: 0 24px 50px #321a0b26; }
.hero-visual .window-bar { height: 46px; padding-inline: 18px; font-size: 13px; gap: 12px; }
.hero-visual .window-dots { gap: 6px; }
.hero-visual .window-dots i { width: 7px; height: 7px; }
.hero-visual .local-badge { font-size: 12px; white-space: nowrap; }
.hero-visual .workspace-inner { min-height: 350px; }
.hero-visual .mock-sidebar { display: block; width: 128px; padding: 26px 12px; }
.hero-visual .mock-logo { font-size: 18px; margin-bottom: 25px; }
.hero-visual .mock-logo span { font-size: 13px; }
.hero-visual .mock-nav { font-size: 13px; padding: 11px 8px; margin-bottom: 5px; }
.hero-visual .mock-sidebar-bottom { font-size: 11px; bottom: 22px; }
.hero-visual .mock-main { padding: 24px 26px; }
.hero-visual .mock-title { gap: 12px; flex-wrap: nowrap; }
.hero-visual .mock-title small { font-size: 12px; }
.hero-visual .mock-title h3 { font-size: 25px; margin-top: 7px; }
.hero-visual .mock-title h3 span { font-size: 12px; margin-left: 8px; }
.hero-visual .status { font-size: 12px; padding: 5px 9px; }
.hero-visual .mock-progress { margin: 21px 0; }
.hero-visual .mock-progress > span, .hero-visual .mock-progress > strong { font-size: 13px; }
.hero-visual .progress-track { height: 6px; margin-top: 10px; }
.hero-visual .progress-labels { font-size: 12px; margin-top: 9px; }
.hero-visual .mock-next { padding: 19px; }
.hero-visual .tiny-label { font-size: 12px; }
.hero-visual .mock-next h4 { font-size: 18px; margin: 6px 0; }
.hero-visual .mock-next p { font-size: 14px; }
.hero-visual .mock-check { display: flex; font-size: 12px; gap: 8px 14px; margin-top: 13px; }
.hero-visual .mock-buttons { gap: 9px; margin-top: 18px; }
.hero-visual .mock-buttons span { font-size: 13px; padding: 7px 14px; }
.hero-visual .floating-note { position: relative; left: auto; right: auto; bottom: auto; display: block; width: auto; margin: 21px 0 0 4px; padding: 0 0 0 15px; }
.hero-visual .floating-note > div { display: flex; align-items: baseline; gap: 15px; flex-wrap: wrap; }
.hero-visual .floating-note strong { font-size: 16px; }
.hero-visual .floating-note p { font-size: 13px; margin: 0; }
@media (max-width: 1100px) {
  .hero > .container { width: calc(100% - 48px); }
  .hero-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 30px; }
  .hero h1 { font-size: 43px; }
  .hero-visual .mock-sidebar { width: 104px; padding-inline: 8px; }
  .hero-visual .mock-nav { font-size: 12px; padding-inline: 5px; }
  .hero-visual .mock-main { padding: 22px 20px; }
  .hero-visual .mock-title h3 { font-size: 23px; }
  .hero-visual .mock-next { padding: 15px; }
  .hero-visual .mock-check { font-size: 12px; }
}
@media (max-width: 900px) and (min-width: 801px) {
  .hero-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 24px; }
  .hero h1 { font-size: 36px; }
  .hero-actions { flex-wrap: wrap; }
  .hero-visual .mock-sidebar { display: none; }
  .hero-visual .window-bar { font-size: 12px; padding-inline: 13px; }
}
@media (max-width: 800px) {
  .hero { padding: 35px 0 50px; }
  .hero > .container { width: calc(100% - 40px); }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 33px; }
  .hero h1 { font-size: 48px; }
  .hero-visual { max-width: 650px; }
  .hero-visual .mock-sidebar { display: block; width: 128px; }
  .hero-visual .mock-main { padding: 24px; }
  .hero-visual .workspace-inner { min-height: 340px; }
  .hero-visual .floating-note { margin-top: 21px; }
}
@media (max-width: 600px) {
  .hero-visual .mock-sidebar { display: none; }
  .hero-visual .window-bar { font-size: 12px; padding-inline: 15px; }
  .hero-visual .mock-main { padding: 22px; }
  .hero-visual .workspace-inner { min-height: 0; }
  .hero-visual .floating-note > div { gap: 4px 12px; }
}
@media (max-width: 480px) {
  .hero { padding-top: 26px; }
  .hero > .container { width: calc(100% - 32px); }
  .hero h1 { font-size: 38px; }
  .hero-visual .window-dots { gap: 4px; }
  .hero-visual .window-dots i { width: 5px; height: 5px; }
  .hero-visual .window-bar { gap: 7px; font-size: 11px; padding-inline: 11px; }
  .hero-visual .local-badge { font-size: 10px; }
  .hero-visual .mock-main { padding: 20px 18px; }
  .hero-visual .mock-title small { font-size: 12px; }
  .hero-visual .mock-title h3 { font-size: 24px; }
  .hero-visual .status { font-size: 11px; padding: 4px 7px; }
  .hero-visual .mock-progress { margin: 20px 0; }
  .hero-visual .mock-next { padding: 16px; }
  .hero-visual .mock-next p { font-size: 13px; }
  .hero-visual .mock-check { gap: 6px; flex-direction: column; }
  .hero-visual .mock-buttons { gap: 7px; }
  .hero-visual .mock-buttons span { font-size: 12px; padding: 7px 12px; }
  .hero-visual .floating-note strong { font-size: 15px; }
  .hero-visual .floating-note p { font-size: 12px; }
}

/* Compact homepage: three capabilities, one demo and one download. */
.feature-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}
.hero-copy{max-width:510px}.hero-description{max-width:400px}.hero-footnote{margin-top:18px}
.download-grid{align-items:center}.download-start{padding:30px;border:1px solid #d9c7b0;background:#fbf8f280}
.download-start h3{font:26px/1.5 var(--serif);margin-bottom:15px}.download-start>p{font-size:15px}
.download-start .download-boundary{font-size:13px;border-top:1px solid #d9c7b0;padding-top:20px;margin:25px 0 18px}
.guide-page #workflow,.guide-page #faq{padding:30px 0;margin-top:40px;background:transparent}
.guide-page .section>.container{width:100%}.guide-page .section-heading>p{margin-top:12px}
.guide-page .faq-grid{grid-template-columns:1fr;gap:20px}.guide-page .stage-panel{grid-template-columns:1fr;gap:20px;padding:24px}
.guide-page .stage-intro p{max-width:none}.guide-page .section h2{margin-top:0}
.guide-page pre{max-width:100%;overflow-x:auto;padding:16px;background:#f0e9dd;white-space:pre;line-height:1.7;font-size:13px}
@media(max-width:800px){.feature-grid{gap:22px}.feature-art{height:175px;padding:13px}.feature h3{font-size:17px}.download-start{padding:24px}}
@media(max-width:600px){.feature-grid{grid-template-columns:1fr;gap:28px}.feature-art{display:none}.feature h3{font-size:21px;margin-top:15px}.feature>p{font-size:15px}.download-start h3{font-size:22px}.hero-visual .mock-check{display:none}.hero-visual .mock-progress{margin:16px 0}.hero-visual .mock-next{padding:13px}.section-heading>p{margin-top:14px}}

/* Reuse the official cloud-and-star mark from the admin application. */
.brand-mark.brand-logo{display:block;width:52px;height:43px;object-fit:contain;background:transparent;border-radius:0;flex-shrink:0}
.brand-mark.small.brand-logo{width:30px;height:25px}
.hero-visual .mock-logo{display:flex;align-items:center;gap:7px}
.hero-visual .mock-logo img{width:30px;height:25px;object-fit:contain;flex-shrink:0}
@media(max-width:800px){.brand-mark.brand-logo{width:46px;height:38px}}