/*
 * SweetAlert2 theming - same brand-matched confirm dialogs + toasts as the
 * admin side (see layouts/admin.blade.php's docblock for the full
 * rationale). Colors are hardcoded here rather than reading
 * var(--ok-orange-2) etc. because those custom properties are defined per
 * page (in each view's own @push('styles') block, e.g.
 * bookings/quotation.blade.php), not on this shared layout - pages that
 * don't define them would otherwise get an unstyled dialog.
 */
.swal2-popup{font-family:'Poppins',sans-serif !important;border-radius:18px !important}
.swal2-title{font-weight:800 !important;font-size:20px !important;color:#0B0B0C !important}
.swal2-html-container{color:#5c5b57 !important;font-size:14.5px !important}
.ok-swal-confirm{background:linear-gradient(120deg,#7C2D12,#C2410C) !important;color:#fff !important;font-weight:700 !important;font-size:14px !important;padding:11px 24px !important;border-radius:999px !important;box-shadow:none !important}
.ok-swal-cancel{background:#fff !important;color:#0B0B0C !important;font-weight:600 !important;font-size:14px !important;padding:11px 24px !important;border-radius:999px !important;border:1.5px solid rgba(11,11,12,.15) !important;box-shadow:none !important}
.swal2-toast{border-radius:14px !important;border:1px solid rgba(11,11,12,.08) !important;box-shadow:0 8px 24px rgba(11,11,12,.1) !important}
.swal2-toast .swal2-title{font-size:14px !important;font-weight:600 !important}
.swal2-timer-progress-bar{background:linear-gradient(120deg,#C2410C,#FF7A00) !important}
.swal2-actions{gap:12px !important}

/* QA request (Sep 2, 2026): "put also a show password in create account
   and log in page" - a show/hide toggle overlaid on any password field
   wrapped in .ok-password-field (see auth/login.blade.php and
   auth/register.blade.php). Defined here rather than in those pages'
   own CSS files since layouts-marketing.css loads on every page under
   layouts.marketing, and this toggle is meant to be reusable wherever a
   password field shows up under that layout (forgot/reset-password
   included, if those add it later). !important on the input's
   padding-right guards against each page's own .ok-field input rule
   (auth-login.css, auth-register.css, etc.) resetting all four padding
   sides with its own shorthand declaration, which loads after this file. */
.ok-password-field{position:relative}
.ok-password-field input{padding-right:64px !important}
.ok-password-toggle{position:absolute;top:50%;right:6px;transform:translateY(-50%);background:none;border:none;color:#8a887f;font-size:12.5px;font-weight:700;font-family:'Poppins',sans-serif;cursor:pointer;padding:6px 10px;border-radius:8px;line-height:1}
.ok-password-toggle:hover{color:#5c5b57;background:rgba(11,11,12,.05)}
.ok-password-toggle:focus{outline:none;box-shadow:0 0 0 2px rgba(194,65,12,.25)}

/* QA request (Sep 3, 2026): "i want the gcash qr in customer to be
   clickable. like it will zoom so that the customer can scan it
   properly" - any .ok-qr-preview image (GCash/Maya QR codes on
   bookings/survey-fee.blade.php and bookings/quotation.blade.php)
   opens a full-screen zoomed copy on click/tap, so a customer's phone
   camera has more QR detail to focus on than the inline thumbnail
   gives it. Defined here (not each page's own CSS) since both pages
   extend layouts.marketing - see layouts-marketing.js for the handler
   that builds/opens this. */
.ok-qr-preview{cursor:zoom-in}
.ok-qr-lightbox{display:none;position:fixed;inset:0;background:rgba(11,11,12,.85);z-index:999;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.ok-qr-lightbox.is-open{display:flex}
.ok-qr-lightbox img{max-width:min(92vw,480px);max-height:88vh;width:100%;height:auto;border-radius:16px;background:#fff;padding:16px;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.ok-qr-lightbox-close{position:absolute;top:20px;right:24px;width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,255,255,.15);color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.ok-qr-lightbox-close:hover{background:rgba(255,255,255,.25)}

/* QA request (Sep 16, 2026): "make it modern design" - a native <select>
   popup is drawn by the OS/browser and can't be restyled with CSS, so
   any marketing-layout page that wants a modern-looking dropdown builds
   one from this shared trigger-button + drawn-listbox markup instead of
   a plain <select> (same .ok-select/.ok-select-trigger/.ok-select-list
   contract, and the same data-ok-select handler, as the admin/provider
   layouts' Sep 9, 2026 "make this also a modern ui" work - see
   layouts-marketing.js for the behavior and the exact markup shape).
   Colors are hardcoded rather than var(--ok-orange-2) etc. for the same
   reason as the SweetAlert2 theming above: those custom properties are
   defined per page, not on this shared layout. First used on catalog/
   show.blade.php's device-type dropdown; a page only needs to add its
   own width/spacing on top (see .ok-device-type-select in
   catalog-show.css for that example). */
.ok-select{position:relative;display:inline-flex;align-items:center}
.ok-select-native{position:absolute;left:-9999px;top:0;padding:0;margin:0;border:0;opacity:0;pointer-events:none}
.ok-select-trigger{
    appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;gap:10px;
    width:100%;text-align:left;
    padding:13px 40px 13px 16px;border-radius:10px;
    border:1.5px solid rgba(11,11,12,.15);
    font:inherit;font-size:15px;font-weight:600;color:#0B0B0C;
    font-family:'Poppins',sans-serif;background-color:#fff;cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235c5b57' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 16px center;
    transition:border-color .15s ease,box-shadow .15s ease;
}
.ok-select-trigger:focus{outline:none;border-color:#C2410C}
.ok-select-trigger[aria-expanded="true"]{
    border-color:#C2410C;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 5l4-4 4 4' fill='none' stroke='%23C2410C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ok-select-trigger.ok-select-error{border-color:#C2410C;box-shadow:0 0 0 3px rgba(194,65,12,.18)}
.ok-select-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ok-select-value.is-placeholder{color:#8a887f;font-weight:500}
.ok-select-list{
    position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:20;
    max-height:280px;overflow-y:auto;
    margin:0;padding:6px;list-style:none;
    background:#fff;border-radius:14px;border:1px solid rgba(11,11,12,.08);
    box-shadow:0 12px 28px rgba(11,11,12,.14);
}
.ok-select-option{padding:11px 14px;border-radius:9px;font-size:14.5px;font-weight:600;color:#0B0B0C;font-family:'Poppins',sans-serif;cursor:pointer}
.ok-select-option:hover{background:rgba(194,65,12,.08)}
.ok-select-option.is-selected{background:rgba(194,65,12,.12);color:#9A3412}

/*
 * Shared site header (<header class="ok-header" id="okHeader">).
 * Until now this markup was duplicated across every marketing/catalog/
 * booking/profile page under this layout, but the only actual .ok-header
 * CSS rule anywhere in the codebase lived inline on marketing/home.blade.php
 * - every other page (about, careers, contact, pricing, how-it-works,
 * reviews, catalog/*, bookings/*, profile/edit, services/index) rendered
 * this header completely unstyled. Centralized here (this stylesheet loads
 * on every one of those pages via layouts/marketing.blade.php) so the fix
 * below actually applies sitewide, per the QA request that asked for it.
 * Colors are hardcoded (not var(--ok-orange-2) etc.) for the same reason
 * as the SweetAlert2/.ok-select theming above: those custom properties are
 * only defined on home.blade.php's own <style> block, not on this shared
 * layout - the original inline version silently broke on every other page
 * (avatar circle, CTA pill, My Bookings icon all rendering with no
 * background at all) once it was centralized here without this fix.
 *
 * QA request (Sep 21, 2026, reference: a short clip of Maersk.com's nav):
 * "make it look like this the habit of nav... make it also transparent
 * like this and when the user scroll down the panel is hidable and when
 * the user scroll up the panel will show," then a follow-up: "make it
 * fully see-through at top" after a first, still-tinted pass. Behaviors:
 *   1. Fully see-through at rest (top of page) - no header background at
 *      all. QA follow-up screenshot showed this making the header's own
 *      nav text/icons (previously always light-on-dark, right for
 *      home's dark photo hero) unreadable against every OTHER page's
 *      plain light body background (see modernist.css's --color-bg) -
 *      "Contact" all but disappeared. Fixed by making dark ink
 *      (--ok-black, #0B0B0C) the DEFAULT at-rest nav color, since most
 *      pages under this layout have a light hero/body directly behind
 *      the header; home.blade.php opts into light-on-dark at rest
 *      instead via the .ok-header--dark modifier on its own header tag,
 *      since its hero is a dark photo.
 *   2. Solidifies to the original, fully-opaque blurred dark gradient
 *      (light nav text again - it's a dark background at that point on
 *      every page) once scrolled past a small threshold (.is-scrolled).
 *   3. Slides off-screen on scroll-down and slides back on scroll-up
 *      (.is-hidden) - see the scroll listener in layouts-marketing.js.
 *
 * QA follow-up (Sep 21, 2026, reference: a clip of maersk.com's smooth
 * scrolling): "make the panel more smoother when showing up" - the
 * slide-back-in on scroll-up used a plain .3s "ease" curve, which reads
 * as a quick snap rather than a smooth glide. Switched to a longer,
 * gentler cubic-bezier "ease-out" curve (decelerates all the way to a
 * soft stop, no overshoot).
 *
 * QA follow-up #2 (Sep 21, 2026): the smoothing pass above initially
 * paired the slide with an opacity fade ("slide+fade"). Per client
 * feedback ("i want the header habit would not fade transition when i
 * go up... the dark panel would hide going up not fade") the fade was
 * removed - hide/reveal is now a pure slide only, keeping the smoother
 * cubic-bezier easing on the transform.
 */
.ok-header{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:16px 5vw;background:transparent;border-bottom:1px solid transparent;box-shadow:none;transition:background .35s ease,backdrop-filter .35s ease,box-shadow .35s ease,border-color .35s ease,transform .55s cubic-bezier(.22,1,.36,1);transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0);will-change:transform;backface-visibility:hidden}
.ok-header.is-scrolled{background:linear-gradient(135deg,rgba(11,11,12,.94) 0%,rgba(23,20,18,.94) 55%,rgba(43,26,18,.94) 100%);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);border-bottom:1px solid rgba(255,166,79,.14);box-shadow:0 10px 30px -18px rgba(0,0,0,.6)}
.ok-header.is-hidden{transform:translate3d(0,-100%,0)}
.ok-logo-mark{width:38px;height:38px;transform:rotate(45deg);background:linear-gradient(135deg,#7C2D12 0%,#C2410C 50%,#FF7A00 100%);border-radius:9px;box-shadow:0 6px 16px rgba(194,65,12,.35);position:relative}
.ok-logo-mark span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transform:rotate(-45deg);font-weight:800;font-size:16px;color:#fff}
.ok-wordmark{font-weight:800;font-size:21px;letter-spacing:-.02em}
.ok-wordmark .ok-ko,.ok-grad-text{background:linear-gradient(120deg,#C2410C,#FF7A00);-webkit-background-clip:text;background-clip:text;color:transparent}
.ok-nav-links{display:flex;align-items:center;gap:30px}
.ok-nav-links a{position:relative;font-size:14.5px;font-weight:500;color:#0B0B0C;padding:4px 0;transition:color .15s}
.ok-nav-links a:not(.ok-nav-home)::after{content:'';position:absolute;left:0;right:100%;bottom:-2px;height:2px;border-radius:2px;background:linear-gradient(90deg,#FFB347,#FF7A00);transition:right .25s ease}
.ok-nav-links a:hover{color:#C2410C}
.ok-nav-links a:hover::after{right:0}
.ok-nav-links a.ok-active{color:#C2410C}
.ok-nav-home{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;color:#0B0B0C;background:rgba(11,11,12,.06);border:1px solid rgba(11,11,12,.14);border-radius:50%;transition:color .15s,background .15s,border-color .15s,transform .15s}
.ok-nav-home:hover{color:#C2410C;background:rgba(194,65,12,.1);border-color:rgba(194,65,12,.35);transform:translateY(-1px)}
.ok-nav-home:active{transform:scale(.92)}
.ok-nav-mybookings{background:linear-gradient(120deg,#9A3412,#C2410C);border-color:transparent;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.ok-nav-mybookings:hover{background:linear-gradient(120deg,#C2410C,#FF7A00);border-color:transparent;color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.3)}
.ok-nav-avatar{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:linear-gradient(120deg,#C2410C,#FF7A00);color:#fff;font-weight:700;font-size:13px;flex:none;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.ok-mobile-avatar-row{display:flex !important;align-items:center;gap:12px}
.ok-nav-actions{display:flex;align-items:center;gap:18px}
.ok-nav-actions a:not(.ok-nav-home):not(.ok-cta-pill):not(.ok-nav-avatar){color:#0B0B0C}
.ok-nav-actions a:not(.ok-nav-home):not(.ok-cta-pill):not(.ok-nav-avatar):hover{color:#C2410C}
.ok-nav-actions .ok-tech{font-size:14px;font-weight:600;color:#C2410C}
.ok-cta-pill{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:999px;background:linear-gradient(120deg,#9A3412,#C2410C);color:#fff;font-weight:600;font-size:14.5px;box-shadow:0 8px 20px rgba(0,0,0,.3);transition:transform .15s,box-shadow .15s}
.ok-cta-pill:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,0,0,.4)}
/* Mobile drawer trigger. Sized to a 44x44 tap target (the iOS HIG /
   Material minimum) instead of the old bare 24px glyph with 8px padding,
   which was a ~40px target only by accident of the glyph's own box and
   gave no press feedback at all. line-height (not flex centering) does
   the vertical centering on purpose: marketing/home.blade.php's own
   @media block forces `display:block !important` on this button, which
   would break an inline-flex centering scheme. */
.ok-mobile-toggle{display:none;width:44px;height:44px;padding:0;background:transparent;border:1px solid rgba(11,11,12,.16);border-radius:12px;cursor:pointer;font-size:21px;line-height:42px;text-align:center;color:#0B0B0C;-webkit-tap-highlight-color:transparent;transition:background .15s,border-color .15s,color .15s}
.ok-mobile-toggle:active{background:rgba(11,11,12,.08)}

/* Mobile drawer (#okMobileMenu).
 *
 * Deliberately selected by ID, not by the .ok-mobile-menu class it also
 * carries. Every page that renders this drawer also defines a blanket
 * `.ok-<page> a{text-decoration:none;color:inherit}` reset inside its own
 * @push('styles') block (see marketing/home.blade.php line ~19). That
 * reset is specificity (0,1,1) - exactly the same as `.ok-mobile-menu a` -
 * and the inline <style> renders AFTER this file's <link> in
 * layouts/marketing.blade.php, so at equal specificity the page's reset
 * won and every drawer link inherited the page's dark --ok-ink against
 * the drawer's near-black background: unreadable (the Sep 25, 2026 QA
 * screenshot). It beat `.ok-cta-pill{color:#fff}` (0,1,0) the same way,
 * which is why "Book a Service" had dark text on the orange pill too.
 * An ID selector is (1,0,0) and cannot be outranked by any number of
 * per-page class resets, so this can't silently regress again when
 * another page copies that reset. Same reasoning for #okHeader below.
 *
 * Colors are hardcoded hex rather than var(--ok-orange-2) etc. for the
 * reason documented at the top of this file: the --ok-* custom properties
 * are defined per-page, not on the shared layout.
 *
 * Geometry: the old rule pinned the drawer to `inset:0;top:70px`, a
 * hardcoded guess at header height. The home page's header is ~98px
 * (65px logo + 16px top/bottom padding) AND position:fixed (see
 * .ok-header--dark in home.blade.php), so the drawer started 28px too
 * low - leaving a strip of the hero photo showing above it and tucking
 * the first menu item under the header. Now the drawer covers the full
 * viewport and reserves clearance via padding-top instead, using a
 * --ok-drawer-top custom property that layouts-marketing.js measures off
 * the real header on open. The 72px fallback only applies if JS hasn't
 * run yet. The header (z-index 100) still floats above the drawer
 * (z-index 99), so its logo and close button stay usable.
 *
 * Open/close animates opacity+transform rather than flipping display,
 * which can't transition; visibility is delayed by the same duration on
 * close so the drawer stays hitbox-free once hidden. */
#okMobileMenu{position:fixed;inset:0;z-index:99;display:flex;flex-direction:column;gap:0;background:linear-gradient(165deg,#120D0A 0%,#1D1411 48%,#2E1B12 100%);padding:calc(var(--ok-drawer-top, 72px) + 10px) 5vw calc(18px + env(safe-area-inset-bottom, 0px));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;visibility:hidden;opacity:0;transform:translateY(-10px);transition:opacity .26s ease,transform .26s ease,visibility 0s linear .26s}
#okMobileMenu.is-open{visibility:visible;opacity:1;transform:none;transition:opacity .26s ease,transform .26s ease,visibility 0s}

/* Rows, not bare text: 56px min tap height, hairline dividers, and a
   real pressed state. The old drawer stacked 22px links with a 22px gap,
   which reads as a wall of text and gives no feedback on tap. */
#okMobileMenu a{position:relative;display:flex;align-items:center;gap:12px;min-height:56px;margin:0;padding:12px 14px;border-radius:14px;font-size:17px;font-weight:600;line-height:1.3;color:#F5F2EF;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:background .15s,color .15s}
/* Row dividers as an inset pseudo-element rather than border-top: a real
   border gets clipped by the row's own 14px border-radius, which left
   visibly curled-up ends on every hairline. Skipped on the last two
   children - the trailing nav row (no hairline dangling under the end of
   the list) and the CTA pill, which is not a list row at all. Both @auth
   branches keep that shape: the pill is always last, the last nav/avatar
   row always second-to-last. */
#okMobileMenu a:not(:last-child):not(:nth-last-child(2))::after{content:'';position:absolute;left:14px;right:14px;bottom:0;height:1px;background:rgba(255,255,255,.08)}
#okMobileMenu a:active{background:rgba(255,122,0,.14);color:#FFB347}
/* .is-current is set by layouts-marketing.js from location.pathname -
   the drawer markup is duplicated across 9 Blade files and none of them
   mark the active route, so matching it in JS keeps this DRY. */
#okMobileMenu a.is-current{color:#FFB347;background:rgba(255,122,0,.1)}
#okMobileMenu a.is-current::before{content:'';flex:none;width:3px;height:20px;margin-left:-8px;border-radius:2px;background:linear-gradient(180deg,#FFB347,#FF7A00)}
#okMobileMenu .ok-tech{color:#FFB347}
#okMobileMenu .ok-nav-avatar{flex:none}
/* margin-top:auto pins the CTA to the bottom of the drawer regardless of
   how many links sit above it (the @auth branches vary the count), so it
   lands in the thumb zone instead of floating mid-screen with dead space
   below it. border-top:none undoes the `a + a` divider above - the pill
   is its own element, not another list row. */
#okMobileMenu .ok-cta-pill{margin-top:auto;justify-content:center;min-height:56px;margin-bottom:0;padding:16px 24px;font-size:16.5px;font-weight:700;color:#fff;background:linear-gradient(120deg,#9A3412,#C2410C);box-shadow:0 10px 26px rgba(0,0,0,.4)}
#okMobileMenu .ok-cta-pill:active{transform:translateY(1px);color:#fff;background:linear-gradient(120deg,#C2410C,#FF7A00)}

/* Body scroll lock while the drawer is open, so the page underneath
   doesn't scroll away behind it. overscroll-behavior:contain on the
   drawer itself (above) stops the scroll chaining that overflow:hidden
   alone doesn't catch on iOS. */
body.ok-drawer-open{overflow:hidden}

/* Same ID-specificity fix as the drawer: .ok-home a{color:inherit} also
   flattened the desktop header's CTA pill to dark-on-orange. */
#okHeader .ok-cta-pill{color:#fff}

/* Dark-hero opt-in (home.blade.php's header tag carries this class): its
   hero photo sits directly behind the header at rest, so nav text/icons
   need to start light-on-dark instead of the dark-ink default above.
   Once actually scrolled (.is-scrolled), every page - including home -
   already gets a solid dark background, so the same light-text rules
   apply there too; this selector list just covers both cases at once. */
.ok-header.is-scrolled .ok-nav-links a,.ok-header--dark .ok-nav-links a,
.ok-header.is-scrolled .ok-nav-actions a:not(.ok-nav-home):not(.ok-cta-pill):not(.ok-nav-avatar),.ok-header--dark .ok-nav-actions a:not(.ok-nav-home):not(.ok-cta-pill):not(.ok-nav-avatar){color:#F1EFEC}
.ok-header.is-scrolled .ok-nav-links a:hover,.ok-header--dark .ok-nav-links a:hover,
.ok-header.is-scrolled .ok-nav-links a.ok-active,.ok-header--dark .ok-nav-links a.ok-active,
.ok-header.is-scrolled .ok-nav-actions a:not(.ok-nav-home):not(.ok-cta-pill):not(.ok-nav-avatar):hover,.ok-header--dark .ok-nav-actions a:not(.ok-nav-home):not(.ok-cta-pill):not(.ok-nav-avatar):hover,
.ok-header.is-scrolled .ok-nav-actions .ok-tech,.ok-header--dark .ok-nav-actions .ok-tech{color:#FFB347}
.ok-header.is-scrolled .ok-nav-home,.ok-header--dark .ok-nav-home{color:#F1EFEC;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
.ok-header.is-scrolled .ok-nav-home:hover,.ok-header--dark .ok-nav-home:hover{color:#FFB347;background:rgba(255,166,79,.18);border-color:rgba(255,166,79,.4)}
.ok-header.is-scrolled .ok-mobile-toggle,.ok-header--dark .ok-mobile-toggle{color:#F1EFEC;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}
.ok-header.is-scrolled .ok-mobile-toggle:active,.ok-header--dark .ok-mobile-toggle:active{background:rgba(255,166,79,.2);border-color:rgba(255,166,79,.45)}

@media (max-width:900px){
    .ok-nav-links,.ok-nav-actions{display:none}
    .ok-mobile-toggle{display:block}
}

/* The drawer is now display:flex at all widths (it has to be, for the
   opacity/transform transition to work), so it needs an explicit guard
   against ever mattering on desktop - where the full nav is visible and
   the toggle is hidden. visibility:hidden already makes it inert, but
   this removes it from the layout and the a11y tree outright. */
@media (min-width:901px){
    #okMobileMenu{display:none}
}

@media (prefers-reduced-motion: reduce){
    #okMobileMenu{transform:none;transition:opacity .01s linear,visibility 0s}
    #okMobileMenu.is-open{transform:none;transition:opacity .01s linear,visibility 0s}
    #okMobileMenu .ok-cta-pill:active{transform:none}
}

/* System versioning (Sep 21, 2026 request) - this layout is shared by both
   public and logged-in pages (see layouts/marketing.blade.php's @auth
   gate), so instead of a fixed corner badge that could overlap a sticky
   CTA/bottom bar on any of the many pages that use this layout, it just
   sits in normal document flow right after each page's own content -
   a quiet one-line footer, never competing with page UI. */
.ok-version-badge{text-align:center;font-size:11px;font-weight:500;color:rgba(23,23,26,.35);letter-spacing:.02em;padding:18px 16px 24px}