/* AgentRoom, in the services pages' language: a split hero beside the app
   icon, then hairline panels and rows rather than floating cards. */

.agent-room h1, .agent-room h2, .agent-room .button-link { hyphens: auto; }

.agent-room > section + section { margin-block-start: var(--section-space); }
.agent-room > .agent-room-closing { margin-block-end: var(--section-space); }

/* Hero: copy on the left and the icon on a dot field to its right. Narrow
   screens stack the icon under the copy. */
.agent-room-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: 2.5rem clamp(2rem, 5vw, 4.5rem);
  padding-block: clamp(2.5rem, 6vw, 5rem) 0;
}
.agent-room-hero .hero-copy { margin: 0; text-align: start; }
.agent-room-hero h1 { max-inline-size: 18ch; font-size: clamp(2.5rem, 4.6vw, 4.25rem); line-height: 1.04; letter-spacing: -.045em; }
.agent-room-hero .intro { max-inline-size: 40ch; margin: 0; font-family: var(--font-ui); font-size: clamp(1.0625rem, 1.8vw, 1.25rem); }
.agent-room-hero .actions { justify-content: flex-start; margin-block: 2rem 0; }

.agent-room-kicker { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; color: var(--ink-soft); font-size: .9375rem; font-weight: 600; }
.agent-room-kicker span { color: var(--line-strong); }

.agent-room-requirements { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 2rem 0 0; padding: 1.25rem 0 0; border-block-start: 1px solid var(--line); color: var(--ink-soft); font-size: .9375rem; list-style: none; }

.agent-room-stage {
  gap: 1.5rem;
  margin: 0;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 3vw, 2rem) clamp(1rem, 2.5vw, 1.5rem);
  border: 1px solid var(--line);
  background-color: var(--canvas);
  background-image: radial-gradient(var(--line) 1px, transparent 1.5px);
  background-size: .875rem .875rem;
}
.agent-room-stage img { display: block; inline-size: min(100%, 20rem); block-size: auto; }
.agent-room-stage figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 2rem; justify-self: stretch; color: var(--ink-soft); font-size: .875rem; }
.agent-room-stage figcaption span:first-child { color: var(--ink); font-weight: 650; }

/* A section's heading and intro, left-aligned above its panel. */
.section-heading { max-inline-size: 46rem; margin-block-end: 2.5rem; }
.section-heading h2 { margin: 0 0 1rem; font-size: var(--type-section-heading); line-height: 1.08; letter-spacing: -.04em; text-wrap: balance; }
.section-heading p { max-inline-size: 52ch; margin: 0; color: var(--ink-reading); font-size: clamp(1.0625rem, 1.8vw, 1.25rem); line-height: 1.6; }

/* Numbered cells share one label: a muted position or value above the heading. */
.cell-label { margin: 0 0 2rem; color: var(--accent); font-size: .9375rem; font-weight: 650; font-variant-numeric: tabular-nums; }

/* Two apps: the Mac and the Vision Pro as line drawings, each over its app,
   with requests and live events flowing between them. The Mac, which holds
   the work, sits on the surface with the accent rule. */
