/* ============================================================
   Responsive layer — shared mobile rules for every page.
   Imported last from styles.css.

   Why !important: each marketing page carries its own <style>
   block after the stylesheet link, so page rules win on document
   order. These overrides are deliberately narrow — they only
   collapse columns and fit content to the screen below 760px.
   Remove a rule here once the page it targets is consolidated.
   ============================================================ */

@media (max-width: 760px) {
  /* fit the screen */
  .wrap { padding-left: 20px !important; padding-right: 20px !important; }
  img, svg, video, canvas, iframe, table, pre { max-width: 100% !important; }
  body { overflow-x: hidden; }

  /* one column */
  .addons .grid, .adopt .grid3, .adv .cmp, .adv-body, .appwin.split .appbody,
  .bgrid, .blog .grid, .cases .grid, .chaosband .duo, .clips, .cmp, .cmp .row,
  .cmp .rowh, .cols, .cols4, .cs .layout, .dash .layout, .dashwin .darow,
  .demo-sec .two, .ev, .events .grid, .feat .row, .feat2, .fgrid, .fit .grid,
  .flow, .fwrap, .gbox, .hero .inner, .icards, .iggrid, .insights .layout,
  .integ .igbands .igright, .integ .layout, .integ-grid, .kc-grid, .kc-lead,
  .kc-start, .more .grid, .past .grid, .pgrid, .radios.four, .radios.three,
  .rings, .scope, .scores, .site .faux .fcards, .srow, .stats .grid, .steps,
  .story .two, .team .grid, .tgrid, .tuning .layout, .uses .grid, .vgrid,
  .webinars, .why .two, #linkedin .feeds, .cap-grid {
    grid-template-columns: 1fr !important;
  }

  /* two columns — short numeric cells stay side by side */
  .facts .grid, .fbio .stats, .statband .grid, .dashwin .kpis, .fcols {
    grid-template-columns: 1fr 1fr !important;
  }
  /* footer: keep link columns two-up so the footer is not one long stack */
  .fcols { column-gap: 20px !important; row-gap: 26px !important; }
  .fcols .fbrand { grid-column: 1 / -1 !important; }

  /* comparison table: the two cards use subgrid over 7 shared rows, so they
     cannot simply be collapsed — place each in column 1 and let them stack. */
  .adv .cmp { grid-template-columns: 1fr !important; row-gap: 20px !important; }
  .adv .col {
    grid-column: 1 !important;
    grid-row: auto !important;
    display: block !important;
    grid-template-rows: none !important;
  }

  /* SSO row: the label column has a 200px minimum that won't fit beside its
     description on a narrow phone — stack the two instead. */
  .sso-row { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
  .sso-row .sso-l { min-width: 0 !important; }
  .integ-sso .sso-desc { border-left: 0 !important; padding-left: 0 !important; }

  /* Knowledge lifecycle: stacked, the horizontal track and the loop arc read as
     stray marks. Rebuild it as a vertical timeline — a connector in each gap,
     and the loop-back as a dashed return under the last step. */
  .flow { row-gap: 34px !important; padding-bottom: 30px !important; }
  .flow .track { display: none !important; }
  .node + .node::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -34px;
    width: 2px;
    height: 34px;
    margin-left: -1px;
    background: linear-gradient(180deg, rgba(96,160,215,.14), rgba(96,160,215,.5));
  }
  .node p { max-width: 300px !important; }
  .floop {
    display: block !important;
    position: relative !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    height: 96px !important;
    margin: -18px 0 0 24px !important;
    width: calc(50% - 24px) !important;
    border: 2px dashed rgba(255,255,255,.2) !important;
    border-top: 0 !important;
    border-radius: 0 0 26px 26px !important;
    padding: 0 !important;
  }
  .floop::after { display: none !important; }
  .floop .fa { left: -11px !important; top: -13px !important; }
  .floop .fl {
    left: calc(100% + 14px) !important;
    right: auto !important;
    bottom: auto !important;
    top: 50% !important;
    width: 110px !important;
    transform: translateY(-50%) !important;
    text-align: left;
    white-space: normal !important;
    line-height: 1.5;
  }

  /* Testimonials: Joulie sat on top of the carousel dots. Centre her below
     them instead and give the section room. */
  .stories { padding-bottom: 200px !important; }
  .stories .joulie {
    width: 104px !important;
    right: auto !important;
    left: calc(50% - 52px) !important;
    bottom: 26px !important;
  }

  /* Hero wave echo: the trail is staggered 300px per step, so on a phone three
     of the four sat entirely off-canvas. Rescale it to run from behind the CTA
     down to behind Chaos. Note the PNG carries ~15% transparent padding at the
     top, so the box sits ~19px above where the wave actually reads. */
  .hero .wv { width: 210px !important; bottom: 5px !important; right: 40px !important; }
  .hero .e4 { transform: translate(-165px, -102px) !important; }
  .hero .e3 { transform: translate(-110px, -68px) !important; }
  .hero .e2 { transform: translate(-55px, -34px) !important; }
  .hero .e1 { transform: translate(0, 0) !important; }

  /* Hero: Chaos is a still image, so bring it back on phones — parked at the
     bottom-right with room reserved above it so it never sits on the copy. */
  .hero .chaos {
    display: block !important;
    right: -34px !important;
    bottom: -8px !important;
    width: 250px !important;
  }
  .hero .inner { padding-bottom: 196px !important; }

  /* Hero headlines made of two sentences need air between the lines */
  .hero h1 { line-height: 1.22 !important; }

  /* Products comparison: one card per attribute, each value labelled with its
     product, instead of a flat run of rows with the headings hidden. */
  .cmp { border: 0 !important; border-radius: 0 !important; overflow: visible !important; }
  .cmp .row {
    margin-bottom: 14px;
    border: 1px solid var(--line) !important;
    border-radius: 14px;
    background: rgba(255,255,255,.03);
    overflow: hidden;
  }
  .cmp .row > div {
    padding: 13px 16px !important;
    border-left: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
  }
  .cmp .row > div:last-child { border-bottom: 0 !important; }
  .cmp .row > div:first-child {
    background: rgba(255,255,255,.05);
    color: #fff !important;
    font-family: var(--font-display);
    font-size: 15px;
  }
  .cmp .row > div::before {
    display: block;
    content: attr(data-l) !important;
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cw-blue-300) !important;
    margin-bottom: 5px;
  }
  .cmp .row > div:first-child::before { display: none !important; }

  /* Portal: the page hides the document viewer below 1000px. Show it stacked
     under the chat pane instead — it's half the point of the screenshot. */
  .docpane {
    display: flex !important;
    border-left: 0 !important;
    border-top: 1px solid var(--border-subtle) !important;
  }

  /* Chat hero: crop the fake website to its header and hero band, and dock the
     widget to the right inside the same window so it reads as one mock. */
  .site .faux .fcards { display: none !important; }
  .site .body { height: auto !important; }
  .widget {
    position: static !important;
    width: 92% !important;
    right: auto !important;
    bottom: auto !important;
    margin: 14px 0 0 auto !important;
  }
  .widget .wbody { height: auto !important; min-height: 190px; }

  /* Integration tiles (Chat "your knowledge & live systems", Voice "works with
     your phone stack"): stacked full-width squares lost the sense of a set.
     Compact horizontal chips, two per row, keep it reading as a collection. */
  .iggrid {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
    gap: 8px !important;
  }
  .igcell {
    aspect-ratio: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px;
    padding: 10px 12px !important;
    text-align: left;
  }
  .igcell .g { width: 30px !important; height: 30px !important; flex: none; }
  .igcell .g svg, .igcell .g i { width: 16px !important; height: 16px !important; }
  .igcell .g.logo img { width: 20px !important; height: 20px !important; }
  .igcell .nm { font-size: 12.5px !important; }
  .integ .igbands .igright { gap: 24px !important; }

  /* Integration tiles on Industries and Portal: same chip treatment as Chat */
  .integ-grid { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important; gap: 8px !important; margin-top: 32px !important; }
  .itile { gap: 10px !important; padding: 10px 12px !important; border-radius: 12px !important; }
  .ilogo { width: 30px !important; height: 30px !important; border-radius: 8px !important; }
  .ilogo img { width: 20px !important; height: 20px !important; }
  .itile .nm, .itile span:last-child { font-size: 12.5px !important; }

  /* Case-study KPIs: "30,000" was breaking mid-number */
  .ccard .kpis { gap: 18px !important; flex-wrap: wrap; }
  .ccard .kpi .n { font-size: 21px !important; white-space: nowrap; }

  /* Featured pull-quotes shouldn't fill the screen */
  .qbox q { font-size: 19px !important; line-height: 1.45 !important; }
  .fbox q { font-size: 16.5px !important; line-height: 1.55 !important; }
  .slide q { font-size: 16.5px !important; line-height: 1.55 !important; }
  .tcard.lead .qt { font-size: 16.5px !important; line-height: 1.55 !important; }
  .feature .qmark { font-size: 200px !important; }

  /* Carousel arrows sat on top of the quote text — move them down to flank
     the dots instead. */
  .quotebox .nav { top: auto !important; bottom: 0 !important; }
  .quotebox .nav.prev { left: 0 !important; }
  .quotebox .nav.next { right: 0 !important; }
  .dots { margin-top: 24px !important; position: relative; z-index: 1; gap: 12px !important; }

  /* Keep the dots visually small — the 44px touch area is an invisible overlay
     rather than an inflated dot. */
  .dots button {
    min-height: 0 !important;
    min-width: 0 !important;
    width: 9px !important;
    height: 9px !important;
    position: relative;
  }
  .dots button.on { width: 22px !important; }
  .dots button::after {
    content: "";
    position: absolute;
    top: -18px;
    bottom: -18px;
    left: -9px;
    right: -9px;
  }

  /* Blog: the featured post was a row — text squeezed left, wave tile alone on
     the right. Stack it with the tile as a small badge above the headline. */
  .cards .card[style*="flex-direction:row"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 26px 22px !important;
  }
  .cards .card[style*="flex-direction:row"] > span:last-child {
    order: -1;
    width: 72px !important;
    height: 72px !important;
  }
  .cards .card[style*="flex-direction:row"] > span:last-child img { width: 44px !important; }
  .cards .card[style*="flex-direction:row"] h3 { font-size: 22px !important; }

  /* long URLs and email addresses must not push the page wide */
  a, p, li, td, dd, code { overflow-wrap: anywhere; }

  h1 { font-size: clamp(32px, 8.5vw, 40px) !important; line-height: 1.12 !important; }
  h2 { font-size: clamp(27px, 7vw, 32px) !important; line-height: 1.16 !important; }
  h3 { font-size: clamp(19px, 5vw, 22px) !important; }
  .sec-head h2, .mbox h2, .chaosband .chead h2 { font-size: clamp(27px, 7vw, 32px) !important; }
  .quote .qmark { font-size: 200px !important; }

  /* touch targets — CLAUDE.md rule 6. Site CTAs use several class names,
     so the real offenders are listed explicitly (footer links are the bulk). */
  a.btn, .btn, button, [role="button"], input, select, textarea {
    min-height: 44px !important;
  }
  a.btn, .btn, button, [role="button"] { min-width: 44px !important; }
  a.btn, .btn { display: inline-flex !important; align-items: center; justify-content: center; }
  /* footer column links are block-level lists — keep each on its own row */
  .fcol a, .fcols a {
    display: flex !important;
    align-items: center;
    min-height: 44px !important;
  }
  /* these are genuinely inline runs — pad them without breaking the row */
  .bb .go, .ac .more, .nav .brand, .nav-right .demo, .foot-base a,
  .crumbs .row a {
    display: inline-flex !important;
    align-items: center;
    min-height: 44px !important;
    min-width: 44px !important;
  }
}

