.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* =====================================================================
   THE PROXY INDEX  —  Light Minimal design system
   Clean, airy, editorial. White base + a single purple accent.
   Single shared stylesheet for all pages, scoped under .tpx.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------- Tokens ---------- */
.tpx {
  --tpx-bg:        #FFFFFF;
  --tpx-surface:   #FAFAFA;
  --tpx-surface-2: #F3F4F6;
  --tpx-line:      #E8E9EC;
  --tpx-line-2:    #E0E2E6;

  --tpx-ink:       #0A0A0A;
  --tpx-text:      #3F3F46;
  --tpx-muted:     #6B7280;
  --tpx-faint:     #9CA3AF;

  --tpx-purple:    #7C3AED;
  --tpx-purple-d:  #6D28D9;
  --tpx-purple-sf: #F5F2FF;   /* faint purple tint */
  --tpx-green:     #059669;    /* functional "online/success" signal only */

  --tpx-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --tpx-font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --tpx-font-body:    'Inter', system-ui, sans-serif;

  --tpx-r:    10px;
  --tpx-r-sm: 6px;
  --tpx-maxw: 1120px;
  --tpx-shadow: 0 1px 2px rgba(16,24,40,.04);
  --tpx-shadow-h: 0 8px 30px -12px rgba(16,24,40,.16);

  color: var(--tpx-text);
  background: var(--tpx-bg);
  font-family: var(--tpx-font-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
}

/* ---------- Scoped reset ---------- */
.tpx *, .tpx *::before, .tpx *::after { box-sizing: border-box; }
.tpx h1, .tpx h2, .tpx h3, .tpx h4, .tpx p, .tpx ul, .tpx ol, .tpx figure { margin: 0; padding: 0; }
.tpx a { color: var(--tpx-purple); text-decoration: none; transition: color .18s ease; }
.tpx a:hover { color: var(--tpx-purple-d); }
.tpx img { max-width: 100%; display: block; }
.tpx ul { list-style: none; }

/* ---------- Backgrounds (grid removed for minimal) ---------- */
.tpx-grid-bg { position: relative; background: var(--tpx-bg); }
.tpx-grid-bg > * { position: relative; z-index: 1; }

/* ---------- Layout ---------- */
.tpx-container { width: 100%; max-width: var(--tpx-maxw); margin: 0 auto; padding: 0 24px; }
.tpx-section { padding: 96px 0; }
.tpx-section--tight { padding: 56px 0; }

/* ---------- Typography helpers ---------- */
.tpx-eyebrow {
  font-family: var(--tpx-font-mono);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tpx-purple);
  display: inline-flex; align-items: center; gap: 9px;
}
.tpx-eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--tpx-purple);
}

.tpx-h1 { font-family: var(--tpx-font-display); font-weight: 600; font-size: clamp(36px, 5.2vw, 60px); line-height: 1.06; letter-spacing: -.015em; color: var(--tpx-ink); }
.tpx-h2 { font-family: var(--tpx-font-display); font-weight: 600; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; letter-spacing: -.01em; color: var(--tpx-ink); }
.tpx-h3 { font-family: var(--tpx-font-display); font-weight: 600; font-size: 20px; letter-spacing: -.005em; color: var(--tpx-ink); }
.tpx-lead { color: var(--tpx-muted); font-size: clamp(16px, 1.4vw, 19px); max-width: 60ch; }
.tpx-mono { font-family: var(--tpx-font-mono); }
.tpx-accent-p { color: var(--tpx-purple); }
.tpx-accent-y { color: var(--tpx-purple); }   /* legacy hook → unified to accent */

.tpx-section-head { max-width: 680px; margin-bottom: 56px; }
.tpx-section-head .tpx-h2 { margin: 16px 0 16px; }

