/* Shared styles for every page. Each page sets a theme class on <body>:
   t-home, t-settle, t-tradetally or t-drawdown. Colours come from each app's theme. */
:root{
  --bg:#F5F7F8;--card:#FFFFFF;--ink:#101820;--muted:#5B6773;--line:#E1E6EA;
  --shadow:0 1px 2px rgba(10,20,30,.05),0 8px 24px rgba(10,20,30,.06);
  --font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--font-display:var(--font);
  --h1:#111827;--h2:#1F2937;--h3:#374151;--dot:#F5B731;--glow:rgba(255,255,255,.12);
  --accent:#2563EB;--tint:#E8EEF8;--tint-ink:#1E3A6B;--link:#1D4ED8;--btn:#111827;--btn-hover:#000;
  --note:#FFF4D6;--note-ink:#5C4100;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0B0F14;--card:#131A22;--ink:#E6EDF3;--muted:#98A5B3;--line:#222C38;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
    --tint:#1A2636;--tint-ink:#C7D7EE;--link:#8AB4FF;--btn:#2B3645;--btn-hover:#36445A;
    --note:#2E2610;--note-ink:#F7D27A;
  }
}

/* Settle: teal and gold, Plus Jakarta Sans */
.t-settle{--font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--font-display:var(--font);
  --dot:#F5B731;--h1:#073F44;--h2:#0B5D63;--h3:#13827F;--glow:rgba(245,183,49,.28);
  --accent:#13827F;--tint:#E7F3F1;--tint-ink:#04363A;--link:#0B5D63;--btn:#0B5D63;--btn-hover:#073F44;--bg:#F6F8F7}
@media (prefers-color-scheme:dark){.t-settle{--bg:#0B1413;--card:#121E1D;--line:#21312F;--muted:#9AAEAB;--tint:#123432;--tint-ink:#BFE8E2;--link:#5FD0C8;--btn:#13827F;--btn-hover:#0B5D63}}

/* TradeTally: navy and green, Inter */
.t-tradetally{--dot:#26D07C;--h1:#0A1322;--h2:#0F1B2D;--h3:#1C2E4F;--glow:rgba(38,208,124,.22);
  --accent:#1AA864;--tint:#E3F6EC;--tint-ink:#0B4A2C;--link:#11804A;--btn:#0F1B2D;--btn-hover:#0A1322}
@media (prefers-color-scheme:dark){.t-tradetally{--bg:#0A1322;--card:#111D30;--line:#1F2E45;--muted:#9AA9BE;--tint:#123326;--tint-ink:#9FF0C6;--link:#26D07C;--btn:#26D07C;--btn-hover:#1AA864;--btn-ink:#0A1322}}

/* Drawdown: dark terminal and orange, Inter with IBM Plex Mono headings */
.t-drawdown{--font-display:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --dot:#FF8C42;--h1:#0B0F14;--h2:#121821;--h3:#1C2430;--glow:rgba(255,140,66,.25);
  --accent:#E8701F;--tint:#FFEBDD;--tint-ink:#6B2E05;--link:#B3530F;--btn:#121821;--btn-hover:#0B0F14}
@media (prefers-color-scheme:dark){.t-drawdown{--bg:#0B0F14;--card:#121821;--line:#1C2430;--muted:#7D8B99;--tint:#2A1C12;--tint-ink:#FFC59C;--link:#FF8C42;--btn:#FF8C42;--btn-hover:#E8701F;--btn-ink:#0B0F14}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.65 var(--font)}
img{max-width:100%;display:block}
a{color:var(--link);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
.wrap{max-width:760px;margin:0 auto;padding:0 16px}
.wide{max-width:980px}

/* Header */
.hero{background:linear-gradient(140deg,var(--h1) 0%,var(--h2) 55%,var(--h3) 100%);color:#fff;padding:20px 0 76px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-90px;top:-90px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,var(--glow),transparent 70%);pointer-events:none}
.hero.short{padding-bottom:40px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;z-index:1}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800;font-size:1.1rem;letter-spacing:-.01em}
.brand img{width:36px;height:36px;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.toplink{color:rgba(255,255,255,.85);text-decoration:none;font-size:.9rem;font-weight:600;white-space:nowrap}
.toplink:hover{color:#fff}
.hero h1{margin:44px 0 10px;font:800 clamp(1.9rem,6vw,2.6rem)/1.15 var(--font-display);letter-spacing:-.02em;position:relative;z-index:1}
.hero p{margin:0;max-width:580px;color:rgba(255,255,255,.88);position:relative;z-index:1}
.hero p a{color:#fff}
.hero .lead{font-size:1.15rem;font-weight:700;color:#fff;margin-bottom:8px}
.pill{display:inline-flex;align-items:center;gap:6px;margin-top:18px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);font-size:.85rem;font-weight:600;position:relative;z-index:1}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--dot)}

/* Buttons */
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;position:relative;z-index:1}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:12px;background:var(--btn);color:var(--btn-ink,#fff);text-decoration:none;font-weight:700;font-size:.95rem}
.btn:hover{background:var(--btn-hover)}
.btn svg{width:18px;height:18px}
.hero .btn{background:#fff;color:var(--h2)}
.hero .btn:hover{background:#F1F4F6}
.btn.ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25)}
.btn.ghost:hover{background:rgba(255,255,255,.2)}

/* Summary tiles */
.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:-48px;position:relative;z-index:2}
.tile{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.tile svg{width:28px;height:28px;padding:5px;border-radius:9px;background:var(--tint);color:var(--accent);display:block;margin-bottom:10px}
.tile b{display:block;font-size:.98rem;line-height:1.3}
.tile span{display:block;color:var(--muted);font-size:.86rem;line-height:1.45;margin-top:4px}

/* Contents chips */
.toc{margin:28px 0 8px;display:flex;flex-wrap:wrap;gap:8px}
.toc a{display:inline-block;padding:6px 12px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:.85rem;font-weight:600}
.toc a:hover{border-color:var(--accent);color:var(--link)}

/* Section cards */
main{padding-bottom:24px}
section{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px 22px 20px;margin-top:14px;scroll-margin-top:16px}
section h2{display:flex;align-items:center;gap:12px;margin:0 0 10px;font-size:1.15rem;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.num{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--tint);color:var(--tint-ink);font-size:.88rem;font-weight:800;font-family:var(--font-display)}
section p{margin:0 0 10px}
section p:last-child,section ul:last-child{margin-bottom:0}
section ul{margin:0;padding:0;list-style:none}
section li{position:relative;padding-left:22px;margin-top:10px}
section li:first-child{margin-top:0}
section li::before{content:"";position:absolute;left:4px;top:.65em;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.callout{margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--note);color:var(--note-ink);font-weight:600;font-size:.95rem}
.parties{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.party{display:block;padding:14px;border-radius:12px;border:1px solid var(--line);text-decoration:none;color:var(--ink)}
.party:hover{border-color:var(--accent)}
.party b{display:block}
.party small{display:block;color:var(--muted);font-size:.84rem}
.party span{display:block;margin-top:6px;color:var(--link);font-size:.88rem;font-weight:600;word-break:break-word}

/* Landing pages */
.shot{margin-top:-48px;position:relative;z-index:2;border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:var(--card)}
.shot img{width:100%;height:auto;aspect-ratio:1024/500}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.features .tile{box-shadow:none}

/* Home: app cards */
.apps{display:grid;gap:14px;margin-top:-48px;position:relative;z-index:2}
.app{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--shadow)}
.app>img{width:64px;height:64px;border-radius:16px}
.app h2{margin:0;font-size:1.25rem;font-weight:800;letter-spacing:-.01em}
.app h2 a{color:var(--ink);text-decoration:none}
.app p{margin:4px 0 0;color:var(--muted)}
.app .links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{display:inline-block;padding:6px 12px;border-radius:999px;border:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:.85rem;font-weight:600}
.chip:hover{border-color:var(--accent);color:var(--link)}
.chip.solid{background:var(--btn);border-color:var(--btn);color:var(--btn-ink,#fff)}
.chip.solid:hover{background:var(--btn-hover);color:var(--btn-ink,#fff)}
.app.settle{--accent:#13827F;--btn:#0B5D63;--btn-hover:#073F44;--link:#0B5D63}
.app.tradetally{--accent:#1AA864;--btn:#0F1B2D;--btn-hover:#0A1322;--link:#11804A}
.app.drawdown{--accent:#E8701F;--btn:#121821;--btn-hover:#0B0F14;--link:#B3530F}
@media (prefers-color-scheme:dark){
  .app.settle{--btn:#13827F;--btn-hover:#0B5D63;--link:#5FD0C8}
  .app.tradetally{--btn:#26D07C;--btn-hover:#1AA864;--btn-ink:#0A1322;--link:#26D07C}
  .app.drawdown{--btn:#FF8C42;--btn-hover:#E8701F;--btn-ink:#0B0F14;--link:#FF8C42}
}

/* Contact box and footer */
.contact{margin-top:14px;background:var(--tint);border:1px solid var(--line);border-radius:18px;padding:22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.contact b{display:block;font-size:1.05rem;color:var(--tint-ink)}
.contact span{color:var(--muted);font-size:.92rem}
.contact .btn{word-break:break-all}
footer{padding:28px 0 40px;color:var(--muted);font-size:.86rem;text-align:center}
footer a{color:var(--muted)}

@media (max-width:620px){
  .summary,.features{grid-template-columns:1fr}
  .tile{display:flex;gap:12px;align-items:flex-start}
  .tile svg{margin:0;flex:none}
  .parties{grid-template-columns:1fr}
  section{padding:18px 16px}
  .hero h1{margin-top:32px}
  .app{grid-template-columns:1fr;padding:18px 16px}
  .app>img{width:56px;height:56px}
}
@media print{
  .hero{background:none;color:#000;padding:0}
  .hero p,.pill,.brand{color:#000}
  .toc,.toplink,.actions{display:none}
  .summary,.shot,.apps{margin-top:16px}
  section,.tile,.contact,.app{box-shadow:none;break-inside:avoid}
}