/* Ermes Investor Data Room — shared site CSS.
   Keyframes and page chrome consolidated from the three design pages
   (_design/Access Gate.dc.html, Investor Data Room.dc.html, Restricted Data Room.dc.html).
   Element-level visuals stay inline in the templates; this file holds what was
   previously each page's <style> block plus the classes driven by manifest data
   and JS (document cards, nav, loader, modal, admin). */

/* Every hash target sits under the sticky nav, whose height shell.js publishes as
   --nav-height because the nav wraps on narrow screens. Insetting the scrollport
   once covers anchors, in-page CTAs and scrollIntoView without per-element rules. */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-height, 72px) + 12px); }
::selection { background: #E62D22; color: #fff; }

body.gate-page,
body.page-data-room,
body.page-restricted,
body.page-admin {
  margin: 0;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
body.gate-page { background: #FAF8F8 url('/static/img/backgrounds/dot-grid.png') repeat; color: #303439; }
body.gate-page a { color: #E62D22; text-decoration: none; }
body.gate-page a:hover { color: #D12719; }
body.gate-page input, body.gate-page textarea, body.gate-page select, body.gate-page button { font: inherit; color: inherit; }
body.gate-page input::placeholder, body.gate-page textarea::placeholder { color: #9AA0A4; }

body.page-data-room, body.page-admin { background: #FAF8F8; color: #303439; }
body.page-data-room a, body.page-admin a { color: #E62D22; text-decoration: none; }
body.page-data-room a:hover, body.page-admin a:hover { color: #D12719; }

body.page-restricted { background: #1E2124; color: #fff; }
body.page-restricted a { color: #fff; text-decoration: none; }

/* ---- Keyframes (union of all design pages) ---- */
@keyframes erise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes efade { from { opacity: 0; } to { opacity: 1; } }
@keyframes eblink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@keyframes espin { to { transform: rotate(360deg); } }
@keyframes epulse { 0% { transform: scale(1); opacity: .45; } 100% { transform: scale(2); opacity: 0; } }
@keyframes edraw { to { stroke-dashoffset: 0; } }
@keyframes efloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes emarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ewipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes egrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes egrowy { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes epop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes eopen { 0% { opacity: 0; clip-path: inset(46% 12% 46% 12% round 24px); transform: scale(.97); } 60% { opacity: 1; } 100% { opacity: 1; clip-path: inset(0 0 0 0 round 24px); transform: scale(1); } }
@keyframes escrub { 0% { transform: scaleX(.04); } 100% { transform: scaleX(.34); } }
@keyframes eshackle { 0% { transform: translateY(-5px); opacity: 0; } 55% { transform: translateY(-5px); opacity: 1; } 100% { transform: none; opacity: 1; } }

/* ---- Gate ---- */
/* Border-box + dvh keep the card centred in the viewport and stop the page from
   scrolling by the shell padding when the content already fits. */
.gate-shell {
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px 16px;
}
.gate-card { box-sizing: border-box; width: 100%; max-width: 520px; padding: 28px; border-radius: 28px; }
@media (max-width: 640px) {
  .gate-shell { gap: 12px; padding: 18px 14px; }
  .gate-card { padding: 20px 16px; border-radius: 22px; }
}
.gate-spinner { display: inline-block; width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: espin .7s linear infinite; }
.gate-spinner[hidden] { display: none; }
.gate-input:focus, #gate-code:focus, #req-name:focus, #req-org:focus, #req-role:focus, #req-note:focus {
  border-color: #E62D22; background: #fff;
}

/* ---- Sticky nav (shell.html) ---- */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  min-height: 56px; padding: 8px 16px;
  background: rgba(250,248,248,.72);
  backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: 1px solid rgba(228,221,219,.8);
}
body.page-restricted .site-nav { background: rgba(30,33,36,.72); border-bottom-color: rgba(255,255,255,.1); }
.site-nav__brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.site-nav__brand img { height: 26px; width: auto; display: block; }
.site-nav__brand span { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #26292C; }
body.page-restricted .site-nav__brand span { color: #fff; }
.site-nav__links { margin-left: auto; display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.site-nav__links a { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 9999px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #6E7276; transition: .18s var(--ease); }
.site-nav__links a:hover { background: #fff; color: #26292C; box-shadow: 0 1px 2px rgba(38,41,44,.06); }
body.page-restricted .site-nav__links a { color: rgba(255,255,255,.66); }
body.page-restricted .site-nav__links a:hover { background: rgba(255,255,255,.1); color: #fff; }
.site-nav__pill:hover { background: #26292C !important; color: #fff !important; }
.site-nav__badge { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 9999px; background: #fff; border: 1px solid rgba(230,45,34,.24); color: #E62D22; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 1px 2px rgba(38,41,44,.05); }
body.page-restricted .site-nav__badge { background: #E62D22; border-color: #E62D22; color: #fff; box-shadow: 0 8px 20px -10px rgba(230,45,34,.9); }
.site-nav__dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: eblink 2.2s ease-in-out infinite; }
.site-nav__signout { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 9999px; border: 1px solid #E4DDDB; background: transparent; font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #6E7276; cursor: pointer; transition: .18s var(--ease); }
.site-nav__signout:hover { border-color: #E62D22; color: #E62D22; }
.site-nav__actions { display: inline-flex; align-items: center; gap: 6px; }
.site-nav__brand + .site-nav__actions { margin-left: auto; }

/* Phones: the nav wrapped onto three or four rows and ate the viewport. Brand and
   sign out keep the first row, the section links get a tight second one and the
   confidential badge shrinks to its dot. */
@media (max-width: 720px) {
  .site-nav { gap: 6px; min-height: 0; padding: 6px 12px; }
  .site-nav__brand { gap: 8px; }
  .site-nav__brand img { height: 22px; }
  .site-nav__brand span { font-size: 11px; letter-spacing: .05em; }
  .site-nav__actions { margin-left: auto; }
  .site-nav__links { order: 1; flex: 1 0 100%; margin-left: 0; justify-content: center; gap: 4px; }
  .site-nav__links a { height: 28px; padding: 0 9px; gap: 4px; font-size: clamp(10px, 2.6vw, 12px); white-space: nowrap; }
  .site-nav__badge { width: 28px; height: 28px; padding: 0; justify-content: center; border-radius: 50%; }
  .site-nav__badge-text { display: none; }
  .site-nav__signout { height: 28px; padding: 0 10px; font-size: 11px; }
}
body.page-restricted .site-nav__signout { border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.66); }
body.page-restricted .site-nav__signout:hover { border-color: #E62D22; color: #fff; }

/* ---- App loader ---- */
.app-loader { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 96px 12px; color: #9AA0A4; font-size: 13px; }
.app-loader__spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(230,45,34,.2); border-top-color: #E62D22; animation: espin .8s linear infinite; }

/* ---- Generic scroll reveal (data-room.js IntersectionObserver) ---- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal--in { opacity: 1; transform: none; }

/* ---- Stat cards (data room) ---- */
.stat-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding: 18px; background: #fff; border: 1px solid #EFE9E7; border-radius: 20px; box-shadow: 0 1px 2px rgba(38,41,44,.05), 0 14px 30px -22px rgba(38,41,44,.4); animation: erise .6s var(--ease) both; }

/* ---- Philosophy pillar tabs ---- */
.pillar-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px; }
.pillar-panel { margin-top: 6px; padding: 18px; border-radius: 20px; background: #FAF8F8; border: 1px solid #EFE9E7; }
.pillar-btn { text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 18px; background: #FAF8F8; border: 1px solid #EFE9E7; color: #26292C; font-family: inherit; transition: .18s var(--ease); }
.pillar-btn:hover { transform: translateY(-2px); }
.pillar-btn.is-active { background: #E62D22; border-color: #E62D22; color: #fff; box-shadow: 0 14px 30px -18px rgba(230,45,34,.9); }
.pillar-btn__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 11px; background: rgba(230,45,34,.08); color: #E62D22; }
.pillar-btn.is-active .pillar-btn__icon { background: rgba(255,255,255,.2); color: #fff; }
.pillar-btn__title { font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.pillar-btn__sub { font-size: 12px; line-height: 1.5; color: #6E7276; }
.pillar-btn.is-active .pillar-btn__sub { color: rgba(255,255,255,.85); }
/* Narrow screens: the four stacked buttons pushed the panel off-screen and a
   horizontal strip hid the last two, so they become a 2x2 grid of compact
   icon + title buttons with the panel directly under it. */
@media (max-width: 720px) {
  .pillar-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillar-btn { gap: 6px; padding: 10px; border-radius: 14px; }
  .pillar-btn:hover { transform: none; }
  .pillar-btn__icon { width: 26px; height: 26px; border-radius: 9px; }
  .pillar-btn__icon svg { width: 15px; height: 15px; }
  .pillar-btn__title { font-size: 12px; line-height: 1.25; overflow-wrap: break-word; }
  .pillar-btn__sub { display: none; }
  .pillar-panel { padding: 14px; }
}

/* ---- Funding history bar growth (restricted.js observes and adds is-grown) ---- */
.bar-grow { transform-origin: bottom; transform: scaleY(0); transition: transform .6s var(--ease); }
.bar-grow.is-grown { transform: scaleY(1); }

/* ---- Client logos carousel ---- */
.marquee-track:hover, .marquee-track:focus-within { animation-play-state: paused; }

/* ---- Hero video + trust pills ---- */
.hero-video { position: relative; width: 100%; max-width: 820px; aspect-ratio: 16/9; border-radius: 24px; overflow: hidden; background: #26292C; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 30px 60px -24px rgba(38,41,44,.7); animation: eopen 1.05s var(--ease) .2s both; }
.hero-video__el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-video__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.hero-video__play { position: relative; display: grid; place-items: center; width: 72px; height: 72px; border: 1px solid rgba(255,255,255,.28); border-radius: 9999px; background: rgba(255,255,255,.14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff; cursor: pointer; transition: .2s var(--ease); }
.hero-video__play:hover { background: #E62D22; border-color: #E62D22; transform: scale(1.06); }
.hero-video__ring { position: absolute; inset: 0; border-radius: 9999px; border: 1px solid rgba(255,255,255,.5); animation: epulse 2.8s ease-out infinite; }
.hero-video__title { font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: #fff; }
.hero-video__hint { font-size: 12px; color: rgba(255,255,255,.6); }
.hero-video__chrome { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: linear-gradient(to top, rgba(38,41,44,.9), rgba(38,41,44,0)); }
.hero-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; animation: erise .7s var(--ease) .36s both; }
.hero-pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 9999px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 12px; color: #fff; }

/* Phones: the play button, caption and chrome bar all landed on top of each other
   inside a 16:9 box barely 160px tall, and the pills wrapped 1 + 2. */
@media (max-width: 640px) {
  .hero-h1__word { line-height: 1; }
  .hero-video__overlay { gap: 8px; padding-bottom: 40px; }
  .hero-video__play { width: 52px; height: 52px; }
  .hero-video__play svg { width: 20px; height: 20px; }
  .hero-video__title { font-size: 13px; }
  .hero-video__hint { display: none; }
  .hero-video__chrome { gap: 8px; padding: 8px 10px; }
  .hero-pills { flex-direction: column; align-items: stretch; }
  .hero-pill { justify-content: center; }
}

/* ---- Document sections/cards (data room + restricted) ---- */
/* min() keeps the track floor from outgrowing the container, which is what pushed
   the section cards into a sideways-overflowing row instead of wrapping. */
.doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 12px; }
.doc-section { min-width: 0; padding: 18px; border-radius: 24px; background: #fff; border: 1px solid #EFE9E7; box-shadow: 0 1px 2px rgba(38,41,44,.05), 0 18px 40px -30px rgba(38,41,44,.5); animation: erise .6s var(--ease) both; }
.doc-section--full { grid-column: 1 / -1; }
.doc-section--dark { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 22px 44px -30px rgba(0,0,0,.9); }
.doc-section__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-bottom: 12px; }
.doc-section__code { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: rgba(230,45,34,.08); color: #E62D22; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 12px; }
.doc-section--dark .doc-section__code { background: #E62D22; color: #fff; box-shadow: 0 8px 18px -10px rgba(230,45,34,.95); }
.doc-section__title { margin: 0; font-family: 'Sora', sans-serif; font-weight: 600; font-size: 18px; letter-spacing: -.015em; color: #26292C; }
.doc-section__title--dark { color: #fff; }
.doc-section__count { margin-left: auto; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #9AA0A4; }
.doc-section__count--dark { color: rgba(255,255,255,.45); }
.doc-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 6px; }
.doc-card { min-width: 0; display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 16px; background: #FAF8F8; border: 1px solid #EFE9E7; color: inherit; text-decoration: none; transition: .18s var(--ease); cursor: pointer; }
.doc-card:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(38,41,44,.5); }
.doc-card--hero { padding: 12px; background: #E62D22; color: #fff; box-shadow: 0 12px 26px -16px rgba(230,45,34,.9); }
/* .doc-card:hover ties on specificity, so leaving `background` out here handed the
   hero card the plain card's white hover and made its white text vanish. */
.doc-card--hero:hover, .doc-card--hero:focus-visible { background: #E62D22; color: #fff; transform: translateY(-2px); box-shadow: 0 18px 34px -16px rgba(230,45,34,.95); }
.doc-card--hero:hover .doc-card__icon--hero, .doc-card--hero:focus-visible .doc-card__icon--hero { background: rgba(255,255,255,.28); color: #fff; }
.doc-card--dark { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); color: #fff; }
.doc-card--dark:hover { background: rgba(255,255,255,.11); box-shadow: 0 16px 32px -20px rgba(0,0,0,.95); }
.doc-card__icon { flex: none; width: 32px; height: 32px; border-radius: 11px; background: rgba(230,45,34,.08); color: #E62D22; display: grid; place-items: center; }
.doc-card__icon--hero { background: rgba(255,255,255,.2); color: #fff; }
.doc-card__icon--dark { background: rgba(230,45,34,.2); }
.doc-card__title { min-width: 0; overflow-wrap: break-word; font-family: 'Sora', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: -.01em; color: #26292C; }
.doc-card--hero .doc-card__title, .doc-card__title--dark { color: inherit; }
.doc-card__arrow { flex: none; margin-left: auto; }
.doc-card__arrow--dark { stroke: rgba(255,255,255,.4) !important; }
/* `body.page-* a` is more specific than `.doc-card`, so without these the hero
   card inherited the red link colour and rendered red text on its red fill. */
body.page-data-room a.doc-card, body.page-data-room a.doc-card:hover,
body.page-admin a.doc-card, body.page-admin a.doc-card:hover { color: #26292C; }
body.page-data-room a.doc-card--hero, body.page-data-room a.doc-card--hero:hover,
body.page-data-room a.doc-card--hero:focus-visible { color: #fff; }
.doc-card:focus-visible { outline: 2px solid #E62D22; outline-offset: 2px; }
.doc-card--hero:focus-visible, .doc-card--dark:focus-visible { outline-color: #fff; }

/* Two 320px cards plus the gaps need ~680px of viewport; below that stack them
   full width so the grid never scrolls sideways. */
@media (max-width: 700px) {
  .doc-grid, .doc-card-grid { grid-template-columns: minmax(0, 1fr); }
  .doc-section { padding: 14px; border-radius: 20px; }
  /* Flex-wrapping a long title pushed it, and then the file count, onto rows of
     their own. Three fixed cells keep the code, the title and the count on one
     row and let the title wrap inside its own column. */
  .doc-section__title { font-size: 16px; overflow-wrap: break-word; }
}

/* ---- Admin ---- */
.admin-panel { padding: 24px; border-radius: 24px; background: #fff; border: 1px solid #EFE9E7; box-shadow: 0 1px 2px rgba(38,41,44,.05), 0 18px 40px -30px rgba(38,41,44,.5); }
.admin-panel__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 16px; }
.admin-panel__title { margin: 0; font-family: 'Sora', sans-serif; font-weight: 600; font-size: 20px; letter-spacing: -.015em; color: #26292C; }
.admin-panel__hint { font-size: 12px; color: #9AA0A4; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th { text-align: left; padding: 8px 10px; font-family: 'Sora', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #6E7276; border-bottom: 1px solid #EFE9E7; }
.admin-table td { padding: 8px 10px; border-bottom: 1px solid #EFE9E7; vertical-align: middle; }
.admin-table__empty { color: #9AA0A4; text-align: center; padding: 24px 10px; }
.admin-table select { height: 32px; border-radius: 8px; border: 1px solid #E4DDDB; background: #FAF8F8; padding: 0 8px; font: inherit; }
.admin-table button { height: 32px; padding: 0 12px; border-radius: 8px; border: 0; background: var(--ermes-red); color: var(--ermes-white); font-family: 'Sora', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; transition: background .14s ease, transform .14s ease; }
.admin-table button:hover { background: #D12719; }
.admin-table button:active { transform: translateY(1px); }
.admin-table button:focus-visible { outline: 2px solid var(--ermes-red); outline-offset: 2px; }
.admin-table button[disabled] { background: var(--n-inactive); cursor: default; transform: none; }
/* Dimming only the body keeps the header and the pager stable while a page loads. */
.admin-table[aria-busy="true"] tbody { opacity: .5; }
.admin-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.admin-form--inline { margin-bottom: 0; }
.admin-form__field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #6E7276; }
.admin-form__field input, .admin-form__field select { height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid #E4DDDB; background: #FAF8F8; font: inherit; font-weight: 400; text-transform: none; letter-spacing: normal; color: #26292C; }
.admin-form__submit { height: 40px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--ermes-red); color: var(--ermes-white); font-family: 'Sora', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .14s ease, transform .14s ease; }
.admin-form__submit:hover { background: #D12719; }
.admin-form__submit:active { transform: translateY(1px); }
.admin-form__submit:focus-visible { outline: 2px solid var(--ermes-red); outline-offset: 2px; }
.admin-form__submit[disabled] { background: var(--n-inactive); cursor: default; transform: none; }
.admin-form__submit--ghost { background: var(--ermes-white); border: 1px solid var(--n-rule); color: var(--n-title); }
.admin-form__submit--ghost:hover { background: var(--surface-quiet); }
.admin-form__submit--ghost[disabled] { background: var(--ermes-white); color: var(--text-inactive); }

/* Small quiet controls: the events toolbar and the activity pager. */
.admin-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; margin-bottom: 12px; }
.admin-toolbar__controls { display: flex; align-items: center; gap: 8px; }
.admin-btn { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--n-rule); background: var(--ermes-white); color: var(--n-title); font-family: 'Sora', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; transition: background .14s ease, transform .14s ease; }
.admin-btn:hover { background: var(--surface-quiet); }
.admin-btn:active { transform: translateY(1px); }
.admin-btn:focus-visible { outline: 2px solid var(--ermes-red); outline-offset: 2px; }
.admin-btn[disabled] { color: var(--text-inactive); border-color: #EFE9E7; background: var(--ermes-white); cursor: default; transform: none; }
.admin-toggle { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 8px; border-radius: 999px; border: 1px solid var(--n-rule); background: var(--ermes-white); color: var(--n-text-2); font-family: 'Sora', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; }
.admin-toggle:focus-visible { outline: 2px solid var(--ermes-red); outline-offset: 2px; }
.admin-toggle__track { position: relative; flex: none; width: 26px; height: 14px; border-radius: 999px; background: var(--n-rule); transition: background .16s ease; }
.admin-toggle__thumb { position: absolute; top: 1px; left: 1px; width: 12px; height: 12px; border-radius: 50%; background: var(--ermes-white); box-shadow: 0 1px 2px rgba(38,41,44,.4); transition: transform .16s ease; }
.admin-toggle[aria-checked="true"] { color: var(--n-title); border-color: rgba(230,45,34,.35); }
.admin-toggle[aria-checked="true"] .admin-toggle__track { background: var(--ermes-red); }
.admin-toggle[aria-checked="true"] .admin-toggle__thumb { transform: translateX(12px); }
.admin-pager { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.admin-pager__page { margin-left: 4px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .04em; color: var(--text-inactive); }

/* ---- Toasts ---- */
.toast-stack { position: fixed; right: 24px; bottom: 24px; z-index: 200; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; }
.toast { pointer-events: auto; max-width: 380px; padding: 12px 16px; border-radius: 14px; background: var(--surface-ink); color: var(--text-on-ink); font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.45; cursor: pointer; box-shadow: 0 1px 2px rgba(38,41,44,.2), 0 22px 44px -24px rgba(38,41,44,.85); opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; }
.toast--in { opacity: 1; transform: none; }
.toast--error { background: var(--surface-red); color: var(--text-on-red); }
@media (max-width: 640px) {
  .toast-stack { left: 12px; right: 12px; bottom: 12px; align-items: stretch; }
  .toast { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
  .admin-toggle__track, .admin-toggle__thumb, .admin-btn, .admin-table button, .admin-form__submit { transition: none; }
}

/* ---- Document viewer modal ---- */
.docs-modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(38,41,44,.6); display: flex; align-items: center; justify-content: center; padding: 24px; animation: efade .18s ease both; }
.docs-modal { width: 100%; max-width: 760px; max-height: 88vh; display: flex; flex-direction: column; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
.docs-modal__header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 18px; border-bottom: 1px solid #EFE9E7; }
.docs-modal__title { flex: 1 1 200px; margin: 0; font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 600; color: #26292C; overflow-wrap: anywhere; }
.docs-modal__zoom { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 9999px; background: #FAF8F8; border: 1px solid #EFE9E7; }
.docs-modal__zoom-btn { min-width: 32px; height: 30px; padding: 0 10px; border: 0; border-radius: 9999px; background: transparent; color: #26292C; font-family: 'Sora', sans-serif; font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; }
.docs-modal__zoom-btn:hover { background: #F1EBE9; }
.docs-modal__zoom-btn:disabled { color: #C3C7CA; cursor: default; background: transparent; }
.docs-modal__zoom-level { min-width: 46px; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #6E7276; }
.docs-modal__download { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; margin-left: auto; border: 0; border-radius: 9999px; background: #E62D22; color: #fff; font-family: 'Sora', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 22px -12px rgba(230,45,34,.9); }
.docs-modal__close { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; border-radius: 9999px; background: #FAF8F8; color: #6E7276; cursor: pointer; }
/* `display:block` + an inner max-content track keeps a zoomed page pannable:
   a flex body with align-items:center clips the left edge once it overflows. */
.docs-modal__body { flex: 1; overflow: auto; background: #F1EBE9; padding: 16px; touch-action: pan-x pan-y pinch-zoom; -webkit-overflow-scrolling: touch; }
.docs-modal__pages { display: flex; flex-direction: column; align-items: center; gap: 12px; width: max-content; min-width: 100%; margin: 0 auto; }
.docs-modal__body canvas { display: block; box-shadow: 0 4px 14px rgba(38,41,44,.18); }
.docs-modal__spinner { width: 32px; height: 32px; border-radius: 50%; border: 3px solid rgba(230,45,34,.2); border-top-color: #E62D22; animation: espin .8s linear infinite; margin: 48px auto; }
@media (max-width: 640px) {
  .docs-modal-backdrop { padding: 0; }
  .docs-modal { max-width: none; max-height: none; height: 100%; border-radius: 0; }
  .docs-modal__header { padding: 12px 14px; }
  .docs-modal__body { padding: 10px; }
  .docs-modal__download { height: 34px; padding: 0 14px; }
}

/* ---- Leadership cards (whole card is the LinkedIn link) ---- */
/* Outranks `body.page-data-room a`, which would otherwise tint the card red. */
body.page-data-room a.leader-card, body.page-data-room a.leader-card:hover,
body.page-data-room a.leader-pill, body.page-data-room a.leader-pill:hover { color: inherit; }
.leader-card { text-decoration: none; transition: .18s var(--ease); }
.leader-card:hover { transform: translateY(-2px); }
.leader-card:focus-visible { outline: 2px solid #E62D22; outline-offset: 3px; }
.leader-card--lead:focus-visible { outline-color: #26292C; }
.leader-card__link { color: #6E7276; transition: color .18s var(--ease); }
.leader-card--lead .leader-card__link { color: #fff; opacity: .85; }
.leader-card:hover .leader-card__link { color: #E62D22; }
.leader-card--lead:hover .leader-card__link { color: #fff; opacity: 1; }
.leader-pill { transition: .18s var(--ease); }
.leader-pill:hover { transform: translateY(-1px); }

/* ---- "You have access" flag on the restricted-section CTA ---- */
.access-flag { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; border-radius: 9999px; background: rgba(91,217,138,.14); border: 1px solid rgba(91,217,138,.45); color: #6FE0A0; font-family: 'Sora', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

/* ---- Live sales dashboard card (level 2) ---- */
.live-sales { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 24px; }
.live-sales__text { flex: 1; min-width: 260px; }
.live-sales__badge { flex: none; white-space: nowrap; }
@media (max-width: 640px) {
  /* Without this the 260px text block pushed itself and then the arrow onto
     their own rows, leaving the arrow stranded under the card. */
  .live-sales { gap: 12px; padding: 18px; }
  .live-sales__text { flex: 1 1 100%; min-width: 0; order: 1; }
  .live-sales__arrow { margin-left: auto; }
  .live-sales__title { flex-wrap: wrap; gap: 6px; }
}

/* ---- Turning points scrollytelling (level 2) ---- */
.scrolly { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr); gap: 18px; align-items: start; }
.scrolly__graphic { position: sticky; top: calc(var(--nav-height, 72px) + 8px); padding: 18px; border-radius: 24px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.scrolly__steps { display: flex; flex-direction: column; gap: 12px; }
.scrolly__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; }
.scrolly__year { margin-left: auto; font-family: 'Sora', sans-serif; font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.scrolly__chart { width: 100%; height: auto; display: block; }
.scrolly__caption { margin-top: 12px; padding: 14px; border-radius: 18px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.08); }
.scrolly__caption-title { display: block; font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: #fff; }
.scrolly__caption-body { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.65); }
@media (max-width: 860px) {
  /* A single-column grid would end the sticky range at the graphic's own row,
     so the wrapper becomes a block and the graphic sticks past every step. The
     translucent desktop panel is swapped for an opaque one: the steps scroll
     straight under it, and it is flush with the nav so no line peeks between. */
  .scrolly { display: block; }
  .scrolly__graphic { top: var(--nav-height, 72px); margin-bottom: 12px; padding: 10px; z-index: 1; background: #26292C; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 18px 30px -22px rgba(0,0,0,.95); }
  .scrolly__legend { gap: 8px; margin-bottom: 6px; }
  .scrolly__year { font-size: 15px; }
  .scrolly__chart { max-height: 76px; }
  .scrolly__caption { margin-top: 8px; padding: 10px 12px; border-radius: 14px; }
  .scrolly__caption-title { font-size: 13px; }
  .scrolly__caption-body { margin-top: 2px; font-size: 11px; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
}