/* Raisonne — Site v3 stylesheet.
   Practical / product-led take. Headline message: a CMS that delivers
   your gallery's website. White paper, more chrome, accent used confidently. */

@font-face{
  font-family:'Monument Grotesk';
  font-weight:700;font-style:normal;
  src:url('fonts/DLan-MonumentGrotesk-Bold.otf') format('opentype');
}
@font-face{
  font-family:'Monument Grotesk';
  font-weight:700;font-style:italic;
  src:url('fonts/DLan-MonumentGrotesk-BoldItalic.otf') format('opentype');
}

*, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  --paper:#faf6ee;
  --paper-2:#f3eee2;
  --paper-3:#e8dfc8;
  --ink:#1a1411;
  --ink-2:#3a2f28;
  --mid:#7a6e60;
  --muted:#a89d8b;
  --line:#d8cdb6;
  --line-2:#c2b699;
  --white:#ffffff;
  --off:#faf3e3;
  --accent:#c89177;
  --accent-2:#ebd4c4;
  --accent-deep:#a86a52;
  --pink:#b8523a;
  --green:#6b8c5c;
  --amber:#c08850;

  --grotesk: 'Monument Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;
  --serif: 'Times New Roman','Times',serif;

  --max: 1320px;
  --gutter: 32px;

  --pad-section: 120px;
  --pad-row: 28px;

  --r-card: 4px;
  --r-pill: 999px;
}

:root.density-compact{ --pad-section: 80px; --pad-row: 22px; }

html, body { background: var(--paper); color: var(--ink); }
body{
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; letter-spacing: inherit; }
img { max-width: 100%; display: block; }

:root.theme-dark{
  --paper:#1a1411;
  --paper-2:#241c18;
  --paper-3:#2e251f;
  --ink:#f4ecdc;
  --ink-2:#d8c8b0;
  --mid:#9a8d7a;
  --muted:#6a5e50;
  --line:#2e251f;
  --line-2:#3a2f28;
  --white:#241c18;
  --off:#1f1814;
  --accent:#d4a085;
  --accent-2:#3a2520;
}

/* TYPE */
.eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--grotesk);
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--mid); font-weight: 700;
}
.eyebrow .dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.eyebrow .num{ display: inline-block; width: 18px; color: var(--ink); opacity: .6; }

.h-display{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(56px, 8.4vw, 152px);
  line-height: .92; letter-spacing: -.024em;
  color: var(--ink);
}
.h-display .it{ font-style: italic; color: var(--accent); }

.h-section{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(36px, 4.6vw, 76px);
  line-height: .98; letter-spacing: -.015em;
}
.h-section .it{ font-style: italic; }

.h-card{
  font-family: var(--grotesk);
  font-size: 18px;
  letter-spacing: -.005em;
  line-height: 1.25;
  color: var(--ink);
}

.lede{
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: clamp(20px, 2.1vw, 28px);
  line-height: 1.35;
  color: var(--ink-2);
  max-width: 38ch;
  letter-spacing: -.005em;
}

.body{
  font-family: var(--grotesk); font-weight: 700;
  font-size: 14px; line-height: 1.55;
  color: var(--ink-2);
}

.cap{
  font-family: var(--grotesk);
  font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--mid); font-weight: 700;
}

