/* ==========================================================================
   lp.css: /lp-safety-projections only.

   EVERY rule is scoped under `.lp-safety`, which tools/lp_page.py stamps on
   <main>. That is deliberate and not decoration: this page shares class names
   with the rest of the site (.eyebrow, .btn, .uctile, .iconbar), and an
   unscoped rule here would reach all 95 other pages. The utility lane paid for
   that lesson already; see the `u-<slug>` note in tools/utility_page.py.

   Sizes come from live measured in a real browser
   (`python tools/parity.py lp-safety-projections --outline --full`).
   Colours come from pixels sampled out of live's own screenshot, NOT from a
   computed-style probe. On a Wix page the fill is painted by a sibling div
   behind the text, so a probe reports transparent for something plainly red.

   Live's page is 1567 wide. Sizes below are given in px where live is fixed
   and the box must not drift, and in clamp() where the page has to survive a
   laptop; the ratios are held either way.
   ========================================================================== */

.lp-safety {
  /* live's own values, sampled from the screenshot */
  --lp-chip: #212121;          /* segment pill fill; white on it is 13.6:1 */
  --lp-band: #e8e8e8;          /* ALL PRODUCTS band */
  --lp-rule: #2d2727;          /* the 1px rules under each heading */
  --lp-gap: 20px;              /* live's gallery gutter, everywhere */
}

/* The rule that sits under a display heading. Live draws it 1px in the body
   ink, not in a light grey, and it runs the width of the copy column. */
.lp-safety .lprule {
  border: 0; border-top: 1px solid var(--lp-rule);
  margin: 1.6rem 0 1.9rem; width: 100%;
}

/* --------------------------------------------------------------------------
   BAND 0: hero. Copy left, media right, a 1px ink divider between them.

   The divider is how live builds it too, though not how it looks in the DOM:
   live paints a full-width dark panel and covers all but one column of it with
   two white boxes. Ours draws the line directly: same result, one element.
   -------------------------------------------------------------------------- */
.lp-safety .lphero {
  background: #fff;
  padding-block: clamp(2.5rem, 11.4vw, 182px) clamp(2.5rem, 17.2vw, 275px);
}
.lp-safety .lphero__inner {
  display: grid; grid-template-columns: 1fr 1px 1.055fr;
  column-gap: clamp(1.75rem, 3.4vw, 3.4rem); align-items: end;
}
/* All three items are placed EXPLICITLY. The ::before divider is itself a grid
   item, so leaving the other two to auto-placement put the copy in column 3
   and wrapped the media onto a second row: the hero measured 1614 tall against
   live's 1304, with the video below the copy instead of beside it. */
.lp-safety .lphero__inner::before {
  content: ""; grid-column: 2; grid-row: 1; align-self: stretch;
  background: var(--lp-rule);
}
.lp-safety .lphero__copy {
  grid-column: 1; grid-row: 1;
  min-width: 0; padding-block: clamp(1rem, 2.4vw, 2.5rem);
}

/* live: 22.2px kicker, 74.4px h1, 16px body. Ours holds those at 1600 and
   steps down rather than re-wrapping the headline. */
.lp-safety .lphero .eyebrow { font-size: clamp(1.05rem, .55vw + .85rem, 1.39rem); }
.lp-safety .lphero h1 {
  font-size: clamp(2.9rem, 4vw + .8rem, 4.65rem);
  line-height: 1.0; letter-spacing: -0.025em; margin: .5rem 0 0;
}
.lp-safety .lphero__copy > p { font-size: 1rem; line-height: 1.6; margin: 0 0 1.15rem; }

.lp-safety .lphero__segh {
  font-size: clamp(1.05rem, .55vw + .85rem, 1.39rem);
  line-height: 1.25; margin: 2.1rem 0 1rem; color: var(--lp-chip);
}

/* Segment pills: live 100x30, fill #212121, white 12px, fully rounded.
   min-width rather than a fixed width, so a longer word cannot be clipped. */
