/* =========================================================================
   Troutwood your-people page
   Same field, same tokens, same rhythm as the homepage. Everything here is
   additive: tokens, primitives, nav, footer, hero, the product shot mount,
   the trust panel and the close all come from tw-system.css. Organised by
   section, in page order.

   This is the one page whose subject is the consumer surface, and the layout
   follows from that. Every other page shows the app three handsets across,
   because on those pages a phone is one exhibit among several. Here the four
   screens are the argument, so each one gets a row of its own at a size where
   the reader can actually read what is on it.
   ========================================================================= */

/* -------------------------------------------------------------------------
   01. The gap
   The same advice twice: how it usually arrives, and how it reads in the app.
   Shown rather than claimed, because "plain words" is the one promise on this
   page that a paragraph of prose cannot make on its own. A page that says it
   writes plainly and then says so in three clauses has argued against itself.

   Two columns of two rather than a single column of four. Four rows stacked
   is a column of small type down the left of the measure, which reads as a
   list of quotations; two by two reads as pairs, which is what they are.
   ------------------------------------------------------------------------- */

.gap__body {
  margin-top: 1.75rem;
  font-size: var(--step-lead);
  line-height: 1.55;
  color: var(--text-secondary);
}

/* The turn in the paragraph, lifted out of the secondary tone the way the
   hero's sub does it: weight and full-strength ink, no second accent colour.
   The sentence either side of it stays where it was. */
.gap__body strong {
  font-weight: 700;
  color: var(--text-primary);
}

/* The line that hands the paragraph over to the pairs. Small and set in the
   page's own ink rather than given the eyebrow's uppercase, because the
   section already carries one eyebrow and a second would read as a new
   section starting rather than as a label on the block below. Bold at
   secondary weight keeps it clear of .plain__from, which is the same size in
   the quietest ink and would otherwise absorb it as a fifth pair. */
.gap__lead-in {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  font-size: var(--step-small);
  font-weight: 700;
  color: var(--text-secondary);
}

/* The list keeps its distance from the paragraph, so when the label takes
   that gap the list closes up under it. */
.gap__lead-in + .plain {
  margin-top: clamp(1rem, 1.75vw, 1.5rem);
}

/* 26rem is chosen against the measure, not against the copy. Three tracks of
   26rem need 80rem and the container holds 71, so this can only ever resolve
   to two or one, which is the whole point: at three the last pair would sit
   alone on a second row and read as an afterthought. */
