/* Card 2 (chat) desktop layout, 1000px and wider. Staged 2026-10-25. Below 1000px nothing here applies: the three
   wrappers are display: contents and the card is the same as before.

   The window sits in a fixed-ratio frame (class cc-43 = 4:3, cc-54 = 5:4 on the section). The frame is as tall as the
   space under the menu allows (minus the "Works with" row), and its width follows from the ratio.
   - Frame at or above the window's native minimum (4:3 720x540, 5:4 700x560): the window lays out at its own size
     with its own 15px type, like today.
   - Frame below that minimum (short windows such as 1024x640): the window keeps its native-minimum layout and is
     scaled down as one piece, so nothing reflows, wraps or clips. Floor: 0.8x (15px text -> 12px). Below the floor
     the card grows past one screen instead.
   - Frame taller than 760px (very large screens): the window is scaled up from its 760px layout, as one piece.
   - The left column (eyebrow, headline, one line) shows only while the window can keep its native minimum beside it
     (or, on short screens, the size it would have anyway). Otherwise the column drops: the headline moves into the
     "Works with" row as a compact line and the eyebrow and line stay for screen readers only.
   The scale is plain CSS: tan(atan2(a, b)) = a / b as a number, rounded to 0.001 so the native band is exactly 1. No script measures anything, so no layout shift. */

.cc-stage, .cc-grid, .cc-frame { display: contents; }
.cc-tags { display: none; }

