/**
 * Per-integration detail pages — /integrations/{slug}/
 *
 * Loaded ALONGSIDE home-below.css, which owns the tokens and the .sec/.wrap/.shead
 * rhythm. The FAQ is NOT restyled here: it reuses the shared `.tr-faq__*` component,
 * so the homepage, /pricing/, /integrations/ and every detail page run one FAQ.
 *
 * Handle `tr-integration-detail` must be in both SGO exclude lists in functions.php or
 * SiteGround Optimizer rewrites it to a .min.css that does not exist.
 *
 * @package Hello_Elementor_Child
 */

@font-face {
	font-family: 'Besley';
	font-style: normal; font-weight: 400 900; font-display: swap;
	src: url('../fonts/besley-latin-wght.woff2') format('woff2');
}

/* Same flat-colour bleed as /integrations/: a 100vmax box-shadow paints the paper and
   clip-path trims the spread vertically. Neither creates scrollable overflow, which is
   why this is used instead of a 50vw negative margin. */
.tr-below.tr-intd-page {
	max-width: none;
	overflow-x: clip;
	box-shadow: 0 0 0 100vmax var(--paper);
	clip-path: inset(0 -100vmax);
	margin-block: calc(-1 * var(--padding-block-start, 0px))
	              calc(-1 * var(--padding-block-end, 0px));
}

/* ==================================================================
   THE PAGE SETS ITS OWN WIDTH, whatever it is dropped into.

   This is the fix for "local and staging must look identical", and it belongs in code because
   the cause is not in code. The same shortcode renders inside a 1200px container on a
   block-editor page and an 1110px one inside an Elementor container. That cap lives in
   Elementor's Kit, which is a DATABASE record — so it does not travel with a file upload, it can
   differ per environment, and it changes the moment anyone opens the page with Elementor. Every
   layout difference chased between local and staging traced back to those 90px.

   Rather than require all three environments to use the same editor and the same Kit value
   forever, the page now neutralises the cap itself: any Elementor container that CONTAINS this
   page stops constraining it. :has() is supported everywhere this site's visitors are, and the
   selectors name .tr-intd-page specifically, so the hub (.tr-int-page) and every other Elementor
   page on the site are untouched.

   Consequence worth knowing: this page will now be 1200px wide no matter how the page is built,
   so it is safe to create it with either editor and safe if someone opens it in Elementor later. */
.e-con-inner:has(.tr-below.tr-intd-page),
.e-con:has(.tr-below.tr-intd-page) {
	max-width: none; width: 100%;
	padding-inline: 0; margin-inline: 0;
	--width: 100%;
}
.elementor-widget-container:has(.tr-below.tr-intd-page),
.elementor-widget-shortcode:has(.tr-below.tr-intd-page) { max-width: none; }

/* ---------------- HERO: editorial split, product as the artwork ----------------
   Centred hero + centred section headings all the way down is what made the page read
   as a stack of templates. This one is asymmetric: copy left, the product right. */
/* HERO GEOMETRY ON LARGE DISPLAYS.
   Measured at 2400x1300 before changing anything, because "it sinks" and "it should be
   centred" can mean several different things and the numbers said something more specific:

     hero height        840px   (min-height cap)
     content height     599px
     DEAD AIR           241px
     h1 width           441px   at a 2400px viewport

   So the content was not sitting low. It was sitting inside 241px of reserved emptiness,
   in a column that stops growing at 1200px (--maxw) while the display offers 2400 — a
   small island with a lot of air around it, which is what reads as sunken and as generic.
   Two fixes rather than nudging padding:

   1. Less reserved height, so the hero is sized by its content and the section below rises.
   2. The hero, and only the hero, is allowed past --maxw on wide viewports. The product
      visual gets materially larger, which is the thing worth spending a 27-inch screen on.

   Padding is symmetric now, so whatever slack remains is shared equally top and bottom. */
.tr-below .tr-intd-hero {
	/* Back to what worked. min(74svh, 700px) with the content centred: the hero is a comfortable
	   height at every viewport and never has a void in it.

	   The "viewport problem" was never the hero. It appeared the moment the section below it
	   became a CREAM band, because a band has a visible edge — so the fold landed on a colour
	   change and you could see the next section start. Before that the following section was on
	   the same paper ground, so it began on screen and was invisible, which is exactly the
	   behaviour asked for. Two rounds of svh arithmetic were spent on the hero for a problem that
	   lived in the next section's background. */
	min-height: min(74svh, 700px);
	display: grid; align-content: center;
	padding: clamp(34px, 4vw, 60px) 0 clamp(38px, 4.4vw, 64px);
}
/* 0.95/1.05, not 0.8/1.2. At the old ratio the copy column computed to 432px at 1440, and
   the h1 is 56px display serif there — 11 characters per line, which put the new headline on
   FIVE lines. The narrow column was always wrong for type that size; the previous headline
   was just short enough to hide it. The visual keeps the larger share of the growth on wide
   displays, where the wrap override is what actually made it bigger. */
.tr-below .tr-intd__herogrid {
	display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	gap: clamp(32px, 4.4vw, 66px); align-items: center;
}
/* The copy column keeps a readable measure no matter how wide the grid gets. */
.tr-below .tr-intd__herocopy { max-width: 36rem; overflow: visible; }
/* NO HERO-ONLY WIDTH OVERRIDE. Removed, and this is the third attempt at the same mistake
   so it is worth writing down.

   I widened only the hero's .wrap — first to 1380/1520px at two breakpoints, then to
   clamp(1200px, 88vw, 1520px) — to stop the hero looking like a small island on a 27-inch
   display. Every OTHER section on the page stayed at --maxw, 1200px. So on a wide display the
   hero ran up to 320px wider than everything beneath it, and a hero that overhangs the rest of
   the page by 160px a side reads as broken, not as generous.

   Measured at a 1905px viewport with the override in place:

     hero wrap   1520px
     every other section   1200px

   The Elementor pages never showed this, because their container caps everything to 1110px and
   flattened the inconsistency along with the override.

   The page is now one width throughout, the same 1200px every other page on the site uses. If
   the site should be wider on large displays that is a --maxw decision in home-below.css that
   moves every section on every page together, not a per-section exception here. */
.tr-below .tr-intd__herocopy { text-align: left; }

/* Breadcrumb: one quiet line. The bordered capsule it replaces was the first thing on
   the page and competed with the headline, which is not a breadcrumb's job. */
.tr-below .tr-intd__crumbs {
	display: flex; align-items: center; gap: 8px;
	font-family: var(--sans); font-size: .82rem; color: var(--faint);
	margin-bottom: clamp(20px, 2.4vw, 28px);
}
/* A 40px touch target without a 40px box. The breadcrumb link measured 21px tall, which is
   under the WCAG 2.5.8 minimum; the two other short links on the page are inline in a
   sentence and exempt. Padding grows the hit area, the equal negative margin gives the
   layout its 21px back, so nothing moves and nothing else has to shift. */
.tr-below .tr-intd__crumbs a { color: var(--muted); padding: 10px 0; margin: -10px 0; }
.tr-below .tr-intd__crumbs a:hover { color: var(--green-ink); text-decoration: underline; text-underline-offset: 3px; }

/* BOTH marks horizontal. A 312x51 wordmark beside a circular badge read as two
   unrelated objects; matched orientation reads as a partnership. */
/* HEADROOM FOR THE RING.
   The landing ring expands to 2.6x an 18px base, so ~47px, and it is centred on a 2px rail
   inside a flex row whose height is set by the tallest mark: 29px. It therefore overshoots
   its own parent's box by about 9px top and bottom. Hit-testing the ring at 50/56/62/68/74%
   of the loop found it painted at every extreme, so nothing was clipping it outright — but
   at 9px of overshoot it only takes one ancestor anywhere up the tree with a bounded box for
   the bottom of the ring to go. Padding gives it room inside the lockup, the equal negative
   margin gives the layout its 29px back, and overflow is stated rather than assumed. */
.tr-below .tr-intd__lockup {
	display: flex; align-items: center; gap: clamp(14px, 1.8vw, 24px);
	padding-block: 14px; margin-block: -14px;
	margin-bottom: clamp(8px, 1.2vw, 18px);
	overflow: visible;
}
.tr-below .tr-intd__mark {
	display: block; flex: none; background-image: var(--logo);
	background-size: contain; background-position: 0 50%; background-repeat: no-repeat;
}
.tr-below .tr-intd__mark.is-tr      { width: clamp(132px, 15vw, 176px); height: clamp(22px, 2.5vw, 29px); }
/* Sized by the file's own shape, not BambooHR's. The old fixed 166x24 slot was a 6.99:1 box tuned
   for BambooHR's wordmark; QuickBooks (3.67:1), Sage (1.78:1) and hiBob (1:1) all shrank to stamps
   inside it under `contain`. Height is the one constant — wordmarks share an optical height, their
   widths differ by nature — and width derives from --pr, the measured aspect ratio the template
   emits per file. --opt lifts lockups whose glyphs draw small inside their canvas (Intuit stacks
   two lines, so at equal box height its text renders near half size). */
.tr-below .tr-intd__mark.is-partner {
	height: calc(clamp(20px, 2.2vw, 27px) * var(--opt, 1));
	aspect-ratio: var(--pr, 4);
	width: auto;
	max-width: clamp(140px, 16vw, 190px);
}

/* ---- THE HANDOFF ----
   A packet leaving TimeRewards, crossing, and being absorbed by BambooHR.

   Three defects in the previous version, all structural, all measured:

   1. The ring sat on the PARTNER MARK at left:-13px, but the packet stops at the rail's
      right edge. With a 23px flex gap between them the ring rendered 10px ahead of the
      landing point. It now lives INSIDE the rail at left:100%, so the two share a
      coordinate space and cannot drift.
   2. The packet used `margin-left:-4.5px` to centre itself while the trail scaled from
      the true origin, so the dot permanently trailed its own trail by 4.5px. It is
      centred with `translate` now, which costs nothing and aligns exactly.
   3. The ring fired at 44% against an arrival at 38% — 144ms late, which read as lag.
      Both are 48% now, the same instant.

   Easing is per-segment rather than one curve applied to every pair of keyframes. That
   was the other reason it felt unclean: an aggressive ease was being applied to the
   fade-in and the absorb as well as the travel, so the ends snapped. */
.tr-below .tr-intd__join {
	position: relative; flex: none; overflow: visible;
	width: clamp(44px, 5.4vw, 74px); height: 2px;
	background: linear-gradient(to right, var(--line-2), var(--line) 25%, var(--line) 75%, var(--line-2));
	border-radius: 2px;
}
/* The trail. transform-origin stays LEFT for both directions, which is the whole trick: at
   scaleX 0 -> 1 the right edge travels right with the dot, and at 1 -> 0 it travels back left
   with it. One origin, both legs, and the trail's leading edge is always exactly the dot. */
.tr-below .tr-intd__join::before {
	content: ""; position: absolute; inset: 0; border-radius: 2px;
	background: var(--green); opacity: .9;
	transform-origin: left center; transform: scaleX(0);
	animation: tr-intd-trail 3.4s linear infinite;
}
/* The dot. Constant size, constant opacity. Every previous version faded it in, scaled it up
   and dissolved it into an expanding ring, and that ending was what kept reading as sloppy —
   three properties animating through each other at the one moment the eye is on it. */
.tr-below .tr-intd__join::after {
	content: ""; position: absolute; top: 50%; left: 0;
	width: 9px; height: 9px; border-radius: 50%;
	translate: -50% -50%;
	background: var(--green-deep); box-shadow: 0 0 0 3px rgba(95,175,8,.16);
	animation: tr-intd-packet 3.4s linear infinite;
}
/* NO CHEVRONS. I put a small chevron at each end to label the two directions, and they sat at
   exactly the two points the dot travels to and parks on — so the right one collided with the
   dot at rest, and rotating a 5px square 45deg puts its corners ~7px out, which read as
   misaligned and clipped. The reversal itself is the signal; a label on each end was belt and
   braces that cost more than it added. .tr-intd__land stays in the markup as an inert node. */
.tr-below .tr-intd__land { display: none; }

