/* ===================================================================
   SITECHECK PRO — CLEAN RESTORED DASHBOARD LAYOUT
   Matches yesterday’s working version exactly
   KPI 1–3 = equal width, equal height
   KPI 4   = same width, tall sidebar panel
=================================================================== */

/* ----------------------------------------------
   GLOBAL CLEAN BASE
---------------------------------------------- */

:root {
    --brand: #3b82f6;
    --brand-dark: #1e40af;
    --bg-dark: #0f172a;
    --card-bg: rgba(255,255,255,0.07);
}

/* reset */
* {
    box-sizing: border-box;
}

body {
    background: #f3f4f6;
    font-family: system-ui, sans-serif;
}

/* ============================================================
   SITE CHECK PRO — KPI SYSTEM (KPI-1 → KPI-4 + Insights + Tools)
   Dark Metallic KPI Cards + Light Tool Cards
   ============================================================ */


/* ===============================
      KPI GRID — 4 COLUMNS
   =============================== */
.kpi-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(120px, auto);
    gap: 16px;
    align-items: stretch;
}

/* KPI cards share the metallic glow theme */
.kpi-card {
    background: linear-gradient(135deg, #071221, #0a1e35);
    border: 1px solid rgba(0,145,255,0.22);
    border-radius: 14px;
    padding: 20px;
    color: white;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.25s ease;
}

.kpi-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.4),
                0 0 16px rgba(59,130,246,0.45);
    border-color: rgba(96,165,250,0.55);
}

/* ===============================
      KPI-4 — TALL RIGHT BLOCK
   =============================== */
.kpi4-tall {
    grid-row: span 3;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
}

.kpi4-header {
    margin-bottom: 12px;
}

.kpi4-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.kpi4-subtitle {
    font-size: 0.85rem;
    opacity: 0.85;
}

.kpi4-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}

/* KPI-4 Sections (dark metallic panels) */
.kpi4-section {
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.78);
    border: 1px solid rgba(148, 163, 184, 0.45);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.25s ease;
}

.kpi4-section:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,0.35),
                0 0 14px rgba(59,130,246,0.35);
    border-color: rgba(96,165,250,0.6);
}

.kpi4-section-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    opacity: 0.9;
}

/* Category scores */
.kpi4-health-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kpi4-health-row {
    display: grid;
    grid-template-columns: 1.1fr 0.7fr 1.2fr;
    font-size: 0.8rem;
    align-items: center;
}

.kpi4-health-label {
    color: #e5e7eb;
}

.kpi4-health-score {
    text-align: right;
    font-weight: 600;
}

.kpi4-health-pill {
    justify-self: end;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(148,163,184,0.7);
    font-size: 0.7rem;
}

/* Recent stats */
.kpi4-summary-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin-top: 8px;
    font-size: 0.78rem;
}

/* AI suggestions */
.kpi4-ai-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.8rem;
}

.kpi4-ai-item {
    line-height: 1.35;
}

/* KPI-4 buttons */
.kpi4-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.kpi4-action-btn {
    flex: 1;
    font-size: 0.8rem;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(56,189,248,0.8);
    background: rgba(8,47,73,0.9);
    transition: all 0.2s ease;
}

.kpi4-action-btn:hover {
    background: rgba(14,116,144,1);
    border-color: rgba(125,211,252,1);
    transform: translateY(-1px);
}

/* ===============================
      KPI METRIC CARDS (KPI-1)
   =============================== */

.kpi-score-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px;
}

.kpi-score-ring {
    position: relative;
    width: 140px;
    height: 140px;
}

.kpi-ring-bg {
    fill: none;
    stroke: rgba(255,255,255,0.12);
    stroke-width: 12;
}

.kpi-ring-fg {
    fill: none;
    stroke-width: 12;
    stroke-linecap: round;
    stroke-dasharray: 326;
    stroke-dashoffset: 326;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dashoffset 1.4s ease-out;
}

