/* HOMEPAGE EXTRAS. ProofRail, HowWeWorkSteps and PainFix, all three of which carried ZERO
   classes and lived entirely in inline style objects. Transcribed from the components. */

/* ---- PROOF RAIL ----
   TWO REELS, NOT THREE. The component's own note: "On the record" repeated the hero
   credential strip, so the quote takes the freed width and the rail reads as a pair rather
   than a gap. Do not add a third reel back without that reasoning changing.

   THE NO-JS STATE IS EVERY ITEM, STACKED AND READABLE. Enhancement switches the slot to a
   single grid cell with the items stacked in it, so the slot is always as tall as its LONGEST
   item and a rotation can never reflow the page. No arrows and no bounce: the rotation
   signals the rail is alive, it is not a control. */
.lo-rail { padding: var(--section-y) 0; background: var(--lo-paper-0); }
.lo-rail__inner {
  box-sizing: border-box; max-width: var(--container-max); margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-9);
  align-items: start;
}
.lo-rail__reel { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
/* Default: normal flow, every item readable. */
.lo-rail__items { display: flex; flex-direction: column; gap: var(--space-5); }
/* Enhanced: one cell, stacked, cross-faded. */
.lo-rail__items[data-lo-enhanced="true"] { display: grid; gap: 0; }
.lo-rail__items[data-lo-enhanced="true"] > .lo-rail__item {
  grid-area: 1 / 1; opacity: 0; pointer-events: none;
  transition: opacity 900ms var(--ease);
}
.lo-rail__items[data-lo-enhanced="true"] > .lo-rail__item[data-current="true"] {
  opacity: 1; pointer-events: auto;
}
@media (max-width: 1023px) { .lo-rail__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); } }

/* ---- HOW WE WORK STEPS ----
   NO NUMERALS. The component says why in place: a left-to-right sequence is already ordered,
   and the gold serif numeral is reserved for STATS. Q11 closed on exactly that rule. */
.lo-steps { display: flex; flex-direction: column; }
.lo-steps__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-9); align-items: end; margin-bottom: var(--space-7); }
.lo-steps__title {
  font-family: var(--font-display); font-size: var(--display-2-size);
  line-height: var(--display-2-line); font-weight: 600; color: var(--lo-ink-900);
  margin: 0; max-width: 22ch; text-wrap: balance;
}
.lo-steps__body {
  font-family: var(--font-reading); font-size: var(--body-lg-size); line-height: var(--body-lg-line);
  color: var(--lo-gray-700); margin: 0; max-width: 52ch; text-wrap: pretty;
}
.lo-steps__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8);
  border-top: 2px solid var(--lo-ink-900); padding-top: var(--space-7);
}
.lo-steps__item { display: flex; flex-direction: column; gap: var(--space-4); }
.lo-steps__duration {
  font-family: var(--font-label); font-size: 11px; font-weight: 500;
  letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--text-label);
}
.lo-steps__name {
  font-family: var(--font-display); font-size: 25px; line-height: 1.18; font-weight: 500;
  color: var(--lo-ink-900); margin: 0;
}
.lo-steps__text {
  font-family: var(--font-reading); font-size: var(--body-sm-size); line-height: var(--body-line);
  color: var(--lo-gray-700); margin: 0; text-wrap: pretty;
}
@media (max-width: 1023px) {
  .lo-steps__head, .lo-steps__list { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
}

/* ---- PAIN / FIX ----
   Specific pain in the reader's words, each answered with a flat "We fix that." The
   strongest pattern in the comp, and it works because the answer never elaborates. */
.lo-painfix { background: var(--lo-green-900); padding: var(--section-y) 0; }
.lo-painfix__inner {
  box-sizing: border-box; max-width: var(--container-max); margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--space-9); align-items: start;
}
.lo-painfix__col { display: flex; flex-direction: column; gap: var(--space-5); }
.lo-painfix__title {
  font-family: var(--font-display); font-size: var(--display-2-size);
  line-height: var(--display-2-line); font-weight: 600; color: var(--lo-paper-100);
  margin: 0; max-width: 22ch; text-wrap: balance;
}
.lo-painfix__body {
  font-family: var(--font-reading); font-size: var(--body-lg-size); line-height: var(--body-lg-line);
  color: var(--lo-green-100); margin: 0; max-width: 46ch; text-wrap: pretty;
}
.lo-painfix__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lo-painfix__item {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-6);
  padding: var(--space-5) 0; border-bottom: 1px solid var(--lo-green-600);
}
.lo-painfix__pain {
  font-family: var(--font-display); font-size: 21px; line-height: 1.32; font-weight: 500;
  color: var(--lo-paper-100); margin: 0;
}
.lo-painfix__fix {
  font-family: var(--font-label); font-size: 11px; font-weight: 600;
  letter-spacing: var(--label-tracking); text-transform: uppercase;
  color: var(--lo-gold-500); white-space: nowrap; flex: none;
}
.lo-painfix__closer {
  font-family: var(--font-reading); font-size: var(--body-size); line-height: var(--body-line);
  color: var(--lo-green-100); margin: var(--space-6) 0 0; max-width: 52ch;
}
@media (max-width: 1023px) { .lo-painfix__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); } }

