/* ════════════════════════════════════════════════════
   Landing page structure: split hero, proof strip and
   the feature stack. Appended to landing.css by
   _blog/landing.py — edit here, not there.
   ════════════════════════════════════════════════════ */

/* The gutter is a percentage of the full-bleed element itself, never 100vw:
   100vw counts the scrollbar, which left the hero headline 8px out of line
   with every .container heading below it. */

/* ═════════ Split hero ═════════ */
.lph {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  padding-left: max(32px, calc((100% - 1240px) / 2 + 32px));
  background: linear-gradient(155deg, #f2d5d0 0%, var(--coral-soft) 58%, #e8bfbb 100%);
}
.lph--dark { background: linear-gradient(155deg, var(--navy-deep) 0%, var(--navy) 100%); }

.lph-copy {
  display: flex; align-items: center; min-width: 0;
  padding: 80px clamp(32px, 4vw, 68px) 80px 0;
}
.lph-copy-in { max-width: 40rem; }

.lph-eyebrow {
  display: inline-block; margin: 0 0 20px;
  font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--navy-deep);
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(47, 59, 74, .12);
  padding: 7px 15px; border-radius: var(--r-pill);
}
.lph--dark .lph-eyebrow {
  color: #fff; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22);
}

.lph h1 {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(2.5rem, 4.3vw, 3.85rem); line-height: 1.03;
  letter-spacing: -.02em; color: var(--navy-deep);
  margin: 0 0 22px; text-wrap: balance;
}
.lph--dark h1 { color: #fff; }
.lph h1 em { font-style: normal; color: #7d4245; }   /* coral-deep was 2.08:1 here */
.lph--dark h1 em { color: var(--coral-soft); }

.lph-lead {
  font-size: 1.08rem; line-height: 1.62; color: var(--ink);
  max-width: 46ch; margin: 0 0 12px; text-wrap: pretty;
}
.lph--dark .lph-lead { color: rgba(255, 255, 255, .9); }
.lph-sub { font-size: .99rem; line-height: 1.62; color: #414d5c; max-width: 48ch; margin: 0 0 8px; }
.lph--dark .lph-sub { color: rgba(255, 255, 255, .74); }
.lph-sub strong { color: var(--navy-deep); }
.lph--dark .lph-sub strong { color: #fff; }

.lph-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* the art side bleeds to the viewport edge, like the reference */
.lph-art {
  position: relative; min-width: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  background: rgba(47, 59, 74, .1);
}
.lph-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lph-art > span { position: relative; overflow: hidden; display: block; }
/* the middle panel sits a touch proud so the strip is not a flat wall */
.lph-art > span:nth-child(2) { transform: scaleY(1.045); z-index: 1; box-shadow: var(--shadow-md); }

/* ═════════ Button pair ═════════ */
.jbtn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-size: .95rem; font-weight: 700;
  padding: 13px 22px; border-radius: var(--r-pill);
  text-decoration: none; border: 1.5px solid transparent;
  transition: background .3s cubic-bezier(.32, .72, 0, 1),
              color .3s cubic-bezier(.32, .72, 0, 1),
              transform .3s cubic-bezier(.32, .72, 0, 1),
              box-shadow .3s cubic-bezier(.32, .72, 0, 1);
}
.jbtn-solid {
  background: var(--navy-deep); color: #fff;
  box-shadow: 0 10px 26px -12px rgba(47, 59, 74, .8);
}
.jbtn-solid:hover { background: #24303e; transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(47, 59, 74, .85); }
.jbtn-solid:active { transform: translateY(0) scale(.985); }
.jbtn-ghost { border-color: rgba(47, 59, 74, .3); color: var(--navy-deep); }
.jbtn-ghost:hover { border-color: var(--navy-deep); background: rgba(255, 255, 255, .55); transform: translateY(-2px); }
.lph--dark .jbtn-solid { background: var(--coral); color: var(--navy-deep); box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .55); }
.lph--dark .jbtn-solid:hover { background: var(--coral-soft); }
.lph--dark .jbtn-ghost { border-color: rgba(255, 255, 255, .4); color: #fff; }
.lph--dark .jbtn-ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

/* the arrow rides in its own disc, and leans on hover */
.jbtn-ico {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .16);
  transition: transform .3s cubic-bezier(.32, .72, 0, 1), background .3s ease;
}
.jbtn-ghost .jbtn-ico { background: rgba(47, 59, 74, .09); }
.lph--dark .jbtn-solid .jbtn-ico { background: rgba(47, 59, 74, .14); }
.jbtn:hover .jbtn-ico { transform: translateX(3px); }
.jbtn-ico svg { width: 13px; height: 13px; }

/* ═════════ Proof strip ═════════ */
.jtrust { background: var(--paper); border-bottom: 1px solid var(--line); padding: 40px 0 42px; }
.jtrust-h {
  text-align: center; margin: 0 0 26px;
  font-size: .82rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted);
}
.jtrust-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px; list-style: none; margin: 0; padding: 0;
}
.jtrust-row li { text-align: center; position: relative; }
.jtrust-row li + li::before {
  content: ""; position: absolute; left: -12px; top: 12%; height: 76%;
  width: 1px; background: var(--line);
}
.jtrust-row strong {
  display: block; font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(1.7rem, 3vw, 2.35rem); line-height: 1.1;
  color: var(--navy-deep); letter-spacing: -.01em;
}
.jtrust-row span { display: block; margin-top: 6px; font-size: .86rem; color: var(--ink-soft); line-height: 1.45; }

/* ═════════ Feature stack ═════════ */
.jstack { padding: 90px 0 96px; position: relative; overflow: hidden; }
.jstack-inner { position: relative; }
.jstack-head { max-width: 34rem; margin-bottom: 56px; }
.jstack-head h2 {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.1;
  letter-spacing: -.017em; color: var(--navy-deep); margin: 0 0 16px; text-wrap: balance;
}
.jstack-head p { color: var(--ink-soft); line-height: 1.7; margin: 0; text-wrap: pretty; }

.jstack-list { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; }

.jrow { border-top: 1px solid var(--line); }
.jrow:last-child { border-bottom: 1px solid var(--line); }
.jrow h3 { margin: 0; font: inherit; }
.jrow-btn {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; padding: 22px 0;
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.25;
  letter-spacing: -.01em; color: var(--navy-deep);
  transition: color .3s cubic-bezier(.32, .72, 0, 1);
}
.jrow-btn span { display: block; max-width: 30ch; }

/* The chevron sits beside the title rather than at the far right, where the
   floating mock would cover it — and in its own flex cell, because as an
   ::after it dropped onto a line of its own whenever the title filled the row. */
.jrow-chev { display: none; }
.jstack-list[data-js] .jrow-btn { display: flex; align-items: flex-start; gap: 14px; }
.jstack-list[data-js] .jrow-chev {
  display: block; flex: none; width: 9px; height: 9px; margin-top: .62em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); opacity: .32;
  transition: transform .4s cubic-bezier(.32, .72, 0, 1), opacity .3s ease;
}
.jstack-list[data-js] .jrow.is-open .jrow-chev { transform: rotate(225deg); opacity: .75; }
.jrow-btn:hover { color: var(--coral-deep); }
.jrow-btn:focus-visible { outline: 2px solid var(--coral-deep); outline-offset: 3px; border-radius: 4px; }

