/* ══════════════════════════════════════════════════════════════════════════
   Geton.in

   A clean, light-themed fintech design built for trust and readability.

   1. Light and open. White backgrounds with teal accents project clarity
      and professionalism. A dark dashboard says crypto trading desk; a
      light page with strong typography says financial information service,
      which is what ad networks want to see.

   2. Teal and blue, not the usual dark gold. Teal reads as trustworthy and
      modern. Combined with crisp whites and soft shadows, the design feels
      considered and unique rather than template-generated.

   3. Figures remain monospaced and tabular. Prices sit in a column and
      the decimal points line up, so two numbers can be compared by eye
      without reading either of them.

   Phone first throughout. Most people checking a rate are standing up.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* light, open palette */
  --bg:      #f4f7fa;
  --raise:   #ffffff;
  --raise-2: #f8fafb;
  --hair:    #e2e8f0;
  --hair-2:  #cbd5e1;

  --ink:     #1a202c;
  --ink-2:   #334155;
  --ink-3:   #64748b;

  --teal:    #0d9488;
  --teal-d:  #0f766e;
  --teal-l:  rgba(13, 148, 136, .08);
  --teal-g:  linear-gradient(135deg, #0d9488, #0891b2);

  --green:   #16a34a;
  --green-l: rgba(22, 163, 74, .08);
  --coral:   #ef4444;
  --blue:    #3b82f6;

  --shadow-s: 0 1px 3px rgba(0, 0, 0, .05), 0 1px 2px rgba(0, 0, 0, .03);
  --shadow-m: 0 4px 14px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .04);
  --shadow-l: 0 10px 30px rgba(0, 0, 0, .08), 0 2px 6px rgba(0, 0, 0, .04);
  --shadow-hover: 0 12px 36px rgba(13, 148, 136, .12), 0 4px 10px rgba(0, 0, 0, .06);

  --r-s: 6px;
  --r-m: 12px;
  --r-l: 20px;

  --display: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 1160px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* subtle cool gradient wash behind top */
  background-image: radial-gradient(ellipse 90rem 38rem at 50% -14rem, rgba(13, 148, 136, .06), transparent 65%);
  background-repeat: no-repeat;
}

a { color: inherit; text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--teal); }
img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 1em; }
button, input { font-family: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--ink);
}

/* Every figure on the site. Tabular so columns of prices line up on the
   decimal point and can be compared without being read. */
.fig { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.wrap.narrow { max-width: 740px; }

/* Small caps labels */
.eyebrow {
  font-family: var(--body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ── header ──────────────────────────────────────────────────────────────── */

.hd {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid var(--hair);
  background: rgba(255, 255, 255, .78);
  backdrop-filter: saturate(140%) blur(16px);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}
.hd-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }

.brand { display: flex; align-items: center; gap: 10px; }
.brand img { max-height: 32px; width: auto; }
.brand .mark {
  width: 34px; height: 34px; flex: 0 0 34px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--teal-g);
  color: #ffffff;
  font-family: var(--display); font-weight: 700; font-size: 18px;
  box-shadow: 0 2px 8px rgba(13, 148, 136, .3);
  transition: transform .2s ease, box-shadow .2s ease;
}
.brand:hover .mark {
  transform: scale(1.05);
  box-shadow: 0 4px 14px rgba(13, 148, 136, .4);
}
.brand .bn {
  font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -.03em;
  color: var(--ink);
}

.hd-nav { display: flex; gap: 2px; }
.hd-nav a {
  position: relative;
  padding: 8px 14px;
  font-size: 14px; font-weight: 500;
  color: var(--ink-2);
  border-radius: var(--r-s);
  transition: color .2s ease, background .2s ease;
}
.hd-nav a:hover { color: var(--teal); background: var(--teal-l); }
.hd-nav a.on { color: var(--teal); font-weight: 600; }
.hd-nav a.on::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px;
  height: 2.5px; border-radius: 2px; background: var(--teal-g);
}

