/* =========================
   OWNER-LIKE HEADER - FIXED VERSION
   TechMyCar marketing styles
========================= */

/* ===== CRITICAL FIXES ===== */
:root {
    /* Colors from Figma */
    --primary-blue: #015bf8;
    --secondary-blue: #01d0fc;
    --gradient: linear-gradient(90deg, #01d0fc 0%, #015bf8 100%);
    --text-primary: #000000;
    --text-secondary: #868686;
    --text-white: #ffffff;
    --bg-cream: #f4f0e9;
    --bg-light: #f1f1f1;
    --bg-white: #ffffff;
    --bg-dark: #181f1f;
    --border-color: #ebebeb;

    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Container */
    --container-width: 1200px;
    --container-wide: 1440px;
}

/* 1. Header - frosted glass: translucent + blurred so the page shows through on scroll.
   The blur lives on a ::before layer rather than directly on .owner-header itself --
   some browsers silently fail to apply backdrop-filter on a position:sticky element,
   but reliably apply it to a plain position:absolute layer inside one. */
.owner-header {
    position: sticky;
    top: 0;
    z-index: 999999 !important;
    background: transparent !important;
}

.owner-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(80px) saturate(180%);
    -webkit-backdrop-filter: blur(80px) saturate(180%);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.owner-header-inner {
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    gap: 20px;
    padding: 10px 0;
}

.owner-logo img {
    height: 34px;
    display: block;
}

/* ===== Navigation ===== */
.owner-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    /* Fills the space between the logo and .owner-actions and centers
       its links within it (was margin-left:auto, which instead pushed
       the whole nav flush against .owner-actions on the right, leaving
       a large empty gap after the logo -- the "me-auto"/"ms-auto"
       classes on the <nav> markup do nothing since no Bootstrap CSS is
       loaded on this layout, only the local main-assets stylesheets). */
    flex: 1;
}

.owner-nav-link {
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    text-decoration: none;
    padding: 8px 10px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background 160ms ease;
}

.owner-header .btn-primary {
    padding: 9px 18px;
    font-size: 14px;
}

.owner-nav-link:hover {
    background: rgba(15, 23, 42, 0.06);
}

/* .owner-nav-link-active {
    background: rgba(15, 23, 42, 0.06);
} */

.owner-caret {
    width: 8px;
    height: 8px;
    border-right: 2px solid #0f172a;
    border-bottom: 2px solid #0f172a;
    transform: rotate(45deg);
    margin-top: -2px;
    transition: transform 160ms ease;
}

/* ===== Header Actions ===== */
.owner-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.owner-login {
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    color: #0f172a;
    transition: opacity 160ms ease;
}

.owner-login:hover {
    opacity: 0.7;
}

.owner-cta {
    background: #0f172a;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 16px;
    border-radius: 999px;
    transition: transform 160ms ease, background 160ms ease;
}

.owner-cta:hover {
    background: #1a2333;
    transform: scale(1.02);
}

/* =========================
   MEGA MENU OVERLAY - FIXED
========================= */

/* The nav link inside only renders ~34px tall (its own padding), but the
   header row is ~54px tall with it centered -- leaving ~10px of dead,
   unhoverable padding above and below inside the header itself. That gap
   is enough for a mouse moving down toward the mega menu to momentarily
   leave both the link and the overlay, dropping :hover and closing the
   menu before it's reached. Padding+negative-margin here expands this
   element's hit area to the header's full height with zero visual/layout
   change, so hovering anywhere in that vertical band keeps the menu open. */
.owner-has-mega {
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px 0;
    margin: -10px 0;
}

/* 2. Mega overlay backdrop. Its background/blur/height are overridden
   further down this file (this base rule predates the frosted-glass
   design and is dead for those properties) -- its border-bottom is
   dead too now that the box is full-height: a border here would render
   as a stray line at the bottom of the viewport rather than under the
   sheet, so it's dropped rather than carried forward. */
.owner-mega-overlay {
    position: fixed;
    left: 0;
    right: 0;
    top: calc(var(--ownerHeaderH, 54px) - 8px);
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
    z-index: 999998 !important;
}

/* Small hit strip bridging the gap between the nav trigger and the
   sheet's top edge (the overlay starts 8px above the header bottom, and
   the sheet itself sits 16px further down) -- without this, a mouse
   moving from the trigger straight down to the sheet crossed a dead zone
   with nothing hoverable in it, so :hover dropped and the menu closed
   before the sheet was ever reached. visibility:hidden on the overlay
   while closed already keeps this out of hit-testing, so it's safe to
   leave interactive unconditionally. */
.owner-mega-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 32px;
    pointer-events: auto;
}

