:root {
  --mz-bg: #05071a;
  --mz-bg-deep: #02030d;
  --mz-panel: #0b1028;
  --mz-panel-soft: #111737;
  --mz-surface: #ffffff;
  --mz-surface-soft: #f7f8fc;

  --mz-text: #f7f8ff;
  --mz-text-dark: #111426;
  --mz-muted: #aeb5cb;
  --mz-muted-dark: #667085;

  --mz-purple: #7a4cff;
  --mz-violet: #9c43ff;
  --mz-blue: #4d79ff;
  --mz-cyan: #677cff;

  --mz-border: rgba(255, 255, 255, 0.12);
  --mz-border-dark: #e5e8f0;

  --mz-gradient:
    linear-gradient(
      135deg,
      #4d79ff 0%,
      #8057ff 48%,
      #a73dff 100%
    );

  --mz-glow:
    0 20px 70px rgba(91, 72, 255, 0.28);

  --mz-shadow:
    0 28px 80px rgba(0, 0, 0, 0.32);

  --mz-radius-sm: 12px;
  --mz-radius: 18px;
  --mz-radius-lg: 28px;

  --mz-content: 1240px;
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

body {
  margin: 0;
  background:
    radial-gradient(
      circle at 72% 8%,
      rgba(110, 58, 255, 0.19),
      transparent 32%
    ),
    radial-gradient(
      circle at 18% 42%,
      rgba(61, 88, 255, 0.12),
      transparent 34%
    ),
    var(--mz-bg);
  color: var(--mz-text);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

.mz-shell {
  width: min(
    var(--mz-content),
    calc(100% - 40px)
  );
  margin: 0 auto;
}

.mz-nav {
  width: min(
    var(--mz-content),
    calc(100% - 40px)
  );
  min-height: 82px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.mz-brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: #fff;
  text-decoration: none;
}

.mz-brand-mark {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.mz-brand-copy {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.mz-brand-name {
  font-size: 23px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.mz-brand-subtitle {
  margin-top: 7px;
  color: #d8dcf2;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.mz-nav-links {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mz-nav-links a {
  padding: 10px 14px;
  border-radius: 10px;
  color: #d9deef;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.mz-nav-links a:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

.mz-button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  border: 0;
  border-radius: 12px;
  background: var(--mz-gradient);
  color: #fff;
  font: inherit;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    0 10px 28px rgba(94, 72, 255, 0.26);
}

.mz-button:hover {
  transform: translateY(-1px);
}

.mz-button-secondary {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--mz-border);
  box-shadow: none;
}

.mz-card {
  border: 1px solid var(--mz-border);
  border-radius: var(--mz-radius);
  background:
    linear-gradient(
      160deg,
      rgba(18, 24, 57, 0.94),
      rgba(7, 10, 29, 0.96)
    );
  box-shadow: var(--mz-shadow);
}

.mz-light-card {
  background: var(--mz-surface);
  color: var(--mz-text-dark);
  border: 1px solid var(--mz-border-dark);
  border-radius: var(--mz-radius);
  box-shadow:
    0 20px 60px rgba(3, 6, 28, 0.16);
}

.mz-eyebrow,
.section-label {
  margin: 0 0 12px;
  color: #9d91ff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.mz-gradient-text {
  background: var(--mz-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.homepage-insights {
  width: min(
    var(--mz-content),
    calc(100% - 40px)
  );
  margin: 0 auto;
  padding: 90px 0 110px;
}

.homepage-insights-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 28px;
}

.homepage-insights-heading h2,
.newsletter-card h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.homepage-insights-heading p,
.newsletter-card p {
  color: var(--mz-muted);
}

.homepage-insights-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.homepage-insight-card {
  min-height: 250px;
  overflow: hidden;
  border: 1px solid var(--mz-border);
  border-radius: var(--mz-radius);
  background:
    linear-gradient(
      145deg,
      rgba(17, 23, 55, 0.96),
      rgba(6, 8, 26, 0.96)
    );
  transition:
    transform 160ms ease,
    border-color 160ms ease;
}

.homepage-insight-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 90, 255, 0.65);
}

.homepage-insight-card a {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 26px;
  color: inherit;
  text-decoration: none;
}

.homepage-insight-card h3 {
  margin: 0 0 13px;
  color: #fff;
  font-size: 20px;
  line-height: 1.22;
}

.homepage-insight-card p {
  margin: 0;
  color: var(--mz-muted);
  line-height: 1.65;
}

.homepage-insight-card span {
  margin-top: auto;
  padding-top: 24px;
  color: #a79aff;
  font-weight: 750;
}

.insights-all-link {
  color: #b1a7ff;
  font-weight: 700;
  text-decoration: none;
}

.newsletter-card {
  margin-top: 28px;
  display: grid;
  grid-template-columns:
    minmax(0, 0.85fr)
    minmax(460px, 1.15fr);
  align-items: center;
  gap: 48px;
  padding: 38px;
  border: 1px solid rgba(125, 92, 255, 0.32);
  border-radius: 24px;
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(117, 61, 255, 0.23),
      transparent 44%
    ),
    linear-gradient(
      145deg,
      #0c112b,
      #080b20
    );
  box-shadow: var(--mz-glow);
}

.newsletter-card form {
  width: 100%;
}

.newsletter-card label {
  display: block;
  margin-bottom: 10px;
  color: #dfe3f4;
  font-size: 13px;
  font-weight: 700;
}

.newsletter-fields {
  width: 100%;
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;
  gap: 12px;
}

.newsletter-fields input {
  width: 100%;
  min-width: 0;
  height: 58px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 13px;
  outline: none;
  background: #fff;
  color: #111426;
  font: inherit;
  font-size: 16px;
  box-shadow:
    0 8px 26px rgba(0, 0, 0, 0.16);
}

.newsletter-fields input:focus {
  border-color: #7d67ff;
  box-shadow:
    0 0 0 4px rgba(119, 86, 255, 0.16);
}

.newsletter-fields button {
  min-width: 174px;
  height: 58px;
  padding: 0 23px;
  border: 0;
  border-radius: 13px;
  background: var(--mz-gradient);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

#newsletter-status {
  min-height: 22px;
  margin: 10px 0 0;
  font-size: 13px;
}

@media (max-width: 900px) {
  .homepage-insights-grid {
    grid-template-columns: 1fr;
  }

  .newsletter-card {
    grid-template-columns: 1fr;
  }

  .newsletter-fields {
    grid-template-columns: 1fr;
  }

  .newsletter-fields button {
    width: 100%;
  }
}

@media (max-width: 680px) {
  .mz-nav {
    min-height: 70px;
  }

  .mz-brand-name {
    font-size: 19px;
  }

  .mz-brand-subtitle {
    display: none;
  }

  .mz-nav-links {
    gap: 4px;
  }

  .mz-nav-links a {
    padding: 8px;
    font-size: 13px;
  }

  .homepage-insights {
    padding: 62px 0 80px;
  }

  .homepage-insights-heading {
    align-items: start;
    flex-direction: column;
  }

  .newsletter-card {
    padding: 25px 20px;
  }
}

/* =========================================================
   MOOSIZE PUBLIC PRODUCT PAGES
   ========================================================= */

.mz-page {
  min-height: 100vh;
  background:
    radial-gradient(
      circle at 78% 4%,
      rgba(111, 64, 255, 0.16),
      transparent 28%
    ),
    #050718;
  color: #f8f9ff;
}

.mz-page-shell {
  width: min(
    1180px,
    calc(100% - 40px)
  );
  margin: 0 auto;
}

.mz-page-header {
  border-bottom:
    1px solid rgba(255, 255, 255, 0.08);
  background:
    rgba(3, 5, 18, 0.82);
  backdrop-filter: blur(18px);
}

.mz-page-header-inner {
  width: min(
    1180px,
    calc(100% - 40px)
  );
  min-height: 72px;
  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.mz-page-title {
  margin: 0;
  color: #fff;
  font-size:
    clamp(34px, 4vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.mz-page-lead {
  max-width: 760px;
  color: #abb4ca;
  font-size: 17px;
  line-height: 1.65;
}

.mz-panel {
  border:
    1px solid rgba(255, 255, 255, 0.10);
  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(16, 22, 53, 0.95),
      rgba(7, 10, 29, 0.96)
    );

  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.22);
}

.mz-panel-light {
  border: 1px solid #e4e7ee;
  border-radius: 18px;
  background: #fff;
  color: #111426;
}

.mz-card-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 17px;
}

.mz-card-link {
  display: block;
  height: 100%;
  padding: 24px;
  color: inherit;
  text-decoration: none;
}

.mz-card-link h2,
.mz-card-link h3 {
  margin-top: 0;
  color: #fff;
}

.mz-card-link p {
  color: #9fa8bf;
  line-height: 1.6;
}

.mz-form-row {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;
  gap: 10px;
}

.mz-input,
.mz-select,
.mz-textarea {
  width: 100%;
  min-width: 0;

  border: 1px solid #dfe3ec;
  border-radius: 12px;

  background: #fff;
  color: #111426;

  font: inherit;
}

.mz-input,
.mz-select {
  height: 56px;
  padding: 0 16px;
}

.mz-textarea {
  min-height: 150px;
  padding: 15px 16px;
  resize: vertical;
}

.mz-muted {
  color: #9fa8bf;
}

.mz-divider {
  border: 0;
  border-top:
    1px solid rgba(255, 255, 255, 0.09);
}

@media (max-width: 900px) {
  .mz-card-grid {
    grid-template-columns: 1fr;
  }

  .mz-form-row {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   MOOSIZE PRODUCT UI V2
   Shared visual system for Research / Insights / Tools / Projects
   ============================================================ */

:root {
  --mz-bg: #030617;
  --mz-bg-soft: #080b24;
  --mz-surface: rgba(15, 18, 49, 0.78);
  --mz-surface-strong: rgba(20, 23, 61, 0.94);
  --mz-surface-hover: rgba(29, 32, 78, 0.96);

  --mz-border: rgba(137, 123, 255, 0.18);
  --mz-border-strong: rgba(137, 123, 255, 0.34);

  --mz-text: #f7f7fb;
  --mz-text-soft: #c5c7d4;
  --mz-text-muted: #8f93a8;

  --mz-blue: #5d7cff;
  --mz-purple: #8d55ff;
  --mz-violet: #b348f1;

  --mz-gradient: linear-gradient(
    135deg,
    var(--mz-blue) 0%,
    var(--mz-purple) 52%,
    var(--mz-violet) 100%
  );

  --mz-radius-sm: 12px;
  --mz-radius: 18px;
  --mz-radius-lg: 24px;

  --mz-shadow:
    0 18px 50px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);

  --mz-max: 1180px;
}


/* ---------- Global product shell ---------- */

body {
  background:
    radial-gradient(
      circle at 78% 6%,
      rgba(108, 63, 255, 0.14),
      transparent 34rem
    ),
    radial-gradient(
      circle at 8% 45%,
      rgba(66, 104, 255, 0.08),
      transparent 30rem
    ),
    linear-gradient(180deg, #050719 0%, #020411 100%) !important;

  color: var(--mz-text);
  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;
}


/* Remove legacy serif styling from application pages */

main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
article h1,
article h2,
article h3,
article h4,
section h1,
section h2,
section h3 {
  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;
  letter-spacing: -0.025em;
}


main {
  width: min(var(--mz-max), calc(100% - 40px));
  margin-inline: auto;
}


/* ---------- Links ---------- */

main a {
  transition:
    color 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

main a:hover {
  color: #ffffff;
}


/* ---------- Top navigation ---------- */

body > nav,
body > header nav,
main > nav:first-child,
main > header:first-child {
  border-color: var(--mz-border) !important;
}

nav a {
  color: var(--mz-text-soft);
  text-decoration: none;
}

nav a:hover {
  color: #ffffff;
}


/* ---------- Page headings ---------- */

main > h1,
main > header h1,
main > section:first-of-type h1 {
  color: var(--mz-text);
  font-weight: 760;
  letter-spacing: -0.045em;
}

main > p,
main > header p,
main > section:first-of-type > p {
  color: var(--mz-text-soft);
}


/* ---------- Shared cards ---------- */

/*
   Existing templates use several generations of card markup.
   These selectors deliberately cover the common structural patterns
   without requiring a destructive template rewrite.
*/

main article,
main .card,
main [class*="card"],
main [class*="panel"],
main [class*="result"],
main [class*="tool-"],
main [class*="insight-"] {
  border-color: var(--mz-border);
}


/* White legacy content cards */

main article,
main .tool-card,
main .insight-card,
main .project-card {
  background:
    linear-gradient(
      145deg,
      rgba(20, 23, 59, 0.92),
      rgba(9, 12, 35, 0.92)
    ) !important;

  color: var(--mz-text) !important;
  border: 1px solid var(--mz-border) !important;
  border-radius: var(--mz-radius) !important;
  box-shadow: var(--mz-shadow);
}

main article:hover,
main .tool-card:hover,
main .insight-card:hover,
main .project-card:hover {
  border-color: var(--mz-border-strong) !important;
}


/* Force legacy dark text to work on dark cards */

main article h2,
main article h3,
main .tool-card h2,
main .tool-card h3,
main .insight-card h2,
main .insight-card h3,
main .project-card h2,
main .project-card h3 {
  color: var(--mz-text) !important;
}

main article p,
main .tool-card p,
main .insight-card p,
main .project-card p {
  color: var(--mz-text-soft) !important;
}


/* ---------- Buttons / CTA links ---------- */

main button,
main input[type="submit"],
main .button,
main .btn,
main a[class*="button"],
main a[class*="btn"] {
  border-radius: 11px;
}

main button[type="submit"],
main input[type="submit"],
main .button-primary,
main .btn-primary {
  color: #fff !important;
  border: 0 !important;
  background: var(--mz-gradient) !important;
  box-shadow: 0 10px 28px rgba(104, 74, 255, 0.22);
}

main button[type="submit"]:hover,
main input[type="submit"]:hover,
main .button-primary:hover,
main .btn-primary:hover {
  transform: translateY(-1px);
}


/* ---------- Inputs ---------- */

main input,
main select,
main textarea {
  color: var(--mz-text);
  background: rgba(4, 7, 25, 0.82);
  border: 1px solid var(--mz-border);
  border-radius: 11px;
}

main input::placeholder,
main textarea::placeholder {
  color: var(--mz-text-muted);
}

main input:focus,
main select:focus,
main textarea:focus {
  outline: none;
  border-color: rgba(119, 102, 255, 0.68);
  box-shadow: 0 0 0 3px rgba(105, 82, 255, 0.13);
}


/* ============================================================
   TOOLS
   ============================================================ */

body:has(a[href*="/tools"]) .tool-card {
  padding: 28px 30px !important;
}

.tool-card h2,
.tool-card h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 700;
}

.tool-card p {
  margin-bottom: 18px;
  line-height: 1.65;
}

.tool-card a {
  color: #a99aff !important;
  font-weight: 650;
  text-decoration: none;
}

.tool-card a:hover {
  color: #d3caff !important;
}


/* Fix the currently near-invisible "More free tools..." heading */

main h2,
main h3 {
  color: var(--mz-text) !important;
}


/* ============================================================
   INSIGHTS
   ============================================================ */

.insight-card,
main article {
  padding: 26px 28px !important;
}

.insight-card h2,
main article h2 {
  margin: 0 0 10px;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1.2;
  font-weight: 700;
}

.insight-card p,
main article p {
  margin: 0;
  line-height: 1.6;
}


/* Article list links should make the whole title feel interactive */

.insight-card a,
main article > a,
main article h2 a,
main article h3 a {
  color: var(--mz-text) !important;
  text-decoration: none;
}

.insight-card a:hover,
main article h2 a:hover,
main article h3 a:hover {
  color: #b9adff !important;
}


/* ============================================================
   CTA PANELS
   Remove the old green visual language
   ============================================================ */

main [class*="cta"],
main .cta,
main .callout {
  background:
    linear-gradient(
      135deg,
      rgba(52, 57, 126, 0.42),
      rgba(87, 49, 148, 0.35)
    ) !important;

  border: 1px solid var(--mz-border-strong) !important;
  border-radius: var(--mz-radius) !important;
  color: var(--mz-text) !important;
}

main [class*="cta"] h2,
main [class*="cta"] h3,
main .cta h2,
main .cta h3,
main .callout h2,
main .callout h3 {
  color: #fff !important;
}

main [class*="cta"] p,
main .cta p,
main .callout p {
  color: var(--mz-text-soft) !important;
}


/* ---------- Remove legacy artificial page height ---------- */

main,
main > section,
main > div {
  min-height: 0;
}


/* ---------- Footer ---------- */

footer {
  color: var(--mz-text-muted);
  border-color: var(--mz-border);
}


/* ============================================================
   Responsive
   ============================================================ */

@media (min-width: 800px) {

  /*
     Where templates already expose a list/grid wrapper,
     make the information denser instead of giant vertical cards.
  */

  .tools-grid,
  .tool-grid,
  .insights-grid,
  .insight-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px !important;
  }
}


@media (max-width: 799px) {

  main {
    width: min(100% - 28px, var(--mz-max));
  }

  .tool-card,
  .insight-card,
  main article {
    padding: 22px !important;
  }

  main h1 {
    font-size: clamp(2rem, 10vw, 3rem);
  }
}


/* ============================================================
   Newsletter / email forms
   Keep the input properly usable rather than the tiny legacy box
   ============================================================ */

form:has(input[type="email"]) {
  width: 100%;
}

form:has(input[type="email"]) input[type="email"] {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 0 16px;
  font-size: 1rem;
}

@media (min-width: 640px) {
  form:has(input[type="email"]) {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto;
    gap: 10px;
    align-items: stretch;
  }

  form:has(input[type="email"]) button,
  form:has(input[type="email"]) input[type="submit"] {
    min-height: 52px;
    white-space: nowrap;
  }
}


/* ============================================================
   MOOSIZE — SECONDARY PAGE POLISH
   2026-08-09
   Final override layer for Research / Insights / Tools.
   ============================================================ */


/* ------------------------------------------------------------
   1. Brand tokens
   ------------------------------------------------------------ */

:root {
  --mz-page: #020617;
  --mz-page-soft: #070a24;

  --mz-panel: rgba(14, 20, 58, 0.82);
  --mz-panel-hover: rgba(19, 25, 70, 0.94);
  --mz-panel-accent: rgba(43, 30, 91, 0.76);

  --mz-line: rgba(129, 112, 255, 0.22);
  --mz-line-strong: rgba(148, 119, 255, 0.38);

  --mz-white: #f8f9ff;
  --mz-copy: #c2c5d6;
  --mz-muted: #9297ad;

  --mz-blue: #5b7cff;
  --mz-purple: #9a48ff;
  --mz-purple-light: #aa96ff;

  --mz-gradient:
    linear-gradient(100deg, #5b7cff 0%, #765eff 48%, #ad39ef 100%);

  --mz-panel-gradient:
    linear-gradient(
      135deg,
      rgba(18, 25, 68, 0.96),
      rgba(25, 19, 68, 0.90)
    );
}


/* ------------------------------------------------------------
   2. Secondary page shell
   ------------------------------------------------------------ */

body {
  background:
    radial-gradient(
      circle at 75% 8%,
      rgba(92, 50, 180, 0.14),
      transparent 34rem
    ),
    radial-gradient(
      circle at 15% 30%,
      rgba(65, 90, 220, 0.08),
      transparent 32rem
    ),
    var(--mz-page);
}

main {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}


/* Do not allow legacy blocks to introduce white page sections. */

main section,
main article,
main aside {
  border-color: var(--mz-line);
}


/* ------------------------------------------------------------
   3. Secondary navigation
   ------------------------------------------------------------ */

/*
   Research / Insights / Tools currently expose their navigation
   as ordinary links rather than the homepage header.

   Give that row a deliberate application-nav appearance.
*/

main > nav:first-child,
main > div:first-child nav:first-child,
main nav[aria-label] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 24px;

  margin: 0 0 54px;
  padding: 24px 0;

  border-bottom: 1px solid var(--mz-line);
}

main > nav:first-child a,
main > div:first-child nav:first-child a,
main nav[aria-label] a {
  color: var(--mz-copy) !important;
  text-decoration: none !important;
  font-weight: 600;
  transition:
    color 160ms ease,
    opacity 160ms ease;
}

main > nav:first-child a:hover,
main > div:first-child nav:first-child a:hover,
main nav[aria-label] a:hover {
  color: var(--mz-white) !important;
}


/* ------------------------------------------------------------
   4. Page headings
   ------------------------------------------------------------ */

main h1 {
  color: var(--mz-white) !important;
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin-bottom: 18px;
}

main h1 + p {
  max-width: 820px;
  color: var(--mz-copy) !important;
  line-height: 1.65;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
}


/* ------------------------------------------------------------
   5. Cards
   ------------------------------------------------------------ */

.tool-card,
.insight-card,
main article {
  background:
    linear-gradient(
      135deg,
      rgba(15, 22, 62, 0.92),
      rgba(12, 16, 49, 0.88)
    ) !important;

  border: 1px solid var(--mz-line) !important;
  border-radius: 22px !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    0 14px 36px rgba(0, 0, 0, 0.10);

  color: var(--mz-copy) !important;

  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.tool-card:hover,
.insight-card:hover,
main article:hover {
  border-color: var(--mz-line-strong) !important;
  background:
    linear-gradient(
      135deg,
      rgba(18, 27, 74, 0.96),
      rgba(16, 20, 60, 0.94)
    ) !important;
}


/* Keep content density sensible. */

.tool-card,
.insight-card {
  padding: 28px 30px !important;
}

.tool-card h2,
.tool-card h3,
.insight-card h2,
.insight-card h3,
main article h2,
main article h3 {
  color: var(--mz-white) !important;
  line-height: 1.25;
}

.tool-card p,
.insight-card p,
main article p {
  color: var(--mz-copy) !important;
}


/* ------------------------------------------------------------
   6. Kill remaining legacy GREEN links
   ------------------------------------------------------------ */

.tool-card a,
.insight-card a,
main article a {
  color: var(--mz-purple-light) !important;
  text-decoration: none;
  font-weight: 700;
}

.tool-card a:hover,
.insight-card a:hover,
main article a:hover {
  color: #d2c8ff !important;
}


/* ------------------------------------------------------------
   7. TOOLS — fix white "More free tools" block
   ------------------------------------------------------------ */

/*
   The legacy panel currently becomes a large white block.
   Catch common unclassified containers beneath the tool cards.
*/

body:has(a[href*="/tools"]) main ul {
  color: var(--mz-copy);
}

body:has(a[href*="/tools"]) main ul li {
  color: var(--mz-copy);
}


/*
   Explicitly prevent generic white backgrounds within the
   Tools page content. Form controls are restored separately.
*/

body:has(a[href*="/tools"]) main section,
body:has(a[href*="/tools"]) main aside,
body:has(a[href*="/tools"]) main article,
body:has(a[href*="/tools"]) main [class*="panel"],
body:has(a[href*="/tools"]) main [class*="coming"] {
  background:
    linear-gradient(
      135deg,
      rgba(16, 22, 61, 0.92),
      rgba(24, 18, 65, 0.88)
    ) !important;

  color: var(--mz-copy) !important;
  border-color: var(--mz-line) !important;
}

body:has(a[href*="/tools"]) main section h2,
body:has(a[href*="/tools"]) main section h3,
body:has(a[href*="/tools"]) main aside h2,
body:has(a[href*="/tools"]) main aside h3,
body:has(a[href*="/tools"]) main [class*="coming"] h2,
body:has(a[href*="/tools"]) main [class*="coming"] h3 {
  color: var(--mz-white) !important;
}


/* ------------------------------------------------------------
   8. RESEARCH — replace green scoring language
   ------------------------------------------------------------ */

/*
   Score values are evidence, not traffic lights.
   Use the MOOSIZE gradient family instead of legacy green.
*/

body:has(a[href*="/research"]) main [class*="score"],
body:has(a[href*="/research"]) main [class*="badge"],
body:has(a[href*="/research"]) main [class*="pill"] {
  background:
    linear-gradient(
      105deg,
      rgba(73, 105, 255, 0.30),
      rgba(151, 68, 255, 0.30)
    ) !important;

  border: 1px solid rgba(139, 116, 255, 0.36) !important;
  color: var(--mz-white) !important;
}


/* ------------------------------------------------------------
   9. Forms
   ------------------------------------------------------------ */

main input,
main select,
main textarea {
  background: #ffffff !important;
  color: #161827 !important;

  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 14px;

  min-height: 54px;

  box-shadow: none;
}

main input::placeholder,
main textarea::placeholder {
  color: #969bab !important;
}

main input:focus,
main select:focus,
main textarea:focus {
  outline: none !important;

  border-color: #806cff !important;

  box-shadow:
    0 0 0 4px rgba(119, 94, 255, 0.14) !important;
}


/* ------------------------------------------------------------
   10. Primary buttons
   ------------------------------------------------------------ */

main button,
main input[type="submit"],
main a[class*="button"],
main a[class*="btn"] {
  border-radius: 13px;
}

main button[type="submit"],
main input[type="submit"] {
  background: var(--mz-gradient) !important;
  color: #fff !important;

  border: 0 !important;

  font-weight: 750;

  box-shadow:
    0 9px 28px rgba(105, 69, 255, 0.18);

  transition:
    transform 150ms ease,
    box-shadow 150ms ease;
}

main button[type="submit"]:hover,
main input[type="submit"]:hover {
  transform: translateY(-1px);

  box-shadow:
    0 12px 34px rgba(105, 69, 255, 0.27);
}


/* ------------------------------------------------------------
   11. CTA panels
   ------------------------------------------------------------ */

main [class*="cta"],
main .cta,
main .callout {
  background:
    linear-gradient(
      120deg,
      rgba(29, 38, 91, 0.88),
      rgba(54, 27, 103, 0.82)
    ) !important;

  border: 1px solid rgba(139, 112, 255, 0.36) !important;
  border-radius: 22px !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}


/* ------------------------------------------------------------
   12. Newsletter
   ------------------------------------------------------------ */

form:has(input[type="email"]) {
  width: 100%;
}

form:has(input[type="email"]) input[type="email"] {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 56px !important;

  padding: 0 18px !important;

  font-size: 1rem !important;
}

form:has(input[type="email"]) button,
form:has(input[type="email"]) input[type="submit"] {
  min-height: 56px !important;
}


/* ------------------------------------------------------------
   13. Footer
   ------------------------------------------------------------ */

footer {
  margin-top: 72px;

  border-top: 1px solid var(--mz-line) !important;

  color: var(--mz-muted) !important;
}


/* ------------------------------------------------------------
   14. Desktop density
   ------------------------------------------------------------ */

@media (min-width: 900px) {

  .tools-grid,
  .tool-grid,
  .insights-grid,
  .insight-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px !important;
  }

  form:has(input[type="email"]) {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) auto;
    gap: 12px;
    align-items: stretch;
  }
}


/* ------------------------------------------------------------
   15. Mobile
   ------------------------------------------------------------ */

@media (max-width: 899px) {

  main {
    width: min(100% - 30px, 1180px);
  }

  main > nav:first-child,
  main > div:first-child nav:first-child,
  main nav[aria-label] {
    margin-bottom: 34px;
    gap: 10px 18px;
  }

  .tool-card,
  .insight-card,
  main article {
    padding: 22px !important;
    border-radius: 18px !important;
  }
}


/* ------------------------------------------------------------
   16. Print must not dictate browser styling
   ------------------------------------------------------------ */

@media print {

  body,
  main {
    min-height: auto !important;
  }

  .tool-card,
  .insight-card,
  main article,
  main section {
    break-inside: avoid;
  }
}



/* ============================================================
   MOOSIZE — SECONDARY PAGE DENSITY CLEAN-UP
   2026-08-09
   ============================================================ */


/* ------------------------------------------------------------
   1. Remove artificial first-screen height on secondary pages
   ------------------------------------------------------------ */

body:has(a[href="/research"]) main,
body:has(a[href="/insights"]) main,
body:has(a[href="/tools"]) main {
  min-height: 0 !important;
}

body:has(a[href="/research"]) main > section:first-of-type,
body:has(a[href="/insights"]) main > section:first-of-type,
body:has(a[href="/tools"]) main > section:first-of-type,
body:has(a[href="/research"]) main > div:first-of-type,
body:has(a[href="/insights"]) main > div:first-of-type,
body:has(a[href="/tools"]) main > div:first-of-type {
  min-height: 0 !important;
}


/*
   Secondary pages should introduce themselves quickly, then
   get users into actual content.
*/

body:has(a[href="/research"]) main,
body:has(a[href="/insights"]) main,
body:has(a[href="/tools"]) main {
  padding-top: 0 !important;
  padding-bottom: 72px !important;
}


/* Tighten the space after page description. */

body:has(a[href="/research"]) main h1 + p,
body:has(a[href="/insights"]) main h1 + p,
body:has(a[href="/tools"]) main h1 + p {
  margin-bottom: 34px !important;
}


/* ------------------------------------------------------------
   2. Navigation should not create a pseudo-hero
   ------------------------------------------------------------ */

body:has(a[href="/research"]) main > nav:first-child,
body:has(a[href="/insights"]) main > nav:first-child,
body:has(a[href="/tools"]) main > nav:first-child,
body:has(a[href="/research"]) main nav[aria-label],
body:has(a[href="/insights"]) main nav[aria-label],
body:has(a[href="/tools"]) main nav[aria-label] {
  min-height: 0 !important;

  margin-bottom: 36px !important;
  padding-top: 22px !important;
  padding-bottom: 22px !important;
}


/* ------------------------------------------------------------
   3. Research cards: compact intelligence cards
   ------------------------------------------------------------ */

body:has(a[href="/research"]) main article,
body:has(a[href="/research"]) main .card,
body:has(a[href="/research"]) main [class*="card"] {
  min-height: 0 !important;
  height: auto !important;

  padding: 26px 30px !important;

  display: block !important;
}


/* Scores should sit close to the product name. */

body:has(a[href="/research"]) main [class*="score"],
body:has(a[href="/research"]) main [class*="badge"],
body:has(a[href="/research"]) main [class*="pill"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;

  margin: 0 0 14px !important;
  padding: 7px 12px !important;

  line-height: 1 !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;

  border-radius: 999px !important;
}


/* Reduce unnecessary vertical spacing inside result cards. */

body:has(a[href="/research"]) main article h2,
body:has(a[href="/research"]) main article h3,
body:has(a[href="/research"]) main [class*="card"] h2,
body:has(a[href="/research"]) main [class*="card"] h3 {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

body:has(a[href="/research"]) main article p,
body:has(a[href="/research"]) main [class*="card"] p {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
  line-height: 1.48 !important;
}


/* ------------------------------------------------------------
   4. Insights: compact article catalogue
   ------------------------------------------------------------ */

body:has(a[href="/insights"]) main article,
body:has(a[href="/insights"]) main .insight-card {
  min-height: 0 !important;
  height: auto !important;

  padding: 23px 27px !important;
}

body:has(a[href="/insights"]) main article h2,
body:has(a[href="/insights"]) main article h3,
body:has(a[href="/insights"]) main .insight-card h2,
body:has(a[href="/insights"]) main .insight-card h3 {
  margin: 0 0 9px !important;

  font-size: clamp(1.12rem, 1.7vw, 1.45rem) !important;
  line-height: 1.22 !important;
}

body:has(a[href="/insights"]) main article p,
body:has(a[href="/insights"]) main .insight-card p {
  margin: 0 !important;

  font-size: 0.98rem !important;
  line-height: 1.52 !important;
}


/* ------------------------------------------------------------
   5. Tools: compact cards
   ------------------------------------------------------------ */

body:has(a[href="/tools"]) main article,
body:has(a[href="/tools"]) main .tool-card,
body:has(a[href="/tools"]) main [class*="tool-card"] {
  min-height: 0 !important;
  height: auto !important;

  padding: 25px 29px !important;
}

body:has(a[href="/tools"]) main article h2,
body:has(a[href="/tools"]) main article h3,
body:has(a[href="/tools"]) main .tool-card h2,
body:has(a[href="/tools"]) main .tool-card h3 {
  margin: 0 0 9px !important;

  font-size: clamp(1.15rem, 1.8vw, 1.45rem) !important;
}

body:has(a[href="/tools"]) main article p,
body:has(a[href="/tools"]) main .tool-card p {
  margin: 0 0 14px !important;

  line-height: 1.52 !important;
}


/* ------------------------------------------------------------
   6. Kill remaining green/dark CTA links definitively
   ------------------------------------------------------------ */

body:has(a[href="/tools"]) main a:not(nav a),
body:has(a[href="/insights"]) main a:not(nav a),
body:has(a[href="/research"]) main a:not(nav a) {
  color: #a99aff !important;
}

body:has(a[href="/tools"]) main a:not(nav a):hover,
body:has(a[href="/insights"]) main a:not(nav a):hover,
body:has(a[href="/research"]) main a:not(nav a):hover {
  color: #d7d0ff !important;
}


/* Keep primary buttons white-text. */

body:has(a[href="/tools"]) main a[class*="button"],
body:has(a[href="/insights"]) main a[class*="button"],
body:has(a[href="/research"]) main a[class*="button"],
body:has(a[href="/tools"]) main button,
body:has(a[href="/insights"]) main button,
body:has(a[href="/research"]) main button {
  color: #fff !important;
}


/* ------------------------------------------------------------
   7. Reduce gaps between card stacks
   ------------------------------------------------------------ */

body:has(a[href="/research"]) main article + article,
body:has(a[href="/insights"]) main article + article,
body:has(a[href="/tools"]) main article + article,
body:has(a[href="/research"]) .card + .card,
body:has(a[href="/insights"]) .insight-card + .insight-card,
body:has(a[href="/tools"]) .tool-card + .tool-card {
  margin-top: 18px !important;
}


/* ------------------------------------------------------------
   8. CTA panels should follow immediately after content
   ------------------------------------------------------------ */

body:has(a[href="/research"]) main [class*="cta"],
body:has(a[href="/insights"]) main [class*="cta"],
body:has(a[href="/tools"]) main [class*="cta"],
body:has(a[href="/research"]) main .callout,
body:has(a[href="/insights"]) main .callout,
body:has(a[href="/tools"]) main .callout {
  min-height: 0 !important;

  margin-top: 44px !important;
  padding: 30px 34px !important;
}


/* ------------------------------------------------------------
   9. Remove excessive bottom dead space
   ------------------------------------------------------------ */

body:has(a[href="/research"]) main > *:last-child,
body:has(a[href="/insights"]) main > *:last-child,
body:has(a[href="/tools"]) main > *:last-child {
  margin-bottom: 0 !important;
}

body:has(a[href="/research"]) footer,
body:has(a[href="/insights"]) footer,
body:has(a[href="/tools"]) footer {
  margin-top: 54px !important;
}


/* ------------------------------------------------------------
   10. Desktop: use two-column grids where wrappers support it
   ------------------------------------------------------------ */

@media (min-width: 900px) {

  .tools-grid,
  .tool-grid,
  .insights-grid,
  .insight-grid,
  .research-grid,
  .results-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px !important;
  }

  .tools-grid > *,
  .tool-grid > *,
  .insights-grid > *,
  .insight-grid > *,
  .research-grid > *,
  .results-grid > * {
    margin-top: 0 !important;
  }
}


/* ------------------------------------------------------------
   11. Mobile
   ------------------------------------------------------------ */

@media (max-width: 899px) {

  body:has(a[href="/research"]) main,
  body:has(a[href="/insights"]) main,
  body:has(a[href="/tools"]) main {
    padding-bottom: 48px !important;
  }

  body:has(a[href="/research"]) main article,
  body:has(a[href="/insights"]) main article,
  body:has(a[href="/tools"]) main article,
  body:has(a[href="/research"]) main [class*="card"],
  body:has(a[href="/insights"]) main [class*="card"],
  body:has(a[href="/tools"]) main [class*="card"] {
    padding: 21px !important;
  }
}



/* ============================================================
   HOMEPAGE NEWSLETTER — CONTAIN FORM
   ============================================================ */

.newsletter {
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.newsletter form {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.newsletter .newsletter-fields {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr)
    170px !important;

  gap: 12px !important;

  box-sizing: border-box !important;
}

.newsletter .newsletter-fields input[type="email"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  box-sizing: border-box !important;
}

.newsletter .newsletter-fields button {
  width: 170px !important;
  min-width: 170px !important;
  max-width: 170px !important;

  box-sizing: border-box !important;
}


/*
   Override the generic email-form rule on the homepage.
*/

.newsletter form:has(input[type="email"]) {
  display: block !important;
}


/* Tablet / mobile */

@media (max-width: 760px) {

  .newsletter .newsletter-fields {
    grid-template-columns: 1fr !important;
  }

  .newsletter .newsletter-fields button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}



/* ============================================================
   MOOSIZE — MASTER PAGE ALIGNMENT
   Keep all public product pages on one horizontal grid.
   ============================================================ */

:root {
  --mz-content-max: 1360px;
  --mz-content-gutter: 28px;
}


/* ------------------------------------------------------------
   Universal public-page shell
   ------------------------------------------------------------ */

.page-shell,
.mz-page-shell {
  width:
    min(
      var(--mz-content-max),
      calc(100% - (var(--mz-content-gutter) * 2))
    ) !important;

  max-width: var(--mz-content-max) !important;

  margin-left: auto !important;
  margin-right: auto !important;

  box-sizing: border-box !important;
}


/*
   Old templates still set main to 1040px.
   Do not allow that legacy width to override the new product grid.
*/

body.mz-page main.mz-page-shell {
  width:
    min(
      1180px,
      calc(100% - (var(--mz-content-gutter) * 2))
    ) !important;

  max-width: 1180px !important;

  margin-left: auto !important;
  margin-right: auto !important;
}


/* ------------------------------------------------------------
   Homepage sections
   ------------------------------------------------------------ */

/*
   Every major homepage block should use the SAME outside edges.
*/

.hero-shell,
.research-shell,
#launch-workspace-card,
.insights,
.newsletter {
  box-sizing: border-box !important;
}


/*
   The section itself may have a background/panel,
   but it must not create a second arbitrary content width.
*/

.insights {
  width: 100% !important;
  max-width: none !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* Insights heading, CTA and cards share identical edges. */

.insights-grid {
  width: 100% !important;
  max-width: none !important;

  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* ------------------------------------------------------------
   Launch workspace
   ------------------------------------------------------------ */

#launch-workspace-card {
  width: 100% !important;
  max-width: none !important;

  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* ------------------------------------------------------------
   Newsletter
   ------------------------------------------------------------ */

.newsletter {
  width: 100% !important;
  max-width: none !important;

  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* ------------------------------------------------------------
   Secondary pages: Research / Tools / Insights
   ------------------------------------------------------------ */

body.mz-page main {
  box-sizing: border-box !important;
}


/*
   Remove the old 1040px main width inherited from individual
   legacy templates.
*/

body.mz-page main.mz-page-shell {
  width:
    min(
      1180px,
      calc(100% - 56px)
    ) !important;
}


/* Nav, heading, grids and CTA all use the same edges. */

body.mz-page main > nav,
body.mz-page main > h1,
body.mz-page main > .intro,
body.mz-page main > .grid,
body.mz-page main > .cta,
body.mz-page main > .empty {
  width: 100% !important;
  max-width: none !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  box-sizing: border-box !important;
}


/*
   Keep text readable without changing the section edge.
   Limit the paragraph itself, not its parent container.
*/

body.mz-page main > .intro {
  max-width: 820px !important;
}


/* ------------------------------------------------------------
   Grid items must never create their own horizontal offset
   ------------------------------------------------------------ */

.grid,
.insights-grid,
.tools-grid,
.research-grid,
.results-grid {
  margin-left: 0 !important;
  margin-right: 0 !important;

  padding-left: 0 !important;
  padding-right: 0 !important;

  box-sizing: border-box !important;
}

.grid > *,
.insights-grid > *,
.tools-grid > *,
.research-grid > *,
.results-grid > * {
  min-width: 0 !important;
  box-sizing: border-box !important;
}


/* ------------------------------------------------------------
   Responsive gutters
   ------------------------------------------------------------ */

@media (max-width: 900px) {
  :root {
    --mz-content-gutter: 20px;
  }

  body.mz-page main.mz-page-shell {
    width: calc(100% - 40px) !important;
  }
}


@media (max-width: 600px) {
  :root {
    --mz-content-gutter: 16px;
  }

  body.mz-page main.mz-page-shell {
    width: calc(100% - 32px) !important;
  }
}



/* ============================================================
   PRODUCT INTERFACE PREVIEW
   ============================================================ */

.product-preview-note {
  margin: 13px auto 0 !important;
  max-width: 680px;

  color: rgba(195, 200, 220, 0.72) !important;

  font-size: 11px !important;
  line-height: 1.45 !important;
  text-align: center;
}

#research-opportunity,
#launch-workspace-card {
  scroll-margin-top: 90px;
}



/* ============================================================
   COMPLETED RESEARCH
   ============================================================ */

#research-result-panel {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 12px 0 0;
  box-sizing: border-box;
  padding: 34px;

  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

#research-result-panel[hidden] {
  display: none !important;
}

/* Header */
#research-result-panel .research-result-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: start;
  width: 100%;
}

#research-result-panel .research-result-top > div:first-child {
  min-width: 0;
}

#research-result-panel .research-result-top h3 {
  max-width: none;
  margin-right: 0;
}

/* Score */
#research-result-panel .research-result-score {
  flex: none;
  white-space: nowrap;
}