/* the open row lifts onto a tinted band that runs past the container edges */
.jrow-band { position: relative; }
.jrow-band::before {
  content: ""; position: absolute; inset: 0 -100vw; z-index: -1;
  background: var(--tint, transparent); opacity: 0;
}
.jrow.is-open > .jrow-band::before { opacity: 1; }
.jrow.is-open .jrow-btn { padding: 26px 0 10px; }

/* Everything is expanded by default. The script adds [data-js] to the list and
   only then does collapsing apply, so a page with no JavaScript still reads as
   a plain list of features with all their copy. */
.jrow-btn { cursor: default; }
.jstack-list[data-js] .jrow-btn { cursor: pointer; }

.jrow-body { display: grid; grid-template-rows: 1fr; }
.jrow-body > div { overflow: hidden; min-height: 0; }
.jrow-body p {
  margin: 0; padding-bottom: 18px; max-width: 46ch;
  color: var(--ink-soft); line-height: 1.7; font-size: .97rem;
}
.jrow-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding-bottom: 26px; font-size: .9rem; font-weight: 700;
  color: var(--accent, var(--coral-deep)); text-decoration: none;
  transition: gap .25s ease;
}
.jrow-link:hover { gap: 13px; }
.jrow-link svg { width: 14px; height: 14px; }

