/* DEV-2870: relocated from resources/views/front/welcome.blade.php's inline
   <style> block. Linked AFTER public/css/branding-base.css and (when
   generated) an organization's own override -- see
   App\Actions\Organization\BrandingCssHandler. --bronze/--slate alias the
   two literal values BRANDING actually customizes (accent_color/
   primary_color); --bronze-on/--slate-on alias the paired ContrastGuard
   on-color flip (see .portal--accent .portal__cta / .booking-cta__link,
   and .portal__cta's own base rule, below) so a light org accent/primary
   doesn't render white-on-white. The hover/neutral shades have no
   corresponding org setting and stay the pre-existing literal values
   (unbranded on purpose: deriving them from the two org colors would also
   change the BASE host's rendered hex, breaking byte-compatibility with
   the pre-extraction page). */

@font-face {
    font-family: 'Canela';
    src: url('/fonts/Canela-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Canela';
    src: url('/fonts/Canela-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Graphik';
    src: url('/fonts/Graphik-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Graphik';
    src: url('/fonts/Graphik-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Graphik';
    src: url('/fonts/Graphik-Semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root {
    --bronze:        var(--brand-accent, #B8926A);
    --bronze-hover:  #a6805a;
    --bronze-on:     var(--brand-on-accent, #fff);
    --slate:         var(--brand-primary, #334155);
    --slate-hover:   #2a3749;
    --slate-on:      var(--brand-on-primary, #fff);
    --body:          var(--brand-on-surface, #1E293B);
    --muted:         #64748B;
    --faint:         #94a3b8;
    --bg:            var(--brand-surface, #ECEAE4); /* stock backdrop reads the shared surface token, not a hardcoded hex */
    --surface:       #FFFFFF;
    --rule:          rgba(51, 65, 85, 0.10);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--body);
    font-family: var(--brand-body-font, 'Graphik'), ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }

.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.page::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60rem 60rem at 85% -10%, rgba(184, 146, 106, 0.10), transparent 60%),
        radial-gradient(50rem 50rem at -10% 110%, rgba(51, 65, 85, 0.07), transparent 60%);
    pointer-events: none;
}

.nav {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
}

.nav__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
}
.nav__brand img { height: 2rem; object-fit: contain; }
.nav__brand-name {
    font-family: var(--brand-heading-font, 'Canela'), Georgia, serif;
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--slate);
    letter-spacing: 0.01em;
}

.nav__support {
    font-size: 0.75rem;
    color: var(--muted);
}
.nav__support a { color: var(--slate); font-weight: 500; }
.nav__support a:hover { color: var(--bronze); }

.hero {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem 4rem;
}

.hero__inner {
    width: 100%;
    max-width: 64rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}
@media (min-width: 880px) {
    .hero__inner {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--bronze);
    margin-bottom: 1.25rem;
}
.hero__rule {
    width: 1.75rem;
    height: 1.5px;
    background: var(--bronze);
    display: inline-block;
}

.hero__title {
    font-family: var(--brand-heading-font, 'Canela'), Georgia, serif;
    font-weight: 300;
    font-size: clamp(2.25rem, 4vw, 3.25rem);
    line-height: 1.1;
    color: var(--slate);
    margin: 0 0 1rem;
    letter-spacing: -0.01em;
}
.hero__title em {
    font-style: italic;
    color: var(--bronze);
}

.hero__lede {
    font-size: 1rem;
    color: var(--muted);
    line-height: 1.6;
    margin: 0 0 2rem;
    max-width: 28rem;
}

.hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
    font-size: 0.75rem;
    color: var(--muted);
}
.hero__meta-item { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero__meta-item svg { width: 14px; height: 14px; color: var(--bronze); }

.portals {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.portal {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(51, 65, 85, 0.06);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.portal:hover {
    border-color: rgba(184, 146, 106, 0.40);
    box-shadow: 0 12px 28px -16px rgba(51, 65, 85, 0.20);
    transform: translateY(-1px);
}

.portal__icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background: rgba(184, 146, 106, 0.10);
    color: var(--bronze);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}
.portal__icon svg { width: 18px; height: 18px; }

.portal__label {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--bronze);
    margin-bottom: 0.375rem;
}
.portal__title {
    font-family: var(--brand-heading-font, 'Canela'), Georgia, serif;
    font-weight: 400;
    font-size: 1.5rem;
    color: var(--slate);
    margin: 0 0 0.5rem;
}
.portal__desc {
    font-size: 0.875rem;
    color: var(--muted);
    line-height: 1.55;
    margin: 0 0 1.5rem;
}

.portal__cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--slate-on);
    background: var(--slate);
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
    margin-top: auto;
}
.portal__cta:hover {
    background: var(--slate-hover);
    box-shadow: 0 2px 8px rgba(51, 65, 85, 0.20);
}
.portal__cta svg { width: 14px; height: 14px; }

.portal--accent .portal__cta {
    color: var(--bronze-on);
    background: var(--bronze);
}
.portal--accent .portal__cta:hover {
    background: var(--bronze-hover);
    box-shadow: 0 2px 8px rgba(184, 146, 106, 0.30);
}

.footer {
    position: relative;
    z-index: 1;
    padding: 1.5rem 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-top: 1px solid var(--rule);
    font-size: 0.6875rem;
    color: var(--faint);
}
.footer a { color: var(--muted); }
.footer a:hover { color: var(--slate); }
.footer__powered a { color: var(--bronze); font-weight: 500; }
.footer__powered a:hover { color: var(--bronze-hover); }
.footer .sep { margin: 0 0.5rem; }

.booking-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    text-align: center;
}

.booking-cta__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bronze-on);
    background: var(--bronze);
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.booking-cta__link:hover {
    background: var(--bronze-hover);
    box-shadow: 0 2px 8px rgba(184, 146, 106, 0.30);
}
.booking-cta__link svg { width: 14px; height: 14px; }