/* Score colors */
.kpi-score-card[data-score="low"]   .kpi-ring-fg { stroke: #ef4444; }
.kpi-score-card[data-score="med"]   .kpi-ring-fg { stroke: #facc15; }
.kpi-score-card[data-score="good"]  .kpi-ring-fg { stroke: #22c55e; }
.kpi-score-card[data-score="great"] .kpi-ring-fg { stroke: #3b82f6; }

/* KPI metric hover glow */
.kpi-score-card:hover .kpi-ring-fg {
    filter: drop-shadow(0 0 10px rgba(59,130,246,0.8));
}

/* Center score */
.kpi-score-value {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 2rem;
    font-weight: 800;
    transform: translate(-50%, -50%);
}


/* ===============================
      KPI INSIGHT CARDS
   =============================== */

.kpi-card--insight {
    border-left: 5px solid rgba(59,130,246,0.4);
}

.kpi-card--insight:hover {
    border-left-color: var(--brand);
    box-shadow: 0 10px 25px rgba(0,0,0,0.35),
                0 0 18px rgba(59,130,246,0.45);
}


/* ===============================
      TOOL CARDS (LIGHT MODE)
   =============================== */

.kpi-card--tool {
    background: #f8fafc !important;
    color: #071221 !important;
    border: 1px solid rgba(0,0,0,0.07);
    border-left: 6px solid var(--brand);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-radius: 12px;
}

.kpi-card--tool:hover {
    border-left-color: var(--brand-dark);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12),
                0 0 12px rgba(59,130,246,0.35);
}
/* ==========================================================
   FIX KPI-1 DUAL RING ALIGNMENT (SAFE OVERRIDE PATCH)
   ========================================================== */

/* Lock KPI-1 card to a clean flex layout */
.kpi-score-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: relative;
    padding-top: 20px;
}

/* Correct ring wrapper size */
.kpi-score-ring {
    position: relative;
    width: 150px !important;
    height: 150px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

/* Normalize the outer glow ring */
.kpi-ring-outer {
    position: absolute;
    top: 0;
    left: 0;
    width: 150px !important;
    height: 150px !important;
}

/* Outer glow circle */
.kpi-ring-outer-glow {
    stroke-width: 10 !important;
}

/* Normalize inner ring */
.kpi-ring-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 150px !important;
    height: 150px !important;
}

/* Background ring */
.kpi-ring-bg {
    stroke-width: 12;
}

/* Foreground progress ring (animated) */
.kpi-ring-fg {
    stroke-width: 12 !important;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    stroke-dasharray: 326 !important;
    stroke-dashoffset: calc(326 - (326 * var(--percent) / 100)) !important;
}

/* Fix position of the score text */
.kpi-score-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0;
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    z-index: 10;
    opacity: 1 !important;
}
/* ==========================================================
   KPI-1 — Circular Score Ring with Premium Glow
   ========================================================== */

.health-ring {
    position: relative;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: conic-gradient(
        var(--brand, #3b82f6) calc(var(--score, 0) * 1%),
        rgba(255,255,255,0.08) 0
    );
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    box-shadow: 0 0 22px rgba(59,130,246,0.45);
}

.health-ring::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: linear-gradient(145deg,
        rgba(0,0,0,0.65),
        rgba(15,23,42,0.95)
    );
}

.health-score-text {
    position: relative;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
}

/* Soft animated glow */
.health-ring::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: radial-gradient(
        circle at center,
        rgba(59,130,246,0.45),
        transparent 70%
    );
    filter: blur(8px);
    opacity: 0.7;
    animation: ringPulse 3s infinite ease-in-out;
}

@keyframes ringPulse {
    0% { opacity: 0.55; }
    50% { opacity: 0.95; }
    100% { opacity: 0.55; }
}

/* ============================================
   KPI-1 — Change Center Circle Background Color
   ============================================ */