.jstack-list[data-js] .jrow-body { grid-template-rows: 0fr; }
.jstack-list[data-js] .jrow.is-open .jrow-body { grid-template-rows: 1fr; }
.jstack-list[data-js] .jrow-body p,
.jstack-list[data-js] .jrow-link { opacity: 0; transform: translateY(10px); }

/* Motion is armed a frame after the rows have already been collapsed, so the
   first paint does not animate seven rows shut and shove the page around. */
.jstack-list[data-ready] .jrow-body {
  transition: grid-template-rows .5s cubic-bezier(.32, .72, 0, 1);
}
.jstack-list[data-ready] .jrow-band::before {
  transition: opacity .45s cubic-bezier(.32, .72, 0, 1);
}
.jstack-list[data-ready] .jrow-body p,
.jstack-list[data-ready] .jrow-link {
  transition: opacity .45s .1s cubic-bezier(.32, .72, 0, 1),
              transform .45s .1s cubic-bezier(.32, .72, 0, 1), gap .25s ease;
}
.jstack-list[data-ready] .jrow-link { transition-delay: .18s; }
.jstack-list[data-ready] .jrow-btn { transition: color .3s cubic-bezier(.32, .72, 0, 1),
  padding .4s cubic-bezier(.32, .72, 0, 1); }
.jstack-list[data-js] .jrow.is-open .jrow-body p,
.jstack-list[data-js] .jrow.is-open .jrow-link { opacity: 1; transform: none; }

