/* Developer and Ecosystem section. */
.started.product-section {
  display: block;
  min-height: 0;
  /* Match the Applications section's bottom padding across the compute card. */
  padding-block: clamp(24px, 2.5vw, 40px) clamp(40px, 4.5vw, 64px); /* the foot a step shorter since 2026-11-01 (Nick: "slightly reduce the gap above the community title"); clamp(56px, 6vw, 80px) before */
  /* --anchor-top minus the top padding: the Developer and Ecosystem links land the picker 24px under the header (2026-10-31). */
  scroll-margin-top: calc(var(--anchor-top, 96px) - clamp(24px, 2.5vw, 40px));
}
.started.product-section .panel {
  grid-area: auto;
  align-items: center;
}
.started.product-section .panel > .copy {
  position: static;
  align-self: center;
  padding-top: 0;
}
.started.product-section .panel > .visual {
  min-width: 0;
  align-self: center;
  margin-top: 0;
}
.product-section .product-eyebrow {
  margin: 0 0 8px;
  color: var(--dim);
  font: 11px/1.6 "Geist Mono", monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}
/* Keep the introduction and step copy on exactly the same type scale. */
#start #panel-dev .copy > .lede,
#start #panel-dev .copy > ol > li > span,
#start #panel-agents .copy > .lede,
#start #panel-agents .copy > ol > li > span {
  color: var(--dim);
  font-family: inherit;
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: normal;
}
.product-section .hl-k,
.product-section .hl-kw,
.product-section .light .hl-k,
.product-section .light .hl-kw { color: #D97757; }
#start.product-switcher {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
#start.product-switcher > .picker {
  position: relative;
  grid-area: auto;
  top: 0;
  justify-self: start;
  margin: 0;
  padding: 3px;
  gap: 2px;
}
#start.product-switcher > .picker button {
  padding: 6px 14px;
  font-size: 13px;
  line-height: 18px;
}
#start .product-visual-stage {
  display: grid;
  align-items: start;
  align-self: start;
  width: 100%;
  min-width: 0;
  isolation: isolate;
  scroll-margin-top: var(--anchor-top, 96px);
}
/* Copy on the left, terminal and code windows on the right. */
#start .product-visual-stage > .panel {
  grid-area: 1 / 1;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  justify-items: center;
  gap: 0;
  animation: none;
}
#start .product-visual-stage > .panel[hidden] { display: none; }
#start .product-visual-stage > .panel:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 8px;
  border-radius: 16px;
}
#start .product-visual-stage > .panel > .visual {
  width: 100%;
  margin: 0;
  align-self: center;
}
#start .product-visual-stage > #panel-dev,
#start .product-visual-stage > #panel-agents {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  justify-items: stretch;
}
#start #panel-dev > .copy,
#start #panel-agents > .copy { align-self: start; min-width: 0; padding-top: 24px; }
#start #panel-dev > .visual {
  display: flex;
  flex-direction: column;
  max-width: none;
  gap: 18px;
  padding-block: 0;
}
#start #panel-dev .shot-narrow { width: 78%; min-width: 0; min-height: 0; margin: 0 0 0 auto; padding-bottom: 0; }
#start #panel-dev .win-float { z-index: 1; width: 88%; max-width: 100%; min-width: 0; min-height: 0; margin: -24px auto 0 0; }
#start #panel-dev .tui-hints { flex-wrap: wrap; gap: 4px 16px; }
#start #panel-dev .install code { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; }
#start #panel-agents .shot-narrow { width: 80%; margin: 0 0 0 auto; }
#start #panel-agents .skill-file-art { display: block; aspect-ratio: 1772 / 1480; max-height: 440px; overflow: hidden; }
#start #panel-agents .skill-file-svg { display: block; width: 100%; height: auto; }
#start #panel-agents .win-float { top: 0; z-index: 1; width: 82%; max-width: 100%; margin: -200px auto 0 0; }
#start #panel-agents .mcp-tools { flex-wrap: wrap; }
#start #panel-agents .mcp-search { flex: 1 1 120px; width: auto; }
@media (max-width: 880px) {
  .started.product-section { padding-block: 24px 32px; } /* 40px of foot before 2026-11-01 */
  #start.product-switcher > .picker button { box-sizing: border-box; min-height: 44px; display: inline-flex; align-items: center; } /* the 44px tap target includes the padding since 2026-11-01, so the pill is 52px tall rather than 64 (Nick: "make the ecosystem and developer pills not as tall") */
  /* One column: the copy, then the windows stacked under it. */
  #start .product-visual-stage > #panel-dev,
  #start .product-visual-stage > #panel-agents { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  #start #panel-dev > .copy,
  #start #panel-agents > .copy { width: 100%; max-width: none; min-width: 0; padding-top: 0; }
  /* The windows keep the desktop composition, scaled to the column: the first window on the right at its
     desktop share of the width, the second overlapping it from the other side by the desktop share too.
     Percent margins resolve against the column width, so the overlap shrinks with the screen (Nick
     2026-10-31: "make the connectors and skill container graphics smaller and overlap still like they do
     on the web version"). Both were full width, stacked, with no overlap before. */
  #start #panel-dev .shot-narrow,
  #start #panel-agents .shot-narrow { width: 78%; margin: 0 0 0 auto; }
  #start #panel-dev .win-float { width: 88%; margin: -14% auto 0 0; } /* the desktop's shares and sides: the terminal on the right at 78%, train_rl.py from the left at 88%, tucked under the terminal's foot (Nick 2026-11-01: "the developer section on the mobile website needs the same container resizing as you did on the ecosystem section so it fits better and the containers are the dimensions like they are on the web version"); 74% on the right with a 23% overlap before */
  #start #panel-agents .win-float { width: 76%; margin: -29% auto 0 0; } /* a little narrower than the desktop's 82% share (Nick 2026-10-31: "make it more square dimensions so maybe a little smaller and not as tall") */
  #start #panel-agents .skill-file-art { max-height: none; }
  #start .install { min-width: 0; padding-left: 16px; gap: 8px; }
  #start .install .copy-btn { width: 44px; height: 44px; }
}
@media (max-width: 760px) {
  #start #panel-dev > .visual,
  #start #panel-agents > .visual { gap: 24px; }
  #start #panel-dev > .visual::before,
  #start #panel-agents > .visual::before { inset: -8px 0 -16px; }
  /* The terminal and train_rl.py keep their desktop lines on phones: nothing wraps, and below 640px the
     window contents are scaled down to the narrower windows, the way the connectors window's are below
     (Nick 2026-11-01: "the same container resizing as you did on the ecosystem section so it fits better
     and the containers are the dimensions like they are on the web version"). Before, the terminal's lines
     wrapped it to 455px tall at 375 wide, taller than wide, and the code window scrolled sideways. */
  #start #panel-dev .tui-body { padding: 18px 20px 16px; overflow-wrap: normal; }
  #start #panel-dev .tui-body p { white-space: nowrap; }
  #start #panel-dev .tui-hints { flex-wrap: nowrap; gap: 22px; }
  #start #panel-dev .tui-status { overflow: hidden; } /* the status line is the widest; a narrow terminal cuts its tail, as a real one would */
  #start #panel-dev .tui-brand { gap: 14px; }
  #start #panel-dev .tui-mark { flex: none; }
  #start #panel-dev .tui-word { min-width: 0; max-width: calc(100% - 58px); }
  #start #panel-dev .win-code { padding-inline: 12px; font-size: 12px; overflow: hidden; }
  /* Phones scale the panel titles down with the screen and let the install command wrap inside its bar
     instead of running off the right edge (Nick 2026-10-31: "scale better proportionally"). */
  #start .panel .copy h2 { font-size: clamp(26px, 7.2vw, 32px); }
  #start .install { border-radius: 16px; align-items: flex-start; padding: 10px 8px 10px 14px; }
  #start .install code { white-space: normal; overflow-wrap: anywhere; overflow: visible; font-size: 12.5px; line-height: 1.5; padding-top: 3px; }
  /* The Developer bar's install command stays on one line on phones: its type scales with the screen instead
     of wrapping "sh" onto a second line (Nick 2026-11-01: "sh should be on one line for the code command"); the
     Ecosystem bar's longer MCP command still wraps. */
  #start #panel-dev .install code { white-space: nowrap; overflow-wrap: normal; font-size: clamp(10px, 2.85vw, 12.5px); align-self: center; padding-top: 0; }
  /* The connectors window is about square on phones: its content is scaled down so all five rows fit
     with the toolbar on one line (Nick 2026-10-31: "more square dimensions ... not as tall of a
     container", then "zoom the connectors container out slightly to show all of the connectors"; for an
     hour only three rows showed). The skills graphic is scaled up and cropped at its right and bottom
     edges instead ("zoom the skill file container graphic in slightly"). */
  #start #panel-agents .mcp { zoom: .78; }
  #start #panel-agents .mcp-tools { flex-wrap: nowrap; gap: 6px; }
  #start #panel-agents .mcp-seg span { padding: 4px 8px; }
  #start #panel-agents .mcp-search { flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; }
  #start #panel-agents .skill-file-svg { width: 120%; }
}
/* The Developer windows' contents scale with the phone: each band keeps the terminal's widest regular
   line (the composer's placeholder) and train_rl.py's longest line inside the window at its 78% / 88%
   share of the column, so the windows stay wider than tall as on desktop (482 x 339 and 544 x 257 at
   1440). The window bars stay at full size, as the connectors window's does. (Nick 2026-11-01.) */
@media (max-width: 640px) {
  #start #panel-dev .tui-body, #start #panel-dev .win-code { zoom: .8; }
}
@media (max-width: 540px) {
  #start #panel-dev .tui-body, #start #panel-dev .win-code { zoom: .63; }
}
@media (max-width: 380px) {
  #start #panel-dev .tui-body, #start #panel-dev .win-code { zoom: .58; }
}