/* provider_reviews/_overview.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 }} */
    .rev-glance{--sheet-grad:radial-gradient(120% 100% at 0% 0%,#fff 0,rgba(255,255,255,0) 58%),linear-gradient(135deg,#fff 0%,#fcfaf6 55%,#f7f3ea 100%);background:var(--sheet-grad);border:1.5px solid #2b2620;border-radius:var(--r-card);padding:42px 22px 20px;margin:0 0 16px;   /* 18px + the 24px the floating menu bar lies over the card's top edge (owner 2026-10-03) */   /* inset under the full-width pill row, i.e. the sheet's 20px gutter on both sides (owner 2026-09-29 second reference: "make the overview box smaller"; before that full bleed) */   /* the floating menu bar sits 16px above the card (owner 2026-10-03, header look); until then the bar was the card's top row and the card had no top border (owner 2026-09-29, reference screenshot) */
        display:grid;grid-template-columns:minmax(0,1.618fr) minmax(0,1fr);grid-template-rows:auto 1fr;gap:22px;align-items:start;   /* golden ratio, the right column slightly wider than the former 250px (owner 2026-09-29) */scroll-margin-top:calc(var(--hdr-h,0px) + 68px)}
    .rev-glance .rg-left{min-width:0;display:flex;flex-direction:column;gap:12px}
    .rev-glance .rg-brand{display:flex;align-items:center;gap:18px;flex-wrap:nowrap}   /* never a second row (owner 2026-09-29 Zoosk: "if too wide … do not show screenshot do not make second row") */
    .rev-glance .rg-score{flex-shrink:0}
    .rev-glance .rg-logo{display:block;flex-shrink:0}
    .rev-glance .rg-logo img{height:60px;max-width:200px;width:auto;object-fit:contain;object-position:left;display:block}   /* 78px / 240px until 2026-10-03 (owner on DE LemonSwan: "make the logo smaller") */
    .rev-glance .rg-score{display:flex;flex-direction:column;gap:4px}
    .rev-glance .rg-stars{display:block;position:relative;width:150px;height:30px;overflow:hidden;
        background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d8cdb6' 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") repeat-x;background-size:30px 30px}
    .rev-glance .rg-stars>span{position:absolute;left:0;top:0;bottom:0;background: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") repeat-x;background-size:30px 30px}
    .rev-glance .rg-num{display:flex;align-items:baseline;gap:8px}
    .rev-glance .rg-num b{font:800 26px/1 'Libre Franklin';letter-spacing:-.03em;color:#2b2620}
    .rev-glance .rg-num .hand{font:600 19px 'Caveat',cursive;color:#a33d2e}
    /* head screenshot: a small tilted print in the free space right of the score, ink border, the lightbox glass on hover
       (owner 2026-09-29 "add small screenshot with zoom to the overview box … next to rating to that space") */
    .rev-glance a.rg-shot{margin-left:auto;flex:0 0 150px;width:150px;border:1.5px solid #2b2620;border-radius:var(--r-ctl);overflow:hidden;background:#fff;box-shadow:var(--sh-md);transform:rotate(-2deg);transition:transform .15s var(--mo-out,ease)}
    @media (hover:hover) and (pointer:fine){.rev-glance a.rg-shot:hover{transform:translateY(-2px)}}   /* straightens and lifts like the How it works prints (.hs-print:hover; owner 2026-10-10) */
    @media(prefers-reduced-motion:reduce){.rev-glance a.rg-shot{transition:none}}
    .rev-glance a.rg-shot.is-off{display:none}   /* a wide logo (Zoosk) leaves no room for the print: no shot, no second row — set by the script under the card */
    .rev-glance a.rg-shot img{display:block;width:100%;height:auto}
    .rev-glance a.rg-shot .zoom-glass::after{width:28px;height:28px}
    @media(max-width:639px){.rev-glance a.rg-shot{display:none}}   /* the phone card is tall enough; the shots live in the sections */
    .rev-glance a.rg-site{align-self:center;text-align:center;font:600 16px 'Libre Franklin';color:#a33d2e;text-decoration:underline;text-underline-offset:3px}
    .rev-glance .rg-redirect{align-self:center;text-align:center;font:13px/1.45 'Libre Franklin';color:#6b6257;margin-top:-6px}
    .rev-glance .rg-redirect a{color:#a33d2e;text-decoration:underline;text-underline-offset:2px}
    /* breadcrumb above the logo in the overview box (owner 2026-10-10 "above the logo in overview box"):
       Home › main category › this review, the trail of the JSON-LD BreadcrumbList */
    .rev-glance .rev-crumbs{grid-column:1;grid-row:1;font:600 13px/1.4 'Libre Franklin';color:#6b6257;margin:-4px 0 -12px}
    .rev-glance .rev-crumbs a{color:#6b6257;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}   /* underlined like proper links (owner 2026-10-10) */
    .rev-glance .rev-crumbs a:hover{color:#a33d2e}
    .rev-glance .rev-crumbs .sep{margin:0 7px;color:#a33d2e;font:700 16px/1 'Libre Franklin'}   /* › arrows, was / (owner 2026-10-10 "make it with a arrow now") */
    .rev-glance .rg-tag{font:700 15.5px/1.5 'Libre Franklin';color:#2b2620;text-wrap:pretty;padding:8px 0 0}
    /* the highlights as on the review (.rev-page ul.notes: no rule lines, the hand-drawn arrow), scoped to the box so the
       subpages, which have no .rev-page wrapper, render the same list */
    .rev-glance ul.notes{display:flex;flex-direction:column}
    .rev-glance ul.notes li{position:relative;padding:0 0 0 26px;border:none;font:400 15.5px/1.5 'Libre Franklin';color:#443d34;text-wrap:pretty}
    .rev-glance ul.notes.rg-hl li:before{content:"";position:absolute;left:4px;top:7px;width:18px;height:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 0 26 16' fill='none'%3E%3Cpath d='M1.5 8.6c4.2-.9 9.8-.4 17.6-.9M14.2 3.2c1.9 1.7 4.2 3.4 7.3 4.6-2.8 1.3-5.2 3.2-7.1 5.3' stroke='%23a33d2e' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain}
    .rev-glance ul.notes.rg-hl{margin:0;gap:6px}
    .rev-glance ul.notes.rg-hl li{font:400 14.5px/1.45 'Libre Franklin';color:#443d34}
    /* tagline, highlights, rule, intent dots: the column gap (12px) between each, a thin rule above the dots (owner 2026-09-29) */
    /* the calculator band at the box's foot (owner 2026-10-06): both grid columns, flush with the box edges, a rule above */
    .rev-glance .rg-near{grid-column:1/-1;margin:4px -22px -20px;padding:16px 22px 18px;border-top:1.5px solid #2b2620;border-radius:0 0 var(--r-card) var(--r-card);background:#faf7f0}
    /* the row (owner 2026-10-06): the question sized to its text, the city field a moderate fixed width right next to it, the
       Calculate button at its natural size, nothing stretched to fill a column ("do not make this full size label and search box
       size look weird with button size as well"; before: golden-ratio grid columns 1 : 1 : 0.618 with the button filling its column) */
    .rev-glance .rg-near .zz-city-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:0}
    .rev-glance .rg-near .zz-city-label{flex:0 1 auto;width:max-content;max-width:300px;white-space:normal;font:700 15px/1.3 'Libre Franklin';color:#2b2620;text-wrap:pretty}   /* 15px (owner 2026-10-10 "do not make the font size smaller"); the script below shrinks the box to its longest wrapped line so the field sits right after the text ("move the your city box closer to the text label") */
    .rev-glance .rg-near .zz-city-inputwrap{flex:0 1 380px;min-width:0}
    .rev-glance .rg-near .zz-city-calc{flex:0 0 auto}
    @media (max-width:760px){.rev-glance .rg-near .zz-city-label{flex-basis:100%;width:auto;min-width:0;max-width:none}.rev-glance .rg-near .zz-city-inputwrap{flex:1 1 180px}}   /* the question on its own line, the field takes the rest beside the button */
    .rev-glance .rg-near .zz-city-result{margin-top:12px}
    .rev-glance .rg-near .zz-city-result .n{font-size:26px}
    .rev-glance .rg-intents{display:flex;flex-wrap:nowrap;justify-content:space-between;gap:8px 16px;margin:0;padding-top:12px;border-top:1px solid #d8cdb6;font:400 15.5px 'Libre Franklin';color:#2b2620}   /* always one row of three (owner 2026-09-29) */
    .rev-glance .rg-intent{display:inline-flex;flex-direction:column;align-items:flex-start;gap:3px;white-space:nowrap}
    @media (max-width:600px){.rev-glance .rg-intents{flex-wrap:wrap}}   /* the top-three labels can be long (FR "Rencontres sans lendemain", PT "Encontros casuais"): on a phone the row may break rather than run out of the sheet (2026-10-04) */   /* label over its dots at every width: in one line the third pair ("Partnersuche ●●●●") ran out of the column on DE (owner 2026-10-03 "make Feste Beziehung 2 lines so there is more space"); until then label + dots side by side from 820px up */
    .rev-glance .rg-intent .dots{display:inline-flex;gap:2.5px}
    .rev-glance .rg-intent .dots i{display:block;width:10px;height:10px;border-radius:50%;border:1.5px solid #a33d2e;background:#fff}
    .rev-glance .rg-intent .dots i.on{background:#a33d2e}
    .rev-glance .rg-right{display:flex;flex-direction:column;gap:10px}
    .rev-glance .rg-left{grid-column:1;grid-row:2}
    .rev-glance .rg-right{grid-column:2;grid-row:1 / span 2;align-self:center}   /* centred in the full height beside the breadcrumb and the left column, not level with the logo (owner 2026-10-10) */
    .rev-glance a.cat-cta-big{margin:0;min-height:48px;display:flex;align-items:center;justify-content:center;padding:13px 15px;border-radius:var(--r-card);box-shadow:none;font-size:15px}
    /* card small text two sizes up (owner 2026-10-03 "font size too small": www link 13.5 → 16, last updated and fact keys 12.5 → 14.5, fact values 13.5 → 16, gender / age bars 11.5 / 11 → 13.5 / 13, bars 22 → 26px high) */
    .rev-glance .rg-upd{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:2px;font:500 14.5px 'Libre Franklin';color:#6d6455}
    .rev-glance .rg-upd svg{width:14px;height:14px;flex-shrink:0}
    .rev-glance .rg-facts{border:1.5px solid #2b2620;border-radius:var(--r-card);overflow:hidden;margin-top:6px}
    .rg-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid #d8cdb6;min-height:18px;background:#fff}
    .rg-row:first-child{border-top:0}
    .rg-row:nth-child(even){background:#faf7f0}
    .rg-row.wrap{flex-wrap:wrap;gap:0;padding:8px 12px 10px}
    .rg-row .k{font:500 14.5px 'Libre Franklin';color:#6d6455}
    .rg-row .v{font:700 16px 'Libre Franklin';text-align:right;color:#2b2620}
    .rg-row.wrap .k{flex:1 1 auto}.rg-row.wrap .v{flex:0 0 auto}
    .rg-gender{flex:1 1 100%;display:flex;height:26px;margin-top:6px;border:1.5px solid #2b2620;border-radius:2px;overflow:hidden;font:400 13.5px/1 'Libre Franklin';white-space:nowrap}
    .rg-gender .f{background:#6d6455;color:#fff;display:flex;align-items:center;justify-content:center;gap:4px;flex-shrink:0;min-width:0;overflow:hidden}
    .rg-gender .m{background:#2b2620;color:#f4eee1;flex:1;display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;overflow:hidden}
    .rg-agebar{flex:1 1 100%;display:flex;height:26px;margin-top:6px;border:1.5px solid #2b2620;border-radius:2px;overflow:hidden;font:400 13px/1 'Libre Franklin';white-space:nowrap}
    .rg-agebar .seg{min-width:0;display:flex;align-items:center;justify-content:center;border-left:1px solid #fff;overflow:hidden;color:#2b2620}
    .rg-agebar .seg:first-child{border-left:0}
    .rg-agebar .seg.l0{background:#f4eee1}.rg-agebar .seg.l1{background:#e8e2d4}.rg-agebar .seg.l2{background:#b5aa93}.rg-agebar .seg.l3{background:#6d6455;color:#f4eee1}
    .rg-agelabels{flex:1 1 100%;display:flex;height:20px;font:400 13px/1 'Libre Franklin';color:#6d6455;white-space:nowrap}
    .rg-agelabels:has(.lo){height:30px} /* a second label row is in use */
    .rg-agelabels .seg{min-width:0;position:relative}
    .rg-agelabels .seg i{position:absolute;left:50%;top:0;width:1px;height:5px;background:#6d6455}
    .rg-agelabels .seg span{position:absolute;left:50%;top:8px;transform:translateX(-50%);z-index:1;padding:0 2px;background:#fff} /* the row's ground, so a row-2 tick passes behind a row-1 label */
    .rg-row:nth-child(even) .rg-agelabels .seg span{background:#faf7f0}
    .rg-agelabels .seg.lo i{height:17px}
    .rg-agelabels .seg.lo span{top:20px}
    .rg-agelabels .seg.first span{left:0;transform:none}
    .rg-agelabels .seg.last span{left:auto;right:0;transform:none}
    .rg-agelabels .seg.lo.first + .seg span{transform:none} /* the row-1 label next to an edge-anchored row-2 one hangs right from its tick, so the two never stack in one column */
    .rg-agelabels:not(:has(i)){height:0} /* every narrow label went up: no empty row under the bar */
    /* the top side (owner 2026-10-03): a zero-height row between the key and the bar, its labels hang up into the key
       row's free space right of "Age", the tick runs down through the bar's 6px top margin onto the bar */
    .rg-agelabels.top{height:0;overflow:visible}
    .rg-agelabels.top .seg i{top:-7px;height:13px}
    .rg-agelabels.top .seg span{top:auto;bottom:7px}
    @media(max-width:639px){.rev-glance .rev-crumbs,.rev-glance .rg-left,.rev-glance .rg-right{grid-column:auto;grid-row:auto}.rev-glance{grid-template-columns:1fr;grid-template-rows:none;gap:16px;padding:38px 16px 16px}.rev-glance .rg-logo img{height:48px;max-width:150px}.rev-glance .rg-brand{justify-content:space-between}}