@import url("/fonts.css");
:root {
  --ink: #142c34;
  --muted: #586c72;
  --teal: #087f77;
  --paper: #f5f6f0;
  --line: #dce4dd;
  --orange: #f4ac73;
}
.recovery-code { overflow-wrap: anywhere; padding: 16px; background: #eee8fc; color: #4438a5; border-radius: 12px; }
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}
button,
input,
textarea,
select {
  font: inherit;
}
button,
a,
input {
  touch-action: manipulation;
}
button,
a {
  transition:
    background 0.15s,
    transform 0.15s;
}
button {
  border: 0;
  border-radius: 12px;
  background: var(--teal);
  color: #fff;
  padding: 13px 21px;
  font-weight: 700;
  cursor: pointer;
}
button:hover {
  background: #06685f;
}
button:disabled {
  opacity: 0.55;
  cursor: wait;
}
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 3px solid #ba600c;
  outline-offset: 4px;
}
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid #ba600c;
  outline-offset: 4px;
}
a {
  color: inherit;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1 {
  font-size: clamp(38px, 4.7vw, 62px);
  line-height: 1.08;
  letter-spacing: -2.2px;
  margin: 16px 0 23px;
}
h2 {
  font-size: clamp(27px, 3vw, 37px);
  line-height: 1.17;
  letter-spacing: -1.2px;
  margin: 10px 0 18px;
}
h3 {
  font-size: 22px;
  line-height: 1.3;
  margin-bottom: 18px;
  letter-spacing: -0.4px;
}
p {
  max-width: 620px;
}
label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 19px;
}
input,
textarea,
select {
  min-width: 0;
  width: 100%;
  border: 1px solid #c8d6d1;
  border-radius: 10px;
  background: #fcfdf9;
  padding: 12px;
  color: var(--ink);
}
textarea {
  resize: vertical;
}
.library-section {
  margin: 45px 0;
}
.library-search {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 14px;
  align-items: end;
  padding: 20px;
}
.library-search label {
  margin: 0;
}
.library-search > *,
.editor-fields > *,
.note-grid > * {
  min-width: 0;
}
.note-editor {
  margin: 20px 0;
  border: 2px solid #86bca4;
}
.note-editor h3 {
  margin: 12px 0;
}
.note-editor .fine {
  margin: 0 0 15px;
}
.editor-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 20px;
}
.note-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  margin-top: 18px;
}
.note-tile {
  border: 1px solid #d8e1d8;
  border-top: 5px solid #90c1a5;
  border-radius: 16px;
  background: #fffefb;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-wrap: anywhere;
}
.note-tile:nth-child(3n + 2) {
  border-top-color: #b4ace2;
}
.note-tile:nth-child(3n + 3) {
  border-top-color: #efb482;
}
.note-tile h3 {
  font-size: 18px;
  margin: 0;
  white-space: pre-wrap;
}
.note-tile p {
  font-size: 14px;
  color: var(--muted);
  white-space: pre-wrap;
}
.note-tile .tags {
  margin: auto 0 0;
}
.note-tile .tags span {
  padding: 4px 9px;
}
.note-tile button {
  align-self: flex-start;
  font-size: 13px;
}
.insights {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 20px 0;
}
.insight {
  flex: 1;
  min-width: 150px;
  padding: 17px 22px;
  background: #e5ece0;
  border-radius: 15px;
  font-size: 13px;
  color: var(--muted);
}
.insight:nth-child(2) {
  background: #ece8f7;
}
.insight:nth-child(3) {
  background: #fae9d7;
}
.insight b {
  display: block;
  font-size: 28px;
  color: var(--ink);
}
.library-pages {
  margin-bottom: 30px;
}
@media (max-width: 850px) {
  .library-search {
    grid-template-columns: 1fr 1fr;
  }
  .note-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .library-search,
  .editor-fields,
  .note-grid {
    grid-template-columns: 1fr;
  }
  .tabs {
    flex-wrap: wrap;
  }
  .insight {
    min-width: 120px;
    padding: 14px;
  }
}
input::placeholder {
  color: #617477;
  font-size: 14px;
}
.topbar,
main,
footer {
  max-width: 1200px;
  margin: auto;
}
.topbar {
  height: 100px;
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 0 36px;
}
.logo {
  display: flex;
  align-items: center;
  font-size: 29px;
  letter-spacing: -1.5px;
  font-weight: 800;
  text-decoration: none;
}
.logo-icon {
  display: grid;
  place-items: center;
  background: var(--teal);
  color: #fff;
  border-radius: 12px;
  width: 40px;
  height: 42px;
  margin-right: 10px;
  transform: rotate(-6deg);
  font-size: 30px;
}
.muted {
  color: var(--muted);
  font-weight: 400;
}
.edition,
.eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px;
}
.edition {
  border-left: 1px solid #c5d1cb;
  padding-left: 24px;
  color: #516967;
}
.account {
  margin-left: auto;
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 13px;
}
.quiet {
  padding: 9px 12px;
  background: #e3eae3;
  color: var(--ink);
  font-size: 12px;
}
main {
  padding: 0 36px;
}
.hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  min-height: 460px;
  border-radius: 28px;
  background: #e0ebe2;
  overflow: hidden;
  padding: 52px 46px;
  margin: 10px 0 54px;
  position: relative;
}
.hero-copy {
  position: relative;
  z-index: 2;
}
.hero .eyebrow {
  color: #326059;
}
.hero p {
  max-width: 480px;
  color: #425e5e;
  line-height: 1.7;
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}
.tags span {
  font-size: 12px;
  font-weight: 600;
  background: #f6f9f0bd;
  border: 1px solid #cbdacf;
  padding: 7px 13px;
  border-radius: 30px;
}
.hero-art {
  position: relative;
  min-height: 300px;
  margin-left: 34px;
  align-self: center;
}
.floating-card {
  position: absolute;
  width: 210px;
  height: 275px;
  border-radius: 20px;
  box-shadow: 0 15px 25px #19373516;
  display: flex;
  flex-direction: column;
  padding: 25px;
}
.rear {
  background: #197871;
  color: #dcf5e1;
  transform: rotate(-13deg);
  left: 0;
  top: 4px;
  gap: 10px;
}
.rear strong {
  font-size: 23px;
}
.rear span {
  font-size: 11px;
}
.front {
  background: #fffef7;
  transform: rotate(10deg);
  right: 5px;
  top: 35px;
  gap: 14px;
}
.front strong {
  font-size: 35px;
  line-height: 1.08;
  letter-spacing: -1.3px;
}
.card-kicker {
  font-size: 8px;
  letter-spacing: 1.2px;
  color: #53726c;
}
.spark {
  position: absolute;
  right: 15px;
  top: 12px;
  font-size: 28px;
  color: #da8e41;
}
.mini-line {
  height: 6px;
  width: 80px;
  border-radius: 4px;
  background: #d9e9e0;
  margin-top: 8px;
}
.mini-line.short {
  width: 50px;
  margin-top: -4px;
}
.card-check {
  position: absolute;
  bottom: 23px;
  right: 23px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: #e8b07c;
  border-radius: 50%;
  font-size: 20px;
}
.orbit {
  position: absolute;
  border: 1px solid #aac6b799;
  border-radius: 50%;
  width: 380px;
  height: 380px;
  top: -36px;
  left: -25px;
}
.orbit-two {
  width: 300px;
  height: 300px;
  top: 0;
  left: 14px;
}
.art-dot {
  position: absolute;
  width: 18px;
  height: 18px;
  background: #df975d;
  right: 15px;
  top: -8px;
  border-radius: 50%;
}
.auth-grid,
.import-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 66px;
  align-items: start;
  margin: 40px 0 55px;
}
.secondary {
  color: var(--muted);
  font-size: 16px;
}
.fine {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.65;
  margin-top: 15px;
}
.surface {
  background: #fffefb;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 5px 10px #1d363005;
}
.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.secondary-button {
  background: #e8eee7;
  color: var(--ink);
}
.secondary-button:hover,
.quiet:hover {
  background: #d4e2d7;
}
.notice {
  background: #fff0d8;
  border: 1px solid #e0b671;
  border-radius: 14px;
  padding: 15px 20px;
  margin: 20px 0;
  color: #634211;
  overflow-wrap: anywhere;
}
.tabs {
  display: flex;
  gap: 28px;
  border-bottom: 1px solid var(--line);
  margin: 0 0 34px;
  padding-bottom: 18px;
}
.tabs a {
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
}
.tabs a:first-child {
  color: var(--teal);
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.text-link {
  font-size: 13px;
  font-weight: 700;
  text-underline-offset: 5px;
  color: #086d64;
}
.stats {
  display: flex;
  gap: 24px;
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 24px;
}
.stats b {
  color: var(--ink);
  font-size: 16px;
}
.deck-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 17px;
  margin-bottom: 35px;
}
.deck {
  background: #fffefb;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  align-items: start;
  min-height: 210px;
  position: relative;
}
.deck:nth-child(3n + 2) {
  background: #edf0fd;
}
.deck:nth-child(3n + 3) {
  background: #faeede;
}
.deck-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #daebe2;
  color: #347567;
  margin-bottom: 18px;
  font-size: 22px;
}
.deck h3 {
  font-size: 19px;
  overflow-wrap: anywhere;
  margin-bottom: 7px;
}
.deck p {
  font-size: 12px;
  color: var(--muted);
}
.deck button {
  margin-top: 20px;
  font-size: 13px;
  padding: 10px 15px;
}
.empty {
  padding: 35px;
  border: 1px dashed #aac2b7;
  text-align: center;
  border-radius: 20px;
  margin: 10px 0 45px;
}
.empty > span {
  font-size: 30px;
  color: var(--teal);
}
.empty h3 {
  margin: 9px 0;
}
.empty p {
  margin: 0 auto 16px;
  color: var(--muted);
  font-size: 14px;
}
.import-grid {
  padding-top: 45px;
  border-top: 1px solid var(--line);
  margin-top: 48px;
}
.format-box {
  display: grid;
  gap: 7px;
  font-size: 13px;
  margin: 22px 0;
}
.format-box b {
  font-size: 12px;
  color: #25665a;
}
.format-box span {
  color: var(--muted);
  margin-bottom: 8px;
}
.file-field input {
  background: #eff4ed;
  border-style: dashed;
  font-size: 12px;
  padding: 23px 14px;
}
.checkbox {
  flex-direction: row;
  align-items: flex-start;
  font-size: 12px;
  font-weight: 400;
}
.checkbox input {
  width: 18px;
  min-width: 18px;
  height: 18px;
  margin: 3px 3px 0 0;
  accent-color: var(--teal);
}
#preview-button {
  width: 100%;
}
.preview {
  margin-bottom: 35px;
}
.sample-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 20px 0;
}
.sample {
  border: 1px solid var(--line);
  padding: 16px;
  border-radius: 12px;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.sample p + p {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-top: 10px;
  color: var(--muted);
}
.sources {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 50px;
  margin: 55px 0;
  padding-top: 42px;
  border-top: 1px solid var(--line);
}
.sources p {
  font-size: 14px;
  color: var(--muted);
}
.sources p.fine {
  font-size: 12px;
}
.source-link {
  display: inline-block;
  font-size: 14px;
  color: #096c64;
  font-weight: 700;
  margin-top: 20px;
  text-underline-offset: 6px;
}
.future {
  background: var(--ink);
  color: #fffef4;
  padding: 28px;
  border-radius: 20px;
}
.future h3 {
  font-size: 26px;
  margin-top: 14px;
}
.future p {
  color: #ccd8d7;
  font-size: 13px;
}
.future .eyebrow {
  color: #a8d9bb;
}
.status-dot {
  display: block;
  color: #a8d9bb;
  font-size: 11px;
  margin-top: 21px;
}
.status-dot:before {
  content: "●";
  color: #a8d9bb;
  margin-right: 7px;
}
.study-section {
  margin-bottom: 40px;
}
.study-card {
  max-width: 850px;
  margin: auto;
  background: #fffefb;
  padding: 38px;
  border: 1px solid #c8d9cf;
  border-radius: 22px;
  text-align: center;
  box-shadow: 0 10px 30px #1d36300b;
}
.card-content {
  font-size: 27px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 25px 0;
}
.card-content img {
  display: block;
  max-width: 100%;
  max-height: 260px;
  object-fit: contain;
  margin: 15px auto;
}
.card-content audio {
  max-width: 100%;
  display: block;
  margin: 15px auto;
}
.card-content .fine {
  font-size: 12px;
}
.answer {
  border-top: 1px solid var(--line);
  padding-top: 25px;
  color: #08675d;
}
.reveal {
  margin-top: 25px;
  min-width: 220px;
}
.ratings {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin-top: 25px;
}
.ratings button {
  padding: 12px 8px;
  background: #e2eee6;
  color: #154b3b;
  font-size: 14px;
}
.ratings button:first-child {
  background: #f9e2dc;
  color: #8b3828;
}
.ratings button:nth-child(2) {
  background: #f6eccc;
  color: #765014;
}
.ratings button:last-child {
  background: #e3e9fc;
  color: #394d83;
}
.ratings small {
  display: block;
  font-weight: 400;
  font-size: 11px;
  margin-top: 4px;
}
.finish-mark {
  display: inline-grid;
  place-items: center;
  background: #cce9d6;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  font-size: 28px;
  margin-bottom: 20px;
}
#study-empty p {
  font-size: 14px;
  margin: auto;
  color: var(--muted);
}
footer {
  border-top: 1px solid var(--line);
  padding: 28px 36px 40px;
  display: flex;
  gap: 30px;
  align-items: center;
}
footer p {
  font-size: 11px;
  color: var(--muted);
  max-width: 530px;
}
footer > a:last-child {
  font-size: 11px;
  color: var(--muted);
  margin-left: auto;
  white-space: nowrap;
}
.small {
  font-size: 24px;
}
[hidden] {
  display: none !important;
}
@media (max-width: 850px) {
  .hero {
    padding: 35px 30px;
    grid-template-columns: 1.3fr 1fr;
  }
  .hero-art {
    transform: scale(0.8);
    transform-origin: center;
    margin-left: 0;
  }
  .auth-grid,
  .import-grid {
    gap: 30px;
  }
  .deck-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .sources {
    gap: 25px;
  }
  .front {
    right: -40px;
  }
  .rear {
    left: -15px;
  }
  footer {
    flex-wrap: wrap;
  }
  footer > a:last-child {
    margin-left: 0;
  }
}
@media (max-width: 600px) {
  .topbar {
    padding: 0 20px;
    height: 82px;
    gap: 15px;
  }
  .edition {
    font-size: 8px;
    padding-left: 14px;
    letter-spacing: 1px;
  }
  .logo {
    font-size: 25px;
  }
  .logo-icon {
    width: 34px;
    height: 36px;
    font-size: 26px;
  }
  .account {
    gap: 5px;
  }
  #account-name {
    display: none;
  }
  main {
    padding: 0 20px;
  }
  .hero {
    grid-template-columns: 1fr;
    padding: 30px 26px 12px;
    margin-bottom: 30px;
    min-height: 0;
    border-radius: 23px;
  }
  .hero p {
    font-size: 14px;
  }
  .hero-art {
    width: 275px;
    min-height: 225px;
    transform: scale(0.66);
    transform-origin: top center;
    margin: 28px auto -53px;
  }
  .front {
    right: -15px;
  }
  .rear {
    left: 0;
  }
  .orbit {
    left: -25px;
  }
  .hero h1 {
    font-size: 40px;
  }
  .tags {
    gap: 6px;
    margin-top: 22px;
  }
  .tags span {
    font-size: 10px;
    padding: 6px 9px;
  }
  .auth-grid,
  .import-grid,
  .sources {
    grid-template-columns: 1fr;
    gap: 26px;
    margin-top: 30px;
  }
  .surface {
    padding: 22px;
  }
  .actions {
    flex-direction: column;
  }
  .actions button {
    width: 100%;
  }
  .tabs {
    gap: 15px;
    justify-content: space-between;
  }
  .tabs a {
    font-size: 11px;
  }
  .section-heading {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 18px;
  }
  .section-heading h2 {
    margin-bottom: 6px;
  }
  .stats {
    gap: 14px;
    flex-wrap: wrap;
    font-size: 11px;
  }
  .deck-grid {
    grid-template-columns: 1fr;
    gap: 13px;
  }
  .deck {
    min-height: 0;
    padding: 20px;
  }
  .deck-icon {
    position: absolute;
    right: 20px;
    top: 20px;
  }
  .deck h3 {
    max-width: 75%;
  }
  .deck button {
    margin-top: 16px;
  }
  .empty {
    padding: 24px;
  }
  .sample-grid {
    grid-template-columns: 1fr;
  }
  .sources {
    padding-top: 30px;
  }
  .study-card {
    padding: 25px 18px;
  }
  .card-content {
    font-size: 23px;
  }
  .ratings {
    grid-template-columns: 1fr 1fr;
  }
  .ratings button {
    min-height: 64px;
  }
  footer {
    padding: 25px 20px;
    gap: 13px;
  }
  .fine {
    font-size: 12px;
  }
  .study-section .secondary-button {
    font-size: 12px;
    padding: 10px 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
  }
}
/* Landing: interactive cards, explicit account entry, sourced research. */
.guest-nav { display:flex; align-items:center; gap:20px; margin-left:auto; font-size:14px; font-weight:700; }
.guest-nav + .account:has(#logout[hidden]) { display:none; }
.cta-link { display:inline-flex; justify-content:center; align-items:center; min-height:46px; background:#5b3acb; color:#fff; padding:13px 21px; border-radius:13px; text-decoration:none; font-weight:700; box-shadow:0 6px 0 #392384; }
.cta-link:hover { background:#4826b0; transform:translateY(-2px); }
.hero { background:linear-gradient(125deg,#e3f4dd 0%,#e6f2ef 48%,#e8dffc 100%); gap:42px; align-items:center; padding:48px; }
.hero h1 { font-size:clamp(38px,4.5vw,62px); line-height:1.08; letter-spacing:-2.5px; }
.hero h1 span { color:#6540bb; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:22px; margin-top:28px; }
.demo-link { font-size:14px; font-weight:700; text-underline-offset:4px; }
.hero .hero-note { margin-top:20px; font-size:12px; }
.demo-panel { min-width:0; background:#ffffffbb; border:1px solid #fff; border-radius:26px; padding:25px; box-shadow:0 22px 50px #57478620; animation:demo-arrive .7s ease-out both; }
.demo-top { display:flex; justify-content:space-between; gap:12px; align-items:center; font-size:12px; font-weight:700; }
.demo-badge { background:#e8dffc; color:#56359e; border-radius:30px; padding:6px 10px; font-size:10px; letter-spacing:1px; }
.demo-panel h2 { font-size:22px; margin:18px 0 5px; letter-spacing:-.6px; }
.hero .demo-instruction { font-size:12px; }
.demo-card { margin:20px 0; padding:26px; min-height:225px; background:#fffdf6; border:1px solid #dfd8c8; border-radius:18px; box-shadow:0 8px 0 #dacff0; display:flex; flex-direction:column; justify-content:center; animation:card-breathe 5s ease-in-out infinite; }
.hero #demo-question { font-size:23px; line-height:1.3; font-weight:700; color:var(--ink); margin:14px 0; }
.demo-card .eyebrow { font-size:9px; }
.demo-card.revealed { background:#e3f6df; animation:card-reveal .45s ease-out both; }
#demo-answer { border-top:1px solid #b8d4ad; padding-top:14px; }
#demo-answer strong { font-size:19px; color:#285e35; }
.hero #demo-answer p { font-size:12px; margin-top:5px; }
.demo-panel > button:not(.motion-toggle) { width:100%; background:#5b3acb; }
.demo-progress { height:6px; border-radius:20px; background:#e6e0ef; overflow:hidden; margin-top:20px; }
.demo-progress span { display:block; width:0; height:100%; background:#087f77; transition:width .4s; }
.hero #demo-feedback { font-size:11px; min-height:38px; margin-top:10px; }
.motion-toggle { background:transparent; color:#58606a; font-size:11px; padding:6px 0; text-decoration:underline; }
.motion-toggle:hover { background:transparent; color:#241d38; }
.landing-benefits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-bottom:54px; }
.landing-benefits article { padding:28px; border-radius:22px; background:#e7def8; }
.landing-benefits article:nth-child(2) { background:#ffebcc; }
.landing-benefits article:nth-child(3) { background:#daeee7; }
.step-number { font-size:13px; font-weight:700; opacity:.7; }
.landing-benefits h3 { margin:14px 0 8px; font-size:20px; }
.landing-benefits p { font-size:14px; color:#40565e; }
.research-panel { display:grid; grid-template-columns:1fr 1fr; gap:50px; padding:42px; background:#202e39; color:#fff; border-radius:25px; }
.research-panel h2 { font-size:38px; line-height:1.15; margin:16px 0; color:#fff; }
.research-panel .eyebrow { color:#cfc1ff; font-size:10px; }
.research-panel p { color:#e0e7e9; font-size:14px; }
.research-panel a { display:inline-block; color:#d5c8ff; font-size:12px; margin-top:22px; }
.research-results { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.research-stat strong { display:block; font-size:64px; line-height:1.2; color:#bcec9e; letter-spacing:-3px; }
.research-stat span { display:block; font-size:13px; min-height:62px; }
.research-stat.comparison strong { color:#d3c3ef; }
.research-stat meter { width:100%; height:18px; }
.research-results .fine { grid-column:1/-1; font-size:11px; margin:0; }
.auth-modes { display:flex; gap:6px; padding:5px; background:#eeebf5; border-radius:13px; }
.auth-modes button { flex:1; background:transparent; color:#524766; padding:10px; font-size:13px; }
.auth-modes button[aria-pressed=true] { background:#fff; box-shadow:0 2px 8px #33226615; }
#auth { scroll-margin-top:30px; }
#auth-title { margin-top:20px; }
#auth-form .actions button { width:100%; }
@keyframes card-breathe { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-5px) rotate(1deg); } }
@keyframes card-reveal { from { transform:perspective(900px) rotateY(-14deg); opacity:.6; } to { transform:perspective(900px) rotateY(0); opacity:1; } }
@keyframes demo-arrive { from { transform:translateY(16px); opacity:0; } to { transform:translateY(0); opacity:1; } }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
@media(max-width:1000px) { .hero { gap:25px; padding:30px; } .edition { display:none; } .hero h1 { font-size:43px; } }
@media(max-width:760px) { .hero { grid-template-columns:1fr; } .landing-benefits { grid-template-columns:1fr; gap:12px; } .research-panel { grid-template-columns:1fr; padding:28px; gap:28px; } .hero-copy { max-width:560px; } .demo-panel { margin-top:8px; } .landing-benefits article { padding:23px; } }
@media(max-width:480px) { .topbar { height:auto; min-height:88px; flex-wrap:wrap; padding:18px 20px; gap:15px; } .guest-nav { gap:12px; font-size:12px; } .guest-nav .cta-link { padding:9px 11px; min-height:40px; box-shadow:none; } .hero { padding:25px 20px; } .hero h1 { font-size:38px; letter-spacing:-1.8px; } .hero-actions { gap:20px; } .hero-actions .cta-link { width:100%; } .demo-panel { padding:18px; } .demo-card { padding:20px; } .research-stat strong { font-size:52px; } .research-panel h2 { font-size:32px; } }
@media(prefers-reduced-motion:reduce) { .demo-panel,.demo-card,.demo-card.revealed { animation:none; } .demo-progress span { transition:none; } }
#auth-form #register { background:#5b3acb; color:#fff; }
#auth-form #register:hover { background:#4826b0; }
/* Vivid landing, with stable demo geometry across both card faces. */
#landing-hero { background:linear-gradient(120deg,#d4f8bb,#c8f4ed 40%,#dac9ff 75%,#ffd8d0); background-size:220% 220%; animation:landing-colors 16s ease-in-out infinite alternate; border:1px solid #ded3f5; }
#landing-hero h1 span { color:#6430c0; }
#landing-hero .tags span:nth-child(1) { background:#d3f4a0; border-color:#b1d37d; }
#landing-hero .tags span:nth-child(2) { background:#ffdab1; border-color:#e9be8c; }
#landing-hero .tags span:nth-child(3) { background:#e3cbff; border-color:#c5a9e5; }
.demo-panel { background:#fffaf3ed; border:2px solid #fff; box-shadow:0 20px 55px #653dab28; }
.demo-card { height:300px; min-height:300px; max-height:300px; flex:none; justify-content:flex-start; overflow:auto; scrollbar-gutter:stable; overscroll-behavior:contain; animation:none; background:linear-gradient(145deg,#ffefbd,#fff9e9); border-color:#e4c985; }
.demo-card.revealed { background:linear-gradient(135deg,#cdf5c0,#d1f6ea); animation:card-reveal .42s ease-out both; }
#demo-answer { border:0; padding-top:20px; }
#demo-answer strong { font-size:25px; line-height:1.3; display:block; }
.hero #demo-answer p { margin-top:18px; font-size:15px; }
.hero #demo-question { font-size:23px; }
.hero #demo-feedback { height:72px; min-height:72px; overflow:auto; }
.demo-panel > button:not(.motion-toggle) { min-height:50px; }
.demo-panel > .cta-link { width:100%; background:#153d39; box-shadow:none; margin:0 0 12px; font-size:13px; }
.demo-panel > .cta-link:hover { background:#0a5850; }
.demo-panel .motion-toggle { display:block; margin:auto; }
.demo-progress span { background:linear-gradient(90deg,#7443dc,#e57ca8,#128d7a); }
.landing-benefits article { background:#dfc9ff; border-bottom:5px solid #a77be2; transition:transform .25s,box-shadow .25s; }
.landing-benefits article:nth-child(2) { background:#ffe0a5; border-color:#efad50; }
.landing-benefits article:nth-child(3) { background:#b9ead8; border-color:#58bca1; }
.landing-benefits article:hover { transform:translateY(-5px); box-shadow:0 12px 24px #29413412; }
.step-number { display:inline-flex; padding:6px 12px; border-radius:30px; background:#ffffff9c; opacity:1; }
.landing-invite { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:32px 38px; margin:-20px 0 46px; border-radius:24px; background:linear-gradient(110deg,#ffe0a0,#ffcecf 65%,#e0c3ff); }
.landing-invite h2 { font-size:30px; margin:8px 0; }
.landing-invite p { font-size:14px; }
.landing-invite .eyebrow { font-size:10px; }
.landing-invite .cta-link { flex-shrink:0; }
.research-panel { background:linear-gradient(130deg,#243b45,#38265a); }
.cta-link:active { transform:translateY(2px); box-shadow:0 2px 0 #392384; }
@keyframes landing-colors { from { background-position:0% 30%; } to { background-position:100% 70%; } }
@media(max-width:760px) { .landing-invite { flex-direction:column; align-items:flex-start; padding:28px; } .landing-invite .cta-link { width:100%; } }
@media(max-width:480px) { .hero #demo-question { font-size:21px; } #demo-answer strong { font-size:23px; } }
@media(prefers-reduced-motion:reduce) { #landing-hero { animation:none; } .landing-benefits article:hover { transform:none; } }

.marketing-status { margin:48px 0; } .marketing-status h2 { margin:16px 0; } .marketing-status p { margin:16px 0; }