/* Show on hover/focus */
.owner-has-mega:hover .owner-mega-overlay,
.owner-has-mega:focus-within .owner-mega-overlay {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* pointer-events stays off on the overlay itself -- it's a full-viewport
   blur backdrop (bottom:0, further down this file) and turning it on here
   made the whole page below the header count as "still hovering the menu",
   so it never closed until the mouse moved back over the nav bar. Only the
   visible sheet card should actually capture hover/clicks. */
.owner-has-mega:hover .owner-mega-sheet,
.owner-has-mega:focus-within .owner-mega-sheet {
    pointer-events: auto;
}

/* Rotate caret when open */
.owner-has-mega:hover .owner-caret,
.owner-has-mega:focus-within .owner-caret {
    transform: rotate(225deg);
    margin-top: 2px;
}

/* 3. Mega sheet - NO border, NO shadow at top, SEAMLESS */
.owner-mega-sheet {
    background: #ffffff;
    border: none;
    border-radius: 0 0 28px 28px;
    box-shadow: 0 10px 10px rgba(2, 6, 23, 0.18),
        0 10px 24px rgba(2, 6, 23, 0.10);
    padding: 40px 28px 60px;
    margin: -15px 0 0 0;
}

.owner-mega-content {
    display: grid;
    grid-template-columns: 1.15fr 0.5fr;
    gap: 150px;
    align-items: stretch;
    /* max-width: 1340px; */
    margin: 0 auto;
}

/* ===== LEFT SIDE - Product List ===== */
.owner-mega-left {
    padding: 20px 0;
}

.owner-mega-label {
    font-size: 12px;
    font-weight: 500;
    color: #A1A3A5;
    margin-bottom: 14px;
    /* text-transform: uppercase; */
    letter-spacing: 0.05em;
    margin-left: 18px;
}

.owner-mega-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* gap: 14px 26px; */
}

.owner-mega-item {
    display: grid;
    grid-template-columns: 40px 1fr;
    /* gap: 12px; */
    text-decoration: none;
    color: #0f172a;
    padding: 10px 8px;
    border-radius: 14px;
    transition: background 160ms ease;
}

.owner-mega-item:hover {
    background: linear-gradient(90deg, rgba(1, 208, 252, 0.12) 0%, rgba(1, 91, 248, 0.12) 100%);
}

/* .owner-ico {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 20px;
} */

.owner-ico svg {
    width: 24px;
    height: 24px;
}

.owner-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.owner-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    display: block;
    color: #0f172a;
}

.owner-sub {
    font-size: 14px;
    font-weight: 500;
    color: rgba(15, 23, 42, 0.62);
    line-height: 1.35;
    display: block;
}

/* ===== RIGHT SIDE - Story Card ===== */
.owner-mega-right {
    padding: 20px 0;
    margin-top: auto;
}

.owner-story-card {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.10);
    height: 100%;
    max-height: 280px;
    width: 470px;
    display: block;
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.owner-story-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px rgba(2, 6, 23, 0.15);
}

.owner-story-img {
    width: 100%;
    height: 100%;
    min-height: 280px;
    object-fit: cover;
    display: block;
}

.owner-story-play {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(2, 6, 23, 0.55);
    backdrop-filter: blur(10px);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 18px;
    transition: transform 160ms ease;
}

.owner-story-card:hover .owner-story-play {
    transform: scale(1.1);
}

.owner-story-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 18px 16px;
    background: linear-gradient(to top, rgba(2, 6, 23, 0.75), rgba(2, 6, 23, 0.08));
}

.owner-story-title {
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
    max-width: 92%;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 992px) {
    .owner-mega-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .owner-mega-grid {
        grid-template-columns: 1fr;
    }

    .owner-mega-sheet {
        padding: 30px 20px 40px;
    }
}

/* Tablet band above the 768px hamburger switch: 5 nav links + logo +
   actions ("Login" / "Get a free demo") don't fit an 800px-wide header at
   the desktop link spacing -- .owner-actions was pushed 19px past the
   viewport edge. Tighten link gap/padding to reclaim that room instead of
   moving the hamburger breakpoint itself. */
@media (min-width: 769px) and (max-width: 1024px) {
    .owner-nav {
        gap: 2px;
    }

    .owner-nav-link {
        padding: 8px 7px;
        font-size: 14px;
    }

    .owner-actions {
        gap: 10px;
    }

    .owner-header .btn-primary {
        padding: 9px 14px;
    }
}

@media (max-width: 768px) {
    .owner-header-inner {
        padding: 12px 0;
    }

    .owner-nav {
        display: none;
    }

    .owner-mega-overlay {
        top: 60px;
    }
}

/* =========================
   CRITICAL OVERRIDES
   Ensuring nothing breaks the design
========================= */

/* .owner-mega-sheet (the visible white card) stays sharp/opaque --
   .owner-mega-overlay (the backdrop behind/around it) is deliberately
   translucent + blurred instead, matching the reference: see the
   dedicated rule further down this file. Older copies of this block used
   to force .owner-mega-overlay opaque too, fighting that rule and
   leaving the page behind it fully hidden instead of blurred-through. */
.owner-mega-sheet {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: #ffffff !important;
    background-image: none !important;
}

/* NO gap between header and mega menu */
.owner-mega-overlay {
    margin-top: 0 !important;
    border-top: none !important;
}

/* Seamless connection */
#ownerHeader {
    position: sticky;
    top: 0;
    z-index: 999999 !important;
}

.owner-mega-overlay {
    z-index: 999998 !important;
}

/* =========================
   Container 1440 System
========================= */