/* ---- FLAG HERO INTERIOR ----
   The content column's interior, transcribed from HeroReelOptions.jsx. The first build
   shipped flag + credential strip and nothing between them, because it was copied from the
   SMOKE PAGE's minimal fixture instead of read from the homepage composition. */
.lo-hero__eyebrow {
  font-family: var(--font-label); font-size: 12px; font-weight: 500;
  letter-spacing: var(--label-tracking); text-transform: uppercase;
  /* --text-label, not gray-500: 12px is far under the 24px where gray-500 becomes legal. */
  color: var(--text-label); margin-bottom: var(--space-5);
}
/* 20ch, NOT 17ch, AND THIS IS ONE FIX WITH THE nowrap REMOVAL, NOT TWO. Dropping nowrap stops the
   clause overflowing, but at 17ch the box is 498px and "For Brands" is 565px at the hero's 136px
   ring -- so it broke after "For" and read "For / Brands / That Give a / Damn." Measured, not
   reasoned: line widths 180 / 366 / 481 / 423.

   I told Ryan the container needed no change. That was wrong, and it was wrong because I computed
   the break from the COLUMN width (584px) when the flag's own cap (498px) is what governs.

   Ryan's ruling is that the break falls after "Brands", which needs at least 565px. 20ch is 585px at
   the 44px lead size -- marginally wider than the 48% column, so at 1280 and up the COLUMN governs
   and this cap means "as wide as the column allows". Measured result: 565 / 563 / 342, break after
   "Brands", painted extent 677px against the reel's 874px.

   ch RATHER THAN px, because ch is measured in the LEAD's font size, which is a clamp below 1280
   (28-44px). The cap shrinks with the type instead of holding a desktop number down a phone: at 768
   it resolves to ~373px inside a 704px column, which is why nothing overflows there.

   THE COST, stated now rather than discovered later: the flag goes 191px -> 463px tall at 1440, the
   hero 692px -> 815px, and the credential strip's bottom edge moves 727px -> 924px, below an 800-900px
   fold. Ryan accepted four lines knowing the height changes. Where the strip sits is a separate call. */
.lo-flag { max-width: 20ch; }
/* The short rule under the flag. INK, not gold: the component sets --lo-ink-900. */
.lo-hero__rule {
  width: 90px; height: 2px; background: var(--lo-ink-900);
  margin: 30px 0 20px; flex: none;
}
.lo-hero__body {
  font-family: var(--font-reading); font-size: 17px; line-height: 1.6;
  color: var(--lo-gray-700); max-width: 42ch; margin: 0; text-wrap: pretty;
}
.lo-hero__actions {
  display: flex; align-items: center; gap: var(--space-6);
  flex-wrap: wrap; margin-top: 30px;
}

/* The credential strip is footed by a hairline and divided by them too. */
.lo-credstrip {
  border-top: 1px solid var(--lo-gray-300);
  padding-top: var(--space-3);
  display: flex; align-items: center; gap: var(--space-3);
  align-self: flex-start;
  list-style: none; margin: 0; padding-left: 0; padding-right: 0; padding-bottom: 0;
}
.lo-credstrip__item {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-label); font-size: 10px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--lo-gray-700);
  white-space: nowrap;
}
.lo-credstrip__divider { width: 1px; height: 18px; flex: none; background: var(--lo-gray-300); }
/* ── THE STRIP FITS BESIDE THE MARK, ON ONE LINE ─────────────────────────────────────────────────
   .lo-hero__reel is position:absolute and out of flow, so nothing in the hero knows it is there.
   The text stays clear because `.lo-hero__col { width: var(--lo-text-w) }` reserves 48% of the inner
   for it. THE STRIP IS A SIBLING OF THAT COLUMN, not a child, so it had the full width and no cap --
   and when f446a19 moved the mark from 0.12 to 0.06 on 9 Sep it ran 43px underneath. That commit
   measured the flag at both widths, found 103px, and was right about the flag.

   WHAT WAS REJECTED AND WHY IT IS WORTH KNOWING:
     capping the strip to --lo-text-w   clears by 157px and puts the strip on TWO lines. Ryan: not
                                        fine. The vertical rhythm of the hero is not a spare resource.
     padding-right on .lo-hero__inner   double-counts. The column is a PERCENTAGE of the inner, so
                                        shrinking the inner shrank the column: the flag went 584px ->
                                        317px. Shipped, screenshotted, reverted. Ledger #62.
     reel back to 0.12                  clears, and costs all 77px of mark the 9 Sep move bought.

   WHAT THIS IS. The four 12px gaps and the three 8px icon gaps are worth 32px of the 67px needed, so
   the mark only has to give back 38px rather than 77 -- 0.09 instead of 0.06, mark 643 -> 605 at
   1440. One line, no content change, and 27px of air where the suite requires 24.

   BOTH NUMBERS MOVE TOGETHER OR NEITHER DOES: --reel-x is read by .lo-hero__reel's left offset, so
   there is no second literal to drift. */
