/* Ledgerly public holding page.
 *
 * Standalone: this stylesheet belongs to the www/apex holding page only and
 * shares nothing with the broker app in frontend/. Fonts are self-hosted so
 * the page makes zero third-party requests (see fonts/README.md).
 */

/* ---- Fonts (latin subset, served from this origin) ---------------- */
@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/ibm-plex-sans-400.woff2") format("woff2");
}
@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("fonts/ibm-plex-sans-600.woff2") format("woff2");
}
@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("fonts/ibm-plex-mono-500.woff2") format("woff2");
}
/* Variable font: weight is pinned at 600, the optical-size axis stays fluid
 * so the headline renders with display-optimised letterforms. */
@font-face {
	font-family: "Source Serif 4";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("fonts/source-serif-4-600.woff2") format("woff2");
}

/* ---- Reset -------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box }
html, body { min-height: 100% }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility }
img, svg { display: block }
[hidden] { display: none }

/* ---- Tokens ------------------------------------------------------- */
:root {
	--navy: #134e4a;
	--navy-2: #0f766e;
	--ivory: #f6f3ec;
	--line: #ddd6c8;
	--ink: #1d2b3a;
	--slate: #54657a;
	/* The pack's #8a99a8 manages only 2.63:1 on ivory, and its own suggested
	 * fallback #6f8090 still only 3.67:1 — both fail WCAG AA for the 11px
	 * text this token carries. Same hue (210deg) and saturation, walked down
	 * in lightness until it clears 4.5:1; lands at 4.80:1, still visibly
	 * lighter than --slate so the hierarchy survives. */
	--slate-light: #5b6d80;
	--brass: #0f766e;
	--phos: #7dffb2;
	--serif: "Source Serif 4", Georgia, "Times New Roman", serif;
	--sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

body {
	background: var(--ivory);
	color: var(--ink);
	font-family: var(--sans);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
a { color: var(--navy) }
a:hover { color: var(--brass) }
a:focus-visible,
.btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px }

/* ---- Header bar --------------------------------------------------- */
.top {
	border-bottom: 1px solid var(--line);
	padding: 14px clamp(18px, 4vw, 48px);
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	align-items: center;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--slate);
}
.top .mk {
	display: flex;
	align-items: center;
	gap: 11px;
	color: var(--navy);
	letter-spacing: .28em;
	font-weight: 600;
	font-size: 13.5px;
}
.top .mk svg { width: 20px; height: 20px }
.top .sp { margin-left: auto }
.top .live { display: inline-flex; align-items: center; gap: 8px; color: var(--brass) }
.top .live i { width: 6px; height: 6px; border-radius: 50%; background: var(--brass) }

/* ---- Main grid ---------------------------------------------------- */
main {
	flex: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 4vw, 64px);
	align-items: center;
	padding: clamp(28px, 4vw, 56px) clamp(18px, 4vw, 48px);
	max-width: 1360px;
	width: 100%;
	margin: 0 auto;
}

/* ---- Left column: the statement ----------------------------------- */
.eyebrow {
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--brass);
}
h1 {
	margin-top: 18px;
	font-family: var(--serif);
	font-size: clamp(30px, 3.7vw, 50px);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -.015em;
	max-width: 21ch;
}
.rule { width: 64px; height: 2px; background: var(--brass); margin: 22px 0 }
p.sub { font-size: 16.5px; line-height: 1.65; color: var(--slate); max-width: 44ch }

.facts { margin-top: 26px; border-top: 1px solid var(--line) }
.f {
	display: flex;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid var(--line);
	font-size: 14px;
}
.f dt {
	font-weight: 500;
	color: var(--navy);
	width: 132px;
	flex-shrink: 0;
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding-top: 3px;
}
.f dd { color: var(--slate) }

/* ---- Request access ----------------------------------------------- */
/* A link rather than a form + submit handler: the mail client opens with
 * JavaScript disabled, and the script below is pure enhancement. */
.access { margin-top: 26px }
.btn {
	display: inline-block;
	background: var(--navy);
	color: #fff;
	border: none;
	padding: 13px 22px;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}
.btn:hover { background: var(--navy-2); color: #fff }
.hint {
	margin-top: 12px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--slate-light);
}
.hp-thanks {
	margin-top: 22px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--navy);
	border-left: 2px solid var(--brass);
	padding-left: 14px;
	max-width: 44ch;
	display: none;
}
.done .hp-ask { display: none }
.done .hp-thanks { display: block }

