/* Tokens copied from HiringRumble app/globals.css so this page reads as the same product. */
:root {
  color-scheme: light;
  --background: oklch(98.5% 0.003 265);
  --foreground: oklch(25% 0.02 265);
  --muted-foreground: oklch(54% 0.018 263);
  --border: oklch(93.4% 0.003 265);
  --card: oklch(100% 0 0);
  --primary: oklch(56% 0.12 195);
  --cta: oklch(70% 0.18 45);
  --cta-hover: oklch(65% 0.19 42);
  --grad-hero: radial-gradient(110% 70% at 50% -10%, oklch(95% 0.05 195) 0%, oklch(98% 0.018 200) 45%, oklch(99% 0.004 200) 100%);
  --shadow-soft: 0 1px 2px oklch(40% 0.03 265 / 0.04), 0 4px 14px oklch(40% 0.03 265 / 0.05);
}

* { box-sizing: border-box; }

html { background: var(--background); }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--grad-hero) no-repeat, var(--background);
  color: var(--foreground);
  font: 16px/1.6 "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-underline-offset: 2px; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 40px 16px 56px; }
.wrap.narrow { max-width: 900px; }

.brand { display: block; width: fit-content; margin: 0 auto; }
.brand img { height: 64px; width: auto; display: block; }

.hero { text-align: center; margin: 40px auto 36px; max-width: 760px; }
.badge {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  background: color-mix(in oklch, var(--primary) 12%, white);
  color: var(--primary); font-size: 13px; font-weight: 600;
}
.hero h1 {
  font-size: clamp(30px, 5vw, 46px); line-height: 1.12; letter-spacing: -0.02em;
  font-weight: 800; margin: 16px 0 14px;
}
.hero h1 span { color: var(--primary); }
.hero p { color: var(--muted-foreground); font-size: 18px; margin: 0 auto; max-width: 640px; }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
@media (max-width: 760px) { .cols { grid-template-columns: 1fr; } }

.card {
  position: relative;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 20px; padding: 28px; box-shadow: var(--shadow-soft);
}
.card h1 { font-size: 24px; line-height: 1.25; margin: 4px 0 10px; }
.card h2 { font-size: 20px; line-height: 1.3; margin: 4px 0 10px; }
.card h3 { font-size: 15px; margin: 22px 0 6px; }
.card p, .card li { color: var(--muted-foreground); font-size: 15px; }
.card p { margin: 0 0 10px; }
.card ul { margin: 0; padding-left: 18px; }
.card li { margin-bottom: 4px; }
.card strong { color: var(--foreground); }

.lang {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--muted-foreground); border: 1px solid var(--border);
  border-radius: 6px; padding: 1px 7px;
}

.cta {
  display: inline-block; margin-top: 8px; padding: 11px 20px; border: 0; border-radius: 12px;
  background: var(--cta); color: #fff; font: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.cta:hover { background: var(--cta-hover); }

.muted { color: var(--muted-foreground); font-size: 14px; }

.company { margin-top: 20px; }
.company dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 10px 0 0; font-size: 14px; }
.company dt { color: var(--muted-foreground); }
.company dd { margin: 0; }
@media (max-width: 560px) {
  .company dl { grid-template-columns: 1fr; gap: 0; }
  .company dd { margin-bottom: 8px; }
}

footer { margin-top: 36px; text-align: center; font-size: 13px; color: var(--muted-foreground); }