/* ============================================================
   martora — SaaS pages: auth, pricing, account
   Extends profile.css (vars, topbar, labels, pills, party chips)
   ============================================================ */

/* ---------------- the funnel strip ----------------
   Four steps, shown on every page of the flow so nobody has to wonder how far
   along they are or what happens next. Lives here (not landing.css) because
   saas.css is the only stylesheet base.html loads everywhere. */

.funnel {
  list-style: none;
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin: 4px 0 22px;
  overflow-x: auto;
  scrollbar-width: none;
}
.funnel::-webkit-scrollbar { display: none; }

.funnel__step { flex: 1 1 0; min-width: 132px; }
.funnel__step > a,
.funnel__step > span {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 100%;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f7f8fa;
  color: var(--ink-faint);
  text-decoration: none;
}
.funnel__step > a:hover { border-color: #c3c7d1; color: var(--ink-soft); }

.funnel__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e6e8ed;
  color: var(--ink-soft);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 500;
}
.funnel__name {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.funnel__step--done > a,
.funnel__step--done > span { color: var(--ink-soft); background: #fff; }
.funnel__step--done .funnel__num { background: var(--green); color: #101114; }

.funnel__step--now > span,
.funnel__step--now > a {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.funnel__step--now .funnel__num { background: var(--green); color: #101114; }

@media (max-width: 720px) {
  .funnel__step { min-width: 118px; }
  .funnel__name { font-size: 9px; }
}

/* ---------------- flash messages ---------------- */

.flashes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0;
}
.flash {
  font-size: 13px;
  background: #f4f5f7;
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: 10px;
  padding: 10px 14px;
}

/* ---------------- auth (login / register / forgot / reset) ------------- */

.auth {
  max-width: 400px;
  margin: 8vh auto 0;
  padding-top: 20px;
}

/* sign-up gets a value column: the form alone gives no reason to fill it in */
.authsplit {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 340px);
  gap: 56px;
  justify-content: center;
  align-items: start;
  margin: 6vh auto 0;
  max-width: 860px;
}
.authsplit .auth { margin: 0; }

.authside {
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: 18px;
  padding: 22px 24px;
  background: #fafbfc;
  margin-top: 62px;
}
.authside__head { color: var(--ink-faint); margin-bottom: 14px; }
.authside__list { list-style: none; }
.authside__list li {
  font-size: 13.5px;
  line-height: 1.55;
  padding: 7px 0 7px 22px;
  position: relative;
  color: var(--ink-soft);
}
.authside__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
}
.authside__note {
  border-top: 1px solid var(--line);
  margin-top: 14px;
  padding-top: 14px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-faint);
}

@media (max-width: 860px) {
  .authsplit { grid-template-columns: 1fr; gap: 26px; max-width: 400px; }
  .authside { margin-top: 0; }
}

.auth__kicker { margin-bottom: 14px; }

.auth__title {
  font-family: "Archivo", sans-serif;
  font-weight: 500;
  font-size: 34px;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.auth__sub {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 26px;
}

.field { margin-bottom: 16px; }
.field .label { display: block; margin-bottom: 7px; }

.input {
  width: 100%;
  border: 1px solid var(--line);
  background: #fafbfc;
  border-radius: 12px;
  padding: 12px 14px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.input:focus { border-color: var(--ink); background: #fff; }

.btn {
  width: 100%;
  border: none;
  background: var(--ink);
  color: #fff;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  border-radius: 999px;
  padding: 14px 20px;
  cursor: pointer;
  margin-top: 6px;
}
.btn:hover { background: #000; }
.btn--green { background: var(--green); color: #101114; }
.btn--green:hover { background: #7fc72c; }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn--ghost:hover { background: #f4f5f7; }

/* the same button as a link — used for the logged-out pricing CTAs */
a.btn {
  display: block;
  text-align: center;
  text-decoration: none;
}

.auth__alt {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 20px;
  text-align: center;
}
.auth__alt a { color: var(--ink); font-weight: 600; text-decoration: none; }
.auth__alt a:hover { text-decoration: underline; }

.auth__forgot {
  display: block;
  text-align: right;
  font-size: 12px;
  color: var(--ink-faint);
  text-decoration: none;
  margin-top: -8px;
  margin-bottom: 14px;
}
.auth__forgot:hover { color: var(--ink); }

/* ---------------- pricing ---------------- */

.phero {
  text-align: center;
  padding: 46px 0 34px;
}
.phero__title {
  font-family: "Archivo", sans-serif;
  font-weight: 500;
  font-size: 46px;
  letter-spacing: -0.02em;
  margin: 12px 0 10px;
}
.phero__sub {
  font-size: 14.5px;
  color: var(--ink-soft);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.6;
}

.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 22px;
  max-width: 1060px;
  margin: 0 auto;
  padding-bottom: 30px;
  align-items: stretch;
}

.tier {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px 26px 26px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
}
.tier--hot {
  border: 1.5px solid #101114;
  background:
    radial-gradient(circle at 85% 0%, rgba(143, 216, 55, 0.13), transparent 42%),
    #fff;
  box-shadow: 0 24px 50px -28px rgba(23, 24, 28, 0.35);
}

.tier__badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  background: var(--green);
  color: #101114;
  border-radius: 999px;
  padding: 5px 12px;
}

.tier__name { margin-bottom: 16px; }

.tier__price {
  font-family: "Archivo", sans-serif;
  font-weight: 500;
  font-size: 46px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.tier__price sup { font-size: 20px; vertical-align: super; }
.tier__cadence {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin: 8px 0 6px;
}

.tier__tagline {
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-bottom: 18px;
}

.tier__features {
  list-style: none;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-bottom: 24px;
  flex: 1;
}
.tier__features li {
  font-size: 13px;
  line-height: 1.5;
  padding: 5px 0 5px 22px;
  position: relative;
  color: var(--ink);
}
.tier__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
}

.tier__reassure {
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
  text-align: center;
  margin-top: 10px;
}

/* ---------------- what happens after you pick (pricing) ---------------- */

.whatnext {
  max-width: 1060px;
  margin: 6px auto 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.whatnext__step {
  flex: 1 1 240px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  background: #f7f8fa;
}
.whatnext__step > b {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
}
.whatnext__step--end > b { background: var(--green); color: #101114; }
.whatnext__step p { font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.whatnext__step p b { color: var(--ink); }
.whatnext__arrow {
  align-self: center;
  color: var(--ink-faint);
  font-size: 15px;
}
@media (max-width: 780px) { .whatnext__arrow { display: none; } }

/* ---------------- checkout (step 3) ---------------- */

.checkout {
  max-width: 560px;
  margin: 0 auto;
  padding-top: 22px;
  text-align: center;
}
.checkout__kicker { color: var(--ink-faint); }
.checkout__title {
  font-family: "Archivo", sans-serif;
  font-weight: 500;
  font-size: 38px;
  letter-spacing: -0.02em;
  margin: 12px 0 10px;
}
.checkout__sub {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 26px;
}

.checkout__box {
  border: 1.5px solid var(--ink);
  border-radius: 24px;
  padding: 26px 28px;
  text-align: left;
  background:
    radial-gradient(circle at 88% 0%, rgba(143, 216, 55, 0.14), transparent 46%),
    #fff;
  box-shadow: 0 26px 54px -30px rgba(23, 24, 28, 0.4);
}

.checkout__line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.checkout__plan {
  font-family: "Archivo", sans-serif;
  font-weight: 600;
  font-size: 22px;
}
.checkout__tag { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }
.checkout__price {
  font-family: "Archivo", sans-serif;
  font-weight: 500;
  font-size: 40px;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}
.checkout__price sup { font-size: 18px; vertical-align: super; }
.checkout__price span {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
  margin-left: 4px;
}

.checkout__list { list-style: none; padding: 16px 0 20px; }
.checkout__list li {
  font-size: 13px;
  line-height: 1.5;
  padding: 5px 0 5px 22px;
  position: relative;
  color: var(--ink);
}
.checkout__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
}

.btn--xl { padding: 17px 22px; font-size: 12.5px; }

.checkout__reassure {
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--ink-faint);
  text-align: center;
  margin-top: 12px;
}
.checkout__reassure code {
  font-family: "IBM Plex Mono", monospace;
  background: #f1f2f5;
  padding: 1px 5px;
  border-radius: 5px;
}

.checkout__next {
  border: 1px dashed #c3c7d1;
  border-radius: 18px;
  padding: 18px 20px;
  margin-top: 20px;
  text-align: left;
}
.checkout__next .label { color: var(--ink-faint); margin-bottom: 8px; }
.checkout__next p { font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); }

.checkout__back { margin-top: 18px; font-size: 13px; }
.checkout__back a { color: var(--ink-faint); text-decoration: none; }
.checkout__back a:hover { color: var(--ink); text-decoration: underline; }

@media (max-width: 640px) {
  .checkout__title { font-size: 30px; }
  .checkout__line { flex-direction: column; }
}

.pricing-note {
  text-align: center;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-faint);
  max-width: 720px;
  margin: 0 auto;
  padding-bottom: 20px;
}

/* ---------------- coverage comparison ---------------- */

.pcover {
  max-width: 1060px;
  margin: 46px auto 0;
  background: #f7f8fa;
  border-radius: 24px;
  padding: 34px 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: center;
}
.pcover__kicker { color: var(--ink-faint); }
.pcover__title {
  font-family: "Archivo", sans-serif;
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -0.02em;
  margin: 12px 0 12px;
}
.pcover__body { font-size: 14px; line-height: 1.65; color: var(--ink-soft); }

.pcover__tablewrap { overflow-x: auto; }

.pcover__table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: 18px;
  overflow: hidden;
  font-size: 13px;
}
.pcover__table th,
.pcover__table td {
  padding: 11px 14px;
  text-align: center;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.pcover__table thead th {
  font-family: "IBM Plex Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  font-weight: 500;
}
.pcover__table tbody th {
  text-align: left;
  font-weight: 500;
  color: var(--ink);
  white-space: normal;
}
.pcover__table tbody tr:last-child th,
.pcover__table tbody tr:last-child td { border-bottom: none; }
.pcover__table td { color: var(--ink-soft); font-family: "IBM Plex Mono", monospace; font-size: 12px; }

/* ---------------- faq ---------------- */

.faq { max-width: 1060px; margin: 46px auto 0; }
.faq__title {
  font-family: "Archivo", sans-serif;
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}
.faq__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px 40px;
}
.faq__item { border-top: 1px solid var(--line); padding-top: 16px; }
.faq__q { font-size: 14.5px; font-weight: 600; margin-bottom: 7px; }
.faq__a { font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); }

/* ---------------- shared closing CTA ---------------- */

.cta {
  margin-top: 46px;
  background: var(--ink);
  color: #fff;
  border-radius: 24px;
  padding: 40px 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}
.cta--pricing { max-width: 1060px; margin-left: auto; margin-right: auto; }
.cta__kicker { color: #9a9da6; }
.cta__title {
  font-family: "Archivo", sans-serif;
  font-weight: 500;
  font-size: 30px;
  letter-spacing: -0.02em;
  margin: 10px 0 10px;
}
.cta__sub { font-size: 13.5px; color: #c9ccd4; line-height: 1.6; }
.cta__actions { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .pcover { grid-template-columns: 1fr; gap: 26px; padding: 26px 22px; }
  .cta { padding: 30px 24px; }
  .cta__actions .pill { flex: 1 1 100%; justify-content: center; }
}

/* ---------------- account ---------------- */

.acct {
  max-width: 860px;
  margin: 0 auto;
  padding-top: 26px;
}

.acct__title {
  font-family: "Archivo", sans-serif;
  font-weight: 500;
  font-size: 34px;
  letter-spacing: -0.01em;
  margin: 6px 0 26px;
}

.panel {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px 24px;
  margin-bottom: 18px;
  background: var(--surface);
}
.panel__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.panel__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.plan-line {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 10px;
}
.plan-line b {
  font-family: "Archivo", sans-serif;
  font-weight: 600;
  font-size: 24px;
}
.plan-line .chip-status {
  font-family: "IBM Plex Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  border-radius: 999px;
  padding: 3px 9px;
}
.chip-status--active { background: #e5f6cf; color: #3f6d0d; }
.chip-status--none { background: #eef0f3; color: var(--ink-soft); }
.chip-status--past_due { background: #fdecd2; color: #9a5b06; }
.chip-status--canceled { background: #fbe2df; color: #a3352b; }

.panel__meta { font-size: 13px; color: var(--ink-soft); margin-top: 8px; line-height: 1.6; }

.panel form.inline { display: inline; }
.panel .pill { text-decoration: none; display: inline-block; }

/* follow list inside account */
.fw-list { list-style: none; margin-top: 14px; }
.fw {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.fw:last-child { border-bottom: none; }
.fw__photo {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  flex: none;
}
.fw__initials {
  display: grid;
  place-items: center;
  background: #17181c;
  color: #fff;
  font-family: "Archivo", sans-serif;
  font-weight: 600;
  font-size: 13px;
}
.fw__name { font-size: 13.5px; font-weight: 600; text-decoration: none; color: var(--ink); }
.fw__name:hover { text-decoration: underline; }
.fw__meta { font-size: 11.5px; color: var(--ink-faint); }
.fw__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.fw-empty { font-size: 13px; color: var(--ink-faint); margin-top: 12px; }

/* toggles */
.toggles { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
}
.toggle input { width: 16px; height: 16px; accent-color: #101114; }
.toggle small { color: var(--ink-faint); }

/* push status pill */
.push-state {
  font-family: "IBM Plex Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef0f3;
  color: var(--ink-soft);
}
.push-state--on { background: #e5f6cf; color: #3f6d0d; }

/* follow button on the profile page */
.followbtn {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  border-radius: 999px;
  padding: 8px 15px;
  cursor: pointer;
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: #fff;
  transition: all 0.15s ease;
  width: fit-content;
  margin: 2px 0 24px;
}
.followbtn:hover { background: #000; }
.followbtn--on {
  background: transparent;
  color: var(--ink);
}
.followbtn--on:hover { border-color: var(--sell); color: var(--sell); }

.devbtn {
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  border: 1px dashed #c8ccd6;
  background: transparent;
  color: var(--ink-faint);
  border-radius: 999px;
  padding: 6px 11px;
  cursor: pointer;
}
.devbtn:hover { color: var(--ink); border-color: var(--ink); }

/* ---------------- admin ---------------- */

.admin { max-width: 1160px; margin: 0 auto; padding-top: 26px; }

.admin-stats {
  display: flex;
  gap: 44px;
  flex-wrap: wrap;
  margin: 6px 0 26px;
}
.admin-stats .stat__value {
  font-family: "Archivo", sans-serif;
  font-weight: 500;
  font-size: 30px;
  margin-top: 6px;
}

.admin-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.atable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.atable th {
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  font-weight: 500;
  color: var(--ink-faint);
  text-align: left;
  padding: 6px 10px 6px 0;
  border-bottom: 1px solid var(--line);
}
.atable td {
  padding: 9px 10px 9px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.atable tr:last-child td { border-bottom: none; }
.atable td.ok { color: var(--buy); font-weight: 600; }
.atable td.warn { color: var(--sell); font-weight: 600; }

.atable--wide { margin-top: 14px; }

.aselect {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fafbfc;
  padding: 5px 8px;
  cursor: pointer;
}

.alink { color: var(--ink); font-weight: 600; text-decoration: none; }
.alink:hover { text-decoration: underline; }

.inline-form { display: inline; }

.devbtn--danger { color: var(--sell); border-color: #f0c8c4; }
.devbtn--danger:hover { color: #fff; background: var(--sell); border-color: var(--sell); }

@media (max-width: 900px) {
  .admin-cols { grid-template-columns: 1fr; }
  .atable--wide { display: block; overflow-x: auto; white-space: nowrap; }
  .admin-stats { gap: 20px 30px; }
}

@media (max-width: 640px) {
  .phero__title { font-size: 34px; }
  .auth { margin-top: 4vh; }
}

/* ---------------- demo-data banner ----------------
   Shown whenever the site is serving the generated fixture instead of real
   filings. Deliberately impossible to miss: presenting mock disclosures as
   real would be the single worst failure mode this product has. */

.demo-banner {
  border: 1.5px dashed #d8a13a;
  background: #fdf6e7;
  color: #6b4d12;
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 18px;
  font-size: 12.5px;
  line-height: 1.6;
}
.demo-banner code {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
  background: #f6ecd6;
  padding: 1px 6px;
  border-radius: 5px;
}