.container-1482 {
    width: 100%;
    max-width: 1482px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* Large desktops (≥1440px) */
@media (min-width: 1440px) {
    .container-1482 {
        padding-left: 32px;
        padding-right: 32px;
    }
}

/* Tablets & small laptops */
@media (max-width: 1024px) {
    .container-1482 {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .container-1482 {
        padding-left: 16px;
        padding-right: 16px;
    }
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 24px;
    background: var(--gradient);
    color: var(--text-white);
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(1, 91, 248, 0.3);
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(1, 91, 248, 0.4);
}

.btn-primary {
    will-change: transform;
}

.btn-primary,
.btn-secondary,
.btn-dark,
.btn-white,
.btn-outline {
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

a {
    text-decoration: none !important;
}


.image-hero {
    position: relative;

}

.image-hero {
    /*position: relative;
  */
    margin-top: 220px;
    height: 600px;
    background-color: var(--primary-blue, #015bf8);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='7' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0.28 0.28 0.28 0 0.42 0.28 0.28 0.28 0 0.42 0.28 0.28 0.28 0 0.42 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E"),
        url('/main-assets/images/footer-cta-bg.jpg');
    background-blend-mode: multiply, normal;
    background-size: 420px 420px, cover;
    background-position: center;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 70px;
    z-index: 2;
    margin-right: 0 !important;
    -webkit-border-radius: 70px;
    -moz-border-radius: 70px;
    -ms-border-radius: 70px;
    -o-border-radius: 70px;
}

.image-hero-phone {
    position: absolute;
    right: 6%;
    bottom: -140px;
    height: 155%;
    width: auto;
    z-index: 1;
    pointer-events: none;
    animation: heroPhoneFloat 4.5s ease-in-out infinite;
}

@keyframes heroPhoneFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-16px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .image-hero-phone {
        animation: none;
    }
}

/* dark overlay for readability */
.image-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    /* background: rgba(0,0,0,0.35); */
}

/* text container */
.image-hero-overlay {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 300px;
    max-width: 1000px;
    color: #fff;
}

.image-hero-overlay h1 {
    font-size: 3.2rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 20px;
}

.image-hero-btn-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.btn-ghost-light {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    white-space: nowrap;
    backdrop-filter: blur(4px);
    transition: background 0.2s ease;
}

.btn-ghost-light:hover {
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
}

/* Mobile: the overlay's 300px left padding and the 3.2rem heading are sized
   for desktop, where the hero phone mockup sits to the right. Below 768px
   there's no room for either, so the "See how it works" button pushed past
   the viewport edge. Bring padding down to the page's own fluid gutter and
   let the two buttons share the row instead of overflowing it. */
@media (max-width: 768px) {
    .image-hero {
        height: clamp(460px, 150vw, 600px);
        border-radius: clamp(24px, 6vw, 70px);
    }

    .image-hero-overlay {
        padding-left: var(--page-pad, 24px);
        padding-right: var(--page-pad, 24px);
        max-width: 100%;
    }

    .image-hero-overlay h1 {
        font-size: clamp(26px, 7vw, 40px);
    }

    .image-hero-btn-row {
        width: 100%;
    }

    .image-hero-btn-row .btn-dark,
    .image-hero-btn-row .btn-ghost-light {
        flex: 1 1 auto;
        justify-content: center;
        white-space: normal;
        text-align: center;
    }
}

/* ===== FOOTER UI =====
   Geometry, type scale and vertical rhythm here are measured off the
   reference footer design. This is the ONLY place the footer is styled --
   page-level stylesheets load after this file, so a footer rule anywhere
   else silently wins on that page and the footer stops matching. */
.footer-ui {
    position: relative;
    z-index: 3;
    margin-top: -110px;
    background: #fff;
    border-radius: 65px 65px 0 0;
    padding: 56px 120px 30px;
}

/* Content width. The reference footer is 1232px wide and equal to its own
   page container, so it lines up with the sections above it. Ours ran at
   1402 (1482 less 40px padding either side) while the rest of the page runs
   at 1292 -- so the footer was both wider than the reference AND wider than
   our own content. Every type size below is absolute and already matches the
   reference, so that over-wide container was the single reason the text read
   as too small and too spread out. These values mirror .guides-section +
   .guided-section-container exactly, at every breakpoint, so the footer
   columns now line up with the cards above them. */
.footer-shell,
.footer-top-row,
.footer-inner,
.footer-bottom-ui {
    max-width: 1340px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

@media (max-width: 1024px) {
    .footer-ui {
        padding: 44px 40px 30px;
    }
}

@media (max-width: 640px) {
    .footer-ui {
        padding: 40px 20px 30px;
    }
}

/* TOP ROW -- logo left, the two actions right */
.footer-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 80px;
}

/* BRAND */
.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.footer-brand i {
    font-size: 33px;
    color: #00d4ff;
}

.footer-brand-name {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: #0b0f14;
    letter-spacing: -0.3px;
}

.footer-brand-name span {
    background: linear-gradient(90deg, #01d0fc 0%, #015bf8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.footer-brand img {
    height: 44px;
}

/* ACTIONS -- pill buttons, 47px tall with a 15px radius */
.footer-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.footer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 47px;
    padding: 0 24px;
    border-radius: 15px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.footer-btn--primary {
    background: linear-gradient(90deg, #01d0fc 0%, #015bf8 100%);
    color: #fff;
}

.footer-btn--ghost {
    background: #f4f4f4;
    color: #2c2c2c;
}

.footer-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10);
}

.footer-btn--ghost:hover {
    background: #ececec;
}

/* LINK GRIDS -- both rows share one 4-column grid so the second row's
   columns line up with the first row's. */
.footer-links-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 16px;
}

.footer-links-grid--sm {
    margin-top: 64px;
}

/* Weights come from measuring stroke coverage of the same words in the
   reference against ours: every role came back at 0.72-0.84 of the
   reference's ink at identical cap height and identical colour, i.e. our
   type was a weight step light throughout. Row-1 links are 615 rather than
   the reference-matching 700: that sets the row-1 / row-2 weight contrast
   to 1.40 (700 gives 1.56, the reference itself is 1.63). */
.footer-col h4 {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    color: #959595;
    margin: 0 0 24px;
}

.footer-col a {
    display: block;
    font-size: 20px;
    font-weight: 615;
    line-height: 1.3;
    letter-spacing: 0;
    color: #2c2c2c;
    text-decoration: none;
    margin-bottom: 16px;
    transition: color .2s ease;
}

/* Second row is the same layout at the smaller supporting-link scale. */
.footer-links-grid--sm .footer-col h4 {
    margin-bottom: 22px;
}

.footer-links-grid--sm .footer-col a {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
}

.footer-col a:hover {
    color: #015bf8;
}

.fs-14 {
    font-size: 14px !important;
}

/* BOTTOM -- no divider rule above it in the reference */
.footer-bottom-ui {
    margin-top: 66px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* The bottom bar is a step smaller and lighter than the link columns --
   measured against the reference it was 1.48x the ink at 13px/500. Nudged
   back up to 13px on request; the weight stays at 400, which is what
   actually carried that excess ink. */
.footer-bottom-ui p,
.footer-legal a {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    color: #4c4c4c;
    margin: 0;
    text-decoration: none;
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.footer-legal a:hover {
    color: #015bf8;
}

/* animations.js tags revealed blocks with .reveal.is-visible, and style.css
   force-centres those at four separate mobile breakpoints. The footer is
   left-aligned at every width, so opt it back out -- .footer-ui .reveal
   .is-visible outranks the bare .reveal.is-visible those rules use. */
.footer-ui .reveal.is-visible,
.footer-ui .footer-links-grid,
.footer-ui .footer-col,
.footer-ui .footer-bottom-ui {
    text-align: left;
}

/* TABLET / MOBILE */
@media (max-width: 991px) {
    .footer-top-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        margin-bottom: 56px;
    }

    .footer-actions {
        width: 100%;
    }

    .footer-btn {
        flex: 1;
    }

    .footer-links-grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 40px;
    }

    .footer-links-grid--sm {
        margin-top: 40px;
    }

    .footer-col a {
        font-size: 17px;
    }

    .footer-bottom-ui {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 48px;
    }
}

@media (max-width: 560px) {
    .footer-links-grid {
        grid-template-columns: 1fr;
    }

    .footer-actions {
        flex-direction: column;
    }

    .footer-btn {
        width: 100%;
    }
}

.booking-cta {
    padding: 40px 0;
    padding-bottom: 200px !important;
    margin-bottom: -160px !important;
    z-index: -1;
    position: relative;
}

.btn-dark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: var(--text-primary);
    color: var(--text-white);
    border-radius: 10px;
    font-size: 16px;

    background: #111;
    color: #fff;
    padding: 12px 24px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}

