/* ============================================================
   SECUUR skin · EDITORIAL
   Refined serif display, paper surface, generous air, hairline
   rules, forest-green accent. Premium and quiet.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap');

:root {
  --display: 'Instrument Serif', Georgia, serif;
  --body: 'Satoshi', 'Inter', sans-serif;

  --color-pri: #F4F1E9;          /* warm paper */
  --color-sec: #1B1A17;          /* warm ink */
  --color-accent: #1C5D45;       /* forest green */
  --color-alarm: #A23B2C;        /* oxblood-terracotta */

  --line: #1B1A17;
  --line-soft: rgba(27,26,23,0.16);
  --accent-soft: rgba(28,93,69,0.07);
  --alarm-soft: rgba(162,59,44,0.07);
  --accent-tint: #CDE0D6;
  --alarm-tint: #ECD8D2;

  --border: 1px solid var(--line);

  --radius: 4px;
  --radius-lg: 6px;
  --radius-sm: 4px;
  --radius-pill: 4px;
  --shadow-card: none;
  --shadow-btn: none;
}

/* serif display: lighter weight, leading tuned to contain deep descenders at any wrap */
h1,h2,h3 { font-weight: 400; letter-spacing: -0.01em; line-height: 1.22; }
.display-xl { font-weight: 400; font-size: clamp(2.6rem, 5.6vw, 5rem); letter-spacing: -0.02em; line-height: 1.2; }
.display-l { font-weight: 400; font-size: clamp(2.1rem, 4.4vw, 3.5rem); letter-spacing: -0.015em; line-height: 1.22; }
.display-m { font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.24; }
.lead { font-size: clamp(1.1rem, 1.5vw, 1.32rem); }
.grade-letter { font-weight: 400; }

/* labels & micro-type stay in the sans for contrast */
.label, .series-no, .pillar-no, .tier .series-no, .footer h4,
.step-no, .grade-tag, .strip-item, .chip { font-family: var(--body); font-weight: 600; }

/* hairline precision, almost no rounding, no shadow */
.card-corner::before, .card-corner::after { background: var(--color-pri); }
.btn { border-radius: var(--radius); }
.btn--accent:hover { background: #134634; border-color: #134634; }
.scan, .leadform, .checkout, .codeblock, .pillars, .feature-grid,
.tiers, .algo, .hndl, .steps, .handshake, .brief, .statband, .analogy {
  border-radius: var(--radius-lg);
}
.scan-form button { background: var(--color-sec); }
.scan-form button:hover { background: var(--color-accent); }
.codeblock, .tier--feature { background: var(--color-sec); }
.grade { border-radius: var(--radius); }

/* a touch more breathing room, befitting editorial */
.section { padding: 120px 0; }

::selection { background: var(--color-accent); color: var(--color-pri); }