/* The site header and footer, shared by every page except the landing page.
 *
 * The landing page (home.html) owns the design: the floating bar that tightens into a pill once
 * the page scrolls, and the rounded footer with the brand, the two link columns and the audit
 * notice. Every other page is a standalone document with its own inline <style>, so each had
 * grown its own header and footer and none of them matched. The markup now lives once, in
 * app/static/partials/, and app/main.py writes it into each page at <!--SITE_HEADER--> and
 * <!--SITE_FOOTER-->; this file is its stylesheet and site-chrome.js its behaviour.
 *
 * Every class is `sc-` prefixed and every colour is restated as an `--sc-` token, because the
 * pages this lands in already style `.brand`, `.btn`, `.wrap`, `nav a`, `footer` and `button`
 * for their own purposes, and app.css re-themes its tokens under the light theme. Nothing here
 * reads a page token and no page rule matches an `sc-` class.
 *
 * The values are home.html's, copied rather than referenced. If the landing page's bar or footer
 * changes, change this file with it.
 */

.sc-bar-wrap, .sc-foot {
  --sc-bg: #0b0910; --sc-foot: #060509;
  --sc-gold: #daaa6a; --sc-gold-rgb: 218, 170, 106; --sc-gold-hover: #f0cfa0; --sc-gold-hi: #fff1dc;
  --sc-ink: #f2ece5; --sc-muted: #9d9187; --sc-muted-2: #7d7268; --sc-muted-3: #665d55;
  --sc-cta-ink: #241205;
  --sc-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --sc-sans: 'Manrope', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --sc-gutter: clamp(20px, 4.5vw, 64px);
  --sc-ease: cubic-bezier(.2, .7, .2, 1);
  font-family: var(--sc-sans);
  -webkit-font-smoothing: antialiased;
  letter-spacing: normal;
  box-sizing: border-box;
}
.sc-bar-wrap *, .sc-bar-wrap *::before, .sc-bar-wrap *::after,
.sc-foot *, .sc-foot *::before, .sc-foot *::after { box-sizing: border-box; }

/* ---- buttons ---- */
.sc-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 15px 30px; border-radius: 999px; border: 1px solid transparent; font: 600 12px/1 var(--sc-sans); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; text-decoration: none; cursor: pointer; transition: transform .25s var(--sc-ease), background-color .3s, color .3s, border-color .3s; }
.sc-btn-gold { background: var(--sc-gold); color: var(--sc-cta-ink); }
.sc-btn-gold:hover { background: var(--sc-gold-hover); color: var(--sc-cta-ink); transform: translateY(-1px); }
.sc-btn-gold .sc-glow { position: absolute; inset: -12px; border-radius: 999px; background: radial-gradient(ellipse, rgba(var(--sc-gold-rgb), .4), rgba(var(--sc-gold-rgb), 0) 70%); z-index: -1; animation: scGlow 2.6s ease-in-out infinite alternate; pointer-events: none; }
@keyframes scGlow { from { opacity: .35; } to { opacity: 1; } }

/* ---- floating bar ---- */
.sc-bar-wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 100; pointer-events: none; }
/* The bar is fixed, so it takes no room in the page; this does, so the page's first line starts
   below the bar rather than under it. */