.piece-map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, .8fr) minmax(0, 1fr); align-items: stretch; gap: 0 clamp(1rem, 2.5vw, 2rem); }
.piece-device { overflow: clip; border: 1px solid var(--line); border-radius: var(--radius-feature); }
.piece-device-mac { position: relative; background: var(--surface); }
.piece-device-mac::before { content: ""; position: absolute; z-index: 1; inset: -1px -1px auto; border-block-start: 3px solid var(--accent); }
.device-stage {
  display: grid;
  place-items: center;
  block-size: 11rem;
  border-block-end: 1px solid var(--line);
  background-color: var(--canvas);
  background-image: radial-gradient(var(--line) 1px, transparent 1.5px);
  background-size: .875rem .875rem;
}
.device-icon { inline-size: 10rem; block-size: auto; overflow: visible; }
.device-body { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.device-band { fill: var(--line); stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.device-glass { fill: var(--surface-accent); stroke: var(--line-strong); stroke-width: 1.5; }
.device-mark { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.device-mark-block { fill: var(--accent); }
.device-copy { padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2rem); }
.device-copy .cell-label { margin-block-end: 1.25rem; }

/* Flows: dashed lines with an arrowhead, level with the device drawings. The
   dashes travel in each flow's direction unless motion is reduced. */
.piece-flows { display: grid; align-content: center; align-self: start; gap: 1.25rem; min-block-size: 11rem; }
.flow-label { margin: 0; color: var(--ink-soft); font-size: .875rem; text-align: center; }
.piece-flows ul { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.piece-flow { display: grid; gap: .15rem; }
.flow-to-mac { text-align: end; }
.flow-line { position: relative; display: block; block-size: 2px; margin-block-end: .6rem; background: repeating-linear-gradient(90deg, var(--accent) 0 8px, transparent 8px 14px); }
.flow-line::after { content: ""; position: absolute; inset-block-start: 50%; inline-size: .75rem; block-size: .75rem; translate: 0 -50%; background: var(--accent); }
.flow-to-headset .flow-line::after { inset-inline-end: -2px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.flow-to-mac .flow-line::after { inset-inline-start: -2px; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.flow-direction { color: var(--accent-strong); font-size: .875rem; font-weight: 650; }
.flow-what { color: var(--ink); font-size: 1rem; line-height: 1.4; }
.flow-via { color: var(--ink-soft); font-size: .875rem; }

@media (prefers-reduced-motion: no-preference) {
  .flow-to-headset .flow-line { animation: flow-forward 900ms linear infinite; }
  .flow-to-mac .flow-line { animation: flow-back 900ms linear infinite; }
}
@keyframes flow-forward { to { background-position: 14px 0; } }
@keyframes flow-back { to { background-position: -14px 0; } }
@keyframes flow-down { to { background-position: 0 14px; } }
@keyframes flow-up { to { background-position: 0 -14px; } }

.device-copy h3, .capability-grid h3 { margin: 0 0 .6rem; font-size: 1.25rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.3; }
.device-copy p:not(.cell-label), .capability-grid p:not(.cell-label) { margin: 0; color: var(--ink-reading); font-size: 1rem; line-height: 1.65; }

/* Why: the heading holds the left column and the argument reads down the right. */
.agent-room-why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1.5rem clamp(2rem, 5vw, 4.5rem); padding-block: clamp(2rem, 4vw, 3rem); border-block: 1px solid var(--line); }
.agent-room-why h2 { margin: 0; font-size: var(--type-section-heading); line-height: 1.08; letter-spacing: -.04em; text-wrap: balance; }
.agent-room-why-body p { max-inline-size: 58ch; margin: 0; color: var(--ink-reading); font-family: var(--font-reading); font-size: clamp(1.0625rem, 1.8vw, 1.25rem); line-height: 1.6; }
.agent-room-why-body p + p { margin-block-start: 1.25rem; }
.agent-room-why-body .agent-room-trade-off { padding-inline-start: 1rem; border-inline-start: 3px solid var(--accent); color: var(--ink); font-family: var(--font-ui); font-size: 1.0625rem; font-weight: 600; }

/* Capabilities: a two-by-two panel of cells. */
.capability-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; overflow: clip; border: 1px solid var(--line); border-radius: var(--radius-feature); list-style: none; }
.capability-grid li { padding: clamp(1.5rem, 3vw, 2.25rem); }
.capability-grid li:nth-child(even) { border-inline-start: 1px solid var(--line); }
.capability-grid li:nth-child(n + 3) { border-block-start: 1px solid var(--line); }

/* Agents: hairline rows, each runner's buddy beside its name and what
   connecting it takes. The tile keeps an accent plate so the black Cursor
   buddy stays visible in dark themes. */
.agent-list { margin: 0; padding: 0; list-style: none; }
.agent-list li { display: grid; grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 2fr); align-items: center; gap: .35rem clamp(1.25rem, 3vw, 2rem); padding-block: 1rem; border-block-start: 1px solid var(--line); }
.agent-list li:last-child { border-block-end: 1px solid var(--line); }
.agent-visual { justify-self: start; inline-size: 6rem; border-radius: var(--radius-panel); background: var(--surface-accent); overflow: clip; }
.agent-visual .spatial-model { background: var(--surface-accent); }
.agent-visual .spatial-fallback { padding: .5rem; box-sizing: border-box; }
/* The tile is too small for the status pill, so it stays for screen readers only. */
.agent-visual .model-status { inset: auto; inline-size: 1px; block-size: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.agent-list h3 { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.5rem); font-weight: 650; letter-spacing: -.025em; }
.agent-list li > p { margin: 0; color: var(--ink-reading); line-height: 1.6; }
.agent-room-footnote { max-inline-size: 58ch; margin: 1.5rem 0 0; color: var(--ink-soft); }

/* Practice: rows between hairlines, each word beside its description.
   Narrow screens stack the description under the word. */
.practice-list { margin: 0; padding: 0; list-style: none; }
.practice-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); align-items: baseline; gap: .5rem clamp(1.25rem, 3vw, 2rem); padding-block: 1.5rem; border-block-start: 1px solid var(--line); }
.practice-list li:last-child { border-block-end: 1px solid var(--line); }
.practice-list h3 { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.5rem); font-weight: 650; letter-spacing: -.025em; line-height: 1.3; }
.practice-list li > p { margin: 0; color: var(--ink-reading); line-height: 1.6; }
.practice-outro { max-inline-size: 58ch; margin: 2rem 0 0; color: var(--ink); font-family: var(--font-reading); font-size: clamp(1.0625rem, 1.8vw, 1.25rem); line-height: 1.6; }