.kpi-score-ring::before {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    background: #071221;  /* CHANGE THIS TO ANY COLOR */
    border-radius: 50%;
    z-index: 1;
}
.dashboard-header {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dashboard-header:hover {
    transform: translateY(-3px);
    box-shadow:
        0 12px 30px rgba(0,0,0,0.4),
        0 0 18px rgba(59,130,246,0.4);
}

/* ==========================================================
   FINAL FIX OVERRIDE — KPI-1 SVG RING ANIMATION (Clean)
   ========================================================== */

/* Reset all previous KPI ring definitions */
.kpi-ring-fg,
.kpi-ring-inner circle,
.kpi-ring-outer circle {
    animation: none !important;
    stroke-dasharray: 326 !important;
}

/* Correct animated progress ring */
.kpi-ring-fg {
    stroke: #3b82f6 !important;
    stroke-width: 12 !important;
    fill: none !important;

    /* Required animation math */
    stroke-dashoffset: calc(326 - (326 * var(--percent) / 100)) !important;

    /* Required rotation for 12 o’clock start */
    transform: rotate(-90deg);
    transform-origin: 50% 50%;

    /* Smooth transition */
    transition: stroke-dashoffset 1.2s ease-in-out !important;
}

/* Background ring */
.kpi-ring-bg {
    stroke: rgba(255,255,255,0.12) !important;
    stroke-width: 12 !important;
    fill: none !important;
}

/* Outer glow */
.kpi-ring-outer-glow {
    stroke: rgba(59,130,246,0.35) !important;
    stroke-width: 10 !important;
    fill: none !important;
}

/* ============================================
   Premium Hover for Report Page
   ============================================ */
.report-card {
    transition: all 0.25s ease;
}

.report-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* ===============================
      RESPONSIVE
   =============================== */
@media (max-width: 1024px) {
    .kpi-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .kpi4-tall {
        grid-row: auto;
    }
}

@media (max-width: 640px) {
    .kpi-grid-4 {
        grid-template-columns: 1fr;
    }
}
/* ======================================================
   Lighthouse Snapshot Card + Modal
   ====================================================== */

.lighthouse-card {
    background: radial-gradient(circle at top left,
        rgba(56, 189, 248, 0.16),
        transparent 60%)
        , radial-gradient(circle at top right,
        rgba(129, 140, 248, 0.16),
        transparent 60%)
        , linear-gradient(135deg, #020617, #020617);
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    padding: 18px 20px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.75);
}

.lighthouse-score-pill {
    text-align: center;
    padding: 10px 8px;
    border-radius: 16px;
    background: radial-gradient(circle at top,
        rgba(148, 163, 184, 0.22),
        transparent 60%);
    border: 1px solid rgba(148, 163, 184, 0.35);
}

.lighthouse-score-ring {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    border-radius: 999px;
    background: conic-gradient(
        rgba(56, 189, 248, 0.9),
        rgba(129, 140, 248, 0.9),
        rgba(56, 189, 248, 0.9)
    );
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lighthouse-score-number {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: #020617;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: #e5e7eb;
}

/* Center modal overlay */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    padding: 16px;
}

.modal-backdrop.hidden {
    display: none;
}

.modal-panel {
    width: 100%;
    max-width: 960px;
    background: radial-gradient(circle at top left,
        rgba(56, 189, 248, 0.15),
        transparent 55%)
        , radial-gradient(circle at bottom right,
        rgba(129, 140, 248, 0.18),
        transparent 55%)
        , #020617;
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.6);
    padding: 20px 22px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.9);
}
/* Lighthouse Summary – Premium Look */
.lighthouse-summary-card {
    background: linear-gradient(135deg, rgba(7,18,33,0.95), rgba(12,24,46,0.98));
    border: 1px solid rgba(0,145,255,0.15);
    padding: 28px;
    border-radius: 18px;
    box-shadow: 0 6px 25px rgba(0,0,0,0.35);
}

/* Subcards */
.lh-subcard {
    background: rgba(255,255,255,0.05);
    padding: 18px;
    border-radius: 14px;
    text-align: center;
    transition: 0.25s ease;
    border: 1px solid rgba(255,255,255,0.05);
}

.lh-subcard:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.lh-label {
    font-size: 0.75rem;
    color: #cbd5e1;
    margin-bottom: 4px;
    letter-spacing: 0.4px;
}

