/* View Transitions API */
::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation-duration:.25s;animation-timing-function:cubic-bezier(.19,1,.22,1)}

/* ── Global box-sizing reset (scoped to .tp) ── */
.tp *,.tp *::before,.tp *::after{box-sizing:border-box}

/* Tokens */
.tp{--bg:#0d0d0d;--card:#111;--ele:#161616;--b:#222;--b2:#2a2a2a;--t:#f0efe9;--mu:#888;--fa:#444;--ac:#6C63FF;--gw:rgba(108,99,255,.2);--gr:#22c55e;--rd:#ef4444;--go:#f59e0b;--r:12px;--r-sm:8px;background:var(--bg);color:var(--t);font-family:'Inter',-apple-system,sans-serif;min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden;width:100%}

/* Meta bar */
.tp-meta{border-bottom:1px solid var(--b);font-size:12px;color:var(--mu);padding:10px 0}
.tp-meta-inner{max-width:1200px;margin:0 auto;padding:0 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tp-bc{display:flex;align-items:center;gap:4px;margin-right:auto;flex-wrap:wrap}
.tp-bc a{color:var(--mu);text-decoration:none}.tp-bc a:hover{color:var(--t)}
.tp-bc s{opacity:.3}
.tp-stat{display:flex;align-items:center;gap:4px;white-space:nowrap}
.tp-upvote{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border:1px solid var(--b2);border-radius:99px;background:0;color:var(--mu);font-size:12px;font-weight:600;cursor:pointer;transition:.2s;white-space:nowrap}
.tp-upvote:hover{border-color:var(--ac);color:var(--ac);background:var(--gw)}

/* Layout */
.tp-wrap{max-width:1200px;margin:0 auto;padding:40px 20px;display:grid;grid-template-columns:1fr 300px;gap:48px;align-items:start}
.tp-wrap > main, .tp-wrap > aside { min-width: 0; }
@media(max-width:900px){.tp-wrap{grid-template-columns:1fr;padding:24px 16px;gap:24px}}

/* Section label */
.tp-label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mu);margin-bottom:20px;display:block}

/* Hero */
.tp-hero{padding-bottom:40px;border-bottom:1px solid var(--b);margin-bottom:48px}
.tp-hero-top{display:flex;gap:16px;align-items:flex-start;margin-bottom:24px}
.tp-logo{width:72px;height:72px;border-radius:var(--r);border:1px solid var(--b);background:var(--card);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.tp-logo img{width:52px;height:52px;object-fit:contain}
.tp-hero-identity{flex:1;min-width:0}
.tp-name{font-size:clamp(22px,5vw,48px);font-weight:800;line-height:1.1;letter-spacing:-.03em;margin:0 0 10px;word-break:break-word}
.tp-tagline{font-size:clamp(14px,3vw,18px);font-weight:500;color:var(--mu);margin:0 0 16px;line-height:1.4}
.tp-desc{font-size:15px;line-height:1.7;color:#ccc;margin:0 0 20px;width:100%;word-wrap:break-word;overflow-wrap:break-word}
.tp-desc p, .tp-desc *{max-width:100%;word-wrap:break-word;overflow-wrap:break-word;white-space:normal}
.tp-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.tp-pill{padding:5px 14px;border-radius:99px;border:1px solid var(--b2);font-size:12px;font-weight:600;color:var(--mu)}
.tp-cta{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;border-radius:var(--r);background:linear-gradient(135deg,#6C63FF,#8b5cf6);color:#fff;font-size:15px;font-weight:700;text-decoration:none;box-shadow:0 6px 24px rgba(108,99,255,.35);transition:.2s;white-space:nowrap}
.tp-cta:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(108,99,255,.5)}
.tp-cta-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tp-pricing-pill{padding:5px 14px;border-radius:99px;font-size:12px;font-weight:700;letter-spacing:.04em}

/* Features */
.tp-features{margin-bottom:48px}
.tp-feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.tp-feat-grid{grid-template-columns:1fr}}
.tp-feat-card{background:var(--card);border:1px solid var(--b);border-radius:var(--r);padding:20px;transition:.2s}
.tp-feat-card:hover{border-color:var(--b2);box-shadow:0 4px 20px rgba(0,0,0,.4)}
.tp-feat-icon{font-size:22px;margin-bottom:12px}
.tp-feat-title{font-size:14px;font-weight:700;margin:0 0 6px}
.tp-feat-desc{font-size:13px;color:var(--mu);line-height:1.6;margin:0 0 8px}
.tp-feat-eg{font-size:12px;color:var(--fa);font-style:italic}

/* Verdict */
.tp-verdict{margin-bottom:48px}
.tp-verdict-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px;padding:16px;background:var(--card);border:1px solid var(--b);border-radius:var(--r)}
@media(max-width:600px){.tp-verdict-meta{grid-template-columns:1fr}}
.tp-verdict-meta-item span:first-child{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mu);display:block;margin-bottom:4px}
.tp-verdict-meta-item span:last-child{font-size:13px;color:var(--t)}
.tp-pc-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.tp-pc-grid{grid-template-columns:1fr}}
.tp-pro-item,.tp-con-item{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-sm);font-size:13px;line-height:1.5;margin-bottom:8px;word-break:break-word}
.tp-pro-item{background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.15)}
.tp-con-item{background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.15)}
.tp-pro-dot{color:var(--gr);font-weight:700;flex-shrink:0;margin-top:1px}
.tp-con-dot{color:var(--rd);font-weight:700;flex-shrink:0;margin-top:1px}

