:root {
  color-scheme: light;
  --bg: #fbf6ea;
  --ink: #1c1044;
  --muted: #3a2a6e;
  --rule: #e4dcc6;
  --accent: #6b4bff;
  --accent-soft: rgb(108 75 255 / 8%);
  --accent-rule: rgb(108 75 255 / 20%);
  --surface: rgb(255 253 248 / 78%);
  --surface-strong: #fffdf8;
  --hero-glow: rgb(115 82 194 / 18%);
  --hero-warm-glow: rgb(239 106 46 / 11%);
  --shadow: rgb(28 16 68 / 12%);
}

* {
  box-sizing: border-box;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  line-height: 1.6;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  margin: 0 auto;
  max-width: 780px;
  padding: 48px 24px 88px;
}

.wordmark {
  align-items: center;
  color: var(--ink);
  display: inline-flex;
  font-size: 1.05rem;
  font-weight: 750;
  gap: 10px;
  text-decoration: none;
}

.wordmark img {
  height: 28px;
  width: 28px;
}

h1 {
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  line-height: 1.02;
  margin: 48px 0 18px;
}

.lede {
  color: var(--muted);
  font-size: 1.18rem;
  margin: 0;
  max-width: 680px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 0;
}

.button {
  align-items: center;
  background: var(--ink);
  border-radius: 8px;
  color: #fff;
  display: inline-flex;
  font-weight: 700;
  min-height: 44px;
  padding: 10px 16px;
  text-decoration: none;
}

.button.secondary {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink);
}

hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 44px 0;
}

h2 {
  font-size: 1.35rem;
  line-height: 1.25;
  margin: 32px 0 10px;
}

h3 {
  font-size: 1.05rem;
  line-height: 1.3;
  margin: 24px 0 8px;
}

p {
  color: var(--muted);
  margin: 0 0 15px;
}

ol,
ul {
  color: var(--muted);
  margin: 0 0 24px;
  padding-left: 24px;
}

li {
  margin: 8px 0;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.breadcrumb {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 28px 0 0;
}

.note {
  background: var(--accent-soft);
  border: 1px solid var(--accent-rule);
  border-radius: 8px;
  color: var(--muted);
  margin-top: 28px;
  padding: 16px 18px;
}

.scramble-demo {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 28px 0 34px;
}

.scramble-demo figure {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 16px 36px rgb(28 16 68 / 8%);
  margin: 0;
  overflow: hidden;
}

.scramble-demo img {
  aspect-ratio: 936 / 1361;
  display: block;
  height: auto;
  object-fit: cover;
  object-position: top center;
  width: 100%;
}

.scramble-demo figcaption {
  border-top: 1px solid var(--rule);
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 750;
  line-height: 1.25;
  padding: 10px 12px 12px;
}

.edit-comparison {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 28px 0 34px;
}

.edit-comparison figure {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 16px 36px rgb(28 16 68 / 8%);
  margin: 0;
  overflow: hidden;
}

.edit-comparison img {
  display: block;
  height: auto;
  width: 100%;
}

.edit-comparison figcaption {
  border-top: 1px solid var(--rule);
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 750;
  line-height: 1.35;
  padding: 10px 12px 12px;
}

.decision-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 18px 0 24px;
}

.decision-grid div {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 16px 18px;
}

.decision-grid strong,
.decision-grid span {
  display: block;
}

.decision-grid strong {
  color: var(--ink);
  font-size: 0.95rem;
}

.decision-grid span {
  color: var(--muted);
  font-size: 0.88rem;
  margin-top: 7px;
}

.related {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  list-style: none;
  padding-left: 0;
}

.guide-list {
  display: grid;
  gap: 18px;
  list-style: none;
  padding-left: 0;
}

.guide-list li {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 18px;
}

.guide-list a {
  font-size: 1.1rem;
  font-weight: 750;
}

.guide-list p {
  margin: 8px 0 0;
}

.blog-list {
  display: grid;
  gap: 16px;
  list-style: none;
  padding-left: 0;
}

.blog-card {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 18px;
}

.blog-card > a {
  display: inline-block;
  font-size: 1.15rem;
  font-weight: 750;
}

