/*
 * Shared styling for the SoldScan public pages.
 *
 * Deliberately one small stylesheet with no build step and no framework: these
 * pages exist to satisfy App Review (a reachable privacy policy and support
 * URL) and to give a link somewhere to point. They are served off the same VM
 * as the API, so every kilobyte is RAM that Postgres would rather have.
 *
 * The palette and type are lifted from the app itself — the same warm near-black
 * ground, the same orange, the same serif/mono pairing — so a reviewer moving
 * from the screenshots to this page sees one product, not a template.
 */

:root {
	--ink: #17140f;
	--paper: #f5f0e6;
	--orange: #e8703a;
	--muted: #9c947f;
	--line: #2c2921;
	--buy: #54b380;
	--card: #1e1a14;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--ink);
	color: var(--paper);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

.wrap { max-width: 720px; margin: 0 auto; padding: 0 24px 80px; }

a { color: var(--orange); }
a:hover { text-decoration: none; }
a:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 3px; }

/* ---------------------------------------------------------------- header */
header {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 28px 0 22px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 40px;
}
header img { width: 44px; height: 44px; border-radius: 10px; }
header .name {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 25px;
	font-weight: 700;
	letter-spacing: -0.01em;
}
header nav { margin-left: auto; display: flex; gap: 20px; font-size: 15px; }
header nav a { color: var(--muted); text-decoration: none; }
header nav a:hover { color: var(--paper); }

/* ------------------------------------------------------------------ type */
h1 {
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(30px, 6vw, 44px);
	line-height: 1.12;
	margin: 0 0 18px;
	text-wrap: balance;
}
h2 {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 22px;
	margin: 40px 0 12px;
}
h3 { font-size: 17px; margin: 26px 0 8px; }
p { margin: 0 0 16px; }
.lede { font-size: 19px; color: #d8d0c0; }
.muted { color: var(--muted); }
.small { font-size: 15px; }

ul { padding-left: 22px; margin: 0 0 16px; }
li { margin-bottom: 9px; }

/* --------------------------------------------------------------- verdict */
/* The product's core screen, rebuilt in HTML. Showing the actual output beats
   describing it, and it costs no image weight. */
.verdict {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 24px 26px;
	margin: 30px 0;
}
.verdict .kind {
	font-family: Georgia, serif;
	font-size: 40px;
	font-weight: 700;
	color: var(--buy);
	line-height: 1;
	letter-spacing: 0.01em;
}
.verdict .line { margin: 12px 0 0; font-size: 17px; }
.verdict .math {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 13.5px;
	color: var(--muted);
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--line);
	overflow-x: auto;
	white-space: nowrap;
}

.points { display: grid; gap: 14px; margin: 26px 0; }
.point {
	background: var(--card);
	border: 1px solid var(--line);
	border-left: 3px solid var(--orange);
	border-radius: 0 10px 10px 0;
	padding: 16px 20px;
}
.point b { display: block; margin-bottom: 4px; }
.point p { margin: 0; font-size: 15.5px; color: #cfc7b6; }

/* ---------------------------------------------------------------- footer */
footer {
	border-top: 1px solid var(--line);
	margin-top: 60px;
	padding-top: 22px;
	font-size: 14px;
	color: var(--muted);
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
}
footer a { color: var(--muted); }

/* Long legal documents get a little more air between clauses. */
.legal p, .legal li { font-size: 16px; }
.legal h2 { font-size: 20px; }
.updated {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 13px;
	color: var(--muted);
	margin-bottom: 34px;
}

table { border-collapse: collapse; width: 100%; font-size: 15px; margin: 16px 0; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; }
.tablewrap { overflow-x: auto; }