/* =========================================================================
   Ledgerstone brand layer — sits on top of Bootstrap 5 (LT-R20…R23).

   Rule for this file: override Bootstrap's IDENTITY, never its GEOMETRY.
   Spacing scale, grid, breakpoints and utilities are Bootstrap's and are left
   alone — those are the parts that were working. What changes is colour,
   typeface, radius, and the removal of shadow.

   Budget: under 250 lines. If it grows past that, the answer is a Bootstrap
   utility, not another rule here.
   ========================================================================= */

/* --- Fonts. Bootstrap does not solve font-swap CLS; LT-02's metrics stand. -- */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-var.73839fb93f67.woff2") format("woff2-variations");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400.be0b5518718f.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Schibsted Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 107.5%; ascent-override: 90.8%; descent-override: 24.0%; line-gap-override: 0%;
}

:root {
  --ls-page: #FAF8F4;
  --ls-surface: #FFFFFF;
  --ls-surface-2: #F1EEE7;
  --ls-border: #EBE7DE;
  --ls-border-2: #CFC9BD;
  --ls-ink: #232019;
  --ls-ink-2: #38342B;
  --ls-muted: #6E6759;
  --ls-accent: #A9702F;
  --ls-accent-text: #8A5A24;
  --ls-accent-press: #6F4818;
  --ls-good: #4E6144;
  --ls-focus: rgba(169, 112, 47, .18);
  --ls-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Bootstrap's own variables, repointed. Identity, not geometry. */
  --bs-body-bg: var(--ls-page);
  --bs-body-color: var(--ls-ink);
  --bs-emphasis-color: var(--ls-ink);
  --bs-secondary-color: var(--ls-muted);
  --bs-border-color: var(--ls-border);
  --bs-primary: var(--ls-accent-text);
  --bs-primary-rgb: 138, 90, 36;
  --bs-link-color: var(--ls-accent-text);
  --bs-link-color-rgb: 138, 90, 36;
  --bs-link-hover-color: var(--ls-accent-press);
  --bs-border-radius: 4px;
  --bs-border-radius-sm: 3px;
  --bs-border-radius-lg: 6px;
  --bs-body-font-family: "Schibsted Grotesk", "Schibsted Fallback", Arial, sans-serif;
  --bs-body-font-size: 1.0625rem;
  --bs-body-line-height: 1.62;
  --bs-heading-color: var(--ls-ink);
}

/* --- Type: tighter tracking than Bootstrap's defaults, which is most of the
       difference between "system font page" and "designed page". ------------ */
h1, h2, h3, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  letter-spacing: -.026em; font-weight: 600; line-height: 1.08; text-wrap: balance;
}
h4, h5, h6 { letter-spacing: -.012em; font-weight: 600; }
.display-4, .display-5, .display-6 { font-weight: 600; }
.lead { font-size: 1.15rem; line-height: 1.55; color: var(--ls-ink-2); font-weight: 400; }

/* The one type device that is ours: a mono eyebrow with a trailing hairline. */
.ls-eyebrow {
  display: flex; align-items: center; gap: .75rem;
  font-family: var(--ls-mono); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ls-muted); margin-bottom: .75rem;
}
.ls-eyebrow::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--ls-border-2); }
.ls-eyebrow--plain::after { display: none; }

.ls-mono { font-family: var(--ls-mono); font-variant-numeric: tabular-nums; }
.ls-muted { color: var(--ls-muted); }

/* --- Grounds. Alternating page/surface with hairlines, per §3.3. ---------- */
.ls-ground-page { background: var(--ls-page); }
.ls-ground-surface { background: var(--ls-surface); border-block: 1px solid var(--ls-border); }
.ls-ground-sunk { background: var(--ls-surface-2); border-block: 1px solid var(--ls-border); }

/* --- Hairlines instead of shadow soup. ----------------------------------- */
.card { border-color: var(--ls-border); box-shadow: none; background: var(--ls-surface); }
.ls-ground-surface .card { background: var(--ls-page); }
.ls-rule { border: 0; border-top: 1px solid var(--ls-border); opacity: 1; }

