*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #ffffff;
  --text: #1a1a1a;
  --muted: #666666;
  --accent: #02754e;
  --divider: #d8d8d8;
  --max-width: 560px;
  --font-body: Georgia, 'Times New Roman', serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  background: var(--bg);
  color: var(--text);
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-body);
  line-height: 1.7;
  padding: 3rem 1.25rem 4rem;
}

a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--max-width); margin: 0 auto; }

/* Profile header, same shape as build.natdoa.com */
.profile { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.75rem; }
.profile-pic { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.profile-info { display: flex; flex-direction: column; gap: 0.2rem; }
.profile-title { font-family: var(--font-sans); font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.profile-sub { font-family: var(--font-sans); font-size: 0.92rem; color: var(--muted); }
.socials { display: flex; gap: 0.7rem; margin-top: 0.35rem; }
.socials a { display: inline-flex; line-height: 0; color: var(--text); transition: opacity .15s, transform .15s; }
.socials svg { width: 1.35rem; height: 1.35rem; }

hr { border: none; border-top: 1px solid var(--divider); margin: 1.75rem 0; }

.intro { font-size: 0.98rem; color: var(--text); margin-bottom: 1.75rem; }

/* Sections */
section { margin-bottom: 1.75rem; }
h2 {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.6rem;
}

/* Linktree buttons */
.links { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.links a {
  display: block;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  border: 1px solid var(--divider);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  transition: background .15s, color .15s, border-color .15s;
}
.links a small {
  display: block;
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.1rem;
  transition: color .15s;
}

.back { display: inline-block; font-family: var(--font-sans); font-size: 0.85rem; color: var(--muted); margin-bottom: 1.5rem; }

.disclosure { font-family: var(--font-sans); font-size: 0.78rem; color: var(--muted); line-height: 1.6; margin-top: 2.25rem; }
footer { font-family: var(--font-sans); font-size: 0.78rem; color: var(--muted); margin-top: 1rem; }

@media (max-width: 420px) {
  .profile { gap: 1.1rem; }
  .profile-pic { width: 80px; height: 80px; }
  .profile-title { font-size: 1.2rem; }
}


/* Provider name under a button: hidden by default, shown with .show-via */
.links small.via { display: none; }
.links a.show-via small.via { display: block; }

/* Featured button (main affiliate) */
.links a.featured { background: var(--text); border-color: var(--text); color: #fff; }

/* App Store style icon grid */
.apps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
.apps li { display: flex; justify-content: center; }
.apps a { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; transition: transform .15s; }
.apps img {
  width: 64px; aspect-ratio: 1; border-radius: 22.5%;
  box-shadow: 0 0 0 0.5px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.08);
}
.apps span { font-family: var(--font-sans); font-size: 0.75rem; text-align: center; line-height: 1.2; }

/* Embedded Klook widget */
.widget { min-height: 470px; }
.widget iframe { display: block; width: 100% !important; border: 0; }

/* Branded social buttons */
.links a.brand { background-origin: border-box; display: flex; align-items: center; justify-content: center; gap: 0.55rem; color: #fff; border-color: transparent; }
.links a.brand svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }
.links a.brand-ig { background: linear-gradient(45deg, #feda75 0%, #fa7e1e 22%, #d62976 50%, #962fbf 78%, #4f5bd5 100%); }
.links a.brand-yt { background: #ff0000; }
/* Must come after the background shorthands above: stops the gradient tiling into the transparent border */

/* Hover effects only on devices with a real mouse: stops buttons staying "stuck" after a tap on iPhone */
@media (hover: hover) {
  .socials a:hover { opacity: .8; transform: scale(1.08); }
  .links a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
  .links a:hover small { color: rgba(255,255,255,.8); }
  .back:hover { color: var(--accent); }
  a.profile-sub:hover { color: var(--accent); }
  .links a.featured:hover { background: var(--accent); border-color: var(--accent); }
  .apps a:hover { transform: translateY(-2px); }
  .links a.brand:hover { color: #fff; border-color: transparent; filter: brightness(1.06) saturate(1.1); }
  .links a.brand-ig:hover { background: linear-gradient(45deg, #feda75 0%, #fa7e1e 22%, #d62976 50%, #962fbf 78%, #4f5bd5 100%); }
  .links a.brand-yt:hover { background: #ff0000; }
}

/* Touch feedback */
.links a:active, .apps a:active { transform: scale(0.98); }
.links a { -webkit-user-select: none; user-select: none; }

/* Keep last: stops gradients tiling into the transparent border */
.links a.brand, .links a.brand:hover { background-origin: border-box; }