/* ===========================================================================
   landing.css — shared styles for the SEO landing pages. Loads after
   styles.css (which supplies .wrap, .sec, .kicker, .secsub, .btn, .faq-list,
   .cta-panel, .foot, etc.). Components below are copied from how-it-works.css
   and pricing.css so the landing pages match the site without loading the
   page-specific stylesheets.
   =========================================================================== */

/* ----- breadcrumb + page hero ----- */
.crumbs { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; flex-wrap: wrap; justify-content: center; }
.crumbs a { color: var(--ink-soft); }
.crumbs a:hover { color: var(--indigo); }
.crumbs span { color: var(--ink-faint); }
.crumbs .sep { opacity: .6; }
.page-hero { padding-top: 40px; padding-bottom: 4px; text-align: center; }
.page-hero h1 { font-size: clamp(30px, 4.4vw, 50px); line-height: 1.06; letter-spacing: -.03em; font-weight: 800; margin: 18px auto 0; max-width: 900px; color: var(--ink); }
.page-hero .secsub { margin-top: 20px; font-size: 17.5px; max-width: 760px; margin-left: auto; margin-right: auto; }
.lp-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; justify-content: center; }
.lp-hero-fine { margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--ink-faint); }

/* ----- feature pillars (4-up) ----- */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 42px; }
.pillar { background: #f8f9fd; border: 1px solid #e7e9f4; border-radius: 20px; padding: 24px 22px; }
.pillar-ic { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.pillar-ic .ms { font-size: 24px; }
.pillar b { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.01em; margin: 16px 0 7px; color: var(--ink); }
.pillar p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; }

/* ----- feature cards (3-up) ----- */
.connect-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 38px; }
.connect-card { background: #f8f9fd; border: 1px solid #e7e9f4; border-radius: 20px; padding: 26px 24px; }
.connect-ic { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.connect-ic .ms { font-size: 24px; }
.connect-card b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.01em; margin: 16px 0 8px; color: var(--ink); }
.connect-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; }

.pillar, .connect-card { transition: translate .32s cubic-bezier(.34, 1.56, .64, 1); }
.pillar:hover, .connect-card:hover { translate: 0 -4px; }
@media (prefers-reduced-motion: reduce) { .pillar:hover, .connect-card:hover { translate: none; } }

/* ----- checklist (what Cobalt does) ----- */
.lp-checks { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 13px; max-width: 760px; }
.lp-checks li { display: flex; gap: 12px; font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); text-wrap: pretty; }
.lp-checks li .ms { color: #1d8a4e; font-size: 21px; line-height: 1.3; flex: 0 0 auto; }
.lp-checks li b { color: var(--ink); font-weight: 700; }
.lp-prose { font-size: 16px; line-height: 1.7; color: var(--ink-soft); max-width: 760px; margin-top: 18px; text-wrap: pretty; }
.lp-prose b { color: var(--ink); font-weight: 700; }
.lp-prose a { color: var(--indigo); font-weight: 600; }

/* ----- comparison table (Feature | Competitor | Cobalt) ----- */
.lp-cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 32px; }
.lp-cmp { width: 100%; max-width: 880px; min-width: 580px; border-collapse: collapse; }
.lp-cmp th, .lp-cmp td { padding: 13px 16px; text-align: left; vertical-align: top; font-size: 14.5px; line-height: 1.5; }
.lp-cmp thead th { font-size: 13.5px; font-weight: 800; color: var(--ink); border-bottom: 1px solid var(--line); letter-spacing: -.01em; }
.lp-cmp thead th:first-child { color: var(--ink-faint); font-weight: 600; }
.lp-cmp thead th:last-child { color: var(--indigo); }
.lp-cmp tbody tr { border-bottom: 1px solid #f2f2f8; }
.lp-cmp tbody tr:last-child { border-bottom: 0; }
.lp-cmp .feat { font-weight: 700; color: var(--ink); width: 26%; }
.lp-cmp td { color: var(--ink-soft); }
.lp-cmp tbody td:last-child { background: rgba(61, 75, 208, .05); color: var(--ink); font-weight: 600; }

/* ----- best-for cards ----- */
.lp-bestfor { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 32px; }
.lp-bestfor .bf { border: 1px solid var(--line); border-radius: 18px; padding: 24px; background: #fff; }
.lp-bestfor .bf.is-cobalt { border: 1.5px solid var(--indigo); background: linear-gradient(160deg, #fbfbff, #f3f4ff); }
.lp-bestfor h3 { margin: 0 0 10px; font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.lp-bestfor .is-cobalt h3 { color: var(--indigo); }
.lp-bestfor p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; }

/* ----- related links ----- */
/* Flex, not a fixed 3-column grid: pages carry either 3 or 4 related links, and
   flex-basis lets each row divide evenly by however many there are. A grid with a
   fixed count orphaned the 4th; auto-fit left a dead track on the 3-link pages. */
.lp-related { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.lp-related a { flex: 1 1 200px; display: block; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; color: var(--ink); transition: border-color .15s ease, translate .3s cubic-bezier(.34, 1.56, .64, 1); }
.lp-related a:hover { border-color: var(--indigo); translate: 0 -3px; }
.lp-related b { display: block; font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.lp-related span { display: block; font-size: 13px; color: var(--ink-soft); margin-top: 4px; line-height: 1.45; }

@media (max-width: 960px) { .pillars { grid-template-columns: repeat(2, 1fr); } .connect-grid { grid-template-columns: 1fr; } .lp-related a { flex-basis: 100%; } }
@media (max-width: 620px) { .pillars { grid-template-columns: 1fr; } .lp-bestfor { grid-template-columns: 1fr; } }