.d-flex {
    display: flex;
    gap: 10px;
}


/* =========================
   MEGA MENU OVERLAY - FIXED
========================= */

/* The nav link inside only renders ~34px tall (its own padding), but the
   header row is ~54px tall with it centered -- leaving ~10px of dead,
   unhoverable padding above and below inside the header itself. That gap
   is enough for a mouse moving down toward the mega menu to momentarily
   leave both the link and the overlay, dropping :hover and closing the
   menu before it's reached. Padding+negative-margin here expands this
   element's hit area to the header's full height with zero visual/layout
   change, so hovering anywhere in that vertical band keeps the menu open. */
.owner-has-mega {
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px 0;
    margin: -10px 0;
}

/* Duplicate of the ".owner-mega-overlay" block above (this file repeats
   the whole mega-menu section a few times) -- background and border-bottom
   dropped here too, same reasoning: both are dead against the frosted-glass
   override further down, and border-bottom would otherwise render as a
   stray line at the bottom of the viewport now that the box is full-height. */
.owner-mega-overlay {
    position: fixed;
    left: 0;
    right: 0;
    top: calc(var(--ownerHeaderH, 54px) - 8px);
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
    z-index: 999998 !important;
}

/* Small hit strip bridging the gap between the nav trigger and the
   sheet's top edge (the overlay starts 8px above the header bottom, and
   the sheet itself sits 16px further down) -- without this, a mouse
   moving from the trigger straight down to the sheet crossed a dead zone
   with nothing hoverable in it, so :hover dropped and the menu closed
   before the sheet was ever reached. visibility:hidden on the overlay
   while closed already keeps this out of hit-testing, so it's safe to
   leave interactive unconditionally. */
.owner-mega-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 32px;
    pointer-events: auto;
}