.sc-bar-space { height: 80px; flex-shrink: 0; }
.sc-bar { pointer-events: auto; width: 100%; margin: 0 auto; height: 80px; display: flex; align-items: center; border: 1px solid transparent; border-radius: 0; background-color: rgba(1, 8, 6, 0); background-image: linear-gradient(180deg, rgba(1, 8, 6, .85), rgba(1, 8, 6, 0)); transition: width .55s var(--sc-ease), margin .55s var(--sc-ease), height .55s var(--sc-ease), border-radius .55s var(--sc-ease), background-color .4s ease, border-color .4s ease, box-shadow .4s ease; }
.sc-bar-inner { position: relative; width: 100%; margin: 0; padding: 0 var(--sc-gutter); display: flex; align-items: center; gap: 24px; transition: padding .55s var(--sc-ease); }
.sc-brand { display: flex; align-items: center; gap: 11px; color: var(--sc-ink); text-decoration: none; flex-shrink: 0; }
.sc-brand:hover { color: var(--sc-ink); }
.sc-brand img { width: 40px; height: 40px; object-fit: contain; filter: none; transition: width .45s ease, height .45s ease; }
.sc-brand-word { font-family: var(--sc-display); font-weight: 800; font-size: 21px; line-height: 1.2; letter-spacing: -.02em; white-space: nowrap; color: var(--sc-ink); transition: font-size .45s ease; }
.sc-brand-word em { font-style: normal; color: var(--sc-gold); }
.sc-links { display: flex; align-items: center; gap: clamp(16px, 1.8vw, 28px); margin-left: auto; }
.sc-links a { font-size: 11px; font-weight: 500; line-height: 1.55; letter-spacing: .18em; text-transform: uppercase; color: var(--sc-muted); text-decoration: none; text-shadow: none; white-space: nowrap; transition: color .25s; }
.sc-links a:hover, .sc-links a[aria-current="page"] { color: var(--sc-gold-hi); }
.sc-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.sc-head-cta { min-height: 42px; padding: 12px 22px; font-size: 11px; border-color: rgba(var(--sc-gold-rgb), .6); color: var(--sc-gold); background: transparent; }
.sc-head-cta:hover { background: rgba(var(--sc-gold-rgb), .12); color: var(--sc-gold-hover); }
.sc-cta-short { display: none; }
/* app.css styles every <button> (fill, sheen, lift on hover), so the toggle states all of it. */
.sc-nav-toggle { position: relative; display: none; width: 42px; height: 42px; margin: 0; padding: 0; overflow: visible; border-radius: 50%; border: 1px solid rgba(var(--sc-gold-rgb), .35); background: transparent; box-shadow: none; color: var(--sc-ink); align-items: center; justify-content: center; cursor: pointer; transform: none; }
.sc-nav-toggle:hover:not(:disabled) { background: transparent; box-shadow: none; transform: none; color: var(--sc-ink); }
.sc-nav-toggle::after { display: none; }
.sc-nav-toggle svg { width: 19px; height: 19px; }
.sc-nav-toggle .sc-nav-x { display: none; }
.sc-nav-open .sc-nav-toggle .sc-nav-x { display: block; }
.sc-nav-open .sc-nav-toggle .sc-nav-bars { display: none; }
.sc-scrolled .sc-bar { width: min(calc(100% - 48px), 1384px); margin-top: 12px; height: 60px; border-radius: 999px; border-color: rgba(var(--sc-gold-rgb), .24); background-color: rgba(1, 8, 6, .9); background-image: none; box-shadow: 0 20px 50px -18px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 244, 214, .06); }
.sc-scrolled .sc-bar-inner { padding: 0 9px 0 24px; }
.sc-scrolled .sc-brand img { width: 34px; height: 34px; }
.sc-scrolled .sc-brand-word { font-size: 19px; }
.sc-scrolled .sc-head-cta { background: var(--sc-gold); color: var(--sc-cta-ink); border-color: var(--sc-gold); }
@media (max-width: 1240px) {
  .sc-nav-toggle { display: inline-flex; }
  .sc-links { display: none; position: absolute; top: calc(100% + 12px); right: var(--sc-gutter); margin: 0; flex-direction: column; align-items: stretch; gap: 2px; min-width: 240px; padding: 8px; border-radius: 16px; border: 1px solid rgba(var(--sc-gold-rgb), .24); background: rgba(1, 8, 6, .97); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9); }
  .sc-links a { padding: 13px 14px; border-radius: 10px; font-size: 11.5px; }
  .sc-links a:hover { background: rgba(var(--sc-gold-rgb), .08); }
  .sc-nav-open .sc-links { display: flex; }
  .sc-actions { margin-left: auto; }
  .sc-scrolled .sc-links { right: 9px; }
}
@media (max-width: 560px) {
  .sc-bar, .sc-bar-space { height: 62px; }
  .sc-bar-inner { padding: 0 14px; gap: 10px; }
  .sc-brand img { width: 34px; height: 34px; }
  .sc-brand-word { font-size: 17px; letter-spacing: .18em; }
  .sc-head-cta { padding: 11px 15px; }
  .sc-cta-full { display: none; }
  .sc-cta-short { display: inline; }
  .sc-scrolled .sc-bar { width: calc(100% - 20px); margin-top: 10px; height: 56px; }
  .sc-scrolled .sc-bar-inner { padding: 0 6px 0 14px; }
  .sc-scrolled .sc-brand-word { font-size: 15px; }
  .sc-links, .sc-scrolled .sc-links { left: 0; right: 0; min-width: 0; }
}

/* ---- footer ----
 * `footer.sc-foot` rather than `.sc-foot` for the box itself: the content pages carry a bare
 * `footer { margin-top; border-top; padding }` rule of their own, and this has to outrank it. */
