/* Marketing pages — layout on top of the design system. No raw colours. */

.pub-header { justify-content: space-between; }
.pub-nav { display: flex; gap: var(--bel-space-1); }
.pub-nav__link { min-height: 40px; display: inline-flex; align-items: center; padding: 0 var(--bel-space-3); border-radius: var(--bel-radius-pill); color: var(--bel-text-muted); text-decoration: none; font-size: var(--bel-text-sm); font-weight: var(--bel-weight-medium); }
.pub-nav__link:hover { background: var(--bel-surface-hover); color: var(--bel-text); }
.pub-header__actions { display: flex; align-items: center; gap: var(--bel-space-2); }
.pub-menu { position: fixed; inset: calc(var(--bel-header-height) + env(safe-area-inset-top, 0px)) 0 0 0; z-index: var(--bel-z-overlay); background: var(--bel-bg); overflow-y: auto; }
.pub-menu__inner { display: flex; flex-direction: column; gap: var(--bel-space-1); padding: var(--bel-space-4) var(--bel-gutter); }
@media (min-width: 768px) { .pub-menu { display: none; } }

/* ---- section rhythm ------------------------------------------------------ */
.pub-section { padding-block: clamp(3rem, 2rem + 6vw, 6.5rem); }
.pub-section--tight { padding-block: clamp(2rem, 1.5rem + 3vw, 3.5rem); }
.pub-section__head { max-width: 46rem; }
.pub-eyebrow { display: inline-flex; align-items: center; gap: var(--bel-space-2); padding: 4px var(--bel-space-3); border-radius: var(--bel-radius-pill); background: var(--bel-brand-soft); color: var(--bel-brand-strong); font-size: var(--bel-text-xs); font-weight: var(--bel-weight-medium); }
.pub-section__title { margin: var(--bel-space-4) 0 var(--bel-space-3); font-size: var(--bel-text-3xl); line-height: var(--bel-leading-tight); letter-spacing: var(--bel-tracking-tight); font-weight: var(--bel-weight-semibold); }
.pub-section__sub { color: var(--bel-text-muted); font-size: var(--bel-text-lg); margin: 0; }

/* ---- hero ---------------------------------------------------------------- */
.pub-hero { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 1.5rem + 7vw, 6rem); }
.pub-hero::before { content: ''; position: absolute; inset: -30% -10% auto -10%; height: 70%; display: none; }
.pub-hero__grid { position: relative; display: grid; gap: var(--bel-space-8); align-items: center; }
@media (min-width: 1024px) { .pub-hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--bel-space-12); } }
.pub-hero__title { font-family: var(--bel-font-serif); font-weight: var(--bel-weight-regular); font-size: var(--bel-text-4xl); line-height: 1.05; letter-spacing: var(--bel-tracking-tight); margin: var(--bel-space-4) 0 0; }
.pub-hero__title em { font-style: italic; color: var(--bel-brand); }
.pub-hero__sub { margin: var(--bel-space-5) 0 0; font-size: var(--bel-text-lg); color: var(--bel-text-muted); max-width: 46ch; }
.pub-hero__actions { display: flex; flex-wrap: wrap; gap: var(--bel-space-3); margin-top: var(--bel-space-6); }
.pub-hero__note { margin-top: var(--bel-space-4); font-size: var(--bel-text-sm); color: var(--bel-text-muted); }
.pub-hero__media { position: relative; border-radius: var(--bel-radius-xl); overflow: hidden; background: var(--bel-bg-raised); border: 1px solid var(--bel-border); box-shadow: var(--bel-shadow-lg); aspect-ratio: 4 / 3; }
.pub-hero__media video, .pub-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A believable product still while no demo video is uploaded. */
.pub-mock { display: flex; flex-direction: column; height: 100%; background: var(--bel-bg-raised); }
.pub-mock__bar { display: flex; align-items: center; gap: var(--bel-space-2); padding: var(--bel-space-3) var(--bel-space-4); border-bottom: 1px solid var(--bel-border); }
.pub-mock__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bel-border-strong); }
.pub-mock__body { flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--bel-space-3); padding: var(--bel-space-4); }
.pub-mock__card { border: 1px solid var(--bel-border); border-radius: var(--bel-radius-md); padding: var(--bel-space-3); background: var(--bel-bg); display: flex; flex-direction: column; gap: var(--bel-space-2); }
.pub-mock__line { height: 8px; border-radius: 4px; background: var(--bel-bg-sunken); }
.pub-mock__line--brand { background: color-mix(in srgb, var(--bel-brand) 35%, var(--bel-bg-sunken)); }

