/* RESET & BASE TYPOGRAPHY ------------------------------------------------ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
}
html {
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-size: 16px;
}
*, *:before, *:after {
    box-sizing: inherit;
}
body {
    background: var(--accent, #F0F4F9);
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    color: var(--primary, #1C2331);
    font-size: 1rem;
    line-height: 1.7;
    min-height: 100vh;
    overflow-x: hidden;
}
:root {
    --primary: #1C2331;
    --secondary: #3584A7;
    --accent: #F0F4F9;
    --brand-orange: #FF715B;
    --brand-pink: #F4436C;
    --brand-yellow: #FED600;
    --creative-blue: #82ADEB;
    --creative-green: #47D8B3;
    --creative-violet: #785AAD;
    --white: #fff;
    --shadow-card: 0 6px 32px 0 rgba(40, 56, 92, 0.12);
    --shadow-light: 0 2px 8px 0 rgba(35, 40, 60, 0.06);
    --radius: 18px;
    --transition: 0.22s cubic-bezier(.82, -0.02, .26, 1.09);
    --gap-global: 24px;
}
img {
    max-width: 100%;
    display: inline-block;
}
a {
    color: var(--secondary);
    text-decoration: none;
    transition: color .18s;
}
a:hover, a:focus {
    color: var(--brand-pink);
    outline: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Oswald', 'Arial Black', Arial, sans-serif;
    letter-spacing: .03em;
    color: var(--primary);
}
h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 18px;
}
h2 {
    font-size: 2rem;
    margin-bottom: 16px;
    font-weight: 700;
}
h3 {
    font-size: 1.35rem;
    margin-bottom: 10px;
    font-weight: 600;
}
h4, h5, h6 {
    font-size: 1.1rem;
    font-family: inherit;
}
p, li {
    font-size: 1rem;
}
ul, ol { margin-left: 22px; }

strong, b { font-weight: 700; }
em, i { font-style: italic; }

hr {
    border: 0;
    border-top: 1px solid #e2e5ef;
    margin: 32px 0;
}

/* LAYOUT CONTAINERS --------------------------------------------------- */
.container {
    width: 100%;
    max-width: 1216px;
    margin: 0 auto;
    padding: 0 18px;
    box-sizing: border-box;
}
.content-wrapper {
    margin-bottom: 60px;
    padding: 40px 20px;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: var(--gap-global);
}

@media (max-width: 900px) {
    .container { max-width: 99vw; }
    .content-wrapper { padding: 28px 6px; }
}

@media (max-width: 620px) {
    .container { padding: 0 6px; }
    .content-wrapper { padding: 22px 2px; }
}

/* HEADER & NAVIGATION ------------------------------------------------- */
header {
    background: linear-gradient(90deg, var(--brand-yellow), var(--brand-orange) 65%, var(--brand-pink) 90%);
    color: var(--primary);
    box-shadow: var(--shadow-light);
    position: relative;
    z-index: 60;
}
header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    padding-bottom: 14px;
}
header img {
    height: 48px;
    max-height: 48px;
    margin-right: 20px;
}

