/* Neat Roots Certificates: follows the neatroots.com design system.
   Uses the site's --nr-* tokens (dark by default, light via body[data-nr-theme="light"]),
   with dark fallbacks so it still looks right if the tokens are missing. */

.nrc-wrap {
	--c-bg: var(--nr-bg, #050509);
	--c-bg2: var(--nr-bg-2, #0C0C14);
	--c-bg3: var(--nr-bg-3, #14141E);
	--c-border: var(--nr-border, #1C1C2A);
	--c-border2: var(--nr-border-2, #28283A);
	--c-text: var(--nr-text, #F0F0F5);
	--c-text2: var(--nr-text-2, #9E9EB0);
	--c-text3: var(--nr-text-3, #5F5F75);
	--c-accent: var(--nr-accent, #4285F4);
	--c-glass: var(--nr-glass-bg, rgba(8, 8, 14, 0.65));
	--c-glass-border: var(--nr-glass-border, rgba(40, 40, 58, 0.6));
	--c-display: var(--nr-display, 'Bricolage Grotesque', system-ui, sans-serif);
	--c-sans: var(--nr-sans, 'Onest', system-ui, sans-serif);
	--c-mono: var(--nr-mono, 'JetBrains Mono', monospace);
	--c-ok: #00C853;
	--c-bad: #FF1744;
	--c-li: #0A66C2;
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
	font-family: var(--c-sans);
	color: var(--c-text2);
	text-align: left;
}
.nrc-wrap *, .nrc-wrap *::before, .nrc-wrap *::after { box-sizing: border-box; }

/* Sections and headings, matching .nr-sec-head on the home page */
.nrc-wrap .nrc-section { padding: 96px 0 0; }
.nrc-wrap .nrc-section:last-child { padding-bottom: 120px; }
.nrc-wrap .nrc-section-tight { padding-top: 72px; }
.nrc-wrap .nrc-sec-head { text-align: center; max-width: 760px; margin: 0 auto 44px; padding: 0; }
.nrc-wrap .nrc-sec-title {
	font-family: var(--c-display) !important;
	font-weight: 600 !important;
	font-size: clamp(30px, 4vw, 48px) !important;
	line-height: 1.1 !important;
	letter-spacing: -0.022em !important;
	color: var(--c-text) !important;
	margin: 0 0 14px !important;
	text-align: center !important;
	text-transform: none !important;
}
.nrc-wrap .nrc-sec-sub {
	font-family: var(--c-sans) !important;
	font-size: clamp(15px, 1.2vw, 17px) !important;
	line-height: 1.55 !important;
	color: var(--c-text2) !important;
	margin: 0 auto !important;
	max-width: 620px;
	text-align: center !important;
}
.nrc-wrap .nrc-grad {
	background: linear-gradient(135deg, #00E5FF 0%, #4285F4 50%, #FF1744 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
body[data-nr-theme="light"] .nrc-wrap .nrc-grad {
	background: linear-gradient(135deg, #00B8D4 0%, #1A73E8 50%, #D81B5A 100%);
	-webkit-background-clip: text;
	background-clip: text;
}

/* Cards */
.nrc-wrap .nrc-card {
	position: relative;
	background: var(--c-glass);
	border: 1px solid var(--c-glass-border);
	border-radius: 20px;
	padding: 36px;
	margin: 0 auto;
	max-width: 880px;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}
.nrc-wrap .nrc-card-narrow { max-width: 620px; }
.nrc-wrap .nrc-card[hidden] { display: none !important; }
.nrc-wrap .nrc-center { text-align: center; }
.nrc-wrap .nrc-card-title {
	font-family: var(--c-display) !important;
	font-weight: 600 !important;
	font-size: 24px !important;
	letter-spacing: -0.018em !important;
	line-height: 1.2 !important;
	color: var(--c-text) !important;
	margin: 0 0 8px !important;
	text-align: left !important;
}
.nrc-wrap .nrc-card-sub { font-size: 15px; line-height: 1.6; color: var(--c-text2); margin: 0 0 22px; }

/* Forms */
.nrc-wrap form { margin: 0; }
.nrc-wrap form > * + * { margin-top: 14px; }
.nrc-wrap label:not(.nrc-check) {
	display: block; font-family: var(--c-mono); font-size: 11.5px; font-weight: 500;
	letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-text2); margin: 0 0 8px;
}
.nrc-wrap input[type=email], .nrc-wrap input[type=text] {
	display: block; width: 100%; min-height: 52px; padding: 12px 16px; margin: 0;
	font-family: var(--c-sans); font-size: 16px; line-height: 1.4;
	color: var(--c-text); background: var(--c-bg); border: 1px solid var(--c-border2); border-radius: 12px;
	box-shadow: none; outline: none; transition: border-color .2s, box-shadow .2s;
}
.nrc-wrap input::placeholder { color: var(--c-text3); opacity: 1; }
.nrc-wrap input[type=email]:focus, .nrc-wrap input[type=text]:focus {
	border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.22);
}
.nrc-wrap .nrc-code { max-width: 260px; text-align: center; letter-spacing: 0.4em; font-family: var(--c-mono) !important; font-size: 22px !important; }
.nrc-wrap .nrc-lookup input { text-transform: uppercase; font-family: var(--c-mono); letter-spacing: 0.04em; }
.nrc-wrap .nrc-lookup input::placeholder { text-transform: none; }
.nrc-wrap .nrc-row { display: flex; gap: 12px; align-items: stretch; }
.nrc-wrap .nrc-row input { flex: 1; min-width: 0; }
.nrc-wrap .nrc-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.nrc-wrap .nrc-msg { margin: 12px 0 0 !important; font-size: 14px; }
.nrc-wrap .nrc-msg:empty { display: none; }
.nrc-wrap .nrc-msg.is-error { color: #FF5A6E; }
.nrc-wrap .nrc-msg.is-ok { color: #3DDC84; }
.nrc-wrap .nrc-check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--c-text); cursor: pointer; margin-top: 18px; }
.nrc-wrap .nrc-check input { width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 auto; accent-color: #4285F4; }
.nrc-wrap .nrc-small { font-size: 14px; color: var(--c-text2); margin: 18px 0 0 !important; }
.nrc-wrap .nrc-sep { margin: 0 10px; color: var(--c-text3); }
.nrc-wrap .nrc-link {
	background: none !important; border: 0 !important; padding: 0 !important; margin: 0;
	font: inherit; font-size: 14px; color: var(--c-accent) !important; cursor: pointer; text-decoration: none !important;
	box-shadow: none !important;
}
.nrc-wrap .nrc-link:hover { color: var(--c-text) !important; }

/* Buttons, matching .nr-cta and .nr-cta-ghost. Plain text labels, no icons, no underline. */
.nrc-wrap .nrc-btn, .nrc-wrap a.nrc-btn, .nrc-wrap a.nrc-btn:link, .nrc-wrap a.nrc-btn:visited {
	position: relative; overflow: hidden;
	display: inline-flex !important; align-items: center; justify-content: center;
	min-height: 50px; padding: 14px 28px !important; margin: 0;
	font-family: var(--c-sans) !important; font-weight: 600 !important; font-size: 15px !important; line-height: 1.2 !important;
	letter-spacing: 0.005em; border-radius: 12px !important; border: 1px solid transparent;
	text-decoration: none !important; cursor: pointer; white-space: nowrap;
	transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s, background .25s, border-color .25s;
}
.nrc-wrap .nrc-btn:hover { transform: translateY(-2px); text-decoration: none !important; }
.nrc-wrap .nrc-btn-primary, .nrc-wrap a.nrc-btn-primary, .nrc-wrap a.nrc-btn-primary:visited {
	background: linear-gradient(135deg, #5A9BFF 0%, #4285F4 50%, #1A73E8 100%) !important;
	color: #ffffff !important; border-color: transparent !important;
	box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 -1px 0 rgba(0,0,0,.2) inset, 0 4px 16px rgba(26,115,232,.3);
}
.nrc-wrap .nrc-btn-primary::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 50%;
	background: linear-gradient(180deg, rgba(255,255,255,.18), transparent); pointer-events: none;
}
.nrc-wrap .nrc-btn-primary:hover { color: #fff !important; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 26px rgba(26,115,232,.45); }
.nrc-wrap .nrc-btn-ghost, .nrc-wrap a.nrc-btn-ghost, .nrc-wrap a.nrc-btn-ghost:visited {
	background: var(--nr-card-bg, rgba(255,255,255,.02)) !important; color: var(--c-text) !important; border-color: var(--c-border2) !important;
}
.nrc-wrap .nrc-btn-ghost:hover { background: var(--c-bg3) !important; border-color: var(--c-accent) !important; color: var(--c-text) !important; }
.nrc-wrap .nrc-btn-li, .nrc-wrap a.nrc-btn-li, .nrc-wrap a.nrc-btn-li:visited {
	background: var(--c-li) !important; color: #fff !important; border-color: var(--c-li) !important;
	box-shadow: 0 4px 16px rgba(10,102,194,.3);
}
.nrc-wrap .nrc-btn-li:hover { background: #0B76E0 !important; color: #fff !important; }
.nrc-wrap .nrc-btn[disabled] { opacity: .6; cursor: wait; transform: none; }
.nrc-wrap .nrc-btn:focus-visible, .nrc-wrap .nrc-link:focus-visible, .nrc-wrap .nrc-copy:focus-visible { outline: 2px solid #5A9BFF; outline-offset: 3px; }
.nrc-wrap form .nrc-btn { margin-top: 22px; }
.nrc-wrap .nrc-row .nrc-btn { margin-top: 0; }
.nrc-wrap .nrc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }

/* Status pills */
.nrc-wrap .nrc-status {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--c-mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
	padding: 7px 14px; border-radius: 100px; border: 1px solid;
}
.nrc-wrap .nrc-status svg { width: 15px; height: 15px; fill: currentColor; }
.nrc-wrap .nrc-status-ok { color: #3DDC84; background: rgba(0, 200, 83, .08); border-color: rgba(0, 200, 83, .35); }
.nrc-wrap .nrc-status-bad { color: #FF5A6E; background: rgba(255, 23, 68, .08); border-color: rgba(255, 23, 68, .35); }
.nrc-wrap .nrc-status-neutral { color: var(--c-text2); background: var(--nr-card-bg, rgba(255,255,255,.02)); border-color: var(--c-border2); }
.nrc-wrap .nrc-mt { margin-top: 18px !important; }
.nrc-wrap .nrc-strong { color: var(--c-text); font-weight: 600; overflow-wrap: anywhere; }
.nrc-wrap .nrc-pitch {
	background: linear-gradient(135deg, rgba(0, 229, 255, .06), rgba(66, 133, 244, .06) 50%, rgba(255, 23, 68, .05));
	border: 1px solid var(--c-border2); border-radius: 14px; padding: 18px 20px; margin: 0 0 4px;
}
.nrc-wrap .nrc-pitch p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--c-text2); }
.nrc-wrap .nrc-pitch .nrc-pitch-title { font-family: var(--c-display); font-weight: 600; font-size: 19px; color: var(--c-text); margin: 0 0 6px; }
body[data-nr-theme="light"] .nrc-wrap .nrc-status-ok { color: #0B7A3B; }
body[data-nr-theme="light"] .nrc-wrap .nrc-status-bad { color: #C4132F; }

/* Verification details */
.nrc-wrap .nrc-card-details { text-align: center; }
.nrc-wrap .nrc-details {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 28px;
	margin: 28px 0 0; padding: 28px 0 0; border-top: 1px solid var(--c-border);
	text-align: center;
}
.nrc-wrap .nrc-details div { min-width: 0; }
.nrc-wrap .nrc-details dt {
	font-family: var(--c-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--c-text3); margin: 0 0 6px;
}
.nrc-wrap .nrc-details dd { margin: 0; font-family: var(--c-display); font-weight: 600; font-size: 18px; color: var(--c-text); overflow-wrap: anywhere; line-height: 1.3; }
.nrc-wrap code {
	font-family: var(--c-mono); font-size: 0.86em; color: var(--c-text);
	background: var(--c-bg3); border: 1px solid var(--c-border); padding: 3px 8px; border-radius: 6px;
}
.nrc-wrap .nrc-id-line { margin: 16px 0 0; }

/* Certificate image */
.nrc-wrap .nrc-figure, .nrc-wrap .nrc-thumb { margin: 0 auto; max-width: 980px; }
.nrc-wrap .nrc-thumb { margin: 0 0 18px; }
.nrc-wrap .nrc-figure img, .nrc-wrap .nrc-thumb img {
	display: block; width: 100%; height: auto; border-radius: 14px;
	border: 1px solid var(--c-border2); box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
	-webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}

/* Name step */
.nrc-wrap .nrc-warn {
	background: rgba(255, 171, 0, .08); border: 1px solid rgba(255, 171, 0, .32); border-radius: 12px;
	padding: 14px 16px; color: var(--c-text); font-size: 14.5px; line-height: 1.55; margin: 0 0 22px;
}
.nrc-wrap .nrc-warn strong { color: #FFAB00; }
body[data-nr-theme="light"] .nrc-wrap .nrc-warn strong { color: #A86A00; }
.nrc-wrap .nrc-preview { background: var(--c-bg3); border: 1px solid var(--c-border); border-radius: 12px; padding: 14px 16px; }
.nrc-wrap .nrc-preview-label { display: block; font-family: var(--c-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-text3); }
.nrc-wrap .nrc-preview-name { display: block; margin-top: 4px; font-family: var(--c-display); font-weight: 700; font-size: 26px; color: var(--c-text); letter-spacing: 0.01em; overflow-wrap: anywhere; }

/* Course list */
.nrc-wrap .nrc-course { background: var(--c-bg2); border: 1px solid var(--c-border); border-radius: 16px; padding: 20px 22px; margin: 0 0 12px; }
.nrc-wrap .nrc-course-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 6px; }
.nrc-wrap .nrc-course h3 { font-family: var(--c-display) !important; font-weight: 600 !important; font-size: 19px !important; margin: 0 !important; color: var(--c-text) !important; }
.nrc-wrap .nrc-course p { margin: 0; color: var(--c-text2); font-size: 14.5px; }
.nrc-wrap .nrc-course .nrc-btn { margin-top: 16px; }
.nrc-wrap .nrc-badge { display: inline-block; font-family: var(--c-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 10px; border-radius: 100px; border: 1px solid var(--c-border2); color: var(--c-text2); white-space: nowrap; }
.nrc-wrap .nrc-badge-ok { color: #3DDC84; border-color: rgba(0, 200, 83, .35); background: rgba(0, 200, 83, .08); }
.nrc-wrap .nrc-badge-bad { color: #FF5A6E; border-color: rgba(255, 23, 68, .35); background: rgba(255, 23, 68, .08); }
.nrc-wrap .nrc-badge-new { color: #7FB0FF; border-color: rgba(66, 133, 244, .4); background: rgba(66, 133, 244, .1); }
body[data-nr-theme="light"] .nrc-wrap .nrc-badge-ok { color: #0B7A3B; }
body[data-nr-theme="light"] .nrc-wrap .nrc-badge-new { color: #1A57B8; }

/* Link box with copy button inside */
.nrc-wrap .nrc-linkbox {
	display: flex; align-items: center; gap: 14px;
	background: var(--c-bg); border: 1px solid var(--c-border2); border-radius: 12px; padding: 10px 10px 10px 16px;
}
.nrc-wrap .nrc-linkbox-text { flex: 1; min-width: 0; }
.nrc-wrap .nrc-linkbox-label { display: block; font-family: var(--c-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-text3); }
.nrc-wrap .nrc-linkbox-url { display: block; margin-top: 2px; font-family: var(--c-mono); font-size: 14px; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nrc-wrap .nrc-copy {
	flex: 0 0 auto; min-height: 42px; padding: 0 18px; margin: 0;
	font-family: var(--c-sans); font-weight: 600; font-size: 14px; line-height: 1;
	color: var(--c-text) !important; background: var(--c-bg3) !important; border: 1px solid var(--c-border2) !important;
	border-radius: 10px; cursor: pointer; text-decoration: none !important; box-shadow: none !important; transition: border-color .2s;
}
.nrc-wrap .nrc-copy:hover { border-color: var(--c-accent) !important; }

.nrc-wrap .nrc-step[data-step="done"] { max-width: 820px; }

@media (max-width: 768px) {
	.nrc-wrap { padding: 0 16px; }
	.nrc-wrap .nrc-section { padding-top: 56px; }
	.nrc-wrap .nrc-section:last-child { padding-bottom: 88px; }
	.nrc-wrap .nrc-section-tight { padding-top: 48px; }
	.nrc-wrap .nrc-sec-head { margin-bottom: 32px; }
	.nrc-wrap .nrc-sec-title { font-size: clamp(28px, 8vw, 36px) !important; }
	.nrc-wrap .nrc-card { padding: 24px 18px; border-radius: 18px; }
	.nrc-wrap .nrc-card-title { font-size: 21px !important; }
	.nrc-wrap .nrc-details { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
	.nrc-wrap .nrc-details dd { font-size: 16px; }
	.nrc-wrap .nrc-row { flex-direction: column; }
	.nrc-wrap .nrc-actions .nrc-btn { flex: 1 1 100%; }
	.nrc-wrap form .nrc-btn { width: 100%; }
	.nrc-wrap .nrc-course .nrc-btn { width: 100%; }
}