/* =============================================================================
   AnswerLoop landing page - public/css/landing.css

   Loaded only on GET / signed out (views/partials/head.ejs adds the link when
   path === '/'), after app.css. Two blocks:

     B - landing-only contrast corrections to platform classes, scoped to
         .lp-page so the app's own screens are untouched.
     C - the landing page itself, every selector prefixed lp-. Nothing here
         touches an existing app.css selector.

   Eight sections: top bar, hero, the dark band, open Work Requests, how it
   works, what you are paid, questions, close plus footer. Anything the page no
   longer renders has been removed from this file.

   Keep comments flat: a comment opener nested inside another comment ends the
   outer one early and silently drops the rules that follow.
   ========================================================================== */


/* ==========================================================================
   B - landing-only corrections to platform classes
   The landing page is public, so every string on it has to clear 4.5:1.
   --grey-3 on paper is 3.2:1, so the places the app uses it for real copy are
   lifted one step. Scoped to .lp-page; the app is untouched.
   ========================================================================== */

.lp-page .card-reason{color:var(--grey-2)}
.lp-page .card-rate .per{color:var(--grey-2)}
.lp-page .card-endpoint{color:var(--grey-2)}
/* the third answered-disc is cream on --amber-deep, which is 2.9:1. The discs
   are aria-hidden, but the initials are still on screen, so this one is darkened. */
.lp-page .discs .avatar:nth-child(3){background:#8A5600}


/* ==========================================================================
   C - the landing page
   ========================================================================== */

.lp-wrap{max-width:1240px;margin-inline:auto;padding-inline:var(--pad-col)}

/* ---------- 1 - top bar ---------- */
.lp-nav{position:sticky;top:0;z-index:40;background:rgba(252,251,249,.88);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.lp-nav-in{max-width:1240px;margin-inline:auto;padding:12px var(--pad-col);
  display:flex;align-items:center;gap:22px}
.lp-brand{display:flex;align-items:center;flex:none;line-height:0}
.lp-brand img{height:26px;width:auto;display:block}
.lp-nav-links{display:flex;align-items:center;gap:24px;margin-right:auto}
.lp-nav-links a{font-size:14px;font-weight:500;color:var(--grey-1);text-decoration:none;
  padding:4px 0;border-bottom:1px solid transparent}
.lp-nav-links a:hover{color:var(--ink);border-bottom-color:var(--amber)}
.lp-nav-cta{display:flex;align-items:center;gap:9px;flex:none}

/* ---------- 2 - hero ---------- */
.lp-hero{position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(23,98,122,.10), transparent 62%),
    radial-gradient(70% 60% at 88% 8%, rgba(245,158,11,.10), transparent 60%),
    var(--paper);
  border-bottom:1px solid var(--line)}
.lp-hero-in{max-width:860px;margin-inline:auto;
  padding:clamp(64px,9vw,124px) var(--pad-col) clamp(64px,8vw,116px);
  text-align:center}

.lp-stats{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:0;padding:5px 6px;margin-bottom:clamp(28px,3.4vw,40px);
  border:1px solid var(--line);border-radius:var(--r-chip);
  background:var(--paper-2);box-shadow:var(--shadow-1)}
.lp-stats li{display:flex;align-items:baseline;gap:8px;padding:4px 15px;
  border-right:1px solid var(--line)}
.lp-stats li:last-child{border-right:0}
.lp-stats .k{font-size:12.5px;color:var(--grey-2);white-space:nowrap}
.lp-stats .v{font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap}

.lp-hero h1{font-family:var(--display);font-weight:400;
  font-size:clamp(36px,6.4vw,64px);line-height:1.04;letter-spacing:-.012em;
  color:var(--ink);text-wrap:balance}
.lp-hero-sub{margin:clamp(18px,2vw,24px) auto 0;max-width:52ch;
  font-size:clamp(16px,1.4vw,18px);line-height:1.6;color:var(--grey-1)}
.lp-hero-sub + .lp-hero-sub{margin-top:8px}
.lp-hero-cta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:11px;margin-top:clamp(30px,3.4vw,40px)}
.lp-hero-note{margin-top:28px;font-size:13px;line-height:1.7;color:var(--grey-2)}

