/* ==========================================================================
   ToolkitPlan Connect — shared site stylesheet
   Loaded once, sitewide, on both toolkitplan.com and ydesigners.com.
   Every rule below is scoped under .tkp-page on purpose: this file is
   enqueued globally, and ydesigners.com has other agency pages that must
   NOT be touched by it. Every ToolkitPlan Connect page's content must be
   wrapped in <div class="tkp-page"> ... </div> for these styles to apply.
   ========================================================================== */

.tkp-page{
  --tkp-ink:#14162B;
  --tkp-paper:#F7F8FC;
  --tkp-card:#FFFFFF;
  --tkp-indigo:#4F5FF7;
  --tkp-indigo-dark:#3B47D1;
  --tkp-indigo-pale:#ECEEFF;
  --tkp-amber:#FFB020;
  --tkp-green:#17A673;
  --tkp-red:#E0553F;
  --tkp-slate:#5B5F79;
  --tkp-line:#E3E5F3;
  --tkp-radius:12px;
  --tkp-pad:clamp(20px,5vw,64px);

  font-family:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:16.5px;line-height:1.62;color:var(--tkp-ink);background:var(--tkp-paper);
}
.tkp-page *{box-sizing:border-box}
.tkp-page h1,.tkp-page h2,.tkp-page h3{font-family:"Sora",sans-serif;font-weight:800;line-height:1.08;letter-spacing:-.02em;margin:0}
.tkp-page p{margin:0 0 1em}
.tkp-page a{color:var(--tkp-indigo)}
.tkp-page ul{margin:0}

/* -------------------- layout shell -------------------- */
.tkp-wrap{max-width:1180px;margin:0 auto;padding-left:var(--tkp-pad);padding-right:var(--tkp-pad)}
.tkp-section{padding:clamp(56px,7vw,92px) 0}
.tkp-section-alt{background:var(--tkp-card);border-top:1px solid var(--tkp-line);border-bottom:1px solid var(--tkp-line)}
.tkp-section-head{max-width:62ch;margin-bottom:clamp(30px,4vw,46px)}
.tkp-section-head h2{font-size:clamp(28px,3.6vw,40px)}
.tkp-section-head p{margin-top:14px;color:var(--tkp-slate);font-size:16.5px}

/* -------------------- typography helpers -------------------- */
.tkp-mono{font-family:"JetBrains Mono",ui-monospace,monospace}
.tkp-eyebrow{font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tkp-indigo);font-weight:600}
.tkp-lede{font-size:clamp(17px,2vw,20px);color:var(--tkp-slate);max-width:56ch;line-height:1.6}