/* per-row accents, cycled in the builder */
.jrow--coral { --tint: rgba(212, 149, 149, .17); --accent: #8a4d50; }  /* 5.62 on its band */
.jrow--sage  { --tint: rgba(168, 192, 174, .24); --accent: var(--sage-ink); }
.jrow--navy  { --tint: rgba(74, 93, 111, .11);  --accent: var(--navy-deep); }
.jrow--sand  { --tint: rgba(231, 226, 217, .62); --accent: #6b5c48; }  /* 5.53 on its band */

/* Default: the mock is a normal block above the list, so the section still
   makes sense with no script. With JS it floats over the rows on the right,
   anchored to the top of the list, and swaps with the open row. */
.jstack-body { position: relative; }
.jstack-art { width: 100%; max-width: 460px; margin: 0 auto 38px; }
.jstack-slide { display: none; }
.jstack-slide:first-child { display: block; }

.jstack-body.is-js .jstack-art {
  position: absolute; top: 0; right: 0; z-index: 2;
  width: 42%; max-width: 460px; margin: 0; pointer-events: none;
}
/* safe to apply from the start: the opening row is the first one, so the very
   first position it is asked for is translateY(0) — the same as its resting
   place, and nothing animates on load */
.jstack-body.is-js .jstack-art { transition: transform .55s cubic-bezier(.32, .72, 0, 1); }
.jstack-body.is-js .jstack-slide {
  display: block; position: absolute; top: 0; right: 0; width: 100%;
  opacity: 0; transform: translateY(14px) scale(.985);
  transition: opacity .5s cubic-bezier(.32, .72, 0, 1),
              transform .5s cubic-bezier(.32, .72, 0, 1);
}
.jstack-body.is-js .jstack-slide.is-on { opacity: 1; transform: none; }

/* ═════════ Compact mock-ups ═════════ */
.mk {
  border-radius: var(--r-lg); overflow: hidden; background: var(--paper);
  border: 1px solid var(--line); box-shadow: var(--shadow-md);
}
/* The header mirrors the real dashboard topbar - screen name, its own
   subtitle, and the period control. It replaces fake traffic-light dots,
   which read as a stock illustration rather than the product. */
.mk-top {
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  padding: 13px 16px 12px; background: var(--cream-2); border-bottom: 1px solid var(--line);
}
.mk-top-t { flex: 1; min-width: 0; }
.mk-top-t strong {
  display: block; font-size: .92rem; font-weight: 700; color: var(--navy-deep);
  line-height: 1.25;
}
.mk-top-t span { display: block; font-size: .74rem; color: var(--ink-soft); margin-top: 2px; }
.mk-range {
  flex: none; font-size: .7rem; font-weight: 600; color: var(--ink-soft);
  background: var(--paper); border: 1px solid var(--line);
  padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap;
}
/* these are invented numbers on a page that now looks like the product */
.mk-sample {
  flex: none; font-size: .62rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft);
  border: 1px dashed var(--coral-soft); border-radius: var(--r-pill);
  padding: 3px 9px;
}
/* 4px left the last row all but touching the footer rule on a 311px card */
.mk-body { padding: 18px 18px 14px; }
.mk-foot {
  padding: 13px 18px 14px; border-top: 1px solid var(--line); background: var(--cream);
  font-size: .76rem; line-height: 1.45; color: var(--ink-soft);
}

/* -- the executive summary, rebuilt from the real dashboard ------------- */
.dk-hero {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--cream); padding: 14px 16px 12px; margin-bottom: 12px;
}
.dk-lab { font-size: .78rem; font-weight: 700; color: var(--navy-deep); }
.dk-eyebrow {
  display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); margin-top: 2px;
}
.dk-main { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; }
.dk-main strong {
  font-family: var(--font-serif); font-weight: 400; font-size: 1.9rem;
  line-height: 1; color: var(--navy-deep); font-variant-numeric: tabular-nums;
}
.dk-up { font-style: normal; font-size: .78rem; font-weight: 700; color: var(--sage-ink); }
.dk-cap { display: block; font-size: .72rem; color: var(--ink-soft); margin-top: 3px; }

.dk-spark { display: block; width: 100%; height: 30px; margin-top: 8px; overflow: visible; }
.dk-spark--hero { height: 44px; }
.dk-spark-a { fill: rgba(212, 149, 149, .16); stroke: none; }
.dk-spark-l { fill: none; stroke: var(--navy); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.dk-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
.dk-pills b {
  font-size: .66rem; font-weight: 600; color: var(--ink-soft);
  background: var(--paper); border: 1px solid var(--line);
  padding: 4px 9px; border-radius: var(--r-pill);
}
.dk-pills b.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }

.dk-trends { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-bottom: 14px; }
.dk-t { border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 11px; background: var(--paper); }
.dk-t-top { display: flex; align-items: center; gap: 6px; }
.dk-t-lab { font-size: .68rem; font-weight: 600; color: var(--ink-soft); line-height: 1.25; }
.dk-t-row { display: flex; align-items: baseline; gap: 6px; margin-top: 5px; }
.dk-t-row strong {
  font-family: var(--font-serif); font-weight: 400; font-size: 1.25rem;
  color: var(--navy-deep); font-variant-numeric: tabular-nums;
}
.dk-t-row .dk-up { font-size: .68rem; }
.dk-ico { width: 15px; height: 15px; flex: none; border-radius: 5px; display: block; }
.dk-ico--primary { background: rgba(74, 93, 111, .2); }
.dk-ico--success { background: rgba(168, 192, 174, .45); }
.dk-ico--warn    { background: rgba(212, 149, 149, .38); }
.dk-ico--info    { background: rgba(74, 93, 111, .16); }

