/* Soulbound Security site styles. Colours are theme tokens; pages reference them as var(--token). */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/geist-latin-wght-normal.woff2) format('woff2');
}

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/geist-mono-latin-wght-normal.woff2) format('woff2');
}

:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #09090B;
  --ink: #EDEFF2;
  --ink2: #D9DDE2;
  --sub: #A1A8B3;
  --muted: #8B929C;
  --dim: #7A818B;
  --hover: #FFFFFF;
  --line: #1C1F24;
  --line2: #16191D;
  --card: #0E1013;
  --node: #121519;
  --border: #1F2329;
  --under: #3A3F47;
  --under2: #22262C;
  --dash: #2A2F36;
  --conn: #2B3038;
  --dot: #4A515B;
  --map: #353C45;
  --accent: #5CC8F5;
  --accent-soft: #5CC8F51A;
  --accent-line: #5CC8F566;
  --accent-halo: rgba(92, 200, 245, 0.16);
  --green: #3ECF8E;
  --green-soft: #3ECF8E1A;
  --green-line: #3ECF8E59;
  --amber: #E3A341;
  --amber-soft: #E3A3411A;
  --amber-edge: #E3A34166;
  --amber-line: #3A2E16;
  --tag-bg: transparent;
  --glass: rgba(9, 9, 11, 0.8);
  --shadow: none;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #FAFAF9;
  --ink: #0C0E11;
  --ink2: #1D2127;
  --sub: #4A515B;
  --muted: #5A616B;
  --dim: #6A717B;
  --hover: #0C0E11;
  --line: #E6E8EB;
  --line2: #ECEEF1;
  --card: #FFFFFF;
  --node: #F7F8F9;
  --border: #E2E4E8;
  --under: #C9CDD3;
  --under2: #DDE0E4;
  --dash: #D5D9DE;
  --conn: #CDD2D8;
  --dot: #B4BAC2;
  --map: #C9CED5;
  --accent: #5CC8F5;
  --accent-soft: #5CC8F51A;
  --accent-line: #5CC8F566;
  --accent-halo: rgba(92, 200, 245, 0.16);
  --green: #107F53;
  --green-soft: #107F5312;
  --green-line: #107F5359;
  --amber: #9A5C00;
  --amber-soft: #9A5C0012;
  --amber-edge: #9A5C0066;
  --amber-line: #F0D9A8;
  --tag-bg: #FFF8EA;
  --glass: rgba(250, 250, 249, 0.8);
  --shadow: 0 1px 2px rgba(12, 14, 17, 0.04), 0 12px 32px rgba(12, 14, 17, 0.05);
}

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Geist, Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--sub); }
a:hover { color: var(--hover); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.skip-link { position: absolute; left: -9999px; top: 8px; padding: 8px 12px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; z-index: 30; }

/* The header floats: it stays at the top as the page scrolls and lets the page show through */
header { position: sticky; top: 0; z-index: 20; background: var(--glass); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line2); }
.skip-link:focus { left: 16px; }

/* Theme toggle and theme-specific images */
.theme-toggle, .menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: transparent; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; color: var(--sub); }
.theme-toggle svg, .menu-toggle svg { display: block; }
.menu-toggle { display: none; }
.menu-toggle .i-close { display: none; }
header.is-open .menu-toggle .i-bars { display: none; }
header.is-open .menu-toggle .i-close { display: block; }
.theme-toggle .i-moon { display: none; }
:root[data-theme="light"] .theme-toggle .i-sun { display: none; }
:root[data-theme="light"] .theme-toggle .i-moon { display: block; }
.only-light { display: none !important; }
:root[data-theme="light"] .only-light { display: block !important; }
:root[data-theme="light"] .only-dark { display: none !important; }

/* Practice explorer (Home) */
.px-item { color: var(--muted); transition: color 0.2s; }
.px-item:hover, .px-item.is-on { color: var(--ink); }
.px-idx { flex: 0 0 auto; font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--dim); }
.px-item.is-on .px-idx { color: var(--accent); }
.px-bar { position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: var(--accent); display: none; }
.px-item.is-on .px-bar { display: block; }
.px-link { align-self: flex-start; font-size: 14px; line-height: 1.5; color: var(--sub); text-decoration: none; }
.px-link .px-title { font-weight: 500; color: var(--accent); }
.px-link .px-end { white-space: nowrap; }
.px-ext { display: inline-block; width: .8em; height: .8em; margin-left: .32em; vertical-align: -0.06em; opacity: .72; }
.px-link:hover { color: var(--hover); }
.px-link:hover .px-ext { opacity: 1; }