.shell{ width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
section{ padding: var(--pad-section) 0; position: relative; }

/* NAV */
.topnav{
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topnav-inner{ display: grid; grid-template-columns: auto 1fr auto; align-items: center; height: 60px; gap: 28px; }
.topnav-mark{ display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 22px; letter-spacing: -.01em; font-style: italic; }
.topnav-mark .stamp{
  width: 24px; height: 24px;
  border: 1px solid var(--ink); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 13px; font-style: italic; color: var(--ink);
}
.topnav-mark .ver{
  font-family: var(--grotesk); font-style: normal; font-size: 9px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--mid);
  border: 1px solid var(--line); padding: 3px 7px;
  border-radius: var(--r-pill);
  margin-left: 6px;
}
.topnav-links{ display: flex; gap: 22px; justify-content: center; font-family: var(--grotesk); font-size: 12px; letter-spacing: .04em; }
.topnav-cta{ display: flex; gap: 10px; align-items: center; }
.nav-link{ color: var(--ink-2); transition: color .15s; cursor: pointer; }
.nav-link:hover{ color: var(--ink); }

/* BUTTONS */
.btn{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 16px;
  font-family: var(--grotesk); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: transparent; color: var(--ink);
  transition: background .15s, color .15s, border-color .15s, transform .15s;
  cursor: pointer;
}
.btn:hover{ border-color: var(--ink); }
.btn-primary{
  background: var(--accent); border-color: var(--accent); color: white;
}
.btn-primary:hover{ background: var(--ink); border-color: var(--ink); }
.btn-ink{ background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-ink:hover{ background: var(--accent); border-color: var(--accent); color: white; }
.btn-sm{ padding: 7px 12px; font-size: 10px; }
.btn .arr{ font-family: var(--serif); font-style: italic; }

/* HERO */
.hero{ padding: 92px 0 calc(var(--pad-section) - 12px); position: relative; }
.hero-meta{
  display: grid; grid-template-columns: 1fr auto;
  align-items: end; gap: 24px; margin-bottom: 28px;
  padding-bottom: 22px; border-bottom: 1px solid var(--line);
}
.hero-meta .stack{ display: flex; flex-direction: column; gap: 4px; }
.hero-meta .label{ font-family: var(--grotesk); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--mid); }
.hero-meta .val{ font-family: var(--grotesk); font-size: 11px; color: var(--ink); }
.hero-meta .runway{
  display: inline-flex; gap: 8px; flex-wrap: wrap;
}
.hero-meta .pill{
  font-family: var(--grotesk); font-size: 10px;
  letter-spacing: .08em; padding: 5px 10px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  color: var(--ink-2);
}
.hero-meta .pill.has-dot:before{
  content: ''; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); margin-right: 6px;
  transform: translateY(-1px);
}

.hero-display{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(56px, 9.6vw, 168px);
  line-height: .9;
  letter-spacing: -.028em;
  color: var(--ink);
}
.hero-display .it{ font-style: italic; }
.hero-display .accent{ color: var(--accent); font-style: italic; }
.hero-display .small{
  display: block;
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 32px);
  font-style: italic;
  letter-spacing: 0;
  color: var(--mid);
  margin-top: 22px;
  line-height: 1.3;
  max-width: 32ch;
}

.hero-actions{
  display: flex; align-items: center; gap: 14px;
  margin-top: 36px;
}
.hero-actions .meta{
  margin-left: auto;
  font-family: var(--grotesk);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mid);
}

/* ── 3-TIER FLOW DIAGRAM (the v3 statement piece) ──────────────────── */
.flow{
  margin-top: 72px;
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    repeating-linear-gradient(45deg,
      transparent 0 7px,
      var(--paper-2) 7px 8px);
}
.flow-grid{
  display: grid;
  grid-template-columns: 1fr 80px 1fr 80px 1fr;
  align-items: stretch;
  background: var(--paper);
}
.flow-cell{
  padding: 42px 32px;
  background: var(--paper);
  border-right: 1px solid var(--line);
  position: relative;
}
.flow-cell:last-child{ border-right: none; }
.flow-cell.arrow{
  border-right: none;
  background: var(--paper-2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic;
  font-size: 32px; color: var(--accent);
}
.flow-cap{
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--grotesk);
  font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--mid);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.flow-cap .num{ font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink); letter-spacing: 0; text-transform: none; }
