/* /fund/trust-deed-investments/ — Tier 2 page CSS, V2. Loaded only by this page; tokens, type
   scale and buttons come from styles.css. Sizing is on @container page like every other page
   here (a viewport media query does not fire for the page shell in embedded or scaled contexts).

   Two structural rules carry the page:
   1. THE CONTENTS RAIL is the standard for long-form Fund / investment education pages: a
      sticky spine in columns 1–2, the reading column in 3–12, the rail released before the
      close. Its column is reserved for navigation and nothing else ever enters it.
   2. SECTION GROUNDS are painted by a full-bleed pseudo-element on the section, because the
      section itself only spans the reading column. isolation:isolate is load-bearing — without
      it the z-index:-1 ground paints behind the page background and the section silently keeps
      its neighbour's colour. A large FIXED inset, never -50vw: inside a scaled or embedded
      shell vw is not the shell's width. The page shell clips, so nothing overflows. */

.td{--td-r:6px}

/* ---- the 12-column frame ---- */
.td-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 40px;align-items:start}
.td-body{grid-column:3 / span 10;min-width:0}
.td-col{position:relative}
/* Sections after the rail's travel step back out to the full twelve columns. The reading column
   starts at column 3, whose left edge is pad + 2w + 80 — two gutters — so the step back is
   2w + 80; against the reading column's width B that is 0.2B + 8. Derived, not eyeballed. */
.td-fw{margin-left:calc(-20% - 8px);width:calc(120% + 8px)}

/* The rail. z-index is load-bearing: the grounds are painted by pseudo-elements on elements
   later in the DOM, so without a stacking position the rail is covered by every ground it
   scrolls past. The sticky element is the INNER box; its travel is bounded by the rail's own
   height, which trust-deeds-motion.js measures so the rail releases before the close. */
.td-rail{grid-column:1 / span 2;position:relative;z-index:2;align-self:start;height:var(--td-rail-h,auto)}
.td-rail__in{position:sticky;top:104px;padding:88px 0 40px}
.td-rail__t{font-family:var(--font-sans);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);margin:0 0 14px;transition:color 150ms cubic-bezier(.2,.6,.2,1)}
.td-rail__l{list-style:none;margin:0;padding:0;border-left:1px solid var(--line);transition:border-color 150ms cubic-bezier(.2,.6,.2,1)}
.td-rail__l a{display:block;padding:9px 0 9px 16px;margin-left:-1px;border-left:2px solid transparent;font-family:var(--font-sans);font-size:13px;line-height:1.35;color:var(--text-muted);text-decoration:none;transition:color 150ms cubic-bezier(.2,.6,.2,1),border-color 150ms cubic-bezier(.2,.6,.2,1)}
.td-rail__l a:hover{color:var(--brand-navy)}
.td-rail__l a.is-at{color:var(--brand-navy);border-left-color:var(--brand-accent);font-weight:600}
/* Crossing the Navy band, the rail's own Navy ink would be invisible: same rail, inverted ink,
   set from the ground actually passing behind it. */
.td-rail.is-inv .td-rail__t{color:var(--sky-300)}
.td-rail.is-inv .td-rail__l{border-left-color:rgba(145,195,235,.32)}
.td-rail.is-inv .td-rail__l a{color:var(--sky-300)}
.td-rail.is-inv .td-rail__l a:hover{color:var(--text-inverse)}
.td-rail.is-inv .td-rail__l a.is-at{color:var(--text-inverse);border-left-color:var(--brand-accent)}
@media (prefers-reduced-motion:reduce){.td-rail__t,.td-rail__l,.td-rail__l a{transition:none}}

/* ---- section shells and grounds ---- */
.td .sec{background:none}
.td-sec{position:relative;isolation:isolate;padding:88px 0}
.td-sec::before{content:"";position:absolute;top:0;bottom:0;left:-1600px;right:-1600px;z-index:-1}
.td-sec.fog::before{background:var(--brand-fog)}
.td-sec.white::before{background:#fff}
.td-sec.paper::before{background:var(--brand-paper)}
.td-sec.navy::before{background:var(--brand-navy)}
.td-sec.navy{padding:96px 0}

/* ---- shared type ---- */
.td-h1{font-size:52px;line-height:1.04;letter-spacing:-.028em;color:var(--brand-navy);max-width:17ch;margin-top:12px}
.td-h2{font-size:38px;line-height:1.07;letter-spacing:-.022em;color:var(--brand-navy);max-width:20ch}
.td-lead{margin-top:22px;font-size:19px;line-height:1.58;color:var(--text-secondary);max-width:44ch}
.td-sf{font-family:var(--font-sans);font-size:17px;line-height:1.6;color:var(--text-primary);margin:18px 0 0;max-width:60ch}
.td-detail{font-family:var(--font-sans);font-size:15px;line-height:1.62;color:var(--text-secondary);margin:14px 0 0;max-width:62ch}
.td-head--inv .td-h2{color:var(--text-inverse)}
.td-head--inv .eyebrow{margin-bottom:12px}
.td-head--inv .td-sf{color:rgba(216,234,248,.92)}
.td-foot{font-family:var(--font-sans);font-size:14.5px;line-height:1.62;color:var(--text-muted);margin:44px 0 0;max-width:76ch}
.td-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sky-800);text-decoration:none}
.td-link:hover{color:var(--sun-700)}
.td-more{margin-top:40px;display:flex;flex-wrap:wrap;gap:14px 40px}

