/*
  Mobile overflow fixes for the mirrored pages.

  These are corrections to the published site, not part of the mirror. Every
  other byte of those pages is the published markup; this file is the one
  deliberate addition, loaded after the main stylesheet.

  What was wrong, on the published site as much as here:

  1. `.matrix` (the Revenue Tornado quadrants) is a grid with
     `grid-template-columns: 25px 1fr 1fr`. An `fr` track has an implicit
     `min-content` minimum, so once a quadrant contains a phrase like
     "Warm Calling with Full Context" the track refuses to shrink and the grid
     pushes past the viewport. `minmax(0, 1fr)` plus `min-width: 0` lets it.

  2. `.path-panel` is `width: 32.5rem` with a matching max-width, corrected to
     100% only below 479px — so it overflowed on every device between 480 and
     767px.

  3. `.compare-table` cells get `white-space: nowrap` below 479px, so they
     cannot break and the right-hand column runs off screen. `overflow: scroll`
     does not save it — the `1fr` tracks are already sized to the container, so
     nothing scrolls, the text is simply clipped. They now wrap.

  4. `.hero-trust` becomes `flex-flow: column` below 767px inside a box that
     inherits the hero's height, leaving three short figures spread down the
     page with empty space beside them. A compact row of three restores the
     desktop reading.

  Delete this file if the layouts are ever fixed upstream and re-mirrored.
*/

