.reference-page { --rf-accent: #d64624; --rf-tint: #fff3ed; --rf-border: #f0d9ce; }
.ref-boutiques { --rf-accent: #b52d72; --rf-tint: #fff1f8; --rf-border: #ecd5e3; }
.ref-gyms { --rf-accent: #0878b7; --rf-tint: #edf8ff; --rf-border: #cfe4f1; }
.rf-header .salon-logo img { width: 156px; }
.rf-header .salon-nav { gap: 18px; font-size: 14px; }
.rf-header .salon-header-inner { gap: 24px; }
.reference-page .sl-hero { background: var(--rf-tint); }
.reference-page .sl-hero-photo { left: 0; width: 100%; object-position: center top; }
.reference-page .sl-hero-inner { grid-template-columns: minmax(0,420px) minmax(0,1fr) minmax(0,300px); gap: 28px; min-height: 620px; }
.reference-page .sl-hero h1 { font-size: 42px; line-height: 1.08; margin-top: 16px; }
.reference-page .sl-hero h1 em { display: block; color: var(--rf-accent); }
.reference-page .sl-pill { background: var(--rf-tint); color: var(--rf-accent); border: 1px solid var(--rf-border); }
.reference-page .sl-hero-copy > p { max-width: 380px; }
.reference-page .sl-mini-flow svg { background: var(--rf-tint); color: var(--rf-accent); }
.rf-phone { grid-column: 3; margin: 0; border: 1px solid #e0e7e3; border-radius: 8px; padding: 10px; background: #fff; box-shadow: 0 14px 40px #10261f26; min-width: 0; transform: rotate(2deg); }
.rf-phone > header { display: flex; align-items: center; gap: 8px; padding: 4px 3px 12px; }
.rf-avatar { width: 27px; height: 27px; display: grid; place-items: center; background: var(--rf-tint); color: var(--rf-accent); border-radius: 50%; flex-shrink: 0; }
.rf-avatar svg { width: 16px; height: 16px; }
.rf-phone > header strong { display: block; font-size: 12px; text-transform: capitalize; }
.rf-phone > header small { display: block; font-size: 8px; color: #7b8b80; margin-top: 3px; }
.rf-phone > header > svg { margin-left: auto; width: 18px; height: 18px; flex-shrink: 0; }
.rf-poster { position: relative; display: block; width: 100%; background: #e4e9e4; border: 0; padding: 0; overflow: hidden; font: inherit; text-align: left; }
button.rf-poster { cursor: zoom-in; }
.rf-poster > img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.rf-poster-copy { position: absolute; top: 18px; left: 16px; right: 16px; color: #fff; text-shadow: 0 2px 9px #0007; }
.rf-poster-copy > strong { display: block; font: 700 32px/1.08 Georgia, serif; max-width: 90%; }
.rf-poster-copy > span { display: block; font-size: 13px; line-height: 1.45; margin-top: 10px; max-width: 85%; }
.rf-offer { position: absolute; bottom: 14px; left: 14px; right: 14px; padding: 12px 10px; background: #fff3cd; color: #49341d; font-size: 11px; line-height: 1.4; font-weight: 800; border-radius: 4px; text-align: center; }
.rf-phone .rf-poster { border-radius: 4px; }
.rf-phone .rf-poster-copy > strong { font-size: 29px; }
.rf-phone .rf-poster-copy > span { font-size: 12px; }
.rf-phone .rf-offer { font-size: 10px; }
.rf-tone-pizza .rf-poster-copy, .rf-tone-special .rf-poster-copy, .rf-tone-coffee .rf-poster-copy, .rf-tone-dining .rf-poster-copy { background: #24231dd9; padding: 14px; border-radius: 3px; }
.rf-tone-special .rf-offer { background: #d64c25; color: #fff; }
.rf-tone-coffee .rf-offer { background: #f7edd8; }
.rf-tone-dining .rf-offer { background: #993d29; color: #fff; }
.ref-boutiques .rf-poster-copy, .rf-dialog.ref-boutiques .rf-poster-copy { top: auto; bottom: 77px; padding: 15px; border-radius: 3px; color: #742145; background: #fff1f7f0; text-shadow: none; }
.ref-boutiques .rf-poster-copy > strong, .rf-dialog.ref-boutiques .rf-poster-copy > strong { font-size: 30px; }
.ref-boutiques .rf-poster-copy > span, .rf-dialog.ref-boutiques .rf-poster-copy > span { font-size: 12px; }
.ref-boutiques .rf-offer, .rf-dialog.ref-boutiques .rf-offer { background: #9c2d63; color: #fff; }
.ref-gyms .rf-tone-membership .rf-poster-copy, .rf-dialog.ref-gyms .rf-tone-membership .rf-poster-copy { top: auto; bottom: 80px; padding: 14px; background: #132d3fdf; border-radius: 3px; }
.rf-tone-mobility .rf-poster-copy, .rf-tone-community .rf-poster-copy { color: #163d5d; background: #e9f6ffed; text-shadow: none; padding: 14px; border-radius: 3px; }
.ref-gyms .rf-offer, .rf-dialog.ref-gyms .rf-offer { background: #097fbd; color: #fff; }
.rf-phone > figcaption { padding: 11px 3px 4px; }
.rf-social-icons { display: flex; align-items: center; gap: 12px; }
.rf-social-icons svg { width: 18px; height: 18px; }
.rf-social-icons svg:first-child { color: #dc4b58; }
.rf-social-icons svg:last-child { margin-left: auto; }
.rf-phone figcaption > p { font-size: 11px; line-height: 1.5; margin: 10px 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rf-phone figcaption > span { display: block; font-size: 9px; line-height: 1.4; color: #6d8173; }
.reference-page .sl-benefits { background: var(--rf-tint); border-color: var(--rf-border); }
.reference-page .sl-benefits svg, .reference-page .sl-eyebrow { color: var(--rf-accent); }
.rf-examples .sl-section-header h2 { max-width: 720px; }
.rf-examples .sl-section-header p { max-width: 790px; }
.rf-gallery { grid-auto-columns: calc((100% - 60px) / 4); }
.rf-gallery .rf-poster { border-radius: 6px 6px 0 0; }
.rf-gallery .sl-example-expand { bottom: 75px; }
.rf-poster:hover .sl-example-expand, .rf-poster:focus-visible .sl-example-expand { opacity: 1; }
.rf-gallery-note { display: flex; gap: 7px; align-items: start; font-size: 12px; line-height: 1.65; color: #6d7a70; margin: 20px 0 0; }
.rf-gallery-note svg { width: 15px; height: 15px; margin-top: 3px; flex-shrink: 0; color: var(--rf-accent); }
.reference-page .sl-workflow { background: #f7faf8; }
.reference-page .sl-step { background: var(--rf-accent); }
.reference-page .sl-workflow-grid li > div > svg { color: var(--rf-accent); }
.reference-page .sl-occasions { background: var(--rf-tint); }
.reference-page .sl-occasions svg { color: var(--rf-accent); }
.reference-page .sl-salon-benefit { border-color: var(--rf-border); }
.reference-page .sl-price.sl-recommended { border-color: var(--rf-accent); }
.reference-page .sl-price.sl-recommended .sl-price-heading > span { background: var(--rf-tint); color: var(--rf-accent); }
.reference-page .sl-faq { background: var(--rf-tint); border-color: var(--rf-border); }
.rf-faq > .salon-container { display: block; }
.rf-faq h2 { margin-bottom: 22px; }
.rf-faq .sl-faq-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 40px; align-items: start; }
.rf-closing { background: #26352d; }
.ref-restaurants .rf-closing { background: #49251f; }
.ref-boutiques .rf-closing { background: #68213f; }
.ref-gyms .rf-closing { background: #0c3450; }
.reference-page .sl-closing .sl-eyebrow { color: #e0f8eb; }
.rf-dialog { width: min(820px, calc(100% - 28px)); }
.rf-dialog-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.rf-dialog-art { position: relative; }
.rf-dialog .rf-poster > img { height: auto; }
.rf-dialog .rf-poster-copy > strong { font-size: 36px; }
.rf-dialog-copy { padding: 28px; }
.rf-dialog-copy > p { font-size: 15px; line-height: 1.75; color: #4d6556; }
.rf-dialog-copy #business-dialog-tags { color: #1c7950; }
.rf-dialog-copy .rf-sample-note { font-size: 12px; padding-top: 18px; border-top: 1px solid #e3eae5; }
.rf-use-example { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; padding: 0; margin-top: 20px; font: inherit; font-size: 13px; font-weight: 600; color: #27714d; cursor: pointer; text-align: left; }
.rf-use-example svg { width: 15px; height: 15px; }
.reference-page .rf-poster:focus-visible, .rf-use-example:focus-visible, .rf-industries summary:focus-visible { outline: 3px solid #128253; outline-offset: 4px; }
@media (max-width: 1200px) {
  .reference-page .sl-hero-inner { grid-template-columns: minmax(0,380px) minmax(0,1fr) minmax(0,270px); gap: 20px; }
  .reference-page .sl-hero h1 { font-size: 39px; }
  .rf-phone .rf-poster-copy > strong { font-size: 26px; }
  .rf-phone .rf-poster-copy > span { font-size: 11px; }
  .rf-gallery .rf-poster-copy > strong { font-size: 29px; }
}
@media (max-width: 1100px) {
}
@media (max-width: 950px) {
  .reference-page .sl-hero-inner { grid-template-columns: minmax(0,1fr) minmax(0,270px); gap: 24px; }
  .reference-page .sl-hero-photo { opacity: .22; }
  .rf-phone { grid-column: 2; transform: none; }
  .rf-gallery { grid-auto-columns: calc((100% - 40px) / 3); }
}
@media (max-width: 640px) {
  .rf-header .salon-logo img { width: 128px; }
  .rf-header .salon-header-inner { gap: 10px; }
  .reference-page .sl-hero-inner { display: flex; flex-direction: column; gap: 26px; }
  .reference-page .sl-hero h1 { font-size: 36px; }
  .reference-page .sl-hero-photo { height: 460px; opacity: .19; object-position: 68% top; }
  .rf-phone { width: min(300px,100%); align-self: center; padding: 12px; }
  .rf-phone .rf-poster-copy > strong { font-size: 29px; }
  .rf-phone figcaption > p { font-size: 13px; }
  .rf-phone > header strong { font-size: 14px; }
  .rf-phone > header small { font-size: 9px; }
  .rf-phone figcaption > span { font-size: 11px; }
  .rf-gallery { grid-auto-columns: min(75vw,260px); gap: 16px; }
  .rf-gallery .rf-poster-copy > strong { font-size: 29px; }
  .rf-gallery-note { font-size: 12px; }
  .rf-faq .sl-faq-list, .rf-dialog-grid { grid-template-columns: minmax(0,1fr); }
  .rf-dialog-copy { padding: 24px; }
  .rf-dialog .rf-poster-copy > strong { font-size: 36px; }
}
@media (max-width: 360px) {
  .rf-header .salon-logo img { width: 112px; }
  .rf-header .salon-header-inner { gap: 6px; }
  .reference-page .sl-hero h1 { font-size: 33px; }
}