/* ======================================================================
   letterbatch — clean build
   Rebuilt from measurements of the approved design, not from its markup.
   Every value below was read off the replica; where a number looks odd it
   is because it is measured rather than chosen.
   ====================================================================== */

:root {
  /* ink */
  --ink:          #1A1A1A;   /* hero copy, nav */
  --ink-warm:     #1E1B17;   /* pill label — measured warmer than body ink */
  --ink-70:       rgba(26, 26, 26, .74);

  /* grounds */
  --paper:        #F2EFE6;
  --paper-warm:   #E9E3D6;
  --soft-blue:    #DCEBF2;

  --serif: "Source Serif 4", Georgia, serif;
  --sans:  Figtree, system-ui, -apple-system, sans-serif;

  --container: 1240px;
  --gutter:    40px;
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.3;
  color: var(--ink);
  background-color: var(--paper);
  /* The sheet: fibre relief lit from 45deg. feDiffuseLighting over fractal
     noise is what makes this read as a material rather than as speckle;
     multiply keeps it from washing the colour out. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='p' x='0%25' y='0%25' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='5' stitchTiles='stitch' result='n'/%3E%3CfeDiffuseLighting in='n' lighting-color='white' surfaceScale='2'%3E%3CfeDistantLight azimuth='45' elevation='60'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  background-size: 400px 400px;
  background-attachment: fixed;
  background-blend-mode: multiply;
}

/* fine tooth over everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .10;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.45' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
@media print { body::before { display: none; } }

/* ---------------- nav ---------------- */
/* Measured: 1056x63, 16px from the top, centred. */
.lb-nav {
  position: sticky;
  top: 16px;
  z-index: 100;
  width: 100%;
  max-width: 1056px;
  height: 63px;
  margin: 16px auto 0;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--paper);
  border-radius: 12px;
}

.lb-nav__brand {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--ink);
  text-decoration: none;
}

.lb-nav__links {
  display: flex;
  gap: 32px;
  margin: 0 auto;          /* centred in the remaining space */
}
.lb-nav__links a {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.lb-nav__links a:hover { opacity: .7; }

/* ---------------- buttons ---------------- */
/* Measured: 206x52, padding 16/24, radius 8, 2px ink border, soft-blue fill. */
.lb-btn {
  display: inline-block;
  padding: 16px 24px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--soft-blue);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: background-color .25s;
}
.lb-btn:hover { background: #CFE2EC; }

.lb-nav .lb-btn { padding: 10px 16px; }

/* ---------------- hero ---------------- */
/* Vertical rhythm, measured: 112 / h1 / 24 / sub / 64 / pills / 64 / cta / 112 */
.lb-hero {
  padding: 112px var(--gutter);
  text-align: center;
}
.lb-hero__inner { max-width: var(--container); margin: 0 auto; }

/* 92px at 1512 and at 1920 — so it is capped, not endlessly fluid.
   6.1vw is the slope through 1280 (78.08) and 991 (60.45); floor 40px. */
.lb-hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(40px, 6.1vw, 92px);
  line-height: .85;
  font-weight: 400;
  letter-spacing: -.05em;
  color: var(--ink);
}
.lb-hero h1 em { font-style: italic; }

.lb-hero__sub {
  max-width: 700px;
  margin: 24px auto 0;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--ink);
}

/* ---------------- pills ---------------- */
/* Anchors only. There is deliberately no selected state — a scroll-spy fill
   was built, reviewed and removed (owner, 2026-07-31). Do not add one back. */
.lb-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin-top: 64px;
}
.lb-pills a {
  padding: 8px 16px;
  border: 1px solid rgba(30, 27, 23, .82);
  border-radius: 999px;
  background: var(--paper);
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--ink-warm);
  text-decoration: none;
  transition: background-color .25s, border-color .25s;
}
.lb-pills a:hover {
  background: var(--paper-warm);
  border-color: rgba(30, 27, 23, 1);
}

.lb-hero__cta { margin-top: 64px; }

/* ---------------- responsive ----------------
   Measured off the approved design: the sub drops to 18px at 767, the pills
   step 20 -> 16 at 991 and -> 14 at 479. The h1 is fluid and needs no step. */
/* Measured, not guessed: the hero's leading and trailing gap steps
   112 -> 96 -> 72, the pill padding steps 8/16 -> 8/12 -> 6.4/9.6, and the
   pills and CTA gaps drop 64 -> 24 at 767. The 6.4/9.6 is what the design
   actually computes; it is a ratio of the base, not a typo. */
