/* ============================================================
   Ln2CRM · PREMIUM DARK  (shared theme for every page; injected by
   ../build.py into the local mirror, page families add their own file)

   Built with the brand-guidelines skill structure:
     Main colours   Ink (dark ground) / Ivory (text on dark),
                    plus a Mid grey and a hairline grey.
     Accents        three colours with fixed ROLES, never decor:
                    Violet = action + emphasis, Green = "in your CRM"
                    and success, Blue = LinkedIn context only.
     Typography     General Sans for headings, UI and figures
                    (emphasis by colour and weight, never by an italic face),
                    JetBrains Mono for kickers and labels.
     Light          flat surfaces, no corner glare on cards.
     Text colour    always chosen by the ground it sits on.

   Loaded LAST on top of the live CSS, so the live page markup is
   reused untouched apart from a few light-only images (build.py swaps).
   ============================================================ */

:root{
  /* ── Main colours ── */
  --p-ink:      #0a0b10;   /* page ground */
  --p-ink-2:    #0e1017;   /* alternate band */
  --p-surf:     #12141c;   /* cards */
  --p-surf-2:   #181b25;   /* raised, hover, inner chips */
  --p-surf-3:   #20232f;   /* controls */
  /* Text levels calibrated against Linear, Vercel, Resend and Supabase:
     headings near white but never pure white, running text clearly
     dimmed (~62% lightness) so long copy does not glare on the ink. */
  --p-ivory:    #ebe9e4;   /* headings, primary text */
  --p-ivory-2:  #a09fa6;   /* paragraphs, lead text   (≈7.5:1 on ink) */
  --p-ivory-3:  #dddbe0;   /* table cells: half a step under the row headings (--p-ivory); dense fact grids need more punch than prose */
  --p-mid:      #85838d;   /* meta, secondary text: ≥4.6:1 on ink, surf, surf-2 */
  --p-line:     rgba(244,241,234,.08);
  --p-line-2:   rgba(244,241,234,.14);

  /* ── Accents (roles) ── */
  --p-violet:      #6651f6;
  --p-violet-ink:  #a99dff;              /* violet used as text on ink */
  --p-violet-soft: rgba(102,81,246,.14);
  --p-violet-glow: rgba(102,81,246,.45);
  /* Violet outlines: blocks that group content get --p-edge, small chips and
     the hover / open state of interactive blocks get --p-edge-2. Neutral
     siblings of a featured card (pricing, testimonials) stay grey so the
     featured one keeps its emphasis. */
  --p-edge:        rgba(102,81,246,.32);
  --p-edge-2:      rgba(102,81,246,.55);
  --p-green:       #3ecf6d;
  --p-green-soft:  rgba(62,207,109,.12);
  --p-blue:        #5aa2ee;

  /* ── Type ── */
  --p-sans:  "General Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --p-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* ── Live site tokens remapped onto the system ── */
  --bg: var(--p-ink);
  --bg-elevated: var(--p-surf);
  --text: var(--p-ivory);
  --muted: var(--p-mid);
  --accent: var(--p-violet);
  --accent-rgb: 102, 81, 246;
  --border: var(--p-line-2);
  --accent-soft: var(--p-violet-soft);
  --blue-soft: rgba(90,162,238,.12);
  --shadow: 0 30px 80px rgba(0,0,0,.55);
  --shadow-soft: 0 16px 40px rgba(0,0,0,.45);

  color-scheme: dark;
}