/* Signal */
#research-result-panel .research-signal-row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* Evidence metrics */
#research-result-panel .research-metrics {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

#research-result-panel .research-metric {
  width: auto;
  min-width: 0;
}

/* Evidence narrative */
#research-result-panel .research-result-section {
  width: 100%;
  max-width: none;
  min-width: 0;
}

#research-result-panel #research-result-why {
  width: 100%;
  max-width: none;
  margin-right: 0;
}

/* Product + buyer */
#research-result-panel .research-result-columns {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

#research-result-panel .research-result-columns > * {
  width: auto;
  max-width: none;
  min-width: 0;
}

/* Next action */
#research-result-panel .research-next-action {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

/* Locked/full-workspace teaser */
#research-result-panel .research-locked {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

/* Result actions */
#research-result-panel .research-result-controls {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

#research-result-panel .research-result-controls button {
  width: auto;
  min-width: 150px;
}

/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1050px) {

  #research-opportunity .research-panel {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  #research-opportunity .research-panel > div:first-child {
    max-width: 760px;
    padding-top: 0;
  }

  #research-opportunity .research-panel > div:first-child h2 {
    max-width: 700px;
  }
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 720px) {

  #research-opportunity {
    padding: 40px 0;
  }

  #research-opportunity .research-panel {
    width: min(100% - 28px, 1440px);
    gap: 26px;
  }

  #research-form .research-fields,
  #research-form .research-email-row,
  #research-form .research-verification-row,
  #research-result-panel .research-metrics,
  #research-result-panel .research-result-columns {
    grid-template-columns: 1fr;
  }

  #research-result-panel {
    padding: 24px 20px;
  }

  #research-result-panel .research-result-top {
    grid-template-columns: 1fr;
  }

  #research-result-panel .research-result-score {
    justify-self: start;
  }

  #research-result-panel .research-result-controls {
    display: grid;
    grid-template-columns: 1fr;
  }

  #research-result-panel .research-result-controls button {
    width: 100%;
  }
}