@media (max-width: 991px) {
  .lb-hero { padding-block: 96px; }
  .lb-hero__sub { font-size: 20px; }
  .lb-pills a { font-size: 16px; padding: 8px 12px; }
}
@media (max-width: 767px) {
  :root { --gutter: 20px; }
  .lb-hero { padding-block: 72px; }
  .lb-hero__sub { font-size: 18px; }
  .lb-pills { margin-top: 24px; }
  .lb-hero__cta { margin-top: 24px; }
  .lb-nav { max-width: none; margin-inline: var(--gutter); }
  .lb-nav__links { display: none; }
}
@media (max-width: 479px) {
  .lb-pills a { font-size: 14px; padding: 6.4px 9.6px; }
  /* The design narrows the pill row here rather than letting it run the full
     gutter width, so the five pills break into a tighter block. Measured at
     320px, which is what makes the hero 510px tall at this width instead of
     473 — the extra row is the whole difference. */
  .lb-pills { max-width: 320px; margin-inline: auto; }
}

/* ======================================================================
   MERGE — the dark-ground system
   A bottle-green block sitting at the top of a soft-blue band, with the
   security note on the blue below it. Establishes the pattern that Group,
   Validate and the closing block reuse.
   ====================================================================== */
:root {
  --bottle-green: #143B32;
  --panel-radius: clamp(28px, 3vw, 52px);
  --icon:         #5369AD;
}

/* 1240 is the CONTENT width — the gutter lives on the block, not inside
   this box. Putting the padding here made every grid 80px too narrow. */
.lb-container { max-width: var(--container); margin: 0 auto; }

/* ---- the soft-blue band -------------------------------------------- */
/* Grain here uses MULTIPLY. On a light ground multiply registers; soft-light
   does not — measured, not assumed. The green block below deliberately has
   NO grain: soft-light is inert that dark, and the owner ruled on 2026-07-31
   to leave the greens flat rather than switch their blend mode. */
.lb-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--panel-radius);
  color: var(--ink-warm);
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, .28), transparent 38%),
    radial-gradient(circle at 82% 84%, rgba(74, 111, 132, .08), transparent 44%),
    var(--soft-blue);
}
.lb-band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .20;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}
.lb-band > * { position: relative; z-index: 1; }

/* ---- the green block ------------------------------------------------ */
.lb-green {
  border-radius: var(--panel-radius);
  padding: 112px 40px;
  color: var(--paper);
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, .025), transparent 34%),
    radial-gradient(circle at 82% 78%, rgba(0, 0, 0, .10), transparent 42%),
    var(--bottle-green);
}

.lb-tag {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 100px;
  background: var(--paper);
  font-size: 20px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--bottle-green);
}

/* The copy column is 760px, not the full 1240 — the cards use the full
   width, the sentence above them does not. That contrast is the layout. */
.lb-green__copy { max-width: 760px; }

.lb-green h2 {
  margin: 24px 0 0;
  font-family: var(--serif);
  font-size: 64px;
  line-height: .95;
  font-weight: 400;
  letter-spacing: -.03em;
  color: var(--paper);
}
/* Inline, not block. Validate keeps its italic mid-sentence; Merge authors
   its own break with a <br> so both can share this rule. */
.lb-green h2 em { font-style: italic; }

/* Shrink-to-fit + balance. The measured widths (726 in a 760 column, 653 in
   727, then full width once the text fills the line) only make sense as a
   fit-content box with balanced lines — not as a fixed max-width. */
.lb-green__support {
  width: fit-content;
  text-wrap: balance;
  margin: 24px 0 0;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 500;
  color: rgba(242, 239, 230, .78);
}

/* ---- cards ---------------------------------------------------------- */
.lb-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 48px;
}
.lb-card {
  padding: 64px 38px;
  border: 1px solid rgba(242, 239, 230, .18);
  border-radius: 32px;
  background: rgba(7, 28, 24, .08);
  transition: background-color .25s, border-color .25s, transform .25s;
}
.lb-card:hover {
  background: rgba(242, 239, 230, .035);
  border-color: rgba(242, 239, 230, .30);
  transform: translateY(-2px);
}
.lb-card__icon {
  width: 48px;
  height: 48px;
  background-color: var(--icon);
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}
.lb-card h3 {
  width: fit-content;
  text-wrap: balance;
  margin: 32px 0 0;
  font-family: var(--serif);
  font-size: 32px;
  line-height: .95;
  font-weight: 400;
  letter-spacing: -.04em;
  color: var(--paper);
}
.lb-card p {
  margin: 32px 0 0;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 500;
  color: rgba(242, 239, 230, .78);
}

