/* Fictional business skins consume the shared Locato token system. */
.example {
  --example-accent: var(--p-color-warning-40);
  --example-surface: var(--p-color-warning-90);
  --example-tint: var(--p-color-warning-80);
  --example-art-ink: var(--p-color-warning-40);
  margin: 0;
  color: var(--color-text);
  background: var(--color-bg);
  font-family: var(--font-body-family);
  font-weight: var(--font-body-weight);
  font-size: var(--font-body-size);
  line-height: var(--font-body-line-height);
}
.example--feet {
  --example-accent: var(--p-color-success-40);
  --example-surface: var(--p-color-success-90);
  --example-tint: var(--p-color-success-80);
  --example-art-ink: var(--p-color-success-40);
}
.example--fitness {
  --example-accent: var(--p-color-neutral-10);
  --example-surface: var(--p-color-brand-95);
  --example-tint: var(--p-color-brand-90);
  --example-art-ink: var(--p-color-neutral-10);
}
.example *, .example *::before, .example *::after { box-sizing: border-box; }
.example [hidden] { display: none !important; }
.example h1, .example h2, .example h3, .example p { margin: 0; }
.example h1, .example h2, .example h3 {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  line-height: var(--font-heading-line-height);
  letter-spacing: var(--p-letter-spacing-tight);
}
.example h1 { font-size: var(--font-display-size); }
.example h2 { font-size: var(--font-h1-size); }
.example h3 { font-size: var(--font-h3-size); }
.example a { color: inherit; text-decoration: none; }
.example button, .example select, .example textarea { font: inherit; }
.example a:focus-visible, .example button:focus-visible, .example summary:focus-visible, .example select:focus-visible, .example textarea:focus-visible {
  outline: calc(var(--p-border-width) * 3) solid var(--example-accent);
  outline-offset: var(--space-ui-xs);
}
.example section[id] { scroll-margin-top: var(--space-section-md); }
.example__skip { position: fixed; left: var(--space-ui-xl); top: var(--space-ui-xl); z-index: 10; transform: translateY(-200%); padding: var(--space-ui-xl); background: var(--color-bg); border: var(--p-border-width) solid var(--color-border); border-radius: var(--radius-sm); }
.example__skip:focus { transform: translateY(0); }
.example__demo-bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-gap-lg); padding: var(--space-ui-lg) var(--space-gutter); color: var(--color-text-inverse); background: var(--color-bg-inverse); font-size: var(--font-body-sm-size); }
.example__demo-bar a { text-decoration: underline; text-underline-offset: var(--space-ui-xs); }
.example__demo-bar a:focus-visible { outline-color: var(--color-highlight); }
.example__header, .example__hero, .example__section, .example__booking-section, .example__review-note, .example__closing, .example__footer { width: min(100% - var(--space-gutter) * 2, var(--page-width-wide)); margin-inline: auto; }
.example__header { display: flex; gap: var(--space-gap-md); align-items: center; padding-block: var(--space-section-sm); }
.example__brand { font-family: var(--font-heading-family); font-size: var(--font-h2-size); font-weight: var(--p-font-weight-medium); letter-spacing: var(--p-letter-spacing-tight); color: var(--example-accent); }
.example--fitness .example__brand { font-weight: var(--p-font-weight-bold); }
.example__nav { display: flex; align-items: center; gap: var(--space-gap-lg); margin-left: auto; }
.example__nav > a:not(.example__button) { padding-block: var(--space-ui-lg); }
.example__nav > a:not(.example__button):hover { text-decoration: underline; text-underline-offset: var(--space-ui-xs); }
.example__badge { display: inline-flex; align-items: center; padding: var(--space-ui-sm) var(--space-ui-lg); border: var(--p-border-width) solid var(--color-border-subtle); border-radius: var(--radius-pill); color: var(--color-text-secondary); font-size: var(--font-ui-xs-size); white-space: nowrap; }
.example__button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-gap-md); min-height: var(--size-control-lg); padding: var(--space-ui-xl) var(--space-ui-2xl); border: var(--p-border-width) solid var(--example-accent); border-radius: var(--radius-pill); background: var(--example-accent); color: var(--p-color-neutral-100) !important; font-weight: var(--p-font-weight-book); font-size: var(--font-body-size); cursor: pointer; transition: filter var(--motion-hover-duration) var(--motion-hover-ease), transform var(--motion-hover-duration) var(--motion-hover-ease); }
.example__button:hover { filter: brightness(1.15); transform: translateY(calc(var(--space-ui-2xs) * -1)); }
.example__button:disabled { opacity: 0.5; cursor: default; transform: none; filter: none; }
.example__button--small { min-height: var(--size-control-md); padding: var(--space-ui-lg) var(--space-ui-xl); font-size: var(--font-body-sm-size); }
.example__button--full { width: 100%; }
.example__hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); align-items: center; gap: var(--space-section-xl); padding-block: var(--space-section-sm) var(--space-section-xl); }
.example__hero-copy { display: flex; flex-direction: column; align-items: start; gap: var(--space-stack-lg); }
.example__eyebrow { color: var(--example-accent); font-weight: var(--p-font-weight-medium); font-size: var(--font-body-sm-size); }
.example__lead { font-size: var(--font-body-lg-size); color: var(--color-text-secondary); max-width: var(--page-width-reading); }
.example__hero-note { color: var(--color-text-secondary); font-size: var(--font-body-sm-size); }
.example__hero-art { position: relative; display: flex; flex-direction: column; justify-content: end; min-width: 0; min-height: calc(var(--size-control-lg) * 8); overflow: hidden; padding: var(--space-pad-x-lg); color: var(--example-art-ink); background: var(--example-surface); border-radius: var(--radius-card-lg); }
.example--fitness .example__hero-art { background: var(--example-accent); color: var(--example-tint); }
.example__art-orbit { position: absolute; width: 110%; aspect-ratio: 1; border: var(--p-border-width) solid currentColor; border-radius: 50%; opacity: 0.14; pointer-events: none; }
.example__art-orbit--one { left: 22%; top: -20%; }
.example__art-orbit--two { left: -38%; top: 20%; }
.example__art-mark { position: absolute; right: var(--space-pad-x-md); top: var(--space-pad-y-sm); font-family: var(--font-heading-family); font-size: calc(var(--font-display-size) * 3.2); line-height: 1; opacity: 0.05; font-weight: var(--p-font-weight-bold); }
.example__art-symbol { position: relative; width: 60%; margin: auto; transform: rotate(-9deg); }
.example__art-symbol svg { display: block; width: 100%; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.example__art-caption { z-index: 1; margin-top: var(--space-stack-lg); }
.example__art-caption p { font-family: var(--font-heading-family); font-size: var(--font-h3-size); line-height: var(--font-heading-line-height); }
.example__art-caption > span { display: block; margin-top: var(--space-stack-sm); font-size: var(--font-body-sm-size); }
.example__art-card { position: relative; display: flex; align-items: center; gap: var(--space-gap-sm); margin-top: var(--space-stack-lg); padding: var(--space-ui-xl); color: var(--color-text); background: var(--color-bg); border-radius: var(--radius-sm); font-size: var(--font-body-sm-size); }
.example__art-card div { flex: 1; }
.example__art-card strong { font-weight: var(--p-font-weight-medium); }
.example__art-card div > span { display: block; color: var(--color-text-secondary); }
.example__art-card > span:last-child { font-size: var(--font-h3-size); }
.example__art-dot { width: var(--size-avatar-sm); height: var(--size-avatar-sm); border-radius: 50%; background: var(--example-tint); }
.example__promise { display: flex; align-items: center; justify-content: center; gap: var(--space-gap-xl); padding: var(--space-pad-y-md) var(--space-gutter); background: var(--example-surface); color: var(--example-accent); font-size: var(--font-body-lg-size); }
.example__promise > span { font-size: var(--font-h2-size); }
.example__section { padding-block: var(--space-section-xl); }
.example__section-head { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--space-gap-xl); align-items: end; margin-bottom: var(--space-stack-xl); }
.example__section-head h2 { margin-top: var(--space-stack-md); }
.example__section-head > p { color: var(--color-text-secondary); }
.example__services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-gap-md); }
.example__service { display: flex; flex-direction: column; align-items: start; padding: var(--space-pad-x-md); border: var(--p-border-width) solid var(--color-border-subtle); border-radius: var(--radius-card); transition: background var(--motion-hover-duration) var(--motion-hover-ease), border-color var(--motion-hover-duration) var(--motion-hover-ease); }
.example__service:hover, .example__service:focus-within { background: var(--example-surface); border-color: var(--example-tint); }
.example__service-top { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: var(--space-gap-sm); margin-bottom: var(--space-stack-xl); }
.example__service-number { color: var(--example-accent); font-size: var(--font-body-sm-size); }
.example__service-tag { font-size: var(--font-ui-xs-size); padding: var(--space-ui-sm) var(--space-ui-lg); border-radius: var(--radius-pill); color: var(--example-accent); background: var(--example-surface); }
.example__service-description { margin-top: var(--space-stack-md) !important; margin-bottom: var(--space-stack-lg) !important; color: var(--color-text-secondary); }
.example__service-meta { display: flex; align-items: baseline; gap: var(--space-gap-sm); flex-wrap: wrap; margin-top: auto; }
.example__service-meta strong { font-size: var(--font-body-lg-size); font-weight: var(--p-font-weight-medium); }
.example__service-meta span { color: var(--color-text-secondary); font-size: var(--font-body-sm-size); }
.example__service-link { display: flex; justify-content: space-between; align-items: center; gap: var(--space-gap-md); width: 100%; min-height: var(--size-control-md); margin-top: var(--space-stack-lg); padding-top: var(--space-stack-md); border-top: var(--p-border-width) solid var(--color-border-subtle); color: var(--example-accent) !important; font-weight: var(--p-font-weight-book); }
.example__service-link:hover { text-decoration: underline; text-underline-offset: var(--space-ui-xs); }
.example__section-note { margin-top: var(--space-stack-md) !important; color: var(--color-text-secondary); font-size: var(--font-body-sm-size); }
.example__booking-section { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-section-xl); padding: var(--space-section-lg); border-radius: var(--radius-card-lg); background: var(--example-surface); }
.example__booking-copy { display: flex; flex-direction: column; align-items: start; gap: var(--space-stack-lg); }
.example__booking-copy > p:not(.example__eyebrow) { color: var(--color-text-secondary); }
.example__steps { display: grid; gap: var(--space-stack-md); margin: 0; padding-left: var(--space-ui-2xl); }
.example__steps li::marker { color: var(--example-accent); font-weight: var(--p-font-weight-medium); }
.example__booking-disclaimer { font-size: var(--font-body-sm-size); }
.example__booking-disclaimer strong { display: block; color: var(--example-accent); margin-bottom: var(--space-stack-xs); font-weight: var(--p-font-weight-medium); }
.example__booking { min-width: 0; padding: var(--space-pad-x-md); border: var(--p-border-width) solid var(--color-border-subtle); border-radius: var(--radius-card); background: var(--color-bg); }
.example__booking h3 { font-size: var(--font-h3-size); }
.example__booking-subtitle { margin-top: var(--space-stack-sm) !important; margin-bottom: var(--space-stack-lg) !important; color: var(--color-text-secondary); font-size: var(--font-body-sm-size); }
.example__field-label, .example__fieldset legend { display: block; font-size: var(--font-body-sm-size); font-weight: var(--p-font-weight-medium); margin-bottom: var(--space-stack-sm); }
.example__select { width: 100%; min-height: var(--size-control-lg); padding: var(--space-ui-lg); border: var(--p-border-width) solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); font-size: var(--font-body-sm-size); }
.example__fieldset { min-width: 0; margin: var(--space-stack-lg) 0 0; padding: 0; border: 0; }
.example__dates { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-ui-sm); }
.example__date, .example__slot { position: relative; display: flex; cursor: pointer; }
.example__choice-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.example__date-content, .example__slot-content { display: flex; align-items: center; justify-content: center; flex: 1; gap: var(--space-ui-2xs); min-height: var(--size-control-md); padding: var(--space-ui-md); border: var(--p-border-width) solid var(--color-border-subtle); border-radius: var(--radius-sm); font-size: var(--font-body-sm-size); }
.example__date-content { flex-direction: column; }
.example__date-content > span:first-child { font-size: var(--font-ui-xs-size); }
.example__date-content strong { font-size: var(--font-body-lg-size); font-weight: var(--p-font-weight-medium); }
.example__date-content > span:last-child { font-size: var(--font-ui-xs-size); color: var(--color-text-secondary); }
.example__choice-input:checked + span { color: var(--p-color-neutral-100); background: var(--example-accent); border-color: var(--example-accent); }
.example__choice-input:checked + span > span { color: inherit; }
.example__choice-input:focus-visible + span { outline: calc(var(--p-border-width) * 3) solid var(--example-accent); outline-offset: var(--space-ui-2xs); }
.example__choice-input:hover + span { border-color: var(--example-accent); }
.example__slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-ui-sm); }
.example__timezone { color: var(--color-text-secondary); font-weight: var(--p-font-weight-light); }
.example__booking-status { margin-block: var(--space-stack-lg) !important; color: var(--example-accent); min-height: 3em; font-size: var(--font-body-sm-size); }
.example__booking-footnote { margin-top: var(--space-stack-md) !important; color: var(--color-text-secondary); font-size: var(--font-ui-xs-size); text-align: center; }
.example__about { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-section-xl); }
.example__about-heading { display: flex; flex-direction: column; gap: var(--space-stack-lg); }
.example__about-heading > p:not(.example__eyebrow) { color: var(--color-text-secondary); }
.example__about-note { color: var(--example-accent) !important; font-size: var(--font-body-sm-size); }
.example__care-list { display: grid; gap: var(--space-stack-lg); }
.example__care-item { display: flex; gap: var(--space-gap-lg); padding-bottom: var(--space-stack-lg); border-bottom: var(--p-border-width) solid var(--color-border-subtle); }
.example__care-item > span { padding-top: var(--space-ui-xs); color: var(--example-accent); font-size: var(--font-body-sm-size); }
.example__care-item p { margin-top: var(--space-stack-md); color: var(--color-text-secondary); }
.example__review-note { display: flex; align-items: center; gap: var(--space-gap-xl); padding: var(--space-section-lg); border-radius: var(--radius-card-lg); background: var(--example-surface); }
.example__review-note > span { font-size: calc(var(--font-display-size) * 1.5); color: var(--example-accent); }
.example__review-note h2 { max-width: var(--page-width-reading); margin-block: var(--space-stack-md); font-size: var(--font-h2-size); }
.example__review-note div > p:last-child { color: var(--color-text-secondary); }
.example__faq { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: var(--space-section-xl); }
.example__faq h2 { margin-top: var(--space-stack-md); }
.example__question { border-bottom: var(--p-border-width) solid var(--color-border-subtle); }
.example__question summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-gap-md); padding-block: var(--space-stack-lg); list-style: none; font-weight: var(--p-font-weight-book); cursor: pointer; }
.example__question summary::-webkit-details-marker { display: none; }
.example__question summary > span { font-size: var(--font-h3-size); font-weight: var(--p-font-weight-light); transition: transform var(--motion-hover-duration) var(--motion-hover-ease); }
.example__question[open] summary > span { transform: rotate(45deg); }
.example__question > p { padding-bottom: var(--space-stack-lg); color: var(--color-text-secondary); }
.example__closing { display: flex; flex-direction: column; align-items: center; gap: var(--space-stack-lg); padding: var(--space-section-xl) var(--space-pad-x-md); background: var(--example-surface); border-radius: var(--radius-card-lg); text-align: center; }
.example__closing > p:not(.example__eyebrow) { max-width: var(--page-width-reading); color: var(--color-text-secondary); }
.example__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-gap-lg); padding-block: var(--space-section-lg); }
.example__footer p { margin-top: var(--space-stack-md); color: var(--color-text-secondary); font-size: var(--font-body-sm-size); }
.example__footer > a { padding-block: var(--space-ui-lg); color: var(--example-accent); }
.example__dialog { width: min(100% - var(--space-gutter) * 2, var(--page-width-reading)); max-height: calc(100dvh - var(--space-gutter) * 2); margin: auto; padding: var(--space-pad-x-md); overflow: auto; border: var(--p-border-width) solid var(--color-border-subtle); border-radius: var(--radius-card); color: var(--color-text); background: var(--color-bg); }
.example__dialog::backdrop { background: color-mix(in srgb, var(--color-bg-inverse) 55%, transparent); }
.example__dialog-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-gap-lg); margin-bottom: var(--space-stack-lg); }
.example__dialog-close { display: grid; place-items: center; width: var(--size-control-md); height: var(--size-control-md); padding: 0; border: var(--p-border-width) solid var(--color-border-subtle); border-radius: var(--radius-pill); background: var(--color-bg); color: var(--color-text); font-size: var(--font-h2-size); cursor: pointer; }
.example__dialog > p { color: var(--color-text-secondary); margin-block: var(--space-stack-md); }
.example__dialog h2 { font-size: var(--font-h2-size); }
.example__dialog .example__field-label { margin-top: var(--space-stack-lg); }
.example__request { display: block; width: 100%; resize: vertical; padding: var(--space-ui-xl); border: var(--p-border-width) solid var(--color-border-subtle); border-radius: var(--radius-sm); color: var(--color-text); background: var(--example-surface); font-size: var(--font-body-sm-size); line-height: var(--font-body-line-height); }
.example__dialog-note { font-size: var(--font-body-sm-size); }
.example__copy-status { min-height: 1.5em; font-size: var(--font-body-sm-size); }
.example__dialog-contact { display: block; text-align: center; padding-block: var(--space-ui-md); text-decoration: underline !important; text-underline-offset: var(--space-ui-xs); color: var(--example-accent) !important; font-size: var(--font-body-sm-size); }
.example--preview .example__demo-bar, .example--preview .example__header .example__nav { display: none; }
.example--preview .example__header .example__badge { margin-left: auto; }
@media (max-width: 960px) {
  .example__header { flex-wrap: wrap; }
  .example__header > .example__badge { margin-left: auto; }
  .example__nav { order: 3; width: 100%; justify-content: space-between; margin-left: 0; }
  .example__hero { gap: var(--space-section-md); }
  .example__booking-section { gap: var(--space-gap-xl); padding: var(--space-pad-x-md); }
  .example__services { gap: var(--space-gap-sm); }
  .example__service { padding: var(--space-pad-x-sm); }
  .example__service-top { flex-wrap: wrap; }
}
@media (max-width: 720px) {
  .example__hero, .example__section-head, .example__booking-section, .example__about, .example__faq { grid-template-columns: minmax(0, 1fr); }
  .example__hero { padding-top: var(--space-section-sm); gap: var(--space-stack-xl); }
  .example__hero-art { min-height: calc(var(--size-control-lg) * 7); }
  .example__hero-copy { gap: var(--space-stack-lg); }
  .example__services { grid-template-columns: minmax(0, 1fr); gap: var(--space-gap-md); }
  .example__service { padding: var(--space-pad-x-md); }
  .example__service-top { margin-bottom: var(--space-stack-lg); }
  .example__section-head { gap: var(--space-stack-lg); }
  .example__promise { align-items: start; gap: var(--space-gap-md); font-size: var(--font-body-size); }
  .example__booking-section { padding: var(--space-pad-x-sm); gap: var(--space-stack-xl); }
  .example__booking-copy { padding: var(--space-ui-lg); }
  .example__booking { padding: var(--space-ui-xl); }
  .example__about, .example__faq { gap: var(--space-stack-xl); }
  .example__review-note { gap: var(--space-gap-md); padding: var(--space-pad-x-md); align-items: start; }
  .example__review-note > span { font-size: var(--font-h2-size); }
  .example__footer { flex-direction: column; align-items: start; }
  .example__demo-bar { justify-content: start; gap: var(--space-gap-xs); font-size: var(--font-ui-xs-size); }
}
@media (prefers-reduced-motion: reduce) {
  .example__button, .example__service, .example__question summary > span { transition: none; }
  .example__button:hover { transform: none; }
}
/* Same-origin preview cards control this state. The page stays fully scrollable
   when opened directly; only its framed preview moves on hover or focus. */
@media (prefers-reduced-motion: no-preference) {
  html[data-preview-state] .example--preview {
    transform: translateY(0);
    transition: transform calc(var(--motion-confirm-hold) * 0.7) var(--motion-hover-ease);
  }
  html[data-preview-state='scrolling'] .example--preview {
    transform: translateY(calc(-100% + 100vh));
    transition-duration: calc(var(--motion-edge-pulse-duration) * 3);
    transition-timing-function: linear;
  }
  html[data-preview-state='paused'] .example--preview { transition: none; }
}