/* colourtradinghub.com — Colour Trading
   The palette is the game itself: green, red, violet on deep indigo. */

:root{
  --bg:#0b0d24;
  --bg-2:#12153a;
  --bg-3:#080a1c;
  --panel:#161a45;
  --line:#272c62;
  --ink:#0d1020;
  --paper:#f4f5fb;
  --paper-2:#ffffff;
  --muted:#5c6288;
  --muted-d:#9aa1c9;
  --green:#16b364;
  --green-d:#0e8a4a;
  --red:#e5484d;
  --red-d:#b93338;
  --violet:#8b5cf6;
  --violet-d:#6d3fe0;
  --amber:#f5a524;
  --wrap:1120px;
  --fh:'Space Grotesk',-apple-system,'Segoe UI',sans-serif;
  --fb:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--fb);font-size:17px;line-height:1.65;
  color:var(--ink);background:var(--paper);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--violet-d);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--red-d)}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* header */
.top{background:var(--bg);position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:14px;min-height:64px;flex-wrap:wrap}
.brand{
  display:flex;align-items:center;gap:10px;margin-right:auto;text-decoration:none;
  font-family:var(--fh);font-weight:700;font-size:19px;color:#fff;letter-spacing:-.2px;
}
.dots{display:flex;gap:3px}
.dots i{width:9px;height:9px;border-radius:50%;display:block}
.dots i:nth-child(1){background:var(--green)}
.dots i:nth-child(2){background:var(--red)}
.dots i:nth-child(3){background:var(--violet)}
.brand em{font-style:normal;color:var(--muted-d);font-weight:500}
.nav{display:flex;gap:2px;flex-wrap:wrap}
.nav a{color:#c3c8ea;text-decoration:none;font-size:14.5px;font-weight:500;padding:7px 11px;border-radius:7px}
.nav a:hover,.nav a[aria-current="page"]{background:var(--bg-2);color:#fff}
.cta{
  background:var(--green);color:#04180d;text-decoration:none;font-weight:700;font-size:14.5px;
  padding:10px 18px;border-radius:8px;white-space:nowrap;
}
.cta:hover{background:#19cf74;color:#04180d}

/* hero */
.hero{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);color:#fff;padding:52px 0 50px}
.hgrid{display:grid;grid-template-columns:1.06fr .94fr;gap:38px;align-items:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--muted-d);margin-bottom:14px;
}
.eyebrow b{color:var(--green);font-weight:700}
h1{
  font-family:var(--fh);font-weight:700;font-size:clamp(30px,5.2vw,46px);
  line-height:1.12;letter-spacing:-1px;margin:0 0 16px;color:#fff;
}
h1 u{text-decoration:none;color:var(--green)}
h1 s{text-decoration:none;color:var(--red)}
h1 i{font-style:normal;color:var(--violet)}
.lede{font-size:18.5px;line-height:1.6;color:#c3c8ea;max-width:60ch;margin:0 0 24px}
.btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.b1{background:var(--green);color:#04180d;text-decoration:none;font-weight:700;padding:14px 26px;border-radius:9px;font-size:16px}
.b1:hover{background:#19cf74;color:#04180d}
.b2{background:transparent;color:#fff;border:1px solid #3a4080;text-decoration:none;font-weight:600;padding:13px 24px;border-radius:9px;font-size:16px}
.b2:hover{background:var(--panel);color:#fff}
.age{font-size:13.5px;color:#7a81ad;margin:18px 0 0}
.heroart{margin:0}

/* bands */
.band{padding:52px 0;border-bottom:1px solid #e4e6f2}
.band.paper{background:var(--paper-2)}
.band.dark{background:var(--bg);color:#e8eaf6;border-bottom-color:var(--line)}
.band.dark a{color:#a78bfa}
.band.ink{background:var(--bg-2);color:#e8eaf6;border-bottom-color:var(--line)}
.head{margin-bottom:26px;max-width:70ch}
h2{font-family:var(--fh);font-weight:700;font-size:clamp(24px,3.6vw,33px);line-height:1.2;letter-spacing:-.5px;margin:0 0 12px}
.band.dark h2,.band.ink h2{color:#fff}
.head p{margin:0;font-size:17.5px;color:var(--muted)}
.band.dark .head p,.band.ink .head p{color:#a8afd8}
.kick{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--violet-d);margin-bottom:10px}
.band.dark .kick,.band.ink .kick{color:#a78bfa}

/* prose */
.prose{max-width:74ch}
.prose.wide{max-width:none}
.prose h3{font-family:var(--fh);font-weight:700;font-size:21px;line-height:1.3;margin:32px 0 10px;letter-spacing:-.3px}
.prose h4{font-family:var(--fh);font-weight:700;font-size:17.5px;margin:24px 0 8px}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px}
.prose li{margin:0 0 9px}

/* the number board */
.board{display:grid;grid-template-columns:repeat(10,1fr);gap:7px;margin:0 0 8px}
.board .n{
  aspect-ratio:1;border-radius:10px;display:grid;place-items:center;
  font-family:var(--fh);font-weight:700;font-size:clamp(15px,2.4vw,22px);color:#fff;
}
.n.g{background:var(--green)}
.n.r{background:var(--red)}
.n.gv{background:linear-gradient(135deg,var(--green) 0 50%,var(--violet) 50% 100%)}
.n.rv{background:linear-gradient(135deg,var(--red) 0 50%,var(--violet) 50% 100%)}
.boardkey{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--muted);margin:0 0 24px}
.band.dark .boardkey,.band.ink .boardkey{color:#a8afd8}
.boardkey span{display:inline-flex;align-items:center;gap:7px}
.boardkey b{width:12px;height:12px;border-radius:3px;display:inline-block}

/* tables */
.tbox{overflow-x:auto;margin:0 0 24px;border:1px solid #e0e3f0;border-radius:12px;background:#fff}
.band.dark .tbox,.band.ink .tbox{border-color:var(--line);background:var(--bg-3)}
table{border-collapse:collapse;width:100%;min-width:480px;font-size:15.5px}
caption{text-align:left;padding:14px 16px 0;font-size:13.5px;color:var(--muted);font-weight:600}
.band.dark caption,.band.ink caption{color:#9aa1c9}
th,td{padding:11px 16px;text-align:left;border-bottom:1px solid #eceef7;vertical-align:top}
.band.dark th,.band.dark td,.band.ink th,.band.ink td{border-bottom-color:var(--line)}
thead th{background:var(--bg);color:#fff;font-weight:600;font-size:12.5px;letter-spacing:.7px;text-transform:uppercase;border-bottom:none}
tbody tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.pill{display:inline-block;padding:2px 10px;border-radius:20px;font-size:12.5px;font-weight:700;color:#fff}
.pill.g{background:var(--green)}
.pill.r{background:var(--red)}
.pill.v{background:var(--violet)}

/* cards */
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:#fff;border:1px solid #e0e3f0;border-radius:13px;padding:22px}
.band.dark .card,.band.ink .card{background:var(--panel);border-color:var(--line)}
.card h3{font-family:var(--fh);font-size:18.5px;margin:0 0 9px;line-height:1.3}
.band.dark .card h3,.band.ink .card h3{color:#fff}
.card p{margin:0 0 10px;font-size:15.5px;color:var(--muted)}
.band.dark .card p,.band.ink .card p{color:#a8afd8}
.card p:last-child{margin:0}
.tag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--violet-d);margin-bottom:8px}
.band.dark .tag,.band.ink .tag{color:#a78bfa}

/* callouts */
.note{border-left:4px solid var(--violet);background:#f3efff;padding:17px 20px;border-radius:0 10px 10px 0;margin:0 0 24px}
.warn{border-left:4px solid var(--red);background:#fdefef;padding:17px 20px;border-radius:0 10px 10px 0;margin:0 0 24px}
.note p,.warn p{margin:0 0 10px;font-size:16px}
.note p:last-child,.warn p:last-child{margin:0}
.band.dark .note,.band.ink .note{background:#221b4d}
.band.dark .warn,.band.ink .warn{background:#3d1a24}

/* steps */
.steps{counter-reset:s;list-style:none;padding:0;margin:0 0 24px}
.steps li{counter-increment:s;position:relative;padding:0 0 20px 48px}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:9px;
  background:var(--violet);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px;
  font-family:var(--fh);
}
.steps li strong{display:block;font-family:var(--fh);font-size:17px;margin-bottom:3px}

/* faq */
.faq{border-top:1px solid #e4e6f2}
.faq details{border-bottom:1px solid #e4e6f2}
.faq summary{cursor:pointer;list-style:none;padding:16px 36px 16px 0;position:relative;font-family:var(--fh);font-weight:600;font-size:17px;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:13px;font-size:24px;font-weight:400;color:var(--violet);line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq .ans{padding:0 0 18px}
.faq .ans p{margin:0 0 12px;font-size:16px}
.faq .ans p:last-child{margin:0}

/* figure + image slot */
.fig{margin:28px 0}
.fig img{width:100%;height:auto;border-radius:13px;box-shadow:0 6px 24px rgba(11,13,36,.20)}
.fig figcaption{margin-top:11px;font-size:14.5px;color:var(--muted)}
.band.dark .fig figcaption,.band.ink .fig figcaption{color:#a8afd8}
.imgslot{
  border:3px dashed #2fae6b;
  background:repeating-linear-gradient(45deg,rgba(47,174,107,.08) 0 12px,rgba(47,174,107,.15) 12px 24px);
  border-radius:12px;padding:26px 22px;margin:28px 0;text-align:center;
}
.imgslot .tag2{display:inline-block;background:#2fae6b;color:#04240f;font-weight:800;font-size:14px;letter-spacing:1.4px;padding:9px 20px;border-radius:7px;margin-bottom:14px}
.imgslot .what{margin:0 0 8px;font-size:16px;font-weight:700;color:#0d5e37;line-height:1.45}
.imgslot .spec{margin:0;font-size:13.5px;color:#3c6b52;line-height:1.55}
.imgslot .spec code{background:rgba(47,174,107,.16);padding:1px 6px;border-radius:4px;font-size:12.5px}

/* download row */
.dlrow{margin:26px 0 8px}
.dlnote{margin:0 0 6px;font-size:13.5px;color:var(--muted)}
.band.dark .dlnote,.band.ink .dlnote{color:#9aa1c9}

/* breadcrumb */
.crumb{font-size:13.5px;padding:13px 0;color:var(--muted);background:#fff;border-bottom:1px solid #e4e6f2}
.crumb a{color:var(--violet-d);text-decoration:none}
.crumb span{color:#b6bad2;padding:0 7px}

/* footer */
.foot{background:var(--bg-3);color:#9aa1c9;padding:44px 0 34px;font-size:15px}
.foot a{color:#a78bfa}
.fnav{display:flex;gap:20px;flex-wrap:wrap;margin:0 0 22px}
.fnav a{text-decoration:none;font-weight:500}
.fnav a:hover{text-decoration:underline}
.rg{border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin:0 0 20px}
.rg strong{color:#fff;display:block;margin-bottom:7px;font-size:15.5px}
.rg p{margin:0;font-size:14.5px;line-height:1.6}
.badge18{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;border:2px solid var(--red);color:#ff8b8f;font-weight:700;font-size:13px;margin-bottom:12px}
.legal{font-size:13px;color:#6d7398;border-top:1px solid var(--line);padding-top:18px;margin:0}

@media (max-width:900px){
  .hgrid{grid-template-columns:1fr;gap:26px}
  .heroart{order:-1;max-width:470px;margin:0 auto}
}
@media (max-width:640px){
  body{font-size:16.5px}
  .top .wrap{min-height:58px;padding-top:9px;padding-bottom:9px}
  .nav{width:100%;order:3}
  .nav a{padding:6px 9px;font-size:14px}
  .hero{padding:32px 0 36px}
  .band{padding:38px 0}
  .heroart{max-width:320px}
  .board{gap:5px}
  .board .n{border-radius:7px}
}


/* ---------- touch targets ----------
   Fingers need 44px. Applied only where there is no hover, so the desktop
   layout keeps its tighter spacing. */
@media (hover:none),(max-width:900px){
  .nav a,.fnav a,.crumb a{
    min-height:44px;display:inline-flex;align-items:center;
  }
  .nav a{padding:0 13px}
  .fnav a{padding:0 2px}
  .brand{min-height:44px}
  .cta{min-height:44px;display:inline-flex;align-items:center;padding:0 20px}
  .b1,.b2{min-height:48px;display:inline-flex;align-items:center;justify-content:center}
  .faq summary{min-height:52px;display:flex;align-items:center;padding-top:12px;padding-bottom:12px}
  .faq summary::after{top:50%;transform:translateY(-50%)}
  .prose a,.foot a,.ans a{padding:2px 0}
}

@media (hover:none),(max-width:900px){
  /* card titles are navigation, not prose: give them a real tap area */
  .card h3 a{display:flex;align-items:center;min-height:44px;padding:6px 0}
}

/* Ten columns do not fit a 320px screen. Two rows of five do, and it matches
   the way the board is drawn everywhere else. */
@media (max-width:389px){
  .board{grid-template-columns:repeat(5,1fr);gap:6px}
  .board .n{border-radius:8px;font-size:17px}
}