/* The window arrives once: a short rise as the page settles. One-shot, not a loop. */
.tr-below .tr-intd__stage { animation: trintd-enter .55s cubic-bezier(.2,.75,.25,1) both; }
@keyframes trintd-enter {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}
/* The cadence dot breathes on the sync rhythm the caption describes. */
.tr-below .tr-intd__cadencedot { animation: trintd-cadence 2.6s ease-in-out infinite; }
@keyframes trintd-cadence {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: .45; transform: scale(.8); }
}
@media (prefers-reduced-motion: reduce) {
	.tr-below .tr-intd__stage { animation: none; }
	.tr-below .tr-intd__cadencedot { animation: none; }
}
/* The partner side of the handoff carries the partner's own colour, quietly: the traveling packet
   and its trail tint toward --vendor (the integration's brand rgb, set on the page root). One
   accent per page, only on the elements that draw the crossing itself. Falls back to brand green. */
.tr-below .tr-intd__join::before { background: rgba(var(--vendor, 95, 175, 8), .34); }
.tr-below .tr-intd__join::after  { background: rgb(var(--vendor, 95, 175, 8)); }
.tr-below .tr-intd__vpill { box-shadow: inset 0 0 0 1px rgba(var(--vendor, 95, 175, 8), .28); }
/* And in the sync table, the line between the two marks warms toward the vendor's side, so the
   crossing itself carries the partnership. */
.tr-below .tr-intd__dirline { background: linear-gradient(90deg, rgba(var(--vendor, 95, 175, 8), .55), var(--line-2)); }

/* ---- WHY-VISUAL FORM VARIANTS ----
   Three visuals, three forms, so the column of drawings reads as three different screens
   rather than one table styled thrice. */

/* The mobile Ready-for-Dispatch card: the amber stage header IS the mobile screen's, and the
   same amber the hero's pipeline uses, so the stage reads as one thing across both drawings. */
.tr-below .tr-intd__vtop.is-amber {
	background: #E9A23B; border-radius: 10px 10px 0 0;
	margin: -1px -1px 0; padding: 11px 14px;
}
.tr-below .tr-intd__vtop.is-amber .tr-intd__vtitle { color: #FFF; }
.tr-below .tr-intd__vbadge {
	min-width: 22px; text-align: center; font-family: var(--sans);
	font-size: .68rem; font-weight: 700; color: #A36A10;
	background: #FFF; border-radius: 999px; padding: 2px 7px;
	font-variant-numeric: tabular-nums;
}
/* A checkbox with no animation attached: the dispatch queue's rows are a still, and one of
   them is checked exactly as the source screenshot has it. */
.tr-below .tr-intd__vcb {
	width: 13px; height: 13px; flex: none; border-radius: 4px; display: inline-block;
	box-shadow: inset 0 0 0 1.5px var(--line-2); background: var(--paper);
	margin-right: 9px; vertical-align: -2px; position: relative;
}
.tr-below .tr-intd__vcb.is-checked { background: var(--green-mid); box-shadow: inset 0 0 0 1.5px var(--green-mid); }
.tr-below .tr-intd__vcb.is-checked::after {
	content: ''; position: absolute; left: 2.5px; top: 3px; width: 7px; height: 4px;
	border-left: 2px solid #FFF; border-bottom: 2px solid #FFF;
	transform: rotate(-45deg);
}

/* The vendor-bill card closes its own arithmetic: a ruled sum, the document's signature. */
.tr-below .tr-intd__vsum {
	display: flex; justify-content: space-between; align-items: baseline;
	border-top: 2px solid var(--ink); margin-top: 6px; padding: 8px 2px 2px;
}
.tr-below .tr-intd__vsum b { font-family: var(--sans); font-size: .74rem; font-weight: 700; letter-spacing: .01em; color: var(--ink); }
.tr-below .tr-intd__vsum i { font-style: normal; font-family: var(--serif); font-weight: 600; font-size: 1.05rem; color: var(--ink); font-variant-numeric: tabular-nums; }

/* The vendor-colour rail that ran down the left of .is-in tables is GONE (owner call,
   2026-08-10): a straight accent bar against a rounded container reads as applied
   decoration, and the direction it encoded is already stated by each visual's header
   pill. Do not reintroduce it. */

/* TWO-WAY, because the integration is two-way: people, departments and managers come IN from
   BambooHR, approved time goes back OUT for payroll. A one-way packet was describing half of
   what the page says.

   3.4s in four equal-feeling phases: 612ms out, ~1.09s rest, 612ms back, ~1.09s rest. The
   travel is quick enough to read as snappy, the rests are long enough that it never feels
   busy, and because 100% holds the same position as 0% the loop has no seam.

   Per-keyframe timing functions govern the segment STARTING at that keyframe, so the curve on
   0% drives the outbound leg and the curve on 50% drives the return. Both legs get the same
   punchy ease-in-out; both rests are linear, which is what a hold wants. */
@keyframes tr-intd-packet {
	0%   { left: 0;    animation-timing-function: cubic-bezier(.5,0,.35,1); }
	18%  { left: 100%; animation-timing-function: linear; }
	50%  { left: 100%; animation-timing-function: cubic-bezier(.5,0,.35,1); }
	68%  { left: 0;    animation-timing-function: linear; }
	100% { left: 0; }
}
@keyframes tr-intd-trail {
	0%   { transform: scaleX(0); animation-timing-function: cubic-bezier(.5,0,.35,1); }
	18%  { transform: scaleX(1); animation-timing-function: linear; }
	50%  { transform: scaleX(1); animation-timing-function: cubic-bezier(.5,0,.35,1); }
	68%  { transform: scaleX(0); animation-timing-function: linear; }
	100% { transform: scaleX(0); }
}
@media (prefers-reduced-motion: reduce) {
	/* Static two-way state: the rail fully drawn with the dot parked at the BambooHR end. */
	.tr-below .tr-intd__join::before { animation: none; transform: scaleX(1); }
	.tr-below .tr-intd__join::after { animation: none; left: 100%; }
}

.tr-below .tr-intd-hero h1 {
	font-family: var(--serif); font-weight: 600; letter-spacing: -.024em; line-height: 1.02;
	/* 3.1rem, not 3.5. Paired with the wider column this lands the headline on three lines at
	   1440 instead of five, and the display serif still reads as the largest thing in the hero. */
	font-size: clamp(2.05rem, 3.5vw, 3.1rem); color: var(--ink); margin: 0; text-wrap: balance;
}
.tr-below .tr-intd-hero .lead {
	max-width: 46ch; margin: clamp(16px, 1.8vw, 22px) 0 0;
	font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.62; color: var(--muted);
}
.tr-below .tr-intd__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: clamp(24px, 2.8vw, 32px); }
.tr-below .tr-intd__btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px; padding: 0 26px; border-radius: 999px;
	font-family: var(--sans); font-size: .98rem; font-weight: 650;
	border: 1px solid var(--line); background: var(--card); color: var(--ink);
	transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