/* ---------- Buttons ---------- */
.tpx-btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--tpx-font-body); font-weight: 600; font-size: 15px;
  letter-spacing: 0; text-transform: none;
  padding: 12px 22px; border: 1px solid transparent; cursor: pointer;
  border-radius: var(--tpx-r-sm); transition: all .18s ease;
}
.tpx .tpx-btn--primary { background: var(--tpx-purple); color: #fff; }
.tpx .tpx-btn--primary:hover { background: var(--tpx-purple-d); color: #fff; transform: translateY(-1px); }
.tpx .tpx-btn--ghost { background: #fff; color: var(--tpx-ink); border-color: var(--tpx-line-2); }
.tpx .tpx-btn--ghost:hover { border-color: var(--tpx-purple); color: var(--tpx-purple); }
.tpx-btn--full { width: 100%; justify-content: center; }

/* ---------- Tags / badges ---------- */
.tpx-tag {
  font-family: var(--tpx-font-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--tpx-line-2); color: var(--tpx-muted);
  background: #fff; display: inline-flex; gap: 6px; align-items: center;
}
.tpx-tag--green  { color: var(--tpx-green);  border-color: rgba(5,150,105,.25);  background: rgba(5,150,105,.06); }
.tpx-tag--purple { color: var(--tpx-purple); border-color: rgba(124,58,237,.25); background: var(--tpx-purple-sf); }
.tpx-tag--yellow { color: var(--tpx-purple); border-color: rgba(124,58,237,.25); background: var(--tpx-purple-sf); }

/* =====================================================================
   HEADER / NAV
   ===================================================================== */
.tpx-header {
  border-bottom: 1px solid var(--tpx-line);
  background: rgba(255,255,255,.8); backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 50;
}
.tpx-nav { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.tpx .tpx-logo { display: flex; align-items: center; gap: 10px; font-family: var(--tpx-font-display); font-weight: 600; font-size: 17px; color: var(--tpx-ink); letter-spacing: -.01em; }
.tpx .tpx-logo:hover { color: var(--tpx-ink); }
.tpx-logo-mark {
  width: 28px; height: 28px; border-radius: var(--tpx-r-sm); display: grid; place-items: center;
  background: var(--tpx-purple); color: #fff; font-family: var(--tpx-font-mono); font-weight: 500; font-size: 14px;
}
.tpx-nav-links { display: flex; gap: 30px; align-items: center; }
.tpx-nav-links a { color: var(--tpx-muted); font-size: 15px; font-weight: 500; }
.tpx-nav-links a:hover { color: var(--tpx-ink); }
.tpx-nav-cta { font-size: 14px; padding: 9px 18px; }

/* =====================================================================
   HERO + PROXY SELECTOR CONSOLE
   ===================================================================== */
/* masthead */
.tpx-masthead {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-bottom: 20px; border-bottom: 1px solid var(--tpx-line); margin-bottom: 54px;
  font-family: var(--tpx-font-mono); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tpx-faint);
}

.tpx-hero { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.tpx-hero-copy { max-width: 560px; }
.tpx-hero-copy .tpx-h1 { margin: 0 0 22px; }
.tpx-hero-copy .tpx-h1 span { color: var(--tpx-purple); font-style: italic; }
.tpx-hero-copy .tpx-lead { margin-bottom: 34px; }

/* hero image */
.tpx-hero-media { display: flex; justify-content: center; }
.tpx-hero-media img { width: 100%; max-width: 560px; height: auto; border-radius: var(--tpx-r); display: block; }

/* editorial ranked chart */
.tpx-rank { border: 1px solid var(--tpx-line); border-radius: var(--tpx-r); background: #fff; box-shadow: var(--tpx-shadow-h); overflow: hidden; }
.tpx-rank-head { display: flex; justify-content: space-between; padding: 15px 22px; border-bottom: 1px solid var(--tpx-line); background: var(--tpx-surface); font-family: var(--tpx-font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--tpx-faint); }
.tpx-rank-row { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--tpx-line); color: inherit; transition: background .15s ease; }
.tpx-rank-row:hover { color: inherit; background: var(--tpx-surface); }
.tpx-rank-no { font-family: var(--tpx-font-display); font-weight: 600; font-size: 17px; color: var(--tpx-faint); width: 22px; flex-shrink: 0; transition: color .15s ease; }
.tpx-rank-row:hover .tpx-rank-no { color: var(--tpx-purple); }
.tpx-rank-logo { width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--tpx-r-sm); display: grid; place-items: center; border: 1px solid var(--tpx-line); background: var(--tpx-surface); font-family: var(--tpx-font-mono); font-weight: 500; font-size: 13px; color: var(--tpx-purple); }
.tpx-rank-name { font-family: var(--tpx-font-display); font-weight: 600; font-size: 17px; color: var(--tpx-ink); flex-shrink: 0; }
.tpx-rank-dots { flex: 1; min-width: 16px; border-bottom: 1px dotted var(--tpx-line-2); transform: translateY(-5px); }
.tpx-rank-score { font-family: var(--tpx-font-display); font-weight: 700; font-size: 18px; color: var(--tpx-ink); flex-shrink: 0; }
.tpx-rank-foot { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 16px; font-size: 14px; font-weight: 600; color: var(--tpx-purple); background: var(--tpx-surface); }
.tpx-rank-foot:hover { color: var(--tpx-purple-d); }
.tpx-hero-actions { display: flex; gap: 12px; margin: 0; flex-wrap: wrap; }
.tpx-hero-stats { display: flex; gap: 40px; border-top: 1px solid var(--tpx-line); padding-top: 26px; }
.tpx-hero-stats .num { font-family: var(--tpx-font-display); font-weight: 600; font-size: 26px; color: var(--tpx-ink); }
.tpx-hero-stats .lbl { font-size: 13px; color: var(--tpx-faint); margin-top: 2px; }

/* founder / credibility line */
.tpx-hero-by { display: flex; align-items: center; gap: 14px; margin: 28px 0 30px; }
.tpx-hero-avatars { display: flex; flex-shrink: 0; }
.tpx-hero-avatars span {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tpx-purple-sf); border: 2px solid #fff; color: var(--tpx-purple);
  font-family: var(--tpx-font-mono); font-weight: 500; font-size: 13px; margin-left: -12px;
  box-shadow: 0 1px 2px rgba(16,24,40,.06);
}
.tpx-hero-avatars span:first-child { margin-left: 0; }
.tpx-hero-by p { font-size: 14px; color: var(--tpx-muted); max-width: 42ch; }

/* hero illustration */
.tpx-hero-art { display: grid; place-items: center; }
.tpx-hero-art svg { width: 100%; max-width: 500px; height: auto; }

/* Console widget — clean light card */
.tpx-console {
  background: #fff; border: 1px solid var(--tpx-line); border-radius: var(--tpx-r);
  overflow: hidden; box-shadow: var(--tpx-shadow-h);
}
.tpx-console-bar {
  display: flex; align-items: center; gap: 7px; padding: 13px 16px;
  border-bottom: 1px solid var(--tpx-line); background: var(--tpx-surface);
}
.tpx-console-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: #D1D5DB; }
.tpx-console-bar .title { font-family: var(--tpx-font-mono); font-size: 12px; color: var(--tpx-faint); margin-left: 8px; }
.tpx-console-body { padding: 24px; }
.tpx-console-label { font-family: var(--tpx-font-mono); font-size: 11px; color: var(--tpx-faint); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 14px; display: block; }

/* Pure-CSS tab toggle */
.tpx-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.tpx-toggle-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--tpx-surface-2); padding: 4px; border-radius: var(--tpx-r-sm); margin-bottom: 20px; }
.tpx-toggle-tabs label {
  text-align: center; padding: 9px 6px; cursor: pointer; border-radius: var(--tpx-r-sm);
  font-family: var(--tpx-font-body); font-weight: 600; font-size: 13px;
  color: var(--tpx-muted); transition: all .18s ease;
}
.tpx-toggle-tabs label:hover { color: var(--tpx-ink); }

