/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: Jun 08 2026 | 15:37:03 */
/* ===================== PAGE BANNER ===================== */
.page-banner{background:rgb(71,79,85);padding:20px 36px}
.page-banner h1{font-size:20px;font-weight:700;color:#fff;margin-bottom:2px}
.breadcrumb{font-size:12px;color:rgba(255,255,255,.65)}
.breadcrumb a{color:rgba(255,255,255,.65)}
.breadcrumb a:hover{color:#fff}

/* ===================== INTRO ===================== */
.intro{text-align:center;margin-bottom:44px}
.intro-tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:rgb(62,152,255);border:1.5px solid rgb(62,152,255);
  padding:4px 14px;border-radius:20px;margin-bottom:20px;
}
.intro-tag::before{content:'';width:7px;height:7px;border-radius:50%;background:rgb(62,152,255)}
.intro h2{font-size:32px;font-weight:700;color:rgb(34,34,34);margin-bottom:8px;line-height:1.2}
.intro .intro-sub{font-size:24px;color:rgb(100,110,120);margin-top:20px}
.intro .intro-notice{font-size:16px;color:rgb(60,70,80);max-width:880px;margin:0 auto;line-height:1.65;padding:12px}
.intro .intro-notice a{color:rgb(62,152,255);font-weight:700}

/* ===================== PLAN CARDS GRID ===================== */
.plans-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0 20px;
  margin-bottom:34px;
  align-items:stretch;
}

/* ===================== PLAN CARD ===================== */
.plan-card{
  border-radius:12px;overflow:hidden;
  border:1px solid rgba(0,0,0,.09);
  background:#fff;
  transition:box-shadow .2s;
  display:grid;
  grid-template-rows:subgrid;
  grid-row:span 9;
}
.plan-card:hover{box-shadow:0 6px 28px rgba(0,0,0,.10)}
.plan-card.popular{border:2px solid rgb(62,152,255);box-shadow:0 4px 20px rgba(62,152,255,.18)}

/* Cap badge (row above card) */
.plan-cap{
  border-radius:10px;border:1px solid rgba(0,0,0,.09);
  padding:10px 16px;
  margin-bottom:12px;
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;color:rgb(71,79,85);
}
.plan-cap.flex{background:rgb(238,242,248)}
.plan-cap.biz{background:rgb(250,245,238)}
.plan-cap.ent{background:rgb(248,248,248)}
.plan-cap svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;flex-shrink:0}

/* Card header bands */
.plan-card-head{padding:24px 22px 18px;position:relative;display:flex;flex-direction:column}
.plan-card-head.flex{background:rgb(238,242,248)}
.plan-card-head.biz{background:rgb(250,245,238)}
.plan-card-head.ent{background:rgb(248,248,248)}

/* MOST POPULAR badge */
.popular-tag{
  position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  background:rgb(62,152,255);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 16px;border-radius:0 0 8px 8px;white-space:nowrap;
}

/* Plan number */
.plan-num{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgb(130,140,150);margin-bottom:8px}

/* Plan icon */
.plan-icon{
  width:40px;height:40px;border-radius:9px;
  background:#fff;border:1px solid rgba(0,0,0,.1);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:12px;color:rgb(71,79,85);
}
.plan-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}

/* Plan name */
.plan-name{font-size:26px;font-weight:700;color:rgb(34,34,34);margin-bottom:5px}

/* Plan tagline */
.plan-tagline{font-size:13px;font-style:italic;color:rgb(100,110,120);line-height:1.4;min-height:34px;margin-bottom:16px}

/* Billing type badge */
.billing-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:600;color:rgb(71,79,85);
  background:#fff;border:1px solid rgba(0,0,0,.12);
  padding:5px 12px;border-radius:7px;margin-bottom:18px;width:100%;
}
.billing-badge svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;flex-shrink:0}

