/* Sell online page (web/sell-online). Builds on landing.css tokens and the
   selling lane mockup classes (.sell-vis, .sell-phone, .sell-chip). */

:root {
  --gold-top: #FFC83D;
  --gold-bottom: #F5A400;
  --gold-edge: #D98E00;
  --navy: #0B1220;
  --navy-2: #12203F;
}

/* Hero (dark) */
.sellp-hero {
  position: relative; overflow: hidden; color: #fff;
  padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 8vw, 104px);
  background:
    radial-gradient(900px 520px at 85% 15%, rgba(37,99,235,.55), rgba(37,99,235,0) 62%),
    radial-gradient(700px 420px at 5% 95%, rgba(245,164,0,.20), rgba(245,164,0,0) 60%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
}
.sellp-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
.sellp-hero .container { position: relative; }
.sellp-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.sellp-hero .eyebrow { background: rgba(255,255,255,.10); color: #fff; }
.sellp-hero .eyebrow .dot { background: var(--gold-top); }
.sellp-hero h1 { color: #fff; margin-top: 18px; }
.sellp-gold {
  background: linear-gradient(90deg, #FFE08A, var(--gold-bottom));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sellp-hero .lede { color: rgba(255,255,255,.80); margin-top: 22px; }
.sellp-hero .hero-cta-row { margin-top: 30px; }
.btn-gold {
  background: linear-gradient(180deg, var(--gold-top), var(--gold-bottom));
  border: 1px solid var(--gold-edge); color: #111; font-weight: 800;
  box-shadow: 0 10px 28px -10px rgba(245,164,0,.65);
}
.btn-gold:hover, .btn-gold:focus, .btn-gold:active, .btn-gold:visited { color: #111; }
.btn-gold:hover { transform: translateY(-1px); filter: brightness(1.04); }
.btn-ghost-dark { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.22); color: #fff; }
.btn-ghost-dark:hover, .btn-ghost-dark:focus, .btn-ghost-dark:visited { color: #fff; background: rgba(255,255,255,.12); }
.sellp-trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 22px 0 0; padding: 0; list-style: none; }
.sellp-trust li { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: rgba(255,255,255,.78); }
.sellp-trust li::before { content: "\2713"; font-weight: 800; color: #4ADE80; }
.sellp-hero .sell-vis::before { background: radial-gradient(circle at 50% 50%, rgba(255,200,61,.22), rgba(255,200,61,0) 66%); }

/* Number strip */
.sellp-stats { margin-top: -44px; position: relative; z-index: 2; }
.sellp-stats ul {
  list-style: none; margin: 0; padding: 22px clamp(16px, 3vw, 32px);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.sellp-stats li { display: flex; flex-direction: column; gap: 2px; padding-inline-start: 14px; border-inline-start: 3px solid var(--primary-soft); }
.sellp-stats b { font-size: clamp(26px, 3vw, 36px); font-weight: 800; letter-spacing: -.02em; color: var(--ink); line-height: 1.1; }
.sellp-stats span { font-size: 13.5px; color: var(--muted); }

/* Section heads */
.sellp-head { max-width: 760px; margin: 0 auto clamp(32px, 4vw, 48px); text-align: center; }
.sellp-head .lede { margin: 16px auto 0; }
.sellp-head h2 { margin-top: 18px; }

/* One link, many faces */
.sellp-faces { background: linear-gradient(180deg, var(--bg) 0%, #EEF4FF 100%); }
.sellp-hub { display: flex; justify-content: center; margin-bottom: 18px; }
.sellp-hub-link {
  display: inline-flex; align-items: center; gap: 12px; padding-block: 12px; padding-inline: 12px 22px;
  background: var(--navy); color: #fff; border-radius: 999px; font-size: clamp(15px, 1.6vw, 19px);
  box-shadow: 0 18px 40px -16px rgba(11,18,32,.55), 0 0 0 6px rgba(37,99,235,.12);
}
.sellp-hub-link .ic {
  width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--gold-top), var(--gold-bottom)); color: #111;
}
.sellp-hub-link b { color: var(--gold-top); font-weight: 700; }
.sellp-rays { display: block; width: min(860px, 100%); height: 56px; margin: 0 auto; color: #93C5FD; }
.sellp-face-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.sellp-face {
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 16px 16px 20px; box-shadow: var(--shadow); display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.sellp-face:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.sellp-face-tag {
  align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; margin-bottom: 12px;
}
.sellp-face h3 { font-size: 18px; margin-top: 14px; }
.sellp-face p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.f-web .sellp-face-tag { background: #E0F2FE; color: #075985; }
.f-pdf .sellp-face-tag { background: #FEE2E2; color: #991B1B; }
.f-gate .sellp-face-tag { background: #EDE9FE; color: #5B21B6; }
.f-sale .sellp-face-tag { background: #FEF3C7; color: #92400E; }

/* Mini mockups inside face cards */
.mm { height: 168px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); overflow: hidden; position: relative; }
.mm-bar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; background: #fff; border-bottom: 1px solid var(--line); }
.mm-bar i { width: 7px; height: 7px; border-radius: 50%; background: #E2E8F0; }
.mm-bar span { margin-inline-start: 6px; flex: 1; height: 14px; border-radius: 6px; background: var(--bg-soft); font-size: 9.5px; line-height: 14px; padding-inline: 7px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.mm-line { display: block; height: 8px; border-radius: 4px; background: #E2E8F0; margin: 7px 12px 0; }
.mm-line.w60 { width: 60%; } .mm-line.w80 { width: 80%; } .mm-line.w40 { width: 40%; }
.mm-web-hero { margin: 10px 12px 0; height: 62px; border-radius: 9px; background: linear-gradient(135deg, #38BDF8, #2563EB); }
.mm-web-btn { display: inline-block; margin: 9px 12px 0; width: 74px; height: 20px; border-radius: 6px; background: var(--ink); }
.mm-pdf { display: flex; justify-content: center; align-items: center; background: linear-gradient(180deg, #F1F5F9, #E2E8F0); }
.mm-pdf-page { position: relative; width: 112px; height: 140px; background: #fff; border-radius: 6px; box-shadow: 0 8px 20px rgba(11,18,32,.12); padding-top: 34px; }
.mm-pdf-page::after { content: ""; pointer-events: none; position: absolute; top: 0; inset-inline-end: 0; width: 22px; height: 22px; background: linear-gradient(225deg, #CBD5E1 50%, #fff 50%); border-start-end-radius: 6px; }
.mm-pdf-badge { position: absolute; top: 10px; inset-inline-start: 10px; font-size: 10px; font-weight: 800; color: #fff; background: #DC2626; padding: 2px 6px; border-radius: 4px; }
.mm-pdf-page .mm-line { margin-inline: 10px; height: 6px; margin-top: 7px; }
.mm-gate { display: flex; flex-direction: column; justify-content: center; padding: 14px; background: linear-gradient(160deg, #F5F3FF, #fff); }
.mm-gate b { font-size: 13px; color: var(--ink); }
.mm-gate small { font-size: 10.5px; color: var(--muted); margin-top: 3px; }
.mm-input { margin-top: 10px; height: 26px; border-radius: 7px; border: 1px solid var(--line-strong); background: #fff; font-size: 10.5px; line-height: 24px; padding-inline: 9px; color: #94A3B8; }
.mm-gold { margin-top: 8px; height: 28px; border-radius: 7px; background: linear-gradient(180deg, var(--gold-top), var(--gold-bottom)); border: 1px solid var(--gold-edge); font-size: 11px; font-weight: 800; color: #111; display: flex; align-items: center; justify-content: center; }
.mm-sale { padding: 10px; display: flex; flex-direction: column; background: #fff; }
.mm-sale-cover { height: 70px; border-radius: 9px; background: linear-gradient(135deg, #1E3A8A, #2563EB 55%, #60A5FA); position: relative; }
.mm-sale-cover::after { content: ""; pointer-events: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.92); }
.mm-sale-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; font-size: 11.5px; color: var(--ink); font-weight: 700; }
.mm-sale-row span { color: var(--muted); font-weight: 500; font-size: 10px; }

/* Link superpowers (chips + analytics card) */
.sellp-powers { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; margin-top: 22px; align-items: stretch; }
.sellp-power-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sellp-power-list li { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.sellp-power-list .ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--primary-soft); color: var(--primary-ink); }
.sellp-power-list strong { display: block; font-size: 14.5px; color: var(--ink); }
.sellp-power-list span:not(.ic) { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.sellp-analytics { background: var(--navy); color: #fff; border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; }
.sellp-analytics-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: rgba(255,255,255,.7); }
.sellp-analytics-h b { font-size: 26px; color: #fff; font-weight: 800; }
.sellp-bars { display: flex; align-items: flex-end; gap: 6px; height: 86px; margin-top: 14px; }
.sellp-bars i { flex: 1; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #60A5FA, #2563EB); }
.sellp-bars i:last-child { background: linear-gradient(180deg, var(--gold-top), var(--gold-bottom)); }
.sellp-geo { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; }
.sellp-geo li { display: grid; grid-template-columns: 36px 1fr 38px; align-items: center; gap: 8px; font-size: 12px; color: rgba(255,255,255,.8); }
.sellp-geo li i { height: 6px; border-radius: 3px; background: rgba(255,255,255,.14); position: relative; overflow: hidden; }
.sellp-geo li i::after { content: ""; pointer-events: none; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--w); background: #4ADE80; border-radius: 3px; }
.sellp-geo li b { text-align: end; font-weight: 700; color: #fff; }

/* Steps */
.sellp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: step; }
.sellp-step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 18px 22px; box-shadow: var(--shadow-sm); }
.sellp-step-n { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 800; font-size: 14px; }
.sellp-step h3 { font-size: 19px; margin-top: 14px; }
.sellp-step p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.sellp-step .mm { margin-top: 14px; }
.mm-editor { padding: 12px; background: #fff; }
.mm-field { display: flex; justify-content: space-between; align-items: center; height: 26px; border: 1px solid var(--line); border-radius: 7px; padding-inline: 9px; font-size: 10.5px; color: var(--muted); margin-bottom: 7px; }
.mm-field b { color: var(--ink); font-size: 11px; }
.mm-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 7px; }
.mm-thumbs i { aspect-ratio: 1; border-radius: 6px; background: linear-gradient(135deg, #BFDBFE, #60A5FA); }
.mm-thumbs i:nth-child(2) { background: linear-gradient(135deg, #FDE68A, #F59E0B); }
.mm-thumbs i:nth-child(3) { background: linear-gradient(135deg, #C7D2FE, #6366F1); }
.mm-thumbs i:nth-child(4) { background: var(--bg-soft); border: 1.5px dashed var(--line-strong); }
.mm-ig { padding: 14px; background: #fff; display: flex; flex-direction: column; align-items: center; text-align: center; }
.mm-ig-av { width: 46px; height: 46px; border-radius: 50%; padding: 2px; background: conic-gradient(#F59E0B, #EC4899, #8B5CF6, #F59E0B); }
.mm-ig-av i { display: block; width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(135deg, #1E3A8A, #60A5FA); border: 2px solid #fff; }
.mm-ig b { margin-top: 7px; font-size: 12px; color: var(--ink); }
.mm-ig small { font-size: 10.5px; color: var(--muted); }
.mm-ig-link { margin-top: 8px; display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; color: var(--primary-ink); background: var(--primary-soft); padding: 4px 9px; border-radius: 999px; }
.mm-ig-dm { margin-top: 9px; align-self: flex-end; max-width: 80%; font-size: 10.5px; background: linear-gradient(135deg, #8B5CF6, #EC4899); color: #fff; padding: 6px 10px; border-radius: 12px 12px 3px 12px; text-align: start; }
html[dir="rtl"] .mm-ig-dm { align-self: flex-start; border-radius: 12px 12px 12px 3px; }
.mm-mail { padding: 12px; background: #fff; }
.mm-mail-h { display: flex; align-items: center; gap: 8px; }
.mm-mail-h i { width: 26px; height: 26px; border-radius: 50%; background: var(--primary-soft); }
.mm-mail-h b { font-size: 11.5px; color: var(--ink); }
.mm-mail-h small { display: block; font-size: 10px; color: var(--muted); font-weight: 500; }
.mm-mail .mm-gold { margin-top: 12px; }
.mm-notif { position: absolute; inset-inline-end: 10px; bottom: 10px; display: flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 6px 9px; box-shadow: var(--shadow); font-size: 10px; color: var(--muted); }
.mm-notif b { display: block; font-size: 12.5px; color: #15803D; }
.mm-notif .ok { width: 20px; height: 20px; border-radius: 50%; background: #DCFCE7; color: #166534; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }

/* What you can sell */
.sellp-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.sellp-product { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; }
.sellp-product:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.sellp-cover { position: relative; aspect-ratio: 4 / 3; display: flex; align-items: flex-end; padding: 14px; color: #fff; }
.sellp-cover > svg { position: absolute; top: 14px; inset-inline-end: 14px; opacity: .9; }
.sellp-cover em { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: rgba(0,0,0,.22); padding: 3px 8px; border-radius: 999px; }
.c-book  { background: linear-gradient(135deg, #F97316, #EC4899); }
.c-tpl   { background: linear-gradient(135deg, #10B981, #0EA5E9); }
.c-course{ background: linear-gradient(135deg, #6366F1, #2563EB); }
.c-coach { background: linear-gradient(135deg, #0B1220, #475569); }
.sellp-product-body { padding: 14px 16px 18px; }
.sellp-product h3 { font-size: 17px; }
.sellp-product p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.sellp-deliver { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 12px; font-weight: 700; color: #15803D; background: #DCFCE7; padding: 4px 10px; border-radius: 999px; }

/* Bento: inside every sales page */
.sellp-bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(210px, auto); gap: 18px; }
.sellp-tile { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.sellp-tile h3 { font-size: 18px; }
.sellp-tile p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.sellp-tile.big { grid-column: span 2; }
.sellp-tile.dark { background: var(--navy); border-color: var(--navy); }
.sellp-tile.dark h3 { color: #fff; }
.sellp-tile.dark p { color: rgba(255,255,255,.75); }
.t-gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; margin-top: auto; padding-top: 16px; }
.t-gallery i { border-radius: 10px; min-height: 64px; background: linear-gradient(135deg, #BFDBFE, #3B82F6); position: relative; }
.t-gallery i:first-child { grid-row: span 2; min-height: 136px; background: linear-gradient(135deg, #1E3A8A, #2563EB 55%, #60A5FA); }
.t-gallery i:first-child::after { content: ""; pointer-events: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.95); }
.t-gallery i:nth-child(2) { background: linear-gradient(135deg, #FDE68A, #F59E0B); }
.t-gallery i:nth-child(3) { background: linear-gradient(135deg, #FBCFE8, #EC4899); }
.t-gallery i:nth-child(4) { background: linear-gradient(135deg, #A7F3D0, #10B981); }
.t-gallery i:nth-child(5) { background: linear-gradient(135deg, #DDD6FE, #8B5CF6); }
.t-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; font-size: 13.5px; color: var(--ink-2); }
.t-list li { display: flex; gap: 8px; align-items: baseline; }
.t-list li::before { content: "\2713"; color: #16a34a; font-weight: 800; }
.t-list li.no::before { content: "\2715"; color: #dc2626; }
.t-langs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 16px; }
.t-langs span { font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.18); }
.t-langs span:first-child { background: var(--gold-top); color: #111; border-color: var(--gold-edge); }
.t-card { margin-top: auto; padding-top: 16px; display: grid; gap: 7px; }
.t-card .mm-input { margin: 0; display: flex; justify-content: space-between; }
.t-card .mm-gold { margin: 0; height: 34px; font-size: 12.5px; }
.t-open { margin-top: auto; padding-top: 16px; display: flex; align-items: center; gap: 10px; }
.t-open .ok { width: 34px; height: 34px; border-radius: 50%; background: #DCFCE7; color: #166534; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.t-open .mm-gold { flex: 1; margin: 0; height: 36px; font-size: 13px; }
.t-thanks { margin-top: auto; padding-top: 14px; }
.t-thanks div { border-radius: 12px; padding: 12px 14px; background: #F0FDF4; border: 1px solid #BBF7D0; font-size: 13px; color: #14532D; line-height: 1.5; }

/* Tracking pipeline */
.sellp-track { background: var(--navy); color: #fff; position: relative; overflow: hidden; }
.sellp-track::before { content: ""; pointer-events: none; position: absolute; inset: 0; background: radial-gradient(800px 400px at 50% 0%, rgba(37,99,235,.35), rgba(37,99,235,0) 70%); }
.sellp-track .container { position: relative; }
.sellp-track h2 { color: #fff; }
.sellp-track .eyebrow { background: rgba(255,255,255,.10); color: #fff; }
.sellp-track .eyebrow .dot { background: var(--gold-top); }
.sellp-track .lede { color: rgba(255,255,255,.78); }
.sellp-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; position: relative; }
.sellp-flow::before { content: ""; pointer-events: none; position: absolute; top: 31px; inset-inline: 12%; border-top: 2px dashed rgba(147,197,253,.45); }
.sellp-flow li { position: relative; text-align: center; padding: 0 6px; }
.sellp-flow .node { width: 62px; height: 62px; margin: 0 auto; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: #1E293B; border: 1px solid rgba(255,255,255,.14); color: #93C5FD; }
.sellp-flow li:last-child .node { background: linear-gradient(180deg, var(--gold-top), var(--gold-bottom)); color: #111; border-color: var(--gold-edge); box-shadow: 0 0 0 8px rgba(245,164,0,.16); }
.sellp-flow strong { display: block; margin-top: 12px; font-size: 15px; color: #fff; }
.sellp-flow code { display: inline-block; margin-top: 5px; font-size: 11.5px; color: #93C5FD; background: rgba(147,197,253,.1); padding: 2px 7px; border-radius: 6px; }
.sellp-dest { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.sellp-dest div { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); font-size: 14px; }
.sellp-dest b { color: #fff; }
.sellp-dest span { color: rgba(255,255,255,.65); font-size: 12.5px; display: block; }
.sellp-dest .ic { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: #2563EB; color: #fff; font-weight: 800; font-size: 13px; }
.sellp-dest .ic.ga { background: #F59E0B; color: #111; }

/* Split layout, checklists, lead cards (story + comment to DM) */
.sellp-split { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.sellp-split h2 { margin-top: 18px; }
.sellp-split .lede { margin-top: 16px; }
.sellp-checks { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.sellp-checks li { display: flex; gap: 10px; align-items: baseline; font-size: 15.5px; color: var(--ink-2); line-height: 1.5; }
.sellp-checks li::before { content: "\2713"; flex: 0 0 auto; color: #16a34a; font-weight: 800; }
.sellp-lead { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px; margin-bottom: 10px; box-shadow: var(--shadow-sm); }
.sellp-lead b { display: block; font-size: 13px; color: var(--ink); }
.sellp-lead small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.sellp-lead em { display: inline-block; margin-top: 7px; font-style: normal; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: #EDE9FE; color: #5B21B6; }
.sellp-lead em.ad { background: #E0F2FE; color: #075985; }

/* Comparison table */
.sellp-table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow); background: #fff; }
.sellp-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.sellp-table th, .sellp-table td { padding: 14px 18px; text-align: start; border-bottom: 1px solid var(--line); font-size: 15px; vertical-align: middle; }
.sellp-table thead th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--bg); }
.sellp-table thead th.mz { color: #fff; background: var(--primary); }
.sellp-table tbody th { font-weight: 600; color: var(--ink); }
.sellp-table td.old { color: var(--muted); }
.sellp-table td.old::before { content: "\2715"; color: #dc2626; font-weight: 800; margin-inline-end: 8px; }
.sellp-table td.mz { color: var(--ink); font-weight: 600; background: #F5F9FF; }
.sellp-table td.mz::before { content: "\2713"; color: #16a34a; font-weight: 800; margin-inline-end: 8px; }
.sellp-table tbody tr:last-child th, .sellp-table tbody tr:last-child td { border-bottom: 0; }

/* Sales dashboard mock */
.sellp-dash { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.sellp-dash-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--bg); }
.sellp-dash-top b { font-size: 14px; color: var(--ink); }
.sellp-dash-kpis { display: flex; gap: 18px; }
.sellp-dash-kpis span { font-size: 11.5px; color: var(--muted); }
.sellp-dash-kpis strong { display: block; font-size: 17px; color: var(--ink); }
.sellp-dash-row { display: grid; grid-template-columns: 1.2fr 1.6fr 1fr .8fr 1fr; gap: 10px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.sellp-dash-row:last-child { border-bottom: 0; }
.sellp-dash-row .who { display: flex; align-items: center; gap: 9px; }
.sellp-dash-row .av { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 12px; }
.sellp-dash-row .amt { font-weight: 800; color: #15803D; text-align: end; }
.sellp-dash-row .rc { color: var(--primary-ink); font-weight: 600; }
.sellp-dash-row .offer { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: #EDE9FE; color: #5B21B6; justify-self: start; }

/* FAQ */
.sellp-faq { max-width: 820px; margin: 0 auto; display: grid; gap: 10px; }
.sellp-faq details { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; }
.sellp-faq summary { cursor: pointer; font-weight: 700; font-size: 16.5px; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.sellp-faq summary::-webkit-details-marker { display: none; }
.sellp-faq summary::after { content: "+"; color: var(--primary); font-size: 20px; line-height: 1; }
.sellp-faq details[open] summary::after { content: "\2212"; }
.sellp-faq p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }

/* Related + final CTA */
.sellp-related { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.sellp-related a { font-size: 14px; font-weight: 600; color: var(--primary-ink); background: var(--primary-soft); padding: 8px 14px; border-radius: 999px; }
.sellp-final {
  position: relative; overflow: hidden; border-radius: var(--radius-xl); padding: clamp(32px, 5vw, 64px);
  text-align: center; color: #fff;
  background: radial-gradient(600px 300px at 80% 0%, rgba(245,164,0,.35), rgba(245,164,0,0) 70%), linear-gradient(135deg, var(--navy), #1E3A8A);
}
.sellp-final h2 { color: #fff; }
.sellp-final p { margin: 14px auto 0; max-width: 56ch; color: rgba(255,255,255,.8); font-size: clamp(16px, 1.4vw, 19px); }
.sellp-final .hero-cta-row { justify-content: center; margin-top: 26px; }

@media (max-width: 1020px) {
  .sellp-face-grid, .sellp-products { grid-template-columns: repeat(2, 1fr); }
  .sellp-powers { grid-template-columns: 1fr; }
  .sellp-bento { grid-template-columns: 1fr 1fr; }
  .sellp-tile.big { grid-column: span 2; }
  .sellp-rays { display: none; }
}
@media (max-width: 920px) {
  .sellp-hero-grid, .sellp-split { grid-template-columns: 1fr; }
  .sellp-steps { grid-template-columns: 1fr; }
  .sellp-stats ul { grid-template-columns: repeat(2, 1fr); }
  .sellp-flow { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
  .sellp-flow::before { display: none; }
}
@media (max-width: 600px) {
  .sellp-face-grid, .sellp-products, .sellp-bento, .sellp-power-list { grid-template-columns: 1fr; }
  .sellp-tile.big { grid-column: auto; }
  .sellp-dash-row { grid-template-columns: 1.4fr 1fr; }
  .sellp-dash-row .prod, .sellp-dash-row .offer, .sellp-dash-row .rc { display: none; }
  .sellp-dash-kpis { display: none; }
  .sellp-hub-link { font-size: 14px; }
}

/* Story: post to payment */
.sellp-story { list-style: none; margin: 0; padding: 0; position: relative; }
.sellp-story::before {
  content: ""; pointer-events: none; position: absolute; top: 20px; bottom: 20px; left: 50%; transform: translateX(-50%);
  border-inline-start: 2px dashed #BFDBFE;
}
.st { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: center; padding: 26px 0; }
.st-num {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff; font-weight: 800; font-size: 17px; box-shadow: 0 0 0 7px #fff, 0 0 0 9px #DBEAFE;
}
.st:last-child .st-num { background: linear-gradient(180deg, var(--gold-top), var(--gold-bottom)); color: #111; box-shadow: 0 0 0 7px #fff, 0 0 0 9px #FDE68A; }
.st:nth-child(even) .st-text { order: 2; }
.st-text h3 { font-size: clamp(20px, 2vw, 26px); }
.st-text p { margin: 8px 0 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 46ch; }
.st-out { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-size: 13.5px; font-weight: 700; color: #15803D; background: #DCFCE7; padding: 5px 12px; border-radius: 999px; }
.st-out::before { content: "\2191"; }
.st-vis { display: flex; justify-content: center; }
.st-card { width: min(340px, 100%); background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; position: relative; }
/* IG post */
.ig-head { display: flex; align-items: center; gap: 9px; padding: 10px 12px; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.ig-head .mm-ig-av { width: 30px; height: 30px; }
.ig-img { position: relative; aspect-ratio: 4 / 3.4; background: linear-gradient(160deg, #1E3A8A, #7C3AED 60%, #EC4899); display: flex; align-items: flex-end; justify-content: center; padding: 16px; }
.ig-img::before { content: ""; pointer-events: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.9); }
.ig-cap { position: relative; font-size: 15px; font-weight: 800; color: #fff; background: rgba(0,0,0,.35); padding: 7px 14px; border-radius: 999px; }
.ig-cap b { color: var(--gold-top); }
.ig-acts { display: flex; gap: 14px; padding: 10px 12px 4px; color: var(--ink); }
.ig-comments { list-style: none; margin: 0; padding: 4px 12px 12px; display: grid; gap: 5px; font-size: 12.5px; color: var(--ink-2); }
.ig-comments b { margin-inline-end: 6px; }
.ig-comments mark { background: #FEF3C7; color: #92400E; font-weight: 800; padding: 0 5px; border-radius: 4px; }
/* DM thread */
.dm { padding: 12px; display: flex; flex-direction: column; gap: 8px; background: #fff; }
.dm-h { display: flex; align-items: center; gap: 9px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 700; color: var(--ink); }
.dm-h small { display: block; font-weight: 500; color: var(--muted); font-size: 11px; }
.dm-b { max-width: 82%; font-size: 13px; line-height: 1.45; padding: 8px 12px; border-radius: 16px; }
.dm-b.in { align-self: flex-start; background: var(--bg-soft); color: var(--ink); border-end-start-radius: 4px; }
.dm-b.out { align-self: flex-end; background: linear-gradient(135deg, #8B5CF6, #EC4899); color: #fff; border-end-end-radius: 4px; }
.dm-link { display: block; margin-top: 6px; padding: 7px 10px; border-radius: 10px; background: rgba(255,255,255,.18); font-weight: 700; font-size: 12px; }
.dm-auto { align-self: center; font-size: 10.5px; font-weight: 700; color: var(--muted); background: var(--bg); border: 1px solid var(--line); padding: 3px 9px; border-radius: 999px; }
/* Gate / CRM / sale cards inside story */
.st-card .mm-gate { min-height: 220px; padding: 22px; }
.st-card .mm-gate b { font-size: 17px; }
.st-card .mm-gate small { font-size: 13px; }
.st-card .mm-input { height: 36px; line-height: 34px; font-size: 13px; }
.st-card .mm-gold { height: 40px; font-size: 13.5px; }
.st-crm { padding: 14px; background: var(--bg-soft); }
.st-crm .sellp-lead { margin-bottom: 8px; }
.st-crm-h { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.st-phone { padding: 16px; display: flex; justify-content: center; background: linear-gradient(160deg, #EEF4FF, #fff); }
.st-phone .sell-phone { width: 250px; border-width: 8px; border-radius: 32px; padding: 22px 12px 14px; }
.st-phone .sell-p-facts b { font-size: 11px; }
.st-phone .sell-p-facts span { font-size: 9px; }
.st-win { padding: 16px; background: linear-gradient(160deg, #F0FDF4, #fff); display: grid; gap: 10px; }
.st-win .mm-notif { position: static; box-shadow: var(--shadow); font-size: 12px; padding: 10px 12px; }
.st-win .mm-notif b { font-size: 16px; }
.st-win-row { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 12.5px; color: var(--ink-2); }
.st-win-row i { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; font-size: 12px; color: #fff; background: #2563EB; flex: 0 0 auto; }
.st-win-row i.mail { background: #8B5CF6; }
.st-win-row i.dash { background: #10B981; }

/* Use cases */
.sellp-uc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sellp-uc .sellp-product-body h3 { font-size: 18px; }
.uc-who { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--primary-ink); }
.uc-out { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line-strong); font-size: 14px; font-weight: 700; color: var(--ink); display: flex; gap: 8px; }
.uc-out::before { content: "\2192"; color: var(--primary); }
html[dir="rtl"] .uc-out::before { content: "\2190"; }
.uc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.uc-chips span { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--bg-soft); color: var(--ink-2); border: 1px solid var(--line); }
.c-agency { background: linear-gradient(135deg, #0EA5E9, #6366F1); }
.c-event  { background: linear-gradient(135deg, #F59E0B, #EF4444); }

/* Comment to DM */
.sellp-dm { background: linear-gradient(180deg, #FDF4FF 0%, var(--bg) 100%); }
.sellp-dm-vis { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.sellp-dm-vis .st-card { width: 100%; }
.sellp-dm-vis .st-card + .st-card { margin-top: 48px; }
.sellp-dm .eyebrow { background: #FCE7F3; color: #9D174D; }
.sellp-dm .eyebrow .dot { background: #EC4899; }

@media (max-width: 1020px) {
  .sellp-uc { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 920px) {
  .sellp-story::before { left: auto; inset-inline-start: 21px; transform: none; }
  .st { grid-template-columns: 1fr; gap: 18px; padding-block: 22px; padding-inline: 60px 0; }
  .st-num { top: 22px; left: auto; inset-inline-start: 0; transform: none; }
  .st:nth-child(even) .st-text { order: 0; }
  .st-vis { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .sellp-uc { grid-template-columns: 1fr; }
  .sellp-dm-vis { grid-template-columns: 1fr; }
  .sellp-dm-vis .st-card + .st-card { margin-top: 0; }
}

/* Use case cover mini card + full-width bento tile */
.sellp-uc .sellp-cover { aspect-ratio: 16 / 8; align-items: center; justify-content: center; overflow: hidden; }
.sellp-uc .sellp-cover::before {
  content: ""; pointer-events: none; position: absolute; width: 180px; height: 180px; border-radius: 50%;
  background: rgba(255,255,255,.12); top: -70px; inset-inline-end: -50px;
}
.uc-mock {
  position: relative; display: flex; align-items: center; gap: 10px; width: 78%;
  background: #fff; border-radius: 14px; padding: 10px 12px; box-shadow: 0 14px 30px -12px rgba(11,18,32,.45);
  transform: rotate(-2deg);
}
.uc-mock-ic { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--primary-soft); color: var(--primary-ink); }
.uc-mock-lines { flex: 1; display: grid; gap: 6px; }
.uc-mock-lines i { height: 8px; border-radius: 4px; background: #E2E8F0; }
.uc-mock-lines i:last-child { width: 60%; background: var(--bg-soft); }
.uc-mock b { font-size: 13px; font-weight: 800; color: #111; background: linear-gradient(180deg, var(--gold-top), var(--gold-bottom)); padding: 4px 9px; border-radius: 8px; }
.sellp-tile.wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; align-items: center; align-content: center; }
.sellp-tile.wide .t-thanks { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding: 0; }
@media (max-width: 600px) {
  .sellp-tile.wide { grid-template-columns: 1fr; }
  .sellp-tile.wide .t-thanks { grid-column: auto; grid-row: auto; padding-top: 14px; }
}

/* Lead-signal simulation */
.sellp-sim-sec { background: linear-gradient(180deg, var(--bg) 0%, #EEF4FF 55%, var(--bg) 100%); }
.sellp-sim { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: clamp(14px, 2vw, 22px); }
.sim-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.sim-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); background: var(--bg); border: 1px solid var(--line); padding: 5px 11px; border-radius: 999px; }
.sim-chip b { color: var(--muted); font-weight: 700; text-transform: uppercase; font-size: 10.5px; letter-spacing: .06em; margin-inline-end: 2px; }
.sim-replay { margin-inline-start: auto; font-size: 12.5px; font-weight: 700; color: var(--primary-ink); background: var(--primary-soft); border: 0; padding: 6px 12px; border-radius: 999px; }
.sim-grid { display: grid; grid-template-columns: 1.65fr 1fr; gap: 16px; align-items: stretch; }
.sim-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sim-col { background: var(--bg-soft); border-radius: 14px; padding: 10px; min-height: 300px; display: flex; flex-direction: column; gap: 8px; }
.sim-col-h { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 2px; }
.sim-col-h i { width: 8px; height: 8px; border-radius: 50%; background: #3B82F6; flex: 0 0 auto; }
.sim-col-h span { margin-inline-start: auto; color: var(--muted); font-weight: 700; }
.c-follow .sim-col-h i { background: #F59E0B; }
.c-won { background: #F0FDF4; }
.c-won .sim-col-h i { background: #16A34A; }
.c-unq { background: #FEF2F2; }
.c-unq .sim-col-h i { background: #DC2626; }
.sim-card { background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 9px 10px; box-shadow: var(--shadow-sm); }
.sim-card b { display: block; font-size: 13px; color: var(--ink); }
.sim-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.sim-tags span { font-size: 10px; color: var(--ink-2); background: var(--bg); border: 1px solid var(--line); padding: 1px 6px; border-radius: 999px; }
.sim-badge { display: inline-block; margin-top: 7px; font-style: normal; font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.b-call, .b-qualified { background: #FEF3C7; color: #92400E; }
.b-low { background: #FEE2E2; color: #991B1B; }
.b-deal { background: #DCFCE7; color: #166534; }
.sim-card.s-won { border-color: #86EFAC; box-shadow: 0 0 0 3px rgba(22,163,74,.12); }
.sim-card.s-unq { opacity: .7; }
.sim-signals { background: var(--navy); color: #fff; border-radius: 16px; padding: 14px; display: flex; flex-direction: column; }
.sim-signals-h { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 800; margin-bottom: 10px; }
.sim-signals-h .ic { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: #2563EB; font-weight: 800; }
.sim-signals ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.sig { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 3px; align-items: baseline; font-size: 12px; line-height: 1.4; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.sig b { color: #fff; font-size: 12px; }
.sig span { color: rgba(255,255,255,.8); }
.sig code { grid-column: 2; justify-self: start; font-size: 11px; padding: 1px 7px; border-radius: 6px; background: rgba(147,197,253,.14); color: #BFDBFE; }
.sig.mute { background: transparent; border-style: dashed; }
.sig.mute span { color: rgba(255,255,255,.55); }
.sig.mute::before { content: none; }
.sig.no span { color: #FCA5A5; }
.sig.gold { background: linear-gradient(135deg, rgba(255,200,61,.22), rgba(245,164,0,.12)); border-color: rgba(255,200,61,.55); box-shadow: 0 0 22px -6px rgba(245,164,0,.6); }
.sig.gold span { color: #fff; font-weight: 700; }
.sig.gold code { background: linear-gradient(180deg, var(--gold-top), var(--gold-bottom)); color: #111; font-weight: 800; }
.sim-summary { margin-top: auto; padding-top: 12px; font-size: 13px; font-weight: 700; color: #4ADE80; }
.sim-explain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px; }
.sim-explain > div { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px; }
.sim-explain h3 { font-size: 17px; margin-top: 10px; }
.sim-explain p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.sim-n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 800; font-size: 13px; }
.sim-n.gold { background: linear-gradient(180deg, var(--gold-top), var(--gold-bottom)); color: #111; }
.sim-note { margin: 16px auto 0; max-width: 760px; text-align: center; font-size: 13.5px; color: var(--muted); }
@media (max-width: 1020px) {
  .sim-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .sim-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sim-col { min-height: 170px; }
  .sim-explain { grid-template-columns: 1fr; }
}