.tpx-toggle-panel { display: none; }
#tpx-r-res:checked  ~ .tpx-toggle-tabs label[for="tpx-r-res"],
#tpx-r-dc:checked   ~ .tpx-toggle-tabs label[for="tpx-r-dc"],
#tpx-r-mob:checked  ~ .tpx-toggle-tabs label[for="tpx-r-mob"] {
  color: var(--tpx-purple); background: #fff; box-shadow: var(--tpx-shadow);
}
#tpx-r-res:checked ~ .tpx-toggle-body .tpx-toggle-panel[data-p="res"],
#tpx-r-dc:checked  ~ .tpx-toggle-body .tpx-toggle-panel[data-p="dc"],
#tpx-r-mob:checked ~ .tpx-toggle-body .tpx-toggle-panel[data-p="mob"] { display: block; }

/* recommendation card */
.tpx-rec { border: 1px solid var(--tpx-line); background: var(--tpx-surface); padding: 20px; border-radius: var(--tpx-r); }
.tpx-rec-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.tpx-rec-name { font-family: var(--tpx-font-display); font-weight: 600; font-size: 17px; color: var(--tpx-ink); }
.tpx-rec-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 18px; }
.tpx-rec-grid .k { font-family: var(--tpx-font-mono); font-size: 10px; color: var(--tpx-faint); text-transform: uppercase; letter-spacing: .08em; }
.tpx-rec-grid .v { font-family: var(--tpx-font-display); font-weight: 600; font-size: 17px; margin-top: 4px; color: var(--tpx-ink); }
.tpx-rec-grid .v.g { color: var(--tpx-green); }

/* =====================================================================
   PERFORMANCE MATRIX  (Bento Grid)
   ===================================================================== */
.tpx-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tpx-bento-card {
  background: #fff; border: 1px solid var(--tpx-line); border-radius: var(--tpx-r);
  padding: 24px; display: flex; flex-direction: column;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tpx-bento-card:hover { border-color: var(--tpx-line-2); box-shadow: var(--tpx-shadow-h); transform: translateY(-2px); }
.tpx-bento-card--wide { grid-column: span 2; }
.tpx-bento-card--feature { grid-column: span 2; grid-row: span 2; background: var(--tpx-purple-sf); border-color: rgba(124,58,237,.18); }
.tpx-bento-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.tpx-bento-logo { width: 40px; height: 40px; border-radius: var(--tpx-r-sm); display: grid; place-items: center; border: 1px solid var(--tpx-line); font-family: var(--tpx-font-mono); font-weight: 500; color: var(--tpx-purple); background: #fff; }
.tpx-bento-name { font-family: var(--tpx-font-display); font-weight: 600; font-size: 18px; color: var(--tpx-ink); }
.tpx-bento-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--tpx-line); }
.tpx-bento-metrics .k { font-family: var(--tpx-font-mono); font-size: 10px; color: var(--tpx-faint); text-transform: uppercase; letter-spacing: .06em; }
.tpx-bento-metrics .v { font-family: var(--tpx-font-display); font-weight: 600; font-size: 21px; margin-top: 4px; color: var(--tpx-ink); }
.tpx-bento-metrics .v.g { color: var(--tpx-green); }
.tpx-bento-metrics .v.y { color: var(--tpx-ink); }
.tpx-bar { height: 6px; border-radius: 999px; background: var(--tpx-surface-2); margin-top: 16px; position: relative; overflow: hidden; }
.tpx-bar > span { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--tpx-purple); }

