/* Rules shared by every redesigned page, loaded after the page stylesheet.
   Page stylesheets are copied verbatim from the approved mockups; this file only
   covers pieces the shared nav/footer add on top of them. */
body{margin:0;}
/* Grid navbar from the approved Home mockup, used on every page. */
.site-nav{
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 42px),
    linear-gradient(150deg,var(--dark-1),var(--dark-2));
  border-bottom:none;
}
.footer-grid .is-current{color:var(--accent-2);font-weight:600;}
.footer-social{display:flex;gap:10px;margin-top:16px;}
.footer-social a{width:32px;height:32px;border-radius:8px;border:1px solid var(--dark-border);display:flex;align-items:center;justify-content:center;color:var(--dark-fg-muted);transition:color .15s ease,border-color .15s ease;}
.footer-social a:hover{color:var(--accent-2);border-color:var(--accent-2);}

.lang-switch{display:inline-flex;gap:4px;font-family:var(--font-mono);font-size:.78rem;}
.lang-switch a,.lang-switch span{padding:3px 9px;border-radius:999px;border:1px solid var(--dark-border);color:var(--dark-fg-muted);}
.lang-switch span{color:var(--dark-fg);border-color:var(--accent-2);}
.lang-switch a:hover{color:var(--accent-2);}

.bm-recaptcha{margin:4px 0 14px;min-height:78px;}
.form-error{display:none;margin-top:12px;font-size:.88rem;color:var(--accent-deep);}
.form-error.is-shown{display:block;}
.form-error a{text-decoration:underline;}

/* Mobile: the mockups' hero visuals overflow below ~760px (grid items keep their
   min-content width, and the floating chips turn into flex items beside the diagram). */
@media (max-width:900px){
  .hero-grid > *,.contact-grid > *{min-width:0;}
}
@media (max-width:760px){
  .hero-visual{flex-wrap:wrap;justify-content:center;min-height:0;}
  .hero-visual > [class*="-wrap"]{flex:1 0 100%;max-width:100%;}
  .hero-visual > .hero-chip{display:none;}
}
@media (max-width:620px){
  [class*="-grid"] > *{min-width:0;}
  .helper-label{flex-basis:100%;}
  .more-pill,.panel-price{white-space:normal;}
}

/* Mobile pipeline diagram (Home, Professional Services, Custom Apps, Cloud): the mockups
   stack it vertically below ~480px, which makes it ~720px tall with sideways-dashed
   connectors. Keep the horizontal layout instead, scaled to the container width. */
@container (max-width:30em){
  .pw-pipeline{grid-template-columns:1fr 2.6em 1fr 2.6em 1fr;justify-items:stretch;align-items:start;font-size:clamp(7px,2.75cqw,13px);}
  .pw-stage{gap:.7em;}
  .pw-stage-title{font-size:1.3em;}
  .pw-stage-caption{display:none;}
  .pw-connector{width:auto;height:6.4em;margin-inline:0;}
  .pw-connector .pw-track{width:100%;height:.28em;}
  .pw-connector .pw-dot{animation-name:pwFlowX !important;}
  .pw-connector .pw-chevron{transform:none;}
}
@media (max-width:760px){
  .hero-chips-mobile{gap:6px;}
  .hero-chips-mobile .hero-chip{margin:0;padding:6px 11px;font-size:.74rem;}
  body .pre-reveal.js-hidden:not(.is-visible){transform:translateY(10px);}
}

/* ---------- Responsive audit (responsive-design skill) ---------- */
/* Content breakpoint: the Spanish nav labels are longer and overflow between the
   hamburger breakpoint (860px) and ~1100px, so tighten the nav in that range. */
@media (min-width:861px) and (max-width:1120px){
  .nav-links{gap:18px;}
  .nav-right .btn{padding-inline:16px;}
}
@media (max-width:760px){
  /* Touch targets: 44x44px minimum */
  .nav-toggle{width:44px;height:44px;}
  .brand{min-height:44px;}
  .footer-grid li{margin-bottom:0;}
  .footer-grid li a,.breadcrumb a,.lang-switch a,.card-link,.eb-alt a{display:inline-flex;align-items:center;min-height:44px;}
  .lang-switch a,.lang-switch span{min-width:44px;justify-content:center;display:inline-flex;align-items:center;}
  .footer-social a{width:44px;height:44px;}
  .chip,.icon-btn,.carousel-btn,.copy-btn{min-height:44px;min-width:44px;}
  /* Readable text: nothing under 12px */
  .fact-label,.hero-chip,.hero-chip b,.svc-tag,.lbl,.tag-coming,.step-num,.current-tag,.self,.mt-label,.eb-chip,.tier-setup,.tag{font-size:12px;}
}
/* width/height attributes only reserve the aspect ratio; zero specificity so the
   page rules (e.g. .client-logo{height:34px}) still win */
