/* The services picker on walterssentinel.com. Uses the site's own tokens. */
.services-suite{padding:88px 0; border-top:1px solid var(--border);}
.suite-term{display:flex; justify-content:center; gap:0; margin:0 auto 34px; width:max-content; max-width:100%; border:1px solid var(--border); border-radius:999px; padding:4px; background:var(--surface);}
.suite-term button{border:0; background:none; color:var(--text-dim); font:inherit; font-weight:650; font-size:.9rem; padding:9px 18px; border-radius:999px; cursor:pointer;}
.suite-term button.is-active{background:var(--accent); color:#04231b;}

.suite-bundles{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:18px; margin-bottom:46px;}
.suite-bundle{position:relative; display:flex; flex-direction:column; gap:12px; padding:26px; border-radius:var(--radius-lg, 20px); background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-card, none);}
.suite-bundle.featured{border-color:color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), var(--shadow-lift, none);}
.suite-bundle .suite-tag{position:absolute; top:-11px; left:24px; background:var(--accent); color:#04231b; font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:4px 11px; border-radius:999px;}
.suite-bundle h3{margin:0; font-size:1.2rem; color:var(--text);}
.suite-price{font-size:2.3rem; font-weight:800; letter-spacing:-.03em; color:var(--text); line-height:1.1;}
.suite-price span{font-size:.9rem; font-weight:600; color:var(--text-faint); letter-spacing:0;}
.suite-was{font-size:.85rem; color:var(--text-faint);}
.suite-was s{margin-right:6px;}
.suite-chips{display:flex; flex-wrap:wrap; gap:6px; flex:1; align-content:flex-start;}
.suite-chip{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:var(--bg-alt); border:1px solid var(--border); font-size:.78rem; font-weight:600; color:var(--text-dim);}
.suite-chip i{width:8px; height:8px; border-radius:50%;}

.suite-subhead{text-align:center; margin:0 0 20px; font-size:1.25rem;}
.suite-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px;}
.suite-card{position:relative; display:flex; flex-direction:column; gap:9px; padding:20px; border-radius:var(--radius, 14px); background:var(--surface); border:1px solid var(--border); transition:border-color .15s, transform .15s;}
.suite-card:hover{transform:translateY(-2px); border-color:color-mix(in srgb, var(--app) 50%, var(--border));}
.suite-card.is-selected{border-color:var(--app); box-shadow:0 0 0 3px color-mix(in srgb, var(--app) 22%, transparent);}
.suite-tiers{display:flex; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--bg-alt);}
.suite-tiers button{flex:1; display:flex; flex-direction:column; align-items:center; gap:1px; border:0; background:none; color:var(--text-dim); font:inherit; font-size:.8rem; font-weight:650; padding:7px 4px; cursor:pointer;}
.suite-tiers button small{font-size:.7rem; font-weight:600; color:var(--text-faint);}
.suite-tiers button.is-active{background:color-mix(in srgb, var(--app) 20%, transparent); color:var(--text);}
.suite-enterprise{border-style:dashed; grid-column:1 / -1; display:grid; grid-template-columns:minmax(240px, 1fr) 2fr; gap:18px 36px; align-items:start;}
.suite-enterprise .ent-left{display:flex; flex-direction:column; gap:10px;}
.suite-enterprise .ent-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:6px;}
.suite-enterprise .btn{width:auto;}
.suite-enterprise .suite-extras{columns:2; column-gap:28px; margin:0;}
.suite-enterprise .suite-extras li{break-inside:avoid;}
@media (max-width:760px){
  .suite-enterprise{grid-template-columns:1fr;}
  .suite-enterprise .suite-extras{columns:1;}
}
.suite-card-head{display:flex; align-items:center; gap:12px;}
.suite-icon{width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; flex:none;}
.suite-card h4{margin:0; font-size:1rem; color:var(--text);}
.suite-like{font-size:.76rem; color:var(--text-faint);}
.suite-card p{margin:0; font-size:.88rem; color:var(--text-dim);}
.suite-card ul{margin:0; padding-left:18px; font-size:.82rem; color:var(--text-faint);}
.suite-card-foot{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding-top:8px; font-size:.86rem;}
.suite-card-foot strong{color:var(--text);}
.suite-card-foot a{color:var(--accent); font-weight:650; text-decoration:none;}

.suite-bar{position:sticky; bottom:16px; z-index:20; margin-top:26px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:16px 20px; border-radius:18px; background:var(--glass-bg, var(--surface)); backdrop-filter:var(--glass-blur, none); -webkit-backdrop-filter:var(--glass-blur, none); border:1px solid var(--glass-edge, var(--border)); box-shadow:var(--glass-shadow, 0 20px 40px rgba(0,0,0,.4));}
.suite-bar strong{font-size:1.25rem; color:var(--text);}
.suite-save{display:inline-block; margin-left:8px; padding:2px 9px; border-radius:999px; background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--accent); font-size:.76rem; font-weight:700;}
.suite-actions{display:flex; gap:10px; flex-wrap:wrap;}
.suite-error{text-align:center; color:var(--text-dim);}