/* =====================================================================
   TOP COUPONS
   ===================================================================== */
.tpx-coupons { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.tpx-coupon {
  position: relative; background: #fff; border: 1px solid var(--tpx-line);
  border-radius: var(--tpx-r); padding: 26px; transition: border-color .18s ease, box-shadow .18s ease;
}
.tpx-coupon:hover { border-color: var(--tpx-line-2); box-shadow: var(--tpx-shadow-h); }
.tpx-coupon-flash { position: absolute; top: 16px; right: 16px; background: var(--tpx-purple-sf); color: var(--tpx-purple); font-family: var(--tpx-font-mono); font-size: 10px; font-weight: 500; padding: 4px 10px; border-radius: 999px; letter-spacing: .06em; }
.tpx-coupon-off { font-family: var(--tpx-font-display); font-weight: 600; font-size: 40px; line-height: 1; color: var(--tpx-ink); }
.tpx-coupon-off span { font-size: 18px; color: var(--tpx-muted); }
.tpx-coupon-name { font-family: var(--tpx-font-display); font-weight: 600; font-size: 17px; color: var(--tpx-ink); margin: 14px 0 6px; }
.tpx-coupon-desc { color: var(--tpx-muted); font-size: 15px; margin-bottom: 20px; }
.tpx-coupon-code {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: var(--tpx-font-mono); font-size: 13px; color: var(--tpx-ink);
  border: 1px dashed var(--tpx-line-2); border-radius: var(--tpx-r-sm); padding: 10px 14px; margin-bottom: 16px; background: var(--tpx-surface);
}

/* ---------- Section background helper ---------- */
.tpx-bg-surface { background: var(--tpx-surface); }

/* ---------- Star rating ---------- */
.tpx-stars { display: inline-flex; gap: 2px; color: var(--tpx-purple); font-size: 14px; letter-spacing: 1px; }
.tpx-stars .off { color: var(--tpx-line-2); }

/* =====================================================================
   HERO — EDITOR'S CHOICE PANEL (replaces console on homepage)
   ===================================================================== */
.tpx-choice {
  background: #fff; border: 1px solid var(--tpx-line); border-radius: var(--tpx-r);
  box-shadow: var(--tpx-shadow-h); overflow: hidden;
}
.tpx-choice-ribbon {
  display: flex; align-items: center; gap: 10px; padding: 14px 22px;
  background: var(--tpx-purple); color: #fff;
}
.tpx-choice-ribbon svg { width: 18px; height: 18px; flex-shrink: 0; }
.tpx-choice-ribbon span { font-family: var(--tpx-font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.tpx-choice-body { padding: 26px 26px 28px; }
.tpx-choice-top { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.tpx-choice-logo { width: 52px; height: 52px; border-radius: var(--tpx-r-sm); display: grid; place-items: center; background: var(--tpx-purple-sf); border: 1px solid rgba(124,58,237,.18); font-family: var(--tpx-font-mono); font-weight: 500; color: var(--tpx-purple); font-size: 18px; }
.tpx-choice-name { font-family: var(--tpx-font-display); font-weight: 600; font-size: 24px; color: var(--tpx-ink); line-height: 1.1; }
.tpx-choice-cat { font-family: var(--tpx-font-mono); font-size: 11px; color: var(--tpx-faint); text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }
.tpx-choice-score { display: flex; align-items: baseline; gap: 10px; padding: 16px 0; border-top: 1px solid var(--tpx-line); border-bottom: 1px solid var(--tpx-line); margin-bottom: 22px; }
.tpx-choice-score .big { font-family: var(--tpx-font-display); font-weight: 700; font-size: 40px; color: var(--tpx-ink); line-height: 1; }
.tpx-choice-score .out { color: var(--tpx-faint); font-size: 15px; }
.tpx-choice-score .tpx-stars { margin-left: auto; }
.tpx-choice-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 24px; }
.tpx-choice-metrics .k { font-family: var(--tpx-font-mono); font-size: 10px; color: var(--tpx-faint); text-transform: uppercase; letter-spacing: .06em; }
.tpx-choice-metrics .v { font-family: var(--tpx-font-display); font-weight: 600; font-size: 18px; color: var(--tpx-ink); margin-top: 4px; }
.tpx-choice-metrics .v.g { color: var(--tpx-green); }

/* =====================================================================
   BEST-RATED PROVIDERS — Award cards
   ===================================================================== */
.tpx-awards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tpx-award {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--tpx-line);
  border-radius: var(--tpx-r); padding: 24px; color: inherit; position: relative;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.tpx-award:hover { color: inherit; border-color: var(--tpx-line-2); box-shadow: var(--tpx-shadow-h); transform: translateY(-3px); }
.tpx-award-badge {
  align-self: flex-start; font-family: var(--tpx-font-mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tpx-purple); background: var(--tpx-purple-sf);
  border: 1px solid rgba(124,58,237,.2); border-radius: 999px; padding: 4px 11px; margin-bottom: 18px;
}
.tpx-award-logo { width: 46px; height: 46px; border-radius: var(--tpx-r-sm); display: grid; place-items: center; border: 1px solid var(--tpx-line); font-family: var(--tpx-font-mono); font-weight: 500; color: var(--tpx-purple); background: var(--tpx-surface); font-size: 16px; margin-bottom: 14px; }
.tpx-award-name { font-family: var(--tpx-font-display); font-weight: 600; font-size: 20px; color: var(--tpx-ink); }
.tpx-award-score { display: flex; align-items: center; gap: 8px; margin: 10px 0 12px; }
.tpx-award-score .num { font-family: var(--tpx-font-display); font-weight: 700; font-size: 16px; color: var(--tpx-ink); }
.tpx-award-desc { color: var(--tpx-muted); font-size: 14px; flex: 1; margin-bottom: 18px; }
.tpx-award-link { font-size: 14px; font-weight: 600; color: var(--tpx-purple); display: inline-flex; align-items: center; gap: 6px; }
.tpx-award:hover .tpx-award-link { gap: 9px; }

/* =====================================================================
   LATEST NEWS — vertical list
   ===================================================================== */
.tpx-news { border: 1px solid var(--tpx-line); border-radius: var(--tpx-r); overflow: hidden; background: #fff; }
.tpx-news-item {
  display: flex; align-items: center; gap: 20px; padding: 20px 24px;
  border-bottom: 1px solid var(--tpx-line); color: inherit; transition: background .15s ease;
}
.tpx-news-item:last-child { border-bottom: 0; }
.tpx-news-item:hover { color: inherit; background: var(--tpx-surface); }
.tpx-news-thumb { width: 48px; height: 48px; flex-shrink: 0; border-radius: var(--tpx-r-sm); display: grid; place-items: center; background: var(--tpx-purple-sf); border: 1px solid rgba(124,58,237,.15); font-family: var(--tpx-font-mono); font-weight: 500; color: var(--tpx-purple); font-size: 15px; }
.tpx-news-main { flex: 1; min-width: 0; }
.tpx-news-date { font-family: var(--tpx-font-mono); font-size: 11px; color: var(--tpx-faint); text-transform: uppercase; letter-spacing: .06em; }
.tpx-news-title { font-family: var(--tpx-font-display); font-weight: 600; font-size: 17px; color: var(--tpx-ink); margin: 4px 0 4px; transition: color .15s ease; }
.tpx-news-item:hover .tpx-news-title { color: var(--tpx-purple); }
.tpx-news-desc { color: var(--tpx-muted); font-size: 14px; }
.tpx-news-arrow { flex-shrink: 0; color: var(--tpx-faint); font-size: 18px; transition: transform .2s ease, color .2s ease; }
.tpx-news-item:hover .tpx-news-arrow { color: var(--tpx-purple); transform: translateX(4px); }

/* =====================================================================
   TRUST BAND — why readers trust us (value props)
   ===================================================================== */
.tpx-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tpx-value { background: #fff; border: 1px solid var(--tpx-line); border-radius: var(--tpx-r); padding: 26px; }
.tpx-value-icon { width: 44px; height: 44px; border-radius: var(--tpx-r-sm); display: grid; place-items: center; background: var(--tpx-purple-sf); color: var(--tpx-purple); margin-bottom: 16px; }
.tpx-value-icon svg { width: 22px; height: 22px; }
.tpx-value h3 { font-family: var(--tpx-font-display); font-weight: 600; font-size: 18px; color: var(--tpx-ink); margin-bottom: 8px; }
.tpx-value p { color: var(--tpx-muted); font-size: 14px; }

/* =====================================================================
   INFORMATIVE ARTICLES  (homepage)
   ===================================================================== */
.tpx-articles-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 44px; }
.tpx-articles-all { flex-shrink: 0; }

.tpx-articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.tpx-acard {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--tpx-line); border-radius: var(--tpx-r);
  overflow: hidden; color: inherit;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.tpx-acard:hover { color: inherit; border-color: var(--tpx-line-2); box-shadow: var(--tpx-shadow-h); transform: translateY(-3px); }

.tpx-acard-cover {
  position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--tpx-surface), var(--tpx-purple-sf));
  border-bottom: 1px solid var(--tpx-line); color: var(--tpx-purple);
}
.tpx-acard-cover svg { width: 56px; height: 56px; opacity: .85; transition: transform .25s ease; }
.tpx-acard:hover .tpx-acard-cover svg { transform: scale(1.06); }
.tpx-acard-cat {
  position: absolute; top: 14px; left: 14px;
  font-family: var(--tpx-font-mono); font-size: 11px; letter-spacing: .04em;
  color: var(--tpx-purple); background: #fff; border: 1px solid rgba(124,58,237,.2);
  padding: 4px 10px; border-radius: 999px;
}

.tpx-acard-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.tpx-acard-title {
  font-family: var(--tpx-font-display); font-weight: 600; font-size: 19px; line-height: 1.3;
  letter-spacing: -.01em; color: var(--tpx-ink); transition: color .18s ease;
}
.tpx-acard:hover .tpx-acard-title { color: var(--tpx-purple); }
.tpx-acard-excerpt { color: var(--tpx-muted); font-size: 15px; margin: 12px 0 22px; }
.tpx-acard-meta {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--tpx-line);
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--tpx-font-mono); font-size: 12px; color: var(--tpx-faint);
}
.tpx-acard-arrow { color: var(--tpx-purple); font-size: 16px; transition: transform .2s ease; }
.tpx-acard:hover .tpx-acard-arrow { transform: translateX(4px); }