@media (min-width: 1280px) {
  .lo-credstrip { gap: 6px; }
  .lo-credstrip__item { gap: 4px; }

/* The accreditation item carries the preview's link treatment: it stands for a SET. */
.lo-credstrip__accredited { border-bottom: 1px solid var(--lo-gray-500); padding-bottom: 2px; }

/* ---- RAIL QUOTE ----
   TWO DELIBERATELY DISTINCT QUOTE TREATMENTS, BY CONTEXT. Do not unify them in either
   direction. The RAIL quote is upright reading serif, larger and airy, behind a gold spine.
   The PROOF ROW panel quote is italic and tighter. They read differently because they do
   different jobs: the rail is a standalone voice, the panel is evidence inside a case. */
.lo-rail__item .lo-quote {
  border-left: var(--spine-width) solid var(--lo-gold-500);
  padding-left: var(--space-6);
  gap: var(--space-5);
}
.lo-rail__item .lo-quote__text {
  font-family: var(--font-reading);
  font-style: normal;                 /* upright, NOT italic */
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.5;
  color: var(--lo-ink-900);
  max-width: 46ch;
  text-wrap: pretty;
}
.lo-rail__item .lo-quote__attr {
  font-family: var(--font-label); font-size: var(--label-size); font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking); text-transform: uppercase; line-height: 1.5;
  color: var(--text-label);
}
.lo-rail__item .lo-quote__attr .lo-quote__who { color: var(--lo-gray-700); }

/* The stat's third line is BODY, sentence case, not a tracked label. */
.lo-stat__note {
  font-family: var(--font-reading); font-size: var(--body-sm-size);
  line-height: var(--body-sm-line); color: var(--text-label); max-width: 34ch;
}

/* ---- THE ACCREDITATION POPOVER ----
   The reference does specify a hover behaviour, and it is richer than a tooltip: hovering or
   clicking the item opens a panel naming all THREE accreditations with a line each. That is
   why the strip can say "3x HubSpot Accredited" without promoting one over the set: the set
   is one interaction away. Click pins it open, so a keyboard or touch reader gets it too. */
.lo-credstrip__accwrap { position: relative; display: inline-flex; }
.lo-credstrip__accbtn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-label); font-size: 10px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--lo-gray-700);
  white-space: nowrap; transition: color var(--dur-fast) var(--ease);
}
.lo-credstrip__accbtn[aria-expanded="true"] { color: var(--lo-ink-900); }
.lo-credstrip__accredited { border-bottom: 1px solid var(--lo-gray-500); padding-bottom: 2px; }
.lo-credstrip__accbtn[aria-expanded="true"] .lo-credstrip__accredited { border-bottom-color: var(--icon-gold); }

.lo-credstrip__panel {
  position: absolute; bottom: calc(100% + 12px); left: 0; z-index: 20; min-width: 340px;
  background: var(--lo-paper-0);
  border: 1px solid var(--lo-gray-300);
  border-bottom: 2px solid var(--icon-gold);
  border-radius: var(--radius-1);
  box-shadow: var(--elevation-chrome);
  padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.lo-credstrip__panel[hidden] { display: none; }
.lo-credstrip__acc { display: flex; gap: var(--space-3); align-items: flex-start; }
.lo-credstrip__acctext { display: flex; flex-direction: column; gap: 3px; }
.lo-credstrip__acclabel {
  font-family: var(--font-label); font-size: 11px; font-weight: 600;
  letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--lo-ink-900);
}
.lo-credstrip__accnote {
  font-family: var(--font-reading); font-size: 14px; line-height: 1.45; color: var(--lo-gray-700);
}