/* ---- security note, on the blue ------------------------------------- */
.lb-security { padding: 80px 40px; }
.lb-security__wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  max-width: 960px;
  margin: 0 auto;
}
.lb-security__copy { max-width: 480px; }
.lb-security h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 48px;
  line-height: .95;
  font-weight: 400;
  letter-spacing: -.03em;
  color: var(--ink-warm);
}
.lb-security p {
  margin: 24px 0 0;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 500;
  color: rgba(30, 27, 23, .76);
}
.lb-security__right { text-align: right; }
/* The chips touch — no gap. They are labels, not controls: no fill, no
   hover, not links. The owner reverted an earlier version that widened this
   block to fit longer labels, so the two-chip 280px measure is deliberate. */
.lb-security__chips { display: flex; gap: 0; justify-content: flex-end; }
.lb-security__chips span {
  padding: 11px 16px;
  border: 1px solid rgba(30, 27, 23, .82);
  border-radius: 992px;
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  color: var(--ink-warm);
}
.lb-security__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 29px;
  padding: 16px 24px;
  border: 1px solid rgba(30, 27, 23, .82);
  border-radius: 8px;
  background: var(--paper);
  font-size: 16px;
  line-height: 1;
  font-weight: 600;
  color: var(--ink-warm);
  text-decoration: none;
  transition: background-color .25s;
}
.lb-security__btn:hover { background: var(--paper-warm); }
.lb-security__btn::before {
  content: "";
  width: 16px; height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Every number below is measured off the approved design, including the ones
   that look arbitrary. The 4.8px/12px tag padding and the 22.799px line-height
   are what it computes — ratios of a base, not hand-picked values. */
@media (max-width: 991px) {
  .lb-cards { grid-template-columns: repeat(2, 1fr); }
  .lb-green { padding: 96px 40px; }
  .lb-cards { margin-top: 40px; }
  .lb-security { padding: 64px 40px; }
  .lb-security__wrap { flex-direction: column; }
  .lb-security__right { text-align: left; }
  .lb-security__chips { justify-content: flex-start; }
}
@media (max-width: 767px) {
  .lb-green { padding: 72px 20px; }
  .lb-security { padding: 48px 20px; }
  .lb-green h2 { font-size: 40px; }
  .lb-tag { font-size: 16px; padding: 4.8px 12px; }
  .lb-green__support { font-size: 18px; }
  .lb-cards { gap: 8px; margin-top: 24px; }
  .lb-card { padding: 32px 16px; }
  .lb-card__icon + h3 { margin-top: 24px; }
  .lb-card h3 { font-size: 24px; margin-top: 24px; }
  .lb-card p { margin-top: 24px; }
  .lb-security h3 { font-size: 32px; }
  .lb-card { border-radius: 24px; }
}

/* ======================================================================
   THE WARM PAPER SHEET
   Sections lying on this read as a different stock from the page ground.
   The negative margin is the fix for the corner cut-outs: a rounded block
   above or below would otherwise reveal the page ground through its corner
   and read as a patch of different paper. The sheet runs BEHIND by exactly
   one corner radius, with matching padding so no content moves.
   ====================================================================== */
.lb-sheet {
  position: relative;
  z-index: 0;
  margin-block: calc(-1 * var(--panel-radius));
  padding-block: var(--panel-radius);
  color: var(--ink-warm);
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, .34), transparent 38%),
    radial-gradient(circle at 84% 82%, rgba(112, 88, 55, .045), transparent 46%),
    var(--paper);
}
.lb-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}
.lb-sheet > * { position: relative; z-index: 1; }

/* ======================================================================
   GROUP — media panel + accordion
   ====================================================================== */
.lb-split { padding: 64px 40px; }
.lb-split__grid {
  display: grid;
  grid-template-columns: 3fr 2fr;   /* 667.19 / 444.81 of 1240 */
  gap: 128px;
  /* Centred, NOT padded. The 43px that appears above the pill at 1512 is the
     centring offset against a taller panel, not a top padding. Hard-coding it
     as padding matched at 1512 and broke at 1100, where the copy column is the
     taller of the two and the offset should vanish. */
  align-items: center;
  max-width: var(--container);
  margin: 0 auto;
}

.lb-panel { position: relative; align-self: start; }
.lb-panel__media { display: block; width: 100%; height: auto; border-radius: 40px; }
/* Centred video mark. The real product video replaces the placeholder at the
   same intrinsic ratio, so nothing about the layout moves when it lands. */
.lb-panel::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(56px, 14%, 120px);
  aspect-ratio: 3 / 2;
  pointer-events: none;
  background-color: rgba(30, 27, 23, .42);
  -webkit-mask: var(--vm) center / contain no-repeat;
          mask: var(--vm) center / contain no-repeat;
  --vm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='1.5' y='3.5' width='22' height='17' rx='3.5'/%3E%3Cpath d='M23.5 9.5 L34.5 4.5 L34.5 19.5 L23.5 14.5 Z'/%3E%3C/svg%3E");
}