/* ============================================================
   MOOSIZE RESEARCH — CLEAN RESET
   Final research layout
   ============================================================ */

/* ---------- Research section ---------- */

#research-opportunity {
  width: 100%;
  padding: 72px 0;
}

#research-opportunity .research-panel {
  width: min(100% - 64px, 1280px);
  margin: 0 auto;
  box-sizing: border-box;
}

#research-form {
  min-width: 0;
  width: 100%;
}


/* ---------- Completed result ---------- */

#research-result-panel {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 32px 0 0;
  padding: 38px 40px 40px;
  box-sizing: border-box;

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;

  border: 1px solid rgba(130, 112, 255, 0.30);
  border-radius: 24px;
  background:
    linear-gradient(
      145deg,
      rgba(22, 25, 67, 0.98),
      rgba(10, 13, 39, 0.98)
    );
}

#research-result-panel[hidden] {
  display: none !important;
}


/* ---------- Result header ---------- */

#research-result-panel .research-result-top {
  width: 100%;
  min-width: 0;

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: start;
}

#research-result-panel .research-result-top > div:first-child {
  min-width: 0;
}

#research-result-panel .research-result-label,
#research-result-panel .research-result-section-label {
  display: block;
  margin: 0 0 10px;

  font-size: 0.76rem;
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #a995ff;
}

