/* /how-we-work-together: what the working relationship is, where the
   intel lands, who does what, and the shape of what it costs.

   Section order matches src/views/how-we-work-together.ejs.

   REDRAWN 2026-09-21. The page was seven sections and five of them were
   the same shape: a headline, a lead paragraph, and a grid of headed
   paragraphs. It was accurate and it was unreadable, and Rex's note was
   that it did not make him want to read it. The diagnosis was that this
   was the thinnest page on the site in structural vocabulary: not one
   panel, card, figure, bar, pill or table anywhere on it, so covering
   the words left one teal rule, three numerals and a lot of hairlines.
   That fails DESIGN.md's own Cover The Words Rule.

   The fix is not decoration. Every section on this page has a real
   shape, and the old page drew all of them the same way. So:

     month one      a sequence     numbered steps (the shared component)
     where it lands a split        two cards, and the mapping line under
     who does what  a division     two columns with the rule between
     what it costs  a pair         two drivers, then one quiet paragraph

   Four devices instead of one repeated five times, and every one comes
   out of what the section actually says rather than out of a chart.
   Nothing here borrows the community-bank example, which is not this
   page's subject, and nothing here states a figure, because none has
   been published.

   Grounds alternate on every transition now: paper, tint, paper, ink,
   tint, band. It was paper, paper, ink, paper, tint, paper, band, which
   spent two transitions doing nothing.

   Layers on base.css, which supplies the section blocks and their
   grounds, the buttons, the lede, the accent rule, the numbered steps
   and the centered closing block. */

/* ── Hero ───────────────────────────────────────────────────────── */

.tg-hero { padding: 70px 0 76px; }

/* base.css gives .line to h2 only. Same override /what-we-build makes,
   and for the same reason: the two lines are the two halves of the
   division of labor and the break between them is the point. */
.tg-hero h1 .line { display: block; }
.tg-hero h1 .line + .line { margin-top: 0.1em; }

/* Set below the site h1 clamp so each line holds one row on a desktop
   width. At the full size the second line wrapped, which turned a
   two-part sentence into three ragged ones. */
.tg-hero h1 {
  font-size: clamp(33px, 4.5vw, 57px);
  max-width: 20em;
}

.tg-hero-lede { font-size: 19.5px; max-width: 36em; }
.tg-hero-lede + .tg-hero-lede { margin-top: 18px; }

/* ── Month one ──────────────────────────────────────────────────── */

.tg-start h2 { max-width: 14em; }

/* The grid, the numerals and the body type are the shared .steps
   component in base.css, which /plan uses too. All that is local here
   is the hairline the grid hangs under, and the room above it. */
.tg-steps {
  margin-top: 52px;
  padding-top: 44px;
  border-top: 1px solid var(--rule);
}

.tg-steps .step p { max-width: 30em; }

/* What the client has to put in. Pulled out of the three steps because
   it answers a different question from the one they answer: not what
   happens, but what it will cost somebody in hours.

   2px teal, matching .so-rel-rule on /example/the-sources, which is the
   system's treatment for a single pulled-out statement. NOT the 3px
   border, which belongs to the evidence row and means a claim carrying
   a source and a date. Raised as a rule violation on 2026-09-21 and
   kept on Rex's call; recorded in DESIGN.md under the Confirmed Teal
   Rule so nobody raises it a third time. */
.tg-note {
  margin-top: 46px;
  padding-left: 18px;
  border-left: 2px solid var(--teal);
  font-size: 17px;
  line-height: 1.6;
  color: var(--body);
  max-width: 40em;
}

/* ── Where the intel lands ──────────────────────────────────────── */

.tg-lands h2 { max-width: 12em; }

/* Two destinations, so two cards. The page had no card anywhere on it
   before, which is a large part of why it read as a document rather
   than as a page: a card is the system's way of saying "this is a
   thing", and there were no things.

   Cards rather than the hairline-topped columns this section used to
   use, because there are two of them now instead of three and because
   the pair is the argument. Surface white on the paper ground with a
   1px hairline and 12px corners, which is the standard card in
   DESIGN.md. No shadow: this system has none. */
.tg-lands-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 46px;
}
@media (max-width: 900px) {
  .tg-lands-grid { grid-template-columns: 1fr; gap: 18px; }
}

.tg-land {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 26px 28px 28px;
}

.tg-land h3 { margin-bottom: 10px; }
.tg-land p {
  font-size: 16.5px;
  line-height: 1.58;
  color: var(--body);
}

/* The mapping exercise, at its actual size. It had a third of this
   section to itself and read like an ongoing owner; it is a one-time
   field agreement, so it is one quiet line under the pair. Support
   size, muted, behind a hairline that ties it to the two cards above
   rather than letting it float as a new claim. */
.tg-map {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 46em;
}

/* ── Who does what ──────────────────────────────────────────────── */

.tg-work { padding: 78px 0 84px; }
.tg-work h2 { max-width: 16em; }

/* The division of labor, and the one place on the page where the
   layout is the message. Two columns with a rule between them: the
   line down the middle is what the section is about.

   The rule is on the second column rather than as a gap border, so it
   disappears cleanly when the two stack. */