/* No min-width:0 here. The nowrap accordion labels give this column a
   min-content floor, and that floor is exactly what widens the copy side
   between 992 and ~1300. Adding min-width:0 let it collapse to 357px. */
.lb-split__copy .lb-tag { background: var(--paper-warm); color: var(--ink-warm); border: 1px solid rgba(30,27,23,.82); }
.lb-split h2 {
  margin: 24px 0 0;
  font-family: var(--serif);
  font-size: 64px;
  line-height: .95;
  font-weight: 400;
  letter-spacing: -.03em;
  color: var(--ink-warm);
}
.lb-split h2 em { font-style: italic; }
.lb-split__support {
  margin: 24px 0 0;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 500;
  color: rgba(30, 27, 23, .74);
}

/* ---- accordion: ~20 lines of CSS and JS instead of a component bundle ---- */
/* 16px of gap, not a margin on the item: a margin would also hang off the
   last row. Measured pitch is 66 = 48 row + 2 rule + 16. */
.lb-acc { display: flex; flex-direction: column; gap: 16px; margin-top: 48px; }
.lb-acc__item { border-bottom: 2px solid var(--ink); }
.lb-acc__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 8px 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--serif);
  font-size: 32px;
  line-height: .95;
  font-weight: 400;
  /* -.03em, NOT -.04em. At -.04em the label measures ~10px narrower, which
     lowers the column's min-content, narrows the whole copy side between 992
     and ~1300, and re-wraps the support line to a fourth row. One tracking
     value, four visible consequences. */
  letter-spacing: -.03em;
  color: #222;
  /* Their labels do not wrap. That raises the column's min-content and is why
     the grid widens the copy side between 992 and ~1300 instead of breaking a
     heading. Matching it keeps the intermediate widths identical. */
  white-space: nowrap;
}
.lb-acc__chev {
  flex: none;
  width: 32px; height: 32px;
  background-color: currentColor;
  transition: transform .25s ease;
  -webkit-mask: var(--cm) center / contain no-repeat;
          mask: var(--cm) center / contain no-repeat;
  --cm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.lb-acc__item.is-open .lb-acc__chev { transform: rotate(180deg); }
.lb-acc__body { overflow: hidden; height: 0; transition: height .3s ease; }
.lb-acc__body p {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 500;
  color: rgba(30, 27, 23, .74);
}

@media (max-width: 991px) {
  .lb-split__grid { grid-template-columns: 1fr; gap: 64px; }
  .lb-panel { order: 2; }
  .lb-split__copy { order: 1; }
  .lb-split { padding-block: 48px; }
  .lb-acc { margin-top: 40px; }
}
@media (max-width: 767px) {
  .lb-split { padding: 32px 20px; }
  .lb-split__grid { gap: 48px; }
  .lb-split h2 { font-size: 40px; }
  .lb-split__support { font-size: 18px; }
  .lb-panel__media { border-radius: 24px; }
  .lb-acc { margin-top: 24px; }
  .lb-acc__row { font-size: 28px; }
}
@media (max-width: 479px) {
  .lb-split__grid { gap: 32px; }
  .lb-acc { gap: 8px; }          /* pitch 58, not 66 */
  .lb-acc__row { font-size: 24px; }
}

/* ======================================================================
   ATTACH — centred copy over a three-tab panel
   ====================================================================== */
.lb-tabsec { padding: 192px 40px 208px; }
.lb-tabsec__inner { max-width: var(--container); margin: 0 auto; }

/* align-items:center makes each child shrink to fit, which is why the
   headline measures 488 inside a 608 column while the support line fills it. */
.lb-tabsec__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 608px;
  margin: 0 auto;
  text-align: center;
}
.lb-tabsec__copy .lb-tag { background: var(--paper-warm); color: var(--ink-warm); border: 1px solid rgba(30,27,23,.82); }
.lb-tabsec h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 64px;
  line-height: .95;
  font-weight: 400;
  letter-spacing: -.03em;
  /* fit-content + an AUTHORED break. text-wrap:balance rebalances the lines
     but leaves the box at the full column width, so the measured 488 only
     comes back once the break is in the markup and the box shrinks to the
     longest line. Change the headline and you re-place the <br>. */
  width: fit-content;
  color: var(--ink-warm);
}
.lb-tabsec h2 em { font-style: italic; }
/* 72px below, not the 24px gap: the design puts a 48px bottom margin here AND
   a trailing empty flex item that contributes one more 24px gap. Same result,
   one declaration instead of a phantom element. */
