/* MyPress — sito pubblico (mypress.k-results.com).
   Impostazione grafica dal redesign K-Results (Figma "K-Results Redesign", frame mypress):
   navy #102C54 con sfumatura prugna #800A60, titoli Manrope, card molto arrotondate. */

:root {
	--mp-navy: #102C54;
	--mp-navy-deep: #0B2042;
	--mp-plum: #800A60;
	--mp-plum-dark: #67084D;
	--mp-ink: #101723;
	--mp-muted: #5A6B7C;
	--mp-line: #DCE3E9;
	--mp-paper: #FFFFFF;
	--mp-soft: #F0F0F2;
	--mp-band: #F2F3F5;
	--mp-wrap: 1180px;
	--mp-radius: 28px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.mp {
	margin: 0;
	background: var(--mp-paper);
	color: var(--mp-ink);
	font: 400 1.0625rem/1.65 var(--myp-font-body);
	-webkit-font-smoothing: antialiased;
}
.mp h1, .mp h2, .mp h3 { font-family: var(--myp-font-display); font-weight: 700; letter-spacing: -0.025em; margin: 0; }
:where(.mp) a { color: inherit; }
.mp :focus-visible { outline: 3px solid var(--mp-plum); outline-offset: 3px; border-radius: 6px; }
.mp-hero :focus-visible { outline-color: #fff; }
.mp-wrap { width: min(var(--mp-wrap), 100% - 40px); margin-inline: auto; }
.mp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Barra ---------------------------------------------------------------------- */
.mp-bar { position: absolute; inset: 0 0 auto; z-index: 10; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.mp-bar__inner { display: flex; align-items: center; gap: 18px; min-height: 92px; }

.mp-brand { display: block; text-decoration: none; line-height: 1; }
.mp-brand__word { font: 700 2rem/1 var(--myp-font-display); letter-spacing: -0.045em; }
.mp-brand__word b { color: #A3126F; font-weight: 700; }
.mp-brand__tag { display: block; margin-top: 4px; text-align: right; font: 700 0.62rem/1 var(--myp-font-display); letter-spacing: 0.02em; }
.mp-brand__rule { width: 1px; align-self: stretch; margin: 22px 4px; background: rgba(255, 255, 255, 0.35); }
.mp-brand__k { display: inline-flex; text-decoration: none; }
.mp-brand__k svg { width: 26px; height: 32px; display: block; }

.mp-nav { display: flex; align-items: center; gap: 18px; margin-left: auto; font-size: 0.95rem; }
.mp-nav a { text-decoration: none; opacity: 0.86; }
.mp-nav a:hover { opacity: 1; }
.mp-nav span { opacity: 0.35; }

.mp-login {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 11px 22px; border-radius: 999px; background: var(--mp-plum); color: #fff;
	font: 700 0.92rem/1.2 var(--myp-font-display); text-decoration: underline; text-underline-offset: 3px;
	transition: background-color 0.15s;
}
.mp-login:hover { background: #99106F; }
.mp-login svg { width: 15px; height: 15px; }

/* Hero ------------------------------------------------------------------------ */
.mp-hero {
	position: relative;
	color: #fff;
	padding: 168px 0 150px;
	background-color: var(--mp-navy);
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 860' preserveAspectRatio='xMinYMid slice'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.16'%3E%3Cpath d='M-140 940 L540 -90'/%3E%3Cpath d='M70 1010 L720 -70'/%3E%3Cpath d='M400 980 L1010 -70'/%3E%3Crect x='-90' y='80' width='240' height='215' rx='32'/%3E%3C/g%3E%3C/svg%3E"),
		radial-gradient(92% 86% at 100% 102%, #9A1470 0%, rgba(140, 18, 102, 0.62) 34%, rgba(140, 18, 102, 0) 70%),
		linear-gradient(165deg, #0D2A52 0%, #102C54 50%, #1D2B56 100%);
	background-size: cover, cover, cover;
}
.mp-hero__inner { position: relative; }
.mp-hero h1 { font-size: clamp(2.5rem, 5.6vw, 4.3rem); line-height: 1.02; }
.mp-hero__lead { margin: 18px 0 0; font: 500 clamp(1.15rem, 2.2vw, 1.6rem)/1.35 var(--myp-font-display); letter-spacing: -0.02em; color: #E7EBF2; }
.mp-hero__text { margin: 18px 0 0; max-width: 62ch; font-size: 0.98rem; color: #C9D2E0; }
.mp-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.mp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 46px; padding: 0 26px; border-radius: 999px; border: 1px solid transparent;
	font: 700 0.95rem/1 var(--myp-font-display); text-decoration: none;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.mp-btn--plum { background: var(--mp-plum); color: #fff; }
.mp-btn--plum:hover { background: #99106F; }
.mp-btn--ghost { border-color: rgba(255, 255, 255, 0.7); color: #fff; }
.mp-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }
.mp-btn--dark { background: var(--mp-navy); color: #fff; }
.mp-btn--dark:hover { background: var(--mp-navy-deep); }

/* Vetrina: il pannello scavalca il bordo dell'hero, come nel progetto ----------- */
.mp-stage { position: relative; z-index: 2; padding: 0 0 96px; }
.mp-stage__panel { margin-top: -118px; }

/* Demo che si ricolora: radio + :has, niente JavaScript ------------------------- */
.mp-demo { --p: #053E69; --a: #AE89DD; }
.mp-demo:has(#mp-palette-1:checked) { --p: #7A1E3C; --a: #E0A526; }
.mp-demo:has(#mp-palette-2:checked) { --p: #1F4E3D; --a: #D98E04; }
.mp-demo:has(#mp-palette-3:checked) { --p: #0E5E6F; --a: #F28C6B; }
.mp-demo__radio { position: absolute; opacity: 0; pointer-events: none; }

.mp-demo__browser {
	border-radius: var(--mp-radius);
	overflow: hidden;
	background: #fff;
	color: #1B2430;
	box-shadow: 0 40px 90px -40px rgba(11, 32, 66, 0.55);
}
.mp-demo__chrome { display: flex; align-items: center; gap: 6px; padding: 14px 20px; background: #E8EDF2; }
.mp-demo__chrome span { width: 9px; height: 9px; border-radius: 50%; background: #C3CDD6; }
.mp-demo__chrome em { margin-left: 12px; padding: 3px 14px; border-radius: 6px; background: #fff; font: 400 0.72rem/1.5 var(--myp-font-body); color: #56708A; font-style: normal; }
.mp-demo__site * { transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease; }
@media (prefers-reduced-motion: reduce) { .mp-demo__site * { transition: none; } }
.mp-demo__nav { display: flex; align-items: center; gap: 18px; padding: 20px 28px; font-size: 0.78rem; color: #56708A; }
.mp-demo__logo { display: flex; align-items: center; gap: 8px; margin-right: auto; font: 700 0.95rem/1 var(--myp-font-display); color: var(--p); }
.mp-demo__logo i { width: 18px; height: 18px; border-radius: 5px 50% 50% 50%; background: var(--a); }
.mp-demo__hero { padding: 58px 28px 64px; background: var(--p); color: #fff; }
.mp-demo__hero strong { display: block; max-width: 16em; font: 700 clamp(1.3rem, 3vw, 2.1rem)/1.12 var(--myp-font-display); letter-spacing: -0.025em; }
.mp-demo__cta { display: inline-block; margin-top: 22px; padding: 10px 18px; border-radius: 999px; background: var(--a); color: var(--p); font: 700 0.78rem/1 var(--myp-font-display); }
.mp-demo__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 30px 28px 38px; }
.mp-demo__cols div { display: flex; flex-direction: column; gap: 8px; }
.mp-demo__cols i { width: 26px; height: 26px; border-radius: 7px; background: color-mix(in srgb, var(--a) 30%, #fff); border: 2px solid var(--a); }
.mp-demo__cols b { font: 700 0.85rem/1.2 var(--myp-font-display); color: var(--p); }
.mp-demo__cols span { height: 6px; border-radius: 3px; background: #E3E9EE; }
.mp-demo__cols span + span { width: 70%; }

/* Striscia delle palette, con le proporzioni dei riquadri del progetto ---------- */
.mp-demo__swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 16px 0 0; padding: 0; border: 0; }
.mp-demo__swatches legend { padding: 0 0 12px; font-size: 0.92rem; color: var(--mp-muted); }
.mp-demo__swatches label {
	height: 86px; border-radius: 18px; cursor: pointer;
	background: linear-gradient(135deg, var(--sw-a) 50%, var(--sw-b) 50%);
	box-shadow: inset 0 0 0 1px rgba(16, 44, 84, 0.08);
	transition: transform 0.15s, box-shadow 0.15s;
}
.mp-demo__swatches label:hover { transform: translateY(-2px); }
.mp-demo:has(#mp-palette-0:checked) label[for="mp-palette-0"],
.mp-demo:has(#mp-palette-1:checked) label[for="mp-palette-1"],
.mp-demo:has(#mp-palette-2:checked) label[for="mp-palette-2"],
.mp-demo:has(#mp-palette-3:checked) label[for="mp-palette-3"] { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--mp-plum); }
.mp-demo:has(.mp-demo__radio:focus-visible) .mp-demo__swatches { outline: 3px solid var(--mp-plum); outline-offset: 8px; border-radius: 22px; }

/* Come funziona ---------------------------------------------------------------- */
.mp h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); line-height: 1.08; color: var(--mp-navy); }
.mp-steps { padding: 8px 0 96px; }
.mp-steps__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 36px 0 0; padding: 0; list-style: none; }
.mp-step {
	--n-stroke: var(--mp-navy);
	display: flex; flex-direction: column;
	padding: 34px 32px 38px; border-radius: var(--mp-radius); background: var(--mp-soft);
}
.mp-step--lead { --n-stroke: #fff; background: var(--mp-plum); color: #fff; }
.mp-step__n {
	display: block; margin-bottom: 14px;
	font: 700 2.6rem/1 var(--myp-font-display); letter-spacing: 0.01em;
	color: transparent; -webkit-text-stroke: 1.6px var(--n-stroke);
}
.mp-step h3 { font-size: 1.22rem; color: inherit; }
.mp-step--lead h3, .mp-step h3 { color: inherit; }
.mp-step:not(.mp-step--lead) h3 { color: var(--mp-navy); }
.mp-step p { margin: 10px 0 0; font-size: 0.95rem; color: var(--mp-muted); }
.mp-step--lead p { color: rgba(255, 255, 255, 0.86); }

/* Catalogo --------------------------------------------------------------------- */
.mp-catalog { padding: 80px 0 96px; background: var(--mp-band); }
.mp-catalog__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 40px; }
.mp-catalog__head p { margin: 0; max-width: 40ch; color: var(--mp-muted); font-size: 0.98rem; }

.mp-filter { display: flex; flex-wrap: wrap; gap: 10px; margin: 32px 0 36px; }
.mp-filter a {
	padding: 9px 20px; border-radius: 999px; background: #fff;
	font: 700 0.88rem/1.2 var(--myp-font-display); text-decoration: none; color: var(--mp-navy);
	transition: background-color 0.15s, color 0.15s;
}
.mp-filter a small { margin-left: 5px; font-weight: 500; color: var(--mp-muted); }
.mp-filter a:hover { background: #E7EAEF; }
.mp-filter a[aria-current="page"] { background: var(--mp-plum); color: #fff; }
.mp-filter a[aria-current="page"] small { color: rgba(255, 255, 255, 0.75); }

.mp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.mp-tpl { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--mp-radius); background: #fff; }
.mp-tpl__shot { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #E4E7EB; }
.mp-tpl__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mp-tpl__body { display: flex; flex-direction: column; flex: 1; padding: 26px 28px 30px; }
.mp-tpl__cat { align-self: flex-start; font: 700 0.78rem/1 var(--myp-font-display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--mp-plum); text-decoration: none; }
.mp-tpl__cat:hover { text-decoration: underline; }
.mp-tpl h3 { margin: 10px 0 0; font-size: 1.22rem; color: var(--mp-ink); }
.mp-tpl p { margin: 8px 0 0; font-size: 0.94rem; color: var(--mp-muted); }
.mp-tpl__links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 18px; padding-top: 2px; font: 700 0.9rem/1.3 var(--myp-font-display); }
.mp-tpl__links a { display: inline-flex; align-items: center; gap: 6px; color: var(--mp-navy); text-decoration: none; }
.mp-tpl__links a:hover { color: var(--mp-plum); }
.mp-tpl__links a::after { content: "↗"; font-size: 0.85em; }
.mp-tpl__links a:last-child::after { content: "→"; }
.mp-empty { padding: 36px 0; color: var(--mp-muted); }

/* About ------------------------------------------------------------------------ */
.mp-about { padding: 96px 0; border-bottom: 1px solid var(--mp-navy); }
.mp-about__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 60px; align-items: center; }
.mp-about p { margin: 20px 0 0; color: var(--mp-muted); }
.mp-about__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font: 700 0.95rem/1 var(--myp-font-display); color: var(--mp-navy); text-decoration: none; }
.mp-about__more:hover { color: var(--mp-plum); }
.mp-about__art {
	display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: var(--mp-radius);
	color: rgba(255, 255, 255, 0.92);
	background:
		radial-gradient(80% 80% at 100% 100%, rgba(140, 18, 102, 0.9) 0%, rgba(140, 18, 102, 0) 60%),
		linear-gradient(150deg, #0D2A52, #1D2B56);
}
.mp-about__art svg { width: 86px; height: 106px; }

/* Self service in arrivo -------------------------------------------------------- */
.mp-soon { padding: 84px 0 90px; background: var(--mp-soft); }
.mp-soon__inner { max-width: 760px; }
.mp-soon p { margin: 16px 0 28px; color: var(--mp-muted); }

/* Footer ------------------------------------------------------------------------ */
.mp-foot { font-size: 0.92rem; color: var(--mp-muted); }
.mp-foot__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 30px 0; }
.mp-foot p { margin: 0; }
.mp-foot a { color: var(--mp-ink); }

/* Schermi stretti --------------------------------------------------------------- */
@media (max-width: 980px) {
	.mp-hero { padding: 140px 0 130px; }
	.mp-steps__list { grid-template-columns: 1fr; }
	.mp-about__grid { grid-template-columns: 1fr; gap: 36px; }
	.mp-nav { display: none; }
	.mp-login { margin-left: auto; }
}
@media (max-width: 620px) {
	.mp-bar__inner { min-height: 76px; gap: 12px; }
	.mp-brand__word { font-size: 1.5rem; }
	.mp-brand__tag { font-size: 0.55rem; }
	.mp-brand__rule, .mp-brand__k { display: none; }
	.mp-hero { padding: 112px 0 110px; }
	.mp-stage__panel { margin-top: -80px; }
	.mp-demo__nav span { display: none; }
	.mp-demo__hero { padding: 36px 20px 40px; }
	.mp-demo__cols { gap: 10px; padding: 22px 20px 26px; }
	.mp-demo__cols b { font-size: 0.72rem; }
	.mp-demo__swatches { grid-template-columns: repeat(4, 1fr); gap: 10px; }
	.mp-demo__swatches label { height: 56px; border-radius: 14px; }
	.mp-actions .mp-btn { flex: 1 1 auto; }
	.mp-step { padding: 28px 24px 30px; }
	.mp-tpl__body { padding: 22px 22px 26px; }
}