.dk-stats { display: grid; gap: 8px; padding-bottom: 14px; }
.dk-stat {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 10px 12px; background: var(--cream);
}
.dk-stat .dk-ico { margin-top: 3px; }
.dk-stat strong {
  display: block; font-family: var(--font-serif); font-weight: 400;
  font-size: 1.3rem; line-height: 1; color: var(--navy-deep);
}
.dk-stat-lab { display: block; font-size: .76rem; color: var(--navy-deep); font-weight: 600; margin-top: 3px; }
.dk-stat-meta { display: block; font-size: .7rem; color: var(--ink-soft); margin-top: 1px; }

.dk-line {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .82rem;
}
.dk-line span { color: var(--ink-soft); }
.dk-line strong { color: var(--navy-deep); font-variant-numeric: tabular-nums; }

.mk-kpi {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 12px 14px; background: var(--cream);
}
.mk-kpi span { display: block; font-size: .74rem; color: var(--ink-soft); margin-bottom: 4px; }
.mk-kpi strong {
  font-family: var(--font-serif); font-weight: 400; font-size: 1.55rem;
  line-height: 1; color: var(--navy-deep);
}
.mk-kpi--good { border-left: 3px solid var(--sage); }
.mk-kpi--up   { border-left: 3px solid var(--navy); }
.mk-kpi--warn { border-left: 3px solid var(--coral); }

