/* ================================================================
   fop-landing.css — landing.php only ("Type Landing")

   Ported from _planning/KevsWork/funofficepools-homepage-mockup.html.
   Load AFTER /CSS/fop-layout.css, which supplies the reset, the global
   header, the top nav and #fop-bottomad.

   Everything here is scoped to #lp so it cannot leak into the shared
   header/nav or any other page.

   PALETTE NOTE: these --lp-* tokens are deliberately NOT the shared
   --primary/--bg theme vars. Logged-out visitors are locked to
   teal/light anyway (index.php forces it for non-premium), and the
   mockup's bespoke look is the point of the redesign. The body.dark
   block at the foot exists so the ADMIN PREVIEW is readable in dark
   mode — real visitors never see it.
   ================================================================ */

#lp {
  --lp-teal-900: #07463b;
  --lp-teal-800: #0a5548;
  --lp-teal-700: #0e6d5c;
  --lp-teal-600: #138673;
  --lp-teal-500: #1a9d87;
  --lp-teal-100: #d5f0e5;
  --lp-teal-050: #e9f8f1;
  --lp-gold:     #ffc82c;
  --lp-gold-dk:  #e0a800;
  --lp-orange:   #f2870d;
  --lp-ink:      #112233;
  --lp-ink-2:    #3d5450;
  --lp-muted:    #6b8480;
  --lp-line:     #cfe6dd;
  --lp-card:     #ffffff;
  --lp-hero-txt: #ffffff;
  --lp-hero-sub: #bfe0d6;
  --lp-shadow:   0 1px 2px rgba(7,70,59,.06), 0 6px 20px rgba(7,70,59,.08);
  --lp-radius:   12px;

  /* fop-layout.css sets body{font-size:13px}. The mockup is designed at a
     16px base, so re-establish it here rather than rescaling every rule. */
  font-size: 16px;
  line-height: 1.5;
  background: var(--lp-teal-050);
  color: var(--lp-ink);
  -webkit-font-smoothing: antialiased;
}

#lp a { color: var(--lp-teal-700); text-decoration: none; }
#lp a:hover { text-decoration: underline; }
/* position:relative so absolutely-positioned info-tip dots anchor to the rail
   rather than escaping to the viewport. No visual effect on its own. */
#lp .wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; position: relative; }
#lp section { padding: 52px 0; }

/* ================================================================
   BUTTONS
   ================================================================ */
#lp .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: inherit; font-weight: 700; font-size: 14px;
  border-radius: 9px; padding: 10px 18px;
  border: 1.5px solid transparent; cursor: pointer;
  transition: background .15s, transform .15s, border-color .15s;
  text-decoration: none; white-space: nowrap;
}
#lp .btn:hover { text-decoration: none; transform: translateY(-1px); }
#lp .btn-gold    { background: var(--lp-gold); color: #0b2e27; border-color: var(--lp-gold-dk); }
#lp .btn-gold:hover { background: #ffd458; }
#lp .btn-teal    { background: var(--lp-teal-600); color: #fff; }
#lp .btn-teal:hover { background: var(--lp-teal-500); }
#lp .btn-ghost   { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
#lp .btn-ghost:hover { background: rgba(255,255,255,.12); }
/* Hero "Log In". It used to be .btn-ghost -- transparent on the dark teal hero, which
   made it far quieter than the gold Create Account beside it. Solid white gives it
   equal weight while keeping gold as the primary action. */
#lp .btn-light   { background: #fff; color: var(--lp-teal-800); border-color: #fff; }
#lp .btn-light:hover { background: var(--lp-teal-050); }
#lp .btn-outline { background: var(--lp-card); color: var(--lp-teal-700); border-color: var(--lp-line); }
#lp .btn-outline:hover { border-color: var(--lp-teal-600); background: #f4fbf8; }
#lp .btn-lg      { font-size: 16px; padding: 14px 26px; border-radius: 10px; }
#lp .btn:focus-visible { outline: 3px solid var(--lp-gold); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  #lp .btn, #lp .btn:hover { transition: none; transform: none; }
}

