:root{--font-body:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--cl-paper:#FBF8F2;--cl-ink:#352E40;--cl-muted:#706578;--cl-rule:#ded7e1;--cl-soft:#f0ebf1;--cl-accent:#69547B;--cl-action:#69547B;--cl-action-hover:#574565;--cl-cta:#DDD1E9;--cl-serif:Georgia,'Times New Roman',serif;--on-accent:#fff;--cl-category-feature:#69547B;--cl-category-improvement:#72521E;--cl-category-fix:#704B59;--font-mono:monospace}
body{margin:0;background:var(--cl-paper);color:var(--cl-ink);font-family:var(--font-body)}
[hidden]{display:none!important}
.brand{display:flex;gap:9px;align-items:center;font-size:26px;font-weight:650;letter-spacing:-.055em}.brand img{display:block;border-radius:10px}
.eyebrow{display:block;font-size:11px;letter-spacing:.13em;font-weight:500;color:var(--cl-accent)}
.changelog-index>.eyebrow{margin-bottom:16px}.heading-period{color:var(--cl-accent)}
/* Granola reference: a quiet timeline, serif display type, 624px prose,
   centered article titles, and media that can extend beyond the text column.
   Keep these styles scoped so the blog and product UI retain their own system. */
.changelog-page {
  min-height: 100vh;
  background: var(--cl-paper);
  color: var(--cl-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.changelog-page *, .changelog-page *::before, .changelog-page *::after { box-sizing: border-box; }
.changelog-page a { color: inherit; text-decoration: none; }
.changelog-page button { font: inherit; cursor: pointer; }
.changelog-page :is(a, button, [tabindex='0']):focus-visible { outline: 2px solid var(--cl-accent); outline-offset: 5px; }
.changelog-page :is(h1, h2, h3, p, figure) { margin: 0; }
.changelog-page h1, .changelog-page h2, .changelog-page h3 { color: var(--cl-ink); font-family: var(--cl-serif); font-weight: 400; letter-spacing: -0.035em; }
.changelog-sr-only, .changelog-skip:not(:focus) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.changelog-skip:focus { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 12px 18px; border-radius: 8px; color: var(--cl-ink); background: var(--cl-paper); }
.changelog-header { width: min(1200px, calc(100% - 64px)); min-height: 76px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.changelog-logo { display: inline-flex; flex-shrink: 0; align-items: center; }
.changelog-logo img { display: block; width: 132px; height: 36px; object-fit: contain; }
.changelog-header-nav, .changelog-header-actions { display: flex; align-items: center; gap: 24px; }
.changelog-header-nav { font-size: 13px; }
.changelog-header-nav a { color: var(--cl-muted); transition: color 160ms ease; }
.changelog-header-nav a:hover, .changelog-header-nav a[aria-current='page'] { color: var(--cl-ink); }
.changelog-header-actions { gap: 8px; }
.changelog-page .changelog-button { min-height: 36px; padding: 8px 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 999px; font-size: 13px; font-weight: 500; line-height: 1.3; transition: background-color 160ms ease, border-color 160ms ease; }
.changelog-button-quiet { border-color: var(--cl-rule) !important; color: var(--cl-ink); background: transparent; }
.changelog-button-quiet:hover { background: var(--cl-soft); }
.changelog-page .changelog-button-primary { color: var(--on-accent); background: var(--cl-action); }
.changelog-page .changelog-button-primary:hover { background: var(--cl-action-hover); }
.changelog-index { width: min(624px, calc(100% - 48px)); margin: 0 auto; padding: 82px 0 100px; }
.changelog-index h1 { font-size: 60px; line-height: 1.05; }
.changelog-intro { color: var(--cl-muted); margin-top: 16px !important; font-size: 16px; }
.changelog-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 38px; }
.changelog-filter { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 5px 12px; border: 1px solid var(--cl-rule); border-radius: 999px; background: transparent; color: var(--cl-muted); font-size: 13px !important; line-height: 1.3; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; }
.changelog-filter svg { width: 15px; height: 15px; display: block; }
.changelog-filter:hover { border-color: var(--cl-muted); }
.changelog-filter[aria-pressed='true'] { color: var(--cl-ink); background: var(--cl-soft); border-color: color-mix(in srgb, var(--cl-ink) 26%, var(--cl-paper)); }
.changelog-timeline { list-style: none; margin: 0; padding: 0; }
.changelog-timeline > li { position: relative; padding-bottom: 30px; }
.changelog-timeline > li::before { content: ''; position: absolute; width: 1px; top: 37px; bottom: 5px; left: 10px; background: var(--cl-rule); }
.changelog-timeline > li:last-child::before { display: none; }
.changelog-entry { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 20px; padding: 10px 12px 12px 0; border-radius: 8px; transition: background-color 160ms ease; }
.changelog-entry:hover { background: var(--cl-soft); }
.changelog-entry-marker { padding-top: 5px; }
.changelog-entry-marker svg { display: block; }
.changelog-entry h2 { font-size: 24px; line-height: 1.3; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.changelog-entry-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 9px; color: var(--cl-muted); font-size: 12px; line-height: 1.6; }
.changelog-team { color: var(--cl-ink); }
.changelog-entry-category::before { content: '·'; margin-right: 12px; }
.changelog-empty { padding: 30px 0; }
.changelog-empty h2 { font-size: 28px; }
.changelog-empty p { color: var(--cl-muted); margin: 12px 0 20px; }
.changelog-detail { padding-top: 62px; padding-bottom: 96px; }
.changelog-article-header { width: min(896px, calc(100% - 48px)); margin: 0 auto 60px; text-align: center; }
.changelog-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--cl-muted) !important; }
.changelog-back:hover { color: var(--cl-accent) !important; }
.changelog-article-header h1 { font-size: clamp(38px, 4.75vw, 68px); line-height: 1.05; text-wrap: balance; margin: 24px 0 !important; }
.changelog-article-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 16px; color: var(--cl-muted); font-size: 14px; }
.changelog-author { color: var(--cl-ink); }
.changelog-hero-media { width: min(896px, calc(100% - 48px)); margin: 0 auto 48px !important; }
.changelog-hero-media > img { display: block; width: 100%; height: auto; max-height: 640px; object-fit: contain; border-radius: 6px; }
.changelog-hero-media iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 6px; background: var(--cl-soft); }
.changelog-hero-media figcaption { margin-top: 12px; text-align: center; color: var(--cl-muted); font-size: 13px; }
.changelog-reading-column { width: min(624px, calc(100% - 48px)); margin: 0 auto; }
.changelog-summary { margin-bottom: 36px !important; color: var(--cl-muted); font-size: 18px; line-height: 1.8; }
.changelog-prose { font-size: 18px; line-height: 1.78; overflow-wrap: break-word; }
.changelog-prose p { margin-bottom: 24px; }
.changelog-prose h2 { font-size: 30px; line-height: 1.33; margin: 48px 0 24px; letter-spacing: -0.025em; }
.changelog-prose h3 { font-size: 23px; line-height: 1.4; margin: 32px 0 16px; letter-spacing: -0.02em; }
.changelog-prose > :first-child { margin-top: 0; }
.changelog-prose :is(ul, ol) { margin: 20px 0 28px; padding-left: 25px; }
.changelog-prose li { margin: 8px 0; padding-left: 4px; }
.changelog-prose strong { font-weight: 600; }
.changelog-prose a { text-decoration: underline; text-underline-offset: 3px; }
.changelog-prose a:hover { color: var(--cl-accent); }
.changelog-prose code { padding: 2px 4px; background: var(--cl-soft); border-radius: 3px; font-family: var(--font-mono); font-size: 0.78em; overflow-wrap: anywhere; }
.changelog-table-scroll { width: 100%; overflow-x: auto; margin: 28px 0; }
.changelog-prose table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.6; }
.changelog-prose :is(th, td) { border-bottom: 1px solid var(--cl-rule); padding: 12px; text-align: left; }
.changelog-prose th { font-weight: 600; }
.changelog-inline-media { margin: 32px 0 !important; }
.changelog-inline-media img { display: block; width: 100%; height: auto; border-radius: 6px; }
.changelog-article-signoff { display: flex; align-items: center; gap: 12px; margin-top: 44px; font-size: 14px; }
.changelog-signoff-icon { display: inline-flex; padding: 9px; border-radius: 8px; background: var(--cl-soft); }
.changelog-article-signoff div > span { display: block; margin-top: 1px; color: var(--cl-muted); font-size: 12px; }
.changelog-share { display: flex; justify-content: flex-end; align-items: center; gap: 16px; border-top: 1px solid var(--cl-rule); margin-top: 28px; padding-top: 20px; color: var(--cl-muted); font-size: 12px; }
.changelog-share-button { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid transparent; border-radius: 50%; color: var(--cl-muted); background: transparent; }
.changelog-share-button:hover { color: var(--cl-ink); background: var(--cl-soft); }
.changelog-pagination { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--cl-rule); }
.changelog-pagination a:last-child { text-align: right; }
.changelog-pagination a > span { display: flex; align-items: center; gap: 6px; color: var(--cl-muted); font-size: 12px; margin-bottom: 10px; }
.changelog-pagination a:last-child > span { justify-content: flex-end; }
.changelog-pagination strong { font-family: var(--cl-serif); font-weight: 400; font-size: 19px; line-height: 1.35; }
.changelog-pagination a:hover strong { color: var(--cl-accent); }
.changelog-not-found { width: min(624px, calc(100% - 48px)); margin: 0 auto; padding: 100px 0; }
.changelog-not-found h1 { font-size: 48px; line-height: 1.1; }
.changelog-not-found p { margin: 24px 0; color: var(--cl-muted); }
.changelog-footer { width: min(1200px, calc(100% - 64px)); margin: 0 auto; padding-bottom: 32px; }
.changelog-cta { padding: 56px 56px 0; border-radius: 8px; background: var(--cl-cta); }
.changelog-cta-paper { padding: 54px 64px 56px; background: var(--cl-paper); border-radius: 6px 6px 0 0; }
.changelog-cta-eyebrow { color: var(--cl-muted); font-size: 13px; }
.changelog-cta h2 { margin: 18px 0 16px; font-size: clamp(34px, 4.8vw, 60px); line-height: 1.06; text-wrap: balance; }
.changelog-cta h2 em { font-weight: 400; }
.changelog-cta p { color: var(--cl-muted); font-size: 17px; margin-bottom: 24px; }
.changelog-cta .changelog-button { min-height: 42px; font-size: 14px; padding: 11px 18px; }
.changelog-footer-links { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding: 88px 0 64px; }
.changelog-footer-about p { color: var(--cl-muted); font-size: 13px; line-height: 1.7; margin-top: 14px; }
.changelog-footer-links h3 { font-size: 21px; margin-bottom: 16px; letter-spacing: -0.02em; }
.changelog-footer-links nav a { display: block; width: fit-content; margin-bottom: 10px; color: var(--cl-muted); font-size: 13px; }
.changelog-footer-links nav a:hover { color: var(--cl-accent); }
.changelog-footer-bottom { display: flex; justify-content: space-between; gap: 20px; font-size: 12px; color: var(--cl-muted); }
.changelog-footer-wordmark { display: block; width: 100%; height: auto; margin-top: 60px; }
@media (max-width: 900px) {
  .changelog-header { width: calc(100% - 40px); }
  .changelog-header-nav { gap: 16px; }
  .changelog-header-actions .changelog-button-quiet { display: none; }
  .changelog-footer { width: calc(100% - 40px); }
  .changelog-cta { padding: 32px 32px 0; }
  .changelog-cta-paper { padding: 40px 32px; }
  .changelog-footer-links { gap: 24px; }
}
@media (max-width: 620px) {
  .changelog-header { width: calc(100% - 40px); min-height: 100px; gap: 12px; flex-wrap: wrap; padding: 14px 0; }
  .changelog-logo img { width: 112px; height: 30px; }
  .changelog-header-nav { order: 3; width: 100%; justify-content: center; gap: 26px; font-size: 12px; }
  .changelog-header-actions .changelog-button { min-height: 34px; font-size: 12px; padding: 7px 12px; }
  .changelog-index { padding: 50px 0 64px; }
  .changelog-index h1 { font-size: 46px; }
  .changelog-intro { font-size: 15px; margin-top: 12px !important; }
  .changelog-filters { margin: 26px 0 30px; gap: 7px; }
  .changelog-filter { min-height: 36px; padding: 6px 11px; font-size: 12px !important; }
  .changelog-entry { gap: 14px; padding-right: 0; }
  .changelog-entry h2 { font-size: 22px; }
  .changelog-entry-meta { gap: 3px 10px; }
  .changelog-entry-category::before { margin-right: 10px; }
  .changelog-timeline > li { padding-bottom: 24px; }
  .changelog-detail { padding-top: 40px; padding-bottom: 64px; }
  .changelog-article-header { margin-bottom: 40px; }
  .changelog-article-header h1 { font-size: 38px; margin: 20px 0 !important; }
  .changelog-article-meta { font-size: 12px; gap: 5px 12px; }
  .changelog-hero-media { margin-bottom: 32px !important; }
  .changelog-summary, .changelog-prose { font-size: 17px; line-height: 1.8; }
  .changelog-summary { margin-bottom: 30px !important; }
  .changelog-prose h2 { font-size: 27px; margin-top: 36px; }
  .changelog-prose h3 { font-size: 22px; }
  .changelog-pagination { gap: 20px; }
  .changelog-pagination strong { font-size: 17px; }
  .changelog-cta { padding: 20px 20px 0; }
  .changelog-cta-paper { padding: 30px 22px; }
  .changelog-cta h2 { font-size: 32px; }
  .changelog-cta p { font-size: 15px; }
  .changelog-footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; padding: 48px 0 40px; }
  .changelog-footer-about { grid-column: 1 / -1; }
  .changelog-footer-links nav:last-child { grid-column: 1 / -1; }
  .changelog-footer-bottom { flex-direction: column; gap: 8px; font-size: 11px; }
  .changelog-footer-wordmark { margin-top: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .changelog-page *, .changelog-page *::before, .changelog-page *::after { scroll-behavior: auto; transition: none !important; }
}