/* --green-deep: white on --green is 2.76:1 and fails AA; this is 6.05:1. */
.tr-below .tr-intd__btn.is-primary { background: var(--green-deep); border-color: var(--green-deep); color: #fff; }
.tr-below .tr-intd__btn.is-primary:hover { background: var(--green-ink); border-color: var(--green-ink); }
.tr-below .tr-intd__btn:hover { border-color: var(--ink); }
.tr-below .tr-intd__note { margin: clamp(13px, 1.6vw, 18px) 0 0; font-size: .85rem; color: var(--faint); }

/* ---------------- TESTIMONIAL ----------------
   A real quote, from a named CFO at a named organisation, which is the only kind worth designing
   around. It sits between the sync table and the FAQ: after the reader has seen what the
   integration does, before they start asking what could go wrong, which is where proof is worth
   the most.

   SET TO READ AS A SENTENCE, NOT A POEM. At a 34ch measure and 2.5rem this broke over five or six
   short lines, which turns a plain statement into something that looks like it is being recited.
   A 44rem measure at 1.6rem lands it on two lines, so it reads at the pace someone would say it.
   The scale still makes it the largest text in the section without stacking it.

   The page's one tonal shift. Everything else is --paper with white cards, so cream here is a
   genuine change of surface rather than a fourth card style, and it is safe at this position: a
   band directly under the hero puts its edge at the fold, which is why the team section could not
   have one. This is mid-page.

   DELIBERATELY ABSENT: no rating, no logo, no photograph. We have none of the three, and inventing
   any of them is how this project picked up a schema penalty risk once already.

   The quotation marks ARE here, and they are punctuation rather than ornament — real curly quotes
   around the sentence, not an oversized glyph parked behind the text. They come from CSS
   open-quote/close-quote rather than from the data, so the stored string stays clean: it is reused
   for nothing today, but a Review or quotation node later should carry the words without stray
   characters baked in.

   The name is set in the display serif so it reads as a signature under the words rather than a
   caption about them, with the role and organisation in the sans beneath doing the credentialing. */
.tr-below .tr-intd-quote { padding: clamp(8px, 1vw, 16px) 0 clamp(48px, 6vw, 92px); }
.tr-below .tr-intd__quote {
	margin: 0; background-color: var(--cream, #F3EFE2); border-radius: 22px;
	padding: clamp(40px, 5.2vw, 76px) clamp(26px, 5vw, 72px) clamp(36px, 4.6vw, 64px);
	display: grid; justify-items: center; text-align: center;
}
.tr-below .tr-intd__quote blockquote { margin: 0; max-width: 44rem; }
.tr-below .tr-intd__quote blockquote p {
	margin: 0; font-family: var(--serif); font-weight: 400;
	font-size: clamp(1.24rem, 1.95vw, 1.6rem); line-height: 1.34;
	letter-spacing: -.028em; color: var(--ink); text-wrap: balance;
	quotes: '\201C' '\201D';
}
.tr-below .tr-intd__quote blockquote p::before { content: open-quote; }
.tr-below .tr-intd__quote blockquote p::after  { content: close-quote; }
/* A short green rule between the words and who said them: a signature line, not a divider. */
.tr-below .tr-intd__quote figcaption {
	display: grid; justify-items: center; gap: 4px;
	margin-top: clamp(24px, 2.8vw, 34px); padding-top: clamp(20px, 2.4vw, 28px);
	position: relative;
}
.tr-below .tr-intd__quote figcaption::before {
	content: ''; position: absolute; top: 0; left: 50%; translate: -50% 0;
	width: 48px; height: 2px; background-color: var(--green);
}
.tr-below .tr-intd__qname {
	font-family: var(--serif); font-weight: 400; font-size: clamp(1.04rem, 1.25vw, 1.18rem);
	color: var(--ink); letter-spacing: -.024em; line-height: 1.2;
}
.tr-below .tr-intd__qrole {
	font-family: var(--sans); font-size: .88rem; color: var(--muted); letter-spacing: -.01em;
	text-wrap: balance;
}

@media (max-width: 620px) {
	.tr-below .tr-intd__quote blockquote { max-width: none; }
}

/* ---- THE PIPELINE: the real product screen, drawn in CSS ----
   Uses the shared .win frame from home-below.css so it belongs to the same system as the
   homepage mockups. Every label and figure comes from the product's own screen.

   Scaled up deliberately. At its first size it sat in the corner of the hero looking like
   a thumbnail; the composition only works if the product is genuinely the subject. Bold
   here means SCALE and COMPOSITION, not effects — no glows, no gradient decoration. */
/* A QUERY CONTAINER, so the mockup responds to the width it is GIVEN rather than to the
   width of the window. That distinction is the whole bug: this frame sits at 575px inside the
   block editor's full-width <main>, and at ~528px inside an Elementor container capped to
   1110px. Same viewport, same CSS, different available width — so viewport media queries
   cannot see the difference and the pipeline silently overflowed into .win's overflow:hidden
   and had its fourth stage clipped.

   Measured: the pipeline overflows once the card drops under ~500px, and looks jammed well
   before that. Container queries below fix it at the source, for any context. */
.tr-below .tr-intd__stage { position: relative; container-type: inline-size; container-name: trstage; }
/* THE HERO FRAME WAS LEFT BEHIND: it still had hairline dividers between every chip, every
   send row and every name, so the most prominent mockup on the page was the only one in
   the old language. Rebuilt below. Its cream slab is removed for the same reason as the
   three visuals' — see the note above .tr-intd__qviz. */
.tr-below .tr-intd__win {
	position: relative; z-index: 1;
	box-shadow: 0 3px 14px rgba(20,24,14,.05), 0 54px 96px -48px rgba(21,32,9,.46);
	border-radius: 18px;
	/* The shared .win frame carries a 1px outline, and the three visuals below are
	   border:0, so this was the only framed mockup left on the page. Overridden HERE rather
	   than on .win, because .win is also the homepage's frame and that is production styling
	   this page has no business changing. The chrome bar keeps its rule: a hairline under a
	   title bar is what makes a window read as a window. */
	border: 0;
}
.tr-below .tr-intd__cadence { position: relative; z-index: 1; }

/* minmax(0, 1fr), not 1fr. A bare `1fr` is minmax(AUTO, 1fr), and an auto minimum refuses to
   go below the track's min-content width — which is what made the grid overflow its card
   instead of compressing. */
/* FOUR ACROSS. The label owns row one outright; the figure and the count share row two.
   THE ROOT CAUSE, stated once. This frame sits in a 1200px container on a block-editor page and
   an 1110px one inside an Elementor container, so the tile is 130px on one and 119px on the
   other. Every layout I tried put the label and the count side by side on row one, which left
   the label 70px on the wide one and 59px on the narrow one — and "Employee" and "Approver" are
   ~58px. So it fit by 12px in one place and by under 1px in the other, and in the narrow case
   the text spilled right and the badge's opaque fill painted over the tail. It looked like
   truncation ("Employe", "Approve"); it was overflow hidden behind a sibling.

   Nothing side by side with the label can be safe at that margin, so nothing is. The label gets
   the whole track — 97px at the narrow container against 58px of text, a 39px margin — which is
   wide enough that a 90px container difference cannot reach it. Row two carries the figure and
   the count, sized so they clear the same 97px with room over.

   This is only viable because the labels are one word each. With "Pending Download" (115px) no
   arrangement of a 97px row worked, which is what the previous four attempts were discovering. */
.tr-below .tr-intd__pipe {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
	padding: clamp(12px, 1.4vw, 16px) clamp(12px, 1.4vw, 16px) 0;
}
.tr-below .tr-intd__step-chip {
	background: var(--paper); border-radius: 12px;
	padding: clamp(11px, 1.3vw, 15px) clamp(10px, 1.1vw, 11px);
	display: grid; grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 4px; row-gap: 6px; align-items: center;
}
/* Row one, spanning both columns. Nothing shares this line. */
.tr-below .tr-intd__step-chip b {
	grid-area: 1 / 1 / auto / -1; min-width: 0;
	font-family: var(--sans); font-size: clamp(.82rem, .94vw, .92rem); font-weight: 700;
	color: var(--ink); line-height: 1.2; letter-spacing: -.012em; white-space: nowrap;
}
/* Row two: figure left, count right. Tabular so the decimals line up down the row. */
.tr-below .tr-intd__step-chip span {
	grid-area: 2 / 1; white-space: nowrap;
	font-size: clamp(.73rem, .8vw, .77rem); color: var(--faint);
	font-variant-numeric: tabular-nums; letter-spacing: -.008em;
}
/* min-width 24px so all four badges match whether the count is one digit or two. box-sizing is
   border-box under .tr-below, so this has to cover the 12px of padding as well. */
.tr-below .tr-intd__step-chip em {
	grid-area: 2 / 2; justify-self: end; font-style: normal;
	/* 28px. Measured, not chosen: box-sizing is border-box here, so min-width must cover the
	   12px of padding too. "12" renders 27px wide and cleared 24px on its own, while "7" and "0"
	   did not, leaving badges of 27/27/24/24 and a ragged right edge. */
	min-width: 26px; text-align: center;
	font-size: .72rem; font-weight: 700; color: var(--muted);
	background: var(--card); border-radius: 999px; padding: 2px 5px;
	font-variant-numeric: tabular-nums; line-height: 1.3;
}
/* The stage where time leaves for BambooHR. Amber in the product; amber here. Fill and colour
   only, never size — a larger font on this label is what started the whole sequence. */
.tr-below .tr-intd__step-chip.is-on { background: var(--amber-tint); }
.tr-below .tr-intd__step-chip.is-on b { color: #7A5308; }
.tr-below .tr-intd__step-chip.is-on em { background: #7A5308; color: #FFF8EA; }
.tr-below .tr-intd__step-chip.is-on span { color: #8A6412; font-weight: 600; }
/* The three inactive stages step back so the active one carries. */
.tr-below .tr-intd__step-chip:not(.is-on) b { color: var(--muted); font-weight: 650; }

/* ---- THE DISPATCH STAGE (heromock: dispatch) ----
   Rebuilt after the first cut, which failed in a specific way: everything happened in the first
   four seconds and then the frame sat dimmed for five - so a first-time visitor, landing mid-hold,
   saw a gray dead queue and no story. Two principles fix it:

     MOTION HAS A DIRECTION. The timesheets physically LEAVE - each row slides out toward the send
     card and the card pulses as it lands. Departure reads as narrative; opacity flips read as a
     glitch.

     THE RESTING STATE IS THE PROOF. The long beat of the loop is a green "Sent: 50.00 hrs" card
     over an emptied queue that says exactly what happened. Nothing is grayed out; the aftermath
     is the message.

   The seven-second score:
     0.0 - 1.8s   three checkboxes tick, half a beat apart, each with a small overshoot pop
     2.3s         "Send to Quickbooks" takes a press - fills, dips, releases
     2.8 - 3.8s   the rows launch, staggered; the send card pulses once per arrival
     4.0s         the card flips to "Sent: 50.00 hrs - just now"; the outcome line fades into
                  the emptied queue
     4.2 - 6.3s   hold on the proof
     6.3 - 7.0s   the queue refills row by row, unticked, and it begins again

   Hover pauses the whole scene. Reduced motion: ticked rows, sent card, no theatre. */

.tr-below .tr-intd__flow {
	display: flex; gap: 3px; padding: clamp(12px, 1.5vw, 18px) clamp(12px, 1.4vw, 16px) 8px;
}
.tr-below .tr-intd__seg {
	flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 5px;
	background: var(--card); color: var(--muted);
	padding: 8px 9px 8px 13px;
	clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%, 9px 50%);
	font-family: var(--sans);
}
.tr-below .tr-intd__seg:first-child { clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%); padding-left: 11px; }
/* No ellipsis anywhere in the strip: a truncated stage name reads as a bug. The labels were
   shortened in the markup until all four fit at the window's narrowest. */
.tr-below .tr-intd__seg b { font-size: clamp(.58rem, .7vw, .68rem); font-weight: 650; white-space: nowrap; letter-spacing: -.01em; }
.tr-below .tr-intd__seg i { font-style: normal; font-size: clamp(.56rem, .64vw, .62rem); white-space: nowrap; font-variant-numeric: tabular-nums; opacity: .9; }
.tr-below .tr-intd__seg em {
	font-style: normal; margin-left: auto; flex: none;
	min-width: 16px; text-align: center; font-size: .56rem; font-weight: 700;
	background: var(--paper); color: var(--muted); border-radius: 999px; padding: 1px 4px;
	font-variant-numeric: tabular-nums;
}
.tr-below .tr-intd__seg.is-hot { background: #E9A23B; color: #FFF; flex-grow: 2.2; }
.tr-below .tr-intd__seg.is-hot b { font-weight: 700; }
.tr-below .tr-intd__seg.is-hot em { background: #FFF; color: #A36A10; }

.tr-below .tr-intd__ship {
	display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 6px;
	padding: 4px clamp(12px, 1.4vw, 16px) 10px;
}
.tr-below .tr-intd__shipcard {
	background: var(--paper); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line);
	padding: clamp(11px, 1.3vw, 15px) clamp(10px, 1.1vw, 14px);
	display: flex; align-items: center; gap: 10px; min-width: 0;
}
.tr-below .tr-intd__shipcard .tr-intd__sendmark { width: clamp(26px, 2.8vw, 32px); }
.tr-below .tr-intd__shiptxt { min-width: 0; display: grid; row-gap: 2px; }
/* Titles wrap to two lines rather than truncate: "Send 0-Check to Quickb..." amputated the most
   distinctive capability on the page. */
.tr-below .tr-intd__shiptxt b {
	font-family: var(--sans); font-size: clamp(.74rem, .84vw, .82rem); font-weight: 650;
	color: var(--ink); line-height: 1.28;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tr-below .tr-intd__shipstate {
	grid-area: 2 / 1; align-self: end; font-family: var(--sans); font-size: clamp(.66rem, .74vw, .72rem);
	color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	font-variant-numeric: tabular-nums;
}
.tr-below .tr-intd__shipcard:not(.is-flip) .tr-intd__shipstate { grid-area: auto; }
.tr-below .tr-intd__shipstate.is-before { animation: trqb-before 7s infinite; }
.tr-below .tr-intd__shipstate.is-after  { color: var(--green-ink); font-weight: 650; opacity: 0; animation: trqb-after 7s infinite; }
.tr-below .tr-intd__shipcard.is-flip    { animation: trqb-card 7s infinite; }

.tr-below .tr-intd__queue { background: var(--card); padding: 6px clamp(12px, 1.4vw, 16px); position: relative; }
.tr-below .tr-intd__qrow {
	display: flex; align-items: center; gap: 10px; padding: 7px 2px;
	animation: trqb-depart1 7s infinite;
}
.tr-below .tr-intd__qrow b { font-family: var(--sans); font-size: clamp(.8rem, .9vw, .88rem); font-weight: 650; color: var(--ink); }
.tr-below .tr-intd__qrow i {
	font-style: normal; margin-left: auto; font-family: var(--sans);
	font-size: clamp(.78rem, .88vw, .86rem); font-weight: 650; color: var(--muted);
	font-variant-numeric: tabular-nums;
}
/* The tick, drawn with explicit dimensions this time. The first version built it from inset
   arithmetic and the glyph rendered lopsided - the exact "broken checkmark" the owner saw. */
.tr-below .tr-intd__cb {
	width: 15px; height: 15px; flex: none; border-radius: 4.5px;
	box-shadow: inset 0 0 0 1.5px var(--line-2); background: var(--paper);
	position: relative; animation: trqb-cb1 7s infinite;
}
.tr-below .tr-intd__cb::after {
	content: ''; position: absolute; left: 3px; top: 3.5px; width: 8px; height: 4.5px;
	border-left: 2.2px solid #FFF; border-bottom: 2.2px solid #FFF;
	transform: rotate(-45deg) scale(0); transform-origin: 50% 50%;
	animation: trqb-tick1 7s infinite;
}
/* THE STAGGER LIVES INSIDE THE KEYFRAMES, NOT ON animation-delay. The first cut offset each
   row's whole seven-second cycle by half a beat — including the RESET, so row one refilled and
   re-ticked while row three was still gone: the "names get unchecked and checked and it
   scrambles" the owner saw. Three keyframe sets per element, all period-aligned, means the
   whole cast resets in the same closing second and the next cycle starts as one. */
.tr-below .tr-intd__qrow[style*="--beat:1"] { animation-name: trqb-depart1; }
.tr-below .tr-intd__qrow[style*="--beat:2"] { animation-name: trqb-depart2; }
.tr-below .tr-intd__qrow[style*="--beat:3"] { animation-name: trqb-depart3; }
.tr-below .tr-intd__qrow[style*="--beat:1"] .tr-intd__cb { animation-name: trqb-cb1; }
.tr-below .tr-intd__qrow[style*="--beat:2"] .tr-intd__cb { animation-name: trqb-cb2; }
.tr-below .tr-intd__qrow[style*="--beat:3"] .tr-intd__cb { animation-name: trqb-cb3; }
.tr-below .tr-intd__qrow[style*="--beat:1"] .tr-intd__cb::after { animation-name: trqb-tick1; }
.tr-below .tr-intd__qrow[style*="--beat:2"] .tr-intd__cb::after { animation-name: trqb-tick2; }
.tr-below .tr-intd__qrow[style*="--beat:3"] .tr-intd__cb::after { animation-name: trqb-tick3; }

/* The outcome line: what a reader landing mid-hold needs to know, in one glance. */
.tr-below .tr-intd__qdone {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	font-family: var(--sans); font-size: clamp(.76rem, .86vw, .84rem); font-weight: 650;
	color: var(--green-ink); opacity: 0; animation: trqb-done 7s infinite;
}
.tr-below .tr-intd__qdone::before {
	content: ''; width: 15px; height: 15px; border-radius: 50%; margin-right: 8px; flex: none;
	background: var(--green-mid);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3.2 3.2L13 4.5'/%3E%3C/svg%3E") 50%/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3.2 3.2L13 4.5'/%3E%3C/svg%3E") 50%/contain no-repeat;
}

.tr-below .tr-intd__actionbar {
	display: flex; gap: 8px; padding: 10px clamp(12px, 1.4vw, 16px) clamp(13px, 1.5vw, 17px);
}
.tr-below .tr-intd__gobtn {
	font-family: var(--sans); font-size: clamp(.74rem, .84vw, .82rem); font-weight: 650;
	color: var(--green-ink); background: var(--tint-2); border-radius: 9px;
	box-shadow: inset 0 0 0 1px rgba(95,175,8,.3); padding: 8px 14px;
	animation: trqb-press 7s infinite;
}
.tr-below .tr-intd__ghostbtn {
	font-family: var(--sans); font-size: clamp(.74rem, .84vw, .82rem); font-weight: 600;
	color: var(--muted); background: var(--paper); border-radius: 9px;
	box-shadow: inset 0 0 0 1px var(--line); padding: 8px 14px;
}

/* THE SCORE. Percentages of a 7s loop (1% = 70ms). Beats per row:
     ticks    row1 6-9%   row2 13-16%   row3 20-23%
     press    33-35%
     departs  row1 40-46% row2 43-49%   row3 46-52%
     pulses   45 / 49 / 53%, card settles lit at 56%
     outcome  58-62% in, 90% out
     reset    ticks clear at 86% while the rows are still gone; the queue refills 93-99%,
              slightly staggered, so the refill reads as the next batch arriving. Everything
              is home by 100% and the cycle begins as one. */
@keyframes trqb-cb1 {
	0%, 6%    { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-2); }
	9%, 84%   { background: var(--green-mid); box-shadow: inset 0 0 0 1.5px var(--green-mid); }
	87%, 100% { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-2); }
}
@keyframes trqb-cb2 {
	0%, 13%   { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-2); }
	16%, 84%  { background: var(--green-mid); box-shadow: inset 0 0 0 1.5px var(--green-mid); }
	87%, 100% { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-2); }
}
@keyframes trqb-cb3 {
	0%, 20%   { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-2); }
	23%, 84%  { background: var(--green-mid); box-shadow: inset 0 0 0 1.5px var(--green-mid); }
	87%, 100% { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-2); }
}
@keyframes trqb-tick1 {
	0%, 6%    { transform: rotate(-45deg) scale(0); }
	8%        { transform: rotate(-45deg) scale(1.25); }
	10%, 84%  { transform: rotate(-45deg) scale(1); }
	86%, 100% { transform: rotate(-45deg) scale(0); }
}
@keyframes trqb-tick2 {
	0%, 13%   { transform: rotate(-45deg) scale(0); }
	15%       { transform: rotate(-45deg) scale(1.25); }
	17%, 84%  { transform: rotate(-45deg) scale(1); }
	86%, 100% { transform: rotate(-45deg) scale(0); }
}
@keyframes trqb-tick3 {
	0%, 20%   { transform: rotate(-45deg) scale(0); }
	22%       { transform: rotate(-45deg) scale(1.25); }
	24%, 84%  { transform: rotate(-45deg) scale(1); }
	86%, 100% { transform: rotate(-45deg) scale(0); }
}
@keyframes trqb-press {
	0%, 31%   { transform: scale(1); background: var(--tint-2); color: var(--green-ink); }
	33%, 35%  { transform: scale(.955); background: var(--green-mid); color: #FFF; box-shadow: inset 0 0 0 1px var(--green-mid); }
	38%, 100% { transform: scale(1); background: var(--tint-2); color: var(--green-ink); }
}
@keyframes trqb-depart1 {
	0%, 40%   { transform: translateX(0); opacity: 1; }
	46%, 92%  { transform: translateX(56px); opacity: 0; }
	93%       { transform: translateX(-12px); opacity: 0; }
	97%, 100% { transform: translateX(0); opacity: 1; }
}
@keyframes trqb-depart2 {
	0%, 43%   { transform: translateX(0); opacity: 1; }
	49%, 93%  { transform: translateX(56px); opacity: 0; }
	94%       { transform: translateX(-12px); opacity: 0; }
	98%, 100% { transform: translateX(0); opacity: 1; }
}
@keyframes trqb-depart3 {
	0%, 46%   { transform: translateX(0); opacity: 1; }
	52%, 94%  { transform: translateX(56px); opacity: 0; }
	95%       { transform: translateX(-12px); opacity: 0; }
	99%, 100% { transform: translateX(0); opacity: 1; }
}
@keyframes trqb-before {
	0%, 53%   { opacity: 1; }
	57%, 95%  { opacity: 0; }
	99%, 100% { opacity: 1; }
}
@keyframes trqb-after {
	0%, 54%   { opacity: 0; transform: translateY(4px); }
	58%, 95%  { opacity: 1; transform: translateY(0); }
	99%, 100% { opacity: 0; }
}
@keyframes trqb-card {
	0%, 43%   { box-shadow: inset 0 0 0 1px var(--line); background: var(--paper); }
	45%       { box-shadow: inset 0 0 0 1px rgba(95,175,8,.4), 0 0 0 5px rgba(95,175,8,.14); background: var(--paper); }
	47%       { box-shadow: inset 0 0 0 1px var(--line); background: var(--paper); }
	49%       { box-shadow: inset 0 0 0 1px rgba(95,175,8,.4), 0 0 0 5px rgba(95,175,8,.14); background: var(--paper); }
	51%       { box-shadow: inset 0 0 0 1px var(--line); background: var(--paper); }
	53%       { box-shadow: inset 0 0 0 1px rgba(95,175,8,.4), 0 0 0 5px rgba(95,175,8,.14); background: var(--tint-2); }
	56%, 95%  { box-shadow: inset 0 0 0 1px rgba(95,175,8,.35); background: var(--tint-2); }
	99%, 100% { box-shadow: inset 0 0 0 1px var(--line); background: var(--paper); }
}
@keyframes trqb-done {
	0%, 58%   { opacity: 0; }
	62%, 88%  { opacity: 1; }
	92%, 100% { opacity: 0; }
}

.tr-below .tr-intd__dispatch:hover *,
.tr-below .tr-intd__dispatch:hover *::after { animation-play-state: paused; }

/* Reduced motion: the proof, without the theatre. Rows ticked, card sent, outcome line off. */
@media (prefers-reduced-motion: reduce) {
	.tr-below .tr-intd__dispatch *, .tr-below .tr-intd__dispatch *::after { animation: none !important; }
	.tr-below .tr-intd__cb { background: var(--green-mid); box-shadow: inset 0 0 0 1.5px var(--green-mid); }
	.tr-below .tr-intd__cb::after { transform: rotate(-45deg) scale(1); }
	.tr-below .tr-intd__shipstate.is-before { opacity: 0; }
	.tr-below .tr-intd__shipstate.is-after { opacity: 1; }
	.tr-below .tr-intd__shipcard.is-flip { background: var(--tint-2); box-shadow: inset 0 0 0 1px rgba(95,175,8,.35); }
	.tr-below .tr-intd__qdone { opacity: 0; }
}

@media (max-width: 640px) {
	.tr-below .tr-intd__seg { padding: 7px 6px 7px 9px; gap: 4px; }
	.tr-below .tr-intd__seg:not(.is-hot) em { display: none; }
	.tr-below .tr-intd__seg b { font-size: .55rem; }
	.tr-below .tr-intd__seg.is-hot i { display: none; }
	.tr-below .tr-intd__ship { grid-template-columns: 1fr; }
}

.tr-below .tr-intd__sends {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px;
	padding: 6px clamp(12px, 1.4vw, 16px) 0;
}
.tr-below .tr-intd__send {
	background: var(--paper); border-radius: 12px;
	padding: clamp(14px, 1.6vw, 19px) clamp(11px, 1.2vw, 16px);
	display: flex; align-items: center; gap: 11px;
}
/* The BambooHR action, lit. This is the whole point of the page.
   REVERTED to the pale tint. The saturated --green-deep fill with white type read worse in
   place than it did in the reasoning: one strong block of colour inside a frame of pale
   tiles pulled all the attention to a single row and flattened everything around it.

   Kept as ONE rule set rather than restoring the two competing copies this used to have.
   The previous appearance came from a duplicate that sat later in the file at identical
   specificity and silently won; the values it produced are the values here, so the render is
   the same and there is no longer a hidden override deciding it. */
.tr-below .tr-intd__send.is-live { background: var(--tint-2); box-shadow: inset 0 0 0 1px rgba(95,175,8,.3); }
.tr-below .tr-intd__send.is-live b { color: var(--green-ink); }
.tr-below .tr-intd__send.is-live i { color: var(--green-mid); }
.tr-below .tr-intd__send:not(.is-live) { opacity: .72; }
.tr-below .tr-intd__sendmark {
	width: clamp(28px, 3vw, 34px); aspect-ratio: 1; flex: none; background-image: var(--logo);
	background-size: contain; background-position: 50%; background-repeat: no-repeat;
}
.tr-below .tr-intd__sendtxt { min-width: 0; }
.tr-below .tr-intd__send b {
	display: block; font-family: var(--sans);
	font-size: clamp(.78rem, .9vw, .88rem); font-weight: 650; color: var(--ink); line-height: 1.25;
}
.tr-below .tr-intd__send i { font-style: normal; font-size: .74rem; color: var(--faint); }

/* The rows waiting at that stage. Gives the window the vertical presence it needs to
   balance a tall copy column, and shows real approved work rather than empty chrome. */
.tr-below .tr-intd__rows { background: var(--card); padding: 4px clamp(11px, 1.2vw, 16px) 6px; }
/* The last name fades, the same intentional crop the roster visual uses, so this reads as
   the top of the queue rather than a table that happens to hold exactly three people. The
   rows lose their hairlines with it. */
.tr-below .tr-intd__row {
	display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px;
	padding: clamp(10px, 1.1vw, 13px) 0;
}
.tr-below .tr-intd__row:last-child { opacity: .45; }
.tr-below .tr-intd__av {
	width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
	background: var(--tint); color: var(--green-ink);
	font: 700 10.5px/1 var(--sans); letter-spacing: .02em;
}
.tr-below .tr-intd__row b { font-family: var(--sans); font-size: .82rem; font-weight: 600; color: var(--ink); }
/* The display serif on the figures. It gives the row list one thing with real presence,
   matches how hours are set in the handoff visual, and costs no extra element. */
.tr-below .tr-intd__row i {
	font-style: normal; font-family: var(--serif); font-weight: 400;
	font-size: clamp(1rem, 1.15vw, 1.12rem); color: var(--ink); letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}

/* The cadence, as a quiet caption rather than a floating card.
   It was a dark pill absolutely positioned off the window's bottom-left corner, which
   put it at a different offset at every width and read as heavier than the fact it
   carries. In normal flow it is aligned by construction and cannot drift. */
.tr-below .tr-intd__cadence {
	display: flex; align-items: center; justify-content: flex-end; gap: 9px;
	margin: clamp(14px, 1.6vw, 20px) 2px 0;
	font-family: var(--sans); font-size: .82rem; color: var(--faint);
}
.tr-below .tr-intd__cadencedot {
	width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none;
}

/* ==================================================================
   WHY — three question blocks, visuals alternating sides

   Second rewrite. The first was three text cards; the second was three identical rows
   with a small panel always on the right. Both read as a template, and measuring the two
   references said exactly why:

                          Harvest      ClickTime    us (before)
     section heading      50px w400    40px w500    32px w600
     letter-spacing       -2px         -0.8px       -0.58px
     heading form         statement    QUESTION     statement
     largest visual       47-67% vw    78% vw       34% vw
     visual placement     alternates   alternates   right, right, right
     eyebrows on page     none         no tracking  +0.1em uppercase

   Neither reference has a single positive-tracked uppercase eyebrow anywhere. Harvest
   has no section eyebrows at all. So: eyebrows gone, heading roughly 45% larger and two
   weights lighter, tracking doubled negative, headings phrased as questions, visuals
   roughly 60% of the content width and changing side each block.
   ================================================================== */
.tr-below .tr-intd-why { padding: clamp(40px, 5.5vw, 88px) 0 clamp(20px, 3vw, 46px); }

.tr-below .tr-intd__q {
	display: grid;
	/* wide column first; the flipped block reverses the track list so the visual keeps
	   the wide side rather than swapping into the narrow one. */
	grid-template-columns: minmax(0, 1.34fr) minmax(0, .86fr);
	gap: clamp(28px, 4.4vw, 70px);
	align-items: center;
	padding: clamp(34px, 5vw, 74px) 0;
}
/* NO RULE between the question blocks. This was the faint line still showing below the
   hero. With clamp(34px,5vw,74px) of padding on each block there is already up to 148px
   between them, which separates them far better than a hairline did, and the page stops
   reading as stacked containers. */
/* Copy is FIRST in the source on every block, so the reading and tab order stay copy
   then visual. Only the painted columns swap. */
/* grid-row: 1 is REQUIRED, not tidiness. Placing copy at column 2 first moves the
   auto-placement cursor past column 1, so the visual wrapped to an implicit SECOND row:
   blocks rendered ~970px tall with 378px of horizontal overflow. Pinning both to row 1
   is what makes them share it. */
.tr-below .tr-intd__qcopy { grid-column: 2; grid-row: 1; }
.tr-below .tr-intd__qviz  { grid-column: 1; grid-row: 1; }
.tr-below .tr-intd__q.is-flip { grid-template-columns: minmax(0, .86fr) minmax(0, 1.34fr); }
.tr-below .tr-intd__q.is-flip .tr-intd__qcopy { grid-column: 1; grid-row: 1; }
.tr-below .tr-intd__q.is-flip .tr-intd__qviz  { grid-column: 2; grid-row: 1; }

/* Besley 400, not 600. At this size the heavy weight is what made it look generic —
   both references set their display serif light and large and let the size do the work. */
.tr-below .tr-intd__qcopy h2 {
	font-family: var(--serif); font-weight: 400;
	font-size: clamp(1.85rem, 3.3vw, 2.75rem);
	letter-spacing: -.038em; line-height: 1.06;
	color: var(--ink); margin: 0; text-wrap: balance;
}
.tr-below .tr-intd__qcopy p {
	margin: clamp(16px, 1.8vw, 22px) 0 0; max-width: 42ch;
	font-size: 1.02rem; line-height: 1.66; color: var(--muted);
	letter-spacing: -.011em;
}
/* Both references run slightly negative tracking on body copy too. */
.tr-below .tr-intd__qsub { color: var(--faint); font-size: .96rem; }

/* ---- the product visuals ----
   One frame, three fills. Denser and larger than the panels they replace: at ~60% of the
   content width a three-row list looks like an empty box, so each carries a toolbar, real
   columns, and a footer that states what is switched on. */
/* BORDERLESS, and the rows inside carry no rules either.
   Every card on the Harvest homepage computes to `border: 0px`; the whole page uses three
   hairline dividers in total. Ours had a rule around each panel and another under every
   row, which is what made these read as spreadsheets rather than product surfaces. The
   card is now defined by fill and radius, the bands inside by fill, and the rows by
   padding alone. */
.tr-below .tr-intd__viz {
	margin: 0; width: 100%; background: var(--card);
	border: 0; border-radius: 20px; overflow: hidden;
	box-shadow: 0 2px 4px rgba(20,24,14,.03), 0 40px 72px -44px rgba(21,32,9,.34);
}
.tr-below .tr-intd__vtop {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	padding: 15px clamp(16px, 1.8vw, 22px); background: var(--paper);
}
.tr-below .tr-intd__vtitle {
	font-family: var(--sans); font-size: .95rem; font-weight: 650;
	letter-spacing: -.014em; color: var(--ink);
}
.tr-below .tr-intd__vcount {
	font-family: var(--sans); font-size: .8rem; color: var(--faint);
	font-variant-numeric: tabular-nums; letter-spacing: -.008em;
}
.tr-below .tr-intd__vpill {
	display: inline-flex; align-items: center; gap: 7px;
	background: var(--tint); color: var(--green-ink); border-radius: 999px;
	padding: 5px 12px 5px 7px;
	font-family: var(--sans); font-size: .76rem; font-weight: 650; letter-spacing: -.006em;
}
.tr-below .tr-intd__vmark {
	width: 17px; height: 17px; flex: none; background-image: var(--logo);
	background-size: contain; background-position: 50%; background-repeat: no-repeat;
}
.tr-below .tr-intd__vmark.is-lg { width: 30px; height: 30px; }

/* --- roster --- */
.tr-below .tr-intd__vtable { padding: 0 clamp(14px, 1.6vw, 20px); }
.tr-below .tr-intd__vhead,
.tr-below .tr-intd__vrow {
	display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, .8fr);
	align-items: center; gap: 14px;
}
.tr-below .tr-intd__vhead {
	padding: 15px 0 7px;
	font-family: var(--sans); font-size: .74rem; font-weight: 650; color: var(--faint);
	letter-spacing: -.004em;
}
.tr-below .tr-intd__vrow { padding: 13px 0; }
.tr-below .tr-intd__vname {
	display: flex; align-items: center; gap: 11px; min-width: 0;
	font-family: var(--sans); font-size: .88rem; font-weight: 600; color: var(--ink);
	letter-spacing: -.012em;
}
.tr-below .tr-intd__av {
	width: 27px; height: 27px; border-radius: 50%; flex: none;
	display: grid; place-items: center; font-style: normal;
	background: var(--tint); color: var(--green-ink);
	font: 700 10.5px/1 var(--sans); letter-spacing: .01em;
}
.tr-below .tr-intd__av.is-lg { width: 38px; height: 38px; font-size: 13px; }
/* Class, because BambooHR departments and divisions land in TimeRewards Classes — the
   column exists to make the sync table's third row visible rather than only stated. */