.tg-split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 56px;
  margin-top: 54px;
  padding-top: 44px;
  /* A hairline in --rule vanishes against the dark ground. */
  border-top: 1px solid var(--rule-dark);
}
.tg-split .tg-side + .tg-side {
  padding-left: 28px;
  margin-left: -28px;
  border-left: 1px solid var(--rule-dark);
}
@media (max-width: 900px) {
  .tg-split { grid-template-columns: 1fr; gap: 0; }
  .tg-split .tg-side + .tg-side {
    padding-left: 0;
    margin-left: 0;
    border-left: 0;
    margin-top: 34px;
    padding-top: 34px;
    border-top: 1px solid var(--rule-dark);
  }
}

/* An h3 styled down to the micro role, not a styled <p>. It is
   genuinely the heading for the column under it, so it belongs in the
   outline: without it this section had two lists and nothing naming
   either. Same reasoning as the pricing rows, which were a definition
   list and left that whole section out of the outline. The body face
   and the letter-spacing have to be set explicitly because base.css
   puts every h3 in the display face on negative tracking.

   Muted rather than accented, which is what DESIGN.md specifies for
   this role, and the reason applies exactly here: it names a part of a
   component rather than a section. Teal was the first instinct and it
   would have been wrong, because neither column is a verified fact and
   the Confirmed Teal Rule has no clause for labelling a column.
   --dark-body is muted's equivalent on the ink ground, at 9.27:1. */
.tg-side-label {
  font-family: var(--text);
  font-weight: 600;
  font-size: 11.5px;
  line-height: 1.55;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dark-body);
  margin-bottom: 20px;
}

.tg-side-list { list-style: none; }
.tg-side-list li {
  font-size: 16.5px;
  line-height: 1.58;
  color: var(--dark-body);
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--rule-dark);
}
.tg-side-list li:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

/* ── What it costs ──────────────────────────────────────────────── */

.tg-cost h2 { max-width: 12em; }

/* Two drivers, given the room five equal rows used to share. A reader
   on this section is working out a budget, and the two things that set
   the number should be the two things on the screen. */
.tg-drivers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 44px 48px;
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--rule);
}
@media (max-width: 900px) {
  .tg-drivers { grid-template-columns: 1fr; gap: 34px; margin-top: 40px; }
}

/* A 9px square in ink, not in teal. The teal square in base.css
   (.hub-card-mark) is the capability mark and DESIGN.md records it as a
   named exception to the Confirmed Teal Rule; a driver of the fee is
   neither a capability nor a verified fact, so it does not get to
   borrow either meaning. Ink is the neutral mark and costs nothing. */
.tg-driver-mark {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--ink);
  margin-bottom: 16px;
}

/* Title card, 22px Outfit 700: the step above the plain 20px h3 the
   rest of the page uses, because these two headings carry the section
   rather than sitting inside it. A documented role, not a stray. */
/* Title card: 22px Outfit 700 on 1.25. The line height is set
   explicitly rather than inherited, because base.css gives every h3
   1.26 and the two-line floor below is computed off 1.25. Left
   inherited, a two-line heading came out 55.44px against a 55px floor
   and the pair sat half a pixel out of true. 1.25 is also what the role
   specifies, so the alignment fix and the type ramp agree. */
.tg-driver h3 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 10px;
  max-width: 18em;
}
/* One heading runs to two lines and the other to one, which started the
   two bodies at different heights and made a deliberate pair look
   accidental. 2.5em at 22px on 1.25 is exactly two lines, so both
   headings occupy the same band. Scoped to the two-column layout: once
   they stack there is nothing to align and the floor would only add
   dead space. If either heading ever runs to three lines this stops
   binding rather than clipping. */
@media (min-width: 901px) {
  .tg-driver h3 { min-height: 2.5em; }
}
.tg-driver p {
  font-size: 16.5px;
  line-height: 1.58;
  color: var(--body);
  max-width: 32em;
}

/* Everything else that is true of the fee, in one paragraph instead of
   three more rows. Inset on the surface ground so it reads as a note
   about the pair above rather than as a third driver. */
.tg-cost-foot {
  margin-top: 44px;
  padding: 24px 26px 26px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  max-width: 54em;
}
.tg-cost-foot p {
  font-size: 16.5px;
  line-height: 1.58;
  color: var(--body);
}

/* What the fee covers, which is the line the section closes on, so it
   keeps a size of its own rather than being tucked under the note as a
   footnote. Scoped through the parent so it outranks .tg-cost-foot p on
   specificity rather than on !important.

   This was .tg-compare, and it carried a sentence nominating research
   and analyst spend as the thing to measure the fee against. Cut on
   2026-09-21: see the note on `together.cost.covers` in the seed file
   and the corrected entry in PRODUCT.md. */
.tg-cost-foot .tg-covers {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
}

/* ── Closing ────────────────────────────────────────────────────── */

/* The centering is .cta-inner in base.css. Only the two measures are
   local, because how wide this page's headline and paragraph should run
   is a decision about this page's copy. */
.tg-cta h2 { max-width: 16em; }
.tg-cta .lede { max-width: 42em; }