/* kleto-next landing pages: /for/* audiences and /services/* pages.
   Loaded after site.css and pages.css. It adds three blocks only: the hero
   spec sheet, the fit list and the chip row, plus the wrapping pillars
   modifier. Every other block (pillars,
   steps, plans, FAQ, booking) is the home page component as is.
   Markup and rules: sites/kleto/LANDING-TEMPLATE.md. */

/* Hero: the page head with a spec sheet beside it in place of the scene.
   The soft aura is .hero::before from site.css. */
.lp-hero-grid { display: grid; gap: 48px; }
.lp-hero h1 { max-width: 10em; }
@media (min-width: 900px) {
  .lp-hero-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 64px; align-items: end; }
}

/* Spec sheet: a drawing view of real facts. Crop marks at the corners and a
   faint construction grid behind, as on the home hero view. Each row is one
   fact: a short label and its value. Never put a decorative row here. */
.spec {
  --c: var(--mark); --t: 16px;
  position: relative; padding: 24px 22px;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--t) 1px, linear-gradient(var(--c), var(--c)) 0 0 / 1px var(--t),
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--t) 1px, linear-gradient(var(--c), var(--c)) 100% 0 / 1px var(--t),
    linear-gradient(var(--c), var(--c)) 0 100% / var(--t) 1px, linear-gradient(var(--c), var(--c)) 0 100% / 1px var(--t),
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--t) 1px, linear-gradient(var(--c), var(--c)) 100% 100% / 1px var(--t);
  background-repeat: no-repeat;
}
.spec::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 50% 50% / 32px 32px,
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 50% 50% / 32px 32px;
  -webkit-mask: radial-gradient(closest-side, #000 30%, transparent 100%);
  mask: radial-gradient(closest-side, #000 30%, transparent 100%);
}
.spec dl { display: grid; }
.spec dl > div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.spec dl > div:first-child { padding-top: 0; }
.spec dl > div:last-child { padding-bottom: 0; border-bottom: 0; }
.spec dt { padding-top: 4px; font: 400 11px/1.4 'Space Mono', ui-monospace, monospace; letter-spacing: .03em; color: var(--dim); }
.spec dd { font-size: 15px; color: var(--ink); }
.spec dd small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.hero .spec { animation: rise .9s .3s var(--ease) both; }
@media (min-width: 900px) { .spec { padding: 28px 26px; } }

/* Fit list: who the page is for. A short title and one line each, on the
   hairline grid, with the flow schematic's square node as the marker. */
.fit { display: grid; border-top: 1px solid var(--line); }
.fit li { position: relative; padding: 28px 0 28px 30px; border-bottom: 1px solid var(--line); }
.fit li::before { content: ""; position: absolute; left: 0; top: 37px; width: 9px; height: 9px; border: 1px solid var(--muted); background: var(--bg); }
.fit h3 { margin-bottom: 6px; font-size: 22px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.fit p { color: var(--muted); max-width: 30em; }
@media (min-width: 900px) {
  .fit { grid-template-columns: 1fr 1fr; }
  .fit li { padding: 36px 40px 36px 30px; }
  .fit li::before { top: 45px; }
  .fit li:nth-child(even) { padding-left: 70px; border-left: 1px solid var(--line); }
  .fit li:nth-child(even)::before { left: 40px; }
}

/* Pillars that wrap: more than three pillars, three to a row on desktop.
   Each row starts flush left, and a hairline divides the rows. */
@media (min-width: 900px) {
  .pillars--wrap .pillar:nth-child(3n+1) { border-left: 0; padding-left: 0; }
  .pillars--wrap .pillar:nth-child(n+4) { border-top: 1px solid var(--line); }
}

/* Chip row: the home tags, standing still and wrapping. Use it for related
   items under the pillars, or as links to service pages. */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
a.tag { cursor: pointer; }
.chips--stack .tag { height: 32px; padding: 0 14px 0 12px; font: 400 12px/1 'Space Mono', ui-monospace, monospace; letter-spacing: .02em; color: var(--dim); background: transparent; border-color: var(--line); box-shadow: none; }
.chips--stack .tag::before { width: 4px; height: 4px; background: #3a3a3a; }

/* Pricing with one plan. */
@media (min-width: 860px) { .plans--one { grid-template-columns: minmax(0, 520px); justify-content: center; } }