html,body { overflow-x:clip; }
/* ================= Apricus Brochure ================= */
  .apx-brochure {
    --apx-orange:#f7941d;
    width:100vw; position:relative; left:50%; margin-left:-50vw;  /* break out of theme .container */
    margin-top: clamp(20px, 4vw, 36px);
    padding: 16px 0 20px; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
  }
  .apx-stage {
    position:relative;
    /* as big as possible: fits width AND viewport height, keeps 11x8.5 shape */
    width:min(96vw, calc((100vh - 160px) * 1.2941), 1800px);
    aspect-ratio: 792 / 612;
  }
  .apx-book { width:100%; height:100%; }
  .apx-book, .apx-book.stf__parent { min-width:0 !important; min-height:0 !important; }
  .apx-page { background:#fff; }
  .apx-page img { width:100%; height:100%; display:block; object-fit:contain; user-select:none; -webkit-user-drag:none; }
  .apx-stage { filter: drop-shadow(0 8px 24px rgba(0,0,0,.18)); }

  .apx-stage { container-type:inline-size; }
  .apx-arrow {
    position:absolute; top:50%; transform:translateY(-50%); z-index:5;
    /* sized relative to the page so it always fits inside the page's blank margin */
    width:clamp(34px, 4.2cqw, 60px); height:clamp(34px, 4.2cqw, 60px); border-radius:50%;
    border:0; padding:0; cursor:pointer;
    background:rgba(56,64,74,.7); color:#fff; outline:2px solid rgba(255,255,255,.9); outline-offset:-2px;
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    box-shadow:0 3px 10px rgba(0,0,0,.25);
    display:flex; align-items:center; justify-content:center;
    transition:transform .15s, opacity .2s, background .2s;
  }
  .apx-arrow svg { width:45%; height:45%; }
  /* Hover and active/clicked state matches the exact same 70% transparency with blur */
  .apx-arrow:hover, .apx-arrow:active, .apx-arrow:focus {
    background:rgba(247,148,29,.7);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    transform:translateY(-50%) scale(1.08);
  }
  .apx-arrow:focus-visible { outline:3px solid #56606b; outline-offset:3px; }
  .apx-prev { left:max(4px, .5cqw); }
  .apx-next { right:max(4px, .5cqw); }
  .apx-arrow[disabled] { opacity:0; pointer-events:none; }

  /* Green pulse on the next arrow until first use, so people know it's clickable */
  .apx-next.apx-hint { animation:apxPulse 1.8s ease-in-out infinite; }
  @keyframes apxPulse {
    0%,100% { box-shadow:0 0 0 0 rgba(34,197,94,.75), 0 3px 10px rgba(0,0,0,.25); }
    50%     { box-shadow:0 0 0 16px rgba(34,197,94,0), 0 3px 10px rgba(0,0,0,.25); }
  }

  /* "Learn More" label beside the first arrow */
  .apx-learn {
    position:absolute; top:50%; transform:translateY(-50%); z-index:5;
    right:calc(max(4px, .5cqw) + clamp(34px, 4.2cqw, 60px) + 10px);
    display:flex; align-items:center; gap:6px;
    padding:clamp(7px, .8cqw, 11px) clamp(12px, 1.4cqw, 20px);
    border:0; border-radius:999px; cursor:pointer;
    background:rgba(56,64,74,.85); color:#fff;
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    font:600 clamp(12px, 1.15cqw, 16px)/1 "Segoe UI", Arial, sans-serif; letter-spacing:.6px; text-transform:uppercase;
    box-shadow:0 3px 10px rgba(0,0,0,.25);
    transition:opacity .4s, transform .4s, background .2s;
  }
  .apx-learn:hover, .apx-learn:active { background:rgba(247,148,29,.85); }
  .apx-learn .apx-short { display:none; }
  .apx-learn.apx-gone { opacity:0; visibility:hidden; transform:translate(10px,-50%); pointer-events:none; transition:opacity .4s, transform .4s, visibility 0s .4s; }

  /* Return to first page button (shown on last page) */
  .apx-restart {
    position:absolute; top:50%; transform:translateY(-50%); z-index:5;
    right:max(4px, .5cqw);
    width:clamp(34px, 4.2cqw, 60px); height:clamp(34px, 4.2cqw, 60px); border-radius:50%;
    border:0; padding:0; cursor:pointer;
    background:rgba(56,64,74,.7); color:#fff; outline:2px solid rgba(255,255,255,.9); outline-offset:-2px;
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    box-shadow:0 3px 10px rgba(0,0,0,.25);
    display:none; align-items:center; justify-content:center;
    transition:transform .15s, opacity .2s, background .2s;
    animation:apxRestartPulse 2s ease-in-out infinite;
  }
  .apx-restart svg { width:52%; height:52%; }
  .apx-restart:hover, .apx-restart:active, .apx-restart:focus {
    background:rgba(247,148,29,.7);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    transform:translateY(-50%) scale(1.08);
  }
  @keyframes apxRestartPulse {
    0%,100% { box-shadow:0 0 0 0 rgba(247,148,29,.75), 0 3px 10px rgba(0,0,0,.25); }
    50%     { box-shadow:0 0 0 16px rgba(247,148,29,0), 0 3px 10px rgba(0,0,0,.25); }
  }
  .apx-restart-label {
    position:absolute; top:50%; transform:translateY(-50%); z-index:5;
    right:calc(max(4px, .5cqw) + clamp(34px, 4.2cqw, 60px) + 10px);
    display:none; align-items:center; gap:6px;
    padding:clamp(7px, .8cqw, 11px) clamp(12px, 1.4cqw, 20px);
    border:0; border-radius:999px; cursor:pointer;
    background:rgba(56,64,74,.85); color:#fff;
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    font:600 clamp(12px, 1.15cqw, 16px)/1 "Segoe UI", Arial, sans-serif; letter-spacing:.6px; text-transform:uppercase;
    box-shadow:0 3px 10px rgba(0,0,0,.25);
    transition:opacity .3s, transform .3s, background .2s;
  }
  .apx-restart-label:hover, .apx-restart-label:active { background:rgba(247,148,29,.85); }
  .apx-restart-label .apx-short { display:none; }

  /* Zoom button + overlay */
  .apx-zoom { display:none; position:absolute; top:8px; right:8px; z-index:6; width:34px; height:34px; border-radius:8px; border:0; padding:0;
    background:rgba(56,64,74,.8); color:#fff; align-items:center; justify-content:center; cursor:pointer;
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
  .apx-zoom svg { width:18px; height:18px; }
  .apx-overlay {
    position:fixed; inset:0; z-index:2147483647 !important;
    background:rgba(18,22,26,.97);
    overflow:auto; display:none; -webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y pinch-zoom;
  }
  .apx-overlay.open { display:block; }
  .apx-overlay img { display:block; width:230vw; max-width:none; height:auto; margin:auto; }

  /* Zoom Close button: TOP-LEFT, clearly away from mobile hamburger menu on top-right */
  .apx-overlay-close {
    position:fixed; top:16px; left:16px; z-index:2147483647;
    display:flex; align-items:center; gap:8px;
    padding:10px 18px; border-radius:999px; border:0;
    background:#ffffff; color:#1e242b; font:700 14px/1 "Segoe UI", Arial, sans-serif;
    cursor:pointer; box-shadow:0 4px 16px rgba(0,0,0,.5);
    transition:transform .15s, background .2s, color .2s;
  }
  .apx-overlay-close svg { width:14px; height:14px; stroke-width:3; }
  .apx-overlay-close:hover, .apx-overlay-close:active { background:var(--apx-orange); color:#fff; transform:scale(1.04); }

  /* Option A: In-zoom Next / Prev navigation arrows */
  .apx-overlay-nav {
    position:fixed; top:50%; transform:translateY(-50%); z-index:2147483647;
    width:46px; height:46px; border-radius:50%; border:0; padding:0;
    background:rgba(30,36,43,.75); color:#fff;
    outline:2px solid rgba(255,255,255,.9); outline-offset:-2px;
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    box-shadow:0 4px 16px rgba(0,0,0,.5);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition:background .2s, transform .15s, opacity .2s;
  }
  .apx-overlay-nav svg { width:45%; height:45%; }
  .apx-overlay-nav:hover, .apx-overlay-nav:active { background:rgba(247,148,29,.75); transform:translateY(-50%) scale(1.08); }
  .apx-overlay-prev { left:12px; }
  .apx-overlay-next { right:12px; }
  .apx-overlay-nav[disabled] { opacity:0; pointer-events:none; }

  /* Floating bottom bar in zoom view */
  .apx-overlay-bar {
    position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:2147483647;
    display:flex; align-items:center; gap:12px;
    background:rgba(30,36,43,.92); backdrop-filter:blur(8px);
    padding:8px 18px; border-radius:999px; box-shadow:0 4px 20px rgba(0,0,0,.5);
    color:#fff; font:600 13px "Segoe UI", Arial, sans-serif; white-space:nowrap;
  }
  .apx-overlay-bar-btn {
    border:0; background:var(--apx-orange); color:#fff;
    padding:6px 14px; border-radius:999px; font-weight:700; font-size:13px;
    cursor:pointer;
  }

  .apx-bar { display:flex; align-items:center; gap:16px; font-size:15px; color:#56606b; }
  .apx-dots { display:flex; gap:10px; }
  .apx-dot { width:12px; height:12px; border-radius:50%; border:0; padding:0; cursor:pointer; background:#d5d9de; transition:all .2s; }
  .apx-dot.active { background:var(--apx-orange); width:30px; border-radius:6px; }
  .apx-count { font-weight:600; min-width:48px; text-align:center; }

  /* Option C: Rotate phone hint on mobile portrait */
  .apx-rotate-hint { display:none; }

  @media (max-width:700px) {
    .apx-brochure { margin-top:28px; padding-top:16px; }
    .apx-stage { width:100vw; }
    .apx-arrow { width:36px; height:36px; background:rgba(56,64,74,.7); }
    .apx-arrow:hover, .apx-arrow:active, .apx-arrow:focus { background:rgba(247,148,29,.7); }
    .apx-prev { left:4px; } .apx-next { right:4px; }
    .apx-learn { right:4px; top:calc(50% + 26px); transform:none; padding:6px 10px; font-size:11px; }
    .apx-learn.apx-gone { transform:translateY(6px); }
    .apx-learn .apx-long { display:none; } .apx-learn .apx-short { display:inline; }
    .apx-restart { width:36px; height:36px; right:4px; background:rgba(56,64,74,.7); }
    .apx-restart:hover, .apx-restart:active, .apx-restart:focus { background:rgba(247,148,29,.7); }
    .apx-restart-label { right:4px; top:calc(50% + 26px); transform:none; padding:6px 10px; font-size:11px; }
    .apx-restart-label .apx-long { display:none; } .apx-restart-label .apx-short { display:inline; }
    .apx-zoom { display:flex; }
    .apx-dots { gap:4px; }
    .apx-dot { width:10px; height:10px; box-sizing:content-box; border:6px solid transparent; background-clip:padding-box; }
    .apx-dot.active { width:22px; }

    /* Rotate hint on mobile portrait */
    .apx-rotate-hint {
      display:flex; align-items:center; gap:8px;
      background:rgba(30,36,43,.88); color:#fff;
      backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
      padding:7px 14px; border-radius:999px;
      font:500 12px/1.2 "Segoe UI", Arial, sans-serif;
      box-shadow:0 3px 12px rgba(0,0,0,.2);
      margin-top:2px;
      transition:opacity .3s, transform .3s;
    }
    .apx-rotate-hint svg { width:15px; height:15px; stroke:var(--apx-orange); flex-shrink:0; }
    .apx-rotate-hint.apx-dismissed { opacity:0; transform:translateY(6px); pointer-events:none; }
    .apx-rotate-dismiss { background:transparent; border:0; color:#a0aec0; font-size:16px; line-height:1; cursor:pointer; padding:0 0 0 4px; }
  }
  /* Phones held sideways: use almost the full height */
  @media (max-height:500px) and (orientation:landscape) {
    .apx-brochure { margin-top:12px; padding:8px 0; gap:6px; }
    .apx-stage { width:min(96vw, calc((100vh - 50px) * 1.2941)); }
    .apx-zoom { display:flex; }
    .apx-rotate-hint { display:none !important; }
  }