:root {
  color-scheme:light;
  --canvas:#f7f7f3;
  --surface:#fefefb;
  --inset:#f1f0ea;
  --line:#dddbd2;
  --ink:#172018;
  --muted:#687069;
  --sage:#49664b;
  --pale:#dce4d9;
  --shell:1240px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--canvas);
  font-synthesis:none;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:35px;
}
body {
  margin:0;
}
button,a {
  -webkit-tap-highlight-color:transparent;
}
a {
  color:inherit;
}
button {
  font:inherit;
}
img {
  display:block;
  max-width:100%;
  height:auto;
}
button,a {
  touch-action:manipulation;
}
button:focus-visible,a:focus-visible {
  outline:3px solid var(--sage);
  outline-offset:5px;
}
::selection {
  background:var(--pale);
}
[hidden] {
  display:none!important;
}
.shell {
  width:min(calc(100% - 80px),var(--shell));
  margin-inline:auto;
}
.section-space {
  padding-block:120px;
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 28px;
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--sage);
  line-height:1.5;
}
.small-line {
  width:27px;
  height:1px;
  background:var(--sage);
}
.skip-link {
  position:fixed;
  left:16px;
  top:-100px;
  z-index:10;
  padding:14px 20px;
  background:var(--ink);
  color:white;
  border-radius:10px;
}
.skip-link:focus {
  top:16px;
}
.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:110px;
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:13px;
  text-decoration:none;
  flex-shrink:0;
}
.app-icon {
  border-radius:23%;
}
.wordmark {
  width:152px;
}
.site-header nav {
  display:flex;
  gap:30px;
}
.site-header a {
  text-decoration:none;
}
.site-header nav a {
  font-size:.875rem;
  color:var(--muted);
  transition:color .18s;
}
.site-header nav a:hover {
  color:var(--ink);
}
.launch-link {
  display:flex;
  align-items:center;
  gap:16px;
  font-size:.8125rem;
  font-weight:600;
  border-bottom:1px solid var(--line);
  padding:10px 0;
}
.launch-link span {
  font-size:1.125rem;
}
.hero {
  display:grid;
  grid-template-columns:1.04fr 1fr;
  align-items:center;
  gap:48px;
  padding:34px 0 80px;
}
.hero-copy {
  padding:10px 0 30px;
}
h1,h2,h3,p {
  overflow-wrap:break-word;
}
h1 {
  font-size:clamp(4rem,6.4vw,6.25rem);
  line-height:1.02;
  letter-spacing:-.065em;
  font-weight:600;
  margin:0 0 34px;
}
h1 span,h2 span {
  color:var(--sage);
}
.hero-description {
  font-size:1.1875rem;
  line-height:1.7;
  letter-spacing:-.015em;
  max-width:450px;
  color:var(--muted);
  margin:0;
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:25px;
  margin-top:36px;
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:34px;
  min-height:54px;
  padding:16px 22px;
  border:1px solid var(--sage);
  border-radius:12px;
  background:var(--sage);
  color:var(--surface);
  text-decoration:none;
  font-size:.9375rem;
  font-weight:500;
  transition:background .2s,transform .2s;
}
.button:hover {
  background:#365339;
  transform:translateY(-2px);
}
.button span {
  font-size:1.15rem;
}
.release-note {
  font-size:.8125rem;
  line-height:1.65;
}
.release-note>span {
  color:var(--muted);
  font-size:.75rem;
}
.hero-stage {
  margin:0;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:680px;
  padding:45px 35px 42px;
  background:#e7ebe2;
  border-radius:28px;
}
.stage-caption {
  position:absolute;
  left:24px;
  right:24px;
  bottom:20px;
  margin:0;
  color:var(--sage);
  font-size:.875rem;
  line-height:1.5;
  text-align:center;
}
.hero-device {
  width:auto;
  height:595px;
}
.journey {
  display:grid;
  grid-template-columns:1fr 1.65fr;
  gap:60px;
  border-top:1px solid var(--line);
  padding:37px 0 45px;
}
.journey-intro .eyebrow {
  font-size:.6875rem;
  margin:0 0 15px;
}
.journey-intro p {
  font-size:1.25rem;
  line-height:1.5;
  letter-spacing:-.025em;
  margin:0;
}
.route {
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin:0;
  padding:0;
  align-items:start;
  gap:25px;
}
.route li {
  display:flex;
  flex-direction:column;
  padding-top:4px;
}
.route-index {
  font-size:.6875rem;
  color:var(--muted);
  letter-spacing:.1em;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
  position:relative;
}
.route li:not(:last-child) .route-index:after {
  content:'→';
  position:absolute;
  right:0;
  font-size:.875rem;
  color:var(--sage);
}
.route strong {
  font-size:1.3125rem;
  font-weight:500;
  letter-spacing:-.025em;
  margin:14px 0 7px;
}
.route li>span:last-child {
  font-size:.75rem;
  color:var(--muted);
}
.inside {
  background:var(--surface);
  border-block:1px solid var(--line);
  margin-top:35px;
}
.inside-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:105px;
  align-items:center;
}
.inside-visual {
  background:var(--inset);
  border-radius:24px;
  padding:26px 28px 22px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.visual-kicker {
  font-size:.625rem;
  letter-spacing:.12em;
  color:var(--muted);
  align-self:flex-start;
}
.screen-preview {
  height:610px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px 0 15px;
}
.screen-preview img {
  height:100%;
  width:auto;
  max-width:100%;
  object-fit:contain;
}
.screen-caption {
  margin:7px 0 0;
  font-size:.75rem;
  color:var(--muted);
  text-align:center;
  line-height:1.5;
}
h2 {
  font-size:clamp(2.5rem,3.4vw,3.4rem);
  line-height:1.13;
  letter-spacing:-.05em;
  font-weight:500;
  margin:0 0 26px;
}
.section-lede {
  font-size:1.0625rem;
  line-height:1.75;
  color:var(--muted);
  margin:0;
  max-width:510px;
}
.screen-tabs {
  display:flex;
  gap:6px;
  border-radius:12px;
  background:var(--inset);
  padding:5px;
  margin:35px 0 26px;
}
.screen-tabs button {
  flex:1;
  border:0;
  background:transparent;
  color:var(--muted);
  padding:12px 10px;
  border-radius:9px;
  font-size:.875rem;
  cursor:pointer;
}
.screen-tabs button[aria-selected=true] {
  background:var(--sage);
  color:white;
}
.screen-panels {
  min-height:233px;
}
.screen-panels h3 {
  font-size:1.1875rem;
  letter-spacing:-.02em;
  font-weight:500;
  margin:0 0 11px;
}
.screen-panels p {
  font-size:1rem;
  line-height:1.7;
  color:var(--muted);
  margin:0;
}
.quiet-list {
  list-style:none;
  margin:20px 0 0;
  padding:0;
}
.quiet-list li {
  position:relative;
  padding-left:22px;
  font-size:.875rem;
  margin-top:12px;
}
.quiet-list li:before {
  content:'✓';
  color:var(--sage);
  position:absolute;
  left:0;
}
.real-screens {
  font-size:.75rem;
  color:var(--muted);
  margin:26px 0 0;
}
.together {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:105px;
  align-items:start;
}
.plus-pill {
  font-size:.6875rem;
  border:1px solid #bccbb9;
  border-radius:6px;
  padding:3px 7px;
  white-space:nowrap;
  letter-spacing:0;
  text-transform:none;
  line-height:1.3;
}
.apple-note {
  display:flex;
  gap:20px;
  border-top:1px solid var(--line);
  padding-top:29px;
  margin-top:28px;
}
.apple-note svg {
  width:36px;
  height:36px;
  flex-shrink:0;
  color:var(--sage);
}
.apple-note h3 {
  font-size:1rem;
  margin:0 0 10px;
  font-weight:500;
}
.apple-note p,.supporting-text {
  font-size:.875rem;
  line-height:1.7;
  color:var(--muted);
  margin:0;
}
.together-copy>.supporting-text {
  margin-top:24px;
}
.offline {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  background:#e7ebe2;
  border-radius:28px;
  padding:62px 65px;
  align-items:center;
}
.offline-copy .supporting-text {
  margin-top:24px;
  max-width:420px;
}
.offline-visual {
  min-width:0;
}
.offline-file {
  display:flex;
  align-items:center;
  gap:16px;
  margin:0 3px 20px;
  color:var(--sage);
}
.offline-file svg {
  width:27px;
  height:34px;
}
.offline-file>span {
  font-size:.625rem;
  letter-spacing:.08em;
  line-height:1.8;
}
.offline-file strong {
  font-size:.875rem;
  font-weight:500;
  letter-spacing:0;
  color:var(--ink);
}
.offline-file .file-type {
  margin-left:auto;
  font-size:.6875rem;
  border:1px solid #a8b7a5;
  border-radius:5px;
  padding:1px 6px;
}
.offline-paper {
  background:var(--canvas);
  border:1px solid #cbd2c6;
  border-radius:4px;
  transform:rotate(-2deg);
  overflow:hidden;
}
.offline-paper>img {
  display:block;
  width:100%;
  height:auto;
}
.offline-caption {
  font-size:.75rem;
  color:var(--sage);
  text-align:center;
  margin:24px 0 0;
}
.philosophy {
  margin-top:120px;
  background:var(--sage);
  color:var(--canvas);
}
.philosophy .eyebrow {
  color:#d2dfcd;
}
.philosophy h2 {
  font-size:clamp(2.5rem,4.5vw,4.25rem);
}
.philosophy-lede {
  color:#e0e6dd;
  font-size:1.125rem;
  line-height:1.75;
  margin:0;
  max-width:710px;
}
.principles {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:60px;
  margin-top:68px;
}
.principles article {
  border-top:1px solid #80967e;
  padding-top:22px;
}
.principles article>span {
  font-size:.6875rem;
  letter-spacing:.1em;
  color:#d2dfcd;
}
.principles h3 {
  font-size:1.25rem;
  font-weight:500;
  letter-spacing:-.025em;
  margin:26px 0 13px;
}
.principles p {
  font-size:.9375rem;
  line-height:1.75;
  color:#e0e6dd;
  margin:0;
  max-width:320px;
}
.plus {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:105px;
}
.plus-intro .section-lede {
  max-width:370px;
}
.text-link {
  display:inline-flex;
  gap:30px;
  text-underline-offset:7px;
  font-size:.875rem;
  color:var(--sage);
  margin-top:30px;
}
.plus-features {
  border-top:1px solid var(--line);
}
.plus-features article {
  display:flex;
  gap:25px;
  padding:25px 0;
  border-bottom:1px solid var(--line);
}
.plus-features article>span {
  font-size:.6875rem;
  color:var(--sage);
  padding-top:5px;
}
.plus-features h3 {
  font-size:1.125rem;
  font-weight:500;
  margin:0 0 9px;
  letter-spacing:-.02em;
}
.plus-features p {
  font-size:.9375rem;
  line-height:1.7;
  color:var(--muted);
  margin:0;
}
.plus-features .plus-footnote {
  font-size:.75rem;
  margin-top:20px;
}
.closing {
  background:var(--inset);
  text-align:center;
  padding:85px 0 90px;
  border-block:1px solid var(--line);
}
.closing-icon {
  margin:0 auto 33px;
}
.closing .eyebrow {
  justify-content:center;
  margin-bottom:23px;
}
.closing h2 {
  font-size:clamp(3rem,5.7vw,5.25rem);
  line-height:1.06;
  letter-spacing:-.055em;
}
.closing .shell>p:not(.eyebrow):not(.launch-fine) {
  font-size:1rem;
  color:var(--muted);
}
.coming-badge {
  display:inline-flex;
  flex-direction:column;
  gap:5px;
  border:1px solid #a7b5a1;
  background:var(--canvas);
  border-radius:12px;
  padding:16px 32px;
  margin-top:25px;
  min-width:240px;
  font-size:.75rem;
  color:var(--muted);
}
.release-season {
  font-size:1.125rem;
  font-weight:500;
  letter-spacing:-.02em;
  color:var(--ink);
}
.closing .launch-fine {
  font-size:.75rem;
  color:var(--muted);
  margin-top:18px;
}
footer {
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:30px;
  align-items:center;
  padding-block:38px 24px;
}
footer .wordmark {
  width:132px;
}
footer>p {
  font-size:.8125rem;
  color:var(--muted);
}
.footer-links {
  display:flex;
  gap:24px;
  font-size:.75rem;
  color:var(--muted);
}
.footer-links a {
  text-decoration:none;
}
.footer-links a:hover {
  text-decoration:underline;
}
.history-example {
  margin:0;
  padding:28px;
  border:1px solid var(--line);
  border-radius:24px;
  background:var(--inset);
}
.history-heading {
  margin:0 0 24px;
}
.history-heading h3 {
  margin:0 0 7px;
  font-size:1.5rem;
  font-weight:600;
  letter-spacing:-.035em;
}
.history-heading p {
  margin:0;
  font-size:.9375rem;
  color:var(--muted);
}
.history-entries {
  list-style:none;
  margin:0;
  padding:0 20px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface);
}
.history-entries li {
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:20px 0;
}
.history-entries li + li {
  border-top:1px solid var(--line);
}
.history-avatar {
  display:grid;
  place-items:center;
  flex:0 0 40px;
  height:40px;
  border-radius:50%;
  background:var(--ink);
  color:var(--surface);
  font-size:.8125rem;
  font-weight:600;
}
.history-entries h4 {
  margin:0 0 5px;
  font-size:.9375rem;
  font-weight:600;
  line-height:1.4;
}
.history-entries p {
  margin:0;
  font-size:.9375rem;
  color:var(--muted);
  line-height:1.5;
}
.history-entries .history-attribution {
  margin-top:7px;
  font-size:.8125rem;
}
@media(min-width:1500px) {
  .hero {
    gap:90px;
    padding-top:45px;
    padding-bottom:90px;
  }
  .hero-stage {
    min-height:730px;
  }
  .hero-device {
    height:640px;
  }
}
@media(max-width:1100px) {
  .shell {
    width:calc(100% - 56px);
  }
  .hero {
    gap:28px;
  }
  .hero-stage {
    min-height:610px;
    padding-inline:24px;
  }
  .hero-device {
    height:535px;
  }
  .inside-grid,.together,.plus {
    gap:55px;
  }
  .inside-visual {
    padding-inline:18px;
  }
  .screen-preview {
    height:560px;
  }
  .offline {
    padding:48px 38px;
    gap:42px;
  }
  .site-header nav {
    gap:20px;
  }
  .principles {
    gap:35px;
  }
  .hero-description {
    font-size:1.25rem;
  }
}
@media(max-width:850px) {
  .site-header nav {
    display:none;
  }
  .hero {
    grid-template-columns:1fr 1fr;
    gap:22px;
  }
  h1 {
    font-size:3.8rem;
  }
  .hero-stage {
    min-height:540px;
  }
  .hero-device {
    height:462px;
  }
  .hero-actions {
    flex-direction:column;
    align-items:flex-start;
    gap:17px;
  }
  .release-note br {
    display:none;
  }
  .release-note>span {
    margin-left:7px;
  }
  .journey {
    gap:30px;
    grid-template-columns:1fr 1.7fr;
  }
  .route {
    gap:16px;
  }
  .route strong {
    font-size:1.125rem;
  }
  .inside-grid,.together,.plus {
    gap:35px;
  }
  .section-space {
    padding-block:85px;
  }
  .inside h2 {
    font-size:2.2rem;
  }
  .screen-preview {
    height:510px;
  }
  .screen-panels {
    min-height:285px;
  }
  .offline {
    grid-template-columns:1fr;
    gap:40px;
    padding:45px;
    max-width:650px;
  }
  .offline-copy .section-lede,.offline-copy .supporting-text {
    max-width:100%;
  }
  .offline-visual {
    width:100%;
    max-width:400px;
    margin:auto;
  }
  .philosophy {
    margin-top:85px;
  }
  footer {
    grid-template-columns:1fr auto;
  }
  footer>p {
    display:none;
  }
}
@media(max-width:620px) {
  .shell {
    width:calc(100% - 36px);
  }
  .site-header {
    min-height:88px;
    gap:12px;
  }
  .brand {
    gap:10px;
  }
  .site-header .app-icon {
    width:36px;
  }
  .site-header .wordmark {
    width:119px;
  }
  .launch-link {
    font-size:.6875rem;
    gap:7px;
  }
  .hero {
    grid-template-columns:1fr;
    padding:38px 0 45px;
    gap:42px;
  }
  .hero-copy {
    padding:0 5px;
  }
  h1 {
    font-size:clamp(3.8rem,15vw,5.1rem);
    margin-bottom:24px;
    letter-spacing:-.06em;
  }
  .hero .eyebrow {
    margin-bottom:22px;
  }
  .hero-description {
    font-size:1.25rem;
    max-width:330px;
  }
  .hero-actions {
    flex-direction:row;
    align-items:center;
    gap:20px;
    margin-top:28px;
  }
  .release-note br {
    display:block;
  }
  .release-note>span {
    margin-left:0;
  }
  .hero-stage {
    min-height:650px;
    padding:46px 20px;
    border-radius:22px;
  }
  .hero-device {
    height:555px;
  }
  .journey {
    grid-template-columns:1fr;
    padding:28px 0 35px;
    gap:26px;
  }
  .journey-intro p {
    font-size:1.0625rem;
  }
  .journey-intro .eyebrow {
    margin-bottom:10px;
  }
  .route {
    gap:15px;
  }
  .route strong {
    font-size:1.125rem;
  }
  .route li>span:last-child {
    font-size:.625rem;
  }
  .route-index {
    padding-bottom:10px;
  }
  .inside {
    margin-top:15px;
  }
  .section-space {
    padding-block:68px;
  }
  .inside-grid {
    grid-template-columns:1fr;
    gap:36px;
  }
  .inside-copy {
    grid-row:1;
    padding:0 5px;
  }
  .inside h2,h2 {
    font-size:2.45rem;
    line-height:1.15;
  }
  .eyebrow {
    font-size:.6875rem;
    margin-bottom:20px;
  }
  .section-lede {
    font-size:1rem;
  }
  .screen-tabs {
    margin-top:26px;
  }
  .screen-panels {
    min-height:245px;
  }
  .real-screens {
    margin-top:15px;
    font-size:.6875rem;
  }
  .inside-visual {
    padding:24px 20px;
  }
  .screen-preview {
    height:580px;
  }
  .together,.plus {
    grid-template-columns:1fr;
    gap:8px;
  }
  .together {
    gap:32px;
  }
  .together-copy {
    padding:0 5px;
  }
  .apple-note {
    padding-top:25px;
    margin-top:25px;
    gap:16px;
  }
  .offline {
    padding:34px 23px;
    border-radius:22px;
    gap:30px;
  }
  .offline h2 {
    font-size:2.2rem;
  }
  .offline-paper {
    transform:rotate(-1deg);
  }
  .offline-file {
    gap:10px;
  }
  .offline-file strong {
    font-size:.8125rem;
  }
  .philosophy {
    margin-top:65px;
  }
  .philosophy h2 {
    font-size:2.5rem;
  }
  .philosophy-lede {
    font-size:1rem;
  }
  .philosophy-lede br {
    display:none;
  }
  .principles {
    grid-template-columns:1fr;
    gap:28px;
    margin-top:40px;
  }
  .principles h3 {
    margin-top:18px;
  }
  .principles p {
    max-width:100%;
  }
  .plus {
    gap:37px;
  }
  .plus-intro .section-lede {
    max-width:100%;
  }
  .plus-features article {
    gap:21px;
  }
  .closing {
    padding:65px 0;
  }
  .closing h2 {
    font-size:3.35rem;
  }
  .closing-icon {
    width:80px;
  }
  .closing .shell>p:not(.eyebrow):not(.launch-fine) {
    font-size:.9375rem;
  }
  .launch-fine {
    line-height:1.6;
  }
  footer {
    grid-template-columns:1fr;
    gap:25px;
    padding-block:30px 20px;
  }
  .footer-links {
    gap:23px;
  }
}
@media(max-width:360px) {
  .site-header .wordmark {
    width:105px;
  }
  .launch-link {
    font-size:.625rem;
  }
  .hero-actions {
    gap:13px;
  }
  .button {
    gap:20px;
    padding-inline:17px;
  }
  .hero-stage {
    min-height:590px;
  }
  .hero-device {
    height:510px;
  }
  .screen-preview {
    height:510px;
  }
  .release-note {
    font-size:.6875rem;
  }
}
@media(max-width:850px) {
  .together {
    grid-template-columns:1fr;
    gap:36px;
  }
  .together-copy .section-lede {
    max-width:100%;
  }
}
@media(max-width:620px) {
  .hero-description {
    font-size:1.0625rem;
    max-width:100%;
  }
  .history-example {
    padding:22px 18px;
  }
  .history-entries {
    padding:0 14px;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
  }
}