#research-result-panel #research-result-title {
  width: 100%;
  max-width: 760px;
  margin: 0;

  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  overflow-wrap: break-word;
}

#research-result-panel #research-result-market {
  margin: 16px 0 0;
  font-size: 1rem;
  color: rgba(231, 234, 255, 0.68);
}


/* ---------- Score ---------- */

#research-result-panel .research-result-score {
  min-width: 132px;
  padding: 14px 20px;

  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 4px;

  border: 1px solid rgba(128, 106, 255, 0.48);
  border-radius: 999px;
  background:
    linear-gradient(
      135deg,
      rgba(83, 91, 225, 0.48),
      rgba(121, 49, 203, 0.48)
    );

  white-space: nowrap;
}

#research-result-panel .research-result-score strong {
  font-size: 2rem;
  line-height: 1;
}

#research-result-panel .research-result-score span {
  font-size: 0.9rem;
  font-weight: 700;
  color: rgba(239, 240, 255, 0.72);
}


/* ---------- Signal ---------- */

#research-result-panel .research-signal-row {
  width: 100%;

  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;

  padding-bottom: 4px;
}

#research-result-panel .research-signal {
  display: inline-flex;
  align-items: center;

  padding: 8px 13px;
  border: 1px solid rgba(139, 115, 255, 0.42);
  border-radius: 999px;

  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1;
}

