/* Investments page. Loads after nav.css + listings.css + about.css (reuses .ab-* components). */

/* Risk bar under the nav: keep this on the page whatever the final figures are */
.pl-riskbar{background:#ece8e1;border-bottom:1px solid var(--pg-line);font-size:13px;color:#4a4740}
.pl-riskbar .bc-wrap{display:flex;gap:10px;align-items:center;padding-top:11px;padding-bottom:11px}
.pl-riskbar svg{width:16px;height:16px;flex-shrink:0;color:var(--pg-accent)}
.pl-riskbar a{text-decoration:underline;text-underline-offset:2px}

/* Hero: dark variant of the about hero, image on the left */
.pl-hero .ab-hero-block{background:var(--pg-ink);order:2;padding-left:clamp(24px,4vw,64px);padding-right:max(22px,calc((100vw - 1240px) / 2 + 40px))}
.pl-hero .ab-hero-block h1{color:#f4f1ec;max-width:10ch}
.pl-hero .ab-hero-block path{stroke:rgba(244,241,236,.18)}
.pl-hero .ab-hero-img img{object-position:center 40%}
.pl-hero-facts{display:flex;gap:clamp(24px,4vw,40px);flex-wrap:wrap}
.pl-hero-facts div{min-width:86px}
.pl-hero-facts strong{display:block;font-size:28px;font-weight:300;letter-spacing:-0.03em}
.pl-hero-facts span{font-size:13px;color:var(--pg-muted)}

/* Plans */
.pl-tabs{display:inline-flex;gap:4px;padding:4px;background:var(--pg-card);border:1px solid var(--pg-line);border-radius:999px}
.pl-tab{height:40px;padding:0 20px;border:0;border-radius:999px;background:transparent;font-size:14px;cursor:pointer;color:var(--pg-muted);transition:background-color .2s,color .2s}
.pl-tab:hover{color:var(--pg-ink)}
.pl-tab[aria-selected="true"]{background:var(--pg-ink);color:#fff}
.pl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pl-card{position:relative;display:flex;flex-direction:column;background:var(--pg-card);border:1px solid var(--pg-line);border-radius:24px;padding:28px 26px 26px;transition:border-color .2s,box-shadow .25s,transform .25s}
.pl-card:hover{border-color:#d6d0c6;box-shadow:0 20px 44px rgba(25,24,21,.07);transform:translateY(-3px)}
.pl-card.is-featured{background:var(--pg-ink);color:#f4f1ec;border-color:var(--pg-ink)}
.pl-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.pl-cat{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--pg-muted)}
.pl-badge{font-size:11px;font-weight:500;padding:5px 11px;border-radius:999px;background:var(--pg-accent);color:#fff;white-space:nowrap}
.pl-card h3{font-size:22px;font-weight:500;letter-spacing:-0.015em;margin-top:14px}
.pl-summary{font-size:14px;line-height:1.6;color:var(--pg-muted);margin-top:8px;min-height:4.8em}
.pl-target{margin:24px 0 20px;padding:22px 0;border-top:1px solid var(--pg-line);border-bottom:1px solid var(--pg-line)}
.pl-target strong{display:block;font-size:clamp(40px,3.6vw,52px);font-weight:200;letter-spacing:-0.04em;line-height:1}
.pl-target span{display:block;font-size:13px;color:var(--pg-muted);margin-top:8px}
.pl-facts{display:flex;flex-direction:column;gap:12px;font-size:14px}
.pl-facts li{display:flex;justify-content:space-between;gap:12px}
.pl-facts span{color:var(--pg-muted)}
.pl-facts b{font-weight:500;text-align:right}
.pl-risk{display:inline-flex;gap:3px;vertical-align:middle;margin-left:8px}
.pl-risk i{width:14px;height:8px;border-radius:3px;background:#e6e2da}
.pl-risk i.on{background:var(--pg-accent)}
.pl-features{margin:22px 0 24px;display:flex;flex-direction:column;gap:9px;font-size:14px;flex:1}
.pl-features li{display:flex;gap:10px;align-items:flex-start}
.pl-features li::before{content:'';width:16px;height:16px;flex-shrink:0;margin-top:2px;border-radius:50%;background:var(--pg-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%238b7b63' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.pl-card .pg-btn{width:100%;border-radius:999px;height:50px}
.pl-card sup a,.pl-foot sup a{color:var(--pg-accent);text-decoration:none;font-weight:500;padding:0 1px}
.pl-card sup a:hover{text-decoration:underline}

/* featured (dark) card overrides */
.pl-card.is-featured .pl-cat,.pl-card.is-featured .pl-summary,.pl-card.is-featured .pl-facts span,.pl-card.is-featured .pl-target span{color:rgba(244,241,236,.6)}
.pl-card.is-featured .pl-target{border-color:rgba(255,255,255,.14)}
.pl-card.is-featured .pl-risk i{background:rgba(255,255,255,.16)}
.pl-card.is-featured .pl-risk i.on{background:#cbb994}
.pl-card.is-featured .pl-features li::before{background-color:rgba(255,255,255,.1)}
.pl-card.is-featured sup a{color:#cbb994}
.pl-card.is-featured .pg-btn{background:#f4f1ec;color:var(--pg-ink)}
.pl-card.is-featured .pg-btn:hover{background:#fff}

/* Notes / disclosures that the plan footnotes point to */
.pl-notes{margin-top:34px;background:var(--pg-card);border-radius:20px;padding:26px 30px}
.pl-notes h3{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--pg-muted);margin-bottom:14px}
.pl-notes ol{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:n}
.pl-notes li{counter-increment:n;display:grid;grid-template-columns:28px 1fr;font-size:14px;line-height:1.6;color:#4a4740;scroll-margin-top:110px;border-radius:8px;transition:background-color .6s}
.pl-notes li::before{content:counter(n);color:var(--pg-accent);font-weight:600}
.pl-notes li:target{background:#f3eee4}

/* Risk section (reuses .ab-excel + .ab-glass) */
.pl-riskgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:80px}
.pl-riskgrid .ab-glass p{font-size:15px}
.pl-reg{margin-top:18px;font-size:14px;color:rgba(255,255,255,.75)}
.pl-reg b{color:#fff;font-weight:500}

/* FAQ */
.pl-faq{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(40px,7vw,110px)}
.pl-faq-list{display:flex;flex-direction:column;gap:10px}
.pl-faq details{background:var(--pg-card);border:1px solid var(--pg-line);border-radius:18px;padding:0 24px;transition:border-color .2s}
.pl-faq details[open]{border-color:#d6d0c6}
.pl-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-size:16px;font-weight:500}
.pl-faq summary::-webkit-details-marker{display:none}
.pl-faq summary::after{content:'+';font-size:22px;font-weight:300;color:var(--pg-accent);transition:transform .25s}
.pl-faq details[open] summary::after{transform:rotate(45deg)}
.pl-faq details p{padding:0 0 22px;font-size:15px;line-height:1.7;color:var(--pg-muted)}

@media(max-width:1040px){
  .pl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pl-riskgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .pl-hero .ab-hero-block{order:0;padding-right:clamp(24px,4vw,64px)}
  .pl-faq{grid-template-columns:1fr}
}
@media(max-width:600px){
  .pl-grid,.pl-riskgrid{grid-template-columns:1fr}
  .pl-summary{min-height:0}
  .pl-tabs{width:100%;overflow-x:auto}
  .pl-tab{flex:1;padding:0 12px}
  .pl-notes{padding:22px 20px}
  .pl-riskbar{font-size:12px}
}

/* keep footnote markers small next to the large target figure, and align card rows */
.pl-target sup{font-size:13px;font-weight:500;letter-spacing:0;vertical-align:top;position:relative;top:4px;margin-left:3px}
.pl-facts sup{font-size:10px}
.pl-card-top{min-height:24px;align-items:center}