/* dendrofile.com only: the wordmark, the app pictures, the proof figure and the price cards.
   The shared system is tokens.css and components.css (ops/site-system/, issue #421). */

/* The header draws the wordmark from the shared wordmark.css. The footer keeps the name as text,
   in Source Serif 4 at h3 size, in ink. No tree-key here. */
.wordmark { font: 500 var(--fs-3)/1 var(--display); color: var(--ink); letter-spacing: -.01em; }
@media (max-width: 560px) { .masthead .wrap { gap: var(--s-2); } }

/* A picture of the app beside the hero text. */
.shot { margin: 0; }
.shot img { width: 100%; height: auto; border: var(--hair); background: #fff; }
.shot figcaption { margin-top: var(--s-2); }
@media (min-width: 900px) { .hero-in:has(.shot) { grid-template-columns: 5fr 7fr; } }

/* The one proof, as a figure: the old time struck through, the new one large. */
.figure { margin: var(--s-7) 0 0; font-family: var(--display); color: var(--ink); }
.figure p { display: flex; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; margin: 0; max-width: none; }
.figure .was { font-size: clamp(2.6rem, 8vw, 4.4rem); color: var(--ink-3); text-decoration-thickness: 2px; }
.figure .now { font-size: clamp(4rem, 13vw, 7.5rem); line-height: .95; }
.figure figcaption { margin-top: var(--s-2); }

/* Three steps, each a real screen. */
.shots { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; gap: var(--s-6); counter-reset: step; }
.shots li { counter-increment: step; }
.shots figure { margin: 0; }
.shots img { width: 100%; height: auto; border: var(--hair); background: #fff; }
.shots li:not(:last-child) img { max-width: 320px; }
.shots figcaption { margin-top: var(--s-3); font: 500 1.2rem/1.3 var(--display); color: var(--ink); }
.shots figcaption::before { content: counter(step) ". "; color: var(--cedar); }
@media (min-width: 900px) {
  .shots { grid-template-columns: 1fr 1fr 2.4fr; align-items: start; }
  .shots li:not(:last-child) img { max-width: none; }
}
section.flush { padding-top: 0; }

/* Pricing: two cards and a tick list. */
.prices { list-style: none; margin: 0 0 var(--s-6); padding: 0; display: grid; gap: var(--s-4); max-width: 40rem; }
@media (min-width: 560px) { .prices { grid-template-columns: 1fr 1fr; } }
.prices .card { display: grid; gap: var(--s-1); align-content: start; }
.price { font: 500 var(--fs-4)/1 var(--display); color: var(--ink); }
.per { color: var(--ink-3); }
.tag { justify-self: start; margin-top: var(--s-2); padding: 0 var(--s-2); background: var(--lichen); color: var(--ink);
       font: 400 var(--fs-0)/1.8 var(--caps); letter-spacing: .08em; text-transform: lowercase; border-radius: var(--radius); }
.prices + .ticks { max-width: 40rem; }