/* =========================================================================
   netex · pages/marketing-hub.css · /marketing/ · Marketing & Growth (bible §7.9)
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

@layer pages {

/* ---- s1 hero: H1 at cols 1–6, the reel frame at 7–12 ------------------------------------ */
.mh-hero { justify-content: flex-start; }
.mh-hero__grid { row-gap: var(--s-7); align-items: start; }
.mh-hero__text { display: grid; gap: var(--s-4); align-content: start; }
.mh-hero__text .nx-eyebrow { margin-bottom: 0; }
.mh-title { font-size: clamp(2.25rem, 1rem + 4.2vw, 5.25rem); max-width: 14ch; }
.mh-title .mk-h1__l1 { line-height: var(--lh-display); }
.mh-hero__meta { display: grid; gap: var(--s-4); align-content: start; }
.mh-stat { display: grid; gap: var(--s-1); max-width: 44ch; font: 500 .8125rem/1.5 var(--f-mono); color: var(--fg); }
.mh-stat__note { color: var(--fg-2); font-size: .75rem; }
.mh-terms { font-size: var(--t-small); }
/* Phones: promise → reel → stat (DOM order). Desktop: the text column holds promise and stat, the reel the right. */
@media (min-width: 1024px) {
	.mh-hero__grid { grid-template-rows: auto 1fr; row-gap: var(--s-6); }
	.mh-hero__text { grid-column: 1 / span 6; grid-row: 1; padding-top: var(--s-4); }
	.mh-hero__meta { grid-column: 1 / span 6; grid-row: 2; }
	.mh-hero__reel { grid-column: 7 / -1; grid-row: 1 / span 2; }
}

/* ---- s2 decode + lineage ---------------------------------------------------------------------- */
.mh-decode__grid { row-gap: var(--s-7); align-items: start; }
.mh-reasons { margin: var(--s-6) 0 0; padding: 0; list-style: none; border-bottom: var(--bw) solid var(--rule); }
.mh-reasons li { position: relative; padding: var(--s-5) 0 var(--s-5) var(--s-7); border-top: var(--bw) solid var(--rule); font-family: var(--f-serif); font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.5; max-width: 52ch; }
.mh-reasons li::before { content: ""; position: absolute; left: 0; top: calc(var(--s-5) + .5em); width: 18px; height: 2px; background: var(--fg); transform: rotate(-47deg); transform-origin: 0 50%; }
.mh-decode__sheet { align-self: start; }
.mh-decode__law { margin-top: var(--s-5); padding-top: var(--s-4); border-top: var(--bw) solid var(--rule); font-size: var(--t-small); line-height: 1.55; }
.mh-lineage { margin-top: var(--s-10); }
.mh-lineage__title { margin-bottom: var(--s-6); font-size: var(--t-h3); }
.mh-lineage .mk-timeline__what { font-size: var(--t-body); }
.mh-lineage__cta { margin-top: var(--s-7); }
@media (min-width: 1024px) {
	.mh-decode__reasons { grid-column: 1 / span 7; }
	.mh-decode__sheet { grid-column: 9 / -1; margin-top: var(--s-9); }
}

/* ---- s3 thesis (Indigo): the format is the problem ------------------------------------------- */
.mh-thesis__title { --flar: 100; --volm: 100; max-width: 16ch; font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); }
html[lang="el"] .mh-thesis__title { max-width: 18ch; }
.mh-thesis__body { margin-top: var(--s-7); row-gap: var(--s-4); }
.mh-thesis__lead { max-width: 46ch; }
.mh-thesis__q { align-self: end; font: var(--w-h3) var(--t-h4)/1.3 var(--f-sans); }
@media (min-width: 1024px) {
	.mh-thesis__lead { grid-column: 1 / span 6; }
	.mh-thesis__q { grid-column: 8 / -1; }
}
/* Three verbs as a typeset index: the word set large on the left, what it does on the right (not three
   equal columns). */
.mh-verbs { container-type: inline-size; display: grid; margin: var(--s-7) 0 0; padding: 0; list-style: none; border-bottom: var(--bw) solid var(--rule); }
.mh-verb { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-6) 0; border-top: var(--bw) solid var(--rule); }
/* The word always fits (EL «ΕΠΑΝΑΛΗΨΗ» is twice the length of EN «REPLAY»). */
.mh-verb__word { --flar: 100; --volm: 100; justify-self: start; max-width: 100%; font: 880 min(clamp(2.5rem, 1rem + 5.4vw, 6.75rem), 11cqi)/.9 var(--f-sans); font-variation-settings: "FLAR" 100, "VOLM" 100; letter-spacing: -.02em; text-transform: uppercase; color: var(--fg); text-decoration: underline; text-decoration-color: var(--sig); text-decoration-thickness: .055em; text-underline-offset: .1em; text-decoration-skip-ink: none; }
/* The words in Paper with one cyan underline each (copy: «each one ink-underlines»): cyan stays a signal,
   under 3% of the screen (bible R2), instead of three mega words filled with it. */
.mh-verb__title { font-size: var(--t-h4); font-weight: var(--w-h3); line-height: 1.25; }
.mh-verb p { max-width: 42ch; color: var(--fg); }
.mh-verb > .nx-btn { justify-self: start; }
@container (min-width: 860px) {
	.mh-verb { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--gutter); row-gap: var(--s-2); }
	/* 8.2cqi keeps the nine Greek capitals inside the 7/12 column at every width (≈ .7em per glyph). */
	.mh-verb__word { grid-column: 1; grid-row: 1 / span 3; align-self: center; font-size: min(6.75rem, 8.2cqi); }
	.mh-verb > :not(.mh-verb__word) { grid-column: 2; }
}

