/*
 * Landing page — approved frame `Landing` (22:587), section
 * `🔵 WIP — Landing page` (55:1434) on the AJIRA 1.0 `WIP` page.
 *
 * Desktop only, by decision: the page is a fixed 1440 canvas and never
 * reflows. Narrower than that, the browser scrolls sideways rather than the
 * layout inventing a phone design nobody drew.
 */

:root {
  --slate-900: #0f172b;
  --slate-800: #1d293d;
  --slate-700: #314158;
  --slate-500: #62748e;
  --slate-400: #90a1b9;
  --slate-300: #cad5e2;
  --slate-200: #e2e8f0;
  --slate-50: #f8fafc;

  --blue-700: #1447e6;
  --blue-600: #155dfc;
  --blue-500: #2b7fff;
  --blue-400: #50a2ff;
  --blue-50: #eff6ff;

  --emerald-700: #007a55;
  --emerald-500: #00bc7d;
  --emerald-50: #ecfdf5;

  --violet-700: #7008e7;
  --violet-50: #f5f3ff;

  --amber-600: #e17100;

  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* 1440 canvas, 208 gutters, 1024 of content between them. */
  --gutter: 208px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #fff;
  color: var(--slate-900);
  font-family: var(--sans);
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  -webkit-font-smoothing: antialiased;
}

.page {
  width: 1440px;
  margin: 0 auto;
}

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

/* Named text styles from the design file, kept as one class each so the frame
   and the page can be compared line by line. */
.t-display {
  font-size: 62px;
  line-height: 64px;
  letter-spacing: -2px;
  font-weight: 700;
  margin: 0;
}
.t-section {
  font-size: 34px;
  line-height: 40px;
  letter-spacing: -0.9px;
  font-weight: 700;
  margin: 0;
}
.t-lead {
  font-size: 19px;
  line-height: 30px;
  letter-spacing: -0.1px;
  margin: 0;
}
.t-body-lg {
  font-size: 16px;
  line-height: 26px;
  margin: 0;
}
.t-body {
  font-size: 14px;
  line-height: 20px;
  margin: 0;
}
.t-panel {
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.1px;
  font-weight: 600;
  margin: 0;
}
.t-cell {
  font-size: 13px;
  line-height: 18px;
  margin: 0;
}
.t-caps {
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.6px;
  font-weight: 600;
  margin: 0;
}

/* Wordmark — mark is assets/logo/ajira-node.svg, copied in as ajira-node.svg */
.wordmark {
  display: flex;
  align-items: center;
  gap: 6px;
}
.wordmark img {
  width: 18px;
  height: 18px;
  display: block;
}
.wordmark span {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.35px;
  font-weight: 700;
}

/* nav */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px var(--gutter);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-links a {
  font-size: 14px;
  line-height: 20px;
  color: var(--slate-500);
}
.nav-links a:hover {
  color: var(--slate-900);
}
.nav-cta {
  background: var(--slate-900);
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
}
.nav-cta:hover {
  background: var(--slate-800);
}

/* hero — the product shot starts at x792 and runs off the right edge, exactly
   as drawn, so the section clips rather than shrinking it. */