/* ---- 1 hero: restrained Paper band, 7/5, contained portrait photography ---- */
.td-hero{position:relative;background:var(--brand-paper);padding:64px 0 76px}
.td-hero__g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 40px;align-items:center}
.td-hero__copy{grid-column:1 / span 6}
.td-hero__ph{grid-column:8 / span 5;margin:0;position:relative;isolation:isolate}
/* Interior-hero standard: quiet pale-Sky panel offset down-left behind the photograph. */
.td-hero__ph::before{content:"";position:absolute;inset:26px 44px -26px -26px;background:rgba(145,195,235,.30);border-radius:var(--td-r);z-index:-1}
.td-hero__ph img{display:block;width:100%;aspect-ratio:5 / 4;object-fit:cover;object-position:50% 62%;border-radius:var(--td-r)}
.td-hero__dev{grid-column:1 / -1;margin-top:24px}
.td-act{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px}

/* ---- 2 how it works: the three instruments as a sequence ---- */
.td-inst{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 52px}
.td-inst__p{position:relative;border-top:2px solid var(--brand-navy);padding:20px 0 0}
/* The connector: a hairline across the gutter, ending in a small arrowhead at the gutter's start. */
.td-inst__p:not(:last-child)::after{content:"";position:absolute;top:-1px;right:-52px;width:52px;border-top:1px solid rgba(0,43,84,.28)}
.td-inst__p:not(:last-child)::before{content:"";position:absolute;top:-5px;right:-9px;border:4px solid transparent;border-left-color:rgba(0,43,84,.4)}
.td-inst__n{font-family:var(--font-display);font-size:18px;color:var(--brand-accent)}
.td-inst__tag{font-family:var(--font-sans);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sky-800);margin:10px 0 0}
.td-inst__t{font-size:26px;line-height:1.14;letter-spacing:-.016em;color:var(--brand-navy);margin:8px 0 0;max-width:16ch}
.td-inst__d{font-family:var(--font-sans);font-size:15px;line-height:1.62;color:var(--text-secondary);margin:12px 0 0}
.td-inst__parts{margin:18px 0 0;display:grid;gap:0}
.td-inst__pr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:12px;padding:9px 0;border-top:1px solid rgba(0,43,84,.12)}
.td-inst__pr dt{font-family:var(--font-sans);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);padding-top:2px}
.td-inst__pr dd{font-family:var(--font-sans);font-size:14px;line-height:1.45;color:var(--text-primary);margin:0}

/* ---- 3 why: three statements, opened by Sun rules rather than numerals ---- */
.td-why{margin-top:56px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 52px}
.td-why__c{border-top:2px solid var(--brand-accent);padding-top:20px}
.td-why__t{font-size:26px;line-height:1.16;letter-spacing:-.016em;color:var(--brand-navy);margin:0;max-width:15ch}
.td-why__d{font-family:var(--font-sans);font-size:15.5px;line-height:1.64;color:var(--text-secondary);margin:12px 0 0}

/* ---- 4 the comparison: four rows, both paths identically weighted, divider centred ---- */
.td-cmp__t{margin-top:56px}
.td-cmp__hd,.td-cmp__r{display:grid;grid-template-columns:minmax(0,2.6fr) minmax(0,4.7fr) minmax(0,4.7fr);gap:0 56px}
.td-cmp__hd{align-items:end}
.td-cmp__ch{font-family:var(--font-display);font-weight:500;font-size:26px;line-height:1.14;letter-spacing:-.016em;color:var(--brand-navy);padding-bottom:16px;border-bottom:2px solid var(--brand-navy)}
.td-cmp__r{padding:24px 0;border-bottom:1px solid var(--line);align-items:start}
.td-cmp__k{font-family:var(--font-sans);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin:0;padding-top:5px}
.td-cmp__v{font-family:var(--font-display);font-weight:400;font-size:18px;line-height:1.5;color:var(--text-primary);margin:0;max-width:42ch}
.td-cmp__hd>*:nth-child(2),.td-cmp__r>*:nth-child(2){padding-right:28px}
.td-cmp__hd>*:last-child,.td-cmp__r>*:last-child{padding-left:28px;margin-left:-28px;border-left:1px solid rgba(0,43,84,.18);align-self:stretch}

