/* Music Folder: landing pages (who it's for, Planning Center, about).
   Builds on site.css (tokens, type, devices, tools, FAQ, footer) and adds only
   the page furniture these pages share. Existing pages don't load this file. */

/* ---------- Hero: words left, the app on a vellum panel right ---------- */
.lp-hero { padding: 144px 0 var(--section-gap); }
.lp-hero-grid { display: grid; grid-template-columns: 6fr 5fr; gap: 72px; align-items: center; }
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; font-size: 14px; color: var(--graphite); }
.crumb a { color: var(--graphite); text-decoration: none; }
.crumb a:hover { color: var(--ink); }
.crumb li + li::before { content: "/"; margin-right: 8px; color: var(--staff-line); }
.lp-hero .display { font-size: clamp(48px, 6vw, 84px); margin-bottom: 24px; }
.lp-hero .display em.pc { color: var(--services-deep); }
.lp-hero .lede { margin-bottom: 32px; color: var(--ink); }
.lp-note { font-size: 14px; line-height: 1.4; color: var(--graphite); margin: 0; }
.lp-hero .partner-logo { margin-bottom: 28px; }

.lp-visual {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 600px; padding: 48px 32px; border-radius: var(--radius-panel); background: var(--vellum);
}
.lp-visual .device.phone { width: 252px; }
.lp-visual .device.tablet { width: min(400px, 100%); aspect-ratio: 0.715; }
.lp-visual .cutout { width: min(250px, 70%); height: auto; filter: drop-shadow(0 24px 30px rgba(20,20,20,0.18)); }
.lp-visual .share-card { max-width: 400px; }
@media (max-width: 960px) {
  .lp-hero { padding: 112px 0 var(--section-gap); }
  .lp-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .lp-visual { min-height: 0; padding: 40px 24px; }
  .lp-visual .device.phone { width: 230px; }
}

/* ---------- How it works: three numbered steps ---------- */
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; counter-reset: how; }
.how li { list-style: none; border-top: 2px solid var(--folder-black); padding-top: 24px; counter-increment: how; }
.how li::before {
  content: counter(how); display: block; margin-bottom: 18px;
  font: italic 400 44px/1 var(--font-display); color: var(--ribbon);
}
.how h3 { font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--ink); margin-bottom: 8px; }
.how p { font-size: 15px; line-height: 1.55; color: var(--graphite); margin: 0; }
ol.how { margin: 0; padding: 0; }
@media (max-width: 860px) { .how { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- Feature rows: alternating words and visuals ---------- */
.rows { display: grid; gap: var(--section-gap); }
.row-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.row-feature.flip .rf-text { order: 2; }
.rf-text .heading-sm { margin-bottom: 16px; }
.rf-text .heading-sm em { font-style: italic; color: var(--ribbon); }
.rf-text > p { font-size: 18px; line-height: 1.55; color: var(--graphite); max-width: 460px; }
.rf-points { list-style: none; margin: 28px 0 0; padding: 0; max-width: 460px; }
.rf-points li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--staff-line); font-size: 16px; line-height: 1.45; }
.rf-points li:last-child { border-bottom: 1px solid var(--staff-line); }
.rf-points svg { flex: none; width: 17px; height: 17px; margin-top: 3px; color: var(--folder-black); }
.rf-visual {
  display: flex; align-items: center; justify-content: center;
  min-height: 520px; padding: 48px 32px; border-radius: var(--radius-panel); background: var(--vellum);
}
.rf-visual .device.phone { width: 236px; }
.rf-visual .device.tablet { width: min(380px, 100%); aspect-ratio: 0.715; }
.rf-visual .share-card { max-width: 400px; }
@media (max-width: 860px) {
  .row-feature { grid-template-columns: 1fr; gap: 32px; }
  .row-feature.flip .rf-text { order: 0; }
  .rf-text > p { font-size: 17px; }
  .rf-visual { min-height: 0; padding: 36px 20px; }
  .rf-visual .device.phone { width: 220px; }
}

/* a set list drawn as a card (no screenshot needed, always crisp) */
.set-card { width: 100%; max-width: 400px; background: var(--card); border: 1px solid var(--staff-line); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 28px; }
.set-card .sc-title { font-family: var(--font-display); font-size: 30px; line-height: 1.1; color: var(--folder-black); }
.set-card .sc-sub { font-size: 13px; color: var(--graphite); margin: 4px 0 16px; }
.set-card ol { list-style: none; margin: 0; padding: 0; }
.set-card li { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--staff-line); font-size: 15px; line-height: 1.3; }
.set-card li span:first-child, .set-card li span:last-child { color: var(--graphite); font-size: 13px; font-variant-numeric: tabular-nums; }
.set-card li.pco span:nth-child(2)::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%; background: var(--services-green); vertical-align: 1px; }

