/* Shared landing-page sections for couchcoopstudios.com.
   Each app page keeps its own hero and signature moment, and sets these variables in :root
   so the shared sections take on its colors and type:
   --lp-ink, --lp-muted, --lp-paper, --lp-card, --lp-line, --lp-accent, --lp-accent-ink,
   --lp-font, --lp-display. No third-party fonts, scripts or trackers. */

.lp { --_ink: var(--lp-ink, #1C1C1E); --_muted: var(--lp-muted, #5F6368); --_paper: var(--lp-paper, transparent);
      --_card: var(--lp-card, rgba(0,0,0,.035)); --_line: var(--lp-line, rgba(0,0,0,.10)); --_accent: var(--lp-accent, #0A84FF);
      --_accent-ink: var(--lp-accent-ink, #fff); --_font: var(--lp-font, -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif);
      --_display: var(--lp-display, var(--_font));
      background: var(--_paper); color: var(--_ink); font-family: var(--_font); }
.lp-in { max-width: 960px; margin: 0 auto; padding: 44px 20px; }
.lp + .lp .lp-in { padding-top: 12px; }
.lp h2 { font-family: var(--_display); font-weight: 800; font-size: clamp(28px, 4.4vw, 40px); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 12px; }
.lp .lp-lede { font-size: 18px; line-height: 1.5; color: var(--_muted); max-width: 640px; margin: 0 0 28px; }
.lp a { color: var(--_accent); }
.lp :focus-visible { outline: 3px solid var(--_accent); outline-offset: 3px; border-radius: 6px; }

/* trust row: short, checkable facts */
.lp-trust { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.lp-trust li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: var(--_card); border: 1px solid var(--_line); font-size: 15px; font-weight: 600; }
.lp-trust svg { flex: none; color: var(--_accent); }

/* steps: only for real sequences */
.lp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; counter-reset: s; }
.lp-steps li { counter-increment: s; background: var(--_card); border: 1px solid var(--_line); border-radius: 18px; padding: 20px; }
.lp-steps li::before { content: counter(s); display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--_accent); color: var(--_accent-ink); font-weight: 800; margin-bottom: 10px; }
.lp-steps b { display: block; font-size: 17px; margin-bottom: 4px; }
.lp-steps span { color: var(--_muted); font-size: 15px; line-height: 1.45; }

/* features: icon + short text */
.lp-feat { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px 28px; list-style: none; margin: 0; padding: 0; }
.lp-feat li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; }
.lp-feat .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--_card); border: 1px solid var(--_line); color: var(--_accent); }
.lp-feat b { display: block; font-size: 16.5px; margin: 2px 0 3px; }
.lp-feat span { color: var(--_muted); font-size: 15px; line-height: 1.45; }
.lp-pro { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 6px; background: var(--_accent); color: var(--_accent-ink); font-size: 11px; font-weight: 800; vertical-align: 2px; }

/* who it's for */
.lp-who { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.lp-who div { background: var(--_card); border: 1px solid var(--_line); border-radius: 18px; padding: 18px 20px; }
.lp-who b { display: block; font-size: 17px; margin-bottom: 4px; }
.lp-who p { margin: 0; color: var(--_muted); font-size: 15px; line-height: 1.45; }

/* pricing */
.lp-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.lp-plan { border-radius: 22px; padding: 24px; background: var(--_card); border: 1px solid var(--_line); }
.lp-plan.hl { border: 2px solid var(--_accent); }
.lp-plan h3 { font-family: var(--_display); font-size: 22px; margin: 0 0 4px; }
.lp-plan .price { font-size: 28px; font-weight: 800; margin: 6px 0 2px; }
.lp-plan .per { color: var(--_muted); font-size: 14.5px; }
.lp-plan ul { margin: 14px 0 0; padding-left: 18px; line-height: 1.6; }
.lp-fine { color: var(--_muted); font-size: 13.5px; line-height: 1.5; margin: 16px 0 0; max-width: 760px; }

/* privacy band */
.lp-priv { display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: start; background: var(--_card); border: 1px solid var(--_line); border-radius: 22px; padding: 24px; }
.lp-priv .ic { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--_accent); color: var(--_accent-ink); }
.lp-priv h3 { margin: 0 0 6px; font-size: 21px; font-family: var(--_display); }
.lp-priv p { margin: 0 0 6px; color: var(--_muted); line-height: 1.5; }

/* FAQ: plain HTML, readable without JavaScript */
.lp-faq { border-top: 1px solid var(--_line); }
.lp-faq details { border-bottom: 1px solid var(--_line); }
.lp-faq summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative; font-weight: 700; font-size: 17.5px; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; position: absolute; right: 6px; top: 14px; font-size: 26px; font-weight: 400; color: var(--_accent); }
.lp-faq details[open] summary::after { content: "–"; }
.lp-faq .a { padding: 0 0 18px; color: var(--_muted); line-height: 1.6; max-width: 760px; }
.lp-faq .a p { margin: 0 0 10px; }

/* more apps from the same maker */
.lp-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.lp-more a { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; text-decoration: none; color: var(--_ink); background: var(--_card); border: 1px solid var(--_line); border-radius: 16px; padding: 12px; }
.lp-more img { width: 52px; height: 52px; border-radius: 12px; }
.lp-more b { display: block; font-size: 15.5px; }
.lp-more span { color: var(--_muted); font-size: 13.5px; line-height: 1.35; }
.lp-more a:hover { border-color: var(--_accent); }

/* coming soon pill + legal line */
.lp-soon { display: inline-block; padding: 12px 20px; border-radius: 999px; background: var(--_accent); color: var(--_accent-ink); font-weight: 800; }
.lp-legal { max-width: 760px; margin: 0 auto; padding: 0 16px 32px; text-align: center; font: 12.5px/1.5 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; opacity: .62; }
.lp-legal p { margin: 4px 0; }

/* guide articles */
.lp-article { max-width: 720px; margin: 0 auto; padding: 40px 20px 64px; font-size: 18px; line-height: 1.65; }
.lp-article h1 { font-family: var(--_display); font-size: clamp(32px, 5vw, 46px); line-height: 1.08; letter-spacing: -.02em; margin: 8px 0 14px; }
.lp-article h2 { font-size: 26px; margin: 36px 0 8px; }
.lp-article .answer { font-size: 20px; line-height: 1.5; padding: 18px 20px; border-left: 5px solid var(--_accent); background: var(--_card); border-radius: 0 14px 14px 0; margin: 18px 0 24px; }
.lp-article table { width: 100%; border-collapse: collapse; font-size: 16px; margin: 14px 0 20px; table-layout: fixed; overflow-wrap: anywhere; }
.lp-article th, .lp-article td { text-align: left; padding: 10px; border-bottom: 1px solid var(--_line); vertical-align: top; }
.lp-article .crumbs { font-size: 14px; color: var(--_muted); }
.lp-article .note { font-size: 15px; color: var(--_muted); }
.lp-article .cta { margin: 32px 0; padding: 22px; border-radius: 20px; background: var(--_card); border: 1px solid var(--_line); display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: center; }
.lp-article .cta img { width: 64px; height: 64px; border-radius: 15px; }

@media (max-width: 560px) { .lp-in { padding: 40px 18px; } .lp-priv { grid-template-columns: 1fr; } .lp-article table { font-size: 14px; } .lp-article th, .lp-article td { padding: 8px 5px; } }
@media (prefers-reduced-motion: reduce) { .lp * { transition: none !important; animation: none !important; } }