/* Product pages (invitations, contributions): shared layout. Price cards and chips come from pricing.css */
.pd-section { padding:80px 0; }
.pd-section.alt { background:var(--pr-soft); }
.pd-h2 { font-weight:800;color:var(--heading-color);font-size:2.1rem;line-height:1.2;margin:12px 0 14px; }
.pd-lead { color:var(--pr-muted);font-size:17px;line-height:1.6;max-width:520px; }
.pd-head { text-align:center;margin-bottom:44px; }
.pd-head .pd-lead { margin:0 auto; }

.pd-ticks { list-style:none;padding:0;margin:24px 0 30px;display:grid;gap:10px; }
.pd-ticks li { display:flex;gap:10px;align-items:center;font-weight:500; }
.pd-ticks li i { width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-size:15px;color:var(--accent-color);background:color-mix(in srgb,var(--accent-color) 12%,#fff); }
.pd-actions { display:flex;flex-wrap:wrap;gap:12px; }

/* Steps */
.pd-steps { display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:step; }
.pd-step { position:relative;background:#fff;border:1px solid var(--pr-line);border-radius:18px;padding:28px 22px;text-align:center; }
.pd-step-num { width:44px;height:44px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--accent-color),#c8620a); }
.pd-step h5 { font-weight:700;font-size:1.05rem;margin-bottom:6px;color:var(--heading-color); }
.pd-step p { color:var(--pr-muted);font-size:14px;margin:0; }

/* Features */
.pd-features { display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }
.pd-feature { display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--pr-line);border-radius:16px;padding:22px;transition:transform .2s,box-shadow .2s; }
.pd-feature:hover { transform:translateY(-3px);box-shadow:0 12px 30px rgba(41,24,18,.08); }
.pd-feature > i { width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:20px;color:var(--accent-color);background:color-mix(in srgb,var(--accent-color) 12%,#fff); }
.pd-feature h6 { font-weight:700;margin:2px 0 4px;color:var(--heading-color); }
.pd-feature p { color:var(--pr-muted);font-size:14px;margin:0; }

/* Example next to the price card */
.pd-example { background:linear-gradient(135deg,#291812,#4a2a1c);color:#fff;border-radius:20px;padding:34px 30px;height:100%;display:flex;flex-direction:column; }
.pd-example h5 { color:#fff;font-weight:700;font-size:1.05rem;margin-bottom:22px; }
.pd-example-row { display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:15px; }
.pd-example-row span { color:rgba(255,255,255,.75); }
.pd-example-total { margin-top:auto;padding-top:22px; }
.pd-example-total .lbl { font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6); }
.pd-example-total .val { font-size:2.2rem;font-weight:900;color:#f6b48c;line-height:1.1; }
.pd-example-total .sub { font-size:14px;color:rgba(255,255,255,.7); }
.pd-example a { color:#f6b48c;font-weight:600;text-decoration:none;margin-top:18px;display:inline-block; }

/* FAQ */
.pd-faq { max-width:760px;margin:0 auto; }
.pd-faq details { background:#fff;border:1px solid var(--pr-line);border-radius:14px;padding:18px 22px;margin-bottom:12px; }
.pd-faq summary { font-weight:700;color:var(--heading-color);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px; }
.pd-faq summary::-webkit-details-marker { display:none; }
.pd-faq summary::after { content:"+";font-size:20px;line-height:1;color:var(--accent-color); }
.pd-faq details[open] summary::after { content:"\2212"; }
.pd-faq details p { color:var(--pr-muted);font-size:15px;margin:12px 0 0; }

/* Closing call to action */
.pd-cta { background:linear-gradient(135deg,var(--accent-color),#c8620a);border-radius:24px;padding:56px 32px;text-align:center;color:#fff; }
.pd-cta h2 { color:#fff;font-weight:800;margin-bottom:10px; }
.pd-cta p { opacity:.92;font-size:17px;margin:0 auto 26px;max-width:520px; }

@media (max-width:991.98px) {
  .pd-steps { grid-template-columns:repeat(2,1fr); }
  .pd-features { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:575.98px) {
  .pd-section { padding:56px 0; }
  .pd-h2 { font-size:1.65rem; }
  .pd-steps,.pd-features { grid-template-columns:1fr; }
  .pd-cta { padding:40px 20px; }
  .pd-actions .btn { flex:1 1 100%; }
}

/* ── Dark hero with the real cards ─────────────────────────────── */
.pd-hero { position:relative;overflow:hidden;padding:150px 0 96px;color:#fff;
  background:radial-gradient(900px 480px at 88% 18%,rgba(217,178,111,.20),transparent 62%),
             radial-gradient(760px 420px at -5% 105%,rgba(224,120,68,.20),transparent 60%),
             linear-gradient(160deg,#061a23 0%,#0b2e3c 55%,#082531 100%); }
.pd-hero.contrib { background:radial-gradient(900px 480px at 88% 18%,rgba(242,193,78,.18),transparent 62%),
             radial-gradient(760px 420px at -5% 105%,rgba(224,120,68,.18),transparent 60%),
             linear-gradient(160deg,#0f2232 0%,#1d3d54 55%,#132c3e 100%); }
.pd-hero h1 { color:#fff;font-size:3.1rem;font-weight:800;line-height:1.08;margin:18px 0 18px;letter-spacing:-.01em; }
.pd-hero h1 em { font-style:normal;color:#f2c98f; }
.pd-hero .pd-lead { color:rgba(255,255,255,.76); }
.pd-hero .pr-eyebrow { background:rgba(255,255,255,.07);color:#f2c98f;border:1px solid rgba(242,201,143,.35); }
.pd-hero .pd-ticks li { color:rgba(255,255,255,.92); }
.pd-hero .pd-ticks li i { background:rgba(242,201,143,.14);color:#f2c98f; }
.pd-hero .btn-outline-light { border-color:rgba(255,255,255,.4); }
.pd-meta { display:flex;flex-wrap:wrap;gap:28px;margin-top:36px;padding-top:26px;border-top:1px solid rgba(255,255,255,.12); }
.pd-meta div { display:flex;flex-direction:column; }
.pd-meta strong { font-size:1.45rem;font-weight:800;color:#fff;line-height:1.1; }
.pd-meta span { font-size:13px;color:rgba(255,255,255,.6); }

.pd-stack { position:relative;width:100%;max-width:540px;margin:0 auto;aspect-ratio:1/1.08; }
.pd-stack img { position:absolute;display:block;border-radius:14px;box-shadow:0 34px 70px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06);transition:transform .5s ease; }
.pd-stack .front { width:60%;left:4%;top:2%;transform:rotate(-5deg);z-index:2; }
.pd-stack .back  { width:54%;right:2%;top:10%;transform:rotate(6deg);z-index:1; }
.pd-stack:hover .front { transform:rotate(-3deg) translateY(-6px); }
.pd-stack:hover .back { transform:rotate(8deg) translateX(8px); }
.pd-stack.landscape { aspect-ratio:1/.86; }
.pd-stack.landscape .front { width:94%;left:3%;top:10%;transform:rotate(-3deg); }
.pd-stack.landscape:hover .front { transform:rotate(-2deg) translateY(-6px); }

.pd-float { position:absolute;z-index:3;display:flex;align-items:center;gap:12px;background:#fff;color:var(--heading-color);border-radius:16px;padding:12px 16px;box-shadow:0 18px 40px rgba(0,0,0,.28);font-size:14px;line-height:1.3; }
.pd-float i { width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0; }
.pd-float i.ok { background:#dcfce7;color:#16a34a; }
.pd-float i.gold { background:#fdf0dc;color:#b7791f; }
.pd-float strong { display:block;font-weight:700; }
.pd-float span { color:var(--pr-muted);font-size:12.5px; }
.pd-float.f1 { left:-2%;bottom:14%; }
.pd-float.f2 { right:-2%;top:2%; }
.pd-float.prog { flex-direction:column;align-items:stretch;gap:6px;min-width:230px; }
.pd-float .bar { height:8px;border-radius:99px;background:#eef2f5;overflow:hidden; }
.pd-float .bar b { display:block;height:100%;width:63%;border-radius:99px;background:linear-gradient(90deg,#f2c14e,#e07844); }
.pd-float .row1 { display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--pr-muted); }
.pd-float .amt { font-size:1.2rem;font-weight:800;color:var(--heading-color); }
.pd-stack.landscape .pd-float.f1 { left:-3%;bottom:2%; }
.pd-stack.landscape .pd-float.prog { right:-3%;top:-4%; }

/* ── Card showcase with numbered pins ──────────────────────────── */
.pd-show-img { position:relative;max-width:440px;margin:0 auto; }
.pd-show-img.wide { max-width:640px; }
.pd-show-img img { width:100%;display:block;border-radius:16px;box-shadow:0 30px 60px rgba(41,24,18,.18); }
.pd-pin { position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:var(--accent-color);color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 6px color-mix(in srgb,var(--accent-color) 30%,transparent),0 8px 18px rgba(0,0,0,.25); }
.pd-points { list-style:none;padding:0;margin:0;display:grid;gap:18px; }
.pd-points li { display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--pr-line);border-radius:16px;padding:18px 20px; }
.pd-points .n { width:34px;height:34px;border-radius:50%;flex-shrink:0;background:var(--accent-color);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center; }
.pd-points h6 { font-weight:700;margin:4px 0 2px;color:var(--heading-color); }
.pd-points p { margin:0;color:var(--pr-muted);font-size:14px; }

@media (max-width:991.98px) {
  .pd-hero { padding:130px 0 72px; }
  .pd-hero h1 { font-size:2.4rem; }
  .pd-stack { max-width:460px; }
}
@media (max-width:575.98px) {
  .pd-hero h1 { font-size:2rem; }
  .pd-meta { gap:18px; }
  .pd-float { font-size:12.5px;padding:9px 12px; }
  .pd-float i { width:30px;height:30px;font-size:15px; }
  .pd-float.prog { min-width:180px; }
  .pd-pin { width:28px;height:28px;margin:-14px 0 0 -14px;font-size:13px; }
}

.pd-features.compact .pd-feature { flex-direction:column;align-items:center;text-align:center;gap:12px;padding:26px 18px; }
.pd-features.compact .pd-feature h6 { margin:0; }
@media (max-width:575.98px) { .pd-features.compact { grid-template-columns:repeat(2,1fr);gap:12px; } .pd-features.compact .pd-feature { padding:20px 12px; } }

/* The page-wide section padding (abvents.css) must not squeeze the hero under the fixed header */
.invitations-page section.pd-hero,
.contributions-page section.pd-hero { padding:170px 0 100px; }
@media (max-width:991.98px) {
  .invitations-page section.pd-hero,
  .contributions-page section.pd-hero { padding:140px 0 72px; }
}
@media (max-width:575.98px) {
  /* abvents.css forces section padding with !important on phones */
  .invitations-page section.pd-hero,
  .contributions-page section.pd-hero { padding:124px 0 60px !important; }
}