/* Fill, no outline — the last bordered thing left inside the visuals. */
.tr-below .tr-intd__vchip {
	display: inline-block; font-family: var(--sans); font-size: .76rem; font-weight: 600;
	color: var(--muted); background: var(--paper); border: 0;
	border-radius: 7px; padding: 4px 10px; letter-spacing: -.006em;
}
.tr-below .tr-intd__vsub { font-family: var(--sans); font-size: .82rem; color: var(--muted); letter-spacing: -.008em; }
.tr-below .tr-intd__vmore {
	padding: 12px 0 14px; font-family: var(--sans); font-size: .8rem; color: var(--faint);
	letter-spacing: -.008em;
}
.tr-below .tr-intd__vfoot {
	display: flex; flex-wrap: wrap; gap: 7px;
	padding: 14px clamp(16px, 1.8vw, 22px); background: var(--paper);
}
.tr-below .tr-intd__vfoot.is-plain {
	display: block; font-family: var(--sans); font-size: .8rem; color: var(--faint);
	letter-spacing: -.008em; line-height: 1.5;
}
/* Three chips because the product ships these as three separate opt-ins, not one switch.
   Circle as background-colour, tick as a background-image on top — NOT a CSS mask: an
   alpha mask unions the filled circle with the stroked tick, both opaque, so the tick
   disappears into a plain green dot. */