/* versus featured image (comparison cards) */
.tpx-vs { display: flex; align-items: center; gap: 16px; transition: transform .25s ease; }
.tpx-acard:hover .tpx-vs { transform: scale(1.04); }
.tpx-vs-logo {
  width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--tpx-line); box-shadow: var(--tpx-shadow-h);
  font-family: var(--tpx-font-mono); font-weight: 600; font-size: 18px; color: var(--tpx-purple);
}
.tpx-vs-sep {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: var(--tpx-purple); color: #fff; box-shadow: 0 0 0 4px var(--tpx-purple-sf);
  font-family: var(--tpx-font-mono); font-weight: 600; font-size: 12px; letter-spacing: .02em;
}

/* =====================================================================
   ARCHIVE  —  Data Table
   ===================================================================== */
.tpx-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.tpx-filter {
  font-family: var(--tpx-font-body); font-weight: 500; font-size: 14px; color: var(--tpx-muted);
  background: #fff; border: 1px solid var(--tpx-line); border-radius: 999px; padding: 8px 16px;
  cursor: pointer; transition: all .18s ease;
}
.tpx-filter:hover { border-color: var(--tpx-line-2); color: var(--tpx-ink); }
.tpx-filter.is-active { color: #fff; background: var(--tpx-purple); border-color: var(--tpx-purple); }
.tpx-table-wrap { border: 1px solid var(--tpx-line); border-radius: var(--tpx-r); overflow: hidden; overflow-x: auto; }
.tpx-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.tpx-table thead th {
  font-family: var(--tpx-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tpx-faint); text-align: left; padding: 15px 20px; background: var(--tpx-surface);
  border-bottom: 1px solid var(--tpx-line);
}
.tpx-table tbody td { padding: 18px 20px; border-bottom: 1px solid var(--tpx-line); font-size: 15px; color: var(--tpx-muted); }
.tpx-table tbody tr { transition: background .15s ease; }
.tpx-table tbody tr:hover { background: var(--tpx-surface); }
.tpx-table tbody tr:last-child td { border-bottom: 0; }
.tpx-table .net { display: flex; align-items: center; gap: 12px; }
.tpx-table .net .m { width: 34px; height: 34px; border-radius: var(--tpx-r-sm); display: grid; place-items: center; border: 1px solid var(--tpx-line); font-family: var(--tpx-font-mono); font-weight: 500; color: var(--tpx-purple); background: #fff; font-size: 13px; }
.tpx-table .net .nm { color: var(--tpx-ink); font-family: var(--tpx-font-display); font-weight: 600; }
.tpx-table .val-g { color: var(--tpx-green); font-weight: 600; }
.tpx-table .val-y { color: var(--tpx-ink); font-weight: 600; }

/* =====================================================================
   SINGLE POST  —  Protocol Tree + content
   ===================================================================== */
.tpx-post { display: grid; grid-template-columns: 220px 1fr; gap: 64px; align-items: start; }
.tpx-tree { position: sticky; top: 96px; }
.tpx-tree-title { font-family: var(--tpx-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--tpx-faint); margin-bottom: 16px; }
.tpx-tree ul { display: flex; flex-direction: column; gap: 4px; }
.tpx-tree a { display: block; color: var(--tpx-muted); font-size: 14px; padding: 7px 0 7px 14px; border-left: 2px solid var(--tpx-line); transition: all .15s ease; }
.tpx-tree a:hover { color: var(--tpx-ink); border-left-color: var(--tpx-purple); }

.tpx-article { max-width: 700px; }
.tpx-article .tpx-h1 { margin-bottom: 18px; }
.tpx-article .meta { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 36px; font-family: var(--tpx-font-mono); font-size: 12px; color: var(--tpx-faint); }
.tpx-article h2 { font-family: var(--tpx-font-display); font-weight: 600; font-size: 26px; color: var(--tpx-ink); margin: 44px 0 16px; scroll-margin-top: 96px; }
.tpx-article p { color: var(--tpx-text); font-size: 17px; margin-bottom: 18px; }
.tpx-article ul.body-list { display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px; }
.tpx-article ul.body-list li { color: var(--tpx-text); font-size: 17px; padding-left: 22px; position: relative; }
.tpx-article ul.body-list li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--tpx-purple); }
.tpx-takeaway {
  border: 1px solid var(--tpx-line); border-left: 3px solid var(--tpx-purple);
  background: var(--tpx-surface); border-radius: var(--tpx-r-sm);
  padding: 20px 24px; margin: 28px 0;
}
.tpx-takeaway .lbl { font-family: var(--tpx-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--tpx-purple); margin-bottom: 8px; }
.tpx-takeaway p { margin: 0; color: var(--tpx-ink); font-size: 16px; }

