/* Shared styles for Matey's two launch landing pages: for-business.html
   (for businesses) and founding-matey.html (for AI freelancers). They use
   the site's colour names (--paper, --ink, --mango...) so dark mode works
   with no extra rules. */

.lp-hero{padding:64px 0 48px;}
.lp-hero .wrap{max-width:860px;}
.lp-kicker{display:inline-block; font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--brick); margin-bottom:14px;}
.lp-hero h1{font-size:clamp(32px,5.4vw,52px); line-height:1.08;}
.lp-hero .lp-lede{margin:18px 0 0; font-size:clamp(16.5px,2vw,19px); color:var(--ink-soft); max-width:60ch; line-height:1.55;}
.lp-actions{margin-top:28px; padding-top:4px; display:flex; gap:12px; flex-wrap:wrap; align-items:center;}
.lp-note{margin-top:16px; font-size:13.5px; color:var(--ink-soft); max-width:62ch;}

.lp-section{padding:48px 0;}
.lp-section.alt{background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.lp-section .wrap{max-width:960px;}
.lp-section h2{font-size:clamp(24px,3.4vw,32px); line-height:1.15;}
.lp-intro{margin:12px 0 0; color:var(--ink-soft); max-width:62ch; font-size:16px; line-height:1.55;}

.lp-steps{list-style:none; margin:28px 0 0; padding:0; display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); counter-reset:lp;}
.lp-steps li{counter-increment:lp; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:22px 22px 24px;}
.lp-steps li::before{content:counter(lp); display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--mango-fill, #F2792E); color:#fff; font-weight:800; margin-bottom:14px;}
.lp-steps h3{font-size:19px;}
.lp-steps p{margin:8px 0 0; color:var(--ink-soft); font-size:15px; line-height:1.55;}

.lp-cards{margin:28px 0 0; display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}
.lp-card{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:22px;}
.lp-card h3{font-size:18px;}
.lp-card p{margin:8px 0 0; color:var(--ink-soft); font-size:15px; line-height:1.55;}
.lp-card a.lp-link{display:inline-block; margin-top:14px; font-weight:700; font-size:14.5px; color:var(--brick); text-decoration:none;}
.lp-card a.lp-link:hover{text-decoration:underline;}
.lp-card a.lp-link.lp-link-only{margin-top:0;} /* a card that is just a link */

.lp-list{margin:22px 0 0; padding:0; list-style:none; display:grid; gap:14px; max-width:68ch;}
.lp-list li{padding-left:30px; position:relative; color:var(--ink-soft); font-size:15.5px; line-height:1.55;}
.lp-list li::before{content:""; position:absolute; left:0; top:4px; width:18px; height:18px; border-radius:50%; background:var(--mango);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.3' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.3' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  background:var(--mango);}
.lp-list b{color:var(--ink);}

.lp-live{margin-top:24px; display:grid; gap:10px; max-width:720px;}
.lp-live a{display:flex; justify-content:space-between; gap:16px; align-items:baseline; padding:14px 16px; border-radius:14px; background:var(--card); border:1px solid var(--line); text-decoration:none; color:var(--ink);}
.lp-live a:hover{border-color:var(--mango);}
.lp-live .lp-live-title{font-weight:700; font-size:15px;}
.lp-live .lp-live-meta{font-size:13px; color:var(--ink-soft); white-space:nowrap;}
.lp-live-empty{margin-top:20px; color:var(--ink-soft); font-size:15px; max-width:62ch;}

.lp-final{padding:56px 0 64px; text-align:center;}
.lp-final .wrap{max-width:720px;}
.lp-final h2{font-size:clamp(26px,3.8vw,36px);}
.lp-final p{margin:12px auto 0; color:var(--ink-soft); max-width:56ch;}
.lp-final .lp-actions{justify-content:center;}

@media(max-width:640px){
  .lp-hero{padding:40px 0 32px;}
  .lp-section{padding:36px 0;}
  .lp-hero .lp-lede{margin-bottom:20px;}
  .lp-actions .btn{flex:1 1 100%; text-align:center;}
}

/* FAQ on the local search pages */
.lp-faqs{margin-top:20px; display:grid; gap:10px; max-width:760px;}
.lp-faq{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 18px;}
.lp-faq summary{cursor:pointer; font-weight:700; font-size:16px;}
.lp-faq p{margin:10px 0 0; color:var(--ink-soft); font-size:15px; line-height:1.55;}