:root {
  color-scheme:dark;
  --bg:#000;
  --surface:#111113;
  --media:#111113;
  --text:#f5f5f7;
  --muted:#a1a1a6;
  --line:#29292d;
  --nav:#000;
  --header-line:rgba(255,255,255,.08);
  --blue:#007aff;
  font-family:"Geist",-apple-system,BlinkMacSystemFont,sans-serif;
  font-synthesis:none}

@media(prefers-color-scheme:light) {
  :root {
    color-scheme:light;
    --bg:#fff;
    --surface:#f5f5f7;
    --media:#f5f5f7;
    --text:#171719;
    --muted:#68686d;
    --line:#e5e5e7;
    --nav:#fff;
    --header-line:rgba(0,0,0,.08);
  }
}

* {
  box-sizing:border-box}
html {
  background:var(--bg);
  scroll-behavior:smooth;
  scroll-padding-top:110px}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased}
a {
  color:inherit;
  text-decoration:none}
button {
  font:inherit;
  cursor:pointer}
img {
  display:block;
  max-width:100%;
  height:auto}
picture {
  display:block}
h1,h2,h3,p,figure {
  margin:0}
a,button {
  -webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible {
  outline:3px solid var(--blue);
  outline-offset:5px}
p {
  font-size:1.125rem;
  line-height:1.6}
.skip-link {
  position:fixed;
  top:-80px;
  left:20px;
  z-index:30;
  padding:12px;
  background:var(--bg)}
.skip-link:focus {
  top:10px}

.site-header {
  position:sticky;
  top:0;
  z-index:20;
  background:var(--nav);
  border-bottom:1px solid var(--header-line);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px)}
.nav-shell {
  max-width:1600px;
  margin:auto;
  min-height:64px;
  padding:10px 4%;
  display:flex;
  align-items:center;
  gap:42px}
.brand {
  flex-shrink:0}
.brand img {
  width:32px;
  height:36px;
  object-fit:contain}
.navigation {
  display:flex;
  align-items:center;
  gap:48px}
.navigation a {
  font-size:.875rem;
  padding:12px 0}
.navigation a:hover,.text-link:hover {
  color:var(--blue)}
.download-button {
  margin-left:auto;
  white-space:nowrap;
  background:var(--blue);
  color:#fff;
  border-radius:999px;
  padding:8px 18px;
  font-size:.875rem;
  font-weight:500;
  transition:background .15s}
.download-button:hover {
  background:#0066d6}
.menu-toggle {
  display:none;
  border:0;
  background:none;
  color:var(--text);
  width:44px;
  height:44px;
  padding:12px}
.menu-toggle span {
  display:block;
  height:2px;
  background:currentColor;
  margin:5px 0;
  transition:transform .2s}

.hero {
  overflow:hidden;
  padding-top:clamp(58px,8vh,100px)}
.hero-copy {
  text-align:center;
  max-width:900px;
  padding:0 24px;
  margin:auto}
.app-icon {
  width:80px;
  height:80px;
  margin:0 auto 18px}
.hero h1 {
  font-size:clamp(2.5rem,3.6vw,3.25rem);
  line-height:1.12;
  font-weight:500;
  letter-spacing:-.045em}
.hero-copy p {
  max-width:780px;
  margin:20px auto 0;
  font-size:clamp(1rem,1.2vw,1.0625rem);
  line-height:1.65;
  letter-spacing:-.012em;
  text-wrap:pretty}
.hero-preview {
  position:relative;
  width:min(1280px,94%);
  margin:48px auto 0;
  border-radius:30px;
  overflow:hidden}
.hero-preview img {
  width:100%}

.section-inner {
  width:min(1120px,calc(100% - 80px));
  margin:auto}
.feature-section {
  padding:88px 0 96px}
.alternate {
  background:var(--bg)}
.eyebrow {
  font-size:.875rem;
  font-weight:500;
  color:var(--muted);
  margin-bottom:16px;
  letter-spacing:-.02em}
h2 {
  font-size:clamp(1.875rem,3vw,2.625rem);
  font-weight:500;
  letter-spacing:-.035em;
  line-height:1.18;
  text-wrap:balance}
.feature-copy>h2+p {
  margin-top:22px;
  max-width:740px;
  color:var(--muted);
  font-size:1.0625rem;
  line-height:1.7;
  letter-spacing:-.015em}
.feature-copy>p.feature-note {
  margin-top:14px;
  max-width:740px;
  color:var(--muted);
  font-size:.875rem;
  line-height:1.5;
  letter-spacing:-.01em}
.media-stage {
  margin-top:48px;
  aspect-ratio:16/9;
  border-radius:24px;
  overflow:hidden;
  background:var(--surface);
  position:relative}
.alternate .media-stage {
  background:var(--media)}
.media-stage picture {
  position:absolute;
  width:100%}
.media-stage img {
  width:100%;
  max-width:none}
.crop-library picture {
  width:135%;
  top:10%;
  left:5%}
.full-preview picture {
  width:94%;
  left:3%;
  top:8%}

.bento-section {
  padding:96px 0}
.bento-section h2 {
  margin-bottom:48px}
.bento-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px}
.bento-card {
  background:var(--surface);
  border-radius:24px;
  min-height:300px;
  padding:36px;
  overflow:hidden;
  position:relative}