#research-result-panel #research-result-confidence {
  font-size: 0.92rem;
  color: rgba(230, 232, 255, 0.72);
}


/* ---------- Metrics ---------- */

#research-result-panel .research-metrics {
  width: 100%;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

#research-result-panel .research-metric {
  min-width: 0;
  padding: 20px 22px;

  display: flex;
  flex-direction: column;
  gap: 8px;

  border: 1px solid rgba(126, 120, 190, 0.24);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
}

#research-result-panel .research-metric span {
  font-size: 0.88rem;
  color: rgba(228, 231, 255, 0.64);
}

#research-result-panel .research-metric strong {
  font-size: 1.55rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
}


/* ---------- Evidence ---------- */

#research-result-panel > .research-result-section {
  width: 100%;
  min-width: 0;

  padding-top: 26px;
  border-top: 1px solid rgba(124, 116, 190, 0.20);
}

#research-result-panel #research-result-why {
  width: 100%;
  max-width: 960px;
  margin: 0;

  font-size: 1.02rem;
  line-height: 1.72;
  color: rgba(237, 239, 255, 0.79);
}


/* ---------- Recommended product / buyer ---------- */

#research-result-panel .research-result-columns {
  width: 100%;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

#research-result-panel .research-result-columns .research-result-section {
  min-width: 0;
  margin: 0;
  padding: 22px;

  border: 1px solid rgba(126, 120, 190, 0.24);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.022);
}