.lh-value {
    font-size: 1.75rem;
    color: #93c5fd;
    font-weight: 700;
}
/* LIGHTHOUSE SUMMARY BLOCK */
.kpi-card--lighthouse {
    background: linear-gradient(135deg, #071221, #0d1c33);
    border: 1px solid rgba(0,145,255,0.2);
    border-radius: 20px;
    padding: 24px;
    margin-top: 20px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

/* Mini Cards */
.lighthouse-mini-card {
    padding: 14px;
    background: rgba(255,255,255,0.05);
    border-radius: 14px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.06);
    transition: all 0.25s ease;
}

.lighthouse-mini-card:hover {
    transform: translateY(-3px);
    background: rgba(255,255,255,0.08);
}

/* Titles and values */
.mini-title {
    display: block;
    font-size: 0.85rem;
    color: #b9c6d8;
    margin-bottom: 4px;
}

.mini-value {
    font-size: 1.6rem;
    font-weight: bold;
    color: #60a5fa;
}
/* LIGHTHOUSE PREMIUM */
.kpi-card--lighthouse {
	background: linear-gradient(145deg, #071221, #0c1628);
	border: 1px solid rgba(0, 145, 255, 0.18);
	border-radius: 18px;
	padding: 24px 26px;
	margin-top: 22px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}

/* MINI CARDS */
.lighthouse-mini-card {
	padding: 12px;
	border-radius: 12px;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.06);
	text-align: center;
	transition: 0.25s ease;
}

.lighthouse-mini-card:hover {
	transform: translateY(-3px);
	background: rgba(255,255,255,0.07);
}

/* Titles */
.mini-title {
	font-size: 0.85rem;
	color: #b7c4d4;
	margin-bottom: 4px;
}

/* Values */
.mini-value {
	font-size: 1.55rem;
	font-weight: 700;
	color: #5eb7ff;
	margin-bottom: 3px;
}

/* Descriptions */
.mini-desc {
	font-size: 0.72rem;
	color: #9facbe;
	margin-top: 2px;
	opacity: 0.85;
}

/* Trend Arrows */
.mini-arrow {
	font-size: 1rem;
	margin-top: 4px;
	font-weight: 700;
}

/* Color coding for cards */
.lighthouse-mini-card[data-score] {
	border-left: 4px solid transparent;
}

.lighthouse-mini-card[data-score="0"] {
	border-left-color: #444;
}

.lighthouse-mini-card[data-score][data-score*="8"] {
	border-left-color: #00e676;
}

.lighthouse-mini-card[data-score][data-score*="9"] {
	border-left-color: #00e676;
}

.lighthouse-mini-card[data-score][data-score*="7"] {
	border-left-color: #fdd835;
}

.lighthouse-mini-card[data-score][data-score*="6"] {
	border-left-color: #ffb300;
}

.lighthouse-mini-card[data-score][data-score*="5"],
.lighthouse-mini-card[data-score][data-score*="4"],
.lighthouse-mini-card[data-score][data-score*="3"],
.lighthouse-mini-card[data-score][data-score*="2"],
.lighthouse-mini-card[data-score][data-score*="1"] {
	border-left-color: #e53935;
}
/* Fix long Lighthouse opportunity text */
.lh-opportunity-text {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.45;
}
.lh-opportunity-text {
    margin-bottom: 6px;
}
/* LIGHTHOUSE FIXES — ALIGN SCORE + DESCRIPTION + REDUCE DEAD SPACE */
#section-lighthouse {
    padding-bottom: 16px !important;        /* Reduce big blue bottom */
}

/* Grid layout refinement */
#section-lighthouse .lh-top-grid {
    display: grid;
    grid-template-columns: 1fr 3fr;         /* Score | Explanation */
    gap: 1rem;
    align-items: center;
}

/* Score refinement */
#section-lighthouse .lh-score {
    font-size: 2.6rem !important;
    text-align: center;
}

