/* === GALAA DESIGN — edit this file to change all visual style === */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600&display=swap');

:root {
    --fs-primary:    #ffffff;
    --fs-bg:         #000000;
    --fs-surface:    #111111;
    --fs-surface-2:  #161616;
    --fs-text:       #ffffff;
    --fs-muted:      #ffffff;
    --fs-dim:        #ffffff;
    --fs-line:       #1f1f1f;
    --fs-line-2:     #2a2a2a;
    --fs-font:       'Montserrat', sans-serif;
    --fs-radius-md:  0px;
    --fs-radius-lg:  0px;
    --fs-transition: 150ms ease;
    --fs-max:        1200px;
}

/* ── Base ── */
body { background-color: var(--fs-bg); color: var(--fs-text); }
a { color: var(--fs-text); transition: opacity var(--fs-transition); }
a:hover { opacity: .7; }
::selection { background: var(--fs-text); color: var(--fs-bg); }
*, *::before, *::after { border-radius: 0 !important; }

/* ── Nav ── */
.g-nav { background: var(--fs-bg); }
.g-nav__links a { color: var(--fs-text); opacity: .5; }
.g-nav__links a:hover, .g-nav__links a.active { opacity: 1; }
.g-nav__icons i, .g-nav__hamburger i { color: var(--fs-text); opacity: .5; }
.g-nav__icons i:hover, .g-nav__hamburger i:hover { opacity: 1; }

/* ── Cat Nav ── */
.g-cat-nav { background: var(--fs-bg); }
.g-cat-nav a { color: var(--fs-text); opacity: .5; }
.g-cat-nav a:hover { opacity: 1; }
.g-cat-nav a.active { color: var(--fs-text); border-bottom-color: var(--fs-text); opacity: 1; }

/* ── Hero ── */
.g-hero { background: var(--fs-bg); border-bottom: 0.5px solid var(--fs-line); }
.g-hero__eyebrow { color: var(--fs-text); opacity: .5; }
.g-hero__title { color: var(--fs-text); }
.g-hero__divider { background: var(--fs-text); opacity: .25; }
.g-hero__sub { color: var(--fs-text); opacity: .55; }
.g-hero__caption { font-size: 7px; letter-spacing: .2em; text-transform: uppercase; color: var(--fs-text); opacity: .3; font-family: var(--fs-font); padding: 8px 24px; text-align: right; border-bottom: 0.5px solid var(--fs-line); }

/* ── Section Header ── */
.g-sec-hd__label { color: var(--fs-text); opacity: .5; }
.g-sec-hd__line { background: var(--fs-line-2); }
.g-sec-hd__link { color: var(--fs-text); opacity: .5; }
.g-sec-hd__link:hover { opacity: 1; }

/* ── Section backgrounds ── */
.g-section { background: var(--fs-bg); }
.g-section--surface { background: var(--fs-surface); }
.g-section--surface-2 { background: var(--fs-surface-2); }
.g-grid-wrap { background: var(--fs-line); }

/* ── Cards ── */
.g-card { background: var(--fs-bg); }
.g-card__category { color: var(--fs-text); opacity: .5; }
.g-card__title { color: var(--fs-text); }
.g-card__meta { color: var(--fs-text); opacity: .4; }
.g-card--surface { background: var(--fs-surface); }

/* ── Newsletter ── */
.g-nl { background: var(--fs-surface); border-top: 0.5px solid var(--fs-line); border-bottom: 0.5px solid var(--fs-line); }
.g-nl__eyebrow { color: var(--fs-text); opacity: .5; }
.g-nl__title { color: var(--fs-text); }
.g-nl__input { background: transparent; border: 0.5px solid var(--fs-line-2); color: var(--fs-text); }
.g-nl__input::placeholder { color: var(--fs-text); opacity: .25; }
.g-nl__input:focus { border-color: rgba(255,255,255,.3); }
.g-nl__btn { background: var(--fs-text); color: var(--fs-bg); }
.g-nl__btn:hover { opacity: .85; }

