/* Shared visual system for CloudStackly's public website and sign-in flow. */
:root {
  --color-ink: #10264a;
  --color-navy: #123b78;
  --color-blue: #1769e0;
  --color-blue-hover: #0e55bf;
  --color-cyan: #27b8e8;
  --color-green: #16835e;
  --color-background: #f7faff;
  --color-surface: #fff;
  --color-surface-blue: #edf5ff;
  --color-border: #d8e5f5;
  --color-text: #26364d;
  --color-muted: #64748b;
  --color-danger: #c93c48;
}

body.marketing-page,
body.signin-page,
body.contact-page,
body.sample-report-page,
body.product-tour-page {
  --green: var(--color-blue);
  --green-dark: var(--color-navy);
  --line: var(--color-border);
  background: var(--color-background);
  color: var(--color-text);
}

body.marketing-page,
body.signin-page,
body.contact-page,
body.sample-report-page,
body.product-tour-page { font-family: var(--body), "DM Sans", Arial, sans-serif; }

.marketing-page .marketing-nav,
.contact-page .contact-nav,
.signin-page .signin-nav {
  position: relative;
  z-index: 10;
  background: rgb(255 255 255 / 96%);
  border-color: var(--color-border);
  box-shadow: 0 1px 0 rgb(16 38 74 / 3%);
}

.marketing-page .marketing-nav .brand,
.contact-page .contact-nav .brand,
.signin-page .signin-nav .brand,
.marketing-page .marketing-footer .brand {
  color: var(--color-ink);
}

.marketing-page .marketing-nav .brand-light,
.contact-page .contact-nav .brand-light,
.signin-page .signin-nav .brand-light {
  color: #52917c;
}

.marketing-page .marketing-nav nav a,
.marketing-page .nav-login,
.contact-page .contact-nav nav a,
.contact-page .contact-nav .nav-login {
  color: #52647c;
}

.marketing-page .marketing-nav nav a:hover,
.marketing-page .nav-login:hover,
.contact-page .contact-nav nav a:hover,
.contact-page .contact-nav .nav-login:hover {
  color: var(--color-blue);
}

.marketing-page .nav-cta,
.contact-page .contact-nav .nav-cta {
  background: var(--color-blue);
  color: #fff;
  border-radius: 7px;
  box-shadow: 0 5px 14px rgb(23 105 224 / 15%);
}

.marketing-page .nav-cta:hover,
.contact-page .contact-nav .nav-cta:hover {
  background: var(--color-blue-hover);
}