/* ================================================================
   HERO
   ================================================================ */
#lp .lp-hero {
  background:
    radial-gradient(1000px 400px at 12% -10%, rgba(26,157,135,.35), transparent 60%),
    linear-gradient(160deg, var(--lp-teal-900), #062f28 70%);
  color: var(--lp-hero-txt);
  padding: 52px 0 60px;
  position: relative; overflow: hidden;
}
#lp .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
#lp .hero-copy, #lp .hero-shot-wrap { position: relative; }

#lp .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,200,44,.14); border: 1px solid rgba(255,200,44,.4);
  color: var(--lp-gold); font-size: 12.5px; font-weight: 700;
  padding: 5px 12px; border-radius: 999px; margin-bottom: 18px; letter-spacing: .2px;
}
#lp h1 {
  font-size: 47px; line-height: 1.08; margin: 0 0 16px;
  font-weight: 800; letter-spacing: -1.2px; color: var(--lp-hero-txt);
}
#lp h1 .hl { color: var(--lp-gold); display: block; }
#lp .hero-sub { font-size: 17.5px; line-height: 1.55; color: var(--lp-hero-sub); margin: 0 0 26px; max-width: 520px; }
#lp .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
#lp .hero-micro { font-size: 13px; color: #8fc4b5; margin-top: 16px; }
#lp .hero-micro b { color: #d9f0e8; }
#lp .urgent {
  margin-top: 22px; display: inline-flex; align-items: center; gap: 10px;
  background: rgba(242,135,13,.16); border-left: 3px solid var(--lp-orange);
  padding: 9px 14px; border-radius: 0 8px 8px 0; font-size: 13.5px; color: #ffd9ab;
}
#lp .urgent b { color: #fff; }

/* ---- product screenshot / carousel ---- */
#lp .shot {
  background: #fff; border-radius: 14px; box-shadow: 0 30px 70px rgba(0,0,0,.45);
  overflow: hidden; transform: perspective(1400px) rotateY(-7deg) rotateX(2deg);
}
#lp .shot-bar {
  background: #eef5f2; padding: 9px 12px; display: flex; gap: 6px;
  align-items: center; border-bottom: 1px solid #dfeae6;
}
#lp .shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: #cfdcd8; display: block; }
#lp .shot-bar span {
  margin-left: 8px; font-size: 11px; color: #8aa39d;
  font-family: ui-monospace, Menlo, monospace; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis;
}
#lp .shot-stage { position: relative; background: #fff; }
#lp .shot-slide {
  display: block; width: 100%; height: auto;
  opacity: 0; transition: opacity .7s ease;
}
/* First slide is in normal flow and sets the frame height; the rest are stacked
   on top of it absolutely so the box never jumps between slides of different
   aspect ratios. */
#lp .shot-slide:first-child { position: relative; }
#lp .shot-slide:not(:first-child) { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: top center; }
#lp .shot-slide.on { opacity: 1; }
#lp .shot-cap {
  padding: 9px 14px; background: #f7fbf9; font-size: 12px;
  font-weight: 700; color: var(--lp-teal-700);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
#lp .shot-dots { display: flex; gap: 6px; }
#lp .shot-dot {
  width: 8px; height: 8px; padding: 0; border-radius: 50%;
  border: 0; background: #cfdcd8; cursor: pointer;
}
#lp .shot-dot.on { background: var(--lp-teal-600); }
#lp .shot-dot:focus-visible { outline: 2px solid var(--lp-teal-600); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  #lp .shot-slide { transition: none; }
}

/* ================================================================
   TRUST BAR
   ================================================================ */
#lp .trust { background: var(--lp-card); border-bottom: 1px solid var(--lp-line); }
#lp .trust .wrap { position: relative; }
#lp .trust-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; padding: 22px 0; }
#lp .trust-item { text-align: center; padding: 4px 10px; border-right: 1px solid var(--lp-line); }
#lp .trust-item:last-child { border-right: 0; }
#lp .trust-item .n { font-size: 27px; font-weight: 800; color: var(--lp-teal-700); letter-spacing: -.6px; }
#lp .trust-item .l {
  font-size: 12.5px; color: var(--lp-muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: .4px; margin-top: 2px;
}