/* Monthly/Yearly toggle */
.toggle-row{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:13px;font-weight:600;color:rgb(71,79,85);
  background:#fff;border:1px solid rgba(0,0,0,.12);
  padding:6px 8px;border-radius:7px;margin-bottom:12px;
  width:100%;
}
.tog-lbl{color:rgb(140,150,160)}
.tog-lbl.on{color:rgb(34,34,34)}
.tog{position:relative;width:38px;height:22px;flex-shrink:0;cursor:pointer}
.tog input{opacity:0;width:0;height:0;position:absolute}
.tog-track{position:absolute;inset:0;border-radius:22px;background:rgb(62,152,255);transition:background .18s}
.tog-thumb{position:absolute;top:3px;left:20px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .18s}
.tog input:not(:checked)~.tog-track{background:#b0bec5}
.tog input:not(:checked)~.tog-thumb{left:3px}
.save-pill{background:#27ae60;color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;letter-spacing:.04em}

/* Card body — display:contents makes children direct subgrid participants */
.plan-card-body{display:contents}

/* Subgrid children need their own padding since body is display:contents */
.plan-card-body .feat-list{padding:20px 22px 0;margin-bottom:0; margin-left:0}
.plan-card-body .seats-pill{margin:12px 22px 0}
.plan-card-body .care-box{margin:12px 22px 0}
.plan-card-body .row-spacer{margin:0;padding:16px 22px 0;border-bottom:1px solid rgba(0,0,0,.08)}
.plan-card-body .toggle-wrap{margin:0;padding:16px 22px 0;border-top:none}
.plan-card-body .toggle-wrap-empty{margin:0;padding:16px 22px 0;border-top:none;visibility:hidden}
.care-renewal{font-size:12px;color:#1a7a42;opacity:.8;font-style:italic;line-height:1.5;margin-top:8px;margin-bottom:0}
.plan-card-body .price-block{margin:0;padding:10px 22px 0;border-top:none}
.plan-card-body .buy-btn{margin:12px 22px 22px}

/* Features list */
.feat-list{list-style:none;margin-bottom:16px}
.feat-list li{
  display:flex;align-items:flex-start;gap:9px;
  font-size:13.5px;color:rgb(70,80,90);
  padding:6px 0;border-bottom:1px solid rgba(0,0,0,.06);
  line-height:1.45;
}
.feat-list li:last-child{border-bottom:none}
.feat-list .ico{flex-shrink:0;margin-top:1px;color:#27ae60}
.feat-list .ico svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2}

/* Seats pill */
.seats-pill{
  display:flex;align-items:center;gap:6px;
  font-size:12px;color:rgb(100,110,120);
  background:rgb(245,247,250);border:1px solid rgba(0,0,0,.08);
  padding:7px 12px;border-radius:7px;margin-bottom:16px;
}
.seats-pill svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;flex-shrink:0}

/* Care+ box */
.care-box{
  background:rgb(232,248,240);border:1px solid rgba(39,174,96,.22);
  border-radius:8px;padding:11px 14px;margin-bottom:14px;
}
.care-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px}
.care-label{font-size:13px;font-weight:700;color:#1a7a42;display:flex;align-items:center;gap:5px}
.care-label svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2}
.care-badge{background:#27ae60;color:#fff;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:20px}
.care-detail{font-size:12px;color:#1a7a42;opacity:.85}

.renewal-note{font-size:12px;color:rgb(130,140,150);font-style:italic;line-height:1.5;margin-bottom:14px}

/* Price block */
.price-block{margin-bottom:14px}
.price-type-lbl{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgb(140,150,160);margin-bottom:4px}
.price-main{font-size:38px;font-weight:700;color:rgb(34,34,34);line-height:1;margin-bottom:4px}
.price-main .cur{font-size:20px;vertical-align:top;margin-top:5px;display:inline-block}
.price-sub{font-size:12.5px;color:rgb(120,130,140)}
.price-sub .green{color:#27ae60;font-weight:700}

/* BUY button */
.buy-btn{
  display:block;text-align:center;
  background:rgb(62,152,255);color:#fff;
  font-size:14px;font-weight:700;letter-spacing:.04em;
  padding:12px 0;border-radius:7px;
  transition:background .15s,transform .1s;
  border:none;cursor:pointer;
}
.buy-btn:hover{background:rgb(40,120,220);transform:translateY(-1px);color:#FFF}
.buy-btn:active{transform:translateY(0)}

/* ===================== COMPARE TABLE ===================== */
.compare-section{margin-bottom:56px; text-align:center}
.compare-toggle{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;
  margin-bottom:20px;user-select:none;
	padding:10px 25px;
	border-radius: 7px;
}
.compare-toggle:hover{background-color: #DDD;}
.compare-toggle h3{font-size:22px;font-weight:700;color:rgb(34,34,34);margin-bottom:0}
.compare-chevron{width:22px;height:22px;stroke:rgb(130,140,150);fill:none;stroke-width:2;transition:transform .28s;flex-shrink:0}
.compare-toggle.open .compare-chevron{transform:rotate(180deg)}
.compare-wrap{overflow:hidden;max-height:0;transition:max-height .4s ease}
.compare-wrap.open{max-height:3000px}

table.ctable{width:100%;border-collapse:collapse;font-size:14px}
table.ctable thead th{
  padding:11px 16px;font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:rgb(100,110,120);border-bottom:2px solid rgb(200,210,220);text-align:center;
}
table.ctable thead th:first-child{text-align:left;width:44%}
table.ctable thead th.th-flex{background:rgb(238,242,248)}
table.ctable thead th.th-biz{background:rgb(250,245,238)}
table.ctable thead th.th-ent{background:rgb(248,248,248)}

table.ctable tbody tr{border-bottom:1px solid rgba(0,0,0,.06)}
table.ctable tbody tr:last-child{border-bottom:none}
table.ctable tbody tr:nth-child(even) td{background:rgba(0,0,0,.018)}
table.ctable tbody tr:nth-child(even) td.tc-flex{background:rgba(100,140,200,.06)}
table.ctable tbody tr:nth-child(even) td.tc-biz{background:rgba(180,130,60,.06)}
table.ctable tbody td{padding:11px 16px;color:rgb(60,70,80);vertical-align:middle;text-align:center}
table.ctable tbody td:first-child{text-align:left;color:rgb(40,50,60);font-size:13.5px}
table.ctable td.tc-flex{background:rgba(100,140,200,.03)}
table.ctable td.tc-biz{background:rgba(180,130,60,.03)}
table.ctable td.tc-ent{background:rgba(0,0,0,.01)}

.cell-yes{color:#27ae60}
.cell-yes svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:2}
.cell-no{color:rgb(180,190,200)}
.cell-no svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:2}
.cell-addon{
  display:inline-block;font-size:11px;font-weight:700;font-variant-caps:all-small-caps;
  color:rgb(140,90,10);background:rgb(255,240,200);
  border-radius:20px;padding:2px 9px;
}
.cell-text{font-weight:700;font-size:13px;color:rgb(50,60,70)}
.ctable-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.th-sm{display:none}
.compare-legend{display:flex;gap:22px;margin-top:12px;font-size:12.5px;color:rgb(110,120,130)}

/* ===================== PAYMENT & INFO ===================== */
.payment-box{
  background:rgb(247,248,249);border:1px solid rgba(0,0,0,.08);
  border-radius:12px;padding:38px 32px;text-align:center;margin-bottom:48px;
}
.payment-box h3{font-size:22px;font-weight:700;margin-bottom:8px}
.payment-box p{font-size:14.5px;color:rgb(80,90,100);max-width:660px;margin:0 auto 20px;line-height:1.65}
.payment-box img{max-height:78px;width:auto}
.payment-box .note{font-size:12px;color:rgb(140,150,160);font-style:italic;margin-top:10px}

.info-2col{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-bottom:48px}
.info-box h3{font-size:20px;font-weight:700;margin-bottom:10px}
.info-box p{font-size:14.5px;color:rgb(80,90,100);line-height:1.65;margin-bottom:12px}
.btn-outline{
  display:inline-block;border:2px solid rgb(62,152,255);color:rgb(62,152,255);
  padding:9px 22px;border-radius:7px;font-size:13.5px;font-weight:700;
  transition:all .15s;
}
.btn-outline:hover{background:rgb(62,152,255);color:#fff}

/* ===================== FAQ ===================== */
.faq-section{margin-bottom:48px}
.faq-section>h3{font-size:22px;font-weight:700;margin-bottom:6px}
.faq-section>.faq-sub{font-size:14px;color:rgb(110,120,130);margin-bottom:28px}
.faq-group{font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:rgb(110,120,130);padding:12px 0 6px;border-top:2px solid rgb(62,152,255);margin-top:24px}
.faq-item{border-bottom:1px solid rgba(0,0,0,.09)}
.faq-q{display:flex;align-items:center;justify-content:space-between;padding:15px 0;
  font-size:15px;font-weight:700;color:rgb(34,34,34);cursor:pointer;gap:12px;user-select:none}
.faq-q svg{width:18px;height:18px;stroke:rgb(140,150,160);fill:none;stroke-width:2.2;flex-shrink:0;transition:transform .25s}
.faq-item.open .faq-q svg{transform:rotate(180deg)}
.faq-a{font-size:14px;color:rgb(70,80,90);line-height:1.7;max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s}
.faq-item.open .faq-a{max-height:700px;padding-bottom:18px}
.faq-a ol{padding-left:20px}
.faq-a li{margin-bottom:6px}

/* ===================== CTA DOWNLOAD ===================== */
.dl-bar{
  background:rgb(247,248,249);border-radius:12px;
  padding:38px;text-align:center;margin-bottom:52px;
}
.dl-bar p{font-size:15px;color:rgb(80,90,100);margin-bottom:16px;font-weight:600}
.btn-dl{
  display:inline-block;background:rgb(230,120,30);color:#fff;
  padding:13px 32px;border-radius:7px;font-size:15px;font-weight:700;
  transition:background .15s,transform .1s;
}
.btn-dl:hover{background:rgb(200,100,20);transform:translateY(-1px)}

/* ===================== FOOTER ===================== 
footer{background:rgb(71,79,85);color:rgba(255,255,255,.7);padding:34px 36px;font-size:13px;line-height:1.8}
.footer-inner{max-width:1160px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px}
.footer-copy{font-size:12px}
.footer-links{display:flex;gap:18px}
.footer-links a{color:rgba(255,255,255,.65);transition:color .15s}
.footer-links a:hover{color:#fff}

/* ===================== RESPONSIVE ===================== */
@media(max-width:900px){
  .plans-grid{grid-template-columns:1fr}
  .info-2col{grid-template-columns:1fr}
  .footer-inner{flex-direction:column}
  .compare-legend{flex-direction:column;gap:6px}
  .th-lg{display:none}
  .th-sm{display:inline}
  table.ctable thead th:first-child{width:52%}
  .plan-cap.flex{order:1}
  #flex-card{order:2}
  .plan-cap.biz{order:3}
  #biz-card{order:4}
  .plan-cap.ent{order:5}
  #ent-card{order:6}
  .plan-card{display:flex;flex-direction:column;grid-row:auto;margin-bottom:34px}
  .plan-card-body{display:flex;flex-direction:column}
	table.ctable tbody td:first-child{font-size:12px}
	table.ctable tbody td {padding: 10px 5px}
}
details.wp-block-details {
    padding: 8px 15px;
    margin-bottom: 20px;
}
.wp-block-details summary {
    font-weight: 600;
    font-size: 100%;
}
.wp-block-details summary::marker {
    font-size: 90%;
}
.wp-block-details p {
    margin-top: 10px;
    padding-left: 20px;
}