/* ---------- Automations showcase (lives inside the Automations banner) ---------- */
.showcase {
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 0.4rem 0 1.4rem;
}

/* Header row: tag, the banner's description, call to action, carousel arrows */
.showcase__head {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr) auto auto;
  gap: 1.4rem;
  align-items: center;
  margin-bottom: 1.3rem;
}
.showcase__tag { font: 500 0.8rem/1 var(--mono); letter-spacing: 0.06em; color: #fff; }
.showcase__lead {
  margin: 0;
  max-width: 62rem;
  font-size: clamp(1rem, 1.5vw, 1.7rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #d8d8d8;
}
.showcase__cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0 1.2rem; height: 2.7rem; border-radius: 3rem;
  background: #fff; color: #000; font-weight: 500; font-size: 0.9rem; white-space: nowrap;
  transition: transform 0.25s, background 0.25s;
}
.showcase__cta:hover { transform: translateY(-2px); background: #e6e6e6; }
.showcase__cta span { transition: transform 0.25s; }
.showcase__cta:hover span { transform: translateX(0.25rem); }
.showcase__nav { display: flex; gap: 0.6rem; }
.showcase__btn {
  width: 2.7rem; height: 2.7rem;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  color: #fff;
  transition: background 0.25s, color 0.25s, opacity 0.25s;
}
.showcase__btn svg { width: 1.05rem; height: 1.05rem; }
.showcase__btn:hover:not(:disabled) { background: #fff; color: #000; }
.showcase__btn:disabled { opacity: 0.3; cursor: default; }

/* Carousel */
.showcase__track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  margin-right: -1.5rem;          /* let the last card run off the screen edge like the reference */
  padding-right: 1.5rem;
}
.showcase__track::-webkit-scrollbar { display: none; }
.showcase__track.drag { cursor: grabbing; scroll-snap-type: none; }
.scard {
  flex: 0 0 min(36rem, 84vw);
  scroll-snap-align: start;
  opacity: 0;
  transform: translateY(1.2rem);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.showcase.in .scard { opacity: 1; transform: none; }
.showcase.in .scard:nth-child(1) { transition-delay: 0.25s; }
.showcase.in .scard:nth-child(2) { transition-delay: 0.37s; }
.showcase.in .scard:nth-child(3) { transition-delay: 0.49s; }
.showcase.in .scard:nth-child(4) { transition-delay: 0.61s; }

.scard__media {
  position: relative;
  height: 23.5rem;
  overflow: hidden;
  border-radius: 0.3rem;
  background: #cfcfcf;
}
.scard__media--1 { background:
  radial-gradient(55% 45% at 82% 88%, #ff4a12 0%, rgba(255, 74, 18, 0) 70%),
  radial-gradient(45% 55% at 12% 12%, #ffffff 0%, rgba(255, 255, 255, 0) 65%),
  linear-gradient(140deg, #9c9c9c 0%, #e6e6e6 42%, #7d7d7d 100%); }
.scard__media--2 { background:
  radial-gradient(60% 50% at 70% 95%, #ff3d0a 0%, rgba(255, 61, 10, 0) 70%),
  radial-gradient(50% 45% at 90% 8%, #ffffff 0%, rgba(255, 255, 255, 0) 60%),
  linear-gradient(200deg, #8a8a8a 0%, #dcdcdc 50%, #9a9a9a 100%); }
.scard__media--3 { background:
  radial-gradient(50% 40% at 15% 92%, #ff5a1f 0%, rgba(255, 90, 31, 0) 70%),
  radial-gradient(60% 50% at 80% 10%, #f4f4f4 0%, rgba(244, 244, 244, 0) 65%),
  linear-gradient(160deg, #b4b4b4 0%, #ececec 48%, #7a7a7a 100%); }
.scard__media--4 { background:
  radial-gradient(55% 45% at 88% 12%, #ff4a12 0%, rgba(255, 74, 18, 0) 70%),
  radial-gradient(50% 50% at 10% 90%, #ffffff 0%, rgba(255, 255, 255, 0) 65%),
  linear-gradient(120deg, #a0a0a0 0%, #e2e2e2 50%, #838383 100%); }

.scard__cap { margin: 0.7rem 0 0; max-width: 34rem; font: 400 0.74rem/1.5 var(--mono); color: #e9e9e9; }

/* ---- mini app windows ---- */
.sw {
  position: absolute;
  left: 8%; right: 8%; top: 6%;
  background: #0c0c0c;
  border: 1px solid #2a2a2a;
  border-radius: 0.6rem;
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.45);
  color: #e8e8e8;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.82rem;
  padding: 0.85rem 1rem 0.95rem;
}
.sw__bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.7rem; font-size: 0.7rem; color: #8a8a8a; }
.sw__title { margin: 0 0 0.6rem; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.sw__label { font-size: 0.7rem; color: #8a8a8a; margin: 0.6rem 0 0.25rem; }
.sw__row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.42rem 0; border-top: 1px solid #1f1f1f; }
.sw__row:first-of-type { border-top: 0; }
.sw__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.75rem; }
.sw__note { font-size: 0.72rem; color: #8a8a8a; }
.sw__note b { color: #fff; font-weight: 600; }

.sbtn {
  padding: 0.45rem 0.9rem;
  border: 1px solid #333; border-radius: 0.4rem;
  background: #131313; color: #fff; font-size: 0.8rem; white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.sbtn:hover:not(:disabled) { background: #fff; color: #000; border-color: #fff; }
.sbtn:disabled { opacity: 0.45; cursor: default; }
.sbtn--solid { background: #fff; color: #000; border-color: #fff; }
.sbtn--solid:hover:not(:disabled) { background: #d9d9d9; border-color: #d9d9d9; }

.stog { position: relative; width: 2rem; height: 1.15rem; border-radius: 1rem; background: #2c2c2c; flex: none; transition: background 0.25s; }
.stog::after { content: ""; position: absolute; left: 0.14rem; top: 0.14rem; width: 0.87rem; height: 0.87rem; border-radius: 50%; background: #fff; transition: transform 0.25s; }
.stog[aria-checked="true"] { background: #2fbf4f; }
.stog[aria-checked="true"]::after { transform: translateX(0.85rem); }

.chip { padding: 0.15rem 0.5rem; border-radius: 1rem; font-size: 0.68rem; background: #1c1c1c; color: #9a9a9a; white-space: nowrap; transition: all 0.25s; }
.chip.run { background: #2b2b12; color: #f2d94e; }
.chip.ok { background: #12301a; color: #58e04b; }
.chip.off { background: #251515; color: #d77; }
.chip.warn { background: #33210f; color: #ffa24d; }

/* card 1: lead */
.lead { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.4rem; }
.lead__av { width: 2rem; height: 2rem; border-radius: 50%; background: #2a3a5a; display: grid; place-items: center; font-weight: 600; font-size: 0.78rem; }
.lead__nm { font-weight: 600; } .lead__src { font-size: 0.7rem; color: #8a8a8a; }
.step-l { display: flex; align-items: center; gap: 0.6rem; }
.step-l .stog { order: -1; }
.step-l .chip { margin-left: auto; }
.step-l > span:nth-child(2) { flex: 1; }

/* card 2: invoice */
.inv__line { display: flex; justify-content: space-between; padding: 0.35rem 0; border-top: 1px solid #1f1f1f; color: #cfcfcf; }
.inv__line:first-of-type { border-top: 0; }
.inv__total { display: flex; justify-content: space-between; padding-top: 0.5rem; border-top: 1px solid #333; font-weight: 600; color: #fff; }

/* card 3: onboarding */
.tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.task { display: flex; align-items: center; gap: 0.6rem; color: #9a9a9a; transition: color 0.25s; }
.task__dot { width: 1rem; height: 1rem; border-radius: 50%; border: 1px solid #3a3a3a; display: grid; place-items: center; flex: none; transition: all 0.25s; }
.task.run { color: #fff; }
.task.run .task__dot { border-color: #58e04b #58e04b #58e04b transparent; animation: sspin 0.7s linear infinite; }
.task.done { color: #e8e8e8; }
.task.done .task__dot { background: #58e04b; border-color: #58e04b; }
.task.done .task__dot::after { content: ""; width: 0.28rem; height: 0.5rem; border: solid #000; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-0.03rem, -0.03rem); }
@keyframes sspin { to { transform: rotate(360deg); } }
.bar { height: 0.35rem; border-radius: 1rem; background: #1f1f1f; overflow: hidden; margin-top: 0.8rem; }
.bar > i { display: block; height: 100%; width: 0; background: #58e04b; transition: width 0.5s ease; }

/* card 4: report */
.tabs { display: flex; gap: 0.3rem; margin-bottom: 0.6rem; }
.tabs button { padding: 0.28rem 0.65rem; border-radius: 0.4rem; font-size: 0.78rem; color: #a8a8a8; transition: background 0.2s, color 0.2s; }
.tabs button:hover { color: #fff; }
.tabs button.on { background: #232323; color: #fff; }
.chart { height: 5.6rem; display: flex; align-items: flex-end; gap: 0.5rem; padding-bottom: 0.2rem; border-bottom: 1px solid #262626; }
.chart__col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.chart__bar { width: 100%; background: #e8e8e8; border-radius: 0.2rem 0.2rem 0 0; height: 0; transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s; }
.chart__bar.max { background: #ff5a1f; }
.chart__days { display: flex; gap: 0.5rem; margin-top: 0.3rem; font-size: 0.66rem; color: #777; }
.chart__days span { flex: 1; text-align: center; }
.sched { display: inline-flex; gap: 0.25rem; }
.sched button { padding: 0.25rem 0.5rem; border: 1px solid #2f2f2f; border-radius: 0.35rem; font-size: 0.7rem; color: #a8a8a8; transition: all 0.2s; }
.sched button.on { background: #fff; color: #000; border-color: #fff; }
.toast { position: absolute; left: 50%; bottom: 0.8rem; transform: translate(-50%, 1rem); padding: 0.45rem 0.85rem; border-radius: 0.4rem; background: #fff; color: #000; font: 500 0.75rem "Inter", sans-serif; opacity: 0; transition: all 0.35s; pointer-events: none; white-space: nowrap; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
#demo-rep .toast { bottom: auto; top: calc(100% + 0.9rem); transform: translate(-50%, -0.5rem); }   /* sits just below the window so it never covers the Email / WhatsApp buttons */
#demo-rep .toast.show { transform: translate(-50%, 0); }

.sw button, .sw .stog { cursor: pointer; }

/* Features strip */
.feat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem; margin-top: 1.5rem; }
.feat__item { border-top: 1px solid rgba(255, 255, 255, 0.4); padding-top: 0.7rem; opacity: 0; transition: opacity 0.6s ease 0.7s; }
.showcase.in .feat__item { opacity: 1; }
.feat__item h3 { margin: 0 0 0.4rem; font-size: 1.15rem; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.feat__item p { margin: 0; font-size: 0.82rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; color: #d0d0d0; max-width: 22rem; }


/* Tablets and phones: keep the header, the cards and the captions; drop the extras */
@media (max-width: 820px) {
  .showcase { padding-top: 0; }
  .showcase__head { grid-template-columns: 1fr auto; gap: 0.6rem; margin-bottom: 0.8rem; }
  .showcase__tag, .showcase__cta { display: none; }
  .showcase__lead { font-size: 0.9rem; grid-column: 1; }
  .showcase__track { margin-right: -1rem; padding-right: 1rem; }
  .scard { flex-basis: 80vw; }
  .scard__media { height: 20rem; }
  .feat { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scard { opacity: 1; transform: none; transition: none; }
  .feat__item { opacity: 1; transition: none; }
  .task.run .task__dot { animation: none; }
}

@media (max-width: 820px) { .scard__media { height: 22.5rem; } }

/* Phones: compact windows so the whole banner fits on one screen */
@media (max-width: 820px) {
  .scard__media { height: 21.5rem; }
  .sw { padding: 0.65rem 0.8rem 0.75rem; font-size: 0.78rem; top: 5%; }
  .sw__bar { margin-bottom: 0.4rem; }
  .sw__row { padding: 0.28rem 0; }
  .sw__title { margin-bottom: 0.35rem; font-size: 0.95rem; }
  .sw__foot { margin-top: 0.5rem; }
  .sw__label { margin: 0.4rem 0 0.15rem; }
  .lead { margin-bottom: 0.15rem; }
  .tasks { gap: 0.3rem; }
  .bar { margin-top: 0.55rem; }
  .chart { height: 4.4rem; }
  .showcase__lead { font-size: 0.82rem; line-height: 1.25; }
  .scard__cap { font-size: 0.68rem; margin-top: 0.5rem; }
}

/* ---- now a full-size panel: more room ---- */
.showcase { padding: 3.2rem 0 0; }
.showcase__head { grid-template-columns: 1fr auto; margin-bottom: 1.6rem; }
.scard { flex-basis: min(42rem, 84vw); }
.scard__media { height: 26rem; }
.sw { top: 8%; }
.feat { margin-top: 3rem; }
.feat__item h3 { font-size: 1.4rem; }
.feat__item p { font-size: 0.95rem; }
.scard__cap { font-size: 0.8rem; }
@media (max-width: 820px) {
  .showcase { padding-top: 2rem; }
  .showcase__head { grid-template-columns: 1fr auto; }
  .showcase__tag { display: block; font-size: 0.7rem; }
  .scard { flex-basis: 82vw; }
  .scard__media { height: 22.5rem; }
  .feat { display: grid; grid-template-columns: 1fr; gap: 1.2rem; margin-top: 2rem; }
}
@media (min-width: 821px) {
  .showcase { padding-top: 2rem; }
  .scard__media { height: 25rem; }
  .feat { margin-top: 2rem; }
}

/* =====  Layout like the reference: full-bleed, larger cards  ===== */
@media (min-width: 821px) {
  /* break out of the panel's centred column so the cards run edge to edge */
  .showcase { margin-inline: calc(50% - 50vw); padding-top: 3rem; }
  .showcase__head, .showcase__more { max-width: 130rem; margin-inline: auto; padding-inline: 1.5rem; box-sizing: content-box; }
  .showcase__head { grid-template-columns: 12rem minmax(0, 1fr) auto; gap: 2rem; align-items: center; margin-bottom: 1.8rem; }
  .showcase__headline { margin: 0; font-weight: 400; font-size: clamp(1.9rem, 3.3vw, 3.7rem); line-height: 1.05; letter-spacing: -0.04em; text-wrap: balance; }

  .showcase__track { gap: 0.4rem; padding: 0; margin: 0; }
  .scard { flex: 0 0 calc(33vw); }
  .scard__media { height: 36rem; border-radius: 0; }
  .scard__cap { font-size: 0.86rem; padding-right: 1.4rem; }

  /* app windows scaled up a little */
  .sw { --k: 1.22; left: 8%; right: auto; width: calc(84% / var(--k)); top: 7%; transform: scale(var(--k)); transform-origin: 0 0; }

  /* features (2 x 2) in the middle, statement on the right */
  .showcase__more { margin-top: 4.5rem; display: grid; grid-template-columns: 12rem minmax(0, 1.25fr) minmax(0, 1fr); gap: 2rem 3rem; }
  .feat { grid-column: 2; grid-template-columns: 1fr 1fr; gap: 2.4rem 2.2rem; margin: 0; align-content: start; }
  .feat__item { opacity: 1; transition: none; }
  .feat__item h3 { font-size: 1.6rem; }
  .feat__item p { font-size: 1rem; font-weight: 600; }
  .cta { grid-column: 3; align-self: start; }
  .cta__big { margin: 0 0 2rem; font-size: clamp(1.6rem, 2.5vw, 2.8rem); font-weight: 500; line-height: 1.08; letter-spacing: -0.04em; }
  .cta__link { display: inline-flex; align-items: center; gap: 0.7rem; padding: 0 1.8rem; height: 3.6rem; border-radius: 3rem; background: #fff; color: #000; font-weight: 500; font-size: 1.05rem; transition: transform 0.25s, background 0.25s; }
  .cta__link:hover { transform: translateY(-2px); background: #e6e6e6; }
  .cta__link span { transition: transform 0.25s; }
  .cta__link:hover span { transform: translateX(0.3rem); }
}
@media (max-width: 820px) {
  .showcase__headline { margin: 0; font-weight: 400; font-size: 1.5rem; line-height: 1.1; letter-spacing: -0.03em; grid-column: 1 / -1; }
  .showcase__head { grid-template-columns: 1fr auto; }
  .showcase__more { display: block; }
  .cta { margin-top: 2rem; }
  .cta__big { margin: 0 0 1.2rem; font-size: 1.5rem; font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; }
  .cta__link { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0 1.4rem; height: 3rem; border-radius: 3rem; background: #fff; color: #000; font-weight: 500; }
}
@media (min-width: 821px) {
  .scard { flex-basis: 31.5vw; }          /* three full cards and a peek of the fourth, like the reference */
  .scard__media { height: 33rem; }
}

/* header now lives in the panel, so the showcase starts straight at the cards */
.showcase { padding-top: 2.2rem; }
@media (max-width: 820px) { .showcase { padding-top: 1.4rem; } }
@media (min-width: 821px) { .showcase { padding-top: 3.4rem; } }

/* Leave room for the fixed section letters ([A] B C D) on the left; cards are clipped at this edge, so they never slide under them */
@media (min-width: 1024px) {
  .showcase__track { margin-left: 8rem; }
  .scard { flex-basis: 30vw; }
}

/* =====  six automation demos: extra pieces  ===== */
.scard__media--5 { background:
  radial-gradient(55% 45% at 15% 90%, #ff4a12 0%, rgba(255, 74, 18, 0) 70%),
  radial-gradient(50% 50% at 88% 10%, #ffffff 0%, rgba(255, 255, 255, 0) 62%),
  linear-gradient(150deg, #a8a8a8 0%, #e8e8e8 48%, #808080 100%); }
.scard__media--6 { background:
  radial-gradient(60% 50% at 85% 92%, #ff3d0a 0%, rgba(255, 61, 10, 0) 70%),
  radial-gradient(45% 50% at 10% 8%, #f6f6f6 0%, rgba(246, 246, 246, 0) 62%),
  linear-gradient(210deg, #8f8f8f 0%, #dedede 50%, #999 100%); }

.sw__sub { font-weight: 400; font-size: 0.78rem; color: #8a8a8a; margin-left: 0.3rem; }
.sw .tabs { margin-bottom: 0.55rem; }

/* 1 lead: incoming message */
.msg { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.55rem 0.65rem; margin-bottom: 0.3rem; border: 1px solid #242424; border-radius: 0.5rem; background: #101010; }
.msg__av { flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: #1f6f43; display: grid; place-items: center; font-weight: 600; font-size: 0.72rem; }
.msg__txt { font-size: 0.78rem; line-height: 1.35; color: #d8d8d8; min-height: 2.1em; }

/* 2 follow-up: days + AI nudge */
.days { display: flex; gap: 0.35rem; margin-bottom: 0.65rem; }
.days__d { flex: 1; padding: 0.3rem 0; text-align: center; border: 1px solid #2a2a2a; border-radius: 0.35rem; font-size: 0.72rem; color: #6f6f6f; transition: all 0.3s; }
.days__d.on { background: #1e1e1e; color: #fff; border-color: #444; }
.nudge { padding: 0.6rem 0.7rem; border: 1px dashed #333; border-radius: 0.5rem; background: #0f0f0f; transition: all 0.35s; }
.nudge__lab { font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase; color: #777; margin-bottom: 0.25rem; }
.nudge__txt { font-size: 0.78rem; line-height: 1.35; color: #9a9a9a; min-height: 2.1em; }
.nudge.sent { border-style: solid; border-color: #2fbf4f; background: #0e1a12; }
.nudge.sent .nudge__txt { color: #e8e8e8; } .nudge.sent .nudge__lab { color: #58e04b; }
.nudge.stopped { border-color: #6b3a3a; } .nudge.stopped .nudge__lab { color: #d77; }
.btns { display: inline-flex; gap: 0.4rem; flex-wrap: wrap; }
.btns .sbtn { padding: 0.4rem 0.7rem; font-size: 0.76rem; }

/* 3 inventory: gauge + reorder draft */
.stock__top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.55rem; }
.stock__name { font-size: 1rem; font-weight: 600; color: #fff; }
.stock__qty { font-size: 0.8rem; color: #8a8a8a; } .stock__qty b { font-size: 1.3rem; color: #fff; font-weight: 600; margin-right: 0.15rem; }
.gauge { position: relative; height: 0.8rem; border-radius: 1rem; background: #1a1a1a; }
.gauge i { display: block; height: 100%; width: 60%; border-radius: 1rem; background: #58e04b; transition: width 0.5s ease, background 0.3s; }
.gauge i.low { background: #ff5a1f; }
.gauge em { position: absolute; top: -0.2rem; bottom: -0.2rem; width: 2px; background: #fff; }
.gauge__cap { display: flex; justify-content: space-between; margin-top: 0.3rem; font-size: 0.66rem; color: #777; }
.draft { display: none; align-items: center; gap: 0.5rem; margin-top: 0.7rem; padding: 0.55rem 0.65rem; border: 1px solid #333; border-radius: 0.5rem; background: #111; animation: fadein 0.4s ease both; }
.draft.show { display: flex; }
.draft__txt { flex: 1; font-size: 0.76rem; line-height: 1.3; color: #d0d0d0; }
.draft .sbtn { padding: 0.35rem 0.7rem; font-size: 0.74rem; }

/* 5 triage: inbox + result */
.mail { display: grid; gap: 0.3rem; margin-bottom: 0.7rem; }
.mail__row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.5rem 0.65rem; border: 1px solid #242424; border-radius: 0.45rem; background: #101010; font-size: 0.78rem; color: #cfcfcf; text-align: left; transition: background 0.2s, border-color 0.2s; }
.mail__row b { font-weight: 500; }
.mail__row span { font-size: 0.68rem; color: #777; white-space: nowrap; }
.mail__row:hover { background: #171717; }
.mail__row.on { background: #1d1d1d; border-color: #555; color: #fff; }
.triage { padding: 0.6rem 0.7rem; border: 1px dashed #333; border-radius: 0.5rem; min-height: 6.2rem; }
.triage__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.triage__reply { margin-top: 0.5rem; font-size: 0.76rem; line-height: 1.4; color: #cfcfcf; }
.rep__note { font-size: 0.74rem; }

/* room for the taller windows */
@media (min-width: 821px) { .scard__media { height: 34rem; } }

/* Captions under the cards: regular font, larger, with the title underlined */
.scard__cap { font-family: "Inter", system-ui, sans-serif; font-size: 1.2rem; font-weight: 400; line-height: 1.4; letter-spacing: -0.01em; color: #e4e4e4; max-width: 36rem; }
.scard__t { font-weight: 500; color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
@media (max-width: 820px) { .scard__cap { font-size: 0.95rem; } }

/* three steps in one row: Trigger, Action, Outcome */
@media (min-width: 821px) { .feat { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }

/* with the Trigger / Action / Outcome strip gone, the closing statement takes the left of that row */
@media (min-width: 821px) { .showcase__more { margin-top: 4rem; } .showcase__more .cta { grid-column: 2 / -1; } }

/* closing line centred on the screen */
@media (min-width: 821px) {
  .showcase__more { display: block; text-align: center; }
  .showcase__more .cta { grid-column: auto; }
  .cta__big { margin: 0 auto; max-width: 60rem; }
}
@media (min-width: 821px) { .cta__big { max-width: none; white-space: nowrap; } }
@media (min-width: 1024px) { .showcase__track { margin-left: 10.3rem; } }   /* cards line up with the text above */