.changelog-page [data-category='Feature'] { color: var(--cl-category-feature); }

.changelog-page [data-category='Improvement'] { color: var(--cl-category-improvement); }

.changelog-page [data-category='Fix'] { color: var(--cl-category-fix); }

.changelog-page [data-category='Infrastructure'] { color: var(--cl-category-infrastructure); }
.changelog-video-preview { position: relative; display: block; width: 100%; min-height: 220px; padding: 0; border: 1px solid var(--cl-rule); border-radius: 8px; overflow: hidden; background: var(--cl-soft); }
.changelog-hero-media .changelog-video-preview img { width: 100%; max-height: 560px; object-fit: contain; }
.changelog-video-play { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); display: inline-flex; align-items: center; justify-content: center; gap: 9px; white-space: nowrap; padding: 12px 18px; border-radius: 999px; color: var(--on-accent); background: var(--cl-action); font-size: 14px; box-shadow: 0 2px 12px color-mix(in srgb, var(--cl-ink) 20%, transparent); }
.changelog-video-preview:hover .changelog-video-play { background: var(--cl-action-hover); }
.changelog-hero-media .changelog-video-caption { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.changelog-video-caption a { display: inline-flex; align-items: center; gap: 4px; text-decoration: underline; text-underline-offset: 3px; }
.changelog-video-caption a:hover { color: var(--cl-accent); }

.changelog-header{min-height:96px;max-width:1280px}
.changelog-index{padding-top:74px;width:min(680px,calc(100% - 48px))}
.changelog-index h1{font-size:72px;letter-spacing:-.055em}
.changelog-page .changelog-button{font-size:13px;min-height:42px;padding:10px 20px}
.changelog-filters{margin-top:30px;margin-bottom:34px;border-bottom:1px solid var(--cl-rule);padding-bottom:30px}
.changelog-filter{min-height:40px;padding:8px 16px;font-size:13px!important}
.changelog-filter[aria-pressed=true]{background:var(--cl-action);color:#fff;border-color:var(--cl-action)}
.changelog-entry{padding:13px 12px 17px 0;gap:23px}.changelog-entry h2{font-size:27px;letter-spacing:-.035em}
.changelog-entry-meta{font-size:12px;gap:5px 11px;margin-top:11px}.changelog-timeline>li{padding-bottom:23px}
.changelog-entry-category{border-radius:20px;padding:1px 8px;background:#eae3ee}.changelog-entry-category::before{display:none}
.changelog-entry-category[data-category=Improvement]{background:#f1e6c9}.changelog-entry-category[data-category=Fix]{background:#ebdfdf}
.changelog-hero-media > img{border-radius:20px}.changelog-article-header h1{letter-spacing:-.045em}
.article-draft-note{padding:10px 14px;border-left:2px solid #bba9c8;background:#f0ebf1;color:var(--cl-muted);font-size:12px;margin-bottom:30px!important}
.changelog-share button{border:1px solid var(--cl-rule);border-radius:999px;background:transparent;padding:10px 15px;color:var(--cl-ink);font-size:13px;min-height:42px}
.changelog-footer{background:var(--cl-action);color:var(--cl-paper);border-radius:26px;padding:48px 54px 22px;overflow:hidden;margin-bottom:24px;width:min(1280px,calc(100% - 64px))}
.footer-top{position:relative}.footer-top .eyebrow{color:#e7ddec}.footer-top h2{color:var(--cl-paper);font-size:clamp(38px,5vw,68px);line-height:1.05;margin:23px 0 26px;letter-spacing:-.045em}.footer-top h2 em{color:#EAD39D}
.footer-cta{display:inline-flex;align-items:center;gap:22px;border-radius:999px;background:#EAD39D;color:#352E40!important;padding:12px 24px;font-size:14px;min-height:48px}.footer-cta:hover{background:#f2deb2}
.footer-rule{height:1px;background:#ffffff29;margin:45px 0 25px}.footer-links{display:flex;align-items:center;gap:25px;font-size:12px;color:#e7ddec}.footer-links span{margin-left:auto}
.footer-wordmark{display:flex;align-items:center;gap:25px;margin-top:40px;line-height:1}.footer-wordmark img{width:14%;height:auto;border-radius:24%}.footer-wordmark span{font-size:clamp(46px,12.7vw,180px);font-weight:600;letter-spacing:-.075em}
@media(max-width:620px){.changelog-header{gap:12px}.changelog-header>.changelog-button{font-size:11px;padding:10px 12px}.brand{font-size:24px}.changelog-header-nav{justify-content:flex-start;gap:24px}.changelog-index{padding-top:38px}.changelog-index h1{font-size:55px}.changelog-entry h2{font-size:24px}.changelog-entry-meta{font-size:11px}.changelog-filter{padding:8px 13px}.changelog-footer{width:calc(100% - 32px);padding:32px 24px 22px;border-radius:20px}.footer-links{flex-wrap:wrap;gap:15px}.footer-links span{margin-left:0;width:100%}.footer-wordmark{gap:10px;margin-top:30px}.footer-wordmark span{font-size:15.4vw}}

.changelog-hero-media > img{max-height:640px;background:#f0ebf1}.changelog-share{flex-wrap:wrap}

/* Same 434 × 908.084 phone and 402 × 874 screen as the landing page.
   Responsive proportions keep screenshots intact; only the outer viewport crops. */
.changelog-phone-stage { display: flex; justify-content: center; gap: 36px; overflow: hidden; padding: 36px 40px; border-radius: 20px; background: var(--cl-soft); }
.changelog-phone-stage:has([data-crop="top"]) { padding-bottom: 0; }
.changelog-phone-stage:has([data-crop="bottom"]):not(.changelog-phone-pair) { padding-top: 0; }
.changelog-phone-viewport { position: relative; width: min(330px, 100%); aspect-ratio: 434 / 908.084; overflow: hidden; flex: none; }
.changelog-phone-viewport[data-crop="top"], .changelog-phone-viewport[data-crop="bottom"] { width: min(380px, 100%); aspect-ratio: 434 / 560; }
.changelog-iphone { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 434 / 908.084; border-radius: 15.9% / 7.6%; background: linear-gradient(125deg,#a3a09e,#4d4b49 24%,#aca7a2 48%,#454341 75%,#918e8a); isolation: isolate; }
.changelog-phone-viewport[data-crop="bottom"] .changelog-iphone { top: auto; bottom: 0; }
.changelog-iphone::before { content: ''; position: absolute; inset: .4405% .9217%; border-radius: 15.3% / 7.3%; background: #08090b; box-shadow: inset 0 0 0 2px #555453; }
.changelog-phone-screen { position: absolute; left: 3.6866%; top: 1.8767%; width: 92.6267%; height: 96.2488%; overflow: hidden; border-radius: 13.43% / 6.18%; background: var(--cl-paper); }
.changelog-phone-screen img { display: block; width: 100%; height: 100%; object-fit: fill; }
.changelog-phone-island { position: absolute; top: 1.144%; left: 34.328%; width: 31.343%; height: 4.233%; border-radius: 999px; background: #08090b; }
.changelog-phone-home { position: absolute; bottom: 1.03%; left: 33.333%; width: 33.333%; height: .572%; border-radius: 999px; background: #131316; }
.changelog-phone-pair { padding: 36px 40px !important; align-items: start; }
.changelog-phone-pair .changelog-phone-viewport { width: calc((100% - 36px) / 2); }
@media (max-width: 620px) {
  .changelog-phone-stage { padding: 24px; border-radius: 16px; }
  .changelog-phone-pair { flex-direction: column; align-items: center; padding: 24px !important; gap: 28px; }
  .changelog-phone-pair .changelog-phone-viewport { width: 100%; }
}

.changelog-phone-viewport { filter: drop-shadow(0 18px 24px #352E4018); }
.changelog-phone-viewport[data-crop="top"] { border-radius: 15.9% 15.9% 0 0 / 12.32% 12.32% 0 0; }
.changelog-phone-viewport[data-crop="bottom"] { border-radius: 0 0 15.9% 15.9% / 0 0 12.32% 12.32%; }