/* provider_reviews/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 }} */
    /* --- review page: restyle of the section vocabulary used by the partials --- */
    /* ---- review head (design artifact 2026-09-28, specs/reviews.md § Review head): centred H1 with the
       hand-written month on the tall emotion image, the teaser under it, the byline bar centred ---- */
    .rev-masthead{position:relative;padding:22px 21.5px 4px;display:flex;flex-direction:column;align-items:center;text-align:center}
    .rev-masthead .left{display:flex;flex-direction:column;align-items:center;gap:4px;max-width:100%;position:relative}
    .rev-masthead h1{display:inline-block;margin:0;padding:8.5px 15px;max-width:560px;font:800 39px/1.05 'Libre Franklin';letter-spacing:-.03em;text-wrap:balance;color:#2b2620;
        text-shadow:0 1px 1px rgba(244,238,225,.9),0 2px 6px rgba(244,238,225,.85),0 8px 24px rgba(244,238,225,.7)}
    .rev-masthead h1 .hand{font:600 1.013em 'Caveat',cursive;color:#a33d2e;white-space:nowrap;letter-spacing:0}
    /* teaser + byline without the paper glow (owner 2026-09-28: "on this text no shadow") */
    .rev-masthead .rev-sub{padding:4px 15px;max-width:600px;font:500 18px/1.5 'Libre Franklin';color:#2b2620;text-wrap:pretty}   /* 18px, was 15 (owner 2026-10-03 "whole text font size too small": teaser + byline) */
    .rev-masthead .rev-sub p{margin:0}
    .rev-masthead .byline{justify-content:center;margin-top:4px;padding:5.5px 13px;font-size:15.5px;color:#2b2620}   /* 15.5px, was 14 (owner 2026-10-03) */
    .rev-masthead .byline a.who,.rev-masthead .byline a{color:#2b2620;font-weight:600;text-decoration:underline;text-underline-offset:3px}
    @media(max-width:640px){.rev-masthead h1{font-size:30px;padding:6px 8px}.rev-masthead{padding:14px 16px 2px}.rev-masthead .rev-sub{font-size:16.5px}.rev-masthead .byline{font-size:14.5px}}
    /* clickout CTAs (partial _cta): the big block button is a.cat-cta-big in the layout; inline = a text
       link at the end of a section's prose, small = a compact pill */
    .rev-page .rev-cta-inline{margin:12px 0 4px;font:400 15px/1.4 'Libre Franklin'}   /* not bold (owner 2026-10-02: "Test Ashley Madison now → below 10 seconds make it not bold") */
    .rev-page .rev-cta-inline a{color:#a33d2e;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
    .rev-page .rev-cta-inline a:hover{color:#2b2620}
    .rev-page a.rev-cta-small{display:inline-flex;align-items:center;min-height:36px;background:#a33d2e;color:#fff;font:700 13px 'Libre Franklin';padding:0 14px;border-radius:999px;white-space:nowrap;box-shadow:none}
    .rev-page a.rev-cta-small:hover{background:#8a3226;color:#fff;opacity:1}

    /* ---- at a glance (design 2026-09-28): white card, logo + stars + score word left, CTA + facts box right ---- */
    .rev-page{--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%)}   /* soft sheet gradient = the index cards' (owner 2026-09-29 "interesting gradient background here as well but soft"): white top-left highlight over a faint white → cream diagonal; the bordered fact table and the bubble tail stay #fff, which the highlight zone matches */
    .rev-glance{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}
    .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}}

    /* ---- the open sections of the head (10 seconds, who for, pros & cons): no card, the design's bullets ---- */
    /* the jump pills (.cat-jump.prov-nav) are styled in partials/_provider_nav, the one provider menu of every provider page */
    .rev-page .rev-open ul.notes{gap:8.5px;margin:13px 0 0}
    .rev-page .rev-open ul.notes li,.rev-page .rev-open ul.notes li.good,.rev-page .rev-open ul.notes li.bad{padding-left:30px;font:400 15.5px/1.6 'Libre Franklin';color:#443d34}
    .rev-page .rev-open ul.notes li:before,.rev-page ul.notes.rg-hl li:before{content:"";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}
    /* ul.notes.rg-hl: the selector must outrank `.rev-page ul.notes li:before` (which draws a Caveat "→" text glyph), else
       that glyph sits on top of the SVG arrow and every highlight shows two arrows (owner 2026-09-29 "NO DOUBLE ARROWS") */
    .rev-page ul.notes.rg-hl li{padding-left:28px}
    .rev-page ul.notes.rg-hl li:before{top:5px}
    /* two separate tinted cards with a gap, hairline border in the same hue, roomy padding, dark check / cross marks
       (owner 2026-10-04, reference screenshot of the old datingscout review: "make these boxes look like this") */
    .rev-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin-top:16px}
    .rev-split>div{padding:30px 32px 28px;border-radius:14px;border:1.5px solid}
    .rev-split .yes{background:#eff2e8;border-color:#cfd9c1}
    .rev-split .no{background:#f9e9e2;border-color:#ebcbbf}
    .rev-split .rs-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
    .rev-page .rev-split ul.notes{margin:0;gap:14px}
    .rev-page .rev-split ul.notes li{padding-left:32px;font:400 15.5px/1.55 'Libre Franklin';color:#2b2620}
    .rev-page .rev-split ul.notes li b,.rev-page .rev-split ul.notes li strong{font-weight:700;color:#1f1b17}
    .rev-page .rev-split ul.notes li:before{content:"";top:4px;width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 10.5l4.5 4.5L17 5.5' fill='none' stroke='%232b2620' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain}
    .rev-page .rev-split .no ul.notes li:before{width:14px;height:14px;top:5px;left:1px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 4l12 12M16 4L4 16' fill='none' stroke='%232b2620' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E")}
    .rev-page .rev-split ul.notes.good li:before,.rev-page .rev-split ul.notes.bad li:before{color:transparent}
    @media(max-width:639px){.rev-split{gap:14px}.rev-split>div{padding:20px 18px 18px}}
    .rev-page .rev-open .cat-cta-big{margin-top:18px}
    .rev-page #costs > a.cat-cta-big{width:max-content;max-width:100%;margin:22px auto 10px;padding:12px 28px;font-size:15px}
    .rev-page #how-it-works ~ * a.cat-cta-big{width:max-content;max-width:100%;margin:18px auto 12px;padding:11px 26px;font-size:14.5px;display:block}   /* every big block button below How it works (the "Is X right for me?" quiz buttons after sign up / cancel / the result, the clickouts in those slots) is compact and centred (owner 2026-10-06 "make these buttons smaller on the page anything below How does Tinder work?") */   /* the costs section's closing CTA: compact and centred, not a full-width block (owner 2026-10-03 "make the try zoosk button smaller and centered") */
    .rev-page .rev-area{margin:19.5px 0 0;border-radius:var(--r-card);padding:20px 22px 18px}
    .rev-page .rev-area .cat-section-head{margin-bottom:0}

    .rev-page .review-section{margin-bottom:8px}
    .rev-page .review-section > h2{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1.5px solid #2b2620;padding-bottom:8px;margin:26px 0 14px;font:700 13px 'Libre Franklin';letter-spacing:.12em;text-transform:uppercase;color:#2b2620;scroll-margin-top:calc(var(--hdr-h,0px) + 68px)}
    .rev-page .review-sub{scroll-margin-top:calc(var(--hdr-h,0px) + 68px)}
    .rev-page .review-sub h3,.rev-page h3{font:700 14.5px 'Libre Franklin';margin:20px 0 10px;color:#2b2620}
    /* the section's own rating under its headline (sign up, contacting, profiles, app, field test; owner 2026-10-06 "these sub ratings need
       to be bigger and integrated below the headline"): 22px stars in the accent, the score bold beside them */
    .rev-page .sec-score{display:flex;align-items:center;gap:10px;margin:-4px 0 16px;font:700 18px/1 'Libre Franklin';color:#2b2620}
    .rev-page .sec-score .stars{font-size:22px;line-height:1;letter-spacing:1px}
    .rev-page .sec-score strong{font-size:18px}
    .rev-page .sec-score .score-max{font-weight:500;color:#7a7268;font-size:14px}
    .rev-page h4{font:700 12px 'Libre Franklin';letter-spacing:.08em;text-transform:uppercase;color:#6d6455;margin:16px 0 8px}
    .rev-page .user-content{font:400 var(--fs-prose)/1.65 'Libre Franklin';color:#443d34;margin:12px 0;max-width:70ch}   /* owner 2026-10-02: bigger type; impeccable Read mode: prose at a 70 character measure, pretty wrapping */
    .rev-page .user-content p,.rev-page .user-content li{text-wrap:pretty}
    .rev-page .user-content p{margin:0 0 12px}
    .rev-page .user-content ul,.rev-page .user-content ol{margin:0 0 12px;padding-left:20px}
    /* long stand-alone texts (Members, Costs, Sign up, How it works, App, Design & usability, Specials, Why trust us; over 600 characters of rendered text) drop the
       70ch measure and run in two columns over the full sheet (owner 2026-10-13 "make these text limitations full width
       where we have them now for long text"); headings span both, lists and images never split; one column on phones */
    .rev-page .user-content.uc-cols{max-width:none;columns:2;column-gap:40px}
    .rev-page .user-content.uc-cols :is(h2,h3,h4,h5){column-span:all}
    .rev-page .user-content.uc-cols :is(li,figure,img,table,blockquote){break-inside:avoid}
    .rev-page .user-content.uc-cols p{orphans:3;widows:3}
    .rev-page .user-content.uc-cols > :first-child{margin-top:0}
    @media(max-width:760px){.rev-page .user-content.uc-cols{columns:1}}
    .rev-page .lead{font:400 15px/1.65 'Libre Franklin';color:#443d34;margin-top:4px}
    .rev-page .small{font:400 12.5px/1.5 'Libre Franklin'}
    .rev-page .muted{color:#8a7f6d}

    /* note lists -> caveat markers */
    .rev-page ul.notes{list-style:none;padding:0;margin:10px 0;display:flex;flex-direction:column;gap:8px}
    .rev-page 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-page ul.notes li:before{content:"→";position:absolute;left:0;top:-2px;font:700 16px 'Caveat',cursive;color:#a33d2e}
    .rev-page ul.notes.good li:before,.rev-page ul.notes li.good:before{content:"✓";color:#3e7a4e}
    .rev-page ul.notes.bad li:before,.rev-page ul.notes li.bad:before{content:"✗";color:#a33d2e}

    .rev-page .cols2{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
    @media(max-width:620px){.rev-page .cols2{grid-template-columns:1fr}}
    .rev-page .blocklist h4{margin-top:10px}
    .rev-page .card{background:var(--sheet-grad);border:1.5px solid #2b2620;border-radius:var(--r-card);padding:16px 18px;margin:14px 0;box-shadow:none}
    .rev-page .chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
    /* ---- Sign up card (owner 2026-10-08 "we don't need a screenshot here restructure the whole section so it looks nice"):
       one framed card on the sheet, no screenshot: the fact strip (sign up with, where, minimum age, browse without an account,
       couples / business when yes; tiles separated by dashed rules, the first of each row and the first row lose theirs under
       the card's clipped edge) over the required / optional / verification columns (dashed rule on top); the hand-written
       texts and the CTA below. ---- */
    .rev-page .su-card{background:var(--sheet-grad);border:1.5px solid #2b2620;border-radius:var(--r-card);margin:0 0 16px;overflow:hidden}
    .rev-page .su-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));margin:-1.5px 0 0 -1.5px}
    .rev-page .su-fact{padding:16px 18px 15px;border-top:1.5px dashed #b5aa93;border-left:1.5px dashed #b5aa93;min-width:0}
    .rev-page .su-fact .k{font:800 17px 'Libre Franklin';letter-spacing:-.01em;color:#2b2620;margin:0 0 8px}   /* like the plan heading of the price receipt (.pc-h "Tinder Plus"; owner 2026-10-09 "make this like tinder plus packet headline"); before: 12px uppercase grey */
    .rev-page .su-fact .v{font:600 15px/1.4 'Libre Franklin';color:#2b2620}
    .rev-page .su-fact .v.big{font:800 26px/1 'Libre Franklin';letter-spacing:-.03em}
    .rev-page .su-fact .v.chips{margin:0;gap:6px}
    .rev-page .su-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 24px;padding:2px 18px 16px;border-top:1.5px dashed #b5aa93}
    .rev-page .su-cols:first-child{border-top:0}
    .rev-page .su-col{min-width:0}
    .rev-page .su-col h4{margin:14px 0 6px}
    .rev-page .su-col ul.notes{margin:0;gap:6px}
    .rev-page .su-col ul.notes li{font-size:15px}
    .rev-page .su-tag{display:inline-block;vertical-align:1px;margin-left:5px;font:700 12px/1 'Libre Franklin';letter-spacing:.05em;text-transform:uppercase;padding:3px 6px;border-radius:999px;border:1.5px solid #a33d2e;color:#a33d2e;white-space:nowrap}
    .rev-page .su-tag.opt{border-color:#8a7f6d;color:#6d6455}
    .rev-page .su-none{margin:6px 0 0;font:400 15px/1.5 'Libre Franklin';color:#443d34}
    .rev-page .rev-signup .su-card + .user-content,.rev-page .rev-signup .user-content + .user-content{margin-top:14px}
    @media(max-width:640px){
        .rev-page .su-facts{grid-template-columns:1fr 1fr}
        .rev-page .su-fact{padding:12px 14px 11px}
        .rev-page .su-fact .v.big{font-size:22px}
        .rev-page .su-cols{padding:0 14px 12px;gap:0 16px}
    }
    .rev-page .chip{background:#f4eee1;border:1px solid #d8cdb6;border-radius:999px;font:600 12px 'Libre Franklin';padding:6px 11px;color:#443d34}

    /* stars + stamp values */
    .rev-page .stars{color:#a33d2e;letter-spacing:2px;font-size:14px;white-space:nowrap}
    .rev-page .stars .off{color:#d8cdb6}
    .rev-page .score-max{font:600 12px 'Libre Franklin';color:#8a7f6d}

    /* quick facts / stat tiles */
    .rev-page .quickfacts{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
    .rev-page .grid,.rev-page .qf-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;flex:1}
    .rev-page .stat{text-align:center;border:1.5px dashed #b5aa93;border-radius:var(--r-card);padding:10px 6px;background:none}
    .rev-page .stat .n{font:800 19px 'Libre Franklin';color:#2b2620}
    .rev-page .stat .l{font:600 12px 'Libre Franklin';letter-spacing:.06em;text-transform:uppercase;color:#8a7f6d}
    .rev-page .stat-est{border-style:solid;border-color:#2b2620}
    .rev-page .stat-note{font:400 12px/1.5 'Libre Franklin';color:#8a7f6d;margin:8px 0 0}
    .rev-page .stat-intro{font:400 var(--fs-prose)/1.65 'Libre Franklin';color:#443d34;margin:-2px 0 14px;max-width:70ch;text-wrap:pretty}   /* the estimate's story under the "Who is signed up" headline (owner 2026-10-03); body size like the prose, not small print (owner 2026-10-13) */
    .rev-page .stat-foot{font:400 12.5px/1.5 'Libre Franklin';color:#8a7f6d;margin:16px 0 0}   /* "Last data update: <month>" under the band / the region map (owner 2026-10-06) */

    /* rating bars (design: striped accent) */
    /* ---- why can you trust us? (back on the reviews 2026-10-06): the framed box of the about page ---- */
    .rev-page .rev-trust{border:1.5px solid #2b2620;border-radius:var(--r-card);padding:16px 20px 6px;margin-top:34px;background:#fff}
    .rev-page .review-section.rev-trust > h2{border-bottom:0;padding-bottom:0;margin:0 0 8px}
    .rev-page .rev-trust .user-content{font:400 15px/1.65 'Libre Franklin',sans-serif;color:#443d34}
    .rev-page .rev-trust .user-content p{margin:0 0 12px}
    .rev-page .rev-trust .user-content ul,.rev-page .rev-trust .user-content ol{margin:0 0 12px;padding-left:20px}
    .rev-page .rev-trust .user-content li{margin:0 0 4px}
    .rev-page .rev-trust .user-content a{color:#a33d2e;text-decoration:underline;text-underline-offset:3px}
    /* ---- special features: tabbed card (design 2026-10-08, owner "implement on reviews … the special features like this"):
       one tab per group with its count, left the feature names with a free / paid dot, right the selected feature's text.
       Without JS (and for crawlers' first pass) the markup is the open list of 2026-10-06: group H3s, every item visible;
       the inline script adds .js and turns it into tabs + list + detail. ---- */
    .rev-page .feat-tabs{margin-top:14px}
    .rev-page .feat-tabbar{display:none}
    .rev-page .feat-ph{display:flex;align-items:baseline;gap:8px;margin:22px 0 6px;padding-bottom:6px;border-bottom:1.5px solid #2b2620;font:800 17px/1.2 'Libre Franklin';letter-spacing:-.02em;color:#2b2620}
    .rev-page .feat-ph .n{font:600 14px 'Caveat',cursive;color:#a33d2e}
    .rev-page .feat-side{display:none}
    .rev-page .feat{padding:10px 0;border-bottom:1px solid #e3dac8;min-width:0}
    .rev-page .feat h4{margin:0 0 4px;font:700 15.5px/1.35 'Libre Franklin';letter-spacing:0;text-transform:none;color:#2b2620;display:flex;align-items:center;gap:10px;flex-wrap:wrap}   /* the page's h4 rule is a small-caps label; the feature name is a normal headline (owner 2026-10-08 "dont make that full caps") */
    .rev-page .feat-cost{display:inline-block;font:700 12px/1 'Libre Franklin';letter-spacing:.04em;text-transform:uppercase;padding:3px 7px;border-radius:999px;border:1.5px solid;white-space:nowrap}
    .rev-page .feat-cost.free{color:#2f7a3a;border-color:#2f7a3a}
    .rev-page .feat-cost.paid{color:#a33d2e;border-color:#a33d2e}
    .rev-page .feat-p{font:400 14.5px/1.65 'Libre Franklin';color:#443d34}
    .rev-page .feat-p p{margin:0 0 6px}
    .rev-page .feat-p p:last-child{margin-bottom:0}
    /* with JS: tabs attached to a framed white card, 230px list + detail */
    .rev-page .js .feat-tabbar{display:flex;gap:3px;margin:18px 0 0;padding:0 0 1.5px 10px;overflow-x:auto;scrollbar-width:none}   /* padding-bottom keeps the tabs' overlap over the card border visible inside the scroll box */
    .rev-page .js .feat-tabbar::-webkit-scrollbar{display:none}
    .rev-page .feat-tab{cursor:pointer;flex-shrink:0;margin:0;padding:8px 11px;font:700 12.5px/1.2 'Libre Franklin';border:1.5px solid #2b2620;border-radius:4px 4px 0 0;background:#ece5d4;color:#6d6455;position:relative;z-index:1;white-space:nowrap;display:inline-flex;align-items:baseline;gap:5px;-webkit-appearance:none;appearance:none}
    .rev-page .feat-tab:hover{color:#2b2620}
    .rev-page .feat-tab.on{background:#fff;color:#2b2620;border-bottom-color:#fff;z-index:2}
    .rev-page .js .feat-panel{display:none;background:#fff;border:1.5px solid #2b2620;border-radius:0 4px 4px 4px;padding:20px 22px;grid-template-columns:230px minmax(0,1fr);gap:22px;align-items:start;min-height:300px;margin-top:-3px}
    .rev-page .js .feat-panel.on{display:grid}
    .rev-page .js .feat-panel:first-child{border-radius:4px;margin-top:0}   /* no tab row: the review has no groups yet */
    .rev-page .js .feat-ph{display:none}
    .rev-page .js .feat-side{display:flex;flex-direction:column;gap:2px;border-right:1.5px dashed #b5aa93;padding-right:16px;min-width:0}
    .rev-page .feat-legend{display:flex;gap:12px;padding:0 8px 8px;font:500 12px 'Libre Franklin';color:#6d6455}
    .rev-page .feat-legend span{display:inline-flex;align-items:center;gap:5px}
    .rev-page .feat-legend i,.rev-page .feat-row .dot{display:inline-block;width:8px;height:8px;border-radius:50%;box-sizing:border-box;flex-shrink:0;border:1.5px solid #2f7a3a}
    .rev-page .feat-legend i.paid,.rev-page .feat-row .dot.paid{background:#a33d2e;border-color:#a33d2e}
    .rev-page .feat-row{cursor:pointer;display:flex;align-items:center;gap:8px;width:100%;margin:0;padding:7px 10px;border:0;border-radius:3px;background:transparent;font:500 13.5px/1.3 'Libre Franklin';color:#2b2620;text-align:left;-webkit-appearance:none;appearance:none}
    .rev-page .feat-row .t{flex:1;min-width:0}
    .rev-page .feat-row:hover{background:#f4eee1}
    .rev-page .feat-row.on{font-weight:700;background:#2b2620;color:#f4eee1}
    .rev-page .feat-row.on:hover{background:#2b2620}
    .rev-page .js .feat{display:none;padding:0;border:0}
    .rev-page .js .feat.on{display:block}
    .rev-page .js .feat h4{margin:0;font:800 20px/1.15 'Libre Franklin';letter-spacing:-.02em;gap:12px}
    .rev-page .js .feat-p{margin-top:10px}
    @media (max-width:640px){
        .rev-page .js .feat-panel{grid-template-columns:1fr;gap:14px;padding:16px 14px;min-height:0}
        .rev-page .js .feat-side{flex-direction:row;flex-wrap:wrap;gap:6px;border-right:0;border-bottom:1.5px dashed #b5aa93;padding:0 0 14px}   /* the list as a chip cloud, the text right under it */
        .rev-page .feat-legend{width:100%;padding:0 0 4px}
        .rev-page .feat-row{width:auto;padding:6px 10px;border:1px solid #b5aa93;border-radius:999px;font-size:13px}
        .rev-page .feat-row.on{border-color:#2b2620}
        .rev-page .js .feat h4{font-size:18px}
    }
    /* ---- final results card (design 2026-10-06): stars + verdict + bullets left, CTA + tested + dotted score table right ---- */
    .rev-page .rev-final .rf-card{background:var(--sheet-grad);border:1.5px solid #2b2620;border-radius:var(--r-card);padding:20px 22px 18px;display:grid;grid-template-columns:minmax(0,1.618fr) minmax(0,1fr);gap:26px;align-items:start}
    .rev-page .rf-left{min-width:0;display:flex;flex-direction:column;gap:10px}
    .rev-page .rf-score{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}   /* stars, score and word in one line (owner 2026-10-10) */
    .rev-page .rf-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-page .rf-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-page .rf-num{display:flex;align-items:baseline;gap:8px}
    .rev-page .rf-num b{font:800 28px/1 'Libre Franklin';letter-spacing:-.04em;color:#2b2620}
    .rev-page .rf-num .hand{font:600 19px 'Caveat',cursive;color:#a33d2e}
    .rev-page .rf-verdict{margin:2px 0 0;font:700 15.5px/1.45 'Libre Franklin';letter-spacing:-.01em;color:#2b2620;max-width:60ch}
    .rev-page ul.notes.rf-points{margin:0;display:flex;flex-direction:column;gap:5px}
    .rev-page ul.notes.rf-points li{border:0;padding:0 0 0 26px;font:400 14px/1.5 'Libre Franklin';color:#443d34}
    .rev-page ul.notes.rf-points li:before{content:"→";left:0;top:0;font:700 16px/1.5 'Libre Franklin';color:#a33d2e}
    .rev-page .rf-right{min-width:0;display:flex;flex-direction:column;gap:8px}
    /* #scores in the selector: the "#how-it-works ~ * a.cat-cta-big" rule (max-content, auto side margins) outranked this one, so
       the button sat 19px narrower than the table (owner 2026-10-09 "arrange these elements optically nicely") */
    .rev-page #scores .rf-right a.cat-cta-big{margin:0;width:100%;max-width:none;display:block;text-align:center;padding:12px 18px;font-size:14.5px}
    .rev-page .rf-tested{display:flex;align-items:center;justify-content:center;gap:5px;font:500 13px 'Libre Franklin';color:#6d6455}
    .rev-page .rf-tested svg{width:13px;height:13px;flex-shrink:0}
    .rev-page .rf-table{border:1.5px solid #2b2620;border-radius:8px;overflow:hidden;background:#fff}
    .rev-page .rf-row{display:flex;align-items:center;gap:10px;padding:7px 12px;border-top:1px solid #e3dac8;font:400 13.5px 'Libre Franklin';color:#443d34}
    .rev-page .rf-row:first-child{border-top:0}
    .rev-page .rf-row:nth-child(even){background:#fcfaf6}
    .rev-page .rf-row .k{flex:1;min-width:0}
    .rev-page .rf-row .dots{display:flex;gap:4px;flex-shrink:0}
    .rev-page .rf-row .dots i{display:block;width:12px;height:12px;border-radius:50%;border:1.5px solid #a33d2e;box-sizing:border-box;background:#fff}
    .rev-page .rf-row .dots i.full{background:#a33d2e}
    .rev-page .rf-row .dots i.half{background:linear-gradient(90deg,#a33d2e 50%,#fff 50%)}
    .rev-page .rf-row .v{font:800 13.5px 'Libre Franklin';color:#2b2620;min-width:28px;text-align:right;font-variant-numeric:tabular-nums}
    .rev-page .rf-row.rf-total{background:#2b2620;color:#f4eee1;border-top:0;font-weight:800;padding:9px 12px}
    .rev-page .rf-row.rf-total .k{color:#f4eee1}
    .rev-page .rf-row.rf-total .v{color:#f4eee1;font-size:17px}
    .rev-page .rf-row.rf-total .v small{font:600 12px 'Libre Franklin';color:#b5aa93;margin-left:4px}
    @media (max-width:760px){.rev-page .rev-final .rf-card{grid-template-columns:1fr;gap:16px;padding:16px 14px}}

    /* members band (owner 2026-10-04, "Members" design artifact): the hand-written prose under the headline, then two
       ruled rows between 1.5px ink rules, cells divided by a hairline: row 1 the key numbers (estimate + trend pill, the
       activity count, the claimed members), row 2 the six-month trend, women / men, the age columns. Phones stack the
       cells. The "Where is X most popular" map follows as part of the content, no card (owner: "integrate into content").
       Only the key-numbers row is styled here: the band frame, the cells and the charts row (with hover and reveal)
       live in provider_reviews/_members_charts, shared with the statistics page since 2026-10-12. */
    .rev-page .mb-prose{max-width:66ch;margin:12px 0 0}
    .rev-page .mb-prose p{font:400 15.5px/1.6 'Libre Franklin';color:#443d34}
    .rev-page .mb-nums .mb-cell{justify-content:flex-start}
    .rev-page .mb-big{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap}
    .rev-page .mb-big .n{font:800 34px/1 'Libre Franklin';letter-spacing:-.035em;white-space:nowrap;font-variant-numeric:tabular-nums}
    .rev-page .mb-l{font:400 14px/1.4 'Libre Franklin';color:#443d34;margin-top:8px}
    .rev-page .mb-pill{display:inline-flex;align-items:center;gap:4px;border-radius:4px;padding:0 8px 0 6px;font:700 12.5px 'Libre Franklin';white-space:nowrap;align-self:stretch;flex-shrink:0;background:#ece5d4;color:#6d6455;font-variant-numeric:tabular-nums}
    .rev-page .mb-pill.up{background:#e2f0df;color:#2f7a3a}
    .rev-page .mb-pill.down{background:#f7dcd8;color:#a33d2e}
    .rev-page .mb-band + ul.notes{margin-top:18px}
    @media(max-width:620px){
        .rev-page .mb-big .n{font-size:30px}
    }
    /* the regional map right after the members content: a sub-heading instead of a card (owner 2026-10-04); its styles
       travel with the shared section (provider_reviews/_region_section) since 2026-10-13 */

    /* craft pass 2026-10-02 (impeccable craft floor + taste-skill redesign audit, applied from the temporary variant):
       balanced headings, more air above a section heading than below, tabular figures, hover / pressed / focus states,
       themed selection and caret, smooth anchors, reduced motion honoured */
    .rev-page h1,.rev-page h2,.rev-page h3,.rev-page .pc-h,.rev-page .pd-name{text-wrap:balance}
    .rev-page .review-section > h2{margin-top:44px;margin-bottom:12px;letter-spacing:-.03em}

    .rev-page{--rv-col:640px;--fs-prose:15.5px}   /* --fs-prose: the reading size of the page; the FAQ (layout .cat-faq) and .user-content share it (owner 2026-10-04 "faq font size does not match rest of the website") */
    /* "In 10 seconds" (owner 2026-10-13 "make 10s on review 2 columns not centered small"): the bullets run in two columns
       over the full sheet width, left aligned, a smaller size than the prose; one column on phones. Flowing columns, not a
       grid (owner 2026-10-19 "why is here such a big space"): grid rows took the height of the taller neighbour */
    .rev-page #ten-seconds ul.notes{display:block;columns:2;column-gap:32px}
    .rev-page #ten-seconds ul.notes li{font-size:14px;line-height:1.5;break-inside:avoid;margin:0 0 8.5px}
    .rev-page #ten-seconds ul.notes li:before{top:5px}
    @media(max-width:639px){.rev-page #ten-seconds ul.notes{columns:1}}
    .rev-page .pc-card .pc-row,.rev-page .pc-card .tot,.rev-page .pc-card .ut,.rev-page .pd-score b,.rev-page .factable td{font-variant-numeric:tabular-nums}
    .rev-page a.cat-cta-big,.rev-page .pd-cta,.rev-page .rev-cta-small,.rev-page .cta-inline,.rev-page .zz-city-calc{transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}
    @media(hover:hover){.rev-page a.cat-cta-big:hover,.rev-page .pd-cta:hover,.rev-page .rev-cta-small:hover,.rev-page .zz-city-calc:hover{transform:translateY(-1px);box-shadow:0 6px 14px -6px rgba(163,61,46,.45)}}
    .rev-page a.cat-cta-big:active,.rev-page .pd-cta:active,.rev-page .rev-cta-small:active,.rev-page .zz-city-calc:active{transform:translateY(1px) scale(.985);box-shadow:none}
    .rev-page a:focus-visible,.rev-page button:focus-visible,.rev-page input:focus-visible,.rev-page summary:focus-visible{outline:2px solid #a33d2e;outline-offset:3px;border-radius:var(--r-ctl)}
    .rev-page ::selection{background:#a33d2e;color:#fff}
    .rev-page input,.rev-page textarea{caret-color:#a33d2e}
    .rev-page a{text-underline-offset:3px;text-decoration-thickness:1px}
    html{scroll-behavior:smooth}
    @media(prefers-reduced-motion:reduce){.rev-page *,.rev-page *::before,.rev-page *::after{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

    /* costs: receipt card */
    .rev-page .pricetable-wrap{display:flex;justify-content:center;margin:16px 0}
    .rev-page table.pricetable{width:320px;max-width:100%;background:#fffdf6;box-shadow:var(--sh-md);transform:rotate(1deg);padding:18px;border-collapse:separate;border-spacing:0;font-family:'IBM Plex Mono',monospace}
    .rev-page table.pricetable th{font:700 12px 'Libre Franklin';letter-spacing:.08em;color:#a33d2e;text-transform:uppercase;text-align:left;border-bottom:1.5px dashed #b5aa93;padding:10px 10px 4px}
    .rev-page table.pricetable.has-notice{width:440px}
    .rev-page table.pricetable th{white-space:nowrap}
    .rev-page table.pricetable td{font:400 12px 'IBM Plex Mono',monospace;color:#443d34;padding:3px 10px;border:none}
    .rev-page table.pricetable td.num{white-space:nowrap}
    .rev-page table.pricetable tr.plan-note td{font:400 12px/1.45 'IBM Plex Mono',monospace;color:#8a7f6d;padding:0 10px 9px 10px;white-space:normal}
    /* phones: the receipt fills the column, no tilt, cells tight enough for four columns; five scroll inside .table-scroll */
    @media(max-width:560px){.rev-page table.pricetable,.rev-page table.pricetable.has-notice{width:100%;transform:none;padding:10px 4px}
      .rev-page table.pricetable th{padding:8px 6px 4px;font-size:12px;letter-spacing:.04em}
      .rev-page table.pricetable td{padding:3px 6px}.rev-page table.pricetable td.plan{min-width:84px}.rev-page table.pricetable td.num{white-space:normal}
      .rev-page table.pricetable tr.plan-note td{padding:0 6px 8px}}
    .rev-page .verdict{background:var(--sheet-grad);border:1.5px solid #2b2620;border-radius:var(--r-card);padding:14px 18px;font:400 14px/1.5 'Libre Franklin'}
    .rev-page .verdict-free{border-color:#3e7a4e}
    .rev-page .factable td,.rev-page .factable th{font:400 13px/1.5 'Libre Franklin';padding:6px 10px;border-bottom:1.5px solid #d8cdb6;text-align:left}
    .rev-page .table-scroll{overflow-x:auto}

    /* screenshots -> small zoomable polaroids */
    /* the print = the live site's image stack 1:1 (ProcessWire zzfrontend .stack, base/_components.scss + style.scss ≥ tablet;
       owner 2026-10-09 "analyze the source code from processwire and take it 1:1 over"): the picture link is the front print,
       5px white border + 1px 1px 2px shadow, not turned; .stack:before = a #f3f3f3 sheet, 98% high, turned -2deg, same
       shadow, behind it (z-index -10 inside the stack's own stacking context). No rounded border on the picture. Our additions: the
       caption below the print, the b6 crop instead of PW's max-height + overflow cut. */
    .rev-page figure.shot{position:relative;z-index:0;background:none;padding:0;box-shadow:none;margin:18px auto;transform:none;max-width:360px}   /* z-index 0, not PW's 10: 10 put the print OVER the stuck provider bar (.cat-jump z-index 9) while scrolling (owner 2026-10-18 screenshot of the Tinder cost print); 0 still opens the stacking context the ::before sheet (z-index -10) needs */
    .rev-page figure.shot::before{content:"";position:absolute;left:0;top:0;width:100%;height:98%;z-index:-10;background:#f3f3f3;transform:rotate(-2deg);box-shadow:1px 1px 2px rgba(0,0,0,.25);pointer-events:none}
    .rev-page figure.shot > a.zoomable{display:block;overflow:hidden;background:#fff;border:5px solid #fff;box-shadow:1px 1px 2px rgba(0,0,0,.25)}
    .rev-page figure.shot img{border:0;border-radius:0;background:none;padding:0}
    .rev-page figure.shot img{width:100%;height:auto;display:block}
    .rev-page figure.shot figcaption{margin:8px 2px 0;font:600 15px 'Caveat',cursive;color:#55504a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .rev-page .thumbrow{display:flex;gap:10px;overflow-x:auto;margin:10px 0}
    .rev-page .thumbrow img{height:110px;width:auto;border:1.5px solid #2b2620;border-radius:var(--r-ctl);display:block}
    .rev-page .thumbrow .zoomable{flex-shrink:0}
    /* .zoomable / .zoom-glass / the overlay itself: shared, in partials/_lightbox */
    .rev-page .thumbrow .zoomable .zoom-glass::after{width:26px;height:26px}
    /* ---- note list + prose + one screenshot (partial _notes_shot; owner 2026-10-02 "make the pictures left and bullet points
       right. use a golden ratio for this"): row 1 = the photograph left (a print tilted towards the list, straightens and
       lifts on hover, the lightbox glass on the picture, click = full size) and the bullet list right, columns 1 : 1.618;
       row 2 = the text at full width. Phones: list, print, text. Without a usable image the list spans the width. ---- */
    .rev-page .rev-notes{display:grid;grid-template-columns:minmax(0,1fr);gap:0 30px;align-items:start}
    .rev-page .rev-notes.has-shot{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}   /* 1 : 2, was 1 : 1.618 (owner 2026-10-09 "screenshots … quite big make them a bit smaller") */
    .rev-page .rev-notes .rn-aside{order:-1;min-width:0;padding:6px 8px 12px}   /* the padding keeps the tilted print's corners inside the column */
    .rev-page .rev-notes .rn-main{min-width:0}
    .rev-page .rev-notes .rn-main > ul.notes:first-child{margin-top:4px}
    .rev-page .rev-notes .rn-text{grid-column:1 / -1;min-width:0;margin-top:10px}
    .rev-page .rev-notes .rn-text > .user-content:last-child{margin-bottom:4px}
    .rev-page .rev-notes .rn-aside figure.shot{margin:0;max-width:none}   /* not turned, no hover lift: the PW stack 1:1 (2026-10-09) */
    .rev-page .rev-notes .rn-aside .thumbrow{flex-wrap:wrap;overflow:visible;margin:16px 0 0;gap:8px}
    .rev-page .rev-notes .rn-aside .thumbrow img{height:84px}
    /* ---- How it works slideshow (partial _hiw_slides; owner 2026-10-06, reference picture): a bordered card on the
       sheet, every slide = the screenshot as a tilted white print with the paper-cut shadow left and the numbered
       point right (columns 1 : 1.618 like the note sections), round prev / next buttons half over the card's edges
       (next in the accent), a dashed rule and the dots below. The track is a scroll-snap row; only translate /
       scale / opacity move (specs/motion.md). ---- */
    .rev-page .hiw-slides{position:relative;background:var(--sheet-grad);border:1.5px solid #2b2620;border-radius:var(--r-card);padding:14px 56px 8px;margin:0 0 22px}
    .rev-page .hiw-slides:focus-visible{outline:2px solid #a33d2e;outline-offset:3px}
    .rev-page .hs-track{position:relative;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}
    .rev-page .hs-track::-webkit-scrollbar{display:none}
    .rev-page .hs-track{touch-action:pan-x pan-y}   /* finger swipe; mouse drag = partials/_dragscroll (data-drag) */
    .rev-page .hs-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:0 40px;align-items:center;padding:12px 12px 10px;box-sizing:border-box}   /* the picture gets the wider column (owner 2026-10-06 "the screenshots need to be bigger"); no min-height: the flex track stretches every slide to the tallest one, so the card is as high as its tallest print and no higher (owner: "box unnecessarily very high") */
    .rev-page .hs-slide:only-child{min-height:0}
    .rev-page .hs-pic{display:flex;justify-content:center;align-items:center;min-width:0;height:324px}   /* 424px until 2026-10-06 afternoon (owner: "the how does tinder work box is a little bit big, make it smaller") */   /* fixed: the tallest print (400px picture + its frame), so the card never grows when a later screenshot arrives (owner 2026-10-06 "the section scroller should not jump") */
    .rev-page .hs-print{display:block;max-width:100%;background:#fff;padding:9px;border:1.5px solid #2b2620;box-shadow:3px 3px 0 #2b2620;rotate:-1.6deg;transition:rotate .15s var(--mo-out,ease),translate .15s var(--mo-out,ease),box-shadow .15s ease}
    .rev-page .hs-print picture,.rev-page .hs-print img{display:block;max-width:100%;max-height:300px;width:auto;height:auto;margin:0 auto}
    .rev-page .hs-print .zoom-glass{inset:9px}
    .rev-page .hs-copy{min-width:0;padding:6px 0}
    .rev-page .hs-num{display:block;font:700 34px/1 'Libre Franklin';letter-spacing:.1em;color:#a33d2e;margin:0 0 14px}
    .rev-page .hs-text{margin:0;font:500 21px/1.38 'Libre Franklin';color:#2b2620}
    .rev-page .hs-text strong{font-weight:700}
    .rev-page .hs-foot{display:flex;align-items:center;justify-content:center;gap:12px;border-top:1.5px dashed #b9ad94;margin-top:2px;padding-top:9px}
    .rev-page .hs-dots{display:flex;gap:8px;align-items:center}
    .rev-page .hs-dot{width:11px;height:11px;padding:0;border:0;border-radius:999px;background:#c9bda3;cursor:pointer}
    .rev-page .hs-dot.is-on{width:30px;background:#a33d2e}
    .rev-page .hs-dot:focus-visible{outline:2px solid #a33d2e;outline-offset:2px}
    .rev-page .hs-btn{position:absolute;top:50%;translate:0 -50%;width:50px;height:50px;border-radius:999px;border:1.5px solid #2b2620;background:#fff;color:#2b2620;box-shadow:3px 3px 0 #2b2620;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:translate .15s var(--mo-out,ease),box-shadow .15s ease,filter .15s ease}
    .rev-page .hs-prev{left:-25px}
    .rev-page .hs-next{right:-25px;background:#a33d2e;color:#fff}
    .rev-page .hs-btn:active{translate:2px calc(-50% + 2px);box-shadow:0 0 0 #2b2620}
    .rev-page .hs-btn:focus-visible{outline:2px solid #a33d2e;outline-offset:3px}
    @media (hover:hover) and (pointer:fine){
      .rev-page .hs-print:hover{rotate:0deg;translate:0 -2px;box-shadow:4px 4px 0 #2b2620}
      .rev-page .hs-btn:hover{translate:0 calc(-50% - 1px);filter:brightness(1.06)}
      .rev-page .hs-dot:hover{background:#a69a80}
      .rev-page .hs-dot.is-on:hover{background:#a33d2e}
    }
    @media(prefers-reduced-motion:reduce){.rev-page .hs-print,.rev-page .hs-btn{transition:none}.rev-page .hs-track{scroll-behavior:auto}}
    /* ---- Field test cards (owner 2026-10-06 "keep field tests but as scrollable cards"): a scroll-snap row of paper
       cards, 340px each (560px for a long one), the testimonial's quote in the card, equal heights per row. ---- */
    .rev-page .ft-cards{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 14px;margin:0 -4px;scrollbar-width:thin;scrollbar-color:#c9bda3 transparent;touch-action:pan-x pan-y;align-items:stretch}
    .rev-page .ft-cards.one{scroll-snap-type:none}
    .rev-page .ft-card{flex:0 0 min(100%,340px);scroll-snap-align:start;box-sizing:border-box;background:#fff;border:1.5px solid #2b2620;border-radius:var(--r-card);box-shadow:3px 3px 0 #2b2620;padding:18px 20px 16px;min-width:0}
    .rev-page .ft-card.wide{flex-basis:min(100%,560px)}
    .rev-page .ft-cards.one .ft-card{flex-basis:100%}
    .rev-page .ft-card .user-content{font-size:14.5px;line-height:1.55}
    .rev-page .ft-card .user-content > :first-child{margin-top:0}
    .rev-page .ft-card .user-content > :last-child{margin-bottom:0}
    .rev-page .ft-card blockquote{margin:0;padding:0;border:0}
    .rev-page .ft-card blockquote > :first-child{margin-top:0}
    .rev-page .ft-card blockquote > :last-child{margin-bottom:0}
    .rev-page .ft-card h2,.rev-page .ft-card h3,.rev-page .ft-card h4{font:700 15.5px/1.3 'Libre Franklin';margin:0 0 8px;color:#2b2620}
    @media(max-width:719px){.rev-page .ft-card,.rev-page .ft-card.wide{flex-basis:min(100%,300px)}}
    @media(max-width:719px){
      .rev-page .hiw-slides{padding:12px 14px 10px}
      .rev-page .hs-slide{grid-template-columns:minmax(0,1fr);gap:16px 0;min-height:0;padding:6px 8px 10px;align-items:start}
      .rev-page .hs-print img,.rev-page .hs-print picture{max-height:280px}
      .rev-page .hs-pic{height:304px}
      .rev-page .hs-print{rotate:-1deg}
      .rev-page .hs-num{font-size:26px;margin-bottom:8px}
      .rev-page .hs-text{font-size:17.5px}
      .rev-page .hs-foot{justify-content:space-between}
      .rev-page .hs-btn{position:static;translate:none;width:42px;height:42px}
      .rev-page .hs-btn:active{translate:2px 2px}
      .rev-page .hs-btn:hover{translate:none}
    }
    @media(max-width:719px){
      .rev-page .rev-notes.has-shot{grid-template-columns:minmax(0,1fr)}
      .rev-page .rev-notes .rn-aside{order:0;padding:0}
      .rev-page .rev-notes .rn-aside figure.shot{margin:18px auto 6px;max-width:360px}
      .rev-page .rev-notes .rn-aside .thumbrow{flex-wrap:nowrap;overflow-x:auto;margin:10px 0}
      .rev-page .rev-notes .rn-aside .thumbrow img{height:110px}
    }

    /* editor's conclusion (design 2026-09-28): round 52px portrait beside a speech bubble — the quote,
       then "Name, role" in one grey line; the masthead byline links here (#author-verdict). Round portrait,
       never a photograph (claude.md § Author box). */
    /* golden ratio width (content / 1.618), centred (owner 2026-10-02) */
    .rev-page .author-verdict{display:flex;gap:18px;align-items:flex-start;margin:19.5px auto 0;padding-top:4px;width:61.8%;max-width:100%}
    .rev-page .author-verdict .av-shot{width:52px;height:52px;flex-shrink:0;border-radius:50%;overflow:hidden;border:1.5px solid #2b2620;margin:0}
    .rev-page .author-verdict .av-shot img,.rev-page .author-verdict .av-shot picture{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
    .rev-page .author-verdict .av-bubble{position:relative;flex:1;min-width:0;background:var(--sheet-grad);border:1.5px solid #2b2620;border-radius:var(--r-ctl);padding:14px 16px}
    .rev-page .author-verdict .av-bubble::before{content:"";position:absolute;left:-9px;top:18px;width:14px;height:14px;background:#fff;border-left:1.5px solid #2b2620;border-bottom:1.5px solid #2b2620;transform:rotate(45deg)}
    .rev-page .author-verdict .av-quote{margin:0;padding:0;font:italic 500 15.5px/1.55 'Libre Franklin';color:#2b2620}
    /* the author line in the hand written Caveat, ink: clearly set off from the italic quote, same family as the captions (owner 2026-10-02) */
    .rev-page .author-verdict .av-who{font:600 17px/1.35 'Caveat',cursive;color:#2b2620;margin-top:0}
    .rev-page .author-verdict .av-who a{color:#a33d2e;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
    .rev-page .author-verdict .rev-rule{width:120px;max-width:40%;height:0;border:0;border-top:1px solid #2b2620;margin:12px auto 10px}
    @media (max-width:640px){.rev-page .author-verdict{gap:12px;width:100%}}
    /* inside the final results card (owner 2026-10-09): full column width, white bubble on the card's gradient */
    .rev-page .rf-card .author-verdict{width:auto;margin:0;padding-top:0}   /* the bubble's top level with the score table's top (owner 2026-10-09 "arrange … optically nicely") */
    .rev-page .rf-card .author-verdict .av-bubble{background:#fff}
    /* the old site's section anchors (#delete-profile, #how-to-sign-up, #pros-and-cons …) as empty markers at the top of today's
       sections, so deep links from outside still land (owner 2026-10-13 "all deep links work"; tests/Feature/ReviewDeepLinksTest) */
    .rev-page .rev-alias{display:block;height:0;scroll-margin-top:calc(var(--hdr-h,0px) + 68px)}
    /* faq + trust */
    .rev-page details.faq{border-bottom:1.5px solid #d8cdb6;padding:9px 0}
    .rev-page details.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;font:600 var(--fs-prose)/1.4 'Libre Franklin'}
    .rev-page details.faq summary::-webkit-details-marker{display:none}
    .rev-page details.faq summary::after{content:"+";flex:0 0 34px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:1.5px solid #2b2620;border-radius:50%;background:#fff;box-shadow:2px 2px 0 #2b2620;font:500 24px/1 'Libre Franklin';color:#a33d2e;transition:transform .24s cubic-bezier(.23,1,.32,1),background-color .15s}   /* a big round clickable button, not a small pencil plus (owner 2026-10-13 "way bigger nice clickable icon"); turns to × when open */
    .rev-page details.faq summary:hover::after{background:#f5dcd6}
    .rev-page details.faq[open]>summary::after{transform:rotate(45deg)}
    .rev-page .status-banner{background:#a33d2e;color:#fff;border-radius:var(--r-card);padding:12px 16px;margin:14px 0;font:600 14px/1.5 'Libre Franklin'}
    .rev-page .scoretable td{font:400 14px 'Libre Franklin';padding:8px 10px;border-bottom:1.5px solid #d8cdb6}
    .rev-page .scoretable tr.total td{font-weight:800;border-bottom:none}
    .rev-page .scoretable td.num{text-align:right;white-space:nowrap}

    /* head to head links in the alternatives section (owner 2026-10-11): pill links like the jump menu */
    .rev-page .rev-vs{margin:22px 0 6px}
    .rev-page .rev-vs ul{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0;padding:0;list-style:none}
    .rev-page .rev-vs a{display:inline-block;padding:7px 14px;border:1.5px solid #2b2620;border-radius:999px;background:#fff;font:600 14px 'Libre Franklin';color:#2b2620;text-decoration:none}
    .rev-page .rev-vs a:hover{background:#2b2620;color:#f4eee1}
    /* --- "Compare to alternatives" (#alternatives, owner 2026-10-04): the intro line under the H2 (the search phrases
       "sites / apps like X", "X alternatives", "better than X", "compare"), then the bottom alternatives box and the
       compare tool (#compare, partials/_compare_tool) as two H3 sub-blocks --- */
    .rev-alts-intro,.rev-compare-lead{font:400 15px/1.65 'Libre Franklin';color:#443d34;margin:0 0 4px}
    .rev-alts-intro{max-width:66ch;margin:0}
    .rev-compare-lead a{color:#a33d2e;text-decoration:underline;text-underline-offset:3px}
    .rev-page .rev-alts .alt-sec > h3,.rev-page .rev-alts .rev-compare > h3{font:800 20px/1.2 'Libre Franklin';letter-spacing:-.02em;color:#2b2620;margin:30px 0 0}
    .rev-page .rev-alts .rev-compare > h3{margin-bottom:10px}
    .rev-compare .cat-compare{margin-top:12px}

    /* --- "Ask us!" question form under the FAQ (_question_form) --- */
    .rev-question{margin-top:26px;border:1.5px dashed #b8443c;border-radius:var(--r-card);background:#fdf9ef;padding:18px 20px 20px}
    .rev-question h3{font:800 17px/1.25 'Libre Franklin',sans-serif;color:#2b2620;margin:0 0 12px}
    .rev-question form{display:flex;flex-direction:column;gap:9px;max-width:520px}
    .rev-question form[hidden]{display:none} /* after a successful submit the JS hides the form and shows .zz-form-success (e2e forms.spec) */
    .rev-question textarea,.rev-question input[type=text],.rev-question input[type=email]{width:100%;box-sizing:border-box;font:400 14.5px/1.45 'Libre Franklin',sans-serif;color:#2b2620;background:#fff;border:1.5px solid #2b2620;border-radius:var(--r-ctl);padding:10px 12px}
    .rev-question textarea:focus,.rev-question input:focus{outline:2px solid #a33d2e;outline-offset:1px}
    .rev-question .faq-newsletter-wrapper{display:flex;gap:8px;align-items:flex-start;font:400 13px/1.45 'Libre Franklin',sans-serif;color:#443d34}
    .rev-question .static-captcha-block label{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font:600 14px 'Libre Franklin',sans-serif}
    .rev-question .static-captcha-block input{width:90px}
    .rev-question .submit{align-self:flex-start;background:#a33d2e;color:#fff;border:0;font:700 15px 'Libre Franklin',sans-serif;padding:13px 22px;border-radius:var(--r-ctl);box-shadow:3px 3px 0 #2b2620;cursor:pointer}
    .rev-question .error-message{font:600 12.5px 'Libre Franklin',sans-serif;color:#a33d2e;margin:-4px 0 0}
    .rev-question .zz-form-success{font:600 15px 'Libre Franklin',sans-serif;color:#2b2620;margin:0}
    /* translated section labels come in normal case — uppercase them here */
    .rev-page .cat-section-head span:first-child{text-transform:uppercase}

/* --- Security: the seven privacy question / answer pairs after the FAQ (_privacy, 2026-10-21); the question in
       the FAQ's summary weight, the answer in prose, a hairline between rows like the FAQ accordion --- */
.rev-page .rev-privacy-list{margin:0;padding:0}
.rev-page .rev-privacy-row{display:grid;gap:4px;padding:10px 0;border-bottom:1.5px solid #d8cdb6}
.rev-page .rev-privacy-row:last-child{border-bottom:0}
.rev-page .rev-privacy-row dt{font:600 var(--fs-prose)/1.4 'Libre Franklin',sans-serif;color:#2b2620;margin:0}
.rev-page .rev-privacy-row dd{font:400 var(--fs-prose)/1.55 'Libre Franklin',sans-serif;color:#3a342c;margin:0}