/* AI Franchise portal sneak peek widget. Pairs with peek.js. */
.afpk, .afpk-overlay {
  --afpk-paper: #f6f3ec;
  --afpk-ink: #0b0b0c;
  --afpk-gold: #c9a44c;
  --afpk-gold2: #e6c76f;
  --afpk-gold-d: #9c7a2b;
  --afpk-line: #e6dfcf;
  --afpk-muted: #6b6558;
  --afpk-font: "Gilroy", "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-family: var(--afpk-font);
  -webkit-font-smoothing: antialiased;
}
.afpk { position: relative; width: 100%; max-width: 1180px; margin: 0 auto; padding: 6px 0 0; box-sizing: border-box; text-align: center; }
.afpk, .afpk-overlay { background: none; color: var(--afpk-ink); }
.afpk *, .afpk-overlay * { box-sizing: border-box; letter-spacing: normal; text-transform: none; }

/* ---------------- Laptop ---------------- */
.afpk-mac { position: relative; width: 100%; }
.afpk-lid {
  position: relative; width: 86%; margin: 0 auto;
  padding: 1.25% 1.25% 0;
  border-radius: 24px 24px 10px 10px;
  background: #0d0d0e;
  box-shadow: inset 0 0 0 1px #2b2b2e, 0 0 0 2px #c9ccd3, 0 0 0 3px #e9eaee, 0 50px 90px -45px rgba(11,11,12,.55);
}
.afpk-screen {
  position: relative; overflow: hidden; aspect-ratio: 16 / 10;
  border-radius: 10px 10px 2px 2px; background: #f4f1ea;
  display: flex; flex-direction: column; cursor: default;
}
.afpk-ibar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  height: clamp(28px, 3.1vw, 38px); padding: 0 10px;
  background: linear-gradient(180deg, #faf8f3, #efebe1); border-bottom: 1px solid var(--afpk-line);
}
.afpk-dots { display: inline-flex; gap: 6px; margin-right: 2px; }
.afpk-dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.18); }
.afpk-dots i:nth-child(2) { background: #febc2e; } .afpk-dots i:nth-child(3) { background: #28c840; }
.afpk-ibtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 24px; min-width: 26px; padding: 0 7px;
  border: 1px solid var(--afpk-line); border-radius: 7px; background: #fff; color: var(--afpk-ink);
  font: 600 12px/1 var(--afpk-font); cursor: pointer;
}
.afpk-ibtn[disabled] { opacity: .35; cursor: default; }
.afpk-ibtn:hover:not([disabled]) { border-color: var(--afpk-gold); }
.afpk-ifull { background: var(--afpk-ink); color: #fff; border-color: var(--afpk-ink); padding: 0 10px; }
.afpk-ifull:hover:not([disabled]) { background: #222; border-color: var(--afpk-gold); color: var(--afpk-gold2); }
.afpk-url {
  flex: 1 1 auto; min-width: 0; height: 24px; display: flex; align-items: center; justify-content: center; gap: 6px;
  max-width: 460px; margin: 0 auto; padding: 0 12px; border-radius: 7px; background: #fff; border: 1px solid var(--afpk-line);
  color: var(--afpk-muted); font: 500 12px/1 var(--afpk-font); white-space: nowrap; overflow: hidden;
}
.afpk-url svg { color: #9a937f; flex: 0 0 auto; }
.afpk-url span { overflow: hidden; text-overflow: ellipsis; }
.afpk-ibody { position: relative; flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; background: #f4f1ea; scrollbar-width: thin; scrollbar-color: rgba(11,11,12,.25) transparent; }
.afpk-ibody::-webkit-scrollbar { width: 6px; } .afpk-ibody::-webkit-scrollbar-thumb { background: rgba(11,11,12,.22); border-radius: 6px; }
.afpk-glare { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 30%); }
.afpk-chin { height: clamp(10px, 2vw, 22px); }
.afpk-base {
  position: relative; width: 100%; height: clamp(10px, 1.6vw, 18px); margin-top: -1px;
  border-radius: 2px 2px 18px 18px / 2px 2px 100% 100%;
  background: linear-gradient(180deg, #ecedf1 0%, #d7dae1 45%, #b8bcc6 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(90,98,115,.25);
}
.afpk-groove { position: absolute; left: 50%; top: 0; width: 14%; height: 45%; transform: translateX(-50%); border-radius: 0 0 10px 10px; background: linear-gradient(180deg, #c3c8d1, #d9dce3); box-shadow: inset 0 1px 2px rgba(60,66,80,.25); }
.afpk-floor { position: absolute; left: 6%; right: 6%; bottom: -26px; height: 34px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(11,11,12,.26) 0%, rgba(11,11,12,.08) 45%, rgba(11,11,12,0) 72%); filter: blur(4px); pointer-events: none; z-index: -1; }

/* shared stage */
.afpk-stage { position: relative; width: 100%; transition: opacity .16s ease; }
.afpk-stage.afpk-fade { opacity: .0; }
.afpk-img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; image-rendering: auto; }
.afpk-layer { position: absolute; inset: 0; }
.afpk-hs {
  position: absolute; display: block; margin: 0; padding: 0; border: 0; border-radius: 8px;
  background: transparent; cursor: pointer; -webkit-tap-highlight-color: rgba(201,164,76,.25);
  transition: background .15s, box-shadow .15s;
}
.afpk-hs:hover, .afpk-hs:focus-visible { background: rgba(201,164,76,.12); box-shadow: 0 0 0 2px rgba(201,164,76,.95); outline: none; }
.afpk-flash .afpk-hs { animation: afpk-flash 1.3s ease .25s 1; }
@keyframes afpk-flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(201,164,76,0); background: transparent; } 35% { box-shadow: 0 0 0 2px rgba(201,164,76,.7); background: rgba(201,164,76,.09); } }

/* "click around" pill over the laptop screen */
.afpk-pill {
  position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); z-index: 4;
  display: inline-flex; align-items: center; gap: 9px; border: 0; cursor: pointer;
  padding: 13px 22px 13px 16px; border-radius: 999px;
  background: linear-gradient(180deg, #e3c26a, #c9a44c 55%, #b48f3a); color: #0b0b0c;
  font: 700 clamp(13px, 1.4vw, 16px)/1 var(--afpk-font); letter-spacing: -.005em; white-space: nowrap;
  box-shadow: 0 14px 34px -10px rgba(120,90,20,.7), inset 0 1px 0 rgba(255,255,255,.45);
  transition: opacity .35s, transform .35s;
}
.afpk-pill::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; animation: afpk-ping 2s cubic-bezier(.2,.7,.2,1) infinite; }
.afpk-pdot { width: 8px; height: 8px; border-radius: 50%; background: #0b0b0c; animation: afpk-dot 1.6s ease-out infinite; }
.afpk-pill:hover { transform: translateX(-50%) scale(1.04); }
.afpk-live .afpk-pill { opacity: 0; transform: translateX(-50%) translateY(14px); pointer-events: none; }
@keyframes afpk-ping { 0% { box-shadow: 0 0 0 0 rgba(201,164,76,.55); } 80%, 100% { box-shadow: 0 0 0 22px rgba(201,164,76,0); } }
@keyframes afpk-dot { 0% { box-shadow: 0 0 0 0 rgba(11,11,12,.55); } 100% { box-shadow: 0 0 0 8px rgba(11,11,12,0); } }

/* tour cursor */
.afpk-cursor { position: absolute; left: 0; top: 0; z-index: 3; width: 26px; height: 26px; margin: -3px 0 0 -5px; pointer-events: none; opacity: 0;
  transform: translate(60%, 60%); transition: transform .85s cubic-bezier(.45,.05,.25,1), opacity .3s; filter: drop-shadow(0 3px 6px rgba(0,0,0,.3)); }
.afpk-cursor.afpk-on { opacity: 1; }
.afpk-cursor svg { position: relative; z-index: 2; display: block; }
.afpk-ripple { position: absolute; left: 5px; top: 3px; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(201,164,76,.55); transform: scale(0); opacity: 0; }
.afpk-click .afpk-ripple { animation: afpk-rip .55s ease-out 1; }
@keyframes afpk-rip { 0% { transform: scale(.2); opacity: .9; } 100% { transform: scale(1.4); opacity: 0; } }

/* chips + open button */
.afpk-chips { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 44px auto 0; max-width: 980px; }
.afpk-chips-lbl { width: 100%; margin-bottom: 4px; font: 700 11px/1 var(--afpk-font); letter-spacing: .16em; text-transform: uppercase; color: var(--afpk-gold-d); }
.afpk-chip {
  border: 1px solid var(--afpk-line); background: #fff; color: var(--afpk-ink); border-radius: 999px;
  padding: 10px 16px; font: 600 14px/1 var(--afpk-font); cursor: pointer; transition: border-color .15s, background .15s, color .15s, transform .15s;
}
.afpk-chip:hover { border-color: var(--afpk-gold); transform: translateY(-1px); }
.afpk-chip.on { background: var(--afpk-ink); color: var(--afpk-gold2); border-color: var(--afpk-ink); }
.afpk-open {
  display: inline-flex; align-items: center; gap: 9px; margin: 18px auto 0; padding: 13px 22px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--afpk-ink); background: var(--afpk-ink); color: #fff; font: 700 15px/1 var(--afpk-font); transition: color .15s, transform .15s;
}
.afpk-open:hover { color: var(--afpk-gold2); transform: translateY(-1px); }
.afpk-note { margin: 12px auto 0; font-size: 13px; line-height: 1.45; color: var(--afpk-muted); max-width: 560px; }

/* ---------------- Full screen window ---------------- */
html.afpk-lock, html.afpk-lock body { overflow: hidden !important; }
.afpk-overlay {
  position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center;
  padding: 2.5vh 2.5vw; background: rgba(11,11,12,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .2s ease; text-align: left;
}
.afpk-overlay, .afpk-win, .afpk-bar, .afpk-body, .afpk-menu { margin: 0 !important; }
.afpk-overlay { border: 0 !important; }
.afpk-overlay[hidden] { display: none; }
.afpk-overlay.afpk-open { opacity: 1; }
.afpk-win {
  position: relative; display: flex; flex-direction: column; width: min(1440px, 100%); height: 100%; max-height: 95vh;
  background: #fff; color: var(--afpk-ink); border-radius: 14px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(201,164,76,.35), 0 50px 120px -30px rgba(0,0,0,.65);
  transform: translateY(10px) scale(.985); transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.afpk-open .afpk-win { transform: none; }
.afpk-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 10px 0 14px; background: linear-gradient(180deg, #fbf9f4, #f0ece2); border-bottom: 1px solid var(--afpk-line); }
.afpk-lights { display: flex; gap: 8px; margin-right: 4px; }
.afpk-l { width: 12px; height: 12px; border-radius: 50%; border: 0; padding: 0; display: block; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.18); }
.afpk-l-r { background: #ff5f57; cursor: pointer; } .afpk-l-y { background: #febc2e; } .afpk-l-g { background: #28c840; }
.afpk-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--afpk-line); border-radius: 8px;
  background: #fff; color: var(--afpk-ink); font: 600 13px/1 var(--afpk-font); cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.afpk-btn:hover:not([disabled]) { border-color: var(--afpk-gold); }
.afpk-btn:focus-visible { outline: 2px solid var(--afpk-gold); outline-offset: 2px; }
.afpk-btn[disabled] { opacity: .4; cursor: default; }
.afpk-close { width: 32px; padding: 0; justify-content: center; }
.afpk-win .afpk-btn.afpk-zoom[aria-pressed="true"] { background: var(--afpk-ink); border-color: var(--afpk-ink); color: var(--afpk-gold2); }
.afpk-crumb { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; font-size: 13px; color: var(--afpk-muted); }
.afpk-crumb span { overflow: hidden; text-overflow: ellipsis; }
.afpk-c0 { font-weight: 650; color: var(--afpk-ink); flex: 0 0 auto; }
.afpk-sep { color: #c5bda9; flex: 0 0 auto; }
.afpk-c { flex: 0 1 auto; }
.afpk-cur { font-weight: 700; color: var(--afpk-gold-d); flex: 0 1 auto; }
.afpk-menu {
  position: absolute; top: 54px; right: 10px; z-index: 5; width: min(600px, calc(100% - 20px)); max-height: calc(100% - 66px); overflow: auto;
  padding: 10px 12px; display: block; column-count: 2; column-gap: 18px; background: #fff; border: 1px solid var(--afpk-line); border-radius: 12px;
  box-shadow: 0 24px 60px -20px rgba(11,11,12,.35);
}
.afpk-menu[hidden] { display: none; }
.afpk-mgroup { display: flex; flex-direction: column; padding: 4px 0 8px; break-inside: avoid; }
.afpk-mhead { font: 700 10.5px/1 var(--afpk-font); letter-spacing: .1em; text-transform: uppercase; color: var(--afpk-gold-d); padding: 6px 8px; }
.afpk-mitem { text-align: left; border: 0; background: none; font: 500 13px/1.25 var(--afpk-font); color: var(--afpk-ink); padding: 7px 8px; border-radius: 7px; cursor: pointer; }
.afpk-mitem:hover { background: var(--afpk-paper); }
.afpk-mitem.on { background: rgba(201,164,76,.14); color: var(--afpk-gold-d); font-weight: 700; }
.afpk-body { position: relative; flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; background: var(--afpk-paper); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.afpk-zoomed .afpk-body { overflow-x: auto; }
.afpk-zoomed .afpk-stage { width: 200%; }
.afpk-hint { flex: 0 0 auto; padding: 9px 16px; font-size: 12.5px; line-height: 1.35; color: var(--afpk-muted); background: #fff; border-top: 1px solid var(--afpk-line); text-align: center; }
.afpk-hint b { color: var(--afpk-ink); font-weight: 650; }

/* ---------------- Phones ---------------- */
@media (max-width: 760px) {
  .afpk-lid { width: 94%; border-radius: 12px 12px 6px 6px; padding: 1.8% 1.8% 0; }
  .afpk-screen { border-radius: 6px 6px 2px 2px; cursor: pointer; }
  .afpk-ibar { height: 20px; gap: 5px; padding: 0 6px; }
  .afpk-dots i { width: 6px; height: 6px; } .afpk-dots { gap: 3px; }
  .afpk-ibtn, .afpk-ifull span { display: none; }
  .afpk-url { height: 14px; font-size: 8px; padding: 0 6px; } .afpk-url svg { display: none; }
  .afpk-ibody { overflow: hidden; }
  .afpk-hs { pointer-events: none; }
  .afpk-pill { bottom: 50%; transform: translate(-50%, 50%); padding: 10px 15px 10px 12px; gap: 7px; font-size: 13px; }
  .afpk-pill svg { display: none; }
  .afpk-pill:hover { transform: translate(-50%, 50%); }
  .afpk-live .afpk-pill { opacity: 1; transform: translate(-50%, 50%); pointer-events: auto; }
  .afpk-chips { margin-top: 34px; gap: 6px; }
  .afpk-chip { padding: 9px 12px; font-size: 13px; }
  .afpk-open { width: 100%; justify-content: center; }
  .afpk-overlay { padding: 0; }
  .afpk-win { width: 100%; height: 100%; max-height: none; border-radius: 0; }
  .afpk-bar { height: 52px; gap: 8px; padding: 0 8px 0 10px; }
  .afpk-lights { display: none; }
  .afpk-back span, .afpk-menubtn span { display: none; }
  .afpk-back, .afpk-menubtn { width: 36px; height: 36px; padding: 0; justify-content: center; }
  .afpk-close { width: 36px; height: 36px; }
  .afpk-zoom { height: 36px; }
  .afpk-crumb .afpk-c, .afpk-crumb .afpk-sep, .afpk-c0 { display: none; }
  .afpk-cur { font-size: 14px; }
  .afpk-menu { column-count: 1; top: 58px; right: 8px; width: calc(100% - 16px); }
  .afpk-hs { border-radius: 3px; }
  .afpk-hint { font-size: 11.5px; padding: 8px 12px; }
  .afpk-zoomed .afpk-stage { width: 260%; }
}
@media (max-width: 760px) { .afpk-overlay .afpk-hs { pointer-events: auto; } }
@media (prefers-reduced-motion: reduce) {
  .afpk-pill::before, .afpk-pdot, .afpk-flash .afpk-hs, .afpk-click .afpk-ripple { animation: none; }
  .afpk-cursor, .afpk-stage, .afpk-win, .afpk-overlay, .afpk-pill { transition: none; }
}