/* ============================================================
   "Editorial" direction — loaded AFTER styles.css.
   Deliberately not legal-tech-blue. Warm paper, ink type,
   a deep green accent, hairline rules instead of shadows,
   near-square corners, serif display face.
   ============================================================ */
:root {
    --dark:         #f7f5f1;   /* warm paper */
    --dark-lighter: #ffffff;
    --dark-card:    #ffffff;
    --dark-border:  #e4ded3;   /* warm hairline */
    --white:        #17150f;   /* ink */
    --gray-300:     #4a453c;
    --gray-400:     #6d665b;
    --gray-500:     #8b8477;
    --gray-600:     #a39b8c;
    --primary:      #1d5c45;   /* deep green */
    --primary-dark: #14432f;
    --primary-rgb:  29, 92, 69;

    --radius:    4px;
    --radius-sm: 3px;
    --radius-lg: 6px;
    --shadow:    none;
    --shadow-lg: none;

    --font-heading: 'Newsreader', Georgia, serif;
}

/* Display type: serif, tighter, less shouty than a geometric sans */
h1, h2, h3, h4, h5 { font-family: var(--font-heading); font-weight: 600; letter-spacing: -0.015em; }
h1 { letter-spacing: -0.022em; line-height: 1.06; }
.hero-split h1 { font-size: clamp(2.4rem, 4vw, 3.9rem); }
.section-title { font-weight: 600; }

/* Labels become small caps rules rather than coloured eyebrows */
.section-label {
    color: var(--gray-500);
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
}

/* Buttons: squared, flat, bordered */
.btn { border-radius: 4px; font-family: var(--font-body); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); color: #fff; }
.btn-outline { border: 1px solid var(--white); color: var(--white); background: transparent; }
.btn-outline:hover { background: var(--white); color: var(--dark); border-color: var(--white); }
.btn-lg { padding: 15px 30px; }

/* Surfaces: hairline rules, no fills competing with the paper */
.about-item, .icp-list li, .founder-card, .faq-item, .value-card {
    background: transparent;
    border: 1px solid var(--dark-border);
    border-radius: 4px;
}
.matter-mock { border: 1px solid var(--dark-border); border-radius: 6px; }
.matter-mock .visual-card-header { background: #f1ede5; border-bottom: 1px solid var(--dark-border); }
.visual-dot { background: #cfc7b8 !important; }
.mock-title { color: var(--gray-400); font-family: var(--font-body); }
.mock-track { background: #e4ded3; }
.mock-value, .mock-label { font-family: var(--font-body); }
.mock-pill {
    background: transparent; border: 1px solid var(--dark-border);
    color: var(--gray-400); border-radius: 3px;
}

/* No gradient — a gradient is the giveaway of a template */
.text-gradient {
    background: none; -webkit-text-fill-color: currentColor;
    color: var(--primary);
}
.hero-glow { background: none; }
.hero-grid { background-image: none; }

/* The serif-italic accent was the borrowed move. Retire it. */
.accent-serif { font-family: var(--font-heading); font-style: normal; font-weight: 600; }

/* Header */
.header-scrolled { background: rgba(247,245,241,0.92); border-bottom: 1px solid var(--dark-border); }
.nav-link.active { background: transparent; color: var(--white); box-shadow: inset 0 -2px 0 var(--primary); border-radius: 0; }
.logo svg rect { fill: var(--primary); }
.logo svg path:last-of-type { fill: var(--primary); }
.hero-badge {
    background: transparent; border: 1px solid var(--dark-border);
    color: var(--gray-400); border-radius: 3px;
    font-family: var(--font-body);
}

/* Section separation by rule, not by fill */
.about-block { border-top: 1px solid var(--dark-border); }
.about-block:nth-of-type(even) { background: transparent; }
.statement-section { background: #fffdf9; border-color: var(--dark-border); }
.trust-bar { background: transparent; border-bottom: 1px solid var(--dark-border); }
.trust-row span { font-family: var(--font-body); font-weight: 600; color: var(--gray-400); }
.faq-section, .solution-section { background: transparent; }

/* Tables */
.facts-table, .price-table { background: transparent; border: 1px solid var(--dark-border); }
.facts-table th, .price-table thead th { background: #f1ede5; color: var(--white); font-family: var(--font-body); }
.price-table thead th { color: var(--gray-500); }
.facts-table tr + tr th, .facts-table tr + tr td,
.price-table tbody tr + tr td { border-top: 1px solid var(--dark-border); }
.price-table td.price { font-family: var(--font-body); color: var(--white); }
.facts-wrap { border-radius: 4px; }

.org-chip { background: transparent; border: 1px solid var(--dark-border); border-radius: 3px; color: var(--gray-400); }
.case-study-tag { background: transparent; border: 1px solid var(--primary); color: var(--primary); border-radius: 3px; }
.value-number { color: var(--primary); opacity: 1; font-family: var(--font-body); font-size: 0.85rem; letter-spacing: 0.14em; }

/* Footer: ink block to close the page */
.footer { background: var(--white); border-top: 0; }
.footer, .footer p, .footer a { color: #b8b2a6; }
.footer h3, .footer .logo span { color: #fff; }
.footer a:hover { color: #fff; }
.footer .logo svg rect { fill: #fff; }
.footer .logo svg path:last-of-type { fill: var(--white); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); }

/* Company and product names read better in the body face than the serif */
.org-chip, .trust-row span, .case-study-tag, .mock-pill, .hero-badge,
.record-stat-label, .founder-role { font-family: var(--font-body); }

/* An h2 inside a card is a card heading, not a section heading — size it
   like the h3 it replaced. (Service names were promoted to h2 for correct
   document outline; they must not inherit section-title scale.) */
.about-item h2 {
    font-size: 1.28rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--white);
    margin-bottom: 12px;
    line-height: 1.3;
}
/* Links inside cards need to look like links */
.about-item a, .icp-list a, .founder-card a, .faq-item a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.about-item a:hover { color: var(--primary-dark); }