/* Landing sheet for BOTH author doors — /player and /byos when logged out. Each page
   is a thin wrapper that renders the shared body in .src/homes/_byos_landing.php, which
   loads this file. The byos-landing.css it replaced has been deleted.

   Loaded with a plain <link> from the page body because $dashboard_styles is keyed by
   dashboard id and never fires for an anonymous visitor ($dashboard == 0), so it cannot
   be used here.

   Everything is .pl-* scoped so it cannot leak into the shared chrome.

   The visual system is the one the internal product decks use (kudzu
   Presentacion_Interna_*.html): dark hero with grid overlay and glow, numbered section
   eyebrows, alternating light sections, cards with icons, a step flow, tick lists and
   reveal-on-scroll. The palette is the BYOS indigo carried over from the sheet this one replaced. */

.pl-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ── palette ───────────────────────────────────────────────────────────────
   Declared on the top-level blocks rather than :root, so this sheet defines nothing
   globally — an anonymous landing shares its document with the platform chrome.

   It is deliberately NOT declared on a wrapper element: every block here is a Bootstrap
   .row, whose negative margins need the chrome's .container as their direct parent. An
   extra wrapper div would inset the whole page by 15px on each side. Descendants inherit
   custom properties, so declaring them on each block reaches every card inside it. */
.pl-hero,
.pl-section {
  --pl-ink-900: #0b1020;
  --pl-ink-800: #111827;
  --pl-ink-700: #1f2937;
  --pl-indigo: #4338ca;
  --pl-indigo-l: #8b8bf0;
  --pl-indigo-d: #3730a3;
  --pl-violet: #312e81;
  --pl-emerald: #1f6f5c;
  --pl-gold: #b45309;
  --pl-bone: #f5f6f8;
  --pl-paper: #ffffff;
  --pl-ink: #111827;
  /* #4b5563 on #ffffff is 7.6:1 and on #f5f6f8 is 7.2:1 — both clear AAA for body text. */
  --pl-ink-soft: #4b5563;
  --pl-muted: #6b7280;
  --pl-line: #e5e7eb;
  --pl-shadow: 0 18px 50px -22px rgba(17, 24, 39, .40);
  --pl-shadow-s: 0 10px 30px -16px rgba(17, 24, 39, .30);
}

/* ── hero ─────────────────────────────────────────────────────────────────── */

.pl-hero {
  position: relative;
  overflow: hidden;
  padding: 5.5rem 0 4.5rem;
  text-align: center;
  color: #fff;
  background: radial-gradient(1100px 640px at 50% -10%, #312e81 0%, var(--pl-ink-700) 46%, var(--pl-ink-900) 88%);
}

.pl-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(139, 139, 240, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 139, 240, .09) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask: radial-gradient(760px 460px at 50% 34%, #000 0%, transparent 76%);
  mask: radial-gradient(760px 460px at 50% 34%, #000 0%, transparent 76%);
}

.pl-hero-glow {
  position: absolute;
  top: -150px;
  left: 50%;
  width: 520px;
  height: 520px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(67, 56, 202, .38), rgba(49, 46, 129, 0) 62%);
  filter: blur(6px);
}

.pl-hero-inner {
  position: relative;
  z-index: 2;
}

.pl-badge {
  display: inline-block;
  margin-bottom: 1.25rem;
  padding: .35rem .85rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  /* rgba(255,255,255,.82) over the #1f2937 mid-stop is 11.4:1 — the gradient is dark enough
     at every stop that this clears AAA. Same value the /byos hero badge uses. */
  color: rgba(255, 255, 255, .82);
}

.pl-hero-title {
  max-width: 18ch;
  margin: 0 auto 1rem;
  font-size: clamp(2.1rem, 5.4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
}

.pl-hero-sub {
  max-width: 62ch;
  margin: 0 auto;
  font-size: clamp(1.02rem, 2vw, 1.2rem);
  line-height: 1.6;
  color: #d8dfea;
}

.pl-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
  margin-top: 2rem;
}

.pl-btn {
  display: inline-block;
  padding: .8rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s, background .2s;
}

.pl-btn:hover,
.pl-btn:focus {
  text-decoration: none;
  transform: translateY(-2px);
}

.pl-btn-primary {
  color: #fff;
  background: linear-gradient(150deg, var(--pl-indigo), var(--pl-violet));
  box-shadow: 0 10px 24px -12px rgba(67, 56, 202, .95);
}

.pl-btn-primary:hover,
.pl-btn-primary:focus {
  color: #fff;
}

.pl-btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .07);
}

