/* =========================================
   RESPONSIVENESS (Mobile First -> Desktop)
   ========================================= */



@media (max-width: 1199px) {
.header .nav-links{gap: 0.8rem;}
/* .header .nav-links .btn{margin-left: 1rem;} */
.max-wid-80 {
  max-width: 100%;
}


.header .sign-btn{flex-wrap: wrap; flex-direction: column; gap: 0.5rem ;        align-items: baseline; margin:0.5rem 0 0;}


  /* Header */
  .header .nav-actions {
    display: none;
  }

  .header .nav-content{justify-content: space-between;}
  .header .nav-links {
        position: fixed;
        top: 0;
        left: 0;
        width: min(100%, 26rem);
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        /* same palette as the hero: deep blue gradient, soft glows, grain */
        background:
            radial-gradient(80% 30% at 20% 0%, rgba(70, 115, 215, 0.45), rgba(70, 115, 215, 0) 100%),
            radial-gradient(70% 30% at 0% 100%, rgba(70, 52, 180, 0.35), rgba(70, 52, 180, 0) 100%),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
            linear-gradient(180deg, #183584 0%, #0F215E 45%, #0D1F58 100%);
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem 1.25rem;
        gap: 0.6rem;
        z-index: 1002;
        transform: translate3d(-100%, 0, 0);
        visibility: hidden;
        transition: transform 0.55s var(--EaseOut), visibility 0.55s;
        box-shadow: 5px 0 25px rgba(0, 0, 0, 0.3);
  }

  .header .nav-menu {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
        gap: 0.6rem;    flex: unset;
  }
 
  .header .btn-white{background: var(--SecondaryColor); border-color: var(--SecondaryColor); color: var(--WhiteColor);}
  .header .nav-links.active{ transform: none; visibility: visible; }

  /* Menu items slide in one after another (--i set in custom.js) */
  .header .nav-links.active .nav-menu > .nav-link,
  .header .nav-links.active .nav-item,
  .header .nav-links.active .sign-btn .btn {
    animation: navItemIn 0.6s var(--EaseOut) calc(0.12s + var(--i, 0) * 0.05s) backwards;
  }

  @keyframes navItemIn {
    from { opacity: 0; transform: translate3d(-16px, 0, 0); }
    to   { opacity: 1; transform: none; }
  }

  .header .sidebar-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

  /* Sidebar items: full-width rows; mega menus become accordions */
  .header .nav-menu { margin-left: 0; gap: 0; }

  .header .nav-menu > .nav-link,
  .header .nav-item { width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }

  .header .nav-link,
  .header .nav-trigger {
    width: 100%;
    justify-content: space-between;
    padding: 0.85rem 0;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--WhiteColor);
  }

  .header .nav-link::before,
  .header .nav-trigger::before { display: none; }

  .header .nav-trigger[aria-expanded="true"] { color: var(--SecondaryColor); }

  .mega {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows 0.45s var(--EaseOut), visibility 0s linear 0.45s;
  }

  .nav-item.is-open .mega {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows 0.45s var(--EaseOut), visibility 0s;
  }

  .mega-inner { min-height: 0; overflow: hidden; }
  .mega-intro { display: none; }
  .mega-grid { padding: 0 0 0.9rem; }

  .mega-grid a { padding: 0.55rem 0.75rem; }
  .mega-grid a:hover, .mega-grid a:focus-visible { background: rgba(255, 255, 255, 0.06); }
  .mega-grid b { color: var(--WhiteColor); font-weight: 500; }
  .mega-grid a:hover b { color: var(--SecondaryColor); }
  .mega-grid span { color: #8A93AD; }

  /* Hero */
  .hero-section .hero-content h1 { font-size: 3.4rem; }
  .dash-body { grid-template-columns: 12.5rem minmax(0, 1fr) 17rem; }

  /* LIFE */
  .life-grid { grid-template-columns: repeat(2, 1fr); }
  .life-letter { font-size: 6rem; margin-bottom: 1.6rem; }
  .same-heading h2 { font-size: 3rem; }

  /* Platform */
  .stack-row { grid-template-columns: 13rem 1fr; }

  .header .nav-links .btn {
    font-size: 1rem;
  }

  /* Ensure toggle is above the menu */
  .header .mobile-toggle {
    display: inline-flex;
    position: relative;
    z-index: 1000;
  }

}

@media (max-width: 991px) {
  .same-heading {
    margin-bottom: 2rem;
  }
/* Hero */
.hero-section .hero-content h1 { font-size: 3rem; }
.same-heading h2{font-size: 2.6rem;}
  /* Global */
  .same-section { padding: 3.5rem 0; }
  .max-wid-50 { max-width: 100%; }

.section-bottom-btn { flex-wrap: wrap;}

.hero-section { padding-top: calc(var(--HeaderHeight) + 3.5rem); }
.hero-section .hero-content h1 { margin-bottom: 1.8rem; }
.hero-section .hero-btns { margin-top: 2.4rem; }
.hero-visual { margin-top: 4.5rem; }

/* Dashboard stacks: audiences as a wrap row, map, then answer */
.dash-frame { padding: 0.75rem; border-radius: 30px; }
.dash { border-radius: 20px; }
.dash-body { grid-template-columns: 1fr; min-height: 0; }
.dash-aud { border-right: 0; border-bottom: 1px solid #ECEFF6; }
.aud-list { flex-direction: row; flex-wrap: wrap; }
.aud-chip { flex: 1 1 11rem; width: auto; }
.dash-cta { display: none; }
.dash-map .fabmap { max-width: 30rem; }
.dash-answer { border-left: 0; border-top: 1px solid #ECEFF6; }

/* Light moves lower so it sits behind the mockup on narrower screens */
/* Taller hero: stretch the painted background down the page */
.hero-bg { background: linear-gradient(180deg, #1F3F99 0, #183584 22vw, #0D1F58 50vw, #0F215E 70vw, #1D2F8C 90vw, #1D2F8C 100%); }
.hero-glow--sky { width: 80vw; height: 32vw; left: 5vw; top: -6vw; }
.hero-glow--side { width: 50vw; height: 40vw; left: -22vw; top: 10vw; }
.hero-glow--band { width: 130vw; height: 26vw; left: -20vw; top: 34vw; }
.hero-glow--crown { width: 70vw; height: 26vw; right: -20vw; top: -4vw; }
.hero-glow--sun { width: 62vw; height: 34vw; right: -30vw; top: 56vw; } /* kept below the copy so text stays legible */
.hero-glow--floor { width: 140vw; height: 18vw; left: -10vw; top: 72vw; }
.hero-glow--violet { width: 56vw; height: 28vw; left: -20vw; top: 64vw; }

/* For people: copy above phone, cards 2-up */
.people-section { padding: 4rem 0 3.5rem; }
.people-intro { grid-template-columns: 1fr; gap: 3.5rem; margin-bottom: 3.5rem; }
.people-title { font-size: 2.6rem; }
.feature-grid { grid-template-columns: repeat(2, 1fr); }

/* Footer: brand on its own row, link columns 3-up */
.footer-grid { grid-template-columns: repeat(3, 1fr); row-gap: 1.5rem; }
.footer-brand { grid-column: 1 / -1; }
.footer-badge { flex-direction: column; text-align: center; }

/* Hash-routed pages */
.pagebar-title { font-size: 3rem; }
.pg-head h2 { font-size: 2.5rem; }
.svc-grid, .std-cards, .paper-grid, .tier-grid, .di-three, .di-prin { grid-template-columns: repeat(2, 1fr); }
.di-prin-item:not(:nth-child(3n + 1)) { border-left: 0; }
.di-prin-item:nth-child(2n) { border-left: 1px solid rgba(255, 255, 255, 0.08); }
.di-split { grid-template-columns: 1fr; }
.cmp, .papers-reg, .provider-row { grid-template-columns: 1fr; }
.cmp-title { font-size: 2rem; }

/* Deploy */
.start-grid { grid-template-columns: 1fr; max-width: 36rem; margin: 0 auto; }

/* Deployment path: form below the steps */
.path-layout { grid-template-columns: 1fr; gap: 3rem; }
.sched-card { grid-template-columns: 1fr; }

/* Developers */
.dev-grid { grid-template-columns: repeat(2, 1fr); }
.dev-section .same-heading { margin-bottom: 3rem; }

/* Trust Fabric: orbit below the copy, cards 2-up */
.fabric-intro { grid-template-columns: 1fr; gap: 3rem; }
.fabric-title { font-size: 2.8rem; }
.orbit { max-width: 28rem; }
.union-grid { grid-template-columns: repeat(2, 1fr); }
.deploy-grid { grid-template-columns: repeat(2, 1fr); }
.deploy-card:not(:nth-child(3n + 1)) { border-left: 0; }
.deploy-card:nth-child(2n) { border-left: 1px solid #E6EAF2; }

/* White label: preview below the form */
.wl-section { padding: 3.5rem 0; }
.wl-layout { grid-template-columns: 1fr; gap: 3rem; }
.wl-title { font-size: 2.4rem; }
.wl-preview { min-height: 0; padding: 2.5rem 1.25rem; }

/* ClearOS: visual below copy */
.os-step { grid-template-columns: 1fr; gap: 2rem; }
.os-scroller { padding: 1rem 0 3rem; }
.os-visual { max-width: 28rem; width: 100%; margin: 0 auto; }

/* Hardware: media above details */
.hw-panel { grid-template-columns: 1fr; gap: 1rem; }
.hw-media { min-height: 22rem; }
.hw-info { padding: 0.8rem 0.6rem 0.8rem; }

/* Quote */
.quote-section { padding: 4rem 0; }
.quote-text { font-size: 1.8rem; }

/* Platform: label above chips */
.stack-row { grid-template-columns: 1fr; gap: 0.9rem; }

/* Stats: 2 x 2 */
.stats-section { padding-bottom: 3.5rem; }
.stats-grid { grid-template-columns: repeat(2, 1fr); }
.stat-item:nth-child(2n) { border-right: 0; }
.stat-item:nth-child(-n + 2) { border-bottom: 1px solid #E9ECF4; }
.stat-number { font-size: 3.2rem; }


}


@media (max-width: 767px) {

.same-heading h2 br{display: none;}

.section-bottom-btn{gap: 0.6rem;}
.doc-family-section .doc-family-list{gap: 1rem;}

.same-heading h3 br{display: none;}
.same-heading h2 br{display: none;}

.header .sign-btn .btn-secondary{margin-top: 1rem;}

/* Hero */
.hero-section .hero-content h1 { font-size: 2.5rem; letter-spacing: -0.03em; }
.hero-section .hero-lead { font-size: 1.05rem; }
.hero-section .hero-text { font-size: 1rem; }
.hero-visual { margin-top: 3.5rem; }
.hero-bg { background: linear-gradient(180deg, #1F3F99 0, #183584 40vw, #0D1F58 90vw, #0F215E 130vw, #1D2F8C 160vw, #1D2F8C 100%); }
.hero-glow--sky { width: 120vw; height: 60vw; left: -10vw; top: -10vw; }
.hero-glow--side { display: none; }
.hero-glow--band { width: 170vw; height: 50vw; left: -40vw; top: 70vw; }
.hero-glow--crown { width: 100vw; height: 45vw; right: -40vw; top: 0; }
.hero-glow--sun { width: 90vw; height: 50vw; right: -62vw; top: 122vw; }
.hero-glow--floor { width: 180vw; height: 32vw; left: -40vw; top: 150vw; }
.hero-glow--violet { width: 90vw; height: 50vw; left: -40vw; top: 135vw; }

/* Headings / LIFE */
.same-heading h2 { font-size: 2.2rem; }
.same-heading p { font-size: 1.05rem; }
.life-section { padding-top: 2.5rem; }

/* Platform */
.platform-section .platform-intro { font-size: 1rem; }
.stack { padding: 0.5rem; border-radius: 18px; }
.stack-row { padding: 1.1rem 1rem; }
.chip-label { flex-basis: 100%; margin-bottom: 0.1rem; }

/* LIFE Stack accordion */
.stack12-section { padding: 4.5rem 0; }
.layer-trigger { grid-template-columns: 2.5rem 1fr auto; padding: 1.1rem 1rem; column-gap: 0.5rem; }
.layer-name { flex-direction: column; align-items: flex-start; }
.layer-title { font-size: 1.05rem; }
.layer-sub { font-size: 0.85rem; }
.layer-body { padding: 0 1rem 1.25rem 3.5rem; }

/* For people */
.people-title { font-size: 2.2rem; }
.phone-ring--outer { width: 24rem; height: 24rem; margin: -12rem 0 0 -12rem; }
.phone-ring--inner { width: 19rem; height: 19rem; margin: -9.5rem 0 0 -9.5rem; }
.feature-grid { grid-template-columns: 1fr; }
.feature-card--wide { grid-column: auto; flex-direction: column; }

/* Hardware */
.hw-specs > div { grid-template-columns: 1fr; gap: 0.2rem; }
.hw-info h3 { font-size: 1.5rem; }
.hw-media { min-height: 18rem; }

/* White label */
.wl-title { font-size: 2rem; }

/* Developers */
.dev-grid { grid-template-columns: 1fr; gap: 1rem; }

/* Request form */
.request-form { padding: 1.5rem 1.1rem 1.3rem; }
.request-form h3 { font-size: 1.45rem; }
.request-grid { grid-template-columns: 1fr; }
.request-actions { flex-wrap: wrap; gap: 1rem 1.6rem; }
.request-send { flex-basis: 100%; max-width: none; margin-left: 0; }

/* Hash-routed pages */
.pagebar { padding-bottom: 2.6rem; }
body.is-page .di-page { margin: 1rem 0.75rem 0; border-radius: 20px; }
.pagebar-title { font-size: 2.3rem; }
.pg-head h2 { font-size: 2.1rem; }
.svc-grid, .std-cards, .paper-grid, .tier-grid, .di-three, .di-prin, .defs { grid-template-columns: 1fr; }
.di-prin-item:nth-child(2n) { border-left: 0; }
.di-prin-item { padding: 1.4rem 0.2rem; }
.cmp-title { font-size: 1.6rem; }
.papers-reg h2 { font-size: 1.9rem; }
.councils-card, .badge-card, .becomes-card { padding: 1.5rem; }

/* Footer */
.site-footer { padding-top: 3.5rem; }
.footer-grid { grid-template-columns: repeat(2, 1fr); }
.footer-bottom { flex-direction: column; }

/* Closing CTA */
.cta-section { padding: 3.5rem 0; }
.cta-section .cta-text { font-size: 2.1rem; }

/* Scheduler */
.sched-card { padding: 1.3rem 1rem; }
.sched-days { grid-template-columns: repeat(4, 1fr); }
.sched-book { align-self: stretch; }

/* Trust Fabric */
.fabric-title { font-size: 2.3rem; }
.orbit { width: 74%; }
.orb-spin--rev { display: none; }
.orb-bub { font-size: 0.68rem; padding: 0.3rem 0.6rem 0.3rem 0.3rem; }
.orb-bub i { width: 1.3rem; height: 1.3rem; font-size: 0.55rem; }
.orb-center { width: 5rem; height: 5rem; margin: -2.5rem 0 0 -2.5rem; font-size: 0.75rem; }
.union-grid, .deploy-grid { grid-template-columns: 1fr; }
.deploy-card:nth-child(2n) { border-left: 0; }
.deploy-card { padding: 1.8rem 0.5rem; }
.deploy-flag { right: 0.5rem; top: 1.9rem; }

/* Live environments */
.live-section { --env-w: 17.5rem; --env-gap: 0.9rem; }
.unions { padding: 1.3rem 1.1rem; }

/* Quote */
.quote-text { font-size: 1.4rem; }
.quote-icon { margin-bottom: 1.8rem; }
.authorized-card { flex-direction: column; align-items: flex-start; gap: 1.25rem; padding: 1.4rem; }

}

@media (max-width: 568px) {

.hero-section .hero-content h1 { font-size: 2.1rem; }
.hero-section .hero-btns { gap: 0.6rem; }
.hero-section .hero-btns .btn { flex: 1 1 auto; }
/* keep the dashboard legible: let it bleed off the right edge */

/* Dashboard */
.dash-frame { padding: 0.5rem; border-radius: 22px; }
.dash { border-radius: 16px; }
.aud-chip { flex-basis: 9rem; padding: 0.45rem; font-size: 0.85rem; }
.dash-answer { padding: 1.2rem 1rem; }

/* Hardware tabs share the full width */
.tab-list { width: 100%; }
.tab { flex: 1 1 0; padding: 0.55rem 0.3rem; font-size: 0.78rem; }

.stat-item { padding: 1.5rem 1rem 1.6rem; }
.stat-number { font-size: 2.6rem; margin-bottom: 0.75rem; }
.stat-item p { font-size: 0.875rem; }

/* LIFE */
.life-grid { grid-template-columns: 1fr; }
.life-card { padding: 2rem 1.4rem 1.75rem; }
.life-letter { font-size: 5rem; }

}