/*
 * The home page, in Polina's direction (2026-10-12): heavy condensed type
 * against a light second voice, pigment rather than gradient, torn paper
 * between sections. Built in her direction, not with her artwork — her
 * finished identity drops into the same structure.
 *
 * Text never sits on the paint: the blots live behind the phones and off
 * the page edges, so the contrast suite's token pairs still hold. Colors here
 * are decorative pigment only; every text color is a theme token.
 */

.home-display {
  font-family: "Archivo", "Inter", system-ui, sans-serif;
  font-stretch: 62.5%;
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 0.92;
  text-transform: uppercase;
}
.home-display--md { font-size: clamp(2.4rem, 5vw, 4rem); }

/* The hero headline: the claim heavy, the payoff light — the brand's two voices. */
.home-hero-title {
  font-family: "Archivo", "Inter", system-ui, sans-serif;
  line-height: 0.9;
  letter-spacing: -0.015em;
}
.home-hero-title .heavy {
  display: block;
  font-stretch: 62.5%;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(3.2rem, 7.4vw, 7rem);
}
/* The payoff: the same condensed block letters, smaller and a lighter weight —
   a subheading on its own line, not a second typeface. */
.home-hero-title .light {
  display: block;
  margin-top: 0.3em;
  font-stretch: 62.5%;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  font-size: clamp(1.9rem, 3.8vw, 3.4rem);
}

/* Pigment: irregular blots with grain, blended as paint on the ground. */
.home-pigment {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: var(--art-blend);
  opacity: calc(var(--art-opacity) + 0.15);
}
.home-pigment--hero { right: -14rem; top: 50%; width: min(70vw, 60rem); transform: translateY(-46%); }
.home-pigment--zeros { right: -12rem; bottom: -2rem; width: min(50vw, 32rem); opacity: calc(var(--art-opacity) - 0.05); }

/* Torn paper between sections: the next layer, with a divot, over this one. */
.home-torn {
  display: block;
  width: 100%;
  height: 46px;
  margin-bottom: -1px;
}
.home-torn path { fill: rgb(var(--c-mark-wash)); }
/* Below the layer: the same paper, torn the other way, into the page beneath. */
.home-torn--back { transform: scaleY(-1); margin-top: -1px; margin-bottom: 0; }
/* The zeros sit on their own paper: the theme's mark wash (plum on ink, pink on paper),
   so the torn edges read as a layer peeled over the page. */
.home-layer { background: rgb(var(--c-mark-wash)); position: relative; overflow: hidden; }

/* The zeros: four claims, each with its quiet proof. */
.home-zero { border-top: 1px solid rgb(var(--c-line-strong)); padding-top: 1.25rem; }
.home-zero__word { color: rgb(var(--c-mark)); }

@media print {
  .home-pigment, .home-torn { display: none !important; }
}

/* Polina's palette, as pigment (decorative only, never a text color). */
.home-pigment {
  --pigment-pink: #ff3cac;
  --pigment-violet: #7b3fe4;
  --pigment-cyan: #22c7e8;
  --pigment-green: #61b868;
}

/* --- Below the hero --------------------------------------------------------- */

.home-display--lg { font-size: clamp(2.8rem, 6.4vw, 5.6rem); }
/* Stepped type: the second line set in from the first, as in Polina's boards. */
.home-step { padding-left: clamp(1.5rem, 9vw, 8rem); }

/* Industries as routes: a big condensed line on a rule, not a card. */
.home-route {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 2rem;
  padding: 1.75rem 0;
  border-top: 1px solid rgb(var(--c-line-strong));
}
.home-route > :first-child { grid-column: 1 / -1; }
.home-route__headline { font-size: clamp(1.6rem, 3.4vw, 2.8rem); transition: color .2s; }
.home-route__blurb { grid-column: 1; max-width: 42rem; }
.home-route__arrow { grid-column: 2; grid-row: 2 / span 2; align-self: center; font-size: 2rem; transition: transform .2s; }
.home-route:hover .home-route__arrow { transform: translateX(6px); }
li:last-child > .home-route { border-bottom: 1px solid rgb(var(--c-line-strong)); }

/* Huge outlined numerals for the adoption steps. */
.home-numeral {
  font-family: "Archivo", "Inter", system-ui, sans-serif;
  font-stretch: 62.5%;
  font-weight: 900;
  font-size: clamp(5rem, 11vw, 9rem);
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 2px rgb(var(--c-mark));
}

/* A keyword per pillar, set big in pink. */
.home-pillar { border-top: 3px solid rgb(var(--c-mark)); padding-top: 1.25rem; }
.home-pillar__word { font-size: clamp(2.6rem, 4.6vw, 3.8rem); }

/* The months, stepping down and in. */
.home-month {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2rem;
  margin-left: calc(var(--step) * clamp(0rem, 8vw, 9rem));
}
.home-month__numeral {
  font-family: "Archivo", "Inter", system-ui, sans-serif;
  font-stretch: 62.5%;
  font-weight: 900;
  font-size: clamp(6rem, 14vw, 11rem);
  line-height: 0.8;
  color: rgb(var(--c-mark));
}

/* The pull quote: big, condensed, with tilted paint beside it. */
.home-quote {
  font-family: "Archivo", "Inter", system-ui, sans-serif;
  font-stretch: 62.5%;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 6vw, 5.4rem);
  line-height: 0.92;
  max-width: 16ch;
}
.home-pigment--quote { right: -8rem; top: 2rem; width: min(42vw, 30rem); transform: rotate(-14deg); }

/* The fields as doors: a row of condensed names, each to its own page. */
.home-field { display: inline-flex; align-items: baseline; gap: 0.6rem; font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.home-field > span:first-child { transition: color .2s; }

/* --- Inner pages (industries, features, pricing) ------------------------------ */

/* The page title: the hero's block letters, sized for a longer line. */
.page-title {
  font-family: "Archivo", "Inter", system-ui, sans-serif;
  font-stretch: 62.5%;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.95;
  font-size: clamp(2.6rem, 5.6vw, 5rem);
}
/* Paint on an inner page's hero: smaller, off the right edge, wide screens only,
   so it never sits behind the title. */
.home-pigment--page { right: -12rem; top: 50%; width: min(40vw, 32rem); transform: translateY(-50%) rotate(-8deg); }
@media (max-width: 1023px) { .home-pigment--page { display: none; } }