/* ============================================================================
   responsive.css — breakpoint overrides. Loaded last so it always wins.
   Breakpoints: 1180 (media goes one column), 1000 (nav collapses),
                900 (tablet), 680 (phone), 430 (small)
   ========================================================================== */

@media (max-width: 1180px) {
  :root { --maxw: 100%; }

  .footer__top { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); row-gap: 34px; }
}

@media (max-width: 1180px) {
  /* ── one column from here down ────────────────────────────────────────────
     Two columns squeeze the media box hard below 1200px: the app window ends
     up shown at half size and its type drops to about 8px, which is the band
     the old screenshots were unreadable in. Flattening here gives the window
     its room back.

     Each media box then gets a max-width, because the opposite problem waits
     on the other side: left to fill a one-column section, a 1000px-wide app
     window is drawn at nearly 1:1 and looks zoomed in next to the others.
     The caps hold every shot at the ~11px apparent type size it has on a wide
     screen — the numbers are worked out in assets/mockups/render.py.      */

  /* the stack flattens into ordinary cards — sticky stacking needs the height */
  .stack-panel { position: static; height: auto; display: block; }
  .stack-panel + .stack-panel { margin-top: 18px; }
  .stack-card {
    grid-template-columns: minmax(0, 1fr);
    transform: none !important;
    box-shadow: none;
  }
  .stack-card__media { min-height: 0; aspect-ratio: 16 / 9.4; }
  .stack-card__media picture,
  .stack-card__media .chip-shot { width: min(100%, 460px); }
  .stack-card__body { padding: 24px 20px 28px; }
  .stack-card__body .h4 { max-width: none; }

  .cta-card { grid-template-columns: minmax(0, 1fr); }
  .cta-card__body { padding: 26px 20px 6px; }
  .cta-card__body .h3, .cta-card__body p { max-width: none; }
  .cta-card__media { min-height: 0; aspect-ratio: 16 / 9; }

  .split, .split + .split { grid-template-columns: minmax(0, 1fr); }
  .split--flip .split__media { order: 0; }
  .split__copy .h4, .split__copy .h3, .split__copy > p { max-width: none; }

  /* width, not max-width: these three are grid items, and `margin: auto` on a
     grid item turns off stretch sizing — with only absolutely-positioned
     children inside, that collapses the box to nothing. */
  .cta-card__media   { width: min(100%, 600px); margin-inline: auto; }
  .split__media .shot { max-width: 620px; margin-inline: auto; }
}
@media (max-width: 1000px) {
  .nav__links { display: none; }
  .nav__signin { display: none; }
  .nav__toggle { display: flex; }
  .nav__inner { display: flex; justify-content: space-between; }   /* back from the 3-column grid */
  .nav__actions { margin-left: auto; }

  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
  .pillars li:nth-child(3) { border-left: 0; }
  .pillars li:nth-child(odd) { border-left: 0; }
  .pillars li:nth-child(even) { border-left: 1px solid var(--line); }

  .integrations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  :root { --nav-h: 64px; }

  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan--featured { order: -1; }

  .contact { grid-template-columns: minmax(0, 1fr); }

  .timeline li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

@media (max-width: 680px) {
  .section { padding-block: 54px; }

  /* At phone width the whole window at once is unreadable whatever you do
     with it, so the frame holds a fixed window instead of a fixed fraction:
     600px wide, pulled 114px left. That lands the app's content column in the
     frame and leaves the navigation rail outside it — on a phone the content
     is worth more than the chrome — and it holds the type at the same size
     whatever the frame is doing, from 680px down to the smallest screen. */
  .cta-card__media .shot__fg,
  .split__media .shot__fg { width: 600px; max-width: none; top: 8%; left: -114px; }
  /* The detail crops give up their frame padding here for the same reason,
     and their frames give up the fixed aspect ratio: at this width the crop
     is taller than a 16:9 box, and a box that will not grow clips it top and
     bottom — which is the exact fault the shots were rebuilt to remove. */
  .stack-card__media { aspect-ratio: auto; min-height: 0; padding: 12px; }
  .section--tight { padding-block: 40px; }

  .h1 { font-size: clamp(32px, 8.4vw, 40px); }
  .h2 { font-size: clamp(28px, 7.6vw, 36px); }
  .h3 { font-size: clamp(25px, 6.8vw, 32px); }
  .h4 { font-size: clamp(21px, 5.6vw, 26px); }

  .hero__cta > .btn, .page-hero__cta .btn { flex: 1 1 auto; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }

  .pillars { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .pillars li { border-left: 0 !important; padding: 24px 0; }
  .pillars li + li { border-top: 1px solid var(--line); }
  .pillars .icon-tile { margin-bottom: 16px; }

  .integrations, .values { grid-template-columns: minmax(0, 1fr); }

  .acc-cols { grid-template-columns: minmax(0, 1fr) !important; }

  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
  .footer__bottom { justify-content: flex-start; }

  .tabs { padding: 5px; }
  .tab { flex: 0 0 auto; }
}

@media (max-width: 430px) {
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta > .btn, .hero__cta .dl { width: 100%; }
  .hero__cta .dl__main { flex: 1; }
  .plan__price { font-size: 36px; }
}

/* pointer-coarse devices get no hover-only navigation */
@media (hover: none) {
  .nav__item:hover > .nav__menu { opacity: 0; visibility: hidden; }
}

/* ════════════════════════════════════════════════════════════════════════════
   THE HOME PAGE, ROUND 3 (Sep 2026) — overrides for sections.css
   ════════════════════════════════════════════════════════════════════════ */

/* a narrower desktop: the text column gives up a little room */
@media (max-width: 1320px) and (min-width: 1181px) {
  .feat { grid-template-columns: minmax(0, 310px) minmax(0, 1fr); }
}

@media (max-width: 1180px) {
  /* the stack flattens (above); each card is text over its picture, and the
     pictures in cards 2 and 3 stack, overlapping a little, instead of
     sitting in fixed corners */
  .feat { grid-template-columns: minmax(0, 1fr); }
  .feat__body { padding: 28px 24px 22px; }
  .feat__body .h4, .feat__body p { max-width: none; }
  .feat__media { display: flex; flex-direction: column; align-items: center; padding: clamp(20px, 4vw, 40px); }
  .shot4--project   { width: min(100%, 640px); }
  .shot4--assistant { width: min(100%, 600px); }
  .shot4--inset     { width: min(78%, 440px); margin-top: -30px; transform: translateX(-14%); z-index: 2; }
  .shot4--dictation { width: min(100%, 520px); transform: translateX(-6%); }
  .type-demo { position: relative; right: auto; bottom: auto; width: min(80%, 380px); margin-top: -26px; transform: translateX(16%); }
}

/* tablet: the bento goes to two columns, the wide tiles across both */
@media (max-width: 1024px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "watch watch"
      "nobot lang"
      "share local"
      "key   key"
      "ins   ins";
  }
}

@media (max-width: 680px) {
  .hero { padding-block: 26px 0; }
  .hero .hero__title { font-size: clamp(34px, 9.4vw, 42px); line-height: 1.06; }
  .hero__title br { display: none; }
  .hero-stage { height: clamp(380px, 60vh, 460px); margin-top: 24px; }
  .pipeline__hub { --hub: 64px; }

  .feat__body { padding: 22px 18px 18px; }
  .feat__body p { font-size: 16px; }
  .chips li { height: 30px; font-size: 13px; }
  .feat__media { padding: 14px; }
  /* phones get the narrower captures (the <source> in each <picture>), one
     under the other, full width */
  .shot4--project, .shot4--assistant, .shot4--dictation, .shot4--inset { width: 100%; transform: none; }
  .shot4--inset { margin-top: 10px; }
  .type-demo { width: 100%; margin-top: 10px; transform: none; }

  /* one column */
  .bento {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "watch" "nobot" "local" "lang" "share" "key" "ins";
    gap: 12px;
  }
  .art { height: 224px; }
  .tile { padding-bottom: 22px; border-radius: 18px; }
  .tile__title { margin-inline: 20px; font-size: 18px; }
  .tile__cap { margin-inline: 20px; font-size: 14.5px; }
  /* the wider pictures are recomposed a little narrower on a phone, so
     they don't have to shrink as far (each stage scales to its tile) */
  .stage--watch { --dw: 404px; }
  .stage--watch .wcall { width: 128px; }
  .stage--watch .wflag__hd b { font-size: 13.5px; }
  .stage--watch .wflag .pill { height: 20px; padding: 0 7px; font-size: 11px; }
  .stage--watch .wcall__panel { height: 84px; }
  .stage--watch .wave { height: 48px; gap: 3px; }
  .stage--watch .wflag { width: 184px; padding: 12px 12px 14px; }
  .stage--watch .wflag__row em { display: none; }
  .stage--watch .wire { width: 10px; margin: 0 5px; }
  .stage--watch .node { width: 50px; height: 50px; }
  .stage--nobot { --dw: 410px; }
  .stage--key { --dw: 340px; }
  .stage--key .spark { display: none; }
  .stage--ins { --dw: 400px; }
  .stage--ins .bars { width: 330px; gap: 9px; }
  .stage--ins .bars i { border-radius: 9px 9px 0 0; }
  .stage--ins .week { left: 4px; top: 12px; }

  .end-cta { padding: 44px 18px 48px; }
  .cta-art { width: 320px; transform: scale(.9); margin-bottom: 14px; }
}
@media (max-width: 680px) {
  :root { --frame: 5px; --frame-r: 14px; }
}

/* integrations (round 6): the two columns stack — words, then the board */
@media (max-width: 900px) {
  .integ__layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .integ__copy .h2 { max-width: 16ch; }
  .integ__copy .lead { max-width: 44ch; }
  .integ__art { max-width: 520px; }
}
@media (max-width: 680px) {
  .integ__layout { gap: 32px; }
  .igrid__cell { border-radius: 24%; }
  .igrid__label { display: none; }
}

/* ── phones: say it with headlines and pictures (17 Oct review) ─────────────
   Feedback from the review: on a phone the page read as a wall of text, and
   people skim. Below 680px every section keeps its heading, its chips and its
   picture; the paragraphs that repeat what the picture shows go, the four
   steps become a 2 × 2 of icons, and the bento keeps its four strongest
   tiles. Desktop is untouched. The film (video.js) carries the long version. */
@media (max-width: 680px) {
  .m-hide { display: none; }

  /* hero: the button pair sits side by side again now it is two short labels */
  .video-btn { white-space: nowrap; }

  /* watchouts: heading, three named kinds, the picture */
  .home-watch .split__copy > p { display: none; }
  .home-watch .feature-list { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .home-watch .feature-list li { gap: 7px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; }
  .home-watch .feature-list b { margin: 0; font-size: 13.5px; }
  .home-watch .feature-list p { display: none; }
  .home-watch .feature-list .icon { margin-top: 1px; width: 15px; height: 15px; }

  /* the three stacking cards: heading, chips, picture */
  .feat__body > p { display: none; }

  /* said → agreed → drafted → checked: four icons in a 2 × 2 */
  .home-loop .section-head .lead,
  .home-loop .pillars p { display: none; }
  .home-loop .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .home-loop .pillars li,
  .home-loop .pillars li + li { padding: 16px; border: 1px solid var(--line) !important; border-radius: 14px; }
  .home-loop .pillars .icon-tile { margin-bottom: 10px; }

  /* bento: the four that sell it, titles only */
  .tile--share, .tile--key, .tile--insights { display: none; }
  .bento { grid-template-areas: "watch" "nobot" "local" "lang"; }
  .tile__cap { display: none; }

  /* integrations: heading, the board, the button */
  .integ__copy .lead,
  .integ__copy .chips { display: none; }
}

/* ── phones: no download control (17 Oct) ──────────────────────────────────
   There are no mobile builds to offer, so on the phone layout, and on any
   touch-only device such as a phone turned sideways or a tablet, the
   platform control and the plan-card download buttons give way to
   "Try Kept Free" (.dl-alt, next to each control in index.html). Desktop is
   unchanged. */
.dl-alt { display: none; }
@media (max-width: 680px), (hover: none) and (pointer: coarse) {
  .dl, [data-dl-simple] { display: none !important; }
  .dl-alt { display: inline-flex; }
}