/* ---------- One real App Store quote ---------- */
.lp-quote { text-align: center; max-width: 820px; margin: 0 auto; }
.lp-quote .hr-stars { justify-content: center; }
.lp-quote blockquote { margin: 0; }
.lp-quote p { font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 44px); line-height: 1.15; color: var(--folder-black); margin: 0 0 18px; }
.lp-quote cite { font-style: normal; font-size: 15px; color: var(--graphite); }
.stars { display: inline-flex; color: var(--ribbon); margin-bottom: 22px; }
.stars svg { width: 100px; height: 18px; }

/* ---------- FAQ block on landing pages ---------- */
.lp-faq-grid { display: grid; grid-template-columns: 4fr 8fr; gap: 72px; align-items: start; }
.lp-faq-grid .heading-sm { position: sticky; top: 104px; }
@media (max-width: 860px) { .lp-faq-grid { grid-template-columns: 1fr; gap: 24px; } .lp-faq-grid .heading-sm { position: static; } }

/* ---------- Links to the other audiences ---------- */
.more { border-top: 1px solid var(--staff-line); }
.more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.more-grid.four { grid-template-columns: repeat(4, 1fr); }
/* soft tiles (the toolkit cards' family) so the row reads as choices, not steps */
.more-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  padding: 28px 28px 24px; border-radius: var(--radius-card); background: var(--card);
  box-shadow: var(--shadow-card); transition: transform .25s ease, box-shadow .25s ease;
}
.more-card h3 { font-family: var(--font-display); font-size: 30px; line-height: 1.1; color: var(--folder-black); margin-bottom: 10px; }
.more-card p { color: var(--graphite); font-size: 15px; line-height: 1.55; margin: 0; }
.more-link { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 24px; font-size: 15px; font-weight: 500; color: var(--deep-amber); }
.more-link::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .25s ease; }
.more-card:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(20,20,20,0.04), 0 14px 32px rgba(20,20,20,0.09); }
.more-card:hover .more-link::after { transform: translateX(3px) rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .more-card, .more-link::after { transition: none; } }
@media (max-width: 960px) { .more-grid, .more-grid.four { grid-template-columns: 1fr 1fr; gap: 16px; } }
@media (max-width: 560px) { .more-grid, .more-grid.four { grid-template-columns: 1fr; } }

/* ---------- Callout panel (e.g. read-only by design) ---------- */
.callout { display: grid; grid-template-columns: 5fr 7fr; gap: 24px 72px; padding: 56px; border-radius: var(--radius-panel); background: var(--vellum); }
.callout .heading-sm { margin: 0; }
.callout p { color: var(--graphite); font-size: 17px; }
.callout p:last-child { margin: 0; }
@media (max-width: 860px) { .callout { grid-template-columns: 1fr; padding: 32px 24px; } }

/* ---------- About ---------- */
.about-hero { padding: 160px 0 72px; }
.about-hero .display { font-size: clamp(52px, 7vw, 96px); margin-bottom: 24px; }
@media (max-width: 860px) { .about-hero { padding: 112px 0 40px; } }
.prose { max-width: 680px; }
.prose p { font-size: 19px; line-height: 1.65; color: var(--ink); margin-bottom: 22px; }
.prose p.muted { color: var(--graphite); }
.principles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.principles .tool h3 { font-size: 20px; }
@media (max-width: 760px) { .principles { grid-template-columns: 1fr; } }
.signature { display: flex; align-items: center; gap: 16px; margin-top: 40px; }
.signature img { width: 56px; height: 56px; border-radius: 13px; box-shadow: var(--shadow-card); }
.signature b { display: block; font-weight: 600; }
.signature span { font-size: 15px; color: var(--graphite); }

/* Planning Center page: the accent is services green, as on the home page */
.pc-rows .rf-text .heading-sm em, .callout .heading-sm em { font-style: italic; color: var(--services-deep); }
.rf-visual .cutout { display: block; height: auto; filter: drop-shadow(0 24px 30px rgba(20,20,20,0.18)); }