/* ==========================================================================
   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; }

/* ---- Feature-page hero art panel ---- */
.feat-hero-panel { display:flex; align-items:center; justify-content:center;
    width:100%; max-width:360px; aspect-ratio:1/1; margin-inline:auto;
    background:radial-gradient(120% 120% at 50% 20%, #fff 0%, var(--amber-tint) 100%);
    border:1px solid var(--line); border-radius:32px; box-shadow:var(--shadow-sm); }
.feat-hero-panel .ico { width:44%; max-width:150px; height:auto; }
.feat-hero-panel i { font-size:96px; color:var(--amber); }

/* Centered checklist (segment "why" section) */
.check-list { list-style:none; max-width:640px; margin-inline:auto; display:grid; gap:14px; }
.check-list li { display:flex; align-items:flex-start; gap:12px; font-size:16px; font-weight:600; color:var(--navy); }
.check-list i { color:var(--amber); margin-top:4px; }

/* Clickable cards (related-features grid) keep card styling + arrow affordance */
a.card { color:inherit; }
a.card h3 { display:inline-flex; align-items:center; gap:8px; }
a.card:hover h3 { color:var(--amber-dark); }

/* ---- 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; }

/* Feature-row with a real screenshot (phone / browser frame) instead of the icon panel */
.feat-row__media--shot { background:none; border:none; padding:0; min-height:0; }
/* Frame hugs the image (height:auto) — no fixed aspect-ratio, so no empty dark gap below.
   max-height:none resets the icon cap (.feat-row__media img{max-height:220px}) that would
   otherwise squash the screenshot into a square. */
.shot-phone { width:100%; max-width:250px; margin-inline:auto; background:#0a1530;
    border-radius:34px; padding:9px; box-shadow:var(--shadow-md); align-self:center; }
.shot-phone img { width:100%; height:auto; max-height:none; object-fit:contain; border-radius:26px; display:block; }
.shot-browser { width:100%; max-width:560px; margin-inline:auto; border:1px solid var(--line);
    border-radius:16px; overflow:hidden; box-shadow:var(--shadow-md); background:#fff; }
.shot-browser__bar { height:34px; background:var(--bg-soft); border-bottom:1px solid var(--line);
    display:flex; align-items:center; gap:7px; padding-inline:15px; }
.shot-browser__bar span { width:10px; height:10px; border-radius:50%; background:#d7deea; }
.shot-browser img { width:100%; height:auto; max-height:none; object-fit:contain; display:block; }
.phone-shot { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; }
.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; }

/* ---- Neutral vs-comparison (competitors are all commission-free → no win/lose icons) ---- */
.cmp--vs .cmp__you { color:var(--navy); font-weight:800; background:rgba(216,143,29,.07); }
.cmp--vs .cmp__them { color:var(--muted); font-weight:600; }

/* ---- "Compare MeNu" links row ---- */
.compare-links { text-align:center; margin-top:26px; font-weight:700; color:var(--muted); }
.compare-links a { color:var(--amber-dark); white-space:nowrap; }
.compare-links a:hover { color:var(--amber); }

/* ---- Common-ground note band ---- */
.note-band { max-width:760px; margin-inline:auto; display:flex; align-items:flex-start; gap:14px;
    background:var(--amber-tint); border:1px solid var(--accent); border-radius:16px; padding:20px 22px; }
.note-band i { color:var(--amber-dark); font-size:22px; margin-top:2px; flex:0 0 auto; }
.note-band p { color:var(--ink); font-size:15.5px; font-weight:600; }

/* ---- 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; }

/* ---- Pricing cards ---- */
.pricing-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px;
    max-width:840px; margin-inline:auto; align-items:start; }
.price-card { position:relative; background:#fff; border:1px solid var(--line); border-radius:20px;
    padding:32px 28px; box-shadow:var(--shadow-sm); }
.price-card--featured { border:2px solid var(--amber); box-shadow:var(--shadow-md); }
.price-tag { position:absolute; top:-13px; inset-inline-start:28px; background:var(--amber); color:#fff;
    font-weight:800; font-size:12px; letter-spacing:.5px; padding:6px 14px; border-radius:20px; }
.price-card h3 { font-size:22px; margin-bottom:4px; }
.price-card .price-sub { color:var(--muted); font-size:14.5px; margin-bottom:20px; }
.price-amount { display:flex; align-items:baseline; gap:8px; margin-bottom:4px; }
.price-amount .num { font-size:44px; font-weight:800; color:var(--navy); line-height:1; }
.price-amount .num-word { font-size:26px; font-weight:800; color:var(--navy); line-height:1.2; }
.price-amount .per { color:var(--muted); font-weight:700; font-size:16px; }
.price-amount .cur { font-weight:800; color:var(--navy); font-size:20px; }
.price-billed { color:var(--muted); font-size:13.5px; margin-bottom:22px; }
.price-features { list-style:none; display:grid; gap:12px; margin-bottom:24px; }
.price-features li { display:flex; align-items:flex-start; gap:10px; font-size:14.5px; font-weight:600; color:var(--navy); }
.price-features i { color:var(--amber); margin-top:4px; }
.price-card .btn { width:100%; }
.price-fineprint { margin-top:16px; color:var(--muted); font-size:13px; line-height:1.7; }
.price-note { text-align:center; color:var(--muted); font-size:13.5px; margin-top:26px; }

/* ---- "Who we serve" segment chips ---- */
.seg-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; }
.seg-chip { display:flex; align-items:center; gap:12px; padding:16px 18px; background:#fff;
    border:1px solid var(--line); border-radius:14px; font-weight:700; color:var(--navy);
    box-shadow:var(--shadow-sm); transition:.2s; }
