/* The fund pages, laid out as fund sites lay them out (the user, 2026-10-14):
   the photograph opening (cover.css), one bar of key facts, how the fund
   works, who it suits, how to invest, the funds side by side, documents and
   one panel of important information. Loaded by those sections only. */

/* Key facts: a fact-sheet bar under the opening, each label over its value,
   four to a row. The hairlines are each cell's right and bottom edge, pulled
   1px out and clipped, so a short last row leaves no stray line. */
.fund-facts{padding:28px 0 0;background:var(--warm)}
.fund-facts-bar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;overflow:hidden;border:1px solid var(--hair);border-radius:16px;background:var(--surface);box-shadow:0 12px 30px rgba(53,0,79,.05)}
.fund-facts-bar > div{min-width:0;margin:0 -1px -1px 0;padding:20px 24px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.fund-facts-bar dt{font-size:var(--fs-small);font-weight:600;color:var(--muted)}
.fund-facts-bar dd{margin:6px 0 0;font-family:var(--font-head);font-size:var(--fs-h3);font-weight:700;line-height:1.25;color:var(--text)}
@media (max-width:900px){.fund-facts-bar{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .fund-facts{padding-top:20px}
  .fund-facts-bar > div{padding:16px}
  .fund-facts-bar dd{font-size:var(--fs-body)}
}

/* One ground from the facts bar to the pager, so the sections need no air of
   their own to tell them apart: each keeps half the usual padding, and two
   sit one section's space apart rather than two (the user, 2026-10-14). The
   folds keep their 7px between rows. `html body` outranks product.css and
   fold.css, whichever of them loads last. */
html body .fund-cover ~ :is(.section,.fold-section){padding-block:clamp(24px,2.5vw,32px)}
html body .fund-cover ~ .fold-section + .fold-section{padding-top:7px}
html body .fund-cover ~ .fold-section:has(+ .fold-section){padding-bottom:7px}
/* How to invest's heading has no eyebrow over it here, so no eyebrow's gap. */
html body .fund-cover ~ .prod-section .prod-head h2:first-child{margin-top:0}

/* How the fund works: short cards, so their words start level rather than
   justified into gaps. */
.fund-cover ~ .section .portal-tile p{text-align:left;-webkit-hyphens:manual;hyphens:manual}

/* Is this fund for you? Two lists side by side: who it suits, ticked; and
   where else to look, each with its link. */
.fit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6);margin-top:var(--space-8)}
.fit-grid.one{grid-template-columns:minmax(0,1fr);max-width:44rem}
.fit-card{padding:28px;border:1px solid var(--hair);border-radius:16px;background:var(--surface)}
.fit-card h3{margin:0 0 var(--space-4);font-family:var(--font-head);font-size:var(--fs-h3);color:var(--plum)}
.fit-card ul{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.fit-card li{position:relative;padding-left:32px;line-height:1.55;color:var(--text);text-align:left}
.fit-yes li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:var(--lime)}
.fit-yes li::after{content:"";position:absolute;left:7px;top:6px;width:5px;height:9px;border:solid var(--plum-dark);border-width:0 2px 2px 0;transform:rotate(45deg)}
.fit-other{background:var(--plum-tint)}
.fit-other li{display:grid;gap:4px}
.fit-other li::before{content:"";position:absolute;left:3px;top:6px;width:12px;height:12px;border-radius:50%;border:2px solid var(--plum-300)}
.fit-other a{display:inline-flex;align-items:center;gap:6px;justify-self:start;font-size:var(--fs-small);font-weight:700;color:var(--plum);text-decoration:none;border-bottom:2px solid var(--lime)}
.fit-other a:hover .ar{transform:translateX(3px)}
@media (max-width:760px){.fit-grid{grid-template-columns:minmax(0,1fr)}.fit-card{padding:22px}}

/* How to invest: the button under the steps, and their words starting level
   (a third of the width is too narrow to justify) with an email address
   free to break. */
.steps-action{margin-top:var(--space-8)}
.fund-cover ~ .section .prod-steps p{text-align:left;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:anywhere}

/* The funds side by side: the column being read in the lime tint, the row
   labels holding still while a phone scrolls the table. */