/* Ethos: the stance and the essay it cites. */
.ethos-stance { max-inline-size: 58ch; padding-inline-start: 1.25rem; border-inline-start: 3px solid var(--accent); }
.ethos-stance p { margin: 0 0 1.25rem; color: var(--ink-reading); font-family: var(--font-reading); font-size: clamp(1.0625rem, 1.8vw, 1.25rem); line-height: 1.6; }

.agent-room-closing .actions { justify-content: center; margin-block-start: 2rem; }

@media (max-width: 64rem) {
  .agent-room-hero { grid-template-columns: 1fr; }
  .agent-room-hero .hero-copy { max-inline-size: 44rem; }
  /* The devices stack, so the flows turn to run down to the headset and up to the Mac. */
  .piece-map { grid-template-columns: minmax(0, 1fr); }
  .piece-flows { min-block-size: 0; padding-block: 1.5rem; }
  .piece-flows ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem clamp(1rem, 4vw, 2.5rem); }
  .piece-flow { grid-template-columns: auto minmax(0, 1fr); align-content: start; column-gap: 1rem; text-align: start; }
  .piece-flow > :not(.flow-line) { grid-column: 2; }
  .flow-line { grid-row: 1 / span 3; inline-size: 2px; block-size: auto; min-block-size: 5.5rem; margin: 0 .35rem; background: repeating-linear-gradient(180deg, var(--accent) 0 8px, transparent 8px 14px); }
  .flow-to-headset .flow-line::after { inset: auto auto -2px 50%; translate: -50% 0; clip-path: polygon(0 0, 100% 0, 50% 100%); }
  .flow-to-mac .flow-line::after { inset: -2px auto auto 50%; translate: -50% 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
  .flow-to-headset .flow-line { animation-name: flow-down; }
  .flow-to-mac .flow-line { animation-name: flow-up; }
}

@media (max-width: 48rem) {
  .agent-room-why { grid-template-columns: 1fr; }
  .agent-list li { grid-template-columns: 5rem minmax(0, 1fr); grid-template-rows: auto auto; align-items: end; }
  .agent-list .agent-visual { grid-row: span 2; align-self: center; inline-size: 5rem; }
  .agent-list li > p { align-self: start; }
  .practice-list li { grid-template-columns: 1fr; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability-grid li:nth-child(even) { border-inline-start: 0; }
  .capability-grid li + li { border-block-start: 1px solid var(--line); }
}