/* ─────────────────────────────────────────────────────────────
   fitoplus · landing page
   monospace, 1px rules, right angles only.
   ───────────────────────────────────────────────────────────── */

/* Self-hosting the real Nerd Font (optional, gives you the glyph set):
   drop JetBrainsMonoNerdFont-Regular.woff2 + -Bold.woff2 in ./fonts/
   and uncomment. Until then the stack below uses the locally installed
   Nerd Font if the visitor has it, and falls back to plain JetBrains
   Mono from Google Fonts if they don't. */
/*
@font-face {
  font-family: "JetBrainsMono Nerd Font";
  src: url("fonts/JetBrainsMonoNerdFont-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrainsMono Nerd Font";
  src: url("fonts/JetBrainsMonoNerdFont-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
*/

:root {
  --mono: "JetBrainsMono Nerd Font", "JetBrainsMono NF", "JetBrains Mono NL",
          "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --bg:     #fbfbf9;
  --fg:     #14140f;
  --dim:    #6d6d64;
  --line:   #cfcfc6;
  --line-2: #e6e6df;
  --accent: #16653b;
  --sel:    #d8e8dd;

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --max:    64rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:     #0e0e0d;
    --fg:     #e6e6e0;
    --dim:    #85857c;
    --line:   #2c2c29;
    --line-2: #1c1c1a;
    --accent: #6cc48d;
    --sel:    #1d3a2a;
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.6;
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--sel); color: var(--fg); }

a { color: inherit; text-decoration: none; }
p  { margin: 0 0 1rem; }
hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  padding: .5rem .75rem; background: var(--fg); color: var(--bg); z-index: 10;
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

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

.dim { color: var(--dim); }

/* ── bars ─────────────────────────────────────────────────── */

.bar { border-bottom: 1px solid var(--line); }
footer.bar { border-bottom: 0; border-top: 1px solid var(--line); }

.bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3rem;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.brand img { display: block; width: 1.5rem; height: 1.5rem; }

.mark {
  font-weight: 700;
  letter-spacing: -.02em;
}
.mark::before { content: "["; color: var(--dim); }
.mark::after  { content: "]"; color: var(--dim); }

.bar nav {
  display: flex;
  gap: 1.25rem;
  font-size: .8125rem;
  color: var(--dim);
}
.bar nav a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.bar nav a.cta-sm { color: var(--accent); }

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

.hero { padding-block: clamp(3rem, 10vw, 6rem) clamp(2.5rem, 8vw, 5rem); }

.kicker {
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 1.75rem;
}

