/* 2026-10: plan cards in the pricing block and the "what GarleOS already does" grid. */

/* Pricing ------------------------------------------------------------------------------ */
.pricing.pricing-v2{display:block;padding-top:96px;padding-bottom:96px}
.pricing-head{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:end;margin-bottom:48px}
.pricing-v2 h2{font-size:46px;letter-spacing:-1.8px;margin:14px 0 0}
.pricing-v2 .pricing-head p{font-size:15px;line-height:1.7;color:#adbed3;max-width:none;margin:0 0 20px}
.pricing-v2 .included{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;font-size:13px;margin:0}
.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.plan-card{position:relative;display:flex;flex-direction:column;background:#f8fafe;color:#162232;border:1px solid #dce6f3;border-radius:20px;padding:34px 34px 30px;box-shadow:0 28px 50px -30px #000a}
.plan-badge{position:absolute;top:-14px;right:28px;background:linear-gradient(110deg,#2559d9,#299bcf);color:#fff;font-size:12px;font-weight:600;letter-spacing:.02em;padding:6px 14px;border-radius:999px;box-shadow:0 8px 20px -8px #2559d9}
.plan-label{font-size:12px;font-weight:600;letter-spacing:.14em;color:#4a5f7c}
.plan-card.is-selected .plan-label{color:#2559d9}
.plan-for{font-size:14px;line-height:1.6;color:#5b6b80;margin:10px 0 18px;min-height:45px}
.plan-price{font:500 64px/1 Manrope,sans-serif;letter-spacing:-3px;color:#101a28}
.plan-price span{font:400 17px 'DM Sans',sans-serif;letter-spacing:-.3px;margin-left:6px;color:#7d8da2}
.plan-sub{font-size:13px;color:#5f7089;margin:12px 0 22px;padding-bottom:22px;border-bottom:1px solid #dce4ee}
.plan-features{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-direction:column;gap:12px;flex:1}
.plan-features li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:#263b58}
.plan-features svg{width:17px;height:17px;flex:none;margin-top:1px;color:#2559d9}
.plan-button{display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:12px;padding:15px 18px;font-size:15px;font-weight:600;text-decoration:none;color:#fff;background:linear-gradient(110deg,#2559d9,#299bcf);box-shadow:0 14px 30px -14px #2559d9;transition:transform .2s,box-shadow .2s}
.plan-button:hover{transform:translateY(-1px);box-shadow:0 18px 34px -14px #2559d9}
.plan-button svg{width:18px;height:18px}
.plan-button-outline{background:#fff;color:#2559d9;border:1.5px solid #b9cdf3;box-shadow:none}
.plan-button-outline:hover{border-color:#2559d9;box-shadow:0 10px 24px -16px #2559d9}
.plan-footnote{margin:28px auto 0;max-width:720px;text-align:center;font-size:13px;line-height:1.6;color:#adbed3}

/* Capabilities ------------------------------------------------------------------------- */
.capabilities{padding:104px 8%;max-width:1440px;margin:auto;background:radial-gradient(900px 380px at 15% 0%,#eef3fd 0%,#fff0 70%)}
.cap-head{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:end;margin-bottom:48px}
.capabilities h2{font-size:46px;line-height:1.15;letter-spacing:-1.8px;font-weight:500;margin:14px 0 0;color:var(--ink)}
.cap-head p{font-size:16px;line-height:1.7;color:var(--slate);margin:0}
.capability-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.capability-grid article{border:1px solid #e3e9f2;border-radius:20px;padding:28px;background:#fff;box-shadow:0 20px 40px -32px #1b2f5566;transition:transform .25s,box-shadow .25s,border-color .25s,opacity .7s,translate .7s cubic-bezier(.2,.8,.2,1)}
.capability-grid article:hover{transform:translateY(-4px);border-color:#c8d7f3;box-shadow:0 28px 50px -30px #2559d966}
.cap-icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(140deg,#e9f0fe,#dfeefa);color:#2559d9}
.cap-icon svg{width:24px;height:24px}
.capability-grid h3{font-size:19px;font-weight:600;letter-spacing:-.3px;margin:20px 0 8px;color:var(--ink)}
.capability-grid p{font-size:15px;line-height:1.65;color:var(--slate);margin:0}

/* Responsive ------------------------------------------------------------------------------- */
@media (max-width:1000px){
  .pricing-head,.cap-head{grid-template-columns:1fr;gap:20px}
  .capability-grid{grid-template-columns:repeat(2,1fr)}
  .capabilities{padding:72px 24px}
}
@media (max-width:760px){
  .plan-grid{grid-template-columns:1fr}
  .plan-card-featured{order:-1}
  .pricing.pricing-v2{padding:64px 20px}
  .pricing-v2 h2,.capabilities h2{font-size:34px}
  .pricing-v2 .included{grid-template-columns:1fr}
  .plan-price{font-size:54px}
  .plan-for{min-height:0}
}
@media (max-width:560px){.capability-grid{grid-template-columns:1fr}.capability-grid article{padding:22px}}
@media (prefers-reduced-motion:reduce){.capability-grid article,.plan-button{transition:none}}

/* Logos, selection and entrance animations ------------------------------------------------ */
.plan-top{display:flex;align-items:center;gap:12px}
.plan-logo{width:44px;height:28px;object-fit:contain;filter:drop-shadow(0 4px 10px #2559d933)}
.plan-card{cursor:pointer;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .3s,background .3s,opacity .7s,translate .7s cubic-bezier(.2,.8,.2,1);outline:none}
.plan-card:hover{transform:translateY(-6px)}
.plan-card:focus-visible{box-shadow:0 0 0 3px #8ab5df}
.plan-card.is-selected{transform:translateY(-10px) scale(1.015);border:2px solid #4b7cf0;background:linear-gradient(180deg,#fff 0%,#f1f6ff 100%);box-shadow:0 40px 80px -30px #2559d999,0 0 0 6px #2559d91f}
.plan-card:not(.is-selected){background:#eef2f8}
.plan-card.is-selected .plan-button-outline{background:linear-gradient(110deg,#2559d9,#299bcf);color:#fff;border-color:transparent;box-shadow:0 14px 30px -14px #2559d9}
.plan-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,#fff0 30%,#ffffffb3 50%,#fff0 70%);background-size:250% 100%;background-position:150% 0;opacity:0}
.plan-card.just-selected::after{animation:plan-shine 1.1s ease-out}
@keyframes plan-shine{0%{opacity:1;background-position:150% 0}100%{opacity:0;background-position:-60% 0}}
.plan-card.just-selected .plan-logo{animation:plan-pop .6s cubic-bezier(.2,.9,.3,1.4)}
@keyframes plan-pop{0%{transform:scale(.7) rotate(-8deg)}100%{transform:none}}
.plan-features li{transition:transform .3s}
.plan-card.just-selected .plan-features li{animation:plan-item .5s both}
.plan-card.just-selected .plan-features li:nth-child(2){animation-delay:.05s}
.plan-card.just-selected .plan-features li:nth-child(3){animation-delay:.1s}
.plan-card.just-selected .plan-features li:nth-child(4){animation-delay:.15s}
.plan-card.just-selected .plan-features li:nth-child(5){animation-delay:.2s}
@keyframes plan-item{0%{opacity:0;transform:translateX(-8px)}100%{opacity:1;transform:none}}
.reveal-up:not(.is-visible){opacity:0!important;translate:0 28px}
@media (prefers-reduced-motion:reduce){
  .plan-card,.plan-card.is-selected,.reveal-up{transition:none;transform:none;animation:none;opacity:1;translate:none}
  .plan-card::after,.plan-card .plan-logo,.plan-features li{animation:none!important}
}
.pricing-logo{display:block;width:210px;height:auto;margin:0 0 22px -10px;filter:drop-shadow(0 10px 28px #2559d955)}
@media (max-width:760px){.pricing-logo{width:170px}}

.plan-number-note{max-width:880px;margin:22px auto 0;padding:16px 20px;border-radius:14px;border:1px solid rgba(240,180,41,.4);background:rgba(240,180,41,.07);text-align:left}
.plan-number-note strong{display:block;margin-bottom:4px}
.plan-number-note p{margin:0;opacity:.85;line-height:1.55}