/* The homepage's two offers (Sam, 2026-10-23), drawn by the ad popup (promo-dialog.css / .js), one a visit, taking
   turns: the free AI audit on the strawberry, ARCHIVE on black. The homepage runs on system.css, not a.css, so they
   carry their own type and buttons. Patient where the dental one is quick: after 20 s of reading or 40% of the page,
   never to browsing phones (data-promo-wide), and a close keeps it away for 30 days (data-promo-remember). */
.promo--home {
  --promo-delay-browse: 20000ms;
  --promo-scroll-share: .4;
  --promo-width: 54rem;
  --promo-media-width: 42%;
  --promo-padding: var(--spacing-xl);
}
.promo--archive { --promo-background: #000; --promo-foreground: #f1f0ea; box-shadow: 0 0 0 1px rgba(241, 240, 234, .14); }
.promo--home .promo__body { gap: var(--spacing-md); }
.promo--home .promo__top { align-items: center; }
.promo--home .promo__label { margin: 0; font-size: var(--type-label-size); line-height: var(--type-label-leading); letter-spacing: var(--type-label-tracking); font-weight: var(--type-weight-medium); text-transform: uppercase; }
.promo--home .promo__title { font-size: var(--type-h4-size); line-height: var(--type-h4-leading); letter-spacing: var(--type-h4-tracking); font-weight: var(--type-weight-medium); text-wrap: balance; }
.promo--home .promo__desc { margin: 0; font-size: var(--type-p-size); line-height: var(--type-p-leading); letter-spacing: var(--type-p-tracking); text-wrap: pretty; opacity: .8; }
/* the offer's terms, as tags */
.promo--home .promo__facts { display: flex; flex-wrap: wrap; gap: var(--spacing-2xs); margin: 0; padding: 0; list-style: none; }
.promo--home .promo__facts li { padding: var(--spacing-3xs, 4px) var(--spacing-xs); border: var(--hairline) solid currentColor; border-radius: 999px; font-size: var(--type-label-size); line-height: var(--type-label-leading); letter-spacing: var(--type-label-tracking); text-transform: uppercase; }
/* what the audit sends back, drawn as the page itself */
.promo--home .promo__plan { display: grid; margin: 0; padding: var(--spacing-sm) var(--spacing-md); background: #fff; color: var(--surface-strawberry-foreground); box-shadow: 0 18px 40px rgba(0, 0, 0, .18); counter-reset: plan; }
.promo--home .promo__plan-head { display: flex; justify-content: space-between; padding-block-end: var(--spacing-2xs); font-size: var(--type-label-size); line-height: var(--type-label-leading); letter-spacing: var(--type-label-tracking); text-transform: uppercase; opacity: .6; }
.promo--home .promo__plan ol { display: grid; margin: 0; padding: 0; list-style: none; }
.promo--home .promo__plan li { display: grid; grid-template-columns: 2em 1fr; padding-block: var(--spacing-2xs); border-block-start: var(--hairline) solid rgba(0, 0, 0, .14); font-size: var(--type-p-size); line-height: var(--type-p-leading); counter-increment: plan; }
.promo--home .promo__plan li::before { content: counter(plan, decimal-leading-zero); font-size: var(--type-label-size); line-height: var(--type-p-leading); opacity: .5; }
.promo--home .promo__word { display: block; height: 2.6rem; width: auto; color: var(--promo-foreground); }
.promo--home .promo__actions { gap: var(--spacing-md); margin-block-start: 0; }
.promo--home .promo__cta { display: inline-flex; align-items: center; min-block-size: var(--touch-target); padding: var(--spacing-2xs) var(--control-padding-inline); background: var(--promo-foreground); color: var(--promo-background); text-decoration: none; font-size: var(--type-button-size); line-height: var(--type-button-leading); letter-spacing: var(--type-button-tracking); text-transform: var(--type-title-transform); transition: opacity var(--motion-normal) var(--motion-ease-fade); }
.promo--home .promo__cta:hover { opacity: .85; }
.promo--home .promo__later { padding: var(--spacing-2xs) 0; border: 0; background: none; color: inherit; font: inherit; font-size: var(--type-button-size); text-decoration: underline; text-underline-offset: var(--announcement-ring-offset); cursor: pointer; }
/* the photos: two people across a table going over the papers; the hall, its A in the middle */
.promo--audit .promo__media img { object-position: 70% 50%; transform-origin: 70% 50%; }
.promo--archive .promo__media img { object-position: 50% 45%; transform-origin: 50% 45%; }
@media (max-width: 767.98px), (max-height: 30em) {
  .promo--home .promo__title { font-size: var(--type-h5-size); line-height: var(--type-h5-leading); letter-spacing: var(--type-h5-tracking); }
  .promo--home .promo__plan { padding: var(--spacing-xs) var(--spacing-sm); }
  .promo--home .promo__cta { justify-content: center; }
  .promo--home .promo__later, .promo--home .promo__actions a.promo__later { min-block-size: var(--touch-target); text-align: center; }
  .promo--audit .promo__media img { object-position: 50% 30%; transform-origin: 50% 30%; }
}