.lp-safety .lpchips {
  list-style: none; margin: 0 0 1.9rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.lp-safety .lpchip {
  background: var(--lp-chip); color: #fff; border-radius: var(--r-pill);
  min-width: 100px; height: 30px; padding: 0 .35rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .75rem; line-height: 1; text-align: center; white-space: nowrap;
}

.lp-safety .lpcta { font-size: .875rem; }

/* --- hero media: the YouTube embed, then the gallery strip ---------------- */
.lp-safety .lphero__media {
  grid-column: 3; grid-row: 1;
  min-width: 0; display: grid; align-content: start;
  gap: clamp(1rem, 1.4vw, 1.15rem);
}
.lp-safety .lpvideo {
  position: relative; aspect-ratio: 687 / 386; overflow: hidden;
}
.lp-safety .lpvideo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* The justified strip. Live: five columns, each exactly 443 tall, 20px gaps,
   scrolling sideways. Every picture is the rendition live displays, so its
   natural size IS its drawn size, so nothing is cropped and nothing is stretched,
   which is the no-crop rule satisfied by construction rather than by CSS.
   `--h` on each <img> is its height in live's 443 unit; --striph scales the
   whole strip from that single number. */
.lp-safety .lpstrip { --striph: 443px; position: relative; min-width: 0; }
.lp-safety .lpstrip__track {
  display: flex; gap: calc(var(--lp-gap) / 443 * var(--striph));
  height: var(--striph); overflow-x: auto; scroll-snap-type: x proximity;
  scroll-behavior: smooth; scrollbar-width: none;
}
.lp-safety .lpstrip__track::-webkit-scrollbar { display: none; }
.lp-safety .lpstrip__col {
  flex: 0 0 auto; height: 100%; scroll-snap-align: start;
  display: flex; flex-direction: column;
  gap: calc(var(--lp-gap) / 443 * var(--striph));
}
.lp-safety .lpstrip__row {
  display: flex; flex: 0 0 auto;
  gap: calc(var(--lp-gap) / 443 * var(--striph));
}
/* square corners, the way live draws them, and object-fit:none because the
   file is already exactly the size it is drawn at */
.lp-safety .lpstrip img {
  display: block; width: auto; height: calc(var(--h) / 443 * var(--striph));
  object-fit: none;
}
/* the arrows are the shared .ucnav; they only need re-anchoring inside a
   strip that has no negative gutter to hang in */
.lp-safety .lpstrip .ucnav--prev { left: 10px; }
.lp-safety .lpstrip .ucnav--next { right: 10px; }

/* --------------------------------------------------------------------------
   BAND 2: APPLICATION IDEAS. The shared .usecases + .uccarousel pair, with
   only the tile proportions and the one non-conforming picture handled here.
   -------------------------------------------------------------------------- */
/* live carries each feature label as two elements, one per line; the shared
   .iconbar__label is a single span, so the two lines are spans inside it */
.lp-safety .iconbar__label > span { display: block; }

.lp-safety .lpideas { padding-block: clamp(2.5rem, 4.5vw, 5.75rem); }
/* live's proportions: copy 395, carousel 977, gutter 115 */
.lp-safety .lpideas .usecases {
  grid-template-columns: 1fr 2.47fr; column-gap: clamp(2rem, 7.2vw, 115px);
}
/* proximity, not the shared mandatory snapping. With mandatory the track
   settled at scrollLeft 40 on load, which left the Previous arrow showing over
   the first tile before anyone had scrolled anywhere. */
.lp-safety .lpideas .uccarousel__track {
  grid-auto-columns: calc((100% - 2 * var(--lp-gap)) / 2.92);
  gap: var(--lp-gap); scroll-snap-type: x proximity;
}
.lp-safety .lpideas .duo__copy .eyebrow,
.lp-safety .lpideas .duo__copy p { font-size: 1rem; line-height: 1.6; }
/* live sets this h2 at 34.5px, well under the site default. The selector is
   deliberately as deep as site.css's own
   `.section:has(> .wrap > .usecases) .duo__copy h2`, which a two-class
   rule loses to no matter which stylesheet is linked last. */
.lp-safety .lpideas .usecases .duo__copy h2 {
  font-size: clamp(1.7rem, 1.4vw + 1.15rem, 2.156rem); line-height: 1.08;
}
.lp-safety .lpideas .uctile { aspect-ratio: 321 / 428; }
.lp-safety .lpideas .uctile video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Live stretches this GIF from 256x446 into a 321x428 box, a 30% distortion of
   its own drawing. Ours letterboxes it on the tile ground instead: no crop, no
   stretch. This is the one place on the page where matching live and the
   standing no-crop rule genuinely conflict: flagged, not decided quietly.
   The ground is sampled from the GIF's OWN edge pixels (183,176,171), not a
   dark neutral: seen as a picture rather than measured, near-black bars beside
   a light illustration read as a broken tile next to two clean ones. */
.lp-safety .lpideas .lptile--contain { object-fit: contain; background: #b7b0ab; }
/* Live's tile caption starts 35px below the picture's top edge; the shared
   component pins its box to the very top and pads the text down instead. The
   two look the same and do not read the same: with both boxes starting at the
   same y, every caption interleaved with its own picture in the reading order,
   where live lists all five pictures and then all five captions. The scrim
   moves to a pseudo-element so the tile top stays shaded. */
.lp-safety .lpideas .uctile::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 40%; z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.lp-safety .lpideas .uctile__label {
  top: 2.2rem; padding-top: 0; background: none; z-index: 2;
  font-size: clamp(.95rem, .6vw + .78rem, 1.25rem);
}

/* --------------------------------------------------------------------------
   BAND 3: ALL PRODUCTS. Live's band is #e8e8e8 and the cards carry no
   surface of their own: they sit straight on the band, which is why there is
   no card background or border here. Ink on #e8e8e8 is 12.1:1.
   -------------------------------------------------------------------------- */
.lp-safety .lpprod {
  background: var(--lp-band);
  padding-block: clamp(2.75rem, 9.4vw, 150px) clamp(2.75rem, 10.8vw, 173px);
  text-align: center;
}
.lp-safety .lpprod__head {
  font-size: clamp(1.15rem, .5vw + .95rem, 1.375rem);
  margin: 0 auto; color: #000; letter-spacing: -0.01em;
}
.lp-safety .lpprod__rule {
  border: 0; border-top: 2px solid var(--lp-chip);
  width: 309px; max-width: 70%; margin: .55rem auto clamp(2.5rem, 4.5vw, 4.4rem);
}
.lp-safety .lpprod__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2vw, 2rem); align-items: start;
}
.lp-safety .lpcard { text-align: center; min-width: 0; }
/* A fixed HEIGHT with width:auto is what keeps four different cut-outs on one
   baseline. Driving off width instead lets a wider shot sit taller. */
