/* Greeta Sites — page and compact homepage introduction. Shared tokens in site.css. */
.sites-skip { position: fixed; top: 8px; left: 12px; padding: 12px 20px; background: var(--accent); color: var(--bg); z-index: 1000; transform: translateY(-160%); }
.sites-skip:focus { transform: none; }
.sites-page { padding-top: 90px; }
.sites-wrap { width: min(1240px, calc(100% - 64px)); margin-inline: auto; }
.sites-page h1, .sites-page h2, .sites-page h3, .sites-page h4 { font-family: var(--serif); font-weight: 400; letter-spacing: -.025em; }
.sites-page h1 em, .sites-page h2 em { color: var(--accent); font-weight: 400; }
.sites-page h2 { font-size: clamp(34px, 4.1vw, 54px); line-height: 1.1; margin: 0 0 24px; }
.sites-page p { color: var(--muted); line-height: 1.7; }
.sites-page .eyebrow { color: var(--accent); margin-bottom: 24px; font-size: 11px; letter-spacing: .17em; }
.sites-hero { padding: 54px 0 70px; }
.sites-hero-copy { text-align: center; }
.sites-page h1 { font-size: clamp(45px, 6.6vw, 88px); line-height: 1.03; margin: 0 0 28px; }
.sites-page .sites-lead { font-size: 18px; max-width: 660px; margin: 0 auto 28px; line-height: 1.65; }
.sites-cta { display: inline-flex; align-items: center; justify-content: center; gap: 20px; padding: 16px 24px; border-radius: var(--radius-md); font-size: 15px; text-decoration: none; min-height: 52px; }
.sites-page .sites-support { font-size: 12px; margin-top: 18px; }
.sites-stage { display: grid; grid-template-columns: 1.05fr 1fr; gap: 24px; align-items: start; margin-top: 64px; position: relative; }
.sites-browser { margin: 0; min-width: 0; overflow: hidden; border: 1px solid var(--border2); border-radius: 12px; background: var(--bg2); box-shadow: 0 24px 60px rgba(0,0,0,.2); }
.sites-browser-salon { transform: rotate(-2deg); }
.sites-browser-food { margin-top: 40px; transform: rotate(2deg); }
.sites-browser-bar { display: flex; gap: 18px; align-items: center; justify-content: space-between; padding: 14px 16px; color: var(--muted); font-size: 10px; }
.sites-browser-dots { letter-spacing: 3px; color: var(--dim); }
.sites-browser img { display: block; width: 100%; height: auto; }
.sites-browser figcaption { padding: 11px 16px; font-size: 10px; color: var(--muted); }
.sites-connected { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: 12px; margin-top: 12px; }
.sites-status-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--green); }
.sites-section { padding: 100px 0; border-top: 1px solid var(--border); }
.sites-split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.sites-value { background: var(--bg2); }
.sites-value-copy { padding-left: 36px; border-left: 1px solid var(--border2); }
.sites-page .sites-intro { font-size: 22px; line-height: 1.45; color: var(--text); margin: 0 0 20px; }
.sites-checks { list-style: none; padding: 0; margin: 24px 0; }
.sites-checks li { position: relative; padding: 10px 0 10px 28px; font-size: 14px; color: var(--muted); line-height: 1.5; }
.sites-checks li::before { content: '↗'; position: absolute; left: 0; color: var(--accent); }
.sites-section-heading { margin-bottom: 56px; max-width: 820px; }
.sites-section-heading > p:last-child { max-width: 620px; }
.sites-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 48px; border: 1px solid var(--border2); border-radius: var(--radius-xl); margin-top: 28px; background: var(--bg2); }
.sites-index { font-size: 10px; letter-spacing: .12em; color: var(--accent); }
.sites-showcase h3 { font-size: clamp(32px, 3.8vw, 46px); line-height: 1.12; margin: 20px 0; }
.sites-showcase-copy > p { font-size: 15px; }
.sites-small { font: 11px/1.6 var(--sans); color: var(--muted); }
.sites-example-panel { background: #faf8f5; border-radius: 12px; overflow: hidden; color: #231c2e; box-shadow: 0 20px 40px rgba(0,0,0,.12); }
.sites-demo-head { padding: 15px 20px; border-bottom: 1px solid #e2dce8; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; }
.sites-demo-head .sites-small { color: #625a6d; font-size: 9px; font-weight: 400; }
.sites-booking-demo, .sites-order-demo { padding: 28px; }
.sites-example-panel h4 { font-size: 40px; line-height: 1.1; margin: 12px 0 26px; }
.sites-example-panel .sites-small { color: #625a6d; font-size: 10px; }
.sites-service-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid #e2dce8; font-size: 12px; }
.sites-date-strip { display: flex; gap: 8px; margin: 24px 0 14px; }
.sites-date-strip > span { flex: 1; padding: 10px 6px; text-align: center; border: 1px solid #e2dce8; border-radius: 8px; font: 9px var(--sans); }
.sites-date-strip strong { display: block; font-size: 21px; margin-top: 5px; font-weight: 400; }
.sites-date-strip .selected { background: #e4d4f5; border-color: #a785c4; }
.sites-times { display: flex; gap: 8px; margin-bottom: 24px; }
.sites-times span { flex: 1; text-align: center; padding: 8px 3px; border: 1px solid #e2dce8; border-radius: 6px; font-size: 9px; }
.sites-times .selected { background: #231c2e; color: #faf8f5; }
.sites-demo-action { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px; background: #231c2e; color: #faf8f5; font-size: 11px; border-radius: 6px; }
.sites-example-panel p:last-child { margin: 10px 0 0; }
.sites-showcase-food .sites-example-panel { background: #f8f4eb; color: #20352a; }
.sites-showcase-food .sites-demo-head { border-color: #d6dbd3; }
.sites-showcase-food .sites-demo-action { background: #a93421; }
.sites-menu-line { display: flex; gap: 12px; align-items: center; padding: 18px 0; border-bottom: 1px solid #d6dbd3; }
.sites-food-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #e6dbc7; font-size: 28px; color: #a93421; flex: 0 0 46px; }
.sites-menu-line > div { flex: 1; }
.sites-menu-line strong { display: block; font-size: 11px; margin-bottom: 5px; }
.sites-menu-line div > span { display: block; font-size: 10px; color: #5a695e; }
.sites-quantity { padding: 5px 9px; border: 1px solid #d6dbd3; border-radius: 5px; font-size: 11px; }
.sites-order-summary { display: flex; justify-content: space-between; font-size: 12px; padding: 25px 0; }
.sites-journey-section { background: var(--bg2); }
.sites-journey { display: grid; grid-template-columns: repeat(5, 1fr); list-style: none; gap: 28px; padding: 0; margin: 0; }
.sites-journey li { border-top: 1px solid var(--border2); padding-top: 24px; position: relative; }
.sites-journey li:not(:last-child)::after { content: '→'; position: absolute; top: 28px; right: 0; color: var(--dim); }
.sites-step { color: var(--accent); font-size: 12px; }
.sites-journey h3 { font: 500 15px var(--sans); letter-spacing: 0; margin: 24px 0 12px; }
.sites-journey p { font-size: 13px; }
.sites-page .sites-journey-note { font-size: 12px; margin: 35px 0 0; }
.sites-text-link { display: inline-block; color: var(--accent); font-size: 13px; text-decoration: none; padding-block: 14px; }
.sites-text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.sites-ecosystem { border: 1px solid var(--border2); border-radius: 18px; padding: 30px; background: var(--bg2); }
.sites-ecosystem-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sites-ecosystem-products > div { min-width: 0; padding: 14px 6px; background: var(--bg3); border: 1px solid var(--border2); border-radius: 9px; text-align: center; }
.sites-ecosystem-products > div > span { color: var(--accent); font-size: 23px; display: block; margin-bottom: 10px; }
.sites-ecosystem-products strong { display: block; font-size: 10px; font-weight: 500; }
.sites-ecosystem-products small { font-size: 8px; color: var(--muted); display: block; margin-top: 5px; }
.sites-ecosystem-products .sites-node-highlight { border-color: var(--accent); }
.sites-ecosystem-lines { display: flex; justify-content: space-around; height: 48px; border-bottom: 1px solid var(--border2); margin: 0 12%; position: relative; }
.sites-ecosystem-lines span { width: 1px; background: var(--border2); }
.sites-ecosystem-lines::after { content: ''; position: absolute; height: 30px; width: 1px; background: var(--accent); top: 100%; left: 50%; }
.sites-dashboard-node { margin-top: 30px; padding: 24px 14px; display: flex; align-items: center; gap: 14px; border: 1px solid var(--border2); border-radius: 10px; }
.sites-dashboard-mark { font: italic 34px var(--serif); color: var(--accent); }
.sites-dashboard-node strong { font-size: 14px; display: block; }
.sites-dashboard-node span { display: block; font-size: 10px; color: var(--muted); margin-top: 6px; }
.sites-dashboard-bottom { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px; color: var(--muted); font-size: 9px; }
.sites-brand-section { background: var(--bg2); }
.sites-brand-art { padding: 40px; border: 1px solid var(--border2); border-radius: 18px; background: var(--bg); }
.sites-brand-label { color: var(--dim); font-size: 9px; letter-spacing: .15em; }
.sites-brand-type { font: 110px/1.2 var(--serif); color: var(--accent); display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-block: 25px; }
.sites-brand-type > span { font: 13px/1.6 var(--sans); color: var(--muted); }
.sites-brand-swatches { display: flex; gap: 10px; }
.sites-brand-swatches span { height: 45px; flex: 1; border-radius: 5px; background: #c8a8ff; }
.sites-brand-swatches span:nth-child(2) { background: #ece3fa; }
.sites-brand-swatches span:nth-child(3) { background: #20352a; }
.sites-brand-swatches span:nth-child(4) { background: #a93421; }
.sites-brand-devices { display: flex; gap: 18px; margin-top: 36px; align-items: end; }
.sites-brand-devices > div { width: 75%; border: 1px solid var(--border2); border-radius: 8px; padding: 16px; color: var(--muted); font-size: 9px; }
.sites-brand-devices > div:last-child { width: 25%; }
.sites-brand-devices > div > div { height: 60px; margin-top: 12px; background: var(--bg3); border-left: 2px solid var(--accent); }
.sites-brand-devices > div:last-child > div { height: 90px; }
.sites-pricing { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; padding: 56px; border: 1px solid var(--border2); border-radius: 20px; }
.sites-pricing p { max-width: 570px; }
.sites-pricing-action { padding-left: 42px; border-left: 1px solid var(--border2); align-self: center; }
.sites-pricing-action h3 { font-size: 36px; line-height: 1.15; margin: 15px 0 26px; }
.sites-pricing-action p { margin-top: 16px; }
.sites-faq .sites-split { align-items: start; }
.sites-faq .faq-list { margin: 0; }
.sites-faq .faq-item { background: transparent; }
.sites-faq .faq-item summary { font-size: 15px; }
.sites-faq .faq-item p { font-size: 14px; }
.sites-final { text-align: center; background: var(--bg2); }
.sites-final p:not(.eyebrow) { max-width: 560px; margin: 0 auto 28px; }
.sites-home-promo { scroll-margin-top: 90px; display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 48px; padding: 40px; border: 1px solid var(--border2); border-radius: var(--radius-xl); background: var(--bg2); margin: 32px 0; overflow: hidden; }
.sites-home-copy { min-width: 0; }
.sites-home-eyebrow { display: flex; align-items: center; gap: 10px; color: var(--accent); font-size: 11px; font-weight: 600; letter-spacing: .13em; }
.sites-home-new { padding: 3px 7px; border: 1px solid var(--border2); border-radius: 4px; font-size: 9px; letter-spacing: .06em; }
.sites-home-promo h3 { font: 400 clamp(32px, 3.5vw, 48px)/1.08 var(--serif); letter-spacing: -.025em; margin: 16px 0 18px; }
.sites-home-promo h3 em { color: var(--accent); }
.sites-home-description { max-width: 460px; color: var(--muted); font-size: 14px; line-height: 1.65; margin-bottom: 22px; }
.sites-home-link { display: inline-flex; align-items: center; gap: 20px; text-decoration: none; font-size: 13px; min-height: 46px; padding: 13px 18px; border-radius: 9px; }
.sites-home-note { display: block; color: var(--muted); font-size: 10px; line-height: 1.6; margin-top: 14px; }
.sites-home-previews { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 16px; min-width: 0; padding: 10px 4px; }
.sites-home-window { min-width: 0; border: 1px solid var(--border2); border-radius: 9px; overflow: hidden; background: var(--bg); box-shadow: 0 16px 30px rgba(0,0,0,.12); transform: rotate(-3deg); }
.sites-home-window:nth-child(2) { transform: rotate(3deg); margin-top: 32px; }
.sites-home-window-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px; font-size: 8px; color: var(--muted); }
.sites-home-window-bar > span:first-child { color: var(--dim); font-size: 6px; letter-spacing: 2px; }
.sites-home-window img { display: block; width: 100%; height: auto; }
.sites-home-window-label { display: block; padding: 10px; color: var(--muted); font-size: 9px; }
.sites-home-preview-note { grid-column: 1 / -1; font-size: 10px; text-align: center; color: var(--muted); margin-top: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .sites-hero-copy, .sites-stage { animation: sites-arrive .7s ease both; }
  .sites-stage { animation-delay: .12s; }
  @keyframes sites-arrive { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
  .sites-cta { transition: transform .18s ease; }
  .sites-cta:hover { transform: translateY(-2px); }
}
@media (max-width: 1100px) {
  .sites-split { gap: 36px; }
  .sites-showcase { padding: 30px; gap: 30px; }
  .sites-ecosystem { padding: 20px; }
  .sites-pricing { gap: 32px; padding: 36px; }
  .sites-pricing-action { padding-left: 28px; }
}
@media (max-width: 760px) {
  .sites-wrap { width: calc(100% - 40px); }
  .sites-page { padding-top: 76px; }
  .sites-hero { padding: 40px 0 48px; }
  .sites-page h1 { font-size: clamp(42px, 9vw, 62px); }
  .sites-page .sites-lead { font-size: 16px; }
  .sites-page h2 { font-size: 37px; }
  .sites-stage { gap: 14px; margin-top: 42px; }
  .sites-browser-salon, .sites-browser-food { transform: none; }
  .sites-browser-food { margin-top: 25px; }
  .sites-browser-bar { padding: 10px; font-size: 8px; }
  .sites-browser-dots, .sites-browser-bar > span:last-child { display: none; }
  .sites-browser figcaption { font-size: 8px; padding: 10px; }
  .sites-connected { font-size: 10px; gap: 6px; }
  .sites-section { padding: 64px 0; }
  .sites-split, .sites-showcase, .sites-pricing { grid-template-columns: 1fr; gap: 32px; }
  .sites-value-copy { padding-left: 0; border-left: 0; }
  .sites-showcase { padding: 26px; }
  .sites-showcase-food .sites-showcase-copy { grid-row: 1; }
  .sites-showcase h3 { font-size: 35px; }
  .sites-booking-demo, .sites-order-demo { padding: 24px; }
  .sites-journey { grid-template-columns: 1fr; gap: 0; }
  .sites-journey li { padding: 22px 0 22px 48px; }
  .sites-step { position: absolute; left: 0; top: 25px; }
  .sites-journey h3 { margin: 0 0 8px; }
  .sites-journey p { margin: 0; }
  .sites-journey li:not(:last-child)::after { content: none; }
  .sites-brand-section .sites-brand-art { grid-row: 2; }
  .sites-brand-art { padding: 28px; }
  .sites-pricing { padding: 30px; }
  .sites-pricing-action { border-left: 0; border-top: 1px solid var(--border2); padding: 30px 0 0; }
  .sites-home-promo { grid-template-columns: 1fr; padding: 28px; gap: 26px; }
  .sites-home-promo h3 { font-size: 37px; }
  .sites-home-description { max-width: 100%; }
  .sites-home-previews { max-width: 540px; width: 100%; margin-inline: auto; }
  .sites-home-window-bar { font-size: 7px; padding: 8px; }
  .sites-home-window-bar > span:first-child { display: none; }
  .sites-home-window-label { font-size: 8px; padding: 8px; }
  .sites-home-preview-note { font-size: 9px; }
}
@media (max-width: 420px) {
  .sites-page h1 { font-size: 43px; }
  .sites-page h2 { font-size: 34px; }
  .sites-stage { grid-template-columns: 1fr; gap: 16px; }
  .sites-browser-food { margin-top: 0; }
  .sites-connected { font-size: 10px; text-align: center; }
  .sites-browser-bar { font-size: 10px; }
  .sites-showcase { padding: 20px; }
  .sites-demo-head { padding: 12px; }
  .sites-booking-demo, .sites-order-demo { padding: 20px; }
  .sites-ecosystem { padding: 18px; }
  .sites-ecosystem-products { grid-template-columns: 1fr 1fr; }
  .sites-ecosystem-products strong { font-size: 12px; }
  .sites-ecosystem-products small { font-size: 10px; }
  .sites-ecosystem-lines { margin-inline: 18%; height: 32px; }
  .sites-pricing { padding: 24px; }
  .sites-cta { gap: 12px; font-size: 13px; padding-inline: 16px; }
}