/* Alternatives */
.tp-alts{margin-bottom:48px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tp-alts-table{width:100%;border-collapse:collapse;font-size:13px}
@media(max-width:600px){
  .tp-alts-table{min-width:420px}
  .tp-alts-table td:nth-child(3),.tp-alts-table th:nth-child(3){display:none}
}
.tp-alts-table th{text-align:left;padding:10px 14px;border-bottom:1px solid var(--b);color:var(--mu);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.tp-alts-table td{padding:12px 14px;border-bottom:1px solid var(--b)}
.tp-alts-table tr:last-child td{border-bottom:0}
.tp-alts-table tr:hover td{background:var(--card)}
.tp-alt-name{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--t);text-decoration:none}
.tp-alt-name:hover{color:var(--ac)}
.tp-alt-logo{width:24px;height:24px;border-radius:6px;object-fit:contain;background:var(--card);border:1px solid var(--b)}
.tp-alt-diff{color:var(--mu);line-height:1.4}
.tp-stars{color:var(--go);font-size:12px}

/* FAQ pure-CSS accordion */
.tp-faq{margin-bottom:48px}
.tp-faq-item{border:1px solid var(--b);border-radius:var(--r);margin-bottom:8px;overflow:hidden}
.tp-faq-toggle{display:none}
.tp-faq-q{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;cursor:pointer;font-size:14px;font-weight:600;color:var(--t);line-height:1.4;transition:.2s;user-select:none;width:100%;gap:12px}
.tp-faq-q:hover{background:var(--card);color:var(--ac)}
.tp-faq-icon{font-size:20px;font-weight:300;flex-shrink:0;transition:transform .25s;color:var(--mu);line-height:1}
.tp-faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;font-size:14px;line-height:1.7;color:var(--mu);padding:0 18px}
.tp-faq-toggle:checked~.tp-faq-q{color:var(--ac);background:var(--card)}
.tp-faq-toggle:checked~.tp-faq-q .tp-faq-icon{transform:rotate(45deg);color:var(--ac)}
.tp-faq-toggle:checked~.tp-faq-a{max-height:400px;padding:0 18px 18px}