:where(main img[width][height]){height:auto;}
@media (max-width:760px){
  .footer-social{flex-wrap:wrap;}
  .footer-social a{flex:0 0 44px;}
  .footer-grid li a,.breadcrumb a{min-width:44px;}
  .hero-chips-mobile .hero-chip,
  .jobs-widget .lbl,.sla-times .lbl,.sla-times .self,.mock-terminal .mt-label,
  .step-card .step-num,.split-half h3 .tag,.sla-sev b{font-size:12px;}
}
/* Intrinsic sizing: flex cards (flex:1 1 260px) must be able to shrink below their
   basis on 320px phones, and long (Spanish) button labels may wrap. */
.cards-row > *{min-width:0;max-width:100%;}
@media (max-width:420px){
  .btn{max-width:100%;white-space:normal;text-align:center;}
}
/* The Cloud and ECS mockup CSS never hide the in-menu CTA on desktop, so it showed twice. */
@media (min-width:861px){ .nav-links .nav-cta{display:none;} }
/* Current page in the top nav */
.nav-links > a.is-current{color:var(--nav-fg);font-weight:600;}
@media (min-width:861px){ .nav-links > a.is-current{box-shadow:inset 0 -2px 0 var(--accent);padding-block:4px;} }
/* ES/EN switch in the nav (always visible, also next to the menu button on phones) */
.nav-lang a,.nav-lang span{border-color:rgba(244,239,230,.22);color:var(--nav-fg-muted);}
.nav-lang span{color:var(--nav-fg);border-color:var(--accent);}
.nav-lang a:hover{color:var(--nav-fg);border-color:var(--nav-fg-muted);}
.nav-right{gap:12px;}
@media (max-width:760px){
  .nav-lang a,.nav-lang span{min-width:44px;min-height:44px;}
  .nav-right{gap:8px;}
}
@media (min-width:861px) and (max-width:960px){
  .nav-links{gap:14px;}
  .nav-links > a,.nav-dropdown summary{font-size:.86rem;}
  .nav-right .btn{padding-inline:12px;font-size:.86rem;}
}
/* Bitmaker Cloud "How it works": real product screenshots */
.step-shot{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--border);box-shadow:0 14px 30px -20px rgba(37,25,15,.45);}
/* About: whole-team photo, framed like the page's cards */
.team-photo{position:relative;margin:0;border-radius:20px;overflow:hidden;border:1px solid var(--border-strong);
  box-shadow:0 30px 60px -36px rgba(37,25,15,.55);background:var(--surface);}
.team-photo img{display:block;width:100%;height:auto;aspect-ratio:1800/1044;object-fit:cover;}
.team-photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 62%,rgba(28,19,48,.55));}
.team-photo figcaption{position:absolute;left:18px;bottom:16px;z-index:1;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:#fff;
  background:rgba(28,19,48,.55);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:7px 14px;backdrop-filter:blur(6px);}
.team-photo figcaption .dot{width:7px;height:7px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 0 4px rgba(255,179,107,.25);}
.team-facts{grid-template-columns:repeat(3,1fr);margin-top:18px;}
@media (max-width:620px){
  .team-facts{grid-template-columns:1fr;}
  .team-photo{border-radius:14px;}
  .team-photo figcaption{left:10px;bottom:10px;font-size:12px;padding:6px 11px;}
}

/* ---------- Paths to the sales form ---------- */
.cta-band{padding-block:0 72px;}
.cta-band .cta-band-alt{font-size:.9rem;color:var(--fg-faint);}
.cta-band .cta-band-alt a{color:var(--accent-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px;}
/* Sticky CTA on phones: the nav CTA lives inside the closed hamburger menu there */
.mobile-cta{display:none;}
@media (max-width:760px){
  .mobile-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:35;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(180deg,rgba(28,19,48,0),rgba(28,19,48,.92) 38%);
    transform:translateY(110%);transition:transform .28s ease;pointer-events:none;}
  .mobile-cta.is-shown{transform:translateY(0);pointer-events:auto;}
  .mobile-cta .btn{display:flex;width:100%;justify-content:center;min-height:48px;box-shadow:0 12px 28px -12px rgba(200,67,31,.7);}
  .cta-band{padding-block:0 48px;}
}
@media (prefers-reduced-motion:reduce){ .mobile-cta{transition:none;} }