#research-result-panel .research-result-columns p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(237, 239, 255, 0.80);
}


/* ---------- Next action ---------- */

#research-result-panel .research-next-action {
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;

  padding: 22px 24px;

  border: 1px solid rgba(127, 105, 255, 0.27);
  border-radius: 16px;
  background: rgba(86, 60, 185, 0.07);
}

#research-result-panel .research-next-action p {
  max-width: 960px;
  margin: 0;

  font-size: 1rem;
  line-height: 1.65;
  color: rgba(237, 239, 255, 0.80);
}


/* ---------- From research to launch ---------- */

#research-result-panel .research-locked {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;

  padding: 24px;

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;

  border: 1px solid rgba(137, 110, 255, 0.36);
  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      rgba(73, 57, 158, 0.20),
      rgba(107, 42, 163, 0.14)
    );
}

#research-result-panel .research-locked > div {
  min-width: 0;
}

#research-result-panel .research-locked strong {
  display: block;
  margin: 0 0 8px;

  font-size: 1.2rem;
  line-height: 1.25;
}

#research-result-panel .research-locked p {
  max-width: 720px;
  margin: 0;

  font-size: 0.93rem;
  line-height: 1.6;
  color: rgba(226, 229, 255, 0.67);
}

#research-result-panel .research-locked .button {
  width: auto;
  min-width: 190px;
  margin: 0;
  white-space: nowrap;
}


/* ---------- Actions ---------- */

#research-result-panel .research-result-controls {
  width: 100%;

  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;

  padding-top: 2px;
}

#research-result-panel .research-result-controls button {
  width: auto;
  min-width: 150px;
  margin: 0;
}


/* ============================================================
   PAGE FLOW
   ============================================================ */

.launch-section {
  padding: 0 0 72px;
}

#launch-workspace-card {
  width: min(100% - 64px, 1280px);
  margin: 0 auto;
  box-sizing: border-box;
  padding: 42px 44px;
}

.page-shell.insights {
  width: min(100% - 64px, 1280px);
  margin: 0 auto;
  box-sizing: border-box;

  padding: 72px 44px;
}

.page-shell.insights .section-heading {
  margin-bottom: 34px;
}

.page-shell.insights .insights-grid {
  gap: 22px;
}

.page-shell.newsletter {
  width: min(100% - 64px, 1280px);
  margin: 72px auto;
  box-sizing: border-box;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

  #research-opportunity {
    padding: 52px 0;
  }

  #research-opportunity .research-panel,
  #launch-workspace-card,
  .page-shell.insights,
  .page-shell.newsletter {
    width: min(100% - 40px, 1280px);
  }

  #research-result-panel {
    padding: 30px;
  }

  #research-result-panel .research-locked {
    grid-template-columns: 1fr;
  }

  #research-result-panel .research-locked .button {
    justify-self: start;
  }

  .page-shell.insights {
    padding: 56px 30px;
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 640px) {

  #research-opportunity {
    padding: 36px 0;
  }

  #research-opportunity .research-panel,
  #launch-workspace-card,
  .page-shell.insights,
  .page-shell.newsletter {
    width: calc(100% - 28px);
  }

  #research-result-panel {
    margin-top: 24px;
    padding: 24px 20px;
    gap: 22px;
    border-radius: 20px;
  }

  #research-result-panel .research-result-top {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  #research-result-panel .research-result-score {
    justify-self: start;
    min-width: 112px;
  }

  #research-result-panel #research-result-title {
    font-size: clamp(2rem, 10vw, 2.8rem);
  }

  #research-result-panel .research-metrics,
  #research-result-panel .research-result-columns {
    grid-template-columns: 1fr;
  }

  #research-result-panel .research-locked {
    padding: 20px;
  }

  #research-result-panel .research-locked .button {
    width: 100%;
    min-width: 0;
  }

  #research-result-panel .research-result-controls {
    display: grid;
    grid-template-columns: 1fr;
  }

  #research-result-panel .research-result-controls button {
    width: 100%;
    min-width: 0;
  }

  #launch-workspace-card {
    padding: 30px 24px;
  }

  .page-shell.insights {
    padding: 48px 24px;
  }

  .page-shell.newsletter {
    margin-top: 48px;
    margin-bottom: 48px;
  }

}


/* ============================================================
   MOOSIZE — INSIGHT ARTICLE PAGE
   Isolated long-form article presentation.
   ============================================================ */

body.mz-insight-article-page {
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(86, 72, 190, 0.16),
      transparent 38rem
    ),
    #030616 !important;

  color: #f5f6ff !important;
}


/* ---------- Page shell ---------- */

body.mz-insight-article-page main.mz-page-shell {
  width: min(100% - 48px, 1120px) !important;
  max-width: 1120px !important;

  margin: 0 auto !important;

  padding:
    42px
    0
    88px !important;
}


/* ---------- Navigation ---------- */

body.mz-insight-article-page main > nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;

  margin:
    0
    0
    54px !important;

  padding:
    0
    0
    22px !important;

  border-bottom:
    1px solid rgba(139, 126, 255, 0.18) !important;
}

