/* Shared visual settings for the two interactive homepage previews. */
.web-builder-stage { --builder-accent:#5147e5; --builder-surface:#f5f3ff; --builder-tint:#e6e1ff; --builder-font:Arial,Helvetica,sans-serif; }
.builder-panel header { align-items:center; gap:8px; margin-bottom:25px; }
.builder-panel header span { color:var(--muted); }
.builder-control-group { min-width:0; margin:0; padding:0; border:0; }
.builder-control-group + .builder-control-group { margin-top:21px; }
.builder-control-group legend { padding:0; margin-bottom:10px; color:var(--muted); font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; }
.builder-color-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.builder-color-options button { display:block; height:42px; min-width:0; padding:0; border:1px solid var(--line); border-radius:8px; background:linear-gradient(135deg,var(--palette-accent) 50%,var(--palette-surface) 50%); cursor:pointer; transition:transform .2s,box-shadow .2s; }
.builder-color-options button.active { outline:2px solid var(--primary); outline-offset:2px; box-shadow:0 5px 12px #10142614; }
.builder-color-options button:hover { transform:translateY(-1px); }
.builder-font-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.builder-font-options button { display:flex; align-items:center; justify-content:center; gap:7px; min-width:0; min-height:42px; padding:8px 4px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); cursor:pointer; }
.builder-font-options button > span:first-child { font-size:19px; line-height:1; }
.builder-font-options button > span:last-child { font-size:9px; }
.builder-font-options button.active { border-color:var(--primary); box-shadow:0 0 0 1px var(--primary); color:var(--primary); background:#f5f3ff; }
.builder-panel :is(.builder-color-options,.builder-font-options,.background-options) > button:focus-visible { outline:3px solid var(--primary); outline-offset:4px; }
.builder-tryout { margin-top:23px; }
.builder-view-switch, .builder-setting-switch, .builder-mobile-hint { display:none; }
/* Keep this demo readable if its enhancement script is unavailable. */
.online-section:not(:has(.builder-ready)) > .reveal { opacity:1; transform:none; }
.web-builder-stage :is(.site-preview,.phone-preview) { font-family:var(--builder-font); }
.web-builder-stage .site-preview-media { background:var(--builder-accent); }
.web-builder-stage .site-preview-media::after { background:linear-gradient(90deg,color-mix(in srgb,var(--builder-accent) 35%,#101020) 0%,color-mix(in srgb,var(--builder-accent) 46%,#101020cc) 43%,color-mix(in srgb,var(--builder-accent) 24%,transparent) 100%),linear-gradient(180deg,#10121d24,#10121d60); }
.web-builder-stage .site-preview main small { color:var(--builder-tint); }
/* Match the backing to the bezel: rounded clipping must never reveal a light seam. */
.web-builder-stage .phone-preview { background:#141522; }
.web-builder-stage .phone-booking-progress,
.web-builder-stage .phone-booking-body,
.web-builder-stage .phone-booking-footer { background:var(--builder-surface); }
.web-builder-stage .phone-booking-progress,
.web-builder-stage .phone-booking-footer,
.web-builder-stage .phone-services article { border-color:var(--builder-tint); }
.web-builder-stage .phone-services article > i { background:var(--builder-tint); }
.web-builder-stage .phone-booking-progress li.active b { box-shadow:0 0 0 3px var(--builder-tint); }
.web-builder-stage .phone-booking-body h4 { font-family:inherit; }
@media (max-width:760px) {
  .home-page .online-section > .section-heading { width:calc(100% - 48px); max-width:520px; text-align:left; }
  .home-page .online-section .section-heading h2 { font-size:clamp(34px,9vw,48px); line-height:1.08; letter-spacing:-.05em; text-wrap:balance; }
  .online-section .section-heading h2 br { display:none; }
  .home-page .online-section .section-heading > p:last-child { margin-top:20px; font-size:16px; line-height:1.65; }
  .home-page .online-section > .web-builder-stage { display:grid; grid-template-columns:minmax(0,1fr); gap:20px; width:calc(100% - 32px); max-width:520px; min-height:0; margin:32px auto 0; padding:12px; border:1px solid #e9e2d7; border-radius:24px; background:#f1ede7; }
  .web-builder-stage .builder-panel { position:relative; inset:auto; order:3; width:100%; padding:20px; box-shadow:none; }
  .web-builder-stage .builder-panel header { font-size:13px; }
  .web-builder-stage .builder-panel header span { font-size:10px; }
  .web-builder-stage .builder-control-group legend { font-size:10px; }
  .web-builder-stage .builder-color-options button { height:44px; }
  .web-builder-stage .builder-font-options button { min-height:46px; }
  .web-builder-stage .builder-font-options button > span:last-child { font-size:11px; }
  .web-builder-stage .background-options > button { aspect-ratio:1.5; }
  .web-builder-stage .builder-tryout b { font-size:12px; }
  .web-builder-stage .builder-tryout small { font-size:11px; line-height:1.6; }
  .web-builder-stage .site-preview { order:1; display:flex; min-height:450px; flex-direction:column; border-radius:16px; box-shadow:none; }
  .web-builder-stage .site-preview nav { flex-shrink:0; gap:12px; padding:22px 18px; }
  .web-builder-stage .site-preview nav > span { display:none; }
  .web-builder-stage .site-preview nav b { font-size:16px; }
  .web-builder-stage .site-preview nav i { padding:9px; font-size:9px; }
  .web-builder-stage .site-preview main { display:flex; flex:1; flex-direction:column; justify-content:center; padding:28px 22px 38px; }
  .web-builder-stage .site-preview main small { font-size:8px; }
  .web-builder-stage .site-preview main h3 { margin:16px 0; font-size:clamp(30px,9vw,46px); line-height:1.08; letter-spacing:-.055em; }
  .web-builder-stage .site-preview main p { max-width:310px; margin:0; font-size:13px; }
  .web-builder-stage .site-preview main button { align-self:flex-start; min-height:44px; margin-top:22px; font-size:12px; }
  .web-builder-stage .phone-preview { position:relative; inset:auto; order:2; display:flex; justify-self:center; width:252px; height:450px; transform:none; box-shadow:0 12px 24px #29213714; }
  .web-builder-stage .phone-booking-header b { font-size:13px; }
  .web-builder-stage .phone-booking-header small { font-size:8px; }
  .web-builder-stage .phone-booking-progress small { font-size:6px; }
  .web-builder-stage .phone-booking-body h4 { font-size:17px; }
  .web-builder-stage .phone-booking-body > p { font-size:8px; }
  .web-builder-stage .phone-services article span b { font-size:9px; }
  .web-builder-stage .phone-services article span small { font-size:7px; }
  .web-builder-stage .phone-services article strong { font-size:10px; }
  .web-builder-stage .phone-booking-footer > small { font-size:6px; }
  .web-builder-stage .phone-booking-footer button { min-height:36px; font-size:10px; }

  /* Without JavaScript both previews and every choice remain available. */
  .home-page .online-section > .builder-ready { gap:0; padding:0; overflow:hidden; }
  .builder-ready .builder-view-switch { order:0; display:flex; gap:4px; margin:12px; padding:4px; border:1px solid #e9e2d7; border-radius:13px; background:#e8e3dc; }
  .builder-view-switch button { display:flex; flex:1; align-items:center; justify-content:center; gap:8px; min-width:0; min-height:44px; padding:9px 6px; border:0; border-radius:9px; color:#65616e; background:transparent; font:inherit; font-size:12px; font-weight:700; cursor:pointer; }
  .builder-view-switch svg { width:17px; height:17px; flex-shrink:0; }
  .builder-view-switch button[aria-pressed="true"] { color:var(--ink); background:#fff; box-shadow:0 2px 6px #2921370a; }
  .builder-ready .site-preview { margin:0 12px 16px; }
  .builder-ready .phone-preview { margin-bottom:16px; }
  .builder-ready[data-builder-view="booking"] .site-preview,
  .builder-ready[data-builder-view="website"] .phone-preview { display:none; }
  .builder-ready .builder-panel { padding:0 16px 18px; border-top:1px solid #e9e2d7; border-radius:0; }
  .builder-ready .builder-panel header, .builder-ready .builder-tryout { display:none; }
  .builder-ready .builder-setting-switch { display:flex; gap:18px; margin-bottom:16px; border-bottom:1px solid #ececf3; }
  .builder-setting-switch button { position:relative; flex:1; min-width:0; min-height:50px; padding:13px 0; border:0; color:#747080; background:transparent; font:inherit; font-size:12px; font-weight:700; cursor:pointer; }
  .builder-setting-switch button[aria-pressed="true"] { color:var(--primary); }
  .builder-setting-switch button[aria-pressed="true"]::after { position:absolute; right:0; bottom:-1px; left:0; height:2px; border-radius:2px; background:var(--primary); content:""; }
  .builder-ready .builder-control-group { min-height:70px; margin:0; }
  .builder-ready .builder-control-group legend { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .builder-ready[data-builder-setting="colors"] [data-builder-group]:not([data-builder-group="colors"]),
  .builder-ready[data-builder-setting="photos"] [data-builder-group]:not([data-builder-group="photos"]),
  .builder-ready[data-builder-setting="fonts"] [data-builder-group]:not([data-builder-group="fonts"]) { display:none; }
  .builder-ready .builder-color-options { grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; padding:4px 2px; }
  .builder-ready .builder-color-options button { height:48px; border-radius:9px; box-shadow:none; }
  .builder-ready .background-options { gap:10px; padding:3px 0; }
  .builder-ready .background-options > button { height:60px; aspect-ratio:auto; border-radius:9px; opacity:.72; transform:none; }
  .builder-ready .background-options > button.active { opacity:1; box-shadow:0 0 0 2px #5147e529; }
  .builder-ready .builder-font-options { grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; padding:3px 1px; }
  .builder-ready .builder-font-options button { flex-direction:column; gap:6px; min-height:60px; padding:8px 2px; }
  .builder-ready .builder-font-options button > span:first-child { font-size:22px; }
  .builder-ready .builder-font-options button > span:last-child { font-size:10px; }
  .builder-ready .builder-mobile-hint { display:block; margin:8px 0 0; color:#797483; font-size:11px; line-height:1.5; text-align:center; }
  .builder-view-switch button:focus-visible, .builder-setting-switch button:focus-visible { outline:3px solid var(--primary); outline-offset:-3px; }
}
@media (prefers-reduced-motion:reduce) {
  .web-builder-stage *, .web-builder-stage *::before, .web-builder-stage *::after { animation:none!important; transition:none!important; }
}

@media (max-width:760px) {
  .home-page #website-builder { display:none; }
}