/* ============ Base ============ */
html, body{ background: var(--p-ink) !important; }
body{
  color: var(--p-ivory);
  font-family: var(--p-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Film grain: a barely-there texture that keeps the large dark
   fields from looking flat on good screens. */
body::after{
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{ background: var(--p-violet); color: #fff; }

h1, h2, h3, h4, .h1, .h2, .h3, .tb-h2, .wf-h3{
  font-family: var(--p-sans);
  color: var(--p-ivory);
  letter-spacing: -.028em;
}
.h2{ font-weight: 600; }
.p, .lead, p{ color: var(--p-ivory-2); }
a{ color: inherit; }

/* ============ Header ============ */
.header{
  background: rgba(10,11,16,.72) !important;
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--p-line) !important;
}
.brand span{ color: var(--p-ivory); font-weight: 600; letter-spacing: -.01em; }
.header .nav a, .header .dd-btn{ color: var(--p-ivory-2) !important; }
.header .nav a:hover, .header .dd-btn:hover{ color: var(--p-ivory) !important; }
.dd-menu{
  background: var(--p-surf-2) !important;
  border: 1px solid var(--p-line-2) !important;
  box-shadow: var(--shadow-soft) !important;
}
.dd-menu a{ color: var(--p-ivory-2) !important; }
.dd-menu a:hover{ background: var(--p-surf-3) !important; color: var(--p-ivory) !important; }

/* ============ Buttons ============ */
.btn{ font-family: var(--p-sans); letter-spacing: -.005em; }
.btn-primary{
  background: var(--p-violet) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 12px 32px -10px var(--p-violet-glow) !important;
}
.btn-primary:hover{ background: #7563ff !important; }
.btn-secondary{
  background: transparent !important;
  color: var(--p-ivory) !important;
  border: 1px solid var(--p-line-2) !important;
  box-shadow: none !important;
}
.btn-secondary:hover{ background: rgba(244,241,234,.06) !important; border-color: rgba(244,241,234,.24) !important; }

/* ============ Hero ============ */
.hero{ position: relative; isolation: isolate; overflow-x: clip; }   /* the 1400px wash below must not widen phone pages */
.hero::before{
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: -140px; width: 1400px; height: 780px; transform: translateX(-50%);
  /* a faint ambient wash behind the hero only, not a highlight */
  background: radial-gradient(46% 50% at 70% 34%, rgba(102,81,246,.13), transparent 72%);
}
.hero .h1, .hero-h1{
  /* capped so "without leaving LinkedIn." holds one line in the 590px column */
  font-size: clamp(36px, 3.6vw, 52px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.038em !important;
  font-weight: 600 !important;
  color: var(--p-ivory) !important;
}
/* The rotating verb stays in the headline face so it reads as fast as the
   rest of the line; emphasis comes from the violet alone. */
.hero-rotate-item{ color: var(--p-green) !important; }   /* the rotating action verb takes the action green, the rest of the line stays ivory */
.hero-static, .hero-line2{ color: var(--p-ivory) !important; }
/* Three clean lines: the rotating verb owns line one, "in a click" drops to
   line two (the live CSS only does this on mobile), "without leaving
   LinkedIn." closes on line three. */
.hero-h1 .hero-static{ display: block !important; }
.hero .p{ color: var(--p-ivory-2) !important; font-size: 18px; line-height: 1.6; max-width: 54ch; }
.hero-micro span{
  background: rgba(244,241,234,.04) !important;
  border: 1px solid var(--p-edge-2) !important;
  color: var(--p-ivory-3) !important;
}
.hero-micro .dot{
  /* the live ".hero-micro span" pill rule also hits this inner span */
  padding: 0 !important; border: 0 !important; flex: 0 0 10px;
  width: 10px !important; height: 10px !important; border-radius: 50% !important;
  background: var(--p-green) !important;
  box-shadow: 0 0 10px rgba(62,207,109,.55) !important;
}
.media-card{
  background: linear-gradient(180deg, var(--p-surf-2), var(--p-surf)) !important;
  border: 1px solid var(--p-line-2) !important;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(102,81,246,.10), 0 30px 80px -40px var(--p-violet-glow) !important;
}

/* ============ Generic surfaces ============ */
.card, .cap-card, .plan, .post-card, .logos, .calc, .dd-btn-account, .sec-table-wrap{
  background: var(--p-surf) !important;
  border: 1px solid var(--p-line) !important;
  color: var(--p-ivory);
  box-shadow: inset 0 1px 0 rgba(244,241,234,.04) !important;
}
.cap-card h3, .post-card h3, .plan h2, .plan h3{ color: var(--p-ivory) !important; }
.cap-card p, .post-card p, .plan .desc{ color: var(--p-mid) !important; }

/* ============ CRM logo wall ============ */
.logos-title{ color: var(--p-ivory) !important; }
.logos-row{ align-items: center; }
/* The ivory logos are cropped tight (the originals carried wide transparent
   margins, which is why the live CSS used height 72px plus scale()).
   Each mark gets its own height so the four read at the same optical
   weight: thin wordmarks taller, the filled Zoho squares a touch smaller,
   the compact Salesforce cloud tallest. */
.crm-logo-img{
  width: auto !important; transform: none !important;
  opacity: .82; filter: none !important;
  transition: opacity .2s var(--ease-out, ease);
}
.crm-logo-pipedrive{ height: 28px !important; }
.crm-logo-zoho{ height: 31px !important; }
.crm-logo-img[src*="HubSpot"]{ height: 32px !important; }
.crm-logo-img[src*="Salesforce"]{ height: 48px !important; }
.logos-row a:hover .crm-logo-img{ opacity: 1; }
.logos-note{ color: var(--p-mid) !important; border-top-color: var(--p-line) !important; }
.logos-note a{ color: var(--p-violet-ink) !important; }

/* ============ Value statement ============ */
.section-value .h2{
  font-size: clamp(34px, 3.6vw, 52px) !important;
  line-height: 1.12 !important;
  color: var(--p-ivory) !important;
}
.section-value .p{ color: var(--p-mid) !important; }
/* Desktop: the live 75ch cap wraps this ~105-character line and leaves
   "time." alone on a second row. Keep it on one line where it fits. */
@media (min-width: 1100px){
  .section-value .p{ max-width: none !important; white-space: nowrap; }
}

/* ============ Workflows ============ */
.wf-kicker, .tb-kicker{
  font-family: var(--p-mono) !important;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--p-violet-ink) !important;
}
.wf-cell{
  background: linear-gradient(180deg, var(--p-surf), #101219) !important;
  border: 1px solid var(--p-edge) !important;
  box-shadow: inset 0 1px 0 rgba(244,241,234,.04) !important;
}
.wf-h3{ color: var(--p-ivory) !important; }
.wf-list li{ color: var(--p-ivory-2) !important; }

/* ============ Calculator ============ */
.calc .out{
  background: var(--p-ink-2) !important;
  border-left-color: var(--p-line) !important;
}
.big{ color: var(--p-ivory); }
.big.a{ color: var(--p-violet-ink); }

/* ============ Pricing ============ */
.plan.featured, .plan.pop{
  background: linear-gradient(180deg, color-mix(in oklab, var(--p-violet) 18%, var(--p-surf-2)), var(--p-surf)) !important;
  border-color: color-mix(in oklab, var(--p-violet) 50%, transparent) !important;
}
.plan ul{ border-top-color: var(--p-line) !important; color: var(--p-ivory-2); }
.plan li b{ color: var(--p-ivory); }
.pnote{ background: var(--p-surf) !important; border-color: var(--p-line) !important; }
.pnote dd{ color: var(--p-mid); }

/* ============ Testimonials ============ */
.tb-sec{
  --tb-bg: var(--p-ink-2); --tb-bg-2: var(--p-ink);
  --tb-ink: var(--p-ivory); --tb-ink-2: var(--p-ivory-2); --tb-muted: var(--p-mid);
  background: var(--p-ink-2) !important;
}
.tb-cws{ color: var(--p-mid) !important; }
.tb-cws b, .tb-cws span{ color: var(--p-ivory) !important; }
.tb-tile{ background: var(--p-surf) !important; border-color: var(--p-line) !important; }
/* Featured quote: the flat bright violet slab shouted over the whole dark
   page. A flat deep indigo keeps it the one coloured block in the section
   without glare: no corner light, no glow pseudo layers. */
.tb-feature{
  background-image: none !important;
  background-color: #17143a !important;
  border: 1px solid rgba(102,81,246,.30) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.tb-feature::before, .tb-feature::after,
.tb-feature .tb-glow{ display: none !important; }   /* the white corner glare is its own element */
.tb-feature-q{
  font-style: normal !important; font-weight: 500 !important;
  font-size: 25px !important; line-height: 1.42 !important; letter-spacing: -.012em !important;
  color: var(--p-ivory) !important;
}

/* ============ Security + "not" (.snb, design B) ============ */
.snb{ --ink: var(--p-ivory); --mut: var(--p-mid); --line: var(--p-line-2); --ac: var(--p-violet-ink); color: var(--p-ivory); }
.snb-surface{ background: var(--p-ink-2) !important; }
.snb .sB-det{ background: var(--p-surf) !important; border-color: var(--p-line) !important; }

/* ============ Blog ============ */
.post-thumb{ background: var(--p-ink-2) !important; }

/* ============ FAQ ============ */
#faq details, .faq details{ background: var(--p-surf) !important; border-color: var(--p-line) !important; }
#faq summary, .faq summary{ color: var(--p-ivory) !important; }
#faq details p, #faq details li, .faq details p, .faq details li{ color: var(--p-ivory-2) !important; }

/* ============ Footer ============ */
.footer{ background: var(--p-ink) !important; border-top: 1px solid var(--p-line) !important; }
.footer, .footer p{ color: var(--p-mid) !important; }
.footer .footer-grid a{ color: var(--p-ivory-2) !important; }
.footer .footer-grid a:hover{ color: var(--p-ivory) !important; }
.footer h5, .footer-grid h5, .footer .footer-h, .footer-grid .footer-h{
  color: var(--p-ivory) !important;
  font-family: var(--p-mono); text-transform: uppercase; letter-spacing: .14em; font-size: 11px;
}
.footer small{ color: var(--p-mid) !important; }
.footer a{ color: var(--p-ivory-2) !important; opacity: 1 !important; }
.footer a:hover{ color: var(--p-ivory) !important; }
.footer-elsewhere-label{ color: var(--p-mid) !important; }
.footer-elsewhere-links a{ color: var(--p-mid) !important; }
.footer-elsewhere-links a:hover{ color: var(--p-ivory) !important; }

/* ============ Carousel controls (pricing, testimonials, security, not, blog) ============
   All five mobile carousels inject the same .pc-arrow / .pc-dot buttons,
   which the live CSS paints as white circles. */
.pc-arrow{
  background: var(--p-surf-2) !important;
  border-color: var(--p-line-2) !important;
  color: var(--p-ivory) !important;
}
.pc-arrow:hover{ background: var(--p-surf-3) !important; }
.pc-dot::before{ background: rgba(244,241,234,.22) !important; }
.pc-dot.is-on{ background: var(--p-violet) !important; }

/* ============ Mobile ============ */
@media (max-width: 760px){
  /* hamburger + its slide-down panel are both white in the live CSS */
  .nav-toggle{ background: var(--p-surf-2) !important; border-color: var(--p-line-2) !important; color: var(--p-ivory) !important; }
  .nav-toggle:hover{ background: var(--p-violet-soft) !important; }
  .nav{
    background: var(--p-surf) !important;
    border-color: var(--p-line-2) !important;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.85) !important;
  }
  .nav .dd-menu{ background: transparent !important; border: 0 !important; box-shadow: none !important; }
}
@media (max-width: 520px){
  /* The live CSS justifies this block on phones; at this type size that
     opens wide gaps between words, so centre and balance the lines. */
  .section-value .h2{ font-size: 28px !important; text-align: center !important; text-wrap: balance !important; }
  .section-value .p{ text-align: center !important; text-wrap: balance !important; }
}

/* ============ Workflow callouts ============ */
.wf-callout{
  background: var(--p-surf-3) !important;
  border: 1px solid var(--p-edge-2) !important;
  color: var(--p-ivory) !important;
  box-shadow: 0 12px 28px -10px rgba(0,0,0,.7) !important;
}
.wf-callout::before{ background: var(--p-violet) !important; box-shadow: 0 0 0 4px rgba(102,81,246,.22) !important; }
.wf-callout.is-green::before{ background: var(--p-green) !important; box-shadow: 0 0 0 4px rgba(62,207,109,.2) !important; }

/* ============ LinkedIn mocks → LinkedIn's own dark mode ============
   The profile card and the message window stand for LinkedIn itself.
   LinkedIn ships a real dark theme, so render them in it instead of
   leaving two white slabs on the page: same product truth, one ground. */
.wf-li{
  background: #1b1f23 !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 30px 60px -28px rgba(0,0,0,.85) !important;
}
.li-name{ color: rgba(255,255,255,.92) !important; }
.li-title{ color: rgba(255,255,255,.86) !important; }
.li-sub, .li-followers, .li-degree{ color: rgba(255,255,255,.58) !important; }
.li-link{ color: #71b7fb !important; }
.li-shield svg{ stroke: rgba(255,255,255,.58) !important; }
.wf-libuilt.is-incrm .li-add{ color: #71b7fb !important; border-color: #71b7fb !important; }

.wf-chat{
  background: #1b1f23 !important;
  border-color: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.9) !important;
}
.wf-chat .wf-chat-day{ color: rgba(255,255,255,.5) !important; }
.wf-chat .wf-cav{ background: #38434f !important; color: rgba(255,255,255,.82) !important; }
.wf-chat .wf-msg-h b{ color: rgba(255,255,255,.92) !important; }
.wf-chat .wf-msg-h i{ color: rgba(255,255,255,.5) !important; }
.wf-chat .wf-bubble p{ color: rgba(255,255,255,.8) !important; }
.wf-chat .wf-composer{ background: #283037 !important; border-color: rgba(255,255,255,.12) !important; }
.wf-chat .wf-input{ color: rgba(255,255,255,.9) !important; }
.wf-chat .wf-input[data-empty]{ color: rgba(255,255,255,.5) !important; }
.wf-chat .wf-tools{ color: rgba(255,255,255,.6) !important; }
.wf-chat .wf-tool:hover{ color: #fff !important; }
.wf-chat .wf-send{ color: #71b7fb !important; }
/* the Sync messages pill keeps the site's action green (#3ecf6d, dark text) in both themes: no override needed */

/* ============ Features bento ============ */
#features .bx{
  background: linear-gradient(180deg, var(--p-surf-2), var(--p-surf)) !important;
  border-color: var(--p-line) !important;
  box-shadow: inset 0 1px 0 rgba(244,241,234,.05) !important;
}
#features .bx:hover{
  border-color: rgba(102,81,246,.42) !important;
  box-shadow: inset 0 1px 0 rgba(244,241,234,.05), 0 24px 50px -24px var(--p-violet-glow) !important;
}
#features .bx .h3{ color: var(--p-ivory) !important; }
#features .bx .p{ color: var(--p-mid) !important; }
/* The highlight card (AI reply) now uses the emphasis accent instead of a
   decorative yellow: yellow stays reserved for the "out of date" badge. */
#features .bx.yl{
  background: #17143a !important;
  border-color: rgba(102,81,246,.40) !important;
}
#features .bx.yl .h3{ color: var(--p-violet-ink) !important; }
#features .bx.yl .caret, #features .caret{ background: var(--p-violet-ink) !important; }
#features .bdg span{
  background: var(--p-ink-2) !important; border-color: var(--p-line-2) !important;
  color: var(--p-ivory) !important; box-shadow: none !important;
}
#features .ok{ background: var(--p-green) !important; color: #06210f !important; }
#features .bdg .no{ background: #ff6b6b !important; color: #2a0606 !important; }
#features .bdg .yl, #features .ok.yl{ background: #f2c14e !important; color: #2a1f03 !important; }
#features .tpl div{ background: var(--p-ink-2) !important; border-color: var(--p-line-2) !important; color: var(--p-ivory-2) !important; }
#features .tpl div b{ color: var(--p-violet-ink) !important; }
#features .wave i{ background: var(--p-violet) !important; }
#features .task{ background: var(--p-green-soft) !important; border-color: rgba(62,207,109,.35) !important; color: var(--p-ivory) !important; }
#features .task .cb{ border-color: var(--p-green) !important; }
#features .task em{ color: var(--p-green) !important; }
#features .sug{
  background: linear-gradient(180deg, rgba(102,81,246,.16), transparent) !important;
  border-color: rgba(102,81,246,.40) !important; color: var(--p-ivory) !important;
}
#features .fly .node{ background: var(--p-ink-2) !important; border-color: var(--p-line-2) !important; color: var(--p-ivory-2) !important; }
#features .fly .env{ color: var(--p-violet-ink) !important; }

/* ============ Calculator (#why) ============ */
.calc{ border-color: var(--p-edge) !important; }
.slider-row label{ color: var(--p-ivory) !important; }
.slider-row .hint{ color: var(--p-mid) !important; }
/* Own track: the native one stays light grey on a dark page. The filled
   share (--p, set by premium-range.js) stops under the thumb centre. */
input[type="range"]{
  --p: .5; --thumb: 18px;
  -webkit-appearance: none; appearance: none;
  height: var(--thumb); background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track{
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg,
    var(--p-violet) calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--p)),
    rgba(244,241,234,.10) 0);
}
input[type="range"]::-moz-range-track{ height: 6px; border-radius: 999px; background: rgba(244,241,234,.10); }
input[type="range"]::-moz-range-progress{ height: 6px; border-radius: 999px; background: var(--p-violet); }
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: var(--thumb); height: var(--thumb); margin-top: calc((6px - var(--thumb)) / 2);
  border-radius: 50%; background: var(--p-ivory); border: 4px solid var(--p-violet);
  box-shadow: 0 0 0 4px rgba(102,81,246,.18);
  transition: box-shadow var(--duration-fast, .15s) ease;
}
input[type="range"]::-moz-range-thumb{
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--p-ivory); border: 4px solid var(--p-violet);
  box-shadow: 0 0 0 4px rgba(102,81,246,.18);
}
input[type="range"]:hover::-webkit-slider-thumb{ box-shadow: 0 0 0 6px rgba(102,81,246,.28); }
input[type="range"]:focus-visible{ outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb{ box-shadow: 0 0 0 3px var(--p-ink), 0 0 0 5px var(--p-violet-ink); }
input[type="range"]:focus-visible::-moz-range-thumb{ box-shadow: 0 0 0 3px var(--p-ink), 0 0 0 5px var(--p-violet-ink); }
.kpi{ background: var(--p-ink-2) !important; border-color: var(--p-edge) !important; }
.kpi .kpi-label{ color: var(--p-mid) !important; font-family: var(--p-mono); letter-spacing: .12em; font-weight: 500 !important; }
.kpi .kpi-value{
  color: var(--p-ivory) !important;
  font-weight: 600 !important; font-variant-numeric: tabular-nums;
  font-size: 40px !important; letter-spacing: -.03em !important; line-height: 1.05 !important;
}
.kpi .kpi-sub{ color: var(--p-mid) !important; }

/* ============ Toggles (calculator + pricing) ============ */
.toggle{
  background: var(--p-surf) !important;
  border: 1px solid var(--p-line-2) !important;
  box-shadow: none !important;
}
.toggle button{ color: var(--p-ivory-2) !important; }
.toggle button:hover:not(.active){ background: rgba(244,241,234,.06) !important; color: var(--p-ivory) !important; }
.toggle button.active{
  background: var(--p-violet) !important; color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 22px -8px var(--p-violet-glow) !important;
}
/* "Save" is a success message, so it takes the green role. */
.save-pill{ background: var(--p-green-soft) !important; color: var(--p-green) !important; border-color: rgba(62,207,109,.30) !important; }
.toggle button.active .save-pill{ background: #fff !important; color: #0a0b10 !important; border-color: transparent !important; }

/* ============ Pricing text ============ */
#pricing small, .price small{ color: var(--p-mid) !important; }
#pricing summary{ color: var(--p-ivory) !important; }
#pricing em{ color: var(--p-ivory-2) !important; }
#pricing .ph-name{ color: var(--p-ivory) !important; }
/* "What plan to choose?" disclosure: its own grey copy and a blue tint */
.plan-help-faq details{ background: var(--p-surf) !important; border-color: var(--p-line) !important; }
.plan-help, .plan-help p, .plan-help span, .plan-help li, .plan-help td{ color: var(--p-ivory-2) !important; }
.plan-help b, .plan-help strong, .plan-help th{ color: var(--p-ivory) !important; }

/* ============ Blog + FAQ text ============ */
.read-more{ color: var(--p-violet-ink) !important; }
.faq .ans, #faq .ans{ color: var(--p-ivory-2) !important; }

/* ============ Shared content components (pricing, landings, posts) ============ */
.request-box{
  background: var(--p-surf) !important;
  border: 1px solid var(--p-edge) !important;
  color: var(--p-ivory-2) !important;
  font-size: 14px !important; line-height: 1.6;
}
.request-box b{ color: var(--p-ivory) !important; }
.cta-block{
  background: linear-gradient(135deg, #17143a, var(--p-surf)) !important;
  border: 1px solid var(--p-edge-2) !important;
  box-shadow: 0 30px 70px -40px var(--p-violet-glow) !important;
}
.cta-block h3{ color: var(--p-ivory) !important; }
.cta-points span{
  background: rgba(244,241,234,.04) !important;
  border-color: var(--p-edge) !important;
  color: var(--p-ivory-2) !important;
}
/* Plain tables (comparison and price grids, mostly styled inline) */
table th{ color: var(--p-ivory); }
table td{ color: var(--p-ivory-3); }
table td b, table td strong,
table td[style*="font-weight:700"], table td[style*="font-weight:800"]{ color: var(--p-ivory); }
table thead tr, table thead th{ background-color: var(--p-surf-2); }
/* pricing.html: the competitor table is a key block, so it gets the edge */
#compare > div[style*="overflow-x"]{ border-color: var(--p-edge) !important; background: var(--p-surf); }

/* ============ Violet block outlines ============
   Content blocks carry the violet edge (--p-edge); links and disclosures
   strengthen it on hover or while open, so the edge also reads as "this
   responds". Kept last so it wins over the section rules above. */
.logos, .post-card, #features .bx, .card{ border-color: var(--p-edge) !important; }
.contact-email-link{ color: var(--p-violet-ink) !important; }
.post-card:hover, #features .bx:hover{ border-color: var(--p-edge-2) !important; }
#faq details, .faq details, .plan-help-faq details, .snb .sB-det{
  border-color: var(--p-edge) !important;
  transition: border-color var(--duration-fast, .15s) ease;
}
#faq details:hover, #faq details[open], .faq details:hover, .faq details[open],
.plan-help-faq details:hover, .plan-help-faq details[open],
.snb .sB-det:hover, .snb .sB-det[open]{ border-color: var(--p-edge-2) !important; }
/* Design B draws a hard ink rule under the Security and "not" headers; on
   dark ground that turned into the only bright white line on the page. */
.snb .sB-top, .snb .sB-tab{ border-top-color: var(--p-edge-2) !important; }
@media (max-width: 520px){
  #security .sB-top > div{ border-top-color: var(--p-edge-2) !important; }
}