/* -------------------- buttons -------------------- */
.tkp-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 24px;border-radius:99px;text-decoration:none;
  font-weight:700;font-size:15px;font-family:inherit;
  border:1.5px solid transparent;cursor:pointer;
  background:var(--tkp-indigo);color:#fff;
  box-shadow:0 6px 0 var(--tkp-indigo-dark);
  transition:transform .12s ease,box-shadow .12s ease;
}
.tkp-btn:hover{transform:translateY(2px);box-shadow:0 4px 0 var(--tkp-indigo-dark);color:#fff}
.tkp-btn-ghost{background:var(--tkp-card);color:var(--tkp-ink);border-color:var(--tkp-line);box-shadow:none}
.tkp-btn-ghost:hover{border-color:var(--tkp-indigo);transform:none;color:var(--tkp-ink)}
.tkp-btn-sm{padding:9px 16px;font-size:13.5px}

/* -------------------- announcement bar + header -------------------- */
.tkp-announce{background:var(--tkp-ink);color:#fff;text-align:center;font-size:14px;padding:10px var(--tkp-pad)}
.tkp-announce a{color:var(--tkp-amber);font-weight:700;text-decoration:none;margin-left:6px}
.tkp-announce a:hover{text-decoration:underline}

.tkp-header{position:sticky;top:0;z-index:50;background:rgba(247,248,252,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--tkp-line)}
.tkp-bar{display:flex;align-items:center;gap:30px;height:72px}
.tkp-mark{font-family:"Sora",sans-serif;font-weight:800;font-size:20px;letter-spacing:-.02em;text-decoration:none;display:flex;align-items:center;gap:9px;color:var(--tkp-ink)}
.tkp-mark .dot{width:11px;height:11px;border-radius:3px;background:var(--tkp-indigo);transform:rotate(45deg)}
.tkp-nav{display:flex;gap:26px;margin-left:auto;font-size:14.5px;font-weight:600}
.tkp-nav a{text-decoration:none;color:var(--tkp-slate)}
.tkp-nav a:hover{color:var(--tkp-ink)}
@media(max-width:880px){.tkp-nav{display:none}}

/* -------------------- hero + signature simulator widget -------------------- */
.tkp-hero{padding:clamp(52px,7vw,92px) 0 clamp(40px,6vw,70px)}
.tkp-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,5vw,60px);align-items:center}
h1.tkp-h1{font-size:clamp(38px,5.6vw,62px)}
h1.tkp-h1 span{color:var(--tkp-indigo)}
.tkp-hero-cta{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.tkp-microcopy{margin-top:16px;font-size:13.5px;color:var(--tkp-slate);display:flex;gap:16px;flex-wrap:wrap}
@media(max-width:900px){.tkp-hero-grid{grid-template-columns:1fr}}

.tkp-sim{background:var(--tkp-card);border:1px solid var(--tkp-line);border-radius:16px;box-shadow:0 20px 50px -20px rgba(20,22,43,.18);overflow:hidden}
.tkp-sim-top{padding:16px 20px;border-bottom:1px solid var(--tkp-line);display:flex;align-items:center;gap:10px;background:#FBFBFE}
.tkp-sim-dots{display:flex;gap:6px}
.tkp-sim-dots i{width:9px;height:9px;border-radius:50%;background:var(--tkp-line);display:block}
.tkp-sim-path{margin-left:8px;font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--tkp-slate)}
.tkp-sim-body{padding:22px}
.tkp-tier-pick{display:flex;gap:8px;margin-bottom:20px}
.tkp-tier-btn{flex:1;padding:10px 6px;border-radius:9px;border:1.5px solid var(--tkp-line);background:var(--tkp-paper);font-family:"JetBrains Mono",monospace;font-size:12.5px;font-weight:600;cursor:pointer;text-align:center;transition:all .15s ease;color:var(--tkp-slate)}
.tkp-tier-btn.is-active{background:var(--tkp-indigo);border-color:var(--tkp-indigo);color:#fff}
.tkp-license-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px dashed var(--tkp-line);margin-bottom:6px}
.tkp-license-row .lbl{font-size:12px;color:var(--tkp-slate);font-family:"JetBrains Mono",monospace;text-transform:uppercase;letter-spacing:.08em}
.tkp-license-row .val{font-family:"JetBrains Mono",monospace;font-size:13.5px;font-weight:600}
.tkp-provider{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--tkp-line)}
.tkp-provider:last-child{border-bottom:0}
.tkp-provider .name{font-weight:600;font-size:14.5px;display:flex;align-items:center;gap:9px}
.tkp-provider .swatch{width:9px;height:9px;border-radius:50%;flex:none}
.tkp-provider .state{font-family:"JetBrains Mono",monospace;font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:99px;white-space:nowrap;transition:all .2s ease}
.tkp-state-on{background:#E7F9F1;color:var(--tkp-green)}
.tkp-state-off{background:#F4F2FA;color:var(--tkp-slate)}
.tkp-sim-foot{padding:14px 20px;background:#FBFBFE;border-top:1px solid var(--tkp-line);font-size:12.5px;color:var(--tkp-slate);display:flex;justify-content:space-between}

/* -------------------- how it works / steps -------------------- */
.tkp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,30px)}
.tkp-step{background:var(--tkp-card);border:1px solid var(--tkp-line);border-radius:var(--tkp-radius);padding:26px}
.tkp-step .n{font-family:"Sora",sans-serif;font-weight:800;font-size:34px;color:var(--tkp-indigo-pale);-webkit-text-stroke:1.5px var(--tkp-indigo)}
.tkp-step h3{font-size:19px;margin:14px 0 8px}
.tkp-step p{color:var(--tkp-slate);font-size:15px;margin:0}
@media(max-width:780px){.tkp-steps{grid-template-columns:1fr}}

/* -------------------- provider strip -------------------- */
.tkp-providers-strip{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.tkp-pchip{display:flex;align-items:center;gap:9px;padding:11px 20px;background:var(--tkp-card);border:1px solid var(--tkp-line);border-radius:99px;font-weight:600;font-size:14.5px}
.tkp-pchip .dot2{width:8px;height:8px;border-radius:50%}

/* -------------------- why BYOK -------------------- */
.tkp-byok{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,50px);align-items:center}
.tkp-byok-list{display:flex;flex-direction:column;gap:20px}
.tkp-byok-item{display:flex;gap:14px}
.tkp-byok-icon{flex:none;width:38px;height:38px;border-radius:10px;background:var(--tkp-indigo-pale);display:flex;align-items:center;justify-content:center;color:var(--tkp-indigo)}
.tkp-byok-item h3{font-size:16.5px;margin-bottom:4px}
.tkp-byok-item p{color:var(--tkp-slate);font-size:15px;margin:0}
.tkp-byok-visual{background:var(--tkp-ink);border-radius:16px;padding:28px;color:#fff}
.tkp-flow{font-family:"JetBrains Mono",monospace;font-size:13px;line-height:2}
.tkp-flow .arrow{color:var(--tkp-amber)}
.tkp-flow .no{color:#8992B5;text-decoration:line-through}
@media(max-width:860px){.tkp-byok{grid-template-columns:1fr}}

/* -------------------- tool shelf -------------------- */
.tkp-shelves{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.5vw,24px)}
.tkp-shelf{background:var(--tkp-card);border:1px solid var(--tkp-line);border-radius:var(--tkp-radius);padding:24px}
.tkp-shelf .icon{width:40px;height:40px;border-radius:10px;background:var(--tkp-indigo-pale);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.tkp-shelf h3{font-size:19px}
.tkp-shelf ul{list-style:none;padding:0;margin:14px 0 0;font-size:14.5px}
.tkp-shelf li{padding:8px 0;border-top:1px solid var(--tkp-line);color:var(--tkp-slate)}
@media(max-width:780px){.tkp-shelves{grid-template-columns:1fr}}

/* -------------------- pricing: toggle + cards + comparison table -------------------- */
.tkp-billing-toggle{display:inline-flex;background:var(--tkp-card);border:1px solid var(--tkp-line);border-radius:99px;padding:4px;margin-bottom:32px}
.tkp-billing-toggle button{border:0;background:transparent;padding:9px 20px;border-radius:99px;font-weight:700;font-size:13.5px;cursor:pointer;color:var(--tkp-slate);font-family:"JetBrains Mono",monospace}
.tkp-billing-toggle button.is-active{background:var(--tkp-ink);color:#fff}

.tkp-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tkp-plan{background:var(--tkp-card);border:1.5px solid var(--tkp-line);border-radius:16px;padding:26px 24px;display:flex;flex-direction:column;position:relative}
.tkp-plan.is-pick{border-color:var(--tkp-indigo);box-shadow:0 16px 40px -18px rgba(79,95,247,.35)}
.tkp-plan .tag{position:absolute;top:-13px;left:24px;font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;background:var(--tkp-indigo);color:#fff;padding:4px 12px;border-radius:99px}
.tkp-plan .name{font-family:"Sora",sans-serif;font-weight:700;font-size:18px}
.tkp-plan .price{font-family:"Sora",sans-serif;font-weight:800;font-size:38px;margin:14px 0 2px;letter-spacing:-.02em}
.tkp-plan .price span{font-size:14px;font-weight:500;color:var(--tkp-slate);font-family:"Plus Jakarta Sans",sans-serif}
.tkp-plan .sites{font-family:"JetBrains Mono",monospace;font-size:12.5px;color:var(--tkp-indigo);font-weight:600;margin-top:4px}
.tkp-plan ul{list-style:none;padding:0;margin:18px 0 22px;font-size:14.5px;display:flex;flex-direction:column;gap:9px}
.tkp-plan li{display:flex;gap:9px;align-items:flex-start;color:var(--tkp-ink)}
.tkp-plan li.off{color:#B4B8CC}
.tkp-plan .tkp-btn{margin-top:auto;width:100%;justify-content:center}
.tkp-check{flex:none;width:17px;height:17px;margin-top:2px}
.tkp-trial-strip{margin-top:22px;background:var(--tkp-indigo-pale);border-radius:var(--tkp-radius);padding:20px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.tkp-trial-strip p{margin:0;font-size:15px}
.tkp-trial-strip strong{color:var(--tkp-indigo-dark)}
@media(max-width:960px){.tkp-plans{grid-template-columns:1fr};.tkp-trial-strip{flex-direction:column;align-items:flex-start}}

.tkp-pt{width:100%;border-collapse:collapse;margin:28px 0;font-size:15px}
.tkp-pt th,.tkp-pt td{padding:14px 16px;border-bottom:1px solid var(--tkp-line);text-align:left;vertical-align:top}
.tkp-pt th{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--tkp-slate);background:var(--tkp-paper)}
.tkp-pt td:not(:first-child),.tkp-pt th:not(:first-child){text-align:center}
.tkp-pt .yes{color:var(--tkp-green);font-weight:700}
.tkp-pt .no{color:#B4B8CC}
.tkp-note{background:var(--tkp-indigo-pale);border-radius:10px;padding:18px 22px;font-size:15px;margin:24px 0}

/* -------------------- trust strip -------------------- */
.tkp-trust{background:var(--tkp-ink);color:#C7CAE0}
.tkp-trust .tkp-wrap{padding-top:36px;padding-bottom:36px}
.tkp-trust h3{color:#fff;font-size:15px;margin-bottom:10px}
.tkp-trust p{font-size:13.5px;line-height:1.7;margin:0}
.tkp-trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media(max-width:820px){.tkp-trust-grid{grid-template-columns:1fr}}

/* -------------------- FAQ (native <details>, zero JS) -------------------- */
.tkp-faq{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 40px}
.tkp-faq details{border-bottom:1px solid var(--tkp-line);padding:16px 0}
.tkp-faq summary{cursor:pointer;font-weight:700;font-size:15.5px;list-style:none;display:flex;gap:12px;align-items:flex-start;font-family:"Sora",sans-serif}
.tkp-faq summary::-webkit-details-marker{display:none}
.tkp-faq summary:before{content:"+";color:var(--tkp-indigo);font-weight:700}
.tkp-faq details[open] summary:before{content:"\2013"}
.tkp-faq details p{margin-top:10px;padding-left:22px;color:var(--tkp-slate);font-size:14.5px}
@media(max-width:820px){.tkp-faq{grid-template-columns:1fr}}

/* -------------------- final CTA -------------------- */
.tkp-final{text-align:center}
.tkp-final h2{font-size:clamp(30px,4.4vw,46px)}
.tkp-final p{color:var(--tkp-slate);margin-top:14px;font-size:17px}
.tkp-final .tkp-hero-cta{justify-content:center}

/* -------------------- footer -------------------- */
.tkp-footer{background:var(--tkp-ink);color:#A8ACC6;font-size:14px}
.tkp-foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;padding:56px 0 40px}
.tkp-footer h4{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin:0 0 14px}
.tkp-footer a{display:block;color:#A8ACC6;text-decoration:none;padding:5px 0}
.tkp-footer a:hover{color:var(--tkp-amber)}
.tkp-footer .tkp-mark{color:#fff}
.tkp-footer .tkp-mark .dot{background:var(--tkp-amber)}
.tkp-legal-bar{border-top:1px solid #292C4A;padding:20px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px}

@media(prefers-reduced-motion:reduce){.tkp-page *{transition:none!important}}