@media (min-width: 1000px) {
  .chat-sec.cc {
    --cc-t: clamp(8px, 2vh, 24px); --cc-b: clamp(12px, 3vh, 32px);
    --cc-l: 300px; --cc-gap: 48px; --cc-tagh: 44px; --cc-rowgap: 12px; --cc-row: calc(var(--cc-tagh) + var(--cc-rowgap));
    --cc-cap: max(760px, 50svh);
    --cc-colmax: max(480px, 18vw); /* the column never grows past this; on wide screens the pair is centred */
    padding: calc(var(--bar-h) + var(--cc-t)) var(--pad) var(--cc-b); justify-content: flex-start;
  }
  /* Ratio constants. --cc-p = L + gap - r * row: a left inset that turns "does the frame fit beside the column at
     full height?" into the container's own aspect ratio (see the @container rules below). */
  .chat-sec.cc-43 { --cc-r: 1.333333; --cc-ri: .75; --cc-hmin: 540px; --cc-p: 273.333px; }
  .chat-sec.cc-54 { --cc-r: 1.25;     --cc-ri: .8;  --cc-hmin: 560px; --cc-p: 278px; }

  .cc-stage { display: block; flex: none; width: 100%; container: ccstage / size; padding-left: var(--cc-p);
    height: max(calc(100svh - var(--bar-h) - var(--cc-t) - var(--cc-b)), calc(var(--cc-hmin) * .8 + var(--cc-row))); }
  /* Inside the stage: 100cqw = stage width - --cc-p, 100cqh = stage height. */
  .cc-grid { display: grid; height: 100%; margin-left: calc(-1 * var(--cc-p)); width: calc(100% + var(--cc-p));
    /* dropped column (default): the frame uses the full width */
    --cc-h: max(calc(var(--cc-hmin) * .8), min(calc(100cqh - var(--cc-row)), calc((100cqw + var(--cc-p)) * var(--cc-ri)), var(--cc-cap)));
    --cc-w: calc(var(--cc-h) * var(--cc-r));
    grid-template-columns: var(--cc-w); grid-template-rows: var(--cc-tagh) var(--cc-h); row-gap: var(--cc-rowgap);
    justify-content: center; align-content: center; }

  .cc-frame { display: block; grid-column: -2; grid-row: 2; position: relative; width: var(--cc-w); height: var(--cc-h); }
  .cc .cc-frame .win { flex: none; margin: 0; max-width: none; max-height: none; min-height: 0; width: var(--cc-w); height: var(--cc-h); }

  /* "Works with Grok Bot" row: one plain line of text, no box (Josh, 10:22 AM CT). Row height unchanged. */
  .cc-tags { display: flex; grid-column: -2; grid-row: 1; justify-self: end; align-items: center; height: var(--cc-tagh); }
  .cc-with { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1; color: var(--muted); white-space: nowrap; }

  /* Copy, dropped state: the headline is a compact line in the "Works with" row */
  .chat-sec.cc .sec-head { display: block; grid-column: 1; grid-row: 1; align-self: center; justify-self: start; margin: 0; width: auto; max-width: none; }
  .chat-sec.cc .sec-head .label, .chat-sec.cc .sec-head .body { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
  .chat-sec.cc .sec-head .h1 { font-size: clamp(20px, 2.2vw, 26px); line-height: 1; white-space: nowrap; }
}

/* Two columns: the frame fits beside the column at its native minimum, or (short screens) at full height */
@container ccstage (min-width: 794.67px) or (min-aspect-ratio: 4/3) {
  .cc-43 .cc-grid { --cc-h: max(calc(var(--cc-hmin) * .8), min(calc(100cqh - var(--cc-row)), calc((100cqw + var(--cc-p) - var(--cc-l) - var(--cc-gap)) * var(--cc-ri)), var(--cc-cap)));
    grid-template-columns: minmax(var(--cc-l), var(--cc-colmax)) var(--cc-w); column-gap: var(--cc-gap); justify-content: center; }
  .cc-43 .sec-head { grid-row: 1 / span 2 !important; padding-bottom: calc(var(--cc-row) / 2); }
  .cc-43 .sec-head .label, .cc-43 .sec-head .body { position: static !important; width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; white-space: normal !important; }
  .cc-43 .sec-head .label { margin: 0 0 clamp(8px, 1.6vh, 20px) !important; font-size: max(13px, .75vh); }
  .cc-43 .sec-head .h1 { font-size: clamp(32px, min(3.2vw, 5.6vh), max(64px, 3.4vh)) !important; white-space: normal !important; max-width: 11ch; }
  .cc-43 .sec-head .body { margin: clamp(10px, 2vh, 24px) 0 0 !important; font-size: clamp(16px, 1.15vw, max(18px, 1vh)); max-width: 24em; }
}
@container ccstage (min-width: 770px) or (min-aspect-ratio: 5/4) {
  .cc-54 .cc-grid { --cc-h: max(calc(var(--cc-hmin) * .8), min(calc(100cqh - var(--cc-row)), calc((100cqw + var(--cc-p) - var(--cc-l) - var(--cc-gap)) * var(--cc-ri)), var(--cc-cap)));
    grid-template-columns: minmax(var(--cc-l), var(--cc-colmax)) var(--cc-w); column-gap: var(--cc-gap); justify-content: center; }
  .cc-54 .sec-head { grid-row: 1 / span 2 !important; padding-bottom: calc(var(--cc-row) / 2); }
  .cc-54 .sec-head .label, .cc-54 .sec-head .body { position: static !important; width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; white-space: normal !important; }
  .cc-54 .sec-head .label { margin: 0 0 clamp(8px, 1.6vh, 20px) !important; font-size: max(13px, .75vh); }
  .cc-54 .sec-head .h1 { font-size: clamp(32px, min(3.2vw, 5.6vh), max(64px, 3.4vh)) !important; white-space: normal !important; max-width: 11ch; }
  .cc-54 .sec-head .body { margin: clamp(10px, 2vh, 24px) 0 0 !important; font-size: clamp(16px, 1.15vw, max(18px, 1vh)); max-width: 24em; }
}

/* Uniform scale of the window: native layout between --cc-hmin and 760px tall, scaled as one piece outside that. */
@supports (scale: round(tan(atan2(1px, 2px)), .001)) {
  @media (min-width: 1000px) {
    .cc-frame { --cc-n: clamp(var(--cc-hmin), var(--cc-h), 760px); --cc-s: round(tan(atan2(var(--cc-h), var(--cc-n))), .001); }
    .cc .cc-frame .win { width: calc(var(--cc-w) / var(--cc-s)); height: calc(var(--cc-h) / var(--cc-s)); transform: scale(var(--cc-s)); transform-origin: 0 0; }
  }
}

/* Very short screens (<= 620px tall): trim the breathing room above/below the window so the 5:4 floor still fits one screen. */
@media (min-width: 1000px) and (max-height: 620px) {
  .chat-sec.cc { --cc-t: 6px; --cc-b: 10px; }
}

/* Footer trademark line (Counsel, 2026-10-25): its own full-width row under the product and © lines, same quiet footer style. */
.foot-legal .foot-tm { flex-basis: 100%; }

/* Pricing facts: 4 items since the startup-credit line was removed (CTO, 2026-10-25). Even rows instead of a gap. */
@media (min-width: 1100px) { .pricing .facts { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 761px) and (max-width: 1099px) { .pricing .facts { grid-template-columns: repeat(2, 1fr); } }