.bento-card h3 {
  font-size:1.375rem;
  letter-spacing:-.025em;
  line-height:1.25;
  font-weight:500}
.bento-card p:not(.eyebrow) {
  color:var(--muted);
  font-size:1rem;
  line-height:1.55;
  margin-top:18px;
  max-width:310px}
.detail-mark {
  font-size:2.75rem;
  line-height:1;
  color:var(--muted);
  display:block;
  margin-bottom:30px;
  font-weight:500;
  letter-spacing:-.06em}
.history-mark {
  font-size:7rem;
  margin:0 15px}
.site-footer {
  max-width:1280px;
  margin:auto;
  padding:32px 40px 44px;
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  border-top:1px solid var(--line);
  font-size:.875rem;
  color:var(--muted)}
.site-footer a:hover {
  color:var(--text)}
.copyright {
  margin-left:16px}

dialog {
  width:min(540px,calc(100% - 40px));
  padding:52px 36px 36px;
  background:var(--bg);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:24px}
dialog::backdrop {
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(8px)}
dialog h2 {
  font-size:2rem}
dialog>p:not(.eyebrow) {
  margin-top:24px;
  color:var(--muted)}
.dialog-close {
  position:absolute;
  top:12px;
  right:12px;
  width:40px;
  height:40px;
  border:0;
  border-radius:50%;
  background:var(--surface);
  color:var(--text);
  font-size:1.75rem}
.text-link {
  display:inline-block;
  margin-top:24px;
  color:var(--blue)}
body:has(dialog[open]) {
  overflow:hidden}

/* Desktop links and download form one group opposite the brand. */
@media(min-width:701px) {
  .feature-copy h2 {
    text-wrap:wrap;
  }
  .feature-copy>p:last-child {
    max-width:none;
  }
  .feature-copy h2 br {
    display:none;
  }
  .nav-shell {
    gap:24px;
  }
  .navigation {
    margin-left:auto;
    gap:28px;
  }
  .navigation::after {
    content:"";
    width:1px;
    height:18px;
    flex-shrink:0;
    background:var(--line);
  }
  .download-button {
    margin-left:0;
  }
}

@media(max-width:900px) {
  .nav-shell {
  gap:24px}
.navigation {
  gap:20px}
.section-inner {
  width:calc(100% - 48px)}
.bento-card {
  padding:28px}
.bento-grid {
  gap:16px}
.hero-preview {
  margin-top:48px}
.feature-section {
  padding:80px 0}
}

@media(max-width:700px) {
  html {
  scroll-padding-top:90px}
.nav-shell {
  min-height:64px;
  padding:10px 20px;
  gap:12px;
  flex-wrap:wrap}
.brand img {
  width:34px;
  height:34px}
.download-button {
  padding:8px 16px;
  font-size:.875rem}
.menu-toggle:not([hidden]) {
  display:block}
.navigation {
  order:4;
  flex-basis:100%;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  padding:10px 0 16px}
.navigation a {
  font-size:1rem;
  padding:14px 0}
.js .navigation {
  display:none}
.js .navigation.is-open {
  display:flex}
.menu-toggle[aria-expanded=true] span:first-child {
  transform:translateY(3.5px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:last-child {
  transform:translateY(-3.5px) rotate(-45deg)}
.hero {
  padding-top:48px}
.app-icon {
  width:68px;
  height:68px;
  margin-bottom:18px}
.hero-copy p {
  margin-top:20px}
.hero-preview {
  width:calc(100% - 40px);
  margin-top:32px;
  border-radius:18px;
  max-height:none}
.feature-section {
  padding:64px 0}
.section-inner {
  width:calc(100% - 40px)}
.eyebrow {
  font-size:.875rem;
  margin-bottom:14px}
.feature-copy>h2+p {
  font-size:1.0625rem;
  margin-top:22px}
.media-stage {
  margin-top:32px;
  border-radius:16px;
  aspect-ratio:5/4}
.full-preview picture {
  width:130%;
  left:4%;
  top:9%}
.crop-library picture {
  width:180%;
  left:3%}
.bento-section {
  padding:64px 0}
.bento-section h2 {
  margin-bottom:32px}
.bento-grid {
  grid-template-columns:1fr}
.bento-card {
  min-height:260px}
.bento-card h3 {
  font-size:1.5rem}
.history-mark {
  font-size:5rem;
  margin:0}
.site-footer {
  padding:28px 20px;
  gap:12px}
.copyright {
  flex-basis:100%;
  text-align:center;
  margin:6px 0 0}
}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
* {
  transition:none!important}
}

/* Show the writing screenshot at its natural aspect ratio on every screen. */
.media-stage.writing-preview,
.media-stage.sync-preview,
.media-stage.agent-preview,
.media-stage.share-preview {
  aspect-ratio:auto;
}
.writing-preview picture,
.sync-preview picture,
.agent-preview picture,
.share-preview picture {
  position:static;
  width:100%;
}