/**
 * @file landing.css
 * @description Logged-out landing + pricing pages (ld- prefix). Theme tokens only;
 *   path cards stack on mobile, ticker truncates to one line.
 * @version-history
 *   v1.0.0 — 2026-06-10 — Initial (landing/portal split).
 */
.ld { max-width: 980px; margin: 0 auto; padding: 2rem 1.25rem 3rem; color: var(--text); }
.ld-hero { text-align: center; padding: 2.5rem 0 1.25rem; }
.ld-h1 { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.5px; margin: 0 0 .6rem; }
.ld-hero-sub { color: var(--text-dim); font-size: 1.05rem; margin: 0; }
/* "Ask your own AI what AIMEAT is" prompt box */
.ld-askai { max-width: 760px; margin: 1.25rem auto 2rem; text-align: center; }
.ld-askai-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 .4rem; }
.ld-askai-sub { color: var(--text-dim); font-size: .92rem; margin: 0 auto 1rem; max-width: 620px; }
.ld-askai-box { border: 1px solid var(--border); border-radius: 12px; background: var(--card); padding: 1rem 1.1rem; text-align: left; }
.ld-askai-prompt { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: var(--font-mono, monospace); font-size: .8rem; line-height: 1.5; color: var(--text); max-height: 260px; overflow-y: auto; }
.ld-askai-copy { margin-top: .9rem; }
.ld-ticker { display: flex; align-items: center; gap: .5rem; justify-content: center; margin: 1rem auto; max-width: 760px; padding: .45rem .9rem; border: 1px solid var(--border); border-radius: 999px; background: var(--card); font-size: .85rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; }
.ld-ticker-text { overflow: hidden; text-overflow: ellipsis; }
.ld-ticker-dot { color: var(--success-fg, #2E9E5B); flex: none; }
.ld-stats { max-width: 760px; margin: 1.25rem auto 2rem; padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-surface, var(--bg-dim)); text-align: center; }
.ld-stats-line { font-size: 1.05rem; font-weight: 600; }
.ld-stats-own { margin-top: .6rem; color: var(--text-dim); font-size: .95rem; }
.ld-stats-cta { color: var(--accent); font-weight: 700; text-decoration: none; margin-left: .35rem; }
.ld-stats-cta:hover { text-decoration: underline; }
.ld-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.5rem 0; }
@media (max-width: 760px) { .ld-paths { grid-template-columns: 1fr; } }
.ld-path { border: 1px solid var(--border); border-radius: 12px; background: var(--card); padding: 1.1rem 1.2rem; display: flex; flex-direction: column; }
.ld-path--hot { border-color: var(--accent); border-width: 2px; }
.ld-path h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.ld-path p { margin: 0 0 .9rem; color: var(--text-dim); font-size: .9rem; flex: 1; }
.ld-path-cta { color: var(--accent); font-weight: 700; text-decoration: none; font-size: .92rem; }
.ld-path-cta:hover { text-decoration: underline; }
.ld-loop { display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap; margin: 1.5rem 0 2rem; padding: .8rem 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-surface, var(--bg-dim)); font-size: .9rem; }
.ld-loop-arrow { color: var(--text-dim); }
.ld-section { margin: 2rem 0; }
.ld-h2 { font-size: 1.3rem; margin: 0 0 1rem; }
.ld-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .9rem; }
.ld-app-card { display: block; border: 1px solid var(--border); border-radius: 10px; background: var(--card); padding: .9rem 1rem; text-decoration: none; color: var(--text); }
.ld-app-card:hover { border-color: var(--accent); }
.ld-app-name { font-weight: 700; margin-bottom: .25rem; }
.ld-app-desc { font-size: .82rem; color: var(--text-dim); margin-bottom: .4rem; }
.ld-app-meta { font-size: .72rem; color: var(--muted); }
.ld-footer { display: flex; gap: 1.25rem; flex-wrap: wrap; justify-content: center; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); font-size: .88rem; }
.ld-footer a { color: var(--text-dim); text-decoration: none; }
.ld-footer a:hover { color: var(--text); }
/* Pricing */
.ld-pricing .ld-h1 { text-align: center; }
.ld-pricing .ld-hero-sub { text-align: center; margin-bottom: 1.5rem; }
.ld-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 1.25rem 0; }
.ld-tier { border: 1px solid var(--border); border-radius: 12px; background: var(--card); padding: 1.1rem 1.2rem; display: flex; flex-direction: column; }
.ld-tier--hot { border-color: var(--accent); border-width: 2px; }
.ld-tier-name { margin: 0 0 .2rem; font-size: 1.05rem; }
.ld-tier-price { font-size: 1.3rem; font-weight: 800; margin-bottom: .6rem; }
.ld-tier-lines { margin: 0 0 1rem; padding-left: 1.1rem; color: var(--text-dim); font-size: .88rem; flex: 1; }
.ld-tier-lines li { margin-bottom: .3rem; }