/* Explanation should span wide */
#section-lighthouse .lh-explanation {
    font-size: 13px;
    line-height: 1.45rem;
    padding-right: 12px;
}

/* Reduce space above sparkline */
#section-lighthouse .lh-sparkline {
    margin-top: 6px !important;
}

/* Reduce space below KPI mini boxes */
#section-lighthouse .lighthouse-mini-grid {
    margin-bottom: 4px !important;
}

/* Make “Top Opportunities” more readable */
#section-lighthouse .lh-opportunities {
    font-size: 12px;
    line-height: 1.25rem;
}

/* Slightly tighten card bottom padding */
.kpi-card--lighthouse {
    padding-bottom: 12px !important;
}
/* ============================================
   LIGHTHOUSE V2 — PREMIUM LAYOUT
   ============================================ */

.lighthouse-v2-card {
	background: linear-gradient(135deg, #071221, #0c1d33);
	padding: 28px 32px;
	border-radius: 16px;
	box-shadow: 0 8px 22px rgba(0,0,0,0.35);
}

.lh-btn {
	text-xs: 12px;
	padding: 4px 12px;
	border: 1px solid rgba(0,145,255,0.5);
	border-radius: 9999px;
	background: rgba(0,40,70,0.3);
	color: #7cc7ff;
	transition: 0.2s;
}
.lh-btn:hover {
	background: rgba(0,145,255,0.25);
}

.lh-view-full {
	color: #7cc7ff;
	font-weight: 500;
	font-size: 13px;
	cursor: pointer;
}
.lh-view-full:hover {
	color: #a4dbff;
}

/* SCORE */
.lh-big-score .lh-score {
	font-size: 52px;
	font-weight: 800;
	color: #4da6ff;
	line-height: 1;
}
.lh-score-label {
	font-size: 13px;
	color: #8fb3cc;
	margin-top: 4px;
}

/* EXPLANATION LIST */
.lh-bullets li {
	color: #c5d2e0;
}

/* MINI CARDS */
.lighthouse-mini-card {
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 10px;
	padding: 12px;
	text-align: center;
}
.lighthouse-mini-card .mini-title {
	font-size: 13px;
	color: #8fb3cc;
	margin-bottom: 4px;
}
.lighthouse-mini-card .mini-value {
	font-size: 26px;
	font-weight: 700;
	color: #4da6ff;
}
.lighthouse-mini-card .mini-desc {
	font-size: 11px;
	color: #8fa6be;
	margin-top: 3px;
}
/* LIGHTHOUSE TEASER BLOCK */
.lh-teaser {
    padding: 18px 22px;
    border-radius: 14px;
    background: rgba(15,23,42,0.55);
    border: 1px dashed rgba(255,255,255,0.18);
    margin-top: 12px;
}

.lh-teaser-main {
    font-size: 0.95rem;
    margin-bottom: 6px;
    color: #e2e8f0;
}

.lh-teaser-sub {
    opacity: 0.85;
    font-size: 0.85rem;
    line-height: 1.45;
    color: #cbd5e1;
}

/* OPPORTUNITIES */
.lh-opportunity-list li {
	line-height: 1.35;
}
.kpi-card--lighthouse {
    margin-top: 2.5rem !important;   /* ~mt-10 */
}
/* ===========================================
   POSITIONING — Recent Audits under Lighthouse
   =========================================== */

.recent-audits-wrapper {
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 2rem;       /* matched to dashboard-main padding */
    margin-top: 0;
}

.recent-audits-wrapper h2 {
    margin-left: 0;         /* align header to block edge */
}

.recent-audits-wrapper table {
    width: 100%;
}
/* Tighten dashboard to nav bar */
.dashboard-hero,
.dashboard-top,
.dashboard-header,
.dashboard-intro {
    margin-top: 10px !important;     /* instead of 40–60px */
    padding-top: 10px !important;
}
/* Add breathing room above right-side dashboard meta */
.dashboard-header .text-right {
    padding-top: 6px;   /* adjust to taste: 6–12px */
}
/* Hard-remove top gap above dashboard header */
.dashboard-header {
    margin-top: 0 !important;
    padding-top: 10px !important;  /* adjust: 0–12px */
}
/* Tighten the outer dashboard container */
.max-w-6xl.mx-auto.px-6 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* ================================
   LANDING HERO — CENTER & TIGHTEN
   ================================ */

.landing-hero {
    padding-top: 10;          /* remove artificial spacing */
    margin-top: -15px;
}

.landing-container.hero-center {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.hero-center-inner {
    width: 100%;
    max-width: 900px;       /* keeps it elegant on wide screens */
    margin: 0 auto;
    text-align: center;
}
/* ================================
   TRUST BAR — CLEAN & CENTERED
   ================================ */

.trust-bar {
    text-align: center;
    padding: 28px 0 22px;   /* tighter vertical rhythm */
    margin-top: 0;
}

.trust-text {
    font-size: 0.95rem;
    font-weight: 500;
    color: #475569;
    margin-bottom: 12px;
    letter-spacing: 0.02em;
}

.trust-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
}

.trust-icon {
    font-size: 1.4rem;
    opacity: 0.85;
}

/* tighten the divider */
.curve-divider-bottom svg {
    height: 70px;
    display: block;
}
/* ================================
   FEATURE GRID — CLEAN SAAS LAYOUT
   ================================ */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 28px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 56px 24px 64px;
    text-align: center;
}

