/* Competitor feature suite - shared styles for industry, porting, audit, rescue, reports */

/* The site nav is position:fixed with height var(--nav-h) (64px). Every page
   that uses _page-head.php must push its content below the nav or it will
   sit underneath. We also track the main site tokens so dark mode and the
   green accent stay consistent with the rest of the site. */
.cf-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: calc(var(--nav-h, 64px) + 56px) 24px 80px;
    color: var(--text, #0f0f0d);
}
.cf-page h1 { font-size: 42px; line-height: 1.15; margin: 0 0 16px; letter-spacing: -0.02em; color: var(--text, #0f0f0d); }
.cf-page h2 { font-size: 28px; margin: 48px 0 16px; letter-spacing: -0.01em; color: var(--text, #0f0f0d); }
.cf-page h3 { color: var(--text, #0f0f0d); }
.cf-page p, .cf-page li { color: var(--text-2, #555); }
.cf-page p.lead { font-size: 19px; line-height: 1.55; color: var(--text-2, #555); max-width: 680px; }
.cf-page a { color: var(--green, #00805a); }

@media (max-width: 720px) {
    .cf-page { padding: calc(var(--nav-h, 64px) + 32px) 16px 56px; }
    .cf-page h1 { font-size: 32px; }
    .cf-page h2 { font-size: 22px; margin: 32px 0 12px; }
}
.cf-eyebrow { display: inline-block; background: rgba(0, 210, 138, 0.12); color: #00805a; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; margin-bottom: 16px; }
.cf-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 24px; }
.cf-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 24px; }
.cf-card { background: #fff; border: 1px solid #e6e6e6; border-radius: 14px; padding: 22px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.cf-card h3 { margin: 0 0 8px; font-size: 18px; }
.cf-card p { margin: 0; color: #555; line-height: 1.55; }
.cf-card.is-highlight { background: linear-gradient(135deg, #00d28a 0%, #00b078 100%); color: #fff; border: none; }
.cf-card.is-highlight h3, .cf-card.is-highlight p { color: #fff; }

.cf-pain-list { list-style: none; padding: 0; margin: 16px 0 0; }
.cf-pain-list li { padding: 14px 0 14px 36px; border-bottom: 1px solid #eee; position: relative; line-height: 1.5; }
.cf-pain-list li::before { content: "x"; position: absolute; left: 0; top: 14px; width: 24px; height: 24px; border-radius: 50%; background: #fee; color: #c00; display: grid; place-items: center; font-weight: 700; font-size: 14px; }

.cf-call { background: #f7f7f5; border-radius: 14px; padding: 20px; margin-top: 24px; }
.cf-call .turn { display: flex; gap: 12px; margin-bottom: 12px; align-items: flex-start; }
.cf-call .speaker { font-weight: 700; min-width: 64px; color: #888; font-size: 13px; text-transform: uppercase; padding-top: 2px; }
.cf-call .text { background: #fff; border-radius: 10px; padding: 10px 14px; flex: 1; line-height: 1.5; }
.cf-call .turn.is-ai .text { background: #e8f9f1; }

.cf-faq details { background: #fff; border: 1px solid #e6e6e6; border-radius: 12px; padding: 16px 20px; margin-bottom: 10px; }
.cf-faq summary { cursor: pointer; font-weight: 600; font-size: 16px; }
.cf-faq details[open] summary { margin-bottom: 10px; }
.cf-faq p { margin: 0; color: #555; line-height: 1.55; }

.cf-cta-band { background: linear-gradient(135deg, #0f0f0d 0%, #2a2a25 100%); color: #fff; border-radius: 18px; padding: 40px; text-align: center; margin-top: 48px; }
.cf-cta-band h2 { color: #fff; margin: 0 0 12px; }
.cf-cta-band p { color: #ccc; margin: 0 0 24px; max-width: 540px; margin-left: auto; margin-right: auto; }
.cf-cta-band .btn { background: #00d28a; color: #0f0f0d; padding: 14px 32px; border-radius: 999px; font-weight: 700; text-decoration: none; display: inline-block; }
.cf-cta-band .btn:hover { background: #00b078; }

/* Forms */
.cf-form { background: #fff; border: 1px solid #e6e6e6; border-radius: 14px; padding: 28px; max-width: 560px; }
.cf-form .field { margin-bottom: 16px; }
.cf-form label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px; }
.cf-form input, .cf-form select, .cf-form textarea { width: 100%; padding: 12px 14px; border: 1px solid #d0d0d0; border-radius: 10px; font-size: 15px; font-family: inherit; }
.cf-form textarea { min-height: 120px; resize: vertical; }
.cf-form button { background: #00d28a; color: #0f0f0d; border: none; padding: 14px 28px; border-radius: 999px; font-weight: 700; cursor: pointer; font-size: 15px; }
.cf-form .err { background: #fee; color: #c00; padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; }
.cf-form .ok { background: #e8f9f1; color: #00805a; padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; }

/* Porting result */
.cf-porting-codes { background: #0f0f0d; color: #00d28a; border-radius: 14px; padding: 24px; margin-top: 24px; font-family: ui-monospace, "SF Mono", Consolas, monospace; }
.cf-porting-codes .code { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #2a2a25; }
.cf-porting-codes .code:last-child { border-bottom: none; }
.cf-porting-codes .code .label { color: #888; font-size: 13px; }
.cf-porting-codes .code .value { font-size: 18px; font-weight: 700; }

/* Audit report */
.cf-audit-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin: 24px 0; }
.cf-audit-stat { background: #fff; border: 1px solid #e6e6e6; border-radius: 12px; padding: 20px; text-align: center; }
.cf-audit-stat .num { font-size: 36px; font-weight: 800; color: #0f0f0d; line-height: 1; }
.cf-audit-stat .label { font-size: 13px; color: #888; margin-top: 6px; }
.cf-audit-stat.is-bad .num { color: #c00; }
.cf-audit-stat.is-good .num { color: #00805a; }

/* UK trust block */
.cf-trust-block { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; padding: 20px; background: #f7f7f5; border-radius: 14px; margin: 32px 0; }
.cf-trust-item { display: flex; align-items: center; gap: 12px; }
.cf-trust-item svg { width: 32px; height: 32px; color: #00805a; flex-shrink: 0; }
.cf-trust-item strong { display: block; font-size: 14px; }
.cf-trust-item span { font-size: 12px; color: #888; }

/* Demo widget */
.cf-demo-widget { position: fixed; bottom: 24px; right: 24px; z-index: 9000; }
.cf-demo-widget button { background: #00d28a; color: #0f0f0d; border: none; padding: 16px 24px; border-radius: 999px; font-weight: 700; box-shadow: 0 8px 30px rgba(0,0,0,0.18); cursor: pointer; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; }
.cf-demo-widget button:hover { background: #00b078; }
.cf-demo-widget .live { width: 10px; height: 10px; border-radius: 50%; background: #fff; display: inline-block; animation: cf-pulse 2s infinite; }
@keyframes cf-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

@media (prefers-color-scheme: dark) {
    .cf-card, .cf-form, .cf-audit-stat, .cf-faq details { background: #1a1a18; border-color: #2a2a25; color: #e6e6e6; }
    .cf-card p, .cf-faq p, .cf-form label { color: #aaa; }
    .cf-call { background: #1a1a18; }
    .cf-call .text { background: #2a2a25; color: #e6e6e6; }
    .cf-call .turn.is-ai .text { background: #003d27; }
    .cf-trust-block { background: #1a1a18; }
    .cf-trust-item span { color: #aaa; }
    .cf-pain-list li { border-color: #2a2a25; }
}