/* ---- s5 idea rows on the hub ---------------------------------------------------------------- */
.mh-ideas { margin-top: var(--s-10); }
.mh-ideas__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); font-size: var(--t-h3); }
.mh-ideas__all { margin-top: var(--s-7); }

/* ---- s7 platform reality: the change log in dot-matrix ----------------------------------------- */
.mh-board { margin: 0; padding: 0; list-style: none; border-bottom: var(--bw) solid var(--rule); }
.mh-board__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2) var(--gutter); padding: var(--s-5) 0; border-top: var(--bw) solid var(--rule); align-items: baseline; }
.mh-board__status { font-family: var(--f-dot); font-weight: 500; font-variation-settings: "ELSH" 2; font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); line-height: .9; letter-spacing: .04em; text-transform: uppercase; color: var(--fg); justify-self: start; }
.mh-board__row--opened .mh-board__status { color: var(--cyan); }
.mh-board__row--closed .mh-board__status { color: var(--fg-2); }
.mh-board__date { font: 500 .8125rem/1.4 var(--f-mono); color: var(--fg-2); }
.mh-board__text { max-width: 60ch; }
.mh-board__checked { margin-top: var(--s-5); }
@media (min-width: 1024px) {
	.mh-board__row { grid-template-columns: 15rem 11rem minmax(0, 1fr) 16rem; }
	.mh-board__src { text-align: right; }
}

/* ---- s8 growth engine: three service rows -------------------------------------------------------- */
.mh-services { margin: 0; padding: 0; list-style: none; border-bottom: var(--bw) solid var(--rule); container-type: inline-size; }
.mh-service {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 24px;
	gap: var(--s-2) var(--gutter);
	padding: var(--s-6) 0;
	border-top: var(--bw) solid var(--rule);
	color: var(--fg);
	text-decoration: none;
	transition: background-color var(--dur-ui) var(--ease-mech), padding var(--dur-ui) var(--ease-mech);
}
.mh-service__title { grid-column: 1; font-size: var(--t-h3); font-weight: var(--w-h3); line-height: 1.12; letter-spacing: var(--tr-h3); }
.mh-service__body { grid-column: 1; max-width: 56ch; color: var(--fg); }
.mh-service__measure { grid-column: 1; font: 600 .875rem/1.4 var(--f-mono); color: var(--fg); }
.mh-service__k { font-weight: 500; font-size: .6875rem; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.mh-service__offer { grid-column: 1; font: 500 .8125rem/1.4 var(--f-mono); color: var(--fg-2); }
.mh-service__arrow { grid-column: 2; grid-row: 1; width: 22px; height: 22px; transition: transform var(--dur-ui) var(--ease-mech); }
@media (hover: hover) {
	.mh-service:hover { background: var(--bg-2); padding-left: var(--s-4); }
	.mh-service:hover .mh-service__arrow { transform: translate(calc(3 * var(--u-x)), calc(3 * var(--u-y))); }
}
@container (min-width: 900px) {
	.mh-service { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(0, 1fr) 24px; align-items: start; }
	.mh-service__title { grid-column: 1; grid-row: 1 / span 2; }
	.mh-service__body { grid-column: 2; grid-row: 1 / span 2; }
	.mh-service__measure { grid-column: 3; grid-row: 1; text-align: right; }
	.mh-service__offer { grid-column: 3; grid-row: 2; text-align: right; }
	.mh-service__arrow { grid-column: 4; }
}
.mh-services__notes { margin-top: var(--s-7); row-gap: var(--s-4); }
.mh-services__bundle { max-width: 56ch; }
.mh-services__social { font-size: var(--t-lead); max-width: 40ch; }
@media (min-width: 1024px) {
	.mh-services__bundle { grid-column: 1 / span 6; }
	.mh-services__social { grid-column: 8 / -1; }
}

/* ---- s9 honest ranges ------------------------------------------------------------------------------ */
.mh-honest { row-gap: var(--s-7); align-items: start; }
.mh-honest__control { margin-top: var(--s-5); max-width: 52ch; }
.mh-honest__title { margin-bottom: var(--s-4); font: 600 .75rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
@media (min-width: 1024px) {
	.mh-honest__head { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + var(--s-6)); }
	.mh-honest__rules { grid-column: 7 / -1; }
}

/* ---- s10 PDF offer ------------------------------------------------------------------------------------ */
.mh-pdf__grid { row-gap: var(--s-7); align-items: center; }
.mh-pdf__text { display: grid; gap: var(--s-5); }
.mh-pdf__text .nx-eyebrow { margin-bottom: 0; }
.mh-pdf__cover { margin: 0; max-width: 360px; color: var(--paper); }
@media (min-width: 1024px) {
	.mh-pdf__text { grid-column: 1 / span 7; }
	.mh-pdf__cover { grid-column: 9 / -1; }
}

/* ---- s11 cta ---------------------------------------------------------------------------------------------- */
.mh-cta .nx-grid { row-gap: var(--s-7); align-items: end; }
.mh-cta__q { margin-top: var(--s-6); max-width: 40ch; font-size: var(--t-lead); }
.mk-display--full { font-variation-settings: "FLAR" 100, "VOLM" 100; }

} /* end @layer pages */