/* ============================================================
   FILESURE API — Secondary pages (Pricing, Contact, About)
   Builds on tokens.css + home.css + legal.css. Most layout reuses
   existing components (.section, .rate, .cta, .legal-hero); this file
   only adds the few bits those pages need.
   ============================================================ */

/* ---- Pricing: stacked rate-card groups (reuse .rate from home.css) ---- */
.price-stack{display:flex;flex-direction:column;gap:18px;max-width:780px;margin:0 auto}
.price-stack .rate{width:100%}
.rate__price.is-free{color:var(--success-500)}
.price-note{max-width:780px;margin:26px auto 0;font-size:var(--body-sm);color:var(--fg-muted);line-height:1.65}
.price-note b{color:var(--fg-2);font-weight:var(--w-semibold)}
.price-how{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:980px;margin:0 auto 44px}
@media(max-width:820px){.price-how{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.price-how{grid-template-columns:1fr}}
.price-how__item{background:#fff;border:1px solid var(--border);border-radius:var(--radius-xl);padding:20px}
.price-how__item .m{font-size:22px;color:var(--lavender-600)}
.price-how__item b{display:block;margin:10px 0 4px;font-size:var(--body-lg);color:var(--fg-1);font-weight:var(--w-semibold)}
.price-how__item p{margin:0;font-size:var(--body-md);color:var(--fg-3);line-height:1.55}

/* ---- Contact methods ---- */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:4px}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}}
.cmethod{border:1px solid var(--border);border-radius:var(--radius-xl);padding:24px;background:#fff;display:flex;flex-direction:column;gap:5px}
.cmethod__icon{width:44px;height:44px;border-radius:var(--radius-lg);background:var(--lavender-200);color:var(--lavender-600);display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.cmethod__icon .m{font-size:24px}
.cmethod h3{margin:0;font-size:var(--heading-sm);color:var(--fg-1);font-weight:var(--w-semibold)}
.cmethod p{margin:0;font-size:var(--body-md);color:var(--fg-3);line-height:1.5}
.cmethod a{color:var(--brand);font-weight:var(--w-medium);word-break:break-word}
.cmethod a:hover{color:var(--brand-hover)}
.copy-btn{margin-top:8px;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:var(--body-sm);color:var(--fg-muted);background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 11px;cursor:pointer;font-family:var(--font-sans);transition:color .15s,border-color .15s}
.copy-btn:hover{color:var(--brand);border-color:var(--lavender-400)}
.copy-btn .m{font-size:16px}

/* ---- About ---- */
.about-lead{max-width:760px;font-size:var(--heading-md);line-height:1.55;color:var(--fg-2);font-weight:var(--w-regular);margin:0 0 8px}
.about-prose{max-width:760px}
.about-prose p{font-size:16px;line-height:1.72;color:var(--fg-body);margin:0 0 16px}
.about-prose p a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}

/* ---- Contact: lead form + methods sidebar ---- */
.contact-layout{display:grid;grid-template-columns:1.35fr 0.65fr;gap:44px;align-items:start}
@media(max-width:860px){.contact-layout{grid-template-columns:1fr;gap:32px}}
.lead-form{background:#fff;border:1px solid var(--border);border-radius:var(--radius-xl);padding:28px 28px 30px;box-shadow:var(--shadow-card)}
.lead-form__title{margin:0;font-size:var(--heading-md);font-weight:var(--w-semibold);color:var(--fg-strong)}
.lead-form__sub{margin:6px 0 22px;font-size:var(--body-md);color:var(--fg-muted)}
.lead-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.lead-field label{font-size:var(--body-sm);font-weight:var(--w-medium);color:var(--fg-2)}
.lead-field label .opt{color:var(--fg-faint);font-weight:var(--w-regular)}
.lead-field input,.lead-field textarea{font-family:var(--font-sans);font-size:var(--body-md);color:var(--fg-1);background:#fff;border:1px solid var(--border-input);border-radius:var(--radius-sm);padding:10px 12px;width:100%;transition:border-color .15s,box-shadow .15s}
.lead-field input:focus,.lead-field textarea:focus{outline:none;border-color:var(--lavender-400);box-shadow:0 0 0 3px var(--lavender-tint)}
.lead-field textarea{resize:vertical;min-height:120px}
.lead-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lead-turnstile{margin:4px 0 18px;min-height:65px}
.lead-form .btn{margin-top:4px}
.lead-status{margin:14px 0 0;font-size:var(--body-sm);line-height:1.5;min-height:1px}
.lead-status.is-ok{color:var(--success-500);font-weight:var(--w-medium)}
.lead-status.is-err{color:var(--error-500)}
.contact-aside{display:flex;flex-direction:column;gap:16px}
.contact-aside .cmethod{padding:20px}

/* ---- Changelog (date-based releases, newest first) ----
   A release rolls up several changes shipped together. Each change has a
   tag (New / Improved / Fixed), a title, a body, and an OPTIONAL image —
   the image frame only renders when a change carries an `img` (see the
   RELEASES array in changelog.html). Layout: a sticky version+date rail on
   the left, the rolled-up changes on the right; stacks on mobile. */
.cl-wrap{max-width:1080px;margin:0 auto;padding:8px 32px 80px;width:100%}
.cl-release{display:grid;grid-template-columns:1fr;gap:18px;padding:44px 0;border-top:1px solid var(--border-faint)}
.cl-release:first-of-type{border-top:none;padding-top:36px}
@media(min-width:860px){.cl-release{grid-template-columns:188px minmax(0,1fr);gap:56px}}
.cl-rail{display:flex;flex-direction:column;gap:8px}
@media(min-width:860px){.cl-rail{position:sticky;top:96px;align-self:start}}
.cl-version{align-self:flex-start;font-family:var(--font-mono);font-size:var(--body-sm);font-weight:var(--w-medium);color:var(--lavender-600);background:var(--lavender-200);border:1px solid var(--lavender-400);border-radius:var(--radius-pill);padding:3px 11px}
.cl-date{font-size:var(--body-sm);color:var(--fg-muted)}
.cl-headline{font-family:var(--font-sans);font-weight:var(--w-bold);font-size:var(--heading-lg);line-height:var(--heading-lg-lh);color:var(--fg-strong);margin:0 0 22px;letter-spacing:-0.01em}
.cl-changes{display:flex;flex-direction:column;gap:30px}
.cl-change{display:flex;flex-direction:column;gap:8px}
.cl-tag{align-self:flex-start;font-size:var(--caption);font-weight:var(--w-semibold);letter-spacing:.04em;text-transform:uppercase;border-radius:var(--radius-pill);padding:3px 9px;line-height:1.5}
.cl-tag--new{color:var(--lavender-600);background:var(--lavender-200)}
.cl-tag--improved{color:var(--success-500);background:var(--success-tint)}
.cl-tag--fixed{color:var(--rust-500);background:var(--rust-tint)}
.cl-change h3{font-family:var(--font-sans);font-weight:var(--w-semibold);font-size:var(--heading-sm);line-height:var(--heading-sm-lh);color:var(--fg-1);margin:0}
.cl-change p{font-size:16px;line-height:1.7;color:var(--fg-body);margin:0;max-width:660px}
.cl-change p a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.cl-change code{font-family:var(--font-mono);font-size:0.86em;background:var(--surface-3);color:var(--rust-500);padding:1px 6px;border-radius:var(--radius-xs)}
.cl-figure{margin:6px 0 0;max-width:720px}
.cl-figure img{display:block;max-width:100%;height:auto;border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);background:var(--surface-1)}
.cl-figure figcaption{margin-top:9px;font-size:var(--body-sm);color:var(--fg-muted)}