/* ---- 5 underwriting and diligence: Navy, 2×3 ---- */
.td-dg__g{list-style:none;margin:52px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 48px}
.td-dg__i{border-top:1px solid rgba(145,195,235,.3);padding-top:20px}
.td-dg__n{font-family:var(--font-display);font-size:19px;color:var(--brand-accent)}
.td-dg__t{font-size:22px;line-height:1.16;letter-spacing:-.014em;color:var(--text-inverse);margin:8px 0 0;max-width:18ch}
.td-dg__d{font-family:var(--font-sans);font-size:14.5px;line-height:1.6;color:rgba(198,222,243,.86);margin:10px 0 0}

/* ---- 6 the diligence package: sticky heading left, numbered index right ---- */
.td-pkg__g{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:0 40px;align-items:start}
.td-pkg__hd{grid-column:1 / span 4;position:sticky;top:124px}
.td-pkg__hd .td-sf{max-width:34ch}
.td-pkg__hd .td-more{margin-top:28px}
.td-pkg__l{grid-column:5 / span 6;list-style:none;margin:0;padding:0;border-top:2px solid var(--brand-navy)}
.td-pkg__r{display:grid;grid-template-columns:52px minmax(0,1fr);gap:0 12px;padding:20px 0;border-bottom:1px solid var(--line)}
.td-pkg__n{font-family:var(--font-display);font-size:15px;color:var(--brand-accent);padding-top:4px}
.td-pkg__t{font-size:22px;line-height:1.18;letter-spacing:-.014em;color:var(--brand-navy);margin:0}
.td-pkg__d{font-family:var(--font-sans);font-size:15px;line-height:1.6;color:var(--text-secondary);margin:6px 0 0;max-width:52ch}
.td-pkg__dev{grid-column:1 / -1}

/* ---- 7 income and risk: two columns, one hairline between ---- */
.td-ir__g{margin-top:52px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}
.td-ir__c--risk{padding-left:28px;margin-left:-28px;border-left:1px solid rgba(0,43,84,.18)}
.td-ir__c{padding-right:28px}
.td-ir__k{font-family:var(--font-sans);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sky-800);margin:0 0 6px;padding-bottom:14px;border-bottom:2px solid var(--brand-navy)}
.td-ir__l{margin:0}
.td-ir__r{padding:18px 0;border-bottom:1px solid rgba(0,43,84,.12)}
.td-ir__r dt{font-family:var(--font-display);font-weight:500;font-size:20px;line-height:1.2;color:var(--brand-navy)}
.td-ir__r dd{font-family:var(--font-sans);font-size:15px;line-height:1.6;color:var(--text-secondary);margin:6px 0 0;max-width:46ch}
.td-disc{margin-top:44px;border-left:3px solid var(--brand-navy);background:#f3f5f6;padding:20px 24px}
.td-disc p{font-family:var(--font-sans);font-size:12.5px;line-height:1.7;color:var(--text-secondary)}

/* ---- 8 process ---- */
.td-steps{list-style:none;margin:52px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}
.td-steps__i{border-top:2px solid var(--brand-navy);padding-top:18px}
.td-steps__n{font-family:var(--font-display);font-size:17px;color:var(--brand-accent)}
.td-steps__t{font-size:20px;line-height:1.2;letter-spacing:-.012em;color:var(--brand-navy);margin:8px 0 0}
.td-steps__d{font-family:var(--font-sans);font-size:14.5px;line-height:1.6;color:var(--text-secondary);margin:10px 0 0}

/* ---- 9 the close: full width beneath the rail's travel ---- */
.td-cl{position:relative;isolation:isolate;color:var(--text-inverse)}
.td-cl::before{content:"";position:absolute;top:0;bottom:0;left:-1600px;right:-1600px;background:var(--brand-navy);z-index:-1}
.td-cl__g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px 40px;padding:108px 0 112px;align-items:start}
.td-cl__copy{grid-column:1 / span 6}
.td-cl__act{grid-column:8 / span 5;display:grid;gap:14px;justify-items:start}
.td-cl__h{font-size:44px;line-height:1.05;letter-spacing:-.026em;color:var(--text-inverse);max-width:14ch}
.td-cl__l{font-family:var(--font-sans);font-size:17px;line-height:1.62;color:rgba(198,222,243,.86);margin:20px 0 0;max-width:48ch}
/* On Navy the design system's Navy primary would vanish: Sun carries the action. */
.td-cl__act .ds-btn--primary{background:var(--brand-accent);border-color:var(--brand-accent);color:var(--brand-navy)}
.td-cl__act .ds-btn--primary:hover{background:var(--sun-700);border-color:var(--sun-700);color:var(--brand-navy)}
.td-cl__sec{display:grid;width:100%;margin-top:6px;border-top:1px solid rgba(145,195,235,.3)}
.td-cl__sec .td-link{padding:14px 0;border-bottom:1px solid rgba(145,195,235,.18);width:100%;color:var(--brand-sky)}
.td-cl__sec .td-link:hover{color:var(--text-inverse)}

