@import url('https://fonts.googleapis.com/css2?family=Fahkwang:wght@300;400;600&display=swap');

:root{
  --brand-blue:#d2dae1;
  --light-blue:#d9eaf8;
  --gold:#d4af37;
  --gray:#f5f5f5;
  --white:#ffffff;
  --text:#4f4a55;
  --peach:#ffe4cc;
  --background:#f1ede7;
  --heading:#aa93af;
  --purple:#d8cfe1;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#fff;color:var(--text);font-family:'Fahkwang',system-ui,Arial,sans-serif}

.container{max-width:1160px;margin:0 auto;padding:28px}
.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.brand{display:flex;align-items:center;gap:14px}
.brand img{height:40px;width:auto}
.brand h1{font-size:22px;font-weight:600;margin:0}
.tagline{opacity:.75;font-weight:300;font-size:14px}

.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:20px 0 30px}
.metric{background:var(--white);border:2px solid var(--gold);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;min-height:84px}
.metric .label{font-size:13px;opacity:.7}
.metric .value{font-size:28px;font-weight:600}
.metric.light-blue{background:var(--light-blue)}
.metric.gold{background:var(--peach);color:#2d2a17}
.metric.blue{background:var(--brand-blue)}

.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
@media(max-width:1024px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}

.card{background:var(--white);border:2px solid var(--gold);border-radius:16px;padding:14px 12px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.05);transition:transform .08s ease, box-shadow .08s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.10)}
.card .thumb{background:var(--gray);border-radius:10px;padding:10px;margin-bottom:10px;display:flex;align-items:center;justify-content:center;height:110px}
.card .thumb img{max-width:80px;height:auto;display:block}
.card .title{font-size:15px;font-weight:600;margin-bottom:6px;color: var(--heading)}
.card .desc{font-size:12px;opacity:.75;min-height:30px;color: var(--text)}

.card.light-blue .thumb{background:var(--light-blue)}
.card.blue .thumb{background:var(--brand-blue)}
.card.gold .thumb{background:var(--peach)}
.card.gray .thumb{background:var(--gray)}
.card.white .thumb{background:var(--purple)}

.footer{margin:32px 0 8px;opacity:.6;font-size:12px;text-align:center}

.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.btn{border:1px solid var(--gold);border-radius:10px;padding:8px 10px;font-size:12px;text-decoration:none;color:inherit;background:var(--white)}
.btn:hover{background:var(--light-blue)}

.small{font-size:12px;opacity:.75}

/* Kill underlines on card links (and keep brand colors) */
a.card { 
  text-decoration: none !important;
  color: inherit;
}
a.card:hover,
a.card:focus { 
  text-decoration: none !important;
}

a.card .title,
a.card .desc,
a.card .title a,
a.card .desc a {
  text-decoration: none !important;
  color: inherit; /* or var(--heading) just for .title if you prefer */
}

/* Optional: if Notion/webview injects styles, nuke any nested text-decorations */
a.card * { text-decoration: none !important; }
 
/* Metrics grid: 4 cols desktop, 2 cols mobile */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

/* Mobile: 2 per row */
@media (max-width: 768px) {
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Clicks row: center two tiles on desktop */
.metrics.metrics--two-center {
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* two columns on desktop */
  max-width: 900px;                                    /* centers the row visually */
  margin: 0 auto;
}

/* Typography sizing for metric tiles */
.metric .label { font-size: 14px; }
.metric .value { font-size: 28px; line-height: 1.15; }
.metric .small { font-size: 12px; opacity: .8; }

/* Optional tighter padding if needed */
.metric { padding: 16px; }

/* spacing between metrics rows */
.metrics { margin: 8px 0; }                 /* tighten default */
.metrics + .metrics { margin-top: 12px; }    /* small gap to next row */

/* clicks row centered, no extra bottom/top space */
.metrics.metrics--two-center{
  grid-template-columns: repeat(2, minmax(0,1fr));
  max-width: 900px;
  margin: 12px auto 8px;                     /* was 0 auto; reduced gap */
}

/* grid columns */
.metrics{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
@media (max-width:768px){
  .metrics{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Remove default link styling for cards/metrics */
a.card,
a.card:link,
a.card:visited,
.metrics a,
.metrics a:link,
.metrics a:visited {
  color: inherit;
  text-decoration: none;
}

/* Keep hover clean */
a.card:hover .title,
a.card:hover .value { text-decoration: none; }