/* --- Buttons. Measured: white on --ls-accent is 4.16:1 and fails AA, so the
       fill is --ls-accent-text (5.88:1), pressing to --ls-accent-press. ----- */
.btn { font-weight: 600; letter-spacing: -.004em; }
.btn-primary {
  --bs-btn-bg: var(--ls-accent-text); --bs-btn-border-color: var(--ls-accent-text);
  --bs-btn-hover-bg: var(--ls-accent-press); --bs-btn-hover-border-color: var(--ls-accent-press);
  --bs-btn-active-bg: var(--ls-accent-press); --bs-btn-active-border-color: var(--ls-accent-press);
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--ls-accent-text); --bs-btn-disabled-border-color: var(--ls-accent-text);
}
.btn-secondary {
  --bs-btn-bg: var(--ls-ink); --bs-btn-border-color: var(--ls-ink);
  --bs-btn-hover-bg: var(--ls-ink-2); --bs-btn-hover-border-color: var(--ls-ink-2);
  --bs-btn-active-bg: var(--ls-ink-2); --bs-btn-active-border-color: var(--ls-ink-2);
  --bs-btn-color: var(--ls-page); --bs-btn-hover-color: var(--ls-page); --bs-btn-active-color: var(--ls-page);
}

/* --- Focus: bronze, visible, never removed. ------------------------------ */
:focus-visible {
  outline: 2px solid var(--ls-accent); outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--ls-focus) !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--ls-accent); box-shadow: 0 0 0 5px var(--ls-focus);
}

/* --- Header. ------------------------------------------------------------- */
/* Sticky, and on its own ground so the edge reads at any scroll position.
   --ls-surface-2 is a palette token, not a new colour. */