/* ── hero ────────────────────────────────────────────────────────────────── */

.hero { padding: 40px 0 8px; text-align: center; }
.hero h1 {
  font-size: clamp(26px, 6.4vw, 48px);
  line-height: 1.1;
  max-width: 20ch;
  margin: 0 auto 14px;
  color: var(--ink);
}
.hero h1 em {
  font-style: normal;
  background: var(--teal-g);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero .lede {
  color: var(--ink-2);
  font-size: 15.5px;
  max-width: 52ch;
  margin: 0 auto 18px;
  line-height: 1.7;
}

.stamp {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .01em;
  color: var(--ink-3);
  border: 1px solid var(--hair); border-radius: 999px;
  padding: 6px 14px;
  background: var(--raise);
  box-shadow: var(--shadow-s);
}
.stamp .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--teal);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, .15);
  animation: breathe 2.6s ease-in-out infinite;
}
@keyframes breathe { 50% { opacity: .3; transform: scale(.85); } }
.stamp .warn { color: var(--coral); }

/* ── the headline figure ─────────────────────────────────────────────────── */

.lead-rate {
  margin: 28px 0 14px;
  border: 1px solid var(--hair);
  border-radius: var(--r-l);
  background: var(--raise);
  padding: 24px 24px 22px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-m);
  transition: box-shadow .25s ease, transform .25s ease;
  text-align: center;
}
.lead-rate:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}
.lead-rate::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--teal-g);
  border-radius: 20px 20px 0 0;
}
.lr-k { display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 10px; }
.lr-v {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: clamp(38px, 12vw, 68px);
  font-weight: 700; letter-spacing: -.045em; line-height: 1;
  color: var(--ink);
}
.lr-v small { font-size: .42em; font-weight: 500; color: var(--ink-3); letter-spacing: 0; margin-left: 6px; }
.lr-s { margin-top: 10px; font-size: 13.5px; color: var(--ink-2); }
.lr-s b { color: var(--teal); font-weight: 600; }

/* the three supporting figures */
.stats {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--hair); border: 1px solid var(--hair);
  border-radius: var(--r-m); overflow: hidden;
  box-shadow: var(--shadow-s);
}
.stat {
  background: var(--raise); padding: 13px 16px; min-width: 0;
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 14px;
  transition: background .2s ease;
}
.stat:hover { background: var(--raise-2); }
.stat .k { grid-row: 1; }
.stat .v {
  grid-row: 1; grid-column: 2; text-align: right;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 17px; font-weight: 600; letter-spacing: -.03em;
  white-space: nowrap;
  color: var(--ink);
}
.stat .s { grid-row: 2; grid-column: 1 / -1; font-size: 11.5px; color: var(--ink-3); line-height: 1.4; }
.stat.sell .v { color: var(--green); }
.stat.gap  .v { color: var(--teal); }

/* ── section heads, numbered ─────────────────────────────────────────────── */

.sec-h {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  margin: 48px 0 18px; padding-bottom: 14px;
  border-bottom: 1px solid var(--hair);
}
.sec-h .no {
  font-family: var(--mono); font-size: 11.5px; color: var(--teal);
  letter-spacing: .05em; font-weight: 600;
}
.sec-h h2 { font-size: 21px; min-width: 0; }
.sec-h > span:not(.no) {
  font-size: 12.5px; color: var(--ink-3); line-height: 1.5;
}

/* ── exchange board ──────────────────────────────────────────────────────── */

.board { display: grid; grid-template-columns: 1fr; gap: 12px; }

.ex {
  border: 1px solid var(--hair);
  border-radius: var(--r-m);
  background: var(--raise);
  overflow: hidden;
  box-shadow: var(--shadow-s);
  transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease;
}
.ex:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-l);
  border-color: var(--hair-2);
}
.ex.is-best {
  border-color: rgba(13, 148, 136, .4);
  box-shadow: 0 2px 12px rgba(13, 148, 136, .08);
}
.ex.is-best:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow-hover);
}