/* ── How it works ── */
.hiw-diagram { margin: 1.5rem 0; }
.hiw-svg { width: 100%; height: auto; display: block; }
.hiw-svg--tall { display: none; max-width: 360px; margin: 0 auto; }
@media (max-width: 700px) { .hiw-svg--wide { display: none; } .hiw-svg--tall { display: block; } }
.ld-ctarow { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; margin: 2rem 0 1rem; }
.ld-ctarow a { text-decoration: none; }

/* ── Business ── */
.ld-bhero { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 1.25rem; margin: 1rem 0 2rem; border-radius: 14px; overflow: hidden; background: var(--bg-surface, var(--bg-dim)); border: 1px solid var(--border); }
.ld-bhero-img { width: 100%; height: 100%; object-fit: cover; min-height: 260px; }
.ld-bhero-text { padding: 1.5rem 1.5rem 1.5rem .25rem; }
.ld-bhero--noimg { grid-template-columns: 1fr; text-align: center; }
.ld-bhero--noimg .ld-bhero-text { padding: 2.25rem 1.5rem; }
@media (max-width: 700px) { .ld-bhero { grid-template-columns: 1fr; } .ld-bhero-text { padding: 1.25rem; } .ld-bhero-img { max-height: 220px; } }
.ld-cases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 1.5rem 0; }
@media (max-width: 760px) { .ld-cases { grid-template-columns: 1fr; } }
.ld-case { border: 1px solid var(--border); border-radius: 12px; background: var(--card); padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .55rem; }
.ld-case-title { margin: 0; font-size: 1.05rem; }
.ld-case-text { margin: 0; color: var(--text-dim); font-size: .9rem; flex: 1; }
.ld-case-quote { margin: 0; padding: .5rem .8rem; border-left: 3px solid var(--accent); background: var(--bg-surface, var(--bg-dim)); border-radius: 6px; font-size: .88rem; }
.ld-case-quote footer { color: var(--text-dim); font-size: .78rem; margin-top: .25rem; }
.ld-case-proof { font-size: .85rem; color: var(--accent); text-decoration: none; font-weight: 600; }
.ld-case-proof:hover { text-decoration: underline; }
.ld-case-proofnote { font-size: .8rem; color: var(--text-dim); font-style: italic; background: var(--bg-surface, var(--bg-dim)); border-radius: 6px; padding: .45rem .7rem; }

/* ── Contact card (business + pricing only) ── */
.ld-contact { max-width: 460px; margin: 2.25rem auto 0; padding: 1.25rem 1.5rem; border: 2px solid var(--accent); border-radius: 14px; background: var(--card); text-align: center; }
.ld-contact-title { font-size: 1.15rem; font-weight: 800; margin-bottom: .4rem; }
.ld-contact-name { font-weight: 600; margin-bottom: .35rem; }
.ld-contact-links { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: .45rem; }
.ld-contact-links a { color: var(--accent); text-decoration: none; font-weight: 600; }
.ld-contact-links a:hover { text-decoration: underline; }
.ld-contact-sub { color: var(--text-dim); font-size: .88rem; }
.ld-example-img { width: 100%; max-height: 260px; object-fit: cover; border-radius: 10px; margin-bottom: .9rem; }
.ld-app-badge { font-size: .68rem; font-weight: 600; color: var(--text-dim); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; vertical-align: 2px; }
