/* 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; }
}

/* Screens. A portal page that is selling a product has to show the product, so the hero gets one
   picture and the walkthrough alternates text and screen down the page. Everything is prefixed
   .acadame and heading colour, size and margin carry !important, because site.min.css sets all
   three on headings with !important and would otherwise win. */
.acadame .pt-shot { margin: 34px 0 0; }
.acadame .pt-shot img,
.acadame .pt-step-img img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 26px 60px rgba(4, 16, 42, .46); }
.acadame .pt-shot figcaption { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.62); }

.acadame .pt-walk { margin: 58px 0 0; }
.acadame .pt-walk-h { margin: 0 0 26px !important; max-width: none; font-size: 20px !important; line-height: 1.3 !important; color: #fff !important; }
.acadame .pt-step { display: grid; grid-template-columns: minmax(0,0.88fr) minmax(0,1.12fr); gap: 30px 44px; align-items: center; margin: 0 0 46px; }
.acadame .pt-step:last-child { margin-bottom: 0; }
.acadame .pt-step.is-flip .pt-step-txt { order: 2; }
.acadame .pt-step.is-flip .pt-step-img { order: 1; }
.acadame .pt-step h3 { margin: 0 0 10px !important; max-width: none; font-size: 17px !important; line-height: 1.3 !important; color: #fff !important; }
.acadame .pt-step p { margin: 0 0 10px !important; max-width: 46ch; font-size: 14.5px !important; line-height: 1.65 !important; color: rgba(255,255,255,.80) !important; }
.acadame .pt-step p:last-child { margin-bottom: 0 !important; }
.acadame .pt-ticks { margin: 14px 0 0 !important; padding: 0 !important; list-style: none !important; }
.acadame .pt-ticks li { position: relative; margin: 0 0 8px; padding-left: 26px; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.80); }
.acadame .pt-ticks li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 9px; height: 5px; border-left: 2px solid #45D483; border-bottom: 2px solid #45D483; transform: rotate(-45deg); }
.acadame .pt-step-img { margin: 0; }

@media (max-width: 860px) {
	.acadame .pt-step { grid-template-columns: minmax(0,1fr); gap: 18px; margin-bottom: 38px; }
	.acadame .pt-step.is-flip .pt-step-txt { order: 1; }
	.acadame .pt-step.is-flip .pt-step-img { order: 2; }
	.acadame .pt-step p { max-width: none; }
	.acadame .pt-walk { margin-top: 42px; }
}



/* ---------------------------------------------------------------------------
   A portal page on paper.

   The hub stays navy: it is four buttons and a decision, and the dark reads as
   a sign-in door. A portal page is different now it carries screenshots, and
   screenshots of a light interface sitting on a dark field read as bright holes
   punched in the page rather than as pictures of a product. So the navy is kept
   for the band at the top, where it does the work, and everything below it sits
   on paper with the steps banded so a long page still has a rhythm.

   The bands bleed full width from inside a 980px column, which is what the
   100vw pseudo-elements are for. .pt-shell already has overflow hidden, so they
   cannot cause a sideways scroll.
   --------------------------------------------------------------------------- */

.acadame .pt-portal { --pt-paper: #FFFFFF; --pt-tint: #EEF3FA; --pt-line: #DDE6F3; --pt-ink: #113575; --pt-body: #4B5565; }

body:has(.acadame.pt .pt-portal),
body:has(.acadame.pt.pt-portal) { background: var(--pt-paper, #fff) !important; }
.acadame .pt-portal { background: var(--pt-paper) !important; color: var(--pt-body); }
.acadame .pt-portal::before,
.acadame .pt-portal::after { display: none; }

/* The navy band. It reaches up past the wordmark and down past the hero, so the
   screen underneath straddles its edge rather than sitting politely below it. */
.acadame .pt-portal .pt-hero { position: relative; z-index: 1; }
.acadame .pt-portal .pt-hero::before {
	content: ""; position: absolute; z-index: -1;
	left: 50%; transform: translateX(-50%); width: 100vw; top: -260px; bottom: -164px;
	background: linear-gradient(180deg, #0C2755 0%, var(--navy, #0F3069) 58%, #143A7C 100%);
}
.acadame .pt-portal .pt-hero::after {
	content: ""; position: absolute; z-index: -1; inset: -260px auto -164px 50%;
	width: 100vw; transform: translateX(-50%);
	background: radial-gradient(60vw 60vw at 86% 4%, rgba(50, 128, 250, .30) 0, transparent 62%),
	            radial-gradient(34vw 34vw at 92% 0%, rgba(228, 51, 72, .22) 0, transparent 64%);
	pointer-events: none;
}

/* The wordmark sits above the band, not under it. The band is the hero's own ::before and the
   hero carries z-index 1, so without this the whole header is painted over and the logo
   disappears on every portal page. */
.acadame .pt-portal .pt-top { z-index: 2; }

.acadame .pt-portal .pt-shot { position: relative; z-index: 2; margin-top: 38px; }
.acadame .pt-portal .pt-shot img { border-color: rgba(255, 255, 255, .26); box-shadow: 0 24px 54px rgba(12, 39, 85, .26); }
.acadame .pt-portal .pt-shot figcaption { color: #7C8698; }

/* The walkthrough, banded. */
.acadame .pt-portal .pt-walk { margin-top: 54px; }
.acadame .pt-portal .pt-walk-h { color: var(--pt-ink) !important; }
.acadame .pt-portal .pt-step { position: relative; margin: 0; padding: 46px 0; }
.acadame .pt-portal .pt-step::before {
	content: ""; position: absolute; z-index: -1; top: 0; bottom: 0;
	left: 50%; transform: translateX(-50%); width: 100vw;
}
.acadame .pt-portal .pt-step:nth-of-type(even)::before { background: var(--pt-tint); }
.acadame .pt-portal .pt-step h3 { color: var(--pt-ink) !important; }
.acadame .pt-portal .pt-step p { color: var(--pt-body) !important; }
.acadame .pt-portal .pt-ticks li { color: var(--pt-body); }
.acadame .pt-portal .pt-ticks li::before { border-color: #1B8A44; }
.acadame .pt-portal .pt-step-img img { border-color: var(--pt-line); box-shadow: 0 18px 44px rgba(15, 48, 105, .13); }

/* Everything after the walkthrough. */
.acadame .pt-portal .pt-points { margin-top: 46px; }
.acadame .pt-portal .pt-card { border: 1px solid var(--pt-line); box-shadow: 0 10px 26px rgba(15, 48, 105, .07); }
.acadame .pt-portal .pt-ask-in { border: 1px solid var(--pt-line); box-shadow: 0 18px 44px rgba(15, 48, 105, .12); }
.acadame .pt-portal .pt-help,
.acadame .pt-portal .pt-note { color: #7C8698 !important; }
.acadame .pt-portal .pt-rel h2 { color: #8A93A3 !important; }
.acadame .pt-portal .pt-rel-list a { background: var(--pt-paper); border-color: var(--pt-line); color: var(--pt-ink); }
.acadame .pt-portal .pt-rel-list a:hover { background: var(--pt-tint); border-color: #C6D5EA; color: var(--pt-ink); }
.acadame .pt-portal .pt-rel-list strong { color: var(--pt-ink); }
.acadame .pt-portal .pt-rel-list span { color: var(--pt-body); }
.acadame .pt-portal .pt-foot,
.acadame .pt-portal .pt-foot a { color: #8A93A3 !important; }

@media (max-width: 860px) {
	.acadame .pt-portal .pt-hero::before,
	.acadame .pt-portal .pt-hero::after { bottom: -120px; }
	.acadame .pt-portal .pt-step { padding: 34px 0; }
}