/* Product Locked — the landing page for a product the organisation has not bought.
   Ported from the "Product Locked" design component; the DC carries its styles inline, so these are
   the same values expressed as classes.

   Three colour tokens here exist because the alternatives were measured and failed, per the
   handoff's contrast notes. Do not "tidy" them back:
     --pl-muted  #5F6A79  body text. #8791A0 (3.0:1) and #98A2B0 (2.6:1) both fail on white.
     --pl-link   #1E56C0  small text on a blue tint. #2F6FE0 on #EAF1FC is 4.13:1 and has caused
                          three regressions in this project.
     the disabled submit is a neutral fill with dark ink, never a tinted red — white on #F0A99D
     measures 1.93:1, and that is the button's *default* state. */

/* Every fe-* stylesheet opens with this; app-chrome.css does not set it, so without it the 32px
   padding lands OUTSIDE the 90% and this page ends up ~51px wider than every other app. */
* { box-sizing: border-box; }

:root {
  --pl-ink: #16273F;
  --pl-body: #33404F;
  --pl-muted: #5F6A79;
  --pl-label: #5B6675;
  --pl-line: #EAEDF3;
  --pl-line-soft: #EFF2F7;
  --pl-field: #E4E9F1;
  --pl-red: #E8402A;
  --pl-green: #14795A;
  --pl-link: #1E56C0;
}

body { margin: 0; font-family: "Mulish", system-ui, sans-serif; background: #F6F7FA; color: var(--pl-ink); }
.app-shell { display: flex; flex-direction: column; min-height: 100vh; }

/* The shared chrome centres its header and footer at width:100%/max-width:1440px, but every fe-*
   app lays its own content out at max-width:90%. On a wide screen that leaves the header wider than
   the page under it, so bring both to the same 90% here. Scoped to .pl-page (set on <body>) rather
   than edited in app-chrome.css: that file is shared by ~40 apps and this is not their bug. */
.pl-page .rm-header-inner { max-width: 90%; width: 100%; padding: 14px 32px; }
.pl-page .rm-footer-inner { max-width: 90%; width: 100%; padding: 22px 32px; }

/* The header title's inline-flex layout and its state pill (locked / trial countdown) are both
   owned by menu.js now (.rm-header-title, .rm-header-pill) -- it runs on every app including this
   one, so there is one implementation instead of a copy that can drift from it. */

/* ------------------------------- Hero ------------------------------- */
.pl-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, #16273F 0%, #22395C 58%, #2C3F6B 100%); }
.pl-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(640px 360px at 8% -6%, rgba(122, 90, 240, 0.32), transparent 66%),
    radial-gradient(580px 340px at 92% 4%, rgba(232, 64, 42, 0.24), transparent 66%);
}
.pl-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.45;
  background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 30px 30px;
}
.pl-hero-inner { position: relative; max-width: 90%; width: 100%; margin: 0 auto; padding: 38px 32px 42px; }
.pl-hero-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.pl-hero-copy { min-width: 0; animation: plFadeUp 0.34s ease both; }