.compare-scroll{margin-top:var(--space-8);overflow-x:auto;border:1px solid var(--hair);border-radius:16px;background:var(--surface)}
.compare-table{width:100%;min-width:560px;border-collapse:collapse}
.compare-table :is(th,td){padding:16px 20px;border-bottom:1px solid var(--hair);text-align:left;vertical-align:top;line-height:1.5}
.compare-table tbody tr:last-child > *{border-bottom:0}
.compare-table thead th{font-family:var(--font-head);font-size:var(--fs-h3);line-height:1.25;color:var(--plum)}
.compare-table thead a{color:inherit;text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:2px;text-underline-offset:4px}
.compare-table tbody th{position:sticky;left:0;width:24%;background:var(--surface);font-size:var(--fs-small);font-weight:600;color:var(--muted)}
.compare-table td{color:var(--text)}
.compare-table .is-here{background:var(--accent-soft)}
.compare-here{display:block;margin-bottom:4px;font-family:var(--font-body);font-size:12px;font-weight:700;color:var(--accent-ink)}
/* All five funds (2026-10-14): a narrower label column, and on a phone a
   wider table to scroll, so no fund's column is squeezed to a word a line. */
.compare-table:is([data-n="4"],[data-n="5"]){min-width:860px}
.compare-table:is([data-n="4"],[data-n="5"]) tbody th{width:16%}
.compare-table:is([data-n="4"],[data-n="5"]) thead th{font-size:var(--fs-body)}

/* Documents: a card each, its icon, title and one line, and what it does. */
.doc-cards{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:var(--space-4);margin:var(--space-8) 0 0;padding:0;list-style:none}
.doc-card{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;height:100%;padding:22px 24px;border:1px solid var(--hair);border-radius:16px;background:var(--surface);color:var(--text);text-decoration:none;transition:border-color .2s,box-shadow .2s}
.doc-card-icon{grid-row:span 2;display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:var(--plum-tint);color:var(--plum)}
.doc-card-text{display:grid;gap:4px}
.doc-card-text b{font-family:var(--font-head);font-size:var(--fs-h3);line-height:1.25;color:var(--plum)}
.doc-card-text span{font-size:var(--fs-small);color:var(--muted)}
.doc-card-go{grid-column:2;display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:var(--fs-small);font-weight:700;color:var(--plum)}
.doc-card:hover,.doc-card:focus-visible{border-color:var(--plum);box-shadow:0 12px 30px rgba(53,0,79,.08)}
.doc-card:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
@media (max-width:900px){.doc-cards{grid-template-columns:minmax(0,1fr)}}

/* Important information as one panel: Compliance's warnings in view, the
   points to know before investing folded under a row inside it. */
.fund-notice{overflow:hidden;border:1px solid var(--hair);border-radius:16px;background:var(--surface)}
.fund-notice-head{display:flex;align-items:flex-start;gap:16px;padding:24px 28px}
.fund-notice-head > svg{flex:none;margin-top:3px;color:var(--plum)}
.fund-notice-head h2{margin:0 0 4px;font-family:var(--font-head);font-size:var(--fs-h3);line-height:1.3;color:var(--plum)}
.fund-notice-head p{margin:6px 0 0;font-size:var(--fs-small);line-height:1.6;color:var(--copy);text-align:left}
.fund-notice-more{border-top:1px solid var(--hair)}
.fund-notice-more > summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 28px;list-style:none;cursor:pointer;font-weight:700;color:var(--plum)}
.fund-notice-more > summary::-webkit-details-marker{display:none}
.fund-notice-more > summary:focus-visible{outline:3px solid var(--lime);outline-offset:-3px}
.fund-notice-chev{flex:none;display:grid;place-items:center;width:32px;height:32px;border:1px solid rgba(53,0,79,.2);border-radius:50%}
.fund-notice-chev::before{content:"";width:8px;height:8px;border-right:2px solid var(--plum);border-bottom:2px solid var(--plum);transform:translateY(-2px) rotate(45deg);transition:transform .2s ease}
.fund-notice-more[open] .fund-notice-chev::before{transform:translateY(2px) rotate(225deg)}
.fund-notice-intro{padding:0 28px;font-size:var(--fs-small);color:var(--muted)}
.fund-notice-intro p{margin:0}
.fund-notice-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 40px;margin:0;padding:16px 28px 24px}
.fund-notice-list dt{font-weight:700;color:var(--text)}
.fund-notice-list dd{margin:4px 0 0;font-size:var(--fs-small);line-height:1.6;color:var(--copy)}
.fund-notice-list dd p{margin:0;text-align:left}
.fund-notice-note{margin:0;padding:16px 28px;border-top:1px solid var(--hair);font-size:var(--fs-small);color:var(--copy)}
@media (max-width:720px){
  .fund-notice-head,.fund-notice-more > summary{padding-inline:18px}
  .fund-notice-list{grid-template-columns:minmax(0,1fr);padding-inline:18px}
  .fund-notice-intro,.fund-notice-note{padding-inline:18px}
}
@media (prefers-reduced-motion:reduce){.fund-notice-chev::before,.doc-card{transition:none}}