/* ── Stats ── */
.g-stats { background: var(--fs-surface-2); border-top: 0.5px solid var(--fs-line); border-bottom: 0.5px solid var(--fs-line); }
.g-stat__num { color: var(--fs-text); }
.g-stat__label { color: var(--fs-text); opacity: .45; }

/* ── Feature ── */
.g-feature { background: var(--fs-surface); border-top: 0.5px solid var(--fs-line); border-bottom: 0.5px solid var(--fs-line); }
.g-feature__issue { color: var(--fs-text); opacity: .45; }
.g-feature__title { color: var(--fs-text); }
.g-feature__body { color: var(--fs-text); opacity: .55; }
.g-feature__link { color: var(--fs-text); opacity: .75; }

/* ── Magazine covers ── */
.g-covers { background: var(--fs-bg); border-top: 0.5px solid var(--fs-line); }
.g-cover { background: var(--fs-bg); }
.g-cover__issue { color: var(--fs-text); opacity: .45; }
.g-cover__title { color: var(--fs-text); }

/* ── Pricing ── */
.g-pricing { background: var(--fs-bg); border-top: 0.5px solid var(--fs-line); }
.g-pricing__eyebrow { color: var(--fs-text); opacity: .45; }
.g-pricing__title { color: var(--fs-text); }
.g-pricing__sub { color: var(--fs-text); opacity: .5; }
.g-plan { background: var(--fs-surface); }
.g-plan--featured { background: var(--fs-surface-2); border-color: rgba(255,255,255,.25) !important; }
.g-plan__badge {
    background: var(--fs-text);
    color: var(--fs-bg);
    font-family: var(--fs-font);
    font-weight: 500;
    letter-spacing: .18em;
}
.g-plan__name { color: var(--fs-text); opacity: .45; }
.g-plan__price { color: var(--fs-text); }
.g-plan__period { color: var(--fs-text); opacity: .4; }
.g-plan__feature { color: var(--fs-text); opacity: .45; }
.g-plan__feature.is-on { opacity: .85; }
.g-plan__feature strong { color: var(--fs-text); font-weight: 400; }

/* ── Pricing CTA button — B style: light weight, no arrow ── */
.g-plan__cta {
    display: block;
    width: 100%;
    padding: 13px 0;
    text-align: center;
    font-size: 9px;
    letter-spacing: .04em;
    font-weight: 300;
    font-family: var(--fs-font);
    background: transparent;
    color: var(--fs-text);
    border: none;
    border-top: 0.5px solid rgba(255,255,255,.15);
    cursor: pointer;
    opacity: .6;
    transition: opacity var(--fs-transition);
}
.g-plan__cta:hover { opacity: 1; }
.g-plan--featured .g-plan__cta {
    border-top-color: rgba(255,255,255,.25);
    opacity: .85;
}
.g-plan--featured .g-plan__cta:hover { opacity: 1; }

/* ── Topics ── */
.g-topics { background: var(--fs-bg); border-top: 0.5px solid var(--fs-line); border-bottom: 0.5px solid var(--fs-line); }
.g-topic { background: var(--fs-bg); }
.g-topic:hover { background: var(--fs-surface); }
.g-topic__num { color: var(--fs-text); opacity: .15; }
.g-topic__name { color: var(--fs-text); opacity: .5; }
.g-topic:hover .g-topic__name { opacity: 1; }

/* ── Footer ── */
.g-footer { background: var(--fs-surface); }
.g-footer__tagline { color: var(--fs-text); opacity: .3; }
.g-footer__col-title { color: var(--fs-text); opacity: .5; }
.g-footer__links a { color: var(--fs-text); opacity: .4; }
.g-footer__links a:hover { opacity: 1; }
.g-footer__copy { color: var(--fs-text); opacity: .25; }
.g-footer__social a { color: var(--fs-text); opacity: .3; }
.g-footer__social a:hover { opacity: 1; }

/* ── Page hero ── */
.g-page-hero { background: var(--fs-bg); }
.g-page-hero__eyebrow { color: var(--fs-text); opacity: .45; }
.g-page-hero__title { color: var(--fs-text); }
.g-page-hero__sub { color: var(--fs-text); opacity: .55; }

