/* programs.css: the programs page on Brand's system (system.css), beside Function's membership card with no struck-through
   price (Brand, 16 Oct): the display headline with one italic phrase and the terra period, the lead in light serif, the six
   programs as a hairline grid in the home's words and order, "What it costs" as hairline rows, one line under, one terra
   pill. The words are Brand's, every price from canonical-facts, checked by the CXO. Loaded after zaha.css and system.css. */
.z-light body { background: var(--z-bg); }
.sx-wrap { width: min(1180px, 100% - 2 * var(--z-margin)); margin-inline: auto; }
.sx-eyebrow { font: 600 12px/1.4 var(--z-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--z-ink-3); margin: 0 0 var(--z-gap-3); }
.pg-hero { padding: calc(env(safe-area-inset-top, 0px) + 124px) 0 var(--z-gap-3); text-align: center; } /* the title sits in the panel (zaha.css §7b) */
.pg-hero .sx-wrap { max-width: 820px; }
@media (hover: hover) { .pg-card { transition: background-color var(--z-dur-2) var(--z-ease); } .pg-card:hover { background: var(--z-surface); } }
.pg-title { font: 300 clamp(2.75rem, 1.775rem + 4vw, 5.375rem)/0.98 var(--z-serif); letter-spacing: -0.025em; color: var(--z-ink); margin: 0; text-wrap: balance; }
.pg-title em { font-style: italic; color: var(--z-ink); }
.pg-lead { margin: var(--z-gap-3) auto 0; font: 300 clamp(19px, 1rem + .6vw, 24px)/1.4 var(--z-serif); color: var(--z-ink-2); max-width: 30em; }
.pg-list { padding: var(--z-gap-4) 0 var(--z-gap-5); }
.pg-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--z-hair); }
.pg-card { display: grid; align-content: start; gap: 4px; padding: var(--z-gap-4) clamp(16px, 2.4vw, 36px); border-bottom: 1px solid var(--z-hair); }
.pg-grid .pg-card:not(:nth-child(3n)) { border-right: 1px solid var(--z-hair); }
.pg-name { font: 300 clamp(30px, 1.4rem + 1vw, 38px)/1.05 var(--z-serif); color: var(--z-ink); margin: 0; }
.pg-tag { font: var(--z-t-label); font-size: 14px; color: var(--z-ink-2); margin: 0; }
.pg-desc { font: var(--z-t-body); color: var(--z-ink-2); margin: var(--z-gap-2) 0 0; }
.pg-price { font: var(--z-t-small); color: var(--z-ink-3); margin: var(--z-gap-2) 0 0; }
.pg-link { font: var(--z-t-strong); font-size: 15px; color: var(--z-ink); text-decoration: none; margin-top: var(--z-gap-2); justify-self: start; }
.pg-link:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .pg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pg-grid .pg-card:not(:nth-child(3n)) { border-right: 0; } .pg-grid .pg-card:nth-child(odd) { border-right: 1px solid var(--z-hair); } }
@media (max-width: 560px) { .pg-grid { grid-template-columns: minmax(0, 1fr); } .pg-grid .pg-card:nth-child(odd) { border-right: 0; } .pg-card { padding-inline: 0; } }
.pg-couples { font: var(--z-t-body); color: var(--z-ink-2); margin: var(--z-gap-3) 0 0; max-width: 40em; } /* once under the two couples programs, the home's line (the Chief Care Officer, 16 Oct) */
.pg-couples a { color: var(--z-ink); text-decoration: underline; text-underline-offset: 3px; }
.pg-pricing { padding: 0 0 var(--z-gap-5); }
.pg-pricing .sx-wrap { max-width: 820px; }
.pg-h2 { font: 300 clamp(28px, 1.2rem + 1.4vw, 36px)/1.1 var(--z-serif); letter-spacing: -0.015em; color: var(--z-ink); margin: 0 0 var(--z-gap-3); }
.pg-rows { margin: 0; border-top: 1px solid var(--z-hair); }
.pg-rows > div { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: var(--z-gap-3); padding: var(--z-gap-2) 0; border-bottom: 1px solid var(--z-hair); font: var(--z-t-body); color: var(--z-ink-2); }
.pg-rows dt { color: var(--z-ink); font-weight: 600; }
.pg-rows dd { margin: 0; }
.pg-sum { color: var(--z-ink); font-variant-numeric: tabular-nums; text-align: right; }
.pg-note { font: var(--z-t-body); color: var(--z-ink-2); margin: var(--z-gap-3) 0 0; max-width: 36em; }
.pp-act { margin: var(--z-gap-4) 0 0; }
.pp-act .z-action { display: inline-flex; align-items: center; justify-content: center; min-height: var(--z-action-h); padding: 0 24px; border-radius: var(--z-r-action); background: var(--z-action); color: var(--z-on-action); font: var(--z-t-strong); text-decoration: none; border: 1px solid var(--z-action); }
.pp-act .z-action:hover { background: var(--z-action-hover); border-color: var(--z-action-hover); color: var(--z-on-action); }
@media (max-width: 560px) { .pg-rows > div { grid-template-columns: minmax(0, 1fr) auto; } .pg-rows dd:not(.pg-sum) { grid-column: 1; } }