/* Homepage (canvas boards "Homepage" and "Welcome screen"). */

.pm-home .pm-frame { border-radius: 32px; }
.pm-home .pm-top { padding-bottom: 0; }
.pm-home .pmh, .pm-home .pmh-hero, .pm-home .pmw { font-family: var(--pm-font); color: var(--pm-slate); }
.pm-home .pmh *, .pm-home .pmh-hero *, .pm-home .pmw * { box-sizing: border-box; }
.pm-home .pmh img, .pm-home .pmh-hero img, .pm-home .pmw img { border-radius: 0; box-shadow: none; max-width: 100%; }
.pm-home .pmh h2, .pm-home .pmh h3, .pm-home .pmh p, .pm-home .pmh figure, .pm-home .pmh blockquote, .pm-home .pmh ol, .pm-home .pmh-hero h1, .pm-home .pmh-hero p, .pm-home .pmw h2, .pm-home .pmw p { margin: 0; }
.pm-home :is(.pmh, .pm-home .pmh-hero, .pm-home .pmw) :is(a, button):focus-visible { outline: 3px solid var(--pm-accent); outline-offset: 3px; }

@keyframes pm-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.pm-home .pm-rise { animation: pm-up .7s var(--pm-ease) both; animation-delay: var(--d, 0s); }

/* ---------- Hero (inside the header frame) ---------- */

.pm-home .pmh-hero { position: relative; overflow: hidden; border-radius: 32px; }
.pm-home .pmh-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }
.pm-home .pmh-hero-fade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(238,246,252,.96) 0%, rgba(238,246,252,.86) 38%, rgba(238,246,252,.2) 70%, rgba(238,246,252,0) 100%); }
.pm-home .pmh-hero-in { position: relative; max-width: 1240px; margin: 0 auto; padding: 200px 24px 96px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 48px; }
.pm-home .pmh-hero-copy { flex: 1 1 600px; min-width: 0; max-width: 660px; }
.pm-home .pmh-h1 { font-size: 56px; line-height: 1.06; font-weight: 700; color: var(--pm-navy); letter-spacing: -0.01em; }
.pm-home .pmh-hero-sub { margin-top: 28px !important; font-size: 26px; line-height: 1.3; font-weight: 500; color: var(--pm-slate); }
.pm-home .pmh-hero-lead { margin-top: 14px !important; max-width: 560px; font-size: 18px; line-height: 1.6; color: var(--pm-text); }
.pm-home .pmh-hero .pm-cta { margin-top: 32px; }
.pm-home .pmh-hero-in { align-items: center; max-width: 1320px; }
/* Video in a frosted-glass frame with a light gradient edge */
.pm-home .pmh-glass {
	flex: 1 1 520px; max-width: 620px; min-width: 0; margin-left: auto; border-radius: 30px; padding: 14px; position: relative; isolation: isolate;
	background: linear-gradient(140deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,.18) 48%, rgba(206,230,248,.34) 100%);
	backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.35), 0 40px 90px -36px rgba(0,64,110,.45), 0 0 0 1px rgba(0,64,110,.05);
	transition: transform .5s var(--pm-ease), box-shadow .5s ease;
}
/* Gradient rim: bright top-left fading to blue bottom-right */
.pm-home .pmh-glass::before {
	content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px; pointer-events: none;
	background: linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.35) 40%, rgba(37,173,227,.55) 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
/* Soft sheen that sweeps across on hover */
.pm-home .pmh-glass::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; opacity: 0;
	background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 66%) -120% 0 / 220% 100% no-repeat;
	transition: opacity .3s ease;
}
.pm-home .pmh-glass:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.35), 0 50px 100px -36px rgba(0,64,110,.55), 0 0 0 1px rgba(0,64,110,.06); }
.pm-home .pmh-glass:hover::after { opacity: 1; animation: pmh-sheen 1.1s var(--pm-ease) forwards; }
@keyframes pmh-sheen { to { background-position: 120% 0; } }
.pm-home .pmh-hero .pmh-vid {
	position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 20px; padding: 0; border: 0; box-shadow: 0 1px 0 rgba(255,255,255,.6);
	background: var(--pm-line); cursor: pointer;
}
.pm-home .pmh-vid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22,1,.36,1); }
.pm-home .pmh-vid:hover img { transform: scale(1.04); }
.pm-home .pmh-play {
	position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 999px;
	background: rgba(255,255,255,.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.9);
	color: var(--pm-navy); display: flex; align-items: center; justify-content: center; box-shadow: 0 16px 30px -16px rgba(0,64,110,.6);
	transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.pm-home .pmh-play svg { width: 22px; height: 22px; margin-left: 3px; }
.pm-home .pmh-play::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 2px solid rgba(255,255,255,.85); animation: pmh-pulse 2.4s ease-out infinite; }
@keyframes pmh-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
.pm-home .pmh-vid:hover .pmh-play { transform: scale(1.08); }

