/* Wordfence vs BitFire — comparison page */

.comparison-page { color: var(--text-dark); }
.comparison-page .section-kicker { color: #126a9c; }
.comparison-hero { padding-bottom: 104px; }
.comparison-hero h1 { max-width: 850px; }
.comparison-hero .docs-hero-grid { align-items: center; margin-bottom: 66px; }
.comparison-hero .hero-lede { max-width: 800px; }
.comparison-hero-actions { display: flex; flex-wrap: wrap; gap: 11px; }

.comparison-snapshot { border-color: rgba(91, 173, 218, 0.28); }
.version-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; margin: 8px 0 24px; }
.version-pair span { min-width: 0; padding: 16px; border: 1px solid rgba(167, 210, 233, 0.13); border-radius: 14px; background: rgba(255, 255, 255, 0.035); }
.version-pair small,
.version-pair strong { display: block; }
.version-pair small { margin-bottom: 3px; color: #7590a2; font-weight: 850; letter-spacing: 0.08em; }
.version-pair strong { color: #e7f4fa; letter-spacing: -0.04em; }
.version-pair i { color: #5eb9e5; font-style: normal; font-weight: 900; }
.comparison-snapshot > p { margin-bottom: 0; }

.comparison-proof-strip { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; padding: 8px; border: 1px solid rgba(167, 210, 233, 0.18); border-radius: 20px; background: rgba(10, 28, 45, 0.82); box-shadow: 0 35px 90px rgba(0, 0, 0, 0.28); }
.comparison-proof-strip > div { min-height: 108px; display: grid; grid-template-columns: 36px 1fr; align-content: center; column-gap: 12px; padding: 21px; border-right: 1px solid rgba(167, 210, 233, 0.1); }
.comparison-proof-strip > div:last-child { border-right: 0; }
.proof-index { grid-row: 1 / 3; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(91, 173, 218, 0.25); border-radius: 50%; color: #5eb9e5; font-family: ui-monospace, monospace; font-weight: 800; }
.comparison-proof-strip strong,
.comparison-proof-strip small { display: block; }
.comparison-proof-strip strong { color: #e5f1f7; }
.comparison-proof-strip small { color: #738c9c; }

.comparison-section-heading { display: grid; grid-template-columns: 1fr 0.72fr; gap: 65px; align-items: end; margin-bottom: 64px; }
.comparison-section-heading h2 { margin: 0; font-weight: 790; letter-spacing: -0.06em; line-height: 0.98; }
.comparison-section-heading > p { margin: 0 0 6px; color: #5c7180; line-height: 1.75; }

.comparison-intro { border-bottom: 1px solid #dfe7ec; }
.product-overview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.product-overview { min-height: 450px; display: flex; flex-direction: column; padding: clamp(30px, 4vw, 48px); border: 1px solid #d9e3e9; border-radius: 24px; background: #fff; box-shadow: 0 24px 60px rgba(7, 19, 34, 0.055); }
.product-overview header { display: flex; align-items: center; gap: 17px; margin-bottom: 50px; }
.product-mark { width: 50px; height: 50px; display: grid; flex: 0 0 auto; place-items: center; border: 1px solid #cfdae1; border-radius: 15px; color: #49616f; background: #f2f5f7; font-weight: 900; }
.product-mark .icon { width: 24px; }
.product-overview header small { display: block; margin-bottom: 1px; color: #7a8e9b; font-weight: 850; letter-spacing: 0.08em; }
.product-overview h3 { margin: 0; color: #173247; letter-spacing: -0.045em; }
.product-overview > p { color: #596f7e; line-height: 1.8; }
.product-focus { margin-top: auto; padding: 20px; border: 1px solid #e0e7ec; border-radius: 15px; background: #f7f9fb; }
.product-focus span,
.product-focus strong { display: block; }
.product-focus span { margin-bottom: 5px; color: #708693; font-weight: 850; letter-spacing: 0.08em; }
.product-focus strong { color: #2b475a; line-height: 1.55; }
.bitfire-overview { border-color: #b9dce9; background: linear-gradient(145deg, #fff, #f3fafd); }
.bitfire-overview .product-mark { color: #126f9f; border-color: #b8dae9; background: #e5f3f9; }
.bitfire-overview .product-focus { border-color: #c9e2ed; background: #eaf6fb; }
.bitfire-overview .product-focus span { color: #1676a9; }

.model-detail { color: var(--text-dark); background: #fff; }
.model-detail-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(55px, 8vw, 105px); align-items: center; }
.model-detail-copy h2 { margin-bottom: 26px; font-weight: 790; letter-spacing: -0.06em; line-height: 0.98; }
.model-detail-copy p { color: #586f7e; line-height: 1.78; }
.execution-models { display: grid; gap: 13px; }
.execution-models article { padding: 28px; border: 1px solid #dce5ea; border-radius: 19px; background: #f8fafb; }
.execution-models header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.execution-models header span { color: #718693; font-weight: 900; letter-spacing: 0.1em; }
.execution-models header strong { color: #244155; }
.execution-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 8px; align-items: center; }
.execution-flow span { min-height: 60px; display: grid; place-items: center; padding: 9px; border: 1px solid #d6e0e6; border-radius: 10px; color: #526a79; background: #fff; text-align: center; }
.execution-flow b { color: #94a5af; }
.execution-models article > p { margin: 17px 0 0; color: #667b88; }
.execution-models .bitfire-model { color: #e6f2f8; border-color: #173c57; background: #0a2033; box-shadow: 0 25px 60px rgba(7, 19, 34, 0.13); }
.bitfire-model header span { color: #62bde8; }
.bitfire-model header strong { color: #e6f2f8; }
.bitfire-model .execution-flow { grid-template-columns: 1fr auto 0.8fr auto 0.8fr auto 1.4fr; }
.bitfire-model .execution-flow span { color: #b7cbd7; border-color: rgba(167, 210, 233, 0.16); background: rgba(255, 255, 255, 0.04); }
.bitfire-model .execution-flow span:last-child { color: #b9f1cf; border-color: rgba(99, 220, 145, 0.25); background: rgba(99, 220, 145, 0.08); }
.execution-models .bitfire-model > p { color: #8fa6b5; }

.comparison-table-section { border-top: 1px solid #dfe7ec; border-bottom: 1px solid #dfe7ec; }
.table-heading { align-items: center; }
.status-key { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 18px; color: #657986; }
.status-key span { display: flex; align-items: center; gap: 7px; }
.status-key i { width: 9px; height: 9px; border-radius: 50%; }
.status-dot-full { background: #15935b; box-shadow: 0 0 0 4px rgba(21, 147, 91, 0.1); }
.status-dot-partial { background: #c78318; box-shadow: 0 0 0 4px rgba(199, 131, 24, 0.1); }
.status-dot-none { background: #9aa7af; box-shadow: 0 0 0 4px rgba(154, 167, 175, 0.1); }
.comparison-table-wrap { overflow-x: auto; border: 1px solid #d7e1e7; border-radius: 21px; background: #fff; box-shadow: 0 24px 60px rgba(7, 19, 34, 0.06); }
.comparison-table { width: 100%; min-width: 900px; border-collapse: collapse; table-layout: fixed; }
.comparison-table th,
.comparison-table td { padding: 24px; border-right: 1px solid #e1e8ed; border-bottom: 1px solid #e1e8ed; text-align: left; vertical-align: top; }
.comparison-table tr:last-child th,
.comparison-table tr:last-child td { border-bottom: 0; }
.comparison-table th:last-child,
.comparison-table td:last-child { border-right: 0; }
.comparison-table thead th { color: #627785; background: #f6f9fb; letter-spacing: 0.05em; text-transform: uppercase; }
.comparison-table thead th:first-child { width: 34%; }
.comparison-table thead th span,
.comparison-table thead th small { display: block; }
.comparison-table thead th span { color: #233e51; }
.comparison-table thead th small { margin-top: 2px; color: #81929d; }
.comparison-table tbody th { display: flex; gap: 14px; color: #203b4e; background: #fbfcfd; }
.capability-icon { width: 40px; height: 40px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 12px; color: #1979aa; background: #e6f3f9; }
.capability-icon .icon { width: 20px; }
.comparison-table tbody th strong,
.comparison-table tbody th small { display: block; }
.comparison-table tbody th small { margin-top: 4px; color: #748793; font-weight: 500; line-height: 1.5; }
.comparison-table p { margin: 12px 0 0; color: #5e7280; line-height: 1.65; }
.comparison-table .bitfire-column { background: rgba(33, 139, 201, 0.045); }
.coverage { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; font-weight: 850; letter-spacing: 0.04em; text-transform: uppercase; }
.coverage.full { color: #087046; background: #dcf4e8; }
.coverage.partial { color: #92570b; background: #fff0d7; }
.coverage.none { color: #687984; background: #e9eef1; }
.comparison-table code,
.comparison-faq code { padding: 2px 5px; border-radius: 5px; color: #165e85; background: #e8f2f7; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }
.comparison-note { display: flex; gap: 10px; margin: 18px 0 0; color: #667b88; }
.comparison-note .icon { width: 18px; flex: 0 0 auto; color: #218bc9; }

.strengths-section { color: var(--text-dark); background: #fff; }
.strength-grid { display: grid; grid-template-columns: repeat(2, 1fr); overflow: hidden; border: 1px solid #d8e2e8; border-radius: 24px; }
.strength-grid article { min-height: 430px; padding: clamp(32px, 5vw, 56px); }
.strength-grid article + article { border-left: 1px solid #d8e2e8; }
.strength-number { display: block; margin-bottom: 50px; color: #718591; font-family: ui-monospace, monospace; font-weight: 850; letter-spacing: 0.08em; }
.strength-grid h3 { margin-bottom: 20px; color: #19364a; font-weight: 780; letter-spacing: -0.045em; line-height: 1.08; }
.strength-grid p { color: #5d7280; line-height: 1.75; }
.strength-grid ul { display: grid; gap: 10px; margin: 25px 0 0; padding: 0; list-style: none; color: #405a6c; }
.strength-grid li { position: relative; padding-left: 25px; }
.strength-grid li::before { position: absolute; left: 0; content: "✓"; color: #218bc9; font-weight: 900; }
.strength-grid .bitfire-strength { color: #e6f2f8; background: #0a2033; }
.bitfire-strength .strength-number { color: #63bee9; }
.strength-grid .bitfire-strength h3 { color: #e6f2f8; }
.strength-grid .bitfire-strength p { color: #92a9b7; }
.strength-grid .bitfire-strength ul { color: #b1c5d1; }
.bitfire-strength li::before { color: #62d58d; }

.unknown-section { border-top: 1px solid #dfe7ec; }
.unknown-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(55px, 8vw, 105px); align-items: center; }
.unknown-grid h2 { margin-bottom: 24px; font-weight: 790; letter-spacing: -0.06em; line-height: 0.98; }
.unknown-grid > div > p { color: #586f7e; line-height: 1.78; }
.inline-comparison-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; color: #1475a8; font-weight: 850; }
.inline-comparison-link .icon { width: 16px; transition: transform 160ms ease; }
.inline-comparison-link:hover .icon { transform: translateX(3px); }
.attack-path { overflow: hidden; margin: 0; padding: 0; border: 1px solid #d8e2e8; border-radius: 20px; background: #fff; list-style: none; }
.attack-path li { display: grid; grid-template-columns: 44px 1fr; gap: 17px; padding: 23px 25px; border-bottom: 1px solid #e1e8ed; }
.attack-path li:last-child { border-bottom: 0; }
.attack-path li > span { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #cfe0e9; border-radius: 12px; color: #197bad; background: #f1f8fb; font-family: ui-monospace, monospace; font-weight: 800; }
.attack-path strong { display: block; margin-bottom: 4px; color: #203b4e; }
.attack-path p { margin: 0; color: #607482; }

.decision-section { color: var(--text-dark); background: #fff; }
.decision-heading { max-width: 850px; margin: 0 auto 58px; }
.decision-heading h2 { margin-bottom: 20px; font-weight: 790; letter-spacing: -0.06em; line-height: 0.98; }
.decision-heading p { color: #5a7180; }
.decision-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.decision-grid article { min-height: 420px; display: flex; flex-direction: column; padding: clamp(30px, 4vw, 46px); border: 1px solid #d9e3e9; border-radius: 23px; background: #f8fafb; }
.decision-grid article > small { margin-bottom: 26px; color: #718591; font-weight: 900; letter-spacing: 0.09em; }
.decision-grid h3 { margin-bottom: 25px; color: #19364a; line-height: 1.3; }
.decision-grid ul { display: grid; gap: 12px; margin: 0 0 32px; padding-left: 20px; color: #526a79; }
.decision-link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; color: #1475a8; font-weight: 850; }
.decision-link .icon { width: 16px; }
.decision-grid .decision-bitfire { color: #e7f3f9; border-color: #173c57; background: #0a2033; }
.decision-bitfire > small,
.decision-bitfire .decision-link { color: #67c1eb; }
.decision-grid .decision-bitfire h3 { color: #e7f3f9; }
.decision-grid .decision-bitfire ul { color: #a7bdc9; }

.comparison-faq { border-top: 1px solid #dfe7ec; }
.faq-layout { display: grid; grid-template-columns: 0.65fr 1.35fr; gap: clamp(55px, 8vw, 100px); align-items: start; }
.faq-layout > div:first-child { position: sticky; top: calc(var(--nav-height) + 28px); }
.faq-layout h2 { margin-bottom: 20px; font-weight: 790; letter-spacing: -0.06em; line-height: 0.98; }
.faq-layout > div:first-child p { color: #5c7180; line-height: 1.75; }

.comparison-disclosure { padding: 28px 0; color: #8fa5b3; border-top: 1px solid rgba(167, 210, 233, 0.1); background: #091827; }
.comparison-disclosure .container { display: flex; gap: 13px; align-items: flex-start; }
.comparison-disclosure .icon { width: 19px; flex: 0 0 auto; color: #5eb9e5; }
.comparison-disclosure p { margin: 0; }
.comparison-disclosure strong { color: #bfd0da; }
.comparison-cta { padding-top: 92px; }
.comparison-cta .section-kicker { color: #5eb9e5; }

@media (max-width: 1050px) {
  .comparison-proof-strip { grid-template-columns: repeat(2, 1fr); }
  .comparison-proof-strip > div:nth-child(2) { border-right: 0; }
  .comparison-proof-strip > div:nth-child(-n + 2) { border-bottom: 1px solid rgba(167, 210, 233, 0.1); }
  .model-detail-grid { grid-template-columns: 1fr; }
  .model-detail-copy { max-width: 800px; }
  .comparison-table th,
  .comparison-table td { padding: 20px; }
}

@media (max-width: 820px) {
  .comparison-hero .docs-hero-grid { margin-bottom: 48px; }
  .comparison-section-heading { grid-template-columns: 1fr; gap: 22px; margin-bottom: 50px; }
  .comparison-section-heading > p { max-width: 700px; }
  .product-overview-grid,
  .strength-grid,
  .decision-grid { grid-template-columns: 1fr; }
  .product-overview { min-height: 390px; }
  .strength-grid article + article { border-top: 1px solid #d8e2e8; border-left: 0; }
  .unknown-grid,
  .faq-layout { grid-template-columns: 1fr; }
  .faq-layout > div:first-child { position: static; max-width: 700px; }
  .status-key { justify-content: flex-start; }
}

@media (max-width: 620px) {
  .comparison-hero { padding-bottom: 70px; }
  .comparison-hero-actions { align-items: stretch; flex-direction: column; }
  .comparison-hero-actions .button { width: 100%; }
  .version-pair { grid-template-columns: 1fr; }
  .version-pair i { text-align: center; }
  .comparison-proof-strip { grid-template-columns: 1fr; }
  .comparison-proof-strip > div,
  .comparison-proof-strip > div:nth-child(2),
  .comparison-proof-strip > div:nth-child(-n + 2) { min-height: 90px; border-right: 0; border-bottom: 1px solid rgba(167, 210, 233, 0.1); }
  .comparison-proof-strip > div:last-child { border-bottom: 0; }
  .product-overview { min-height: 0; padding: 26px 22px; }
  .product-overview header { margin-bottom: 32px; }
  .execution-models article { padding: 22px 18px; }
  .execution-models header { align-items: flex-start; flex-direction: column; gap: 5px; }
  .execution-flow,
  .bitfire-model .execution-flow { grid-template-columns: 1fr; }
  .execution-flow b { text-align: center; transform: rotate(90deg); }
  .comparison-table-wrap { margin-inline: -8px; border-radius: 14px; }
  .strength-grid article,
  .decision-grid article { min-height: 0; padding: 28px 23px; }
  .strength-number { margin-bottom: 32px; }
  .attack-path li { grid-template-columns: 40px 1fr; padding: 20px 17px; }
  .comparison-cta { padding-top: 68px; }
}