.lb-tabsec__support {
  margin: 0 0 72px;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 500;
  color: rgba(30, 27, 23, .74);
}

.lb-tabs { margin-top: 48px; }
.lb-tabs__menu { display: flex; }
.lb-tabs__link {
  flex: 1;
  padding: 24px 0;
  border: 0;
  border-bottom: 2px solid #E4E4D0;   /* measured; the active one goes to ink */
  background: none;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 32px;
  line-height: .95;
  font-weight: 400;
  text-align: left;
  color: #222;
  white-space: nowrap;   /* the labels do not wrap; the menu keeps one row */
  transition: border-color .25s;
}
.lb-tabs__link.is-active { border-bottom-color: var(--ink); }

/* 1fr / 2.2fr — the text column is deliberately the minority share. */
.lb-tabs__pane {
  display: none;
  align-items: center;
  gap: 64px;
  margin-top: 64px;
}
.lb-tabs__pane.is-active { display: flex; }
/* The text column is a FIXED 364px and the media takes whatever is left —
   not a 1 : 2.2 ratio. Measured: media is 812 / 772 / 592 at 1512 / 1280 / 1100,
   which is exactly (container - 364 - 64) each time. */
.lb-tabs__text { flex: 0 0 364px; }
/* Radius on the WRAPPER with overflow:clip, not on the image — that is how the
   design does it, and it keeps a real video clipped to the same corner. */
.lb-tabs__media { flex: 1 1 auto; position: relative; border-radius: 40px; overflow: clip; }
.lb-tabs__media img { display: block; width: 100%; height: auto; }
.lb-tabs__media::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(56px, 12%, 120px);
  aspect-ratio: 3 / 2;
  pointer-events: none;
  background-color: rgba(30, 27, 23, .42);
  -webkit-mask: var(--vm) center / contain no-repeat;
          mask: var(--vm) center / contain no-repeat;
  --vm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='1.5' y='3.5' width='22' height='17' rx='3.5'/%3E%3Cpath d='M23.5 9.5 L34.5 4.5 L34.5 19.5 L23.5 14.5 Z'/%3E%3C/svg%3E");
}
.lb-tabs__text h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 48px;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: normal;   /* measured: no tracking on this one */
  color: var(--ink-warm);
}
.lb-tabs__text p {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 500;
  color: rgba(30, 27, 23, .74);
}

@media (max-width: 991px) {
  .lb-tabsec { padding: 144px 40px 120px; }
  .lb-tabs__pane { flex-direction: column; align-items: stretch; }
  .lb-tabs__text { flex: none; max-width: 560px; }   /* constant once stacked */
  /* Below 992 the labels DO wrap to two rows — nowrap is a desktop-only
     behaviour, and leaving it on made every tab a single 57px line. */
  .lb-tabs__link { padding: 16px 0; white-space: normal; }
}
@media (max-width: 767px) {
  .lb-tabsec { padding: 96px 20px 80px; }
  .lb-tabsec h2 { font-size: 40px; }
  .lb-tabsec__support { font-size: 18px; }
  .lb-tabs__link { font-size: 24px; padding: 16px 0; }
  .lb-tabs__text h3 { font-size: 32px; }
  .lb-tabs__media { border-radius: 24px; }
  .lb-tabs__pane { gap: 32px; }
}
@media (max-width: 479px) {
  .lb-tabs__link { font-size: 24px; }
}

/* ---- Validate: the green block standing on its own ------------------- */
/* Same ground and cards as Merge; it is not inside a blue band, so the
   radius and the 128px top gap live here. */
.lb-green--solo {
  border-radius: var(--panel-radius);
  padding: 128px 40px 112px;
}
.lb-green--solo .lb-green__copy { max-width: none; }
.lb-green--solo h2 { width: fit-content; }        /* one line, 519 wide */
.lb-green--solo .lb-green__support { max-width: 480px; }
.lb-btn-paper {
  display: inline-block;
  margin-top: 24px;
  padding: 16px 24px;
  border: 1px solid var(--paper);   /* measured 50 tall, not 48 */
  border-radius: 8px;
  background: var(--paper);
  font-size: 16px;
  line-height: 1;
  font-weight: 600;
  color: var(--bottle-green);
  text-decoration: none;
  transition: background-color .25s;
}
.lb-btn-paper:hover { background: var(--paper-warm); }
.lb-cards--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 991px) {
  .lb-green--solo { padding: 96px 40px; }
  .lb-cards--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .lb-green--solo { padding: 72px 20px; }
  .lb-cards--3 { grid-template-columns: 1fr; }
}

