/* ---------------------------------------------------------------------------
   Claim Tracker - site theme
   ---------------------------------------------------------------------------
   Loads after style.css and re-skins its components so every page shares the
   landing page's design language: the claim-file direction - ink and paper,
   hairline rules instead of drop shadows, near-square corners, Archivo for
   headings and IBM Plex Mono for anything that behaves like a reference number.

   Nothing here changes markup. Rules are written at the same specificity as the
   originals in style.css and win on source order, so this file can be removed
   to get the old look back.
   --------------------------------------------------------------------------- */

:root {
    /* Re-point the original tokens. Most of style.css inherits the new look
       from these six lines alone. */
    --primary-green: #00713a;
    --primary-gold: #f0b429;
    --primary-blue: #0b1f17;
    --primary-red: #b0463c;
    --dark-bg: #0b1f17;
    --light-bg: #e9eae4;
    --white: #ffffff;
    --gray-100: #f5f6f2;
    --gray-200: #e2e4dc;
    --gray-300: #d2d5cb;
    --gray-600: #5d6b62;
    --gray-800: #0b1f17;
    --success: #00713a;
    --info: #2f6d8c;
    --warning: #f0b429;
    --danger: #b0463c;

    --font-primary: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-heading: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;

    /* Ink-and-paper additions used by the rules below. */
    --ink: #0b1f17;
    --ink-soft: #16352a;
    --paper: #e9eae4;
    --paper-lift: #f5f6f2;
    --green-bright: #3ddc8d;
    --rule: rgba(11, 31, 23, 0.16);
    --rule-dark: rgba(233, 234, 228, 0.16);

    /* Near-square. The old 4-16px radii read as generic SaaS. */
    --radius-sm: 2px;
    --radius-md: 2px;
    --radius-lg: 3px;
    --radius-xl: 3px;

    /* Hairlines carry structure now, so shadows retreat to near nothing. */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
}

