/* Fork campaign landing pages — two-column hero with a signup card.
   Ported from masterclass.html so the paid-traffic pages and the course page
   read as one system. Design tokens (--card, --border, --ring, …) already
   resolve on these pages; they come from the Next stylesheet. */

.lp-hero { display: grid; gap: 2.5rem; align-items: center; width: 100% }
@media (min-width: 1024px) {
  .lp-hero { grid-template-columns: minmax(0, 1fr) 400px; gap: 4rem }
}

/* The Tailwind build here is pre-compiled, so arbitrary values such as
   lg:text-[4rem] and xl:text-[5.5rem] are not in the stylesheet and are
   silently ignored — but the ones that DO exist still size the headline far too
   large once a form sits beside it. Set it explicitly and scale it with the
   column. Unlayered, so it wins over Tailwind's @layer rules. */
   The upper bound is set by the longest first line in the set — "Consolidate
   your tools." — which starts wrapping in the 656px column at about 55px, so
   1280px viewports land at ~53px and wider ones cap at 4rem. */
.lp-hero h1 { font-size: clamp(2.5rem, 7.6vw, 3.25rem); line-height: 1.05; text-wrap: balance }
@media (min-width: 1024px) {
  .lp-hero h1 { font-size: clamp(2.5rem, calc(6.8vw - 34px), 4rem) }
}
.lp-hero .lp-sub { max-width: 34rem }

/* The card is an opaque surface; the hero's text-halo must not bleed onto it. */
.lp-card { background: var(--card); border: 1px solid var(--border); border-radius: 1.25rem;
           padding: 1.75rem; box-shadow: 0 10px 26px -18px rgba(23, 20, 16, .55) }
.lp-card, .lp-card * { text-shadow: none !important }
.lp-card h2 { font-size: 1.25rem; font-weight: 500; letter-spacing: -.01em; color: var(--foreground) }

/* What the reader is signing up for. This sits above the fields, because as
   small print under the button it was the easiest thing on the card to miss. */
.lp-lead { margin-top: .4rem; font-size: .9rem; line-height: 1.5; color: var(--display-muted) }
.lp-offer { margin: .85rem 0 0; padding: .8rem .9rem; list-style: none;
            border: 1px solid var(--border); border-radius: .75rem; background: var(--muted) }
.lp-offer li { display: flex; gap: .55rem; align-items: flex-start;
               font-size: .88rem; line-height: 1.45; font-weight: 500; color: var(--foreground) }
.lp-offer li + li { margin-top: .45rem }
.lp-offer .lp-tick { flex: 0 0 auto; color: var(--foreground); font-weight: 600 }

.lp-field { margin-top: 1rem }
.lp-field label { display: block; font-size: .85rem; font-weight: 500;
                  color: var(--foreground); margin-bottom: .4rem }
.lp-field input, .lp-field textarea {
  width: 100%; border: 1px solid var(--border); background: var(--background);
  border-radius: .65rem; padding: .68rem .85rem; font: inherit; font-size: .95rem;
  color: var(--foreground); appearance: none }
.lp-field textarea { resize: vertical; min-height: 4.5rem }
.lp-field input:focus-visible, .lp-field textarea:focus-visible {
  outline: 2px solid var(--ring); outline-offset: 2px }

/* Spam trap. Off-screen rather than display:none so bots still fill it. */
.lp-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden }

.lp-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%;
          margin-top: 1.4rem; background: var(--foreground); color: var(--background);
          border: 1px solid var(--foreground); border-radius: 9999px; padding: .8rem 1.6rem;
          font: inherit; font-weight: 500; font-size: .95rem; cursor: pointer;
          transition: opacity .15s ease }
.lp-btn:hover { opacity: .88 }
.lp-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px }
.lp-btn[disabled] { opacity: .5; cursor: not-allowed }

.lp-fine { margin-top: .8rem; font-size: .78rem; line-height: 1.5; color: var(--display-muted) }
.lp-error { margin-top: .8rem; font-size: .85rem; color: #8c2f1f }
.lp-error[hidden] { display: none }

.lp-success h3 { font-size: 1.4rem; font-weight: 600; letter-spacing: -.02em; color: var(--foreground) }
.lp-success p { margin-top: .7rem; font-size: .92rem; line-height: 1.6; color: var(--display-muted) }