body.mz-insight-article-page main > nav a {
  color: #aaa0ff !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}


/* ---------- Kill catalogue-card treatment ---------- */

body.mz-insight-article-page main article.mz-insight-article {
  display: block !important;

  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}


/* ---------- Article header ---------- */

body.mz-insight-article-page
.mz-insight-article
> h1.mz-page-title {
  max-width: 1000px !important;

  margin:
    0
    0
    24px !important;

  color: #f8f8ff !important;

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;

  font-size:
    clamp(2.7rem, 5.3vw, 5rem) !important;

  font-weight: 800 !important;
  letter-spacing: -0.055em !important;
  line-height: 0.99 !important;
}

body.mz-insight-article-page
.mz-insight-article
> .summary {
  max-width: 820px !important;

  margin:
    0
    0
    22px !important;

  color: #b9bdd3 !important;

  font-size:
    clamp(1.08rem, 1.7vw, 1.3rem) !important;

  line-height: 1.62 !important;
}

body.mz-insight-article-page
.mz-insight-article
> .byline {
  margin:
    0
    0
    44px !important;

  color: #8f95ad !important;

  font-size: 0.96rem !important;
  line-height: 1.5 !important;
}


/* ---------- Main reading surface ---------- */

body.mz-insight-article-page
.mz-insight-article
.content {
  width: 100% !important;

  margin: 0 !important;

  padding:
    clamp(34px, 5vw, 64px)
    clamp(30px, 6vw, 72px) !important;

  color: #c9cde0 !important;

  background:
    linear-gradient(
      145deg,
      rgba(18, 23, 66, 0.98),
      rgba(12, 16, 48, 0.98)
    ) !important;

  border:
    1px solid rgba(126, 111, 255, 0.28) !important;

  border-radius: 24px !important;

  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.22) !important;

  font-size: 1.08rem !important;
  line-height: 1.78 !important;
}


/* Keep prose readable rather than stretching across full card */

body.mz-insight-article-page
.mz-insight-article
.content > * {
  max-width: 820px;
}


/* ---------- Article typography ---------- */

body.mz-insight-article-page
.mz-insight-article
.content h1,
body.mz-insight-article-page
.mz-insight-article
.content h2,
body.mz-insight-article-page
.mz-insight-article
.content h3,
body.mz-insight-article-page
.mz-insight-article
.content h4 {
  color: #f5f6ff !important;

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;

  font-weight: 750 !important;
  letter-spacing: -0.025em !important;
}

body.mz-insight-article-page
.mz-insight-article
.content h1 {
  margin:
    0
    0
    30px !important;

  font-size:
    clamp(2rem, 4vw, 3.2rem) !important;

  line-height: 1.08 !important;
}

body.mz-insight-article-page
.mz-insight-article
.content h2 {
  margin:
    54px
    0
    18px !important;

  font-size:
    clamp(1.55rem, 2.7vw, 2.15rem) !important;

  line-height: 1.15 !important;
}

body.mz-insight-article-page
.mz-insight-article
.content h3 {
  margin:
    38px
    0
    14px !important;

  font-size:
    clamp(1.2rem, 2vw, 1.55rem) !important;

  line-height: 1.25 !important;
}

body.mz-insight-article-page
.mz-insight-article
.content p {
  margin:
    0
    0
    22px !important;

  color: #c9cde0 !important;

  font-size: 1.08rem !important;
  line-height: 1.78 !important;
}

body.mz-insight-article-page
.mz-insight-article
.content strong {
  color: #f2f3ff !important;
}

body.mz-insight-article-page
.mz-insight-article
.content ul,
body.mz-insight-article-page
.mz-insight-article
.content ol {
  margin:
    8px
    0
    28px !important;

  padding-left: 28px !important;
}

body.mz-insight-article-page
.mz-insight-article
.content li {
  margin-bottom: 10px !important;
  color: #c9cde0 !important;
  line-height: 1.7 !important;
}

body.mz-insight-article-page
.mz-insight-article
.content a {
  color: #aaa0ff !important;
  font-weight: 700 !important;
}


/* ---------- Tables ---------- */

body.mz-insight-article-page
.mz-insight-article
.content table {
  width: 100% !important;
  max-width: 100% !important;

  margin:
    30px
    0
    38px !important;

  border-collapse: collapse !important;

  color: #c9cde0 !important;

  background:
    rgba(255, 255, 255, 0.025) !important;

  border:
    1px solid rgba(126, 111, 255, 0.22) !important;
}

body.mz-insight-article-page
.mz-insight-article
.content th,
body.mz-insight-article-page
.mz-insight-article
.content td {
  padding:
    14px
    16px !important;

  text-align: left !important;

  border-bottom:
    1px solid rgba(126, 111, 255, 0.16) !important;
}

body.mz-insight-article-page
.mz-insight-article
.content th {
  color: #f4f4ff !important;
  background:
    rgba(113, 91, 255, 0.09) !important;
}


/* ---------- CTA ---------- */

body.mz-insight-article-page
main
> section.cta {
  margin:
    38px
    0
    0 !important;

  padding:
    34px
    38px !important;

  color: #f5f6ff !important;

  background:
    linear-gradient(
      135deg,
      rgba(75, 78, 222, 0.20),
      rgba(174, 51, 238, 0.13)
    ) !important;

  border:
    1px solid rgba(129, 112, 255, 0.30) !important;

  border-radius: 22px !important;
}

body.mz-insight-article-page
main
> section.cta h2 {
  margin:
    0
    0
    10px !important;

  color: #fff !important;

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    sans-serif !important;
}

body.mz-insight-article-page
main
> section.cta p {
  margin:
    0
    0
    16px !important;

  color: #bfc3d8 !important;
}

body.mz-insight-article-page
main
> section.cta a {
  color: #b2a7ff !important;
  font-weight: 800 !important;
}


/* ---------- Mobile ---------- */

@media (max-width: 700px) {

  body.mz-insight-article-page
  main.mz-page-shell {
    width: calc(100% - 28px) !important;

    padding:
      26px
      0
      60px !important;
  }

  body.mz-insight-article-page
  main > nav {
    margin-bottom: 36px !important;
  }

  body.mz-insight-article-page
  .mz-insight-article
  > h1.mz-page-title {
    font-size:
      clamp(2.35rem, 11vw, 3.5rem) !important;
  }

  body.mz-insight-article-page
  .mz-insight-article
  .content {
    padding:
      30px
      22px !important;

    border-radius: 20px !important;
  }

  body.mz-insight-article-page
  .mz-insight-article
  .content p {
    font-size: 1rem !important;
  }

  body.mz-insight-article-page
  .mz-insight-article
  .content {
    overflow-x: auto !important;
  }

  body.mz-insight-article-page
  main
  > section.cta {
    padding:
      28px
      24px !important;
  }
}

/* ============================================================
   MOOSIZE HOMEPAGE — TOOLS + SEO
   ============================================================ */

.moosize-tools-section {
  margin: 72px auto;
  padding: 56px;
  box-sizing: border-box;
  border: 1px solid rgba(124, 99, 255, 0.20);
  border-radius: 28px;
  background:
    radial-gradient(
      circle at 82% 12%,
      rgba(123, 74, 255, 0.13),
      transparent 30rem
    ),
    linear-gradient(
      145deg,
      rgba(17, 21, 59, 0.97),
      rgba(8, 11, 32, 0.98)
    );
}

.moosize-tools-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: end;
  margin-bottom: 34px;
}

