/* plus.css — Boroughly Plus components.
   Extends styles.css's existing tokens rather than introducing new ones:
   leaf (green) stays the "free, trustworthy core" colour throughout the site;
   marigold (gold) is reserved for anything Plus/premium, echoing how it's
   already used for the quote-accent and "beta" pill in home.css. Nothing here
   overrides an existing selector, so this file is safe to load everywhere. */

.plus-badge{
  display:inline-flex; align-items:center; gap:4px;
  font-family:'Spline Sans Mono',monospace; font-size:10.5px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase;
  background:#FBEEDA; color:#8A5A12; border:1px solid #EBD3A6;
  border-radius:999px; padding:3px 9px 3px 7px;
}
.plus-badge::before{ content:"◆"; font-size:8px; color:var(--marigold); }

/* nav CTA — a small filled pill so "Plus" doesn't blend into the plain-text
   nav links either side of it. Written as `header.site nav a.navplus` (not
   just `nav a.navplus`) because index.html's home.css sets `header.site nav
   a { padding: 4px 0 }` for its own layout, which is MORE specific than a
   plain `nav a.navplus` and was silently collapsing the pill's horizontal
   padding down to zero there. Matching that specificity here keeps the pill
   a pill on every page regardless of which other stylesheet is loaded. */
header.site nav a.navplus, .sitenav a.navplus{
  display:inline-flex; align-items:center;
  background:var(--marigold); color:#fff !important; font-weight:800;
  padding:6px 14px !important; border-radius:999px;
  margin-left:10px !important; margin-right:0 !important;
  font-size:13px !important; line-height:1.1;
}
header.site nav a.navplus:hover, .sitenav a.navplus:hover{ background:#CC8A28; }
header.site nav a.navplus.is-member, .sitenav a.navplus.is-member{ background:var(--leaf); }

/* ---- teaser card: replaces old ad-space placeholders ---- */
.plus-teaser{
  margin:22px 0; border:1.5px solid #EBD3A6; border-radius:14px;
  background:linear-gradient(135deg,#FFFDF8 0%,#FBEEDA 130%);
  padding:18px 20px; display:flex; gap:14px; align-items:flex-start;
}
.plus-teaser .icon{
  flex-shrink:0; width:38px; height:38px; border-radius:10px;
  background:var(--marigold); color:#fff; display:flex; align-items:center;
  justify-content:center; font-size:17px;
}
.plus-teaser .body{ flex:1; min-width:0; }
.plus-teaser h4{
  font-family:'Bricolage Grotesque',sans-serif; font-size:15.5px; margin:0 0 3px;
  color:var(--ink);
}
.plus-teaser p{ margin:0 0 10px; font-size:13.5px; color:var(--mute); }
.plus-teaser a.unlock{
  display:inline-block; background:var(--marigold); color:#fff; text-decoration:none;
  font-weight:800; font-size:13px; padding:8px 16px; border-radius:999px;
}
.plus-teaser a.unlock:hover{ background:#CC8A28; }
/* hidden once the visitor is confirmed Plus (plus.js toggles this) */
body.plus-active .plus-teaser{ display:none; }

/* ---- content that only fully appears once unlocked (kept for future use;
   nothing existing/free is ever wrapped in this by the site rebuild) ---- */
.plus-locked{ position:relative; }
body.plus-active .plus-locked .locked-overlay{ display:none; }
body.plus-active .plus-locked .locked-content{ filter:none; pointer-events:auto; }
.plus-locked .locked-content{ filter:blur(5px); pointer-events:none; user-select:none; }
.plus-locked .locked-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:8px; text-align:center; padding:16px;
}

/* ---- pricing page ---- */
.pricing-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:26px 0;
}
.pricecard{
  background:var(--card); border:1.5px solid var(--mist); border-radius:16px;
  padding:24px 22px; display:flex; flex-direction:column;
}
.pricecard.best{
  border-color:var(--marigold); box-shadow:0 10px 30px rgba(232,163,61,.16);
  position:relative;
}
.pricecard.best::before{
  content:"Best value"; position:absolute; top:-11px; left:20px;
  background:var(--marigold); color:#fff; font-size:11px; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; padding:4px 10px; border-radius:999px;
}
.pricecard .name{ font-family:'Bricolage Grotesque',sans-serif; font-size:17px; font-weight:700; }
.pricecard .tag{ font-size:12.5px; color:var(--mute); margin:2px 0 14px; }
.pricecard .amount{ font-family:'Spline Sans Mono',monospace; font-size:34px; font-weight:600; line-height:1; }
.pricecard .per{ font-size:13px; color:var(--mute); margin:2px 0 16px; }
.pricecard ul{ margin:0 0 20px; padding:0; list-style:none; flex:1; }
.pricecard li{ font-size:13.5px; margin:8px 0; padding-left:20px; position:relative; }
.pricecard li::before{ content:"✓"; position:absolute; left:0; color:var(--leaf); font-weight:800; }
.pricecard button, .pricecard a.buy{
  display:block; text-align:center; text-decoration:none; border:0; cursor:pointer;
  background:var(--ink); color:#fff; font-weight:800; font-size:14.5px;
  padding:13px; border-radius:999px; font-family:inherit;
}
.pricecard.best button, .pricecard.best a.buy{ background:var(--marigold); }
.pricecard.best button:hover, .pricecard.best a.buy:hover{ background:#CC8A28; }
.pricecard button:hover, .pricecard a.buy:hover{ background:#000; }
@media (max-width:820px){ .pricing-grid{ grid-template-columns:1fr; } }

/* ---- free vs plus table ---- */
table.fvp td:nth-child(2), table.fvp td:nth-child(3),
table.fvp th:nth-child(2), table.fvp th:nth-child(3){
  text-align:center; width:110px;
}
table.fvp .yes{ color:var(--leaf); font-weight:800; }
table.fvp .no{ color:var(--mist); }
table.fvp .yes.plus{ color:#B5791F; }

/* ---- account / welcome pages ---- */
.acct-card{
  background:var(--card); border:1px solid var(--mist); border-radius:16px;
  padding:26px 24px; max-width:420px; margin:24px auto;
}
.acct-status{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.acct-dot{ width:10px; height:10px; border-radius:50%; background:var(--leaf); }
.acct-dot.off{ background:var(--brick); }
.acct-row{ display:flex; justify-content:space-between; font-size:14px; padding:9px 0; border-bottom:1px solid var(--mist); }
.acct-row:last-of-type{ border-bottom:0; }

/* ---- Ask-this-area widget (Plus AI Q&A) ---- */
.askbox{
  border:1px solid var(--mist); border-radius:14px; background:var(--card);
  padding:16px 18px; margin:16px 0;
}
.askbox h4{ font-family:'Bricolage Grotesque',sans-serif; font-size:15px; margin:0 0 8px; }
.askbox .row{ display:flex; gap:8px; }
.askbox input{
  flex:1; border:1.5px solid var(--mist); border-radius:999px; padding:10px 15px;
  font-family:inherit; font-size:13.5px;
}
.askbox input:focus{ outline:none; border-color:var(--marigold); }
.askbox button{
  background:var(--marigold); color:#fff; border:0; border-radius:999px;
  padding:10px 18px; font-weight:800; font-size:13.5px; cursor:pointer; white-space:nowrap;
}
.askbox button:disabled{ opacity:.55; cursor:default; }
.askbox .answer{ margin-top:12px; font-size:14px; color:var(--ink); white-space:pre-line; }
.askbox .hint{ font-size:12px; color:var(--mute); margin-top:8px; }

/* ---- report CTA on guide pages ---- */
.report-cta{
  border:1.5px solid var(--mist); border-radius:14px; background:var(--card);
  padding:18px 20px; margin:22px 0; display:flex; align-items:center; gap:14px;
  flex-wrap:wrap;
}
.report-cta .body{ flex:1; min-width:220px; }
.report-cta h4{ font-family:'Bricolage Grotesque',sans-serif; font-size:15px; margin:0 0 3px; }
.report-cta p{ margin:0; font-size:13px; color:var(--mute); }
.report-cta button, .report-cta a{
  background:var(--leaf); color:#fff; border:0; text-decoration:none; cursor:pointer;
  font-weight:800; font-size:13.5px; padding:10px 18px; border-radius:999px; font-family:inherit;
}
body.plus-active .report-cta{ border-color:var(--leaf); }

@media (max-width:600px){
  .plus-teaser{ flex-direction:column; }
}