/* The steps section carries an eyebrow, like every other section header in the system. */
.lo-steps__eyebrow { margin-bottom: var(--section-head-gap); }

/* The careers mark and its action row: page-local markup on Meet Lake One. */
.careersMark { height: 120px; width: auto; display: block; justify-self: center; opacity: .9; }
.lo-careers__actions { margin-top: var(--space-6); display: flex; gap: var(--space-6); align-items: center; flex-wrap: wrap; }

/* The origin modal ships in the DOM and toggles the hidden attribute, because the source
   is assigned by script rather than rendered. The package never needed this rule: React
   did not render the modal at all when closed. Here .lo-modal{display:flex} is an author
   rule and beats the UA stylesheet's [hidden]{display:none}, so without this line the
   scrim covers every page that mounts the section, at z-index 100, from first paint.
   Third instance of this shape in the port, after .lo-reel__play and .lo-credstrip__panel. */
.lo-modal[hidden] { display: none; }

/* Q19 CLOSED: ONE COLUMN. Ryan's ratification, 16 Aug 2026, and it supersedes the
   two-column interim this file shipped and the team-grid precedent that interim was
   reasoned from.

   The interim was defensible and still wrong. .lo-team__grid collapses to two at 1023, so
   two looked like the system's own answer for a four-up. But a precedent is not a decision:
   the team grid is portraits with two short lines under them, and a values card is a glyph
   plus a name plus a definition that reveals. At 390 two columns gave each card 151px, which
   holds a portrait and does not hold a value. Design ruled one column for both.

   The team grid needs its own rule here because about.css sets two at this breakpoint. */
@media (max-width: 1023px) {
  .lo-vf__grid { grid-template-columns: minmax(0, 1fr); }
  .lo-team__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Fourth [hidden] guard in this port, same shape as the origin modal: the bio scrim is
   position:fixed with display:flex, which beats the UA [hidden] rule, so without this it
   would sit over the page from first paint. */
.lo-bio__scrim[hidden] { display: none; }

/* CASE STUDY BELOW 1024. INTERIM, and it is Design's call to confirm. Q20.

   Two constructs in casestudy.css never collapse, because the reference case study carries
   no viewport meta and so only ever rendered at the 980px fallback:

   .lo-case__secinner--split stays 1.15fr/0.85fr, which at 390 leaves the prose column 132px
   wide and crushes the title, the body, all three named moves and the FeaturePanel beside it.
   .lo-case__quote stays 180px/1fr, which leaves Mary Beth's words 98px wide.

   The answer is the file's own, not an invention: every other multi-column construct in
   casestudy.css already collapses to minmax(0,1fr) at exactly this breakpoint, in the same
   media query, four out of four. .lo-case__hd, .lo-statbar__grid, .lo-case__moves and
   .lo-case__grid all do it. These two are the ones that were missed.

   The aside returns to source order rather than its pinned grid position, so it reads after
   the chapter it supports instead of being anchored beside a column that no longer exists. */
@media (max-width: 1023px) {
  .lo-case__secinner--split { grid-template-columns: minmax(0, 1fr); }
  .lo-case__secinner--split .lo-case__sechd,
  .lo-case__secinner--split .lo-case__sectitle,
  .lo-case__secinner--split .lo-case__secbody,
  .lo-case__secinner--split .lo-case__moves,
  .lo-case__secinner--split .lo-case__pull,
  .lo-case__aside { grid-column: 1; grid-row: auto; }
  .lo-case__quote { grid-template-columns: minmax(0, 1fr); }
}

/* The related-notes heading and grid on an article. Page-local markup in the package,
   transcribed here because no stylesheet carried it, the same as .careersMark. */
.relHd { font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--lo-gray-700); margin-bottom: var(--space-6); display: block; }
.relGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 1023px) { .relGrid { grid-template-columns: minmax(0, 1fr); } }
/* The FAQ answer is server-rendered open and closed by script; without this the hidden
   attribute loses to the class rule, exactly as it did for the modal. Ledger #8. */
.lo-art__faqa[hidden] { display: none; }

/* The listing's load-more row. Page-local markup in the package, transcribed because no
   stylesheet carried it, the same as .careersMark and .relHd. */
.heroActions { display: flex; gap: var(--space-6); align-items: center; flex-wrap: wrap; margin-top: var(--space-6); }