.ex-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; }
.ex-h h3 { font-size: 16.5px; display: inline; margin-right: 9px; }
.tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--hair); border-radius: 4px; padding: 2px 7px;
  background: var(--raise-2);
}
.go {
  font-size: 12.5px; font-weight: 600; color: var(--teal);
  border: 1px solid rgba(13, 148, 136, .3); border-radius: var(--r-s);
  padding: 7px 14px; white-space: nowrap;
  transition: all .2s ease;
}
.go:hover {
  color: #ffffff; background: var(--teal-g); border-color: var(--teal);
  box-shadow: 0 2px 8px rgba(13, 148, 136, .3);
  transform: translateY(-1px);
}

.ex-p { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--hair); }
.ex-p .p { padding: 13px 16px 14px; position: relative; transition: background .2s ease; }
.ex-p .p:hover { background: var(--raise-2); }
.ex-p .p + .p { border-left: 1px solid var(--hair); }
.ex-p .p b {
  display: block; margin-top: 5px;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 20px; font-weight: 600; letter-spacing: -.035em;
  overflow-wrap: anywhere;
  color: var(--ink);
}
.ex-p .p i {
  display: inline-block; margin-top: 7px; font-style: normal;
  font-family: var(--body); font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #ffffff; background: var(--teal-g); border-radius: 4px; padding: 3px 8px;
  box-shadow: 0 1px 4px rgba(13, 148, 136, .25);
}
.ex-p .p.best { background: var(--teal-l); }

.ex-more { border-top: 1px solid var(--hair); }
.ex-more summary {
  padding: 11px 16px; font-size: 12.5px; color: var(--ink-3);
  cursor: pointer; list-style: none; user-select: none;
  transition: color .2s ease, background .2s ease;
}
.ex-more summary::-webkit-details-marker { display: none; }
.ex-more summary::after { content: "  ↓"; font-family: var(--mono); }
.ex-more[open] summary::after { content: "  ↑"; }
.ex-more summary:hover { color: var(--teal); background: var(--teal-l); }
.offers { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 2px 16px 16px; }
.offers h4 { font-family: var(--body); font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
             text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px; }
.o { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
     padding: 7px 0; border-bottom: 1px solid var(--hair); font-size: 13px; }