/* MAIN NAVIGATION (DESKTOP) */
.main-nav {
    display: flex;
    align-items: center;
    gap: 20px;
}
.main-nav a {
    font-family: 'Oswald', Arial, sans-serif;
    font-size: 1.16rem;
    color: var(--primary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 600;
    background: none;
    border-radius: 10px;
    padding: 7px 14px;
    transition: background .16s, color .16s;
}
.main-nav a:hover, .main-nav a:focus {
    background: var(--brand-pink);
    color: var(--white);
}

.cta-btn {
    background: linear-gradient(90deg, var(--brand-pink) 40%, var(--brand-yellow) 100%);
    color: var(--primary);
    border: none;
    font-family: 'Oswald', Arial, sans-serif;
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 11px 32px;
    margin-left: 24px;
    border-radius: 48px;
    box-shadow: 0 4px 16px 0 rgba(255, 113, 91, 0.05);
    cursor: pointer;
    transition: background .19s, color .19s, transform var(--transition);
    outline: none;
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 16px #fff4ee88;
}
.cta-btn:hover, .cta-btn:focus {
    background: linear-gradient(90deg, var(--brand-yellow) 0%, var(--brand-pink) 95%);
    color: var(--white);
    transform: translateY(-2px) scale(1.04);
}

/* ---- MOBILE MENU ---------------------------------------------------- */
.mobile-menu-toggle {
    display: none;
    background: var(--brand-pink);
    color: var(--white);
    border: none;
    font-size: 2rem;
    padding: 7px 18px;
    border-radius: 16px;
    cursor: pointer;
    margin-left: 18px;
    transition: background .14s, color .14s, transform .11s;
}
.mobile-menu-toggle:focus,
.mobile-menu-toggle:hover {
    background: var(--brand-yellow);
    color: var(--primary);
    outline: none;
}

.mobile-menu {
    position: fixed;
    top: 0; left: 0; bottom: 0; right: 0;
    background: rgba(28,35,49,0.96);
    z-index: 250;
    transform: translateX(100vw);
    transition: transform .24s var(--transition) 0s;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0;
    visibility: hidden;
}
.mobile-menu.open {
    transform: translateX(0);
    visibility: visible;
}
.mobile-menu-close {
    background: transparent;
    color: var(--white);
    border: none;
    font-size: 2.35rem;
    margin: 24px 32px 25px auto;
    cursor: pointer;
    transition: color .13s;
    outline: none;
}
.mobile-menu-close:hover, .mobile-menu-close:focus {
    color: var(--brand-yellow);
}
.mobile-nav {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-left: 38px;
    padding-right: 38px;
    gap: 19px;
}
.mobile-nav a {
    color: var(--white);
    font-family: 'Oswald', Arial, sans-serif;
    font-size: 1.38rem;
    font-weight: 500;
    letter-spacing: .08em;
    padding: 10px 0 10px 0;
    border-bottom: 1px solid #505874;
    margin-bottom: 4px;
    transition: color .12s;
}
.mobile-nav a:last-child {
    border-bottom: none;
}
.mobile-nav a:hover, .mobile-nav a:focus {
    color: var(--brand-yellow);
}

@media (max-width: 1100px) {
    .main-nav, .cta-btn { display: none; }
    .mobile-menu-toggle { display: inline-block; }
}

@media (max-width: 700px) {
    .mobile-menu-close {
        font-size: 2rem;
        margin: 14px 11px 10px auto;
    }
    .mobile-nav {
        padding: 16px 14px;
        gap: 10px;
    }
}

/* ----- RESPONSIVE NAV ------------------------------------------------ */
@media (min-width: 1101px) {
    .mobile-menu, .mobile-menu-toggle { display: none !important; }
}

/* ================= SECTION SPACING & STYLES ========================= */
section {
    margin-bottom: 60px;
    padding: 40px 20px;
    position: relative;
    z-index: 10;
}
@media (max-width: 780px) {
    section {
        padding: 22px 0;
        margin-bottom: 38px;
    }
}

/* ================= FLEXBOX LAYOUTS ================================== */
.feature-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    list-style: none;
    align-items: flex-start;
    margin: 0 0 0 0;
}
.feature-grid li {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    background: var(--creative-blue);
    color: var(--primary);
    border-radius: 14px;
    padding: 18px 22px;
    font-size: 1.04rem;
    min-width: 240px;
    box-shadow: 0 3px 16px #82adeb12;
    font-family: 'Roboto', Arial, sans-serif;
    position: relative;
    z-index: 1;
    margin-bottom: 20px;
    transition: box-shadow .18s, transform .21s;
}
.feature-grid li img {
    width: 40px;
    height: 40px;
}
.feature-grid li:hover, .feature-grid li:focus {
    box-shadow: 0 8px 28px #785aad31;
    transform: translateY(-2px) scale(1.045);
}

.card-container, .card-grid, .service-cards, .article-cards,
.review-cards, .guide-cards, .analysis-cards, .highlighted-articles-list {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}
.card, .service-card, .article-cards article, .review-cards article,
.guide-cards article, .analysis-cards article, .highlighted-articles-list article {
    margin-bottom: 20px;
    position: relative;
    flex: 1 1 280px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    background: var(--white);
    padding: 24px 20px 30px 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 14px;
    transition: box-shadow .19s, transform .22s;
    border-left: 8px solid var(--brand-pink);
    min-width: 260px;
}
.card:hover, .service-card:hover, .article-cards article:hover,
.review-cards article:hover, .guide-cards article:hover,
.analysis-cards article:hover, .highlighted-articles-list article:hover {
    box-shadow: 0 10px 40px #3584A71a;
    transform: scale(1.036) translateY(-4px);
    border-left: 8px solid var(--brand-yellow);
}
.service-price {
    color: var(--brand-pink);
    font-size: 1.1rem;
    font-weight: 700;
}

