/* Learn more about AppyPayroll (/appypayroll/learn-more, views/landing/appypayroll-learn-more.php).
   Uses the landing layout's tokens and the public field and button classes from public-site.css
   (.ps-field, .ps-label, .ps-input, .ps-select, .ps-textarea, .ps-help, .ps-error, .ps-alert,
   .ps-btn). Side-by-side fields share their rows (subgrid), so the boxes stay level whatever
   is above them (a wrapped label) or below them (help or an error). */
/* Wide: the intro and the details on the left, the form on the right. Narrow: intro, form, details. */
.pl-page{max-width:var(--ps-wrap,1180px);margin:0 auto;padding:64px 32px 84px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-areas:"intro card" "details card";grid-template-rows:auto 1fr;gap:24px 48px;align-items:start}
.pl-intro{grid-area:intro;display:grid;gap:20px;min-width:0;justify-items:start;padding-top:6px}
.pl-details{grid-area:details;display:grid;gap:20px;min-width:0;justify-items:start}
.pl-intro .ps-h1{margin:0}
.pl-lead{margin:0;max-width:560px;color:var(--ps-muted);font-size:1.06rem;line-height:1.65}
.pl-price{display:grid;gap:4px;width:100%;max-width:560px;padding:18px 20px;border:1px solid rgb(var(--brand-rgb, 11 122 165) / .18);border-left:4px solid var(--ps-brand);border-radius:12px;background:var(--ps-soft)}
.pl-price p{margin:0;line-height:1.45}
.pl-price-amount{color:var(--ps-ink-strong);font-family:var(--ps-font-display);font-size:2.1rem;font-weight:800;line-height:1.1}
.pl-price-amount span{margin-left:2px;color:var(--ps-muted);font-family:var(--ps-font);font-size:1rem;font-weight:700}
.pl-price-plus{color:var(--ps-ink);font-weight:750}
.pl-price-note{color:var(--ps-muted);font-size:.9rem}
.pl-points{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.pl-points li{display:flex;gap:10px;color:var(--ps-ink);line-height:1.55}
.pl-points li::before{content:"\2713";flex:none;color:var(--ps-brand);font-weight:900}
.pl-next{display:grid;gap:12px;width:100%;max-width:560px;padding-top:4px}
.pl-next h2{margin:0;color:var(--ps-ink-strong);font-family:var(--ps-font-display);font-size:1.2rem;line-height:1.25}
.pl-steps{display:grid;gap:12px;margin:0;padding:0;list-style:none;counter-reset:pl-step}
.pl-steps li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start;color:var(--ps-muted);line-height:1.55;counter-increment:pl-step}
.pl-steps li::before{content:counter(pl-step);display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:999px;background:var(--ps-brand-strong);color:#fff;font-size:.86rem;font-weight:800}
.pl-steps li > span{padding-top:3px}
.pl-steps strong{color:var(--ps-ink-strong)}
.pl-more{margin:0}
.pl-more a{color:var(--ps-brand-strong);font-weight:750;text-decoration:underline;text-underline-offset:3px}
.pl-more a:hover{color:var(--ps-brand)}

.pl-card{grid-area:card;min-width:0;padding:32px;border:1px solid rgba(15,23,42,.08);border-radius:20px;background:#fff;box-shadow:0 18px 48px rgba(7,43,62,.10);scroll-margin-top:92px}
.pl-card h2{margin:0;color:var(--ps-ink-strong);font-family:var(--ps-font-display);font-size:1.5rem;line-height:1.2}
.pl-card-sub{margin:6px 0 22px;color:var(--ps-muted);line-height:1.55}
.pl-card .ps-alert,.pl-card .ps-note{margin:0 0 18px}

.pl-form{display:grid;gap:18px;min-width:0}
.pl-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;align-items:start}
.pl-form .ps-field{gap:0}
.pl-form .ps-label{line-height:1.3}
.pl-form .ps-input,.pl-form .ps-select{height:46px}
.pl-form .ps-select{padding-top:0;padding-bottom:0}
.pl-form .ps-textarea{min-height:108px;resize:vertical;font-family:inherit;line-height:1.5}
.pl-form .ps-label + *{margin-top:6px}
.pl-under{display:grid;gap:4px;margin-top:6px}
.pl-under:empty{margin-top:0}
@supports (grid-template-rows:subgrid){
    .pl-row{row-gap:0}
    .pl-row > .ps-field{grid-row:span 3;display:grid;grid-template-rows:subgrid;align-content:start}
    .pl-row > .ps-field > .ps-label{align-self:end}
}
.pl-honeypot{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.pl-captcha{display:flex;justify-content:flex-start}
.pl-submit{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding-top:4px}
.pl-submit .ps-help{flex:1 1 240px;margin:0}
.pl-submit .ps-btn[aria-busy="true"]{opacity:.75;cursor:progress;transform:none}

.pl-thanks{display:grid;gap:12px;justify-items:start;padding:6px 0 4px}
.pl-thanks:focus{outline:none}
.pl-thanks-icon{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:999px;background:rgba(16,185,129,.12);color:#047857}
.pl-thanks h2{font-size:1.7rem}
.pl-thanks p{margin:0;line-height:1.6}
.pl-thanks-lead{color:var(--ps-ink);font-size:1.08rem;font-weight:650}
.pl-thanks-note{color:var(--ps-muted);font-size:.92rem}
.pl-thanks-actions{padding-top:6px}

@media (max-width:960px){
    .pl-page{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "card" "details";grid-template-rows:auto;gap:36px;padding:44px 24px 68px}
    .pl-price,.pl-next,.pl-lead{max-width:none}
}
@media (max-width:640px){
    .pl-page{gap:28px;padding:30px 16px 56px}
    .pl-card{padding:22px 16px;border-radius:16px}
    .pl-card h2{font-size:1.3rem}
    .pl-row{grid-template-columns:minmax(0,1fr);row-gap:18px}
    .pl-row > .ps-field{grid-row:auto;grid-template-rows:none}
    .pl-submit .ps-btn,.pl-thanks-actions,.pl-thanks-actions .ps-btn{width:100%}
}