/* Interactive tools: Find your island, Rental returns, Where your money goes. Uses the site colours and fonts. */
.tl-intro{max-width:760px}
.tl-card{border:1px solid var(--line);border-radius:24px;background:#fff;box-shadow:0 26px 60px -42px rgba(15,39,71,.4);padding:clamp(20px,3.2vw,38px)}
.tl-note{font-size:.9rem;color:var(--muted);line-height:1.55;margin-top:16px}
.tl-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,36px);align-items:start}
@media (max-width:860px){.tl-grid{grid-template-columns:1fr}}

/* quiz */
.tl-progress{height:8px;background:#EEF1F5;border-radius:999px;overflow:hidden;margin-bottom:8px}
.tl-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),#DDB968);border-radius:999px;transition:width .45s ease}
.tl-step{font-size:.9rem;color:var(--muted);font-weight:600;margin-bottom:18px}
.tl-q h2,.tl-q h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,3.2vw,2.1rem);line-height:1.2;margin:0 0 20px;color:var(--ink)}
.tl-opts{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media (max-width:640px){.tl-opts{grid-template-columns:1fr}}
.tl-opt{display:flex;gap:14px;align-items:center;text-align:left;padding:16px 18px;min-height:64px;border:2px solid var(--line);border-radius:18px;background:#fff;font:inherit;font-size:1.02rem;font-weight:500;color:var(--ink);cursor:pointer;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,background .15s ease}
.tl-opt:hover,.tl-opt:focus-visible{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 14px 28px -18px rgba(15,39,71,.45);outline:none}
.tl-opt.on{border-color:var(--navy);background:var(--gold-soft)}
.tl-opt .em{font-size:1.7rem;line-height:1;flex:none}
.tl-back{background:none;border:0;color:var(--muted);font:inherit;font-weight:600;cursor:pointer;margin-top:18px;padding:6px 0}
.tl-fade{animation:tlfade .45s ease both}
@keyframes tlfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tl-fade{animation:none}.tl-progress i,.tl-bar i{transition:none}}
.tl-result .badge{display:inline-block;background:var(--gold-soft);color:#3b2f0d;font-weight:700;font-size:.85rem;border-radius:999px;padding:5px 13px;margin-bottom:10px}
.tl-result h2{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,5vw,3.2rem);line-height:1.08;margin:0 0 6px}
.tl-photo{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;border:1px solid var(--line);display:block}
.tl-tags{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.tl-tags span{background:#EEF1F5;border-radius:999px;padding:5px 12px;font-size:.88rem;font-weight:600;color:var(--navy)}
.tl-why{margin:12px 0 0;padding:0;list-style:none}
.tl-why li{padding-left:26px;position:relative;margin:7px 0;line-height:1.5}
.tl-why li:before{content:"";position:absolute;left:3px;top:.55em;width:11px;height:11px;border-radius:50%;background:var(--gold)}
.tl-bars{margin-top:20px}
.tl-bar{display:grid;grid-template-columns:150px 1fr 48px;gap:10px;align-items:center;margin:9px 0;font-size:.95rem}
@media (max-width:520px){.tl-bar{grid-template-columns:104px 1fr 44px;font-size:.88rem}}
.tl-bar b{font-weight:600}
.tl-bar .tr{height:14px;background:#EEF1F5;border-radius:999px;overflow:hidden}
.tl-bar .tr i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--navy),#2D5594);border-radius:999px;transition:width 1s cubic-bezier(.2,.8,.2,1)}
.tl-bar.top .tr i{background:linear-gradient(90deg,var(--gold),#DDB968)}
.tl-bar span.p{text-align:right;font-weight:700;color:var(--navy)}
.tl-acts{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.tl-share{border-top:1px solid var(--line);margin-top:24px;padding-top:18px}
.tl-share h3{font-family:var(--serif);font-weight:500;font-size:1.25rem;margin:0 0 10px}
.tl-banner{background:var(--gold-soft);border-radius:14px;padding:12px 16px;margin-bottom:16px;font-weight:600;color:#3b2f0d}
.tl-lead{background:#F6F8FB;border:1px solid var(--line);border-radius:18px;padding:clamp(16px,2.4vw,26px);margin-top:26px}
.tl-lead h3{font-family:var(--serif);font-weight:500;font-size:1.35rem;margin:0 0 6px}

/* sliders and controls */
.tl-ctl{margin:0 0 18px}
.tl-ctl label{display:flex;justify-content:space-between;gap:10px;font-weight:600;margin-bottom:6px}
.tl-ctl label output{color:var(--navy);font-weight:700}
.tl-ctl input[type=range]{width:100%;accent-color:var(--gold);height:30px}
.tl-ctl select,.tl-ctl input[type=number]{width:100%}
.tl-ctl .hint{display:block;font-size:.84rem;color:var(--muted);margin-top:2px;font-weight:400}
details.tl-more{border-top:1px solid var(--line);padding-top:12px;margin-top:6px}
details.tl-more summary{cursor:pointer;font-weight:600;color:var(--navy);padding:6px 0}

/* results tiles */
.tl-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:18px}
.tl-tile{border:1px solid var(--line);border-radius:16px;padding:14px 16px;background:#fff}
.tl-tile small{display:block;color:var(--muted);font-weight:600;font-size:.82rem}
.tl-tile b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,3vw,2rem);color:var(--navy);line-height:1.15;margin-top:2px}
.tl-tile.big{background:var(--navy);border-color:var(--navy)}.tl-tile.big small{color:#C9D3E4}.tl-tile.big b{color:#fff}
.tl-chart{width:100%;height:auto;display:block}
.tl-chart text{font-family:var(--sans);fill:#556074;font-size:12px}
.tl-chart .ax{stroke:#D5DCE6}
.tl-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:8px 0 0;font-size:.88rem}
.tl-legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.tl-split{display:flex;height:46px;border-radius:12px;overflow:hidden;margin:8px 0 6px;background:#EEF1F5}
.tl-split i{display:block;height:100%;transition:width .7s cubic-bezier(.2,.8,.2,1)}
.tl-keep{font-family:var(--serif);font-size:clamp(1.3rem,3vw,1.7rem);margin:10px 0 0}
.tl-keep b{color:var(--gold-text)}
.tl-donutwrap{position:relative;max-width:340px;margin:0 auto}
.tl-donutwrap .mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}
.tl-donutwrap .mid small{color:var(--muted);font-weight:600}
.tl-donutwrap .mid b{font-family:var(--serif);font-weight:500;font-size:1.7rem;color:var(--navy)}
.tl-list{list-style:none;margin:16px 0 0;padding:0}
.tl-list li{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line)}
.tl-list li:first-child{border-top:0}
.tl-list i{width:12px;height:12px;border-radius:4px;flex:none}
.tl-list span{flex:1}
.tl-list b{font-variant-numeric:tabular-nums}
.tl-hub{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:900px){.tl-hub{grid-template-columns:1fr}}
.tl-hubcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#fff;text-decoration:none;color:inherit;box-shadow:0 22px 50px -38px rgba(15,39,71,.45);transition:transform .2s ease,box-shadow .2s ease}
.tl-hubcard:hover{transform:translateY(-4px);box-shadow:0 28px 56px -34px rgba(15,39,71,.55)}
.tl-hubcard img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.tl-hubcard div{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.tl-hubcard h2{font-family:var(--serif);font-weight:500;font-size:1.5rem;margin:0}
.tl-hubcard p{margin:0;color:var(--muted);line-height:1.55}
.tl-hubcard .go{margin-top:auto;font-weight:700;color:var(--gold-text)}
.tl-hubcard .tag{align-self:flex-start;background:var(--gold-soft);color:#3b2f0d;font-size:.8rem;font-weight:700;border-radius:999px;padding:3px 11px}
.tl-donutwrap .mid small{font-size:.74rem;max-width:52%;line-height:1.2}