/* Site chrome (announcement, utility bar, main nav) and the Contact / About / FAQ pages */

/* ---------- Announcement bar ---------- */
.announce { background: #1f7f95; color: #fff; font-size: .85rem; }
.announce-inner { display: flex; align-items: center; gap: .6rem; padding-top: .45rem; padding-bottom: .45rem; }
.announce-inner > .bi { flex: none; opacity: .9; }
.announce p { margin: 0; flex: 1; line-height: 1.35; }
.announce a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.announce-close { flex: none; margin: 0; border: 0; background: transparent; color: #fff; opacity: .8; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.announce-close:hover, .announce-close:focus-visible { opacity: 1; background: rgba(255,255,255,.16); outline: none; }

/* ---------- Utility bar ---------- */
.utility { background: #2a1002; color: rgba(255,255,255,.8); font-size: .8rem; }
.utility-inner { display: flex; justify-content: space-between; align-items: center; min-height: 36px; }
.utility ul { list-style: none; display: flex; align-items: center; gap: 1.25rem; margin: 0; padding: 0; }
.utility a { color: rgba(255,255,255,.85); text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; padding: .35rem 0; }
.utility a:hover { color: #8fd6e6; }
.utility a:focus-visible { outline: 2px solid #8fd6e6; outline-offset: 2px; border-radius: 3px; }
.utility-right { gap: 1.1rem; }
.utility-social a { font-size: .95rem; }
.utility-social:first-of-type { margin-left: .25rem; padding-left: 1.1rem; border-left: 1px solid rgba(255,255,255,.18); }

/* ---------- Main nav ---------- */
.site-nav { position: sticky; top: 0; z-index: 1020; background: rgba(255,255,255,.94); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid #ebe7e4; padding: .35rem 0; }
.site-nav .navbar-brand { display: inline-flex; align-items: center; margin-right: 1.25rem; }
.site-nav .navbar-brand img { display: block; height: 32px; width: auto; }
.site-wordmark { font-weight: 800; font-size: 1.45rem; letter-spacing: -.03em; color: #351403; }
.site-nav .navbar-toggler { border: 1px solid #ebe7e4; border-radius: 10px; padding: .3rem .6rem; font-size: 1.4rem; line-height: 1; color: #351403; }
.site-nav .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(96,187,208,.4); }
.site-nav .navbar-nav > .nav-item > .nav-link { color: #3b322e; font-weight: 600; font-size: .92rem; padding: .5rem .85rem; border-bottom: 0; border-radius: 10px; text-transform: none; }
.site-nav .navbar-nav > .nav-item > .nav-link:hover { color: #351403; background: #f6f5f4; border-bottom: 0; }
.site-nav .navbar-nav > .nav-item > .nav-link.active { color: #351403; background: rgba(96,187,208,.2); border-bottom: 0; }
.site-nav .nav-link:focus-visible { outline: 2px solid #1f7f95; outline-offset: 1px; }
.site-actions { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; }
@media (min-width: 992px) { .site-actions { margin-top: 0; margin-left: 1rem; } }
.site-actions .btn { margin: 0; font-weight: 600; white-space: nowrap; }
.site-nav .btn-outline-primary { --bs-btn-color: #351403; --bs-btn-border-color: #cfc8c4; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #351403; --bs-btn-hover-border-color: #351403; --bs-btn-active-bg: #351403; --bs-btn-active-border-color: #351403; --bs-btn-active-color: #fff; border-radius: 10px; }
.site-nav .btn-primary { border-radius: 10px; }

/* account menu (native <details>: no extra JS library needed) */
.user-menu { position: relative; }
.user-menu summary { list-style: none; display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; padding: .25rem .6rem .25rem .3rem; border: 1px solid #ebe7e4; border-radius: 999px; background: #fff; font-weight: 600; font-size: .9rem; color: #351403; user-select: none; }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary:hover, .user-menu[open] summary { border-color: #60bbd0; }
.user-menu summary:focus-visible { outline: 2px solid #1f7f95; outline-offset: 2px; }
.user-avatar { width: 30px; height: 30px; border-radius: 50%; background: #351403; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 700; }
.user-menu .bi-chevron-down { font-size: .7rem; transition: transform .15s; }
.user-menu[open] .bi-chevron-down { transform: rotate(180deg); }
.user-panel { position: absolute; right: 0; top: calc(100% + .5rem); min-width: 250px; background: #fff; border: 1px solid #ebe7e4; border-radius: 14px; box-shadow: 0 16px 40px rgba(53,20,3,.16); padding: .4rem; z-index: 1030; }
@media (max-width: 991px) { .user-panel { position: static; box-shadow: none; margin-top: .5rem; } }
.user-head { display: flex; flex-direction: column; gap: .1rem; padding: .6rem .7rem .7rem; border-bottom: 1px solid #f0ece9; margin-bottom: .3rem; }
.user-head small { color: #6b625e; overflow-wrap: anywhere; }
.user-sub { align-self: flex-start; margin-top: .4rem; padding: .1rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700; text-decoration: none; }
.user-sub-ok { background: #e8f5ee; color: #1b6b3a; }
.user-sub-warn { background: #fde7e7; color: #a12727; }
.user-panel > a, .user-panel form button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .7rem; border: 0; background: none; border-radius: 9px; color: #351403; font-size: .9rem; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; margin: 0; }
.user-panel > a:hover, .user-panel form button:hover { background: #f6f5f4; }
.user-panel .bi { color: #6b625e; }

/* ---------- Shared page bits ---------- */
.page-banner { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.page-eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #1f7f95; }
.page-lead { max-width: 40rem; margin: 0; color: #6b625e; font-size: 1.05rem; }
.info-icon { flex: none; display: inline-flex; width: 44px; height: 44px; border-radius: 12px; align-items: center; justify-content: center; font-size: 1.2rem; background: rgba(96,187,208,.16); color: #1f7f95; }

/* ---------- Contact ---------- */
.info-stack { display: grid; gap: .85rem; }
.info-card { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 1.25rem; background: #fff; border: 1px solid #ebe7e4; border-radius: 16px; }
.info-card h2 { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: #6b625e; font-weight: 700; margin: 0 0 .35rem; }
.info-card p, .info-card a { font-size: .95rem; }
.info-card a { color: #351403; font-weight: 600; text-decoration: none; }
.info-card a:hover { color: #1f7f95; text-decoration: underline; }
.info-link { display: inline-block; margin-top: .4rem; color: #1f7f95 !important; }
.info-social { list-style: none; display: flex; gap: .5rem; padding: 0; margin: 0; }
.info-social a { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 50%; background: #f6f5f4; font-size: 1.05rem; }
.info-social a:hover { background: #351403; color: #fff; text-decoration: none; }
.form-card { background: #fff; border: 1px solid #ebe7e4; border-radius: 20px; padding: clamp(1.25rem, 3vw, 2rem); box-shadow: 0 12px 34px rgba(53,20,3,.07); }
.form-card h2 { font-size: 1.35rem; font-weight: 700; margin: 0 0 1.1rem; }
.form-card .form-label { font-weight: 600; font-size: .88rem; }
.form-card .form-control { border-radius: 10px; padding: .65rem .85rem; }
.form-card .form-control:focus { border-color: #60bbd0; box-shadow: 0 0 0 .2rem rgba(96,187,208,.3); }

/* ---------- FAQ ---------- */
.faq-wrap { max-width: 52rem; margin: 0 auto; }
.faq-search { position: relative; }
.faq-search .bi { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #9b918c; pointer-events: none; }
.faq-search .form-control { height: 52px; padding-left: 2.7rem; border-radius: 14px; border: 1px solid #ebe7e4; box-shadow: 0 6px 20px rgba(53,20,3,.06); }
.faq-search .form-control:focus { border-color: #60bbd0; box-shadow: 0 0 0 .2rem rgba(96,187,208,.3); }
.faq-count { min-height: 1.5rem; margin: .5rem .25rem 0; font-size: .85rem; }
.faq-group { margin-top: 1.75rem; }
.faq-group h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: #1f7f95; font-weight: 700; margin: 0 0 .75rem; }
.faq-acc { --bs-accordion-border-color: #ebe7e4; --bs-accordion-border-radius: 14px; --bs-accordion-inner-border-radius: 13px; --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(96,187,208,.35); --bs-accordion-active-bg: #f6f5f4; --bs-accordion-active-color: #351403; display: grid; gap: .6rem; }
.faq-acc .accordion-item { border: 1px solid #ebe7e4; border-radius: 14px !important; overflow: hidden; }
.faq-acc .accordion-button { font-weight: 600; color: #1c1411; background: #fff; padding: 1rem 1.25rem; }
.faq-acc .accordion-button:not(.collapsed) { background: #f6f5f4; color: #351403; box-shadow: none; }
.faq-answer { color: #3b322e; line-height: 1.7; padding: 1rem 1.25rem 1.25rem; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer a { color: #1f7f95; font-weight: 600; }
.faq-none { text-align: center; color: #6b625e; margin-top: 2rem; }
.faq-help { max-width: 52rem; margin: 2.5rem auto 0; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding: 1.5rem 1.75rem; background: #f6f5f4; border: 1px solid #ebe7e4; border-radius: 18px; }
.faq-help h2 { font-size: 1.15rem; font-weight: 700; margin: 0 0 .2rem; }
.faq-help p { margin: 0; color: #6b625e; }

/* ---------- About ---------- */
.about-h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin: .4rem 0 1rem; }
.about-story { color: #3b322e; line-height: 1.75; font-size: 1.02rem; }
.about-story p { margin-bottom: 1rem; }
.glance-card { padding: 1.4rem 1.5rem; background: #f6f5f4; border: 1px solid #ebe7e4; border-radius: 18px; }
.glance-card h3 { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: #1f7f95; font-weight: 700; margin: 0 0 1rem; }
.glance-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.glance-card li { display: flex; gap: .75rem; align-items: flex-start; }
.glance-card .bi { flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: #fff; color: #1f7f95; }
.feature-card { height: 100%; padding: 1.4rem; background: #fff; border: 1px solid #ebe7e4; border-radius: 18px; transition: transform .2s, box-shadow .2s; }
.feature-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(53,20,3,.09); }
.feature-card h3 { font-size: 1.05rem; font-weight: 700; margin: 1rem 0 .4rem; }
.feature-card p { margin: 0; color: #6b625e; font-size: .94rem; line-height: 1.6; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; counter-reset: s; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { display: flex; gap: 1rem; padding: 1.25rem; background: #fff; border: 1px solid #ebe7e4; border-radius: 18px; }
.step-num { flex: none; width: 38px; height: 38px; border-radius: 50%; background: #351403; color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.steps h3 { font-size: 1.02rem; font-weight: 700; margin: .15rem 0 .3rem; }
.steps p { margin: 0; color: #6b625e; font-size: .92rem; line-height: 1.55; }
@media (prefers-reduced-motion: reduce) { .feature-card, .user-menu .bi-chevron-down { transition: none; } .feature-card:hover { transform: none; } }

/* ---------- Terms and privacy ---------- */
.legal-layout { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 992px) { .legal-layout { grid-template-columns: 280px minmax(0, 1fr); align-items: start; } }
.legal-side { position: relative; }
@media (min-width: 992px) { .legal-side { position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow-y: auto; overflow-x: hidden; padding-right: 2px; } }
.legal-toc { background: #f6f5f4; border: 1px solid #ebe7e4; border-radius: 16px; padding: .9rem 1rem; }
.legal-toc summary { cursor: pointer; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: #1f7f95; list-style: none; }
.legal-toc summary::-webkit-details-marker { display: none; }
.legal-toc nav { margin-top: .75rem; display: grid; gap: .15rem; }
.legal-toc a { display: block; padding: .3rem .55rem; border-radius: 8px; color: #3b322e; font-size: .88rem; text-decoration: none; border-left: 2px solid transparent; }
.legal-toc a:hover { background: #fff; color: #351403; }
.legal-toc a.is-current { background: #fff; color: #351403; font-weight: 700; border-left-color: #60bbd0; }
.legal-toc-doc { font-weight: 700; color: #1c1411 !important; margin-top: .55rem; }
.legal-toc-doc:first-child { margin-top: 0; }
.legal-toc ul { list-style: none; margin: 0 0 .25rem .35rem; padding: 0; }
.legal-toc .legal-toc-sub a { padding-left: 1.2rem; font-size: .83rem; }
.legal-doc { background: #fff; border: 1px solid #ebe7e4; border-radius: 20px; padding: clamp(1.25rem, 3vw, 2.25rem); margin-bottom: 1.5rem; scroll-margin-top: 90px; }
.legal-doc-head { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; justify-content: space-between; padding-bottom: 1rem; margin-bottom: 1.25rem; border-bottom: 1px solid #ebe7e4; }
.legal-doc-head h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.02em; margin: 0; }
.legal-updated { font-size: .82rem; font-weight: 600; color: #6b625e; background: #f6f5f4; padding: .2rem .7rem; border-radius: 999px; }
.legal-body { color: #3b322e; line-height: 1.8; font-size: 1.02rem; max-width: 46rem; }
.legal-body h1, .legal-body h2, .legal-body h3, .legal-body h4 { color: #1c1411; scroll-margin-top: 90px; letter-spacing: -.01em; }
.legal-body h2 { font-size: 1.35rem; font-weight: 700; margin: 2rem 0 .75rem; }
.legal-body h3 { font-size: 1.1rem; font-weight: 700; margin: 1.5rem 0 .5rem; }
.legal-body p, .legal-body ul, .legal-body ol { margin-bottom: 1rem; }
.legal-body li { margin-bottom: .35rem; }
.legal-body a { color: #1f7f95; font-weight: 600; }
.legal-body table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .93rem; }
.legal-body th, .legal-body td { border: 1px solid #ebe7e4; padding: .55rem .75rem; text-align: left; vertical-align: top; }
.legal-body th { background: #f6f5f4; }
.legal-body blockquote { border-left: 3px solid #60bbd0; padding-left: 1rem; color: #6b625e; margin: 1rem 0; }
.legal-empty { max-width: 34rem; margin: 2rem auto; text-align: center; color: #6b625e; }
.legal-empty .bi { font-size: 2.5rem; color: #b9b0ab; }
.legal-empty h2 { font-size: 1.3rem; font-weight: 700; color: #1c1411; margin: .75rem 0 .4rem; }
@media print {
    .utility, .announce, .site-nav, .site-footer, .no-print, .hero, .page-banner { display: none !important; }
    .legal-layout { display: block; }
    .legal-doc { border: 0; padding: 0; break-inside: auto; }
    .legal-body { max-width: none; font-size: 11pt; }
    .legal-body a { color: inherit; text-decoration: underline; }
}

/* About story: formatting that editors can now add (headings, lists, links, quotes) */
.about-story h2, .about-story h3, .about-story h4 { color: #1c1411; letter-spacing: -.01em; margin: 1.5rem 0 .6rem; }
.about-story h2 { font-size: 1.4rem; font-weight: 700; } .about-story h3 { font-size: 1.15rem; font-weight: 700; } .about-story h4 { font-size: 1rem; font-weight: 700; }
.about-story > :first-child { margin-top: 0; }
.about-story ul, .about-story ol { margin-bottom: 1rem; padding-left: 1.4rem; } .about-story li { margin-bottom: .35rem; }
.about-story a { color: #1f7f95; font-weight: 600; }
.about-story blockquote { border-left: 3px solid #60bbd0; padding-left: 1rem; color: #6b625e; margin: 1rem 0; }

/* ---------- Visualization ---------- */
.chart-card { margin: 0; padding: 1.25rem; background: #fff; border: 1px solid #ebe7e4; border-radius: 18px; height: 100%; }
.chart-card figcaption { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: #1f7f95; margin-bottom: .75rem; }
.chart-box { width: 100%; min-height: 420px; }
.chart-data { margin-top: 1.5rem; }
.chart-data summary { cursor: pointer; font-weight: 600; color: #1f7f95; margin-bottom: .75rem; }

/* ---------- Accessibility ---------- */
.skip-link { position: absolute; left: .75rem; top: -4rem; z-index: 3000; background: #351403; color: #fff; padding: .6rem 1rem; border-radius: 0 0 10px 10px; font-weight: 700; text-decoration: none; transition: top .15s; }
.skip-link:focus { top: 0; color: #fff; outline: 3px solid #60bbd0; outline-offset: 2px; }
#app:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }