/* ---------------------------------------------------------------
   Landing pages: the ad landing pages' own art

   Tripwire alternative and the platform security pages (Magento,
   WordPress, WooCommerce, PrestaShop, OpenCart, Joomla, Drupal) step
   outside the plain "Lines of sight" opener. They keep the theme's type (Clash Display,
   Satoshi), the primary purple, the logo mark and the line field at the
   barrel angle, and add a wider palette around them: fuchsia, coral, amber,
   sky and mint. The markup is in partials/landing.njk.

   Loaded only by the pages that set `pageCss: /css/landing.css`. Everything
   is scoped under an .lp- class.
   --------------------------------------------------------------- */
.lp-hero,
.lp-steps,
.lp-band,
.lp-watch {
  --lp-violet: #9251ef;
  --lp-violet-deep: #5b21b6;
  --lp-fuchsia: #d946ef;
  --lp-pink: #f43f86;
  --lp-coral: #fb7185;
  --lp-orange: #ff8a3d;
  --lp-amber: #fcd34d;
  --lp-sky: #38bdf8;
  --lp-mint: #34d399;
  --lp-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
}

.lp-hero {
  position: relative;
  isolation: isolate;
  padding: 4.5rem 0 6rem;
  overflow-x: clip;
}

/* The colour wash under the copy: three soft lights and a dot grid that
   fades out towards the edges */
.lp-hero__wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(45% 55% at 8% 0%, rgba(146, 81, 239, 0.16), transparent 70%),
    radial-gradient(35% 45% at 55% 8%, rgba(255, 138, 61, 0.12), transparent 70%),
    radial-gradient(40% 50% at 30% 100%, rgba(56, 189, 248, 0.12), transparent 70%);
}
.lp-hero__wash::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(9, 9, 11, 0.13) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 80% at 30% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(70% 80% at 30% 40%, #000 20%, transparent 75%);
}

.lp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: 4rem;
}

/* ---- Copy ---- */
.lp-hero__heading {
  max-width: 12ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 5.2vw, 4.75rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.02em;
  /* The display face's space is narrow at this size; words ran together */
  word-spacing: 0.08em;
  color: var(--foreground);
  text-wrap: balance;
}
/* One violet, dark enough that the words clear 3:1 as large text */
.lp-hl {
  color: #8b3ff0;
}

.lp-hero__body {
  max-width: 40rem;
  margin: 1.75rem 0 0;
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--secondary-foreground);
}
.lp-hero__body strong {
  font-weight: 700;
  color: var(--foreground);
}