.pl-btn-ghost:hover,
.pl-btn-ghost:focus {
  color: #fff;
  background: rgba(255, 255, 255, .15);
}

.pl-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
  margin-top: 2.25rem;
}

.pl-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1rem;
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  color: #f2f5f9;
  background: rgba(255, 255, 255, .07);
}

.pl-pill .pl-pill-icon {
  display: inline-flex;
  color: var(--pl-indigo-l);
}

.pl-pill .pl-pill-icon svg {
  width: 16px;
  height: 16px;
}

/* ── sections ─────────────────────────────────────────────────────────────── */

.pl-section {
  padding: 4.5rem 0;
  background: var(--pl-paper);
}

/* Every block here is a Bootstrap .row, and the chrome drops the page body straight into
   <main class="w-100"> with no .container to absorb Bootstrap's -15px row gutter. Left as-is
   the sections sit at left:-15 and overflow the viewport on the right by the same amount —
   measured 953px against a 938px viewport on test, i.e. a horizontal scrollbar on every
   screen. These sections paint full-bleed backgrounds and want the full width and no more,
   so the gutter is simply removed. */
.pl-hero,
.pl-section {
  margin-right: 0;
  margin-left: 0;
}

.pl-bg-alt {
  background: var(--pl-bone);
}

.pl-bg-deep {
  color: #eef1f6;
  background: linear-gradient(180deg, var(--pl-ink-800), var(--pl-ink-900));
}

.pl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  margin-bottom: .75rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pl-indigo-d);
}

.pl-bg-deep .pl-eyebrow {
  color: var(--pl-indigo-l);
}

.pl-eyebrow-num {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: 0;
  color: #fff;
  background: var(--pl-indigo-d);
}

.pl-bg-deep .pl-eyebrow-num {
  background: var(--pl-indigo);
}

.pl-section-title {
  max-width: 24ch;
  margin: 0 0 1rem;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 700;
  line-height: 1.18;
  color: var(--pl-ink);
}

.pl-bg-deep .pl-section-title {
  color: #fff;
}

.pl-section-sub {
  max-width: 66ch;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--pl-ink-soft);
}

.pl-bg-deep .pl-section-sub {
  color: #c3ccdb;
}

.pl-center {
  text-align: center;
}

.pl-center .pl-eyebrow {
  justify-content: center;
}

.pl-center .pl-section-title,
.pl-center .pl-section-sub {
  margin-left: auto;
  margin-right: auto;
}

/* ── card grids ───────────────────────────────────────────────────────────── */

.pl-grid {
  display: grid;
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.pl-g2 { grid-template-columns: repeat(2, 1fr); }
.pl-g3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) {
  .pl-g3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .pl-g2,
  .pl-g3 { grid-template-columns: 1fr; }
}

.pl-card {
  padding: 1.6rem;
  border: 1px solid var(--pl-line);
  border-radius: 18px;
  background: var(--pl-paper);
  box-shadow: var(--pl-shadow-s);
  transition: transform .3s, box-shadow .3s;
}

.pl-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pl-shadow);
}

.pl-bg-deep .pl-card {
  color: #eef1f6;
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
  box-shadow: none;
}

.pl-card-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: .9rem;
  border-radius: 12px;
  color: var(--pl-indigo-d);
  background: rgba(67, 56, 202, .12);
}

.pl-bg-deep .pl-card-icon {
  color: var(--pl-indigo-l);
  background: rgba(67, 56, 202, .28);
}

/* geticon() emits an <svg> that inherits colour from the wrapper — tint with color, never
   fill. See the geticon svg currentColor note in the platform docs. */
.pl-card-icon svg {
  width: 22px;
  height: 22px;
}

.pl-card-title {
  margin: 0 0 .45rem;
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--pl-ink);
}

.pl-bg-deep .pl-card-title {
  color: #fff;
}

.pl-card-body {
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--pl-ink-soft);
}

.pl-bg-deep .pl-card-body {
  color: #c3ccdb;
}

.pl-card-tag {
  display: inline-block;
  margin-top: .9rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
  color: var(--pl-indigo-l);
  background: rgba(67, 56, 202, .22);
}

/* ── step flow ────────────────────────────────────────────────────────────── */

.pl-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: pl-step;
}

@media (max-width: 900px) {
  .pl-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .pl-steps { grid-template-columns: 1fr; }
}