/* Show on hover/focus */
.owner-has-mega:hover .owner-mega-overlay,
.owner-has-mega:focus-within .owner-mega-overlay {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* pointer-events stays off on the overlay itself -- it's a full-viewport
   blur backdrop (bottom:0, further down this file) and turning it on here
   made the whole page below the header count as "still hovering the menu",
   so it never closed until the mouse moved back over the nav bar. Only the
   visible sheet card should actually capture hover/clicks. */
.owner-has-mega:hover .owner-mega-sheet,
.owner-has-mega:focus-within .owner-mega-sheet {
    pointer-events: auto;
}

/* Rotate caret when open */
.owner-has-mega:hover .owner-caret,
.owner-has-mega:focus-within .owner-caret {
    transform: rotate(225deg);
    margin-top: 2px;
}

/* 3. Mega sheet - NO border, NO shadow at top, SEAMLESS */
.owner-mega-sheet {
    background: #ffffff;
    border: none;
    border-radius: 0 0 28px 28px;
    box-shadow: 0 10px 10px rgba(2, 6, 23, 0.18),
        0 10px 24px rgba(2, 6, 23, 0.10);
    padding: 40px 28px 60px;
    margin: -15px 0 0 0;
}

.owner-mega-content {
    display: grid;
    grid-template-columns: 1.15fr 0.5fr;
    gap: 150px;
    align-items: stretch;
    margin: 0 auto;
}

/* ===== LEFT SIDE - Product List ===== */
.owner-mega-left {
    padding: 20px 0;
}

.owner-mega-label {
    font-size: 12px;
    font-weight: 500;
    color: #A1A3A5;
    margin-bottom: 14px;
    letter-spacing: 0.05em;
    margin-left: 18px;
}

.owner-mega-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* gap: 14px 26px; */
}

.owner-mega-item {
    display: grid;
    grid-template-columns: 40px 1fr;
    text-decoration: none;
    color: #0f172a;
    padding: 10px 8px;
    border-radius: 14px;
    transition: background 160ms ease;
}

.owner-mega-item:hover {
    background: linear-gradient(90deg, rgba(1, 208, 252, 0.12) 0%, rgba(1, 91, 248, 0.12) 100%);
}

.owner-ico svg {
    width: 24px;
    height: 24px;
}

.owner-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.owner-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    display: block;
    color: #0f172a;
}

.owner-sub {
    font-size: 14px;
    font-weight: 500;
    color: rgba(15, 23, 42, 0.62);
    line-height: 1.35;
    display: block;
}

/* ===== RIGHT SIDE - Story Card ===== */
.owner-mega-right {
    padding: 20px 0;
    margin-top: auto;
}

.owner-story-card {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.10);
    height: 100%;
    max-height: 280px;
    width: 470px;
    display: block;
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.owner-story-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px rgba(2, 6, 23, 0.15);
}

.owner-story-img {
    width: 100%;
    height: 100%;
    min-height: 280px;
    object-fit: cover;
    display: block;
}

.owner-story-play {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(2, 6, 23, 0.55);
    backdrop-filter: blur(10px);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 18px;
    transition: transform 160ms ease;
}

.owner-story-card:hover .owner-story-play {
    transform: scale(1.1);
}

.owner-story-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 18px 16px;
    background: linear-gradient(to top, rgba(2, 6, 23, 0.75), rgba(2, 6, 23, 0.08));
}

.owner-story-title {
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
    max-width: 92%;
}

/* =========================
   COMPANY DROPDOWN SPECIFIC STYLES
========================= */

/* Company mega menu content - different grid.
   Both columns are fixed (280px link list + 560px cards) rather than a
   flexible fraction, so the whole sheet can size itself to this exact
   content width below instead of stretching to fill the viewport. */
.owner-mega-content-company {
    grid-template-columns: 320px 560px;
    gap: 40px;
}

/* Vertical divider between the link list and the two cards */
.owner-mega-left-company {
    border-right: 1px solid rgba(15, 23, 42, 0.10);
    padding-right: 40px;
}

/* The Company/Resources sheets only need to be as wide as their content
   (320 + 40 gap + 500 + the sheet's own 32px side padding x2 = 924px)
   rather than the 1220px max-width every other mega menu's sheet gets
   (that rule is !important, further down this file, so this override must
   match it or it's silently ignored regardless of selector specificity).
   Resources reuses the exact same single-column-list-plus-two-cards layout
   as Company, so it shares this sizing override too. */
#ownerCompanyMegaWrap .owner-mega-sheet,
#ownerResourcesMegaWrap .owner-mega-sheet {
    width: fit-content !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Single column grid for company links (no icons) */
.owner-mega-grid-single {
    grid-template-columns: 1fr;
    /* gap: 8px; */
}

/* Company items without icons */
.owner-mega-grid-single .owner-mega-item {
    grid-template-columns: 1fr;
    /* padding: 12px 16px; */
}

/* Bold weight (matching the reference) and a wide-enough column (above) plus
   nowrap so "Partner with Bookdshop" -- longer than the reference's own
   label -- still fits on one line instead of wrapping to two. */
.owner-mega-grid-single .owner-title {
    font-size: 20px;
    font-weight: 700;
    white-space: nowrap;
}

/* Right side cards container */
.owner-mega-right-cards {
    display: grid;
    grid-template-columns: 240px 240px;
    column-gap: 20px;
    align-items: start;
    padding: 20px 0;
}

