/* Fastermaker plugin pages (account, pricing, paywall, backer code), in the site's system:
   flat fields separated by tone, no outlines, headings instead of small labels.
   Buttons and the two pricing fields come from the theme (assets/css/site.css). */
:root {
  --fm-ink: #0f0e1a;
  --fm-muted: #67637f;
  --fm-accent: #3b3fb8;
  --fm-tone: #e7e1f5;
  --fm-paper: #fcfbff;
  --fm-lilac: #d6ccf0;
}

.fm-account, .fm-redeem, .fm-paywall { color: var(--fm-ink); }
.fm-account h2, .fm-redeem h2, .fm-paywall h2 { font-size: var(--t4, 40px); margin: 0 0 16px; }
.fm-lead { font-size: var(--t3, 24px); line-height: 1.35; max-width: 30ch; margin: 0 0 16px; }
.fm-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }
.fm-link { color: var(--fm-ink); }
.fm-muted, .fm-note { color: var(--fm-muted); }

/* account + backer code side by side: paper field and tone field */
.fm-account, .fm-redeem { padding: 40px; }
.fm-account { background: var(--fm-paper); }
.fm-redeem { background: var(--fm-tone); }
.fm-page-body:has(.fm-account) { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.fm-page-body:has(.fm-account) > * { margin: 0; }

/* paywall: text beside the vase, then plans and the code below */
.fm-paywall { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; background: var(--fm-paper); padding: 0 0 0 40px; margin-bottom: 0; }
.fm-paywall-pic { background: var(--fm-tone) url("../../../themes/fastermaker/assets/img/bg_cover.jpg") 60% 60% / cover no-repeat; height: min(64svh, 600px); display: flex; justify-content: center; align-items: flex-end; overflow: hidden; }
.fm-paywall-pic img { height: 92%; width: auto; }
.fm-paywall + .fm-pricing { margin-top: 0; }

/* pricing fields inside a page: no full-screen height */
.fm-pricing .plan { min-height: min(52svh, 460px); }

.fm-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 20px; }
.fm-form label { width: 100%; font-size: var(--t1, 14px); color: var(--fm-ink); }
.fm-form input[type="text"] { flex: 1 1 240px; min-height: 48px; padding: 12px 14px; border: 0; background: var(--fm-paper); font: inherit; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fm-ink); }
.fm-form input[type="text"]:focus-visible { outline: 2px solid var(--fm-accent); outline-offset: 0; }

.fm-msg { padding: 12px 16px; margin: 0 0 16px; background: var(--fm-paper); color: var(--fm-ink); }
.fm-msg--warn { background: #fbe9e7; }

/* model library */
.fm-library { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0; }
.fm-card { background: var(--fm-paper); padding: 32px; }
.fm-card:nth-child(even) { background: var(--fm-tone); }
.fm-tag { font-size: var(--t2, 17px); color: var(--fm-muted); margin: 0 0 8px; }
.fm-btn { display: inline-block; padding: 14px 24px; background: var(--fm-accent); color: #fff !important; text-decoration: none; }
.fm-btn--ghost { background: var(--fm-tone); color: var(--fm-ink) !important; }

@media (max-width: 760px) {
  .fm-page-body:has(.fm-account), .fm-paywall { grid-template-columns: 1fr; }
  .fm-account, .fm-redeem { padding: 28px 20px; }
  .fm-paywall { padding: 28px 20px 0; }
  .fm-paywall-pic { height: 44svh; margin: 0 -20px; }
  .fm-actions .btn { flex: 1 1 100%; text-align: center; }
}

/* fixes after the first look */
.fm-page-body:has(.fm-account) > p:first-child { grid-column: 1 / -1; }
.fm-redeem .btn-tone { background: var(--fm-paper); }
.fm-redeem .btn-tone:hover { background: var(--fm-lilac); }
.fm-pricing .plan-foot { padding-top: 24px; }