/* Free tools and guides under /tools. Sits on top of the marketing site's own stylesheet, which
   scripts/tools/build.mjs inlines into every page, so colours, type and buttons come from there. */

.t-sec{background:#fff;color:var(--black);padding-block:clamp(48px,6vw,96px)}
.t-sec+.t-sec{padding-top:0}
.t-sec h2{font-size:clamp(30px,3.6vw,52px);max-width:16em}
.t-sec .lede{margin-top:16px}

/* ---- inputs on the left, answer on the right ---- */
.t-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.t-card{background:var(--off);border-radius:28px;padding:clamp(22px,3vw,40px)}
.t-card>h2,.t-card>h3{font-size:clamp(22px,2.2vw,30px);font-weight:500;letter-spacing:-.03em;line-height:1.14;max-width:none}
.t-card>h2+p,.t-card>h3+p{margin-top:10px;color:var(--grey);font-size:16px}
.t-out{background:var(--navy);color:#fff;position:sticky;top:96px}
.t-out .t-k{color:var(--grey-d)}
.t-k{display:block;font-size:15px;font-weight:500;color:var(--grey)}
.t-big{display:block;margin-top:10px;font-size:clamp(44px,5.4vw,76px);font-weight:500;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.t-big.acc{color:#b6a9f5}
.t-say{margin-top:16px;font-size:17px;line-height:1.45;color:rgba(255,255,255,.82);max-width:30em}
.t-rows{margin-top:26px;border-top:1px solid rgba(127,127,150,.28)}
.t-rows div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;border-bottom:1px solid rgba(127,127,150,.28);font-size:16px}
.t-rows span{opacity:.72}
.t-rows b{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}

/* ---- fields ---- */
.t-fields{display:grid;gap:18px;margin-top:24px}
.t-fields.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.t-f{display:grid;gap:8px;align-content:start}
.t-f label,.t-f legend{font-size:14.5px;font-weight:500;color:#4a4a57;padding:0}
.t-f small{font-size:13px;color:var(--grey);line-height:1.4}
.t-f input,.t-f select{width:100%;height:auto;font:inherit;font-size:17px;color:var(--ink);background:#fff;border:1.5px solid #8a8a96;border-radius:14px;padding:13px 16px;min-height:52px;font-variant-numeric:tabular-nums;appearance:none;-webkit-appearance:none}
.t-f select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%230A0A0F' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:12px;padding-right:40px}
.t-f input:focus,.t-f select:focus{outline:0;border-color:var(--black);box-shadow:0 0 0 1px var(--black)}
.t-f input[aria-invalid=true]{border-color:#b4443a}
.t-unit{position:relative}
.t-unit i{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--grey);pointer-events:none}
.t-unit i.r{left:auto;right:16px}
.t-unit input{padding-left:34px}
.t-unit.r input{padding-left:16px;padding-right:52px}
fieldset.t-f{border:0;margin:0;padding:0;min-width:0}
.t-opts{display:flex;flex-wrap:wrap;gap:8px}
.t-opts label{position:relative;cursor:pointer}
.t-opts input{position:absolute;opacity:0;width:100%;height:100%;inset:0;min-height:0;margin:0;cursor:pointer}
.t-opts span{display:block;padding:11px 18px;border-radius:999px;background:#fff;border:1.5px solid #c9c9d2;font-size:15.5px;font-weight:500;color:var(--black);transition:background-color .2s,color .2s,border-color .2s}
.t-opts input:checked+span{background:var(--black);border-color:var(--black);color:#fff}
.t-opts input:focus-visible+span{outline:2px solid var(--black);outline-offset:3px}
.t-more{margin-top:22px;border:0}
.t-more:first-child{border:0}
.t-more summary::-webkit-details-marker{display:none}
.t-more summary{display:flex;align-items:center;list-style:none;cursor:pointer;padding:0;font-size:15.5px;font-weight:500;letter-spacing:0;justify-content:flex-start;gap:8px;text-decoration:underline;text-underline-offset:3px}
.t-more summary::after{content:"+";width:auto;height:auto;background:none;font-size:18px;font-weight:400;transform:none!important}
.t-more[open] summary::after{content:"−"}

/* ---- bars ---- */
.t-bars{display:grid;gap:14px;margin-top:26px}
.t-bar{display:grid;gap:7px}
.t-bar div{display:flex;justify-content:space-between;gap:12px;font-size:15px}
.t-bar div b{font-weight:600;font-variant-numeric:tabular-nums}
.t-bar i{display:block;height:12px;border-radius:99px;background:rgba(127,127,150,.22);overflow:hidden}
.t-bar i u{display:block;height:100%;border-radius:99px;background:currentColor;opacity:.5;transition:width .5s var(--ease)}
.t-bar.acc i u{background:var(--purple);opacity:1}

/* ---- the form that opens the full report ---- */
.t-gate{background:#eeeafe;color:#231e5c;border-radius:28px;padding:clamp(24px,3.4vw,48px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px clamp(24px,5vw,72px);align-items:start}
.t-gate h2{font-size:clamp(26px,2.8vw,40px);font-weight:500;letter-spacing:-.035em;line-height:1.06;max-width:none}
.t-gate p{margin-top:14px;font-size:17px;opacity:.82;max-width:32em}
.t-gate ul{margin-top:18px;display:grid;border-top:1px solid rgba(35,30,92,.18)}
.t-gate li{padding:12px 0;border-bottom:1px solid rgba(35,30,92,.18);font-size:16px;font-weight:500}
.t-gate form{display:grid;gap:14px}
.t-gate .t-f label{color:#231e5c}
.t-gate .t-f input{border-color:#8f88c9}
.t-gate .btn{margin-top:6px;justify-self:start}
.t-gate .btn[disabled]{opacity:.55;pointer-events:none}
.t-gate .t-note{margin-top:0;font-size:13px;line-height:1.5;opacity:.74}
.t-gate .t-err{margin-top:0;font-size:15px;font-weight:500;color:#b4443a;opacity:1}
.t-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.t-done{background:var(--off);border-radius:28px;padding:clamp(22px,3vw,36px);display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between}
.t-gate,.t-done{scroll-margin-top:100px}
.t-done p{font-size:19px;font-weight:500;letter-spacing:-.02em;max-width:26em}
.t-done .row{flex:none}

/* ---- the full report ---- */
.t-report{display:grid;gap:16px;margin-top:16px}
.t-report>h2{margin:clamp(24px,3vw,40px) 0 8px}
.t-table{width:100%;border-collapse:collapse;margin-top:20px;font-size:15.5px;font-variant-numeric:tabular-nums}
.t-table th,.t-table td{padding:11px 12px 11px 0;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
.t-table th:first-child,.t-table td:first-child{text-align:left;white-space:normal}
.t-table th{font-size:13.5px;font-weight:500;color:var(--grey)}
.t-table tr.on td{font-weight:600}
.t-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.t-list{display:grid;margin-top:20px;border-top:1px solid var(--line)}
.t-list li{padding:16px 0;border-bottom:1px solid var(--line);display:grid;gap:4px}
.t-list b{font-weight:600;font-size:17px;letter-spacing:-.01em}
.t-list span{color:var(--grey);font-size:16px;line-height:1.5}
.t-list.num{counter-reset:n}
.t-list.num li{grid-template-columns:44px minmax(0,1fr);column-gap:8px}
.t-list.num li::before{counter-increment:n;content:counter(n);grid-row:span 2;width:32px;height:32px;border-radius:50%;background:var(--black);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:600}
.t-list.num li>*{grid-column:2}
.t-flag{display:inline-block;font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:99px;background:#fff;border:1px solid var(--line);margin-right:8px;vertical-align:2px}
.t-flag.w{background:#fbf1de;border-color:#ecd6a8;color:#7a5210}
.t-flag.ok{background:#e3f4ec;border-color:#b8e0cc;color:#14613f}
.t-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.t-cols.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.t-fine{font-size:13.5px;line-height:1.6;color:var(--grey);max-width:76ch}
.t-fine+.t-fine{margin-top:10px}
.t-fine a,.t-prose a{text-decoration:underline;text-underline-offset:3px}

/* ---- guides: long-form reading ---- */
.t-prose{max-width:44em}
.t-prose h2{font-size:clamp(26px,2.8vw,40px);margin-top:clamp(40px,5vw,64px);line-height:1.06}
.t-prose h3{font-size:21px;font-weight:600;letter-spacing:-.02em;margin-top:32px;line-height:1.25}
.t-prose p,.t-prose ul,.t-prose ol{margin-top:14px;font-size:18px;line-height:1.6;color:#2c2c36}
.t-prose ul,.t-prose ol{display:grid;gap:10px;padding-left:22px}
.t-prose ul{list-style:disc}
.t-prose ol{list-style:decimal}
.t-prose strong{font-weight:600;color:var(--black)}
.t-check{display:grid;margin-top:18px;border-top:1px solid var(--line)}
.t-check li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:4px 12px;padding:15px 0;border-bottom:1px solid var(--line)}
.t-check li::before{content:"";grid-row:span 2;width:20px;height:20px;border-radius:6px;border:1.5px solid #8a8a96;margin-top:3px}
.t-check b{font-weight:600;font-size:17px}
.t-check span{grid-column:2;color:var(--grey);font-size:16px;line-height:1.5}
.t-toc{display:grid;margin-top:22px;border-top:1px solid rgba(127,127,150,.28);counter-reset:n}
.t-toc li{counter-increment:n;display:grid;grid-template-columns:36px minmax(0,1fr);padding:14px 0;border-bottom:1px solid rgba(127,127,150,.28);font-size:17px;font-weight:500}
.t-toc li::before{content:counter(n,decimal-leading-zero);opacity:.5;font-variant-numeric:tabular-nums}

/* ---- questions, as on the landing page ---- */
.t-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px clamp(32px,6vw,96px);align-items:start}
.t-faq details{border-bottom:1px solid var(--line)}
.t-faq details:first-child{border-top:1px solid var(--line)}
.t-faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-size:clamp(18px,1.7vw,21px);font-weight:600;letter-spacing:-.025em;line-height:1.25;cursor:pointer;list-style:none;text-wrap:pretty}
.t-faq summary::-webkit-details-marker{display:none}
.t-faq summary::after{content:"";width:34px;height:34px;flex:none;border-radius:50%;background-color:var(--off);background-image:linear-gradient(var(--black),var(--black)),linear-gradient(var(--black),var(--black));background-size:12px 2px,2px 12px;background-position:50%,50%;background-repeat:no-repeat;transition:transform .3s var(--ease)}
.t-faq details[open] summary::after{transform:rotate(45deg)}
.t-faq details p{padding:0 54px 24px 0;font-size:17px;line-height:1.55;color:var(--grey);max-width:60ch}

/* ---- the list of tools on /tools and at the foot of each page ---- */
.t-hub{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(28px,3.4vw,48px)}
.t-tile{background:var(--off);border-radius:28px;padding:clamp(22px,2.6vw,34px);display:flex;flex-direction:column;gap:10px;min-height:250px;transition:transform .3s var(--ease),background-color .2s}
.t-tile:hover{transform:translateY(-4px);background:#eeeef2}
.t-tile .tag{margin:0;font-size:13.5px}
.t-tile h3{font-size:clamp(21px,1.9vw,26px);font-weight:500;letter-spacing:-.03em;line-height:1.16}
.t-tile p{font-size:16px;line-height:1.45;color:var(--grey)}
.t-tile u{margin-top:auto;padding-top:14px;font-weight:500;font-size:15.5px;text-decoration:underline;text-underline-offset:3px}
.t-tile.big{grid-column:span 2;background:var(--navy);color:#fff}
.t-tile.big:hover{background:#1c1b3a}
.t-tile.big p{color:var(--grey-d);max-width:30em}
.t-tile.big h3{font-size:clamp(28px,3vw,44px);letter-spacing:-.04em;line-height:1.04}

@media (max-width:920px){
  .t-grid,.t-gate,.t-cols,.t-cols.three,.t-faq{grid-template-columns:minmax(0,1fr)}
  .t-out{position:static}
  .t-hub{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .t-fields.two{grid-template-columns:minmax(0,1fr)}
  .t-hub{grid-template-columns:minmax(0,1fr)}
  .t-tile.big{grid-column:auto}
  .t-tile{min-height:0}
}

/* Save as PDF: the page prints as the report alone. */
@media print{
  .nav,.end,.skip,.t-gate,.t-done .row,.t-noprint,.bk{display:none!important}
  .r-hero{background:#fff!important;color:#000!important;padding-block:0 16px!important}
  .r-hero h1{font-size:30px!important}
  .r-hero .sub,.r-hero .eyebrow,.r-hero .meta{color:#444!important}
  .t-sec{padding-block:12px!important}
  .t-out{position:static;background:#f5f5f7!important;color:#000!important}
  .t-out .t-say,.t-out .t-k{color:#333!important}
  .t-big.acc{color:#5b49c8!important}
  .t-card,.t-table tr,.t-list li,.t-check li{break-inside:avoid}
}

/* ---- fund search and the list of holdings (portfolio check, commission calculator) ---- */
.t-find{position:relative}
.t-hits{position:absolute;z-index:5;left:0;right:0;top:calc(100% + 6px);background:#fff;border-radius:18px;box-shadow:0 24px 60px -18px rgba(15,10,60,.35),0 0 0 1px rgba(10,10,30,.08);padding:6px;max-height:330px;overflow-y:auto}
.t-hits button{display:block;width:100%;text-align:left;padding:11px 14px;border-radius:12px;font-size:15.5px;line-height:1.35}
.t-hits button:hover,.t-hits button:focus-visible{background:var(--off);outline:0}
.t-hits p{padding:11px 14px;font-size:15px;color:var(--grey)}
.t-holds{display:grid;margin-top:22px;border-top:1px solid var(--line)}
.t-hold{display:grid;grid-template-columns:minmax(0,1fr) 170px 36px;gap:6px 12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.t-hold b{display:block;font-weight:600;font-size:16px;line-height:1.3}
.t-hold span{display:block;font-size:13.5px;color:var(--grey);margin-top:3px}
.t-hold .t-unit input{min-height:46px;padding-block:9px}
.t-hold>button{width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid var(--line);font-size:19px;line-height:1;color:var(--grey)}
.t-hold>button:hover{color:var(--black);border-color:#8a8a96}
.t-link{font-size:15.5px;font-weight:500;text-decoration:underline;text-underline-offset:3px}
@media (max-width:600px){.t-hold{grid-template-columns:minmax(0,1fr) 36px}.t-hold .t-unit{grid-column:1/-1;grid-row:2}}

/* ---- fund and category pages (/tools/fund-check/…, /tools/funds/…) ---- */
.t-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(22px,2.6vw,34px)}
.t-chip{display:block;padding:10px 16px;border-radius:999px;background:var(--off);font-size:15px;font-weight:500;transition:background-color .2s}
.t-chip:hover{background:#e9e9ee}
.t-table a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:#b9b9c4}
.t-table a:hover{text-decoration-color:currentColor}
.t-n{display:inline-block;min-width:2.1em;color:var(--grey);font-variant-numeric:tabular-nums}

/* ---- statement upload on the portfolio check ---- */
.t-drop{display:grid;gap:12px;margin-top:22px;padding:22px;background:#fff;border:1.5px dashed #8a8a96;border-radius:20px}
.t-drop>b{font-size:18px;font-weight:600;letter-spacing:-.02em}
.t-drop>span,.t-drop>small{font-size:14.5px;line-height:1.5;color:var(--grey)}
.t-drop>small:empty{display:none}