.pl-step {
  position: relative;
  padding: 1.5rem 1.4rem;
  border: 1px solid var(--pl-line);
  border-top: 3px solid var(--pl-indigo);
  border-radius: 16px;
  background: var(--pl-paper);
  box-shadow: var(--pl-shadow-s);
}

.pl-step-num {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: .7rem;
  border-radius: 50%;
  font-size: .88rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(150deg, var(--pl-indigo), var(--pl-violet));
}

.pl-step-title {
  margin: 0 0 .35rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--pl-ink);
}

.pl-step-body {
  margin: 0;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--pl-ink-soft);
}

/* ── tick list ────────────────────────────────────────────────────────────── */

.pl-ticks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .35rem 2rem;
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 720px) {
  .pl-ticks { grid-template-columns: 1fr; }
}

.pl-ticks li {
  position: relative;
  padding: .55rem 0 .55rem 1.9rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--pl-ink-soft);
}

.pl-ticks li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: .55rem;
  font-weight: 800;
  color: var(--pl-emerald);
}

/* ── reassurance note ─────────────────────────────────────────────────────── */

.pl-note {
  max-width: 74ch;
  margin: 0 auto;
  padding: 1.75rem 1.9rem;
  border: 1px solid rgba(67, 56, 202, .20);
  border-left: 4px solid var(--pl-indigo);
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(67, 56, 202, .07), rgba(46, 127, 182, .07));
}

.pl-note-title {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .55rem;
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--pl-ink);
}

.pl-note-title svg {
  width: 20px;
  height: 20px;
  color: var(--pl-indigo-d);
}

.pl-note-body {
  margin: 0;
  font-size: .98rem;
  line-height: 1.65;
  color: var(--pl-ink-soft);
}

.pl-link {
  display: inline-block;
  margin-top: .9rem;
  font-weight: 700;
  color: var(--pl-indigo-d);
}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */

.pl-faq {
  max-width: 80ch;
  margin: 2.25rem auto 0;
}

.pl-faq-item {
  margin-bottom: .6rem;
  border: 1px solid var(--pl-line);
  border-radius: 14px;
  background: var(--pl-paper);
  box-shadow: var(--pl-shadow-s);
}

.pl-faq-q {
  padding: 1.05rem 1.3rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--pl-ink);
  cursor: pointer;
}

.pl-faq-q::marker {
  color: var(--pl-indigo);
}

.pl-faq-a {
  margin: 0;
  padding: 0 1.3rem 1.15rem;
  font-size: .96rem;
  line-height: 1.65;
  color: var(--pl-ink-soft);
}

/* ── contact / form ───────────────────────────────────────────────────────── */

.pl-form-panel {
  max-width: 780px;
  margin: 2.25rem auto 0;
  padding: .5rem;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 20px;
  background: rgba(255, 255, 255, .05);
}

/* landings.php sizes the iframe to 100% of its box, so the box has to have a height. */
.pl-form-panel .clickup-loader-wrap {
  height: 620px;
  overflow: hidden;
  border-radius: 16px;
}

.pl-form-panel iframe {
  display: block;
  height: 100%;
  border: 0;
  border-radius: 16px;
  background: transparent;
}

.pl-contact-alt {
  margin: 1.5rem 0 0;
  font-size: .92rem;
  color: #c3ccdb;
  text-align: center;
}

.pl-contact-alt a {
  font-weight: 700;
  color: var(--pl-indigo-l);
}

/* ── reveal on scroll ─────────────────────────────────────────────────────── */

/* The hidden start state hangs off .pl-js, which ONLY the reveal script sets, and only after
   it has checked that it can actually finish the job. This is the whole point of the class:
   `opacity: 0` by default would mean that any failure of that script — a CSP that blocks
   inline JS, a parse error, a browser without IntersectionObserver — leaves everything below
   the hero permanently invisible. On a page whose entire purpose is to be read by strangers,
   the no-JS rendering has to be the readable one. */
.pl-js .pl-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1);
}

.pl-js .pl-reveal.pl-in {
  opacity: 1;
  transform: none;
}

/* A visitor who asked for less motion never gets .pl-js at all, so nothing above applies to
   them and there is no start state to undo. Only the hover motion needs neutralising here. */
@media (prefers-reduced-motion: reduce) {
  .pl-btn:hover,
  .pl-btn:focus,
  .pl-card:hover {
    transform: none;
  }
}