/* ==========================================================================
   MeNu marketing — reusable components (Season 3 · M1).
   Tokens (--navy, --amber, …) come from the inline design system in
   layouts/marketing.blade.php. RTL-aware via logical properties + dir flips.
   ========================================================================== */

/* ---- Generic hero (for-restaurants, feature pages) ---- */
.mk-hero { background:linear-gradient(180deg,#fff 0%,var(--bg-soft) 100%); }
.mk-hero .inner { display:flex; align-items:center; gap:clamp(28px,5vw,64px);
    flex-wrap:wrap; padding-block:clamp(40px,7vw,80px); }
.mk-hero__copy { flex:1 1 420px; }
.mk-hero__copy .badge { display:inline-flex; align-items:center; gap:8px; background:var(--amber-tint);
    color:var(--amber-dark); font-weight:800; font-size:13px; letter-spacing:.4px;
    padding:7px 15px; border-radius:30px; margin-bottom:20px; }
.mk-hero__copy h1 { font-size:clamp(30px,5vw,50px); }
.mk-hero__copy h1 .hl { color:var(--amber); }
.mk-hero__copy .sub { color:var(--muted); font-size:clamp(15px,2vw,18.5px); margin:18px 0 26px; max-width:560px; }
.mk-hero__cta { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:20px; }
.mk-hero__points { display:flex; flex-wrap:wrap; gap:8px 22px; color:var(--navy); font-weight:700; font-size:14px; }
.mk-hero__points span { display:inline-flex; align-items:center; gap:7px; }
.mk-hero__points i { color:var(--amber); }
.mk-hero__art { flex:1 1 340px; display:flex; justify-content:center; }
.mk-hero__art img { width:100%; max-width:500px; }

/* ---- Alternating feature rows ---- */
.feat-list { display:flex; flex-direction:column; gap:clamp(40px,6vw,72px); }
.feat-row { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(28px,5vw,60px); }
.feat-row__media { display:flex; align-items:center; justify-content:center;
    background:radial-gradient(120% 120% at 50% 20%, #fff 0%, var(--amber-tint) 100%);
    border:1px solid var(--line); border-radius:24px; padding:clamp(28px,5vw,52px); min-height:230px; }
.feat-row__media img { width:auto; max-width:100%; max-height:220px; }
.feat-row__media .ico { width:96px; height:96px; }
.feat-row.is-reverse .feat-row__media { order:2; }
.feat-row__body .eyebrow { margin-bottom:10px; }
.feat-row__body h3 { font-size:clamp(21px,3vw,28px); }
.feat-row__body > p { color:var(--muted); font-size:16px; margin:12px 0 16px; }
.feat-points { list-style:none; display:flex; flex-direction:column; gap:10px; }
.feat-points li { display:flex; align-items:flex-start; gap:10px; font-size:15px; font-weight:600; color:var(--navy); }
.feat-points i { color:var(--amber); margin-top:4px; }
.feat-link { display:inline-flex; align-items:center; gap:8px; margin-top:18px;
    font-weight:800; color:var(--amber-dark); }
.feat-link:hover { color:var(--amber); }

/* ---- Comparison table ---- */
.cmp { max-width:900px; margin-inline:auto; border:1px solid var(--line); border-radius:var(--radius);
    overflow:hidden; background:#fff; box-shadow:var(--shadow-sm); }
.cmp__row { display:grid; grid-template-columns:1.4fr 1fr 1fr; align-items:center; }
.cmp__row + .cmp__row { border-top:1px solid var(--line); }
.cmp__row > div { padding:16px 18px; font-size:14.5px; }
.cmp__head { background:var(--navy); color:#fff; font-weight:800; }
.cmp__head .you { color:var(--accent); text-align:center; }
.cmp__head .them { color:#c7d0e2; text-align:center; }
.cmp__label { font-weight:700; color:var(--navy); }
.cmp__you, .cmp__them { text-align:center; }
.cmp__you { color:var(--navy); font-weight:700; background:rgba(216,143,29,.05); }
.cmp__you i { color:#1f9d55; margin-inline-end:6px; }
.cmp__them { color:var(--muted); }
.cmp__them i { color:#c0492e; margin-inline-end:6px; }

/* ---- FAQ accordion (CSS-only via <details>) ---- */
.faq { max-width:820px; margin-inline:auto; display:flex; flex-direction:column; gap:12px; }
.faq__item { background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.faq__item summary { list-style:none; cursor:pointer; padding:18px 20px; font-weight:800; color:var(--navy);
    display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:16px; }
.faq__item summary::-webkit-details-marker { display:none; }
.faq__item summary i { color:var(--amber); transition:transform .2s; flex:0 0 auto; }
.faq__item[open] summary i { transform:rotate(45deg); }
.faq__a { padding:0 20px 18px; color:var(--muted); font-size:15px; line-height:1.8; }

/* ---- Marketplace "discover" band ---- */
.discover__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:22px; margin-top:34px; }
.discover__item { display:flex; gap:14px; align-items:flex-start; }
.discover__item i { color:var(--amber); font-size:22px; margin-top:2px; }
.discover__item h4 { color:#fff; font-size:17px; margin-bottom:5px; }
.discover__item p { color:#cfd7e6; font-size:14.5px; }

/* ---- How-it-works steps (shared: homepage + for-restaurants) ---- */
.step { text-align:center; position:relative; }
.step .num { position:absolute; inset-inline-start:26px; top:0; width:30px; height:30px; border-radius:50%;
    background:var(--amber); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:15px; }
.step img { width:120px; height:120px; margin:0 auto 14px; }
.step h3 { font-size:19px; margin-bottom:8px; }
.step p { color:var(--muted); font-size:14.5px; max-width:300px; margin-inline:auto; }

/* ---- Reusable CTA band ---- */
.cta-band { text-align:center; }
.cta-band h2 { font-size:clamp(26px,4vw,40px); }
.cta-band p { color:#cfd7e6; font-size:clamp(15px,2vw,18px); margin:14px auto 26px; max-width:600px; }
.cta-band .hint { color:#8ea0c0; font-size:14px; margin-top:16px; }

/* ---- RTL flips ---- */
[dir="rtl"] .feat-link i.fa-arrow-right,
[dir="rtl"] .btn i.fa-arrow-right { transform:scaleX(-1); }

/* ---- Responsive ---- */
@media (max-width:820px) {
    .feat-row { grid-template-columns:1fr; }
    .feat-row.is-reverse .feat-row__media { order:0; }
    .cmp__row { grid-template-columns:1.2fr .9fr .9fr; }
    .cmp__row > div { padding:13px 12px; font-size:13px; }
}