/* =====================================================================
   ABOUT  —  System Status Log timeline
   ===================================================================== */
.tpx-log { position: relative; padding-left: 32px; }
.tpx-log::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--tpx-line); }
.tpx-log-item { position: relative; padding-bottom: 40px; }
.tpx-log-item:last-child { padding-bottom: 0; }
.tpx-log-item::before {
  content: ""; position: absolute; left: -32px; top: 4px; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 2px solid var(--tpx-purple);
}
.tpx-log-time { font-family: var(--tpx-font-mono); font-size: 11px; color: var(--tpx-purple); text-transform: uppercase; letter-spacing: .08em; }
.tpx-log-item h3 { margin: 10px 0 8px; }
.tpx-log-item p { color: var(--tpx-muted); font-size: 16px; }

.tpx-specs { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.tpx-spec { border: 1px solid var(--tpx-line); background: #fff; padding: 26px; border-radius: var(--tpx-r); }
.tpx-spec .k { font-family: var(--tpx-font-mono); font-size: 11px; color: var(--tpx-faint); text-transform: uppercase; letter-spacing: .08em; }
.tpx-spec .v { font-family: var(--tpx-font-display); font-weight: 600; font-size: 28px; color: var(--tpx-ink); margin-top: 10px; }
.tpx-spec .d { color: var(--tpx-muted); font-size: 14px; margin-top: 8px; }

/* =====================================================================
   CONTACT  —  Terminal-style form (cleaned up)
   ===================================================================== */
.tpx-contact { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.tpx-terminal { background: #fff; border: 1px solid var(--tpx-line); border-radius: var(--tpx-r); overflow: hidden; box-shadow: var(--tpx-shadow); }
.tpx-terminal-body { padding: 28px; }
.tpx-field { margin-bottom: 20px; }
.tpx-field label { display: block; font-family: var(--tpx-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--tpx-muted); margin-bottom: 8px; }
.tpx-field label::before { content: "$ "; color: var(--tpx-purple); }
.tpx-input, .tpx-textarea {
  width: 100%; background: var(--tpx-bg); border: 1px solid var(--tpx-line-2); color: var(--tpx-ink);
  font-family: var(--tpx-font-body); font-size: 15px; padding: 12px 14px; border-radius: var(--tpx-r-sm);
  transition: border-color .18s ease, box-shadow .18s ease; outline: none;
}
.tpx-input::placeholder, .tpx-textarea::placeholder { color: var(--tpx-faint); }
.tpx-input:focus, .tpx-textarea:focus { border-color: var(--tpx-purple); box-shadow: 0 0 0 3px rgba(124,58,237,.12); }
.tpx-textarea { resize: vertical; min-height: 130px; }
.tpx-contact-side .tpx-info { border: 1px solid var(--tpx-line); background: #fff; padding: 18px 20px; margin-bottom: 12px; border-radius: var(--tpx-r); }
.tpx-contact-side .tpx-info .k { font-family: var(--tpx-font-mono); font-size: 11px; color: var(--tpx-faint); text-transform: uppercase; letter-spacing: .08em; }
.tpx-contact-side .tpx-info .v { margin-top: 6px; color: var(--tpx-ink); font-weight: 500; }

/* =====================================================================
   LEGAL / DISCLOSURE
   ===================================================================== */
.tpx-legal { display: grid; grid-template-columns: 220px 1fr; gap: 56px; align-items: start; }
.tpx-legal-nav { position: sticky; top: 96px; }
.tpx-legal-nav .tpx-tree-title { margin-bottom: 12px; }
.tpx-legal-nav a { display: block; color: var(--tpx-muted); font-size: 14px; padding: 8px 0; border-bottom: 1px solid var(--tpx-line); }
.tpx-legal-nav a:hover { color: var(--tpx-ink); }
.tpx-legal-body { max-width: 720px; }
.tpx-legal-body h2 { font-family: var(--tpx-font-display); font-weight: 600; font-size: 24px; color: var(--tpx-ink); margin: 40px 0 14px; scroll-margin-top: 96px; }
.tpx-legal-body h2:first-of-type { margin-top: 0; }
.tpx-legal-body .sub { font-family: var(--tpx-font-mono); font-size: 12px; color: var(--tpx-purple); text-transform: uppercase; letter-spacing: .08em; display: block; margin-bottom: 6px; }
.tpx-legal-body p { color: var(--tpx-text); font-size: 16px; margin-bottom: 16px; }
.tpx-legal-body ul { display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px; }
.tpx-legal-body ul li { color: var(--tpx-text); font-size: 16px; padding-left: 22px; position: relative; }
.tpx-legal-body ul li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--tpx-purple); }
.tpx-legal-updated { font-family: var(--tpx-font-mono); font-size: 12px; color: var(--tpx-faint); margin-bottom: 36px; }

.tpx-protocol-box {
  border: 1px solid rgba(124,58,237,.2); border-radius: var(--tpx-r);
  background: var(--tpx-purple-sf); padding: 30px 32px; margin-bottom: 44px;
}
.tpx-protocol-box .tpx-eyebrow { margin-bottom: 14px; }
.tpx-protocol-box p { color: var(--tpx-text); font-size: 16px; margin-bottom: 14px; }
.tpx-protocol-box p:last-child { margin-bottom: 0; }

/* =====================================================================
   PAGE HEADER BLOCK (interior pages)
   ===================================================================== */
.tpx-pagehead { padding: 72px 0 56px; border-bottom: 1px solid var(--tpx-line); }
.tpx-pagehead .tpx-h1 { margin: 16px 0 14px; }

/* =====================================================================
   CTA STRIP
   ===================================================================== */
.tpx-cta-strip {
  border: 1px solid var(--tpx-line); border-radius: var(--tpx-r);
  background: var(--tpx-surface); padding: 56px; text-align: center;
}
.tpx-cta-strip .tpx-h2 { margin: 14px 0 14px; }
.tpx-cta-strip .tpx-lead { margin: 0 auto 28px; }
.tpx-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.tpx-footer { border-top: 1px solid var(--tpx-line); padding: 64px 0 32px; }
.tpx-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 48px; }
.tpx-footer-grid .tpx-logo { margin-bottom: 16px; }
.tpx-footer-col h4 { font-family: var(--tpx-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--tpx-faint); margin-bottom: 16px; }
.tpx-footer-col a { display: block; color: var(--tpx-muted); font-size: 15px; padding: 6px 0; }
.tpx-footer-col a:hover { color: var(--tpx-ink); }
.tpx-footer-about p { color: var(--tpx-muted); font-size: 15px; max-width: 36ch; }
.tpx-footer-bottom { border-top: 1px solid var(--tpx-line); padding-top: 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--tpx-font-mono); font-size: 12px; color: var(--tpx-faint); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 980px) {
  .tpx-hero { grid-template-columns: 1fr; gap: 40px; }
  .tpx-hero-copy { max-width: none; }
  .tpx-hero-media { justify-content: center; }
  .tpx-hero-media img { max-width: 520px; }
  .tpx-bento { grid-template-columns: repeat(2, 1fr); }
  .tpx-bento-card--feature, .tpx-bento-card--wide { grid-column: span 2; grid-row: auto; }
  .tpx-coupons { grid-template-columns: repeat(2,1fr); }
  .tpx-awards-grid { grid-template-columns: repeat(2,1fr); }
  .tpx-values { grid-template-columns: repeat(2,1fr); }
  .tpx-articles-head { flex-direction: column; align-items: flex-start; }
  .tpx-articles-grid { grid-template-columns: repeat(2,1fr); }
  .tpx-post { grid-template-columns: 1fr; }
  .tpx-tree { position: static; }
  .tpx-tree ul { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .tpx-contact { grid-template-columns: 1fr; }
  .tpx-legal { grid-template-columns: 1fr; }
  .tpx-legal-nav { position: static; }
  .tpx-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .tpx-section { padding: 64px 0; }
  .tpx-nav-links { display: none; }
  .tpx-hero .tpx-h1 br { display: none; }
  .tpx-masthead { flex-direction: column; align-items: flex-start; gap: 6px; }
  .tpx-bento, .tpx-coupons, .tpx-specs, .tpx-articles-grid, .tpx-awards-grid, .tpx-values { grid-template-columns: 1fr; }
  .tpx-news-item { gap: 14px; padding: 18px; }
  .tpx-news-arrow { display: none; }
  .tpx-bento-card--feature, .tpx-bento-card--wide { grid-column: span 1; }
  .tpx-hero-stats { flex-wrap: wrap; gap: 24px; }
  .tpx-cta-strip { padding: 36px 24px; }
  .tpx-footer-grid { grid-template-columns: 1fr; }
  .tpx-footer-bottom { flex-direction: column; }
}/* End custom CSS */