/* Compact public landing. Shares the app's paper/grid visual language. */
.public-auth-shell {
  min-height: 100vh;
  width: 100%;
}

.public-auth-form-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px 24px;
  background:
    linear-gradient(rgba(211, 207, 195, 0.45) 1px, transparent 1px),
    linear-gradient(90deg, rgba(211, 207, 195, 0.45) 1px, transparent 1px),
    var(--bg-main);
  background-size: 38px 38px;
}

.public-auth-card {
  position: relative;
  padding-top: 58px;
}

.public-auth-back {
  position: absolute;
  top: 18px;
  left: 22px;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 700;
}

.public-auth-back:hover {
  color: var(--primary-hover);
}

.public-landing-shell {
  min-height: 100vh;
  color: #17191d;
  background:
    linear-gradient(rgba(211, 207, 195, 0.42) 1px, transparent 1px),
    linear-gradient(90deg, rgba(211, 207, 195, 0.42) 1px, transparent 1px),
    #f5f3ec;
  background-size: 38px 38px;
}

.public-landing-shell main {
  display: block;
}

.public-header {
  width: min(1320px, calc(100% - 48px));
  height: 78px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(23, 25, 29, 0.18);
  background: rgba(245, 243, 236, 0.84);
  backdrop-filter: blur(8px);
}

.public-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #17191d;
  text-decoration: none;
}

.public-brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 2px solid #17191d;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-weight: 800;
}

.public-brand-copy {
  display: grid;
  line-height: 1.05;
}

.public-brand-copy strong {
  font-size: 16px;
}