/* ---------- Sections ---------- */

.pm-home .pmh-sec { padding: 112px 24px; }
.pm-home .pmh-wrap { max-width: 1240px; margin: 0 auto; }
.pm-home .pmh-split { display: flex; flex-wrap: wrap; align-items: center; gap: 64px; }
.pm-home .pmh-split > * { flex: 1 1 480px; min-width: 0; }
.pm-home .pmh-h2 { font-size: 44px; line-height: 1.1; font-weight: 600; color: var(--pm-navy); letter-spacing: -0.01em; }
.pm-home .pmh-lead { margin-top: 18px !important; font-size: 18px; line-height: 1.6; color: var(--pm-text); }

.pm-home .pmh-cards { margin-top: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pm-home .pmh-card {
	padding: 22px; display: flex; flex-direction: column; gap: 14px; background: var(--pm-white); border: 1px solid var(--pm-line); border-radius: 20px;
	transition: transform .3s var(--pm-ease), box-shadow .3s ease, border-color .3s ease;
}
.pm-home .pmh-card:hover { transform: translateY(-4px); border-color: var(--pm-line-2); box-shadow: 0 24px 48px -24px rgba(32,50,71,.25); }
.pm-home .pmh-card h3 { font-size: 19px; font-weight: 600; color: var(--pm-slate); }
.pm-home .pmh-card p { font-size: 15px; line-height: 1.6; color: var(--pm-text); }
.pm-home .pmh-ico { width: 48px; height: 48px; border-radius: 14px; background: var(--pm-line); color: var(--pm-navy); display: flex; align-items: center; justify-content: center; transition: background .3s ease, color .3s ease; }
.pm-home .pmh-ico svg { width: 22px; height: 22px; }
.pm-home .pmh-card:hover .pmh-ico { background: var(--pm-navy); color: var(--pm-white); }

.pm-home .pmh .pmh-btn {
	margin-top: 32px; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px;
	background: var(--pm-navy); color: var(--pm-white); font-size: 15px; font-weight: 600; text-decoration: none;
	transition: background .2s ease, transform .2s var(--pm-ease), box-shadow .2s ease;
}
.pm-home .pmh .pmh-btn:hover { background: var(--pm-navy-hover); color: var(--pm-white); transform: translateY(-1px); box-shadow: 0 8px 24px -8px rgba(0,64,110,.55); }
.pm-home .pmh-arr { transition: transform .22s var(--pm-ease); }
.pm-home .pmh-btn:hover .pmh-arr { transform: translateX(3px); }

/* Quotes band */
.pm-home .pmh-inset { padding: 0 16px; }
.pm-home .pmh-quotes { position: relative; overflow: hidden; border-radius: 32px; background: var(--pm-tint); }
.pm-home .pmh-quotes-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.pm-home .pmh-quotes-in { position: relative; max-width: 1040px; margin: 0 auto; padding: 96px 24px; text-align: center; }
.pm-home .pmh-qmark { display: block; margin: 0 auto; color: var(--pm-accent); }
.pm-home .pmh-quote { animation: pm-up .55s var(--pm-ease) both; }
.pm-home .pmh-quote[hidden] { display: none; }
.pm-home .pmh-quotes.is-typing .pmh-quote { animation: none; }
/* Typed quote (home.js): letters are laid out up front and revealed in place, so nothing reflows */
.pm-home .pmh-quote blockquote { position: relative; }
.pm-home .pmh-quotes.is-typing .pmh-ch { opacity: 0; }
.pm-home .pmh-quotes.is-typing .pmh-ch.is-on { opacity: 1; transition: opacity .18s ease; }
.pm-home .pmh-cursor {
	position: absolute; left: 0; top: 0; width: 3px; height: 1.15em; margin: .04em 0 0 3px; border-radius: 2px; background: var(--pm-accent); pointer-events: none;
	transition: transform .09s cubic-bezier(.2,.8,.2,1); animation: pmh-blink 1s steps(1) infinite;
}
.pm-home .pmh-quotes:not(.is-typing) .pmh-cursor { display: none; }
@keyframes pmh-blink { 50% { opacity: 0; } }
.pm-home .pmh-quote blockquote { margin-top: 24px !important; font-size: 40px; line-height: 1.2; font-weight: 500; color: var(--pm-navy); border: 0; padding: 0; font-style: normal; }
.pm-home .pmh-quote figcaption { font-style: normal; margin-top: 28px; display: flex; flex-direction: column; gap: 4px; min-height: 52px; }
.pm-home .pmh-quote figcaption strong { font-style: normal; font-size: 17px; font-weight: 600; color: var(--pm-slate); }
.pm-home .pmh-quote figcaption span { font-style: normal; font-size: 15px; color: var(--pm-text); }
.pm-home .pmh-avatars { margin-top: 36px; display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; }
.pm-home .pmh .pmh-av {
	position: relative; margin: 0; padding: 4px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
	transition: transform .3s var(--pm-ease), opacity .3s ease; opacity: .7;
}
.pm-home .pmh .pmh-av:hover { transform: translateY(-3px); background: transparent; opacity: 1; }
.pm-home .pmh .pmh-av[aria-pressed="true"] { opacity: 1; transform: scale(1.08); }
.pm-home .pmh-av img {
	display: block; width: 88px; height: 88px; border-radius: 999px !important; object-fit: cover; object-position: 50% 20%;
	background: var(--pm-white); box-shadow: 0 0 0 3px var(--pm-white), 0 14px 28px -12px rgba(0,64,110,.45) !important;
}
/* Ring around the current speaker fills while the typed quote holds (visual only; home.js runs the timer) */
@property --pmh-p { syntax: '<number>'; inherits: false; initial-value: 0; }
.pm-home .pmh-av::after {
	content: ""; position: absolute; inset: -3px; border-radius: 999px; pointer-events: none; opacity: 0;
	background: conic-gradient(var(--pm-navy) calc(var(--pmh-p) * 1%), rgba(0,64,110,.15) 0);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
}
.pm-home .pmh-av[aria-pressed="true"]::after { opacity: 1; --pmh-p: 100; }
.pm-home .pmh-quotes.is-auto .pmh-av[aria-pressed="true"]:not(.is-timing)::after { --pmh-p: 0; }
.pm-home .pmh-quotes.is-auto .pmh-av.is-timing::after { animation: pmh-ring 5s linear forwards; }
.pm-home .pmh-quotes.is-paused .pmh-av.is-timing::after { animation-play-state: paused; }
@keyframes pmh-ring { from { --pmh-p: 0; } to { --pmh-p: 100; } }

/* New standard */
.pm-home .pmh-steps { margin-top: 32px !important; padding: 0; list-style: none; border-top: 1px solid var(--pm-line); }
.pm-home .pmh-steps li { display: flex; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--pm-line); }
.pm-home .pmh-step-no { flex-shrink: 0; width: 36px; padding-top: 3px; font-size: 14px; font-weight: 600; color: var(--pm-accent); }
.pm-home .pmh-steps h3 { font-size: 19px; font-weight: 600; color: var(--pm-slate); }
.pm-home .pmh-steps p { margin-top: 6px !important; font-size: 15px; line-height: 1.6; color: var(--pm-text); }
.pm-home .pmh-device { max-width: 520px; margin: 0 auto; border-radius: 32px; background: radial-gradient(circle at 50% 45%, #FFFFFF 0%, var(--pm-tint) 70%); border: 1px solid var(--pm-line); padding: 40px; display: flex; justify-content: center; }
.pm-home .pmh-device img { display: block; width: 100%; max-width: 420px; height: auto; }

/* ---------- Welcome screen ---------- */

.pm-home .pmw { position: fixed; inset: 0; z-index: 100001; padding: 16px; background: var(--pm-white); }
.pm-home .pmw.is-hidden { display: none; }
.pm-home .pmw-card { position: relative; height: 100%; border-radius: 32px; overflow: hidden; background: var(--pm-tint); display: flex; align-items: center; justify-content: center; overflow-y: auto; }
.pm-home .pmw-bg { position: absolute; inset: 0; width: 100% !important; height: 100%; max-width: none !important; object-fit: cover; }
.pm-home .pmw-glow { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 50% 52%, rgba(255,255,255,.92), rgba(255,255,255,.55) 60%, rgba(255,255,255,.2) 100%); }
.pm-home .pmw-logo { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); width: 200px; height: auto; }
.pm-home .pmw-logo img { display: block; width: 100%; height: auto; }
.pm-home .pmw-in { position: relative; max-width: 920px; padding: 120px 24px 48px; text-align: center; }
.pm-home .pmw-kicker { font-size: 34px; line-height: 1.2; font-weight: 500; color: var(--pm-navy); letter-spacing: -0.01em; animation: pm-up .7s var(--pm-ease) both; }
.pm-home .pmw-for { margin: 14px auto 0 !important; max-width: 720px; font-size: 19px; line-height: 1.55; color: var(--pm-text); animation: pm-up .7s .08s var(--pm-ease) both; }
.pm-home .pmw-big { margin-top: 14px !important; font-size: 52px; line-height: 1.08; font-weight: 700; color: var(--pm-navy); letter-spacing: -0.01em; animation: pm-up .7s .08s var(--pm-ease) both; }
.pm-home .pmw-lead { margin: 22px auto 0 !important; max-width: 680px; font-size: 18px; line-height: 1.6; color: var(--pm-slate); animation: pm-up .7s .16s var(--pm-ease) both; }
.pm-home .pmw-choices { margin: 40px auto 0; max-width: 640px; display: flex; flex-wrap: wrap; gap: 16px; animation: pm-up .7s .24s var(--pm-ease) both; }
.pm-home .pmw .pmw-choice {
	flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: 16px; padding: 20px 20px 20px 24px; border-radius: 20px;
	font-size: 18px; font-weight: 600; text-align: left; text-decoration: none;
	transition: transform .3s var(--pm-ease), box-shadow .3s ease, background .2s ease, border-color .2s ease;
}
.pm-home .pmw .pmw-choice:hover { transform: translateY(-3px); }
.pm-home .pmw .pmw-choice > svg { margin-left: auto; width: 18px; height: 18px; transition: transform .22s var(--pm-ease); }
.pm-home .pmw .pmw-choice:hover > svg { transform: translateX(4px); }
.pm-home .pmw .pmw-choice--p { background: var(--pm-navy); color: var(--pm-white); box-shadow: 0 24px 48px -24px rgba(0,64,110,.6); }
.pm-home .pmw .pmw-choice--p:hover { background: var(--pm-navy-hover); color: var(--pm-white); }
.pm-home .pmw .pmw-choice--g { background: rgba(255,255,255,.82); color: var(--pm-slate); border: 1px solid var(--pm-line-2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pm-home .pmw .pmw-choice--g:hover { background: var(--pm-white); border-color: var(--pm-navy); color: var(--pm-navy); }
.pm-home .pmw-ico { flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.pm-home .pmw-ico svg { width: 22px; height: 22px; }
.pm-home .pmw-choice--p .pmw-ico { background: rgba(255,255,255,.16); }
.pm-home .pmw-choice--g .pmw-ico { background: var(--pm-line); color: var(--pm-navy); }

/* ---------- Breakpoints ---------- */

@media (max-width: 860px) {
	.pm-home .pmh-cards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.pm-home .pm-frame, .pm-home .pmh-hero { border-radius: 26px; }
	.pm-home .pmh-hero-in { padding: 112px 16px 40px; gap: 32px; }
	.pm-home .pmh-glass { flex-basis: 100%; max-width: none; padding: 10px; border-radius: 24px; }
	.pm-home .pmh-hero .pmh-vid { border-radius: 16px; }
	.pm-home .pmh-hero-fade { background: rgba(238,246,252,.86); }
	.pm-home .pmh-h1 { font-size: 36px; line-height: 1.1; }
	.pm-home .pmh-hero-sub { font-size: 22px; }
	.pm-home .pmh-sec { padding: 64px 16px; }
	.pm-home .pmh-split { gap: 32px; }
	.pm-home .pmh-h2 { font-size: 30px; line-height: 1.15; }
	.pm-home .pmh-device { padding: 24px; }
	.pm-home .pmh-inset { padding: 0 12px; }
	.pm-home .pmh-quotes { border-radius: 26px; }
	.pm-home .pmh-quotes-in { padding: 56px 20px; }
	.pm-home .pmh-quote blockquote { font-size: 26px; }
	.pm-home .pmh-avatars { gap: 12px; }
	.pm-home .pmh-av img { width: 64px; height: 64px; }
	.pm-home .pmw { padding: 12px; }
	.pm-home .pmw-card { border-radius: 26px; align-items: flex-start; }
	.pm-home .pmw-logo { top: 28px; width: 160px; }
	.pm-home .pmw-in { padding: 104px 18px 32px; }
	.pm-home .pmw-kicker { font-size: 24px; }
	.pm-home .pmw-for { font-size: 16px; }
	.pm-home .pmw-big { font-size: 34px; }
	.pm-home .pmw-lead { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.pm-home .pm-rise, .pm-home .pmh-quote, .pm-home .pmw * { animation: none !important; }
	.pm-home .pmh *, .pm-home .pmh-hero *, .pm-home .pmw * { transition: none !important; }
	.pm-home .pmh-play::after, .pm-home .pmh-glass:hover::after, .pm-home .pmh-cursor { animation: none !important; }
}

/* Hero frame and photo fade out to white at the bottom (same as the other pages). */
.pm-home .pm-frame:not(.pm-frame--band) {
	background-color: transparent;
	background-image: linear-gradient(180deg, var(--pm-tint) 0%, var(--pm-tint) 60%, rgba(238,246,252,0) 100%);
}
.pm-home .pmh-hero > :is(.pmh-hero-img, .pmh-hero-fade) {
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 86%);
	mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 86%);
}