/* Recommendation dialog: the full story of one customer. */
.ha-rec-scrim { position: fixed; inset: var(--ha-rec-head, 77px) 0 0 0; z-index: 9998; pointer-events: none; }
.ha-rec-scrim.is-open { pointer-events: auto; }
.ha-rec-sheet { position: fixed; inset: auto 0 0 0; z-index: 9999; width: 100%; height: calc(100% - var(--ha-rec-top, 117px)); padding: 72px 32px 56px; border-radius: 16px 16px 0 0; background: #fff; color: #111; overflow: auto; transform: translateY(100%); visibility: hidden; transition: transform .5s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .5s; }
.ha-rec-sheet.is-open { transform: translateY(0); visibility: visible; transition: transform .5s cubic-bezier(.4, 0, .2, 1), visibility 0s; }
.ha-rec-sheet__body { max-width: 720px; margin: 0 auto; }
.ha-rec-sheet__close { position: absolute; top: 18px; right: 20px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--color-brand-navy); cursor: pointer; }
.ha-rec-sheet__close:hover { background: rgba(0, 26, 114, .08); }
.ha-rec-sheet__close:focus-visible { outline: 2px solid var(--color-brand-blue); outline-offset: 2px; }
/* The page behind the sheet shrinks and dims a little, as on an iPad. */
html.ha-rec-open { overflow: hidden; }
html.ha-rec-open, html.ha-rec-open body { background: #06091c; }
.dialog-off-canvas-main-canvas > main, .dialog-off-canvas-main-canvas > footer { transition: transform .5s cubic-bezier(.4, 0, .2, 1), opacity .5s cubic-bezier(.4, 0, .2, 1); }
html.ha-rec-open .dialog-off-canvas-main-canvas > main, html.ha-rec-open .dialog-off-canvas-main-canvas > footer { overflow: clip; border-radius: 28px; }
html.ha-rec-shrunk .dialog-off-canvas-main-canvas > main, html.ha-rec-shrunk .dialog-off-canvas-main-canvas > footer { transform: scale(.94); opacity: .6; }
@media (max-width: 640px) { .ha-rec-sheet { padding: 64px 20px 40px; } }
@media (prefers-reduced-motion: reduce) { .ha-rec-sheet, .dialog-off-canvas-main-canvas > main, .dialog-off-canvas-main-canvas > footer { transition: none; } }
.ha-rec-dialog__type { display: inline-block; margin: 0 0 16px; padding: 4px 10px; border-radius: 4px; background: rgba(0, 26, 114, .08); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-brand-navy); }
.ha-rec-dialog__quote { margin: 0 0 28px; font-size: 0.875rem; line-height: 1.75; color: #374151; }
.ha-rec-dialog__quote p { margin: 0 0 12px; }
.ha-rec-dialog__who { display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid #e7e7e7; }
.ha-rec-dialog__photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.ha-rec-dialog__name { margin: 0; font-weight: 700; color: var(--color-brand-navy); }
.ha-rec-dialog__place { margin: 0; font-size: 14px; color: #686868; }

/* The page behind peeks out above the sheet, as on an iPad. */
.ha-rec-peek { position: fixed; top: calc(var(--ha-rec-top, 117px) - 30px); left: 5%; right: 5%; z-index: 9998; height: 48px; border-radius: 28px 28px 0 0; background: rgba(255, 255, 255, .28); opacity: 0; transform: translateY(40px); transition: transform .5s cubic-bezier(.4, 0, .2, 1), opacity .5s cubic-bezier(.4, 0, .2, 1); pointer-events: none; }
.ha-rec-peek.is-open { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .ha-rec-peek { transition: none; } }

/* A recommendation opened as its own page. */
.ha-rec-page { max-width: 720px; margin: 0 auto; padding: 56px 24px 96px; }
.ha-rec-page__back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 32px; font-size: 14px; font-weight: 600; color: var(--color-brand-navy); text-decoration: none; }
.ha-rec-page__back:hover span { text-decoration: underline; }