/* /pricing/ and the Ask AgiCAD box (the box is also included on other pages).
   Colours come from c.css tokens only, so dark and light themes both work. */

.pr-hero{padding:var(--space-8) 0 var(--space-7);display:flex;flex-direction:column;gap:var(--space-4)}
.pr-hero h1{margin:0;max-width:20ch;font-size:var(--text-h1);line-height:1.05;letter-spacing:-.035em;font-weight:600;text-wrap:balance}
.pr-hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-5);margin-top:var(--space-2)}
.pr-jump{display:flex;flex-wrap:wrap;gap:0 var(--space-5);font-size:var(--text-base)}
.pr-jump a{display:inline-flex;align-items:center;min-height:44px;color:var(--fg2);text-underline-offset:3px}
.pr-jump a:hover{color:var(--acc)}

/* One row per kind of offer: what it is on the left, what it costs on the right. */
.pr-group{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:var(--space-5) var(--space-7);padding:var(--space-7) 0;border-top:1px solid var(--line);scroll-margin-top:var(--space-4)}
.pr-intro h2{margin:0 0 var(--space-3);font-size:var(--text-h3);line-height:1.15;letter-spacing:-.02em;font-weight:600;scroll-margin-top:var(--space-6)}
.pr-intro p{margin:0;font-size:var(--text-base);line-height:1.55;color:var(--fg3);max-width:60ch}

.pr-grid{display:grid;gap:var(--space-4)}
.pr-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pr-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pr-item{display:flex;flex-direction:column;gap:var(--space-2);min-width:0;padding:var(--space-5)}
.pr-item h3{margin:0;font-size:var(--text-base);line-height:1.3;font-weight:600;color:var(--fg)}
.pr-item p{margin:0}
.pr-item .pr-price{font-size:var(--fs-2xl);line-height:1.1;letter-spacing:-.025em;font-weight:600;color:var(--acc);font-variant-numeric:tabular-nums}
.pr-item .pr-meta{font-size:var(--text-sm);color:var(--fg3);font-variant-numeric:tabular-nums}
.pr-item .pr-detail{margin-top:var(--space-1);font-size:15px;line-height:1.5;color:var(--fg2)}
.pr-item .btn{align-self:flex-start;margin-top:auto;padding:10px 18px;font-size:var(--text-sm)}
.pr-item .pr-meta,.pr-item .pr-detail{margin-bottom:var(--space-3)}

.pr-questions{display:flex;flex-direction:column;gap:var(--space-5);padding:var(--space-7) 0 var(--space-8);border-top:1px solid var(--line)}
.pr-foot{margin:0;font-size:var(--text-base);line-height:1.5;color:var(--fg2)}
.pr-foot a{color:var(--acc)}

@media (max-width:980px){
  .pr-group{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .pr-hero{padding:var(--space-6) 0 var(--space-6)}
  .pr-hero .lede{font-size:var(--text-base)}
  .pr-group{padding:var(--space-6) 0}
  .pr-grid--2,.pr-grid--3{grid-template-columns:minmax(0,1fr)}
}

/* Ask AgiCAD */
.ask{display:flex;flex-direction:column;gap:var(--space-3);max-width:760px;padding:var(--space-5)}
.ask p{margin:0}
.ask .ask-label{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);font-size:var(--text-lg);font-weight:600;color:var(--fg)}
.ask .ask-label i{color:var(--acc)}
.ask .ask-badge{font-family:var(--sans);font-size:var(--text-sm);font-weight:400;color:var(--fg2);border:1px solid var(--line2);padding:2px var(--space-2);border-radius:var(--r-pill)}
.ask .ask-note{font-size:var(--text-sm);line-height:1.55;color:var(--fg3)}
.ask .ask-note a{color:var(--acc);text-decoration:underline;text-underline-offset:2px}
.ask .ask-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-3)}
.ask .ask-q{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:6px;font-size:var(--text-sm);color:var(--fg2)}
.ask .ask-q input{width:100%;min-height:44px;padding:10px 14px;font:inherit;font-size:var(--text-base);color:var(--fg);background:var(--bg);border:1px solid var(--line3);border-radius:var(--r-md)}
.ask .ask-q input::placeholder{color:var(--fg6)}
.ask .ask-q input:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.ask .ask-q input[aria-invalid="true"]{border-color:var(--danger)}
.ask .ask-q input:disabled{opacity:.6;cursor:not-allowed}
.ask .ask-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ask .ask-form .btn{min-width:88px;padding:10px 18px;font-size:var(--text-sm)}

.ask .ask-answer{display:flex;align-items:flex-start;gap:var(--space-2);padding:var(--space-3) var(--space-4);font-size:var(--text-base);line-height:1.5;color:var(--fg);background:var(--bg);border:1px solid var(--line2);border-radius:var(--r-md)}
.ask .ask-answer[hidden]{display:none}
.ask .ask-answer p{white-space:pre-line;min-width:0;overflow-wrap:anywhere}
.ask .ask-answer i{flex:0 0 auto;line-height:1.5}
.ask .ask-answer i[hidden]{display:none}
.ask .ask-answer[data-state="loading"]{color:var(--fg3)}
.ask .ask-answer[data-state="loading"] i{animation:ask-spin 1s linear infinite}
.ask .ask-answer[data-state="invalid"],.ask .ask-answer[data-state="error"]{border-color:var(--danger)}
.ask .ask-answer[data-state="invalid"] i,.ask .ask-answer[data-state="error"] i{color:var(--danger)}
.ask .ask-answer[data-state="limit"]{border-color:var(--acc)}
.ask .ask-answer[data-state="limit"] i{color:var(--acc)}
@keyframes ask-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .ask .ask-answer[data-state="loading"] i{animation:none}
}