.blog-card p {
  margin: 8px 0 0;
}

.blog-card__meta,
.article-meta {
  color: var(--muted);
  font-size: 0.86rem;
}

.blog-card__meta {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 7px;
}

.blog-card__meta span {
  color: var(--accent);
  font-weight: 750;
}

.article-page article {
  margin-top: 48px;
}

.article-page h1 {
  margin-top: 12px;
}

.article-body {
  margin-top: 38px;
}

.blog-cta {
  background: var(--accent-soft);
  border: 1px solid var(--accent-rule);
  border-radius: 8px;
  margin-top: 42px;
  padding: 34px 28px;
  text-align: center;
}

.blog-cta h2 {
  margin: 0;
}

.blog-cta p {
  font-size: 1.08rem;
  margin: 12px auto 0;
  max-width: 560px;
}

.blog-cta .actions {
  justify-content: center;
  margin-top: 22px;
}

.article-body img {
  border: 1px solid var(--rule);
  border-radius: 8px;
  display: block;
  height: auto;
  max-width: 100%;
}

.article-body blockquote {
  border-left: 3px solid var(--accent);
  margin: 24px 0;
  padding-left: 18px;
}

.article-body pre {
  background: #211747;
  border-radius: 8px;
  color: #fff;
  overflow-x: auto;
  padding: 16px 18px;
}

.article-body code {
  background: var(--accent-soft);
  border-radius: 4px;
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.9em;
  padding: 2px 4px;
}

.article-body pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}

@media (max-width: 560px) {
  .wrap {
    padding: 34px 18px 64px;
  }

  .actions {
    align-items: stretch;
    flex-direction: column;
  }

  .blog-cta {
    padding: 28px 20px;
  }

  .button {
    justify-content: center;
  }

  .scramble-demo {
    grid-template-columns: 1fr;
  }

  .edit-comparison,
  .decision-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #151a1e;
    --ink: #f5f4fb;
    --muted: #b8bfca;
    --rule: #37424d;
    --accent: #aa8dff;
    --accent-soft: rgb(131 100 255 / 13%);
    --accent-rule: rgb(164 139 255 / 30%);
    --surface: rgb(31 37 43 / 80%);
    --surface-strong: #1f252b;
    --hero-glow: rgb(121 87 227 / 22%);
    --hero-warm-glow: rgb(239 106 46 / 12%);
    --shadow: rgb(0 0 0 / 28%);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #151a1e;
  --ink: #f5f4fb;
  --muted: #b8bfca;
  --rule: #37424d;
  --accent: #aa8dff;
  --accent-soft: rgb(131 100 255 / 13%);
  --accent-rule: rgb(164 139 255 / 30%);
  --surface: rgb(31 37 43 / 80%);
  --surface-strong: #1f252b;
  --hero-glow: rgb(121 87 227 / 22%);
  --hero-warm-glow: rgb(239 106 46 / 12%);
  --shadow: rgb(0 0 0 / 28%);
}

/* Static blog pages use the same layered shell and card language as the app
   landing page. Keep article prose narrow, but let the surrounding chrome
   feel like one continuous Papaya PDF experience. */
.site-shell {
  background:
    radial-gradient(circle at 50% -8%, var(--hero-glow), transparent 34%),
    radial-gradient(circle at 83% 18%, var(--hero-warm-glow), transparent 25%),
    var(--bg);
  min-height: 100vh;
}

body {
  background: var(--bg);
  color: var(--ink);
}

.wrap {
  max-width: 1180px;
  padding: 0 32px 96px;
}

.blog-nav {
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 84%, transparent);
  display: flex;
  gap: 28px;
  justify-content: space-between;
  min-height: 72px;
}

.blog-nav nav {
  align-items: center;
  display: flex;
  gap: 24px;
  margin-left: auto;
}

.blog-nav nav a {
  color: var(--muted);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
}

.blog-nav nav a:hover,
.blog-nav nav a:focus-visible {
  color: var(--ink);
}