/* ---- bento / feature grid ------------------------------------------------ */
.pub-bento { display: grid; gap: var(--bel-space-4); margin-top: var(--bel-space-8); }
@media (min-width: 768px) { .pub-bento { grid-template-columns: repeat(6, 1fr); } .pub-bento__item--wide { grid-column: span 4; } .pub-bento__item { grid-column: span 2; } }
.pub-bento__item { display: flex; flex-direction: column; gap: var(--bel-space-3); padding: var(--bel-space-5); background: var(--bel-bg-raised); border: 1px solid var(--bel-border); border-radius: var(--bel-radius-lg); }
.pub-bento__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--bel-radius-md); background: var(--bel-brand-soft); color: var(--bel-brand-strong); }
.pub-bento__title { font-size: var(--bel-text-lg); font-weight: var(--bel-weight-semibold); margin: 0; }
.pub-bento__text { color: var(--bel-text-muted); margin: 0; }

/* ---- steps --------------------------------------------------------------- */
.pub-steps { counter-reset: step; display: grid; gap: var(--bel-space-4); margin-top: var(--bel-space-8); }
@media (min-width: 768px) { .pub-steps { grid-template-columns: repeat(3, 1fr); } }
.pub-step { position: relative; padding: var(--bel-space-5); border-radius: var(--bel-radius-lg); background: var(--bel-bg-raised); border: 1px solid var(--bel-border); }
.pub-step::before { counter-increment: step; content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bel-brand); color: var(--bel-on-brand); font-weight: var(--bel-weight-semibold); font-size: var(--bel-text-sm); margin-bottom: var(--bel-space-3); }

/* ---- gallery ------------------------------------------------------------- */
.pub-gallery { display: grid; gap: var(--bel-space-4); margin-top: var(--bel-space-8); grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.pub-gallery__item { overflow: hidden; border-radius: var(--bel-radius-lg); border: 1px solid var(--bel-border); background: var(--bel-bg-raised); }
.pub-gallery__thumb { aspect-ratio: 4 / 3; background: var(--bel-bg-sunken); display: flex; align-items: center; justify-content: center; color: var(--bel-text-subtle); }
.pub-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pub-gallery__caption { padding: var(--bel-space-3) var(--bel-space-4); }

/* ---- faq ----------------------------------------------------------------- */
.pub-faq { margin-top: var(--bel-space-8); display: grid; gap: var(--bel-space-3); max-width: 52rem; }
.pub-faq__item { border: 1px solid var(--bel-border); border-radius: var(--bel-radius-lg); background: var(--bel-bg-raised); padding: 0 var(--bel-space-5); }
.pub-faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: var(--bel-space-4); min-height: var(--bel-tap-target); padding: var(--bel-space-4) 0; font-weight: var(--bel-weight-medium); cursor: pointer; list-style: none; }
.pub-faq__item summary::-webkit-details-marker { display: none; }
.pub-faq__item summary::after { content: '+'; font-size: var(--bel-text-xl); color: var(--bel-text-muted); }
.pub-faq__item[open] summary::after { content: '−'; }
.pub-faq__answer { padding-bottom: var(--bel-space-5); color: var(--bel-text-muted); margin: 0; }

/* ---- demo form ----------------------------------------------------------- */
.pub-demo { display: grid; gap: var(--bel-space-8); align-items: start; }
@media (min-width: 1024px) { .pub-demo { grid-template-columns: 0.9fr 1.1fr; gap: var(--bel-space-12); } }
.pub-form-grid { display: grid; gap: var(--bel-space-4); }
@media (min-width: 560px) { .pub-form-grid--two { grid-template-columns: 1fr 1fr; } }
.pub-form-success { display: none; text-align: center; padding: var(--bel-space-8) var(--bel-space-4); }
.pub-form-success[data-shown='true'] { display: block; }

/* ---- closing band -------------------------------------------------------- */
.pub-cta { background: var(--bel-bg-inverse); color: var(--bel-text-on-inverse); border-radius: var(--bel-radius-xl); padding: clamp(2rem, 1.5rem + 4vw, 4rem); text-align: center; }
.pub-cta .bel-btn--secondary { background: transparent; color: var(--bel-text-on-inverse); border-color: currentColor; }