.public-brand-copy span {
  color: #1d4e89;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.public-header-actions,
.public-hero-actions,
.public-final-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.public-link-button {
  padding: 11px 8px;
  color: #17191d;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.public-primary-button,
.public-secondary-button {
  min-height: 45px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 800;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.public-primary-button {
  color: #fff;
  border: 1px solid #17191d;
  background: #17191d;
  box-shadow: 4px 4px 0 rgba(29, 78, 137, 0.22);
}

.public-primary-button:hover {
  transform: translate(-1px, -1px);
  box-shadow: 6px 6px 0 rgba(29, 78, 137, 0.22);
}

.public-secondary-button {
  color: #17191d;
  border: 1px solid rgba(23, 25, 29, 0.42);
  background: rgba(255, 255, 255, 0.38);
}

.public-secondary-button:hover {
  border-color: #17191d;
  background: rgba(255, 255, 255, 0.74);
}

.public-hero {
  width: min(1320px, calc(100% - 48px));
  min-height: 620px;
  margin: 0 auto;
  padding: 68px 0 62px;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(500px, 1.08fr);
  align-items: center;
  gap: clamp(48px, 7vw, 92px);
}

.public-kicker {
  color: #1d4e89;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.public-hero h1 {
  margin: 20px 0 22px;
  font-size: clamp(50px, 5.7vw, 82px);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.public-hero h1 em {
  color: #1d4e89;
  font-style: normal;
}

.public-hero-copy > p {
  max-width: 610px;
  margin-bottom: 28px;
  color: #555b65;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.62;
}

.public-trust-row {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  color: #707681;
  font-size: 12px;
}

.public-trust-row span::before {
  content: "✓";
  margin-right: 7px;
  color: #2a7c52;
  font-weight: 800;
}

.public-preview-card {
  overflow: hidden;
  border: 2px solid #17191d;
  border-radius: 6px;
  background: #fff;
  box-shadow: 14px 14px 0 rgba(23, 25, 29, 0.10);
}

.public-preview-top,
.public-preview-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.public-preview-top {
  min-height: 66px;
  padding: 13px 18px;
  border-bottom: 2px solid #17191d;
}

.public-preview-top > div {
  display: grid;
  gap: 3px;
}

.public-preview-top span {
  color: #737985;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
}

.public-preview-top > div strong {
  font-size: 13px;
}

.public-preview-top > strong {
  padding: 8px 11px;
  border-radius: 3px;
  color: #96dbac;
  background: #17191d;
  font-family: var(--font-mono);
  font-size: 17px;
}

.public-preview-body {
  min-height: 340px;
  display: grid;
  grid-template-columns: 1fr 0.95fr;
}

.public-preview-question,
.public-preview-choices {
  padding: 28px;
  background:
    linear-gradient(rgba(220, 216, 204, 0.45) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220, 216, 204, 0.45) 1px, transparent 1px),
    #faf9f5;
  background-size: 34px 34px;
}

.public-preview-question {
  border-right: 2px solid #17191d;
}

.public-preview-question > span {
  color: #777c85;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
}

.public-preview-question p {
  margin-top: 36px;
  font-size: 15px;
  line-height: 1.9;
}

.public-preview-choice {
  min-height: 53px;
  margin-bottom: 9px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid #d3d0c6;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.88);
}

.public-preview-choice > span {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 2px solid #8b9098;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 11px;
}

.public-preview-choice strong {
  font-size: 12px;
}

.public-preview-choice.selected {
  border-color: #1d4e89;
  background: rgba(29, 78, 137, 0.07);
}

.public-preview-choice.selected > span {
  color: #fff;
  border-color: #1d4e89;
  background: #1d4e89;
}

.public-preview-bottom {
  min-height: 52px;
  padding: 9px 18px;
  border-top: 2px solid #17191d;
  font-size: 10px;
}

.public-preview-bottom span {
  color: #2a7c52;
  font-family: var(--font-mono);
  font-weight: 700;
}

.public-preview-bottom strong {
  padding: 8px 12px;
  color: #fff;
  background: #17191d;
}

.public-value-section {
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto;
  padding: 78px 0;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 70px;
  border-top: 1px solid rgba(23, 25, 29, 0.18);
}

.public-value-intro h2,
.public-final-cta h2 {
  margin: 13px 0 0;
  font-size: clamp(32px, 3.8vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.045em;
}

.public-value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(23, 25, 29, 0.22);
}

.public-value-grid article {
  min-height: 245px;
  padding: 24px 24px 24px 0;
  border-right: 1px solid rgba(23, 25, 29, 0.18);
}

.public-value-grid article + article {
  padding-left: 24px;
}

.public-value-grid article:last-child {
  border-right: 0;
}

.public-value-grid article > span {
  color: #1d4e89;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
}

.public-value-grid h3 {
  margin: 44px 0 11px;
  font-size: 19px;
}

.public-research-section {
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto;
  padding: 78px 0;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 70px;
  border-top: 1px solid rgba(23, 25, 29, 0.18);
}

.public-research-section .public-value-intro p {
  max-width: 580px;
  margin: 18px 0 0;
  color: var(--text-dim);
  line-height: 1.65;
}

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

.public-research-card {
  padding: 28px;
  border: 1px solid rgba(23, 25, 29, 0.24);
  background: rgba(255, 255, 255, 0.72);
}

.public-research-card > span {
  color: #1d4e89;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
}

.public-research-card h3 {
  margin: 30px 0 12px;
  font-size: 22px;
  line-height: 1.15;
}

.public-research-card p {
  min-height: 96px;
  margin: 0 0 24px;
  color: var(--text-dim);
  line-height: 1.6;
}

.public-research-card a {
  color: #173f70;
  font-weight: 800;
}

.public-value-grid p {
  color: #666c76;
  font-size: 13px;
  line-height: 1.65;
}

.public-pricing-section {
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto 64px;
  padding: 56px 0;
  scroll-margin-top: 90px;
  border-top: 1px solid rgba(23, 25, 29, 0.14);
}

.public-pricing-section .public-value-intro { max-width: 760px; margin-bottom: 30px; }
.public-pricing-section .public-value-intro p { margin-top:12px; color:#666c76; line-height:1.6; }
.public-pricing-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.public-pricing-card { padding:26px; border:1px solid rgba(23,25,29,.18); background:#fff; }
.public-pricing-card { position:relative; display:flex; min-width:0; flex-direction:column; }
.public-pricing-card.featured { border:2px solid #1d4e89; box-shadow:7px 7px 0 rgba(29,78,137,.14); }
.public-pricing-card > span { color:#1d4e89; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.public-pricing-card h3 { margin:14px 0 8px; font-size:25px; }
.public-pricing-card p { color:#666c76; font-size:13px; line-height:1.55; }
.public-pricing-card .public-price-note { min-height:42px; }
.public-pricing-card .public-primary-button { width:100%; margin-top:auto; }
.public-price-value { display:block; margin:12px 0 3px; font-size:clamp(24px,2.4vw,32px); line-height:1.15; overflow-wrap:anywhere; }
.public-popular-ribbon { position:absolute; top:-12px; right:14px; padding:5px 8px; color:#fff !important; background:#1d4e89; font-family:var(--font-mono); font-size:9px !important; letter-spacing:.08em; }
.public-payment-disclosure { margin:10px 0 0; color:#666c76; font-size:12px; line-height:1.6; }
.public-tax-disclosure { margin:22px 0 0; padding:16px 18px; color:#555c66; background:#f2f5f8; border-left:4px solid #1d4e89; }

.public-final-cta {
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto 54px;
  padding: 48px 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  color: #fff;
  background: #17191d;
  box-shadow: 10px 10px 0 rgba(29, 78, 137, 0.28);
}

.public-final-cta h2 {
  max-width: 760px;
  color: #fff;
}

.public-final-cta p {
  max-width: 700px;
  margin-top: 12px;
  color: #c4c8ce;
  line-height: 1.6;
}

.public-primary-button.light {
  color: #17191d;
  border-color: #fff;
  background: #fff;
  box-shadow: 4px 4px 0 rgba(159, 194, 239, 0.34);
}

.public-secondary-button.dark {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  background: transparent;
}

.public-footer {
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto;
  padding: 28px 0 38px;
  display: grid;
  grid-template-columns: minmax(190px, .7fr) minmax(320px, 1.35fr) minmax(280px, 1fr);
  align-items: center;
  gap: 34px;
  border-top: 1px solid rgba(23, 25, 29, 0.18);
}

.public-footer > * { min-width: 0; }

.public-footer > p {
  max-width: 64ch;
  overflow-wrap: normal;
}

.public-footer strong {
  font-size: 14px;
}

.public-footer p,
.public-footer span {
  color: #777d86;
  font-size: 10px;
  line-height: 1.55;
}

.public-footer-meta {
  display:grid;
  justify-items:end;
  gap:8px;
}

.public-legal-links {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
  flex-wrap:wrap;
}

.public-legal-links a {
  color:#555c66;
  font-size:11px;
  font-weight:700;
  text-decoration:none;
}

.public-legal-links a:hover {
  color:#1d4e89;
  text-decoration:underline;
  text-underline-offset:3px;
}

.public-auth-form-legal {
  width:min(440px,100%);
  margin-top:20px;
  display:grid;
  justify-items:center;
  gap:9px;
  color:var(--text-dim);
  font-size:11px;
  text-align:center;
}

.public-auth-form-legal .public-legal-links { justify-content:center; }

@media (max-width: 980px) {
  .public-hero {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .public-preview-card {
    width: min(860px, 100%);
    justify-self: center;
  }

  .public-value-section {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .public-research-section {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .public-pricing-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }

  .public-final-cta {
    align-items: flex-start;
    flex-direction: column;
  }

  .public-footer {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 14px;
  }

  .public-footer-meta { justify-items: start; }
  .public-footer .public-legal-links { justify-content: flex-start; }
}

@media (max-width: 700px) {
  .public-header,
  .public-hero,
  .public-value-section,
  .public-research-section,
  .public-pricing-section,
  .public-final-cta,
  .public-footer {
    width: min(100% - 28px, 660px);
  }

  .public-footer-meta { justify-items:start; }
  .public-footer .public-legal-links { justify-content:flex-start; }

  .public-header {
    height: 70px;
  }

  .public-header-cta {
    display: none;
  }

  .public-pricing-grid { grid-template-columns:1fr; }

  .public-brand-copy strong {
    font-size: 14px;
  }

  .public-brand-mark {
    width: 38px;
    height: 38px;
  }

  .public-hero {
    min-height: auto;
    padding: 50px 0 54px;
  }

  .public-hero h1 {
    font-size: clamp(42px, 13vw, 62px);
  }

  .public-hero-actions,
  .public-final-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .public-primary-button,
  .public-secondary-button {
    width: 100%;
  }

  .public-preview-body {
    grid-template-columns: 1fr;
  }

  .public-preview-question {
    min-height: 240px;
    border-right: 0;
    border-bottom: 2px solid #17191d;
  }

  .public-value-section {
    padding: 60px 0;
  }

  .public-research-section {
    padding: 60px 0;
  }

  .public-research-grid {
    grid-template-columns: 1fr;
  }

  .public-research-card p {
    min-height: 0;
  }

  .public-value-grid {
    grid-template-columns: 1fr;
  }

  .public-value-grid article,
  .public-value-grid article + article {
    min-height: auto;
    padding: 24px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(23, 25, 29, 0.18);
  }

  .public-value-grid article:last-child {
    border-bottom: 0;
  }

  .public-value-grid h3 {
    margin-top: 18px;
  }

  .public-final-cta {
    padding: 38px 26px;
  }

  .public-footer {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 14px;
  }

  .public-auth-form-shell {
    padding: 18px 14px;
  }
}


/* Mocklet public dynamic pricing-card focus */
.public-pricing-card {
  transition:
    transform 180ms ease,
    outline-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
  outline: 2px solid transparent;
  outline-offset: -2px;
}

.public-pricing-card.featured {
  border: 1px solid rgba(23, 25, 29, 0.18);
  outline-color: #1d4e89;
  box-shadow: 7px 7px 0 rgba(29, 78, 137, 0.14);
}

.public-pricing-card:focus-within {
  z-index: 2;
  outline-color: #1d4e89;
  box-shadow: 7px 7px 0 rgba(29, 78, 137, 0.14);
  transform: translateY(-4px);
}

.public-pricing-grid:has(.public-pricing-card:focus-within)
  .public-pricing-card.featured:not(:focus-within) {
  outline-color: transparent;
  box-shadow: none;
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .public-pricing-card:hover {
    z-index: 2;
    outline-color: #1d4e89;
    box-shadow: 7px 7px 0 rgba(29, 78, 137, 0.14);
    transform: translateY(-4px);
  }

  .public-pricing-grid:has(.public-pricing-card:hover)
    .public-pricing-card.featured:not(:hover) {
    outline-color: transparent;
    box-shadow: none;
    transform: none;
  }
}

/* Miu product story on the signed-out homepage. */
.public-miu-section {
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto 74px;
  padding: clamp(34px, 5vw, 70px);
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  gap: clamp(36px, 6vw, 78px);
  align-items: center;
  color: #eefbff;
  border: 2px solid #17191d;
  border-radius: 6px;
  background: radial-gradient(circle at 88% 12%, rgba(52, 205, 225, .23), transparent 27%), linear-gradient(135deg, #071b36, #12375a);
  box-shadow: 12px 12px 0 rgba(23, 25, 29, .10);
}
.public-miu-section .public-kicker { color: #74dcec; }
.public-miu-copy h2 { margin: 14px 0 18px; color: #fff; font-size: clamp(34px, 4vw, 56px); line-height: 1.04; letter-spacing: -.045em; }
.public-miu-copy > p { margin: 0 0 26px; color: #cfe1ec; font-size: 16px; line-height: 1.7; }
.public-miu-section .public-primary-button { color: #071b36; border-color: #8be2ed; background: #8be2ed; }
.public-miu-flow { display: grid; border-top: 1px solid rgba(207, 238, 244, .35); }
.public-miu-flow article { padding: 20px 0; display: grid; grid-template-columns: 48px 1fr; gap: 18px; border-bottom: 1px solid rgba(207, 238, 244, .25); }
.public-miu-flow article > span { color: #74dcec; font-family: var(--font-mono); font-size: 12px; font-weight: 800; }
.public-miu-flow h3 { margin: 0 0 6px; color: #fff; font-size: 18px; }
.public-miu-flow p { margin: 0; color: #cfe1ec; font-size: 13px; line-height: 1.6; }

.public-miu-features { display: grid; gap: 22px; border-top: 1px solid rgba(207, 238, 244, .35); padding-top: 22px; }
.public-miu-features article { padding-bottom: 20px; border-bottom: 1px solid rgba(207, 238, 244, .25); }
.public-miu-features h3 { margin: 0 0 8px; color: #fff; font-size: 17px; line-height: 1.3; }
.public-miu-features > article > p { margin: 0; color: #cfe1ec; font-size: 13.5px; line-height: 1.6; }
.public-miu-modes { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.public-miu-modes li { color: #cfe1ec; font-size: 13px; line-height: 1.55; padding-left: 16px; position: relative; }
.public-miu-modes li::before { content: '—'; position: absolute; left: 0; color: #74dcec; }
.public-miu-modes li strong { color: #fff; font-weight: 700; }

@media (max-width: 900px) {
  .public-miu-section { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .public-miu-section { width: min(100% - 28px, 1320px); margin-bottom: 52px; padding: 30px 22px; }
  .public-miu-copy h2 { font-size: clamp(32px, 10vw, 44px); }
  .public-miu-flow article { grid-template-columns: 36px 1fr; gap: 10px; }
}


/* P2 content discovery navigation */
.public-footer-nav {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(23, 25, 29, 0.12);
}

.public-footer-group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 18px;
}

.public-footer-group > strong {
  flex-basis: 100%;
  color: #17191d;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.public-footer-group a {
  color: #3f4650;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.public-footer-group a:hover {
  color: #1d4e89;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 700px) {
  .public-footer-nav { grid-template-columns: 1fr; }
  .public-footer-group { align-items: flex-start; flex-direction: column; }
  .public-footer-group > strong { flex-basis: auto; }
}