.o:last-child { border-bottom: 0; }
.o-n { color: var(--ink-2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-p { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.o-l { width: 100%; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

/* ── calculator ──────────────────────────────────────────────────────────── */

.calc {
  border: 1px solid var(--hair); border-radius: var(--r-l); background: var(--raise); padding: 18px;
  box-shadow: var(--shadow-m);
  transition: box-shadow .25s ease;
}
.calc:hover { box-shadow: var(--shadow-l); }
.calc.big { padding: 24px; }
.calc-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
             background: var(--bg); border: 1px solid var(--hair); border-radius: var(--r-m); margin-bottom: 20px; }
.calc-tabs button {
  background: none; border: 0; border-radius: var(--r-s);
  color: var(--ink-3); padding: 10px; font-size: 13.5px; font-weight: 500; cursor: pointer;
  transition: all .2s ease;
}
.calc-tabs button:hover { color: var(--ink-2); background: rgba(13, 148, 136, .04); }
.calc-tabs button.on {
  background: var(--raise); color: var(--teal); font-weight: 600;
  box-shadow: var(--shadow-s);
}

.calc-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: end; }
.calc-row label { display: block; }
.calc-row label > span { display: block; margin-bottom: 7px; }
.calc-row input {
  width: 100%;
  background: var(--bg); border: 1px solid var(--hair); color: var(--ink);
  border-radius: var(--r-m); padding: 14px 15px;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 18px; font-weight: 600; letter-spacing: -.02em;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.calc-row input:focus {
  outline: none; border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, .12);
}
.calc-row .eq { color: var(--ink-3); padding-bottom: 16px; font-family: var(--mono); font-weight: 600; }
.calc-n { font-size: 12.5px; color: var(--ink-3); margin: 14px 0 0; }
.calc-n b { color: var(--ink-2); font-weight: 500; }

.quick { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px; }
.quick button {
  background: none; border: 1px solid var(--hair); color: var(--ink-3);
  border-radius: 999px; padding: 7px 16px; cursor: pointer;
  font-family: var(--mono); font-size: 12px;
  transition: all .2s ease;
}
.quick button:hover {
  border-color: var(--teal); color: var(--teal); background: var(--teal-l);
  transform: translateY(-1px);
}

/* ── table ───────────────────────────────────────────────────────────────── */

.tbl-w {
  overflow-x: auto; border: 1px solid var(--hair); border-radius: var(--r-m);
  box-shadow: var(--shadow-s);
}
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 480px; }
.tbl th {
  text-align: left; padding: 12px 16px; background: var(--raise-2);
  font-family: var(--body); font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--hair); white-space: nowrap;
}
.tbl td {
  padding: 13px 16px; border-bottom: 1px solid var(--hair); background: var(--raise);
  transition: background .15s ease;
}
.tbl tr:hover td { background: var(--teal-l); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td.n { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.tbl td.muted { color: var(--ink-3); }

/* ── exchange guide ──────────────────────────────────────────────────────── */

.ex-list { display: grid; grid-template-columns: 1fr; gap: 12px; }
.exc {
  border: 1px solid var(--hair); border-radius: var(--r-m); background: var(--raise); overflow: hidden;
  box-shadow: var(--shadow-s);
  transition: transform .25s ease, box-shadow .25s ease;
}
.exc:hover { transform: translateY(-2px); box-shadow: var(--shadow-m); }
.exc-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
         padding: 18px; flex-wrap: wrap; border-bottom: 1px solid var(--hair); }
.exc-h h2 { font-size: 19px; margin-bottom: 5px; }
.exc-p { display: flex; gap: 22px; }
.exc-p > div span { display: block; margin-bottom: 3px; }
.exc-p b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 600; }
.exc-b { padding: 18px; }
.exc-b p { font-size: 14px; margin: 0 0 10px; padding-left: 22px; position: relative; color: var(--ink-2); }
.exc-b p::before { position: absolute; left: 0; top: 0; font-family: var(--mono); font-weight: 700; }
.exc-b .good::before { content: "+"; color: var(--green); }
.exc-b .bad::before  { content: "−"; color: var(--coral); }
.exc-b .go { display: inline-block; margin-top: 4px; }

/* ── prose ───────────────────────────────────────────────────────────────── */

.prose { color: var(--ink-2); font-size: 15.5px; max-width: 68ch; margin: 0 auto; line-height: 1.75; text-align: center; }
.prose h2 { color: var(--ink); font-size: 18px; margin: 30px 0 10px; }
.prose h2:first-child { margin-top: 0; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose em { color: var(--teal-d); font-style: italic; }
.prose a { color: var(--teal); border-bottom: 1px solid rgba(13, 148, 136, .3); transition: border-color .2s ease; }
.prose a:hover { border-bottom-color: var(--teal); }
.prose ul, .prose ol { padding-left: 20px; margin: 0 0 1em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--teal); }

.pg-h { padding: 40px 0 18px; border-bottom: 1px solid var(--hair); margin-bottom: 26px; }
.pg-h h1 { font-size: clamp(26px, 6vw, 38px); }
.upd { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--hair);
       font-family: var(--mono); font-size: 12px; color: var(--ink-3); }

.empty { text-align: center; padding: 60px 20px; color: var(--ink-2); }
.empty h2 { color: var(--ink); font-size: 20px; margin-bottom: 8px; }

