/* ===================================================================== LeadsNimble Add-On Page โ€” one page about one add-on. A READING page, not a selling one. The pricing table has already made the pitch; somebody who clicks through to here wants to know what the thing is and whether it applies to them, so the page is a single measured column of prose with one panel of hard facts near the top. No aurora, no artwork, no second typeface โ€” the same restraint lnew-price-hero exercises, and for the same reason. Built from the aurora-nightfall tokens resolved to literals and re-scoped under --lnap-*, LIGHT the default, [data-mode="dark"] flipping the palette (the switch the nav writes on ). ===================================================================== */ .lnew-addon-page, .lnew-addon-page *, .lnew-addon-page *::before, .lnew-addon-page *::after { box-sizing: border-box; } .lnew-addon-page [hidden] { display: none !important; } :where(.lnew-addon-page) :where(a) { color: inherit; text-decoration: none; } :where(.lnew-addon-page) :where(p) { margin: 0; } :where(.lnew-addon-page) :where(ul, ol) { margin: 0; padding: 0; list-style: none; } :where(.lnew-addon-page) :where(h1, h2, h3) { margin: 0; } :where(.lnew-addon-page) :where(svg) { display: block; } :where(.lnew-addon-page) :where(dl, dd, dt) { margin: 0; } .lnew-addon-page { --lnap-font-sans: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --lnap-font-head: 'Parkinsans', 'DM Sans', sans-serif; --lnap-bg: #f0f4fb; --lnap-card: #ffffff; --lnap-ink: #12122a; --lnap-muted: #6b7089; --lnap-line: #e7e9f4; --lnap-accent: #6d5cf5; --lnap-accent-soft: rgba(109,92,245,.10); --lnap-free: #0f8a5f; --lnap-free-soft: rgba(15,138,95,.12); --lnap-maxw: 780px; --lnap-gutter: 24px; background: var(--lnap-bg); color: var(--lnap-ink); font-family: var(--lnap-font-sans); padding: clamp(48px, 7vw, 88px) var(--lnap-gutter) clamp(56px, 8vw, 104px); } /* ---- palette ยท DARK ([data-mode="dark"] on , written by the nav) ---- */ [data-mode="dark"] .lnew-addon-page { --lnap-bg: #0a0a12; --lnap-card: #12121e; --lnap-ink: #f5f6ff; --lnap-muted: #949bbb; --lnap-line: rgba(255,255,255,.10); --lnap-accent: #8b7cff; --lnap-accent-soft: rgba(139,124,255,.16); --lnap-free: #4ad9a4; --lnap-free-soft: rgba(74,217,164,.14); } .lnew-addon-page__wrap { max-width: var(--lnap-maxw); margin: 0 auto; } /* ---- back ---- */ .lnew-addon-page__back { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 26px; font-size: 13.5px; font-weight: 500; color: var(--lnap-muted); transition: color .2s ease; } .lnew-addon-page__back:hover, .lnew-addon-page__back:focus-visible { color: var(--lnap-accent); } /* ---- head ---- */ .lnew-addon-page__eyebrow { display: inline-block; margin-bottom: 12px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--lnap-accent); } .lnew-addon-page__title { font-family: var(--lnap-font-head); font-size: clamp(32px, 4.6vw, 48px); line-height: 1.1; letter-spacing: -.02em; font-weight: 700; } .lnew-addon-page__lead { margin-top: 16px; font-size: clamp(16px, 1.8vw, 18.5px); line-height: 1.65; color: var(--lnap-muted); } /* ---- the live facts panel ---- */ .lnew-addon-page__facts { margin-top: 34px; padding: 24px 26px; background: var(--lnap-card); border: 1px solid var(--lnap-line); border-radius: 18px; } .lnew-addon-page__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; } .lnew-addon-page__from { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lnap-muted); } .lnew-addon-page__amt { font-family: var(--lnap-font-head); font-size: clamp(28px, 3.4vw, 38px); font-weight: 700; letter-spacing: -.02em; line-height: 1; } .lnew-addon-page__per { font-size: 14px; color: var(--lnap-muted); } /* ---- band / per-plan ladders ---- */ .lnew-addon-page__bands { margin-top: 20px; } .lnew-addon-page__bands-h { display: block; margin-bottom: 10px; font-size: 12.5px; font-weight: 600; color: var(--lnap-muted); } .lnew-addon-page__bands li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--lnap-line); font-size: 14.5px; } .lnew-addon-page__band-l { color: var(--lnap-muted); } .lnew-addon-page__band-v { font-weight: 600; font-variant-numeric: tabular-nums; } /* ---- who gets it, on what terms ---- */ .lnew-addon-page__rules { display: grid; gap: 14px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--lnap-line); } .lnew-addon-page__rules dt { margin-bottom: 7px; font-size: 12.5px; font-weight: 600; color: var(--lnap-muted); } .lnew-addon-page__chips { display: flex; flex-wrap: wrap; gap: 7px; } .lnew-addon-page__chip { padding: 4px 11px; border-radius: 999px; background: var(--lnap-accent-soft); color: var(--lnap-accent); font-size: 13px; font-weight: 600; } /* Bundled plans read differently from purchasable ones โ€” same shape, so the two lists scan as one idea, different colour, so they are never confused. */ .lnew-addon-page__chip.is-free { background: var(--lnap-free-soft); color: var(--lnap-free); } /* ---- prose blocks ---- */ .lnew-addon-page__block { margin-top: clamp(40px, 5vw, 60px); } .lnew-addon-page__h2 { font-family: var(--lnap-font-head); font-size: clamp(21px, 2.4vw, 26px); font-weight: 700; letter-spacing: -.015em; margin-bottom: 16px; } .lnew-addon-page__prose { font-size: 16.5px; line-height: 1.75; color: var(--lnap-muted); } .lnew-addon-page__prose p { margin: 0 0 15px; } .lnew-addon-page__prose p:last-child { margin-bottom: 0; } .lnew-addon-page__prose strong { color: var(--lnap-ink); font-weight: 600; } .lnew-addon-page__prose ul { list-style: disc; padding-left: 20px; margin: 0 0 15px; } .lnew-addon-page__prose li { margin-bottom: 7px; } /* ---- use cases ---- */ .lnew-addon-page__cases { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); } .lnew-addon-page__case { padding: 20px 22px; background: var(--lnap-card); border: 1px solid var(--lnap-line); border-radius: 16px; } .lnew-addon-page__case h3 { font-size: 15.5px; font-weight: 600; margin-bottom: 8px; letter-spacing: -.01em; } .lnew-addon-page__case p { font-size: 14.5px; line-height: 1.65; color: var(--lnap-muted); } /* ---- questions ---- */ .lnew-addon-page__faq details { border-top: 1px solid var(--lnap-line); padding: 15px 0; } .lnew-addon-page__faq details:last-child { border-bottom: 1px solid var(--lnap-line); } .lnew-addon-page__faq summary { cursor: pointer; list-style: none; font-size: 15.5px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 14px; } .lnew-addon-page__faq summary::-webkit-details-marker { display: none; } /* A plain +/- rather than an icon font: it needs no asset, and it rotates to an x with one transform when the panel opens. */ .lnew-addon-page__faq summary::after { content: "+"; font-size: 20px; line-height: 1; color: var(--lnap-accent); transition: transform .25s cubic-bezier(.22,1,.36,1); } .lnew-addon-page__faq details[open] summary::after { transform: rotate(45deg); } .lnew-addon-page__faq details p { margin-top: 10px; font-size: 15px; line-height: 1.7; color: var(--lnap-muted); max-width: 64ch; } /* ---- closing ---- */ .lnew-addon-page__cta { margin-top: clamp(44px, 6vw, 68px); padding: 30px 28px; border-radius: 20px; background: var(--lnap-card); border: 1px solid var(--lnap-line); text-align: center; } .lnew-addon-page__cta h2 { font-family: var(--lnap-font-head); font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; letter-spacing: -.015em; } .lnew-addon-page__cta p { margin-top: 10px; font-size: 15px; line-height: 1.65; color: var(--lnap-muted); } .lnew-addon-page__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; } .lnew-addon-page__btn { display: inline-flex; align-items: center; padding: 11px 22px; border-radius: 999px; background: var(--lnap-accent); color: #fff; font-size: 14.5px; font-weight: 600; transition: transform .2s ease, opacity .2s ease; } .lnew-addon-page__btn:hover, .lnew-addon-page__btn:focus-visible { transform: translateY(-1px); opacity: .92; } .lnew-addon-page__btn--ghost { background: transparent; color: var(--lnap-ink); border: 1px solid var(--lnap-line); } @media (prefers-reduced-motion: reduce) { .lnew-addon-page__btn, .lnew-addon-page__faq summary::after { transition: none; } .lnew-addon-page__btn:hover { transform: none; } }