/* ===========================================================
   Recuity pricing page
   Add to: wwwroot/css/pricing.css
   Load from Views/Pricing/Index.cshtml:
     <link rel="stylesheet" href="~/css/pricing.css" asp-append-version="true" />

   Every rule is scoped under .rc-pricing so nothing here can
   collide with Bootstrap or site.css. Colour tokens reuse the
   existing recuity-theme.css variables where they exist and
   fall back to the literal hex if the theme is not loaded.
   =========================================================== */

.rc-pricing{
  --rcp-forest:#2C5F52;
  --rcp-forest2:#234d42;
  --rcp-forest-deep:#1e4f43;
  --rcp-sage:#8BAF9C;
  --rcp-sage-lt:#d4e8df;
  --rcp-dark:#1A2E28;
  --rcp-muted:#5a7a71;
  --rcp-bg:#f7f9f8;
  --rcp-border:rgba(44,95,82,.12);
  background:var(--rcp-bg);
  color:var(--rcp-dark);
  font-family:'Inter',system-ui,sans-serif;
  text-wrap:pretty;
}
.rc-pricing *,.rc-pricing *::before,.rc-pricing *::after{box-sizing:border-box}
.rc-pricing h1,.rc-pricing h2,.rc-pricing h3,.rc-pricing p,.rc-pricing ul{margin:0;padding:0}
.rc-pricing ul{list-style:none}
.rc-pricing a{color:var(--rcp-forest);text-decoration:none}
.rc-pricing a:hover{color:var(--rcp-forest2)}

/* ---------- layout ---------- */
.rc-pricing .rcp-wrap{max-width:1120px;margin:0 auto;padding:0 32px}

