/*
  claude-mobile-2.css — mobile feedback round 2 for claude-merged.html.
  Loads LAST (after claude-final.css). Every rule is scoped ≤767px
  (nav at ≤760 to match the existing nav breakpoint); desktop untouched.

  Scope of this round:
  1. Navbar order: logo … CTA … hamburger (hamburger far right).
  2. Hero flow: one-line centered node labels over centered down-arrows.
  3. Hero delivery lanes: two columns, chevron centered above each entry.
  4. Statement chapter copy centered.
  5. Browser windows: shared card-gap / edge-padding tokens.
  6. Pryor difference: no circle intro on mobile; copy-then-visual beats.
  7. Integrations logos: deliberate 4 + 3 rows.
  8. Integrations chart: website → Pryor → approved experiences spine;
     agent/context rails as standalone supporting blocks below.
  9. Keeper caption: two deliberate lines, anchored to the section.
  Log: claude-mobile-round-2.md
*/

/* ============ 0. Round-2 tokens ============ */

@media (max-width: 767px) {
  :root {
    /* shared browser-window rhythm (item 5) */
    --m2-win-gap: 28px;        /* between cards inside a window */
    --m2-win-pad-top: 22px;    /* window top edge → first card */
    --m2-win-pad-bottom: 34px; /* last card → window bottom edge */
    --m2-win-pad-x: 16px;
  }
}

/* ============ 1. Navbar: hamburger to the far right ============ */

@media (max-width: 760px) {
  .nav-glass {
    grid-template-columns: auto 1fr auto auto;
    gap: 8px;
    /* the CTA + toggle group must not sit against the device edge */
    padding-right: max(6px, env(safe-area-inset-right));
  }

  /* the CTA precedes the toggle visually but follows it in the DOM, so both
     pin to row 1 explicitly or the grid auto-flow wraps the CTA to row 2 */
  .nav-cta {
    grid-row: 1;
    grid-column: 3;
  }

  .claude-nav-toggle {
    grid-row: 1;
    grid-column: 4;
    margin-left: -2px;
  }
}

/* ============ 2. Hero flow: single-line nodes, centered column ============ */

@media (max-width: 767px) {
  .flow-line {
    align-items: center;
  }

  .source-node,
  .agent-node {
    width: auto;
    max-width: 100%;
    justify-content: center;
  }

  .node-label {
    text-align: center;
  }

  /* the three stacked words become one line of copy */
  .node-label strong {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: .42em;
    white-space: nowrap;
    font-size: 11px;
  }

  .node-label strong > span {
    display: inline;
  }
}

/* ============ 3. Hero delivery lanes: two aligned columns ============ */

@media (max-width: 767px) {
  .delivery-lanes {
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
    gap: 14px;
    padding-block: 16px 4px;
  }

  .delivery-lane {
    width: calc(50% - 7px);
    display: grid;
    grid-template-columns: 1fr;
    /* fixed arrow + label rows so both columns share one baseline grid */
    grid-template-rows: 24px 30px auto;
    row-gap: 8px;
    column-gap: 0;
    justify-items: center;
    align-content: start;
    padding-block: 0;
  }

  /* chevron centered on top of its column, pointing into the entry */
  .delivery-lane .endpoint-arrow {
    grid-column: 1;
    grid-row: 1;
    width: 14px;
    height: 24px;
    justify-self: center;
    align-self: end;
  }

  .delivery-lane .endpoint-arrow::before {
    display: block;
    top: 0;
    right: auto;
    bottom: 6px;
    left: 50%;
    width: 1px;
    height: auto;
    border: 0;
    background: linear-gradient(180deg, rgba(var(--paper-rgb), .12), rgba(var(--paper-rgb), .58));
    transform: translateX(-50%);
  }

  .delivery-lane .endpoint-arrow::after {
    top: auto;
    right: auto;
    bottom: 1px;
    left: 50%;
    width: 6px;
    height: 6px;
    border: 0;
    border-right: 1px solid rgba(var(--paper-rgb), .72);
    border-bottom: 1px solid rgba(var(--paper-rgb), .72);
    transform: translateX(-50%) rotate(45deg);
  }

  /* label centered; the long one breaks into two deliberate lines */
  .delivery-lane > .endpoint-category {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    align-self: start;
    max-width: 15ch;
    text-align: center;
    font-size: 11px;
    letter-spacing: .09em;
    line-height: 1.3;
    white-space: normal;
  }

  .delivery-lane > .endpoint-category > span {
    white-space: normal;
  }

  .end-node {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    height: 60px;
  }

  .profile-face {
    justify-content: center;
    gap: 9px;
  }

  .end-badge {
    width: 38px;
  }

  .end-labels strong {
    font-size: 10px;
    letter-spacing: .02em;
  }

  .profile-domain,
  .profile-source {
    font-size: 9px !important;
  }
}

/* ============ 4. Statement chapter: centered copy block ============ */

@media (max-width: 767px) {
  /* the copy block was sized 100vw-36px, wider than its panel, so the whole
     block hung off to the right; fluid widths re-center it */
  .decision-statement-content {
    width: 100%;
    text-align: center;
  }

  .decision-rail[data-motion-style="scroll-highlight"] .decision-rail-title {
    width: 100%;
    margin-inline: auto;
  }

  .decision-rail[data-motion-style="scroll-highlight"] .decision-rail-subheading,
  .decision-rail-subheading {
    width: auto;
    max-width: 52ch;
    margin-inline: auto;
  }
}

/* ============ 5. Browser windows: one shared internal rhythm ============ */

