/* Vedastra — design system ported from desgin/new_desgin exports.
   The exports are fixed-width (1728px) documents with everything inline. This
   file lifts their shared :root tokens, turns their `style-hover` attributes
   into real CSS, and replaces the hard-coded column widths with fluid
   primitives so the same layouts work down to phone width. */

/* ---------- tokens ---------- */

/* Self-hosted (was Google Fonts). Keeps the CSP at font-src 'self' with no
   third-party origin, and stops every visitor's IP reaching Google on page
   load. unicode-range means the browser fetches only the subsets it needs. */
@font-face {
  font-family:'Poppins';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('./fonts/poppins-300-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'Poppins';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('./fonts/poppins-300-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'Poppins';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('./fonts/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'Poppins';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('./fonts/poppins-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'Poppins';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('./fonts/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'Poppins';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('./fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'Poppins';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('./fonts/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'Poppins';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('./fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'Poppins';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('./fonts/poppins-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'Poppins';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('./fonts/poppins-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('./fonts/cormorant-garamond-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('./fonts/cormorant-garamond-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('./fonts/cormorant-garamond-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('./fonts/cormorant-garamond-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('./fonts/cormorant-garamond-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('./fonts/cormorant-garamond-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('./fonts/cormorant-garamond-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('./fonts/cormorant-garamond-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --page:#FAF6EA; --page-2:#F5EFE1; --sidebar:#F2ECD8; --card:#FFFDF7;

  --gold:#B08A4A; --gold-deep:#A0742F; --gold-head:#A87B34;
  --gold-hair:#E0CFAC; --gold-pill:#CDAF7C; --gold-fill:#8C6C39;
  --gold-line:#E8D8B4; --gold-soft:#D0AF7A;

  --sage:#9EC1A3; --sage-2:#9BBA9C; --sage-tint:#DBE6D9; --sage-ink:#3D5A44;
  --teal:#5E8581; --on-sage:#FBFAF4;

  --ink:#2A2517; --ink-soft:#6E6650; --ink-faint:#B8A67C; --line:#E6DCC7;

  --green-band:#47804F; --green-soft:#E1EDDC;
  --red-band:#B24A4A;   --red-soft:#F5E4E2;
  --amber-band:#BE7A18; --amber-soft:#F7E6C6;
  --star:#D9B65B; --star-off:#E9E1CC;

  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Poppins', system-ui, sans-serif;
  --radius:10px;
  --shadow:0 1px 2px rgba(42,37,23,.04);
}

/* Dark values come from the Landing export's [data-vd="dark"] block; the tokens
   it doesn't define are derived to keep the same contrast relationships. */
[data-theme="dark"] {
  --page:#14120D; --page-2:#1B1811; --sidebar:#1B1811; --card:#211D15;

  --gold:#D6B172; --gold-deep:#E0BE85; --gold-head:#DDBA79;
  --gold-hair:#4A3C22; --gold-pill:#C2A272; --gold-fill:#D6B172;
  --gold-line:#3D3220; --gold-soft:#C2A272;

  --sage:#4E6B53; --sage-2:#456049; --sage-tint:#232E24; --sage-ink:#CBDCC9;
  --teal:#8FB3AF; --on-sage:#F3F6EF;

  --ink:#EFE7D5; --ink-soft:#BAB19C; --ink-faint:#877F6C; --line:#332C1E;

  --green-band:#7FB287; --green-soft:#1E2A20;
  --red-band:#D98A8A;   --red-soft:#2C1D1D;
  --amber-band:#DCA850; --amber-soft:#2E2312;
  --star:#D9B65B; --star-off:#3A3323;
}

/* ---------- base ---------- */

* { box-sizing:border-box; }

body {
  margin:0;
  background:var(--page);
  color:var(--ink);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a { color:var(--gold-deep); text-decoration-color:var(--gold-hair); }
a:hover { color:var(--gold-head); }

img { max-width:100%; }
input, textarea, select, button { font-family:var(--sans); font-size:inherit; }
::placeholder { color:var(--ink-faint); }
::selection { background:var(--sage-tint); }
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-thumb { background:var(--gold-hair); border-radius:8px; }

/* The exports hide the native disclosure triangle on every <details> they use. */
details > summary { list-style:none; cursor:pointer; }
details > summary::-webkit-details-marker { display:none; }

:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }

/* ---------- app shell ---------- */

#root { min-height:100vh; }

.vd-shell { display:flex; align-items:stretch; min-height:100vh; }
.vd-main  { flex:1; min-width:0; position:relative; }

/* index.html wraps the nav and footer in slot divs. In sidebar mode those
   wrappers must not become flex items themselves, or the sidebar loses its
   width — display:contents hoists their children into the shell's flex row. */
.vd-shell > #nav-slot, .vd-shell > #footer-slot { display:contents; }

/* Fluid stand-in for the exports' fixed 76px gutter / 1045px content column. */
.vd-page {
  max-width:1180px;
  padding:clamp(28px, 4vw, 78px) clamp(18px, 4vw, 76px) 84px;
}

/* Full-bleed pages (Landing, Legal, Onboarding) render their own containers. */
.vd-bleed { width:100%; }
.vd-container { max-width:1240px; margin:0 auto; padding:0 clamp(18px, 4vw, 48px); }

/* ---------- sidebar ---------- */

.vd-sidebar {
  width:283px; flex:0 0 auto;
  background:var(--sidebar);
  padding:44px 30px;
  display:flex; flex-direction:column;
  position:sticky; top:0; align-self:flex-start;
  height:100vh; overflow-y:auto;
}
.vd-brand { display:flex; align-items:center; gap:12px; margin-bottom:64px; cursor:pointer; }
.vd-brand-name {
  font-family:var(--serif); font-weight:500; font-size:24px;
  letter-spacing:.16em; color:var(--gold-head); line-height:1;
}
.vd-brand-tag { font-size:7.5px; letter-spacing:.05em; color:var(--ink-faint); }

/* One canonical nav: eight identical rows. Gap tightened from the export's 34px
   to 26px because the list went from five items to eight and has to clear the
   Log Out pill at the export's own 1116px page height without scrolling. */
.vd-nav { display:flex; flex-direction:column; gap:26px; font-size:13px; letter-spacing:.08em; text-transform:uppercase; }
.vd-nav a {
  display:flex; align-items:center; gap:14px;
  color:var(--gold-pill); text-decoration:none; cursor:pointer;
}
.vd-nav a:hover { color:var(--gold-head); }
.vd-nav a.is-active { color:var(--ink); font-weight:600; }
.vd-nav img { width:19px; height:19px; object-fit:contain; display:block; flex:0 0 auto; }
.vd-nav-icon {
  width:19px; height:19px; display:block; flex:0 0 auto;
  background-color:var(--nav-icon-color);
  -webkit-mask:var(--nav-icon) center / contain no-repeat;
  mask:var(--nav-icon) center / contain no-repeat;
}
.vd-nav-icon--connections { --nav-icon-color:var(--sage-ink); }
.vd-nav-icon--groups { --nav-icon-color:var(--teal); }
.vd-nav-icon--me { --nav-icon-color:var(--gold-deep); }
.vd-nav-count {
  display:inline-flex; min-width:20px; height:20px; margin-left:auto; padding:0 6px;
  align-items:center; justify-content:center; border-radius:999px;
  background:var(--red-band); color:#fff; font-size:11px; font-weight:600;
  letter-spacing:0; line-height:1;
}
.vd-nav-count[hidden] { display:none; }

.vd-sidebar-spacer { flex:1; min-height:24px; }

/* On desktop the drawer is not a box at all — its children flatten into the
   sidebar's own column so the spacer still pushes the footer to the bottom.
   Below 900px it becomes the real drop-down panel (see the media query). */
.vd-sidebar-drawer { display:contents; }

/* Hamburger — desktop has no need for it, so it only appears with the sidebar. */
.vd-navbtn { display:none; }

@media (max-width:900px) {
  .vd-shell { flex-direction:column; }
  .vd-sidebar {
    width:100%; height:auto; position:sticky; top:0; z-index:60;
    padding:14px 18px; flex-direction:row; align-items:center; gap:14px;
    border-bottom:1px solid var(--gold-hair);
  }
  .vd-brand { margin-bottom:0; }
  .vd-sidebar-spacer { display:none; }
  .vd-navbtn {
    display:flex; align-items:center; justify-content:center;
    margin-left:auto; width:38px; height:38px;
    border:1px solid var(--gold-hair); border-radius:8px;
    background:transparent; color:var(--ink); cursor:pointer;
  }
  /* The drawer is ONE positioned panel holding the links and the footer, so
     they stack in normal flow. Positioning them as two independent siblings at
     top:100% made the footer's offset resolve against the sidebar rather than
     against the bottom of the links, and it landed on top of the nav. */
  .vd-sidebar-drawer {
    display:none;
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:22px;
    background:var(--sidebar); border-bottom:1px solid var(--gold-hair);
    padding:18px;
    max-height:calc(100vh - 100%); overflow-y:auto;
  }
  .vd-sidebar.is-open .vd-sidebar-drawer { display:flex; }
  .vd-sidebar-foot { flex-direction:row; align-items:center; gap:14px; }
  .vd-sidebar-foot .vd-btn-pill { flex:1; height:44px; }
}

/* ---------- public top nav ---------- */

.vd-topnav {
  position:sticky; top:0; z-index:80;
  background:var(--page); border-bottom:1px solid var(--line);
}
.vd-topnav-in {
  max-width:1440px; margin:0 auto;
  padding:14px clamp(18px, 4vw, 40px);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.vd-topnav-links {
  display:flex; align-items:center; gap:26px;
  font-size:10.5px; letter-spacing:.17em; text-transform:uppercase;
}
.vd-topnav-links a { color:var(--ink-soft); text-decoration:none; cursor:pointer; white-space:nowrap; }
.vd-topnav-links a:hover { color:var(--ink); }
.vd-topnav-links a.is-active { color:var(--ink); border-bottom:1px solid var(--gold); padding-bottom:2px; }
.vd-topnav-actions { display:flex; align-items:center; gap:10px; }

@media (max-width:860px) {
  .vd-topnav-links { display:none; }
  .vd-topnav.is-open .vd-topnav-links {
    display:flex; flex-direction:column; align-items:flex-start; gap:16px;
    position:absolute; left:0; right:0; top:100%;
    background:var(--page); border-bottom:1px solid var(--line);
    padding:18px clamp(18px, 4vw, 40px);
  }
  .vd-topnav-in { position:relative; }
  .vd-topnav .vd-navbtn { display:flex; margin-left:0; }
}

/* ---------- typography ---------- */

.vd-h1 { font-family:var(--serif); font-weight:500; font-size:clamp(34px, 4.4vw, 60px); line-height:1.1; color:var(--ink); margin:0 0 18px; }
.vd-h2 { font-family:var(--serif); font-weight:600; font-size:clamp(26px, 3vw, 40px); line-height:1.15; color:var(--gold-deep); margin:0 0 28px; }
.vd-h3 { font-family:var(--serif); font-weight:600; font-size:21px; color:var(--ink); margin:0 0 12px; }
.vd-h4 { font-family:var(--serif); font-weight:600; font-size:17px; color:var(--ink); margin:0 0 8px; }
.vd-gold { color:var(--gold-deep); }
.vd-underline { text-decoration:underline; text-underline-offset:5px; text-decoration-color:var(--gold-hair); }
.vd-eyebrow { font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-pill); }
.vd-sub { font-size:16px; letter-spacing:.06em; color:var(--gold-pill); }
.vd-muted { color:var(--ink-soft); }
.vd-faint { color:var(--ink-faint); }
.vd-small { font-size:12px; }
.vd-meta { font-size:12px; color:var(--ink-faint); letter-spacing:.04em; }
.vd-serif { font-family:var(--serif); }

/* ---------- cards & surfaces ---------- */

.vd-card {
  background:var(--card);
  border:1px solid var(--gold-hair);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--shadow);
}
.vd-card--flat { box-shadow:none; }
.vd-card--tint { background:var(--sage-tint); border-color:transparent; }
.vd-panel { background:var(--card); border:1px solid var(--gold-hair); border-radius:var(--radius); overflow:hidden; }

.vd-divider { height:1px; background:var(--line); border:0; margin:28px 0; }

/* ---------- grids ---------- */
/* The exports pin column counts (repeat(2, 320px), repeat(5, 185px)); auto-fit
   keeps the same look at desktop and reflows instead of overflowing below it. */

.vd-grid { display:grid; gap:24px; }
.vd-grid-2 { grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); }
.vd-grid-3 { grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
.vd-grid-4 { grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); }
.vd-grid-5 { grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); }
.vd-grid-cards { grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); }

.vd-stack { display:flex; flex-direction:column; gap:16px; }
.vd-row { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.vd-row-tight { display:flex; align-items:center; gap:8px; }
.vd-spread { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.vd-spacer { flex:1; }

/* ---------- buttons ---------- */

.vd-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  padding:11px 24px; border-radius:6px; border:1px solid transparent;
  cursor:pointer; transition:background .15s, color .15s, border-color .15s;
}
.vd-btn:disabled { opacity:.5; cursor:not-allowed; }

.vd-btn-gold { background:var(--gold); border-color:var(--gold); color:#FFFDF6; }
.vd-btn-gold:hover:not(:disabled) { background:var(--gold-deep); border-color:var(--gold-deep); }

.vd-btn-ghost { background:transparent; border-color:var(--gold-hair); color:var(--gold-deep); }
.vd-btn-ghost:hover:not(:disabled) { border-color:var(--gold); background:var(--page-2); }

.vd-btn-pill {
  background:var(--gold-pill); color:#FFFDF6; border:none;
  border-radius:8px; height:52px; padding:0 24px;
  font-size:13px; letter-spacing:.09em; text-transform:uppercase; cursor:pointer;
}
.vd-btn-pill:hover { background:var(--gold); }

.vd-btn-sage { background:var(--sage); border-color:var(--sage); color:var(--on-sage); }
.vd-btn-sage:hover:not(:disabled) { background:var(--sage-2); border-color:var(--sage-2); }

.vd-btn-danger { background:transparent; border-color:var(--red-band); color:var(--red-band); }
.vd-btn-danger:hover:not(:disabled) { background:var(--red-soft); }

.vd-btn-sm { padding:7px 16px; font-size:10px; }
.vd-btn-block { width:100%; }

.vd-icon-btn {
  width:32px; height:32px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px; border:1px solid var(--gold-hair);
  background:transparent; color:var(--ink-soft); cursor:pointer;
}
.vd-icon-btn:hover { color:var(--ink); border-color:var(--gold); }

.vd-link {
  background:none; border:none; padding:0;
  color:var(--gold-deep); cursor:pointer;
  font-size:12px; letter-spacing:.06em; text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:var(--gold-hair);
}
.vd-link:hover { color:var(--gold-head); }

/* ---------- forms ---------- */

.vd-field { display:flex; flex-direction:column; gap:7px; min-width:0; }
.vd-label { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.vd-input, .vd-select, .vd-textarea {
  width:100%; padding:12px 14px;
  background:var(--card); color:var(--ink);
  border:1px solid var(--gold-line); border-radius:6px;
}
.vd-input:focus, .vd-select:focus, .vd-textarea:focus { outline:none; border-color:var(--gold); }
.vd-textarea { min-height:110px; resize:vertical; }
.vd-help { font-size:11px; color:var(--ink-faint); }
.vd-error { font-size:12px; color:var(--red-band); }

.vd-checkbox { display:flex; align-items:flex-start; gap:10px; cursor:pointer; }
.vd-checkbox input { margin-top:3px; accent-color:var(--gold); }

/* Toggle switch — the exports draw it as two absolutely-positioned spans over a
   visually hidden checkbox. */
.vd-switch { position:relative; display:inline-block; width:44px; height:26px; flex:0 0 auto; cursor:pointer; }
.vd-switch input { position:absolute; opacity:0; width:0; height:0; }
.vd-switch .vd-switch-track { position:absolute; inset:0; background:var(--gold-line); border-radius:999px; transition:background .2s; }
.vd-switch .vd-switch-knob { position:absolute; left:3px; top:3px; width:20px; height:20px; background:#FFFDF6; border-radius:999px; transition:transform .2s; }
.vd-switch input:checked ~ .vd-switch-track { background:var(--gold); }
.vd-switch input:checked ~ .vd-switch-knob { transform:translateX(18px); }
.vd-switch input:focus-visible ~ .vd-switch-track { outline:2px solid var(--gold); outline-offset:2px; }

/* Sticky save bar (Profile). Offset clears the sidebar on desktop only. */
.vd-savebar {
  position:sticky; bottom:0; z-index:30; margin-top:40px;
  background:var(--card); border-top:1px solid var(--gold-hair);
  padding:16px clamp(18px, 4vw, 40px);
  display:flex; align-items:center; justify-content:flex-end; gap:14px; flex-wrap:wrap;
  box-shadow:0 -6px 24px rgba(0,0,0,.06);
}

/* Two-column split used by Profile / Public Profile / Group Detail. */
.vd-split { display:grid; grid-template-columns:2fr 1fr; gap:32px; align-items:start; }
@media (max-width:960px) { .vd-split { grid-template-columns:1fr; } }

/* Landing / Legal two-column layouts collapse before the columns get cramped. */
@media (max-width:900px) {
  .vd-howgrid, .vd-legalgrid { grid-template-columns:1fr !important; gap:36px !important; }
  .vd-legalgrid > div:last-child { position:static !important; order:-1; }
  .vd-footgrid { grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)) !important; }
}

/* The trust band's dividers only make sense while the row is intact. */
@media (max-width:900px) {
  .vd-grid-5 > div[style*="border-left"] { border-left:0 !important; }
}

/* Definition grid — the "label above value" pairs used all over the exports. */
.vd-defs { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:18px 28px; }
.vd-def-k { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:6px; }
.vd-def-v { font-size:15px; color:var(--ink-soft); }
.vd-def--full { grid-column:1 / -1; }

.vd-toggle-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }
.vd-toggle-row:last-child { border-bottom:0; }

/* ---------- badges & chips ---------- */

.vd-badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; border-radius:999px;
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  background:var(--page-2); color:var(--ink-soft);
}
.vd-badge--green { background:var(--green-soft); color:var(--green-band); }
.vd-badge--red   { background:var(--red-soft);   color:var(--red-band); }
.vd-badge--amber { background:var(--amber-soft); color:var(--amber-band); }
.vd-badge--gold  { background:var(--gold-line);  color:var(--gold-fill); }

.vd-chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:999px;
  border:1px solid var(--gold-hair); background:transparent;
  color:var(--ink-soft); font-size:12px; cursor:pointer;
}
.vd-chip.is-active { background:var(--gold-line); border-color:var(--gold-soft); color:var(--gold-fill); }

/* ---------- avatars ---------- */

.vd-avatar {
  width:56px; height:56px; flex:0 0 auto;
  border-radius:999px; object-fit:cover;
  background:var(--sage-tint); border:1px solid var(--gold-hair);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:20px; color:var(--sage-ink);
  overflow:hidden;
}
.vd-avatar--sm { width:38px; height:38px; font-size:14px; }
.vd-avatar--lg { width:96px; height:96px; font-size:34px; }

/* ---------- score meter (Matches / Breakdown) ---------- */

.vd-score { font-family:var(--serif); font-size:38px; line-height:1; color:var(--gold-fill); }
.vd-score small { font-size:15px; color:var(--ink-faint); }
.vd-meter { height:6px; border-radius:999px; background:var(--gold-line); overflow:hidden; }
.vd-meter > span { display:block; height:100%; border-radius:999px; background:var(--gold); }
.vd-meter--green > span { background:var(--green-band); }
.vd-meter--red > span { background:var(--red-band); }

/* ---------- tables ---------- */

.vd-table-wrap { overflow-x:auto; }
.vd-table { width:100%; border-collapse:collapse; font-size:13px; }
.vd-table th, .vd-table td { padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); }
.vd-table th {
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:500; white-space:nowrap;
}
.vd-table tr:last-child td { border-bottom:0; }

/* ---------- list rows (Connections / Requests / Blocked) ---------- */

.vd-listrow {
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:18px 22px;
  background:var(--card); border:1px solid var(--gold-hair); border-radius:var(--radius);
}
.vd-listrow-main { flex:1 1 220px; min-width:0; }
.vd-listrow-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
@media (max-width:640px) {
  .vd-listrow-actions { flex:1 1 100%; justify-content:flex-end; }
}

/* ---------- tabs ---------- */

.vd-tabs { display:flex; gap:28px; border-bottom:1px solid var(--line); margin-bottom:28px; flex-wrap:wrap; }
.vd-tab {
  background:none; border:none; padding:0 0 12px; cursor:pointer;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); border-bottom:2px solid transparent; margin-bottom:-1px;
}
.vd-tab:hover { color:var(--ink-soft); }
.vd-tab.is-active { color:var(--gold-deep); border-bottom-color:var(--gold); }

/* ---------- empty / loading ---------- */

.vd-empty { padding:56px 24px; text-align:center; color:var(--ink-faint); }
.vd-empty .vd-h3 { color:var(--ink-soft); }
.vd-skeleton { background:var(--gold-line); border-radius:6px; opacity:.5; animation:vd-pulse 1.4s ease-in-out infinite; }
@keyframes vd-pulse { 0%,100% { opacity:.35; } 50% { opacity:.7; } }

/* ---------- toast ---------- */

.vd-toast {
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%);
  z-index:300; max-width:min(440px, calc(100vw - 32px));
  background:var(--ink); color:var(--page);
  padding:12px 20px; border-radius:8px;
  font-size:13px; line-height:1.5; text-align:center;
  box-shadow:0 6px 24px rgba(42,37,23,.24);
  animation:vd-toast-in .18s ease-out;
}
@keyframes vd-toast-in { from { opacity:0; transform:translate(-50%, 8px); } to { opacity:1; transform:translate(-50%, 0); } }

/* ---------- chat (Chat / Group Detail) ---------- */

/* Full-height on desktop so the rail and thread scroll independently. The
   height lives here, not inline, so the mobile rule below can override it —
   on a phone the sidebar is a sticky top bar and 100vh would overflow past it. */
.vd-chat { display:flex; height:100vh; }
.vd-convo-rail {
  width:300px; flex:0 0 auto;
  display:flex; flex-direction:column;
  border-right:1px solid var(--line); background:var(--page-2);
  overflow-y:auto;
}
/* Shown only where the two panes cannot sit side by side. */
.vd-convo-toggle { display:none; }
.vd-convo {
  display:flex; align-items:center; gap:12px;
  padding:14px 18px; cursor:pointer; border-bottom:1px solid var(--line);
}
.vd-convo:hover { background:var(--card); }
.vd-convo.is-active { background:var(--card); border-left:2px solid var(--gold); }
.vd-thread { flex:1; min-width:0; display:flex; flex-direction:column; }
.vd-thread-body { flex:1; overflow-y:auto; padding:24px clamp(16px, 3vw, 32px); display:flex; flex-direction:column; gap:14px; }
.vd-bubble {
  max-width:min(560px, 78%); padding:12px 16px; border-radius:14px;
  background:var(--card); border:1px solid var(--gold-hair); align-self:flex-start;
}
.vd-bubble--me { align-self:flex-end; background:var(--sage-tint); border-color:transparent; }
.vd-composer { display:flex; gap:12px; padding:16px clamp(16px, 3vw, 32px); border-top:1px solid var(--line); background:var(--page); }

@keyframes vd-dot { 0%,60%,100% { opacity:.3; transform:translateY(0); } 30% { opacity:1; transform:translateY(-3px); } }
.vd-dot { animation:vd-dot 1.2s infinite; }
.vd-dot:nth-child(2) { animation-delay:.15s; }
.vd-dot:nth-child(3) { animation-delay:.3s; }

@media (max-width:900px) {
  /* One pane at a time: the thread by default, the conversation list when the
     header toggle is on. Height goes auto so the page scrolls under the
     sticky top bar instead of being clipped by a 100vh box. */
  .vd-chat { height:auto; min-height:70vh; }
  .vd-convo-rail { display:none; width:100%; border-right:0; }
  .vd-chat.show-rail .vd-convo-rail { display:flex; }
  .vd-chat.show-rail .vd-thread { display:none; }
  .vd-convo-toggle { display:flex; }
}

/* ---------- modal (Photo Modal) ---------- */

.vd-modal-backdrop {
  position:fixed; inset:0; z-index:200;
  background:rgba(42,37,23,.5);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.vd-modal {
  background:var(--card); border:1px solid var(--gold-hair); border-radius:14px;
  width:min(560px, 100%); max-height:90vh; overflow-y:auto; padding:28px;
}

/* ---------- decorative art ---------- */
/* The exports bleed large ornaments behind the content; they must never
   intercept clicks or add scroll width. */
.vd-art { position:absolute; pointer-events:none; user-select:none; z-index:0; }
.vd-art-wheel { right:0; top:0; bottom:0; width:min(610px, 45%); opacity:.95; overflow:hidden; }
.vd-art-wheel img { width:100%; height:100%; object-fit:cover; object-position:left center; display:block; }
.vd-above { position:relative; z-index:2; }
@media (max-width:1100px) { .vd-art-wheel { display:none; } }

/* ---------- rendered markdown (legal documents) ---------- */

.vd-md-h1 { font-family:var(--serif); font-weight:500; font-size:clamp(30px, 4vw, 48px); line-height:1.1; margin:0 0 8px; }
.vd-md-h2 {
  font-family:var(--serif); font-weight:600; font-size:clamp(21px, 2.4vw, 28px);
  margin:38px 0 16px; padding-top:22px; border-top:2px solid var(--gold-hair);
}
.vd-md-h3 { font-family:var(--serif); font-weight:600; font-size:19px; margin:26px 0 10px; }
.vd-md-h4, .vd-md-h5, .vd-md-h6 { font-family:var(--serif); font-weight:600; font-size:16px; margin:20px 0 8px; }
.vd-md-p { font-size:15px; line-height:1.8; color:var(--ink); margin:0 0 14px; }
.vd-md-list { font-size:15px; line-height:1.8; color:var(--ink); margin:0 0 16px; padding-left:22px; }
.vd-md-list li { margin-bottom:6px; }
.vd-md code { background:var(--page-2); border:1px solid var(--line); border-radius:4px; padding:1px 5px; font-size:.9em; }
.vd-md table { margin-bottom:20px; }
.vd-md .vd-divider { margin:30px 0; }
/* The first heading is the document title — it already sits at the top. */
.vd-md > .vd-md-h1:first-child { margin-bottom:18px; }

/* ---------- footer ---------- */

.site-footer-mini {
  padding:26px 20px; text-align:center;
  font-size:11px; letter-spacing:.08em; color:var(--ink-faint);
  border-top:1px solid var(--line);
}

/* ---------- utilities ---------- */

.vd-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.vd-hide { display:none !important; }
.vd-center { text-align:center; }
.vd-nowrap { white-space:nowrap; }