.lp-safety .lpcard__shot { display: grid; place-items: end center; height: 288px; }
.lp-safety .lpcard__shot img {
  display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain;
}
.lp-safety .lpcard__name {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin: 1.35rem 0 .5rem; color: var(--red);
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1rem, .4vw + .88rem, 1.125rem);
}
/* the glyph beside each name, lifted from live and driven as a mask so it
   takes its colour from the name it sits beside */
.lp-safety .lpcard__glyph {
  flex: 0 0 auto; width: 25px; height: 25px; background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.lp-safety .lpcard__body {
  font-size: .875rem; line-height: 1.6; margin: 0; color: var(--ink);
}

/* --------------------------------------------------------------------------
   BAND 4: the red cue bar. 97 tall on live, white bold type centred between
   two white chevron badges.
   -------------------------------------------------------------------------- */
.lp-safety .lpband { background: var(--red); }
.lp-safety .lpband__inner {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.4rem); min-height: 97px; padding-block: 1rem;
}
.lp-safety .lpband__inner p {
  margin: 0; color: #fff; text-align: center;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1rem, .55vw + .85rem, 1.245rem); letter-spacing: .01em;
}
.lp-safety .lpband__chev {
  flex: 0 0 auto; width: 33px; height: 33px; background-color: #fff;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
@media (max-width: 700px) { .lp-safety .lpband__chev { display: none; } }

/* --------------------------------------------------------------------------
   BAND 5: closing. A full-bleed still behind copy on the left and the
   booking panel on the right.
   -------------------------------------------------------------------------- */
.lp-safety .lpclose { position: relative; isolation: isolate; overflow: hidden; }
.lp-safety .lpclose__art { position: absolute; inset: 0; z-index: -1; }
/* This one still IS a background: it is live's own 1567x562 plate, drawn to
   fill the band. It carries no subject matter to crop (it is a pale grey
   field with two diagonals), so cover is right here and is not the no-crop
   rule being bent. */
.lp-safety .lpclose__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-safety .lpclose__inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem); align-items: center;
  min-height: 562px; padding-block: clamp(2.5rem, 4vw, 3.5rem);
}
.lp-safety .lpclose__copy { min-width: 0; max-width: 543px; }
.lp-safety .lpclose .eyebrow { font-size: clamp(1.05rem, .55vw + .85rem, 1.39rem); }
.lp-safety .lpclose h2 {
  font-size: clamp(2.6rem, 3.4vw + .8rem, 4.625rem);
  line-height: 1.0; letter-spacing: -0.025em; margin: .5rem 0 0;
}
.lp-safety .lpclose__copy > p { font-size: 1rem; line-height: 1.65; margin: 0; }
.lp-safety .lpclose .lprule { max-width: 528px; }