.plain {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: clamp(1.75rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

/* The hairline is what makes these read as a record of something rather than
   as pull quotes. `align-content: start` so a short pair does not stretch to
   the height of the tall one beside it and float its rule away from its text. */
.plain__row {
  display: grid;
  align-content: start;
  padding-top: clamp(1.25rem, 2vw, 1.75rem);
  border-top: 1px solid var(--rule);
}

.plain__from {
  font-size: var(--step-small);
  line-height: 1.5;
  color: var(--text-tertiary);
}

/* The arrow does the labelling, so neither line needs a tag over it: one is
   set back in the page's quietest ink and the other is marked and lit. Two
   tags on four rows would be eight pieces of furniture around eight
   sentences.

   It is an arrow rather than a rule because a rule only says "this line is
   the important one", and the claim the section is making is directional:
   not this, this instead. The hand-drawn stroke is doing a second job. Every
   other mark on the page is machine-straight, so a line that visibly is not
   reads as somebody having gone through the plan document with a pen, which
   is exactly the act the section is describing. */
.plain__swap {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

/* Height and the pull upward are set against the type, not against the box:
   the tip sits at 37.6 of a 44-unit viewBox, so at 2.6rem the tip lands
   almost exactly on the middle of the first line of .plain__to. */
.plain__arrow {
  width: 1.65rem;
  height: 2.6rem;
  margin-top: -1.44rem;
  overflow: visible;
  color: var(--sage);
}

.plain__arrow path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plain__to {
  font-size: var(--step-body);
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-primary);
  text-wrap: pretty;
}

/* Drawn rather than faded in, and the head lands after the stem, because the
   point of the hand-drawn stroke is the hand. pathLength="1" is what lets one
   dash length cover three paths of different real lengths. */
.reveal-ready .plain__arrow path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 620ms var(--ease-out);
  transition-delay: calc(var(--d, 0) * 80ms + 280ms);
}

.reveal-ready .plain__arrow .plain__arrow-head {
  transition-duration: 300ms;
  transition-delay: calc(var(--d, 0) * 80ms + 780ms);
}

.reveal-ready .plain__row.is-in .plain__arrow path {
  stroke-dashoffset: 0;
}

@media (max-width: 30rem) {
  .plain__swap {
    gap: 0.5rem;
  }

  .plain__arrow {
    width: 1.4rem;
    height: 2.2rem;
    margin-top: -1.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-ready .plain__arrow path {
    stroke-dashoffset: 0;
    transition: none;
  }
}

/* -------------------------------------------------------------------------
   02. The experience
   Four screens, one per row, alternating sides.

   The size is the reason for the layout. A three-up row holds a handset at
   16.5rem, which is enough to recognise a screen and not enough to read one;
   these four screens are carrying line items, interest rates and a payoff
   date, and the page is worthless if the reader has to take the caption's
   word for what is on them. At 21rem the app's own 17pt type lands near 14px,
   which reads.

   Alternating sides rather than a single column of left-hand phones, because
   four identical rows is a slideshow. The shot always sits against a margin
   and the copy always sits inboard of it, so the eye has two positions to
   travel between rather than one to sit still in.
   ------------------------------------------------------------------------- */

.experience__body {
  margin-top: 1.75rem;
  font-size: var(--step-lead);
  line-height: 1.55;
  color: var(--text-secondary);
}

/* Rows are further apart than anything else on the page. Each one is a
   700px-tall object with a shadow under it and four lines of argument beside
   it, and two of those a normal section gap apart read as one strip rather
   than as four separate things being shown. */
.beats {
  display: grid;
  gap: clamp(3.5rem, 8vw, 6.5rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

.beat {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem);
}

/* Stacked, the handset comes down to a size that still leaves room for the
   copy under it without a scroll of its own. The frame centres itself: `.shot`
   is a grid with `justify-items: center`, so nothing here has to place it. */
.beat__shot {
  /* The handset's own width, published on the figure so the birds below can
     be placed against the phone's edges. Stacked, the figure is the whole
     container and the phone is a 17rem block centred in it, so a bird placed
     against the figure would be nowhere near the device. */
  --phone-w: min(100%, 17rem);
  width: 100%;
}

.beat__phone {
  width: 100%;
  max-width: 17rem;
}

.beat__copy {
  max-width: 36rem;
}

/* Aria-hidden in the markup: the numeral is the ordinal of an <li> inside an
   <ol>, so it is already announced. */
.beat__num {
  display: block;
  font-size: var(--step-eyebrow);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--sage-bright);
}

.beat__title {
  margin-top: 0.875rem;
}

.beat__body {
  margin-top: 1rem;
  line-height: 1.65;
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* The buyer's line, on a page whose four beats are otherwise written about
   somebody else. It is set apart rather than folded into the paragraph above
   because it is a change of subject: the paragraph is what the person sees,
   this is what it is worth to the organization reading. Same marked-and-lit
   rule as the plain pairs above, at half the weight, so the two devices read
   as one family and the louder one stays the section that is making the point
   about language. */
.beat__payoff {
  margin-top: 1.625rem;
  padding-left: 1.125rem;
  border-left: 2px solid rgba(103, 188, 124, 0.45);
  font-size: var(--step-small);
  line-height: 1.6;
  color: var(--text-secondary);
  text-wrap: pretty;
}

.beat__payoff-label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: var(--step-eyebrow);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage-bright);
}

/* 62rem is where a 21rem handset, a 3rem gutter and 36rem of copy stop
   fitting side by side inside the measure. Below it the row stacks, which
   costs height and keeps both halves at a size worth reading.

   The row is capped at 62rem, which is 21 + 5 + 36 and nothing else: the
   handset, the widest gutter, and the copy at the width `.beat__copy` already
   sets. Naming the sum rather than letting the copy track run to the measure
   is what keeps the pair together. Left to a bare 1fr the copy would stop at
   its own max-width and leave 144px of dead track between it and the handset
   at full width, which reads as a layout that failed rather than as air.

   So the pair is a fixed block that swings: hard against the left margin, then
   hard against the right, alternating down the section. The gap inside a row
   never changes, and the only thing moving is which margin the row is anchored
   to. Both tracks are named on both variants rather than reordered with
   `order` or `direction`, so the handset lands on exactly the same 21rem
   whichever side it is on, and the DOM order never changes: the reading order
   stays the screen and then the note on it, the way every other figure on this
   site reads. */
@media (min-width: 62rem) {
  .beat {
    grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(3rem, 6vw, 5rem);
    max-width: 62rem;
  }

  .beat__shot {
    grid-column: 1;
    grid-row: 1;
  }

  .beat__copy {
    grid-column: 2;
    grid-row: 1;
  }

  .beat--flip {
    grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
    margin-left: auto;
  }

  .beat--flip .beat__shot {
    grid-column: 2;
  }

  .beat--flip .beat__copy {
    grid-column: 1;
    justify-self: end;
  }

  .beat__shot {
    --phone-w: min(100%, 21rem);
  }

  .beat__phone {
    max-width: 21rem;
  }
}

/* The birds --------------------------------------------------------------
   The FinPulse screen has two birds perched on the node tree. These are the
   same two, off the branch and holding station either side of the handset:
   same silhouette, the capture's own #5f8ee8, and a height that lines up with
   where the perched pair sit inside the screen.

   Placed against `--phone-w` rather than against the figure, because below
   62rem the figure is the whole container and the phone is a 17rem block
   centred in it. `left` puts the box's edge on the handset's edge and the
   negative margin slides it 55% clear, so a bird is mostly outside the device
   and never leaves the container — at the narrow end of the breakpoint the
   page gutter is 30px and the part that hangs out is 24. `translate` is left
   alone for the hover, which is why the offset is a margin.

   The two run at different speeds rather than on a delay. Two birds beating
   in step read as one thing copied; two beating at 0.42s and 0.47s never come
   back into phase and read as two birds. */
.beat__bird {
  --bird-w: clamp(2.25rem, 3.4vw, 3rem);
  position: absolute;
  width: var(--bird-w);
  height: auto;
  overflow: visible;
  pointer-events: none;
  animation: bird-hover var(--bird-hover) ease-in-out infinite;
}

.beat__bird--left {
  --bird-flap: 0.42s;
  --bird-hover: 3.1s;
  top: 34%;
  left: calc(50% - var(--phone-w) / 2);
  margin-left: calc(var(--bird-w) * -0.55);
}

/* Mirrored, so both birds face the screen they came off. `scale` applies
   after `rotate`, so the hover's tilt is mirrored with it and the bird banks
   the right way. */
.beat__bird--right {
  --bird-flap: 0.47s;
  --bird-hover: 3.7s;
  top: 43%;
  left: calc(50% + var(--phone-w) / 2);
  margin-left: calc(var(--bird-w) * -0.45);
  scale: -1 1;
}

.beat__bird-body {
  fill: #5f8ee8;
}

/* A shade up from the body, because a wing in the body's own colour vanishes
   into it at the bottom of the stroke and the bird stops flapping and starts
   pulsing. */
.beat__bird-wing {
  fill: #82a9ef;
  transform-box: view-box;
  transform-origin: 25.5px 13.5px;
  animation: bird-flap var(--bird-flap) ease-in-out infinite;
}

.beat__bird-eye {
  fill: #0e1d14;
}

/* Down fast, up slow, which is the shape of a real wingbeat and the reason
   the two stops are not split evenly: the stroke takes 40% of the cycle and
   the recovery takes 60%. Positive is up — the blade runs up and back from
   the shoulder, so a clockwise turn raises the tip. */
@keyframes bird-flap {
  0%,
  100% {
    rotate: 34deg;
  }

  40% {
    rotate: -22deg;
  }
}

/* Holding station: a slow rise and fall with a little bank in it, so the bird
   is working to stay in one place rather than sitting in mid-air. */
@keyframes bird-hover {
  0%,
  100% {
    translate: 0 0.28rem;
    rotate: -4deg;
  }

  50% {
    translate: 0 -0.28rem;
    rotate: 4deg;
  }
}

/* Flattened, the wing would stop at whichever keyframe the system-wide 0.01ms
   left it on — most likely straight up. The birds stay, with the wing set
   where a bird at rest carries it. */
@media (prefers-reduced-motion: reduce) {
  .beat__bird,
  .beat__bird-wing {
    animation: none !important;
  }

  .beat__bird-wing {
    rotate: -30deg;
  }
}

@media print {
  .beat__bird {
    display: none;
  }
}

/* -------------------------------------------------------------------------
   03. Trust
   The panel itself is the homepage's, unchanged. The homepage runs it with a
   visually-hidden heading and nothing above it, so it needs no top margin
   there; here it sits under a visible eyebrow and title, which is what this
   modifier is for.

   Note for whoever touches this next: the same three lines now exist in
   tw-advisors.css, tw-employers.css, tw-company.css and here. A fourth copy
   is the point at which it belongs in section 15 of tw-system.css beside
   `.trust__panel` itself.
   ------------------------------------------------------------------------- */

.trust__panel--titled {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

/* The four commitments used to open on a 2px accent line; they now open on
   the homepage's icon tile instead. The tile carries --sage-bright by
   default, which is the token every small accent uses on the field. This
   panel is inside the paper band, where --sage is 5.7:1 and passes as a
   foreground on its own, so the glyph keeps the exact green the rule it
   replaced was drawn in rather than shifting a shade off it. */
.trust__icon {
  color: var(--sage);
}