/* layout.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 }} */
          /* depth shadows: three neutral layered tokens (ui-skills "beautiful shadows", owner 2026-09-23) —
             sm compact cards/controls, md cards/panels/popovers, lg sheet/hero/strongest lift. The hard
             offset "paper-cut" shadows (3px 3px 0 ink) are a design signature, not depth, and stay. */
          :root{--sh-sm:0 2px 3px -1px rgba(0,0,0,.1),0 1px 0 0 rgba(25,28,33,.02),0 0 0 1px rgba(25,28,33,.08);
            --sh-md:0 0 0 1px rgba(0,0,0,.06),0 1px 1px -.5px rgba(0,0,0,.06),0 3px 3px -1.5px rgba(0,0,0,.06),0 6px 6px -3px rgba(0,0,0,.06),0 12px 12px -6px rgba(0,0,0,.06),0 24px 24px -12px rgba(0,0,0,.06);
            --sh-lg:0 2.8px 2.2px rgba(0,0,0,.034),0 6.7px 5.3px rgba(0,0,0,.048),0 12.5px 10px rgba(0,0,0,.06),0 22.3px 17.9px rgba(0,0,0,.072),0 41.8px 33.4px rgba(0,0,0,.086),0 100px 80px rgba(0,0,0,.12)}
          :root{--fs-min:12px;--fs-prose:15px;--hdr-h:0px;--hdr-block:68px;--r-ctl:8px;--r-card:12px;--r-section:16px;--font-ui:'Helvetica Neue',Arial,Roboto,'Liberation Sans',sans-serif;--font-hand-ui:'Caveat',cursive;
            --paper:#f4eee1; --paper-2:#e8ddc8; --paper-3:#d8cdb6;
            --ink:#2b2620; --ink-2:#443d34; --stone:#8a7f6d; --stone-2:#b5aa93;
            --accent:#a33d2e; --accent-soft:#f5b79a; --green:#3e7a4e;
          }
          /* The design's fonts (Libre Franklin / Caveat / IBM Plex Mono / Quicksand) are self-hosted
             from public/fonts — see partials/_fonts, included right above; no external request. */
          *{box-sizing:border-box}
          html{scroll-behavior:smooth}
          body{margin:0;background:var(--paper);   /* one page colour: the desk around the sheet is paper too (owner 2026-10-19 "make the background of all pages same color") */
            color:var(--ink);
            font:var(--fs-prose)/1.6 'Libre Franklin',-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;-webkit-font-smoothing:antialiased}
          a{color:var(--accent);text-decoration:none}
          a:hover{opacity:.85}
          /* text links are always underlined (owner 2026-09-24): links inside running text, bylines, lists,
             tables, FAQ answers and the content blocks — buttons, navigation, cards and logos stay plain */
          p a,li a:not(.btn-go):not(.pd-cta):not(.cta):not(.ghost):not(.btn),.byline a,.cat-byline a,.cat-prose a,.user-content a,
          .author-card .who a,.author-card .bio a,.cat-faq .a a,.cat-teaser a,.cmp-cell a,td a,dd a,blockquote a,figcaption a,
          .cx-intro a,.cx-acc-body a,.cx-step-text a,.cx-card-text a,.cx-claim a,.cx-footnote a,.cat-note a,.cat-call .b a{
            text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
          /* --- design shell: cream sheet on the darker desk --- */
          .site-shell{position:relative;max-width:960px;margin:0 auto;background:var(--paper);min-height:100vh;padding-top:12px;
            display:flex;flex-direction:column}
          .site-shell{--emo-h:calc(var(--hdr-block,68px) + 150px)}   /* the emotion picture zone's height (hero pages: + 520px, below) */
          /* no sheet shadow: the paper sits flat on the desk (owner 2026-10-19 "remove from the whole website all
             templates the page shadow effect"). Until then a .site-shell::before carried a 60px shadow from 72 % of the
             emotion zone downwards (owner 2026-10-03 had only moved it below the floating header). */
          /* and the sheet's paper edge: the picture used to fade into the desk, so wherever it was half transparent the
             paper sheet showed its two edges against the desk, halfway up the hero (owner 2026-10-03, second screenshot:
             "the fade out lines still go too high into the header"). A full-width paper band (z-index:-1: behind the
             sheet's own paper, in front of the desk) now lies under the whole picture zone, so the picture fades into
             paper on both sides of the sheet; the band itself fades into the desk over the zone's last 28 %, where the
             shadow (above) starts too. The edges therefore begin around the end of the picture, never beside the header. */
          .site-shell::after{content:"";position:absolute;top:0;left:50%;width:100vw;height:var(--emo-h);translate:-50% 0;z-index:-1;pointer-events:none;
            background:linear-gradient(180deg,var(--paper) 0 72%,rgba(244,238,225,0) 100%)}
          .site-shell>main{flex:1;display:block;min-width:0;position:relative;z-index:1}
          .site-shell>.cat-footer{position:relative;z-index:1}
          html{overflow-x:clip}
          /* --- emotion background (design 2026-09-24, specs/layout-emotion.md): the domain's motif (or the
                 page's own) bleeds full-width behind the floating header and fades out; pages with a hero
                 (`has-hero`, category) keep it tall behind their paper cards --- */
          .site-emotion{position:absolute;top:0;left:50%;width:100vw;translate:-50% 0;z-index:0;overflow:hidden;pointer-events:none;
            height:calc(var(--hdr-block,64px) + 150px);
            -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 38%,rgba(0,0,0,.45) 70%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(180deg,#000 0%,#000 38%,rgba(0,0,0,.45) 70%,rgba(0,0,0,0) 100%)}
          .site-shell.has-hero{--emo-h:calc(var(--hdr-block,68px) + 520px)}
          .site-shell.has-hero .site-emotion{height:calc(var(--hdr-block,64px) + 520px);
            -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 45%,rgba(0,0,0,.55) 70%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(180deg,#000 0%,#000 45%,rgba(0,0,0,.55) 70%,rgba(0,0,0,0) 100%)}
          .site-emotion picture,.site-emotion img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 15%;display:block}
          /* editor's softening of a backgrounds-global picture (Globals › Background images: blur px, opacity %);
             blurred pictures are scaled a little so the soft edge stays outside the visible box */
          .site-emotion img{filter:blur(var(--emo-blur,0));opacity:var(--emo-op,1)}
          .site-emotion.is-soft img{transform:scale(1.06)}
          /* hero pages on wide monitors (owner 2026-09-28: "the 2 fingers are very far out of the screen"): the picture
             scaled with the viewport, so the motif drifted away from the 960px sheet. Above 1260px it is capped at
             1200px — the width at which the fingers sit right of the headline — centred on the sheet, its sides
             fading into the paper. Below that nothing changes. */
          @media(min-width:1260px){
            .site-shell.has-hero .site-emotion picture{left:50%;right:auto;width:1200px;translate:-50% 0;
              -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0),#000 16%,#000 84%,rgba(0,0,0,0));mask-image:linear-gradient(90deg,rgba(0,0,0,0),#000 16%,#000 84%,rgba(0,0,0,0))}
          }
          /* placed backgrounds (specs/layout-emotion.md § Placement, owner 2026-10-19 "move the girl here more to the right so
             the text becomes visible … image more on the right side and left side text + clear light background"): on hero
             pages with the text on the left (category, home) the picture starts --emo-l of its box to the right, its left
             edge fades into the paper, the crop follows --emo-x/--emo-y (mobile --emo-mx/--emo-my) and a paper veil
             (--emo-veil / --emo-mveil) lightens the text side. Values per picture from background_placements
             (App\Support\BackgroundPlacer simulates exactly these rules: change both together). */
          .site-shell.has-hero:not(.rev-hero) .site-emotion.is-placed::after{content:"";position:absolute;inset:0;pointer-events:none;
            background:rgba(244,238,225,var(--emo-mveil,0))}
          .site-shell.has-hero:not(.rev-hero) .site-emotion.is-placed img{object-position:var(--emo-mx,50%) var(--emo-my,15%)}
          @media(min-width:768px){
            .site-shell.has-hero:not(.rev-hero) .site-emotion.is-placed::after{
              background:linear-gradient(90deg,rgba(244,238,225,var(--emo-veil,0)) 0,rgba(244,238,225,var(--emo-veil,0)) calc(50% + 120px),rgba(244,238,225,0) calc(50% + 330px))}
            .site-shell.has-hero:not(.rev-hero) .site-emotion.is-placed picture{left:calc(100% * var(--emo-l,0));width:calc(100% * (1 - var(--emo-l,0)))}
            .site-shell.has-hero:not(.rev-hero) .site-emotion.is-placed[style*="--emo-l:0."] picture{
              -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0),#000 30%);mask-image:linear-gradient(90deg,rgba(0,0,0,0),#000 30%)}
            .site-shell.has-hero:not(.rev-hero) .site-emotion.is-placed img{object-position:var(--emo-x,50%) var(--emo-y,15%)}
          }
          @media(min-width:1260px){
            .site-shell.has-hero:not(.rev-hero) .site-emotion.is-placed picture{left:calc(50% - 600px + 1200px * var(--emo-l,0));width:calc(1200px * (1 - var(--emo-l,0)));translate:0 0;
              -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0),#000 16%,#000 84%,rgba(0,0,0,0));mask-image:linear-gradient(90deg,rgba(0,0,0,0),#000 16%,#000 84%,rgba(0,0,0,0))}
            .site-shell.has-hero:not(.rev-hero) .site-emotion.is-placed[style*="--emo-l:0."] picture{
              -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0),#000 30%,#000 84%,rgba(0,0,0,0));mask-image:linear-gradient(90deg,rgba(0,0,0,0),#000 30%,#000 84%,rgba(0,0,0,0))}
          }
          /* review pages and their subpages (experiences, costs, …; body class rev-hero): the emotion picture (owner 2026-10-19 "make the background picture bigger, fade out nicer"): taller than
             the layout's has-hero zone, up to 1680px wide on big monitors (layout caps it at 1200px for the category motif),
             and both fades eased over many stops so no edge line shows, neither at the sides nor at the bottom */
          .site-shell.rev-hero{--emo-h:calc(var(--hdr-block,68px) + 640px)}
          .site-shell.rev-hero .site-emotion{height:calc(var(--hdr-block,64px) + 640px);
            -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 36%,rgba(0,0,0,.86) 46%,rgba(0,0,0,.66) 56%,rgba(0,0,0,.44) 66%,rgba(0,0,0,.24) 76%,rgba(0,0,0,.1) 86%,rgba(0,0,0,.03) 94%,rgba(0,0,0,0) 100%);
            mask-image:linear-gradient(180deg,#000 0%,#000 36%,rgba(0,0,0,.86) 46%,rgba(0,0,0,.66) 56%,rgba(0,0,0,.44) 66%,rgba(0,0,0,.24) 76%,rgba(0,0,0,.1) 86%,rgba(0,0,0,.03) 94%,rgba(0,0,0,0) 100%)}
          @media(min-width:1260px){
            .site-shell.rev-hero .site-emotion picture{width:min(100vw,1680px);
                    -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 5%,rgba(0,0,0,.3) 11%,rgba(0,0,0,.62) 17%,rgba(0,0,0,.88) 23%,#000 28%,#000 72%,rgba(0,0,0,.88) 77%,rgba(0,0,0,.62) 83%,rgba(0,0,0,.3) 89%,rgba(0,0,0,.08) 95%,rgba(0,0,0,0) 100%);
                    mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 5%,rgba(0,0,0,.3) 11%,rgba(0,0,0,.62) 17%,rgba(0,0,0,.88) 23%,#000 28%,#000 72%,rgba(0,0,0,.88) 77%,rgba(0,0,0,.62) 83%,rgba(0,0,0,.3) 89%,rgba(0,0,0,.08) 95%,rgba(0,0,0,0) 100%)}
          }
          /* category pages (body class has-hero wide-hero; owner 2026-10-21 on solteros.es/citas-sexuales "make image bigger of
             background couple"): the same bigger picture as the reviews got on 2026-10-19 — from 768px up the zone is header +
             640px (mobile keeps 520, a taller box on a 390px screen only zooms the crop further in) and the picture no longer
             stops at 1200px: it is the full viewport up to 1680px, so between 1260 and 1680 it needs no side fade; above that
             the sides ease into the paper like the reviews'. The placement rules (is-placed) keep working on the wider box:
             the picture starts --emo-l of min(100vw,1680px) to the right, its left edge fades over 30%. The home page keeps
             the 1200px cap (owner 2026-09-28: the fingers must sit right of the headline). App\Support\BackgroundPlacer
             simulates this geometry for category pictures (wide): change both together. */
          .site-shell.wide-hero{--emo-w:min(100vw,1680px)}
          @media(min-width:768px){
            .site-shell.wide-hero{--emo-h:calc(var(--hdr-block,68px) + 640px)}
            .site-shell.wide-hero .site-emotion{height:calc(var(--hdr-block,64px) + 640px);
              -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 36%,rgba(0,0,0,.86) 46%,rgba(0,0,0,.66) 56%,rgba(0,0,0,.44) 66%,rgba(0,0,0,.24) 76%,rgba(0,0,0,.1) 86%,rgba(0,0,0,.03) 94%,rgba(0,0,0,0) 100%);
              mask-image:linear-gradient(180deg,#000 0%,#000 36%,rgba(0,0,0,.86) 46%,rgba(0,0,0,.66) 56%,rgba(0,0,0,.44) 66%,rgba(0,0,0,.24) 76%,rgba(0,0,0,.1) 86%,rgba(0,0,0,.03) 94%,rgba(0,0,0,0) 100%)}
          }
          @media(min-width:1260px){
            .site-shell.has-hero.wide-hero .site-emotion picture{width:var(--emo-w);-webkit-mask-image:none;mask-image:none}
            .site-shell.has-hero.wide-hero .site-emotion.is-placed picture{left:calc(50% - var(--emo-w) / 2 + var(--emo-w) * var(--emo-l,0));width:calc(var(--emo-w) * (1 - var(--emo-l,0)));translate:0 0;
              -webkit-mask-image:none;mask-image:none}
            .site-shell.has-hero.wide-hero .site-emotion.is-placed[style*="--emo-l:0."] picture{
              -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0),#000 30%);mask-image:linear-gradient(90deg,rgba(0,0,0,0),#000 30%)}
          }
          @media(min-width:1681px){
            .site-shell.has-hero.wide-hero .site-emotion picture,.site-shell.has-hero.wide-hero .site-emotion.is-placed picture{
              -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 5%,rgba(0,0,0,.3) 11%,rgba(0,0,0,.62) 17%,rgba(0,0,0,.88) 23%,#000 28%,#000 72%,rgba(0,0,0,.88) 77%,rgba(0,0,0,.62) 83%,rgba(0,0,0,.3) 89%,rgba(0,0,0,.08) 95%,rgba(0,0,0,0) 100%);
              mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 5%,rgba(0,0,0,.3) 11%,rgba(0,0,0,.62) 17%,rgba(0,0,0,.88) 23%,#000 28%,#000 72%,rgba(0,0,0,.88) 77%,rgba(0,0,0,.62) 83%,rgba(0,0,0,.3) 89%,rgba(0,0,0,.08) 95%,rgba(0,0,0,0) 100%)}
            .site-shell.has-hero.wide-hero .site-emotion.is-placed[style*="--emo-l:0."] picture{
              -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0),#000 30%,#000 72%,rgba(0,0,0,.88) 77%,rgba(0,0,0,.62) 83%,rgba(0,0,0,.3) 89%,rgba(0,0,0,.08) 95%,rgba(0,0,0,0) 100%);
              mask-image:linear-gradient(90deg,rgba(0,0,0,0),#000 30%,#000 72%,rgba(0,0,0,.88) 77%,rgba(0,0,0,.62) 83%,rgba(0,0,0,.3) 89%,rgba(0,0,0,.08) 95%,rgba(0,0,0,0) 100%)}
          }
          /* pages that ship their own .cat-page sheet render inside the shell — neutralize the double sheet */
          .site-shell .cat-page{max-width:none;min-height:0;box-shadow:none}
          .wrap{max-width:960px;margin:0 auto;padding:28px 22px 90px}
          .kicker{font:700 12px/1 'Libre Franklin',-apple-system,'Segoe UI',sans-serif;letter-spacing:.18em;
            text-transform:uppercase;color:var(--accent)}
          h1{font-size:40px;line-height:1.1;margin:.3em 0 .2em;letter-spacing:-.01em}
          /* section headlines — ONE style everywhere (owner 2026-09-25): the category page's
             "Our top 3 …" headline: 28px, 800, black, no rule under it, no uppercase */
          h2{font:800 28px/1.05 'Libre Franklin',-apple-system,'Segoe UI',sans-serif;letter-spacing:-.03em;
            text-transform:none;color:#000;margin:30px 0 16px;padding:0;border:0}
          .byline{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font:500 13px/1.4 'Libre Franklin',-apple-system,'Segoe UI',sans-serif;color:var(--ink-2)}
          .byline .face{width:24px;height:24px;border-radius:50%;object-fit:cover;flex-shrink:0;margin-right:2px}
          .byline a{color:#a33d2e;text-decoration:underline;text-underline-offset:3px}
          .badge{display:inline-block;background:var(--accent);color:#fff;font:700 12px/1 -apple-system,sans-serif;
            letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:var(--r-ctl)}
          .lead{font-size:18px;line-height:1.55;color:var(--ink-2)}
          .card{background:var(--paper-2);border:1px solid var(--paper-3);border-radius:var(--r-card);padding:18px 20px;margin:14px 0}
          .cta{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;
            font:700 15px/1 -apple-system,sans-serif;padding:13px 22px;border-radius:var(--r-ctl)}
          /* a clickout button standing alone in a paragraph of imported prose ([[clickout_button]]) is centred (owner 2026-10-10 "always center these in between buttons") */
          .art-prose p:has(> a.cta:only-child),.user-content p:has(> a.cta:only-child){text-align:center}
          .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
          .stat{background:var(--paper-2);border:1px solid var(--paper-3);border-radius:var(--r-card);padding:12px 14px}
          .stat .n{font-size:26px;font-weight:700;color:var(--accent)}
          .stat .l{font:12px/1.3 -apple-system,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--stone)}
          ul.notes{list-style:none;padding:0;margin:0}
          ul.notes li{padding:8px 0 8px 26px;border-bottom:1px solid var(--paper-3);position:relative}
          ul.notes li:before{content:"—";position:absolute;left:4px;color:var(--accent)}
          table{width:100%;border-collapse:collapse;font:15px/1.4 -apple-system,sans-serif}
          th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--paper-3)}
          th{font:700 12px/1 -apple-system,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--stone)}
          .muted{color:var(--stone)}
          .review-list{display:grid;gap:14px;margin-top:20px}
          .review-list a{display:block;text-decoration:none;color:inherit;background:var(--paper-2);
            border:1px solid var(--paper-3);border-radius:var(--r-card);padding:16px 18px}
          .review-list h3{margin:0 0 4px;font-size:21px;color:var(--ink)}
          /* --- review page --- */
          h3{font-size:23px;line-height:1.25;margin:30px 0 10px;letter-spacing:-.01em}
          h4{font:700 12px/1 -apple-system,'Segoe UI',sans-serif;letter-spacing:.12em;text-transform:uppercase;
            color:var(--ink-2);margin:22px 0 8px}
          .small{font:13px/1.5 -apple-system,'Segoe UI',sans-serif}
          .review-section{margin-top:8px}
          .review-sub{margin-top:6px}
          .stars{color:var(--accent);letter-spacing:2px;font-size:15px;white-space:nowrap}
          .stars .off{color:var(--stone-2)}
          .score-max{font:600 12px -apple-system,sans-serif;color:var(--stone)}
          .byline .stars{font-size:13px}
          .quickfacts{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
          .qf-logo{max-width:120px;max-height:44px;object-fit:contain}
          .qf-stats{display:flex;gap:12px;flex-wrap:wrap;flex:1}
          .quickfacts .stat{padding:8px 12px}
          .quickfacts .stat .n{font-size:20px}
          .status-banner{background:var(--accent);color:#fff;border-radius:var(--r-card);padding:12px 16px;margin:14px 0;
            font:600 14px/1.5 -apple-system,'Segoe UI',sans-serif}
          .status-banner strong{text-decoration:underline}
          .pullquote{border-left:3px solid var(--accent);margin:26px 0;padding:4px 0 4px 20px;
            font-size:20px;line-height:1.55;font-style:italic;color:var(--ink-2)}
          .pullquote footer{font:600 13px -apple-system,'Segoe UI',sans-serif;font-style:normal;color:var(--stone);margin-top:8px}
          .yt-embed{max-width:100%;border-radius:var(--r-card);margin:14px 0}
          .toc .toc-title{font:700 12px/1 -apple-system,sans-serif;letter-spacing:.14em;text-transform:uppercase;
            color:var(--stone);margin-bottom:10px}
          .toc-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px 18px}
          .toc-links a{font:14px/1.9 -apple-system,'Segoe UI',sans-serif;text-decoration:none;color:var(--ink-2)}
          .toc-links a:before{content:"→ ";color:var(--accent)}
          .toc-links a:hover{color:var(--accent)}
          .cols2{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
          @media(max-width:620px){.cols2{grid-template-columns:1fr}}
          ul.notes.good li:before{content:"+";color:var(--green);font-weight:700}
          ul.notes.bad li:before{content:"–";color:var(--accent);font-weight:700}
          ul.notes.paid li:before{content:"$";color:var(--stone);font-weight:700}
          ul.notes li.good:before{content:"+";color:var(--green);font-weight:700}
          ul.notes li.bad:before{content:"–";color:var(--accent);font-weight:700}
          .verdict{font-size:19px;background:var(--paper-2);border:1px solid var(--paper-3);
            border-radius:var(--r-card);padding:14px 18px}
          .verdict-free{border-color:var(--green)}
          .genderbar{display:flex;height:28px;border-radius:6px;overflow:hidden;
            font:700 12px/28px -apple-system,sans-serif;color:#fff;margin:6px 0 4px}
          .genderbar .seg{overflow:hidden;white-space:nowrap;text-indent:8px}
          .genderbar .f{background:var(--accent)}
          .genderbar .m{background:var(--green)}
          .genderbar .c{background:var(--stone)}
          .agebar{display:grid;grid-template-columns:52px 1fr 44px;gap:10px;align-items:center;
            font:12px -apple-system,sans-serif;color:var(--ink-2);margin:5px 0}
          .agebar .track{display:block;background:var(--paper-2);border:1px solid var(--paper-3);border-radius:4px;height:12px}
          .agebar .fill{display:block;background:var(--accent);height:100%;border-radius:3px}
          .agebar .pct{text-align:right}
          .chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
          .chip{background:var(--paper-2);border:1px solid var(--paper-3);border-radius:999px;
            padding:5px 13px;font:600 12px -apple-system,sans-serif;color:var(--ink-2)}
          figure.shot{margin:20px 0}
          figure.shot img{max-width:min(100%,600px);height:auto;border:1px solid var(--paper-3);border-radius:8px}
          figure.shot figcaption{font:12px -apple-system,sans-serif;color:var(--stone);margin-top:6px}
          .thumbrow{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
          .thumbrow img{width:88px;height:auto;border:1px solid var(--paper-3);border-radius:var(--r-ctl)}
          .table-scroll{overflow-x:auto}
          .pricetable td,.pricetable th,.scoretable td,.factable td,.factable th{vertical-align:top}
          .factable th{width:130px}
          .scoretable .num{white-space:nowrap;text-align:right}
          .scoretable tr.total td{border-top:2px solid var(--ink);border-bottom:none;font-size:16px}
          details.faq{border-bottom:1px solid var(--paper-3);padding:10px 0}
          details.faq summary{cursor:pointer;font-weight:700;font-size:var(--fs-prose)}
          details.faq .user-content{padding:6px 0 4px 2px}
          .zz-note{cursor:help;color:var(--accent);font-style:normal}
          .notebook-head{font-size:15px;color:var(--accent);border-bottom:2px solid var(--accent)}
          .user-content img{max-width:100%;height:auto}
          .user-content blockquote{border-left:3px solid var(--paper-3);margin:16px 0;padding:2px 0 2px 16px;
            font-style:italic;color:var(--ink-2)}
          /* --- shared design chrome + vocabulary (specs/home-design.html) --- */
          /* :where() keeps this at element specificity: it colours plain links but never outranks a component's own
             colour (2026-09-27: the floating "Back to our top 3 picks" button and the CTA banner label were accent on
             dark/accent because `.cat-page a` beat `.cat-backtop a` and `.cx-banner-btn`) */
          :where(.cat-page) a{color:#a33d2e;text-decoration:none}
          .cat-page a:hover{opacity:.85}
          .cat-page h1,.cat-page h2,.cat-page h3{font-family:'Libre Franklin',sans-serif;border:none;letter-spacing:normal;text-transform:none}
          .cat-caveat{font-family:'Caveat',cursive}
          /* site icons: resources/icons/zzicons → public/icons/zzicons.svg, use {{ partial:icon name="…" }} (specs/icons.md) */
          .zz-icon{display:inline-block;width:1em;height:1em;vertical-align:-.15em;fill:currentColor;flex:none}
          .cat-header{position:relative;z-index:10;border-radius:var(--r-section);background:rgba(244,238,225,.82);
            -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
            box-shadow:0 0 0 1px rgba(0,0,0,.06),0 1px 1px -.5px rgba(0,0,0,.06),0 3px 3px -1.5px rgba(0,0,0,.06),0 6px 6px -3px rgba(0,0,0,.06),0 12px 12px -6px rgba(0,0,0,.06),0 24px 24px -12px rgba(0,0,0,.06)}
          @media(prefers-reduced-transparency:reduce){.cat-header{-webkit-backdrop-filter:none;backdrop-filter:none;background:#f4eee1}}
          /* bar 56px, logo 48px (max 290), menu type 15px (owner 2026-10-03: "logo of datingscout needs to be bigger", "main menu font needs to be bigger"; the fit steps moved up with it: 13.5 / 12.5px instead of 12 / 11.5). Before: 50px, 40px logo, 13px type. */
          .cat-header .bar{display:flex;align-items:center;gap:2px;height:56px;padding:0 10px 0 20px;position:relative}   /* 20px before the logo (was 12; owner 2026-10-03 "more space left and right of datingscout logo it looks squeezed") */   /* 58 → 50 (owner 2026-09-29: "less space top bottom inside so it all gets not so high") */
          .cat-header .brand{display:flex;align-items:center;gap:9px;color:#2b2620;font:500 22px 'Quicksand',sans-serif;letter-spacing:-.01em;white-space:nowrap;margin-right:6px}
          .cat-header .brand b{font-weight:700}
          .cat-header .brand-logo{display:flex;align-items:center;gap:2px;flex-shrink:0;min-width:0;min-height:44px;margin-right:16px}   /* 16px after the logo (was 6), see .bar */
          .cat-header .brand-logo img{display:block;height:42px;width:auto;max-width:290px;object-fit:contain;transform:translateY(-1px)}   /* 48 → 42 (owner 2026-10-03: "a bit smaller, slightly more space to top and bottom"): 7px air in the 56px bar */
          .site-en_nz .cat-header .brand-logo img{height:35px}   /* the NZ file is cropped to the ink (300x55, no padding) where the others carry ~16-30 % air, so at 48px its wordmark drew taller than every sibling (owner 2026-10-03 "the nz logo is quite big"); 40px shows the ink at the US height (40px) */
                    .cat-header .bar-space{flex:1}
          /* --- helpline row (owner 2026-09-28, production's phone dropdown under the logo; then "no new background
                 row, write directly on the background"): the phone number as a tel: link written on the emotion picture
                 above the floating bar, soft layered text shadow like the hero copy, opens the original "Call us!" text.
                 On every site since 2026-10-03 (phone or slogan, plus est. 2009); shares the .cat-nav-item / .cat-nav-panel mechanics. --- */
          .helpline-row{position:relative;z-index:11;display:flex;align-items:center;flex-wrap:wrap;gap:0 10px;min-height:26px;padding:0 6px 7px 8px}   /* 4 → 7px below the number (owner 2026-10-06: "very little more space phone number to menu bar") */
          /* "est. 2009 ♥" and the phone-less sites' slogan: handwritten on the picture beside the phone (owner 2026-10-03), the hero copy's soft text shadow */
          .helpline-row .est,.helpline-row .slogan-line{font:600 17px/1 'Caveat',cursive;white-space:nowrap;padding:3px 0;
            text-shadow:0 1px 1px rgba(255,255,255,.35),0 1px 2px rgba(0,0,0,.06),0 3px 6px rgba(0,0,0,.08)}
          .helpline-row .est{color:#a33d2e}
          .helpline-row .slogan-line{color:#2b2620;padding-left:6px;white-space:normal}
          .helpline-row .cat-phone+.est{padding-left:8px;box-shadow:-1px 0 0 rgba(43,38,32,.2)}   /* the hairline that separated est. from the logo, now between number and est. */
          .helpline-row .cat-phone{position:static}
          .helpline-row .cat-phone>.cat-nav-link{padding:3px 8px 3px 6px;font:600 13px var(--font-ui);color:#2b2620;gap:5px;min-height:26px;
            text-shadow:0 1px 1px rgba(255,255,255,.35),0 1px 2px rgba(0,0,0,.06),0 3px 6px rgba(0,0,0,.08)}
          .helpline-row .cat-phone>.cat-nav-link:hover,.helpline-row .cat-nav-item.open>.cat-nav-link{background:rgba(244,238,225,.6)}
          .helpline-row .cat-phone>.cat-nav-link .zz-icon{font-size:14px;color:#a33d2e;filter:drop-shadow(0 1px 1px rgba(0,0,0,.12))}
          .helpline-row .cat-phone .cat-nav-panel{left:0;right:auto;margin-top:6px;width:min(420px,calc(100vw - 20px));max-width:none;padding:18px 22px 20px;transform-origin:top left}
          .helpline-row .cat-phone .hl-head{font:700 18px/1.2 var(--font-ui);color:#2b2620;margin:0 0 10px}
          .helpline-row .cat-phone .hl-body{font:400 14px/1.55 var(--font-ui);color:#443d34}
          .helpline-row .cat-phone .hl-body p{margin:0 0 9px}
          .helpline-row .cat-phone .hl-body ul{margin:0 0 9px;padding-left:18px}
          .helpline-row .cat-phone .hl-body li{margin:0 0 3px}
          .helpline-row .cat-phone .hl-body li::marker{color:#a33d2e}
          .helpline-row .cat-phone .hl-body strong{color:#2b2620}
          .helpline-row .cat-phone .hl-call{display:inline-flex;align-items:center;gap:7px;margin-top:4px;padding:9px 14px;border-radius:var(--r-ctl);background:#a33d2e;color:#fff;font:700 14px var(--font-ui);text-decoration:none}
          .helpline-row .cat-phone .hl-call:hover{background:#8d3327;opacity:1}
          .helpline-row .cat-phone .hl-call .zz-icon{font-size:14px}
          /* --- header live search --- */
          .cat-search{position:relative;flex:none;margin-left:2px;display:flex;align-items:center;gap:4px}
          /* open state (owner 2026-09-25): the navigation gives way to the search box, a close button sits left of it */
          /* !important: the desktop rule `.cat-header:not(.fit-5) .cat-nav{display:flex}` further down has the same specificity and
             came later, so the menu stayed visible beside the open search (owner 2026-10-11 "the menu is broken when i click search");
             the menu points and the hamburger give way, "My recommendation" (.cat-nav-cta) stays */
          .cat-header.search-open .cat-nav-items,.cat-header.search-open .cat-menu-btn{display:none!important}
          .cat-search-close{display:none;align-items:center;justify-content:center;flex:none;width:38px;height:38px;padding:0;border:0;border-radius:var(--r-ctl);background:transparent;color:#2b2620;cursor:pointer}
          .cat-search-close:hover{background:rgba(43,38,32,.06)}
          .cat-search-close .lines{position:relative;display:block;width:18px;height:18px}
          .cat-search-close .lines span{position:absolute;left:0;top:8px;width:18px;height:1.5px;border-radius:1px;background:currentColor}
          .cat-search-close .lines span:first-child{transform:rotate(45deg)}.cat-search-close .lines span:last-child{transform:rotate(-45deg)}
          .cat-search.is-open .cat-search-close{display:flex}
          .cat-search form{display:flex;align-items:center;justify-content:flex-end;gap:8px;height:38px;width:38px;margin:0;padding:0;border:0;border-radius:var(--r-ctl);
            background:transparent;color:#2b2620;overflow:hidden;cursor:pointer;
            transition:width .34s cubic-bezier(.23,1,.32,1),padding .34s cubic-bezier(.23,1,.32,1),border-radius .34s cubic-bezier(.23,1,.32,1),background-color .15s ease,box-shadow .2s ease}
          .cat-search form:hover{background:rgba(43,38,32,.06)}
          .cat-search form:focus-within,.cat-search form.is-open{width:min(340px,calc(100vw - 150px));border-radius:999px;padding:0 13px 0 16px;cursor:text;
            background:rgba(251,248,241,.92);box-shadow:0 0 0 .5px rgba(43,38,32,.2)}
          .cat-search svg{order:2;flex-shrink:0;width:16px;height:16px;margin:0 11px;opacity:.8;transition:margin .34s cubic-bezier(.23,1,.32,1)}
          .cat-search form:focus-within svg,.cat-search form.is-open svg{margin:0}
          .cat-search input{order:1;flex:1;width:0;min-width:0;opacity:0;border:0;outline:0;background:transparent;padding:0;
            font:500 14px var(--font-ui);color:#2b2620;transition:opacity .18s ease}
          .cat-search form:focus-within input,.cat-search form.is-open input{width:auto;opacity:1;transition-delay:.14s}
          .cat-search input::placeholder{color:#8a8174}
          .cat-search input::-webkit-search-cancel-button{-webkit-appearance:none}
          .cat-search-drop{position:absolute;top:calc(100% + 8px);right:0;width:min(430px,calc(100vw - 24px));
            background:#fff;border:1.5px solid #2b2620;border-radius:var(--r-ctl);box-shadow:var(--sh-lg);
            max-height:min(480px,70vh);overflow-y:auto;z-index:20}
          .cat-search-item{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;color:#2b2620;
            border-bottom:1px solid #e8ddc8}
          .cat-search-item.active,.cat-search-item:hover{background:#f4eee1;opacity:1}
          .cat-search-item img{width:44px;height:44px;border-radius:var(--r-ctl);object-fit:cover;flex-shrink:0;
            border:1px solid #d8cdb6;background:#fff}
          .cat-search-item .t{display:block;font:700 13.5px/1.35 'Libre Franklin',sans-serif;color:#2b2620}
          .cat-search-item .d{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
            font:400 12px/1.45 'Libre Franklin',sans-serif;color:#443d34;margin-top:2px}
          .cat-search-empty{padding:14px 12px;font:500 13px 'Libre Franklin',sans-serif;color:#8a7f6d}
          .cat-search-all{display:block;padding:11px 12px;text-align:center;font:700 12px 'Libre Franklin',sans-serif;
            letter-spacing:.06em;color:#a33d2e;background:#f4eee1}
          /* hamburger: two hairlines that cross when open (design artifact 2026-09-24) */
          .cat-menu-btn{display:flex;align-items:center;justify-content:center;height:44px;min-width:44px;padding:0 8px;cursor:pointer;border:0;border-radius:var(--r-ctl);background:transparent;color:#2b2620}
          .cat-menu-btn .lines{display:flex;flex-direction:column;align-items:center;gap:5px;width:24px}
          .cat-menu-btn .lines span{width:18px;height:1.5px;border-radius:1px;background:#2b2620;display:block}
          .cat-header .cat-menu-btn .lines span:nth-child(2){display:none}
          .cat-header .cat-menu-btn[aria-expanded="true"] .lines span:nth-child(1){transform:translateY(3.25px) rotate(45deg)}
          .cat-header .cat-menu-btn[aria-expanded="true"] .lines span:nth-child(3){transform:translateY(-3.25px) rotate(-45deg)}
          .cat-menu{display:none;border-top:.5px solid rgba(43,38,32,.14);background:transparent;border-radius:0 0 var(--r-section) var(--r-section);max-height:78vh;overflow-y:auto;padding:0}
          .cat-menu .mm-top{padding:0}
          .cat-menu .grid{padding:12px 21.5px 6.5px}
          .cat-menu.open{display:block;max-height:calc(100dvh - 76px);overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
          /* open menu: the page is scrolled to the top and locked, only the menu scrolls (phones scrolled the page
             underneath instead of the 55-link menu, owner 2026-09-27) */
          html.cat-menu-open{overflow:hidden}
          html.cat-menu-open body{position:fixed;width:100%;overflow:hidden}
          .cat-menu .home-row{display:block;margin:10px 21.5px 0}
          .cat-menu .home-row a{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 14px;background:#a33d2e;color:#fff;font:700 15px var(--font-ui);border-radius:var(--r-ctl);box-shadow:none}
          .cat-menu .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:19.5px 26px}
          .cat-menu .grp-name{display:block;font:700 16px var(--font-ui);color:#2b2620;border-bottom:1.5px solid #2b2620;padding:10px 0 6.5px;margin-bottom:9.5px}
          .cat-menu a.grp-name:hover{color:#a33d2e;opacity:1}
          .cat-menu .grp .links{display:flex;flex-direction:column;gap:6.5px}
          .cat-menu .grp a:not(.grp-name){display:flex;align-items:center;min-height:44px;font:500 14.5px/1.4 var(--font-ui);color:#443d34}
          /* menu icons (zzicons sprite via partials/_icon): terracotta glyph before each row, grey caret for provider rows */
          .cat-menu .zz-icon.mi,.cat-nav-panel .zz-icon.mi,.about-row .zz-icon.mi{font-size:14px;color:#a33d2e;width:1.15em;height:1.15em;vertical-align:-.2em;overflow:visible}
          .cat-menu .zz-icon.mi[data-caret],.cat-nav-panel .zz-icon.mi[data-caret]{color:#b5aa93;font-size:9px;margin:0 3px 0 4px}
          .about-row .zz-icon.mi{font-size:12px;margin-right:4px;color:#8a7f6d}
          .cat-menu .about-row{display:flex;flex-wrap:wrap;gap:0 17.5px;padding:15px 21.5px 19.5px;border-top:1.5px solid #d8cdb6;margin-top:13px}
          .cat-menu .about-row a{display:flex;align-items:center;min-height:44px;font:500 14.5px var(--font-ui);color:#6d6455}
          /* --- nav bar (design artifact 2026-09-24): inline in the header row on wide screens, the
                 hamburger takes over below 700px; data: {{ header_nav:bar }} --- */
          .cat-nav{display:none;align-items:center;gap:2px;flex:1;min-width:0;margin-right:6px}
          .cat-nav-cta{flex-shrink:0;display:flex;align-items:center;font:700 15px var(--font-ui);color:#fff;background:#a33d2e;padding:8px 11px;border-radius:var(--r-ctl);white-space:nowrap;margin-right:2px;transition:background .15s,transform .1s ease-out}
          .cat-nav-cta:hover{background:#8d3226;color:#fff;opacity:1}
          .cat-nav-cta:active{transform:scale(.97)}
          .cat-nav-items{display:flex;align-items:center;flex:1 1 auto;min-width:0}
          .cat-nav-item{position:static;flex-shrink:0;display:flex}
          .cat-nav-link{display:flex;align-items:center;gap:6px;padding:8px 10px;font:600 15px var(--font-ui);color:#443d34;border-radius:var(--r-ctl);white-space:nowrap;transition:background .15s,transform .1s ease-out}
          .cat-nav-link:hover,.cat-nav-item.open>.cat-nav-link{background:rgba(43,38,32,.06);color:#2b2620;opacity:1}
          .cat-nav-link:active{transform:scale(.97)}
          .cat-nav-link .caret{display:inline-block;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s cubic-bezier(.32,.72,0,1)}
          .cat-nav-item.open>.cat-nav-link .caret{transform:translateY(1px) rotate(225deg)}
          .cat-nav-panel{display:none;position:absolute;top:100%;right:10px;z-index:60;max-width:calc(100% - 20px);margin-top:14px;
            background:#faf7f0;border-radius:var(--r-section);box-shadow:0 16px 40px rgba(43,38,32,.16);outline:.5px solid rgba(43,38,32,.12);outline-offset:-.5px;padding:14px 8px 10px;text-align:left;transform-origin:top right}
          .cat-nav-panel::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
          .cat-nav-item.open>.cat-nav-panel{display:block;animation:cat-nav-in .24s cubic-bezier(.32,.72,0,1) both}
          @keyframes cat-nav-in{from{opacity:0;transform:scale(.97) translateY(-4px)}to{opacity:1;transform:none}}
          @media(prefers-reduced-motion:reduce){.cat-nav-item.open>.cat-nav-panel{animation:none}}
          /* the mega panel hugs its content (owner 2026-09-28: "a few categories don't need that large dropdown"):
             one short column stays a small card, many columns wrap inside the bar's width */
          .cat-nav-panel.mega{left:10px;right:auto;width:max-content;max-width:calc(100% - 20px);transform-origin:top left}
          .cat-nav-panel.mega .col{flex:0 1 auto;min-width:150px;max-width:280px}
          .cat-nav-panel.side{width:max-content}
          .cat-nav-panel.side .cols{flex-wrap:nowrap}
          .cat-nav-panel.side .col{flex:0 1 auto;min-width:150px}
          .cat-nav-panel .cols{display:flex;flex-wrap:wrap;gap:12px}
          .cat-nav-panel .col{display:flex;flex-direction:column;min-width:0;flex:1 1 150px}
          .cat-nav-panel .grp-title{display:block;font:700 16px var(--font-ui);color:#2b2620;padding:4px 10px 6.5px;margin:0 0 6px;border-bottom:1.5px solid #2b2620;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
          .cat-nav-panel a.grp-title:hover{color:#a33d2e;opacity:1}
          .cat-nav-panel .col a:not(.grp-title){display:flex;align-items:center;gap:8px;font:500 14px/1.3 var(--font-ui);color:#2b2620;padding:7px 10px;border-radius:var(--r-ctl);transition:background .12s}
          .cat-nav-panel .col a:not(.grp-title):hover{background:rgba(43,38,32,.06);color:#a33d2e;opacity:1}
          @media(min-width:700px){.cat-header:not(.fit-5) .cat-nav{display:flex}.cat-header:not(.fit-5) .cat-menu-btn{display:none}.cat-header:not(.fit-5) .cat-menu{display:none!important}
            .cat-header:not(.fit-5) .bar-space{flex:0 0 0}}
          /* bar fit (JS below, owner 2026-09-28 "france menu too big"): the labels differ per language, so the bar is
             measured after the fonts load and on resize. The space between the menu points goes last (owner 2026-09-29
             "make the menu points more space in between but consider large points like france"): step 1 shrinks the
             logo and the margins around it and keeps the menu at the former base spacing, step 2 compacts the type,
             the logo and the CTA, step 3 squeezes harder (11.5px, smaller logo and est), step 4 drops "est. 2009"
             (owner: keep the divider line as long as there is room), step 5 falls back to the hamburger menu, which
             works at every width */
          .cat-nav-item.top.is-demoted{display:none!important}   /* moved into the More panel by the fit routine */
          .cat-header.fit-1 .cat-nav-link{padding:8px 7px;gap:4px}
          .cat-header.fit-1 .cat-nav-cta{padding:8px 9px}
          .cat-header.fit-1 .cat-nav{margin-right:0}
          .cat-header.fit-1 .brand-logo{margin-right:14px}
          .cat-header.fit-1 .brand-logo img{max-width:220px}
          .cat-header.fit-1 .cat-search svg{margin:0 8px}
          .cat-header.fit-2 .brand-logo img{max-width:180px}
          .cat-header.fit-2 .cat-nav-cta{font-size:13.5px;padding:7px 7px}
          .cat-header.fit-2 .cat-nav-link{font-size:13.5px;padding:8px 5px;gap:3px}
          .cat-header.fit-3 .brand-logo img{max-width:150px}
          .cat-header.fit-3 .brand-logo{margin-right:8px}
          .cat-header.fit-3 .cat-nav-cta{font-size:12.5px;padding:7px 6px}
          .cat-header.fit-3 .cat-nav-link{font-size:12.5px;padding:8px 3px;gap:2px}
          .cat-jump{position:sticky;top:var(--hdr-h,74px);z-index:9;background:#ece5d4;border-bottom:1.5px solid #2b2620;display:flex;gap:8px;overflow-x:auto;padding:10px 20px}
          .cat-jump a{flex-shrink:0;white-space:nowrap;background:#fff;border:1.5px solid #2b2620;border-radius:999px;font:700 12px 'Libre Franklin',sans-serif;padding:7px 13px;color:#2b2620}
          .cat-main{padding:16px 20px 0}
          .cat-section-head{display:flex;justify-content:space-between;align-items:baseline;gap:13px;border:0;padding:0;margin:30px 0 16px;scroll-margin-top:calc(var(--hdr-h,74px) + 56px)}
          .cat-section-head span:first-child{font:800 28px/1.05 'Libre Franklin',sans-serif;letter-spacing:-.03em;text-transform:none;color:#000}
          .cat-section-head .aside{font:600 15px 'Caveat',cursive;color:#a33d2e;letter-spacing:0;text-transform:none}
          .cat-h3{font:700 13.5px 'Libre Franklin',sans-serif;margin:18px 0 10px;scroll-margin-top:calc(var(--hdr-h,74px) + 56px)}
          .cat-prose{font:400 14px/1.6 'Libre Franklin',sans-serif;color:#443d34;margin:12px 0}
          .cat-prose p{margin:0 0 12px}
          .cat-prose ul,.cat-prose ol{margin:0 0 12px;padding-left:20px}
          .cat-prose img{max-width:100%}
          .cat-note{font:600 17px/1.5 'Caveat',cursive;color:#55504a;margin:14px 0}
          .cat-card{background:#fff;border:1.5px solid #2b2620;border-radius:var(--r-card);padding:16px 18px;margin:16px 0}
          .cat-card-title{font:700 12px 'Libre Franklin',sans-serif;letter-spacing:.1em;margin-bottom:10px}
          .cat-bullets{display:flex;flex-direction:column;gap:6px;font:400 13.5px/1.5 'Libre Franklin',sans-serif;color:#443d34;margin-top:12px}
          .cat-bullets.standalone{margin:14px 0}
          .cat-bullets .b{display:flex;gap:9px}
          .cat-bullets .arrow{font:700 16px 'Caveat',cursive;color:#a33d2e;flex-shrink:0}
          .cat-polaroid{position:relative;background:#fff;padding:10px 10px 34px;box-shadow:var(--sh-md);margin:18px 0}
          .cat-polaroid.tilt-l{transform:rotate(-1.5deg)}
          .cat-polaroid.tilt-r{transform:rotate(1.5deg)}
          .cat-polaroid img{width:100%;height:220px;object-fit:cover;display:block}
          .cat-polaroid .cap{position:absolute;bottom:6px;left:14px;font:600 17px 'Caveat',cursive;color:#55504a}
          .cat-stamp{width:92px;height:92px;border:2.5px solid #a33d2e;border-radius:50%;transform:rotate(6deg);display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(244,238,225,.96);box-shadow:var(--sh-md)}
          .cat-stamp .n{font:700 22px 'Caveat',cursive;color:#a33d2e;text-align:center;line-height:1}
          .cat-stamp .l{font:700 12px 'Libre Franklin',sans-serif;letter-spacing:.12em;color:#a33d2e;margin-top:3px}
          .cat-cta-banner{background:#2b2620;color:#f4eee1;border-radius:var(--r-section);padding:18px;margin:18px 0;display:flex;align-items:center;gap:14px}
          .cat-cta-banner .emoji{font-size:30px}
          .cat-cta-banner .t{flex:1;font:700 14px 'Libre Franklin',sans-serif}
          .cat-cta-banner .btn{flex-shrink:0;background:#a33d2e;color:#fff;font:700 13px 'Libre Franklin',sans-serif;padding:11px 16px;border-radius:var(--r-ctl)}
          a.cat-cta-big{display:block;margin:18px 0 24px;background:#a33d2e;color:#fff;text-align:center;font:700 16px 'Libre Franklin',sans-serif;padding:16px;border-radius:var(--r-ctl);box-shadow:3px 3px 0 #2b2620}
          .cat-video iframe{width:100%;aspect-ratio:16/9;border:1.5px solid #2b2620;border-radius:var(--r-card);margin:16px 0}
          .cat-faq details{border-bottom:1.5px solid #d8cdb6;padding:9px 0}
          .cat-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:10px;font:600 var(--fs-prose)/1.4 'Libre Franklin',sans-serif}
          .cat-faq summary::-webkit-details-marker{display:none}
          .cat-faq summary .plus{font:700 17px 'Caveat',cursive;color:#a33d2e}
          .cat-faq .a{font:400 var(--fs-prose)/1.6 'Libre Franklin',sans-serif;color:#443d34;padding-top:8px}
          .cat-faq .grp-label{font:700 12px 'Libre Franklin',sans-serif;letter-spacing:.1em;color:#8a7f6d;margin:14px 0 4px}
          /* --- reusable content blocks (partials/_content_extras, specs/content-blocks.md): the design's
                 accordion, ring-numbered steps, card slider, claims card, CTA banner — every collection --- */
          .cx-h3{font:800 21.5px/1.15 'Libre Franklin',sans-serif;letter-spacing:-.02em;margin:0;text-transform:none;border:0;color:#2b2620}
          .cx-head{display:flex;justify-content:space-between;align-items:baseline;gap:13px;margin-bottom:13px}
          .cx-head-rule{align-items:flex-end;border-bottom:1.5px solid #2b2620;padding-bottom:8.5px;margin-bottom:15px}
          .cx-note{display:inline-block;font:600 19px 'Caveat',cursive;color:#a33d2e;transform:rotate(-2.5deg) translateY(-2px);transform-origin:right center;white-space:nowrap}
          .cx-intro{font:400 15px/1.6 'Libre Franklin',sans-serif;color:#443d34;margin:0 0 15px}
          .cx-ring{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:38px;height:38px;margin-top:-7px;font:700 21px/1 'Caveat',cursive;color:#a33d2e;transform:rotate(-4deg);
            background: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") center/100% 100% no-repeat}
          .cx-ring span{transform:translate(-2px,-1px)}
          .cx-accordion{margin:19.5px 0}
          .cx-acc-rows{border-top:1.5px solid #d8cdb6}
          .cx-accordion details{border-bottom:1.5px solid #d8cdb6;padding:9.5px 0}
          .cx-accordion summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:11px;min-height:32px}
          .cx-accordion summary::-webkit-details-marker{display:none}
          .cx-acc-title{font:600 14.5px/1.4 'Libre Franklin',sans-serif;color:#2b2620}
          .cx-plus{display:inline-block;font:700 22px/1 'Caveat',cursive;color:#a33d2e;transition:transform .24s cubic-bezier(.23,1,.32,1)}
          .cx-accordion details[open]>summary .cx-plus{transform:rotate(45deg)}
          .cx-acc-body{font:400 14.5px/1.6 'Libre Franklin',sans-serif;color:#443d34;padding-top:8.5px}
          .cx-steps{margin:19.5px 0}
          .cx-steps-grid{display:flex;flex-direction:column;gap:13px}
          .cx-step{display:flex;gap:13px;border-bottom:1.5px solid #d8cdb6;padding-bottom:13px}
          .cx-step-title{margin:0 0 3px;font:700 15.5px 'Libre Franklin',sans-serif;color:#2b2620;text-transform:none;letter-spacing:0}
          .cx-step-text{font:400 14.5px/1.55 'Libre Franklin',sans-serif;color:#443d34}
          @media(min-width:640px){.cx-steps-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:32px;row-gap:13px}}
          .cx-slider{margin:19.5px 0}
          .cx-arrows{display:flex;gap:8px;flex-shrink:0}
          .cx-arrow{width:44px;height:44px;border-radius:50%;border:1.5px solid #2b2620;background:#fff;color:#2b2620;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:transform .16s cubic-bezier(.23,1,.32,1),background .15s}
          .cx-arrow:hover{background:#f4eee1}
          .cx-arrow:active{transform:scale(.94)}
          .cx-arrow[aria-disabled="true"]{cursor:not-allowed;opacity:.45}
          .cx-track{display:flex;gap:13px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 6px;padding:12px 6px 22px;margin:-12px -6px 0;overscroll-behavior-x:contain;scrollbar-width:none}
          .cx-track::-webkit-scrollbar{display:none}
          .cx-card{flex:0 0 auto;width:calc((100% - 26px) / 2.35);box-sizing:border-box;scroll-snap-align:start;background:#fff;border:1px solid #2b2620;border-radius:var(--r-section);padding:22px 20px 24px;box-shadow:3px 4px 0 #2b2620;transition:transform .2s cubic-bezier(.32,.72,0,1)}
          .cx-card.tilt-l{transform:rotate(-1.4deg)}.cx-card.tilt-r{transform:rotate(1.2deg)}
          @media(max-width:639px){.cx-card{width:84%}}
          .cx-card-label{font:600 12px 'Libre Franklin',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#a33d2e;text-align:center}
          .cx-card-title{font:700 19px/1.2 'Libre Franklin',sans-serif;letter-spacing:-.02em;text-align:center;margin:6px 0 12px;text-wrap:balance;color:#2b2620;text-transform:none}
          .cx-card-text{font:400 13.5px/1.5 'Libre Franklin',sans-serif;color:#443d34;text-align:center}
          .cx-dots{display:flex;justify-content:center;gap:6px;margin-top:6px}
          .cx-dots span{width:6px;height:6px;border-radius:3px;background:#d8cdb6;transition:width .24s cubic-bezier(.23,1,.32,1),background .24s}
          .cx-dots span.on{width:18px;background:#a33d2e}
          .cx-footnote{font:400 14px/1.5 'Libre Franklin',sans-serif;color:#6d6455;margin-top:13px}
          .cx-claims{background:#fff;border:1.5px solid #2b2620;border-radius:var(--r-section);padding:19.5px;margin:19.5px 0}
          .cx-claim-rows{display:flex;flex-direction:column;gap:13px;font:400 14.5px/1.55 'Libre Franklin',sans-serif;color:#443d34}
          .cx-claim{display:flex;gap:11px}
          .cx-claim-n{font:700 20px 'Caveat',cursive;color:#a33d2e;flex-shrink:0}
          .cx-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}
          .cx-heart{flex-shrink:0;transform:rotate(-8deg)}
          .cx-banner-text{flex:1;min-width:160px;font:700 16px 'Libre Franklin',sans-serif}
          .cx-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);transition:transform .16s cubic-bezier(.23,1,.32,1)}
          .cx-banner-btn:active{transform:scale(.97)}
          /* the label stays white whatever a page's own link rules say: on the category page a higher-specificity
             accent colour made it red on red (owner 2026-09-27, "button label not visible") */
          .cx-banner .cx-banner-btn,.cx-banner .cx-banner-btn:hover,.cx-banner .cx-banner-btn:visited{color:#fff!important;text-decoration:none!important}
          /* --- the shared author card (partials/_author_box) on every page = the production author box
                 (datingscout.com .author-box, owner 2026-09-28: "round image like production, text from there
                 as well, nowhere this photograph"): soft rounded sheet, 60px round portrait beside name +
                 italic title, the bio below. No polaroid, no caption, no per-template variants. --- */
          .author-card{margin:28px 0;padding:20px 28px 22px;background:#fcfbf7;border:1px solid #ece6d6;border-radius:var(--r-card);scroll-margin-top:16px}
          .author-card .head{display:flex;align-items:center;gap:16px}
          .author-card .avatar{flex-shrink:0;width:60px;height:60px;border-radius:50%;overflow:hidden}
          .author-card .avatar picture,.author-card .avatar img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
          .author-card .who{font:700 15px/1.3 'Libre Franklin',sans-serif;color:#2b2620}
          .author-card .who a{color:#2b2620;text-decoration:none}
          .author-card .role{font:italic 400 14px/1.4 'Libre Franklin',sans-serif;color:#6d6455;margin-top:3px}
          .author-card .bio{font:400 15px/1.7 'Libre Franklin',sans-serif;color:#443d34;margin-top:12px}
          .author-card .bio p{margin:0}
          @media(max-width:600px){.author-card{padding:16px 18px 18px}}
          /* --- [[press_logos]] "featured in the media" strip on content pages (hanna/press_logos): small logo chips,
                 never a full-width picture (owner 2026-09-28) --- */
          .press-logos{margin:6px 0 18px}
          .press-logos .chips{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0}
          .press-logos .chip{background:#fff;border:1px solid var(--paper-3);border-radius:4px;padding:7px 12px;display:inline-flex;align-items:center;justify-content:center}
          .press-logos .chip img{height:26px;width:auto;max-width:130px;object-fit:contain;display:block}
          @media(max-width:420px){.press-logos .chips{gap:8px}.press-logos .chip{padding:6px 9px}.press-logos .chip img{height:22px;max-width:110px}}
          /* hidden importance marker next to provider names (partials/_importance): invisible, out of flow, readable on select-all */
          .zz-imp{position:absolute;font:400 12px/1 monospace;color:transparent;pointer-events:none;user-select:text;-webkit-user-select:text}
          .zz-imp::selection{color:#2b2620;background:#b4d5fe}
          /* small images of the imported grid (articles/_blocks: layout width 25 / 33.3 % + left / right): a side figure at
             that width, the text wraps beside it, the next side figure starts a new row; the editorial-team portraits
             (owner 2026-10-04 "all the editor images are too big" on datingscout.nz/editorial-team). figure.* beats the
             templates' .art-shot.portrait cap. */
          .art-clear{clear:both}   /* emitted before every side figure: the row of the previous figure + its text ends */
          figure.art-shot.side{width:var(--side-w,25%);max-width:var(--side-w,25%);min-width:140px;margin:4px 0 12px}
          figure.art-shot.side-left{float:left;margin-right:24px}
          figure.art-shot.side-right{float:right;margin-left:24px}
          .art-section{display:flow-root}   /* a floated side figure never leaks into the next section */
          @media(max-width:639px){figure.art-shot.side{width:42%;max-width:42%;min-width:120px}figure.art-shot.side-left{margin-right:16px}figure.art-shot.side-right{margin-left:16px}}
          /* --- footer (owner 2026-10-20, design artifact "footer"): one paper band — the site logo big, three stat
                 tiles (years of reviews, services tested, readers), the four link columns, "Featured in" press chips,
                 the "Member of" chips + copyright row. The years and the tested count are hanna codes, never typed. --- */
          .cat-footer{margin-top:26px;background:var(--paper);border-top:1.5px solid #2b2620;padding:40px 36px 24px;color:#443d34}
          .cat-footer .foot-brand{display:flex;justify-content:center;margin-bottom:26px}
          .cat-footer .foot-brand .foot-logo img{height:64px;width:auto;max-width:min(360px,100%);object-fit:contain;display:block}
          .cat-footer .foot-brand .brand{font:800 32px 'Libre Franklin',sans-serif;color:#2b2620}
          .cat-footer .foot-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
          .cat-footer .foot-stat{background:#fff;border:1.5px solid #2b2620;border-radius:12px;padding:18px 20px;box-shadow:3px 3px 0 #2b2620}
          .cat-footer .foot-stat .n{font:900 36px/1 'Libre Franklin',sans-serif;letter-spacing:-.035em;color:#9b2226}
          .cat-footer .foot-stat .l{font:600 14px/1.3 'Libre Franklin',sans-serif;color:#443d34;margin-top:8px}
          .cat-footer .cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:28px;padding-top:24px;border-top:1px solid #d8cdb6}
          @media(max-width:700px){.cat-footer .cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
          @media(max-width:360px){.cat-footer .cols{grid-template-columns:1fr}}
          .cat-footer .col-name{font:800 14px/1.3 'Libre Franklin',sans-serif;color:#2b2620;margin:0 0 10px}
          .cat-footer .col{display:grid;gap:7px;align-content:start}
          .cat-footer .col-name{margin-bottom:3px}
          .cat-footer .col a{color:#443d34;font:500 14px/1.4 'Libre Franklin',sans-serif;text-decoration:none;overflow-wrap:anywhere}
          .cat-footer .col a:hover{color:#9b2226;opacity:1}
          .cat-footer .foot-row{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-top:22px}
          .cat-footer .foot-row + .foot-row{margin-top:12px}
          .cat-footer .foot-row .lbl,.cat-footer .copy .member .lbl{font:600 13px 'Libre Franklin',sans-serif;color:#8a7f6d}
          .cat-footer .foot-row .chips,.cat-footer .copy .member .chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
          .cat-footer .foot-chip{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:40px;padding:0 12px;background:#fff;border-radius:8px;border:1px solid #d8cdb6}
          .cat-footer .foot-chip img{height:24px;width:auto;max-width:130px;object-fit:contain;display:block}
          .cat-footer .press .foot-chip img{filter:grayscale(1)}
          .cat-footer .member .foot-chip{padding:0 12px 0 10px}
          .cat-footer .member .foot-chip img{height:22px}
          .cat-footer .member .foot-chip span{font:700 12.5px/1.15 'Libre Franklin',sans-serif;color:#2b2620;max-width:150px}
          .cat-footer .copy{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid #d8cdb6;font:500 12.5px/1.6 'Libre Franklin',sans-serif;color:#8a7f6d}
          .cat-footer .copy .member{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap}
          @media(max-width:639px){
            .cat-footer{padding:28px 16px 20px}
            .cat-footer .foot-stats{grid-template-columns:1fr;gap:10px}
            .cat-footer .foot-stat{display:flex;align-items:baseline;gap:12px;padding:14px 16px}
            .cat-footer .foot-stat .n{font-size:30px}
            .cat-footer .foot-stat .l{margin-top:0}
            .cat-footer .foot-brand{margin-bottom:20px}
            .cat-footer .foot-brand .foot-logo img{height:48px}
          }
          /* --- section headlines, template overrides folded into the one style (see h2 above): the review page's
                 section rows, the category page's section heads and list head, geo sections, the magazine grid head,
                 article sections. Specificity matches the templates' own rules; the layout styles come later, so they win. --- */
          .rev-page .review-section > h2,.cat-v2 .cat-section-head,.geo-section h2,.mag-gridhead,.cat-list-head{border:0;padding:0;margin:30px 0 16px}
          .rev-page .review-section > h2,.rev-page .cat-section-head span:first-child,.cat-v2 .cat-section-head h2,.cat-v2 .cat-section-head span:first-child,.geo-section h2,.mag-gridhead .l,.cat-list-head h2,.art-section > h2,.sub-siblings h2.h{font:800 28px/1.05 'Libre Franklin',sans-serif;letter-spacing:-.03em;text-transform:none;color:#000}
          .cat-v2 .cat-section-head h2,.mag-gridhead .l,.cat-list-head h2,.art-section > h2{margin:0;padding:0;border:0}
          .rev-page .review-section > h2 .aside,.cat-section-head .aside,.mag-gridhead .r{font:600 15px 'Caveat',cursive;color:#a33d2e;letter-spacing:0;text-transform:none}
          /* --- mobile / touch layer (phone-width audit 2026-09-25, specs/mobile.md) --- */
          body{overflow-wrap:break-word}
          @media(max-width:699px){
            /* the open header search lays over the whole bar instead of pushing the logo out of it */
            .cat-header .bar>.cat-search{position:static}
            .cat-header .bar>.cat-search form:focus-within,.cat-header .bar>.cat-search form.is-open{position:absolute;top:7px;right:12px;left:56px;width:auto;z-index:3;background:#fbf8f1}
            .cat-header .bar>.cat-search.is-open .cat-search-close{position:absolute;top:7px;left:12px;z-index:3}
            .cat-header.search-open .brand-logo,.cat-header.search-open .brand{visibility:hidden}
            .cat-header .bar>.cat-search .cat-search-drop{right:12px;left:12px;width:auto}
          }
          @media(max-width:639px){
            .cat-section-head,.cx-head{flex-wrap:wrap}
            .table-scroll{-webkit-overflow-scrolling:touch}
            /* imported prose tables scroll inside their column instead of widening the page */
            .user-content table,.cat-prose table,.art-prose table{display:block;max-width:100%;overflow-x:auto}
            .table-scroll table{font-size:13px}.table-scroll th,.table-scroll td{padding:7px 6px}
          }
          @media(pointer:coarse){
            /* 16px stops iOS Safari from zooming into a focused field */
            input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]),select,textarea,.cat-search input{font-size:16px}
            /* finger-sized rows for text links that are 15–20px tall on desktop */
            .cat-footer .col a{padding:7px 0}
            .cat-page .home-more{display:inline-flex;align-items:center;min-height:44px}
            .art-toc .links a,.toc-links a{display:block;padding:5px 0}
            .rev-page details.faq summary,.cx-accordion summary{min-height:44px;align-items:center}
          }