.lp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
}
.theme-shadcn .lp-btn,
.theme-shadcn .lp-btn:hover {
  background: linear-gradient(135deg, #8b45ec 0%, #b02fc4 100%);
  box-shadow: 0 10px 24px -10px rgba(146, 81, 239, 0.8);
}
.theme-shadcn .lp-btn {
  transition: box-shadow var(--ease), transform var(--ease);
}
.theme-shadcn .lp-btn:hover {
  box-shadow: 0 14px 30px -10px rgba(176, 47, 196, 0.85);
  transform: translateY(-1px);
}

.lp-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
.lp-perk {
  --c: var(--lp-violet);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem 0.35rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
  white-space: nowrap;
}
.lp-perk svg {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0.15rem;
  border-radius: 50%;
  background: var(--c);
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lp-perk--2 { --c: var(--lp-pink); }

/* ---- The stage: a gradient block that drifts, with the line field at the
   barrel angle and the logo mark cropped by its corner ---- */
.lp-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 28rem;
  padding: 3.5rem 1.5rem;
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 12%, #b98aff 0, transparent 38%),
    radial-gradient(circle at 88% 8%, #ff5fa8 0, transparent 34%),
    radial-gradient(circle at 85% 90%, #ffa25a 0, transparent 42%),
    radial-gradient(circle at 10% 95%, #4cc3ff 0, transparent 34%),
    linear-gradient(140deg, var(--lp-violet-deep) 0%, var(--lp-violet) 40%, var(--lp-fuchsia) 72%, var(--lp-coral) 100%);
  background-size: 150% 150%;
  box-shadow:
    0 40px 80px -30px rgba(91, 33, 182, 0.55),
    0 20px 50px -25px rgba(251, 113, 133, 0.5);
  animation: lp-drift 16s ease-in-out infinite alternate;
}
.lp-stage__lines {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}
.lp-stage__lines::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(calc(90deg + var(--barrel, 20deg)), rgba(255, 255, 255, 0.16) 0 1.5px, transparent 1.5px 14px);
  -webkit-mask-image: linear-gradient(200deg, #000 0%, transparent 65%);
  mask-image: linear-gradient(200deg, #000 0%, transparent 65%);
}
/* The platform's own folder names, set large and faint, tilted against the
   barrel angle, in place of the plain lines */
.lp-stage__lines--paths::before { display: none; }
.lp-stage__paths {
  position: absolute;
  inset: -30% -40%;
  transform: rotate(calc(var(--barrel, 20deg) * -1));
  font-family: var(--lp-mono);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 2.6rem;
  letter-spacing: -0.01em;
  word-spacing: 0.6em;
  color: rgba(255, 255, 255, 0.2);
  -webkit-mask-image: linear-gradient(200deg, #000 10%, transparent 75%);
  mask-image: linear-gradient(200deg, #000 10%, transparent 75%);
}
.lp-stage__paths span:nth-child(3n + 1) { color: rgba(255, 255, 255, 0.34); }

.lp-stage__mark {
  position: absolute;
  right: -3rem;
  bottom: -2.5rem;
  width: 20rem;
  fill: rgba(255, 255, 255, 0.14);
}

/* ---- The scan card ---- */
.lp-scan {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 33rem;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.6),
    0 30px 60px -20px rgba(46, 10, 100, 0.55);
}
.lp-scan__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--border);
  background: #fafafa;
}
.lp-scan__dots { display: flex; gap: 0.35rem; }
.lp-scan__dots i {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--lp-coral);
}
.lp-scan__dots i:nth-child(2) { background: var(--lp-amber); }
.lp-scan__dots i:nth-child(3) { background: var(--lp-mint); }
.lp-scan__host {
  min-width: 0;
  overflow: hidden;
  font-family: var(--lp-mono);
  font-size: 0.75rem;
  color: var(--muted-foreground);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.lp-scan__meta {
  display: flex;
  justify-content: space-between;
  padding: 0.85rem 1.1rem 0.35rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.lp-scan__rows {
  margin: 0;
  padding: 0 0.5rem 0.6rem;
  list-style: none;
}

.lp-row {
  --soft: #ede4fd;
  --fg: var(--lp-violet-deep);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0.6rem;
  border-radius: 10px;
  animation: lp-row-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(0.5s + var(--i) * 0.45s);
}
.lp-row + .lp-row { box-shadow: 0 -1px 0 #f4f4f5; }
.lp-row--changed { --soft: #fef3c7; --fg: #92400e; }
.lp-row--added   { --soft: #fce7f3; --fg: #9d174d; }
.lp-row--deleted { --soft: #ffe4e6; --fg: #9f1239; }
.lp-row--missing { --soft: #e0f2fe; --fg: #075985; }

.lp-row__file {
  display: grid;
  min-width: 0;
}
.lp-row__file b {
  overflow: hidden;
  font-family: var(--lp-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--foreground);
  white-space: nowrap;
  text-overflow: ellipsis;
  /* A long path loses its start, so the file name at the end stays in view.
     js/scan-paths.js trims it by whole folders; this is the fallback without
     it. The inner span keeps the path itself reading left to right. */
  direction: rtl;
  text-align: left;
}
.lp-row__file b span {
  direction: ltr;
  unicode-bidi: isolate;
}
.lp-row__file small {
  margin-top: 0.15rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.lp-pill {
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--soft);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--fg);
  animation: lp-pop 0.4s cubic-bezier(0.3, 1.6, 0.5, 1) both;
  animation-delay: calc(0.75s + var(--i) * 0.45s);
}

/* The beam: a band of light that sweeps down the rows, again and again */
.lp-scan__beam {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 5rem;
  background: linear-gradient(180deg, transparent, rgba(146, 81, 239, 0.1) 70%, rgba(146, 81, 239, 0.55) 98%, transparent);
  pointer-events: none;
  animation: lp-beam 4.5s cubic-bezier(0.45, 0, 0.55, 1) 0.3s infinite;
}

/* ---- Motion ---- */
@keyframes lp-drift {
  from { background-position: 0% 0%; }
  to   { background-position: 100% 100%; }
}
@keyframes lp-beam {
  0%   { transform: translateY(-5rem); opacity: 0; }
  10%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(24rem); opacity: 0; }
}
@keyframes lp-row-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes lp-pop {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-hero *,
  .lp-hero *::after,
  .lp-stage { animation: none !important; }
  .lp-scan__beam { display: none; }
}

/* ---- Narrower screens: the stage drops under the copy ---- */
@media (max-width: 1024px) {
  .lp-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 4.5rem; }
  .lp-hero__heading { max-width: 14ch; }
  .lp-stage { min-height: 0; padding: 3.5rem 2.5rem; }
}

@media (max-width: 640px) {
  .lp-hero { padding: 3rem 0 5rem; }
  .lp-hero__body { font-size: 1.0625rem; }
  .lp-hero__actions .btn { flex: 1 1 100%; }
  .lp-stage {
    padding: 2.5rem 0.875rem;
    border-radius: 22px;
  }
  .lp-stage__mark { width: 13rem; }
  .lp-row { gap: 0.6rem; padding-inline: 0.4rem; }
}

/* ---------------------------------------------------------------
   The comparison: the Alertica column lifted out as an outlined card

   The pricing table's markup and styles, with the featured column drawn
   as one card: a 2px primary outline built from inset shadows on each
   cell (the table is border-collapse: separate, so the cells take the
   rounded corners), a soft purple shadow down both sides, bold values and
   filled checks. Tripwire's column steps back to muted grey.
   --------------------------------------------------------------- */
.lp-compare {
  --lp-line: var(--primary);
  --lp-lift: rgba(146, 81, 239, 0.28);
  /* Room for the card's shadow, which the scroll container would clip */
  padding: 0.75rem 0 1.25rem;
}

.theme-shadcn .lp-compare .features .is-featured {
  background: #fff;
  box-shadow:
    inset 2px 0 0 var(--lp-line),
    inset -2px 0 0 var(--lp-line),
    -14px 0 18px -16px var(--lp-lift),
    14px 0 18px -16px var(--lp-lift);
  color: var(--foreground);
  font-weight: 700;
}
.theme-shadcn .lp-compare .features thead .is-featured {
  border-radius: 14px 14px 0 0;
  background: #f6f0ff;
  box-shadow:
    inset 2px 0 0 var(--lp-line),
    inset -2px 0 0 var(--lp-line),
    inset 0 2px 0 var(--lp-line),
    -14px 0 18px -16px var(--lp-lift),
    14px 0 18px -16px var(--lp-lift),
    0 -10px 18px -16px var(--lp-lift);
  color: var(--primary);
}
.theme-shadcn .lp-compare .features tbody:last-of-type tr:last-child .is-featured {
  border-radius: 0 0 14px 14px;
  box-shadow:
    inset 2px 0 0 var(--lp-line),
    inset -2px 0 0 var(--lp-line),
    inset 0 -2px 0 var(--lp-line),
    -14px 0 18px -16px var(--lp-lift),
    14px 0 18px -16px var(--lp-lift),
    0 12px 18px -14px var(--lp-lift);
}

.lp-compare__name {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.lp-compare__mark {
  width: 1.75rem;
  fill: currentColor;
}

/* Included, in Alertica's column: a filled check */
.theme-shadcn .lp-compare .is-featured .tick--on { background: var(--primary); }
.theme-shadcn .lp-compare .is-featured .tick--on::after {
  left: 8.5px;
  top: 5px;
  width: 6px;
  height: 11px;
  border-color: #fff;
  border-width: 0 2px 2px 0;
}

/* Tripwire's column: muted */
.theme-shadcn .lp-compare .features thead th:not(.is-featured):not(.features__label-col) {
  color: var(--muted-foreground);
}
.theme-shadcn .lp-compare .features tbody td:not(.is-featured) { color: var(--muted-foreground); }
.theme-shadcn .lp-compare td:not(.is-featured) .tick--on::after { border-color: #a1a1aa; }

/* ---------------------------------------------------------------
   Setup in three steps: cards, each with a small view of the product

   The views reuse the scan card's language from the hero: white panels,
   monospace paths and soft status chips. They are decorative (aria-hidden);
   the step's copy says everything they show.
   --------------------------------------------------------------- */
.lp-steps__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-step {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.75rem 0;
  overflow: hidden;
  border: 1px solid #ede4fd;
  border-radius: 20px;
  background: linear-gradient(180deg, #faf7ff 0%, #fff 70%);
}

.lp-step__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.5rem;
}
.lp-step__num {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  background: linear-gradient(135deg, #8b45ec 0%, #b02fc4 100%);
  box-shadow: 0 8px 18px -10px rgba(146, 81, 239, 0.9);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: #fff;
}
.lp-step__tag {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: #ede4fd;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--lp-violet-deep);
}
.lp-step__title {
  margin: 1.25rem 0 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--foreground);
}
.lp-step__body {
  /* Three lines on every card, so the product views start in a row */
  min-height: calc(3 * 1.6em);
  margin: 0.6rem 0 1.75rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--secondary-foreground);
}

/* ---- The product view: a white panel rising from the card's foot ---- */
.lp-ui {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.5rem;
  padding: 1rem 1rem 1.25rem;
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: #fff;
  box-shadow: 0 -12px 30px -22px rgba(91, 33, 182, 0.45);
  font-size: 0.8125rem;
}

/* Step 1: the connection form */
.lp-ui__tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.2rem;
  border-radius: 9px;
  background: #f4f4f5;
}
.lp-ui__tab {
  flex: 1;
  padding: 0.3rem 0;
  border-radius: 7px;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  color: var(--muted-foreground);
}
.lp-ui__tab.is-on {
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  color: var(--lp-violet-deep);
}
.lp-ui__field {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--lp-mono);
  font-size: 0.75rem;
  color: var(--foreground);
}
.lp-ui__field small {
  min-width: 2.25rem;
  font-family: var(--font-sans, inherit);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--muted-foreground);
}
.lp-ui__badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: #d1fae5;
  font-size: 0.75rem;
  font-weight: 700;
  color: #065f46;
}

/* Step 2: a folder and its rules */
.lp-ui__folder {
  font-family: var(--lp-mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--foreground);
}
.lp-ui__rule {
  --soft: #ede4fd;
  --fg: var(--lp-violet-deep);
  --c: var(--lp-violet);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  background: var(--soft);
  font-weight: 700;
  color: var(--fg);
}
.lp-ui__rule::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--c);
}
.lp-ui__rule--changed { --c: #f59e0b; --soft: #fef3c7; --fg: #92400e; }
.lp-ui__rule--deleted { --c: #f43f5e; --soft: #ffe4e6; --fg: #9f1239; }
.lp-ui__rule--missing { --c: #0ea5e9; --soft: #e0f2fe; --fg: #075985; }

/* Step 3: the SMS, and where else the alert went */
.lp-ui__sms {
  align-self: flex-start;
  max-width: 92%;
  padding: 0.6rem 0.8rem;
  border-radius: 14px 14px 14px 4px;
  background: #f4f4f5;
  line-height: 1.4;
  color: var(--foreground);
}
.lp-ui__sms b {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lp-pink);
}
.lp-ui__line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--secondary-foreground);
}
.lp-ui__line::before {
  content: "";
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--lp-violet) center / 0.7rem no-repeat;
}
.lp-ui__line--mail::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}
.lp-ui__line--soon {
  color: var(--muted-foreground);
}
.lp-ui__line--soon::before {
  background-color: #a1a1aa;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 6h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-7l-4 3v-3H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}
.lp-ui__line--soon em {
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: #f4f4f5;
  font-size: 0.6875rem;
  font-style: normal;
  font-weight: 700;
  color: var(--muted-foreground);
}
.lp-ui__line--saved::before {
  background-color: #10b981;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

@media (max-width: 1024px) {
  .lp-steps__list { grid-template-columns: minmax(0, 1fr); max-width: 34rem; }
  .lp-step__body { min-height: 0; }
}
@media (max-width: 640px) {
  .lp-step { padding: 1.5rem 1.25rem 0; }
}

/* Step 2's switch, shown on: the platform's ready-made checks */
.lp-ui__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-weight: 700;
  color: var(--foreground);
}
.lp-ui__toggle i {
  position: relative;
  flex: none;
  width: 2.1rem;
  height: 1.2rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #8b45ec 0%, #b02fc4 100%);
}
.lp-ui__toggle i::after {
  content: "";
  position: absolute;
  top: 0.15rem;
  right: 0.15rem;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: #fff;
}
.lp-ui__rule--added { --c: var(--lp-pink); --soft: #fce7f3; --fg: #9d174d; }
.lp-ui__rule--threat { --c: #e11d48; --soft: #ffe4e6; --fg: #9f1239; }

/* ---------------------------------------------------------------
   Reasons to buy: four columns on a band in the hero stage's gradient,
   with the line field at the barrel angle fading in from the top right
   --------------------------------------------------------------- */
.lp-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 6rem 0;
  background:
    radial-gradient(circle at 92% 0%, rgba(255, 95, 168, 0.55) 0, transparent 40%),
    radial-gradient(circle at 0% 100%, rgba(76, 195, 255, 0.35) 0, transparent 38%),
    linear-gradient(135deg, #4c1d95 0%, var(--lp-violet-deep) 35%, #7e2fd8 70%, #a3289f 100%);
  color: #fff;
}
.lp-band__lines {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: repeating-linear-gradient(calc(90deg + var(--barrel, 20deg)), rgba(255, 255, 255, 0.12) 0 1.5px, transparent 1.5px 14px);
  -webkit-mask-image: linear-gradient(210deg, #000 0%, transparent 55%);
  mask-image: linear-gradient(210deg, #000 0%, transparent 55%);
}
.lp-band .ad-head--light .ad-eyebrow::before { background: var(--lp-amber); }
.lp-band__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
}
.lp-band__item {
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.lp-band__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
}
.lp-band__title::before {
  content: "";
  display: block;
  width: 2rem;
  height: 4px;
  margin-bottom: 1rem;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--lp-amber), var(--lp-coral));
}
.lp-band__text {
  margin: 0.6rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #ede9fe;
}

/* ---------------------------------------------------------------
   What gets watched: each row opens on a solid icon tile, one hue per
   kind of check, in place of the plain barrel mark
   --------------------------------------------------------------- */
.lp-watch__icon {
  --c: var(--lp-violet);
  --soft: #ede4fd;
  display: block;
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 12px;
  background: var(--c);
  box-shadow: 0 8px 18px -10px var(--c);
}
.lp-watch__icon::after {
  content: "";
  position: absolute;
  inset: 0.65rem;
  background: #fff;
  -webkit-mask: var(--glyph) center / contain no-repeat;
  mask: var(--glyph) center / contain no-repeat;
}
/* Named by what the row watches: secrets, media folders, entry files,
   code, plugins, payments, suspicious files, mass changes */
.lp-watch__icon--key { --c: #d97706; --soft: #fef3c7; --glyph: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='m10.85 12.15 8.65-8.65M18 5l2 2M15 8l2 2'/%3E%3C/svg%3E"); }
.lp-watch__icon--image { --c: #db2777; --soft: #fce7f3; --glyph: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E"); }
.lp-watch__icon--code { --c: #7c3aed; --soft: #ede4fd; --glyph: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z'/%3E%3Cpath d='m10 13-2 2 2 2M14 13l2 2-2 2'/%3E%3C/svg%3E"); }
.lp-watch__icon--package { --c: #0284c7; --soft: #e0f2fe; --glyph: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 8 4.5v9L12 21l-8-4.5v-9z'/%3E%3Cpath d='m12 12 8-4.5M12 12v9M12 12 4 7.5'/%3E%3C/svg%3E"); }
.lp-watch__icon--warning { --c: #e11d48; --soft: #ffe4e6; --glyph: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E"); }
.lp-watch__icon--layers { --c: #059669; --soft: #d1fae5; --glyph: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 10 5-10 5L2 7z'/%3E%3Cpath d='m2 17 10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E"); }
.lp-watch__icon--plug { --c: #ea580c; --soft: #ffedd5; --glyph: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-5M9 8V2M15 8V2'/%3E%3Cpath d='M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8z'/%3E%3C/svg%3E"); }
.lp-watch__icon--card { --c: #4f46e5; --soft: #e0e7ff; --glyph: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20M6 15h4'/%3E%3C/svg%3E"); }

@media (max-width: 1024px) {
  .lp-band__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .lp-band { padding: 4rem 0; }
  .lp-band__list { grid-template-columns: minmax(0, 1fr); }
}
.lp-watch .ad-benefits__row { grid-template-columns: 2.75rem minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 640px) {
  .lp-watch .ad-benefits__row { grid-template-columns: 2.75rem minmax(0, 1fr); }
}
/* The one line in each row worth catching on a skim */
.lp-watch .ad-text strong {
  font-weight: 700;
  color: var(--foreground);
}

/* ---------------------------------------------------------------
   The other platform pages: a quiet row of links under the FAQ
   --------------------------------------------------------------- */
.lp-platforms {
  padding: 0 0 4.5rem;
}
.lp-platforms__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.lp-platforms__heading {
  margin: 0;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted-foreground);
}
.lp-platforms__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-platforms__link {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.lp-platforms__link:hover,
.lp-platforms__link:focus-visible {
  border-color: var(--primary);
  color: var(--primary);
}