/* ──────────────────────────────────────────────────────────────
   Organizers → Features — Haus Vajbz. One sheet for
   templates/organizers/features.html, on top of hv/organizers.css
   (hero, split, checks, CTA). Mobile first; ≥768 and ≥1100 add columns.
   Tokens only (tokens.css + hv/theme.css): radius 0, no shadows, no
   gradients, rules instead of boxes, → as the ornament. The figure
   surfaces come from data-surface="red|ink|paper" on the tile.
   ────────────────────────────────────────────────────────────── */

/* ── Hero: the long headline gets a measure ──────────────────── */
.of-hero__title { max-width: 16ch; font-size: clamp(2rem, 8.4vw, 4.6rem); }

/* ── Feature: one ruled row per feature, copy | figure ────────── */
.of-feat { border-top: 1px solid var(--line); padding-block: 2.2rem 2.4rem; }
.of-feat:first-of-type { border-top: 0; padding-top: 2.6rem; }
.of-feat__kicker { display: flex; align-items: baseline; gap: 0.6rem; }
.of-feat__n { color: var(--red); font-weight: 600; }
.of-feat .org-split__title { font-size: clamp(1.5rem, 6.6vw, 2.4rem); }
.of-feat .org-split__body { color: var(--ink-2); }

/* ── Figure: the icon on a square tile ───────────────────────── */
.of-visual { display: flex; justify-content: center; min-width: 0; }
.of-fig {
  position: relative;
  width: min(100%, 300px);
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); color: var(--text);
}
.of-fig--line { background: var(--paper-2); border: 2px solid var(--ink); }
.of-fig--line > i { color: var(--red); }
.of-fig > i { font-size: clamp(4.2rem, 22vw, 6.6rem); line-height: 1; }
.of-fig__n { position: absolute; top: 0.8rem; left: 0.9rem; margin: 0; color: var(--text-dim); }
.of-fig__arrow {
  position: absolute; right: 0.9rem; bottom: 0.6rem;
  font-family: var(--font-mono); font-size: 1.4rem; line-height: 1; color: var(--text);
}
.of-fig--line .of-fig__arrow { color: var(--red); }

/* ── Tablet ──────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .of-hero__title { font-size: clamp(3.2rem, 6.6vw, 5.2rem); }
  .of-feat { padding-block: 3rem 3.2rem; }
  .of-feat:first-of-type { padding-top: 3.4rem; }
  .of-feat .org-split__title { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
  .of-fig { width: min(100%, 340px); }
  .of-fig__n { top: 1rem; left: 1.1rem; }
  .of-fig__arrow { right: 1.1rem; bottom: 0.8rem; }
}

/* ── Desktop ─────────────────────────────────────────────────── */
@media (min-width: 1100px) {
  .of-feat { padding-block: 3.6rem 3.8rem; }
  .of-fig { width: min(100%, 400px); }
  .of-fig > i { font-size: 7.4rem; }
}