/* ============================================================================
   Depth 0 selector — AHA-branded. Also used for the verification tiers on
   /consulting/, so the two read as one control, not two widgets.
   Remove this <link> and the markup degrades to plain buttons.
   ============================================================================ */
.jrnwrap{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}
@media(max-width:840px){.jrnwrap{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.jrnwrap{grid-template-columns:1fr}}

.jrn{display:flex;flex-direction:column;gap:3px;text-align:left;cursor:pointer;
  background:rgba(20,21,25,.5);border:1px solid var(--line-2);border-radius:14px;
  padding:15px 16px 16px;font:inherit;color:var(--ink-2);
  transition:border-color .16s,background .16s,transform .16s;position:relative;min-height:96px}
.jrn:hover{border-color:var(--accent-bright);transform:translateY(-2px)}
.jrn .jrn-t{font-weight:800;font-size:15px;letter-spacing:-.02em;color:var(--ink)}
.jrn .jrn-s{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-bright)}
.jrn .jrn-h{font-size:11.5px;line-height:1.5;color:var(--ink-4);margin-top:5px}
.jrn.on{border-color:var(--accent);background:rgba(43,87,240,.13)}
.jrn.on::after{content:"";position:absolute;top:12px;right:12px;width:9px;height:9px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 12px var(--accent)}
.jrn:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px}

/* light theme */
:root[data-theme="light"] .jrn{background:#fff;border-color:var(--line-2)}
:root[data-theme="light"] .jrn.on{background:rgba(43,87,240,.07);border-color:var(--accent)}

@media(prefers-reduced-motion:reduce){.jrn{transition:none}.jrn:hover{transform:none}}