/* ---- entrances: additive only; the page is finished without them ---- */
html.td .td-rv>*{opacity:0;transform:translateY(10px)}
html.td .td-rv.is-in>*{opacity:1;transform:none;transition:opacity 300ms cubic-bezier(.2,.6,.2,1),transform 300ms cubic-bezier(.2,.6,.2,1)}
@media (prefers-reduced-motion:reduce){html.td .td-rv{opacity:1;transform:none}}

/* ---- responsive ---- */
@container page (max-width:1180px){
  .td-h1{font-size:44px}
  .td-inst{gap:0 40px}
  .td-inst__p:not(:last-child)::after{right:-40px;width:40px}
  .td-why{gap:0 40px}
  .td-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .td-dg__g{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container page (max-width:1000px){
  /* The rail is a desktop reading aid: below this the reading column takes the full width and
     the navigation is dropped rather than shrunk into an unusable column. */
  .td-rail{display:none}
  .td-body{grid-column:1 / -1}
  .td-fw{margin-left:0;width:auto}
  .td-pkg__hd{position:static}
}
@container page (max-width:900px){
  .td-h1{font-size:36px}
  .td-h2{font-size:30px}
  .td-sec,.td-sec.navy{padding:64px 0}
  .td-hero{padding:48px 0 56px}
  .td-hero__g,.td-cl__g,.td-pkg__g{grid-template-columns:minmax(0,1fr);gap:32px}
  .td-hero__copy,.td-hero__ph,.td-hero__dev,.td-cl__copy,.td-cl__act,.td-pkg__hd,.td-pkg__l{grid-column:1 / -1}
  .td-hero__ph{max-width:460px}
  .td-hero__ph::before{display:none}
  .td-inst,.td-why,.td-dg__g{grid-template-columns:minmax(0,1fr);gap:36px}
  .td-inst__p:not(:last-child)::after,.td-inst__p:not(:last-child)::before{display:none}
  .td-ir__g{grid-template-columns:minmax(0,1fr);gap:44px}
  .td-ir__c,.td-ir__c--risk{padding:0;margin:0;border-left:0}
  .td-cmp__hd{display:none}
  .td-cmp__r{grid-template-columns:minmax(0,1fr);gap:14px}
  .td-cmp__v{max-width:none}
  .td-cmp__r>*:nth-child(2){padding-right:0}
  .td-cmp__r>*:last-child{padding-left:0;margin-left:0;border-left:0}
  .td-cmp__v:nth-of-type(2)::before{content:"Individual trust deed";display:block;font-family:var(--font-sans);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sky-800);margin-bottom:6px}
  .td-cmp__v:nth-of-type(3)::before{content:"Alliance Mortgage Fund";display:block;font-family:var(--font-sans);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sky-800);margin-bottom:6px}
  .td-cl__g{padding:72px 0}
  .td-cl__h{font-size:33px}
}
/* A 12-column grid with a 40px column gap has a 440px minimum: below 620px every grid on the
   page collapses to one column with no column gap, or the content is clipped at 390px. */
@container page (max-width:620px){
  .td-g,.td-hero__g,.td-cl__g,.td-pkg__g,.td-steps,.td-dg__g,.td-inst,.td-why,.td-ir__g,.td-cmp__r,.td-pkg__r{grid-template-columns:minmax(0,1fr);column-gap:0}
  .td-pkg__n{display:none}
  .td-h1{font-size:32px}
  .td-h2{font-size:26px}
}