/* Kresko "Quiet Studio" neutrals (light). Source: Kresko-Templates/reporting/REPORTING-PROCESS.md */
:root{
  --background: oklch(0.977 0.003 80);
  --card: oklch(1 0 0);
  --foreground: oklch(0.21 0.01 80);
  --secondary-foreground: oklch(0.42 0.008 80);
  --muted-foreground: oklch(0.5 0.008 80);
  --border: oklch(0.905 0.004 80);
  --border-strong: oklch(0.82 0.006 80);
  --border-soft: oklch(0.945 0.003 80);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Inter','Helvetica Neue',-apple-system,sans-serif;
  background:var(--background); color:var(--foreground);
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:inherit}
a:focus-visible{outline:2px solid var(--foreground); outline-offset:3px; border-radius:8px}

.page{max-width:720px; margin:0 auto; padding:44px 24px 80px}

.top{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:72px}
.logo{display:block; line-height:0}
.logo img{height:17px; width:auto}
.top .area{font-size:13px; color:var(--muted-foreground)}

h1{font-size:40px; font-weight:600; letter-spacing:-.03em; line-height:1.1}
.lead{margin-top:14px; font-size:16px; color:var(--secondary-foreground); max-width:540px}
.summary{margin-top:12px; font-size:14px; color:var(--muted-foreground); font-variant-numeric:tabular-nums}

section{margin-top:48px}
h2{font-size:15px; font-weight:600; letter-spacing:-.01em; margin-bottom:14px}

/* Document and tool cards */
.cards{list-style:none; display:grid; gap:10px}
.cards a{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:20px 22px; text-decoration:none;
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  transition:border-color .15s ease;
}
.cards a:hover{border-color:var(--border-strong)}
.cards .title{display:block; font-size:17px; font-weight:600; letter-spacing:-.015em}
.cards .meta{display:block; margin-top:3px; font-size:13px; color:var(--muted-foreground); font-variant-numeric:tabular-nums}
.cards .arrow{flex:none; width:18px; height:18px; color:var(--muted-foreground); transition:transform .15s ease, color .15s ease}
.cards a:hover .arrow{transform:translateX(3px); color:var(--foreground)}

.empty{padding:20px 22px; font-size:14px; color:var(--muted-foreground); background:var(--card); border:1px solid var(--border); border-radius:14px}

.steps{
  list-style:none; counter-reset:step;
  background:var(--card); border:1px solid var(--border); border-radius:14px;
}
.steps li{counter-increment:step; display:flex; gap:14px; padding:16px 22px; color:var(--secondary-foreground)}
.steps li + li{border-top:1px solid var(--border-soft)}
.steps li::before{content:counter(step); flex:none; width:22px; color:var(--muted-foreground); font-variant-numeric:tabular-nums}

@media (max-width:600px){
  .page{padding:28px 16px 56px}
  .top{margin-bottom:48px}
  h1{font-size:32px}
  .cards a{padding:16px 18px}
}