/* ---- Export: split layout again, but STRETCHED ----------------------- */
/* Group centres its columns; this one stretches, so the media panel grows to
   the copy column's height instead of keeping its own ratio. Gap is 112, not
   Group's 128. Same component, two genuinely different alignments.
   The sheet is ON this section, not wrapping it, so the padding has to carry
   the bleed as well as the section's own 112. */
.lb-split--stretch { padding: calc(var(--panel-radius) + 112px) 40px; }
.lb-split--stretch .lb-split__grid { gap: 112px; align-items: stretch; }
/* The panel is NOT stretched — it holds a near-square aspect ratio at every
   width, and the grid row takes whichever of panel or copy is taller. That
   single fact explains all of it: 682 at 1512 (panel wins), 666 at 1280 (copy
   wins), 692 at 1100 (copy wins again). I first built this as a stretch with
   an out-of-flow image, which matched at 1512 and was wrong everywhere else.
   The image is absolute so it crops to the ratio instead of setting it. */
.lb-split--stretch .lb-panel {
  align-self: start;
  position: relative;
  aspect-ratio: 677 / 682;
  border-radius: 40px;
  overflow: clip;
}
.lb-split--stretch .lb-panel__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* No trailing margin. I added one to explain a 16px gap at 1512, but that gap
   was the PANEL being taller than the copy, not the accordion being longer.
   The margin then made the copy column 16px too tall at 1100 and 1280, where
   the copy is the one that wins. Same accordion as Group. */
.lb-split--stretch .lb-acc { margin-top: 56px; }
.lb-btn-warm {
  display: inline-block;
  margin-top: 24px;
  padding: 16px 24px;
  border: 1px solid var(--paper-warm);
  border-radius: 8px;
  background: var(--paper-warm);
  font-size: 16px;
  line-height: 1;
  font-weight: 600;
  color: var(--ink-warm);
  text-decoration: none;
  transition: background-color .25s;
}
.lb-btn-warm:hover { background: #DED6C4; }

@media (max-width: 991px) { .lb-split--stretch { padding: calc(var(--panel-radius) + 96px) 40px; } }
@media (max-width: 767px) {
  .lb-split--stretch { padding: calc(var(--panel-radius) + 72px) 20px; }
  .lb-split--stretch .lb-panel { border-radius: 24px; }
}

/* ======================================================================
   CLOSING BLOCK — dusty-cobalt uncoated stock
   ====================================================================== */
.lb-close {
  isolation: isolate;
  position: relative;
  border-radius: 80px;
  padding: 268px 40px 200px;
  text-align: center;
  color: var(--paper);
  /* PRE-COMPENSATED ground. The grain below is soft-light and the turbulence
     tile sits above 50% grey, so it lightens whatever it covers by ~9 per
     channel. #5369AD painted here would composite to a washed-out pastel;
     #4A5FA5 composites to the cobalt that was approved. Re-solve by
     measurement if the tile or the opacity changes. */
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, .055), transparent 38%),
    radial-gradient(circle at 84% 82%, rgba(25, 31, 70, .15), transparent 46%),
    #4A5FA5;
}
/* Grain at .70, not the .038 a photographic grain file would want: procedural
   turbulence is far lower contrast, and .038 measured a 0.07 change against a
   flat ground — nothing. .70 lands at 1.82, matching the soft-blue section.
   The two bottle-green blocks are deliberately left flat (owner ruling):
   soft-light cannot register on a ground that dark. */
.lb-close::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: .70;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='cg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23cg)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}
.lb-close__inner { position: relative; z-index: 1; }

/* Fluid so TWO ROWS hold at every width, not just desktop. The longest
   sentence measures 10.24x its font size in Source Serif 4, so dividing the
   available column by 10.6 keeps it on one row with margin. RE-SOLVE if the
   serif changes or this headline gets longer. */
.lb-close h2 {
  width: fit-content;      /* 1229 — the longest row, not the full 1240 cap */
  max-width: 1240px;
  margin: 0 auto;
  font-family: var(--serif);
  font-size: min(120px, calc((100vw - 80px) / 10.6));
  line-height: .85;
  font-weight: 400;
  letter-spacing: -.03em;
  color: var(--paper);
}
.lb-close h2 .lb-line { display: block; }   /* one sentence per row */

.lb-close__support {
  max-width: 620px;
  margin: 64px auto 0;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 500;
  color: rgba(242, 239, 230, .82);
}
.lb-close__cta { margin-top: 24px; }
.lb-close .lb-btn {
  background: var(--paper);
  border-color: var(--paper);
  color: #465A99;
}
.lb-close .lb-btn:hover { background: var(--paper-warm); border-color: var(--paper-warm); color: #3F518A; }

/* ======================================================================
   FOOTER — one line on paper
   ====================================================================== */
.lb-footer { padding: 80px 40px 50px; }
.lb-footer__row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  max-width: var(--container);
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--ink);
}
.lb-footer__row a { color: inherit; text-decoration: none; }
.lb-footer__row a:hover { text-decoration: underline; }