/* ================================================================
   SECTION HEADINGS
   ================================================================ */
#lp .sec-head { text-align: center; max-width: 660px; margin: 0 auto 34px; }
#lp .sec-head h2 { font-size: 31px; margin: 0 0 10px; color: var(--lp-teal-900); letter-spacing: -.7px; font-weight: 800; }
#lp .sec-head p { margin: 0; color: var(--lp-ink-2); font-size: 16px; }
#lp .kicker {
  font-size: 12.5px; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--lp-teal-600); margin-bottom: 8px;
}
#lp .col-head { margin-bottom: 22px; position: relative; }
#lp .col-head h2 { margin: 0; font-size: 28px; color: var(--lp-teal-900); letter-spacing: -.6px; font-weight: 800; }

/* ================================================================
   MAIN + SIDEBAR
   ================================================================ */
#lp .main-cols { display: grid; grid-template-columns: 1fr 300px; gap: 30px; align-items: start; }

/* ---- game cards ---- */
#lp .games { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
#lp .gcard {
  background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: var(--lp-radius);
  padding: 22px; box-shadow: var(--lp-shadow); position: relative;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
#lp .gcard:hover { border-color: var(--lp-teal-500); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(7,70,59,.12); }
#lp .gcard.wide { grid-column: 1 / -1; }
#lp .gcard .top { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 12px; }
#lp .gicon {
  width: 46px; height: 46px; border-radius: 10px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 23px; background: var(--lp-teal-100); color: #fff; overflow: hidden;
}
#lp .gcard h3 { margin: 0 0 3px; font-size: 18.5px; color: var(--lp-teal-900); font-weight: 800; letter-spacing: -.3px; }
#lp .gcard .when { font-size: 12.5px; color: var(--lp-orange); font-weight: 700; }
#lp .gcard p { margin: 0 0 16px; font-size: 14.2px; color: var(--lp-ink-2); line-height: 1.55; }
#lp .gcard .acts { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
#lp .gcard .acts a.txt { font-size: 13.5px; font-weight: 600; color: var(--lp-muted); }
#lp .gcard .acts a.txt:hover { color: var(--lp-teal-700); }
#lp .pill {
  display: inline-block; margin-bottom: 14px; font-size: 11px; font-weight: 800;
  background: #fff3d6; color: #8a5b00; padding: 4px 10px; border-radius: 999px;
  border: 1px solid #ffe0a3; text-transform: uppercase; letter-spacing: .4px;
}
#lp .pill.soon { background: #eef3f2; color: #7b918c; border-color: #dfe9e6; }
@media (prefers-reduced-motion: reduce) {
  #lp .gcard, #lp .gcard:hover { transition: none; transform: none; }
}

/* ---- how it works ---- */
#lp .how { background: var(--lp-card); border-top: 1px solid var(--lp-line); border-bottom: 1px solid var(--lp-line); }
#lp .steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
#lp .step { text-align: center; padding: 0 12px; position: relative; }
#lp .step .num {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--lp-teal-900); color: var(--lp-gold);
  font-weight: 800; font-size: 18px;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
}
#lp .step h4 { margin: 0 0 7px; font-size: 17px; color: var(--lp-teal-900); }
#lp .step p { margin: 0; font-size: 14.2px; color: var(--lp-ink-2); line-height: 1.55; }

/* ---- coming soon strip ---- */
#lp .strip {
  background: var(--lp-teal-100); border: 1px solid var(--lp-line); border-radius: var(--lp-radius);
  padding: 15px 20px; display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; font-size: 14px; color: var(--lp-teal-900); position: relative;
}
#lp .strip b { font-weight: 800; }
#lp .strip .chip {
  background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: 999px;
  padding: 4px 12px; font-size: 12.5px; font-weight: 600; color: var(--lp-ink-2);
  display: inline-flex; align-items: center; gap: 7px;
}
#lp .strip .chip .chip-when { color: var(--lp-muted); font-weight: 500; }

