/* Pricing page as a landing page: the opening, "what the AI does" (bento cards with small drawings of the app),
   the editor's tools, and the comparison with other apps. Uses start/end so the Hebrew page (dir=rtl) mirrors. */

/* ---------- opening ---------- */
.l-hero { text-align: center; padding: 96px 0 8px; }
.l-hero h1 { font-size: clamp(40px, 6.2vw, 72px); margin: 0 auto 20px; max-width: 13em; }
.l-hero .lead { margin: 0 auto 32px; max-width: 36em; font-size: 19px; }
.l-hero .cta { justify-content: center; }
.l-proof { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; padding: 0; margin: 32px 0 0; color: var(--muted); font-size: 14px; }
.l-proof li { display: inline-flex; align-items: center; gap: 8px; }
.l-proof li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--dim); }
.l-proof b { color: var(--text); font-weight: 500; }

/* ---------- section heads ---------- */
.l-sec { padding: 96px 0 0; }
.l-sec > h2, .l-head h2 { text-align: center; font-size: clamp(30px, 4vw, 46px); }
.l-sec > .sub, .l-head .sub { text-align: center; margin: 0 auto 40px; }
.l-kicker { display: block; text-align: center; color: var(--muted); font-weight: 500; font-size: 15px; margin-bottom: 8px; }
#plans { scroll-margin-top: 70px; }
.l-head { padding: 96px 0 0; }

/* ---------- bento: what the AI does ---------- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.b-card { position: relative; grid-column: span 2; display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 20px; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); }
.b-card.wide { grid-column: span 4; }
.b-card.half { grid-column: span 3; }
.b-card h3 { margin: 4px 0 0; font: 600 20px/1.25 var(--font-display); letter-spacing: -.015em; }
.b-card p { margin: 0; color: var(--muted); font-size: 15px; }
.b-tag { align-self: flex-start; color: var(--muted); font-size: 13px; font-weight: 500; }
.b-art { margin-top: auto; padding-top: 16px; }

/* chat drawing */
.chat { display: grid; gap: 8px; }
.chat .me, .chat .ai { max-width: 82%; padding: 12px 16px; border-radius: 16px; font-size: 14px; line-height: 1.45; }
.chat .me { justify-self: end; background: var(--panel2); color: var(--text); border-end-end-radius: 4px; }
.chat .ai { justify-self: start; background: #00000040; border: 1px solid var(--line); color: var(--text); border-end-start-radius: 4px; }
.chat .ai small { display: block; margin-top: 8px; color: var(--muted); font-size: 13px; }
.chat .ai small::before { content: "✓ "; color: var(--ok); }

/* mini timeline drawing */
.tl { display: grid; gap: 4px; padding: 12px; border-radius: 12px; background: #00000040; border: 1px solid var(--line); }
.tl .trk { position: relative; height: 22px; border-radius: 6px; background: #ffffff08; }
.tl .clip { position: absolute; top: 0; bottom: 0; border-radius: 6px; font-size: 11px; font-weight: 500; display: flex; align-items: center; padding-inline: 8px; white-space: nowrap; overflow: hidden; }
.tl .v { background: #3a4150; color: #cfd5df; }
.tl .b { background: #3b4f6b; color: #d6e2f2; }
.tl .c { background: var(--accent); color: var(--on-accent); }
.tl .m { background: #2f6f4a; color: #c9f5d9; }

/* animation drawing */
.anim { position: relative; height: 120px; border-radius: 12px; background: #00000040; border: 1px solid var(--line); overflow: hidden; }
.anim .t1 { position: absolute; inset-inline-start: 20px; top: 24px; font: 600 28px/1 var(--font-display); letter-spacing: -.02em; }
.anim .t1 em { font-style: normal; color: var(--accent); }
.anim .bar { position: absolute; inset-inline-start: 20px; bottom: 24px; width: 55%; height: 8px; border-radius: 4px; background: var(--accent); }
.anim .ring { position: absolute; inset-inline-end: 24px; top: 24px; width: 64px; height: 64px; border-radius: 50%; border: 6px solid #ffffff14; border-top-color: var(--text); border-inline-end-color: var(--text); transform: rotate(180deg); }
/* plays once, when the card scrolls into view (pricing.js adds .play) */
.anim.play .t1 { animation: rise .6s cubic-bezier(.2,.8,.2,1) both; }
.anim.play .bar { animation: grow .8s cubic-bezier(.2,.8,.2,1) .15s both; }
.anim.play .ring { animation: spin .9s cubic-bezier(.2,.8,.2,1) .1s both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes grow { from { transform: scaleX(0); } to { transform: none; } }
.anim .bar { transform-origin: left center; }
[dir="rtl"] .anim .bar { transform-origin: right center; }
@keyframes spin { from { transform: rotate(-90deg); opacity: 0; } to { transform: rotate(180deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .anim * { animation: none !important; } }

/* finder drawing: a long recording with the found moments lit */
.wave { display: flex; align-items: center; gap: 4px; height: 56px; padding: 0 12px; border-radius: 12px; background: #00000040; border: 1px solid var(--line); }
.wave i { flex: 1; border-radius: 2px; background: #ffffff26; }
.wave i.hit { background: var(--accent); }

/* ---------- the editor underneath ---------- */
.tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tool { padding: 20px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.tool b { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.tool b svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tool span { display: block; margin-top: 6px; color: var(--muted); font-size: 14px; }

/* ---------- comparison ---------- */
.vs { max-width: 920px; margin: 0 auto; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); overflow: hidden; }
.vs .r { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 110px); align-items: center; border-top: 1px solid var(--line); }
.vs .r:first-child { border-top: 0; }
.vs .r > * { padding: 14px 16px; }
.vs .r > :not(:first-child) { text-align: center; }
.vs .hd { background: #ffffff06; color: var(--muted); font-size: 13px; font-weight: 500; }
.vs .hd .us { color: var(--text); }
.vs .us { background: #ffffff08; }
.vs .yes, .vs .no, .vs .some { font-weight: 500; }
.vs .yes { color: var(--ok); }
.vs .no { color: var(--dim); }
.vs .some { color: var(--muted); font-size: 13px; }
.vs-note { max-width: 920px; margin: 12px auto 0; text-align: center; color: var(--dim); font-size: 13px; }

@media (max-width: 960px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-card, .b-card.half { grid-column: span 1; }
  .b-card.wide { grid-column: span 2; }
  .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .l-hero { padding-top: 48px; }
  .bento { grid-template-columns: 1fr; }
  .b-card, .b-card.wide, .b-card.half { grid-column: span 1; }
  .tools { grid-template-columns: 1fr; }
  .vs .r { grid-template-columns: minmax(0, 1fr) repeat(3, 64px); font-size: 14px; }
  .vs .r > * { padding: 12px 8px; }
  .vs .r > :first-child { padding-inline-start: 14px; }
  .vs .hd { font-size: 11px; overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: no-preference) { .anim:not(.play) > * { opacity: 0; } }