@media (max-width: 991px) {
  .lb-close { padding: 147px 40px 109px; }
}
@media (max-width: 767px) {
  .lb-close { border-radius: 40px; padding: 98px 20px 73px; }
  .lb-close__support { font-size: 18px; }
  .lb-footer { padding: 80px 20px 50px; }
}
@media (max-width: 479px) {
  .lb-close { padding: 96px 20px 72px; }
}

/* ---- mobile nav ------------------------------------------------------
   The links were simply hidden below 767 with no way to reach them — a real
   defect, not a design choice. A button reveals them in a panel under the bar. */
.lb-nav { position: relative; }
.lb-nav__toggle {
  display: none;
  flex: none;
  width: 40px;
  height: 40px;
  margin-left: auto;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  cursor: pointer;
}
.lb-nav__toggle span,
.lb-nav__toggle span::before,
.lb-nav__toggle span::after {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: var(--ink);
  transition: transform .2s ease, opacity .2s ease;
}
.lb-nav__toggle span { position: relative; }
.lb-nav__toggle span::before,
.lb-nav__toggle span::after { content: ""; position: absolute; left: 0; }
.lb-nav__toggle span::before { top: -6px; }
.lb-nav__toggle span::after  { top: 6px; }
.lb-nav__toggle[aria-expanded="true"] span { background: transparent; }
.lb-nav__toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.lb-nav__toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 767px) {
  .lb-nav__toggle { display: block; }
  /* The desktop CTA moves into the panel so the bar stays one clean row. */
  .lb-nav > .lb-btn { display: none; }
  .lb-nav__links {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 16px;
    border-radius: 12px;
    background: var(--paper);
    box-shadow: 0 8px 24px rgba(30, 27, 23, .12);
  }
  .lb-nav__links.is-open { display: flex; }
  .lb-nav__links a { padding: 10px 4px; font-size: 18px; }
  .lb-nav__links .lb-btn { margin-top: 8px; text-align: center; }
}

/* ---- about page ------------------------------------------------------ */
.lb-about { padding: 160px 40px 200px; }
.lb-about__copy {
  max-width: 864px;
  margin: 0 auto;
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: -.03em;
  color: var(--ink-warm);
}
.lb-about__copy p { margin: 0 0 41.6px; }   /* one line of leading between paragraphs */
.lb-about__copy p:last-child { margin-bottom: 0; }

@media (max-width: 991px) { .lb-about { padding: 128px 40px 160px; } }
@media (max-width: 767px) {
  .lb-about { padding: 96px 20px 120px; }
  .lb-about__copy { font-size: 24px; }
  .lb-about__copy p { margin-bottom: 31.2px; }
}

/* The panel carries its own CTA for mobile; hide it on desktop, where the bar's
   own button is visible instead. */
@media (min-width: 768px) { .lb-nav__links .lb-btn { display: none; } }


/* ======================================================================
   COMPLEXITY SCALE — lifted from the pricing calculator's slider
   Their geometry exactly: 608 wrapper, 6px track, 32px handle, a sentence
   above with an underlined value and a caption below. Rebuilt on a native
   <input type=range> rather than the Finsweet library, so it is keyboard
   operable for free and there is nothing to load.
   ====================================================================== */
.lb-scale { max-width: 608px; margin: 48px auto 0; }
.lb-scale__label {
  margin: 0 0 12px;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--ink-warm);
  text-align: left;
}
.lb-scale__value {
  border-bottom: 1px solid rgba(30, 27, 23, .4);
  font-weight: 700;
}

.lb-scale__track { position: relative; height: 32px; display: flex; align-items: center; }
/* The visible rail and the filled portion sit under a transparent native input,
   which stays the real control — it keeps arrow keys, Home/End and screen
   readers working without a line of code. */
.lb-scale__rail {
  position: absolute; left: 0; right: 0; height: 6px;
  border-radius: 999px; background: rgba(30, 27, 23, .18);
}
.lb-scale__fill {
  position: absolute; left: 0; height: 6px;
  border-radius: 999px; background: var(--icon);
  transition: width .2s ease;
}
.lb-scale__input {
  position: relative; z-index: 1;
  width: 100%; height: 32px; margin: 0;
  background: none; -webkit-appearance: none; appearance: none; cursor: pointer;
}
.lb-scale__input::-webkit-slider-runnable-track { height: 32px; background: none; }
.lb-scale__input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 32px; height: 32px;
  border: 2px solid var(--ink-warm);
  border-radius: 999px;
  background: var(--paper);
  cursor: grab;
}
.lb-scale__input::-moz-range-thumb {
  width: 28px; height: 28px;
  border: 2px solid var(--ink-warm); border-radius: 999px; background: var(--paper);
}
.lb-scale__input:focus-visible { outline: 2px solid var(--icon); outline-offset: 4px; }