.blog-nav-cta,
.button {
  align-items: center;
  background: linear-gradient(110deg, #3a2a6e, #7352c2 54%, #ef6a2e);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgb(92 62 193 / 25%);
  color: #fff;
  display: inline-flex;
  font-size: .9rem;
  font-weight: 750;
  gap: 8px;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  text-decoration: none;
  transition: box-shadow 160ms ease, transform 160ms ease;
}

.blog-nav-cta:hover,
.blog-nav-cta:focus-visible,
.button:hover,
.button:focus-visible {
  box-shadow: 0 14px 30px rgb(92 62 193 / 36%);
  color: #fff;
  transform: translateY(-1px);
}

.blog-page .blog-hero {
  max-width: 840px;
  padding: 100px 0 70px;
}

.breadcrumb {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
  margin: 0 0 20px;
}

.breadcrumb a {
  color: var(--accent);
  text-decoration: none;
}

.blog-page h1,
.article-page h1 {
  font-size: clamp(3rem, 6vw, 5.5rem);
  letter-spacing: -.055em;
  line-height: .95;
  margin: 0 0 22px;
}

.lede {
  color: var(--muted);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  line-height: 1.6;
  max-width: 690px;
}

.actions {
  margin-top: 30px;
}

.button.secondary {
  background: var(--surface);
  border: 1px solid var(--rule);
  box-shadow: none;
  color: var(--ink);
}

.blog-feed {
  border-top: 1px solid color-mix(in srgb, var(--rule) 84%, transparent);
  padding-top: 38px;
}

.blog-feed h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: -.03em;
  margin: 0 0 22px;
}

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

.blog-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 18px;
  box-shadow: 0 12px 28px var(--shadow);
  display: flex;
  flex-direction: column;
  min-height: 190px;
  padding: 24px;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.blog-card:hover {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--rule));
  box-shadow: 0 18px 38px var(--shadow);
  transform: translateY(-2px);
}

.blog-card__meta,
.article-meta {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 700;
}

.blog-card__meta {
  margin-bottom: 14px;
}

.blog-card > a {
  color: var(--ink);
  font-size: clamp(1.08rem, 2vw, 1.3rem);
  letter-spacing: -.025em;
  line-height: 1.24;
  text-decoration: none;
}

.blog-card > a:hover,
.blog-card > a:focus-visible {
  color: var(--accent);
  text-decoration: none;
}

.blog-card p {
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.52;
  margin-top: 13px;
}

.article-page article {
  margin: 0 auto;
  max-width: 780px;
  padding-top: 76px;
}

.article-header {
  padding-bottom: 44px;
}

.article-header .article-meta {
  margin: 0 0 18px;
}

.article-page h1 {
  font-size: clamp(2.75rem, 5.2vw, 4.8rem);
}

.article-body {
  border-top: 1px solid color-mix(in srgb, var(--rule) 84%, transparent);
  margin-top: 0;
  padding-top: 42px;
}

.article-body p,
.article-body li {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.75;
}

.article-body h2 {
  color: var(--ink);
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  letter-spacing: -.035em;
  margin-top: 54px;
}

.article-body h3 {
  color: var(--ink);
  font-size: 1.2rem;
  margin-top: 34px;
}

.article-body a,
.article-page article > p a {
  color: var(--accent);
}

.blog-cta {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--surface-strong)), color-mix(in srgb, #ef6a2e 8%, var(--surface-strong)));
  border-color: color-mix(in srgb, var(--accent) 30%, var(--rule));
  border-radius: 20px;
  box-shadow: 0 14px 32px var(--shadow);
}

.article-body pre {
  background: #171226;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-radius: 14px;
}

.article-body code {
  background: var(--accent-soft);
  color: var(--ink);
}

@media (max-width: 720px) {
  .wrap {
    padding: 0 20px 72px;
  }

  .blog-nav {
    gap: 14px;
    min-height: 64px;
  }

  .blog-nav nav {
    display: none;
  }

  .blog-nav-cta {
    font-size: .82rem;
    margin-left: auto;
    padding: 9px 13px;
  }

  .blog-page .blog-hero {
    padding: 68px 0 50px;
  }

  .blog-list {
    grid-template-columns: 1fr;
  }

  .blog-card {
    min-height: 0;
  }

  .article-page article {
    padding-top: 54px;
  }
}