@media (max-width: 767px) {
  .browser-window .browser-content.decision-stops {
    padding: var(--m2-win-pad-top) var(--m2-win-pad-x) var(--m2-win-pad-bottom);
    gap: var(--m2-win-gap);
  }

  /* retire the desktop-era 58px stack offset; the grid gap is the rhythm */
  .browser-content.decision-stops .decision-stop + .decision-stop {
    margin-top: 0;
  }

  /* no scroll-parallax translate on mobile: the edge padding stays exact */
  .browser-content.decision-stops .state-card {
    translate: none;
  }

  /* the "You keep your website" title gets clear air before the window */
  .handover {
    padding: 42px 2px 40px;
  }
}

/* ============ 6. Pryor difference: static two-beat stack ============ */

@media (max-width: 767px) {
  /* circle intro is desktop-only */
  .pryor-difference .pd-intro {
    display: none;
  }

  /* content renders static: no reveal gating, no rise, no fade */
  .pryor-difference .pd-header,
  .pryor-difference .pd-circle,
  .pryor-difference .pd-note,
  .pryor-difference:not(.is-in) .pd-circle,
  .pryor-difference:not(.is-in) .pd-note,
  .pryor-difference:not(.is-in) .pd-circle-glass {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* beat order: copy first, visual below — agents, then signals */
  .pd-note-agents { order: 1; }
  .pd-circle-ink { order: 2; }
  .pd-note-signals { order: 3; margin-top: 26px; }
  .pd-circle-glass { order: 4; }
}

/* ============ 7. Integrations logos: 4 + 3 balanced rows ============ */

@media (max-width: 767px) {
  .pb-logo-horizon {
    max-width: 340px;
    margin-inline: auto;
    justify-content: center;
    gap: 18px 10px;
  }

  .pb-logo-tile,
  .pb-integration-a .pb-logo-tile:nth-child(n) {
    flex: 0 0 72px;
    min-width: 0;
    width: 72px;
  }
}

/* ============ 8. Integrations chart: main spine + supporting blocks ============ */

@media (max-width: 767px) {
  /* main flow: website → Pryor → approved experiences */
  #night-chapter .pb-schema-v3-signal-spine .pb-website-stage { order: 1; }
  #night-chapter .pb-schema-v3-signal-spine .pb-runtime > .claude-conn:first-of-type { order: 2; }
  #night-chapter .pb-schema-v3-signal-spine .pb-pryor-stage { order: 3; }
  #night-chapter .pb-schema-v3-signal-spine .pb-runtime > .claude-conn:last-of-type { order: 4; }
  #night-chapter .pb-schema-v3-signal-spine .pb-output-stage { order: 5; }

  /* the rails leave the arrow flow: their connectors go away */
  #night-chapter .pb-schema-v3-signal-spine .pb-architecture > .claude-conn {
    display: none;
  }

  /* approved experiences: label → straight connector → two columns */
  #night-chapter .pb-schema-v3-signal-spine .pb-output-stage > .claude-conn {
    margin: 12px auto 10px;
    height: 28px;
  }

  #night-chapter .pb-schema-v3-signal-spine .pb-outputs,
  #night-chapter .pb-schema-v3-signal-spine.pb-schema-v3-refined .pb-outputs {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    gap: 10px;
    margin-top: 0;
  }

  /* the refined desktop schema pins each output to explicit grid rows;
     the two-column mobile split needs plain auto placement */
  #night-chapter .pb-schema-v3-signal-spine .pb-output,
  #night-chapter .pb-schema-v3-signal-spine.pb-schema-v3-refined .pb-output:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
    min-width: 0;
    width: auto;
    transform: none;
  }

  /* the same desktop row pins sit on the two components; once the mobile grid
     re-establishes .pb-components, rows 1–2 stayed empty and their gaps counted
     as 24px of nothing under "PRYOR" */
  #night-chapter .pb-schema-v3-signal-spine.pb-schema-v3-refined .pb-component:nth-child(n) {
    grid-row: auto;
  }

  /* supporting blocks below the chart: your agents, then customer context */
  #night-chapter .pb-schema-v3-signal-spine .pb-context-output {
    order: 6;
    margin-top: 44px;
  }

  #night-chapter .pb-schema-v3-signal-spine .pb-context-input {
    order: 7;
    margin-top: 14px;
  }

  /* secondary presence: tighter cards, quieter copy */
  #night-chapter .pb-schema-v3-signal-spine .pb-context-input,
  #night-chapter .pb-schema-v3-signal-spine .pb-context-output {
    padding: 14px 16px;
  }

  /* copy runs the full width of the block (the refined schema caps it at 24ch) */
  #night-chapter .pb-schema-v3-signal-spine .pb-context-copy,
  #night-chapter .pb-schema-v3-signal-spine.pb-schema-v3-refined .pb-context-copy {
    max-width: none;
    font-size: 13px;
    line-height: 1.45;
  }
}

/* narrow phones: the two output columns stay legible at 360 */
@media (max-width: 374px) {
  #night-chapter .pb-schema-v3-signal-spine .pb-output {
    padding-inline: 12px;
  }
}

/* claude-final.css sets .pb-logo-name to 8.5px for the desktop logo row and
   loads after claude-mobile.css, so it silently undid the phone and tablet
   floors declared there. Re-asserted from the sheet that loads last. */
@media (max-width: 767px) {
  .pb-logo-name {
    font-size: var(--m-label);
  }

  /* the open menu is modal; a flick that reaches its edge must not scroll the
     page behind the overlay */
  .claude-nav-sheet {
    overscroll-behavior: contain;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .pb-logo-name {
    font-size: 11px;
  }
}