@media (max-width: 480px) {
  /* the dashboard tab strip is a single nowrap line that exceeds narrow phones */
  .dashwin .dtabs { flex-wrap: wrap !important; flex: 0 1 auto !important; justify-content: center; }

  .facts .grid, .fbio .stats, .statband .grid {
    grid-template-columns: 1fr !important;
  }
  /* narrow phones: footer stays two-up, labels tighten instead of stacking */
  .fcols { grid-template-columns: 1fr 1fr !important; column-gap: 14px !important; }
  .fcol h3 { font-size: 11px !important; }
  .fcol a, .fcols a { font-size: 13.5px !important; }
  .wrap { padding-left: 16px !important; padding-right: 16px !important; }
}

@media (max-width: 640px) {
  /* dashboard KPIs read as one grouped panel, not four stacked cards */
  .dashwin .kpis { grid-template-columns: 1fr 1fr !important; gap: 0 !important; background: var(--cw-gray-50) !important; border: 1px solid var(--border-subtle) !important; border-radius: 10px !important; overflow: hidden !important; }
  .dashwin .kpi { background: transparent !important; border: 0 !important; border-radius: 0 !important; border-right: 1px solid var(--border-subtle) !important; border-bottom: 1px solid var(--border-subtle) !important; }
  .dashwin .kpi:nth-child(2n) { border-right: 0 !important; }
  .dashwin .kpi:nth-child(n+3) { border-bottom: 0 !important; }
}