/* Shop category pages: /store/fonts, /effects, /lightroom-presets, /freebies, /apps.
   Markup: includes/category-page.php. Script: assets/js/category.js.
   Cedilla's own language, as on the homepage: blue glow and floating glyphs, Open Sans with
   italic Playfair accents, the pink-to-blue gradient, mono labels in [brackets], big image tiles. */

.cat-page { background: #000; height: auto; }

.cat {
  --c-text: #fff;
  --c-link: rgba(255, 255, 255, .82);
  --c-muted: rgba(255, 255, 255, .56);
  --c-line: rgba(255, 255, 255, .12);
  --c-accent: #5164F6;
  --c-pink: #FC5FAD;
  --c-cyan: #21D4FD;
  --c-gutter: var(--nav-gutter, clamp(16px, 4vw, 56px));
  --c-mono: 500 11px/1.25 ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --c-grad: linear-gradient(135deg, var(--c-pink), var(--c-accent) 55%, var(--c-cyan));
  --c-serif: 'Playfair Display', Georgia, serif;
  --c-radius: 22px;
  display: block; color: var(--c-text); font-family: 'Open Sans', sans-serif; line-height: 1.45; text-align: left; overflow-x: clip;
}
.cat *, .cat *::before, .cat *::after { box-sizing: border-box; }
.cat a { color: inherit; }
.cat ul, .cat ol { list-style: none; margin: 0; padding: 0; }
.cat h1, .cat h2, .cat h3, .cat p { margin: 0; color: inherit; font-family: inherit; }
.cat button { font: inherit; color: inherit; }
.cat em { font-family: var(--c-serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.cat-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--c-grad); box-shadow: 0 0 12px rgba(81, 100, 246, .9); }

/* ---------- Hero ---------- */
.cat-hero {
  position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 150px var(--c-gutter) 64px; text-align: center;
}
.cat-glow {
  position: absolute; inset: 0 0 -80px; z-index: -1; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(48% 60% at 50% 34%, rgba(81, 100, 246, .34), transparent 70%),
    radial-gradient(26% 34% at 30% 62%, rgba(252, 95, 173, .14), transparent 72%),
    radial-gradient(24% 30% at 72% 58%, rgba(33, 212, 253, .11), transparent 72%);
  -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent);
}
.cat-glow::after { /* film grain */
  content: ''; position: absolute; inset: 0; opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cat-glyph {
  position: absolute; font-family: var(--c-serif); font-style: italic; line-height: 1; color: var(--c-accent);
  text-shadow: 0 0 28px rgba(81, 100, 246, .85); opacity: .55; user-select: none;
  animation: cat-float 14s ease-in-out infinite alternate;
}
.cat-glyph--1 { top: 22%; left: 9%; font-size: clamp(70px, 9vw, 150px); filter: blur(1.5px); }
.cat-glyph--2 { top: 14%; right: 11%; font-size: clamp(56px, 7vw, 120px); animation-delay: -5s; }
.cat-glyph--3 { bottom: 16%; right: 22%; font-size: clamp(40px, 4.5vw, 76px); filter: blur(3px); opacity: .4; animation-delay: -9s; }
@keyframes cat-float { from { transform: translate3d(0, 0, 0) rotate(-6deg); } to { transform: translate3d(0, -22px, 0) rotate(5deg); } }
@media (prefers-reduced-motion: reduce) { .cat-glyph { animation: none; } }

.cat-label { font: var(--c-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--c-muted); }
.cat-title { /* light, widely spaced capitals, like the CEDILLA / STUDIO wordmark */
  font-size: clamp(30px, 3.6vw, 56px); font-weight: 200; text-transform: uppercase; letter-spacing: .16em; line-height: 1.1;
  padding-left: .16em; /* balances the tracking after the last letter, so it centres */
}
.cat-lede { max-width: 46ch; text-wrap: balance; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.5; color: var(--c-link); }
.cat-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 760px; margin-top: 18px; }
.cat-chips a {
  display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(10, 10, 16, .4);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 15px; text-decoration: none; color: var(--c-link); transition: border-color .25s, background .25s, color .25s, box-shadow .25s;
}
.cat-chips a:hover { border-color: rgba(255, 255, 255, .6); color: #fff; }
.cat .cat-chips a[aria-current="page"] { border-color: transparent; background: var(--c-grad); color: #fff; box-shadow: 0 0 26px -4px rgba(81, 100, 246, .8); }

/* ---------- Body ---------- */
.cat-body { max-width: 1720px; margin: 0 auto; padding: 0 var(--c-gutter); }
.cat-section { padding-bottom: 88px; }
.cat-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 28px; }
.cat-head p { font-size: 15px; color: var(--c-muted); margin-right: auto; }
.cat-h2 { font-size: clamp(24px, 2.3vw, 36px); font-weight: 300; letter-spacing: -.01em; line-height: 1.1; }
.cat-head-link { font-size: 15px; text-decoration: none; color: var(--c-link); white-space: nowrap; transition: color .2s; }
.cat-head-link span { display: inline-block; transition: transform .25s; }
.cat-head-link:hover { color: #fff; }
.cat-head-link:hover span { transform: translateX(4px); }

/* ---------- Buttons ---------- */
.cat-btn {
  position: relative; z-index: 3; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3);
  background: transparent; font-size: 15px; font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background .25s, border-color .25s, color .25s, box-shadow .25s, transform .25s;
}
.cat-btn:hover { background: var(--c-accent); border-color: var(--c-accent); color: #fff; box-shadow: 0 0 22px rgba(81, 100, 246, .55); }
.cat-btn:focus-visible, .cat-chips a:focus-visible, .tile-add:focus-visible, .tile-cta:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.cat .cat-btn--solid { background: #fff; border-color: #fff; color: #000; }
.cat .cat-btn--solid:hover { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.cat-btn--glow { border-color: transparent; background: var(--c-grad); background-size: 200% 200%; color: #fff; }
.cat-btn--glow:hover { background-position: 100% 0; border-color: transparent; }
.cat-btn--glow.is-intent { box-shadow: 0 0 0 3px #000, 0 0 0 5px var(--c-accent), 0 0 30px rgba(81, 100, 246, .7); }
.cat-btn[disabled] { opacity: .6; cursor: progress; }
span.cat-btn { pointer-events: none; }

/* ---------- Tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 40px 22px; }
.tile { position: relative; display: flex; flex-direction: column; min-width: 0; }
.tile-media {
  container-type: inline-size;
  position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--c-radius);
  background: #0d0d12; box-shadow: 0 0 0 1px rgba(255, 255, 255, .07) inset;
  transition: box-shadow .4s ease, transform .4s ease;
}
.tile-img, .tile-alt { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: var(--fit, cover); transition: opacity .5s ease, transform 1s cubic-bezier(.2, .7, .2, 1); }
.tile-alt { opacity: 0; }
.tile:hover .tile-media { box-shadow: 0 0 0 1px rgba(81, 100, 246, .6) inset, 0 26px 60px -28px rgba(81, 100, 246, .9); }
@media (hover: hover) {
  .tile:hover .tile-img { transform: scale(1.045); }
  .tile:hover .tile-alt.is-ready { opacity: 1; transform: scale(1.045); }
}

.cat-badge {
  display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: 600 11px/1 'Open Sans', sans-serif; letter-spacing: .04em; color: #fff; white-space: nowrap;
}
.tile-media > .cat-badge { position: absolute; top: 14px; left: 14px; z-index: 2; pointer-events: none; }
.cat .cat-badge--best { border-color: transparent; background: var(--c-grad); }
.cat .cat-badge--free { border-color: #fff; background: #fff; color: #000; }

/* Call to action on the image: "Download free" (always), "View font →" (on hover) */
.tile-cta {
  position: absolute; left: 14px; bottom: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(8, 8, 12, .62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: 14px; font-weight: 600; text-decoration: none; color: #fff; white-space: nowrap;
  transition: opacity .3s ease, transform .3s ease, background .25s, color .25s;
}
.tile-cta svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
span.tile-cta { pointer-events: none; }
@media (hover: hover) {
  span.tile-cta { opacity: 0; transform: translateY(8px); }
  .tile:hover span.tile-cta { opacity: 1; transform: none; }
}
@media (hover: none) { .tile:not(.tile--feature) span.tile-cta { display: none; } }
.cat .tile-cta--free { background: #fff; border-color: #fff; color: #000; }
.cat .tile-cta--free:hover { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.tile-arrow { display: inline-block; transition: transform .25s; }
.tile:hover .tile-arrow { transform: translateX(3px); }

/* Quick add: a round +, opening into "Add to cart" when you point at the tile */
.tile-add {
  position: absolute; right: 14px; bottom: 14px; z-index: 3; display: inline-flex; align-items: center; justify-content: center; gap: 0;
  height: 46px; min-width: 46px; padding: 0 13px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(8, 8, 12, .62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background .25s, border-color .25s, box-shadow .25s, gap .3s ease;
}
.tile-add svg { width: 18px; height: 18px; flex: none; overflow: visible; }
.tile-add line, .tile-add path { stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; fill: none; }
.tile-add-plus { transform-origin: 12px 12px; transition: transform .3s ease, opacity .25s ease; }
.tile-add-tick { stroke-dasharray: 26; stroke-dashoffset: 26; transition: stroke-dashoffset .35s ease .2s; }
.tile-add-label, .tile-add-done { max-width: 0; overflow: hidden; opacity: 0; transition: max-width .35s ease, opacity .25s ease; }
.tile-add-done { display: none; }
.tile-add:hover { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 22px rgba(81, 100, 246, .6); }
@media (hover: hover) {
  .tile:hover .tile-add { gap: 8px; }
  .tile:hover .tile-add-label, .tile:hover .tile-add-done { max-width: 120px; opacity: 1; }
}
.tile-add.is-added { background: #000; border-color: var(--c-accent); box-shadow: 0 0 18px rgba(81, 100, 246, .55); }
.tile-add.is-added .tile-add-plus { transform: rotate(90deg) scale(0); opacity: 0; }
.tile-add.is-added .tile-add-tick { stroke-dashoffset: 0; }
.tile-add.is-added .tile-add-label { display: none; }
.tile-add.is-added .tile-add-done { display: inline; }
.tile-add.no-anim, .tile-add.no-anim * { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .tile-add, .tile-add * { transition: none !important; } }

.tile-info { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "tag tag" "pair pair"; gap: 4px 14px; padding: 16px 4px 0; }
.tile-name { grid-area: name; font-size: 18px; font-weight: 600; line-height: 1.3; }
.cat-link { text-decoration: none; }
.cat-link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: var(--c-radius); } /* the whole tile opens the product */
.cat-link:focus-visible { outline: none; }
.cat-link:focus-visible::after { outline: 2px solid var(--c-accent); outline-offset: 4px; }
.tile-price { grid-area: price; font-size: 18px; line-height: 1.3; text-align: right; white-space: nowrap; }
.tile-price span { margin-left: 6px; font-size: 12px; color: var(--c-muted); }
.tile-tag { grid-area: tag; font-size: 15px; color: var(--c-muted); }
.tile-pair {
  grid-area: pair; position: relative; z-index: 3; justify-self: start; margin-top: 10px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--c-line); font-size: 13px; color: var(--c-link); text-decoration: none; transition: border-color .25s, color .25s;
}
.tile-pair b { font-weight: 600; color: #fff; }
.tile-pair:hover { border-color: var(--c-accent); color: #fff; }

/* Narrow tiles: shorter labels on the image */
@container (max-width: 230px) {
  .tile-more { display: none; }
  .tile-cta { padding: 0 13px; }
}

/* Landscape tiles (the free apps on /store/freebies) */
.tile--landscape .tile-media { aspect-ratio: 16 / 10; background: #000; }

/* The big tile: the product in use, details on the image */
.tile--feature { grid-column: span 2; grid-row: span 2; min-height: 440px; }
.tile--feature .tile-media { flex: 1; aspect-ratio: auto; }
.tile--feature .tile-media::after { content: ''; position: absolute; inset: 30% 0 0; z-index: 1; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, .92)); }
.tile--feature .tile-info {
  position: absolute; left: 0; right: 0; bottom: 84px; z-index: 2; padding: 0 30px; pointer-events: none;
  grid-template-areas: "tag tag" "name price"; align-items: end;
}
.tile--feature .tile-name { font-size: clamp(32px, 3.6vw, 58px); font-weight: 400; letter-spacing: -.02em; line-height: 1; }
.tile--feature .tile-price { font-size: 22px; }
.tile--feature .tile-tag { color: var(--c-link); font-size: 15px; }
.tile--feature .tile-tag span { color: var(--c-muted); }
.tile--feature .tile-cta { left: 30px; bottom: 26px; opacity: 1; transform: none; }
.tile--feature .tile-add { right: 26px; bottom: 26px; }
.tile--feature .tile-media > .cat-badge { top: 24px; left: 26px; }

@media (min-width: 761px) {
  .tiles--flip { grid-auto-flow: dense; }
  .tiles--flip .tile--feature { grid-column: 2 / span 2; }
}

/* ---------- Apps ---------- */
.cat-apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.cat-app { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.cat-app-hero {
  position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--c-radius);
  background: #000; text-decoration: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset; transition: box-shadow .4s;
}
.cat-app-hero:hover { box-shadow: 0 0 0 1px rgba(81, 100, 246, .6) inset, 0 26px 60px -28px rgba(81, 100, 246, .9); }
.cat-app-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--fit, cover); transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.cat-app-hero:hover img { transform: scale(1.04); }
.cat-app-text { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.cat-app-kind { display: inline-flex; align-items: center; gap: 10px; font: var(--c-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--c-link); }
.cat-app-name { font-size: clamp(40px, 4.6vw, 72px); font-weight: 400; line-height: .95; letter-spacing: -.03em; }
.cat-app-pitch { max-width: 46ch; font-size: 17px; color: var(--c-link); }
.cat-app-text .cat-btn { margin-top: 4px; }

.cat-compare { width: 100%; border-collapse: collapse; font-size: 15px; }
.cat-compare th, .cat-compare td { padding: 12px 0; border-bottom: 1px solid var(--c-line); text-align: left; font-weight: 400; vertical-align: middle; }
.cat-compare thead th { padding-top: 0; font: var(--c-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); }
.cat-compare thead th:last-child { color: #fff; }
.cat-compare tbody th { padding-right: 12px; color: var(--c-link); }
.cat-compare td { width: 104px; color: var(--c-muted); }
.cat-compare td:last-child { color: #fff; }
.cat-compare tr:last-child > * { border-bottom: 0; }
.cat-yes { width: 18px; height: 18px; display: block; fill: none; stroke: var(--c-accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cat-no { color: rgba(255, 255, 255, .3); }

.cat-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cat-price-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 28px;
  border-radius: var(--c-radius); background: #0b0b10; box-shadow: 0 0 0 1px var(--c-line) inset; scroll-margin-top: 110px;
}
.cat-price-card--best { box-shadow: none; background: linear-gradient(160deg, #14141d, #08080b) padding-box, var(--c-grad) border-box; border: 1px solid transparent; }
.cat-price-card .cat-badge { position: absolute; top: -13px; right: 22px; }
.cat-price-name { font-size: 18px; font-weight: 600; }
.cat-price-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.cat-price-big strong { font-size: 52px; font-weight: 400; letter-spacing: -.03em; line-height: 1; }
.cat-price-big s { font-size: 20px; color: var(--c-muted); }
.cat-price-big span { font-size: 14px; color: var(--c-muted); }
.cat-price-card--best .cat-price-big span { color: var(--c-cyan); font-weight: 600; }
.cat-price-card .cat-btn, .cat-price-card .cat-owned { margin-top: auto; width: 100%; }
.cat-prices-note { margin-top: 18px; }
.cat-owned { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(81, 100, 246, .6); font-size: 15px; font-weight: 600; }
.cat-owned svg { width: 16px; height: 16px; fill: none; stroke: var(--c-accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cat-fine { font-size: 14px; color: var(--c-muted); }
.cat-fine a { color: #fff; }
.cat-error { margin-top: 16px; padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(252, 95, 173, .5); font-size: 14px; }

/* ---------- Good to know ---------- */
.cat-good { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.cat-good-item { display: grid; gap: 10px; align-content: start; padding: 26px 26px 28px; border-radius: var(--c-radius); background: #0a0a0f; box-shadow: 0 0 0 1px var(--c-line) inset; }
.cat-good-item h3 { font-size: 20px; font-weight: 400; }
.cat-good-item p { font-size: 15px; line-height: 1.6; color: var(--c-muted); }
.cat-good-item a { color: #fff; }

/* ---------- Keep exploring ---------- */
.cat-explore-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.cat-explore-tile { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--c-radius); text-decoration: none; background: #0d0d12; }
.cat-explore-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.cat-explore-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .45) 45%, rgba(0, 0, 0, .92)); }
.cat-explore-tile:hover img { transform: scale(1.05); }
.cat-explore-text { position: absolute; left: 28px; bottom: 24px; right: 80px; z-index: 1; display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--c-link); }
.cat-explore-name { font-size: clamp(30px, 3.2vw, 48px); line-height: 1; letter-spacing: -.02em; color: #fff; }
.cat-explore-arrow {
  position: absolute; right: 24px; bottom: 24px; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35); font-size: 18px; transition: background .25s, border-color .25s, transform .25s;
}
.cat-explore-tile:hover .cat-explore-arrow { background: var(--c-accent); border-color: var(--c-accent); transform: translateX(3px); }

/* ---------- FAQ ---------- */
.cat-faq { max-width: 880px; }
.cat-faq .cat-h2 { margin-bottom: 14px; }
.cat-q { border-bottom: 1px solid var(--c-line); }
.cat-q summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0;
  font-size: 17px; color: var(--c-link); cursor: pointer; list-style: none; transition: color .2s;
}
.cat-q summary::-webkit-details-marker { display: none; }
.cat-q summary::after {
  content: ''; flex: none; width: 12px; height: 12px;
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  transition: transform .3s ease, background-size .3s ease;
}
.cat-q[open] summary, .cat-q summary:hover { color: #fff; }
.cat-q[open] summary::after { transform: rotate(180deg); background-size: 100% 1.5px, 1.5px 0; }
.cat-q p { padding: 0 0 22px; max-width: 70ch; font-size: 15px; line-height: 1.65; color: var(--c-muted); }
.cat-q a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .tiles[style*="--cols: 4"] { --cols: 2 !important; }
}
@media (max-width: 980px) {
  .tiles { gap: 30px 16px; }
  .cat-apps { grid-template-columns: 1fr; }
  .cat-good { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 760px) {
  .cat-hero { gap: 14px; padding: 112px var(--c-gutter) 44px; }
  .cat-glyph--1 { left: -4%; top: 30%; }
  .cat-glyph--2 { right: 2%; top: 13%; }
  .cat-glyph--3 { right: 8%; bottom: 10%; }
  .cat-title { font-size: clamp(24px, 7.4vw, 34px); letter-spacing: .12em; padding-left: .12em; }
  .cat-lede { font-size: 16px; }
  .cat-chips { gap: 8px; margin-top: 10px; }
  .cat-chips a { height: 40px; padding: 0 16px; font-size: 14px; }
  .cat-section { padding-bottom: 64px; }
  .cat-head { margin-bottom: 18px; }
  .cat-head:has(.cat-head-link) p { display: none; }   /* keep the heading and its link on one line */

  .tiles { --cols: 2 !important; gap: 26px 12px; }
  .tile-media { border-radius: 16px; }
  .cat-link::after { border-radius: 16px; }
  .tile-media > .cat-badge { top: 10px; left: 10px; height: 22px; padding: 0 8px; font-size: 10px; }
  .tile-info { grid-template-areas: "name" "tag" "price" "pair"; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 2px 0; }
  .tile-name { font-size: 15px; }
  .tile-tag { font-size: 13px; }
  .tile-price { margin-top: 6px; font-size: 16px; text-align: left; }
  .tile-cta { left: 10px; bottom: 10px; height: 40px; padding: 0 14px; font-size: 13px; }
  .tile-add { right: 10px; bottom: 10px; height: 42px; min-width: 42px; padding: 0 11px; }
  .tile-pair { padding: 6px 10px; font-size: 12px; }

  .tile--feature { grid-column: 1 / -1; grid-row: auto; min-height: 0; }
  .tile--feature .tile-media { aspect-ratio: 4 / 5; flex: none; }
  .tile--feature .tile-info { bottom: 72px; padding: 0 20px; grid-template-areas: "tag tag" "name price"; grid-template-columns: minmax(0, 1fr) auto; }
  .tile--feature .tile-name { font-size: 38px; }
  .tile--feature .tile-tag span { display: none; }
  .tile--feature .tile-price { text-align: right; }
  .tile--feature .tile-cta { left: 20px; bottom: 20px; }
  .tile--feature .tile-add { right: 20px; bottom: 20px; }
  .tile--feature .tile-media > .cat-badge { top: 16px; left: 18px; }

  .tile--landscape .tile-media { aspect-ratio: 1; }

  /* an odd tile out at the end: full width, image beside the text */
  .tile--wide-sm { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: center; }
  .tile--wide-sm .tile-info { padding: 0; }

  .cat-app-hero { aspect-ratio: 4 / 3; }
  .cat-compare { font-size: 14px; }
  .cat-compare td { width: 82px; }
  .cat-prices { grid-template-columns: 1fr; gap: 22px; }
  .cat-price-card { padding: 22px; }
  .cat-good-item { padding: 20px; }
  .cat-explore-grid { grid-template-columns: 1fr; gap: 14px; }
  .cat-explore-tile { aspect-ratio: 16 / 10; }
  .cat-explore-text { left: 20px; bottom: 18px; }
  .cat-explore-arrow { right: 18px; bottom: 18px; width: 42px; height: 42px; }
  .cat-q summary { font-size: 16px; }
}