/* 5.46 — the public preview (/explore) wears the website's chrome.
 *
 * /explore is served on theassayco.com next to the marketing pages (Caddy proxies the one path to the
 * application), so a visitor arrives from the site's header and should not feel they have left it. The
 * website was redesigned in its 2026-11-06 build; this gives the preview the same header, footer, buttons,
 * headings and colours. The preview itself — the file picker, the promise about the file, the architecture
 * renderer — is unchanged: only its chrome.
 *
 * Every rule is scoped to body.explore, so nothing here can reach the workspace. Fonts are files of this
 * application (font-src 'self'): Plus Jakarta Sans and Geist Mono, SIL OFL, licences beside them.
 */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(fonts/PlusJakartaSans-Variable.woff2) format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/GeistMono-Medium.woff2) format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/GeistMono-SemiBold.woff2) format("woff2"); }

body.explore {
  --x-ink: #0F1C22; --x-body: #3E4C53; --x-ink2: #4A5A62; --x-brand: #15803D; --x-brand-hover: #0F6A32;
  --x-mint: #F3F8F5; --x-line: #E7ECE9; --x-card: #E4EBE7; --x-btn: #D5DED9;
  --x-head: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --x-mono: "Geist Mono", ui-monospace, Menlo, Consolas, monospace;
  background: linear-gradient(180deg, var(--x-mint), #fff 520px) no-repeat, #fff;
  color: var(--x-ink);
}
html[data-theme="dark"] body.explore { background: var(--page); color: var(--ink); }

/* Header: sticky, white at 96% with blur; a menu button below 1080px. */
body.explore .x-head { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--x-line); }
body.explore .x-head-in { max-width: 1280px; margin: 0 auto; padding: 14px clamp(20px,4vw,56px); display: flex; align-items: center; gap: 24px; min-height: 72px; }
body.explore .x-brand { display: flex; flex: none; }
body.explore .x-brand img { height: 40px; width: auto; display: block; }
body.explore .x-nav { flex: 1; display: flex; align-items: center; gap: 24px; min-width: 0; }
body.explore .x-links { display: flex; align-items: center; gap: clamp(16px,1.7vw,26px); margin: 0 auto; }
body.explore .x-links a { color: var(--x-body); font: 500 15px/1.2 var(--sans); white-space: nowrap; padding: 6px 0; text-decoration: none; }
body.explore .x-links a:hover { color: var(--x-brand); }
body.explore .x-cta { flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--x-brand); color: #fff; font: 600 14.5px/1.2 var(--sans); padding: 11px 20px; border-radius: 8px; text-decoration: none; white-space: nowrap; }
body.explore .x-cta:hover { background: var(--x-brand-hover); color: #fff; }
body.explore .x-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid #DCE5E1; background: #fff; border-radius: 8px; color: var(--x-ink); cursor: pointer; font: 400 20px/1 var(--sans); }
body.explore .x-head :focus-visible, body.explore .x-foot :focus-visible { outline: 3px solid var(--x-brand); outline-offset: 3px; border-radius: 4px; }
@media (max-width: 1079.98px) {
  body.explore .x-toggle { display: inline-flex; align-items: center; justify-content: center; }
  body.explore .x-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 8px clamp(20px,4vw,56px) 20px; background: #fff; border-top: 1px solid var(--x-line); border-bottom: 1px solid var(--x-line); box-shadow: 0 24px 40px -28px rgba(15,28,34,.35); }
  body.explore .x-head.open .x-nav { display: flex; }
  body.explore .x-links { flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
  body.explore .x-links a { padding: 13px 0; border-bottom: 1px solid #EEF2F0; font-size: 16px; }
  body.explore .x-cta { margin-top: 16px; padding: 14px; font-size: 15px; }
}

/* Footer */
body.explore .x-foot { margin-top: 56px; background: #0F1C22; color: #9DB0AB; border-top: 3px solid var(--x-brand); font-family: var(--sans); }
body.explore .x-foot-in { max-width: 1280px; margin: 0 auto; padding: 56px clamp(20px,4vw,56px) 32px; display: flex; flex-direction: column; gap: 36px; }
body.explore .x-foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px; }
body.explore .x-foot-brand { display: flex; flex-direction: column; gap: 12px; max-width: 300px; font-size: 14px; line-height: 1.55; }
body.explore .x-foot-logo { align-self: flex-start; display: flex; background: #fff; border-radius: 10px; padding: 8px 12px; }
body.explore .x-foot-logo img { height: 38px; width: auto; display: block; }
body.explore .x-foot-col { display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
body.explore .x-foot-h { font: 600 12px/1.3 var(--x-mono); letter-spacing: .12em; text-transform: uppercase; color: #7FA098; margin: 0 0 4px; }
body.explore .x-foot a { color: #C3D2CE; text-decoration: none; }
body.explore .x-foot a:hover { color: #fff; }
body.explore .x-foot-legal { margin: 0; padding-top: 24px; border-top: 1px solid #22343A; font-size: 12.5px; line-height: 1.65; color: #7A918D; }
body.explore .x-foot-legal sup { font-size: .7em; line-height: 0; vertical-align: super; }

/* The page: the website's type, buttons and cards. */
body.explore .wrap { max-width: 1216px; padding: 56px 24px 24px; }
body.explore .explore-intro, body.explore .explore-cta { border: 1px solid var(--x-card); border-radius: 16px; padding: clamp(24px,4vw,40px); box-shadow: 0 30px 70px -40px rgba(15,28,34,.35); }
body.explore .explore-intro h1 { font: 800 clamp(34px,4.2vw,50px)/1.06 var(--x-head); letter-spacing: -.035em; margin: 0 0 16px; }
body.explore .explore-cta h2 { font: 700 clamp(26px,3vw,34px)/1.15 var(--x-head); letter-spacing: -.025em; }
body.explore .explore-intro .lede, body.explore .explore-cta .lede { font: 400 17px/1.6 var(--sans); }
body.explore .explore-intro .eyebrow, body.explore .explore-cta .eyebrow { font: 600 13px/1.3 var(--sans); letter-spacing: .14em; color: var(--x-brand); }
body.explore .explore-intro .eyebrow-rule, body.explore .explore-cta .eyebrow-rule { display: none; }
body.explore .explore-promise { border-radius: 12px; }
body.explore .explore-promise h2 { font: 700 15px/1.3 var(--x-head); letter-spacing: 0; text-transform: none; }
body.explore .btn-green { background: var(--x-brand); border-color: var(--x-brand); color: #fff; border-radius: 9px; font: 600 16px/1.2 var(--sans); padding: 14px 24px; }
body.explore .btn-green:hover { background: var(--x-brand-hover); border-color: var(--x-brand-hover); }
body.explore .btn-green:disabled { opacity: .55; }
body.explore .btn-ghost { border-radius: 9px; }
body.explore .explore-bar { border-radius: 12px; }
html[data-theme="dark"] body.explore .explore-intro h1, html[data-theme="dark"] body.explore .explore-cta h2 { color: var(--ink); }
body.explore #app { padding-bottom: 0; }
body.explore #app-inner { min-height: 100vh; display: flex; flex-direction: column; }
body.explore #app-inner > .x-foot { margin-top: auto; }
body.explore #app-inner > main { width: 100%; margin-bottom: 56px; }
body.explore .x-foot p { margin: 0; }
body.explore .explore-intro .eyebrow, body.explore .explore-cta .eyebrow { text-transform: uppercase; }
body.explore .explore-intro .eyebrow-t, body.explore .explore-cta .eyebrow-t { text-transform: uppercase; }
body.explore .explore-intro .trust-pill { max-width: 100%; margin-bottom: 10px; }