.flow-title{
  font-family: var(--serif); font-size: 26px; font-weight: 400;
  line-height: 1.05; letter-spacing: -.012em;
  color: var(--ink);
  margin-bottom: 10px;
}
.flow-title .it{ font-style: italic; color: var(--accent); }
.flow-body{
  font-family: var(--grotesk); font-size: 12px; line-height: 1.5;
  color: var(--ink-2);
  margin-bottom: 18px;
  max-width: 30ch;
}
.flow-list{ list-style: none; }
.flow-list li{
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 0;
  font-family: var(--grotesk);
  font-size: 11px;
  color: var(--ink-2);
  border-bottom: 1px dashed var(--line);
}
.flow-list li:last-child{ border-bottom: none; }
.flow-list li:before{
  content: '·';
  color: var(--accent);
  width: 12px;
  flex: 0 0 12px;
  text-align: center;
}
@media (max-width: 980px){
  .flow-grid{ grid-template-columns: 1fr; }
  .flow-cell{ border-right: none; border-bottom: 1px solid var(--line); }
  /* A CSS transform doesn't change layout footprint, so rotating the full-width
     desktop connector cell left a wide-but-short box whose rotated visual
     bounds overflowed into neighbouring sections. Shrink it to a fixed-size
     square first so the 90deg rotation has no layout overflow to cause. */
  .flow-cell.arrow{
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0 auto;
    border-bottom: none;
    transform: rotate(90deg);
  }
}

/* ── 3-COL LEDE (unified across product) ─────────────────────────── */
.col-3{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}
.col-3 > *{
  padding: var(--pad-row) 28px;
  border-right: 1px solid var(--line);
}
.col-3 > *:last-child{ border-right: none; }
@media (max-width: 880px){
  .col-3{ grid-template-columns: 1fr; }
  .col-3 > *{ border-right: none; border-bottom: 1px solid var(--line); }
  .col-3 > *:last-child{ border-bottom: none; }
}

/* ── INTEGRATIONS RAIL ─────────────────────────── */
.int-rail{
  margin-top: 36px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}
.int-rail > .cell{
  padding: 22px 18px;
  border-right: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-family: var(--grotesk);
  font-size: 11px;
  color: var(--ink-2);
  height: 88px;
  position: relative;
}
.int-rail > .cell:last-child{ border-right: none; }
.int-rail > .cell .name{ display: block; }
.int-rail > .cell .kind{
  display: block;
  font-size: 8px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mid);
  margin-top: 6px;
}
@media (max-width: 880px){ .int-rail{ grid-template-columns: repeat(2, 1fr); } .int-rail > .cell{ border-bottom: 1px solid var(--line); } }