@media screen and (max-width: 991px) {
  .matrix {
    grid-template-columns: 25px minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  .matrix-quadrant {
    min-width: 0 !important;
  }

  .matrix-wrapper,
  .unified-matrix-container {
    max-width: 100% !important;
  }

  .path-panel {
    width: 100% !important;
    max-width: 100% !important;
  }

}

@media screen and (max-width: 767px) {
  /*
    Comparison table. Below 479px the published CSS puts `white-space: nowrap`
    on the cells, so they cannot break and the right-hand column runs off the
    screen — `overflow: scroll` on the grid does not save it, because the `1fr`
    tracks are already sized to the container. Letting the text wrap is what
    actually makes three columns fit on a phone.
  */
  .compare-table {
    width: 100% !important;
    overflow: visible !important;
  }

  .head_cl-1,
  .head_cl-2,
  .head_cl-3,
  .compare_cl-2,
  .compare_cl-3 {
    white-space: normal !important;
    overflow-wrap: anywhere;
    padding: 0.7rem 0.5rem !important;
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
  }

  /*
    Hero metrics. Stacking them into a column left three short figures adrift
    in a flex box that inherits the hero's height, with the labels alone against
    a lot of empty space. A compact row of three reads like the desktop original
    and takes a fraction of the height.
  */
  .hero-trust {
    flex-flow: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 1rem !important;
    height: auto !important;
  }

  .hero-item {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: auto !important;
  }

  .trust_number {
    font-size: 1.5rem !important;
    line-height: 1.1 !important;
  }

  .trust-label {
    /* 0.72rem daban 11.52px: entraban, pero se leian con esfuerzo. 12px es el
       piso razonable para texto de apoyo, y la fila compacta sigue entrando. */
    font-size: 0.75rem !important;
    line-height: 1.25 !important;
  }
}

@media screen and (max-width: 479px) {
  /* The quadrants' 1.75rem padding leaves very little room for the text. */
  .matrix-quadrant {
    padding: 1rem !important;
  }
}


/*
  Blog page. Three more published-CSS problems, all visible on a phone.
*/
@media screen and (max-width: 479px) {
  /*
    `.h1.mob` is the heading shown *only* on mobile — `.mob` is display:none
    until 479px. Its font-size, 5.2rem, is declared in the base with two
    classes, and the mobile override is `.h1` with one. Specificity means the
    desktop size always wins, so the blog title renders at 83px on a phone.
  */
  .h1.mob {
    font-size: 2.25rem !important;
    line-height: 1.1 !important;
  }

  /*
    `.right_blog-wp` keeps `justify-content: space-between` and `padding-left:
    44px` from the desktop rule when it flips to a column, so each post card
    pushes its title and excerpt to opposite ends of a tall box.
  */
  .right_blog-wp {
    justify-content: flex-start !important;
    padding-left: 0 !important;
  }
}

/*
  The blog's featured post, and the "Latest" heading beside the article list.
  Both are pulled left by desktop negative margins that no breakpoint resets:

    .right_blog-content   margin: 0 -31px 0 -80px — a bleed against a padded
                          container on desktop. In the stacked mobile layout
                          there is nothing to bleed into, and because negative
                          margins add room in a flex row the card also grows
                          111px wider than its container: 468px inside 357px,
                          starting 63px off the left edge. That is the first
                          word of every headline cut in half.
    .body_sb.blog         margin-left: -190px, at no breakpoint reset, on the
                          blog and all seven category pages.

  This is what `overflow-x: hidden` on the page wrapper was hiding. The page
  did not scroll sideways, so nothing looked wrong to a scrollWidth check —
  the content was simply cut off and unreachable. scripts/check-layout.mjs now
  measures elements rather than trusting scrollWidth, which is how these were
  finally found.
*/
@media screen and (max-width: 991px) {
  .right_blog-content,
  .body_sb.blog {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/*
  A net against horizontal overflow, in case something escapes that the layout
  check has not caught.

  `clip`, not `hidden`, and the difference is not cosmetic: `overflow-x: hidden`
  makes the element a scroll container, and a scroll container is what
  `position: sticky` resolves against. The home page's mobile "Apply for a
  Call" bar is `position: sticky; bottom: 0` inside this wrapper, so the moment
  this rule said `hidden` the bar stopped pinning to the viewport and became a
  stray band sitting below the footer at the very end of the page. `clip`
  clips without creating a scroll container, and sticky keeps working.
*/
@media screen and (max-width: 767px) {
  .page-wrapper-blog,
  .page-wrapper {
    overflow-x: clip;
  }

  .banner-wp,
  .banner_bt-wp {
    max-width: 100% !important;
  }
}


/*
  Blog post pages. The article body is a code embed, and the embed wrappers
  carry desktop geometry with no mobile override at all:

    .code-embed-14  padding: 0 120px   — 240px of gutter on a 414px screen
                                         leaves 174px for the article, which is
                                         why posts read one word per line
    .code-embed-11  width: 70%
    .code-embed-10  margin: 0 -20px    — negative, so it pushes past the edge

  The article inside `.code-embed-14` brings its own `padding: 3rem 1.5rem`,
  so dropping the outer padding gives it correct gutters rather than none.
*/
@media screen and (max-width: 767px) {
  .code-embed-14 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .code-embed-11 {
    width: 100% !important;
  }

  .code-embed-10 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .page-wrapper-bloginside {
    overflow-x: clip;
  }
}

/*
  LinkedScore — the first layout bugs found by scripts/check-layout.mjs rather
  than by someone opening the page on a phone, which is fitting: /linkedscore
  is linked from nowhere, so nobody ever had.

  The page is built almost entirely on fixed pixel widths — 900px, 852px,
  800px, 700px — with resets only below 479px, and several with no reset at
  all. On a 390px screen it ran 377px past the edge; at 768px, twenty separate
  elements were wider than the viewport.

  `max-width` rather than `width`, so the deliberate narrow measures below
  479px (`.waves---subtitle-2` is 250px there on purpose) survive and only the
  widths that do not fit are capped. Scoped to `.body-4`, which is
  LinkedScore's body class and nothing else's — several of these class names
  are shared with the post pages, where they behave.
*/
@media screen and (max-width: 991px) {
  .body-4 .centered-heading-copy,
  .body-4 .waves---subtitle-2,
  .body-4 .div-block-36,
  .body-4 .blog_borm-conten,
  .body-4 .banner-txt-copy-copy,
  .body-4 .banner-txt-copy-copy-copy,
  .body-4 .body_1-copy,
  .body-4 .body_2-copy,
  .body-4 .form-block-2-copy-copy,
  .body-4 .form-copy,
  .body-4 .heading-4-copy-copy-copy,
  .body-4 .text-block-11,
  .body-4 .section-2,
  .body-4 .tex17,
  .body-4 .waves---section-hero-primary-2,
  .body-4 .waves---section-hero-primary-2-copy,
  .body-4 .waves---main-container-3,
  .body-4 .waves-grid-hero-2,
  .body-4 .waves-content-hero-4,
  .body-4 .waves---mega-heading-2,
  .body-4 .waves---mega-heading-2-copy,
  .body-4 .waves---mega-heading-2-copy-copy {
    max-width: 100% !important;
  }

  /*
    `.superscript` is `position: relative; left: -62px` below 991px, which on
    a desktop-width column is a nudge and on a tablet takes the first letter
    of "Pay only for what you process." off the screen.
  */
  .superscript {
    left: 0 !important;
  }
}

/*
  The newsletter band at the foot of the home page.

  `.newsletter-section` is `padding: 13.75rem 0 17.5rem` with no mobile
  override — 220px above the headline and 280px below the form on a 390px
  screen. That space is not decoration by accident: `.stair-bottom` is a
  16.25rem staircase pinned to the section's bottom-right corner, stepping the
  lime down into the brown footer, and the padding is the room it needs. On a
  phone the staircase is 230px of a 390px viewport, so the whole thing reads
  as a large empty green field with a brown notch floating in it.

  Scaling the two together keeps the motif and loses the field.
*/
@media screen and (max-width: 767px) {
  .newsletter-section {
    padding-top: 6.5rem !important;
    padding-bottom: 9rem !important;
  }

  .stair-top {
    width: 11rem !important;
    height: 7rem !important;
  }

  .stair-bottom {
    width: 9rem !important;
    height: 7rem !important;
  }
}

/*
  The newsletter block at the foot of every post ("Join 4,000+ RevOps
  professionals…") was painting over the top of the page instead of sitting
  where it belongs.

  `.blog_form-wp-home-copy` is `position: absolute; inset: 0%`, and nothing in
  its ancestor chain is positioned — not `.section_form-blog`, not
  `.container-newsletter`, not the page wrapper. An absolutely positioned box
  with no positioned ancestor resolves against the initial containing block, so
  `inset: 0` means the top-left of the *document*, not of its section. Below
  479px the section is additionally `height: auto`, which with an absolutely
  positioned only child collapses it to nothing, so the section leaves no gap
  behind either.

  Taking it out of the absolute flow puts it back inside its section, which
  then grows to hold it.

  This was first scoped to 991px and below, on the reasoning that the desktop
  rendering should be left exactly as published. That was wrong twice over. The
  bug is the same at every width — nothing about it is a breakpoint problem —
  so on desktop the block painted over the article's own headline, which is
  what David screenshotted. And "as published" was never a reason to keep a
  defect: the published page has it too.

  So the rule is unscoped now. `check-layout` cannot catch this class of bug,
  because nothing leaves the viewport; the two boxes simply occupy the same
  space.
*/
.section_form-blog {
  position: relative;
  height: auto !important;
}

.section_form-blog .container-newsletter {
  height: auto !important;
}

.blog_form-wp-home-copy {
  position: static !important;
  inset: auto !important;
  height: auto !important;
}

/*
  The Problem section's card grid.

  `.pain-grid` is a flex item inside `.container-main` and a `1fr` grid inside
  itself, so its floor is its own min-content and nothing caps it at the width
  of its parent. With the published site's short card copy that floor stayed
  under the container and nobody saw it; longer copy raises it past, and the
  grid renders wider than the container, hanging off both edges. The icons,
  titles and bodies all inherit the offset.

  Measured at 390px when this was first found: 342px and inside the container
  with the old copy, 467px and outside it with the new.

  This was scoped to 991px and below, which was the same mistake as the blog
  newsletter block above: the component is content-sized at every width, so the
  cap belongs at every width too. A copy round with longer card titles pushed
  the grid 9px past both edges at 1440, on a rule that only watched phones.
  Capping it at its parent instead of at its content is what actually fixes it,
  and it is a no-op whenever the content already fits.
*/
.pain-grid {
  width: 100%;
  min-width: 0;
}

.pain-grid > * {
  min-width: 0;
}

/*
  The nav link for the page you are on.

  Webflow's runtime stamps `w--current` on any nav link whose href matches the
  current URL, and its base stylesheet paints that #0082f3 — a blue that appears
  nowhere else in this design. No page in the mirror had a nav link to itself
  until /services, so the rule had never fired and nobody had seen it. The
  current page now reads as current the way the rest of the design would say it:
  the same colour, at the weight the eyebrow labels use.
*/
.nav-link.w--current {
  color: var(--black);
  font-weight: 600;
}

/*
  The six service blocks are one list rendered as two copies of the three-card
  process grid, because that is the component the design has. The second copy
  brings its own top padding, which opened a band of empty page between block 03
  and block 04 and read as two unrelated sections. Closing it up makes the six
  read as one list, which is what they are.
*/
#blocks + .section--cream {
  padding-top: 0;
}

/*
  The hero is `height: 100vh` with `overflow: hidden`. Its content needs 854px,
  so on any window shorter than that the bottom is silently cut: at 820px tall
  the last line of each trust label goes ("...against 0% generic", "...before a
  human saw them", "revenue teams served"), and at 760px it loses 64px. A laptop
  at 1440x760 is an ordinary window, not an edge case, and nothing about the
  design wants the hero clipped — 100vh is there to make it fill the first
  screen, which `min-height` does without capping it.

  Measured before and after at 1440x900, 1440x760 and 1780x820: the clip is gone
  at every height and the hero still fills the viewport when there is room.
*/
.section-hero {
  height: auto;
  min-height: 100vh;
}

/*
  ── Legibilidad del texto chico en telefonos ─────────────────────────────
  Una revision pagina por pagina a 390px encontro que la geometria esta sana:
  ninguna de las 26 paginas del mirror hace scroll horizontal, recorta texto ni
  tira errores de JS. Lo que si aparece, y de forma sistematica, es que las
  etiquetas menores cuestan de leer: blancos con alfa de 0.30 a 0.55 sobre el
  marron, grises sobre la crema, y el naranja de marca a 10-13px. Dan entre
  2.0:1 y 4.3:1, por debajo del 4.5:1 que pide el texto chico. Medido
  componiendo el alfa sobre la pila real de fondos.

  Dos intentos fallidos, anotados para no repetirlos:

    1. Pintar por clase sin mirar el fondo. .eyebrow, .path-label, .path-badge
       y .path-case-link viven en secciones claras Y oscuras, asi que
       oscurecerlas las dejaba en 1.0-1.7:1 sobre el marron.
    2. Scopear por seccion, pero incluyendo elementos que no estan sobre el
       fondo de la seccion sino sobre su propia ficha de color: los cuadrantes
       del matrix estan sobre un tile naranja y las pildoras .path-badge traen
       fondo propio. Aclararles el texto los empeoraba — quadrant-title paso de
       2.78 a 2.18. Esos quedan fuera: ahi el problema es el fondo, no el texto,
       y arreglarlo es una decision de diseno.

  Lo que queda toca solo texto que se apoya en el fondo de su seccion. No
  cambia ningun tono: sube el alfa de los blancos apagados a 0.75, lleva los
  grises al --text-secondary que la marca ya define y oscurece el naranja solo
  donde va sobre fondo claro. Acotado a <=991px: en escritorio el mismo texto
  es mas grande, y cambiarle el aspecto es una decision de marca.
*/
@media screen and (max-width: 991px) {

  /* blancos apagados que se apoyan en el fondo oscuro de su seccion */
  .section--dark .path-detail-label,
  .section--dark .insight-meta,
  .section--dark .phase-timeline,
  .section--dark .phase-del-label,
  .section-dark .text-block-12,
  .section-dark .matrix-x-label,
  .section-dark .matrix-y-label,
  .footer-new .footer-link,
  .footer-new .footer-copy {
    color: rgba(255, 255, 255, 0.75);
  }

  /* el naranja de marca sobre fondo claro, solo en texto chico */
  .section_sand .eyebrow:not(.lime),
  .section_sand .head_cl-3,
  .section-marquee .marquee_header {
    color: #93400a;
  }

  /* grises sobre crema -> el secundario que la marca ya define */
  .section_sand .head_cl-2,
  .section_sand .compare_cl-2,
  .section-marquee .marquee-sub,
  .section-hero .trust-label,
  .newsletter-section .newsletter-proof-item,
  .newsletter-section .newsletter-proof-divider,
  .a-label,
  .sig-type,
  .col2-num,
  .col2-label,
  .col3-label,
  .col-num,
  .stage-num,
  .aro-microcopy {
    color: #5A5650;
  }
}

/*
  Las grillas de /about-us — "What We Believe" y "The Founders" — se armaron con
  un style inline de dos columnas. Un inline gana sobre cualquier media query,
  asi que a 390px quedaban dos tarjetas de 163px de ancho con descripciones de
  varias lineas. La regla vive aca, donde puede tener puntos de corte: dos
  columnas cuando hay lugar, una sola en telefono.
*/
#beliefs .criteria-grid,
#founders .criteria-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media screen and (max-width: 767px) {
  #beliefs .criteria-grid,
  #founders .criteria-grid {
    grid-template-columns: 1fr;
  }
}