.marketing-page .nav-cta span { color: #d9eaff; }

.marketing-page .home-hero {
  max-width: none;
  min-height: 650px;
  padding-inline: max(6vw, calc((100vw - 1280px) / 2));
  background:
    radial-gradient(ellipse at 84% 12%, rgb(39 184 232 / 17%), transparent 31%),
    linear-gradient(120deg, #10264a 0%, #123b78 68%, #174d91 100%);
}

.marketing-page .home-hero:before {
  border-color: rgb(190 222 255 / 12%);
  box-shadow: 0 0 0 65px rgb(190 222 255 / 3%), 0 0 0 130px rgb(190 222 255 / 2%);
}

.marketing-page .home-page .eyebrow { color: #8edcf5; }
.marketing-page .home-page .eyebrow-line { background: var(--color-cyan); }
.marketing-page .home-page .marketing-hero h1 em { color: #91ddf5; }
.marketing-page .home-page .hero-lede { color: #d1e1f7; }
.marketing-page .home-page .button-green,
.contact-page .contact-hero .button-green {
  background: var(--color-blue);
  border-radius: 7px;
  box-shadow: 0 8px 23px rgb(4 22 54 / 30%);
}
.marketing-page .home-page .button-green:hover,
.contact-page .contact-hero .button-green:hover { background: #2780ef; }
.marketing-page .home-page .hero-proof-mark { border-color: #8edcf5; color: #a6e7fa; }
.marketing-page .home-page .hero-secondary,
.marketing-page .home-page .hero-proof,
.marketing-page .home-page .hero-sample-link { color: #e2efff !important; }
.marketing-page .home-page .hero-secondary span { color: #8edcf5; }

.marketing-page .hero-demo-preview {
  width: min(100%, 720px);
  justify-self: end;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgb(214 232 255 / 45%);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 32px 80px rgb(4 20 48 / 38%);
}
.marketing-page .hero-demo-bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 1px 4px 11px;
  color: #61718a;
  font: 600 9px/1.4 var(--mono);
  letter-spacing: .08em;
}
.marketing-page .hero-demo-bar i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 3px;
  border-radius: 50%;
  background: #aac3e4;
}
.marketing-page .hero-demo-frame {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid #dce7f5;
  border-radius: 8px;
  background: #edf5ff;
}
.marketing-page .hero-demo-frame iframe { width: 100%; height: 100%; border: 0; }
.marketing-page .hero-demo-caption {
  margin: 10px 3px 1px;
  color: var(--color-muted);
  font-size: 10px;
  line-height: 1.5;
}
.marketing-page .hero-demo-caption a { color: var(--color-blue); font-weight: 700; }

.marketing-page .home-launch-proof {
  background: #fff;
  border-color: var(--color-border);
}
.marketing-page .home-launch-proof > span { color: #52647c; }
.marketing-page .home-capabilities {
  border-color: var(--color-border);
  border-radius: 10px;
  box-shadow: 0 16px 38px rgb(16 38 74 / 7%);
}
.marketing-page .capability-icon {
  background: var(--color-surface-blue);
  color: var(--color-blue);
}
.marketing-page .home-capabilities strong,
.marketing-page .home-section-heading h2,
.marketing-page .home-report-copy h2,
.marketing-page .home-demo-callout h2 { color: var(--color-ink); }
.marketing-page .home-section-heading h2 em,
.marketing-page .home-report-copy h2 em { color: var(--color-blue); }
.marketing-page .home-section-heading > p,
.marketing-page .home-workflow .workflow-footnote { color: var(--color-muted); }
.marketing-page .workflow-image-card,
.marketing-page .workflow-detail-grid article,
.marketing-page .link-structure-figure,
.marketing-page .home-pricing .price-card {
  border-color: var(--color-border);
  border-radius: 9px;
  box-shadow: 0 12px 32px rgb(16 38 74 / 5%);
}
.marketing-page .workflow-image-caption,
.marketing-page .link-structure-figure figcaption { color: var(--color-navy); }
.marketing-page .workflow-detail-label,
.marketing-page .workflow-detail-grid a,
.marketing-page .report-text-link { color: var(--color-blue); }
.marketing-page .workflow-detail-grid h3 { color: var(--color-ink); }
.marketing-page .workflow-detail-grid p { color: #596b82; }

.marketing-page .home-link-structure { max-width: 1280px; }
.marketing-page .link-structure-figure { border-radius: 10px; }
.marketing-page .link-structure-note { color: var(--color-muted); }

.marketing-page .home-report-section {
  background:
    radial-gradient(ellipse at 90% 0%, rgb(39 184 232 / 13%), transparent 32%),
    linear-gradient(118deg, #10264a, #123b78);
}
.marketing-page .home-report-copy .eyebrow { color: #8edcf5; }
.marketing-page .home-report-copy .eyebrow-line { background: var(--color-cyan); }
.marketing-page .home-report-copy h2 { color: #fff; }
.marketing-page .home-report-copy h2 em { color: #91ddf5; }
.marketing-page .home-report-copy > p:not(.eyebrow),
.marketing-page .home-report-copy li { color: #d1e1f7; }
.marketing-page .home-report-copy li:before { border-color: #5b9ff3; color: #9bceff; }
.marketing-page .report-image-link { border-color: #8bb9ed; border-radius: 10px; }
.marketing-page .report-image-link > span { background: rgb(16 38 74 / 92%); }

.marketing-page .home-pricing .price-card {
  background: #fff;
}
.marketing-page .home-pricing .price-card.price-popular {
  background: var(--color-surface-blue);
  border-color: #78aaf0;
  box-shadow: 0 15px 38px rgb(23 105 224 / 10%);
}
.marketing-page .home-pricing .plan-name { color: #526c91; }
.marketing-page .home-pricing .plan-button,
.marketing-page .home-pricing .trial-button {
  background: var(--color-blue);
  color: #fff;
  border-radius: 7px;
}
.marketing-page .home-pricing .plan-button:hover,
.marketing-page .home-pricing .trial-button:hover { background: var(--color-blue-hover); }
.marketing-page .home-pricing .trial-offer,
.marketing-page .home-demo-callout {
  background: var(--color-surface-blue);
  border-color: var(--color-border);
  border-radius: 10px;
}
.marketing-page .home-pricing .trial-number,
.marketing-page .home-pricing .trial-copy > span { color: var(--color-navy); }
.marketing-page .home-pricing .pricing-note,
.marketing-page .home-demo-callout > div:nth-child(2) > p:last-child { color: var(--color-muted); }
.marketing-page .home-demo-callout .button-green { box-shadow: none; }
.marketing-page .demo-callout-mark { background: #d8eaff; }
.marketing-page .demo-callout-mark span { background: var(--color-blue); }
.marketing-page .demo-callout-mark span:nth-child(2) { background: var(--color-cyan); }
.marketing-page .demo-callout-mark span:nth-child(3) { background: #85cdee; }

.marketing-page .home-faq .home-section-heading h2,
.marketing-page .home-faq summary { color: var(--color-ink); }
.marketing-page .home-faq .faq-list { border-color: var(--color-border); }
.marketing-page .home-faq details { border-color: var(--color-border); }
.marketing-page .home-faq summary:after { color: var(--color-blue); }
.marketing-page .home-faq details p { color: #596b82; }
.marketing-page .home-footer {
  background: var(--color-ink);
  color: #d8e6f8;
}
.marketing-page .home-footer-top { border-color: #365174; }
.marketing-page .home-footer-top p,
.marketing-page .home-footer > small { color: #adbfda; }
.marketing-page .home-footer nav a,
.marketing-page .home-footer-top > a:last-child { color: #d8e6f8; }

.marketing-page .public-main {
  width: min(100% - 2rem, 920px);
  color: var(--color-ink);
}
.marketing-page .public-kicker,
.marketing-page .public-footer small,
.marketing-page .policy-kicker { color: var(--color-blue); }
.marketing-page .public-main h1,
.marketing-page .public-section h2,
.marketing-page .guide-step-copy h2,
.marketing-page .policy-main h1,
.marketing-page .policy-main h2 { color: var(--color-ink); }
.marketing-page .public-intro,
.marketing-page .public-section p,
.marketing-page .public-note,
.marketing-page .guide-step-copy > p,
.marketing-page .sample-intro,
.marketing-page .policy-main > p,
.marketing-page .policy-main li { color: #52647c; }
.marketing-page .public-section,
.marketing-page .guide-sequence,
.marketing-page .guide-step,
.marketing-page .related-links,
.marketing-page .policy-links { border-color: var(--color-border); }
.marketing-page .public-page .public-section a,
.marketing-page .public-main a:not(.public-button) { color: var(--color-blue); }
.marketing-page .public-price-grid article,
.marketing-page .platform-list li,
.marketing-page .guide-step-figure { border-color: var(--color-border); background: #fff; }
.marketing-page .public-price-grid article.is-popular { border-color: var(--color-blue); background: var(--color-surface-blue); }
.marketing-page .public-price-grid strong { color: var(--color-navy); }
.marketing-page .public-price-grid a,
.marketing-page .public-button { background: var(--color-blue); border-radius: 7px; }
.marketing-page .public-price-grid a,
.marketing-page .public-button { color: #fff; }
.marketing-page .public-price-grid a:hover,
.marketing-page .public-button:hover { background: var(--color-blue-hover); }
.marketing-page .guide-step-number { color: var(--color-blue); }
.marketing-page .guide-step-copy .guide-step-note,
.marketing-page .public-diagram-note,
.marketing-page .policy-notice { background: var(--color-surface-blue); border-color: var(--color-blue); }
.marketing-page .public-diagram { border-color: var(--color-border); border-radius: 10px; box-shadow: 0 12px 32px rgb(16 38 74 / 6%); }
.marketing-page .public-diagram figcaption { color: var(--color-navy); }
.marketing-page .public-footer {
  background: var(--color-ink);
  color: #e5efff;
}
.marketing-page .public-footer a { color: #e5efff; }
.marketing-page .public-footer small { color: #afc2df; }
.marketing-page .public-main a:focus-visible,
.marketing-page .public-nav a:focus-visible,
.marketing-page .public-footer a:focus-visible,
.marketing-page .menu-toggle:focus-visible,
.marketing-page .home-page a:focus-visible,
.contact-page a:focus-visible,
.contact-page button:focus-visible,
.signin-page a:focus-visible,
.signin-page button:focus-visible,
.signin-page input:focus-visible,
.signin-page select:focus-visible,
.signin-page textarea:focus-visible {
  outline: 3px solid #48c7f0;
  outline-offset: 3px;
}

.signin-page .signin-nav,
.signin-page .signin-footer { max-width: 1120px; }
.signin-page .signin-layout { max-width: 1120px; grid-template-columns: minmax(0, 1fr) minmax(350px, 420px); }
.signin-page .signin-story h1 { color: var(--color-ink); }
.signin-page .signin-story h1 em { color: var(--color-blue); }
.signin-page .signin-story > p:not(.eyebrow),
.signin-page .signin-story-foot { color: var(--color-muted); }
.signin-page .signin-story-foot i,
.signin-page .signin-tour-link { color: var(--color-blue); }
.signin-page .story-symbol { background: var(--color-surface-blue); color: var(--color-blue); }
.signin-page .auth-card { border: 1px solid var(--color-border); border-radius: 12px; box-shadow: 0 20px 55px rgb(16 38 74 / 10%); }
.signin-page .auth-tab.active { color: var(--color-navy); border-color: var(--color-blue); }
.signin-page .button-dark { background: var(--color-blue); border-radius: 7px; }
.signin-page .button-dark:hover { background: var(--color-blue-hover); }
.signin-page .field input,
.signin-page .field textarea { border-color: var(--color-border); border-radius: 6px; background: #fbfdff; color: var(--color-text); }
.signin-page .field input:focus,
.signin-page .field textarea:focus { border-color: var(--color-blue); box-shadow: 0 0 0 3px rgb(23 105 224 / 12%); }
.signin-page .auth-resend,
.signin-page .auth-forgot { color: var(--color-blue); }
.signin-page .mini-shield { color: var(--color-blue); }
.signin-page .signin-footer { color: var(--color-muted); border-color: var(--color-border); }
.signin-page .signin-footer a { color: var(--color-navy); }

.contact-page .contact-hero {
  background:
    radial-gradient(ellipse at 7% 100%, rgb(39 184 232 / 20%), transparent 38%),
    linear-gradient(118deg, #10264a, #123b78 68%, #174d91);
}
.contact-page .contact-hero .eyebrow,
.contact-page .contact-message-copy .eyebrow { color: #8edcf5; }
.contact-page .contact-hero .eyebrow-line,
.contact-page .contact-message-copy .eyebrow-line { background: var(--color-cyan); }
.contact-page .contact-hero h1 em { color: #91ddf5; }
.contact-page .contact-agenda,
.contact-page .demo-booking,
.contact-page .contact-form-panel { border-color: var(--color-border); border-radius: 10px; }
.contact-page .contact-agenda h2,
.contact-page .demo-booking-heading h2,
.contact-page .contact-message-copy > h2,
.contact-page .contact-form-heading h2 { color: var(--color-ink); }
.contact-page .contact-agenda .agenda-icon,
.contact-page .contact-direct-card,
.contact-page .demo-booking { background: var(--color-surface-blue); }
.contact-page .contact-agenda li > span,
.contact-page .contact-resource-links a,
.contact-page .contact-direct-card a,
.contact-page .contact-form-grid label span { color: var(--color-blue); }
.contact-page .contact-form-grid input:focus,
.contact-page .contact-form-grid select:focus,
.contact-page .contact-form-grid textarea:focus { border-color: var(--color-blue); box-shadow: 0 0 0 3px rgb(23 105 224 / 12%); }
.contact-page .contact-consent input { accent-color: var(--color-blue); }
.contact-page .contact-consent a,
.contact-page .contact-direct-email a { color: var(--color-blue); }
.contact-page .contact-submit-row button { background: var(--color-blue); color: #fff; border-radius: 7px; }
.contact-page .contact-submit-row button:hover { background: var(--color-blue-hover); }
.contact-page .contact-footer { background: var(--color-ink); }

.sample-report-page .sample-shell { border-color: var(--color-border); border-radius: 12px; box-shadow: 0 18px 55px rgb(16 38 74 / 8%); }
.sample-report-page .sample-head h1 { color: var(--color-ink); }
.sample-report-page .sample-head h2 { color: var(--color-navy); }
.sample-report-page .sample-stats strong { color: var(--color-navy); }
.sample-report-page .sample-table th { color: var(--color-muted); }
.sample-report-page .sample-table a { color: var(--color-blue); }
.sample-report-page .sample-meta div { background: var(--color-surface-blue); }
.sample-report-page .sample-actions a,
.sample-report-page .sample-actions button { border-color: var(--color-border); border-radius: 6px; color: var(--color-navy); }
.sample-report-page .sample-actions a:hover,
.sample-report-page .sample-actions button:hover { background: var(--color-surface-blue); }

.product-tour-page { min-height: 100vh; }
.product-tour-page .tour-wrap { width: min(1100px, calc(100% - 36px)); margin: auto; }
.product-tour-page .tour-nav { height: 76px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--color-border); }
.product-tour-page .tour-brand { color: var(--color-ink); font-weight: 800; font-size: 20px; text-decoration: none; }
.product-tour-page .tour-brand i { display: inline-block; width: 7px; height: 19px; margin-right: 3px; border-radius: 4px; background: #18826a; transform: skew(-20deg); }
.product-tour-page .tour-brand i:nth-child(2) { background: #42aa8a; }
.product-tour-page .tour-brand i:nth-child(3) { background: #87cfb1; }
.product-tour-page .tour-nav > a:last-child { color: var(--color-blue); font-weight: 700; text-decoration: none; }
.product-tour-page .tour-hero { padding: 64px 0 30px; }
.product-tour-page .tour-eyebrow { color: var(--color-blue); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; }
.product-tour-page .tour-hero h1 { max-width: 780px; color: var(--color-ink); font-size: clamp(38px, 7vw, 68px); line-height: 1.05; letter-spacing: -3px; }
.product-tour-page .tour-hero h1 { font-family: var(--display), Manrope, sans-serif; }
.product-tour-page .tour-hero p { max-width: 660px; color: var(--color-muted); font-size: 18px; }
.product-tour-page .tour-frame { overflow: hidden; aspect-ratio: 16 / 9; margin: 22px 0 20px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-ink); box-shadow: 0 18px 50px rgb(16 38 74 / 10%); }
.product-tour-page .tour-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.product-tour-page .tour-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 58px; }
.product-tour-page .tour-button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 0 20px; border: 1px solid var(--color-border); border-radius: 7px; background: #fff; color: var(--color-navy); font-weight: 700; text-decoration: none; }
.product-tour-page .tour-button.primary { border-color: var(--color-blue); background: var(--color-blue); color: #fff; }
.product-tour-page .tour-button.primary:hover { background: var(--color-blue-hover); }
.product-tour-page .tour-button:hover { border-color: var(--color-blue-hover); }
.product-tour-page .tour-foot { padding: 22px 0 36px; border-top: 1px solid var(--color-border); color: var(--color-muted); font-size: 13px; }

@media (max-width: 900px) {
  .marketing-page .home-hero { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; padding-inline: 5vw; }
  .marketing-page .hero-demo-preview { min-width: 0; }
  .marketing-page .signin-layout { gap: 55px; }
}
@media (max-width: 760px) {
  .marketing-page .home-hero { display: grid; grid-template-columns: 1fr; gap: 34px; padding: 55px 7vw 64px; }
  .marketing-page .hero-demo-preview { width: 100%; max-width: 680px; justify-self: center; }
  .marketing-page .home-capabilities { margin: 0 5vw; }
  .marketing-page .home-report-section { padding: 64px 7vw; }
  .marketing-page .public-main { margin-top: 3.5rem; }
  .contact-page .contact-hero { min-height: 0; }
  .contact-page .contact-footer { background: var(--color-ink); }
}
@media (max-width: 560px) {
  .marketing-page .home-hero { padding: 43px 19px 48px; }
  .marketing-page .hero-demo-bar { font-size: 7px; }
  .marketing-page .hero-demo-frame { aspect-ratio: 4 / 3; }
  .marketing-page .home-report-section { padding: 52px 19px; }
  .marketing-page .public-main { width: min(100% - 2rem, 920px); margin: 2.8rem auto 4rem; }
  .marketing-page .public-intro { font-size: 1.05rem; }
  .signin-page .signin-layout { display: grid; grid-template-columns: 1fr; gap: 28px; padding: 38px 18px; }
  .signin-page .signin-story { margin-bottom: 0; }
  .signin-page .signin-story h1 { font-size: clamp(36px, 10vw, 44px); }
  .signin-page .signin-auth { width: 100%; max-width: 480px; }
  .product-tour-page .tour-nav { height: 62px; }
  .product-tour-page .tour-hero { padding-top: 38px; }
  .product-tour-page .tour-hero h1 { letter-spacing: -1.8px; }
  .product-tour-page .tour-hero p { font-size: 16px; }
  .product-tour-page .tour-frame { aspect-ratio: 9 / 16; max-height: 72vh; }
  .product-tour-page .tour-actions { flex-direction: column; }
  .product-tour-page .tour-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .marketing-page *, .signin-page *, .contact-page *, .product-tour-page * { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}