/* ── PRODUCT SURFACE TABS (v3 product visual) ─────────────────────── */
.surf{
  margin-top: 48px;
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 24px 60px -32px rgba(15,15,15,.18);
}
.surf-bar{
  display: flex; align-items: center; gap: 0;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.surf-tab{
  padding: 14px 22px;
  font-family: var(--grotesk); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--mid);
  border-right: 1px solid var(--line);
  cursor: pointer;
  transition: color .15s, background .15s;
}
.surf-tab.active{
  background: var(--white);
  color: var(--ink);
  position: relative;
}
.surf-tab.active:after{
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent);
}
.surf-tab:hover:not(.active){ color: var(--ink); }
.surf-tab .num{ color: var(--mid); margin-right: 6px; font-size: 9px; opacity: .8; }
.surf-meta{ margin-left: auto; padding: 0 18px; font-family: var(--grotesk); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

.surf-body{ padding: 0; min-height: 480px; position: relative; background: var(--white); }

/* CMS panel (the inside of "tier i — the source of truth") */
.cms{
  display: grid;
  grid-template-columns: 200px 1fr;
  min-height: 480px;
}
.cms-side{
  border-right: 1px solid var(--line);
  padding: 22px 18px;
}
.cms-side .ms-mark{
  font-family: var(--serif); font-style: italic;
  font-size: 18px;
  margin-bottom: 22px;
}
.cms-side .ms-label{
  font-family: var(--grotesk);
  font-size: 8px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
  margin-top: 16px; margin-bottom: 8px;
}
.cms-side .ms-link{
  font-family: var(--grotesk);
  font-size: 11px;
  color: var(--mid);
  padding: 6px 0 6px 8px;
  margin-left: -8px;
  border-left: 2px solid transparent;
  display: flex; justify-content: space-between; align-items: center;
}
.cms-side .ms-link.active{ color: var(--ink); border-left-color: var(--accent); }
.cms-side .ms-link .ct{
  font-family: var(--grotesk); font-size: 9px; color: var(--muted);
}

.cms-main{ padding: 22px 26px; }
.cms-head{
  display: flex; align-items: center; gap: 14px;
  font-family: var(--grotesk);
  font-size: 8px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}
.cms-head .ttl{ font-size: 11px; color: var(--ink); letter-spacing: .14em; }
.cms-head .search{
  flex: 1; max-width: 220px;
  border-bottom: 1px solid var(--line);
  font-size: 10px; color: var(--mid); padding: 4px 0;
}
.cms-head .ct{ margin-left: auto; }

.cms-table{ width: 100%; border-collapse: collapse; }
.cms-table th, .cms-table td{
  text-align: left;
  font-family: var(--grotesk); font-size: 10px;
  padding: 10px 6px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2); font-weight: 700;
}
.cms-table th{
  font-size: 8px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.cms-table td.title{ color: var(--ink); }
.cms-table .pill{
  display: inline-block;
  padding: 2px 7px;
  font-size: 8px; letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid;
  border-radius: 1px;
}
.cms-table .pill.for-sale{ color: var(--accent); border-color: var(--accent); }
.cms-table .pill.sold{ color: var(--pink); border-color: var(--pink); }
.cms-table .pill.reserved{ color: var(--amber); border-color: var(--amber); }
.cms-table .pill.nfs{ color: var(--muted); border-color: var(--line); }
.cms-thumb{ width: 36px; height: 28px; border: 1px solid var(--line); border-radius: 1px; }

/* PUBLIC SITE panel — preview tile + a stripped-down hero */
.pub{
  display: grid;
  grid-template-columns: 200px 1fr;
  min-height: 480px;
}
.pub-side{
  background: var(--paper-2);
  border-right: 1px solid var(--line);
  padding: 22px 18px;
  font-family: var(--grotesk); font-size: 11px;
  color: var(--mid);
}
.pub-side h6{
  font-family: var(--grotesk);
  font-size: 8px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); margin: 14px 0 8px;
  font-weight: 700;
}
.pub-side .li{
  display: flex; justify-content: space-between;
  padding: 5px 0; border-bottom: 1px dashed var(--line);
  color: var(--ink-2);
}
.pub-side .li b{ font-weight: 700; color: var(--ink); }