/* ---------- bands ---------- */
.lp-band{padding:clamp(84px,8vw,120px) 0;border-bottom:1px solid var(--line)}
.lp-band-sand{background:var(--sand)}
.lp-band-sand .card{background:var(--paper-2)}

.lp-h2{font-family:var(--display);font-weight:400;
  font-size:clamp(28px,3.2vw,40px);line-height:1.12;letter-spacing:-.008em;
  color:var(--ink);max-width:22ch;text-wrap:balance}
.lp-h2-center{max-width:20ch;margin-inline:auto;text-align:center}
.lp-sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:16px 24px}
.lp-sec-head .kick{margin-bottom:14px}
.lp-sec-lede{margin-top:16px;max-width:62ch;font-size:16px;line-height:1.65;color:var(--grey-1)}
.lp-center-row{justify-content:center}
.lp-seeall{flex:none}
.lp-sig{font-family:var(--display);font-style:italic;font-size:17px;line-height:1.5;
  color:var(--grey-2);max-width:44ch}

/* ---------- 3 - the founder's paragraph, the one dark band ---------- */
.lp-creed{background-color:var(--deep);
  background-image:
    radial-gradient(110% 100% at 84% 0%, rgba(23,98,122,.30), transparent 58%),
    radial-gradient(80% 90% at 4% 100%, rgba(223,80,0,.16), transparent 58%);
  padding:clamp(80px,8vw,120px) 0}
.lp-creed-in{max-width:880px;text-align:center}
.lp-creed-mark{width:44px;height:44px;margin:0 auto 26px;display:block;opacity:.95}
.lp-creed-p{font-family:var(--display);font-weight:400;
  font-size:clamp(22px,2.7vw,32px);line-height:1.35;color:var(--cream);
  max-width:34ch;margin-inline:auto;text-wrap:balance}
.lp-creed-foot{margin-top:30px}
.lp-creed-foot .tlink{color:var(--teal-lt);border-bottom-color:rgba(143,193,212,.4)}
.lp-creed-foot .tlink:hover{color:var(--cream);border-bottom-color:var(--cream)}

/* ---------- 4 - open Work Requests ---------- */
.lp-cards{margin-top:38px;grid-template-columns:repeat(auto-fill,minmax(264px,1fr))}
.lp-cards .card{min-height:100%}

/* ---------- 5 - how it works ---------- */
.lp-how{display:grid;gap:clamp(32px,4.5vw,64px);margin-top:44px;
  grid-template-columns:minmax(280px,1fr) minmax(300px,1fr);align-items:center}
.lp-steps{display:flex;flex-direction:column}
.lp-step{display:flex;gap:16px;padding:24px 0;border-top:1px solid var(--line)}
.lp-step:first-child{border-top:0;padding-top:0}
.lp-step-n{display:flex;align-items:center;justify-content:center;flex:none;
  width:32px;height:32px;border-radius:50%;
  border:1px solid var(--line);background:var(--paper-2);
  font-family:var(--display);font-size:17px;line-height:1;color:var(--teal-deep)}
.lp-step h3{font-family:var(--display);font-weight:400;font-size:24px;line-height:1.2;
  color:var(--ink);margin-bottom:7px}
.lp-step p{font-size:15px;line-height:1.6;color:var(--grey-1);max-width:42ch}

.lp-fig{border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper-2);
  padding:26px 24px 20px;box-shadow:var(--shadow-1)}