/* Due diligence side switch (visual) */
.dl-card { font-family: inherit; font-size: 13px; text-align: left; cursor: pointer; flex: 1 1 0; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 18px; padding: 18px; border-radius: 14px; color: inherit; background: transparent; border: 1px solid var(--line); transition: background-color 0.2s, border-color 0.2s; }
.dl-card[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-line); }
.dl-title { font-size: 15px; font-weight: 500; color: var(--sub); }
.dl-card[aria-pressed="true"] .dl-title { color: var(--ink); }
.dl-tag { font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; color: var(--dim); }
.dl-card[aria-pressed="true"] .dl-tag { color: var(--accent); }
.dl-on { display: none; }
.dl-card[aria-pressed="true"] .dl-on { display: inline; }
.dl-card[aria-pressed="true"] .dl-off { display: none; }
.dl-item { display: flex; align-items: center; gap: 10px; color: var(--dim); }
.dl-card[aria-pressed="true"] .dl-item { color: var(--sub); }
.dl-dot { flex: 0 0 4px; height: 4px; border-radius: 50%; background: var(--conn); }
.dl-card[aria-pressed="true"] .dl-dot { background: var(--accent); }

/* Footer hairline between the lockup and the ARG logo: the lockup's width, never past the logos */
.foot-rule { align-self: flex-start !important; width: 144px; }

/* Partner logos: monochrome in both themes so mixed brand colours sit quietly together */
.partner-logo { display: block; height: 44px; width: auto; opacity: 0.85; }
:root[data-theme="dark"] .partner-logo { filter: brightness(0) invert(1); }
:root[data-theme="light"] .partner-logo { filter: grayscale(1) brightness(0.4); }

/* Motion only when the visitor hasn't asked for less */
@media (prefers-reduced-motion: no-preference) {
  @keyframes sbIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  @keyframes sbFlow { from { background-position: 0 0; } to { background-position: 8px 0; } }
  @keyframes sbDash { to { stroke-dashoffset: -20; } }
  @keyframes sbPulse { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(1.8); opacity: 0; } }
}

/* Phones: logo left, menu button and theme toggle right on the one row, the links folding out beneath
   the bar when the menu button is pressed (header.is-open, set in site.js); the footer is the centred
   stack soulbound.finance uses (lockup, hairline, ARG logo, the three columns side by side, small print
   on three lines) */
@media (max-width: 640px) {
  .site-bar { gap: 12px !important; }
  .menu-toggle { display: inline-flex; margin-left: auto; }
  .site-nav { display: none !important; order: 3; flex: 1 1 100%; flex-direction: column; align-items: stretch !important; gap: 0 !important; margin-left: 0 !important; padding-top: 4px; }
  header.is-open .site-nav { display: flex !important; }
  .site-nav a { display: flex; align-items: center; min-height: 44px; box-sizing: border-box; border-top: 1px solid var(--line2); font-size: 15px !important; }
  .foot-row { justify-content: center !important; gap: 28px !important; }
  .foot-brand { flex-basis: 100% !important; align-items: center !important; gap: 16px !important; }
  .foot-rule { align-self: center !important; }
  .foot-nav { justify-content: center; width: 100%; flex-wrap: nowrap !important; gap: 32px !important; }
  .foot-col { flex: 0 1 auto; min-width: 0 !important; align-items: center; text-align: center; }
  .foot-seg { display: block; text-wrap: balance; }
  .foot-sep { display: none; }
}

/* Below desktop the footer keeps its layout (brand block beside the columns) with tighter gaps and
   content-width columns, so nothing wraps under the brand block down to the phone breakpoint */
@media (max-width: 1104px) {
  .foot-row { gap: 48px !important; }
  .foot-brand { flex-basis: 200px !important; }
  .foot-nav { gap: 32px 40px !important; }
  .foot-col { min-width: 0 !important; }
}

/* Contact form */
.cf-field { display: flex; flex-direction: column; gap: 8px; }
.cf-label { font-size: 13px; color: var(--sub); }
.cf-input, .cf-select, .cf-textarea { font-family: inherit; font-size: 15px; color: var(--ink); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; min-height: 44px; box-sizing: border-box; width: 100%; }
.cf-textarea { line-height: 1.55; resize: vertical; }
.cf-input::placeholder, .cf-textarea::placeholder { color: var(--dim); }
.cf-input:focus-visible, .cf-select:focus-visible, .cf-textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cf-pill { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--border); color: var(--sub); font-size: 14px; cursor: pointer; }
.cf-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.cf-pill:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.cf-pill:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.cf-submit { font-family: inherit; background: var(--ink); color: var(--bg); border: 0; border-radius: 10px; padding: 14px 22px; min-height: 44px; font-size: 15px; font-weight: 500; cursor: pointer; }
.cf-submit[disabled] { opacity: 0.45; cursor: not-allowed; }