@media (max-width:900px){
  .suite-bundles{grid-template-columns:1fr;}
}

/* What each bundle adds over the one below it. */
.suite-extras{ list-style:none; padding:0; margin:14px 0 0; display:grid; gap:8px; }
.suite-extras li{
  position:relative; padding-left:22px; font-size:.86rem; line-height:1.55; color:var(--text-dim);
}
.suite-extras li::before{
  content:""; position:absolute; left:0; top:.45em; width:12px; height:7px;
  border-left:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}

/* The Enterprise estimate. */
.ent-calc{
  margin-top:20px; padding:26px; border-radius:var(--radius, 16px);
  background:var(--surface); border:1px solid var(--border);
}
.ent-calc h3{ margin:0 0 6px; font-size:1.15rem; }
.ent-lead{ margin:0 0 18px; color:var(--text-dim); font-size:.9rem; line-height:1.6; max-width:70ch; }
.ent-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:14px; }
.ent-field{ display:grid; gap:5px; font-size:.86rem; font-weight:600; }
.ent-field input{
  padding:10px 12px; border-radius:10px; border:1px solid var(--border);
  background:var(--bg-alt); color:var(--text); font:inherit; font-weight:600;
}
.ent-field input:focus{ outline:none; border-color:var(--accent); }
.ent-field small{ font-weight:500; color:var(--text-faint); font-size:.76rem; }
.ent-options{ display:grid; gap:10px; margin:18px 0 0; }
.ent-option{ display:flex; gap:10px; align-items:flex-start; font-size:.88rem; color:var(--text-dim); }
.ent-option input{ margin-top:3px; accent-color:var(--accent); }
.ent-option small{ color:var(--text-faint); }
.ent-result{ margin-top:20px; padding-top:18px; border-top:1px solid var(--border); }
.ent-total{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.ent-total strong{ font-size:2rem; letter-spacing:-.02em; }
.ent-total span{ color:var(--text-dim); font-size:.9rem; }
.ent-lines{ list-style:none; padding:0; margin:0 0 14px; display:grid; gap:9px; }
.ent-lines li{ display:flex; justify-content:space-between; gap:16px; font-size:.88rem; color:var(--text-dim); }
.ent-lines b{ color:var(--text); white-space:nowrap; }
.ent-lines small{ display:block; color:var(--text-faint); font-size:.76rem; margin-top:2px; }
.ent-note{ color:var(--text-faint); font-size:.82rem; line-height:1.6; margin:0 0 14px; }
@media (max-width:680px){
  .ent-calc{ padding:20px 16px; }
  .ent-grid{ grid-template-columns:1fr; }
}
/* A service that comes only with a bundle, and the note under Monitoring. */
.suite-card .suite-note{font-size:.8rem; color:var(--text-faint);}
.suite-included .suite-card-foot strong{color:var(--app);}

/* Every plan says it can be tried free; Custom is set apart as the pick-your-own. */
.suite-trial{margin:auto 0 0; font-size:.8rem; color:var(--text-faint); text-align:center;}
/* Somewhere we cannot take money from yet. Stated plainly at the top of the
   plans rather than discovered at the card. */
.suite-closed{grid-column:1 / -1; padding:14px 16px; border-radius:13px; font-size:.9rem; line-height:1.55;
  border:1px solid color-mix(in srgb, var(--warn, #f2b84b) 45%, var(--border));
  background:color-mix(in srgb, var(--warn, #f2b84b) 9%, transparent);}
.suite-closed strong{display:block; margin-bottom:3px;}
/* Shown only once the seller is VAT-registered; empty markup until then. */
.suite-vat{grid-column:1 / -1; margin:2px 0 0; font-size:.82rem; color:var(--text-faint);}
.suite-custom{border-style:dashed;}
.suite-custom .suite-was{text-decoration:none;}
.suite-tiers button{min-width:0;}
.suite-tiers button small{white-space:nowrap;}

/* A bundle or Enterprise that would serve them better than what they picked. */
.suite-nudge{margin-top:8px; padding:8px 11px; border-radius:9px; font-size:.84rem; line-height:1.5;
  background:color-mix(in srgb, var(--accent) 12%, transparent); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); color:var(--text);}
.suite-nudge a{color:var(--accent); font-weight:650; text-decoration:none; white-space:nowrap;}
.suite-nudge a:hover{text-decoration:underline;}