/* myPortal: the sign-in hub and the page for a single portal.

   A page on its own. No site header, no footer menu, no slide-outs: just the wordmark, the decision,
   and the way back. Navy end to end, so every Acadame sign-in looks like the same place.

   Every selector carries .acadame, and the colour and margin overrides carry !important, because the
   site stylesheet sets both on headings and paragraphs with !important and would otherwise paint the
   hero heading navy on navy and the card titles white on white. */

/* The site stylesheet paints .acadame and the body white with !important, which is right for every
   other page and wrong for this one. The shell carries the navy itself as well, so the page still
   reads correctly where :has is not supported. */
body:has(.acadame.pt) { background: var(--navy, #0F3069) !important; }
.acadame.pt {
	min-height: 100vh;
	background: var(--navy, #0F3069) !important;
	color: #fff;
}
.acadame .pt-shell {
	background: var(--navy, #0F3069);
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	padding: 0 20px;
	overflow: hidden;
}
/* Two soft lights behind everything, the same pair the Team Console sign-in uses. */
.acadame .pt-shell::before,
.acadame .pt-shell::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
.acadame .pt-shell::before { inset: -34% -18% auto auto; width: 78vw; height: 78vw; background: radial-gradient(circle at 38% 42%, #1a4a9a 0, transparent 62%); opacity: .8; }
.acadame .pt-shell::after { inset: -20% -10% auto auto; width: 44vw; height: 44vw; background: radial-gradient(circle at 46% 50%, var(--red, #E43348) 0, transparent 66%); opacity: .34; }
.acadame .pt-top,
.acadame .pt-main,
.acadame .pt-foot { position: relative; z-index: 1; width: 100%; max-width: 980px; margin: 0 auto; }

.acadame .pt-top { padding: 34px 0 0; text-align: center; }
.acadame .pt-logo { display: inline-block; line-height: 0; }
.acadame .pt-logo img { width: auto; height: 92px; max-width: 100%; display: block; }

.acadame .pt-main { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: 40px 0 48px; }

/* The top of the page. */
.acadame .pt-hero { text-align: center; }
.acadame .pt-eyebrow { margin: 0 auto 10px !important; max-width: none; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #FF6B7D; }
.acadame .pt-hero h1 { margin: 0 auto !important; max-width: 18ch; color: #fff !important; text-wrap: balance; }
.acadame .pt-lede { margin: 16px auto 0 !important; max-width: 56ch; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .84); }

/* The icon tile. Stroke icons, so the chip is a quiet tint and the line does the work. */
.acadame .pt-ic {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: #FDEAED;
	color: var(--red, #E43348);
}
.acadame .pt-ic .pt-svg { width: 24px; height: 24px; display: block; }

/* The buttons. Large, white, and obviously a way through rather than a panel to read. */
.acadame .pt-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: 36px auto 0;
	max-width: 880px;
	text-align: left;
}
.acadame .pt-grid a.pt-btn {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 22px 22px 20px;
	border-radius: 18px;
	background: #fff;
	color: var(--ink, #113575);
	text-decoration: none;
	box-shadow: 0 16px 40px rgba(3, 18, 48, .26);
	transition: transform .16s ease, box-shadow .16s ease;
}
.acadame .pt-grid a.pt-btn:hover,
.acadame .pt-grid a.pt-btn:focus-visible { transform: translateY(-3px); box-shadow: 0 26px 58px rgba(3, 18, 48, .38); color: var(--ink, #113575); }
.acadame .pt-btn .pt-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.acadame .pt-btn .pt-body strong { max-width: none; font-size: 18.5px; font-weight: 700; line-height: 1.25; color: var(--ink, #113575) !important; }
.acadame .pt-btn .pt-txt { max-width: none; font-size: 14.5px; line-height: 1.5; color: #4b5565; }
.acadame .pt-btn .pt-meta { max-width: none; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: #939cab; word-break: break-word; }
.acadame .pt-btn .pt-go {
	flex: 0 0 auto;
	align-self: center;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--red, #E43348);
	white-space: nowrap;
}
.acadame .pt-btn .pt-go::after {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform .15s ease;
}
.acadame .pt-btn:hover .pt-go::after { transform: rotate(-45deg) translate(2px, 2px); }
.acadame .pt-btn.is-soon .pt-ic { background: #ECF0F7; color: #6b7a94; }
.acadame .pt-btn.is-soon .pt-go { color: #6b7a94; }

.acadame .pt-help { margin: 26px auto 0 !important; max-width: 66ch; font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, .66); }
.acadame .pt-help a { color: #fff; }

/* One portal. */
.acadame .pt-act { margin: 28px 0 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.acadame .pt-act .pt-cta,
.acadame .pt-form .pt-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 30px;
	border: 0;
	border-radius: 12px;
	background: var(--red, #E43348);
	color: #fff;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 12px 30px rgba(228, 51, 72, .32);
	transition: transform .15s ease, background .15s ease;
}
.acadame .pt-cta::after { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.acadame .pt-cta:hover { background: #c92a3d; color: #fff; transform: translateY(-2px); }
.acadame .pt-cta:disabled { opacity: .55; cursor: default; transform: none; }
.acadame .pt-soon {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 !important;
	max-width: none;
	padding: 9px 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	font-size: 13.5px;
	font-weight: 600;
	color: #fff;
}
.acadame .pt-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #FFC24B; box-shadow: 0 0 0 4px rgba(255, 194, 75, .2); }
.acadame .pt-note { margin: 0 !important; max-width: 60ch; font-size: 13px; color: rgba(255, 255, 255, .64); }

/* What it does. */
.acadame .pt-points { margin: 34px 0 0; }
.acadame .pt-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.acadame .pt-card {
	padding: 16px 18px 18px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 12px 30px rgba(3, 18, 48, .2);
}
.acadame .pt-card-top { display: flex; align-items: center; gap: 11px; margin: 0 0 9px; }
.acadame .pt-card .pt-ic { width: 34px; height: 34px; border-radius: 10px; background: #FDEAED; color: var(--red, #E43348); }
.acadame .pt-card .pt-ic .pt-svg { width: 18px; height: 18px; }
.acadame .pt-card h2 { margin: 0 !important; max-width: none; font-size: 14.5px !important; font-weight: 700; letter-spacing: .005em; line-height: 1.3 !important; color: var(--ink, #113575) !important; }
.acadame .pt-card p { margin: 0 0 6px !important; max-width: none; font-size: 13.5px; line-height: 1.55; color: #4b5565; }
.acadame .pt-card p:last-child { margin-bottom: 0 !important; }

/* Register interest. */
.acadame .pt-ask { margin: 40px auto 0; width: 100%; max-width: 720px; }
.acadame .pt-ask[hidden] { display: none !important; }
.acadame .pt-ask-in { padding: 32px 30px 28px; border-radius: 20px; background: #fff; box-shadow: 0 20px 50px rgba(3, 18, 48, .3); }
.acadame .pt-ask-in h2 { margin: 0 0 8px !important; max-width: none; font-size: 21px !important; line-height: 1.25 !important; color: var(--ink, #113575) !important; }
.acadame .pt-ask-in > p { margin: 0 0 20px !important; max-width: none; font-size: 15px; line-height: 1.6; color: #4b5565; }
.acadame .pt-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.acadame .pt-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.acadame .pt-f.pt-wide { grid-column: 1 / -1; }
.acadame .pt-f label { display: block; max-width: none; font-size: 12.5px; font-weight: 600; color: #1d2327; }
.acadame .pt-f label span { font-weight: 500; color: #8a93a3; }
.acadame .pt-f input { width: 100%; max-width: none; font: inherit; font-size: 15px; padding: 11px 13px; border: 1px solid #cfd4dc; border-radius: 10px; background: #fff; color: #1d2327; }
.acadame .pt-f input:focus { outline: 0; border-color: var(--blue, #3280FA); box-shadow: 0 0 0 3px rgba(50, 128, 250, .18); }
.acadame .pt-f input:disabled { background: #f4f6f9; color: #8a93a3; }
.acadame .pt-f[aria-hidden="true"] { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.acadame .pt-acts { flex-direction: row; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.acadame .pt-msg { margin: 0 !important; max-width: 40ch; font-size: 13.5px; line-height: 1.45; color: #4b5565; }
.acadame .pt-msg.is-good { color: #1b8a44; font-weight: 600; }
.acadame .pt-msg.is-bad { color: #b3132a; font-weight: 600; }
.acadame .pt-small { margin: 18px 0 0 !important; max-width: none; font-size: 12.5px; color: #8a93a3; }
.acadame .pt-small a { color: #4b5565; text-decoration: underline; }

/* The other ways in. */
.acadame .pt-rel { margin: 44px 0 0; }
.acadame .pt-rel h2 { margin: 0 0 16px !important; max-width: none; font-size: 15px !important; line-height: 1.3 !important; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: rgba(255, 255, 255, .62) !important; }
.acadame .pt-rel-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.acadame .pt-rel-list a {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 18px;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, .18);
	background: rgba(255, 255, 255, .05);
	color: #fff;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease;
}
.acadame .pt-rel-list a:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .42); color: #fff; }
.acadame .pt-rel-list strong { font-size: 15px; color: #fff; }
.acadame .pt-rel-list span { font-size: 12.5px; color: rgba(255, 255, 255, .68); }

/* The way back. */
.acadame .pt-foot { padding: 0 0 30px; text-align: center; }
.acadame .pt-foot p { margin: 0 !important; max-width: none; font-size: 12.5px; color: rgba(255, 255, 255, .5); }
.acadame .pt-foot a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.acadame .pt-foot a:hover { color: #fff; text-decoration: underline; }
.acadame .pt-foot span { padding: 0 4px; }

@media (max-width: 880px) {
	.acadame .pt-cards,
	.acadame .pt-rel-list { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
	.acadame .pt-main { padding: 30px 0 38px; }
	.acadame .pt-grid { grid-template-columns: 1fr; gap: 14px; }
	.acadame .pt-grid a.pt-btn { padding: 18px; gap: 14px; }
	.acadame .pt-btn .pt-go { align-self: flex-end; }
	.acadame .pt-form { grid-template-columns: 1fr; }
	.acadame .pt-ask-in { padding: 26px 20px 24px; }
	.acadame .pt-ic { width: 44px; height: 44px; border-radius: 13px; }
	.acadame .pt-logo img { height: 64px; }
}