.content-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}
.text-image-section {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}
@media (max-width: 768px) {
    .text-image-section {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
}

.testimonial-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    margin-bottom: 20px;
    background: var(--creative-green);
    border-radius: 15px;
    box-shadow: 0 3px 16px #47d8b310;
    color: var(--primary);
    font-size: 1.12rem;
    position: relative;
    flex-direction: column;
    font-family: 'Roboto', Arial, sans-serif;
    transition: box-shadow .17s, background .18s;
}
.testimonial-card:hover {
    box-shadow: 0 11px 36px #3584a710;
    background: var(--creative-violet);
    color: var(--white);
}
.testimonial-author {
    font-family: 'Oswald', Arial, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--brand-pink);
    margin-top: 2px;
    align-self: flex-end;
}
/* Ensure testimonials readable */
.testimonial-card p, .testimonial-card span {
    color: var(--primary);
    text-shadow: 0 1px 8px #fff8;
}
.testimonial-card:hover p, .testimonial-card:hover span {
    color: var(--white);
    text-shadow: 0 2px 12px #1C233197;
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

/* Filter, Sort & Controls --------------------------------------------- */
.filter-sort-controls {
    display: flex;
    flex-direction: row;
    gap: 18px;
    margin: 16px 0 2px 0;
    align-items: flex-start;
}
.filter-sort-controls button {
    background: var(--creative-violet);
    color: var(--white);
    border: none;
    border-radius: 13px;
    font-family: 'Oswald', Arial, sans-serif;
    font-size: 1.01rem;
    font-weight: 600;
    letter-spacing: .01em;
    padding: 8px 24px;
    cursor: pointer;
    box-shadow: 0 2px 6px #785aad15;
    transition: background .16s, color .13s, transform .13s;
}
.filter-sort-controls button:hover, .filter-sort-controls button:focus {
    background: var(--brand-yellow);
    color: var(--primary);
    transform: scale(1.09) translateY(-2px);
    outline: none;
}

/* ======= LISTS & DISPLAY VARIANTS =================================== */
.highlighted-articles-list, .article-cards, .review-cards, .guide-cards, .analysis-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}
.highlighted-articles-list article, .article-cards article, .review-cards article, .guide-cards article, .analysis-cards article {
    flex: 1 1 290px;
    margin-bottom: 20px;
    background: var(--accent);
    border-radius: var(--radius);
    border-left: 8px solid var(--brand-orange);
    box-shadow: var(--shadow-light);
    padding: 20px 18px 24px 18px;
    transition: box-shadow .13s, border-left .18s, background .19s, transform .15s;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.highlighted-articles-list article:hover, .article-cards article:hover, .review-cards article:hover, .guide-cards article:hover, .analysis-cards article:hover {
    box-shadow: 0 6px 28px #F4436C60;
    background: var(--brand-yellow);
    border-left: 8px solid var(--brand-pink);
    transform: translateY(-2px) scale(1.03);
}
.highlighted-articles-list article a, .article-cards article a, .review-cards article a, .guide-cards article a, .analysis-cards article a {
    font-weight: 600;
    color: var(--brand-pink);
    font-family: 'Oswald', Arial, sans-serif;
    font-size: 1.11rem;
    margin-top: 10px;
    transition: color .12s;
}
.highlighted-articles-list article a:hover, .article-cards article a:hover, .review-cards article a:hover, .guide-cards article a:hover, .analysis-cards article a:hover {
    color: var(--brand-yellow);
}

/* NEWSLETTER SECTIONS */
main section:last-child, .newsletter-section {
    background: linear-gradient(90deg, var(--accent) 60%, var(--creative-blue) 100%);
    box-shadow: 0 2px 12px #47d8b342;
    border-radius: var(--radius);
}

/* ===================== FOOTER ======================================= */
footer {
    background: var(--primary);
    color: var(--white);
    padding: 38px 0 16px 0;
    font-size: 1rem;
    font-family: 'Roboto', Arial, sans-serif;
    z-index: 20;
    margin-top: 48px;
}
footer .container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 32px;
    justify-content: space-between;
}
footer nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
footer nav a {
    color: var(--white);
    font-family: 'Oswald', Arial, sans-serif;
    font-size: 1.01rem;
    opacity: 0.94;
    margin-bottom: 1px;
    transition: color .13s;
}
footer nav a:hover, footer nav a:focus {
    color: var(--brand-yellow);
    opacity: 1;
}
footer address {
    font-size: .99rem;
    color: #C9D5E4;
    font-style: normal;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
footer img {
    max-width: 45px;
    margin-bottom: 8px;
    display: inline-block;
}

@media (max-width: 820px) {
    footer .container {
        flex-direction: column;
        gap: 22px;
        align-items: flex-start;
    }
}

/* ===================== MISC, FORMS, TEXT SECTIONS =================== */
.text-section {
    margin-bottom: 20px;
    padding-bottom: 8px;
    font-size: 1.1rem;
    letter-spacing: .01em;
}
.text-section h2, .text-section h3 {
    font-family: 'Oswald', Arial, sans-serif;
    margin-top: 18px;
}
.text-section ul {
    margin-top: 10px;
    padding-left: 21px;
    line-height: 1.8;
    list-style-type: disc;
}
.text-section li { margin-bottom: 7px; }

/* ===================== BUTTONS, INTERACTIVES ======================== */
button, .cta-btn {
    outline: none;
    border: none;
}
button:focus-visible, .cta-btn:focus-visible {
    outline: 2px dashed var(--brand-yellow);
    outline-offset: 1px;
}

/* ===================== COOKIE BANNER ================================ */
.cookie-consent-banner {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 500;
    background: var(--white);
    border-top: 4px solid var(--brand-yellow);
    box-shadow: 0 -3px 18px #1C233160;
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 22px;
    justify-content: center;
    padding: 18px 20px;
    font-size: 1.04rem;
}
.cookie-consent-banner p {
    margin: 0 16px 0 0;
    color: var(--primary);
    font-size: 1rem;
    font-weight: 500;
}
.cookie-btn,
.cookie-settings-btn {
    background: var(--brand-pink);
    color: var(--white);
    border-radius: 10px;
    padding: 8px 22px;
    margin: 0 4px;
    font-family: 'Oswald', Arial, sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .13s, color .13s, transform .12s;
    border: none;
    outline: none;
}
.cookie-btn:hover, .cookie-settings-btn:hover,
.cookie-btn:focus, .cookie-settings-btn:focus {
    background: var(--brand-yellow);
    color: var(--primary);
    transform: scale(1.06) translateY(-1px);
}
.cookie-btn.reject {
    background: var(--creative-violet);
}
.cookie-btn.reject:hover, .cookie-btn.reject:focus {
    background: var(--brand-yellow);
    color: var(--primary);
}

/* COOKIE PREFERENCES MODAL */
.cookie-modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(28,35,49, .85);
    z-index: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .2s;
    opacity: 0;
    pointer-events: none;
}
.cookie-modal-overlay.open {
    opacity: 1;
    pointer-events: auto;
}
.cookie-modal {
    background: var(--white);
    border-radius: 19px;
    box-shadow: 0 9px 56px #1c233149;
    padding: 32px 28px 22px 28px;
    width: 96vw;
    max-width: 390px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    align-items: stretch;
    animation: fadeInModal .32s var(--transition);
}
@keyframes fadeInModal {
    0% {transform: scale(.95) translateY(36px); opacity:0;}
    100%{transform: scale(1) translateY(0); opacity:1;}
}
.cookie-category {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.cookie-category label {
    flex: 1;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
}
.cookie-toggle {
    width: 40px;
    height: 22px;
    background: #ccd4d6;
    border-radius: 13px;
    position: relative;
    cursor: pointer;
    transition: background .15s;
    border: 0;
}
.cookie-toggle[aria-checked="true"] {
    background: var(--creative-green);
}
.cookie-toggle[aria-checked="true"]:before {
    left: 21px;
    background: var(--brand-yellow);
}
.cookie-toggle:before {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    width: 18px;
    height: 18px;
    background: var(--creative-blue);
    border-radius: 50%;
    transition: left .16s, background .16s;
}
.cookie-modal-title {
    font-family: 'Oswald', Arial, sans-serif;
    font-weight: 700;
    font-size: 1.32rem;
    margin-bottom: 10px;
    color: var(--primary);
}
.cookie-modal-actions {
    display: flex;
    flex-direction: row;
    gap: 16px;
    justify-content: flex-end;
    margin-top: 16px;
}
.cookie-modal-close {
    position: absolute;
    right: 18px; top: 15px;
    color: var(--brand-pink);
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    transition: color .13s;
}
.cookie-modal-close:hover, .cookie-modal-close:focus { color: var(--brand-yellow); }

/* ========== ARTISTIC and VIBRANT ELEMENTS OVERALL =================== */
body, .content-wrapper, .section {
    background: var(--accent);
    /* Subtle speckled pattern overlay for artistic effect */
    background-image: url('data:image/svg+xml;utf8,<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><circle fill="%2382ADEF" cx="8" cy="15" r="0.4"/><circle fill="%23F4436C" cx="22" cy="31" r="0.55"/><circle fill="%235784A7" cx="32" cy="6" r="0.4"/><circle fill="%23FED600" cx="17" cy="22" r="0.3"/></svg>');
    background-repeat: repeat;
    background-size: 140px 140px;
}
/* Artistic shadows and accenting border-lefts
   on cards and key blocks. */

/* Typographic artistically bold headings */
h1, h2, h3 {
    text-shadow: 0 2px 32px #3584A73a, 0 1px 0 #fff, 0 1px 3px #F0F4F9bb;
    letter-spacing: .03em;
}

/* Slightly rotated accent underline on h2 for creative feel */
h2 {
    position: relative;
}
h2:after {
    content: '';
    display: block;
    width: 35px;
    height: 5px;
    background: linear-gradient(90deg, var(--brand-yellow), var(--brand-pink));
    border-radius: 6px;
    margin-top: 7px;
    transform: rotate(-2.5deg) skewY(1.5deg);
    opacity: 0.7;
}

/* Colorful accent highlight for icons in features */
.feature-grid li img, .feature-grid li svg {
    filter: drop-shadow(0 2px 8px #47d8b377) drop-shadow(0 5px 12px #F4436C20);
}

/* ================== RESPONSIVE ADAPTATION =========================== */
@media (max-width: 950px) {
    .highlighted-articles-list article, .article-cards article, 
    .review-cards article, .guide-cards article, 
    .analysis-cards article, .card, .service-card {
        flex: 1 1 95vw;
    }
}
@media (max-width: 700px) {
    .card-container, .card-grid, .service-cards, .article-cards,
    .review-cards, .guide-cards, .analysis-cards, .highlighted-articles-list,
    .feature-grid, .content-grid {
        flex-direction: column;
        gap: 18px;
    }
    section, .section {
        padding: 10px 2px;
        margin-bottom: 30px;
    }
    .card, .service-card {
        padding: 18px 7px 22px 14px;
    }
}

/* ========== MICRO-INTERACTIONS & TRANSITIONS ======================== */
.card, .service-card, .feature-grid li {
    transition: box-shadow .19s, background .13s, transform .18s, border-left .15s;
}
.cta-btn, .filter-sort-controls button {
    transition: background .18s, color .13s, transform .12s;
}
.cta-btn:active { transform: scale(.96); }

/* =================== ACCESSIBILITY/FOCUS VISIBILITY ================= */
:focus-visible {
    outline: 2px solid var(--brand-yellow) !important;
    outline-offset: 3px;
}

/* Hide focus for mouse users */
:focus:not(:focus-visible) {
    outline: none;
}

/* =================== UTILITY CLASSES ================================ */
.mt-20 { margin-top: 20px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mb-40 { margin-bottom: 40px !important; }

.hidden { display: none !important; }

/* ========== COOKIE BANNER/CONSENT MOBILE ADAPTATION ================ */
@media (max-width: 600px) {
    .cookie-consent-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 13px 3vw;
        font-size: .98rem;
    }
    .cookie-consent-banner p {
        margin-bottom: 7px;
    }
    .cookie-modal {
        padding: 15px 4px;
        max-width: 98vw;
    }
}

/* ============================ END =================== */

/* FOR JS CLASSES: .open for mobile-menu, .cookie-modal-overlay.open for cookie modal, etc. */