/* ==========================================================================
   RankUp landing — raw, monochrome, industrial. One accent.
   No glow, no glass, no gradients, no stacked-identical cards, no centered hero.
   Reference energy: Linear / Vercel / GitHub / Basecamp / old-web utility.
   ========================================================================== */

:root {
  --paper:   #0b0b0c;   /* near-black, not pure */
  --paper-2: #121214;
  --panel:   #161618;
  --line:    #26262a;
  --line-2:  #34343a;
  --ink:     #f2f2f0;
  --ink-2:   #b9b9b6;
  --ink-3:   #7c7c78;
  --ink-4:   #55555200;

  --accent:  #d6ff3f;   /* one accent — acid lime, reads "scoreboard", not SaaS-teal */
  --accent-ink: #0b0b0c;

  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --sans: 'Archivo', system-ui, sans-serif;

  --maxw: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--accent-ink); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* Fine top hairline strip — utilitarian, like a status bar */
.topstrip {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-3);
}
.topstrip .wrap { display: flex; justify-content: space-between; height: 32px; align-items: center; }
.topstrip .dot { color: var(--accent); }

/* Header */
header { border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--paper); z-index: 30; }
header .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.logo { display: flex; align-items: center; gap: 10px; }
.logo-mark {
  width: 26px; height: 26px; border: 1px solid var(--ink); display: grid; place-items: center;
}
.logo-mark svg { width: 16px; height: 16px; }
.logo-name { font-family: var(--mono); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.logo-name b { color: var(--accent); font-weight: 700; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); padding: 7px 12px; border-radius: 5px; }
.nav a:hover { color: var(--ink); background: var(--panel); }
.nav .cta {
  color: var(--accent-ink); background: var(--accent); font-weight: 700; margin-left: 8px;
  border: 1px solid var(--accent);
}
.nav .cta:hover { background: transparent; color: var(--accent); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  padding: 11px 18px; border-radius: 6px; cursor: pointer; border: 1px solid var(--accent);
  background: var(--accent); color: var(--accent-ink); transition: background .12s, color .12s;
}
.btn:hover { background: transparent; color: var(--accent); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-line:hover { border-color: var(--ink); background: transparent; color: var(--ink); }

/* ---------- HERO: split, left-weighted, asymmetric ---------- */
.hero { border-bottom: 1px solid var(--line); }
.hero .wrap { display: grid; grid-template-columns: 1.35fr 0.9fr; }
.hero-left { padding: 66px 44px 60px 0; border-right: 1px solid var(--line); }
.hero-tag { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-bottom: 26px; }
.hero-tag b { color: var(--accent); font-weight: 700; }
.hero h1 {
  font-family: var(--sans); font-weight: 800; font-size: clamp(38px, 5.4vw, 64px);
  line-height: 1.0; letter-spacing: -0.03em; max-width: 15ch;
}
.hero h1 em { font-style: normal; color: var(--ink-3); }
.hero-sub { color: var(--ink-2); font-size: 16px; max-width: 46ch; margin-top: 22px; }
.hero-actions { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.hero-meta { margin-top: 30px; font-family: var(--mono); font-size: 12px; color: var(--ink-3); display: flex; gap: 20px; flex-wrap: wrap; }
.hero-meta span::before { content: '· '; color: var(--accent); }

/* Right column: a compact real "spec sheet" panel, not a mockup */
.hero-right { padding: 30px 0 30px 40px; display: flex; flex-direction: column; justify-content: center; }
.spec { border: 1px solid var(--line); }
.spec-head {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em;
  padding: 11px 16px; border-bottom: 1px solid var(--line); background: var(--paper-2);
  display: flex; justify-content: space-between;
}
.spec-row { display: flex; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 13px; }
.spec-row:last-child { border-bottom: 0; }
.spec-row .k { color: var(--ink-3); }
.spec-row .v { color: var(--ink); }
.spec-row .v.hi { color: var(--accent); }

/* ---------- Section scaffolding ---------- */
.sec { border-bottom: 1px solid var(--line); }
.sec-inner { padding: 62px 0; }
.kicker { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-bottom: 12px; }
.kicker b { color: var(--accent); font-weight: 700; }
.h2 { font-family: var(--sans); font-weight: 800; font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -0.02em; line-height: 1.05; max-width: 22ch; }
.lead2 { color: var(--ink-2); font-size: 16px; max-width: 54ch; margin-top: 14px; }

/* HOW — numbered rows, not cards; dense left labels */
.how { margin-top: 40px; border-top: 1px solid var(--line); }
.how-row { display: grid; grid-template-columns: 60px 1fr; border-bottom: 1px solid var(--line); }
.how-row .n { font-family: var(--mono); font-size: 13px; color: var(--accent); padding: 24px 0 24px 2px; }
.how-row .c { padding: 24px 0; }
.how-row h3 { font-family: var(--sans); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; }
.how-row p { color: var(--ink-2); font-size: 14.5px; margin-top: 5px; max-width: 60ch; }

/* WHAT — asymmetric two-column feature list, varied widths */
.what-grid { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.what-item { padding: 22px 24px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.what-item h4 { font-family: var(--mono); font-size: 13.5px; color: var(--ink); letter-spacing: -0.01em; }
.what-item h4 .b { color: var(--accent); margin-right: 8px; }
.what-item p { color: var(--ink-2); font-size: 14px; margin-top: 6px; }
.what-item.wide { grid-column: 1 / -1; }

/* EXAMPLE — a real framed page, browser chrome minimal */
.frame { margin-top: 34px; border: 1px solid var(--line-2); background: var(--paper-2); }
.frame-bar { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.frame-bar .u { margin-left: 6px; }
.frame-bar .live { margin-left: auto; color: var(--accent); }
.frame iframe { width: 100%; height: 540px; border: 0; display: block; background: var(--paper); }

/* PRICING — a real comparison table, not 3 glowing cards */
.ptable { margin-top: 38px; border: 1px solid var(--line); border-collapse: collapse; width: 100%; }
.ptable th, .ptable td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 16px 18px; text-align: left; font-size: 14px; vertical-align: top; }
.ptable th:last-child, .ptable td:last-child { border-right: 0; }
.ptable thead th { background: var(--paper-2); font-family: var(--mono); font-size: 12px; color: var(--ink-3); font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; }
.ptable thead th.plan { color: var(--ink); font-size: 15px; text-transform: none; letter-spacing: 0; }
.ptable thead th.plan .price { font-family: var(--sans); font-weight: 800; font-size: 24px; color: var(--ink); display: block; margin-top: 4px; letter-spacing: -0.02em; }
.ptable thead th.plan .price small { font-family: var(--mono); font-size: 12px; color: var(--ink-3); font-weight: 400; }
.ptable thead th.pro { background: #17170f; }
.ptable thead th.pro .price { color: var(--accent); }
.ptable td.feat { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }
.ptable td.mark { text-align: center; font-family: var(--mono); color: var(--accent); }
.ptable td.no { text-align: center; color: var(--ink-4); }
.ptable td.no::after { content: '—'; color: #444; }
.ptable tfoot td { border-right: 0; padding-top: 20px; }
.price-note { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-top: 14px; }

/* FORM — real, dense, left aligned */
.formsec .sec-inner { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; }
.formsec .intro h2 { font-family: var(--sans); font-weight: 800; font-size: clamp(24px,3vw,34px); letter-spacing: -0.02em; line-height: 1.05; }
.formsec .intro p { color: var(--ink-2); margin-top: 14px; font-size: 15px; }
.formsec .intro ul { list-style: none; margin-top: 22px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }
.formsec .intro li { padding: 8px 0; border-top: 1px solid var(--line); }
.formsec .intro li::before { content: '→ '; color: var(--accent); }

form { border: 1px solid var(--line); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; }
.field { display: flex; flex-direction: column; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.field:nth-child(odd) { border-right: 1px solid var(--line); }
.field.full { grid-column: 1 / -1; border-right: 0; }
.field label { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); padding: 12px 14px 0; }
.field input, .field select, .field textarea {
  background: transparent; border: 0; color: var(--ink); font-family: var(--sans); font-size: 15px;
  padding: 6px 14px 13px; outline: none;
}
.field input::placeholder, .field textarea::placeholder { color: #4a4a48; }
.field select { color: var(--ink); }
.field select option { background: var(--panel); }
.field textarea { resize: vertical; min-height: 76px; }
.field:focus-within label { color: var(--accent); }
.form-foot { display: flex; align-items: center; gap: 16px; padding: 16px; flex-wrap: wrap; }
.form-foot .note { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.form-msg { font-family: var(--mono); font-size: 13px; padding: 0 16px 16px; display: none; }
.form-msg.ok { display: block; color: var(--accent); }
.form-msg.err { display: block; color: #ff8f6b; }
button[disabled] { opacity: 0.5; cursor: not-allowed; }

/* FAQ — plain accordion-less list, tight */
.faq { margin-top: 34px; border-top: 1px solid var(--line); }
.qa { padding: 22px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 30px; }
.qa h4 { font-family: var(--sans); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.qa p { color: var(--ink-2); font-size: 14.5px; }

/* Footer */
footer { padding: 28px 0; }
footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
footer .fmono { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }

/* Responsive */
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-left { border-right: 0; padding: 48px 0 40px; }
  .hero-right { padding: 0 0 44px; }
  .what-grid { grid-template-columns: 1fr; }
  .formsec .sec-inner { grid-template-columns: 1fr; gap: 28px; }
  .form-grid { grid-template-columns: 1fr; }
  .qa { grid-template-columns: 1fr; gap: 8px; }
  .frame iframe { height: 460px; }
  .ptable, .ptable thead, .ptable tbody, .ptable tfoot, .ptable tr, .ptable th, .ptable td { display: block; }
  .ptable thead { display: none; }
  .ptable td { border-right: 0; }
}