/* Jerry Labs — Build page layout (build-c card + ADD1). Site tokens and shared classes come from
   site.css; this file only lays out the Build page: the centered hero, the Start pill on the
   field, the typed-example ghost, the six starts and the four steps. Reference:
   bridge/2026-09-28-CW-REF-build-c-desktop.dc.html / -phone.dc.html. */

.build .inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.build .inner h1{max-width:18ch}
.build .inner .lead{max-width:52ch}

/* the field: the shared .door, a touch wider, with a text Start pill instead of the round arrow.
   site.css orders the HOME column (.door order:3, .doors order:4); here the document order stands. */
.build .door{margin-top:36px;width:min(680px,100%);order:0}
.build .door .send{width:auto;height:auto;min-height:44px;border-radius:999px;padding:12px 20px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
/* the typed examples: the home ghost's look, under its own name so the home loop (site.js,
   .door .ghost) never runs here */
.build .door .tghost{position:absolute;left:26px;top:50%;transform:translateY(-50%);color:var(--text-3);font-size:15px;pointer-events:none;white-space:nowrap;overflow:hidden;max-width:calc(100% - 120px)}
.build .door:focus-within .tghost,.build .door.filled .tghost{display:none!important}

/* the chat card and notice centre like the door; chat.css sizes them. chat.css also orders them
   for the HOME column (order:3); here the document order stands, notice right under the door. */
.build .chat{text-align:left;order:0}
.build .chat-notice{order:0;margin-top:6px}

/* Page chat (card 2026-09-28-CW-CARD-page-chat): Web, AI Services and Ops & Growth open like Build, keeping
   their own left-aligned column. The box, its Start pill and its typed examples are Build's (.pchat = those pages).
   The intake form stops showing by default: the chat's fallback opens it (.open), the #start link targets it. */
.pchat .door{margin-top:36px;width:min(680px,100%)}
.pchat .door .send{width:auto;height:auto;min-height:44px;border-radius:999px;padding:12px 20px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.pchat .door .tghost{position:absolute;left:26px;top:50%;transform:translateY(-50%);color:var(--text-3);font-size:15px;pointer-events:none;white-space:nowrap;overflow:hidden;max-width:calc(100% - 120px)}
.pchat .door:focus-within .tghost,.pchat .door.filled .tghost{display:none!important}
.pchat .chat{text-align:left;order:0}
.pchat .chat-notice{order:0;margin-top:6px;text-align:left}
.pchat .door[hidden]{display:none}
.pchat .intake.fold:not(:target):not(.open){display:none}

/* CW relay 2026-09-28 17:40Z: once the chat opens, its card keeps the space above it that the box has (Build and the
   service pages, desktop and phone). */
.build .chat,.pchat .chat{margin-top:36px}

/* Tracy ruling 20:40Z (item 2): Web, AI Services and Ops & Growth center the top section like Build (eyebrow, H1,
   lead, box, privacy line; Build's widths). The rows, the scope note and the intake below keep their place. */
.pchat .inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.pchat .door{order:0}
.pchat .inner h1{max-width:18ch}
.pchat .inner .lead{max-width:52ch}
.pchat .inner>.rows{align-self:stretch;text-align:left}
.pchat .inner>.price,.pchat .inner>.intake{align-self:flex-start;text-align:left}
.pchat .inner>.intake.open{align-self:center}
/* CW 20:45Z: the privacy line sits centered exactly under the box, on all four pages (the box's width, centered). */
.build .chat-notice,.pchat .chat-notice{width:min(680px,100%);text-align:center;align-self:center;padding-left:0}

/* Where people often start */
.build .bstarts{margin-top:56px;width:min(1040px,100%);display:flex;flex-direction:column;gap:18px}
.build .bstarts[hidden]{display:none}
.build .bk{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.build .bgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.build .start{font-family:"Geist",system-ui,sans-serif;text-align:left;font-size:16px;font-weight:300;color:var(--text);padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:var(--surface);cursor:pointer;min-height:44px;transition:border-color .25s}
.build .start:hover{border-color:var(--line-strong)}
.build .start.on{border-color:var(--mint);background:var(--surface-2)}
.build .start:focus-visible{outline:2px solid var(--mint);outline-offset:3px}

/* How it goes */
.build .bsteps{margin-top:64px;width:min(1040px,100%);display:flex;flex-direction:column;gap:20px;text-align:left}
.build .brow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;border-top:1px solid var(--line-strong)}
.build .bstep{padding-top:22px;display:flex;flex-direction:column;gap:8px}
.build .bwrap{display:flex;flex-direction:column;gap:8px}
.build .bnum{font-family:var(--mono);font-size:12px;color:var(--mint)}
.build .bt{font-size:20px}
.build .bstep p{margin:0;font-size:15px;font-weight:300;color:var(--text-2);line-height:1.55}

/* phone (the reference phone artboard: single-column starts, stacked steps, full-width Start) */
@media (max-width:700px){
  .build .inner{text-align:left;align-items:stretch}
  .build .door{flex-wrap:wrap;border-radius:18px;padding:14px;gap:12px}
  .build .door .caret{left:26px;top:31px}
  .build .door .tghost{left:34px;top:31px;transform:none;max-width:calc(100% - 60px);text-overflow:ellipsis;font-size:16px}
  .build .door input{width:100%;flex:none}
  .build .door .send{width:100%}
  .pchat .door{flex-wrap:wrap;border-radius:18px;padding:14px;gap:12px}
  .pchat .door .caret{left:26px;top:31px}
  .pchat .door .tghost{left:34px;top:31px;transform:none;max-width:calc(100% - 60px);text-overflow:ellipsis;font-size:16px}
  .pchat .door input{width:100%;flex:none}
  .pchat .door .send{width:100%}
  .pchat .inner{text-align:left;align-items:stretch}
  /* CW 21:31Z (Tracy): at phone width too, eyebrow, heading and intro are centered on all four pages; the box stays full
     width and everything below keeps its alignment. */
  .build .inner>.eyebrow,.build .inner>h1,.build .inner>.lead,.pchat .inner>.eyebrow,.pchat .inner>h1,.pchat .inner>.lead{align-self:center;text-align:center}
  .build .bstarts{margin-top:44px;gap:12px}
  .build .bgrid{grid-template-columns:1fr}
  .build .bsteps{margin-top:48px}
  .build .brow{grid-template-columns:1fr;gap:0;border-top:0}
  .build .bstep{flex-direction:row;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
  .build .bstep .bnum{padding-top:4px}
  .build .bwrap{gap:4px}
}