/* ---------- buttons ---------- */
.rc-pricing .rcp-btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border:none;border-radius:999px;padding:12px 26px;font-size:14.5px;font-weight:600;font-family:inherit;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s}
.rc-pricing .rcp-btn-primary{background:var(--rcp-forest);color:#fff;box-shadow:0 1px 3px rgba(44,95,82,.25),0 4px 12px rgba(44,95,82,.15)}
.rc-pricing .rcp-btn-primary:hover{background:var(--rcp-forest2);color:#fff;transform:translateY(-1px)}
.rc-pricing .rcp-btn-outline{background:transparent;color:var(--rcp-forest);border:1.5px solid var(--rcp-forest)}
.rc-pricing .rcp-btn-outline:hover{background:var(--rcp-forest);color:#fff}
.rc-pricing .rcp-btn-light{background:#fff;color:var(--rcp-forest-deep)}
.rc-pricing .rcp-btn-light:hover{background:var(--rcp-sage-lt);color:var(--rcp-forest-deep)}
.rc-pricing .rcp-btn-block{width:100%}

/* ---------- 1. hero ---------- */
.rc-pricing .rcp-hero{text-align:center;padding:84px 24px 40px}
.rc-pricing .rcp-hero h1{font-size:46px;font-weight:800;letter-spacing:-.04em;line-height:1.08;margin-bottom:18px}
.rc-pricing .rcp-hero p{font-size:18px;color:var(--rcp-muted);max-width:600px;margin:0 auto;line-height:1.55}
.rc-pricing .rcp-hero p strong{color:var(--rcp-dark);font-weight:600}

/* ---------- 2. free trial banner ---------- */
.rc-pricing .rcp-trial{background:transparent;border:1px solid var(--rcp-border);border-radius:14px;padding:18px 24px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-bottom:32px}
.rc-pricing .rcp-trial-body{flex:1;min-width:260px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.rc-pricing .rcp-trial-body h3{font-size:15.5px;font-weight:700;letter-spacing:-.015em}
.rc-pricing .rcp-trial-body p{font-size:13.5px;color:var(--rcp-muted)}
.rc-pricing .rcp-trial .rcp-btn{padding:10px 22px;font-size:13.5px}

/* ---------- 3. plan cards ---------- */
.rc-pricing .rcp-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}
.rc-pricing .rcp-plan{background:#fff;border:1px solid var(--rcp-border);border-radius:18px;padding:34px 32px 32px;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.rc-pricing .rcp-plan:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(44,95,82,.12)}
.rc-pricing .rcp-plan-featured{background:var(--rcp-forest-deep);border:2px solid var(--rcp-forest);color:#fff;position:relative}
.rc-pricing .rcp-plan-badge{position:absolute;top:-11px;left:32px;background:var(--rcp-sage);color:var(--rcp-dark);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;padding:4px 12px;border-radius:999px}
.rc-pricing .rcp-plan-name{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rcp-forest);margin-bottom:12px}
.rc-pricing .rcp-plan-featured .rcp-plan-name{color:var(--rcp-sage)}
.rc-pricing .rcp-plan-price{display:flex;align-items:baseline;gap:2px;padding-bottom:26px;border-bottom:1px solid var(--rcp-border)}
.rc-pricing .rcp-plan-featured .rcp-plan-price{border-bottom-color:rgba(255,255,255,.16)}
.rc-pricing .rcp-plan-price .rcp-cur{font-size:20px;font-weight:700}
.rc-pricing .rcp-plan-price .rcp-amt{font-size:44px;font-weight:800;letter-spacing:-.05em;line-height:1}
.rc-pricing .rcp-plan-price .rcp-per{font-size:14px;font-weight:400;color:var(--rcp-muted);margin-left:5px}
.rc-pricing .rcp-plan-featured .rcp-plan-price .rcp-per{color:var(--rcp-sage)}

/* capacity block: the visual anchor of each card */
.rc-pricing .rcp-cap{padding:26px 0 24px}
.rc-pricing .rcp-cap-num{font-size:40px;font-weight:800;letter-spacing:-.045em;line-height:1}
.rc-pricing .rcp-cap-unit{font-size:13.5px;font-weight:500;color:var(--rcp-muted);margin-top:7px}
.rc-pricing .rcp-plan-featured .rcp-cap-unit{color:rgba(255,255,255,.72)}
.rc-pricing .rcp-cap-day{display:inline-block;margin-top:14px;padding:4px 12px;border-radius:999px;background:rgba(44,95,82,.08);font-size:12.5px;font-weight:600;color:var(--rcp-forest);font-family:'JetBrains Mono',monospace;white-space:nowrap}
.rc-pricing .rcp-plan-featured .rcp-cap-day{background:rgba(255,255,255,.13);color:#fff}

/* limits: label on the left, value on the right */
.rc-pricing .rcp-limits{display:flex;flex-direction:column;gap:11px;padding-top:22px;border-top:1px solid var(--rcp-border);margin-bottom:28px}
.rc-pricing .rcp-plan-featured .rcp-limits{border-top-color:rgba(255,255,255,.16)}
.rc-pricing .rcp-limits li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:13.5px;color:var(--rcp-muted)}
.rc-pricing .rcp-plan-featured .rcp-limits li{color:rgba(255,255,255,.66)}
.rc-pricing .rcp-limits li b{font-size:14px;font-weight:700;color:var(--rcp-dark);text-align:right;white-space:nowrap}
.rc-pricing .rcp-plan-featured .rcp-limits li b{color:#fff}
.rc-pricing .rcp-plan-cta{margin-top:auto}

/* ---------- shared section chrome ---------- */
.rc-pricing .rcp-section{margin-top:88px}
.rc-pricing .rcp-section-head{text-align:center;margin-bottom:34px}
.rc-pricing .rcp-section-head h2{font-size:29px;font-weight:800;letter-spacing:-.035em;line-height:1.15}
.rc-pricing .rcp-section-head p{font-size:15.5px;color:var(--rcp-muted);line-height:1.6;max-width:620px;margin:12px auto 0}

/* ---------- 4. included in all paid plans ---------- */
.rc-pricing .rcp-incl{background:#fff;border:1px solid var(--rcp-border);border-radius:18px;padding:34px 38px}
.rc-pricing .rcp-incl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 34px}
.rc-pricing .rcp-incl-grid li{display:flex;gap:11px;font-size:14px;line-height:1.45;align-items:flex-start}
.rc-pricing .rcp-tick{flex-shrink:0;width:17px;height:17px;border-radius:50%;background:rgba(44,95,82,.1);display:flex;align-items:center;justify-content:center;margin-top:1px}
.rc-pricing .rcp-tick svg path{stroke:var(--rcp-forest)}
.rc-pricing .rcp-incl-also{margin-top:24px;padding-top:20px;border-top:1px solid var(--rcp-border);font-size:13.5px;color:var(--rcp-muted)}

/* ---------- 5. how usage works ---------- */
.rc-pricing .rcp-two{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.rc-pricing .rcp-card{background:#fff;border:1px solid var(--rcp-border);border-radius:18px;padding:34px}
.rc-pricing .rcp-card h3{font-size:18px;font-weight:700;letter-spacing:-.02em;margin-bottom:14px}
.rc-pricing .rcp-card p{font-size:14.5px;color:var(--rcp-muted);line-height:1.65}
.rc-pricing .rcp-card p+p{margin-top:14px}
.rc-pricing .rcp-card p strong{color:var(--rcp-dark);font-weight:600}
.rc-pricing .rcp-card .rcp-small{font-size:13px;margin-top:18px}
.rc-pricing .rcp-maths{margin:22px 0 4px;padding:20px 22px;border-radius:12px;background:#f4f8f6;border:1px solid var(--rcp-border);font-family:'JetBrains Mono',monospace;font-size:15.5px;font-weight:500;color:var(--rcp-forest);letter-spacing:-.01em;text-align:center}
.rc-pricing .rcp-maths .rcp-eq{color:var(--rcp-sage)}
.rc-pricing .rcp-flow{margin:20px 0 0;border:1px solid var(--rcp-border);border-radius:12px;overflow:hidden}
.rc-pricing .rcp-flow li{display:flex;align-items:baseline;gap:14px;padding:14px 18px;font-size:14px;border-bottom:1px solid var(--rcp-border)}
.rc-pricing .rcp-flow li:last-child{border-bottom:none;background:#f4f8f6;font-weight:600}
.rc-pricing .rcp-flow .rcp-n{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--rcp-sage);flex-shrink:0}

/* ---------- 6. enterprise ---------- */
.rc-pricing .rcp-ent{margin-top:88px;background:var(--rcp-forest-deep);color:#fff;border-radius:18px;padding:38px 44px;display:flex;align-items:center;gap:40px;flex-wrap:wrap}
.rc-pricing .rcp-ent-body{flex:1;min-width:280px}
.rc-pricing .rcp-ent-body h2{font-size:25px;font-weight:800;letter-spacing:-.035em;margin-bottom:8px}
.rc-pricing .rcp-ent-body p{font-size:15.5px;color:rgba(255,255,255,.8)}
.rc-pricing .rcp-ent-body .rcp-note{font-size:13px;color:rgba(255,255,255,.72);margin-top:12px;max-width:560px;line-height:1.6}

/* ---------- 7. FAQ (native details/summary, no JS) ---------- */
.rc-pricing .rcp-faq{background:#fff;border:1px solid var(--rcp-border);border-radius:18px;overflow:hidden}
.rc-pricing .rcp-faq details{border-bottom:1px solid var(--rcp-border)}
.rc-pricing .rcp-faq details:last-child{border-bottom:none}
.rc-pricing .rcp-faq summary{padding:22px 28px;font-size:15.5px;font-weight:600;letter-spacing:-.015em;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;transition:background .12s}
.rc-pricing .rcp-faq summary::-webkit-details-marker{display:none}
.rc-pricing .rcp-faq summary:hover{background:rgba(44,95,82,.03)}
.rc-pricing .rcp-faq summary::after{content:"";flex-shrink:0;width:9px;height:9px;border-right:1.8px solid var(--rcp-sage);border-bottom:1.8px solid var(--rcp-sage);transform:rotate(45deg);transition:transform .18s}
.rc-pricing .rcp-faq details[open] summary::after{transform:rotate(-135deg)}
.rc-pricing .rcp-faq details[open] summary{color:var(--rcp-forest)}
.rc-pricing .rcp-faq-body{padding:0 28px 24px;font-size:14.5px;color:var(--rcp-muted);line-height:1.7;max-width:740px}
.rc-pricing .rcp-faq-body p+p{margin-top:10px}
.rc-pricing .rcp-faq-body strong{color:var(--rcp-dark);font-weight:600}
.rc-pricing .rcp-faq-body .rcp-no{display:inline-block;font-weight:700;color:var(--rcp-forest)}
.rc-pricing .rcp-faq-rates{margin:12px 0 0;display:flex;flex-direction:column;gap:7px}
.rc-pricing .rcp-faq-rates li{font-size:14px;color:var(--rcp-dark)}
.rc-pricing .rcp-faq-rates b{font-weight:700}

/* ---------- 8. footer note ---------- */
.rc-pricing .rcp-foot{text-align:center;padding:64px 24px 84px;font-size:13px;color:var(--rcp-muted)}

/* ===========================================================
   TABLET: 980px and below
   Plan cards and the two usage cards stack; features drop to 2 columns.
   =========================================================== */
@media(max-width:980px){
  .rc-pricing .rcp-plans,
  .rc-pricing .rcp-two{grid-template-columns:1fr}
  .rc-pricing .rcp-incl-grid{grid-template-columns:repeat(2,1fr)}
  .rc-pricing .rcp-hero h1{font-size:34px}
}

/* ===========================================================
   MOBILE: 560px and below
   =========================================================== */
@media(max-width:560px){
  .rc-pricing .rcp-wrap{padding:0 18px}
  .rc-pricing .rcp-hero{padding:46px 20px 30px}
  .rc-pricing .rcp-hero h1{font-size:29px;margin-bottom:14px}
  .rc-pricing .rcp-hero p{font-size:15.5px}
  .rc-pricing .rcp-trial{flex-direction:column;align-items:flex-start;gap:16px;padding:20px}
  .rc-pricing .rcp-trial-body{gap:6px}
  .rc-pricing .rcp-trial .rcp-btn{width:100%}
  .rc-pricing .rcp-plans{gap:18px}
  .rc-pricing .rcp-plan{padding:28px 22px 24px}
  .rc-pricing .rcp-plan:hover{transform:none;box-shadow:none}
  .rc-pricing .rcp-plan-price .rcp-amt{font-size:40px}
  .rc-pricing .rcp-cap-num{font-size:36px}
  .rc-pricing .rcp-section{margin-top:58px}
  .rc-pricing .rcp-section-head{margin-bottom:24px}
  .rc-pricing .rcp-section-head h2{font-size:24px}
  .rc-pricing .rcp-section-head p{font-size:14.5px}
  .rc-pricing .rcp-incl{padding:24px 22px}
  .rc-pricing .rcp-incl-grid{grid-template-columns:1fr;gap:14px}
  .rc-pricing .rcp-two{gap:18px}
  .rc-pricing .rcp-card{padding:26px 22px}
  .rc-pricing .rcp-maths{font-size:13.5px;padding:17px 14px}
  .rc-pricing .rcp-ent{margin-top:58px;padding:28px 24px;flex-direction:column;align-items:flex-start;gap:22px}
  .rc-pricing .rcp-ent-body h2{font-size:22px}
  .rc-pricing .rcp-ent .rcp-btn{width:100%}
  .rc-pricing .rcp-faq summary{padding:18px 20px;font-size:14.5px}
  .rc-pricing .rcp-faq-body{padding:0 20px 20px;font-size:13.5px}
  .rc-pricing .rcp-foot{padding:46px 20px 60px}
}

/* ===========================================================
   PRINT
   =========================================================== */
@media print{
  .rc-pricing{background:#fff}
  .rc-pricing .rcp-plan:hover{transform:none;box-shadow:none}
  .rc-pricing .rcp-plans{grid-template-columns:repeat(3,1fr)}
  .rc-pricing .rcp-plan,
  .rc-pricing .rcp-card,
  .rc-pricing .rcp-faq details,
  .rc-pricing .rcp-ent{break-inside:avoid}
  .rc-pricing .rcp-faq summary::after{display:none}
}