/* ---- quotes ---- */
#lp .quotes { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
#lp .q {
  background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: var(--lp-radius);
  padding: 22px; box-shadow: var(--lp-shadow); display: flex; flex-direction: column;
}
#lp .q .stars { color: var(--lp-gold); font-size: 14px; letter-spacing: 2px; margin-bottom: 10px; }
#lp .q p { margin: 0 0 16px; font-size: 14.5px; color: var(--lp-ink-2); line-height: 1.6; flex: 1; }
#lp .q .who { display: flex; align-items: center; gap: 10px; }
#lp .q .av {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--lp-teal-100); color: var(--lp-teal-700);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px;
}
#lp .q .who b { display: block; font-size: 13.5px; color: var(--lp-ink); }
#lp .q .who span { font-size: 12px; color: var(--lp-muted); }

/* ---- partners ---- */
#lp .partners { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
#lp .pcard {
  background: var(--lp-card); border: 1px solid var(--lp-line);
  border-left: 4px solid var(--lp-teal-500); border-radius: var(--lp-radius);
  padding: 20px; display: flex; gap: 14px; box-shadow: var(--lp-shadow);
}
#lp .pcard .pav {
  width: 44px; height: 44px; border-radius: 9px;
  background: var(--lp-teal-900); color: var(--lp-gold);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; flex: 0 0 auto; font-size: 15px; overflow: hidden;
}
#lp .pcard h4 { margin: 0 0 2px; font-size: 16px; color: var(--lp-teal-900); }
#lp .pcard .sub { font-size: 12.5px; color: var(--lp-muted); margin-bottom: 8px; }
#lp .pcard p { margin: 0 0 12px; font-size: 13.6px; color: var(--lp-ink-2); }
#lp .pcard .acts { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
#lp .pcard .acts a.txt { font-size: 13.5px; font-weight: 600; color: var(--lp-muted); }

/* ---- premium band ---- */
#lp .premium {
  background: linear-gradient(135deg, var(--lp-teal-900), #0b3f36); color: #fff;
  border-radius: 16px; padding: 34px 38px;
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 34px; align-items: center;
}
#lp .premium h3 { margin: 0 0 8px; font-size: 25px; letter-spacing: -.5px; }
#lp .premium h3 span { color: var(--lp-gold); }
#lp .premium p { margin: 0 0 18px; color: #b6dbd0; font-size: 15px; line-height: 1.6; }
#lp .premium .price { font-size: 13px; color: #8fc4b5; margin-top: 14px; }
#lp .premium ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 16px; }
#lp .premium li { font-size: 14px; color: #dcf1ea; display: flex; gap: 8px; align-items: flex-start; }
#lp .premium li:before { content: "\2713"; color: var(--lp-gold); font-weight: 800; flex: 0 0 auto; }

/* ---- SEO link grid ---- */
#lp .seo { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
#lp .seo a {
  display: block; background: var(--lp-card); border: 1px solid var(--lp-line);
  border-radius: 10px; padding: 15px 16px; font-size: 14px; font-weight: 700;
  color: var(--lp-teal-800); box-shadow: var(--lp-shadow);
}
#lp .seo a:hover { border-color: var(--lp-teal-500); text-decoration: none; }
#lp .seo a span { display: block; font-size: 12.5px; color: var(--lp-muted); font-weight: 500; margin-top: 3px; }

/* ---- sidebar ---- */
#lp .side { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 18px; }
#lp .side-card {
  background: var(--lp-card); border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius); padding: 18px; box-shadow: var(--lp-shadow);
}
#lp .side-card h4 { margin: 0 0 10px; font-size: 15px; color: var(--lp-teal-900); }
#lp .side-card ul { margin: 0; padding: 0; list-style: none; }
#lp .side-card li { font-size: 13.5px; padding: 7px 0; border-bottom: 1px solid var(--lp-line); color: var(--lp-ink-2); }
#lp .side-card li:last-child { border: 0; }
#lp .side-card li b { color: var(--lp-teal-700); }
#lp .lp-ad { text-align: center; min-height: 0; }
#lp .lp-ad-lb { margin: 26px auto 0; max-width: 970px; text-align: center; }