.feature-card {
    background: transparent;
    padding: 12px 8px;
}

.feature-icon {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.feature-card h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: #0f172a;
}

.feature-card p {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.45;
    max-width: 260px;
    margin: 0 auto;
}
/* ================================
   AI STRIP — SUPPORTING LINE
   ================================ */

.ai-strip {
    text-align: center;   /* centers the block */
	margin-top: -3rem;
	margin-bottom: 36px;
}

.ai-strip p {
    font-size: 1.05rem;
    font-weight: 500;
    color: #334155;
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.55;
    text-align: left;
	letter-spacing: 0.01em;
}

/* ================================
   PRICING — CLEAN SAAS CARDS
   ================================ */

.pricing-teaser {
    margin-top: -10px;              /* replaces invalid negative padding */
    padding: 0 24px 56px;
    text-align: center;
    background: #f8fafc;
}

.pt-header {
  margin-bottom: 9px; /* controls distance to first bullet */
}

.pt-title {
    font-size: 1.9rem;
    font-weight: 700;
    margin-bottom: 36px;
    color: #0f172a;
}

/* Grid */
.pt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
    max-width: 1100px;
    margin: 0 auto;
    align-items: stretch;
}

/* Cards */
.pt-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 28px 26px 32px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 6px 22px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* Highlighted (Professional) */
.pt-card-highlight {
    border-color: #2563eb;
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.18);
    transform: translateY(-6px);
    position: relative;
}

.pt-card-highlight::before {
    content: "Most Popular";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #2563eb;
    color: white;
    font-size: 0.7rem;
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: 0.04em;
}

/* Title + Tagline Lock */
.pt-title-group {
    margin-bottom: 16px;
}
.pt-title-group + .pt-price {
    margin-top: 6px;
}

.pt-title-group .pt-name {
    margin: 0;
    line-height: 1.05;
}

.pt-title-group .pt-sublabel {
    margin: 2px 0 0 0;
    line-height: 1.05;
    font-size: 0.85rem;
    color: #4b6fa8; /* darker blue-gray */
    font-weight: 500;
}

/* Plan Name */
.pt-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #0f172a;
}

/* Price */
.pt-price {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    color: #2563eb;
    margin: 8px 0 14px;
}

.pt-price span {
    font-size: 1rem;
    font-weight: 500;
    vertical-align: middle;
    color: #475569;
    margin-left: 4px;
}

/* Feature List */
.pt-list {
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
	margin-top: 10px;
}

.pt-list li {
    font-size: 0.95rem;
    color: #475569;
    margin-bottom: 7px;
    line-height: 1.45;
}

/* SEM emphasis */
.pt-sem {
    font-weight: 600;
    color: #334155;
}

