@font-face {
  font-family:Satoshi;
  src:url('Satoshi-Regular.otf') format('opentype');
  font-weight:400;
  font-display:swap;
}
@font-face {
  font-family:Satoshi;
  src:url('Satoshi-Bold.otf') format('opentype');
  font-weight:700;
  font-display:swap;
}
:root {
  --paper:#f7f4ed;
  --ink:#193c2f;
  --muted:#626b60;
  --lime:#bbf348;
  --line:#d9ded2;
  --forest:#123c2c;
  --serif:Georgia,'Times New Roman',serif;
  color-scheme:light;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px;
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 17px/1.6 Satoshi,'Avenir Next',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a {
  color:inherit;
}
button {
  font:inherit;
}
img {
  display:block;
  max-width:100%;
  height:auto;
}
p,h1,h2,h3,figure {
  margin:0;
}
h1,h2,h3 {
  font-weight:700;
  letter-spacing:-.045em;
  text-wrap:balance;
}
h1 {
  font-size:clamp(56px,6.4vw,88px);
  line-height:1.04;
}
h2 {
  font-size:clamp(38px,4.4vw,60px);
  line-height:1.1;
}
h3 {
  font-size:26px;
  line-height:1.2;
}
p {
  color:var(--muted);
}
.wrap {
  width:min(1200px,calc(100% - 96px));
  margin-inline:auto;
}
.eyebrow {
  font-size:12px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ink);
}
.accent-type {
  font-family:var(--serif);
  font-weight:400;
  font-style:italic;
  letter-spacing:-.06em;
}
.skip {
  position:fixed;
  z-index:30;
  top:-100px;
  left:20px;
  background:var(--lime);
  padding:10px 20px;
}
.skip:focus {
  top:10px;
}
a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid #52890b;
  outline-offset:5px;
}
a,button,summary {
  -webkit-tap-highlight-color:transparent;
}
section {
  scroll-margin-top:24px;
}
.site-nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:100px;
  gap:28px;
  border-bottom:1px solid var(--line);
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-size:30px;
  letter-spacing:-.045em;
  font-weight:700;
  line-height:1;
}
.brand img {
  width:42px;
  height:42px;
  border-radius:11px;
}
.nav-links {
  display:flex;
  align-items:center;
  gap:32px;
  font-size:14px;
}
.nav-links a {
  text-decoration:none;
}
.nav-links a:hover {
  text-decoration:underline;
  text-underline-offset:5px;
}
.nav-download {
  padding:10px 20px;
  border:1px solid var(--ink);
  border-radius:100px;
  font-weight:700;
}
.hero {
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:40px;
  align-items:center;
  padding-block:62px 70px;
}
.hero-copy .eyebrow {
  margin-bottom:24px;
}
.hero-copy h1 {
  max-width:650px;
}
.hero-copy .lede {
  font-size:19px;
  max-width:465px;
  margin-top:24px;
  line-height:1.65;
}
.stores {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}
.store {
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:60px;
  padding:10px 19px;
  background:var(--ink);
  color:white;
  border:1px solid var(--ink);
  border-radius:12px;
  text-decoration:none;
  line-height:1.15;
}
.store svg {
  width:25px;
  height:28px;
  fill:currentColor;
  flex:none;
}
.store small {
  display:block;
  font-size:10px;
  letter-spacing:.015em;
  margin-bottom:4px;
}
.store strong {
  font-size:18px;
  letter-spacing:-.02em;
}
.store:hover {
  background:#295740;
}
.hero-note {
  margin-top:16px;
  font-size:12px;
}
.hero-art {
  height:620px;
  position:relative;
  background:#e6eada;
  border-radius:180px 180px 28px 28px;
  overflow:hidden;
  isolation:isolate;
}
.hero-art:before,.hero-art:after {
  content:'';
  position:absolute;
  width:550px;
  height:550px;
  border:1px solid #cbd4bd;
  border-radius:50%;
  z-index:-1;
}
.hero-art:before {
  top:80px;
  left:-215px;
}
.hero-art:after {
  top:225px;
  left:-120px;
}
.phone {
  width:246px;
  border:6px solid #222823;
  border-radius:35px;
  background:#111;
  overflow:hidden;
  box-shadow:0 22px 35px #172d272b;
  line-height:0;
}
.phone img {
  width:100%;
  border-radius:28px;
}
.hero-art .phone {
  position:absolute;
  top:40px;
  left:36px;
  width:250px;
  transform:rotate(-7deg);
}
.hero-art .phone.reader {
  top:125px;
  left:auto;
  right:28px;
  width:229px;
  transform:rotate(8deg);
}
.promise-strip {
  display:flex;
  justify-content:space-between;
  gap:24px;
  border-block:1px solid var(--line);
  padding-block:22px;
  font-size:13px;
  color:var(--ink);
}
.promise-strip span {
  display:flex;
  gap:10px;
  align-items:center;
}
.promise-strip svg {
  width:20px;
  height:20px;
  fill:none;
  stroke:var(--ink);
  stroke-width:1.5;
}
.section-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:48px;
}
.section-head h2 {
  max-width:620px;
  margin-top:16px;
}
.section-head>p {
  max-width:300px;
  font-size:15px;
}
.feed-section {
  padding-block:106px;
}
.feed-demo {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:74px;
  align-items:center;
}
.feed-visual {
  height:560px;
  position:relative;
  overflow:hidden;
  background:#e4e9dd;
  border-radius:24px;
  display:flex;
  justify-content:center;
  padding-top:42px;
}
.feed-visual .phone {
  width:288px;
  border-radius:39px;
}
.feed-visual .phone img {
  border-radius:31px;
}
.feed-caption {
  position:absolute;
  left:24px;
  bottom:22px;
  background:var(--paper);
  border:1px solid var(--line);
  padding:7px 13px;
  border-radius:100px;
  font-size:11px;
  color:var(--ink);
}
.switcher {
  display:flex;
  background:#e8ebdf;
  border:1px solid var(--line);
  padding:5px;
  border-radius:100px;
  width:fit-content;
  margin-bottom:28px;
  gap:5px;
}
.switcher button {
  border:0;
  background:transparent;
  color:var(--ink);
  padding:11px 24px;
  border-radius:100px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
}
.switcher button[aria-pressed=true] {
  background:var(--forest);
  color:var(--lime);
}
.feed-text h3 {
  font-size:34px;
  letter-spacing:-.035em;
  max-width:400px;
}
#feed-description>p {
  margin-top:17px;
  max-width:400px;
  font-size:17px;
}
.feature-points {
  list-style:none;
  padding:0;
  margin:30px 0 0;
  display:grid;
  gap:13px;
  font-size:14px;
}
.feature-points li {
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.feature-points li:before {
  content:'↗';
  color:#426725;
  font-size:17px;
  line-height:1.4;
}
.feed-footnote {
  padding-top:30px;
  margin-top:30px;
  border-top:1px solid var(--line);
  font-size:13px;
}
.reading-section {
  background:var(--forest);
  color:var(--paper);
  overflow:hidden;
}
.reading-inner {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  padding-block:92px;
  align-items:center;
}
.reading-section p {
  color:#c2d0c2;
}
.reading-section .eyebrow {
  color:var(--lime);
}
.reading-copy h2 {
  margin-top:20px;
  max-width:460px;
}
.reading-copy>p {
  margin-top:22px;
  font-size:17px;
  max-width:430px;
}
.reading-list {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px 20px;
  margin-top:42px;
}
.reading-list h3 {
  font-size:17px;
  letter-spacing:-.015em;
  margin-bottom:8px;
}
.reading-list p {
  font-size:13px;
}
.reading-art {
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:580px;
}
.reading-art:before {
  content:'';
  position:absolute;
  inset:35px -20px;
  border:1px solid #3c5d49;
  border-radius:50%;
}
.reading-art .phone {
  width:260px;
  transform:rotate(5deg);
  border-color:#526052;
  box-shadow:0 28px 60px #07150c6b;
}
.reading-caption {
  position:absolute;
  bottom:12px;
  left:0;
  right:0;
  text-align:center;
  font:italic 21px var(--serif);
  color:#d8e4ce;
}
.wide-section {
  padding-block:80px;
  border-bottom:1px solid var(--line);
}
.wide-showcase {
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:64px;
  align-items:end;
  background:#e6eada;
  border-radius:24px;
  padding:40px 64px 32px;
}
.tablet-frame {
  max-width:340px;
  margin-inline:auto;
  border:10px solid #222823;
  border-radius:23px;
  overflow:hidden;
  background:#111;
  box-shadow:0 18px 25px #13241930;
}
.tablet-frame img {
  width:100%;
}
.fold-demo>img {
  width:100%;
  max-width:460px;
  margin-inline:auto;
  filter:drop-shadow(0 15px 18px #13241930);
}
.wide-showcase figcaption {
  margin-top:24px;
  text-align:center;
  font-size:13px;
}
.wide-showcase figcaption strong,.wide-showcase figcaption span {
  display:block;
}
.wide-showcase figcaption strong {
  font-size:16px;
  margin-bottom:4px;
}
.wide-showcase figcaption span {
  color:var(--muted);
}
.wide-benefits {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px;
  margin-top:36px;
}
.wide-benefits h3 {
  font-size:19px;
  letter-spacing:-.025em;
  margin-bottom:8px;
}
.wide-benefits p {
  font-size:14px;
}
.tools-section {
  padding-block:80px;
}
.tools-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
}
.tools-grid article {
  border-top:1px solid var(--line);
  padding-top:20px;
}
.tool-number {
  display:block;
  font:italic 26px var(--serif);
  color:#698259;
  margin-bottom:18px;
}
.tools-grid h3 {
  font-size:21px;
  letter-spacing:-.025em;
  margin-bottom:12px;
}
.tools-grid p {
  font-size:14px;
}
.ownership {
  border-block:1px solid var(--line);
  padding-block:76px;
}
.ownership-head {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  margin-bottom:46px;
}
.ownership-head h2 {
  margin-top:16px;
}
.ownership-head>p {
  align-self:end;
  font-size:17px;
  max-width:445px;
}
.ownership-details {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
}
.ownership-details article {
  border-top:1px solid var(--line);
  padding-top:24px;
}
.ownership-details .number {
  font-family:var(--serif);
  font-style:italic;
  font-size:26px;
  color:#698259;
}
.ownership-details h3 {
  font-size:20px;
  margin-block:12px;
}
.ownership-details p {
  font-size:14px;
}
.ownership-details a {
  text-underline-offset:4px;
}
.faq-section {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:90px;
  padding-block:92px;
}
.faq-intro h2 {
  margin-block:16px 22px;
}
.faq-intro>p {
  font-size:16px;
  max-width:320px;
}
.faq-intro>a {
  display:inline-block;
  margin-top:22px;
  font-size:14px;
  text-underline-offset:5px;
}
.faq-list details {
  border-top:1px solid var(--line);
  padding-block:23px;
}
.faq-list details:last-child {
  border-bottom:1px solid var(--line);
}
summary {
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  font-size:17px;
  font-weight:700;
  cursor:pointer;
  line-height:1.4;
}
summary::-webkit-details-marker {
  display:none;
}
summary:after {
  content:'+';
  font-size:25px;
  font-weight:400;
  line-height:1;
}
details[open] summary:after {
  content:'−';
}
details p {
  font-size:14px;
  margin-top:16px;
  max-width:510px;
}
.closing {
  background:var(--lime);
  padding-block:62px;
}
.closing-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:42px;
}
.closing h2 {
  font-size:clamp(36px,4vw,54px);
  max-width:520px;
}
.closing p {
  color:#37542c;
  margin-top:14px;
  font-size:14px;
}
.closing .stores {
  margin-top:0;
  flex-wrap:nowrap;
}
.site-footer {
  padding-block:34px 38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.site-footer .brand {
  font-size:23px;
}
.site-footer .brand img {
  width:32px;
  height:32px;
  border-radius:8px;
}
.footer-credit {
  font-size:11px;
  margin-top:12px;
}
.footer-links {
  display:flex;
  gap:25px;
  font-size:12px;
}
.footer-links a {
  text-decoration:none;
}
.footer-links a:hover {
  text-decoration:underline;
}
.mobile-download {
  display:none;
}
@media(max-width:1100px) {
  .wide-showcase {
    padding-inline:40px;
    gap:40px;
  }
  .wrap {
    width:calc(100% - 64px);
  }
  .hero {
    gap:28px;
  }
  .hero-art {
    height:550px;
  }
  .hero-art .phone {
    width:218px;
    left:24px;
    top:44px;
  }
  .hero-art .phone.reader {
    width:192px;
    right:20px;
    top:135px;
  }
  .feed-demo {
    gap:48px;
  }
  .reading-inner {
    gap:50px;
  }
  .closing .stores {
    flex-wrap:wrap;
    max-width:185px;
  }
  .closing .store {
    width:100%;
  }
}
@media(max-width:800px) {
  .wide-showcase {
    padding:24px 18px;
    gap:20px;
  }
  .tablet-frame {
    border-width:6px;
    border-radius:15px;
  }
  .wide-showcase figcaption {
    margin-top:16px;
  }
  .wide-showcase figcaption strong {
    font-size:13px;
  }
  .wide-showcase figcaption span {
    font-size:11px;
    line-height:1.5;
  }
  .wide-benefits {
    grid-template-columns:1fr;
    gap:22px;
    margin-top:28px;
  }
  .wide-benefits article {
    border-top:1px solid var(--line);
    padding-top:18px;
  }
  .tools-section {
    padding-block:62px;
  }
  .tools-grid {
    grid-template-columns:1fr 1fr;
    gap:30px 24px;
  }
  .tools-grid h3 {
    font-size:18px;
  }
  .tools-grid p {
    font-size:13px;
  }
  .wrap {
    width:calc(100% - 40px);
  }
  .site-nav {
    min-height:82px;
  }
  .nav-links {
    gap:20px;
  }
  .nav-links .desktop-link {
    display:none;
  }
  .nav-download {
    font-size:12px;
    padding:9px 16px;
  }
  .brand {
    font-size:27px;
  }
  .brand img {
    width:38px;
    height:38px;
  }
  .hero {
    grid-template-columns:1fr;
    padding-block:40px 35px;
    gap:32px;
  }
  .hero-copy h1 {
    max-width:600px;
    font-size:clamp(56px,10vw,78px);
  }
  .hero-copy .lede {
    max-width:530px;
    font-size:17px;
    margin-top:20px;
  }
  .hero-copy .eyebrow {
    font-size:10px;
    margin-bottom:18px;
  }
  .hero .stores {
    margin-top:24px;
  }
  .hero-art {
    height:520px;
    width:100%;
    max-width:530px;
    justify-self:center;
    border-radius:140px 140px 24px 24px;
  }
  .hero-art .phone {
    width:224px;
    left:calc(50% - 200px);
  }
  .hero-art .phone.reader {
    width:205px;
    right:calc(50% - 208px);
    top:112px;
  }
  .hero-note {
    font-size:11px;
  }
  .promise-strip {
    flex-wrap:wrap;
    gap:16px 22px;
    justify-content:center;
    font-size:11px;
    padding-block:18px;
  }
  .promise-strip svg {
    width:17px;
    height:17px;
  }
  .section-head {
    display:block;
    margin-bottom:30px;
  }
  .section-head>p {
    margin-top:20px;
    max-width:470px;
  }
  .feed-section {
    padding-block:64px;
  }
  .feed-demo {
    grid-template-columns:1fr;
    gap:30px;
  }
  .feed-visual {
    height:460px;
    order:2;
  }
  .feed-visual .phone {
    width:260px;
  }
  .feed-text h3 {
    font-size:30px;
    max-width:530px;
  }
  #feed-description>p {
    max-width:530px;
    font-size:16px;
  }
  .feature-points {
    margin-top:22px;
    gap:9px;
  }
  .feed-footnote {
    padding-top:22px;
    margin-top:24px;
  }
  .switcher {
    margin-bottom:22px;
  }
  .reading-inner {
    grid-template-columns:1fr;
    padding-block:62px;
    gap:22px;
  }
  .reading-copy h2 {
    max-width:540px;
  }
  .reading-copy>p {
    max-width:540px;
    font-size:16px;
  }
  .reading-list {
    margin-top:30px;
    gap:24px;
  }
  .reading-art {
    min-height:570px;
  }
  .reading-art:before {
    inset:28px 0;
  }
  .reading-art .phone {
    width:242px;
  }
  .reading-caption {
    bottom:0;
  }
  .wide-section {
    padding-block:62px;
  }
  .wide-layout {
    grid-template-columns:1fr;
    gap:30px;
  }
  .wide-copy {
    order:-1;
  }
  .wide-copy h2 {
    max-width:550px;
  }
  .wide-copy .note {
    margin-top:20px;
  }
  .wide-art {
    padding:24px;
    max-width:580px;
    justify-self:center;
  }
  .ownership {
    padding-block:62px;
  }
  .ownership-head {
    grid-template-columns:1fr;
    gap:22px;
    margin-bottom:34px;
  }
  .ownership-head>p {
    max-width:540px;
    font-size:16px;
  }
  .ownership-details {
    grid-template-columns:1fr;
    gap:28px;
  }
  .ownership-details article {
    padding-top:18px;
  }
  .ownership-details .number {
    float:left;
    margin-right:20px;
    line-height:1.4;
  }
  .ownership-details h3 {
    margin-top:0;
  }
  .ownership-details p {
    max-width:570px;
  }
  .faq-section {
    grid-template-columns:1fr;
    gap:32px;
    padding-block:62px;
  }
  .faq-intro>p {
    max-width:540px;
  }
  .faq-intro>a {
    margin-top:18px;
  }
  .faq-list details {
    padding-block:21px;
  }
  .closing {
    padding-block:48px;
  }
  .closing-inner {
    display:block;
  }
  .closing .stores {
    max-width:none;
    margin-top:28px;
    flex-wrap:wrap;
  }
  .closing .store {
    width:auto;
  }
  .closing h2 {
    max-width:550px;
  }
  .site-footer {
    align-items:flex-start;
    padding-block:30px 105px;
    flex-wrap:wrap;
  }
  .footer-links {
    gap:22px;
    flex-wrap:wrap;
  }
  .mobile-download {
    display:flex;
    position:fixed;
    z-index:20;
    bottom:0;
    inset-inline:0;
    padding:10px 20px calc(10px + env(safe-area-inset-bottom));
    background:#f7f4edf2;
    backdrop-filter:blur(12px);
    border-top:1px solid var(--line);
    gap:10px;
  }
  .mobile-download a {
    display:block;
    flex:1;
    text-align:center;
    padding:11px 8px;
    background:var(--forest);
    color:#fff;
    border-radius:8px;
    font-size:12px;
    font-weight:700;
    text-decoration:none;
  }
}
@media(max-width:390px) {
  .wide-showcase {
    padding-inline:12px;
    gap:14px;
  }
  .tools-grid {
    grid-template-columns:1fr;
    gap:24px;
  }
  .tool-number {
    float:left;
    margin-right:18px;
    margin-bottom:0;
    line-height:1.4;
  }
  .wrap {
    width:calc(100% - 32px);
  }
  .hero-copy h1 {
    font-size:52px;
  }
  .store {
    padding-inline:15px;
    gap:10px;
  }
  .store strong {
    font-size:16px;
  }
  .hero-art {
    height:456px;
  }
  .hero-art .phone {
    width:192px;
    left:16px;
  }
  .hero-art .phone.reader {
    width:177px;
    right:10px;
    top:103px;
  }
  .promise-strip {
    justify-content:flex-start;
  }
  .reading-list {
    gap:25px 15px;
  }
}
@media(prefers-reduced-motion:no-preference) {
  .store,.nav-download {
    transition:background .18s ease,transform .18s ease;
  }
  .store:hover {
    transform:translateY(-2px);
  }
  .hero-art .phone {
    animation:arrive .7s ease-out both;
  }
  .hero-art .phone.reader {
    animation-delay:.1s;
  }
  @keyframes arrive {
    from {
      opacity:0;
      translate:0 18px;
    }
    to {
      opacity:1;
      translate:0 0;
    }
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
}