.moosize-tools-heading h2 {
  margin: 8px 0 14px;
  font-size: clamp(2.25rem, 4vw, 4rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

.moosize-tools-heading p:not(.eyebrow) {
  max-width: 700px;
  margin: 0;
  color: #abb4cf;
  line-height: 1.7;
}

.moosize-tools-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.moosize-tool-card {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid rgba(126, 112, 255, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      rgba(23, 27, 71, 0.88),
      rgba(13, 16, 45, 0.94)
    );
  text-decoration: none;
  color: inherit;
}

.moosize-tool-card:hover {
  border-color: rgba(142, 119, 255, 0.52);
  transform: translateY(-2px);
}

.moosize-tool-card--premium {
  border-color: rgba(164, 102, 255, 0.30);
}

.moosize-tool-card h3 {
  margin: 0 0 12px;
  color: #f5f7ff;
}

.moosize-tool-card p {
  margin: 0 0 24px;
  color: #9fa9c4;
  line-height: 1.6;
}

.moosize-tool-card span {
  margin-top: auto;
  color: #aaa0ff;
  font-weight: 800;
}

.moosize-tools-journey {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  text-align: center;
  color: #a9b1ca;
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.12em;
}

@media (max-width: 1050px) {
  .moosize-tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .moosize-tools-section {
    margin: 46px auto;
    padding: 32px 22px;
  }

  .moosize-tools-heading {
    grid-template-columns: 1fr;
  }

  .moosize-tools-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   MOOSIZE HOMEPAGE — TOOLS ALIGNMENT + FREE POSITIONING
   ============================================================ */

/*
 * Keep the major homepage conversion sections on one shared
 * geometry so their left/right edges visually line up.
 */
body #launch-workspace-card,
body #moosize-tools,
body .page-shell.insights,
body .page-shell.newsletter {
  width: min(100% - 64px, 1280px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Tools should sit naturally between workflow and insights. */
body #moosize-tools {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 54px 48px 50px !important;
}

/*
 * Remove the visual width jump between Tools and Insights.
 */
body #moosize-tools + .page-shell.insights {
  margin-top: 0 !important;
}

/* Stronger free-tools positioning */
#moosize-tools .moosize-tools-heading > div {
  max-width: 820px;
}

#moosize-tools .moosize-tools-heading h2 {
  max-width: 820px;
  margin-bottom: 16px;
}

.moosize-tools-free-word {
  background:
    linear-gradient(
      90deg,
      #6679ff,
      #ad39eb
    );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#moosize-tools .moosize-tools-heading p:not(.eyebrow) {
  max-width: 740px;
}

/* Badge row */
.moosize-tool-card-status {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}

.moosize-tool-card-status span {
  margin: 0 !important;
  padding: 5px 9px;

  border: 1px solid rgba(72, 210, 144, .32);
  border-radius: 999px;

  background: rgba(43, 176, 116, .10);

  color: #8ee0b6 !important;

  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .10em;
  line-height: 1;
}

.moosize-tool-card-status--premium span {
  border-color: rgba(160, 113, 255, .38);
  background: rgba(127, 75, 232, .14);
  color: #c3b5ff !important;
}

/* Give cards stronger visual hierarchy */
#moosize-tools .moosize-tool-card {
  min-height: 245px;
  padding: 24px;
}

#moosize-tools .moosize-tool-card h3 {
  font-size: 1.05rem;
  margin-bottom: 10px;
}

#moosize-tools .moosize-tool-card p {
  line-height: 1.55;
}

/*
 * "Explore all free tools" should read as a real CTA rather
 * than another small purple text link.
 */
#moosize-tools .view-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 44px;
  padding: 0 17px;

  border: 1px solid rgba(143, 124, 255, .34);
  border-radius: 10px;

  background: rgba(105, 83, 225, .12);

  color: #c1b6ff;
  font-weight: 850;
  text-decoration: none;
}

#moosize-tools .view-all:hover {
  border-color: rgba(159, 139, 255, .64);
  background: rgba(105, 83, 225, .20);
}

/* Cleaner section transition */
body .page-shell.insights {
  padding-top: 54px !important;
}

/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1050px) {

  body #launch-workspace-card,
  body #moosize-tools,
  body .page-shell.insights,
  body .page-shell.newsletter {
    width: min(100% - 40px, 1280px) !important;
  }

  body #moosize-tools {
    padding: 44px 34px !important;
  }

}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 720px) {

  body #launch-workspace-card,
  body #moosize-tools,
  body .page-shell.insights,
  body .page-shell.newsletter {
    width: calc(100% - 28px) !important;
  }

  body #moosize-tools {
    padding: 32px 22px !important;
  }

  #moosize-tools .moosize-tools-heading {
    grid-template-columns: 1fr !important;
  }

  #moosize-tools .view-all {
    justify-self: start;
  }

  #moosize-tools .moosize-tool-card {
    min-height: 0;
  }

}

/* ============================================================
   MOOSIZE HOMEPAGE — ALIGNMENT + FREE TOOLS EMPHASIS
   ============================================================ */

body #launch-workspace-card,
body #moosize-tools,
body .page-shell.insights,
body .page-shell.newsletter {
  width: min(100% - 64px, 1280px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

body #moosize-tools {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 54px 48px 50px !important;
}

body #moosize-tools + .page-shell.insights {
  margin-top: 0 !important;
}

#moosize-tools .moosize-tools-heading > div {
  max-width: 820px;
}

#moosize-tools .moosize-tools-heading h2 {
  max-width: 820px;
  margin-bottom: 16px;
}

.moosize-tools-free-word {
  background: linear-gradient(
    90deg,
    #6679ff,
    #ad39eb
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#moosize-tools .moosize-tools-heading p:not(.eyebrow) {
  max-width: 740px;
}

.moosize-tool-card-status {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}

.moosize-tool-card-status span {
  margin: 0 !important;
  padding: 5px 9px;
  border: 1px solid rgba(72, 210, 144, .32);
  border-radius: 999px;
  background: rgba(43, 176, 116, .10);
  color: #8ee0b6 !important;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .10em;
  line-height: 1;
}

.moosize-tool-card-status--premium span {
  border-color: rgba(160, 113, 255, .38);
  background: rgba(127, 75, 232, .14);
  color: #c3b5ff !important;
}

#moosize-tools .moosize-tool-card {
  min-height: 245px;
  padding: 24px;
}

#moosize-tools .moosize-tool-card h3 {
  font-size: 1.05rem;
  margin-bottom: 10px;
}

#moosize-tools .moosize-tool-card p {
  line-height: 1.55;
}

#moosize-tools .view-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 17px;
  border: 1px solid rgba(143, 124, 255, .34);
  border-radius: 10px;
  background: rgba(105, 83, 225, .12);
  color: #c1b6ff;
  font-weight: 850;
  text-decoration: none;
}

#moosize-tools .view-all:hover {
  border-color: rgba(159, 139, 255, .64);
  background: rgba(105, 83, 225, .20);
}

body .page-shell.insights {
  padding-top: 54px !important;
}

@media (max-width: 1050px) {
  body #launch-workspace-card,
  body #moosize-tools,
  body .page-shell.insights,
  body .page-shell.newsletter {
    width: min(100% - 40px, 1280px) !important;
  }

  body #moosize-tools {
    padding: 44px 34px !important;
  }
}

@media (max-width: 720px) {
  body #launch-workspace-card,
  body #moosize-tools,
  body .page-shell.insights,
  body .page-shell.newsletter {
    width: calc(100% - 28px) !important;
  }

  body #moosize-tools {
    padding: 32px 22px !important;
  }

  #moosize-tools .moosize-tools-heading {
    grid-template-columns: 1fr !important;
  }

  #moosize-tools .view-all {
    justify-self: start;
  }

  #moosize-tools .moosize-tool-card {
    min-height: 0;
  }
}

/* MOOSIZE HOMEPAGE STRUCTURE
   All homepage sections use the same .page-shell boundary.
   Do not set individual section widths here.
*/

body #launch-workspace-card {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

body #moosize-tools {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

body #moosize-tools > .page-shell {
  width: min(1240px, calc(100% - 44px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

body .insights-section > .page-shell {
  box-sizing: border-box !important;
}

body .newsletter-section > .page-shell {
  box-sizing: border-box !important;
}

@media (max-width: 760px) {
  body #moosize-tools > .page-shell {
    width: min(100% - 28px, 1240px) !important;
  }
}

/* ============================================================
   PUBLIC LAYOUT POLISH
   Keep card content readable and aligned at every breakpoint.
   ============================================================ */

#moosize-tools .moosize-tools-grid {
  align-items: stretch;
}

#moosize-tools .moosize-tools-heading {
  margin-bottom: 28px;
}

#moosize-tools .moosize-tools-heading > div,
#moosize-tools .moosize-tools-heading h2 {
  max-width: 1000px;
}

#moosize-tools .moosize-tools-heading h2 {
  font-size: clamp(2.15rem, 3.25vw, 3.35rem);
  line-height: 1.06;
}

#moosize-tools .moosize-tool-card {
  min-width: 0;
  height: auto;
  min-height: 0;
  padding: 20px;
}

#moosize-tools .moosize-tool-card h3 {
  max-width: 100%;
  margin-bottom: 8px;
  line-height: 1.25;
  overflow-wrap: break-word;
}

#moosize-tools .moosize-tool-card p {
  max-width: 100%;
  margin-bottom: 18px;
  line-height: 1.5;
  overflow-wrap: break-word;
}

/* Keep each action label and arrow together at the foot of its card. */
#moosize-tools .moosize-tool-card > span {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  margin-top: auto;
  font-size: .92rem;
  line-height: 1.3;
  white-space: nowrap;
}

#moosize-tools .moosize-tool-card-status {
  min-width: 0;
  margin-bottom: 12px;
}

#moosize-tools .moosize-tool-card-status > span {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  box-sizing: border-box;
  white-space: nowrap;
  line-height: 1.2;
}

@media (min-width: 1051px) {
  #moosize-tools .moosize-tool-card h3 {
    min-height: 2.5em;
  }
}

@media (max-width: 720px) {
  #moosize-tools .moosize-tool-card {
    height: auto;
    padding: 20px;
  }

  #moosize-tools .moosize-tool-card-status > span {
    font-size: .6rem;
    letter-spacing: .08em;
  }

}