.tr-below .tr-intd__tog {
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--sans); font-size: .74rem; font-weight: 650; color: var(--green-ink);
	background: var(--tint); border-radius: 999px; padding: 5px 11px 5px 7px;
	letter-spacing: -.006em;
}
.tr-below .tr-intd__tog::before {
	content: ''; width: 14px; height: 14px; border-radius: 50%; flex: none;
	background: var(--green-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.3 8.3 6.8 10.8 11.7 5.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 9.5px 9.5px no-repeat;
}

/* --- handoff --- */
.tr-below .tr-intd__vsheet { padding: clamp(14px, 1.6vw, 20px); }
.tr-below .tr-intd__vsheethead {
	display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px;
	padding-bottom: 16px;
}
.tr-below .tr-intd__vsheethead b {
	display: block; font-family: var(--sans); font-size: .95rem; font-weight: 650;
	color: var(--ink); letter-spacing: -.014em;
}
.tr-below .tr-intd__vsheethead em {
	font-style: normal; font-size: .8rem; color: var(--faint); letter-spacing: -.008em;
}
.tr-below .tr-intd__vhrs {
	font-family: var(--serif); font-weight: 400; font-size: 1.9rem; color: var(--ink);
	letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums;
}
.tr-below .tr-intd__vhrs small { font-size: .82rem; color: var(--faint); margin-left: 4px; letter-spacing: -.01em; }
/* gap over a tinted parent was the hairline trick; now the two signature rows simply
   sit on the paper fill with a gap of real space between them. */
.tr-below .tr-intd__vsigs { display: grid; gap: 6px; margin-top: 16px; }
.tr-below .tr-intd__vsig {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	background: var(--paper); border-radius: 12px; padding: 13px 15px 13px 40px; position: relative;
}
.tr-below .tr-intd__vsig::before {
	content: ''; position: absolute; left: 14px; top: 50%; translate: 0 -50%;
	width: 15px; height: 15px; border-radius: 50%;
	background: var(--green-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.3 8.3 6.8 10.8 11.7 5.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
}
.tr-below .tr-intd__vsig b { font-family: var(--sans); font-size: .86rem; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.tr-below .tr-intd__vsig i { font-style: normal; font-size: .8rem; color: var(--faint); font-variant-numeric: tabular-nums; }
/* The outbound action, lit — the same treatment the BambooHR row gets in the hero, so
   green means one thing on the whole page. */
.tr-below .tr-intd__vexport {
	display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px;
	padding: 16px clamp(16px, 1.8vw, 22px); background: var(--tint-2);
}
.tr-below .tr-intd__vexport b {
	display: block; font-family: var(--sans); font-size: .9rem; font-weight: 650;
	color: var(--green-ink); letter-spacing: -.012em;
}
.tr-below .tr-intd__vexport em { font-style: normal; font-size: .79rem; color: var(--green-mid); letter-spacing: -.008em; }
.tr-below .tr-intd__vgo {
	width: 26px; height: 26px; border-radius: 50%; background: var(--green-deep);
	position: relative; flex: none;
}
.tr-below .tr-intd__vgo::after {
	content: ''; position: absolute; left: 44%; top: 50%; width: 6px; height: 6px;
	border-top: 1.6px solid #fff; border-right: 1.6px solid #fff;
	transform: translate(-50%, -50%) rotate(45deg);
}

/* --- audit trail --- */
.tr-below .tr-intd__vlog { list-style: none; margin: 0; padding: 4px clamp(14px, 1.6vw, 20px) 6px; }
.tr-below .tr-intd__vlog li {
	display: grid; grid-template-columns: auto 1fr; column-gap: 15px; row-gap: 3px;
	padding: 14px 0 14px 22px; position: relative;
}
/* The rail: a continuous hairline with a node per event, so the list reads as one
   record's history rather than three unrelated lines. */
.tr-below .tr-intd__vlog li::before {
	content: ''; position: absolute; left: 4px; top: 0; bottom: 0; width: 1px; background: var(--line);
}
.tr-below .tr-intd__vlog li:first-child::before { top: 19px; }
.tr-below .tr-intd__vlog li:last-child::before { bottom: calc(100% - 19px); }
.tr-below .tr-intd__vlog li::after {
	content: ''; position: absolute; left: 1px; top: 16px;
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--card); box-shadow: 0 0 0 1.5px var(--faint);
}
.tr-below .tr-intd__vlog li.is-out::after { background: var(--green); box-shadow: 0 0 0 1.5px var(--green); }
.tr-below .tr-intd__vtime {
	grid-row: 1 / span 2; font-style: normal; font-size: .78rem; color: var(--faint);
	font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 1px;
}
.tr-below .tr-intd__vlog b { font-family: var(--sans); font-size: .87rem; font-weight: 600; color: var(--ink); letter-spacing: -.012em; }
.tr-below .tr-intd__vlog span { font-size: .79rem; color: var(--muted); letter-spacing: -.008em; }
.tr-below .tr-intd__vlog em {
	grid-column: 2; font-style: normal; font-size: .78rem; color: var(--green-ink);
	background: var(--tint); border-radius: 6px; padding: 4px 9px; justify-self: start;
	margin-top: 4px; letter-spacing: -.006em;
}

/* ==================================================================
   ART DIRECTION ON THE THREE VISUALS
   They were legible but flat: every row weighted the same, every panel a complete little
   diagram, nothing telling the eye where to look. Four changes, each tied to the sentence
   the visual sits next to rather than added as decoration.

   1. DIRECTED ATTENTION. The Class chips carry the tint, because the copy beside the
      roster is specifically about BambooHR departments becoming TimeRewards Classes. The
      edited entry in the trail is lifted, because that block is about a change being
      recorded with a reason. Emphasis follows the argument.
   2. AN INTENTIONAL CROP. The roster's last row fades into "+21 more", so it reads as the
      top of a real list instead of a table that happens to hold three people.
   3. DEPTH. A second surface sits behind each frame, offset. Product marketing has used
      the stacked-screen for decades because it says "there is more of this" without a
      caption. Drawn on the WRAPPER, not the figure: the figure is overflow:hidden.
   4. HOVER. The frame lifts, the outbound arrow moves, the lit row brightens. Motion only
      where something actually happens in the product.
   ================================================================== */
/* THE CREAM SLAB IS GONE. It was a second surface offset behind each frame, meant to read
   as a stack. It did not: at inset 18px/-14px/-16px/26px it sat at a different visual
   offset on every block because the frames are different heights, so it read as a
   misaligned overlay rather than depth. It also put a second large shadow underneath an
   already large one, which is paint cost on exactly the elements that were stuttering.
   Depth now comes from the frame's own shadow, which was always doing most of the work. */
.tr-below .tr-intd__qviz { position: relative; }
.tr-below .tr-intd__viz { position: relative; z-index: 1; }

/* 1. the mapping the copy is about, in the colour that means "TimeRewards side" */
.tr-below .tr-intd__viz.is-roster .tr-intd__vchip { background: var(--tint); color: var(--green-ink); }

/* 2. the crop */
.tr-below .tr-intd__vrow.is-fade { opacity: .45; }
.tr-below .tr-intd__vmore { padding-top: 8px; }

/* 1b. THE EDITED ENTRY, emphasised WITHOUT a fill.
   It had `background: var(--paper); border-radius: 12px` on the <li>, and the <li> is also
   what draws the rail (::before at left:4px) and the node (::after at left:1px, 7px wide).
   So the fill started at the row's left edge, underneath both, and its 12px corner arc cut
   straight across the node — the cream block clipping the punch holes. Any fill on this
   element has that problem, because the rail lives inside it.

   The emphasis is now carried by the node and the type, which cost no box: a filled green
   node, and the headline in green ink. The "Reason recorded on the entry" chip was already
   doing most of the pointing anyway. */
.tr-below .tr-intd__vlog li.is-change::after { background: var(--green-mid); box-shadow: 0 0 0 1.5px var(--green-mid); }
.tr-below .tr-intd__vlog li.is-change > b { color: var(--green-ink); }
.tr-below .tr-intd__vlog li.is-out::after { width: 9px; height: 9px; left: 0; top: 15px; }

/* 4. NO HOVER LIFT ON THE FRAMES, and no transitioned box-shadow anywhere.
   The lift I added made the visuals glitch on hover, and there were three separate causes
   stacked together, all of which are now gone rather than tuned:

   a. box-shadow was being TRANSITIONED on ~700x500 surfaces. Shadow is painted, not
      composited, so every frame of a 46px-spread 86px-blur shadow repaints the whole card.
      That is the jank, and it is not fixable by changing the duration.
   b. The lift revealed the cream depth slab by 5px at the top of the frame on enter and
      hid it again on leave, so the surface behind appeared to jump.
   c. On the related cards the hover target WAS the transformed element, which is the
      classic flicker loop: cursor near the bottom edge, card moves up, cursor is no longer
      over it, hover drops, card falls back, hover re-fires.

   What survives is the one interaction that is genuinely cheap and says something: the
   outbound arrow moves, because that row is the moment something leaves TimeRewards. It is
   a `translate` on a 26px element, composited, inside a hovered PARENT, so none of a, b or
   c can apply to it. */
/* HOVER IS NOW COLOUR ONLY, and this is the third attempt, so here is why.
   The arrow was moving 3px with `translate`. That reads as a nudge up and down rather than
   a slide, because promoting a small element to its own compositor layer changes how its
   edges land on the pixel grid: the element re-renders at a fractionally different vertical
   offset, and on a 26px circle beside text that is plainly visible. It is not a bug in the
   3px value and no easing fixes it.

   `opacity` on the cropped roster row had the same exposure, for the same reason.

   So nothing moves and nothing changes its layer any more. The arrow's fill deepens on
   hover. A colour change cannot shift geometry, cannot promote a layer, and cannot drop the
   hover, which makes it the only category of effect left that is provably safe here. */
@media (hover: hover) {
	.tr-below .tr-intd__vgo { transition: background-color .25s var(--ease); }
	.tr-below .tr-intd__q:hover .tr-intd__vgo { background-color: var(--green-ink); }
}
@media (prefers-reduced-motion: reduce) {
	.tr-below .tr-intd__vgo { transition: none; }
}

@media (max-width: 900px) {
	/* One column, visual after copy on every block — an alternating rhythm has no
	   meaning in a single column, and forcing it only makes the order unpredictable. */
	.tr-below .tr-intd__q,
	.tr-below .tr-intd__q.is-flip { grid-template-columns: 1fr; gap: clamp(22px, 4vw, 32px); }
	.tr-below .tr-intd__qcopy,
	.tr-below .tr-intd__q.is-flip .tr-intd__qcopy { grid-column: 1; grid-row: 1; }
	.tr-below .tr-intd__qviz,
	.tr-below .tr-intd__q.is-flip .tr-intd__qviz { grid-column: 1; grid-row: 2; }
	.tr-below .tr-intd__qcopy p { max-width: none; }
}
@media (max-width: 560px) {
	.tr-below .tr-intd__vhead,
	.tr-below .tr-intd__vrow { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
	/* Approver drops before the layout can crush the name column. */
	.tr-below .tr-intd__vhead span:last-child,
	.tr-below .tr-intd__vsub { display: none; }
}

/* ==================================================================
   SHARED: the centred section head used by How / What moves / Each team

   Same type spec as the question blocks — Besley 400, large, tightly tracked. The old
   `.shead mid` set 32px w600 with an eyebrow above it; both references set their display
   serif light and large, and neither uses an eyebrow.
   ================================================================== */
/* 820px, not 34ch. At 34ch the container computed to 365px and "What does connecting
   BambooHR involve?" broke over FOUR lines with its lead paragraph squeezed to a phone
   measure. Harvest's section headings run 685-900px wide and never exceed two lines. */
.tr-below .tr-intd__mid { max-width: 820px; margin: 0 auto clamp(28px, 3.6vw, 48px); text-align: center; }
.tr-below .tr-intd__mid h2 {
	font-family: var(--serif); font-weight: 400;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	letter-spacing: -.036em; line-height: 1.08;
	color: var(--ink); margin: 0; text-wrap: balance;
}
.tr-below .tr-intd__mid p {
	margin: clamp(13px, 1.5vw, 18px) auto 0; max-width: 60ch;
	font-size: 1rem; line-height: 1.62; color: var(--muted); letter-spacing: -.011em;
}

/* The three sections that still ran the parent .shead spec — FAQ, related, final CTA —
   pulled onto the same type as everything above. They were Besley 600 at half the
   tracking, and "Other integrations" was rendering LARGER than the section heads above
   it, which inverted the hierarchy. */
/* The FAQ heading is the SHARED .tr-faq__title component, set to 600 in home-below.css
   and used by the homepage and /pricing/ too. Overridden only under .tr-intd-faq, so this
   page gets the lighter weight without restyling the component everywhere. The final CTA
   is handled on .tr-intd__panel h2 further down — it is later in this same file, so a
   duplicate selector here would lose to it at equal specificity. */
.tr-below .tr-intd-faq .tr-faq__title,
.tr-below .tr-intd-rel .shead h2 {
	font-family: var(--serif); font-weight: 400;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	letter-spacing: -.036em; line-height: 1.08;
}

/* ---------------- HOW: one panel, three hairline stages ----------------
   Was three free-standing columns each with a 2px black top rule and a faint "01" — the
   rule read as three unrelated headings and the numerals as decoration. As one panel
   divided by hairlines it reads as one process, which is what it is. */
.tr-below .tr-intd-how { padding: clamp(40px, 5.5vw, 84px) 0; }
/* Three separate surfaces with real space between them, not one panel split by
   hairlines. Same reasoning as the table: the reference builds with fill and radius. */
/* A SEQUENCE, NOT THREE BOXES.
   Three cards with a numeral, a heading and a paragraph is the most generic shape a SaaS
   page has, and it was the weakest thing on this page. The section now carries the process
   itself: one rail runs behind three nodes, and each stage ends in a small artefact of the
   thing that actually happens at that stage — an authorisation, a field mapping, an
   approved timesheet. A visitor who reads none of the copy still learns the shape of the
   setup. Same CSS-mockup vocabulary as the hero and the three visuals above, so it reads
   as the same product rather than a different section's illustration. */
.tr-below .tr-intd__steps {
	list-style: none; margin: 0; padding: 0; position: relative;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 26px);
}
/* The rail. Inset by a sixth of the width at each end so it starts and stops at the
   OUTER nodes rather than running off into the gutter: three equal columns put the first
   node at 1/6 and the last at 5/6 of the track. */
.tr-below .tr-intd__steps::before {
	content: ''; position: absolute; z-index: 0;
	left: 16.667%; right: 16.667%; top: 17px; height: 1.5px;
	background: linear-gradient(to right, var(--line), var(--green) 92%);
	transform-origin: left center;
}
.tr-below .tr-intd__step {
	margin: 0; display: grid; align-content: start;
	grid-template-rows: auto 1fr; justify-items: center;
}
/* The node is opaque and above the rail, so the rail appears to pass behind it. */
.tr-below .tr-intd__stepn {
	position: relative; z-index: 1;
	width: 36px; height: 36px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--forest); color: var(--paper);
	font: 650 .9rem/1 var(--sans); letter-spacing: -.01em;
	box-shadow: 0 0 0 7px var(--paper);
	/* NO TRANSITION. There is nothing left to transition — the hover that used to turn a node green
	   is gone (see below) — and leaving the declaration would mean the next person to add a hover
	   here gets an animation they did not ask for. */
}
/* ALL THREE NODES ARE THE SAME. The third used to carry --green-deep on the reasoning that the last
   stage is the outcome. In practice it read as one node being wrong rather than as emphasis, which
   is exactly what it was reported as. The numerals carry the sequence; they do not need colour to
   do it as well. */

.tr-below .tr-intd__stepcard {
	background: var(--card); border: 0; border-radius: 20px; width: 100%;
	margin-top: clamp(18px, 2vw, 26px);
	padding: clamp(24px, 2.8vw, 34px) clamp(20px, 2.2vw, 30px) clamp(20px, 2.2vw, 26px);
	display: grid; align-content: start; text-align: left;
	box-shadow: 0 1px 2px rgba(20,24,14,.04), 0 22px 44px -32px rgba(21,32,9,.3);
}
.tr-below .tr-intd__step h3 {
	font-family: var(--sans); font-size: 1.22rem; font-weight: 650;
	letter-spacing: -.022em; color: var(--ink); margin: 0; line-height: 1.2;
}
.tr-below .tr-intd__step p {
	margin: 10px 0 0; font-size: .96rem; line-height: 1.62; color: var(--muted);
	letter-spacing: -.01em;
}

/* ---- the stage artefacts ---- */
.tr-below .tr-intd__art {
	margin-top: clamp(18px, 2vw, 24px); padding-top: clamp(16px, 1.8vw, 20px);
	border-top: 1px solid var(--line-2);
	font-family: var(--sans);
}
.tr-below .tr-intd__art.is-auth,
.tr-below .tr-intd__art.is-sheet { display: flex; align-items: center; gap: 10px; }
.tr-below .tr-intd__artmark {
	width: 24px; height: 24px; flex: none; background-image: var(--logo);
	background-size: contain; background-position: 50%; background-repeat: no-repeat;
}
.tr-below .tr-intd__artname {
	font-size: .88rem; font-weight: 600; color: var(--ink); letter-spacing: -.012em;
	margin-right: auto; min-width: 0;
}
.tr-below .tr-intd__artok {
	display: inline-flex; align-items: center; gap: 6px; flex: none;
	font-size: .76rem; font-weight: 650; color: var(--green-ink); letter-spacing: -.006em;
	background: var(--tint); border-radius: 999px; padding: 5px 11px 5px 7px;
}
.tr-below .tr-intd__artok::before {
	content: ''; width: 14px; height: 14px; border-radius: 50%; flex: none;
	background: var(--green-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.3 8.3 6.8 10.8 11.7 5.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 9.5px 9.5px no-repeat;
}
.tr-below .tr-intd__arthrs {
	flex: none; font-family: var(--serif); font-weight: 400; font-size: 1.32rem;
	color: var(--ink); letter-spacing: -.028em; font-variant-numeric: tabular-nums;
}
.tr-below .tr-intd__art.is-map { display: grid; gap: 7px; }
.tr-below .tr-intd__maprow {
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
}
.tr-below .tr-intd__mapfrom,
.tr-below .tr-intd__mapto {
	font-size: .8rem; font-weight: 600; letter-spacing: -.008em;
	border-radius: 8px; padding: 6px 10px; text-align: center;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tr-below .tr-intd__mapfrom { background: var(--paper); color: var(--muted); }
.tr-below .tr-intd__mapto   { background: var(--tint); color: var(--green-ink); }
.tr-below .tr-intd__maparrow { position: relative; width: 20px; height: 1.5px; background: var(--line); flex: none; }
.tr-below .tr-intd__maparrow::after {
	content: ''; position: absolute; right: -1px; top: 50%; width: 5px; height: 5px;
	border-top: 1.5px solid var(--faint); border-right: 1.5px solid var(--faint);
	transform: translateY(-50%) rotate(45deg);
}

/* NO HOVER ON THE STAGES AT ALL. Hovering a stage turned its node green, so passing the cursor over
   the section made nodes flick between two colours — a hover artefact on something that is a static
   diagram, not a control. Nothing here is clickable, so nothing here should respond to a pointer. */

/* THE SCROLL REVEAL, second pass.
   The first version animated the rail alone over `entry 18% cover 34%`. Two things were
   wrong with it. The range ran past the point where the section is fully on screen, so the
   rail was still growing after everything around it had settled, which is what made it look
   like a loading bar rather than a reveal. And because only the rail moved, the three
   stages it was supposedly connecting just sat there, so the motion described nothing.

   Now the rail draws while the section enters and finishes as it lands, and each stage
   arrives behind its own node on a staggered range. The stagger comes from the RANGE, not a
   delay: every stage shares one view() timeline, so offsetting the ranges is what separates
   them, and each stage's progress stays tied to scroll position rather than to a clock.
   Both properties are composited.

   Scroll-driven, so no JS and no observer. Browsers without animation-timeline get the
   finished state, which is the correct fallback. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.tr-below .tr-intd__steps::before {
			animation: tr-intd-rail linear both;
			animation-timeline: view();
			animation-range: entry 22% entry 92%;
		}
		@keyframes tr-intd-rail { from { scale: 0 1; } to { scale: 1 1; } }

		/* THE CARD MOVES, THE NODE DOES NOT.
		   The stagger was applied to the whole .tr-intd__step, which contains the node. So
		   during the reveal the three nodes sat at three different heights and three
		   different opacities while the rail — drawn on the PARENT, and therefore not
		   staggered — stayed put. The nodes visibly came off their own rail, which is the
		   awkwardness in the screenshot.

		   Now the translate is on the card only, and the node fades in place. Nothing that
		   touches the rail moves vertically at any point in the reveal. */
		.tr-below .tr-intd__stepcard {
			animation: tr-intd-stage linear both;
			animation-timeline: view();
		}
		.tr-below .tr-intd__stepn {
			animation: tr-intd-node linear both;
			animation-timeline: view();
		}
		.tr-below .tr-intd__step:nth-child(1) .tr-intd__stepcard,
		.tr-below .tr-intd__step:nth-child(1) .tr-intd__stepn { animation-range: entry 30% entry 62%; }
		.tr-below .tr-intd__step:nth-child(2) .tr-intd__stepcard,
		.tr-below .tr-intd__step:nth-child(2) .tr-intd__stepn { animation-range: entry 38% entry 70%; }
		.tr-below .tr-intd__step:nth-child(3) .tr-intd__stepcard,
		.tr-below .tr-intd__step:nth-child(3) .tr-intd__stepn { animation-range: entry 46% entry 78%; }
		@keyframes tr-intd-stage {
			from { opacity: 0; translate: 0 14px; }
			to   { opacity: 1; translate: 0 0; }
		}
		/* Opacity only. No translate, no scale: the node's job is to stay on the rail. */
		@keyframes tr-intd-node {
			from { opacity: 0; }
			to   { opacity: 1; }
		}
	}
}

/* ---------------- WHAT MOVES ----------------
   Rebuilt. The old version had three separate problems stacked on each other:

   1. A 1px card border with a header band painted var(--paper) — the SAME colour as the
      page. The band was therefore invisible and only the border rendered, which is the
      stray rule that appeared to float above the table.
   2. A rule under every row, in a design language whose reference uses three hairlines on
      an entire page.
   3. The parent theme's grey zebra underneath all of it.

   Now: border-collapse: separate with border-spacing on the Y axis, so the rows are
   genuinely separated by SPACE and each one is its own rounded white surface on the warm
   page. No border, no row rule, no zebra. Radius is applied to the end cells because a
   <tr> cannot take one. */
.tr-below .tr-intd-sync { padding: 0 0 clamp(40px, 5.5vw, 84px); }
.tr-below .tr-intd__tablewrap { overflow-x: auto; padding: 2px; }
.tr-below .tr-intd__table {
	width: 100%; margin: 0; min-width: 660px; font-family: var(--sans);
	border-collapse: separate; border-spacing: 0 8px;
}
/* border-block-start as well as border. hello-elementor.min.css sets the stray grey rule
   with a LOGICAL property — `table caption + thead tr:first-child th { border-block-start:
   1px solid rgba(128,128,128,.5) }` — and a physical `border: 0` shorthand does not
   reliably cancel a logical longhand. This is the grey line that appeared above the
   table. Both axes are reset here so it cannot come back. */
.tr-below .tr-intd__table th,
.tr-below .tr-intd__table td {
	border: 0; border-block: 0; border-inline: 0;
	text-align: left; background: transparent;
}

/* THE STRAY GREY LINE ABOVE THE TABLE.
   hello-elementor.min.css carries `table thead:first-child tr:first-child th { border-top:
   1px solid rgba(128,128,128,.5) }`. That is specificity (0,2,4) — the two :first-child
   pseudo-classes count at class level — against (0,2,1) for `.tr-below .tr-intd__table
   th`. Equal on classes, so the element count decides and theirs wins. A third class in
   the selector settles it without !important. */
.tr-below .tr-intd-sync .tr-intd__table th,
.tr-below .tr-intd-sync .tr-intd__table td { border: 0; border-block: 0; border-inline: 0; }

/* Column labels, not a header bar: no fill and no rule, so nothing can read as a stray
   line above the first row. */
.tr-below .tr-intd__table thead th {
	padding: 0 clamp(16px, 1.8vw, 26px) 4px;
	font-size: .76rem; font-weight: 650; color: var(--faint); letter-spacing: -.004em;
}

.tr-below .tr-intd__table tbody th,
.tr-below .tr-intd__table tbody td {
	background: var(--card);
	padding: clamp(19px, 2.1vw, 26px) clamp(16px, 1.8vw, 26px);
	vertical-align: middle;
	box-shadow: 0 1px 2px rgba(20,24,14,.04), 0 14px 28px -22px rgba(21,32,9,.3);
}
.tr-below .tr-intd__table tbody th:first-child { border-radius: 14px 0 0 14px; }
.tr-below .tr-intd__table tbody td:last-child  { border-radius: 0 14px 14px 0; }
/* The row label in the display serif, at the same size and weight as the role index in
   "What each team gets" and the names on the destination cards. One typographic idea for
   "this is the thing being named", used everywhere. */
.tr-below .tr-intd__table tbody th {
	font-family: var(--serif); font-size: 1.16rem; font-weight: 600;
	color: var(--ink); letter-spacing: -.024em; width: 26%; line-height: 1.22;
}
.tr-below .tr-intd__table tbody td {
	font-size: .93rem; line-height: 1.6; color: var(--muted); letter-spacing: -.01em;
}
/* THE COLUMN NOW READS AS A COLUMN.
   Three faults made this section look unconsidered rather than designed:

   1. The direction group was left-aligned inside a 20% cell whose content is only ~106px
      wide, so every row had a ragged pocket of dead space before the third column, and
      nothing lined up with the "Direction" label above it.
   2. The SSO row drew the word "Sign-in" where the other five drew two logos, so one cell
      in the column had a different footprint entirely.
   3. The marks floated loose on the white row with no container, so they read as clip art
      dropped onto a table rather than a component.

   Fixed by centring the group in a narrower cell, giving it a surface of its own, and
   drawing all six rows the same way. The header label is centred over it. */
.tr-below .tr-intd__dircell { width: 17%; }
.tr-below .tr-intd-sync .tr-intd__table thead th:nth-child(2) { text-align: center; }
.tr-below .tr-intd__dircell,
.tr-below .tr-intd-sync .tr-intd__table tbody td.tr-intd__dircell { text-align: center; }
/* Row heights ran 100/100/100/100/88/76 depending on whether the last column wrapped, and
   an uneven stack is what stopped this reading as one component. A table cell treats
   `height` as a MINIMUM, so this levels the short rows without capping the tall ones.
   Desktop only: below 900px most rows wrap anyway and a floor just adds dead air. */
@media (min-width: 901px) {
	.tr-below .tr-intd-sync .tr-intd__table tbody th,
	.tr-below .tr-intd-sync .tr-intd__table tbody td { height: 100px; }
}

/* Direction as an arrow between the two marks. Six repetitions of the same two sentences
   was the other reason this table read as filler; the sentence survives for screen
   readers and as the title attribute. */
.tr-below .tr-intd__sr {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* A surface, centred, identical width on every row. */
.tr-below .tr-intd__dir {
	display: inline-flex; align-items: center; gap: 10px; position: relative;
	background: var(--paper); border-radius: 999px; padding: 7px 12px;
}
.tr-below .tr-intd__dot {
	width: 28px; height: 28px; border-radius: 7px; flex: none;
	background-image: var(--logo); background-size: contain;
	background-position: 50%; background-repeat: no-repeat;
}
/* The real T monogram from assets/images/tr-mark.svg, not the letters "TR" set in a
   circle. Square with a soft radius because that is the shape of the mark itself. */
.tr-below .tr-intd__dot.is-bamboo { border-radius: 50%; }
.tr-below .tr-intd__dirline { position: relative; width: 32px; height: 1.5px; background: var(--line); flex: none; }
.tr-below .tr-intd__dirline::before,
.tr-below .tr-intd__dirline::after {
	content: ''; position: absolute; top: 50%; width: 6px; height: 6px;
	border-top: 1.5px solid var(--green-deep); border-right: 1.5px solid var(--green-deep);
	opacity: 0;
}
/* `in` points at TimeRewards (right), `out` at the partner (left), `both` shows both. */
.tr-below .tr-intd__dirline::after  { right: -1px; transform: translateY(-50%) rotate(45deg); }
.tr-below .tr-intd__dirline::before { left: -1px;  transform: translateY(-50%) rotate(-135deg); }
.tr-below .is-in   .tr-intd__dirline::after,
.tr-below .is-both .tr-intd__dirline::after,
.tr-below .is-out  .tr-intd__dirline::before,
.tr-below .is-both .tr-intd__dirline::before { opacity: 1; }
.tr-below .is-in .tr-intd__dirline  { background: linear-gradient(to right, var(--line), var(--green-deep)); }
.tr-below .is-out .tr-intd__dirline { background: linear-gradient(to left, var(--line), var(--green-deep)); }
.tr-below .is-both .tr-intd__dirline { background: var(--green-deep); }
/* SSO links the two systems without moving anything, so: dashed, no heads, no green.
   Drawn as a repeating gradient because a 1.5px box cannot take a border-style dash. */
.tr-below .is-sso .tr-intd__dirline {
	background: repeating-linear-gradient(to right, var(--faint) 0 3px, transparent 3px 6px);
}
.tr-below .tr-intd__dirtxt { font-size: .86rem; font-weight: 600; color: var(--muted); letter-spacing: -.01em; }
.tr-below .tr-intd__syncnote {
	margin: clamp(16px, 1.9vw, 22px) 2px 0; font-family: var(--sans);
	font-size: .88rem; line-height: 1.6; color: var(--faint); letter-spacing: -.01em;
}

/* ---------------- WHAT EACH TEAM GETS ----------------
   FIVE EQUAL COLUMNS, one row, a green rule over each.

   No item is singled out. A previous version set HR at display scale, on the reasoning that HR owns
   the decision on a BambooHR page — it read as one item shouting at the other four, which is a
   reminder that a hierarchy is only worth having if the reader wants it.

   No container either, and that is deliberate rather than plain: the last version put a green rail
   down the edge of a rounded panel, and an edge treatment on a radius fights it, so the rail looked
   applied. The rule sits ON each column instead, where a straight line and a straight edge agree.

   Copy is levelled to 75-84 characters so all five columns end at the same depth. That is the
   whole trick to this section looking finished — every ragged version of it was ragged because the
   answers were different lengths, not because of the container they were in. */
.tr-below .tr-intd-who { padding: clamp(40px, 5vw, 76px) 0 clamp(48px, 6vw, 92px); }
.tr-below .tr-intd__who {
	margin: 0; display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	column-gap: clamp(18px, 2.2vw, 34px); row-gap: clamp(26px, 3.2vw, 40px);
}
.tr-below .tr-intd__wholine {
	display: grid; align-content: start; gap: 9px;
	padding-top: clamp(15px, 1.7vw, 20px);
	border-top: 2px solid var(--green);
}
.tr-below .tr-intd__wholine dt {
	margin: 0; font-family: var(--serif); font-weight: 400;
	font-size: clamp(1.18rem, 1.5vw, 1.42rem); line-height: 1.1;
	letter-spacing: -.026em; color: var(--ink);
	transition: color .22s var(--ease);
}
.tr-below .tr-intd__wholine dd {
	margin: 0; font-family: var(--sans);
	font-size: .93rem; line-height: 1.58; color: var(--muted); letter-spacing: -.01em;
}
/* The artifact chip: the concrete thing that lands on this desk, worn between the role and the
   sentence. Structure carrying information — each chip compresses its own sentence. */
.tr-below .tr-intd__whochip {
	justify-self: start; margin: -2px 0 0; padding: 3px 9px;
	font-family: var(--sans); font-size: .7rem; font-weight: 650; letter-spacing: .015em;
	color: var(--green-ink); background: var(--tint-2); border-radius: 999px;
}
/* Hover deepens the rule and takes the role with it. Colour only, and the rule is a border rather
   than a pseudo-element, so there is nothing that can shift a pixel. */
@media (hover: hover) {
	.tr-below .tr-intd__wholine:hover { border-top-color: var(--green-deep); }
	.tr-below .tr-intd__wholine:hover dt { color: var(--green-ink); }
}
@media (prefers-reduced-motion: reduce) {
	.tr-below .tr-intd__wholine,
	.tr-below .tr-intd__wholine dt { transition: none; }
}
/* 5 / 3 / 2 / 1. Three leaves two on the second row, which is the layout you asked for as the
   fallback and is why the row-gap above exists. */
@media (max-width: 1080px) { .tr-below .tr-intd__who { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .tr-below .tr-intd__who { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .tr-below .tr-intd__who { grid-template-columns: 1fr; } }

@media (max-width: 860px) {
}
@media (max-width: 520px) {
}

@media (max-width: 860px) {
	.tr-below .tr-intd__steps { grid-template-columns: 1fr; }
	/* The rail is horizontal by construction. Once the stages stack it no longer connects
	   anything and paints as a stray line across the first node, which is the same seam
	   artefact this pass is removing elsewhere. The numerals still carry the sequence. */
	.tr-below .tr-intd__steps::before { display: none; }
	.tr-below .tr-intd__step { justify-items: start; }
	.tr-below .tr-intd__stepcard { margin-top: 14px; }
}

/* ---------------- FAQ + RELATED ---------------- */
.tr-below .tr-intd-faq { padding: 0 0 clamp(52px, 6.5vw, 100px); }
.tr-below .tr-intd-rel { padding: 0 0 clamp(48px, 6vw, 90px); }
/* WHERE TEAMS GO NEXT, not "here is another list".
   This was three panels in a hairline-split box, which reads as navigation furniture. Each
   is now a real destination card: the logo at a size you can actually recognise, the plan
   tier stated (read from the hub row, so it cannot contradict /pricing/), and an arrow that
   moves on hover. The whole card is the target. */
.tr-below .tr-intd__rel {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.5vw, 20px);
	margin-top: clamp(26px, 3.4vw, 42px);
}
.tr-below .tr-intd__relcard {
	background: var(--card); border: 0; border-radius: 20px;
	padding: clamp(24px, 2.8vw, 32px);
	display: grid; grid-template-columns: auto 1fr auto; align-items: center;
	column-gap: 15px; row-gap: 16px;
	text-decoration: none; color: inherit;
	box-shadow: 0 1px 2px rgba(20,24,14,.04), 0 22px 44px -32px rgba(21,32,9,.3);
	transition: background .25s var(--ease);
}
.tr-below .tr-intd__relmark {
	width: 44px; height: 44px; flex: none;
	background-image: var(--logo); background-size: contain;
	background-position: 50% 50%; background-repeat: no-repeat;
}
.tr-below .tr-intd__reltxt { display: grid; gap: 2px; min-width: 0; }
.tr-below .tr-intd__relname {
	font-family: var(--serif); font-size: 1.16rem; font-weight: 600; color: var(--ink);
	letter-spacing: -.022em;
}
.tr-below .tr-intd__relkind { font-family: var(--sans); font-size: .84rem; color: var(--faint); letter-spacing: -.008em; }
/* BOTH are placed explicitly. The plan pill spans 1/-1, which filled row two, so the
   arrow auto-placed onto a THIRD row in column one and the card's third column computed to
   0px wide — the arrow was rendering, just nowhere near where it belonged. */
.tr-below .tr-intd__relgo { grid-column: 3; grid-row: 1; }
.tr-below .tr-intd__relplan {
	grid-column: 1 / -1; grid-row: 2;
	font-family: var(--sans); font-size: .8rem; font-weight: 600;
	color: var(--muted); letter-spacing: -.006em;
	background: var(--paper); border-radius: 8px; padding: 7px 11px; justify-self: start;
}
.tr-below .tr-intd__relgo {
	width: 30px; height: 30px; border-radius: 50%; background: var(--paper);
	position: relative; flex: none;
	transition: background .25s var(--ease), translate .25s var(--ease);
}
.tr-below .tr-intd__relgo::after {
	content: ''; position: absolute; left: 46%; top: 50%; width: 6px; height: 6px;
	border-top: 1.6px solid var(--muted); border-right: 1.6px solid var(--muted);
	transform: translate(-50%, -50%) rotate(45deg);
	transition: border-color .25s var(--ease);
}
@media (hover: hover) {
	/* The card itself does not move: it was its own hover target, which flickers. The
	   feedback is a fill change plus the arrow, both of which read clearly and neither of
	   which can drop the hover. */
	.tr-below .tr-intd__relcard:hover { background: var(--cream, #F3EFE2); }
	.tr-below .tr-intd__relcard:hover .tr-intd__relgo { background: var(--card); translate: 3px 0; }
	.tr-below .tr-intd__relcard:hover .tr-intd__relgo::after { border-color: var(--green-deep); }
}
.tr-below .tr-intd__relcard:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 3px; }
.tr-below .tr-intd__all { text-align: center; margin: clamp(24px, 2.8vw, 34px) 0 0; }
/* A pill, so the exit from the section looks like something you can press. */
.tr-below .tr-intd__all a {
	display: inline-block; font-family: var(--sans); font-size: .92rem; font-weight: 600;
	color: var(--green-ink); text-decoration: none; letter-spacing: -.01em;
	background: var(--card); border-radius: 999px; padding: 12px 26px;
	box-shadow: 0 1px 2px rgba(20,24,14,.05), 0 12px 24px -18px rgba(21,32,9,.3);
	transition: background .25s var(--ease), color .25s var(--ease);
}
.tr-below .tr-intd__all a:hover { background: var(--tint); color: var(--green-deep); }

/* ---------------- FINAL CTA ---------------- */
.tr-below .tr-intd-cta { padding: 0 0 clamp(56px, 7vw, 110px); }
.tr-below .tr-intd__panel {
	background: var(--forest); border-radius: 22px; text-align: center;
	padding: clamp(46px, 6vw, 92px) clamp(26px, 5vw, 90px);
	box-shadow: 0 2px 10px rgba(20,24,14,.05), 0 40px 80px -44px rgba(21,32,9,.5);
}
.tr-below .tr-intd__panel h2 {
	font-family: var(--serif); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 400;
	line-height: 1.08; letter-spacing: -.036em; color: #F6F7EE; margin: 0; text-wrap: balance;
}
.tr-below .tr-intd__panel p { margin: clamp(14px, 1.8vw, 20px) 0 0; color: rgba(240,242,229,.8); font-size: 1.04rem; }
/* .tr-intd__cta is a flex row with no justification, which is fine in the hero where the
   column is left-aligned, but inside this centred panel it left-aligned the pair while the
   heading and paragraph above them were centred. text-align does not move flex items. */
.tr-below .tr-intd__panel .tr-intd__cta { justify-content: center; }
.tr-below .tr-intd__panel p { max-width: 46ch; margin-inline: auto; }
.tr-below .tr-intd__panel .tr-intd__btn.is-ghost {
	background: transparent; border-color: rgba(240,242,229,.34); color: #F6F7EE;
}
.tr-below .tr-intd__panel .tr-intd__btn.is-ghost:hover { border-color: #F6F7EE; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 1000px) {
	.tr-below .tr-intd__herogrid { grid-template-columns: 1fr; gap: clamp(30px, 5vw, 48px); }
	.tr-below .tr-intd-hero { min-height: 0; }
}
/* Driven by the CARD's width, not the window's. The viewport rule this replaces
   (max-width: 620px) never fired in the case that actually broke: a 1905px window with the
   frame squeezed to 500px by its container. */
/* 500px, not 560. At 560 the frame flipped to two columns as soon as an Elementor container
   squeezed the card to ~524px, while the block-editor page kept four at 572px — so the two
   environments would still have LOOKED different, just differently. Measured clipping does not
   begin until the card is under ~500px, so four columns are safe down to there and both
   contexts now render identically. */
/* FOUR COLUMNS NEED A 500px CARD, and this rule is what stops them being asked to fit in less.
   It went missing during the two-column experiment and its absence is why the figures overflowed
   at mobile: a 342px card was still being given four tracks of ~78px against a 109px need.

   The budget per track, measured: figure 57px + 4px gap + 26px badge + 22px padding = 109px.
   At the 500px threshold each track gets 112.5px, so there is real margin rather than the 0.5px
   the previous numbers left at staging's 524px card. Row two is what sets this; the label needs
   only 80px.

     card 572 (block editor)   track 130.5   4 columns
     card 524 (Elementor)      track 118.5   4 columns
     card 342 (mobile)         2 columns, track ~155 */
@container trstage (max-width: 500px) {
	.tr-below .tr-intd__pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container trstage (max-width: 430px) {
	.tr-below .tr-intd__sends { grid-template-columns: 1fr; }
}
/* Fallback for browsers without container queries: the old viewport rule, kept so they still
   get a two-column pipeline on a phone rather than four crushed ones. */
@supports not (container-type: inline-size) {
	@media (max-width: 620px) {
		.tr-below .tr-intd__sends { grid-template-columns: 1fr; }
	}
}
@media (max-width: 900px) {
	/* .tr-intd__grid and .tr-intd__prow were the old why-cards and persona rows; both are
	   gone. `gap: 26px` on the steps went with them — the panel is now hairline-divided,
	   so a 26px gap would have exposed 26px bands of the tinted parent between stages. */
	.tr-below .tr-intd__rel { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
	.tr-below .tr-intd__lockup { gap: 12px; }
	/* Both marks are horizontal wordmarks now, not circular badges. The old rule squared
	   them to 50x50, which squashed the BambooHR logo below 480px. */
	.tr-below .tr-intd__mark.is-tr      { width: 112px; height: 19px; }
	.tr-below .tr-intd__mark.is-partner { height: calc(16px * var(--opt, 1)); max-width: 120px; }
	.tr-below .tr-intd__cta { flex-direction: column; }
	.tr-below .tr-intd__btn { width: 100%; }
}