.pl-tags { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin-bottom: 16px; }
.pl-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(9, 17, 29, 0.5); border: 1px solid rgba(158, 197, 255, 0.4); color: #9EC5FF;
  font-family: "Lexend", sans-serif; font-weight: 700; font-size: 12px;
  padding: 7px 14px; border-radius: 999px;
}
.pl-addon {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: "Lexend", sans-serif; font-weight: 700; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: #F3D585;
}
.pl-headline {
  font-family: "Lexend", sans-serif; font-weight: 800; font-size: 42px; line-height: 1.05;
  letter-spacing: -0.9px; color: #fff; margin: 0 0 16px;
}
.pl-standfirst { max-width: 640px; font-size: 17px; line-height: 1.62; color: #C2CEDC; margin: 0 0 26px; }

.pl-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.pl-btn-primary {
  display: flex; align-items: center; gap: 10px;
  background: var(--pl-red); border: none; border-radius: 14px; padding: 16px 28px; cursor: pointer;
  font-family: "Lexend", sans-serif; font-weight: 700; font-size: 16px; color: #fff;
  box-shadow: 0 10px 26px rgba(232, 64, 42, 0.4);
}
.pl-btn-primary:hover { background: #D0361F; }
.pl-btn-ghost {
  display: flex; align-items: center; gap: 9px;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px; padding: 16px 24px; text-decoration: none;
  font-family: "Lexend", sans-serif; font-weight: 600; font-size: 15.5px; color: #DCE4EE;
}
.pl-btn-ghost:hover { background: rgba(255, 255, 255, 0.18); }
.pl-btn-ghost:disabled { opacity: 0.6; cursor: not-allowed; }
.pl-btn-ghost:disabled:hover { background: rgba(255, 255, 255, 0.1); }

.pl-trial-error {
  margin: 12px 0 0; font-family: "Mulish", sans-serif; font-size: 13.5px; color: #F6C6BC;
}

.pl-proof { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.pl-proof-item { display: flex; flex-direction: column; gap: 3px; }
.pl-proof-value { font-family: "Lexend", sans-serif; font-weight: 800; font-size: 23px; line-height: 1; color: #fff; }
.pl-proof-label { font-size: 12px; color: #9DAFC4; }

/* The screenshot is shown, not hidden: the page's whole argument is that the product is real and
   they cannot reach it. The lock badge sits over it rather than a blur. */
.pl-shot-wrap { position: relative; animation: plFadeUp 0.42s ease both; }
.pl-shot {
  border-radius: 20px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 24px 60px rgba(8, 16, 28, 0.42); aspect-ratio: 16 / 11; background: #0F1B2E;
  display: flex; align-items: center; justify-content: center;
}
.pl-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
/* contain, not cover: the recordings are much wider (2160x900) than this card, and cropping a
   walkthrough can cut the very UI it's meant to show. */
.pl-shot video { width: 100%; height: 100%; object-fit: contain; background: #0F1B2E; display: block; }
.pl-shot-empty { font-family: "Lexend", sans-serif; font-weight: 600; font-size: 13px; color: #6E819B; }

/* ------------------------------- Body ------------------------------- */
.pl-main { flex: 1; max-width: 90%; width: 100%; margin: 0 auto; padding: 44px 32px 60px; display: flex; flex-direction: column; gap: 26px; }
/* Paired rows. `align-items: start` matters: without it the shorter card in each pair stretches to
   the taller one's height and its background runs on past its content. */
/* `stretch` (not `start`) so these two always match heights; their inner grids then distribute
   their rows into whatever space the taller card creates, rather than leaving a gap at the bottom. */
.pl-row-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: stretch; }
.pl-row-2 > .pl-card { display: flex; flex-direction: column; }
.pl-row-faq { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 26px; align-items: start; }

.pl-card { background: #fff; border: 1px solid var(--pl-line); border-radius: 20px; box-shadow: 0 4px 16px rgba(18, 38, 63, 0.05); padding: 32px; }
.pl-h2 { font-family: "Lexend", sans-serif; font-weight: 700; font-size: 27px; letter-spacing: -0.4px; color: var(--pl-ink); margin: 0 0 9px; }
.pl-lede { font-size: 15.5px; line-height: 1.65; color: var(--pl-muted); margin: 0; }
.pl-why-head { max-width: 720px; margin-bottom: 26px; }

.pl-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.pl-benefit { background: #FBFCFE; border: 1px solid var(--pl-line-soft); border-radius: 16px; padding: 22px; }
.pl-benefit-icon { display: inline-flex; width: 42px; height: 42px; border-radius: 13px; align-items: center; justify-content: center; }
.pl-benefit h3 { font-family: "Lexend", sans-serif; font-weight: 700; font-size: 17px; color: var(--pl-ink); margin: 14px 0 7px; }
.pl-benefit p { font-size: 14px; line-height: 1.6; color: var(--pl-muted); margin: 0; }

.pl-how { scroll-margin-top: 100px; }
.pl-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 22px; flex: 1; align-content: space-between; }
.pl-step { display: flex; flex-direction: column; gap: 12px; }
.pl-step-head { display: flex; align-items: center; gap: 11px; }
.pl-step-n {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--pl-ink);
  display: flex; align-items: center; justify-content: center;
  font-family: "Lexend", sans-serif; font-weight: 800; font-size: 14px; color: #fff;
}
.pl-step-line { flex: 1; height: 2px; border-radius: 2px; background: var(--pl-field); }
.pl-step h3 { font-family: "Lexend", sans-serif; font-weight: 700; font-size: 16px; color: var(--pl-ink); margin: 0; }
.pl-step p { font-size: 13.5px; line-height: 1.6; color: var(--pl-muted); margin: 0; }

.pl-ticks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; flex: 1; align-content: space-between; }
.pl-tick { display: flex; align-items: flex-start; gap: 11px; }
.pl-tick svg { flex: 0 0 auto; margin-top: 1px; }
.pl-tick span { font-size: 14.5px; line-height: 1.55; color: var(--pl-body); }


.pl-quote {
  background: linear-gradient(135deg, #16273F, #22395C); border-radius: 20px; padding: 40px;
  box-shadow: 0 12px 34px rgba(18, 38, 63, 0.22); position: relative; overflow: hidden;
}
.pl-quote::before { content: ""; position: absolute; top: -90px; right: -60px; width: 280px; height: 280px; border-radius: 50%; filter: blur(50px); background: rgba(122, 90, 240, 0.28); pointer-events: none; }
.pl-quote-inner { position: relative; max-width: 820px; }
.pl-quote-text { font-family: "Lexend", sans-serif; font-weight: 600; font-size: 22px; line-height: 1.5; letter-spacing: -0.2px; color: #fff; margin: 0 0 20px; }
.pl-quote-by { display: flex; align-items: center; gap: 13px; }
.pl-quote-avatar { width: 44px; height: 44px; border-radius: 50%; background: #7A5AF0; display: flex; align-items: center; justify-content: center; font-family: "Lexend", sans-serif; font-weight: 800; font-size: 14px; color: #fff; flex: 0 0 auto; }
.pl-quote-name { font-family: "Lexend", sans-serif; font-weight: 700; font-size: 15px; color: #fff; }
.pl-quote-role { font-size: 13px; color: #A2B3C7; }

.pl-faqs { display: flex; flex-direction: column; gap: 10px; }
.pl-faq { border: 1px solid var(--pl-line-soft); border-radius: 13px; overflow: hidden; background: #FBFCFE; }
.pl-faq-q { display: flex; align-items: center; gap: 13px; width: 100%; background: none; border: none; padding: 16px 18px; cursor: pointer; text-align: left; }
.pl-faq-q > span:first-child { flex: 1; min-width: 0; font-family: "Lexend", sans-serif; font-weight: 600; font-size: 15.5px; color: var(--pl-ink); }
.pl-chev { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; background: #F1F4FA; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease; }
.pl-faq-q[aria-expanded="true"] .pl-chev { transform: rotate(180deg); }
.pl-faq-a { padding: 0 18px 18px; font-size: 14.5px; line-height: 1.65; color: var(--pl-muted); }

/* Sits in the narrow column beside the FAQ, so it stacks rather than sitting side by side. */
.pl-final { background: #fff; border: 1.5px solid #F3B9AE; border-radius: 20px; padding: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.pl-final-copy { min-width: 0; }
.pl-final h2 { font-family: "Lexend", sans-serif; font-weight: 700; font-size: 21px; letter-spacing: -0.3px; color: var(--pl-ink); margin: 0 0 8px; }
.pl-final p { font-size: 14.5px; line-height: 1.6; color: var(--pl-muted); margin: 0; }
.pl-final .pl-btn-primary { width: 100%; justify-content: center; padding: 15px 22px; font-size: 15px; box-shadow: 0 8px 22px rgba(232, 64, 42, 0.34); }

/* ------------------------------- Enquiry modal ------------------------------- */
.pl-modal-backdrop { position: fixed; inset: 0; z-index: 78; background: rgba(14, 24, 38, 0.6); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.pl-modal { width: 560px; max-width: 100%; max-height: 90vh; overflow-y: auto; background: #fff; border-radius: 22px; box-shadow: 0 40px 100px rgba(8, 16, 28, 0.44); animation: plPop 0.24s ease both; }
.pl-modal-pad { padding: 30px 32px; }
.pl-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.pl-modal-head h2 { font-family: "Lexend", sans-serif; font-weight: 700; font-size: 23px; color: var(--pl-ink); margin: 0; }
.pl-modal-sub { font-size: 14.5px; line-height: 1.6; color: var(--pl-muted); margin: 0 0 24px; }
.pl-modal-close { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 11px; background: #F4F6FA; border: 1px solid #E4E8EF; cursor: pointer; display: flex; align-items: center; justify-content: center; }

.pl-label { display: block; font-family: "Lexend", sans-serif; font-weight: 700; font-size: 12.5px; color: var(--pl-label); margin-bottom: 8px; }
.pl-label.spaced { margin-top: 18px; }
.pl-label .pl-optional { font-weight: 600; color: var(--pl-muted); }
.pl-input, .pl-textarea {
  width: 100%; box-sizing: border-box; padding: 13px 15px;
  border: 1.6px solid var(--pl-field); border-radius: 12px;
  font-family: "Mulish", sans-serif; font-size: 15px; color: var(--pl-ink); outline: none;
}
.pl-textarea { min-height: 92px; resize: vertical; line-height: 1.6; }
.pl-input:focus, .pl-textarea:focus { border-color: #C9D3E0; }
.pl-input[aria-invalid="true"] { border-color: #C0392B; }
.pl-field-error { display: flex; align-items: center; gap: 7px; margin-top: 7px; font-size: 12.5px; color: #C0392B; }

.pl-chips { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 18px; }
.pl-chip {
  border-radius: 999px; padding: 9px 15px; cursor: pointer;
  font-family: "Lexend", sans-serif; font-weight: 600; font-size: 13.5px;
  background: #fff; border: 1.5px solid var(--pl-field); color: var(--pl-label);
}
.pl-chip[aria-pressed="true"] { background: var(--pl-ink); border-color: var(--pl-ink); color: #fff; }

.pl-submit-row { display: flex; align-items: center; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
/* Disabled is a neutral fill with dark ink, never a tinted red — see the note at the top. */
.pl-submit {
  display: flex; align-items: center; gap: 9px; border: none; border-radius: 13px; padding: 14px 24px;
  font-family: "Lexend", sans-serif; font-weight: 700; font-size: 15px;
  background: var(--pl-red); color: #fff; cursor: pointer; box-shadow: 0 6px 18px rgba(232, 64, 42, 0.3);
}
.pl-submit:disabled { background: #EDF0F5; color: var(--pl-label); cursor: default; box-shadow: none; }
.pl-submit-hint { font-size: 12.5px; color: var(--pl-muted); }

.pl-sent { padding: 44px 36px; text-align: center; }
.pl-sent-icon { display: inline-flex; width: 62px; height: 62px; border-radius: 20px; background: #E7F7F1; align-items: center; justify-content: center; margin-bottom: 18px; }
.pl-sent h2 { font-family: "Lexend", sans-serif; font-weight: 700; font-size: 24px; color: var(--pl-ink); margin: 0 0 10px; }
.pl-sent p { font-size: 15px; line-height: 1.6; color: var(--pl-muted); margin: 0 0 24px; }
.pl-sent-close { background: var(--pl-ink); border: none; border-radius: 13px; padding: 13px 28px; cursor: pointer; font-family: "Lexend", sans-serif; font-weight: 600; font-size: 15px; color: #fff; }

@keyframes plFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes plPop { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .pl-hero-copy, .pl-shot-wrap, .pl-modal { animation: none; }
  .pl-chev { transition: none; }
}

/* Desktop-first, as designed: the hero and "What's included" collapse to one column. */
@media (max-width: 1100px) {
  .pl-row-2, .pl-row-faq { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .pl-steps, .pl-ticks { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .pl-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .pl-headline { font-size: 33px; }
}