.ls-header {
  position: sticky; top: 0; z-index: 1030;
  background: var(--ls-surface-2);
  border-bottom: 1px solid var(--ls-border-2);
}
/* Anchor targets must clear the sticky header or the heading lands under it. */
:target { scroll-margin-top: 80px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Fixed header height, flex-centred. Size the mark in CSS by height only —
   setting both width and height as SVG attributes distorts the wordmark. */
.ls-navbar { min-height: 60px; }
@media (min-width: 992px) { .ls-navbar { min-height: 72px; } }

.ls-brand { display: flex; align-items: center; }
.ls-brand svg {
  display: block; height: 26px; width: auto;
  /* Optical, not mathematical: the wordmark baseline sits at y=68 in a 96-unit
     box, so its visual mass falls below centre. Nudge up to sit on the nav
     baseline. */
  transform: translateY(-2px);
}
@media (min-width: 992px) { .ls-brand svg { height: 30px; } }
.navbar-toggler { border-color: var(--ls-border-2); }
.navbar-toggler:focus { box-shadow: none; }
.ls-nav-link {
  color: var(--ls-ink); text-decoration: none; font-weight: 500; font-size: .96rem;
  padding: .6rem 0; display: block;
}
.ls-nav-link:hover { color: var(--ls-accent-text); }
.ls-nav-login { color: var(--ls-accent-text); }

/* --- Positioning strip: slim and bordered, not a padded section (§3.4). --- */
.ls-strip {
  background: var(--ls-ink); color: #E8E3D9;
  font-family: var(--ls-mono); font-size: .68rem; letter-spacing: 0;
}
/* Never wraps: a wrapped row leaves a dangling divider and the strip stops
   reading as one line. Below lg it scrolls horizontally instead, and is
   keyboard-reachable so the scroll is not mouse-only. */
.ls-strip ul {
  flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none;
  /* Fade the trailing edge so it is visible that there is more to the right.
     Removed once the row fits, so no phantom fade on wide screens. */
  -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
          mask-image: linear-gradient(to right, black 85%, transparent 100%);
}
@media (min-width: 1200px) {
  .ls-strip ul { -webkit-mask-image: none; mask-image: none; }
}
.ls-strip ul::-webkit-scrollbar { display: none; }
.ls-strip li { display: flex; align-items: center; gap: .75rem; white-space: nowrap; }
.ls-strip li::after { content: ""; width: 1px; height: .85rem; background: #8D867A; }
.ls-strip li:last-child::after { display: none; }

/* --- The ledger fragment: the hero's signature. Structure of a derivation,
       drawn in the product's own vocabulary. No figures, nothing invented. -- */

/* --- The tally. Four ink strokes and a closing bronze strike (style guide
       §01), which is also the shape of the four-step process. --------------- */
@keyframes ls-strike { to { stroke-dashoffset: 0; } }

/* --- Flow diagram (D3). HTML and CSS, never SVG: SVG <text> does not wrap,
       so a label one word longer than its shape overflows silently at every
       viewport. HTML text wraps, inherits the type scale, and is selectable. */

/* Connector. A chevron built from borders, rotated when the layout stacks. */

/* --- Hero slideshow ------------------------------------------------------
   The frame is sized by the column, not by the image: fixed aspect ratio, and
   the slide covers it. That is what keeps the top and bottom edges level with
   the headline and the buttons at every width, whatever the source image is. */
/* Not a flex column, and the frame does not grow.
   It was `display:flex; height:100%` with `flex:1 1 auto` on the frame, inside
   a hero row using align-items-stretch. The row is as tall as the text column,
   so the frame was stretched past its own aspect-ratio whenever the headline
   wrapped to an extra line — at 992px the box came out 1.48:1 against a 2:1
   image and object-fit:cover ate the right quarter, which is the tenant-shares
   panel. It measured correctly at 1440 only because that is the one width
   where the two columns happened to match. aspect-ratio governs now. */
.ls-slides { display: block; }
.ls-slides__frame {
  position: relative; width: 100%;
  /* 2:1, matching the captures. Keep new captures at 2:1, or change both
     together — a mismatch here is a silent crop, not a visible error. */
  aspect-ratio: 2 / 1; max-height: 420px;
  border: 1px solid var(--ls-border-2); border-radius: var(--bs-border-radius);
  overflow: hidden; background: var(--ls-surface-2);
}
.ls-slides__item {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; visibility: hidden; transition: opacity .45s ease;
}
.ls-slides__item.is-current { opacity: 1; visibility: visible; }
.ls-slides__item img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
@media (prefers-reduced-motion: reduce) { .ls-slides__item { transition: none; } }

.ls-slides__controls {
  display: flex; align-items: center; justify-content: center;
  gap: .75rem; padding-top: .75rem;
}
.ls-slides__arrow {
  width: 2rem; height: 2rem; flex: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--ls-border-2);
  border-radius: 50%; cursor: pointer;
}
.ls-slides__arrow:hover { border-color: var(--ls-accent); }
.ls-slides__arrow span {
  width: .45rem; height: .45rem;
  border-left: 1.5px solid var(--ls-ink-2); border-bottom: 1.5px solid var(--ls-ink-2);
  transform: rotate(45deg); margin-left: .15rem;
}
.ls-slides__arrow--next span { transform: rotate(-135deg); margin: 0 .15rem 0 0; }
.ls-slides__dots { display: flex; gap: .4rem; }
.ls-slides__dot {
  width: 1.6rem; height: .25rem; padding: 0; border: 0; cursor: pointer;
  border-radius: 2px; background: var(--ls-border-2);
}
.ls-slides__dot.is-current { background: var(--ls-accent); }

/* --- Pricing cards. One size, set here rather than inline per card. ------- */
.ls-price { font-family: var(--ls-mono); font-size: 1.65rem; line-height: 1; letter-spacing: -.02em; }
.ls-price__per { font-family: var(--bs-body-font-family); font-size: .9rem; color: var(--ls-muted); }
.ls-price__band {
  font-family: var(--ls-mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ls-muted);
}

/* --- Tables and disclosures. --------------------------------------------- */
.table > :not(caption) > * > * { background: transparent; }
/* Post tables on phones: tighter type, and a scroll shadow on whichever edge
   has more table behind it (background-attachment: local scrolls with the
   content, so the shadow disappears when the end is reached). */
@media (max-width: 767.98px) {
  .table-responsive { font-size: .85rem; }
  .table-responsive th, .table-responsive td { padding: .45rem .5rem; }
  /* A squeezed column wraps every cell into a tall row; give the table room. */
  .ls-prose .table-responsive > table { min-width: 34rem; }
  .table-responsive {
    background:
      linear-gradient(to right, var(--ls-page) 30%, rgba(250,248,244,0)) 0 0 / 40px 100%,
      linear-gradient(to left, var(--ls-page) 30%, rgba(250,248,244,0)) 100% 0 / 40px 100%,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.28), rgba(0,0,0,0)) 0 0 / 18px 100%,
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.28), rgba(0,0,0,0)) 100% 0 / 18px 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
  .table-responsive .ls-table thead th { background: transparent; border-bottom: 1px solid var(--ls-border-2); }
}
.ls-table thead th {
  font-family: var(--ls-mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 400; color: var(--ls-muted);
  background: var(--ls-surface-2);
}
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.ls-disclosure { border-block: 1px solid var(--ls-border-2); }
.ls-faq { border-bottom: 1px solid var(--ls-border); }
.ls-faq:first-of-type { border-top: 1px solid var(--ls-border); }
.ls-marker { width: .5rem; height: .5rem; margin-right: .25rem; border-right: 1.5px solid var(--ls-accent); border-bottom: 1.5px solid var(--ls-accent); transform: rotate(45deg); flex: none; }
details[open] > summary .ls-marker { transform: rotate(-135deg); }

/* --- Form. ---------------------------------------------------------------- */
.form-control, .form-select { background: var(--ls-surface); border-color: var(--ls-border-2); }
.form-label { font-weight: 600; font-size: .92rem; }
.hp-field { position: absolute !important; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%); border: 0; }
.ls-pending { border-left: 3px solid #9E3F2C; background: var(--ls-surface-2); }
.ls-pending strong { font-family: var(--ls-mono); color: #9E3F2C; font-weight: 400; }

/* --- Sticky mobile contact bar (§3.2). ----------------------------------- */
.ls-sticky-cta {
  position: fixed; inset: auto 0 0 0; z-index: 1020;
  background: var(--ls-page); border-top: 1px solid var(--ls-border-2);
  padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
}
@media (max-width: 767.98px) { body { padding-bottom: 4.75rem; } }

/* --- Skip link. ----------------------------------------------------------- */
.ls-skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 1080;
  background: var(--ls-ink); color: var(--ls-page); padding: .7rem 1rem;
  border-radius: var(--bs-border-radius); text-decoration: none; transition: top .12s ease-out;
}
.ls-skip:focus { top: .75rem; color: var(--ls-page); }

/* --- Long-form post body. -------------------------------------------------- */
.ls-prose { max-width: 68ch; }
.ls-prose h2 { font-size: 1.5rem; margin-top: 2.5rem; margin-bottom: .75rem; }
.ls-prose h3 { font-size: 1.15rem; margin-top: 1.75rem; margin-bottom: .5rem; }
.ls-prose p, .ls-prose li { color: var(--ls-ink-2); }
.ls-prose blockquote {
  border-left: 3px solid var(--ls-accent); padding-left: 1rem;
  margin: 1.5rem 0; color: var(--ls-ink-2);
}

/* --- Capability icons. Stroke-only, inherit colour, one size. ------------- */
.ls-icon {
  width: 22px; height: 22px; display: block; flex: none;
  fill: none; stroke: var(--ls-accent-text); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.ls-step__n {
  font-family: var(--ls-mono); font-size: .78rem; color: var(--ls-accent-text);
  border: 1px solid var(--ls-accent); border-radius: 50%;
  width: 1.6rem; height: 1.6rem; display: inline-flex;
  align-items: center; justify-content: center; flex: none;
}


/* --- Footer: one compact row, then a legal line. -------------------------- */
.ls-footer { background: var(--ls-surface-2); }
.ls-footer a { color: var(--ls-ink-2); text-decoration: none; }
.ls-footer a:hover { color: var(--ls-accent-text); text-decoration: underline; }
/* Inline link rows: label, then the links separated by hairline pips. */
.ls-footer__brand { font-size: .88rem; }
.ls-footer__row {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .25rem 1rem; font-size: .9rem; padding: .15rem 0;
}
.ls-footer__label {
  font-family: var(--ls-mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ls-muted);
  min-width: 5.5rem;
}
.ls-footer__row li + li:not(.ls-footer__label) { position: relative; }
.ls-footer__row li + li + li::before {
  content: ""; position: absolute; left: -.55rem; top: .35em;
  width: 1px; height: .8em; background: var(--ls-border-2);
}

/* Legal text, not navigation — sized so it never competes with the links. */
.ls-footer__legal { font-size: .72rem; line-height: 1.45; color: var(--ls-muted); }


/* --- Alerts. Bootstrap's component, our palette. -------------------------- */
.ls-alert {
  --bs-alert-border-radius: var(--bs-border-radius);
  border: 1px solid var(--ls-border-2);
  border-left-width: 3px;
  background: var(--ls-surface-2);
  color: var(--ls-ink-2);
}
.ls-alert--error { border-left-color: #9E3F2C; }
.ls-alert--error .ls-icon { stroke: #9E3F2C; }
.ls-alert--warn { border-left-color: var(--ls-accent); }
.ls-alert--ok { border-left-color: var(--ls-good); }
.ls-alert--ok .ls-icon { stroke: var(--ls-good); }
.ls-alert p:last-child, .ls-alert ul:last-child { margin-bottom: 0; }
.ls-field-error { color: #9E3F2C; }


/* --- Sign-in page. A single centred card on the page ground. ------------- */
/* Vertical breathing room without a full-height flex trick: the header and
   footer stay where they are and the card sits in a generous band. */
.ls-login { padding-block: 3rem 4rem; }
@media (min-width: 768px) { .ls-login { padding-block: 5rem 6rem; } }
.ls-login .card { box-shadow: 0 1px 2px rgba(35, 32, 25, .04); }
.ls-login__labelrow {
  display: flex; flex-wrap: wrap; gap: .25rem 1rem;
  align-items: baseline; justify-content: space-between;
}
/* The checkbox is the one Bootstrap component the purged build does not
   carry (nothing else on the site has one), so it is styled here rather than
   re-adding .form-check to the vendor file. */
.ls-check {
  display: flex; align-items: center; gap: .6rem;
  font-size: .92rem; color: var(--ls-ink-2); cursor: pointer;
}
.ls-check input {
  width: 1rem; height: 1rem; flex: none; margin: 0;
  accent-color: var(--ls-accent); cursor: pointer;
}
.ls-check input:focus-visible {
  outline: 2px solid var(--ls-accent); outline-offset: 2px;
}
.ls-login__foot {
  margin: 1.25rem 0 0; text-align: center;
  font-size: .92rem; color: var(--ls-muted);
}


/* --- Inline-style replacements. ------------------------------------------ */
/* The CSP is style-src 'self' with no 'unsafe-inline', so a style="" attribute
   is silently dropped by the browser. Everything that was written inline lives
   here instead. Found when the sign-in card ignored its max-width; the contact
   section had been full-container-width for the same reason. */
.ls-measure { max-width: 736px; }
.ls-measure--narrow { max-width: 436px; }
.ls-panel-top { border-top: 2px solid var(--ls-border-2); }
.ls-panel-top--accent { border-top-color: var(--ls-accent); }
.ls-eyebrow--accent { color: var(--ls-accent-text); }
.ls-cluster-label { letter-spacing: .1em; }
.ls-thanks-links li { padding: .35rem 0; border-bottom: 1px solid var(--ls-border); }
.ls-thanks-links li:last-child { border-bottom: 0; }


/* --- Merged product/how-it-works section. -------------------------------- */
/* The step card's screenshot. 2:1 to match the captures, hairline not shadow. */
/* Supporting capabilities as chips, where three cards used to be. */
.ls-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.ls-chips li {
  font-size: .85rem; color: var(--ls-ink-2);
  border: 1px solid var(--ls-border-2); border-radius: 2rem;
  padding: .25rem .75rem; background: var(--ls-page);
}
/* Mid-page CTA: a sentence with a button, never a banner. */
.ls-midcta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem;
  border-top: 1px solid var(--ls-border); padding-top: 1.25rem;
}
.ls-midcta span { color: var(--ls-ink-2); }
/* An id to jump to that is not itself a layout box. */
.ls-anchor-alias { display: block; position: relative; top: -72px; height: 0; }
/* Slideshow caption. Below the frame rather than over the screenshot: an
   overlay covers the UI the caption is pointing at. */
.ls-slides__caption {
  margin: .6rem 0 0; font-size: .86rem; line-height: 1.45;
  color: var(--ls-muted); font-family: var(--ls-mono);
}

/* --- Long-post jump list. ------------------------------------------------ */
.ls-toc { border-left: 2px solid var(--ls-border-2); padding: .1rem 0 .1rem 1rem; }
.ls-toc li { padding: .18rem 0; font-size: .92rem; }

/* --- In-post screenshot. -------------------------------------------------- */
.ls-postshot { margin-inline: 0; }
.ls-postshot picture { display: block; border: 1px solid var(--ls-border-2);
  border-radius: var(--bs-border-radius); overflow: hidden; }
.ls-postshot img { width: 100%; height: auto; display: block; }
.ls-postshot figcaption { margin-top: .5rem; font-family: var(--ls-mono);
  font-size: .8rem; color: var(--ls-muted); }

/* --- Sticky demo bar. ----------------------------------------------------- */
/* Phones and tablets only. The purged Bootstrap build carries d-md-none but
   not d-lg-none, and the breakpoint belongs with the component anyway. */
.ls-sticky-cta { display: none; }
#content { position: relative; }
.ls-sticky-sentinel { position: absolute; top: 0; left: 0;
  width: 1px; height: 60vh; pointer-events: none; }
@media (max-width: 991.98px) {
  .ls-sticky-cta[hidden] { display: none; }
  .ls-sticky-cta {
    display: block; position: fixed; inset: auto 0 0 0; z-index: 1020;
    background: var(--ls-page); border-top: 1px solid var(--ls-border-2);
    padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom));
    animation: ls-bar-in .18s ease-out;
  }
  /* Room for the bar so the footer's last line stays reachable. */
  body { padding-bottom: 4.75rem; }
}
@keyframes ls-bar-in { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .ls-sticky-cta { animation: none; } }

/* The carousel runs at every width again. It was desktop-only while the
   product cards carried captures 2–4; those cards were cut, so the slideshow
   is once more the only place the other screens are shown. */

/* --- Pricing: one card on a phone. ---------------------------------------- */
@media (max-width: 767.98px) {
  .ls-price-card:not(.ls-price-card--default) { display: none; }
}

/* --- Numbered list on the sample-statement page. -------------------------- */
.ls-numbered { padding-left: 1.1rem; }
.ls-numbered li { padding: .2rem 0; }

/* --- Document preview. ---------------------------------------------------- */
/* Wide enough that 8pt statement type lands around 11 CSS px. Narrower than
   this and the figures stop being readable, which defeats the preview. */
.ls-docshot { max-width: 680px; }
.ls-docshot picture { display: block; border: 1px solid var(--ls-border-2);
  border-radius: var(--bs-border-radius); overflow: hidden;
  box-shadow: 0 1px 3px rgba(35, 32, 25, .06); }
.ls-docshot img { width: 100%; height: auto; display: block; }
.ls-docshot figcaption { margin-top: .6rem; text-align: center;
  font-size: .86rem; color: var(--ls-muted); }

/* Glossary strip at the foot of a post (LT-23). */
.ls-gloss__strip { line-height: 1.9; }