/* Live's booking iframe here resolves to "https://undefined/": the embed
   never initialises, so there is nothing to replicate. This panel occupies the
   same 593x322 box and sends the reader to /set-up-meeting, which is the
   site's booking route today. Swap in the HubSpot scheduler at go-live. */
.lp-safety .lpbook {
  justify-self: center; width: min(593px, 100%); min-height: 322px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); padding: clamp(1.75rem, 3vw, 2.75rem);
  display: flex; flex-direction: column; justify-content: center; gap: .6rem;
}
.lp-safety .lpbook__head {
  margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.25rem, 1vw + .95rem, 1.6rem); color: var(--ink);
}
.lp-safety .lpbook__note { margin: 0 0 1.1rem; color: var(--ink-3); font-size: .97rem; }
.lp-safety .lpbook .btn { align-self: flex-start; }

/* --------------------------------------------------------------------------
   Narrower screens. The hero divider is a desktop device: below 1000px the two
   columns stack, so a vertical line between them would sit across the page.
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .lp-safety .lphero__inner { grid-template-columns: 1fr 1px 1.35fr; }
  .lp-safety .lpstrip { --striph: 380px; }
}
@media (max-width: 1000px) {
  .lp-safety .lphero__inner { grid-template-columns: 1fr; row-gap: 2.5rem; }
  .lp-safety .lphero__inner::before { display: none; }
  /* The desktop rules place these EXPLICITLY in columns 1 and 3, to stop the
     ::before divider stealing a slot. Explicit placement outlives a
     one-column track list: the media stayed in column 3, which created two
     implicit tracks, and the grid computed as 0px 0px 392px. The copy
     column was ZERO WIDE, so the segment pills rendered as 20px slivers and
     the CTA as a squashed ellipse with its label cut off. The placement has to
     be undone here, not just the track list. */
  .lp-safety .lphero__copy,
  .lp-safety .lphero__media { grid-column: 1; grid-row: auto; }
  .lp-safety .lphero__inner { align-items: start; }
  .lp-safety .lpclose__inner { grid-template-columns: 1fr; min-height: 0; }
  .lp-safety .lpclose__copy { max-width: none; }
  .lp-safety .lpprod__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
}
@media (max-width: 620px) {
  .lp-safety .lpstrip { --striph: 300px; }
  .lp-safety .lpcard__shot { height: 220px; }
  .lp-safety .lpchip { min-width: 0; }
}


/* phone: the four product cards stack rather than sitting two-up at 165px */
@media (max-width: 560px) {
  .lp-safety .lpprod__grid { grid-template-columns: minmax(0, 1fr); }
  .lp-safety .lpcard__shot { height: 240px; }
}

/* The APPLICATION IDEAS carousel sets its own track above, at 2.92 tiles to
   match live's desktop rhythm. On a phone that made each tile 106px wide.
   One tile plus a peek, the same as every other carousel on the site. */
@media (max-width: 760px) {
  .lp-safety .lpideas .uccarousel__track { grid-auto-columns: 86%; }
}