footer.sc-foot { position: relative; z-index: 8; margin: 0; border: 0; background: var(--sc-foot); border-radius: 30px 30px 0 0; box-shadow: 0 -40px 80px -20px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(var(--sc-gold-rgb), .2); padding: 60px 0 30px; color: var(--sc-ink); font-size: 15px; line-height: 1.55; text-align: left; }
.sc-foot a { color: var(--sc-gold); text-decoration: none; }
.sc-foot a:hover { color: var(--sc-gold-hover); }
.sc-foot p { color: inherit; }
.sc-wrap { width: 100%; max-width: 1360px; margin: 0 auto; padding-inline: var(--sc-gutter); }
.sc-foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; padding-bottom: 32px; border-bottom: 1px solid rgba(var(--sc-gold-rgb), .14); }
.sc-foot-brand p { margin: 12px 0 0; max-width: 400px; font-size: 13.5px; line-height: 1.7; color: var(--sc-muted-2); }
.sc-foot-brand .sc-btn { margin-top: 20px; }
.sc-foot .sc-foot-brand .sc-btn-gold { color: var(--sc-cta-ink); }
.sc-foot-col h4 { margin: 0 0 12px; font-family: var(--sc-sans); font-size: 10.5px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--sc-gold); }
.sc-foot-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.sc-foot-col li { margin: 0; padding: 0; color: inherit; }
.sc-foot-col li::before { content: none; }
.sc-foot .sc-foot-col a { color: var(--sc-muted); font-size: 13.5px; }
.sc-foot .sc-foot-col a:hover { color: var(--sc-gold-hi); }
.sc-foot-legal p { margin: 22px 0 0; font-size: 12.5px; line-height: 1.75; color: var(--sc-muted-2); max-width: 960px; }
.sc-foot-base { margin-top: 18px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 11.5px; color: var(--sc-muted-3); }
@media (max-width: 900px) { .sc-foot-grid { grid-template-columns: 1fr 1fr; } .sc-foot-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { footer.sc-foot { border-radius: 26px 26px 0 0; padding: 48px 0 26px; } .sc-foot-grid { gap: 28px; } }

/* Phones: running text is justified, as on the landing page, with hyphenation so a narrow column
 * does not open wide gaps between words. Scoped to the content pages (body.sc-prose) and the
 * footer, including each page's opening lede above <main>; the workspace app also loads this sheet, and justified text in forms and tables reads
 * worse, not better (only its sign-in card's intro and legal note are included). Headings, table
 * column headings, labels and buttons are left alone; a one-line paragraph is
 * unaffected, since the last line of justified text stays left-aligned. */
/* Phone copy on the content pages: a long paragraph carries a short version, shown only on a phone. */
.m-short { display: none; }
@media (max-width: 560px) {
  body.sc-prose span.m-full { display: none; }
  body.sc-prose span.m-short { display: inline; }
  body.sc-prose p, body.sc-prose li, body.sc-prose dd, body.sc-prose td, body.sc-prose .foot-note, .sc-foot p,
  .auth-brand p, p.auth-legal, .auth-card .status {
    text-align: justify; text-justify: inter-word; -webkit-hyphens: auto; hyphens: auto; }
}
/* ---- legal pages on a phone (body.sc-legal: terms and privacy) ----
 * A plain-language summary box (terms only) and collapsible sections, both phone-only and both
 * driven by the block at the end of site-chrome.js. The legal text itself is never shortened or
 * replaced: every section is still on the page, one tap away, and print always shows everything.
 * The sections named in body[data-keep-open] (terms 3-6, which section 1 says you acknowledge reading, and
 * privacy's own short version) never start collapsed. */
.sc-summary, .sc-expand-all, .sc-gist, .sc-legal-note { display: none; }
@media (max-width: 560px) {
  body.sc-legal .sc-summary { display: block; margin: 26px 0 6px; padding: 18px 18px 14px; border: 1px solid rgba(218, 170, 106, .35);
    border-radius: 12px; background: rgba(218, 170, 106, .06); }
  body.sc-legal .sc-summary-tag { margin: 0 0 10px; font-size: 10.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
    color: #daaa6a; text-align: left; }
  body.sc-legal .sc-summary ul { margin: 0; padding-left: 18px; }
  body.sc-legal .sc-summary li { margin: 7px 0 0; font-size: 14px; line-height: 1.6; }
  body.sc-legal .sc-summary-note { margin: 12px 0 0; font-size: 12px; line-height: 1.55; opacity: .75; }
  body.sc-legal .sc-expand-all { display: inline-flex; margin: 18px 0 0; padding: 8px 14px; border: 1px solid rgba(218, 170, 106, .45);
    border-radius: 999px; background: none; color: #daaa6a; font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .16em;
    text-transform: uppercase; cursor: pointer; }
  body.sc-legal .sc-sec-toggle { display: flex; width: 100%; align-items: center; justify-content: flex-start; gap: 0;
    margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
  body.sc-legal .sc-sec-toggle::after { content: ""; flex: 0 0 9px; width: 9px; height: 9px; margin: 0 4px 0 auto; padding-left: 0;
    border-right: 1.5px solid #daaa6a; border-bottom: 1.5px solid #daaa6a; transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; }
  body.sc-legal section.sc-shut .sc-sec-toggle::after { transform: rotate(-45deg); }
}
/* Screen only: a printed page always carries every section in full. */
@media screen and (max-width: 560px) {
  body.sc-legal section.sc-shut > :not(h2):not(.sc-gist) { display: none !important; }
  /* A section's one-line summary stays visible even while the section is collapsed. */
  body.sc-legal .sc-gist { display: block; margin: 6px 0 12px; font-size: 14px; line-height: 1.55; color: #e6c896;
    text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
  body.sc-legal .sc-gist::before { content: "In short \2014  "; font-weight: 600; color: #daaa6a; }
  body.sc-legal .sc-legal-note { display: block; margin: 22px 0 0; font-size: 12px; line-height: 1.55; opacity: .75; }
  body.sc-legal section.sc-shut { padding-bottom: 22px; }
}
@media print {
  .sc-summary, .sc-expand-all, .sc-gist, .sc-legal-note { display: none !important; }
  body.sc-legal section.sc-shut > * { display: revert !important; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-bar, .sc-bar-inner, .sc-brand img, .sc-brand-word, .sc-btn { transition: none; }
  .sc-btn-gold .sc-glow { animation: none; }
}