.pub-main{
  padding: 0;
  background: linear-gradient(180deg, #1a1816 0%, #0e0d0c 100%);
  color: #f0eee8;
  display: flex; flex-direction: column;
  position: relative;
}
.pub-main .pmark{
  padding: 18px 26px;
  font-family: var(--serif); font-style: italic; font-size: 18px;
  border-bottom: 1px solid #2a2724;
  display: flex; justify-content: space-between; align-items: center;
}
.pub-main .pmark .nav{
  display: flex; gap: 18px;
  font-family: var(--grotesk); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; font-style: normal;
  color: #a8a496;
}
.pub-main .phero{
  padding: 36px 28px 24px;
  flex: 1;
}
.pub-main .pkicker{
  font-family: var(--grotesk); font-size: 9px; letter-spacing: .22em;
  text-transform: uppercase; color: #a8a496;
  margin-bottom: 12px;
}
.pub-main .ptitle{
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: 38px; line-height: 1.05; letter-spacing: -.012em;
  color: #f0eee8;
}
.pub-main .pmeta{
  margin-top: 14px;
  font-family: var(--serif);
  font-size: 13px; line-height: 1.4;
  color: #c4bfb0;
  max-width: 32ch;
}
.pub-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  padding: 20px 28px 24px;
}
.pub-card{
  border: 1px solid #2a2724; padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.pub-card .pthumb{ aspect-ratio: 4/5; }
.pub-card .ptt{
  font-family: var(--serif); font-style: italic; font-size: 12px;
  color: #f0eee8;
}
.pub-card .pmt{
  font-family: var(--grotesk); font-size: 9px;
  letter-spacing: .14em; text-transform: uppercase;
  color: #8a8678;
}
.pub-tag{
  position: absolute; top: 18px; right: 26px;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--grotesk); font-size: 9px;
  letter-spacing: .18em; text-transform: uppercase;
  color: #a8a496;
}
.pub-tag .dot{ width: 6px; height: 6px; border-radius: 50%; background: #5fd498; }

/* API panel */
.api{
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 480px;
  background: var(--paper-2);
}
.api-side{
  background: var(--white);
  border-right: 1px solid var(--line);
  padding: 22px 18px;
  font-family: var(--grotesk); font-size: 11px;
}
.api-side h6{
  font-family: var(--grotesk); font-size: 8px;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
  font-weight: 700;
}
.api-side .ep{
  display: flex; gap: 8px; padding: 7px 0;
  border-bottom: 1px dashed var(--line);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10px;
  color: var(--ink-2);
}
.api-side .ep .verb{
  font-weight: 700;
  width: 38px; text-align: center;
  padding: 1px 0; border-radius: 2px;
  font-size: 9px;
  background: var(--accent-2); color: var(--accent);
}
.api-side .ep .verb.post{ background: #e6f5ec; color: var(--green); }
.api-side .ep .verb.del{ background: #fde8e8; color: #c43838; }

.api-main{
  background: var(--paper-2);
  padding: 24px 28px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink);
  overflow: hidden;
}
.api-main .req{
  font-family: var(--grotesk); font-size: 9px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--mid);
  margin-bottom: 8px;
}
.api-main .req .verb{
  background: var(--accent); color: white; padding: 1px 6px;
  border-radius: 2px; font-family: ui-monospace, monospace; font-size: 9px;
  margin-right: 6px;
}
.api-main .req .url{ color: var(--ink); font-family: ui-monospace, monospace; }
.api-main pre{
  background: var(--white);
  border: 1px solid var(--line);
  padding: 16px;
  overflow: auto;
  border-radius: 2px;
}
.api-main .k{ color: var(--accent); }
.api-main .s{ color: var(--green); }
.api-main .n{ color: var(--pink); }
.api-main .c{ color: var(--mid); font-style: italic; }

/* ── PILLAR section: 3 big stacked features ─────────────────── */
.pillars{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.pillar{
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--line);
  min-height: 360px;
}
.pillar:last-child{ border-bottom: none; }
.pillar.flip{ direction: rtl; }
.pillar.flip > *{ direction: ltr; }

.pillar-text{
  padding: 56px 48px;
  display: flex; flex-direction: column; justify-content: center;
  border-right: 1px solid var(--line);
}
.pillar.flip .pillar-text{ border-right: none; border-left: 1px solid var(--line); }
.pillar-num{
  display: inline-flex;
  font-family: var(--serif); font-style: italic;
  font-size: 14px; color: var(--mid);
  margin-bottom: 22px;
}
.pillar-title{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1; letter-spacing: -.018em;
  margin-bottom: 18px;
  color: var(--ink);
}
.pillar-title .it{ font-style: italic; color: var(--accent); }
.pillar-body{
  font-family: var(--grotesk); font-size: 14px;
  line-height: 1.55; color: var(--ink-2);
  max-width: 38ch;
}
.pillar-bullets{
  list-style: none;
  margin-top: 22px;
  border-top: 1px solid var(--line);
}
.pillar-bullets li{
  font-family: var(--grotesk); font-size: 12px;
  color: var(--ink-2);
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
}
.pillar-bullets li:before{
  content: '+';
  color: var(--accent);
  font-family: var(--grotesk);
  font-weight: 700;
}

.pillar-vis{
  background: var(--paper-2);
  padding: 36px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.pillar-vis-inner{
  width: 100%; height: 100%;
  position: relative;
}

/* INTEGRATIONS DIAGRAM (used in pillar 3 visual) */
.diagram{
  width: 100%; height: 100%;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 12px;
  align-content: center;
}
.diagram-row{
  display: flex; gap: 10px; justify-content: center;
}
.dnode{
  background: var(--white);
  border: 1px solid var(--line-2);
  padding: 10px 14px;
  font-family: var(--grotesk);
  font-size: 11px;
  color: var(--ink);
  border-radius: 2px;
  text-align: center;
  min-width: 96px;
}
.dnode .lbl{ font-size: 8px; letter-spacing: .2em; text-transform: uppercase; color: var(--mid); display: block; margin-bottom: 3px; }
.dnode.core{ background: var(--ink); color: white; border-color: var(--ink); min-width: 200px; padding: 16px; }
.dnode.core .lbl{ color: rgba(255,255,255,.6); }
.dnode.core .v{ font-family: var(--serif); font-style: italic; font-size: 22px; color: white; }

.darrow{
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  color: var(--accent);
  font-size: 18px;
}

/* COMPARE */
.compare{ width: 100%; border-collapse: collapse; margin-top: 36px; }
.compare th, .compare td{
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-family: var(--grotesk); font-size: 12px;
}
.compare th{ font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--mid); }
.compare td:first-child{ color: var(--ink); }
.compare .check{ color: var(--accent); }
.compare .cross{ color: var(--mid); opacity: .5; }

/* PRICING */
.price-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line); background: var(--line); }
.price-card{
  border: none;
  padding: 32px 28px;
  background: var(--white);
}
.price-card .tier{ font-family: var(--grotesk); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--mid); margin-bottom: 12px; }
.price-card .amt{ font-family: var(--serif); font-size: 56px; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.price-card .amt sup{ font-size: 18px; vertical-align: top; font-style: italic; color: var(--mid); margin-right: 4px; }
.price-card .per{ font-size: 14px; color: var(--mid); margin-left: 4px; font-style: italic; }
.price-card ul{ list-style: none; margin: 22px 0; padding: 22px 0 0; border-top: 1px solid var(--line); }
.price-card li{ font-family: var(--grotesk); font-size: 12px; color: var(--ink-2); padding: 7px 0; display: flex; gap: 8px; }
.price-card li:before{ content: '·'; color: var(--accent); font-weight: 900; }
.price-card.featured{ background: var(--accent); color: white; }
.price-card.featured .tier{ color: rgba(255,255,255,.6); }
.price-card.featured .amt{ color: white; }
.price-card.featured .amt sup{ color: rgba(255,255,255,.6); }
.price-card.featured .per{ color: rgba(255,255,255,.7); }
.price-card.featured ul{ border-top-color: rgba(255,255,255,.2); }
.price-card.featured li{ color: white; }
.price-card.featured li:before{ color: rgba(255,255,255,.6); }

/* TICKER */
.ticker{
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--grotesk);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mid);
}
.ticker-track{ display: inline-flex; gap: 36px; animation: ticker 50s linear infinite; }
.ticker-track > span{ flex-shrink: 0; }
.ticker-track .dot{ color: var(--accent); }
@keyframes ticker{ from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* FOOTER */
.foot{ border-top: 1px solid var(--line); padding: 60px 0 40px; background: var(--paper-2); }
.foot-grid{ display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 880px){ .foot-grid{ grid-template-columns: 1fr 1fr; } }
.foot-mark{ font-family: var(--serif); font-style: italic; font-size: 28px; margin-bottom: 12px; }
.foot-tag{ font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--mid); max-width: 30ch; line-height: 1.4; }
.foot h5{ font-family: var(--grotesk); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--mid); margin-bottom: 16px; font-weight: 700; }
.foot a{ display: block; font-family: var(--grotesk); font-size: 12px; color: var(--ink-2); padding: 4px 0; }
.foot a:hover{ color: var(--ink); }
.foot-bottom{ margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-family: var(--grotesk); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--mid); }