/* CShark mobile materials. Crystal is our content treatment, not an Apple API.
   Functional glass is limited to navigation. Existing actions own all state. */
.mobile-crystal-site {
  --crystal-ink: #10212e;
  --crystal-muted: #52616a;
  --crystal-paper: #f2f5f2;
  --crystal-line: #d7dfda;
  --crystal-lime: #c9f54a;
  --crystal-ui: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --crystal-brand: "Onest", var(--crystal-ui);
  --crystal-gutter: 20px;
  --crystal-glass: #f4f7f3;
  --crystal-blur: none;
  --crystal-shadow: 0 8px 28px #10212e12, inset 0 1px 0 #ffffffc9;
  --crystal-ease: cubic-bezier(.2,.75,.25,1);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mobile-crystal-site {
    --crystal-glass: rgb(248 250 247 / 88%);
    --crystal-blur: blur(18px) saturate(125%);
  }
}
.mobile-crystal-site.crystal-opaque {
  --crystal-glass: #f4f7f3;
  --crystal-blur: none;
}
.mobile-crystal-site :is(button,a,input,select,textarea,summary):focus-visible {
  outline: 3px solid #2167b5;
  outline-offset: 4px;
}
.crystal-material-toggle {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--crystal-line, #d7dfda);
  border-radius: 14px;
  background: #f4f7f3;
  color: #10212e;
  font: 500 14px/1.35 var(--crystal-ui, system-ui);
  cursor: pointer;
}
.crystal-material-toggle[aria-pressed="true"] { background: #e3ebdf; border-color: #7d9278; }
.showcase-intro .crystal-material-toggle { margin-top: 12px; }
@media (max-width: 980px) {
  .mobile-crystal-site { --mobile-gutter: var(--crystal-gutter); font-family: var(--crystal-ui); }
  .mobile-crystal-site :is(h1,h2,h3) { font-family: var(--crystal-brand); font-weight: 650; }
  .mobile-crystal-site .page-shell {
    width: 100%;
    padding-left: max(var(--crystal-gutter), env(safe-area-inset-left, 0px));
    padding-right: max(var(--crystal-gutter), env(safe-area-inset-right, 0px));
  }
  .mobile-crystal-site .site-header.site-header {
    /* The accepted header locks these dimensions with !important. */
    top: max(10px, env(safe-area-inset-top, 0px)) !important;
    right: max(12px, env(safe-area-inset-right, 0px)) !important;
    left: max(12px, env(safe-area-inset-left, 0px)) !important;
    width: auto;
    height: 60px !important;
    min-height: 60px !important;
    grid-template-rows: 46px;
    padding: 6px 8px 6px 16px;
    border: 1px solid #ffffffa8;
    border-radius: 24px !important;
    background: var(--crystal-glass);
    -webkit-backdrop-filter: var(--crystal-blur);
    backdrop-filter: var(--crystal-blur);
    box-shadow: var(--crystal-shadow);
    color: var(--crystal-ink);
  }
  .mobile-crystal-site .site-header.scrolled { background: var(--crystal-glass); border-color: #ffffffa8; }
  .mobile-crystal-site .site-header .brand-logo { width: 76px; height: 42px; object-fit: contain; }
  .mobile-crystal-site .site-header :is(.header-actions,.menu-button) { min-height: 44px; }
  .mobile-crystal-site .site-header .menu-button { width: 44px; padding: 10px; border-radius: 50%; background: transparent; }
  .mobile-crystal-site .site-header .menu-button:active { background: #10212e0d; }
  .mobile-crystal-site.mobile-nav-open { overflow: hidden; }
  .mobile-crystal-site .site-header #mobile-nav {
    position: absolute !important;
    top: calc(100% + 12px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto;
    height: auto !important;
    max-height: calc(100dvh - 106px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    padding: 18px 20px 20px;
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid #e0e6df;
    border-radius: 24px;
    background: #f5f7f2;
    color: var(--crystal-ink);
    box-shadow: 0 24px 64px #10212e26;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .mobile-crystal-site .site-header .mobile-nav[hidden] { display: none; }
  .mobile-crystal-site #mobile-nav > a:not(.mobile-nav-cta) {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 10px 0;
    border: 0;
    color: var(--crystal-ink);
    font-family: var(--crystal-ui);
    font-size: 22px;
    line-height: 1.2;
    font-weight: 550;
    letter-spacing: -.025em;
    text-decoration: none;
  }
  .mobile-crystal-site #mobile-nav > a.active { color: #176248; }
  .mobile-crystal-site #mobile-nav .mobile-nav-more { border-top: 1px solid var(--crystal-line); margin-top: 10px; }
  .mobile-crystal-site .mobile-nav-more > summary {
    min-height: 48px; padding: 14px 0; font-size: 16px; font-weight: 500;
  }
  .mobile-crystal-site .mobile-nav-more-links a { min-height: 44px; font: 400 16px/1.4 var(--crystal-ui); }
  .mobile-crystal-site #mobile-nav :is(.mobile-nav-cta,.js-open-demo) {
    min-height: 52px; margin-top: 14px; padding: 14px 18px; border-radius: 16px;
    background: var(--crystal-lime); color: var(--crystal-ink); font: 600 16px/1.35 var(--crystal-ui);
  }
  .mobile-crystal-site .mobile-nav-language { margin-top: 12px; }
  .mobile-crystal-site .mobile-nav .crystal-material-toggle { margin-top: 8px; width: 100%; }
  .mobile-crystal-site .hero.hero-conversion { padding-top: 0; }
  .mobile-crystal-site .hero-conversion .hero-content {
    padding-top: max(110px, calc(100px + env(safe-area-inset-top, 0px))) !important;
    padding-bottom: 32px !important;
  }
  /* The legacy compiled hero has !important sizing. Override only those roles. */
  .mobile-crystal-site.home-optimized .hero-conversion-title {
    max-width: 18ch;
    font-size: clamp(30px,8.5vw,36px) !important;
    font-weight: 650;
    letter-spacing: -.025em;
    line-height: 1.13 !important;
    text-wrap: balance;
  }
  .mobile-crystal-site.home-optimized .hero-positioning-subtitle {
    max-width: 38ch;
    margin-top: 20px !important;
    font: 450 17px/1.5 var(--crystal-ui);
    font-size: 17px !important;
    letter-spacing: 0;
    color: #e4ebdd;
  }
  .mobile-crystal-site.home-optimized .hero-conversion-actions { gap: 12px !important; margin-top: 26px !important; }
  .mobile-crystal-site.home-optimized .hero-conversion-actions .button {
    min-height: 54px; border-radius: 17px; padding: 14px 18px; font: 600 16px/1.3 var(--crystal-ui);
  }
  .mobile-crystal-site.home-optimized .hero-secondary-action {
    background: #172620; color: #fff; border: 1px solid #a7b4a17a;
  }
  .mobile-crystal-site .home-preview > summary {
    width: calc(100% - var(--crystal-gutter)*2);
    margin: 4px var(--crystal-gutter) 24px;
    padding: 16px; min-height: 54px; border-radius: 18px; font-size: 15px; font-weight: 500;
  }
  .mobile-crystal-site .home-section-nav { font-family: var(--crystal-ui); }
  .mobile-crystal-site .section-heading h2 { font-weight: 650; letter-spacing: -.025em; }
  .mobile-crystal-site .section-heading p { font: 400 16px/1.55 var(--crystal-ui); }
  .mobile-crystal-site .growth-object-links { gap: 10px; }
  .mobile-crystal-site .growth-object-links a { padding: 18px 14px; border-radius: 18px; font: 550 16px/1.4 var(--crystal-ui); }
  .mobile-crystal-site :is(.home-demo-card,.registry-proof,.scenario-launch) {
    border-radius: 22px; box-shadow: inset 0 1px 0 #ffffff8a;
  }
  .mobile-crystal-site :is(.home-five-ledger p,.home-working-cycle-rail p) { font-family: var(--crystal-ui); }
  .mobile-crystal-site .button { transition: background-color 160ms var(--crystal-ease), box-shadow 160ms var(--crystal-ease); }
  .mobile-crystal-site .button:active { filter: brightness(.96); }
  .mobile-crystal-site :is(.site-footer,.cshark-footer) { font-family: var(--crystal-ui); }
  .mobile-crystal-site .cshark-footer-main > *,
  .mobile-crystal-site .cshark-footer-contacts { min-width: 0; max-width: 100%; }
  .mobile-crystal-site .cshark-footer-contacts { grid-template-columns: minmax(0,1fr); }
  .mobile-crystal-site .cshark-footer-contacts :is(a,span,address) { max-width: 100%; overflow-wrap: anywhere; }
  .mobile-crystal-site .cshark-footer-docs { grid-template-columns: repeat(auto-fit, minmax(min(100%,9em),1fr)); }
  .mobile-crystal-site .cshark-footer-docs :is(a,button) { min-width: 0; overflow-wrap: anywhere; }
  .mobile-crystal-site .cookie-consent { border-radius: 22px; background: #f6f8f3; color: var(--crystal-ink); }
  .mobile-crystal-site .cookie-consent-copy p { font-size: 14px; line-height: 1.45; }
  .mobile-crystal-site #demo-dialog {
    color: var(--crystal-ink);
    background: #f8faf6;
    width: min(600px, calc(100% - 20px));
    max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    margin: auto;
    padding: 0;
    border: 1px solid #ffffff;
    border-radius: 28px;
    box-shadow: 0 24px 80px #10212e40;
    font-family: var(--crystal-ui);
    overscroll-behavior: contain;
    scroll-padding-block: 24px;
  }
  .mobile-crystal-site #demo-dialog::backdrop { background: #10212e80; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .mobile-crystal-site #demo-dialog .dialog-close {
    position: sticky; top: 12px; float: right; margin: 12px 12px 0 0; z-index: 2;
    min-width: 44px; width: 44px; height: 44px; padding: 10px; border: 1px solid #dce4d9;
    border-radius: 50%; background: #edf2e9; color: var(--crystal-ink);
  }
  .mobile-crystal-site #demo-dialog .dialog-intro { padding: 26px 22px 20px; }
  .mobile-crystal-site #demo-dialog .dialog-intro h2 { padding-right: 32px; font: 650 28px/1.15 var(--crystal-brand); letter-spacing: -.025em; }
  .mobile-crystal-site #demo-dialog .dialog-intro p { clear: both; margin: 12px 0 0; font-size: 16px; line-height: 1.5; color: var(--crystal-muted); }
  .mobile-crystal-site #demo-form { gap: 18px; padding: 0 22px max(26px, env(safe-area-inset-bottom, 0px)); }
  .mobile-crystal-site #demo-form label { gap: 8px; font-size: 15px; line-height: 1.4; font-weight: 550; }
  .mobile-crystal-site #demo-form :is(input:not([type="checkbox"]),select,textarea) {
    min-height: 52px; padding: 14px; border: 1px solid #aebcaf; border-radius: 14px;
    background: #fff; color: var(--crystal-ink); font: 400 16px/1.4 var(--crystal-ui);
  }
  .mobile-crystal-site #demo-form textarea { min-height: 100px; }
  .mobile-crystal-site #demo-form :is(input,select,textarea):focus-visible { outline: 3px solid #2167b5; outline-offset: 2px; box-shadow: none; }
  .mobile-crystal-site #demo-form [aria-invalid="true"] { border-color: #b33543; }
  .mobile-crystal-site #demo-form .field-error { color: #a62134; font-size: 14px; line-height: 1.45; font-weight: 400; }
  .mobile-crystal-site #demo-form .field-error:empty { display: none; }
  .mobile-crystal-site #demo-form .lead-contact-hint { color: var(--crystal-muted); font-size: 14px; line-height: 1.45; }
  .mobile-crystal-site .lead-extras { border-color: #d5dfd2; border-radius: 18px; }
  .mobile-crystal-site .lead-extras > summary { min-height: 52px; padding: 14px; font-size: 15px; }
  .mobile-crystal-site .lead-extras > summary span { font-size: 13px; }
  .mobile-crystal-site .lead-extras-fields { padding: 4px 14px 18px; gap: 18px; }
  .mobile-crystal-site #demo-form .lead-consent { grid-template-columns: 24px minmax(0,1fr); align-items: start; gap: 12px; padding-block: 6px; }
  .mobile-crystal-site #demo-form .lead-consent input { width: 24px; height: 24px; min-height: 0; margin-top: 2px; accent-color: #176248; }
  .mobile-crystal-site #demo-form .lead-consent span { font-size: 14px; line-height: 1.5; font-weight: 400; }
  .mobile-crystal-site #demo-form .lead-consent .field-error { grid-column: 2; }
  .mobile-crystal-site #demo-form [type="submit"] { min-height: 54px; padding: 15px 18px; border-radius: 17px; font-size: 16px; font-weight: 600; }
  .mobile-crystal-site #demo-dialog .form-success { padding: 32px 24px; }
}
@media (max-width: 350px) {
  .mobile-crystal-site { --crystal-gutter: 18px; }
  .mobile-crystal-site #mobile-nav > a:not(.mobile-nav-cta) { font-size: 20px; }
  .mobile-crystal-site #demo-dialog :is(.dialog-intro,#demo-form) { padding-inline: 18px; }
  .mobile-crystal-site .growth-object-links { grid-template-columns: minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-crystal-site *, .mobile-crystal-site *::before, .mobile-crystal-site *::after {
    scroll-behavior: auto !important; transition-duration: .01ms !important;
  }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .mobile-crystal-site { --crystal-glass: #f4f7f3; --crystal-blur: none; }
}
@media (forced-colors: active) {
  .mobile-crystal-site :is(.site-header,.mobile-nav,#demo-dialog) { background: Canvas; color: CanvasText; border: 1px solid ButtonText; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Mobile composition: preserve the desktop layout and all existing actions. */
@media (max-width: 980px) {
  body #composition .home-composition-flow { gap: 28px; }
  body #composition .home-system-chain {
    margin-top: 0;
    gap: 12px;
    border-top: 0;
  }
  body #composition .home-system-chain article,
  body #composition .home-system-chain article:first-child,
  body #composition .home-system-chain article:last-of-type {
    grid-template-columns: minmax(0, 1fr) 28px;
    grid-template-rows: auto auto;
    min-height: 0;
    gap: 16px;
    padding: 20px;
    border: 1px solid #c7d8d0;
    border-radius: 18px;
    background: #f1f6f3;
  }
  body #composition .home-system-chain article > span {
    padding-top: 0;
    color: #075d48;
    font-size: 13px;
    line-height: 28px;
    font-variant-numeric: tabular-nums;
  }
  body #composition .home-system-chain article > :is(svg,i) {
    width: 26px;
    height: 26px;
    color: #075d48;
    align-self: center;
  }
  body #composition .home-system-chain article > div { align-self: start; min-width: 0; }
  body #composition .home-system-chain h3 {
    margin: 0 0 8px;
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -.02em;
    text-wrap: balance;
    color: #10212e;
  }
  body #composition .home-system-chain p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: #455d62;
    text-wrap: pretty;
  }
  body #composition .home-system-chain-actions { padding-top: 12px; }
  body #composition .home-system-chain-actions .button {
    width: 100%;
    min-height: 52px;
    justify-content: space-between;
    padding: 14px 18px;
    font-size: 16px;
  }
}