/* Company card styles -- fixed 240x360 (reference-measured; the earlier
   270x405 ran noticeably larger than the reference's own cards) rather
   than a fluid width, so the cards stay the reference's compact size
   instead of scaling up with the sheet/viewport. */
.owner-company-card {
    position: relative;
    width: 240px;
    height: 360px;
    border-radius: 20px;
    overflow: hidden;
    display: block;
    text-decoration: none;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.10);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.owner-company-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px rgba(2, 6, 23, 0.15);
}

/* Card with image */
.owner-company-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.owner-company-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: #0f172a;
    flex: 1;
}

/* "We're Hiring" card — brand-blue gradient with a subtle wavy line texture */
.owner-company-card-hiring {
    display: flex;
    align-items: flex-end;
    padding: 18px;
    background-image:
        url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.22' stroke-width='2'%3E%3Cpath d='M-40 260 C 60 160, 140 160, 200 260 S 340 360, 440 260'/%3E%3Cpath d='M-40 320 C 60 220, 140 220, 200 320 S 340 420, 440 320'/%3E%3Cpath d='M-40 200 C 60 100, 140 100, 200 200 S 340 300, 440 200'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(150deg, #35d2ff 0%, #0091ff 45%, #0044cc 100%);
    background-size: 400px 400px, cover;
    background-position: center, center;
}

.owner-company-hiring-text {
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1024px) {
    .owner-mega-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .owner-mega-content-company {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* The Company/Resources sheet's width:fit-content!important (above)
       sizes it to its fixed 320+560px two-column content regardless of
       viewport -- once that content stacks to one column just above, the
       sheet still needs an explicit cap or it keeps trying to fit content
       that's wider than a 1024px-and-under viewport can show. */
    #ownerCompanyMegaWrap .owner-mega-sheet,
    #ownerResourcesMegaWrap .owner-mega-sheet {
        width: min(560px, calc(100vw - 32px)) !important;
    }

    .owner-mega-left-company {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid rgba(15, 23, 42, 0.10);
        padding-bottom: 32px;
    }

    .owner-mega-grid {
        grid-template-columns: 1fr;
    }

    .owner-mega-sheet {
        padding: 30px 20px 40px;
    }

    .owner-mega-right-cards {
        grid-template-columns: 1fr;
    }
}

/* Tablet band above the 768px hamburger switch: 5 nav links + logo +
   actions ("Login" / "Get a free demo") don't fit an 800px-wide header at
   the desktop link spacing -- .owner-actions was pushed 19px past the
   viewport edge. Tighten link gap/padding to reclaim that room instead of
   moving the hamburger breakpoint itself. */
@media (min-width: 769px) and (max-width: 1024px) {
    .owner-nav {
        gap: 2px;
    }

    .owner-nav-link {
        padding: 8px 7px;
        font-size: 14px;
    }

    .owner-actions {
        gap: 10px;
    }

    .owner-header .btn-primary {
        padding: 9px 14px;
    }
}

@media (max-width: 768px) {
    .owner-header-inner {
        padding: 12px 0;
    }

    .owner-nav {
        display: none;
    }

    .owner-mega-overlay {
        top: 60px;
    }
}

@media (max-width: 640px) {
    .owner-mega-right-cards {
        gap: 16px;
    }

    .owner-company-title {
        font-size: 13px;
    }
}

/* =========================
   CRITICAL OVERRIDES
   Ensuring nothing breaks the design
========================= */

/* .owner-mega-sheet (the visible white card) stays sharp/opaque --
   .owner-mega-overlay (the backdrop behind/around it) is deliberately
   translucent + blurred instead, matching the reference: see the
   dedicated rule further down this file. Older copies of this block used
   to force .owner-mega-overlay opaque too, fighting that rule and
   leaving the page behind it fully hidden instead of blurred-through. */
.owner-mega-sheet {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: #ffffff !important;
    background-image: none !important;
}

/* NO gap between header and mega menu */
.owner-mega-overlay {
    margin-top: 0 !important;
    border-top: none !important;
}

/* Seamless connection */
#ownerHeader {
    position: sticky;
    top: 0;
    z-index: 999999 !important;
}

.owner-mega-overlay {
    z-index: 999998 !important;
}

/* =========================
   Container 1440 System
========================= */

.container-1482 {
    width: 100%;
    max-width: 1482px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* Large desktops (≥1440px) */
@media (min-width: 1440px) {
    .container-1482 {
        padding-left: 32px;
        padding-right: 32px;
    }
}

/* Tablets & small laptops */
@media (max-width: 1024px) {
    .container-1482 {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .container-1482 {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* =========================
   BUTTONS
========================= */

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 24px;
    background: var(--gradient);
    color: var(--text-white);
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    will-change: transform;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(1, 91, 248, 0.4);
}

.btn-dark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: #111;
    color: #fff;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}

/* =========================
   UTILITIES
========================= */

a {
    text-decoration: none !important;
}

.d-flex {
    display: flex;
    gap: 10px;
}

.fs-14 {
    font-size: 14px !important;
}

/* Card 1: Image + text overlay like Owner -- sizing/radius/border all come
   from the shared .owner-company-card base now, this only adds the image. */

/* Full image fills the card */
.owner-company-card--overlay .owner-company-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Overlay gradient + text */
.owner-company-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px;
    background: linear-gradient(to top,
            rgba(2, 6, 23, 0.78),
            rgba(2, 6, 23, 0.10));
}

.owner-company-card--overlay .owner-company-title {
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
}

/* =========================
   MOBILE NAVIGATION
   Hamburger toggle + slide-down panel, shown only ≤768px where
   .owner-nav is hidden (see the existing @media max-width:768px rule).
========================= */

.owner-mobile-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0;
    margin-left: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    z-index: 1000000;
}

.owner-mobile-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: #0b0f14;
    border-radius: 2px;
    transition: transform 200ms ease, opacity 200ms ease;
}

