/*
 * Authoring stylesheet for landing HTML drafts in wwwroot/landing-pages/.
 *
 * Production styles ship in the marketing theme:
 *   o2vend-webstore/themes/o2vend-marketing/assets/landing.css
 * When you change component classes here, update the theme file and deploy the theme.
 * Backoffice CMS pastes BODY HTML only; theme layout + landing.css render the page.
 */
:root {
  --mkt-orange: #F4832A;
  --mkt-orange-deep: #ff6600;
  --mkt-cta: #4caf50;
  --mkt-cta-hover: #45a049;
  --mkt-dark: #050e20;
  --mkt-ink: #1D1D1B;
  --mkt-muted: #5b6470;
  --mkt-bg: #ffffff;
  --mkt-surface: #F9F7F2;
  --mkt-surface-alt: #F1F3F5;
  --mkt-border: #e5e2db;
  --mkt-font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --mkt-font-body: "Inter", system-ui, -apple-system, sans-serif;
  --mkt-radius: 12px;
  --mkt-radius-sm: 8px;
  --mkt-shadow: 0 18px 50px rgba(5, 14, 32, 0.12);
  --mkt-container: 1120px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--mkt-font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--mkt-ink);
  background: var(--mkt-bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--mkt-orange-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 {
  font-family: var(--mkt-font-display);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.03em;
  margin: 0 0 0.5em;
  color: var(--mkt-dark);
}
h1 { font-size: clamp(2.25rem, 4.6vw, 3.25rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.35rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1em; color: var(--mkt-muted); max-width: 42rem; }
ul, ol { color: var(--mkt-muted); }
.container { width: min(100% - 3rem, var(--mkt-container)); margin-inline: auto; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  border-radius: 10px; padding: 0.85rem 1.4rem;
  font-family: var(--mkt-font-body); font-weight: 600; font-size: 0.875rem;
  border: 1.5px solid transparent; cursor: pointer;
  text-decoration: none !important; transition: all 0.18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--mkt-cta); color: #fff !important; border-color: var(--mkt-cta); }
.btn--primary:hover { background: var(--mkt-cta-hover); }
.btn--ghost { background: #4caf50 !important; color: #ffffff!important; border-color: rgba(29, 29, 27, 0.18); }
.btn--ghost:hover { border-color: var(--mkt-dark); background: var(--mkt-surface); }
.btn--sm { padding: 0.5rem 0.95rem; font-size: 0.8rem; }
.cta-group { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.hero {
  padding: 4.5rem 0 3.5rem;
  background: radial-gradient(800px 400px at 80% 20%, rgba(244, 131, 42, 0.12), transparent 60%),
              linear-gradient(180deg, #fff 0%, var(--mkt-surface) 100%);
}
.hero--center { text-align: center; }
.hero--center p { margin-inline: auto; }
.hero--center .cta-group { justify-content: center; }
.hero--dark { background: var(--mkt-dark); color: #fff; }
.hero--dark h1, .hero--dark h2 { color: #fff; }
.hero--dark p { color: rgba(255, 255, 255, 0.85); }
.hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; text-align: center; }
  .hero__copy p { margin-inline: auto; }
  .hero__grid .cta-group { justify-content: center; }
}
.eyebrow {
  display: inline-block; font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--mkt-orange-deep); margin-bottom: 0.75rem;
}
.hero--dark .eyebrow { color: var(--mkt-orange); }
.hero__visual img { border-radius: 16px; box-shadow: var(--mkt-shadow); }
.hero__visual--box {
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px; padding: 2rem; min-height: 280px;
  display: flex; align-items: center; justify-content: center;
}
.hero__visual--box span { font-size: 4rem; }

.section { padding: 4.5rem 0; }
.section--alt { background: var(--mkt-surface); }
.section--dark { background: var(--mkt-dark); color: #fff; }
.section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark p { color: rgba(255, 255, 255, 0.78); }
.section__header { text-align: center; max-width: 42rem; margin: 0 auto 2.5rem; }
.section__header p { margin-inline: auto; font-size: 1.125rem; }
.section__header--left { text-align: center; margin-left: 0; margin-right: 0; max-width: 92rem; }
.section__header--left p { margin-inline: 0; }

.prose { max-width: 94rem !important; text-align: center !important; }
.prose p { max-width: none; }
.prose--wide { max-width: 52rem; margin-inline: auto; }
.prose--wide p { max-width: none; }
.prose ul, .prose ol { margin: 0 0 1.25rem; padding-left: 1.25rem; }
.prose li { margin-bottom: 0.4rem; }
.lead { font-size: 1.125rem; line-height: 1.7; max-width: 44rem; }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 900px) { .features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }
.features--2 { grid-template-columns: repeat(2, 1fr); }
.features--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .features--4 { grid-template-columns: 1fr 1fr; } }
.feature {
  background: #fff; border: 1px solid var(--mkt-border); border-radius: var(--mkt-radius);
  padding: 1.5rem; transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.feature:hover { border-color: rgba(244, 131, 42, 0.4); box-shadow: 0 12px 28px rgba(5, 14, 32, 0.08); }
.feature__icon {
  width: 44px; height: 44px; border-radius: 10px; background: var(--mkt-dark);
  color: var(--mkt-orange); display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; margin-bottom: 1rem;
}
.feature h3 { margin-bottom: 0.5rem; }
.feature p { margin: 0; font-size: 0.875rem; }
.feature ul { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.feature li {
  position: relative; padding: 0.3rem 0 0.3rem 1.1rem;
  font-size: 0.85rem; color: var(--mkt-muted);
}
.feature li::before {
  content: ""; position: absolute; left: 0; top: 0.65rem;
  width: 0.35rem; height: 0.35rem; border-radius: 50%; background: var(--mkt-cta);
}

.benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
@media (max-width: 900px) { .benefits { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .benefits { grid-template-columns: 1fr; } }
.benefit {
  text-align: center; padding: 1.5rem;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--mkt-radius);
}
.benefit--light {
  background: #fff; border: 1px solid var(--mkt-border); text-align: left;
}
.benefit__stat {
  font-family: var(--mkt-font-display); font-size: 2rem; font-weight: 800;
  color: var(--mkt-orange); margin-bottom: 0.25rem;
}
.benefit span, .benefit p { font-size: 0.875rem; margin: 0; }
.benefit h3 { font-size: 1rem; margin-bottom: 0.35rem; }

.process {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.5rem 0.35rem; max-width: 900px; margin: 0 auto;
}
.process__step {
  background: #fff; border: 1px solid var(--mkt-border); border-radius: 10px;
  padding: 0.75rem 1rem; font-weight: 600; font-size: 0.875rem; color: var(--mkt-dark);
  text-align: center; min-width: 7.5rem;
}
.section--dark .process__step {
  background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); color: #fff;
}
.process__arrow {
  color: var(--mkt-orange); font-weight: 700; font-size: 1.1rem; padding: 0 0.15rem;
}
.process--vertical {
  flex-direction: column; align-items: stretch; max-width: 320px;
}
.process--vertical .process__arrow { text-align: center; transform: rotate(90deg); }

.industries { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 900px) { .industries { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .industries { grid-template-columns: 1fr; } }
.industry {
  background: #fff; border: 1px solid var(--mkt-border); border-radius: var(--mkt-radius);
  padding: 1.25rem; text-align: center;
}
.industry__icon { font-size: 1.75rem; margin-bottom: 0.5rem; }
.industry h3 { font-size: 1rem; margin-bottom: 0.25rem; }
.industry p { margin: 0; font-size: 0.8rem; max-width: none; }

.faq__list { max-width: 760px; margin: 0 auto; }
.faq__item {
  border: 1px solid var(--mkt-border); border-radius: 8px;
  margin-bottom: 0.65rem; background: #fff;
}
.faq__item summary {
  cursor: pointer; padding: 1rem 1.15rem; font-weight: 600;
  color: var(--mkt-dark); list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; float: right; color: var(--mkt-orange); font-weight: 700;
}
.faq__item[open] summary::after { content: "–"; }
.faq__item p { margin: 0 1.15rem 1.1rem; font-size: 0.9rem; max-width: none; }

.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 900px) { .related { grid-template-columns: 1fr; } }
.related a {
  display: block; background: #fff; border: 1px solid var(--mkt-border);
  border-radius: var(--mkt-radius); padding: 1.25rem; color: var(--mkt-dark) !important;
  text-decoration: none !important; transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.related a:hover { border-color: rgba(244, 131, 42, 0.4); box-shadow: 0 12px 28px rgba(5, 14, 32, 0.08); }
.related h3 { font-size: 1rem; margin-bottom: 0.35rem; color: var(--mkt-dark); }
.related p { margin: 0; font-size: 0.85rem; max-width: none; }

.module {
  background: #fff; border: 1px solid var(--mkt-border); border-radius: var(--mkt-radius);
  padding: 1.75rem; margin-bottom: 1.25rem;
}
.module h3 { margin-bottom: 0.5rem; }
.module__meta {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem;
}
@media (max-width: 700px) { .module__meta { grid-template-columns: 1fr; } }
.module__meta h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--mkt-orange-deep); margin-bottom: 0.35rem; }
.module__meta p { margin: 0; font-size: 0.85rem; max-width: none; }

.agents { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 900px) { .agents { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .agents { grid-template-columns: 1fr; } }
.agent {
  background: #464646 !important; border: 1px solid var(--mkt-border); border-radius: var(--mkt-radius);
  padding: 1.5rem; transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.agent:hover { border-color: rgba(244, 131, 42, 0.4); box-shadow: 0 12px 28px rgba(5, 14, 32, 0.08); }
.agent__icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: linear-gradient(135deg, var(--mkt-dark), #0f3d6e);
  color: var(--mkt-orange); display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; margin-bottom: 1rem;
}
.agent h3 { margin-bottom: 0.5rem; }
.agent p { margin: 0 0 0.75rem; font-size: 0.875rem; }
.agent ul { list-style: none; margin: 0; padding: 0; }
.agent li {
  position: relative; padding: 0.35rem 0 0.35rem 1.15rem;
  font-size: 0.875rem; color: var(--mkt-muted);
}
.agent li::before {
  content: ""; position: absolute; left: 0; top: 0.65rem;
  width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--mkt-cta);
}
.agent__detail { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--mkt-border); }
.agent__detail strong { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--mkt-orange-deep); margin-bottom: 0.25rem; }

.compare__wrap {
  overflow-x: auto; border: 1px solid var(--mkt-border);
  border-radius: var(--mkt-radius); background: #fff; box-shadow: var(--mkt-shadow);
}
.compare table { width: 100%; border-collapse: collapse; min-width: 600px; }
.compare th, .compare td {
  padding: 1.1rem 1.4rem; text-align: left; border-bottom: 1px solid var(--mkt-border); font-size: 0.875rem;
}
.compare thead th { background: #1a2438; color: #fff; font-weight: 600; }
.compare thead th:last-child { background: var(--mkt-cta); }
.compare td:last-child { background: rgba(76, 175, 80, 0.06); font-weight: 600; color: var(--mkt-dark); }
.compare tr:last-child td { border-bottom: 0; }
.check { color: var(--mkt-cta); font-weight: 700; }
.cross { color: #c62828; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
@media (max-width: 800px) { .two-col { grid-template-columns: 1fr; } }
.card-list { list-style: none; margin: 0; padding: 0; }
.card-list li {
  background: #fff; border: 1px solid var(--mkt-border); border-radius: 10px;
  padding: 1rem 1.15rem; margin-bottom: 0.75rem; font-size: 0.9rem; color: var(--mkt-muted);
}
.card-list strong { color: var(--mkt-dark); }

.cta-section { text-align: center; padding: 4rem 0; background: var(--mkt-dark); color: #fff; }
.cta-section h2 { color: #fff; margin-bottom: 1rem; }
.cta-section p { color: rgba(255, 255, 255, 0.78); margin: 0 auto 1.5rem; }
.cta-section .cta-group { justify-content: center; }
.cta-section .btn--ghost { color: #fff !important; border-color: rgba(255, 255, 255, 0.35);  background color: #4caf50 !important; }
.cta-section--green { background: var(--mkt-cta); }
.cta-section--green p { color: rgba(255, 255, 255, 0.9); }
.cta-section--green .btn--primary { background: #fff; color: var(--mkt-cta) !important; border-color: #fff; }

.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; align-items: stretch; }
@media (max-width: 1100px) { .plans { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .plans { grid-template-columns: 1fr; } }
.plan {
  background: #fff; border: 1px solid var(--mkt-border); border-radius: var(--mkt-radius);
  padding: 1.75rem 1.5rem 1.5rem; display: flex; flex-direction: column; position: relative;
}
.plan--featured { border-color: var(--mkt-cta); box-shadow: 0 16px 40px rgba(76, 175, 80, 0.15); }
.plan__badge {
  position: absolute; top: 0.85rem; right: 0.85rem; background: var(--mkt-cta); color: #fff;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.25rem 0.55rem; border-radius: 6px;
}
.plan h3 { font-size: 1.1rem; margin-bottom: 0.25rem; }
.plan__audience { font-size: 0.875rem; color: var(--mkt-muted); margin-bottom: 0.75rem; }
.plan__from { font-size: 0.75rem; color: #8a929c; min-height: 1rem; }
.plan__price {
  font-family: var(--mkt-font-display); font-size: 1.75rem; font-weight: 700;
  color: var(--mkt-dark); margin: 0.25rem 0;
}
.plan__price small { font-size: 0.875rem; font-weight: 500; color: var(--mkt-muted); }
.plan__trial { font-size: 0.8rem; color: var(--mkt-orange-deep); font-weight: 600; margin-bottom: 1rem; min-height: 1.15rem; }
.plan ul { list-style: none; margin: 0 0 1.25rem; padding: 0; flex: 1; }
.plan li { padding: 0.5rem 0; border-bottom: 1px solid var(--mkt-border); font-size: 0.875rem; color: var(--mkt-muted); }
.plan li:last-child { border-bottom: 0; }
.plan .btn { width: 100%; margin-top: auto; }

.categories { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; }
@media (max-width: 900px) { .categories { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .categories { grid-template-columns: 1fr; } }
.category {
  background: #fff; border: 1px solid var(--mkt-border); border-radius: var(--mkt-radius);
  padding: 1.25rem; text-align: center; color: inherit !important; text-decoration: none !important;
  transition: border-color 0.18s ease;
}
.category:hover { border-color: var(--mkt-orange); }
.category__icon { font-size: 2rem; margin-bottom: 0.5rem; }
.category h3 { margin-bottom: 0.25rem; font-size: 1rem; }
.category span { font-size: 0.8rem; color: var(--mkt-muted); }

.apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
@media (max-width: 900px) { .apps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .apps { grid-template-columns: 1fr; } }
.app-card {
  background: #fff; border: 1px solid var(--mkt-border); border-radius: var(--mkt-radius);
  padding: 1.25rem; display: flex; flex-direction: column;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.app-card:hover { border-color: rgba(244, 131, 42, 0.4); box-shadow: 0 12px 28px rgba(5, 14, 32, 0.08); }
.app-card__logo {
  width: 48px; height: 48px; border-radius: 10px; background: var(--mkt-surface);
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 0.75rem;
}
.app-card h3 { margin-bottom: 0.25rem; font-size: 1rem; }
.app-card__cat { font-size: 0.75rem; color: var(--mkt-orange-deep); font-weight: 600; margin-bottom: 0.5rem; }
.app-card p { font-size: 0.8rem; margin-bottom: 1rem; flex: 1; max-width: none; }
.app-card__thumb {
  width: 100%; max-height: 140px; object-fit: cover; border-radius: 10px;
  margin-bottom: 0.75rem; background: var(--mkt-surface);
}
.app-card .btn { margin-top: auto; align-self: flex-start; }
.mkt-marketplace-status {
  grid-column: 1 / -1; margin: 0; padding: 1.5rem; text-align: center;
  color: var(--mkt-muted); font-size: 0.95rem;
}
.mkt-marketplace-note {
  margin-top: 1.25rem; font-size: 0.875rem; color: var(--mkt-muted); text-align: center;
}
.mkt-marketplace-note a { color: var(--mkt-orange-deep); font-weight: 600; }

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 900px) { .tiers { grid-template-columns: 1fr; } }
.tier {
  background: #fff; border: 1px solid var(--mkt-border); border-radius: var(--mkt-radius);
  padding: 2rem 1.5rem; text-align: center;
}
.tier--featured { border-color: var(--mkt-cta); box-shadow: 0 16px 40px rgba(76, 175, 80, 0.15); }
.tier__icon { font-size: 2.5rem; margin-bottom: 1rem; }
.tier__price {
  font-family: var(--mkt-font-display); font-size: 1.5rem; font-weight: 800;
  color: var(--mkt-dark); margin-bottom: 1rem;
}
.tier ul { list-style: none; margin: 0 0 1.5rem; padding: 0; text-align: left; }
.tier li { padding: 0.5rem 0; border-bottom: 1px solid var(--mkt-border); font-size: 0.875rem; color: var(--mkt-muted); }
.tier li:last-child { border-bottom: 0; }

.timeline { max-width: 640px; margin: 0 auto; border-left: 2px solid var(--mkt-border); padding-left: 1.5rem; }
.timeline__item { position: relative; margin-bottom: 1.75rem; }
.timeline__item::before {
  content: ""; position: absolute; left: -1.85rem; top: 0.35rem;
  width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--mkt-cta);
  border: 2px solid #fff; box-shadow: 0 0 0 2px var(--mkt-cta);
}
.timeline__year { font-weight: 700; color: var(--mkt-orange-deep); font-size: 0.85rem; margin-bottom: 0.25rem; }
.timeline__item h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.timeline__item p { margin: 0; font-size: 0.9rem; max-width: none; }

.legal { max-width: 720px; margin: 0 auto; padding: 3rem 0 4rem; }
.legal h2 { font-size: 1.5rem; margin-top: 2rem; }
.legal p, .legal ul, .legal ol { max-width: none; }

/* Prefer landing section rhythm over generic .mkt-page section padding */
.mkt-page .section { padding: 4.5rem 0; }
.mkt-page .hero { padding: 4.5rem 0 3.5rem; }
.mkt-page h2 { margin-top: 0; }