: a sticky element only travels inside its own parent's box, so wrapping it would un-stick it immediately. */ .switcher { position: sticky; top: 0; z-index: 50; padding: var(--s3) 0; margin-bottom: var(--s7); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .switcher-label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); margin: var(--s6) 0 var(--s2); } .switcher-tabs { display: flex; gap: var(--s1); padding: var(--s1); background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--radius-lg); overflow-x: auto; scrollbar-width: none; } .switcher-tabs::-webkit-scrollbar { display: none; } .tab { flex: 1; min-width: max-content; text-align: center; text-decoration: none; color: var(--muted); font-size: 15px; font-weight: 500; padding: var(--s3) var(--s4); border-radius: var(--radius); border: 1px solid transparent; transition: color 0.15s var(--ease), background-color 0.15s var(--ease), border-color 0.15s var(--ease); } .tab:hover { color: var(--text); background: var(--bg3); } .tab[aria-current="page"] { color: var(--text); background: var(--bg3); border-color: var(--ok-line); box-shadow: inset 0 0 0 1px rgba(0,232,122,0.06); } .tab[aria-current="page"]::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); margin-right: var(--s2); vertical-align: 1px; } /* SECTIONS */ section { margin-bottom: var(--s9); } section:last-of-type { margin-bottom: 0; } h2 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 300; letter-spacing: -0.04em; line-height: 1.2; margin-bottom: var(--s3); text-wrap: balance; } .section-sub { font-size: 16px; color: var(--faint); line-height: 1.6; max-width: 62ch; margin-bottom: var(--s5); } p { font-size: 17px; color: var(--muted); line-height: 1.75; margin-bottom: var(--s4); max-width: 68ch; } p:last-child { margin-bottom: 0; } strong { color: var(--text); font-weight: 500; } code { font-family: var(--mono); font-size: 0.88em; background: var(--bg3); border: 1px solid var(--border2); padding: 2px 6px; border-radius: 4px; color: var(--text); } /* AT-A-GLANCE CARDS */ .glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); } .glance-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s4) var(--s5) var(--s5); display: flex; flex-direction: column; gap: var(--s3); transition: border-color 0.2s var(--ease); } .glance-card:hover { border-color: var(--border2); } .glance-title { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); } .glance-row { display: grid; gap: 2px; } .glance-who { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); } .glance-row.us .glance-who { color: var(--ok); } .glance-val { font-size: 16px; line-height: 1.45; color: var(--muted); } .glance-row.us .glance-val { color: var(--text); font-weight: 500; } .glance-rule { height: 1px; background: var(--border); } /* TABLE */ .table-tools { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s4); } .diff-toggle { display: none; align-items: center; gap: var(--s2); background: var(--bg2); color: var(--muted); border: 1px solid var(--border2); border-radius: 100px; padding: var(--s2) var(--s4); min-height: 40px; font-family: var(--sans); font-size: 14px; cursor: pointer; transition: color 0.15s var(--ease), border-color 0.15s var(--ease), background-color 0.15s var(--ease); } .js .diff-toggle { display: inline-flex; } .diff-toggle:hover { color: var(--text); border-color: var(--border3); } .diff-toggle .box { width: 15px; height: 15px; border-radius: 4px; border: 1px solid var(--border3); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 11px; line-height: 1; color: #000; } .diff-toggle[aria-pressed="true"] { color: var(--text); border-color: var(--ok-line); background: var(--ok-dim); } .diff-toggle[aria-pressed="true"] .box { background: var(--ok); border-color: var(--ok); } .diff-toggle[aria-pressed="true"] .box::before { content: "✓"; } .legend { display: flex; gap: var(--s4); flex-wrap: wrap; font-family: var(--mono); font-size: 12px; color: var(--faint); } .legend span { display: inline-flex; align-items: center; gap: 6px; } /* No overflow: hidden — it would break the sticky table header. The corners are rounded on the corner cells instead. */ .table-wrap { border: 1px solid var(--border2); border-radius: var(--radius-lg); background: var(--bg2); } .compare-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; } .compare-table thead th:first-child { border-top-left-radius: 11px; } .compare-table thead th:last-child { border-top-right-radius: 11px; } .compare-table tbody tr:last-child th[scope="row"], .compare-table tbody tr.is-last th[scope="row"] { border-bottom-left-radius: 11px; } .compare-table tbody tr:last-child td:last-child, .compare-table tbody tr.is-last td:last-child { border-bottom-right-radius: 11px; } .compare-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } .compare-table th, .compare-table td { padding: var(--s4) var(--s5); text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); } .compare-table tbody tr:last-child > *, .compare-table tbody tr.is-last > * { border-bottom: none; } .compare-table thead th { position: sticky; top: 84px; z-index: 20; background: var(--bg3); color: var(--faint); font-family: var(--mono); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--border2); white-space: nowrap; } /* Opaque, or rows would show through the sticky header as they scroll under it */ .compare-table thead th.us { color: var(--ok); background: color-mix(in srgb, var(--bg3) 92%, var(--ok)); } .us-chip { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: #000; background: var(--ok); border-radius: 4px; padding: 1px 5px; margin-left: var(--s2); } .compare-table tbody tr { transition: background-color 0.15s var(--ease); } .compare-table tbody tr:hover { background: rgba(255,255,255,0.02); } .compare-table th[scope="row"] { color: var(--text); font-weight: 500; font-size: 15px; width: 26%; font-family: var(--sans); text-transform: none; letter-spacing: 0; } /* The PingDrop column is washed so the eye can follow one column down the page */ .compare-table td.us, .compare-table thead th.us { background: var(--ok-wash); box-shadow: inset 1px 0 0 var(--ok-line), inset -1px 0 0 var(--ok-line); } .compare-table td { color: var(--muted); } .cell { display: flex; gap: var(--s2); align-items: baseline; } .ic { flex-shrink: 0; font-family: var(--mono); font-size: 13px; line-height: 1.5; width: 1em; text-align: center; } .ic.ok { color: var(--ok); } .ic.no { color: var(--faint); } .ic.plan { color: var(--warn); } .cell.no { color: var(--faint); } .cell.plan .val { color: var(--warn); } .note { display: block; font-size: 13px; color: var(--faint); margin-top: 2px; line-height: 1.45; } .hide-same tbody tr:not([data-diff]) { display: none; } .diff-count { font-family: var(--mono); font-size: 12px; color: var(--faint); } /* VERDICT — the honest two-sided read */ .verdict { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); align-items: start; } .verdict-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s6) var(--s5); } .verdict-card.pick { border-color: var(--ok-line); background: linear-gradient(180deg, var(--ok-dim), transparent 40%), var(--bg2); } .verdict-head { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); } .verdict-head svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--faint); } .verdict-card.pick .verdict-head svg { color: var(--ok); } .verdict-card h3 { font-size: 19px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; color: var(--text); } .verdict-card .kicker { font-family: var(--mono); font-size: 12px; color: var(--faint); margin-bottom: var(--s4); } .verdict-list { list-style: none; display: grid; gap: var(--s4); } /* The marker is positioned rather than laid out as a grid/flex sibling: as a sibling, any bare text node next to an inline element becomes its own item and gets squeezed into the marker column, one word per line. */ .verdict-list li { font-size: 15px; color: var(--muted); line-height: 1.65; position: relative; padding-left: 22px; } .verdict-list li::before { content: "+"; position: absolute; left: 0; top: 0; font-family: var(--mono); color: var(--ok); line-height: 1.5; } .verdict-card:not(.pick) .verdict-list li::before { content: "−"; color: var(--faint); } .verdict-list b { color: var(--text); font-weight: 500; display: block; } /* PROSE BLOCK (long-form detail, kept below the scannable parts) */ .prose { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s6) var(--s5); } .prose h3 { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; margin-bottom: var(--s3); color: var(--text); } .prose p { font-size: 16px; } .prose ul { list-style: none; display: grid; gap: var(--s3); margin-top: var(--s4); } .prose li { font-size: 16px; color: var(--muted); line-height: 1.7; position: relative; padding-left: 26px; } .prose li::before { content: "→"; position: absolute; left: 0; top: 0; color: var(--ok); font-family: var(--mono); } /* CTA BAND */ .cta-band { border: 1px solid var(--ok-line); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--ok-dim), transparent 60%), var(--bg2); padding: var(--s7) var(--s6); text-align: center; } .cta-band h2 { margin-bottom: var(--s3); } .cta-band p { margin: 0 auto var(--s5); color: var(--muted); } .cta-actions { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; } .btn-primary, .btn-ghost { min-height: 50px; padding: 0 var(--s6); border-radius: var(--radius); font-size: 16px; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease), box-shadow 0.15s var(--ease); } .btn-primary { background: var(--ok); color: #000; border: 1px solid transparent; } .btn-primary:hover { background: #4bf39c; box-shadow: var(--shadow); } .btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--border2); } .btn-ghost:hover { color: var(--text); border-color: var(--border3); } .cta-note { font-family: var(--mono); font-size: 12px; color: var(--faint); margin-top: var(--s4); } /* NEXT COMPARISONS — descriptive cards, not tiny pills */ .next-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); } .next-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s5); transition: border-color 0.2s var(--ease), transform 0.2s var(--ease); } .next-card:hover { border-color: var(--ok-line); transform: translateY(-2px); } .next-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); } .next-title { font-size: 18px; font-weight: 500; color: var(--text); letter-spacing: -0.02em; } .next-card:hover .next-title { color: var(--ok); } .next-desc { font-size: 14px; color: var(--faint); line-height: 1.55; } /* FOOTER */ footer { padding: var(--s6) 0; border-top: 1px solid var(--border); margin-top: var(--s8); font-family: var(--mono); font-size: 13px; color: var(--faint); display: flex; justify-content: space-between; align-items: center; gap: var(--s4); flex-wrap: wrap; } footer a { color: var(--faint); text-decoration: none; } footer a:hover { color: var(--muted); } /* RESPONSIVE */ @media (max-width: 860px) { .glance { grid-template-columns: 1fr; } .verdict { grid-template-columns: 1fr; } .next-grid { grid-template-columns: 1fr; } .compare-table th, .compare-table td { padding: var(--s3) var(--s4); } } /* Below this width a three-column table stops being readable, so each row becomes a small card: the feature on top, the two answers side by side so the comparison stays a comparison. */ @media (max-width: 700px) { .compare-table thead { display: none; } .compare-table, .compare-table tbody, .compare-table th, .compare-table td { display: block; width: auto; } .compare-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); align-items: stretch; border-bottom: 1px solid var(--border); padding: var(--s4) var(--s4) var(--s5); } .compare-table tbody tr:last-child, .compare-table tbody tr.is-last { border-bottom: none; } .compare-table th[scope="row"] { grid-column: 1 / -1; width: auto; padding: 0 0 var(--s2); font-size: 16px; border-bottom: none; } .compare-table td { padding: var(--s3); border-bottom: none; border-radius: var(--radius); } .compare-table td.us, .compare-table thead th.us { box-shadow: inset 0 0 0 1px var(--ok-line); } .compare-table td:not(.us) { background: var(--bg3); box-shadow: inset 0 0 0 1px var(--border); } .compare-table td::before { content: attr(data-label); display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; } .compare-table td.us::before { color: var(--ok); } .compare-table thead th { position: static; } } @media (max-width: 620px) { body { padding: 0 var(--s4); } .switcher { margin-bottom: var(--s6); } .switcher-label { margin-top: var(--s5); } .tab { font-size: 14px; padding: var(--s3); } .compare-table td { font-size: 14px; } .note { font-size: 12px; } .site-nav .back { display: none; } .cta-band { padding: var(--s6) var(--s4); } .cta-actions .btn-primary, .cta-actions .btn-ghost { width: 100%; } footer { flex-direction: column; text-align: center; } } /* At phone widths two answer columns get too narrow for real sentences, so the two answers stack instead. */ @media (max-width: 430px) { .compare-table tbody tr { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 400px) { .nav-cta { padding: 0 var(--s3); font-size: 13px; } }