/* Buttons */
.pt-btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    color: #2563eb;
    border: 1px solid #2563eb;
    transition: all 0.2s ease;
}

.pt-btn:hover {
    background: #2563eb;
    color: #ffffff;
}

/* Primary Button */
.pt-btn.primary {
    background: #2563eb;
    color: #ffffff;
}

.pt-btn.primary:hover {
    background: #1e40af;
}

/* ================================
   TESTIMONIALS — CLEAN SAAS STRIP
   ================================ */

.testimonial-strip {
    padding: 56px 20px 64px;
    text-align: center;
    background: #ffffff;
}

.testimonial-slider {
    max-width: 820px;
    margin: 0 auto;
}

.t-card {
    display: none;
}

.t-card.active {
    display: block;
}

/* Quote */
.t-quote {
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.6;
    color: #0f172a;
    margin-bottom: 16px;
}

/* Author */
.t-author {
    font-size: 0.9rem;
    font-weight: 500;
    color: #475569;
}
/* ================================
   TESTIMONIAL ANIMATION
   ================================ */

.t-card {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.t-card.active {
    opacity: 1;
    transform: translateY(0);
}
.scan-usage-box {
    margin-top: 1.5rem;
    padding: 0.50rem .5rem;
    background: background: #f8fafc;
    border: border: 1px dashed #e2e8f0;
    border-radius: 6px;
	font-size: 0.85rem;
	margin-bottom: -2.0rem;   /* reduce this */
}
.plan-chip {
    display: inline-block;
    margin-top: 0.70rem;
    margin-bottom: -2.0rem;

    padding: 0.25rem 0.65rem;   /* ↑ slightly bigger pill */
    border-radius: 999px;

    font-size: 0.8rem;          /* ↑ was ~0.7rem */
    font-weight: 600;           /* adds clarity without bulk */

    background: rgba(99,102,241,0.15);
    color: #c7d2fe;
}
.kpi-card-disabled {
    cursor: not-allowed;
    filter: grayscale(15%);
}
.export-card {
  background: linear-gradient(180deg, #0c1a33, #071221);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 24px;
  color: #e5e7eb;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.export-card.primary {
  border: 1px solid rgba(59,130,246,0.4);
}

.export-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.export-card p {
  font-size: 0.9rem;
  color: #9ca3af;
  margin-bottom: 16px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  font-weight: 600;
  border-radius: 12px;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-primary {
  background: linear-gradient(135deg, #2563eb, #1e40af);
  color: #fff;
  box-shadow: 0 6px 18px rgba(37,99,235,0.35);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(37,99,235,0.45);
}

.btn-secondary {
  background: rgba(255,255,255,0.06);
  color: #e5e7eb;
  border: 1px solid rgba(255,255,255,0.12);
}

.btn-secondary:hover {
  background: rgba(255,255,255,0.10);
}

.btn-accent {
  background: linear-gradient(135deg, #10b981, #047857);
  color: #fff;
}

.btn-accent:hover {
  box-shadow: 0 8px 22px rgba(16,185,129,0.45);
}
@media print {

  /* Hide UI chrome */
  nav,
  header,
  footer,
  .sidebar,
  .evidence-actions,
  button {
    display: none !important;
  }

  /* Normalize layout */
  body {
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 11pt;
  }

  /* Evidence container */
  .evidence-container {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Hash emphasis */
  #evidence-hash {
    font-size: 10pt;
    font-weight: bold;
    word-break: break-all;
  }

  /* Raw JSON handling */
  pre,
  code {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    page-break-inside: avoid;
    font-size: 9pt;
  }

  /* Section control */
  h1, h2, h3 {
    page-break-after: avoid;
  }

  .evidence-block {
    page-break-inside: avoid;
  }
.evidence-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.evidence-badge span {
  line-height: 1.2;
}
.sem-card {
  background: linear-gradient(
    135deg,
    rgba(12, 26, 51, 0.95),
    rgba(7, 18, 33, 0.95)
  );
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow:
    0 10px 30px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.04);
}