/* persona-tiles block deltas (plan §5.2) — the five persona entry tiles on the
 * Value Intelligence landing. @layer web. SDS .sph-card-cream carries the
 * surface; this owns the responsive grid and the link affordance. */
@layer web {
  .pt__grid {
    display: grid;
    /* 10.5rem min lets all five tiles share one row inside the 75rem measure
       (minus its padding); narrower screens wrap to 4/3/2/1 automatically. */
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    gap: clamp(1rem, 2.5vw, 1.5rem);
    align-items: stretch;
  }
  .pt__tile {
    text-decoration: none;
    color: var(--sph-text);
    border-top: 3px solid var(--sph-primary);
    transition: transform var(--sph-dur-fast, 120ms) ease;
  }
  .pt__tile:hover { transform: translateY(-3px); }
  /* Claims read in page ink — accent color is reserved for single emphasised
     words and interactive elements site-wide; five tiles of accent-coloured
     display text diluted it (design review, July 2026). */
  .pt__claim { margin: 0; color: var(--sph-text); }
  /* The function dot: each tile carries the semantic accent of its function
     (--pt-tone, set by the partial) — the same colour language as the
     management convergence figure. Square, echoing the Data·Value·Impact
     marks. */
  .pt__eyebrow { display: flex; align-items: center; gap: 8px; }
  .pt__dot {
    width: 8px;
    height: 8px;
    flex: none;
    background: var(--pt-tone, var(--sph-primary));
  }
  /* Labeled affordance in the site's quiet-link voice; the arrow slides on
     hover. */
  .pt__more {
    margin-top: auto;
    padding-top: 1.25rem;
    color: var(--sph-info);
    font-family: var(--sph-font-display);
    font-weight: var(--sph-weight-bold);
    font-size: var(--sph-fs-sm);
  }
  .pt__arrow {
    display: inline-block;
    transition: transform var(--sph-dur-fast, 120ms) ease;
  }
  .pt__tile:hover .pt__arrow { transform: translateX(4px); }
}