/* ── Article ── */
.g-article__kicker { color: var(--fs-text); opacity: .45; }
.g-article__title { color: var(--fs-text); }
.g-article__byline { color: var(--fs-text); opacity: .4; }
.g-article__body { color: var(--fs-text); opacity: .65; }
.g-article__body h2 { color: var(--fs-text); opacity: 1; }

/* ── Forms ── */
.g-form__label { color: var(--fs-text); opacity: .45; }
.g-form__input,
.g-form__textarea {
    border: 0.5px solid var(--fs-line);
    color: var(--fs-text);
    background: transparent;
}
.g-form__input::placeholder,
.g-form__textarea::placeholder { color: var(--fs-text); opacity: .2; }
.g-form__input:focus,
.g-form__textarea:focus { border-color: rgba(255,255,255,.25); }

/* ── Send / Submit button — B style: underline only, no arrow ── */
.g-form__submit {
    display: inline-block;
    padding: 10px 0;
    font-size: 9px;
    letter-spacing: .04em;
    font-weight: 300;
    font-family: var(--fs-font);
    background: transparent;
    color: var(--fs-text);
    border: none;
    border-bottom: 0.5px solid rgba(255,255,255,.25);
    cursor: pointer;
    opacity: .6;
    transition: opacity var(--fs-transition);
    min-width: 120px;
    text-align: left;
}
.g-form__submit:hover { opacity: 1; }

/* ── CTA button (generic) ── */
.g-cta-btn {
    display: inline-block;
    padding: 12px 32px;
    font-size: 8px;
    letter-spacing: .25em;
    text-transform: uppercase;
    font-weight: 400;
    font-family: var(--fs-font);
    border: 0.5px solid rgba(255,255,255,.3);
    background: transparent;
    color: var(--fs-text);
    cursor: pointer;
    text-decoration: none;
    opacity: .75;
    transition: opacity var(--fs-transition), border-color var(--fs-transition);
}
.g-cta-btn:hover { opacity: 1; border-color: rgba(255,255,255,.7); }

/* ── Download CTA ── */
.g-download-cta { background: var(--fs-surface); border: 0.5px solid var(--fs-line); padding: 32px; text-align: center; }
.g-download-cta__icon { font-size: 28px; color: var(--fs-text); opacity: .3; margin-bottom: 12px; }
.g-download-cta__title { font-size: 13px; font-weight: 300; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 8px; color: var(--fs-text); }
.g-download-cta__sub { font-size: 9px; color: var(--fs-text); opacity: .5; font-weight: 300; margin-bottom: 20px; }
.g-download-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    font-size: 8px;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-weight: 400;
    font-family: var(--fs-font);
    border: 0.5px solid rgba(255,255,255,.25);
    background: transparent;
    color: var(--fs-text);
    cursor: pointer;
    text-decoration: none;
    opacity: .7;
    transition: opacity var(--fs-transition);
}
.g-download-cta__btn:hover { opacity: 1; }

/* ── Subscriber gate ── */
.g-gate { border: 0.5px solid var(--fs-line); padding: 48px 32px; text-align: center; background: var(--fs-surface); }
.g-gate__icon { font-size: 24px; color: var(--fs-text); opacity: .3; margin-bottom: 16px; }
.g-gate__title { font-size: 14px; font-weight: 300; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; color: var(--fs-text); }
.g-gate__sub { font-size: 10px; color: var(--fs-text); opacity: .5; font-weight: 300; margin-bottom: 22px; }
.g-gate__btn {
    display: inline-block;
    padding: 11px 28px;
    font-size: 8px;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-weight: 400;
    font-family: var(--fs-font);
    border: 0.5px solid rgba(255,255,255,.25);
    background: transparent;
    color: var(--fs-text);
    text-decoration: none;
    opacity: .7;
    transition: opacity var(--fs-transition);
}
.g-gate__btn:hover { opacity: 1; }

/* ── Social buttons ── */
.g-social-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 0.5px solid var(--fs-line-2);
    font-size: 7px;
    letter-spacing: .15em;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--fs-text);
    text-decoration: none;
    font-family: var(--fs-font);
    opacity: .65;
    transition: opacity var(--fs-transition);
}
.g-social-btn:hover { opacity: 1; }