.hero {
  position: relative;
  height: 688px;
  overflow: hidden;
}
.hero-copy {
  /* The gutter is a margin, not padding: the copy column is 520 wide in the
     frame, and folding 208 of gutter into its box left only 312 for the h1,
     which broke the headline onto three lines. */
  width: 520px;
  margin-left: var(--gutter);
  padding-top: 72px;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--blue-50);
  color: var(--blue-700);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  padding: 4px 10px 4px 8px;
  border-radius: 6px;
}
.eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue-600);
}
.hero h1 {
  padding-top: 24px;
}
.hero-lead {
  padding-top: 22px;
  color: var(--slate-500);
}
.hero-form {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 32px;
}
.field {
  flex: 1 0 0;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--slate-300);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 20px;
  color: var(--slate-900);
}
.field::placeholder {
  color: var(--slate-400);
}
.field:focus {
  outline: none;
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px rgb(21 93 252 / 0.16);
}
.submit {
  background: var(--blue-600);
  color: #fff;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  padding: 12px 20px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
.submit:hover {
  background: var(--blue-700);
}
.hero-hint {
  padding-top: 12px;
  color: var(--slate-400);
}
.hero-hint a {
  color: var(--blue-600);
  text-decoration: underline;
}
.hero-shot {
  position: absolute;
  left: 792px;
  top: 72px;
  width: 800px;
  height: 520px;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
/* The export carries its own corner and shadow; letting it run past the box's
   height reproduces the designed crop of the app screen. */
.hero-shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* features */
.features {
  padding: 24px var(--gutter) 96px;
}
.head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 44px;
}
.head .t-caps {
  color: var(--slate-400);
}
.cards {
  display: flex;
  align-items: stretch;
  gap: 32px;
}
.card {
  flex: 1 0 0;
  min-width: 0;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.fragment {
  height: 92px;
  display: flex;
  flex-direction: column;
}
.card-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 28px;
}
.card-copy p:last-child {
  color: var(--slate-500);
}

.bar {
  display: flex;
  align-items: center;
  gap: 12px;
}
.track {
  flex: 1 0 0;
  min-width: 0;
  height: 8px;
  border-radius: 4px;
  background: var(--slate-200);
  display: flex;
  overflow: hidden;
}
.track .done {
  background: var(--emerald-500);
}
.track .doing {
  background: var(--blue-500);
}
.bar-pct {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--slate-700);
  white-space: nowrap;
}
.legend {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 10px;
}
.legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 18px;
  color: var(--slate-500);
  white-space: nowrap;
}
.legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: block;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 6px;
}
.pill + .pill {
  margin-top: 8px;
}
.pill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: block;
  background: currentColor;
}
.pill.violet {
  background: var(--violet-50);
  color: var(--violet-700);
}
.pill.blue {
  background: var(--blue-50);
  color: var(--blue-700);
}
.pill.green {
  background: var(--emerald-50);
  color: var(--emerald-700);
}

.sprint-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sprint-name b {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--slate-800);
}
.sprint-name span {
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--amber-600);
}
.sprint-track {
  height: 6px;
  border-radius: 3px;
  background: var(--slate-200);
  display: flex;
  overflow: hidden;
  margin-top: 6px;
}
.sprint-counts {
  color: var(--slate-400);
  margin-top: 6px;
}

/* reading — the one dark section */
.reading {
  background: var(--slate-900);
  padding: 88px var(--gutter) 0;
  height: 764px;
  overflow: hidden;
}
.reading .t-caps {
  color: var(--blue-400);
}
.reading .t-section {
  color: #fff;
}
.reading .t-body-lg {
  width: 700px;
  color: var(--slate-400);
}
.table-crop {
  position: relative;
  height: 470px;
  overflow: hidden;
}
.table-crop img {
  display: block;
  width: 976px;
  margin-left: 24px;
  border-radius: 12px;
}
/* Same gradient as the `fade` rect (25:1055): transparent to the section's
   own background, so the table dissolves instead of being cut. */
.table-crop .fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 150px;
  background: linear-gradient(to bottom, rgb(15 23 43 / 0), rgb(15 23 43 / 1));
}

/* start */
.start {
  padding: 88px var(--gutter);
}
.start .head {
  padding-bottom: 40px;
}
.columns {
  display: flex;
  align-items: stretch;
  gap: 32px;
}
.column {
  flex: 1 0 0;
  min-width: 0;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.column > p:last-child {
  color: var(--slate-500);
}
.demo-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border: 1px solid var(--slate-300);
  border-radius: 10px;
  padding: 6px 6px 6px 14px;
}
.demo-field span {
  font-size: 14px;
  line-height: 20px;
}
.demo-field a {
  background: var(--blue-600);
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
}
.demo-field a:hover {
  background: var(--blue-700);
}
.code {
  background: var(--slate-900);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 20px;
  color: var(--slate-300);
}
.code .run {
  color: var(--emerald-500);
}

/* footer */
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--slate-200);
  padding: 36px var(--gutter) 44px;
}
.footer-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.footer-left p {
  color: var(--slate-400);
}
.footer-right {
  display: flex;
  align-items: center;
  gap: 24px;
}
.footer-right a {
  font-size: 14px;
  line-height: 20px;
  color: var(--slate-500);
}
.footer-right a:hover {
  color: var(--slate-900);
}