/* ---- news ---- */
#lp .news { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
#lp .ncard {
  background: var(--lp-card); border: 1px solid var(--lp-line);
  border-left: 3px solid var(--lp-teal-500); border-radius: 10px; padding: 16px 18px;
}
#lp .ncard .meta {
  font-size: 11px; font-family: ui-monospace, Menlo, monospace;
  color: var(--lp-muted); letter-spacing: .5px; margin-bottom: 6px;
}
#lp .ncard .meta em {
  font-style: normal; background: var(--lp-teal-100); color: var(--lp-teal-700);
  padding: 2px 7px; border-radius: 99px; margin-left: 6px; font-weight: 700;
}
#lp .ncard h4 { margin: 0 0 5px; font-size: 15.5px; color: var(--lp-teal-900); }
#lp .ncard p { margin: 0; font-size: 13.6px; color: var(--lp-ink-2); }
#lp .news-more { text-align: center; margin-top: 18px; font-size: 14px; }

/* ================================================================
   INFO TIPS — the red (i) dots
   Replaces the mockup's numbered markers. Anchored per SECTION, so a
   section switched off in Display Options takes its dot with it and
   nothing ever needs renumbering.
   ================================================================ */
#lp .lp-tips-toggle {
  position: absolute; top: 0; right: 20px; z-index: 20;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.32);
  color: #e8f6f1; font-family: inherit; font-size: 12px; font-weight: 700;
  padding: 5px 12px; border-radius: 999px; cursor: pointer;
}
#lp .lp-tips-toggle:hover { background: rgba(255,255,255,.2); }
#lp .lp-tips-toggle:focus-visible { outline: 2px solid var(--lp-gold); outline-offset: 2px; }

#lp .note { position: absolute; z-index: 18; display: none; }
body.lp-tips-on #lp .note { display: block; }
#lp .note-dot {
  width: 26px; height: 26px; padding: 0; border-radius: 50%;
  background: #d92d20; color: #fff; font-weight: 800; font-size: 14px; line-height: 1;
  border: 0; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 3px rgba(217,45,32,.25); cursor: pointer;
}
#lp .note-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#lp .note-bubble {
  position: absolute; left: 34px; top: -4px; width: 250px;
  background: #10201d; color: #e8f6f1; font-size: 12.5px; line-height: 1.45;
  padding: 10px 12px; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.3);
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
#lp .note:hover .note-bubble,
#lp .note:focus-within .note-bubble { opacity: 1; pointer-events: auto; }
#lp .note.right .note-bubble { left: auto; right: 34px; }
#lp .note-bubble b { color: var(--lp-gold); display: block; margin-bottom: 3px; }

/* ================================================================
   LOGIN DIALOG (hero "Log In" button)
   ================================================================ */
/* The dialog lives INSIDE #lp so the --lp-* tokens resolve. Fallback values are given
   anyway: if it is ever moved out of #lp again the tokens silently stop resolving and
   the dialog renders with no background at all, which is how this first shipped. */
#lp-login {
  border: 0;
  border-radius: var(--lp-radius, 12px);
  padding: 22px;
  width: min(380px, 92vw);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--lp-card, #ffffff);
  color: var(--lp-ink, #112233);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  /* fop-layout.css sets body{font-size:13px}; the dialog is outside #lp's cascade
     for inherited font-size purposes only when closed, but set it explicitly anyway. */
  font-size: 16px;
  line-height: 1.5;
  /* Anchors the absolutely-positioned close button to the dialog, not the viewport. */
  position: relative;
}
/* fop-layout.css line 26 -- `* { margin: 0 }` -- overrides the UA stylesheet's
   `margin: auto`, which is the ONLY thing centering a modal <dialog>. Without this
   rule the dialog pins itself to the top-left corner of the viewport. Same fix the
   picks-page modal already carries (ss_weekly_picks.php:971). Do not remove. */