.lp-loop{display:block;width:100%;height:auto;color:var(--teal-deep)}
.lp-loop .lp-node rect{fill:var(--paper-2);stroke:var(--line);stroke-width:1.2}
.lp-loop .lp-node-fill rect{fill:var(--teal-wash);stroke:#CBE1E9}
.lp-loop .lp-node-mark rect{fill:var(--amber-wash);stroke:#F3DCAE}
.lp-loop .lp-node-k{font-family:var(--mono);font-size:11px;fill:var(--grey-2)}
.lp-loop .lp-node-t{font-family:var(--display);font-size:20px;fill:var(--ink)}
.lp-loop .lp-node-s{font-family:var(--body);font-size:12.5px;font-weight:500;fill:var(--grey-1)}
.lp-fig figcaption{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft);
  font-size:13.5px;line-height:1.6;color:var(--grey-2)}

/* ---------- 6 - what you are paid ---------- */
.lp-pay{display:grid;gap:12px;margin-top:40px;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.lp-pay li{display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  padding:22px 20px;border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--paper-2);box-shadow:var(--shadow-1)}
.lp-pay-v{font-family:var(--display);font-size:32px;line-height:1;color:var(--ink)}
.lp-pay-foot{margin-top:26px;max-width:62ch;font-size:15px;line-height:1.65;color:var(--grey-1)}

/* ---------- 7 - questions ---------- */
.lp-faq{max-width:720px;margin:44px auto 0;
  background:var(--paper-2);border-radius:var(--r-card);
  border:1px solid var(--line);padding:4px 24px;box-shadow:var(--shadow-1)}
.lp-faq details{border-bottom:1px solid var(--line-soft)}
.lp-faq details:last-child{border-bottom:0}
.lp-faq summary{display:flex;align-items:flex-start;gap:14px;
  padding:20px 0;cursor:pointer;list-style:none;
  font-size:16px;font-weight:600;line-height:1.45;color:var(--ink)}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:"";flex:none;margin-left:auto;
  width:13px;height:13px;margin-top:4px;
  background:
    linear-gradient(var(--grey-2),var(--grey-2)) center/13px 1.6px no-repeat,
    linear-gradient(var(--grey-2),var(--grey-2)) center/1.6px 13px no-repeat;
  transition:transform .22s ease}
.lp-faq details[open] summary{color:var(--teal-deep)}
.lp-faq details[open] summary::after{transform:rotate(90deg);
  background:linear-gradient(var(--teal-deep),var(--teal-deep)) center/13px 1.6px no-repeat}
.lp-faq-a{padding:0 0 22px}
.lp-faq-a p{font-size:15px;line-height:1.68;color:var(--grey-1);max-width:62ch}
.lp-faq-a p + p{margin-top:11px}

/* ---------- 8 - close ---------- */
.lp-close{border-bottom:0}
.lp-close-in{max-width:760px;margin-inline:auto;text-align:center}
/* the closing line carries its own break, the same one the hero uses */
.lp-close .lp-h2-center{max-width:none;text-wrap:pretty}
.lp-close .lp-sig{display:block;margin:34px auto 0;text-align:center}

/* ---------- footer ---------- */
.lp-foot{background:var(--deep);color:var(--cream);padding:clamp(52px,5vw,72px) 0 26px}
.lp-foot-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:26px 48px}
.lp-foot-brand img{height:26px;width:auto;display:block}
.lp-foot-by{margin-top:8px;font-size:13px;color:var(--grey-4)}
.lp-foot-links{display:flex;flex-wrap:wrap;gap:12px 26px}
.lp-foot-links a{font-size:14px;color:var(--grey-4);text-decoration:none;
  border-bottom:1px solid transparent}
.lp-foot-links a:hover{color:var(--cream);border-bottom-color:rgba(236,237,234,.4)}
.lp-foot-bar{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  margin-top:48px;padding-top:22px;border-top:1px solid var(--line-dark);
  font-size:12.5px;line-height:1.6;color:var(--grey-4)}
.lp-foot-bar p{max-width:74ch}
.lp-foot-c{flex:none}
.lp-foot a:focus-visible,.lp-creed a:focus-visible{outline-color:var(--teal-lt)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .lp-how{grid-template-columns:1fr}
  .lp-fig{max-width:520px}
}
@media (max-width:860px){
  .lp-nav-links{display:none}
  .lp-nav-in{gap:14px}
  .lp-nav-cta{margin-left:auto}
}
@media (max-width:620px){
  .lp-stats{display:flex;flex-direction:column;align-items:stretch;
    width:100%;border-radius:14px;padding:4px 6px}
  .lp-stats li{justify-content:space-between;border-right:0;
    border-bottom:1px solid var(--line-soft);padding:8px}
  .lp-stats li:last-child{border-bottom:0}
  .lp-h2,.lp-h2-center{max-width:none}
  .lp-sec-head{align-items:flex-start}
  .lp-faq{padding:4px 18px}
  .lp-faq summary{font-size:15.5px;gap:10px}
  .lp-foot-bar{margin-top:36px}
}
@media (max-width:400px){
  .lp-nav-cta .btn-ghost{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms;animation-iteration-count:1;
    transition-duration:.001ms;scroll-behavior:auto}
}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}