/* ------------------------------------------------------------
   15. PORTAL CTA — browser-ish card + floating chips
   ------------------------------------------------------------ */
.ord-portal-section {
	background: var(--paper);
	border-top: 2.5px solid var(--ink);
	border-bottom: 2.5px solid var(--ink);
}

.ord-portal-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

.ord-portal-copy .ord-eyebrow { margin-bottom: 18px; }

.ord-portal-title {
	font-size: clamp(1.7rem, 3.4vw, 2.4rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	margin: 16px 0 16px;
}

.ord-portal-desc {
	font-size: 1rem;
	color: var(--muted);
	margin-bottom: 24px;
}

.ord-soon-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--ord-font-heading);
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.02em;
	color: var(--ink);
	background: var(--amber);
	border: 2.5px solid var(--ink);
	border-radius: var(--ord-pill);
	box-shadow: 4px 4px 0 0 var(--ink);
	padding: 7px 16px;
	margin-bottom: 4px;
	animation: ord-soon-pulse 2.4s ease-in-out infinite;
}

@keyframes ord-soon-pulse {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-3px); }
}

.ord-btn:disabled,
.ord-btn[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
}

.ord-btn:disabled:hover,
.ord-btn[disabled]:hover {
	transform: none;
	box-shadow: var(--ord-shadow-sm);
}

.ord-portal-feats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 30px;
}

.ord-portal-feat {
	display: flex;
	gap: 9px;
	align-items: center;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--ink);
	background: var(--paper);
	border: 2px solid var(--ink);
	border-radius: 11px;
	box-shadow: 3px 3px 0 0 var(--ink);
	padding: 10px 12px;
}

.ord-portal-feat::before {
	content: '✓';
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.68rem;
	font-weight: 700;
	color: var(--ink);
	background: var(--mint);
	border: 2px solid var(--ink);
	border-radius: 50%;
}

.ord-portal-visual {
	position: relative;
}

.ord-portal-card {
	background: var(--paper);
	border: 2.5px solid var(--ink);
	border-radius: var(--ord-radius);
	box-shadow: 12px 12px 0 0 var(--ink);
	overflow: hidden;
}

.ord-portal-card-bar {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 12px 16px;
	background: var(--mist);
	border-bottom: 2.5px solid var(--ink);
}

/* The `.ord-code-card-file` label is designed for the dark code card; on the
   light portal bar it was near-invisible (light text on mist). Give it a dark
   label here. */
.ord-portal-card-bar .ord-code-card-file {
	color: var(--ink-soft);
}

.ord-portal-card-dot {
	width: 11px;
	height: 11px;
	border: 2px solid var(--ink);
	border-radius: 50%;
}

.ord-portal-card-dot--red { background: var(--violet); }
.ord-portal-card-dot--amber { background: var(--amber); }
.ord-portal-card-dot--green { background: var(--violet-deep); }

.ord-portal-card-body {
	padding: 24px;
	display: grid;
	gap: 18px;
}

.ord-portal-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	font-size: 0.9rem;
}

.ord-portal-row span { color: var(--muted); font-weight: 600; }
.ord-portal-row strong { color: var(--ink); font-weight: 700; }

.ord-portal-progress-label {
	display: flex;
	justify-content: space-between;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--muted);
	margin-bottom: 8px;
}

.ord-portal-bar {
	height: 16px;
	background: var(--mist);
	border: 2px solid var(--ink);
	border-radius: var(--ord-pill);
	overflow: hidden;
}

.ord-portal-bar-fill {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--violet), var(--violet-deep));
	border-right: 2px solid var(--ink);
	transition: width 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ord-portal-visual.is-in .ord-portal-bar-fill { width: 75%; }