/* jmco.app's product pages (/plants/ ...): one page per line of work, for the people in it. Loaded after
   site.css for its type, colours, buttons and the booking widget; no city here, so the page is paper. */
body.product { background: var(--paper); color: var(--paper-ink); --ink: var(--paper-ink); --soft: var(--paper-soft); --faint: #6b6f78; --line: var(--paper-line); }
body.product .btn.primary { background: var(--paper-ink); color: #fff; }
body.product .btn.ghost { border-color: #cfc8b8; color: var(--paper-ink); background: var(--paper-2); }
body.product nav.top { border-bottom: 1px solid var(--paper-line); }
body.product nav.top a { color: var(--paper-soft); }
body.product nav.top a.mark { color: var(--paper-ink); }
body.product nav.top a.cta { color: var(--paper-ink); border-color: #cfc8b8; }

.p-hero { padding: clamp(40px, 7vw, 88px) var(--pad) clamp(32px, 5vw, 56px); }
.p-hero .inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.p-hero h1 { font-size: clamp(40px, 5.4vw, 72px); }
.p-hero .eyebrow { color: var(--accent-ink); }
.p-hero .lead { color: var(--paper-soft); max-width: 540px; }
.p-hero .note { font-size: 13.5px; color: var(--faint); margin-top: 18px; }
.shot-frame { background: var(--paper-2); border: 1px solid var(--paper-line); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(23, 24, 28, .12); }
.shot-frame img { display: block; width: 100%; height: auto; }
.shot-frame figcaption { font-size: 13px; color: var(--paper-soft); padding: 10px 14px; border-top: 1px solid var(--paper-line); }
@media (max-width: 900px) { .p-hero .inner { grid-template-columns: 1fr; } }

.p-section { padding: clamp(48px, 7vw, 92px) var(--pad); border-top: 1px solid var(--paper-line); }
.p-section.tint { background: var(--paper-2); }
.p-section h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(30px, 4vw, 48px); letter-spacing: -.02em; line-height: 1.06; margin-bottom: 16px; max-width: 820px; }
.p-section h2 em { font-style: italic; color: var(--accent); }
.p-section p.sub { color: var(--paper-soft); font-size: 18px; line-height: 1.65; max-width: 660px; margin-bottom: 40px; }

.pains { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; }
.pains div { border-top: 2px solid var(--paper-ink); padding-top: 16px; }
.pains h3, .mods h3, .twin h3, .faq h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; letter-spacing: -.01em; margin-bottom: 8px; }
.pains p, .mods p, .twin p, .faq p { color: var(--paper-soft); font-size: 15.5px; line-height: 1.65; }

.mods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.mods article { background: var(--paper-2); border: 1px solid var(--paper-line); border-radius: 16px; padding: 24px; }
.p-section.tint .mods article { background: var(--paper); }
.mods ul { margin: 12px 0 0 18px; color: var(--paper-soft); font-size: 15px; line-height: 1.7; }
.status { display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; margin-bottom: 14px; }
.status.now { background: #e3f1e7; color: #1d6b3c; }
.status.next { background: #f6ead6; color: var(--accent-ink); }
@media (max-width: 760px) { .mods { grid-template-columns: 1fr; } }

.twin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
@media (max-width: 760px) { .twin { grid-template-columns: 1fr; gap: 28px; } }
.twin ul { list-style: none; margin-top: 12px; }
.twin li { padding: 9px 0 9px 26px; border-bottom: 1px solid var(--paper-line); color: var(--paper-soft); font-size: 15.5px; position: relative; }
.twin li::before { content: '✓'; position: absolute; left: 2px; color: var(--accent-ink); }

.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 760px) { .gallery { grid-template-columns: 1fr; } }

.faq { margin-top: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 44px; }
@media (max-width: 760px) { .faq { grid-template-columns: 1fr; } }

.p-contact { background: var(--paper-ink); color: #f4f1ea; }
.p-contact h2 { color: #f4f1ea; }
.p-contact p.sub { color: rgba(244, 241, 234, .78); }
.p-contact .mail { font-family: var(--serif); font-size: clamp(24px, 3vw, 34px); color: #f4f1ea; text-decoration: none; border-bottom: 2px solid var(--accent); }
.p-contact .book { color: var(--paper-ink); }
body.product footer { background: var(--paper-ink); color: rgba(244, 241, 234, .65); border-top: 1px solid rgba(244, 241, 234, .12); }
body.product footer a { color: rgba(244, 241, 234, .85); }

@media (max-width: 720px) {
  body.product .mark small { display: inline; white-space: nowrap; }   /* the product's name stays on phones */
  body.product nav.top ul { display: none; }   /* the hero's buttons are just below */
}