#lp-login[open] {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}
#lp-login::backdrop { background: rgba(0,0,0,.55); }
#lp-login h4 { margin: 0 0 14px; font-size: 16px; color: var(--lp-teal-800); }
#lp-login input[type=email],
#lp-login input[type=password],
#lp-login input[type=text] {
  width: 100%; padding: 10px 12px; border: 1px solid var(--lp-line);
  border-radius: 8px; font-size: 14px; font-family: inherit;
  margin-bottom: 9px; background: #f7fcfa; color: var(--lp-ink);
}
/* Show/hide password eye, and the autofill-overwrite warning that goes with it --
   the same pair index.php's login form carries. Restored here 2026-08-20: for
   logged-out visitors this dialog IS the login form now, and the eye is how someone
   catches their password manager quietly filling a stale saved password. */
#lp-login .lp-pw-wrap { position: relative; margin-bottom: 9px; }
#lp-login .lp-pw-wrap input { margin-bottom: 0; padding-right: 42px; }
#lp-login .lp-pw-toggle {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; padding: 4px; cursor: pointer; line-height: 0;
  color: var(--lp-muted, #5b7a72);
}
#lp-login .lp-pw-toggle:hover { color: var(--lp-teal-600, #138673); }
#lp-login .lp-pw-toggle:focus-visible {
  outline: 2px solid var(--lp-teal-600, #138673); outline-offset: 2px; border-radius: 4px;
}
/* "Not you?" -- clears a wrongly autofilled credential so the browser's password
   picker can fill an empty form. Sits tight under the email box, right-aligned, and
   deliberately quiet: it is a rescue hatch, not a call to action. */
#lp-login .lp-notyou { margin: -3px 0 9px; text-align: right; }
#lp-login .lp-notyou[hidden] { display: none; }
#lp-login .lp-notyou button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--lp-teal-700, #0e6d5c);
  text-decoration: underline;
}
#lp-login .lp-notyou button:hover { color: var(--lp-teal-600, #138673); }
#lp-login .lp-notyou button:focus-visible {
  outline: 2px solid var(--lp-teal-600, #138673); outline-offset: 2px; border-radius: 4px;
}
#lp-login .lp-autofill-warn {
  display: none; background: #fef3c7; color: #92400e; border: 1px solid #fcd34d;
  border-radius: 6px; padding: 7px 10px; font-size: 12px; line-height: 1.45;
  margin: 0 0 9px; text-align: left;
}
#lp-login .lp-login-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; color: var(--lp-muted); margin: 6px 0 12px; gap: 10px;
}
#lp-login .btn { width: 100%; }
#lp-login .lp-login-err {
  background: #fee2e2; border: 1px solid #fecaca; color: #7f1d1d;
  font-size: 12.5px; padding: 8px 10px; border-radius: 7px; margin-bottom: 10px;
}
#lp-login .lp-login-nudge {
  background: #fff7ed; border: 1px solid #fed7aa; color: #7c2d12;
  font-size: 12px; padding: 8px 10px; border-radius: 7px; margin-bottom: 10px;
}
#lp-login .lp-login-foot { margin-top: 12px; text-align: center; font-size: 12.5px; }
#lp-login .lp-login-foot a { color: var(--lp-teal-700, #0e6d5c); }
#lp-login .lp-login-row a { color: var(--lp-teal-700, #0e6d5c); }
#lp-login .lp-login-close {
  position: absolute; top: 10px; right: 12px; background: none; border: 0;
  font-size: 22px; line-height: 1; color: var(--lp-muted, #6b8480); cursor: pointer;
}

/* The realperson captcha ships its own stylesheet with a hardcoded `color:#000` on
   .realperson-challenge. That is fine on the light card but invisible on the dark one,
   so both the label colour and the dark-mode override are set here rather than left to
   the plugin. .realperson-text is the tiny ASCII-art grid -- do not restyle its
   font-size/line-height or the characters stop forming. */