.seg-chip:hover { transform:translateY(-3px); border-color:var(--amber); color:var(--amber-dark); }
.seg-chip i { color:var(--amber); font-size:22px; width:26px; text-align:center; }

/* ---- 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; }

/* ---- Blog ---- */
.blog-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; }
.blog-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
    border-radius:18px; overflow:hidden; box-shadow:var(--shadow-sm); transition:.22s; }
.blog-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.blog-card__cover { aspect-ratio:16/9; background:radial-gradient(120% 120% at 50% 20%,#fff 0%,var(--amber-tint) 100%);
    display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--line); }
.blog-card__cover img { width:100%; height:100%; object-fit:cover; }
.blog-card__cover .ph { width:64px; height:64px; opacity:.85; }
.blog-card__body { padding:22px 24px; display:flex; flex-direction:column; gap:8px; flex:1; }
.blog-card__meta { color:var(--muted); font-size:13px; font-weight:700; }
.blog-card__body h3 { font-size:19px; line-height:1.35; }
.blog-card__body p { color:var(--muted); font-size:14.5px; flex:1; }
.blog-card__more { color:var(--amber-dark); font-weight:800; font-size:14px; }
.blog-empty { text-align:center; color:var(--muted); font-size:16px; padding-block:40px; }

/* Article */
.article { max-width:760px; margin-inline:auto; }
.article__back { display:inline-flex; align-items:center; gap:8px; color:var(--amber-dark); font-weight:800;
    font-size:14px; margin-bottom:22px; }
.article__meta { color:var(--muted); font-weight:700; font-size:14px; margin-bottom:10px; }
.article h1 { font-size:clamp(28px,4vw,42px); margin-bottom:14px; }
.article__lead { color:var(--muted); font-size:18px; margin-bottom:24px; }
.article__cover { border-radius:18px; overflow:hidden; margin-bottom:30px; border:1px solid var(--line); }
.prose { color:var(--ink); font-size:17px; line-height:1.9; }
.prose h2 { color:var(--navy); font-size:26px; margin:34px 0 12px; }
.prose h3 { color:var(--navy); font-size:21px; margin:26px 0 10px; }
.prose p { margin-bottom:18px; }
.prose ul, .prose ol { margin:0 0 18px; padding-inline-start:26px; }
.prose li { margin-bottom:8px; }
.prose a { color:var(--amber-dark); font-weight:700; text-decoration:underline; }
.prose blockquote { border-inline-start:4px solid var(--amber); background:var(--bg-soft);
    padding:14px 20px; border-radius:10px; margin:0 0 18px; color:var(--navy); font-weight:600; }
.prose strong { color:var(--navy); }
.prose img { border-radius:12px; margin:10px 0; }

/* ---- 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; }
}