/* categories/show.antlers.html — moved out of the template on 2026-10-21 (owner: "move inline css and js to cached files"); edit here, the template loads it with {{ zz_asset:css }} */
/* --- category page v2 --- */
.cat-v2{--star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23a33d2e' d='M12 2.5l2.9 6.2 6.7.8-5 4.6 1.4 6.7L12 17.4 6 20.8l1.4-6.7-5-4.6 6.7-.8z'/%3E%3C/svg%3E");
--ring:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'%3E%3Cpath d='M28.6 44.3C16.2 46.2 4.6 37.4 4.3 24.6 4 12.2 13 4.2 24.4 4.1c11.8-.1 19.6 8.2 19.4 19.2-.1 6.4-2.9 11.3-7.6 14.6' stroke='%23a33d2e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
--lift:0 1px 1px rgba(43,38,32,.10),0 6px 14px -4px rgba(43,38,32,.24);
--lift-hi:0 2px 2px rgba(43,38,32,.10),0 14px 26px -8px rgba(43,38,32,.32)}
.cat-v2 .ds-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cat-v2 h2,.cat-v2 h3{margin:0}
.cat-v2 button{font:inherit;color:inherit;background:none;border:0;margin:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cat-v2 :focus-visible{outline:2.5px solid #a33d2e;outline-offset:3px;border-radius:var(--r-ctl)}
@keyframes dsPop{from{opacity:0;transform:scale(.97) translateY(-4px)}to{opacity:1;transform:none}}
@keyframes dsRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* stars: one glyph repeated, masked to the score */
.cat-v2 .stars{display:inline-block;flex-shrink:0;width:calc(var(--sz,14px) * 5);height:var(--sz,14px);background:var(--star) 0 0/var(--sz,14px) var(--sz,14px) repeat-x;
-webkit-mask-image:linear-gradient(90deg,#000 var(--p,0%),rgba(0,0,0,.22) var(--p,0%));mask-image:linear-gradient(90deg,#000 var(--p,0%),rgba(0,0,0,.22) var(--p,0%))}
.cat-v2 .arrow{display:block;flex-shrink:0;width:20px;height:12.5px;margin-top:.38em;color:#a33d2e;overflow:visible}
.cat-v2 .ring{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:46px;height:46px;font:700 27px/1 'Caveat',cursive;color:#a33d2e;rotate:-4deg;background:var(--ring) center/100% 100% no-repeat}
.cat-v2 .ring .n{translate:-2.5px -1.5px}
.cat-v2 .btn-go{display:flex;align-items:center;justify-content:center;min-height:44px;background:#a33d2e;color:#fff;font:700 15px 'Libre Franklin',sans-serif;padding:0 15px;border-radius:var(--r-ctl);text-align:center;white-space:nowrap;transition:transform .16s cubic-bezier(.23,1,.32,1),filter .15s ease}
.cat-v2 .btn-go:hover{opacity:1;filter:brightness(1.06)}
.cat-v2 .btn-go:active{transform:scale(.97)}
.cat-v2 .lnk{color:#a33d2e;font:600 14px 'Libre Franklin',sans-serif;text-decoration:underline;text-underline-offset:3px}
.cat-v2 .ds-note{display:inline-block;font:600 19px 'Caveat',cursive;color:#a33d2e;transform:rotate(-2.5deg) translateY(-2px);transform-origin:right center;white-space:nowrap}
/* hero: the emotion image behind it is the layout's .site-emotion (has-hero = tall variant) */
.cat-hero{position:relative}
.cat-hero .in{position:relative;padding:38px 21.5px 16px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
/* copy sits directly on the emotion picture (owner 2026-09-28, like the home hero): layered neutral
low-alpha text shadow (ui-skills "beautiful shadows" layering) instead of paper boxes */
.cat-hero .hd{display:flex;flex-direction:column;gap:10px;max-width:100%}
/* one line on wide screens (owner 2026-09-24: "not 2 lines heading"): size steps by title length */
.cat-hero h1{font:800 39px/1.05 'Libre Franklin',sans-serif;letter-spacing:-.03em;margin:0;color:#2b2620;white-space:nowrap;
text-shadow:0 1px 1px rgba(0,0,0,.05),0 2px 3px rgba(0,0,0,.06),0 6px 8px rgba(0,0,0,.07),0 14px 22px rgba(0,0,0,.08)}
.cat-hero h1.h1-m{font-size:31px}
.cat-hero h1.h1-s{font-size:26px}
.cat-hero h1.h1-xs{font-size:22px}
.cat-hero h1.h1-xxs{font-size:19px}
.cat-hero h1 .hand{font:600 1.013em 'Caveat',cursive;color:#a33d2e;white-space:nowrap;letter-spacing:0}
@media(max-width:699px){.cat-hero h1,.cat-hero h1.h1-m,.cat-hero h1.h1-s,.cat-hero h1.h1-xs,.cat-hero h1.h1-xxs{white-space:normal;text-wrap:balance;font-size:30px}}
.cat-byline{display:flex;align-items:center;gap:8px;margin-top:0;font:500 12.5px 'Libre Franklin',sans-serif;color:#2b2620;
text-shadow:0 1px 1px rgba(0,0,0,.05),0 2px 4px rgba(0,0,0,.06),0 5px 10px rgba(0,0,0,.06)}
.cat-byline img{width:24px;height:24px;border-radius:50%;object-fit:cover;flex-shrink:0}
.cat-byline a{color:#a33d2e;text-decoration:underline;text-underline-offset:3px}
.cat-teaser{margin-top:6px;max-width:520px;font:500 15.5px/1.5 'Libre Franklin',sans-serif;color:#2b2620;text-wrap:pretty;
text-shadow:0 1px 1px rgba(0,0,0,.05),0 2px 4px rgba(0,0,0,.06),0 6px 12px rgba(0,0,0,.07)}
.cat-teaser p{margin:0}
@media(max-width:460px){.cat-hero h1,.cat-hero h1.h1-m,.cat-hero h1.h1-s,.cat-hero h1.h1-xs,.cat-hero h1.h1-xxs{font-size:28px}.cat-hero .in{padding:30px 21.5px 16px}}
.cat-main{padding:0 21.5px}
/* top 3: three sheets of paper, the winner in the middle */
.cat-top3{margin-top:6px;scroll-margin-top:calc(var(--hdr-h,74px) + 16px)}
.cat-top3 h2{font:800 28px/1.05 'Libre Franklin',sans-serif;letter-spacing:-.03em;color:#000;outline:none}
.podium{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;align-items:end}
.podium li{display:block;min-width:0}
.podium .pi-1{order:2}.podium .pi-2{order:1}.podium .pi-3{order:3}
.cat-v2 .pd{position:relative;isolation:isolate;display:block;background:#fdfbf7;border-radius:var(--r-card);padding:16px;color:#2b2620;cursor:pointer;
box-shadow:0 1px 1px rgba(43,38,32,.07),0 2px 2px rgba(43,38,32,.07),0 4px 4px rgba(43,38,32,.07),0 8px 8px rgba(43,38,32,.07),0 16px 16px -6px rgba(43,38,32,.1),inset 0 -30px 36px -30px rgba(43,38,32,.16);
transition:rotate .26s cubic-bezier(.23,1,.32,1),translate .26s cubic-bezier(.23,1,.32,1),box-shadow .26s ease}
/* paper grain (spec: "faint texture"; owner 2026-09-27 "cannot see the sandpaper effect", 2026-09-29 "needs to come
out more" then, on a specks-only variant, "too much … add [the old one] again but more visible"): the original
fractal noise from an inline SVG, multiplied onto the sheet inside the card's own stacking context
(isolation:isolate), simply stronger. Winner sheet at 1300, blank strip luminance mean / sd: .5 opacity + .55
alpha = 228 / 3.0 (old, invisible); .7 + .7 = the current values, see claude-notes 2026-09-29. */
.cat-v2 .pd::before{content:"";position:absolute;inset:0;border-radius:var(--r-card);z-index:-1;pointer-events:none;background:none} /* smooth light paper like the home's top 3 categories, no grain (owner 2026-10-13 screenshot of the home sheets: "make these 3 boxes on the whole pages … look in this style") */
.cat-v2 a.pd{text-decoration:none} /* the sheet is a card, not a text link (owner rule 2026-09-24) */
.cat-v2 .pi-2 .pd{rotate:-1.4deg}.cat-v2 .pi-3 .pd{rotate:1.2deg}
.cat-v2 .pi-1 .pd{padding-top:26px;translate:0 -8px;z-index:1;
box-shadow:0 1px 1px rgba(43,38,32,.08),0 2px 2px rgba(43,38,32,.08),0 4px 4px rgba(43,38,32,.08),0 8px 8px rgba(43,38,32,.08),0 16px 16px rgba(43,38,32,.08),0 32px 32px -8px rgba(43,38,32,.12),inset 0 -30px 36px -30px rgba(43,38,32,.16)}
@media(hover:hover){.cat-v2 .pd:hover{rotate:0deg;translate:0 -3px;box-shadow:var(--lift-hi);opacity:1}.cat-v2 .pi-1 .pd:hover{translate:0 -11px}}
.pd .pd-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%) rotate(-1.5deg);background:#a33d2e;color:#fff;font:600 17.5px 'Caveat',cursive;padding:3px 13px;white-space:nowrap;box-shadow:0 2px 4px -1px rgba(43,38,32,.3);z-index:3}
.pd .pd-name{display:block;text-align:center;font:800 17.5px 'Libre Franklin',sans-serif;overflow-wrap:anywhere;margin-bottom:8px}
.pd .pd-logo{display:flex;align-items:center;justify-content:center;height:48px;width:184px;max-width:100%;margin:2px auto 0;overflow:hidden}
.pd .pd-logo img{display:block;max-width:100%;max-height:100%;height:100%;width:auto;object-fit:contain}
.pd .pd-logo.sq{height:72px} /* square-ish logo (width / height under 2, e.g. Ashley Madison 304x229): taller box, else it is 64px wide (owner 2026-10-04 "just fix cases for square ones") */
.pd .pd-score{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 6.5px;margin-top:5px}
.pd .pd-score b{font:800 21.5px/1 'Libre Franklin',sans-serif;color:#2b2620}
.pd .pd-score i{font:600 16px 'Caveat',cursive;color:#a33d2e;font-style:normal}
.pd .pd-score .stars{--sz:15px}
.cat-v2 .pd .pd-cta{display:block;text-align:center;background:#a33d2e;color:#fff;font:700 14.5px 'Libre Franklin',sans-serif;padding:11px 8.5px;border-radius:var(--r-ctl);margin-top:13px;white-space:nowrap}
.cat-v2 .pd .pd-rev{display:block;text-align:center;font:600 12.5px 'Libre Franklin',sans-serif;color:#a33d2e;text-decoration:underline;text-underline-offset:3px;margin-top:8px}
@media(max-width:639px){
.podium{display:flex;flex-direction:column;gap:13px}
.podium .pi-1,.podium .pi-2,.podium .pi-3{order:0}
.cat-v2 .pi-1 .pd{translate:0 0}
.cat-v2 .pi-2 .pd,.cat-v2 .pi-3 .pd{display:grid;grid-template-columns:1fr auto;grid-template-areas:"name cta" "score cta" "rev rev";align-items:center;column-gap:12px;padding:13px 13px 13px 21px}
.pi-2 .pd .pd-rev,.pi-3 .pd .pd-rev{grid-area:rev;text-align:left;margin-top:6px}
.pi-2 .pd .pd-name,.pi-3 .pd .pd-name{grid-area:name;text-align:left;font-size:16px;margin:0}
.pi-2 .pd .pd-logo,.pi-3 .pd .pd-logo{display:none}
.pi-2 .pd .pd-score,.pi-3 .pd .pd-score{grid-area:score;justify-content:flex-start;margin-top:3px}
.pi-2 .pd .pd-score b,.pi-3 .pd .pd-score b{font-size:18px}
.pi-2 .pd .pd-score .stars,.pi-3 .pd .pd-score .stars{--sz:13px}
.pi-2 .pd .pd-cta,.pi-3 .pd .pd-cta{grid-area:cta;margin:0;min-height:44px;display:flex;align-items:center;padding:0 14px;font-size:14px}
}
/* the list */
.cat-listing{margin-top:32.5px;scroll-margin-top:calc(var(--hdr-h,74px) + 16px)}
.cat-list-head{display:flex;justify-content:space-between;align-items:flex-start;gap:13px;flex-wrap:wrap}
.cat-list-head h2{font:800 24px/1.15 'Libre Franklin',sans-serif;letter-spacing:-.02em;color:#000}
.cat-tabs{display:flex;flex-shrink:0;border:1.5px solid #2b2620;border-radius:var(--r-ctl);overflow:hidden;background:#fff}
.cat-tabs button{display:flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;font:700 13px 'Libre Franklin',sans-serif;color:#2b2620;background:#fff;user-select:none;transition:background-color .15s ease,color .15s ease,transform .16s cubic-bezier(.23,1,.32,1)}
.cat-tabs button+button{border-left:1.5px solid #2b2620}
.cat-tabs button.on{background:#2b2620;color:#f4eee1}
.cat-tabs button:active{transform:scale(.97)}
.cat-tabs svg{flex-shrink:0}
.cat-list{list-style:none;margin:19.5px 0 0;padding:0;display:flex;flex-direction:column;gap:15px}
.cat-list[hidden],.cat-compare[hidden],.cmp-sugg[hidden],.cat-backtop[hidden]{display:none}
/* index cards (owner artifact SkpjEn2PZs2jUwgxozMyxg, revised 2026-09-28): paper card, tinted side (rank ring +
logo) without an edge line, body with name, tagline, white fact strip and the highlights, score column on the
right (score, stars, score word, buttons) behind a solid line in the side's tint (owner 2026-09-29: "do not use
here dashed lines. left line remove, right line make same color like background of logo area"). Colours
2026-09-29: first "left and right column white and center column the creamy background", then minutes later
"invert background colors make center white and left right creamy": side and score column cream #f4efe4, the
body white; then (later that morning) "make left column white as well keep right one as is", then "make the
row fully white": every column white, no tint anywhere on the card */
.cat-row{position:relative;isolation:isolate;display:grid;grid-template-columns:215px minmax(0,1fr) 160px;border-radius:var(--r-card);margin-top:12px;
/* soft sheet gradient (owner 2026-09-29 "not plain white only"): a white highlight at the top left fading over a
diagonal white → cream run, one surface across all three columns (they are transparent) */
background:radial-gradient(120% 100% at 0% 0%,#fff 0,rgba(255,255,255,0) 58%),linear-gradient(135deg,#fff 0%,#fcfaf6 55%,#f7f3ea 100%); /* halved 2026-09-29 ("less of that gradient"): cream end #f1ebdd → #f7f3ea */
box-shadow:0 1px 2px rgba(43,38,32,.2),0 4px 8px -2px rgba(43,38,32,.16),0 16px 32px -10px rgba(43,38,32,.45); /* stronger (owner 2026-09-29, undone and asked for again the same morning; was 0 1px 2px .18 + 0 8px 20px -10px .35) */animation:dsRise .28s cubic-bezier(.23,1,.32,1) both;transition:box-shadow .18s ease,transform .18s ease}
.cat-list{gap:22px}
.cat-row[data-go]{cursor:pointer}
@media(hover:hover){.cat-row[data-go]:hover{box-shadow:0 1px 2px rgba(43,38,32,.2),0 6px 10px -2px rgba(43,38,32,.18),0 22px 40px -10px rgba(43,38,32,.5);transform:translateY(-2px)}}
.cat-row .cat-badge{position:absolute;top:-13px;left:62px; /* right of the rank ring since that sits at the top (2026-09-29) */background:#a33d2e;color:#fff;font:600 17.5px 'Caveat',cursive;padding:3px 13px;transform:rotate(-1.5deg);box-shadow:0 2px 4px -1px rgba(43,38,32,.3);z-index:2;letter-spacing:0;text-transform:none}
.cat-row .side{position:relative;background:transparent;border-radius:var(--r-card) 0 0 var(--r-card);padding:18px;display:flex;align-items:center;justify-content:center} /* symmetric padding: the logo is centred in the whole column (owner 2026-09-29 "center logo in the column") */
/* rank ring: absolute, its circle's top on the cap line of the name in the body (owner 2026-09-29: "put numbers same
space like Zoosk title from the top … should be same distance circle and zoosk title"): the body is top-anchored
(not centred), so the name's caps start at 14px padding + 4px (Libre Franklin 19px/23px: 18px ascent, 14px cap
height) = 18px; the circle is inset 2px in the 46px ring box → top 16px */
.cat-row .ring{position:absolute;left:8px;top:16px;flex-shrink:0;width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;font:700 29px/1 'Caveat',cursive; /* 40px / 25px until 2026-09-29 (owner: "make numbers a bit bigger") */color:#a33d2e;transform:rotate(-4deg)}
.cat-row .ring::before{content:"";position:absolute;inset:2px;border:2.4px solid #a33d2e;border-radius:50% 46% 52% 48%/48% 52% 46% 54%;clip-path:polygon(0 0,100% 0,100% 72%,62% 100%,0 100%)}
.cat-row .ring .n{position:relative;transform:translate(-2px,-1px)}
.cat-row .cat-logo-box{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;height:54px}
.cat-row .cat-logo-box img{display:block;max-width:100%;max-height:100%;height:100%;width:auto;object-fit:contain}
.cat-row .cat-logo-box.sq{height:84px} /* square-ish logo (ratio under 2): taller box, wide logos keep 54px (owner 2026-10-04) */
.cat-row .cat-logo-name{flex:1;min-width:0;text-align:center;font:800 17px/1.2 'Libre Franklin',sans-serif;color:#2b2620}
.cat-row .main{min-width:0;background:transparent;padding:14px 20px;display:flex;flex-direction:column;justify-content:flex-start;gap:10px} /* top-anchored so the name's distance from the top is fixed (ring alignment) */
.cat-row .name{font:800 19px/1.25 'Libre Franklin',sans-serif;letter-spacing:-.02em;margin:0;color:#2b2620}
.cat-row .tagline{font:400 14px/1.5 'Libre Franklin',sans-serif;color:#443d34;margin:-6px 0 0}
.cat-row .facts{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:0;margin:0;background:#fff;border:1.5px solid #2b2620;border-radius:var(--r-card);overflow:hidden} /* white (owner 2026-09-28: "table lighter white") */
.cat-row .facts>div{padding:7px 8px;border-left:1.5px solid #2b2620;margin-left:-1.5px;min-width:0}
.cat-row .facts dt{font:500 12px/1.2 'Libre Franklin',sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#6d6455}
.cat-row .facts dd{font:700 13px/1.2 'Libre Franklin',sans-serif;letter-spacing:-.01em;margin:2px 0 0;color:#2b2620;white-space:nowrap}
.cat-row .hl{display:flex;flex-direction:column;gap:3px;font:400 13.5px/1.4 'Libre Franklin',sans-serif;color:#443d34}
.cat-row .hl div{display:flex;gap:8px;align-items:flex-start}
.cat-row .sc{background:transparent;border-radius:0 var(--r-card) var(--r-card) 0;padding:14px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center}
.cat-row .sc .v{font:800 30px/1 'Libre Franklin',sans-serif;letter-spacing:-.03em;color:#2b2620}
.cat-row .sc .stars{--sz:16px}
.cat-row .sc .w{font:600 17px/1 'Caveat',cursive;color:#a33d2e}
.cat-row .sc .btn-go{display:block;width:100%;box-sizing:border-box;text-align:center;font:700 14px 'Libre Franklin',sans-serif;padding:11px 12px;border-radius:var(--r-ctl);margin-top:4px;min-height:0;white-space:nowrap;box-shadow:none}
/* "Visit Zooook.org" (a clickout selling under another name, Clickout::sellName) may wrap, "Visit site" never has to */
.cat-v2 .btn-go.named,.cat-v2 .pd .pd-cta.named,.cmp-foot .btn-go.named{white-space:normal}
.cat-row .sc .ghost{background:#fff;color:#2b2620;border:1.5px solid #2b2620}
.cat-row .sc .rev{display:inline-flex;align-items:center;min-height:32px;font:600 13px 'Libre Franklin',sans-serif;color:#a33d2e;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
@media(max-width:699px){
.cat-row{grid-template-columns:minmax(0,1fr)}
.cat-row .side{border-radius:var(--r-card) var(--r-card) 0 0;padding:14px 16px 14px 60px;justify-content:flex-start}
.cat-row .ring{left:10px;top:50%;transform:translateY(-50%) rotate(-4deg)} /* the phone side is a short strip: centred */
.cat-row .cat-logo-box{justify-content:flex-start;height:44px}
.cat-row .cat-logo-box.sq{height:60px}
.cat-row .cat-logo-name{text-align:left}
.cat-row .main{padding:14px 16px 14px}
.cat-row .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
.cat-row .facts>div:nth-child(n+3){border-top:1.5px solid #2b2620}
.cat-row .facts>div:nth-child(odd){border-left:0;margin-left:0}
.cat-row .sc{border-radius:0 0 var(--r-card) var(--r-card);flex-direction:row;flex-wrap:wrap;justify-content:space-between;padding:12px 16px 14px;text-align:left;gap:6px 14px}
.cat-row .sc .v{order:1}
.cat-row .sc .stars{order:2}
.cat-row .sc .w{order:3;flex:1 1 100%;margin-top:-2px}
.cat-row .sc .btn-go{order:4;flex:1 1 auto;width:auto}
.cat-row .sc .rev{order:5;min-height:44px}
}
/* the compare tool (chips, table) is styled by partials/_compare_tool, the one compare tool (also the provider compare page) */
/* content blocks (categories/_blocks) */
.cat-v2 .cat-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:13px;border-bottom:1.5px solid #2b2620;padding-bottom:8.5px;margin:28px 0 15px;scroll-margin-top:calc(var(--hdr-h,74px) + 16px)}
.cat-v2 .cat-section-head h2{font:800 21.5px/1.15 'Libre Franklin',sans-serif;letter-spacing:-.02em;text-transform:none;color:#2b2620;margin:0;padding:0;border:0}
.cat-v2 .cat-h3,.cat-v2 .cat-card-title{color:#2b2620}
.cat-v2 .cat-h3{font:700 15px 'Libre Franklin',sans-serif;margin:19.5px 0 11px;scroll-margin-top:calc(var(--hdr-h,74px) + 16px)}
.cat-v2{--fs-prose:15px} /* the page's reading size: .cat-prose and the FAQ share it */
.cat-v2 .cat-prose{font:400 var(--fs-prose)/1.6 'Libre Franklin',sans-serif;color:#443d34;margin:13px 0}
.cat-v2 .cat-prose p{margin:0 0 13px}
.cat-v2 .cat-prose ul{margin:0 0 13px;padding-left:20px}
.cat-v2 .cat-prose ol{list-style:none;margin:0 0 13px;padding:0;counter-reset:cat-n}
.cat-v2 .cat-prose ol>li{counter-increment:cat-n;position:relative;padding-left:51px;margin:0 0 13px;min-height:32px}
.cat-v2 .cat-prose ol>li::before{content:counter(cat-n);position:absolute;left:0;top:-7px;width:38px;height:38px;font:700 21px/38px 'Caveat',cursive;color:#a33d2e;text-align:center;rotate:-4deg;background:var(--ring) center/100% 100% no-repeat}
.cat-v2 .cat-prose ol>li>strong:first-child,.cat-v2 .cat-prose ol>li>b:first-child{display:block;font:700 15.5px 'Libre Franklin',sans-serif;color:#2b2620;margin-bottom:3px}
.cat-v2 .cat-note{font:600 19px/1.5 'Caveat',cursive;color:#55504a;margin:14px 0}
.cat-v2 .cat-bullets{gap:4.5px;font:400 14.5px/1.55 'Libre Franklin',sans-serif}
.cat-v2 .cat-bullets .b{gap:8.5px}
.cat-v2 .cat-bullets .arrow{font:inherit}
.cat-v2 .cat-polaroid{position:relative;background:#fff;padding:11px 11px 38px;box-shadow:var(--lift);margin:8px 0 19.5px;border-radius:0}
.cat-v2 .cat-polaroid.tilt-l{transform:rotate(-1.5deg)}
.cat-v2 .cat-polaroid.tilt-r{transform:rotate(1.5deg)}
.cat-v2 .cat-polaroid img{width:100%;height:220px;object-fit:cover;display:block}
.cat-v2 .cat-polaroid .cap{position:absolute;bottom:7px;left:14px;font:600 21px 'Caveat',cursive;color:#55504a}
.cat-v2 .cat-card{background:#fff;border:1.5px solid #2b2620;border-radius:var(--r-card);padding:19.5px;margin:19.5px 0}
.cat-v2 .cat-card-title{font:800 21.5px/1.15 'Libre Franklin',sans-serif;letter-spacing:-.02em;text-transform:none;margin-bottom:13px}
.cat-v2 .cat-toc-card{padding:17.5px 19.5px}
.cat-v2 .cat-toc-card .cat-card-title{font:700 14px 'Libre Franklin',sans-serif;margin-bottom:7px;text-transform:none;letter-spacing:0}
.cat-v2 .cat-toc{display:flex;flex-direction:column;gap:0;font:500 15.5px 'Libre Franklin',sans-serif}
.cat-v2 .cat-toc a{display:flex;align-items:center;min-height:32px}
@media(pointer:coarse),(max-width:639px){.cat-v2 .cat-toc a{min-height:44px}}
.cat-v2 .cat-video iframe{width:100%;aspect-ratio:16/9;border:1.5px solid #2b2620;border-radius:var(--r-card);margin:16px 0}
.cat-v2 .cat-cta-banner{background:#2b2620;color:#f4eee1;border-radius:var(--r-section);padding:19.5px;margin:19.5px 0;display:flex;flex-wrap:wrap;align-items:center;gap:15px}
.cat-v2 .cat-cta-banner .heart{flex-shrink:0;transform:rotate(-8deg)}
.cat-v2 .cat-cta-banner .t{flex:1;min-width:160px;font:700 16px 'Libre Franklin',sans-serif}
.cat-v2 .cat-cta-banner .btn{flex-shrink:0;display:inline-flex;align-items:center;min-height:44px;background:#a33d2e;color:#fff;font:700 15px 'Libre Franklin',sans-serif;padding:0 17.5px;border-radius:var(--r-ctl);box-shadow:none}
.cat-v2 a.cta{display:inline-block;background:#a33d2e;color:#fff;font:700 14.5px 'Libre Franklin',sans-serif;padding:11px 15px;border-radius:var(--r-ctl);box-shadow:none}
.cat-v2 .cat-toplist{margin-top:15px}
/* author, faq, phone help */
/* author card = the layout's production-style box (round portrait); only the spacing is the page's own */
.cat-v2 .author-card{margin-top:28px;scroll-margin-top:calc(var(--hdr-h,74px) + 16px)}
.cat-faq{margin:28px 0;scroll-margin-top:calc(var(--hdr-h,74px) + 16px)}
.cat-faq .grp-label{font:600 20px 'Caveat',cursive;color:#a33d2e;margin:15px 0 4.5px;letter-spacing:0;text-transform:none}
.cat-faq details{border-bottom:1.5px solid #d8cdb6;padding:9.5px 0}
.cat-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:11px;font:600 var(--fs-prose)/1.4 'Libre Franklin',sans-serif;min-height:32px}
.cat-faq summary::-webkit-details-marker{display:none}
.cat-faq summary .plus{display:inline-block;font:700 22px/1 'Caveat',cursive;color:#a33d2e;transition:transform .24s cubic-bezier(.23,1,.32,1)}
.cat-faq details[open]>summary .plus{transform:rotate(45deg)}
.cat-faq .a{font:400 var(--fs-prose)/1.6 'Libre Franklin',sans-serif;color:#443d34;padding-top:8.5px}
@media(pointer:coarse),(max-width:639px){.cat-faq summary{min-height:44px;align-items:center}}
.cat-call{position:relative;border:1.5px solid #2b2620;border-radius:var(--r-section);padding:19.5px;margin:28px 0}
.cat-call .t{position:absolute;top:-14px;left:16px;background:#f4eee1;padding:0 8.5px;font:600 20px 'Caveat',cursive;color:#a33d2e}
.cat-call .b{font:400 14.5px/1.55 'Libre Franklin',sans-serif;color:#443d34}
.cat-call .b a{color:#2b2620}
/* back to the top 3 */
.cat-backtop{position:fixed;left:0;right:0;bottom:calc(18px + env(safe-area-inset-bottom));z-index:40;display:flex;justify-content:center;pointer-events:none}
.cat-backtop a{pointer-events:auto;display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:0 20px 0 16px;background:#2b2620;color:#f4eee1;font:700 14.5px 'Libre Franklin',sans-serif;border-radius:var(--r-ctl);box-shadow:0 2px 3px rgba(43,38,32,.18),0 12px 28px -8px rgba(43,38,32,.45);animation:dsRise .28s cubic-bezier(.23,1,.32,1) both;transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .15s}
.cat-backtop a:hover{background:#3a332b;opacity:1}
.cat-backtop a:active{transform:scale(.96)}
/* radar page */
.cat-radar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin:24px 0}
.cat-radar-grid a{display:block;background:#fff;border:1.5px solid #2b2620;border-radius:var(--r-card);padding:14px 16px;color:#2b2620}
.cat-radar-grid .t{font:700 15px 'Libre Franklin',sans-serif}
.cat-radar-grid .d{font:400 12.5px/1.45 'Libre Franklin',sans-serif;color:#6d6455;margin-top:4px}
.cat-radar-section{scroll-margin-top:calc(var(--hdr-h,74px) + 16px)}
@media(prefers-reduced-motion:reduce){.cat-v2 *,.cat-v2 *::before,.cat-v2 *::after{animation-duration:1ms!important;animation-delay:0ms!important;transition-duration:1ms!important}}