/* ---- footer -------------------------------------------------------------- */
.pub-footer { margin-top: var(--bel-space-16); padding-block: var(--bel-space-12) var(--bel-space-6); background: var(--bel-bg-sunken); border-top: 1px solid var(--bel-border); }
.pub-footer__grid { display: grid; gap: var(--bel-space-8); grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.pub-footer__title { font-size: var(--bel-text-sm); font-weight: var(--bel-weight-semibold); margin: 0 0 var(--bel-space-3); }
.pub-footer__link { display: block; min-height: 36px; color: var(--bel-text-muted); text-decoration: none; font-size: var(--bel-text-sm); }
.pub-footer__link:hover { color: var(--bel-text); text-decoration: underline; }
.pub-footer__base { margin-top: var(--bel-space-8); padding-top: var(--bel-space-4); border-top: 1px solid var(--bel-border); }

/* ---- pricing --------------------------------------------------------------
 * The plan cards come from plans/templates/plans/pricing_plans.html, which is
 * shared with other pages, so it keeps its own class names and we style them
 * here. Regional pricing, the WhatsApp route and the CTA links are untouched.
 */
.pricing-grid { display: grid; gap: var(--bel-space-4); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); align-items: stretch; }
/* Five plans, one row, once there is room — a lone Enterprise card on its own
   line reads as an afterthought. */
@media (min-width: 1200px) { .pricing-grid { grid-template-columns: repeat(5, 1fr); gap: var(--bel-space-3); } .pricing-card { padding: var(--bel-space-5) var(--bel-space-4); } }
.pricing-card { position: relative; display: flex; flex-direction: column; gap: var(--bel-space-4); padding: var(--bel-space-6) var(--bel-space-5); background: var(--bel-bg-raised); border: 1px solid var(--bel-border); border-radius: var(--bel-radius-lg); box-shadow: var(--bel-shadow-sm); }
.pricing-card.popular { border-color: var(--bel-brand); box-shadow: var(--bel-shadow-md); }
.pricing-card.popular::before { content: 'Most chosen'; position: absolute; top: calc(-1 * var(--bel-space-3)); left: var(--bel-space-5); padding: 2px var(--bel-space-3); border-radius: var(--bel-radius-pill); background: var(--bel-brand); color: var(--bel-on-brand); font-size: var(--bel-text-xs); font-weight: var(--bel-weight-medium); }
.plan-header { display: flex; flex-direction: column; gap: var(--bel-space-2); }
.plan-name { margin: 0; font-size: var(--bel-text-xl); font-weight: var(--bel-weight-semibold); }
.plan-description { margin: 0; color: var(--bel-text-muted); font-size: var(--bel-text-sm); }
.plan-price .price-wrapper { display: flex; align-items: baseline; gap: 2px; }
.plan-price .currency { font-size: var(--bel-text-lg); color: var(--bel-text-muted); }
.plan-price .amount { font-size: var(--bel-text-3xl); font-weight: var(--bel-weight-semibold); letter-spacing: var(--bel-tracking-tight); }
.plan-price .period { margin-left: var(--bel-space-1); color: var(--bel-text-muted); font-size: var(--bel-text-sm); }
.plan-cta { display: flex; flex-direction: column; gap: var(--bel-space-2); }
.plan-price { margin-top: auto; }
.plan-button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--bel-tap-target); padding: var(--bel-space-3) var(--bel-space-5); border: 1px solid var(--bel-border-strong); border-radius: var(--bel-radius-pill); background: var(--bel-bg); color: var(--bel-text); font-weight: var(--bel-weight-medium); text-decoration: none; }
.plan-button:hover { background: var(--bel-surface-hover); color: var(--bel-text); }
.pricing-card.popular .plan-button { background: var(--bel-brand); border-color: transparent; color: var(--bel-on-brand); }
.pricing-card.popular .plan-button:hover { background: var(--bel-brand-strong); color: var(--bel-on-brand); }
.plan-features { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--bel-space-2); align-content: start; font-size: var(--bel-text-sm); color: var(--bel-text-muted); }
.plan-features li { display: flex; gap: var(--bel-space-2); align-items: flex-start; }
/* The partial writes a tick as text; keep it, just make it quiet. */
.plan-features li::marker { content: none; }
.bd-note, .bd-muted { font-size: var(--bel-text-sm); color: var(--bel-text-muted); }
.bd-wa-button { background: var(--bel-success); border-color: transparent; color: var(--bel-white); }
.bd-wa-button:hover { background: var(--bel-success); color: var(--bel-white); filter: brightness(0.94); }

/* Phones: a plan's full feature list runs to 15 lines, which buries the next
   plan. Fold it, keeping every line in the page for search engines. */
.plan-features[data-folded='true'] li[data-folded='true'] { display: none; }
.plan-more { align-self: flex-start; min-height: 36px; padding: 0 var(--bel-space-3); border: 0; border-radius: var(--bel-radius-pill); background: var(--bel-surface-hover); color: var(--bel-text); font: inherit; font-size: var(--bel-text-sm); font-weight: var(--bel-weight-medium); cursor: pointer; }