#lp-login .realperson-challenge { color: var(--lp-ink, #112233); margin-bottom: 4px; }
#lp-login .realperson-regen     { color: var(--lp-muted, #6b8480); font-size: 12px; }
body.dark #lp-login .realperson-challenge { color: var(--lp-ink, #e2e8f0); }

/* ================================================================
   RESPONSIVE — breakpoints from the mockup (980 / 620)
   ================================================================ */
@media (max-width: 980px) {
  #lp .hero-grid   { grid-template-columns: 1fr; gap: 34px; }
  #lp h1           { font-size: 36px; }
  #lp .shot        { transform: none; }
  #lp .main-cols   { grid-template-columns: 1fr; }
  #lp .side        { position: static; flex-direction: row; flex-wrap: wrap; }
  #lp .side > *    { flex: 1 1 280px; }
  #lp .steps,
  #lp .quotes,
  #lp .seo,
  #lp .partners,
  #lp .news,
  #lp .games       { grid-template-columns: 1fr; }
  #lp .premium     { grid-template-columns: 1fr; padding: 26px; }
  #lp .trust-grid  { grid-template-columns: 1fr 1fr; gap: 18px; }
  #lp .trust-item:nth-child(2) { border-right: 0; }
}

@media (max-width: 639px) {
  #lp                 { font-size: 15px; }
  #lp section         { padding: 38px 0; }
  #lp .wrap           { padding: 0 14px; }
  #lp h1              { font-size: 30px; }
  #lp .hero-sub       { font-size: 16px; }
  #lp .btn-lg         { width: 100%; }
  #lp .hero-cta       { flex-direction: column; align-items: stretch; }
  #lp .sec-head h2    { font-size: 25px; }
  #lp .col-head h2    { font-size: 23px; }
  #lp .premium ul     { grid-template-columns: 1fr; }
  #lp .lp-tips-toggle { position: static; margin-bottom: 14px; }

  /* Absolutely-positioned bubbles run off a narrow screen. Below 640px the
     dot and its bubble render inline, stacked under the heading instead. */
  #lp .note           { position: static; display: none; margin: 0 0 12px; }
  body.lp-tips-on #lp .note { display: flex; gap: 10px; align-items: flex-start; }
  #lp .note-bubble    { position: static; opacity: 1; pointer-events: auto; width: auto; flex: 1; }
  #lp .note.right .note-bubble { right: auto; }
}

/* ================================================================
   DARK MODE — admin preview only.
   Real visitors are never in dark mode here: guests are non-premium and
   index.php forces teal/light for them. This block exists so the
   /landing.php preview is readable for an admin whose account is dark.
   ================================================================ */
body.dark #lp {
  --lp-teal-050: #0f172a;
  --lp-teal-100: #1e3a34;
  --lp-card:     #1e293b;
  --lp-line:     #334155;
  --lp-ink:      #e2e8f0;
  --lp-ink-2:    #cbd5e1;
  --lp-muted:    #94a3b8;
  --lp-teal-700: #5eead4;
  --lp-teal-800: #99f6e4;
  --lp-teal-900: #ccfbf1;
  --lp-shadow:   0 1px 3px rgba(0,0,0,.4);
}
body.dark #lp .trust      { background: var(--lp-card); }
body.dark #lp .how        { background: var(--lp-card); }
body.dark #lp .pill       { background: #422006; color: #fcd34d; border-color: #713f12; }
body.dark #lp .pill.soon  { background: #1e293b; color: #94a3b8; border-color: #334155; }
body.dark #lp .btn-outline{ background: var(--lp-card); color: var(--lp-teal-700); }
body.dark #lp .btn-outline:hover { background: #0f2a26; }
body.dark #lp .shot-bar   { background: #0f172a; border-bottom-color: #334155; }
body.dark #lp .shot-cap   { background: #0f172a; }
body.dark #lp .q .av      { background: #134e4a; color: #5eead4; }
body.dark #lp-login       { background: var(--lp-card); color: var(--lp-ink); }
body.dark #lp-login input { background: #0f172a; color: var(--lp-ink); border-color: var(--lp-line); }
body.dark #lp-login .lp-notyou button { color: #5eead4; }