:root {
/* Pointsharp brand tokens */
--ps-almost-white: #f4f7f8;
--ps-silver: #dde1e9;
--ps-almost-black: #1d1f29;
--ps-blue: #0047bb;
--ps-purple: #7f56c5;
--ps-green: #00c389;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0; background: var(--ps-almost-white); color: var(--ps-almost-black);
font: 15px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 16px 20px;
  background: #fff;
  border-bottom: 1px solid var(--ps-silver);
  flex-wrap: nowrap;
}

.header .left {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
}

.header .logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.header .logo:focus-visible {
  outline: 2px solid var(--ps-blue);
  outline-offset: 4px;
  border-radius: 8px;
}
.header .logo img { display: block; }

.header .brand { 
  font-weight: 700; 
  letter-spacing: .2px; 
  white-space: nowrap;
}

.header .badge { 
  margin-left: auto;
}

.container { max-width:1080px; margin:0 auto; padding:24px; }
.card { background:#fff; border:1px solid var(--ps-silver); border-radius:16px; padding:20px; box-shadow:0 1px 2px rgba(0,0,0,.03); }
.grid { display:grid; gap:16px; }
.grid.cols-3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.button { display:inline-block; padding:10px 16px; border-radius:12px; border:1px solid var(--ps-almost-black); color:#fff; background:var(--ps-almost-black); text-decoration:none; }
.button.secondary { background:#fff; color:var(--ps-almost-black); }
.button.cta { background:var(--ps-blue); border-color:var(--ps-blue); }
.kicker { color:#485060; text-transform:uppercase; font-weight:600; font-size:12px; letter-spacing:.08em; }
.small { color:#5d6673; font-size:13px; }
.table { width:100%; border-collapse: collapse; }
.table td, .table th { padding:10px 12px; border-top:1px solid var(--ps-silver); vertical-align:top; }
.badge { padding:2px 8px; border-radius:999px; font-size:12px; color:#fff; background:var(--ps-green); }
.tag { font-size:12px; background:#eef2ff; color:#1d1f29; padding:4px 8px; border-radius:999px; border:1px solid var(--ps-silver); }
.hero { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:24px; }
.hero h1 { margin:0; font-size:28px; }
.codebox { background:#0f1120; color:#e6e6e6; border-radius:12px; padding:14px; overflow:auto; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; }
.footer { text-align:center; padding:24px; color:#6b7280; }
a:link, a:visited, a:hover, a:active { text-decoration: none; }

/* Prevent long URIs from overflowing cards */
.card { overflow: hidden; }
.card code {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  display: inline-block; max-width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* Align table headers with data cells */
.table th { text-align: left; }

/* Make the first column a fixed-ish width so headers/data line up neatly */
.attr-table col.col-attr { width: 28ch; }   /* ~28 characters */
.attr-table td, .attr-table th { vertical-align: top; }

/* Always show hand cursor on interactive elements */
a[href],
button,
[role="button"],
.button { cursor: pointer; }

a.card,
.card[role="link"] { cursor: pointer; }

/* Make cards stack content vertically */
.grid .card {
  display: flex;
  flex-direction: column;
  height: 100%;            /* let cards stretch within the grid cell */
}

/* Pin the primary CTA to the bottom-left of the card */
.grid .card .button.cta {
  margin-top: auto;        /* pushes the CTA to the bottom */
  align-self: flex-start;  /* keep it left-aligned */
}

/* If some cards are anchors and others are forms, cover both */
.grid a.card,
.grid form.card { height: 100%; display: flex; flex-direction: column; }