/* ---- Right column: the device ------------------------------------- */
.stage { display: flex; flex-direction: column; align-items: center }
.device { width: 100%; max-width: 660px; filter: drop-shadow(0 34px 46px rgba(12, 18, 24, .4)) }
.lid {
	background: linear-gradient(168deg, #3a3d42, #1b1d20 42%, #101215);
	border-radius: 16px 16px 5px 5px;
	padding: 10px 10px 13px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .11),
	            inset 0 1px 0 rgba(255, 255, 255, .16),
	            0 0 0 1px #0a0b0d;
}
.cam { position: relative; height: 9px; margin-bottom: 6px }
.cam:before {
	content: "";
	position: absolute;
	left: 50%;
	top: 2px;
	transform: translateX(-50%);
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #22262b;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.screen {
	position: relative;
	aspect-ratio: 16 / 10.4;
	border-radius: 3px;
	overflow: hidden;
	background: #05060a;
	box-shadow: inset 0 0 0 1px #000, 0 0 26px rgba(125, 255, 178, .06);
}
/* scanlines */
.screen:before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background: repeating-linear-gradient(to bottom, rgba(125, 255, 178, .05) 0 1px, transparent 1px 3px);
}
/* glass glare */
.screen:after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	background: linear-gradient(118deg, rgba(255, 255, 255, .11) 0 28%, transparent 34%);
}
.screen .wmark {
	position: absolute;
	right: -9%;
	top: 50%;
	transform: translateY(-50%);
	width: 56%;
	opacity: .08;
	z-index: 1;
	pointer-events: none;
	filter: drop-shadow(0 0 26px rgba(125, 255, 178, .5));
}
.screen .vig {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: radial-gradient(ellipse 78% 70% at 50% 50%, transparent 45%, rgba(0, 0, 0, .55));
}
.chin {
	padding: 7px 0 2px;
	text-align: center;
	font-family: var(--mono);
	font-size: 8.5px;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: #4a4e55;
}
.hinge {
	position: relative;
	width: 113%;
	margin: 0 -6.5%;
	height: 13px;
	background: linear-gradient(#43474d 0 40%, #2b2e33 40% 100%);
	clip-path: polygon(1.4% 0, 98.6% 0, 100% 100%, 0 100%);
	border-radius: 0 0 8px 8px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
.hinge:after {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	width: 112px;
	height: 5px;
	border-radius: 0 0 6px 6px;
	background: #1b1d20;
}
.foot {
	width: 105%;
	margin: 0 -2.5%;
	height: 4px;
	border-radius: 0 0 11px 11px;
	background: linear-gradient(#2e3136, #191b1e);
	opacity: .9;
}
.cap {
	margin-top: 18px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--slate-light);
	text-align: center;
}

/* ---- The terminal -------------------------------------------------- */
.term {
	position: absolute;
	inset: 0;
	z-index: 2;
	padding: clamp(14px, 2.4vw, 26px);
	font-family: var(--mono);
	font-size: clamp(8.5px, 1.02vw, 12px);
	line-height: 1.8;
	color: #3fa76c;
	text-shadow: 0 0 7px rgba(125, 255, 178, .35);
	overflow: hidden;
}
.term .hd {
	display: flex;
	align-items: center;
	gap: 9px;
	padding-bottom: 9px;
	margin-bottom: 11px;
	border-bottom: 1px solid #17402c;
}
.term .hd svg { width: 1.6em; height: 1.6em; filter: drop-shadow(0 0 6px rgba(125, 255, 178, .6)) }
.term .hd b { font-size: 1em; font-weight: 500; letter-spacing: .34em; color: #fff }
.term .hd span {
	margin-left: auto;
	font-size: .82em;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #2f7a52;
}
.term pre { white-space: pre-wrap; font: inherit }
.term pre b { color: var(--phos); font-weight: 500 }
.term pre i { font-style: normal; color: #fff }
.term pre .warn { color: #ffd166 }
.term .cur {
	display: inline-block;
	width: .55em;
	height: 1.05em;
	background: var(--phos);
	vertical-align: -.15em;
	animation: bl 1.05s steps(1) infinite;
}
@keyframes bl { 50% { opacity: 0 } }

/* ---- Footer -------------------------------------------------------- */
footer {
	border-top: 1px solid var(--line);
	padding: 14px clamp(18px, 4vw, 48px);
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	justify-content: space-between;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--slate-light);
}

/* ---- Responsive ---------------------------------------------------- */
/* The pack requires the page to fit 1280x800 without scrolling. At exactly
 * that size the specified 4vw vertical padding overshoots the viewport by a
 * couple of pixels and raises a scrollbar, so trim it on short viewports
 * only — taller screens keep the intended rhythm untouched. */
@media (min-width: 961px) and (max-height: 860px) {
	main { padding-top: clamp(24px, 3vw, 40px); padding-bottom: clamp(24px, 3vw, 40px) }
}

@media (max-width: 960px) {
	main { grid-template-columns: 1fr; padding: 26px 20px }
	.stage { order: -1 }
}

/* Narrow screens: the device shrinks with the column, but the boot log has a
 * fixed number of lines and the pack floors the terminal type at 8.5px for
 * readability. Below roughly 640px those two facts collide and the closing
 * line clips. Reclaim the difference from the terminal's own padding and
 * header spacing rather than the type size or the 1.8 line-height, both of
 * which carry the look. */
@media (max-width: 640px) {
	/* Size the terminal type off the screen's own width rather than the
	 * viewport's, so the log fits the device at any phone width — including
	 * 320px, where the pack's 8.5px floor overflows and clips the closing
	 * line. Browsers without container queries fall back to the rule above. */
	.screen { container-type: inline-size }
	.term { padding: 8px 10px; font-size: clamp(7px, 2.4cqw, 8.5px) }
	.term .hd { padding-bottom: 6px; margin-bottom: 7px }
}

@media (prefers-reduced-motion: reduce) {
	.term .cur { animation: none }
}