h1 {
  margin: 0 0 1.5rem;
  font-size: clamp(2.25rem, 7vw, 4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.035em;
}

.lede {
  max-width: 52ch;
  font-size: clamp(.9375rem, 1.6vw, 1.0625rem);
  color: var(--fg);
}

.note { font-size: .8125rem; color: var(--dim); margin: 1rem 0 0; }

/* ── buttons ──────────────────────────────────────────────── */

.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

.btn {
  display: inline-block;
  padding: .625rem 1.25rem;
  border: 1px solid var(--fg);
  font-size: .875rem;
  line-height: 1.4;
  white-space: nowrap;
  transition: background .1s linear, color .1s linear;
}
.btn:hover { background: var(--fg); color: var(--bg); }

.btn-solid { background: var(--fg); color: var(--bg); }
.btn-solid:hover { background: var(--bg); color: var(--fg); }

/* ── sections ─────────────────────────────────────────────── */

.slab { padding-block: clamp(2.5rem, 7vw, 4.5rem); }

h2 {
  margin: 0 0 2rem;
  font-size: clamp(1.125rem, 2.5vw, 1.375rem);
  font-weight: 700;
  letter-spacing: -.02em;
}
.idx {
  color: var(--dim);
  font-weight: 400;
  margin-right: .75rem;
}

h3 {
  margin: 0 0 .5rem;
  font-size: .9375rem;
  font-weight: 700;
}

/* ── sample output card ───────────────────────────────────── */

.card {
  border: 1px solid var(--line);
  background: var(--bg);
}

.card-head, .card-foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .625rem 1rem;
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.card-head { border-bottom: 1px solid var(--line); }
.card-foot { border-top: 1px solid var(--line); text-transform: none; letter-spacing: 0; }

.kv {
  margin: 0;
  display: grid;
  grid-template-columns: 8.5rem 1fr;
}
.kv dt {
  padding: .5rem 1rem;
  color: var(--dim);
  font-size: .8125rem;
  border-bottom: 1px solid var(--line-2);
}
.kv dd {
  margin: 0;
  padding: .5rem 1rem;
  font-size: .8125rem;
  border-bottom: 1px solid var(--line-2);
  overflow-wrap: anywhere;
}
.kv dt:last-of-type, .kv dd:last-of-type { border-bottom: 0; }

.bar-meter {
  display: inline-block;
  width: 6rem;
  height: .5rem;
  margin-left: .5rem;
  vertical-align: middle;
  border: 1px solid var(--line);
}
.bar-meter i { display: block; height: 100%; background: var(--accent); }

@media (max-width: 34rem) {
  .kv { grid-template-columns: 1fr; }
  .kv dt { padding-bottom: 0; border-bottom: 0; }
}

/* ── feature grid ─────────────────────────────────────────── */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.grid article {
  padding: 1.25rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.grid p { margin: 0; font-size: .8125rem; color: var(--dim); }

/* ── faq ──────────────────────────────────────────────────── */

.faq {
  margin: 0 auto;
  max-width: 62ch;
  text-align: center;
  border-top: 1px solid var(--line);
}
.faq dt {
  padding: 1.125rem 0 .375rem;
  font-weight: 700;
  font-size: .9375rem;
}
.faq dd {
  margin: 0;
  padding: 0 0 1.125rem;
  font-size: .8125rem;
  color: var(--dim);
  border-bottom: 1px solid var(--line);
}

/* ── closing ──────────────────────────────────────────────── */

.end { text-align: center; }
.end .actions { justify-content: center; }

/* ── motion ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ── ranking dentro do card ───────────────────────────────── */

.rank { border-top: 1px solid var(--line); padding: 1rem; }
.rank-title {
  margin: 0 0 .75rem;
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.rank ul { list-style: none; margin: 0; padding: 0; }
.rank li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: .75rem;
  padding: .3125rem 0;
  font-size: .8125rem;
}
.rank li span:first-child { font-style: italic; overflow-wrap: anywhere; }
.rank li b { font-weight: 500; min-width: 3rem; text-align: right; }

@media (max-width: 34rem) {
  .rank li { grid-template-columns: 1fr auto; }
  .rank li .bar-meter { display: none; }
}

/* ── texto de apoio ───────────────────────────────────────── */

.intro {
  max-width: 62ch;
  margin-top: -1rem;
  margin-bottom: 2rem;
  font-size: .875rem;
  color: var(--dim);
}

.lnk {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line);
}
.lnk:hover { text-decoration-color: var(--accent); color: var(--accent); }

/* ── duas colunas ─────────────────────────────────────────── */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.split article {
  padding: 1.25rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.split p { font-size: .8125rem; }
.split p:last-child { margin-bottom: 0; }

/* ── tabela ───────────────────────────────────────────────── */

.scroll { overflow-x: auto; border: 1px solid var(--line); }

.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: .8125rem;
}
.tbl th, .tbl td {
  padding: .625rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}
.tbl th {
  font-weight: 400;
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dim);
  border-bottom: 1px solid var(--line);
}
.tbl td:first-child { color: var(--dim); }
.tbl tbody tr:last-child td { border-bottom: 0; }

/* ── código ───────────────────────────────────────────────── */

code {
  font-family: var(--mono);
  font-size: .8125em;
  color: var(--accent);
}

pre {
  margin: 0 0 1rem;
  padding: .75rem 1rem;
  border: 1px solid var(--line);
  background: var(--line-2);
  overflow-x: auto;
  font-size: .8125rem;
  line-height: 1.5;
}
pre code { color: var(--fg); font-size: 1em; }

/* ── lista de downloads ───────────────────────────────────── */

.dl {
  list-style: none;
  counter-reset: dl;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.dl > li {
  counter-increment: dl;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line);
}
.dl-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}
.dl-head h3 { margin: 0; }
.dl-head h3::before {
  content: counter(dl, decimal-leading-zero) " ";
  color: var(--dim);
  font-weight: 400;
}
.dl-head code { color: var(--dim); }
.dl p {
  font-size: .8125rem;
  color: var(--dim);
  max-width: 68ch;
}
.dl p:last-child { margin-bottom: 0; }