/* LigiComms pricing page — page-specific. Shared tokens/components live in site.css. */

/* Lift body + faint copy one step for WCAG-AA contrast on the dark page background. */
.pricing, .cta-band { --ink-dim: #c2d2e6; --ink-faint: #8ea3bd; }

.hp-sub { color: var(--ink-dim); font-size: 17px; max-width: 56ch; }

/* ---------- PRICING ---------- */
.pricing { padding: 90px 0 110px; background: radial-gradient(760px 380px at 50% 0%, rgba(30, 58, 95, .5), transparent 65%); }
.pricing-head { text-align: center; max-width: 640px; margin: 0 auto 28px; }
.pricing-head h1 .grad { background: linear-gradient(92deg, #ffb054, #ff7a9c 55%, #8b7bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* align-items: start (not the grid default of stretch) so each card is exactly as tall as its own
   content — a plan with fewer features never carries dead whitespace just to match a fuller one. */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; gap: 24px; max-width: 1180px; margin: 0 auto; }

/* A second path for a visitor who came to compare prices but isn't ready to buy — kept deliberately
   quiet (small, muted) so it never competes with the plan cards' own "Try Now" buttons. */
.pricing-affiliate-nudge { text-align: center; max-width: 1180px; margin: 28px auto 0; font-size: 14.5px; color: var(--ink-faint); }
.pricing-affiliate-nudge strong { color: var(--ink-dim); font-weight: 600; }
.pricing-affiliate-nudge a { color: var(--accent); font-weight: 600; text-decoration: none; border-bottom: 1px dotted rgba(255, 176, 84, .5); transition: border-color .15s var(--ease); }
.pricing-affiliate-nudge a:hover { border-color: var(--accent); }
.pricing-card { position: relative; border-radius: var(--radius); padding: 36px 30px 30px; background: linear-gradient(165deg, rgba(30, 58, 95, .4), rgba(12, 30, 53, .75)); border: 1px solid var(--line); transition: transform .22s var(--ease), border-color .22s var(--ease); display: flex; flex-direction: column; }
.pricing-card:hover { transform: translateY(-6px); border-color: rgba(169, 189, 212, .3); }
.pricing-card-popular { border-color: var(--accent); background: linear-gradient(165deg, rgba(44, 79, 124, .5), rgba(12, 30, 53, .85)); box-shadow: 0 20px 50px rgba(255, 176, 84, .1); }
.pricing-card-popular:hover { border-color: var(--accent); }
.pricing-badge { position: absolute; top: -13px; right: 16px; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #25160a; font-size: 11.5px; font-weight: 700; padding: 5px 18px; border-radius: 999px; white-space: nowrap; letter-spacing: .02em; }
.pricing-plan-name { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.pricing-persona { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-faint); margin-bottom: 16px; }
.pricing-price { display: flex; align-items: baseline; gap: 2px; margin-bottom: 4px; }
.pricing-currency { font-size: 22px; font-weight: 700; color: var(--ink-dim); align-self: flex-start; margin-top: 6px; }
.pricing-amount { font-size: 52px; font-weight: 800; font-family: var(--font-display); line-height: 1; letter-spacing: -.02em; }
.pricing-billed-note { font-size: 12.5px; color: var(--ink-faint); min-height: 16px; margin-bottom: 20px; }
.pricing-cta { margin-bottom: 26px; }
.pricing-features { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.pricing-features li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--ink-dim); }
.pricing-features li i { width: 18px; color: var(--accent); font-size: 13px; text-align: center; flex: none; }

/* Section label between the Social Scheduler and CRM feature groups within a card. */
.pricing-section-label {
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
    display: flex; align-items: center; gap: 8px; margin: 22px 0 14px;
}
.pricing-section-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Hover-reveal info button — for a line whose full detail (e.g. every included channel name) would
   otherwise wrap the card to several lines. Scoped to the pricing cards on purpose: this is a
   marketing-card summary/detail pattern, not the click-to-reveal form-field help pattern the shared
   .lc-info-btn covers elsewhere on the site — the two solve different problems, so this isn't a
   per-page reimplementation of that component, it's a distinct one for a distinct context. */
.pricing-info-btn { position: relative; display: inline-flex; color: var(--ink-faint); cursor: help; margin-left: 2px; }
.pricing-info-btn:hover, .pricing-info-btn:focus-visible { color: var(--accent); outline: none; }
.pricing-info-tooltip {
    position: absolute; z-index: 20; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
    background: var(--navy-800); border: 1px solid var(--line); color: var(--ink-dim);
    font-size: 12.5px; line-height: 1.5; padding: 10px 13px; border-radius: 10px;
    width: max-content; max-width: 220px; box-shadow: var(--lc-shadow-sm);
    opacity: 0; pointer-events: none; transition: opacity .15s var(--ease), transform .15s var(--ease);
}
.pricing-info-btn:hover .pricing-info-tooltip, .pricing-info-btn:focus-visible .pricing-info-tooltip {
    opacity: 1; transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) { .pricing-info-tooltip { transition: opacity .01ms; transform: translateX(-50%); } }

@media (max-width: 680px) { .pricing-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 16px; max-width: none; padding: 16px 0 12px; } .pricing-card { min-width: 270px; flex: 0 0 auto; scroll-snap-align: start; } }

/* The whole feature list is a long scroll on a phone, so a card shows its first five and opens
   the rest on demand. The toggle has no job on a wider screen, where the full list already fits. */
.pricing-more-toggle { display: none; width: 100%; margin-top: 14px; padding: 8px 0; border: 0; background: none; font-size: 12.5px; font-weight: 700; color: var(--accent); cursor: pointer; font-family: inherit; }

/* Phone: the card was built for a desktop column, so at 270px the price and the feature list ate
   most of the screen before a second plan came into view. */
@media (max-width: 640px) {
    .pricing { padding-top: 28px; }
    .pricing-card { min-width: 228px; padding: 26px 20px 22px; }
    .pricing-badge { top: -11px; font-size: 10.5px; padding: 4px 14px; }
    .pricing-plan-name { font-size: 16px; margin-bottom: 12px; }
    .pricing-currency { font-size: 17px; margin-top: 4px; }
    .pricing-amount { font-size: 36px; }
    .pricing-billed-note { font-size: 11px; min-height: 14px; margin-bottom: 14px; }
    .pricing-cta { margin-bottom: 18px; padding: 10px 16px; font-size: 13px; }
    .pricing-features { gap: 10px; }
    .pricing-features li { gap: 9px; font-size: 12.5px; }
    .pricing-features li i { width: 15px; font-size: 11.5px; }
    .pricing-section-label { font-size: 10px; margin: 16px 0 10px; }
    /* stretch overrides the base align-items:start so every card ends level, and the toggle sits
       on the bottom edge of whichever card is tallest rather than under its own last feature. */
    .pricing-grid { align-items: stretch; }
    .pricing-more-toggle { display: block; margin-top: auto; padding: 18px 0 0; }
    .pricing-card:not(.is-expanded) .pricing-features:nth-of-type(1) li:nth-child(n+6) { display: none; }
    .pricing-card:not(.is-expanded) .pricing-section-label,
    .pricing-card:not(.is-expanded) .pricing-features:nth-of-type(2) { display: none; }
}

/* Billing-cycle toggle */
.pricing-cycle { display: flex; width: fit-content; margin: 0 auto 44px; padding: 5px; gap: 3px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .03); }
.pricing-cycle-btn { border: 0; background: none; color: var(--ink-dim); font-weight: 600; font-size: .85rem; padding: 8px 18px; border-radius: 999px; cursor: pointer; font-family: inherit; transition: background .15s var(--ease), color .15s var(--ease); }
.pricing-cycle-btn:hover { color: var(--ink); }
.pricing-cycle-btn.on { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #25160a; }
@media (prefers-reduced-motion: reduce) { .pricing-cycle-btn { transition: none; } }

/* ---------- CTA ---------- */
.cta-band { padding: 40px 0 120px; }
.cta-orbit { position: absolute; border-radius: 50%; border: 1px dashed rgba(169, 189, 212, .18); pointer-events: none; }
.orbit-1 { width: 520px; height: 520px; left: -160px; top: -260px; }
.orbit-2 { width: 380px; height: 380px; right: -140px; bottom: -190px; }
.cta-band h2 { margin-top: 14px; }

/* ──────────────────────────────────────────────────────────────
   LIGHT THEME
   ────────────────────────────────────────────────────────────── */
[data-theme="light"] .pricing { background: radial-gradient(760px 380px at 50% 0%, rgba(255, 176, 84, .1), transparent 65%); }
[data-theme="light"] .pricing-card { background: #fff; box-shadow: var(--shadow-card); }
[data-theme="light"] .pricing-card-popular { background: linear-gradient(165deg, rgba(255, 176, 84, .1), #fff); box-shadow: 0 18px 44px rgba(255, 176, 84, .22); }
[data-theme="light"] .pricing,
[data-theme="light"] .cta-band { --ink-dim: #3d4a5c; --ink-faint: #5a6b80; }

/* Phone: the base h1 clamp bottoms out at 40px, which broke this heading across three lines.
   Sized against the viewport so it stays on one line from 320px up to the breakpoint. */
@media (max-width: 640px) {
    .pricing-head h1 { font-size: 5.4vw; white-space: nowrap; margin-inline: -8px; }
    .pricing-head .hp-sub { font-size: 13px; line-height: 1.55; }
}