/* Category pages (pilot redesign, Ugur 2026-10-13; approved mockup v3). Loaded only by the
   redesigned page (Pages/Category.cshtml, categories with content), after site.css, whose tokens (fonts, radius, shadows, --accent)
   and shared .cards / .card rules it reuses unchanged. A separate file, not site.css,
   because site.css is part of the calculator page shell: changing it is a freshness
   release for every calculator page (ops/check-calculator-page-freshness.sh), and none of
   these rules touches a calculator page. Every rule is still scoped to body.catpage. The
   mockup's container queries existed only for its Phone toggle; these are the same
   breakpoints as ordinary media queries. */
.catpage main { padding:10px 22px 40px; }
.catpage .crumbs { max-width:1080px; margin:0 auto; padding:12px 22px 0; font-size:.8rem; color:var(--muted); }
.catpage .crumbs ol { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.catpage .crumbs li + li::before { content:"\203A"; margin-right:6px; color:#a3aab8; }
.catpage .crumbs a:hover { color:var(--accent-strong); text-decoration:underline; }
.catpage .crumbs [aria-current] { color:var(--ink); font-weight:600; }
.catpage .hero { position:relative; margin:12px auto 0; max-width:1124px; padding:0 22px; }
.catpage .hero-card { position:relative; overflow:hidden; border-radius:22px; color:#fff;
  background:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(120% 140% at 85% 10%, #6366f1 0%, transparent 55%),
    linear-gradient(140deg, var(--accent), var(--accent-strong) 70%, #1e1b4b);
  padding:44px 44px 40px; }
.catpage .hero .eyebrow { display:flex; flex-wrap:wrap; gap:8px; align-items:center; color:rgba(255,255,255,.82); }
.catpage .hero .eyebrow .dot { width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.6); }
.catpage .hero h1 { font-family:var(--font-display); font-weight:600; font-size:clamp(2.1rem,4.4vw,3.25rem); line-height:1.04;
  letter-spacing:-.022em; margin:12px 0 14px; overflow-wrap:break-word; }
.catpage .hero .lede { margin:0; font-size:1.08rem; line-height:1.55; max-width:64ch; color:rgba(255,255,255,.94); }
.catpage .sec-head { margin:42px 0 16px; }
.catpage .sec-head h2 { font-family:var(--font-display); font-weight:600; font-size:1.6rem; line-height:1.15; margin:0; letter-spacing:-.012em; }
.catpage .kicker { text-transform:uppercase; letter-spacing:.1em; font-size:.68rem; font-weight:700; color:var(--accent); margin-bottom:6px; }
.catpage .tasks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.catpage .task { display:flex; gap:14px; align-items:center; padding:16px 20px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-sm); transition:border-color .15s, box-shadow .15s, transform .15s; }
.catpage .task:hover { border-color:color-mix(in srgb,var(--accent) 45%,#fff); box-shadow:var(--shadow-md); transform:translateY(-1px); }
.catpage .task .q { display:block; font-weight:600; font-size:.98rem; line-height:1.35; }
.catpage .task .to { display:block; margin-top:3px; font-size:.82rem; color:var(--accent-strong); font-weight:600; }
.catpage .task .arrow { margin-left:auto; color:#b3b9c6; font-size:1.2rem; transition:transform .15s, color .15s; }
.catpage .task:hover .arrow { color:var(--accent); transform:translateX(3px); }
.catpage .related { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.catpage .rel { display:block; padding:16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm); transition:box-shadow .15s, border-color .15s; }
.catpage .rel:hover { box-shadow:var(--shadow-md); border-color:color-mix(in srgb,var(--accent) 40%,#fff); }
.catpage .rel b { display:block; font-size:.95rem; }
.catpage .rel span { display:block; margin-top:3px; font-size:.8rem; color:var(--muted); line-height:1.45; }
.catpage .rel em { display:block; margin-top:10px; font-style:normal; font-size:.76rem; font-weight:650; color:var(--accent-strong); }
/* Keyboard focus stays visible on every link the page adds (the whole row or tile is the link). */
.catpage .crumbs a:focus-visible,
.catpage .task:focus-visible,
.catpage .rel:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (max-width:760px) {
  .catpage .crumbs { padding:10px 16px 0; }
  .catpage .hero { padding:0 12px; }
  .catpage .hero-card { padding:28px 20px 26px; border-radius:18px; }
  .catpage .hero h1 { font-size:2rem; }
  .catpage .hero .lede { font-size:1rem; }
  .catpage main { padding:4px 16px 30px; }
  .catpage .sec-head { margin-top:34px; }
  .catpage .sec-head h2 { font-size:1.35rem; }
  .catpage .tasks { grid-template-columns:1fr; }
  .catpage .related { grid-template-columns:1fr 1fr; }
}
@media (min-width:761px) and (max-width:1020px) {
  .catpage .related { grid-template-columns:1fr 1fr; }
}