.owner-mobile-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.owner-mobile-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.owner-mobile-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.owner-mobile-nav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999997;
    background: #ffffff;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.owner-mobile-nav.is-open {
    display: block;
}

.owner-mobile-nav-inner {
    max-width: 640px;
    margin: 0 auto;
    padding: 96px 24px 40px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.owner-mobile-link,
.owner-mobile-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 4px;
    font-size: 17px;
    font-weight: 600;
    color: #0b0f14;
    text-decoration: none;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    text-align: left;
    cursor: pointer;
}

.owner-mobile-caret {
    width: 10px;
    height: 10px;
    border-right: 2px solid #0b0f14;
    border-bottom: 2px solid #0b0f14;
    transform: rotate(45deg);
    transition: transform 200ms ease;
    flex-shrink: 0;
}

.owner-mobile-group-toggle[aria-expanded="true"] .owner-mobile-caret {
    transform: rotate(-135deg);
}

.owner-mobile-submenu {
    display: none;
    flex-direction: column;
    padding: 4px 4px 12px 16px;
}

.owner-mobile-submenu.is-open {
    display: flex;
}

.owner-mobile-submenu a {
    padding: 12px 4px;
    font-size: 15px;
    font-weight: 500;
    color: #475569;
    text-decoration: none;
}

.owner-mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 20px;
}

.owner-mobile-login {
    text-align: center;
    padding: 14px;
    font-size: 16px;
    font-weight: 600;
    color: #0b0f14;
    text-decoration: none;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 10px;
}

.owner-mobile-demo.btn-primary {
    text-align: center;
    padding: 14px;
    font-size: 16px;
}

body.owner-mobile-nav-locked {
    overflow: hidden;
}

@media (max-width: 768px) {
    .owner-mobile-toggle {
        display: flex;
    }

    /* Login/Get-a-free-demo now live inside the mobile nav panel too --
       hide the desktop copy so it doesn't crowd the collapsed header
       row (logo + hamburger only) and push the toggle off-screen. */
    .owner-actions {
        display: none;
    }
}
/* =========================
   PRODUCT MEGA MENU v2 -- categorized columns + two case-study cards
   (mirrors a reference competitor layout: category headers over compact
   icon+label rows, two columns, two stacked photo cards on the right)
========================= */
/* .owner-mega-sheet's background is set with !important a couple
   hundred lines up (part of a "kill any accidental blur/transparency
   on dropdowns" rule) -- match that specificity/importance here or
   this light-gray tone can never win. */
/* Reference sheet is plain white, not off-white -- the gray comes only from
   the translucent backdrop strip behind it (further down this file). */
/* Whole dropdown scaled down ~18% across the board in an earlier pass
   (sheet width, padding, icons, type, row spacing) -- at 1500px max-width
   with 24px icons/16px titles it read as noticeably larger than the
   reference. Still ran bigger than the reference after that pass, so
   scaled down roughly another 15% here on top of it. */
.owner-mega-sheet {
    background-color: #ffffff !important;
    padding: 30px 26px 34px;
}

/* Right column is a fixed 270px (the story cards' own requested width)
   rather than a flexible fraction, so the cards render at their exact
   270x215 size instead of stretching to fill whatever the fraction
   happens to resolve to at a given sheet width. */
.owner-mega-content:not(.owner-mega-content-company) {
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: 36px;
}

.owner-mega-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px 30px;
}

.owner-mega-category {
    display: flex;
    flex-direction: column;
}

/* Measured directly against the reference: its label ("G" in "Grow online
   sales") and item text ("O" in "Online Ordering") cap-heights are 14px and
   15px -- almost the same size, 0.58x and 0.63x of its 24px icon. The
   label reading smaller is mostly its lighter grey/500-weight doing the
   work, not a big font-size drop. Scaled down again along with the icon
   size below (20px -> 18px). */
.owner-mega-cat-label {
    font-size: 14px;
    font-weight: 500;
    color: #9a9c9f;
    letter-spacing: 0.01em;
    margin: 0 0 20px;
}

/* Item padding was 17px, giving a much taller row spacing than the
   reference (measured: item-to-item step is only ~2x icon height, i.e.
   ~12px above/below a 24px icon, not 17px). Left as-is it would have made
   five-item categories run far taller than the reference's own five-item
   columns. */
.owner-mega-item-sm {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #0f172a;
    padding: 7px 4px;
    border-radius: 9px;
    transition: background 160ms ease, opacity 160ms ease;
}

/* Brand-blue highlight (matching the CTA button color) instead of a
   neutral grey, so the active item reads as "selected" the same way the
   reference uses its own black brand color for the same purpose. */
