/* provider_reviews/_price_card.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 }} */
    .pc-card{margin:0 0 18px}   /* a normal section: no sheet, no side padding (owner 2026-10-02); the H2 is the section heading in _costs */
    /* frames after the owner's reference screenshots (2026-10-04, old datingscout cost section): hairline borders in the paper hue,
       no ink border and no shadow, more air inside; content and structure unchanged */
    .pc-card .pc-verdict{background:#fdfaf4;border:1.5px solid #e3dac8;border-radius:12px;padding:18px 24px;font:400 17px/1.5 'Libre Franklin';margin:0;color:#2b2620}
    .pc-card .pc-verdict strong,.pc-card .pc-verdict b{font-weight:700}
    .pc-card .pc-verdict.is-free{border-color:#3e7a4e}
    .pc-card .pc-verdict{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
    .pc-card .pc-verdict .t{flex:1 1 320px;min-width:0}
    .pc-card .pc-scale{display:block;flex:0 0 180px;height:7px;background:#ebe4d4;border-radius:2px;position:relative;overflow:hidden}
    .pc-card .pc-scale i{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:#cdbfa3}
    .pc-card .pc-scale.lvl-1 i,.pc-card .pc-scale.lvl-2 i{background:#2f7a3a}
    .pc-card .pc-scale.lvl-4 i,.pc-card .pc-scale.lvl-5 i{background:#a33d2e}
    .pc-card .pc-checked{font:400 13.5px 'Libre Franklin';color:#8a7f6d;text-align:center;margin:2px 0 14px}   /* under the receipt, small and centred (owner 2026-10-03) */
    .pc-card .pc-sheet{position:relative;margin-top:16px;font-family:'IBM Plex Mono',monospace;color:#2b2620}
    /* the pale sheet only around the price table; payment options and the proof sit directly on the page (owner 2026-10-02) */
    .pc-card .pc-receipt{background:#faf6ee;border:1.5px solid #e3dac8;border-radius:14px;padding:34px 36px 26px;margin-bottom:10px}
    .pc-card .pc-h,.pc-features .pc-h{font:800 17px 'Libre Franklin';letter-spacing:-.01em;color:#2b2620;margin:26px 0 0}
    /* the free / paid feature columns under the card use the same headline (owner 2026-10-02) */
    .pc-features{margin-top:22px}
    .pc-features .pc-h{margin:0 0 8px}
    .pc-card .pc-h.first{margin-top:0}
    .pc-card .pc-grid{display:grid;grid-template-columns:1.4fr 1.1fr .9fr;gap:0 12px;margin:0 -8px;padding:0 8px}
    .pc-card .pc-ghead{align-items:end;margin-top:2px;padding-bottom:4px}
    .pc-card .pc-ghead.first{margin-top:0}
    .pc-card .pc-ghead .d{grid-column:1 / 3;font:400 15px/1.5 'Libre Franklin';color:#6d6455;text-wrap:pretty}
    .pc-card .pc-ghead .t{text-align:right;font:700 13.5px 'Libre Franklin';color:#a33d2e;align-self:end}
    .pc-card .pc-row{align-items:center;padding:13px 8px;font:400 15px 'IBM Plex Mono',monospace;border-bottom:1px solid #e3dac8;position:relative}
    .pc-card .pc-row.last{border-bottom:none}
    .pc-card .pc-row.pick{font-weight:700;padding-bottom:5px;border-bottom:none;margin:0}
    /* our pick: the row and its note in one box with a full border (owner 2026-10-02); GREEN like the cheapest bar, not the red accent
       (owner 2026-10-18 "cost table the best highlight option should be green not red"): box #eaf3e7 / #b7cfb9, tick, bar, total and label #2f7a3a */
    .pc-card .pc-pickbox{border:1.5px solid #b7cfb9;border-radius:10px;background:#eaf3e7;margin:8px -11.5px;padding:4px 2px 2px}   /* -11.5 = the rows' -8 margin + 1.5 border + 2 padding: the pick's name, unit price and total sit exactly in the other rows' columns */
    .pc-card .pc-row:has(+ .pc-pickbox){border-bottom:none}   /* the row above the pick box: its dashed divider would double the box line (owner 2026-10-02) */
    .pc-card .pc-row .n{display:flex;align-items:center;gap:8px;min-width:0}
    .pc-card .pc-row .n .w{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize}
    .pc-card .pc-row .u .ut{display:block;white-space:nowrap;color:#2b2620;text-transform:capitalize}
    .pc-card .pc-row.cheap .u .ut,.pc-card .pc-row.pick .u .ut{font-weight:700}
    .pc-card .pc-row .bar{display:block;height:7px;background:#ebe4d4;border-radius:2px;position:relative;overflow:hidden;margin-top:4px}
    .pc-card .pc-row .bar i{position:absolute;left:0;top:0;bottom:0;background:#cdbfa3;border-radius:2px}
    .pc-card .pc-row.cheap .bar i{background:#2f7a3a}
    .pc-card .pc-row.pick .bar i{background:#2f7a3a}
    .pc-card .pc-row .tot{text-align:right;font-weight:700;color:#2b2620;white-space:nowrap}
    .pc-card .pc-row.pick .tot{color:#2f7a3a}
    /* the pick's check mark comes AFTER the plan name, so the name keeps the column of the other rows like on a bill
       (owner 2026-10-04: "numbers stay on same position … or after the 500 Credits checkmark") */
    .pc-card .pc-row .tick{display:inline-block;transform:rotate(-6deg);font:700 24px/1 'Caveat',cursive;color:#2f7a3a;flex-shrink:0;margin-left:2px}
    .pc-card .pc-row .sub{grid-column:1 / -1;font:400 13px/1.4 'Libre Franklin';color:#8a7f6d;margin-top:3px}
    .pc-card .pc-info{font:400 13px/1.4 'Libre Franklin';color:#8a7f6d;margin:4px 0 2px;text-wrap:pretty}   /* plan-wide info under the heading */
    .pc-card .pc-pick{font:400 16.5px/1.5 'Libre Franklin';color:#443d34;margin:0;padding:2px 8px 12px;text-wrap:pretty}
    .pc-card .pc-noticeq{margin-top:10px}   /* 12px flex gap + 10 above the question (owner 2026-10-03 "a bit more space to the top before question") */
    .pc-card .pc-noticeq p{margin:0;font:400 15.5px/1.5 'Libre Franklin';color:#443d34;text-wrap:pretty}   /* "What is the notice period on X?" (owner 2026-10-03) */
    .pc-card .pc-pick strong{color:#2f7a3a}
    .pc-card .pc-text{font:400 15.5px/1.65 'Libre Franklin';color:#443d34}
    .pc-card .pc-text p{margin:0 0 10px}
    .pc-card .pc-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
    .pc-card .pc-chip{font:600 14.5px 'Libre Franklin';color:#2b2620;background:#f4eee1;border:1.5px solid #b5aa93;border-radius:999px;padding:7px 16px}
    .pc-card .pc-pay{margin-top:14px;align-items:start;font:400 15px/1.55 'Libre Franklin';color:#443d34}
    .pc-card .pc-anon{display:flex;gap:10px;align-items:flex-start}
    .pc-card .pc-anon .m{font:700 21px/1 'Caveat',cursive;color:#2f7a3a;flex-shrink:0}
    .pc-card .pc-anon.no .m{color:#a33d2e}
    .pc-card .pc-anon strong{display:block;color:#2b2620}
    .pc-card .pc-stmt{grid-column:2 / 4;display:flex;flex-direction:column;gap:6px}
    .pc-card .pc-stmt .h{font:700 15px 'Libre Franklin';color:#2b2620}
    .pc-card .pc-stmt .box{font:400 15.5px/1.4 'IBM Plex Mono',monospace;background:#f4eee1;border:1.5px dashed #b5aa93;padding:8px 12px;color:#2b2620}
    .pc-card .pc-stmt .x{color:#6d6455}
    /* the pricing proof = the same tilted print as "How does X work?" (owner 2026-10-03: "make zoosk pricing look and size
       wise same like how does zoosk work screenshot"): partial _img's figure.shot (white frame, --sh-md, uncropped) in the
       rev-notes layout, print : notes = 1 : 1.618 with a 30px gap. Before: a taped, ink-bordered crop (max-height 340px) in
       the receipt grid's first column. */
    .pc-card .pc-grid.pc-proof{margin-top:18px;align-items:start;grid-template-columns:minmax(0,1fr) minmax(0,1.618fr);gap:0 30px}
    .pc-card .pc-shot{min-width:0;padding:6px 8px 12px}   /* the padding keeps the tilted print's corners inside the column */
    .pc-card .pc-shot figure.shot{margin:0 auto;max-width:100%;width:fit-content}   /* the PW stack 1:1, not turned (2026-10-09); fit-content: the white frame hugs a height-capped picture */
    /* height cap (owner 2026-10-18 Tinder review: "limit cost screenshots in height or they go crazy … square images"): a tall or square
       pricing shot shrinks to 420px high, whole picture kept (no crop, the lightbox has the full size); a landscape shot is unchanged */
    .pc-card .pc-shot figure.shot img{width:auto;max-width:100%;max-height:420px}
    .pc-card .pc-beside{display:flex;flex-direction:column;justify-content:center;gap:12px;min-width:0}
    .pc-card .pc-beside.wide{grid-column:1 / -1}
    .pc-card .pc-grid.pc-proof.solo{grid-template-columns:minmax(0,560px);justify-content:center}   /* screenshot alone (feature matrix on) */
    .pc-card .pc-try .h{font:700 15.5px 'Libre Franklin';color:#2b2620;margin-bottom:6px}
    .pc-card .pc-try .rev-cta-inline{margin:8px 0 0;font:400 15px/1.4 'Libre Franklin'}
    .pc-card .pc-try-list li.good:before{content:"✓";color:#2f7a3a}
    .pc-card .pc-notes li span{text-wrap:pretty}
    .pc-card .pc-try-list li.bad:before{content:"✗";color:#a33d2e}
    .pc-card .pc-notes{display:flex;flex-direction:column;gap:8px;font:400 15.5px/1.5 'Libre Franklin';color:#443d34;list-style:none;margin:0;padding:0}
    .pc-card .pc-notes li{display:flex;gap:10px;align-items:flex-start;padding:0;margin:0}
    .pc-card .pc-notes li:before{content:"→";font:700 19px/1.2 'Caveat',cursive;color:#a33d2e;flex-shrink:0;position:static}
    @media(max-width:600px){
      .pc-card .pc-receipt{padding:18px 14px 14px;border-radius:12px}
      .pc-card .pc-verdict{padding:14px 16px;font-size:16px}
      .pc-card .pc-grid{grid-template-columns:1.1fr 1.2fr .8fr;gap:0 8px}
      .pc-card .pc-row{font-size:12px;padding:9px 6px}
      .pc-card .pc-row .u .ut{white-space:normal}
      .pc-card .pc-row .tick{font-size:20px}
      .pc-card .pc-pay,.pc-card .pc-grid.pc-proof{grid-template-columns:1fr}
      .pc-card .pc-stmt,.pc-card .pc-beside{grid-column:1 / -1}
      .pc-card .pc-shot{padding:0}
      .pc-card .pc-shot figure.shot{margin:18px auto 6px;max-width:360px}
    }