/* Otimiz free library: /free/ index + /free/vNNN/ pack pages.
   Loaded after v2-base.css, site-v2.css and v2-polish.css; uses their tokens only.
   Mobile first. Soft gate: html.fl-js is set by the head script when JS runs,
   html.fl-unlocked when localStorage says this browser already opted in.
   With JS off nothing is hidden. */

/* Hero media slot holds the form card, not an image: drop the glow frame. */
.subpage .shero__media.fl-media { padding: 0; border: 0; background: none; overflow: visible; border-radius: 0; }
.subpage .shero__media.fl-media::before { content: none; display: none; }

/* ---------- form card (mirrors the /audit/ card) ---------- */
.fl-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: 24px 20px 22px;
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.fl-card__title { font-family: var(--font-display); font-size: 1.28rem; font-weight: 600; color: var(--ink); line-height: 1.3; margin: 0; }
.fl-card__sub { color: var(--body); font-size: .96rem; margin: 8px 0 18px; text-wrap: pretty; }
.fl-field { margin-bottom: 14px; }
.fl-field__label { display: block; font-size: .88rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.fl-card input[type="email"] {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.fl-card input[type="email"]:hover { border-color: var(--border-brand); }
.fl-card input[type="email"]:focus { outline: none; border-color: var(--blue); box-shadow: var(--focus-ring); }
.fl-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 4px; }
.fl-actions .btn { width: 100%; justify-content: center; }
.fl-note { font-size: .84rem; color: var(--muted); margin: 14px 0 0; }
.fl-note a, .fl-err a { color: var(--blue-deep); }
.fl-err { font-size: .9rem; color: #b42318; margin: 12px 0 0; font-weight: 600; }
.fl-err a { color: #b42318; }
.fl-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.fl-done { display: none; }
.fl-done p { color: var(--body); margin: 0 0 12px; }
.fl-done strong { color: var(--ink); }
.fl-done__tick { width: 44px; height: 44px; border-radius: 50%; background: var(--blue-tint); color: var(--blue-deep); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.fl-card.is-done .fl-form, .fl-card.is-done .fl-card__sub { display: none; }
.fl-card.is-done .fl-done { display: block; }
/* A returning visitor sees the unlocked card, not the form. */
.fl-unlocked .fl-hide-unlocked { display: none; }
.fl-unlocked .fl-card .fl-form, .fl-unlocked .fl-card .fl-card__sub { display: none; }
.fl-unlocked .fl-card .fl-done { display: block; }

/* ---------- pack list (index) ---------- */
.fl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.fl-pack {
  position: relative;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 20px 18px;
  scroll-margin-top: calc(var(--header-h) + 28px);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.fl-pack__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .02em; color: var(--muted); margin: 0 0 8px; }
.fl-pack__id { color: var(--blue-deep); font-weight: 600; }
.fl-pack__title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; line-height: 1.3; color: var(--ink); margin: 0 0 6px; text-wrap: balance; }
.fl-pack__desc { color: var(--body); margin: 0 0 16px; text-wrap: pretty; }
.fl-pack__actions { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.fl-pack__video { font-size: .92rem; font-weight: 600; color: var(--body); }
.fl-pack__video:hover { color: var(--blue-deep); }
.fl-lock { display: none; }
.fl-js:not(.fl-unlocked) .fl-lock { display: inline-flex; }
.fl-js:not(.fl-unlocked) .fl-open { display: none; }
.fl-lock svg, .fl-open svg { width: 16px; height: 16px; flex: 0 0 auto; }
.fl-pack.is-target {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(31, 88, 234, .16), var(--shadow-card);
}
.fl-pack.is-target::before {
  content: "From the video";
  position: absolute; top: -11px; right: 16px;
  font-family: var(--font-mono); font-size: .7rem; font-weight: 600; letter-spacing: .04em;
  background: var(--blue); color: var(--white);
  padding: 3px 9px; border-radius: var(--radius-pill);
}

.fl-empty {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-card);
  background: var(--paper-card);
  padding: 26px 20px;
  text-align: center;
}
.fl-empty__title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--ink); margin: 0 0 8px; }
.fl-empty p { color: var(--body); margin: 0 auto; max-width: 52ch; text-wrap: pretty; }
.fl-missing {
  border: 1px solid var(--border-brand);
  background: var(--blue-tint);
  color: var(--ink);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  margin: 0 0 14px;
  font-size: .95rem;
}

/* ---------- pack page ---------- */
.fl-gate { max-width: 560px; margin: 0 auto 8px; }
.fl-js:not(.fl-unlocked) [data-fl-content] { display: none; }
.fl-unlocked .fl-gate { display: none; }
.fl-gate__hint { text-align: center; color: var(--muted); font-size: .9rem; margin: 12px 0 0; }

.fl-body { max-width: 760px; margin: 0 auto; }
.fl-body h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.35rem, 3.6vw, 1.7rem); line-height: 1.25; color: var(--ink); margin: 40px 0 12px; text-wrap: balance; }
.fl-body h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; line-height: 1.3; color: var(--ink); margin: 28px 0 10px; }
.fl-body h4 { font-size: 1rem; font-weight: 700; color: var(--ink); margin: 22px 0 8px; }
.fl-body > :first-child { margin-top: 0; }
.fl-body p, .fl-body li { color: var(--body); font-size: 1.02rem; line-height: 1.65; }
.fl-body p { margin: 0 0 14px; }
.fl-body ol, .fl-body ul { margin: 0 0 16px; padding-left: 1.3em; }
.fl-body li { margin: 0 0 8px; }
.fl-body li::marker { color: var(--blue-deep); font-weight: 600; }
.fl-body strong { color: var(--ink); }
.fl-body a:not(.btn):not(.fl-file) { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 2px; }
.fl-body :not(pre) > code { font-family: var(--font-mono); font-size: .88em; background: var(--paper-muted); border: 1px solid var(--line); border-radius: var(--radius-xs); padding: 1px 6px; color: var(--ink); overflow-wrap: anywhere; }
.fl-body hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }
.fl-body blockquote { margin: 0 0 16px; padding: 4px 0 4px 16px; border-left: 3px solid var(--brand-300); }