/*
  Dos medidas que quedaron cortas en telefono, las dos verificadas a 390px.

  Las etiquetas del trust strip del hero salen a 11.52px. Caben — esa fila
  compacta fue justamente lo que las hizo caber — pero once pixeles y medio en
  un telefono es leerlas con esfuerzo. Suben a 12px, que es el piso razonable
  para texto de apoyo, y la fila sigue entrando.

  El boton de la hamburguesa mide 36x36. El minimo recomendado para un objetivo
  tactil es 44x44: por debajo de eso la gente falla el toque y vuelve a
  intentar. El icono no cambia de tamano, cambia el area que responde.
*/
@media screen and (max-width: 991px) {
  .w-nav-button {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/*
  .pain-title venia con `white-space: nowrap`. Un titular que no puede cortar
  linea solo funciona mientras nadie escriba uno largo: en un telefono la
  tarjeta da 278px y "Brand-Aware and Sales-Ready Get the Same Tag" necesita
  418, asi que se recortaban 140px — a 360px, 170. Pasaba en la home, en
  /how-it-works y en /about-us.

  Va SIN media query a proposito. Este es el mismo componente cuya grilla ya
  arregle una vez acotada a 991px, y volvio a romperse a 1440 en cuanto el copy
  crecio. Un titulo que no envuelve no es un problema de ancho de pantalla: es
  un problema que aparece cuando el texto es mas largo que la caja, y eso puede
  pasar en cualquier ancho.
*/
.pain-title {
  white-space: normal;
  overflow-wrap: break-word;
}

/*
  Las 17 paginas del blog pasaron a la nav estandar del sitio. La vieja era
  `position: relative` y vivia adentro de la seccion del hero, asi que ocupaba
  su propio lugar: 86px de alto mas 3.69rem de margen. La nueva es
  `position: fixed`, no ocupa lugar, y la primera seccion arrancaba debajo de
  ella.

  Se le devuelve a esas tres secciones el espacio que la nav ya no reserva. El
  valor es el mismo que tenian antes — el alto de la nav mas el margen — para
  que el ritmo vertical de la pagina no cambie.
*/
.section_hero-blog,
.section_hero-inside,
.section_categories {
  padding-top: calc(5rem + 3.69rem);
}

/*
  El pie ahora lleva nueve enlaces — sumo hello@automaterevops.ai, que solo
  existia en el pie viejo del blog — y `.footer-links` es un flex sin wrap
  salvo dentro de una media query. A 768 no entraban y la pagina se iba 39px
  al costado.

  Va sin media query, por lo mismo que `.pain-title`: una fila que no puede
  cortar se rompe cuando alguien agrega un enlace, no cuando alguien achica la
  pantalla.
*/
.footer-links {
  flex-wrap: wrap;
}

/*
  La tabla comparativa de /how-it-works — "Same Goal. Different Instrument." —
  es una grilla de tres columnas. Por debajo de 480px el CSS publicado le pone
  `overflow: scroll` y `white-space: nowrap` a las celdas, asi que en un
  telefono queda una tira que se arrastra de costado, con celdas de una sola
  linea como "Prioritized accounts with full context: why now, backed by
  evidence".

  check-layout no lo marca, y tiene razon: con overflow scroll la tabla no
  desborda la pantalla. Cabe. Simplemente no se lee, que es la clase de defecto
  que las mediciones de geometria no ven.

  Debajo de 600px la tabla deja de ser tabla y pasa a ser una tarjeta por fila:
  arriba la pregunta, y debajo las dos respuestas, cada una con su etiqueta.
  Las etiquetas salen del CSS y no del HTML — el encabezado de columnas se
  esconde — asi que el marcado no cambia.
*/
@media screen and (max-width: 600px) {
  .compare-table {
    display: block;
    overflow: visible;
  }

  /* la fila de encabezados entera: la celda vacia y los dos titulos de
     columna. Las etiquetas las pone ::before en cada celda. */
  .compare-table > .head_cl-2,
  .compare-table > .head_cl-3 {
    display: none;
  }

  .compare-table > .head_cl-1 {
    white-space: normal;
    margin-top: 1.25rem;
    padding: 0 0 .5rem;
    font-size: 1rem;
    font-weight: 600;
  }

  .compare-table > .compare_cl-2,
  .compare-table > .compare_cl-3 {
    white-space: normal;
    display: block;
    padding: .55rem 0 .55rem .9rem;
    border-left: 2px solid #34262626;
    font-size: .95rem;
  }

  .compare-table > .compare_cl-2::before,
  .compare-table > .compare_cl-3::before {
    display: block;
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .6;
  }

  .compare-table > .compare_cl-2::before { content: "The MQL Model"; }
  .compare-table > .compare_cl-3::before { content: "The Demand Compass"; }
}