body {
    background-color: var(--paper);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

/* --- header -------------------------------------------------------------
   Dark on every page, matching the landing hero. The landing page's own rules
   in landing.css are now redundant but harmless - they set the same values. */

.header {
    background-color: var(--ink);
    border-bottom: 1px solid var(--rule-dark);
}

.logo h1 {
    color: var(--paper);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.nav-links a,
.nav-links button {
    color: rgba(233, 234, 228, 0.78);
    border-radius: 2px;
}

.nav-links a:hover,
.nav-links a.active,
.nav-links button:hover {
    color: var(--paper);
    background-color: rgba(233, 234, 228, 0.08);
}

.nav-links a.btn-primary {
    background-color: var(--green-bright);
    color: var(--ink);
    font-weight: 600;
}

.nav-links a.btn-primary:hover {
    background-color: var(--paper);
    color: var(--ink);
}

.nav-links a.btn-secondary,
.nav-links button.btn-secondary {
    background-color: transparent;
    border: 1px solid var(--rule-dark);
    color: var(--paper);
}

.nav-links a.btn-secondary:hover,
.nav-links button.btn-secondary:hover {
    border-color: var(--paper);
    background-color: transparent;
    color: var(--paper);
}

.mobile-menu-toggle .hamburger {
    background-color: var(--paper);
}

@media (max-width: 768px) {
    .nav-links {
        background-color: var(--ink);
        border-bottom: 1px solid var(--rule-dark);
    }
}

/* --- buttons ------------------------------------------------------------ */

.btn,
.btn-primary,
.btn-secondary,
.cta-buttons a,
.action-buttons a {
    font-family: var(--font-primary);
    font-weight: 600;
    border-radius: 2px;
    letter-spacing: 0;
    transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.btn-primary {
    background-color: var(--primary-green);
    color: #fff;
    border: 1px solid var(--primary-green);
}

.btn-primary:hover {
    background-color: var(--ink);
    border-color: var(--ink);
    color: #fff;
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: transparent;
    color: var(--ink);
    border: 1px solid var(--rule);
}

.btn-secondary:hover {
    background-color: transparent;
    border-color: var(--ink);
    color: var(--ink);
    transform: translateY(-2px);
}

.btn-large {
    padding: 17px 28px;
    font-size: 1rem;
}

/* --- page heroes ---------------------------------------------------------
   Every page opened with a centred gradient banner. They now share the landing
   page's ink field and left-aligned, tightly tracked display type. */

.hero,
.about-hero,
.how-it-works-hero,
.pricing-hero,
.contact-hero,
.page-hero {
    background: var(--ink);
    background-image: none;
    color: var(--paper);
    text-align: left;
    padding: clamp(52px, 7vw, 88px) 0;
    border-bottom: 1px solid var(--rule-dark);
}

.hero h1,
.about-hero h1,
.how-it-works-hero h1,
.pricing-hero h1,
.contact-hero h1,
.page-hero h1 {
    font-family: var(--font-heading);
    font-size: clamp(2.1rem, 4.8vw, 3.2rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: var(--paper);
    margin-bottom: 18px;
    max-width: 20ch;
    text-wrap: balance;
}

/* The mono eyebrow above a page title: the same device the landing page uses. */
.page-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--green-bright);
    margin-bottom: 14px;
}

.hero-subtitle,
.about-hero .hero-subtitle,
.how-it-works-hero .hero-subtitle,
.pricing-hero .hero-subtitle,
.contact-hero .hero-subtitle,
.page-hero .hero-subtitle {
    font-size: clamp(1rem, 1.7vw, 1.14rem);
    line-height: 1.6;
    color: rgba(233, 234, 228, 0.76);
    max-width: 52ch;
    margin-left: 0;
    margin-right: 0;
    opacity: 1;
}

/* --- section headings ---------------------------------------------------- */

.section-title,
.process-intro h2,
.process-section h2,
.about-section h2,
.contact-section h2,
.comparison-section h2,
.value-proposition h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.7rem, 3.2vw, 2.3rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: var(--ink);
    text-wrap: balance;
}

/* Left-aligned section headings everywhere, matching the landing page. Only the
   closing CTA bands stay centred, where the copy is short and symmetrical. */
.section-title,
.process-intro h2,
.process-section h2,
.about-section h2,
.contact-section h2,
.comparison-section h2,
.pricing-section h2 {
    text-align: left;
}

.cta-section h2,
.cta-section p,
.cta-content {
    text-align: center;
}

/* --- surfaces ------------------------------------------------------------
   One card treatment across the site: paper, one hairline, near-square, flat. */

.feature-card,
.value-card,
.step-card,
.faq-item,
.contact-method,
.help-topic,
.right-item,
.process-step,
.status-item,
.info-box,
.contact-box,
.payment-option,
.claim-card,
.profile-summary,
.update-item,
.timeline-item,
.pricing-card,
.legal-content,
.registration-form,
.success-card,
.legal-footer,
.business-hours,
.no-claims,
.no-updates {
    background-color: var(--paper-lift);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    box-shadow: none;
}

.feature-card:hover,
.value-card:hover,
.step-card:hover,
.contact-method:hover,
.claim-card:hover,
.help-topic:hover {
    transform: none;
    box-shadow: none;
    border-color: rgba(11, 31, 23, 0.4);
}

.feature-card h3,
.value-card h3,
.step-card h3,
.contact-method h3,
.help-topic h3,
.right-item h4,
.process-step h4,
.faq-item h4 {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
}

/* Sections that alternate background: keep two tones only, paper and lift. */
.features,
.how-it-works,
.about-content,
.how-it-works-content,
.pricing-content,
.contact-content,
.legal-page,
.registration-section,
.success-section,
.dashboard-container {
    background-color: var(--paper);
}

/* --- numbers and reference data -----------------------------------------
   Anything that behaves like a figure on a form is set in mono. */

/* Step numbers were 40-60px filled circles. The landing page sets a sequence as
   a plain mono index, which reads as a numbered entry rather than a badge. */
.step-number,
.section-number {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    background: none;
    color: var(--primary-green);
    width: auto;
    height: auto;
    border-radius: 0;
    box-shadow: none;
    display: inline-block;
    margin: 0 0 16px;
}

/* The steps grids centred their content; left-aligned matches the landing page. */
.step,
.step-card {
    text-align: left;
}

.timeline-marker {
    background-color: var(--ink);
    border-radius: 1px;
    box-shadow: none;
    border: none;
    width: 9px;
    height: 9px;
    top: 6px;
}

.effective-date,
.update-date,
.timeline-date,
.detail-row .label,
.price .currency,
.price .period,
.pricing-badge,
.status-badge,
.form-hint,
.legal-content .subtitle {
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
}

.status-badge {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    border-radius: 2px;
    font-weight: 500;
}

.price .amount {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: -0.04em;
    color: var(--ink);
}

.pricing-badge {
    background-color: var(--primary-gold);
    color: var(--ink);
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    border-radius: 2px;
}

.pricing-card.featured {
    border: 1px solid var(--ink);
}

.check-icon {
    color: var(--primary-green);
}

/* --- long-form legal ----------------------------------------------------- */

/* login, register, password reset and the success page all open with this
   block. It sits inside a padded container, so it is an inset ink card rather
   than a full-bleed band - the same treatment as the nested CTA blocks. */
.registration-header {
    background-color: var(--ink);
    border-radius: var(--radius-lg);
    padding: clamp(32px, 5vw, 52px);
    text-align: left;
    max-width: 1000px;
    margin: 0 auto var(--spacing-xl);
}

.registration-header h1 {
    color: var(--paper);
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    max-width: 20ch;
}

.registration-header p {
    color: rgba(233, 234, 228, 0.76);
    max-width: 52ch;
}

.legal-content h1,
.success-card h1,
.dashboard-container h2 {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.08;
    color: var(--ink);
}

/* Shares the display treatment above but keeps its paper colour on the ink card. */
.registration-header h1 {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.08;
}

.legal-section h2,
.legal-section h3,
.legal-section h4 {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.legal-section {
    border-bottom: 1px solid var(--rule);
}

.legal-section p,
.legal-section li,
.about-section p,
.faq-item p,
.step-card > p,
.feature-card p,
.value-card p {
    color: rgba(11, 31, 23, 0.72);
}

.legal-section a,
.contact-method a,
.resource-link {
    color: var(--primary-green);
    text-underline-offset: 3px;
}

/* --- forms --------------------------------------------------------------- */

.form-input,
.form-select,
.form-file {
    font-family: var(--font-primary);
    border: 1px solid var(--rule);
    border-radius: 2px;
    background-color: #fff;
    color: var(--ink);
}

.form-input:focus,
.form-select:focus,
.form-file:focus {
    border-color: var(--primary-green);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 113, 58, 0.16);
}

.form-group label {
    font-family: var(--font-primary);
    font-weight: 500;
    color: var(--ink);
}

.section-heading,
.subsection-heading {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.error {
    color: var(--danger);
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

.alert {
    border-radius: 2px;
    border: 1px solid var(--rule);
}

.alert-success {
    background-color: rgba(0, 113, 58, 0.08);
    border-color: rgba(0, 113, 58, 0.35);
    color: #0a4526;
}

.alert-error {
    background-color: rgba(176, 70, 60, 0.08);
    border-color: rgba(176, 70, 60, 0.35);
    color: #7d2a22;
}

/* --- closing CTA bands ---------------------------------------------------
   These appear on most pages and were a green-to-blue gradient. Now the same
   ink field the page opened with, so each page is bookended consistently. */

.cta-section {
    background: var(--ink);
    background-image: none;
    color: var(--paper);
    border: 1px solid var(--rule-dark);
    border-radius: var(--radius-lg);
}

/* The landing page and the standalone band at the foot of a page run full
   bleed; the ones nested inside a content column are inset cards. */
section.cta-section {
    border-left: none;
    border-right: none;
    border-radius: 0;
}

.cta-section h2,
.cta-content h2 {
    color: var(--paper);
    letter-spacing: -0.035em;
}

.cta-section p,
.cta-content p {
    color: rgba(233, 234, 228, 0.74);
}

/* Not a CTA band - an inset explainer inside the pricing column. */
.value-proposition {
    background-color: var(--paper-lift);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
}

.value-proposition p,
.value-proposition li {
    color: rgba(11, 31, 23, 0.72);
}

.value-note {
    color: var(--ink);
    font-weight: 500;
    font-style: normal;
    background-color: #fff;
    border-left: 3px solid var(--primary-green);
    border-radius: 0 2px 2px 0;
}

/* Scoped to the ink bands only: .cta-buttons also appears on light cards
   (about_us), where the standard solid-green primary button is correct. */
.cta-section .btn-primary {
    background-color: var(--green-bright);
    border-color: var(--green-bright);
    color: var(--ink);
}

.cta-section .btn-primary:hover {
    background-color: var(--paper);
    border-color: var(--paper);
    color: var(--ink);
}

.cta-section .btn-secondary {
    border-color: rgba(233, 234, 228, 0.32);
    color: var(--paper);
}

.cta-section .btn-secondary:hover {
    border-color: var(--paper);
    color: var(--paper);
}

.cta-note {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: rgba(233, 234, 228, 0.55);
}

/* --- dashboard -----------------------------------------------------------
   dashboard.html now extends base.html, so the page hero and site chrome come
   from the same place as every other page. These rules adapt the widths that
   assumed a standalone document. */

.dashboard-container {
    max-width: none;
    padding: clamp(36px, 5vw, 64px) 0;
}

.recent-updates-section,
.claims-section,
.profile-summary {
    margin-bottom: 28px;
}

.recent-updates-section,
.profile-summary {
    padding: clamp(20px, 3vw, 32px);
}

.claims-section h3,
.recent-updates-section h3,
.profile-summary h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.claim-header h4 {
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--ink);
}

.update-item {
    border-left: 3px solid var(--rule);
    border-radius: 0 2px 2px 0;
}

.timeline-header strong,
.timeline-status strong {
    font-family: var(--font-mono);
    font-weight: 500;
}

.claim-header {
    border-bottom: 1px solid var(--rule);
}

.detail-row {
    border-bottom: 1px solid var(--rule);
}

.detail-row .label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gray-600);
}

.detail-row .value {
    color: var(--ink);
    font-weight: 500;
}

.status-active {
    color: var(--primary-green);
}

.status-inactive {
    color: var(--danger);
}

/* --- footer -------------------------------------------------------------- */

.footer {
    background-color: var(--ink);
    color: rgba(233, 234, 228, 0.7);
    border-top: 1px solid var(--rule-dark);
}

.footer-section h3,
.footer-section h4 {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--paper);
}

.footer-section a {
    color: rgba(233, 234, 228, 0.7);
}

.footer-section a:hover {
    color: var(--green-bright);
}

.footer-bottom {
    border-top: 1px solid var(--rule-dark);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: rgba(233, 234, 228, 0.45);
}

/* --- accessibility floor -------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--primary-gold);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .btn:hover,
    .btn-primary:hover,
    .btn-secondary:hover {
        transform: none;
    }
}