.lb-scale__caption {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 500;
  color: rgba(30, 27, 23, .74);
  text-align: left;
}
/* Reserve the tallest caption so a longer scenario cannot nudge the panel. */
.lb-scale__caption { min-height: 36px; }

/* ---- the panel: every state stacked in ONE grid cell ------------------
   This is the whole answer to "will the page collapse". All three panes
   occupy the same cell, so the container is always as tall as the TALLEST
   one and the height cannot change when the slider moves. Inactive panes are
   hidden with visibility, not display, so they keep contributing that height.
   Measured before this change, the old tabs jumped 19px at 991 and 18px at
   767 between states. */
.lb-tabs__panes { display: grid; margin-top: 64px; }
.lb-tabs__panes > .lb-tabs__pane {
  grid-area: 1 / 1;
  margin-top: 0;
  display: flex;
  visibility: hidden;
  opacity: 0;
  transition: opacity .25s ease;
}
.lb-tabs__panes > .lb-tabs__pane.is-active { visibility: visible; opacity: 1; }

@media (max-width: 767px) {
  .lb-scale { margin-top: 32px; }
  .lb-scale__label { font-size: 20px; }
  .lb-tabs__panes { margin-top: 32px; }
}


/* ======================================================================
   THE CALCULATOR GRID — lifted from the pricing block
   Their exact columns: 608px control / 500px panel, 132px gap, aligned top,
   stacking below 992. The POINT of the block is that the control and the
   thing it controls are on screen together; a centred slider with the panel
   underneath loses that entirely, which is what my first attempt did.
   ====================================================================== */
.lb-calc {
  display: grid;
  grid-template-columns: 608px 500px;
  gap: 132px;
  align-items: start;
  max-width: var(--container);
  margin: 64px auto 0;
  text-align: left;
}
.lb-calc__left { min-width: 0; }
.lb-calc .lb-scale { max-width: none; margin: 0; }

/* Every panel state in ONE grid cell; hidden ones keep their height, so the
   row cannot resize as the slider moves. */
.lb-calc__right { display: grid; }
.lb-calc__pane { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .25s ease; }
.lb-calc__pane.is-active { visibility: visible; opacity: 1; }
.lb-calc__pane .lb-tabs__media { flex: none; }

@media (max-width: 991px) { .lb-calc { grid-template-columns: 1fr; gap: 48px; margin-top: 48px; } }
@media (max-width: 767px) { .lb-calc { gap: 32px; margin-top: 32px; } }


/* ======================================================================
   SCENARIO PICKER — a plain select over a full-width panel
   The pricing slider was built to drag through hundreds of numeric values
   against a stat card. Three named scenarios against a video is a different
   problem: clicking beats dragging, and the video wants the whole 1240
   rather than the 500 that block reserves for its card.
   ====================================================================== */
.lb-picker { max-width: var(--container); margin: 64px auto 0; text-align: center; }
.lb-picker__label {
  margin: 0;
  font-size: 24px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--ink-warm);
}
.lb-picker__field { display: inline-block; }
.lb-picker__select {
  appearance: none; -webkit-appearance: none;
  margin-left: 4px;
  padding: 0 30px 2px 0;
  border: 0;
  border-bottom: 1px solid rgba(30, 27, 23, .4);
  border-radius: 0;
  background: none;
  font-family: var(--sans);
  font-size: 24px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--ink-warm);
  cursor: pointer;
  /* the chevron is a mask so it inherits the ink colour */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1B17' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 22px 22px;
}
.lb-picker__select:focus-visible { outline: 2px solid var(--icon); outline-offset: 4px; }

.lb-picker__caption {
  max-width: 720px;
  margin: 12px auto 0;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 500;
  color: rgba(30, 27, 23, .74);
  min-height: 36px;   /* reserve the tallest caption */
}

/* Full width now, and still one grid cell so the height cannot move. */
.lb-calc__right {
  display: grid;
  max-width: var(--container);
  margin: 48px auto 0;
}
.lb-calc__pane .lb-tabs__media { border-radius: 40px; overflow: clip; }

@media (max-width: 767px) {
  .lb-picker { margin-top: 32px; }
  .lb-picker__label, .lb-picker__select { font-size: 20px; }
  .lb-calc__right { margin-top: 32px; }
  .lb-calc__pane .lb-tabs__media { border-radius: 24px; }
}