@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=DM+Sans:wght@300;400;500;600&display=swap');

:root{
  --gold:#C9A84C;--gold-l:#E8C97A;--gold-p:#F5EDD4;
  --dark:#1A1A1A;--mid:#5A5A5A;--lt:#F9F6F0;
  --bd:rgba(201,168,76,.25);--r:4px;--shad:0 8px 40px rgba(0,0,0,.09);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
.pico-rep-finder-wrap{background:var(--lt);color:var(--dark)}
.hero{background:var(--dark);padding:50px 32px 38px;text-align:center;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 55% at 50% 115%,rgba(201,168,76,.17),transparent 68%);pointer-events:none}
.eyebrow{font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:11px}
.hero h1{font-family:"Playfair Display",serif;font-size:clamp(22px,3.5vw,40px);font-weight:700;color:#fff;margin-bottom:9px;line-height:1.15}
.hero p{font-size:13px;font-weight:300;color:rgba(255,255,255,.48);max-width:420px;margin:0 auto;line-height:1.7}
.rule{display:flex;align-items:center;gap:10px;padding:18px 32px 0;max-width:860px;margin:0 auto}
.rule span{flex:1;height:1px;background:var(--bd)}
.main{max-width:1220px;margin:0 auto;padding:22px 14px 60px;display:grid;grid-template-columns:290px 1fr;gap:20px;align-items:start}
.sb{background:#fff;border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--shad);overflow:hidden}
.sbh{background:var(--dark);padding:14px 18px}
.sbh h2{font-family:"Playfair Display",serif;font-size:14px;color:#fff;font-weight:600}
.sbh p{font-size:9.5px;color:rgba(255,255,255,.38);margin-top:2px}
.tabs{display:flex;border-bottom:1px solid var(--bd)}
.tab{flex:1;padding:10px 7px;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border:none;background:transparent;color:var(--mid);transition:all .18s;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab.active{color:var(--gold);border-bottom-color:var(--gold);background:var(--gold-p)}
.ds{padding:14px 16px;display:none}
.ds.on{display:block}
.dl{font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mid);margin-bottom:5px}
select{width:100%;appearance:none;background:var(--lt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23C9A84C' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 9px center;border:1px solid var(--bd);border-radius:var(--r);padding:8px 26px 8px 9px;font-family:"DM Sans",sans-serif;font-size:12px;color:var(--dark);cursor:pointer}
select:focus{outline:none;border-color:var(--gold)}
.rc{margin:0 16px 16px;border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;display:none;animation:fu .25s ease}
.rc.on{display:block}
@keyframes fu{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.rca{height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-l))}
.rcb{padding:12px 13px}
.rcc{font-family:"Playfair Display",serif;font-size:13.5px;font-weight:700;margin-bottom:2px}
.rct{font-size:9px;font-weight:500;color:var(--gold);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
.rtr{font-size:10px;color:var(--mid);background:var(--lt);border-radius:2px;padding:5px 7px;margin-bottom:8px;line-height:1.5}
.rtr strong{font-weight:600;color:var(--dark);display:block;font-size:8px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1px}
.dr{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--mid);margin-bottom:4px}
.dr svg{flex-shrink:0;color:var(--gold)}
.dr a{color:var(--dark);text-decoration:none;font-weight:500}
.dr a:hover{color:var(--gold)}
.rw{display:inline-flex;align-items:center;gap:4px;margin-top:8px;padding:6px 12px;background:var(--dark);color:#fff;font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-radius:var(--r);transition:background .15s}
.rw:hover{background:var(--gold);color:var(--dark)}
.mp{background:#fff;border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--shad);overflow:hidden}
.mph{padding:12px 16px;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:7px}
.mph h2{font-family:"Playfair Display",serif;font-size:13.5px;font-weight:600}
.leg{display:flex;gap:9px;flex-wrap:wrap}
.li{display:flex;align-items:center;gap:3px;font-size:9px;color:var(--mid);font-weight:500}
.ld{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.mw{padding:10px;position:relative}
.mw svg{width:100%;height:auto;display:block}
path[data-rep]{cursor:pointer;transition:opacity .12s,filter .12s;stroke:#fff;stroke-width:.8;stroke-linejoin:round}
path[data-rep]:hover{filter:brightness(1.15);opacity:.88}
path[data-rep].hi{stroke:#1A1A1A!important;stroke-width:2.5!important;filter:brightness(1.1);opacity:1}
path[data-rep].dim{opacity:.25}
.tt{position:absolute;background:var(--dark);color:#fff;padding:6px 10px;border-radius:var(--r);font-size:10px;pointer-events:none;opacity:0;transition:opacity .1s;z-index:20;border-left:3px solid var(--gold);white-space:nowrap;line-height:1.4}
.tt.on{opacity:1}
.tt strong{color:var(--gold);display:block;font-size:11px}
.mn{text-align:center;font-size:9px;color:#aaa;font-style:italic;padding:2px 0 8px}

/* ── Tablet (max 1024px) ── */
@media(max-width:1024px){
  .main{grid-template-columns:260px 1fr;gap:16px;padding:18px 12px 50px}
  .hero{padding:38px 20px 28px}
  .hero h1{font-size:clamp(20px,3vw,34px)}
}

/* ── Mobile/Tablet stacked (max 800px) ── */
@media(max-width:800px){
  .main{grid-template-columns:1fr;padding:14px 12px 40px;gap:14px}
  .hero{padding:32px 16px 24px}
  .hero h1{font-size:clamp(20px,5vw,30px)}
  .hero p{font-size:12.5px}
  .rule{padding:14px 16px 0}
  .sb,.mp{width:100%}
  .tabs .tab{font-size:9.5px;padding:9px 6px}
  .mph{padding:10px 12px}
  .mph h2{font-size:12.5px}
  .mw{padding:6px}
  .rc{margin:0 12px 12px}
  .rcb{padding:11px 12px}
  .rcc{font-size:13px}
  .ds{padding:12px 14px}
  select{font-size:11.5px}
}

/* ── Small mobile (max 480px) ── */
@media(max-width:480px){
  .hero{padding:26px 14px 20px}
  .hero h1{font-size:20px}
  .main{padding:10px 10px 30px;gap:12px}
  .sbh{padding:12px 14px}
  .sbh h2{font-size:13px}
  .tabs .tab{font-size:9px;letter-spacing:.04em}
  .mph h2{font-size:12px}
  .rcc{font-size:12.5px}
  .dr{font-size:10px}
  .rw{font-size:9px;padding:5px 10px}
  .mw{padding:4px}
}

/* WordPress compatibility */
.pico-rep-finder-wrap *,
.pico-rep-finder-wrap *::before,
.pico-rep-finder-wrap *::after {
  box-sizing: border-box;
}
.pico-rep-finder-wrap {
  font-family: "DM Sans", sans-serif;
  color: #1A1A1A;
}