/* Copy-paste blocks: the reason the page exists. Big, obvious button. */
.fl-code {
  margin: 0 0 20px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-card);
  background: var(--paper-card);
  overflow: hidden;
}
.fl-code__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 8px 8px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-panel);
}
.fl-code__label { font-family: var(--font-mono); font-size: .76rem; font-weight: 600; letter-spacing: .03em; color: var(--muted); text-transform: uppercase; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-copy {
  display: inline-flex; align-items: center; gap: 7px;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 14px;
  border: 0; border-radius: var(--radius-sm);
  background: var(--blue); color: var(--white);
  font-family: var(--font-body); font-size: .92rem; font-weight: 600;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s var(--ease);
}
.fl-copy:hover { background: var(--blue-deep); }
.fl-copy:active { transform: scale(.97); }
.fl-copy:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.fl-copy svg { width: 16px; height: 16px; }
.fl-copy.is-copied { background: #1b7a43; }
.fl-code pre {
  margin: 0;
  padding: 16px;
  max-height: 460px;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: .86rem;
  line-height: 1.6;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 2;
}

.fl-files { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.fl-files li { margin: 0; }
.fl-file {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-card);
  background: var(--paper-card);
  text-decoration: none !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.fl-file:hover { border-color: var(--blue); box-shadow: var(--shadow-card); }
.fl-file__ico { width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--blue-tint); color: var(--blue-deep); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.fl-file__ico svg { width: 18px; height: 18px; }
.fl-file__txt { min-width: 0; flex: 1 1 auto; }
.fl-file__name { display: block; font-family: var(--font-mono); font-size: .9rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.fl-file__desc { display: block; font-size: .9rem; color: var(--body); margin-top: 2px; }
.fl-file__size { font-family: var(--font-mono); font-size: .78rem; color: var(--muted); flex: 0 0 auto; }

.fl-backrow { display: flex; flex-wrap: wrap; gap: 12px; margin: 36px 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
.fl-backrow .btn { width: 100%; justify-content: center; }

.fl-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (min-width: 560px) {
  .fl-actions .btn, .fl-backrow .btn { width: auto; }
  .fl-card { padding: 30px 30px 26px; }
  .fl-pack { padding: 22px 24px; }
}
@media (min-width: 900px) {
  .fl-list { grid-template-columns: 1fr 1fr; gap: 18px; }
  .fl-list > .fl-missing { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .fl-pack, .fl-copy, .fl-file { transition: none; }
}

/* Checklist items and tables inside a rendered pack README */
.fl-body li.fl-task { list-style: none; position: relative; margin-left: -1.3em; padding-left: 1.9em; }
.fl-box { position: absolute; left: 0; top: .28em; width: 1.05em; height: 1.05em; border: 2px solid var(--brand-300); border-radius: 4px; background: var(--white); }
.fl-box.is-on { background: var(--blue); border-color: var(--blue); }
.fl-table { overflow-x: auto; margin: 0 0 20px; border: 1px solid var(--line); border-radius: var(--radius-card); }
.fl-table table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.fl-table th, .fl-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--body); }
.fl-table th { background: var(--paper-panel); color: var(--ink); font-weight: 600; }
.fl-table tr:last-child td { border-bottom: 0; }
.fl-inside { font-size: .92rem; color: var(--body); background: var(--paper-panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; margin: -4px 0 18px; }
.fl-inside strong { color: var(--ink); }