/* FOOTER COMPOSITION. Ledger #4, and the largest instance of it so far.

   The package's SiteFooter carried its whole vertical composition as INLINE STYLES on the
   React element: the band's padding and ground, and the legal row's separator, spacing and
   type. chrome.css only ever received .lo-footer__inner and .lo-footer__cols, so the build
   rendered every element the reference has, correctly ordered, with none of its spacing.
   Measured against the reference the build was missing all five of: 64px top padding, 32px
   bottom padding, the legal row's 64px margin, its 24px padding, and its 1px rule. The
   footer stood 154px against the reference's 340px.

   The bidirectional footer assertion passed throughout, because it asked which elements are
   present and never what they are worth in space. Transcribed as classes rather than inline
   so the breakpoints in chrome.css can still reach them. */
.lo-footer {
  background: var(--lo-green-900);
  padding: var(--section-y-tight) 0 var(--space-6);
}
.lo-footer__legal {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--lo-green-600);
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lo-green-200);
}
/* At phone width the legal row was hard against the menus above it. It keeps its rule and
   its breathing room and simply stops trying to sit on one line. */
@media (max-width: 767px) {
  .lo-footer__legal { flex-direction: column; gap: var(--space-4); }
}

/* The translation accordion at mobile. The panels are relocated into the list by script, so
   they become flex items in a column that was built for buttons; these give them their own
   spacing and drop the sticky offset the desktop panel carries. Scoped to the accordion mode
   attribute so desktop is untouched. */
@media (max-width: 1023px) {
  [data-lo-tr-mode="accordion"] .lo-tr__panel { margin: var(--space-4) 0 var(--space-6); }
  [data-lo-tr-mode="accordion"] .lo-tr__panel[hidden] { display: none; }
  [data-lo-tr-mode="accordion"] .lo-tr__btn { text-align: left; }
}

/* THE DISCLOSURE AFFORDANCE, matched to FaqBlock rather than invented.

   FaqBlock already ships one: .lo-art__faqmark, a 14x2 gold bar with a rotated pseudo
   element over it, so it reads as a plus at rest and a minus when open. That is this
   system's disclosure grammar, so the translation accordion takes the same mark rather than
   a second one. Named __disc because .lo-tr__mark is already the product icon inside a panel.

   Only in accordion mode. On desktop these are tabs in a tablist, and a disclosure indicator
   on a tab would promise an expansion that does not happen there. */
.lo-tr__disc { display: none; }
[data-lo-tr-mode="accordion"] .lo-tr__disc {
  display: block; position: relative; width: 14px; height: 2px;
  background: var(--lo-gold-500); flex: none; align-self: center;
}
[data-lo-tr-mode="accordion"] .lo-tr__disc::after {
  content: ''; position: absolute; inset: 0; background: var(--lo-gold-500);
  transform: rotate(90deg); transition: transform var(--dur-slow) var(--ease);
}
[data-lo-tr-mode="accordion"] .lo-tr__btn[aria-expanded="true"] .lo-tr__disc::after {
  transform: rotate(0deg);
}
[data-lo-tr-mode="accordion"] .lo-tr__btn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  /* BRIEF ITEM 07: the whole row is the target, at 48px minimum. A label-sized hit area on a
     phone is the difference between a control and a guess. */
  min-height: 48px; width: 100%;
}
/* BRIEF ITEM 07, the 600ms cross-fade, matched to the proof rail's timing.
   AS AN ANIMATION, NOT A TRANSITION, and that is forced by the markup: the panel is toggled
   with the `hidden` attribute, which is the right semantics for a disclosure and which cannot
   be transitioned — the element is not rendered until the moment it is. A keyframe on reveal
   runs at exactly the same duration and leaves `hidden` doing its job. */
@keyframes lo-tr-panel-in { from { opacity: 0 } to { opacity: 1 } }
[data-lo-tr-mode="accordion"] .lo-tr__panel:not([hidden]) {
  animation: lo-tr-panel-in 600ms var(--ease) both;
}
@media (prefers-reduced-motion: reduce) {
  [data-lo-tr-mode="accordion"] .lo-tr__panel:not([hidden]) { animation: none; }
}
[data-lo-tr-mode="accordion"] .lo-tr__btntext { min-width: 0; }

/* Reduced motion swaps the state without animating the rotation. Applied to BOTH marks, so
   the two disclosures stay one grammar under that preference as well as at rest. */
@media (prefers-reduced-motion: reduce) {
  .lo-art__faqmark::after,
  [data-lo-tr-mode="accordion"] .lo-tr__disc::after { transition: none; }
}