/* ============================================================
   CC Business Directory — packages page (.ccp)
   ============================================================ */
.ccp{
  --cc-dark:#16181c;--cc-red:#a21327;--cc-red-dark:#840f20;--cc-red-soft:#fbeaed;
  --cc-gold:#b9842a;--cc-gold-soft:#f6ecd4;--cc-gold-line:#e6cf9c;
  --cc-silver:#737b88;--cc-silver-soft:#eceef2;
  --cc-bg:#fff;--cc-soft:#f7f7f4;--cc-line:#e7e7e2;--cc-line-2:#d8d8d2;
  --cc-ink:#1a1d21;--cc-ink-2:#5c636d;--cc-ink-3:#8a909a;
  --display:'Oswald',sans-serif;--body:'Public Sans',-apple-system,sans-serif;
  font-family:var(--body);color:var(--cc-ink);line-height:1.6
}
.ccp *{box-sizing:border-box}
.ccp a{text-decoration:none}

.ccp-hero{background:var(--cc-dark);color:#fff;text-align:center;padding:46px 24px 120px;position:relative;overflow:hidden;margin:0 -24px}
.ccp-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% -10%,rgba(162,19,39,.45),transparent 60%);pointer-events:none}
.ccp-hero .crumb{font-family:var(--display);text-transform:uppercase;letter-spacing:1.5px;font-size:11px;color:#9aa0a8;font-weight:600;margin-bottom:14px;position:relative}
.ccp-hero h1{font-family:var(--display);font-weight:700;font-size:42px;line-height:1.03;text-transform:uppercase;letter-spacing:.5px;position:relative;margin:0}
.ccp-hero h1 span{color:var(--cc-red)}
.ccp-hero p{color:#c4c8ce;max-width:560px;margin:14px auto 0;font-size:16px;position:relative}

.ccp-wrap{max-width:1100px;margin:-84px auto 0;padding:0 0 64px;position:relative;z-index:2}
.ccp-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.ccp-tier{background:#fff;border:1px solid var(--cc-line);border-radius:16px;padding:28px 26px;display:flex;flex-direction:column;box-shadow:0 18px 40px -28px rgba(0,0,0,.4)}
.ccp-tier.silver{border-color:var(--cc-silver)}
.ccp-tier.gold{border:2px solid var(--cc-gold);box-shadow:0 24px 54px -24px rgba(185,132,42,.55);position:relative}
.ccp-tier.gold .topband{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--cc-gold);color:#fff;font-family:var(--display);text-transform:uppercase;letter-spacing:1px;font-size:11px;font-weight:700;padding:5px 16px;border-radius:20px;white-space:nowrap}
.ccp-tier .tname{font-family:var(--display);text-transform:uppercase;letter-spacing:.5px;font-size:22px;font-weight:700}
.ccp-tier.free .tname{color:var(--cc-ink)}
.ccp-tier.silver .tname{color:var(--cc-silver)}
.ccp-tier.gold .tname{color:var(--cc-gold)}
.ccp-tier .tprice{display:flex;align-items:baseline;gap:6px;margin:14px 0 4px}
.ccp-tier .tprice .amt{font-family:var(--display);font-weight:700;font-size:40px;line-height:1}
.ccp-tier .tprice .per{color:var(--cc-ink-3);font-size:14px;font-weight:600}
.ccp-tier .tnote{color:var(--cc-ink-2);font-size:13.5px;min-height:40px}
.ccp-tier .tcta{font-family:var(--display);text-transform:uppercase;letter-spacing:.6px;font-size:14px;font-weight:600;padding:13px 18px;border-radius:10px;text-align:center;margin:20px 0 22px;transition:.15s;border:1px solid transparent;display:block}
.ccp-tier.free .tcta{background:#fff;border-color:var(--cc-line-2);color:var(--cc-ink)}
.ccp-tier.free .tcta:hover{border-color:var(--cc-ink-3)}
.ccp-tier.silver .tcta{background:var(--cc-silver);color:#fff}
.ccp-tier.silver .tcta:hover{filter:brightness(.94)}
.ccp-tier.gold .tcta{background:var(--cc-red);color:#fff}
.ccp-tier.gold .tcta:hover{background:var(--cc-red-dark)}
.ccp-tier .feat{list-style:none;display:flex;flex-direction:column;gap:11px;margin:0;padding:0}
.ccp-tier .feat li{display:flex;gap:10px;font-size:14px;align-items:flex-start}
.ccp-tier .feat .ic{flex:0 0 auto;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;margin-top:2px}
.ccp-tier .feat .yes{background:var(--cc-red-soft);color:var(--cc-red)}
.ccp-tier.gold .feat .yes{background:var(--cc-gold-soft);color:var(--cc-gold)}
.ccp-tier .feat .no{background:#f0f0ee;color:var(--cc-ink-3)}
.ccp-tier .feat .muted{color:var(--cc-ink-3)}
.ccp-tier .feat b{font-weight:700}

.ccp-compare{margin-top:56px}
.ccp-compare h2{font-family:var(--display);text-transform:uppercase;letter-spacing:.5px;font-size:24px;text-align:center;margin:0 0 8px}
.ccp-compare .sub{text-align:center;color:var(--cc-ink-2);margin-bottom:26px}
.ccp-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--cc-line);border-radius:14px;overflow:hidden}
.ccp-table th,.ccp-table td{padding:14px 18px;text-align:center;border-bottom:1px solid var(--cc-line)}
.ccp-table thead th{font-family:var(--display);text-transform:uppercase;letter-spacing:.5px;font-size:14px;background:var(--cc-soft)}
.ccp-table thead th.silver{color:var(--cc-silver)}
.ccp-table thead th.gold{color:var(--cc-gold);background:var(--cc-gold-soft)}
.ccp-table td.gold{background:rgba(246,236,212,.4)}
.ccp-table tbody th{text-align:left;font-weight:600;font-size:14px;color:var(--cc-ink);width:38%}
.ccp-table tbody tr:last-child td,.ccp-table tbody tr:last-child th{border-bottom:none}
.ccp-table .y{color:var(--cc-red);font-weight:700}
.ccp-table .g{color:var(--cc-gold);font-weight:700}
.ccp-table .x{color:var(--cc-ink-3)}
.ccp-table .val{font-weight:600}

.ccp-faq{margin-top:52px;max-width:760px;margin-left:auto;margin-right:auto}
.ccp-faq h2{font-family:var(--display);text-transform:uppercase;letter-spacing:.5px;font-size:22px;text-align:center;margin:0 0 20px}
.ccp-faq .qa{background:#fff;border:1px solid var(--cc-line);border-radius:12px;padding:18px 20px;margin-bottom:12px}
.ccp-faq .q{font-weight:700;font-size:15px;margin-bottom:5px}
.ccp-faq .a{font-size:14px;color:var(--cc-ink-2)}

.ccp-closing{text-align:center;margin-top:48px}
.ccp-closing .btn{font-family:var(--display);text-transform:uppercase;letter-spacing:.6px;font-size:15px;font-weight:600;padding:15px 34px;border-radius:11px;background:var(--cc-red);color:#fff;display:inline-block}
.ccp-closing .btn:hover{background:var(--cc-red-dark)}
.ccp-closing .small{margin-top:12px;color:var(--cc-ink-3);font-size:13px}

@media(max-width:880px){
  .ccp-tiers{grid-template-columns:1fr;max-width:440px;margin:0 auto}
  .ccp-tier.gold{order:-1}
  .ccp-table{font-size:13px}
  .ccp-table th,.ccp-table td{padding:11px 10px}
}
