/* ============================================================
   TERMS - the approved design's own stylesheet.
   Generated by bin/build-page-template.php. Do not edit here:
   edit the design and rebuild, or the page stops matching what
   was signed off.

   Written out as authored and scoped by where it loads - only on
   the page using this template - so the selectors without a
   .pe-terms prefix cannot reach anything else.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Poppins:wght@400;500;600;700&display=swap');

/* theme reset - rule 10. Scoped, first, and deliberately not !important so the
   page's own rules below still take precedence in the normal way. */
.pe-terms h1, .pe-terms h2, .pe-terms h3, .pe-terms h4, .pe-terms h5, .pe-terms h6 {
  text-transform:none; letter-spacing:normal; color:inherit }
.pe-terms p, .pe-terms ul, .pe-terms ol, .pe-terms li { margin:0 }
.pe-terms a { text-decoration:none; color:inherit; box-shadow:none }
.pe-terms img, .pe-terms svg { max-width:100%; height:auto }

.pe-terms{
  --ink:#17233B; --navy:#204287; --navy-soft:#E8EFF8; --gold:#FFBB26;
  --navy-dk:#1B3873; --navy-lt:#224B9A; --blue:#2A6DF2; --title:#16305F;
  --line:#D9E6F5; --wash:#F8FAFF; --card:#F0F6FB; --card-2:#F8FAFF;
  --grey:#5A6B84; --paper:#FFFFFF;
  --display:'Playfair Display',Georgia,serif;
  --body:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:10px;
  width:100%;max-width:100%;margin-left:auto;margin-right:auto;box-sizing:border-box;
  font-family:var(--body);color:var(--ink);line-height:1.65;font-size:16.5px}
.pe-terms *,.pe-terms *::before,.pe-terms *::after{box-sizing:border-box}
.pe-terms .wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.pe-terms .narrow{max-width:80ch}
.pe-terms .eyebrow{font-family:var(--body);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--gold);margin-bottom:14px}
.pe-terms :focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

/* ---------- hero ---------- */
.pe-terms .hero{background:linear-gradient(150deg,var(--navy-dk) 0%,var(--navy) 52%,var(--navy-lt) 100%);color:#fff;padding:54px 0 52px}
.pe-terms .hero .orgname{font-family:var(--display);font-size:clamp(1.5rem,2.5vw,1.95rem);font-weight:700;color:#fff;letter-spacing:-.005em;margin:0 0 6px;line-height:1}
.pe-terms .hero .orgname span{color:var(--gold)}
.pe-terms .hero .heroeyebrow{font-family:var(--body);font-size:11.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:#9FC0EC;margin:0 0 30px;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.18);max-width:60ch}
.pe-terms .hero h1{font-family:var(--display);font-size:clamp(2.1rem,4.4vw,3.2rem);font-weight:600;color:#fff;max-width:20ch;letter-spacing:-.015em;margin:0;line-height:1.13}
.pe-terms .hero h1 .h1-lead{color:var(--gold);font-weight:700}
.pe-terms .hero-sub{font-family:var(--display);font-style:italic;color:#8FBCFA;font-size:clamp(1.3rem,2.6vw,1.85rem);line-height:1.2;margin:.22em 0 0;font-weight:500;max-width:34ch}
.pe-terms .hero-meta{margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.18);display:flex;flex-wrap:wrap;gap:10px 38px}
.pe-terms .hero-meta div{min-width:150px}
.pe-terms .hero-meta dt{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#9FC0EC;margin:0 0 3px}
.pe-terms .hero-meta dd{margin:0;font-size:15.5px;font-weight:600;color:#fff}

/* ---------- contents ---------- */
.pe-terms .pagenav{background:#fff;border-bottom:1px solid var(--line)}
.pe-terms .pagenav .wrap{padding-top:20px;padding-bottom:20px}
.pe-terms .pagenav b{display:block;font-family:var(--body);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);margin-bottom:11px}
.pe-terms .pagenav ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:7px 30px;counter-reset:toc}
.pe-terms .pagenav li{counter-increment:toc}
.pe-terms .pagenav a{font-size:15px;color:var(--navy);border-bottom:1.5px solid transparent;padding-bottom:1px}
.pe-terms .pagenav a::before{content:counter(toc) ". ";color:var(--grey);font-weight:600}
.pe-terms .pagenav a:hover{border-bottom-color:var(--blue)}

/* ---------- body ---------- */
.pe-terms .section{padding:46px 0}
.pe-terms .section.tint{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pe-terms .intro{background:var(--card-2);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:var(--r);padding:24px 28px;max-width:80ch}
.pe-terms .intro p{font-size:17px;font-weight:600;color:var(--navy)}
.pe-terms .intro p + p{margin-top:12px;font-size:15px;font-weight:400;color:var(--grey)}
.pe-terms h2{font-family:var(--display);font-size:clamp(1.45rem,2.5vw,1.95rem);font-weight:600;color:var(--title);letter-spacing:-.01em;line-height:1.25;margin:0 0 20px}
.pe-terms .clauses{list-style:none;margin:0;padding:0;max-width:82ch}
.pe-terms .clauses li{display:flex;gap:16px;padding:15px 0;border-top:1px solid var(--line)}
.pe-terms .clauses li:first-child{border-top:0;padding-top:0}
.pe-terms .clauses .n{flex:none;font-family:var(--body);font-size:13.5px;font-weight:700;color:var(--blue);min-width:26px;padding-top:3px}
.pe-terms .clauses p{font-size:16.2px;line-height:1.68}
.pe-terms .sec + .sec{margin-top:38px}
.pe-terms .trading{margin-top:8px;font-size:16px;color:var(--ink)}
.pe-terms .trading b{color:var(--navy)}
.pe-terms .related{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;list-style:none;padding:0}
.pe-terms .related a{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:8px;padding:11px 20px;font-size:15px;font-weight:600;color:var(--navy);min-height:44px;line-height:1.5}
.pe-terms .related a:hover{border-color:var(--blue);color:var(--blue)}
.pe-terms .note{font-size:14.6px;color:var(--grey);max-width:80ch;line-height:1.6}
.pe-terms .note + .note{margin-top:12px}

@media (max-width:760px){
  .pe-terms .hero .heroeyebrow{white-space:normal;letter-spacing:.13em}
  .pe-terms .hero{padding:44px 0 42px}
  .pe-terms .section{padding:36px 0}
}
@media (max-width:430px){
  .pe-terms .wrap{padding-left:16px;padding-right:16px}
  .pe-terms .pagenav ol{grid-template-columns:1fr}
  .pe-terms .intro{padding-left:20px;padding-right:20px}
  .pe-terms .clauses li{gap:12px}
}
