/* In-app landing/FAQ overlay — opened from the header nav (How it works / Pricing / FAQ).
   Folds the former landing.html content into the single-screen app. */

/* The entry fade lives on the scrim + panel, NOT the .ec-info root: a root opacity
   transition group-composites the whole dialog translucently over the hero during
   entry (opaque panel included → text-over-text), and in Chromium it also makes the
   scrim's backdrop-filter flaky on reopen. */
.ec-info { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: stretch;
  justify-content: center; }
.ec-info[hidden] { display: none; }
body.ec-info-open { overflow: hidden; }
/* Hide the hero while the info overlay is open — otherwise its bright headline/CTA
   read through the scrim around the panel (mirrors the hero-hides-chrome pattern in
   ui/trial-prompt.css). */
body.ec-info-open #trialPromptOverlay { opacity: 0; pointer-events: none; transition: opacity .18s ease; }

.ec-info-scrim { position: absolute; inset: 0; background: var(--scrim);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .18s ease; }
.ec-info.is-open .ec-info-scrim { opacity: 1; }

.ec-info-panel { position: relative; margin: auto; width: min(880px, 94vw); max-height: 92vh;
  display: flex; flex-direction: column; background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  transform: translateY(10px); opacity: 0;
  transition: transform .2s ease, opacity .2s ease; overflow: hidden; }
.ec-info.is-open .ec-info-panel { transform: translateY(0); opacity: 1; }

.ec-info-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 34px; height: 34px;
  border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted);
  font-size: 15px; cursor: pointer; display: grid; place-items: center; }
.ec-info-close:hover { color: var(--text); background: var(--panel-3); }

.ec-info-scroll { overflow-y: auto; padding: 40px clamp(20px, 5vw, 56px) 44px; scroll-behavior: smooth; }

.ec-info h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; }
.ec-info .ec-info-sub { color: var(--muted); margin: 0 0 22px; font-size: 15px; }
.ec-info section { padding: 8px 0 30px; border-top: 1px solid var(--line-2); }
.ec-info section:first-child { border-top: 0; padding-top: 0; }

/* How it works — step cards */
.ec-info-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.ec-info-step { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 16px 14px; }
.ec-info-step .step-n { font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: var(--amber); letter-spacing: .04em; }
.ec-info-step h3 { margin: 4px 0 6px; font-size: 15.5px; font-weight: 700; }
.ec-info-step p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }

/* Pricing */
.ec-info-prices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: start; }
.ec-price { border-radius: var(--radius-lg); padding: 22px 20px; border: 1px solid var(--line);
  background: var(--panel-2); }
.ec-price.pro { background: var(--card); color: var(--card-ink); border-color: transparent; position: relative; }
.ec-price .p-badge { position: absolute; top: -11px; right: 16px; background: var(--amber); color: var(--amber-ink);
  font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 999px; letter-spacing: .02em; }
.ec-price .p-name { font-weight: 700; font-size: 14px; opacity: .85; }
.ec-price .p-amt { font-size: 34px; font-weight: 800; letter-spacing: -.03em; margin: 2px 0 2px; }
.ec-price .p-amt .p-per { font-size: 14px; font-weight: 600; opacity: .7; }
.ec-price .p-sub { font-size: 13px; margin: 0 0 14px; color: var(--muted); }
.ec-price.pro .p-sub { color: var(--card-ink-2); }
.ec-price ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ec-price li { font-size: 13.5px; line-height: 1.4; display: flex; gap: 8px; }
.ec-price li .ck { color: var(--amber); font-weight: 800; }
.ec-price.pro li .ck { color: #1c9e57; }
.ec-price .p-cta { display: inline-block; margin-top: 16px; padding: 10px 16px; border-radius: 10px;
  font-weight: 700; font-size: 13.5px; text-decoration: none; cursor: pointer; }
.ec-price .p-cta.ghost { border: 1px solid var(--line); color: var(--text); }
.ec-price .p-cta.solid { background: var(--amber); color: var(--amber-ink); }

/* FAQ — native details/summary accordion */
.ec-faq { display: grid; gap: 10px; }
.ec-faq details { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0 16px; }
.ec-faq summary { list-style: none; cursor: pointer; padding: 14px 0; font-weight: 600; font-size: 14.5px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ec-faq summary::-webkit-details-marker { display: none; }
.ec-faq summary::after { content: "+"; color: var(--amber); font-size: 20px; font-weight: 700; line-height: 1; }
.ec-faq details[open] summary::after { content: "\2212"; }
.ec-faq details p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }

@media (max-width: 640px) {
  .ec-info-steps, .ec-info-prices { grid-template-columns: 1fr; }
}