.mk-week { display: grid; gap: 9px; padding-bottom: 14px; }
.mk-day { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 10px; }
.mk-day-l { font-size: .76rem; font-weight: 700; color: var(--muted); }
.mk-slots { display: flex; gap: 5px; }
.mk-slot { width: 26px; height: 15px; border-radius: 4px; display: block; }
.mk-slot--coral { background: var(--coral-soft); }
.mk-slot--sage  { background: var(--sage-soft); }
.mk-slot--navy  { background: #c6d2dc; }

.mk-list { list-style: none; margin: 0; padding: 0 0 12px; }
.mk-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .87rem;
}
.mk-list li:last-child { border-bottom: 0; }
.mk-list--slim li { padding: 8px 0; }
.mk-av {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: .74rem; font-weight: 700;
  background: var(--sage-bg); color: var(--sage-ink);
}
.mk-name { flex: 1; min-width: 0; color: var(--navy-deep); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-amt { font-weight: 700; color: var(--navy-deep); font-variant-numeric: tabular-nums; }
.mk-chip {
  flex: none; font-size: .7rem; font-weight: 700; padding: 3px 9px;
  border-radius: var(--r-pill); white-space: nowrap;
}
.mk-chip--new  { background: rgba(212, 149, 149, .22); color: #8a4d50; }
.mk-chip--mid  { background: var(--cream-2); color: var(--ink-soft); }
.mk-chip--done { background: var(--sage-bg); color: var(--sage-ink); }

.mk-chat { display: grid; gap: 9px; padding-bottom: 14px; }
.mk-msg {
  margin: 0; padding: 10px 14px; font-size: .86rem; line-height: 1.45;
  border-radius: 16px; max-width: 84%;
}
.mk-msg--in { background: var(--cream-2); color: var(--ink); border-bottom-left-radius: 5px; }
.mk-msg--out {
  background: var(--navy); color: #fff; justify-self: end;
  border-bottom-right-radius: 5px;
}

.mk-brandrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; }
.mk-logo {
  font-family: var(--font-serif); font-size: 1.15rem; color: var(--navy-deep);
  border: 1px dashed var(--coral-soft); border-radius: var(--r-sm); padding: 7px 13px;
}
.mk-sws { display: flex; gap: 6px; }
.mk-sw {
  width: 22px; height: 22px; border-radius: 50%; display: block;
  background: var(--c); border: 1px solid rgba(47, 59, 74, .12);
}
.mk-pills { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 14px; }
.mk-pill {
  font-size: .76rem; font-weight: 600; color: var(--navy-deep);
  background: var(--cream); border: 1px solid var(--line);
  padding: 5px 11px; border-radius: var(--r-pill);
}

.mk-stat { padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.mk-stat strong {
  display: block; font-family: var(--font-serif); font-weight: 400;
  font-size: 1.85rem; line-height: 1.05; color: var(--navy-deep);
}
.mk-stat span { font-size: .8rem; color: var(--ink-soft); }

.mk-bars { display: grid; gap: 11px; padding-bottom: 14px; }
.mk-barw { display: grid; grid-template-columns: 1fr 38px; align-items: center; gap: 10px; }
.mk-bar-f {
  display: block; height: 13px; border-radius: var(--r-pill); width: var(--pct);
  background: linear-gradient(90deg, var(--navy) 0%, var(--coral) 100%);
}
.mk-barw span { font-size: .74rem; font-weight: 700; color: var(--muted); text-align: right; }

/* ── mock entrance, once the slide is the visible one ───────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .jstack-slide.is-on .mk-list li,
  .jstack-slide.is-on .mk-msg,
  .jstack-slide.is-on .mk-barw,
  .jstack-slide.is-on .mk-pill,
  .jstack-slide.is-on .mk-sw {
    animation: mk-in .5s cubic-bezier(.32, .72, 0, 1) both;
    animation-delay: calc(var(--i, 0) * 70ms + 120ms);
  }
  .jstack-slide.is-on .mk-slot {
    animation: mk-pop .4s cubic-bezier(.32, .72, 0, 1) both;
    animation-delay: calc(var(--i, 0) * 26ms + 140ms);
  }
  .jstack-slide.is-on .mk-bar-f {
    animation: mk-grow .8s cubic-bezier(.32, .72, 0, 1) both;
    animation-delay: calc(var(--i, 0) * 90ms + 160ms);
  }
}
@keyframes mk-in   { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes mk-pop  { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes mk-grow { from { width: 0; } to { width: var(--pct); } }

/* ═════════ Responsive ═════════ */
@media (max-width: 1080px) {
  .jstack-art { width: 46%; }
  .jrow-btn span { max-width: 22ch; }
}
@media (max-width: 900px) {
  .lph { grid-template-columns: 1fr; padding-left: 0; }
  .lph-copy { padding: 62px 32px 54px; }
  .lph-art { height: 300px; }
  .lph-art > span:nth-child(2) { transform: none; box-shadow: none; }

  .jtrust-row { grid-template-columns: 1fr 1fr; gap: 26px 24px; }
  .jtrust-row li:nth-child(3)::before { display: none; }

  .jstack { padding: 66px 0 72px; }
  .jstack-head { margin-bottom: 34px; }
  /* no room to float it: back into the flow, above the rows */
  .jstack-body.is-js .jstack-art {
    position: static; width: 100%; max-width: 480px;
    margin: 0 auto 34px; pointer-events: auto;
  }
  .jstack-body.is-js .jstack-slide { position: absolute; }
  .jstack-body.is-js .jstack-slide.is-on { position: relative; }
  .jrow-btn span { max-width: none; }
}
@media (max-width: 560px) {
  .lph-art { grid-template-columns: repeat(2, 1fr); height: 240px; }
  .lph-art > span:nth-child(3) { display: none; }
  .jtrust-row { grid-template-columns: 1fr; gap: 20px; }
  .jtrust-row li + li::before { display: none; }

  /* on a ~310px card the period pill squeezed the subtitle into one word per
     line; give the title its own row and let the pills sit under it */
  .mk-top { gap: 9px; }
  .mk-top-t { flex: 1 1 100%; }
  .dk-trends { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .jrow-body { transition: none; }
  .jstack-slide, .jrow-body p, .jrow-link, .jbtn, .jbtn-ico { transition: none; }
}

/* The mock, once the script has moved it inside the open row on a narrow
   layout. Full width of the band, snug under the row's own copy. */
.jstack-art--inrow {
  margin: 10px 0 0 !important;
  max-width: none !important;
  width: 100% !important;
}
/* the band carries the tint, so it needs its own room under the mock — the
   mock's bottom margin just collapses through a band with no padding */
.jrow-band.has-art { padding-bottom: 24px; }