/* ── ads ─────────────────────────────────────────────────────────────────── */

.ad { margin: 28px 0; text-align: center; min-width: 0; overflow: hidden; }
.ad .ad-l {
  display: block; margin-bottom: 6px;
  font-family: var(--body); font-size: 8.5px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-3); opacity: .4;
}
.ad > * { max-width: 100%; }

/* ── footer ──────────────────────────────────────────────────────────────── */

.ft {
  border-top: 1px solid var(--hair); margin-top: 60px; padding: 44px 0 32px;
  background: var(--raise); text-align: center;
}
.ft-top { display: grid; grid-template-columns: 1fr; gap: 30px; }
.ft-d { font-size: 13.5px; color: var(--ink-3); margin: 14px auto 0; max-width: 40ch; line-height: 1.6; }
.ft-d a { color: var(--ink-2); border-bottom: 1px solid var(--hair); transition: color .2s ease; }
.ft-d a:hover { color: var(--teal); }
.ft h4 { font-family: var(--body); font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
         text-transform: uppercase; color: var(--ink-3); margin-bottom: 13px; }
.ft ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; align-items: center; }
.ft li a { font-size: 13.5px; color: var(--ink-2); transition: color .2s ease; }
.ft li a:hover { color: var(--teal); }
.ft-bot {
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: center;
  border-top: 1px solid var(--hair); margin-top: 36px; padding-top: 22px;
  font-size: 12px; color: var(--ink-3);
}

/* ── mobile first ────────────────────────────────────────────────────────── */

@media (max-width: 479px) {
  .wrap { padding: 0 16px; }
  .hd-in { height: 56px; gap: 8px; }
  .brand .mark { width: 30px; height: 30px; flex: 0 0 30px; font-size: 16px; border-radius: 8px; }
  .brand .bn { font-size: 16px; }
  .hd-nav a { padding: 6px 8px; font-size: 13px; }

  .hero { padding: 28px 0 4px; }
  .hero h1 { font-size: clamp(24px, 7vw, 32px); }
  .hero .lede { font-size: 14px; }

  .lead-rate { padding: 18px 16px 16px; border-radius: 14px; }
  .lr-v { font-size: clamp(32px, 10vw, 44px); }

  .stat { padding: 10px 12px; }
  .stat .v { font-size: 15px; }

  .ex-h { padding: 12px 14px; }
  .ex-h h3 { font-size: 15px; }
  .ex-p .p { padding: 10px 14px 12px; }
  .ex-p .p b { font-size: 17px; }

  .calc { padding: 14px; border-radius: 14px; }
  .calc-row input { font-size: 16px; padding: 12px; }

  .sec-h { margin: 36px 0 14px; }
  .sec-h h2 { font-size: 18px; }

  .ft { padding: 32px 0 24px; margin-top: 40px; }
  .ft-bot { flex-direction: column; align-items: center; text-align: center; }
}

/* ── wider screens ───────────────────────────────────────────────────────── */

@media (min-width: 680px) {
  .hero { padding: 56px 0 8px; }
  .lead-rate { padding: 30px 32px 28px; }
  .board { grid-template-columns: 1fr 1fr; }
  .offers { grid-template-columns: 1fr 1fr; }
  .ft-top { grid-template-columns: 2fr 1fr 1fr; }
  .ft ul { align-items: flex-start; }
  .ft { text-align: left; }
  .ft-d { margin: 14px 0 0; }
  .ft-bot { justify-content: space-between; }
}

@media (min-width: 980px) {
  body { font-size: 15.5px; }
  .wrap { padding: 0 28px; }

  .headline { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; align-items: stretch; }
  .headline .lead-rate {
    margin: 0; display: flex; flex-direction: column; justify-content: center;
  }
  .stat { padding: 16px 20px; }

  .ex-list { grid-template-columns: 1fr 1fr; }
  .sec-h h2 { font-size: 23px; }
}