/* Reviews */
.tp-reviews{margin-bottom:48px}
.tp-review-item{padding:16px;border:1px solid var(--b);border-radius:var(--r);margin-bottom:12px}
.tp-reviewer{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.tp-avatar{width:36px;height:36px;border-radius:50%;background:var(--gw);color:var(--ac);display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
.tp-review-text{font-size:14px;color:#ccc;line-height:1.6}
.tp-no-reviews{text-align:center;padding:40px 20px;border:1px dashed var(--b);border-radius:var(--r)}
.tp-review-cta{display:inline-block;margin-top:12px;padding:8px 20px;border:1px solid var(--ac);border-radius:8px;color:var(--ac);font-size:13px;font-weight:600;cursor:pointer;background:0;transition:.2s}
.tp-review-cta:hover{background:var(--gw)}

/* Sidebar */
.tp-sidebar{position:sticky;top:80px}
@media(max-width:900px){.tp-sidebar{position:static;top:auto}}
.tp-sidebar-card{background:var(--card);border:1px solid var(--b);border-radius:var(--r);padding:20px;margin-bottom:16px}
.tp-sidebar-title{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mu);margin:0 0 16px}
.tp-info-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--b);font-size:13px}
.tp-info-row:last-child{border-bottom:0}
.tp-info-key{color:var(--mu)}
.tp-info-val{font-weight:600}
.tp-sim-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--b);text-decoration:none}
.tp-sim-item:last-child{border-bottom:0}
.tp-sim-logo{width:32px;height:32px;border-radius:8px;object-fit:contain;background:var(--ele);border:1px solid var(--b);flex-shrink:0}
.tp-sim-name{font-size:13px;font-weight:600;color:var(--t);margin-bottom:2px}
.tp-sim-hook{font-size:11px;color:var(--mu);line-height:1.4}
.tp-sim-item:hover .tp-sim-name{color:var(--ac)}
.tp-nl-input{width:100%;padding:10px 14px;background:var(--ele);border:1px solid var(--b);border-radius:var(--r-sm);color:var(--t);font-size:14px;outline:0;margin-bottom:8px;transition:.2s}
.tp-nl-input:focus{border-color:var(--ac)}
.tp-nl-btn{width:100%;padding:10px;border-radius:var(--r-sm);background:linear-gradient(135deg,#6C63FF,#8b5cf6);color:#fff;font-size:14px;font-weight:600;border:0;cursor:pointer;transition:.2s}
.tp-nl-btn:hover{opacity:.9}

/* Review form */
.tp-rf{background:var(--ele);border:1px solid var(--b);border-radius:var(--r);padding:20px;margin-top:16px;display:none}
.tp-rf.open{display:block}
.tp-rf input,.tp-rf textarea{width:100%;padding:10px 14px;background:var(--card);border:1px solid var(--b);border-radius:var(--r-sm);color:var(--t);font-size:14px;outline:0;margin-bottom:10px;transition:.2s;font-family:inherit}
.tp-rf input:focus,.tp-rf textarea:focus{border-color:var(--ac)}
.tp-rf-title{font-size:15px;font-weight:700;margin:0 0 14px}

/* ── Mobile CTA bar ── */
#tp-mobile-bar{display:none;position:fixed;bottom:0;left:0;right:0;width:100%;z-index:9990;background:#111;border-top:1px solid var(--b);padding:10px 16px;align-items:center;gap:12px;box-shadow:0 -4px 20px rgba(0,0,0,.5)}
@media(max-width:768px){body{padding-bottom:72px}}

/* ── Mobile-specific overrides (≤480px) ── */
@media(max-width:480px){
  .tp-wrap{padding:16px 12px;gap:16px}
  .tp-hero{margin-bottom:32px;padding-bottom:28px}
  .tp-hero-top{gap:12px}
  .tp-logo{width:56px;height:56px}
  .tp-logo img{width:40px;height:40px}
  .tp-cta{padding:11px 20px;font-size:14px}
  .tp-cta-row{gap:8px}
  .tp-meta-inner{gap:8px;padding:0 12px}
  .tp-features{margin-bottom:32px}
  .tp-verdict{margin-bottom:32px}
  .tp-faq{margin-bottom:32px}
  .tp-reviews{margin-bottom:32px}
  .tp-faq-q{padding:14px 14px;font-size:13px}
  .tp-faq-a{padding:0 14px}
  .tp-faq-toggle:checked~.tp-faq-a{padding:0 14px 14px}
}

/* Pricing badges */
.badge-free{background:rgba(34,197,94,.12);color:#22c55e;border:1px solid rgba(34,197,94,.25)}
.badge-freemium{background:rgba(108,99,255,.12);color:#6C63FF;border:1px solid rgba(108,99,255,.25)}
.badge-paid{background:rgba(167,139,250,.12);color:#a78bfa;border:1px solid rgba(167,139,250,.25)}
.badge-trial{background:rgba(245,158,11,.12);color:#f59e0b;border:1px solid rgba(245,158,11,.25)}
.badge-other{background:rgba(100,116,139,.1);color:#64748b;border:1px solid rgba(100,116,139,.2)}