.owner-mega-item-sm:hover {
    background: linear-gradient(90deg, rgba(1, 208, 252, 0.12) 0%, rgba(1, 91, 248, 0.12) 100%);
}

.owner-mega-item-sm:hover .owner-ico-sm {
    color: var(--primary-blue, #015bf8);
}

/* Spotlight effect: hovering an item dims only the other items within its
   own category, leaving every other category untouched -- scoped to
   .owner-mega-category (not the whole .owner-mega-columns grid) so hovering
   inside one category never affects the other three. The hovered item is
   excluded back to full opacity by the higher-specificity rule below. */
.owner-mega-category:hover .owner-mega-item-sm {
    opacity: 0.45;
}

.owner-mega-category:hover .owner-mega-item-sm:hover {
    opacity: 1;
}

.owner-ico-sm {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #787A7D;
    transition: color 160ms ease;
}

.owner-ico-sm svg {
    width: 18px;
    height: 18px;
}

.owner-title-sm {
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.3;
}

/* Right column: two stacked case-study cards, each pinned to a fixed
   270x215 size (requested size) rather than stretching to fill the
   column's height. */
.owner-mega-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    margin-top: 0;
    position: relative;
}

/* The reference separates the categories from the story cards with a
   thin vertical rule centered in the gap between them, rather than
   leaving that as plain whitespace. */
.owner-mega-right::before {
    content: '';
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: -18px;
    width: 1px;
    background: #e7e7e8;
}

.owner-story-card-sm {
    width: 270px;
    height: 215px;
    flex: none;
    max-height: none;
    /* .owner-story-card (base) already sets overflow:hidden and a border,
       but at 1px/0.10 opacity it barely reads against a photo -- thickened
       and darkened it a step here, and bumped the radius up. */
    border-radius: 18px;
    /* 1.5px renders identically to 1px at DPR 1 (Chromium/most browsers
       don't sub-pixel-render border-width) -- 2px is the smallest step
       that's actually visibly thicker than the base card's 1px border. */
    border: 2px solid rgba(15, 23, 42, 0.16);
}

.owner-story-card-sm .owner-story-img {
    min-height: 0;
}

.owner-story-card-sm .owner-story-overlay {
    padding: 16px 18px 16px;
}

.owner-story-card-sm .owner-story-title {
    font-size: 14px;
    max-width: 96%;
}

/* 992px -> 1080px: at the larger item/label font sizes above, the two-
   column layout's per-column width at 993-1080px wasn't wide enough for
   the longer item labels ("Branded Car Detailing App", "Push Notifications
   Marketing") to stay on one line. */
@media (max-width: 1150px) {
    /* Re-declared with matching :not() specificity so this still beats
       the unconditional desktop .owner-mega-content:not(...) rule above
       at narrow widths (equal-specificity selectors resolve by source
       order, and the plain .owner-mega-content{grid-template-columns:1fr}
       rule elsewhere in this file is not specific enough to win alone). */
    .owner-mega-content:not(.owner-mega-content-company) {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .owner-mega-columns {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .owner-mega-right {
        flex-direction: row;
        height: auto;
    }

    .owner-story-card-sm {
        height: 150px;
    }

    .owner-story-card-sm .owner-story-img {
        min-height: 150px;
    }
}

/* The overlay strip stays full viewport width (it's just the
   positioning backdrop below the header) -- but the visible sheet
   card inside it is contained to a max-width and centered, like the
   reference: a floating rounded panel with visible side margins,
   not a banner that runs edge-to-edge across the whole site. */
.owner-mega-overlay {
    width: 100% !important;
    /* A flat 40px side padding only reads as a visible margin on very
       wide (1920px+) screens -- below that (1440/1536/1600, the most
       common laptop widths) it left the panel looking edge-to-edge
       again since max-width:1500 on the sheet never actually kicked
       in. Scale the padding with viewport width instead so there's a
       real visible gutter at every common desktop size. */
    padding: 0 clamp(40px, 8vw, 220px) !important;
    box-sizing: border-box !important;
    /* Without an explicit height this box only grows to fit the sheet, so
       the blur stopped a few hundred px below the header -- everything
       further down the page (checked against the reference screenshot)
       stayed sharp. On the reference the blur runs the full remaining
       viewport height: open the menu and the whole page behind it goes
       hazy, not just a strip behind the panel. bottom:0 on a
       position:fixed box with top already set makes it stretch the rest
       of the way to the viewport edge. The .owner-mega-sheet card itself
       (the actual white content panel) stays fully solid regardless --
       only this backdrop around/behind it is translucent+blurred. */
    bottom: 0 !important;
    /* Was rgba(247,247,248,0.55) -- a near-white tint at that opacity reads
       as plain white (i.e. no visible change at all) against the mostly
       white/light backgrounds used across this site, even where
       backdrop-filter *is* blurring things underneath: there's no color
       or shape left to blur into something visible. A darker, more opaque
       veil dims the page behind unmistakably on its own, with blur (where
       supported) adding the frosted softness on top. */
    background: rgba(17, 24, 39, 0.35) !important;
    background-image: none !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
}

.owner-mega-sheet {
    width: 100% !important;
    max-width: 1040px !important;
    margin: 16px auto 0 !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 50px rgba(2, 6, 23, 0.16) !important;
}