:root {
  --font-base:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --layout-center-width: 51.875rem;
  --layout-divider: 0.0625rem;
  --layout-max-copy: 41.75rem;
  --layout-copy-wide: 41.25rem;

  --space-0: 0rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-9: 2.25rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-18: 4.5rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-30: 7.5rem;
  --space-32: 8rem;

  --radius-s: 0.75rem;
  --radius-m: 1.5rem;
  --radius-l: 2rem;
  --radius-pill: 999rem;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 2rem;
  --text-2xl: 3rem;
  --text-3xl: 4rem;

  --line-tight: 1.1;
  --line-base: 1.3;
  --line-soft: 1.5;

  --color-bg: #0f2e28;
  --color-surface: #15433a;
  --color-surface-strong: #1f6054;
  --color-divider: rgba(255, 255, 255, 0.14);
  --color-text: #fff6ee;
  --color-text-muted: rgba(255, 246, 238, 0.72);
  --color-brand: #c2ec8c;
  --color-button-bg: #fff6ee;
  --color-button-text: #0f2e28;
  --color-text-strong: rgba(255, 246, 238, 0.92);
  --color-text-soft: rgba(255, 246, 238, 0.8);
  --color-text-faint: rgba(255, 246, 238, 0.5);
  --color-newsletter-start: #0f4358;
  --color-newsletter-end: #42c1c8;
  --color-newsletter-glow: rgba(66, 193, 200, 0.94);
  --color-transparent: rgba(66, 193, 200, 0);
  --color-button-highlight: #e8fdce;
  --color-button-shadow: #588f12;

  --shadow-soft: 0 1rem 3rem rgba(0, 0, 0, 0.24);

  --hero-logo-size: 6.5rem;
  --app-store-height: 3.75rem;
  --phone-stage-width: 25.125rem;
  --phone-stage-height: 54.625rem;
  --phone-frame-width: 28.125rem;
  --phone-frame-height: 57.5rem;
  --phone-frame-offset-x: -1.5rem;
  --phone-frame-offset-y: -1.4375rem;

  --junction-size: 1.4375rem;
  --junction-glow-size: 16rem;
  --junction-glow-figma-size: 37.5rem;

  --blog-wide-width: 83.5rem;
  --blog-content-width: 41.75rem;
  --blog-page-pad: 2rem;
  --blog-rail-gap: 7rem;
  --blog-card-radius: 1rem;
  --blog-header-block: 11.5rem;
  --blog-row-pad: 7.5rem;
  --blog-row-pad-article: 5rem;
  --blog-card-gap: 2rem;
  --blog-copy-gap: 1.125rem;
  --blog-grid-gap: 3rem;
  --blog-meta-size: 0.875rem;
  --blog-copy-size: 1.125rem;
  --blog-card-title-size: 1.5rem;
  --blog-card-title-mobile-size: 2rem;
  --blog-copy-mobile-letter-spacing: -0.02rem;
  --article-title-size: 3.5rem;
  --article-title-letter-spacing: -0.15rem;
  --article-title-mobile-letter-spacing: -0.1rem;
  --article-section-title-size: 3rem;
  --article-section-title-mobile-size: 2.5rem;
  --article-intro-size: 2rem;
  --article-intro-mobile-size: 1.5rem;
  --article-body-mobile-size: 1.4rem;
  --article-body-mobile-letter-spacing: -0.01rem;
  --article-share-size: 2.5rem;
  --article-share-icon-size: 1.25rem;
  --article-author-size: 5.5rem;
  --article-note-width: 13.875rem;
  --article-sidenote-mobile-margin: var(--space-16);
  --article-sidenote-quote-mobile-size: 2rem;
  --article-sidenote-cite-mobile-size: 1.1rem;
  --nav-label-short-letter-spacing: -0.02rem;
  --newsletter-actions-mobile-size: 1.2rem;
  --newsletter-button-width: 9.375rem;
  --newsletter-button-height: 4rem;
  --motion-duration: 0.2s;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 1rem;
}

@media (max-width: 67rem) {
  html {
    font-size: clamp(0.75rem, 3.333vw, 1rem);
  }
}

body {
  margin: var(--space-0);
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Motion & reveal */
.lf-js [data-reveal],
.lf-js [data-reveal-scope="children"] > * {
  opacity: 0;
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .lf-js [data-reveal],
  .lf-js [data-reveal-scope="children"] > * {
    opacity: 1;
    visibility: visible;
  }

  a,
  button,
  [role="button"],
  .share-status {
    transition: none;
  }
}

.landing-page,
.blog-page,
.article-page {
  position: relative;
  overflow-x: clip;
  isolation: isolate;
}

a {
  color: inherit;
}

a,
button,
[role="button"] {
  transition:
    transform var(--motion-duration) ease,
    filter var(--motion-duration) ease,
    color var(--motion-duration) ease,
    background-color var(--motion-duration) ease,
    border-color var(--motion-duration) ease,
    opacity var(--motion-duration) ease;
}

a:hover,
button:not(:disabled):hover,
[role="button"]:not([aria-disabled="true"]):hover {
  filter: opacity(70%);
}

a:active,
button:not(:disabled):active,
[role="button"]:not([aria-disabled="true"]):active {
  transform: scale(0.95);
  filter: opacity(90%);
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-4);
  inset-block-start: var(--space-4);
  background: var(--color-button-bg);
  color: var(--color-button-text);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-s);
  transform: translateY(-200%);
  z-index: 60;
}

.skip-link:focus-visible {
  transform: translateY(0);
}

.theme-leaflo {
  background: var(--color-bg);
}

.grid-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--layout-center-width) minmax(
      0,
      1fr
    );
  overflow-x: clip;
  overflow-y: visible;
}

.row-hero {
  border-top: none;
  min-height: calc(100svh - var(--blog-header-block));
}

.cell {
  position: relative;
  z-index: 4;
  min-height: 100%;
}

.cell-left {
  border-right: var(--layout-divider) solid var(--color-divider);
}

.cell-right {
  border-left: var(--layout-divider) solid var(--color-divider);
}

.center-shell {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: var(--space-0);
}

.hero-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding: 0 var(--space-20) var(--space-32) var(--space-20);
  text-align: center;
}

.hero-backdrop {
  position: absolute;
  inset: var(--space-0);
  z-index: 0;
}

.hero-backdrop img,
.hero-backdrop iframe {
  position: absolute;
  inset: var(--space-0);
  inline-size: 100%;
  block-size: 100%;
  border: none;
  object-fit: cover;
}

.hero-backdrop iframe {
  opacity: 0.82;
}

.page-backdrop,
.page-backdrop-tint {
  position: absolute;
  inset-block-start: var(--space-0);
  inset-inline: var(--space-0);
  block-size: 100svh;
  pointer-events: none;
}

.page-backdrop {
  z-index: 0;
}

.page-backdrop img,
.page-backdrop iframe {
  position: absolute;
  inset: var(--space-0);
  inline-size: 100%;
  block-size: 100%;
  border: none;
  object-fit: cover;
}

.page-backdrop iframe {
  opacity: 0.82;
}

.page-backdrop-tint {
  z-index: 1;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(194, 236, 140, 0.18),
      rgba(15, 46, 40, 0) 42%
    ),
    linear-gradient(180deg, rgba(15, 46, 40, 0.62), rgba(15, 46, 40, 0.9));
}

.landing-page .page-backdrop-tint {
  background: linear-gradient(
    180deg,
    rgba(15, 46, 40, 0.25),
    rgba(15, 46, 40, 0.82)
  );
}

.hero-title,
.section-title,
.footer-title {
  margin: var(--space-0);
  font-size: var(--text-2xl);
  line-height: 1;
  letter-spacing: -0.06rem;
  max-inline-size: var(--layout-max-copy);
}

.hero-title {
  display: inline;
  gap: var(--space-1);
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  letter-spacing: -0.08rem;
  padding: var(--space-4) var(--space-0) var(--space-9) var(--space-0);
}

.hero-title-accent {
  color: var(--color-brand);
}

.hero-meta {
  margin: var(--space-0);
  color: rgba(255, 246, 238, 0.5);
  font-size: var(--text-md);
  letter-spacing: -0.015rem;
  line-height: var(--line-base);
}

.app-store-link {
  display: inline-flex;
  border-radius: var(--radius-pill);
}

.app-store-link img {
  inline-size: auto;
  block-size: var(--app-store-height);
  display: block;
}

.download-cta {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
}

.phone-stage {
  position: relative;
  inline-size: var(--phone-stage-width);
  block-size: var(--phone-stage-height);
  max-inline-size: 100%;
  margin-top: var(--space-20);
}

.phone-video {
  position: absolute;
  inset: var(--space-0);
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: 2.125rem;
  background: var(--color-bg);
}

.phone-frame {
  position: absolute;
  inset-inline-start: var(--phone-frame-offset-x);
  inset-block-start: var(--phone-frame-offset-y);
  inline-size: var(--phone-frame-width);
  block-size: var(--phone-frame-height);
  object-fit: contain;
  pointer-events: none;
}

.hero-description {
  margin: var(--space-16) auto var(--space-0);
  max-inline-size: var(--layout-copy-wide);
  font-size: var(--text-xl);
  line-height: var(--line-base);
  letter-spacing: -0.03rem;
  color: var(--color-text);
}

.hero-description-accent {
  color: var(--color-brand);
}

.side-links {
  position: relative;
  z-index: 80;
  padding-inline: var(--space-0);
  pointer-events: none;
}

.side-links nav {
  position: fixed;
  inset-inline-start: calc(50% + (var(--layout-center-width) / 2) + 1.125rem);
  inset-block-end: var(--space-0);
  inline-size: 6.5rem;
  z-index: 90;
  pointer-events: auto;
  padding-bottom: var(--space-6);
}

.side-links ul {
  margin: var(--space-0);
  padding: var(--space-0);
  list-style: none;
  display: grid;
  gap: var(--space-2);
}

.side-links a {
  font-size: var(--text-md);
  color: var(--color-text);
  letter-spacing: -0.015rem;
  line-height: var(--line-base);
  text-decoration: none;
}

.side-links li:last-child a {
  color: rgba(255, 246, 238, 0.5);
}

.side-links a:hover,
.side-links a:focus-visible {
  color: var(--color-brand);
}

.footer-links {
  display: block;
  margin-top: 5rem;
}

.footer-links ul {
  margin: var(--space-0);
  padding: var(--space-0);
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.footer-links a {
  font-size: var(--text-sm);
  color: var(--color-text);
  letter-spacing: -0.015rem;
  line-height: var(--line-base);
  text-decoration: none;
}

.footer-links li:last-child a {
  color: rgba(255, 246, 238, 0.5);
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--color-brand);
}

.section-shell {
  display: grid;
  gap: var(--space-12);
  text-align: center;
  padding: var(--space-20);
}

.section-title {
  color: var(--color-brand);
  padding: 1rem 0 1.5rem 0;
}

.section-title-accent {
  color: var(--color-text);
}

.section-subtitle {
  margin: var(--space-0);
  font-size: 2.5rem;
  line-height: 1.1;
  letter-spacing: -0.05rem;
  max-inline-size: 28rem;
}

.section-subtitle-brand {
  color: var(--color-brand);
}

.section-subtitle-accent {
  color: var(--color-text);
}

.section-copy,
.footer-copy {
  margin: var(--space-0);
  color: rgba(255, 246, 238, 0.8);
  font-size: 1.5rem;
  line-height: 1.4;
  letter-spacing: -0.015rem;
}

.media-card {
  margin: var(--space-0);
  border: none;
  border-radius: 0;
  background: none;
  overflow: visible;
}

.media-card img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.media-feature {
  max-inline-size: var(--layout-max-copy);
  inline-size: 100%;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

.feature-shell {
  text-align: left;
  gap: var(--space-6);
}

.feature-shell .section-title {
  text-align: center;
  margin-inline: auto;
  margin: var(--space-12) var(--space-0) 6.5rem var(--space-0);
}

.feature-shell .section-subtitle,
.feature-shell .section-copy {
  text-align: left;
}

.row-features-list .section-shell {
  gap: var(--space-0);
  padding-top: 7.5rem;
  padding-bottom: 7.5rem;
}

.row-features-list .section-title-tight {
  margin-bottom: 7.5rem;
}

.section-title-tight {
  font-size: var(--text-2xl);
  color: var(--color-text);
}

.section-title-tight .section-title-accent {
  color: var(--color-brand);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-20) var(--space-10);
}

.feature-item {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
}

.feature-item img {
  inline-size: 2.5rem;
  block-size: 2.5rem;
}

.feature-item h3 {
  margin: var(--space-0);
  font-size: var(--text-lg);
  line-height: var(--line-tight);
  letter-spacing: -0.025rem;
  font-weight: 700;
}

.why-shell {
  gap: var(--space-30);
  padding-top: var(--space-30);
  padding-bottom: var(--space-30);
}

.why-shell .section-title-tight {
  margin: var(--space-0);
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16) var(--space-8);
}

.why-card {
  display: grid;
  gap: var(--space-6);
  align-content: start;
}

.why-card-image {
  margin: var(--space-0);
  overflow: hidden;
  border-radius: var(--radius-m);
  aspect-ratio: 318 / 386.387;
  background: var(--color-surface);
}

.why-card-image img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.why-card-copy {
  margin: var(--space-0);
  color: rgba(255, 246, 238, 0.5);
  font-size: var(--text-lg);
  line-height: var(--line-base);
  letter-spacing: -0.025rem;
  font-weight: 500;
  text-align: left;
}

.why-card-copy strong {
  color: var(--color-text);
  font-weight: 700;
}

.row-audience {
  min-block-size: 61.75rem;
  overflow: hidden;
}

.audience-bg {
  position: absolute;
  inset: var(--space-0);
  z-index: 0;
}

.audience-bg::after {
  content: "";
  position: absolute;
  inset: var(--space-0);
  background: linear-gradient(
    180deg,
    rgba(15, 46, 40, 0) 42%,
    rgba(15, 46, 40, 0.54) 78%,
    rgba(15, 46, 40, 0.88) 100%
  );
}

.audience-bg img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.audience-shell {
  min-block-size: 61.75rem;
  display: flex;
  align-items: flex-end;
  padding: 49rem var(--space-20) 7.5rem;
}

.audience-copy {
  max-inline-size: var(--layout-copy-wide);
  text-align: left;
}

.audience-copy h2,
.audience-copy p {
  margin: var(--space-0);
}

.audience-copy h2 {
  margin-bottom: var(--space-6);
  color: var(--color-text);
  font-size: 2.5rem;
  line-height: var(--line-tight);
  letter-spacing: -0.05rem;
}

.audience-copy h2 span,
.audience-copy p span {
  color: var(--color-brand);
}

.audience-copy p {
  color: rgba(255, 246, 238, 0.8);
  font-size: 1.5rem;
  line-height: 1.4;
  letter-spacing: -0.015rem;
  font-weight: 500;
}

.audience-copy p + p {
  margin-top: var(--space-3);
}

.row-footer .footer-shell {
  display: grid;
  justify-items: center;
  gap: var(--space-0);
  text-align: center;
  padding-top: 7.5rem;
  padding-bottom: 6rem;
}

.footer-title {
  margin-bottom: var(--space-8);
  color: var(--color-text);
}

.footer-title-accent {
  color: var(--color-brand);
}

.footer-copy {
  margin-bottom: var(--space-14);
  max-inline-size: var(--layout-copy-wide);
  color: var(--color-text);
  font-size: var(--text-xl);
  line-height: var(--line-base);
}

.footer-copy-accent {
  color: var(--color-brand);
}

.junctions {
  position: absolute;
  inset: var(--space-0);
  pointer-events: none;
}

.junction {
  position: absolute;
  z-index: 6;
  inline-size: var(--junction-size);
  block-size: var(--junction-size);
  border-radius: var(--radius-pill);
}

.junction::before {
  content: "";
  position: absolute;
  inline-size: calc(var(--junction-size) + var(--space-2));
  block-size: calc(var(--junction-size) + var(--space-2));
  inset-inline-start: 50%;
  inset-block-start: 50%;
  transform: translate(-50%, -50%);
  /* background: var(--color-bg); */
  /* border-radius: var(--radius-pill); */
}

.junction::after {
  content: "";
  position: absolute;
  inset: var(--space-0);
  background-image: url("/assets/icons/star-angle-decorator.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.junction-glow {
  position: absolute;
  z-index: 2;
  inline-size: var(--junction-glow-size);
  block-size: var(--junction-glow-size);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.82;
}

.junction-glow.left.top {
  background-image: url("/assets/icons/gradient-angle-1.svg");
}

.junction-glow.right.top {
  background-image: url("/assets/icons/gradient-angle-4.svg");
}

.junction-glow.left.bottom {
  background-image: url("/assets/icons/gradient-angle-2.svg");
}

.junction-glow.right.bottom {
  background-image: url("/assets/icons/gradient-angle-3.svg");
}

.junction.left,
.junction-glow.left {
  inset-inline-start: calc(50% - (var(--layout-center-width) / 2));
}

.junction.right,
.junction-glow.right {
  inset-inline-start: calc(50% + (var(--layout-center-width) / 2));
}

.junction.top {
  inset-block-start: var(--space-0);
  transform: translate(-50%, -50%);
}

.junction.bottom {
  inset-block-start: 100%;
  transform: translate(-50%, -50%);
}

.junction-glow.top {
  inset-block-start: var(--space-0);
  transform: translate(-100%, 0%);
}

.junction-glow.bottom {
  inset-block-start: 100%;
  transform: translate(-100%, -100%);
}

.junction-glow.right.top,
.junction-glow.right.bottom {
  transform: translate(0%, 0%);
}

.junction-glow.right.bottom {
  transform: translate(0%, -100%);
}

.cell-glow {
  position: absolute;
  z-index: 0;
  inline-size: var(--junction-glow-figma-size);
  block-size: var(--junction-glow-figma-size);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.82;
  pointer-events: none;
}

.cell-glow.ga-1 {
  background-image: url("/assets/icons/gradient-angle-1.svg");
}

.cell-glow.ga-2 {
  background-image: url("/assets/icons/gradient-angle-2.svg");
}

.cell-glow.ga-3 {
  background-image: url("/assets/icons/gradient-angle-3.svg");
}

.cell-glow.ga-4 {
  background-image: url("/assets/icons/gradient-angle-4.svg");
}

.cell-glow.top-left {
  inset-inline-start: 0;
  inset-block-start: 0;
}

.cell-glow.top-right {
  inset-inline-end: 0;
  inset-block-start: 0;
}

.cell-glow.bottom-left {
  inset-inline-start: 0;
  inset-block-end: 0;
}

.cell-glow.bottom-right {
  inset-inline-end: 0;
  inset-block-end: 0;
}

.eyebrow {
  margin: var(--space-0);
  font-size: var(--text-xs);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--color-brand);
}

.legal-article {
  inline-size: var(--blog-content-width);
  max-inline-size: 100%;
  margin-inline: auto;
}

.legal-page .junction-glow,
.legal-page .cell-glow {
  display: none;
}

.row-legal-title {
  min-block-size: auto;
}

.row-legal-intro {
  min-block-size: auto;
}

.row-legal-body {
  background: linear-gradient(
    180deg,
    rgba(15, 46, 40, 0.14),
    rgba(15, 46, 40, 0.82)
  );
}

.legal-page .article-title {
  padding-block-end: var(--space-12);
}

.legal-page .article-title .eyebrow {
  margin-block-end: var(--space-3);
}

.legal-page .article-title .post-date {
  margin-block-end: var(--space-5);
}

.legal-page .article-title h1 {
  margin-block-start: 0;
}

.legal-page .article-intro {
  padding-block: 0 var(--space-16);
}

.legal-page .article-intro > p {
  color: var(--color-text-soft);
  font-size: var(--text-xl);
  font-weight: 500;
}

.legal-page .article-content {
  padding-block: var(--space-16) var(--blog-row-pad);
}

.legal-page .article-content h2 {
  margin: var(--space-16) 0 var(--space-6);
  font-size: 1.875rem;
  letter-spacing: -0.04rem;
}

.legal-page .article-content h3 {
  margin: var(--space-10) 0 var(--space-4);
  font-size: 1.25rem;
  line-height: 1.2;
}

.legal-page .article-content p,
.legal-page .article-content li {
  color: rgba(255, 246, 238, 0.92);
}

.prose > :first-child {
  margin-top: var(--space-0);
}

.prose > :last-child {
  margin-bottom: var(--space-0);
}

.prose h1,
.prose h2,
.prose h3 {
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  line-height: var(--line-tight);
}

.prose h1 {
  font-size: 2.25rem;
}

.prose h2 {
  font-size: 1.625rem;
}

.prose h3 {
  font-size: 1.25rem;
}

.prose p,
.prose li {
  font-size: var(--text-lg);
  line-height: 1.5;
  color: rgba(255, 246, 238, 0.92);
  font-weight: 400;
}

.prose ul,
.prose ol {
  margin: var(--space-4) 0 var(--space-6) 1.4em;
  padding: var(--space-0);
}

.prose strong {
  color: var(--color-text);
}

.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  color: var(--color-brand);
}

.site-header {
  min-block-size: var(--blog-header-block);
  border-top: none;
}

.site-header .cell-left,
.site-header .cell-center,
.site-header .cell-right {
  display: flex;
  align-items: flex-start;
  padding: var(--space-8);
}

.site-header .cell-left {
  justify-content: flex-start;
}

.site-header .cell-center {
  justify-content: center;
}

.site-header .cell-right {
  justify-content: flex-start;
}

.site-logo-link {
  display: inline-flex;
  inline-size: 5.5rem;
  block-size: 5.5rem;
}

.site-logo-link img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.site-menu {
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-md);
  line-height: var(--line-base);
  font-weight: 500;
}

.site-menu a {
  text-decoration: none;
  color: var(--color-text);
}

.nav-label-short {
  display: none;
}

.site-menu a:hover,
.site-menu a:focus-visible,
.site-menu a[aria-current="page"] {
  color: var(--color-brand);
}

.landing-page > :not(.page-backdrop):not(.page-backdrop-tint),
.blog-page > :not(.page-backdrop):not(.page-backdrop-tint),
.article-page > :not(.page-backdrop):not(.page-backdrop-tint) {
  position: relative;
  z-index: 2;
}

.landing-page h1,
.landing-page h2,
.blog-page h1,
.blog-page h2,
.article-page h1,
.article-page h2 {
  font-weight: 900;
}

.row-article-intro .cell-center {
  z-index: 5;
}

.row-article-intro .cell-right {
  pointer-events: none;
}

.divider {
  min-block-size: var(--layout-divider);
  border-top: var(--layout-divider) solid var(--color-divider);
  z-index: 3 !important;
}

.row-blog-featured {
  border-top: none;
}

.blog-index-title {
  inline-size: var(--blog-content-width);
  max-inline-size: 100%;
  margin-inline: auto;
  padding-block: var(--space-0) var(--space-12);
  text-align: center;
  display: flex;
}

.row-blog-featured .cell-center,
.row-article-cover .cell-center,
.row-article-body .cell-center {
  z-index: 5;
}

.featured-post,
.article-cover,
.article-image {
  position: relative;
  inline-size: 100vw;
  margin-inline-start: 50%;
  transform: translateX(-50%);
}

.featured-post-image,
.article-cover {
  display: block;
  padding: var(--blog-page-pad);
}

.featured-post-image img,
.article-cover img,
.article-image img,
.post-card-image img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  object-fit: cover;
  border-radius: var(--blog-card-radius);
}

.featured-post-image {
  block-size: auto;
}

.featured-post-image img,
.article-cover img {
  block-size: auto;
}

.featured-post-body,
.article-title {
  inline-size: var(--blog-content-width);
  max-inline-size: 100%;
  margin-inline: auto;
  padding: var(--space-0) var(--space-0) var(--space-20);
}

.post-date {
  margin: var(--space-0);
  color: var(--color-text-soft);
  font-size: var(--blog-meta-size);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.featured-post h2,
.article-title h1 {
  margin: var(--space-8) var(--space-0);
  color: var(--color-text);
  font-size: var(--article-title-size);
  line-height: 1;
  letter-spacing: var(--article-title-letter-spacing);
  font-weight: 900;
}

.featured-post h2 a,
.post-card-link {
  color: inherit;
  text-decoration: none;
}

.featured-post-image:hover,
.featured-post-image:focus-visible,
.featured-post h2 a:hover,
.featured-post h2 a:focus-visible,
.post-card-link:hover,
.post-card-link:focus-visible {
  filter: opacity(100%);
}

.featured-post h2 a:hover,
.featured-post h2 a:focus-visible,
.featured-post:hover h2 a,
.featured-post:focus-within h2 a,
.post-card-link:hover h2,
.post-card-link:focus-visible h2,
.post-card-link:hover h3,
.post-card-link:focus-visible h3 {
  color: var(--color-brand);
}

.post-author {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.post-author img {
  display: block;
  block-size: var(--space-12);
  inline-size: auto;
}

.post-author p {
  margin: var(--space-0);
  color: var(--color-text-soft);
  font-size: var(--blog-copy-size);
  line-height: 1.4;
  font-weight: 500;
}

.post-author strong {
  color: var(--color-text);
}

.post-author span {
  margin-inline-start: var(--space-1);
  color: var(--color-text-faint);
}

.post-stack,
.blog-section,
.latest-posts-shell {
  inline-size: var(--blog-content-width);
  max-inline-size: 100%;
  margin-inline: auto;
}

.post-stack {
  display: grid;
  gap: var(--space-20);
  padding-block: var(--blog-row-pad);
}

.post-card {
  display: grid;
  align-content: start;
}

.post-card-link {
  display: grid;
  gap: var(--blog-card-gap);
  align-content: start;
}

.post-card-image {
  display: block;
  overflow: hidden;
  border-radius: var(--blog-card-radius);
  background: var(--color-surface);
}

.post-card-wide .post-card-image {
  aspect-ratio: 16 / 9;
}

.post-card-half .post-card-image {
  aspect-ratio: auto;
}

.post-card-copy {
  display: grid;
  gap: var(--blog-copy-gap);
}

.post-card h2,
.post-card h3,
.post-card p {
  margin: var(--space-0);
}

.post-card h2 {
  color: var(--color-text);
  font-size: var(--text-2xl);
  line-height: 1.2;
  letter-spacing: 0;
  font-weight: 900;
}

.post-card h3 {
  color: var(--color-text);
  font-size: var(--blog-card-title-size);
  line-height: 1.2;
  letter-spacing: 0;
  font-weight: 900;
}

.post-card-copy > p:last-child {
  color: var(--color-text-soft);
  font-size: var(--blog-copy-size);
}

.post-card-wide .post-card-copy > p:last-child {
  line-height: 1.6;
}

.post-card-half .post-card-copy > p:last-child {
  line-height: 1.4;
}

.quote-card {
  display: grid;
  justify-items: center;
  gap: var(--space-6);
  padding-block: var(--blog-row-pad);
  text-align: center;
}

.quote-star,
.article-dots span {
  display: block;
  inline-size: var(--junction-size);
  block-size: var(--junction-size);
  background-image: url("/assets/icons/star-angle-decorator.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.quote-card blockquote {
  margin: var(--space-0);
  color: var(--color-text);
  font-size: var(--text-2xl);
  line-height: 1.2;
  letter-spacing: 0;
  font-weight: 900;
}

.quote-card a {
  color: var(--color-brand);
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 500;
  text-decoration: none;
}

.blog-section {
  padding-block: var(--blog-row-pad);
}

.blog-section h2,
.related-posts h2 {
  margin: var(--space-0) var(--space-0) var(--space-10);
  color: var(--color-text);
  font-size: var(--article-section-title-size);
  line-height: 1;
  letter-spacing: 0;
  font-weight: 900;
}

.post-grid {
  display: grid;
  gap: var(--space-12) var(--blog-grid-gap);
}

.post-grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.row-load-more {
  border-top: none;
}

.load-more-shell {
  inline-size: var(--blog-content-width);
  max-inline-size: 100%;
  margin-inline: auto;
  padding-block: var(--space-0) var(--blog-row-pad);
  display: grid;
  justify-items: center;
  gap: var(--space-10);
}

.load-more-target {
  display: grid;
  gap: var(--space-20);
  inline-size: 100%;
}

.load-more-button,
.load-more-fallback,
.newsletter-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--space-16);
  border: none;
  border-radius: var(--radius-pill);
  padding: var(--space-4) var(--space-6);
  background: var(--color-brand);
  color: var(--color-button-text);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.load-more-button:disabled {
  cursor: wait;
  opacity: 0.7;
}

.latest-posts-shell {
  display: grid;
  gap: var(--space-20);
  padding-block: var(--blog-row-pad);
}

.latest-posts-shell h2 {
  text-align: center;
  margin-inline: auto;
}

.latest-posts-shell h2 span {
  display: inline;
}

.article-title {
  padding-block: var(--space-0) var(--space-20);
  text-align: center;
}

.article-title .post-author {
  justify-content: center;
}

.article-cover {
  padding: var(--blog-page-pad);
  margin-block: var(--space-0);
  block-size: auto;
}

.article-intro {
  position: relative;
  inline-size: var(--blog-content-width);
  max-inline-size: 100%;
  margin-inline: auto;
  padding-block: var(--blog-row-pad);
}

.article-intro > p {
  margin: var(--space-0);
  color: var(--color-text);
  font-size: var(--article-intro-size);
  line-height: var(--line-base);
  letter-spacing: 0;
  font-weight: 600;
}

.article-intro a,
.article-content a {
  color: var(--color-text-soft);
  text-decoration-line: underline;
  text-decoration-thickness: var(--layout-divider);
  text-decoration-color: var(--color-text-faint);
  text-underline-offset: var(--space-1);
}

.share-rail {
  position: absolute;
  inset-inline-start: calc(100% + var(--blog-rail-gap));
  inset-block-start: var(--blog-row-pad);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.share-rail a,
.share-rail button {
  appearance: none;
  display: inline-flex;
  flex: 0 0 var(--article-share-size);
  align-items: center;
  justify-content: center;
  inline-size: var(--article-share-size);
  block-size: var(--article-share-size);
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  padding: var(--space-0);
  -webkit-tap-highlight-color: transparent;
}

.share-rail img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.share-status {
  position: absolute;
  inset-inline-start: var(--space-0);
  inset-block-start: calc(100% + var(--space-2));
  color: var(--color-brand);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-duration) ease;
  white-space: nowrap;
}

.share-status.is-visible {
  opacity: 1;
}

.article-content {
  position: relative;
  inline-size: var(--blog-content-width);
  max-inline-size: 100%;
  margin-inline: auto;
  padding-block: var(--space-0) var(--blog-row-pad);
}

.article-content.prose p,
.article-content.prose li {
  color: var(--color-text);
  font-size: var(--blog-copy-size);
  line-height: 1.6;
  font-weight: 400;
}

.article-content > p {
  margin-block: var(--space-3);
}

.article-content h2 {
  margin: var(--space-20) var(--space-0) var(--space-10);
  color: var(--color-text);
  font-size: var(--article-section-title-size);
  line-height: 1;
  letter-spacing: 0;
  font-weight: 900;
}

.article-sidenote {
  position: absolute;
  inset-inline-start: calc(100% + var(--blog-rail-gap));
  inline-size: var(--article-note-width);
  margin-block-start: var(--space-1);
  padding-block-start: var(--space-6);
  border-top: var(--layout-divider) solid var(--color-text-faint);
  color: var(--color-text);
  font-size: var(--blog-copy-size);
  line-height: 1.6;
}

.article-sidenote--left {
  inset-inline-start: auto;
  inset-inline-end: calc(100% + var(--blog-rail-gap));
}

.article-sidenote q,
.article-sidenote .article-sidenote-text {
  display: block;
  margin: 0;
}

.article-sidenote cite {
  display: block;
  margin-block-start: var(--space-3);
  color: var(--color-text-faint);
  font-size: var(--blog-meta-size);
  font-style: normal;
  line-height: 1.4;
}

.article-image {
  margin-block: var(--blog-row-pad-article);
  padding-inline: var(--blog-page-pad);
}

.article-image img {
  block-size: auto;
  aspect-ratio: auto;
}

.article-image figcaption {
  inline-size: var(--blog-content-width);
  max-inline-size: 100%;
  margin: var(--space-2) auto var(--space-0);
  padding-block: var(--space-3);
  color: var(--color-text);
  font-size: var(--blog-copy-size);
  line-height: 1.6;
}

.article-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  padding-block: var(--blog-row-pad);
}

.article-author {
  inline-size: var(--blog-content-width);
  max-inline-size: 100%;
  margin-inline: auto;
  padding-block: var(--space-3) var(--blog-row-pad);
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
}

.article-author img {
  block-size: var(--article-author-size);
  inline-size: auto;
}

.article-author p {
  margin: var(--space-0) var(--space-0) var(--space-4);
  color: var(--color-text-soft);
  font-size: var(--blog-copy-size);
  line-height: 1.6;
}

.article-author a {
  color: var(--color-text-soft);
  font-size: var(--blog-copy-size);
  text-decoration-color: var(--color-text-faint);
  text-underline-offset: var(--space-1);
}

.newsletter-card {
  inline-size: var(--blog-content-width);
  max-inline-size: 100%;
  margin-inline: auto;
  padding-block: var(--blog-row-pad);
}

.newsletter-card form {
  display: grid;
  gap: var(--space-8);
  padding: var(--space-12);
  border-radius: var(--blog-card-radius);
  background:
    radial-gradient(
      circle at 100% 0%,
      var(--color-newsletter-glow),
      var(--color-transparent) 42%
    ),
    linear-gradient(
      135deg,
      var(--color-newsletter-start),
      var(--color-newsletter-end)
    );
  overflow: hidden;
}

.newsletter-card .formkit-fields {
  display: grid;
  gap: var(--space-8);
}

.newsletter-card h2 {
  margin: var(--space-0);
  color: var(--color-text);
  font-size: var(--text-2xl);
  line-height: 1;
  letter-spacing: 0;
  font-weight: 900;
}

.newsletter-card label {
  display: grid;
  gap: var(--space-3);
}

.newsletter-card label span {
  color: var(--color-text-soft);
  font-size: var(--text-sm);
}

.newsletter-card input {
  inline-size: 100%;
  border: none;
  border-bottom: var(--layout-divider) solid var(--color-text-faint);
  padding: var(--space-4) var(--space-0);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-2xl);
  line-height: 1;
}

.newsletter-card input::placeholder {
  color: var(--color-text-faint);
}

.newsletter-card .formkit-alert {
  margin: var(--space-0);
  padding: var(--space-4);
  border-radius: var(--radius-s);
  color: var(--color-text);
  font-size: var(--text-md);
  line-height: 1.4;
  list-style-position: inside;
}

.newsletter-card .formkit-alert:empty {
  display: none;
}

.newsletter-card .formkit-alert-success {
  background: rgba(255, 255, 255, 0.18);
}

.newsletter-card .formkit-alert-error {
  background: rgba(255, 255, 255, 0.2);
  color: var(--color-text);
}

.newsletter-actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.newsletter-actions p {
  margin: var(--space-0);
  color: var(--color-text-faint);
  font-size: var(--text-md);
  line-height: 1.5;
}

.newsletter-actions a {
  color: var(--color-text-soft);
  text-decoration: none;
}

.newsletter-actions button {
  inline-size: var(--newsletter-button-width);
  min-inline-size: var(--newsletter-button-width);
  min-block-size: var(--newsletter-button-height);
  padding-inline: var(--space-5);
  box-shadow:
    inset 0 0.125rem 0.125rem var(--color-button-highlight),
    inset 0 -0.125rem 0.125rem var(--color-button-shadow);
}

.newsletter-actions .formkit-submit[data-active] {
  cursor: wait;
  opacity: 0.82;
}

.newsletter-actions .formkit-spinner {
  display: none;
  align-items: center;
  gap: var(--space-1);
  margin-inline-end: var(--space-2);
}

.newsletter-actions .formkit-submit[data-active] .formkit-spinner {
  display: inline-flex;
}

.newsletter-actions .formkit-spinner div {
  inline-size: 0.375rem;
  block-size: 0.375rem;
  border-radius: var(--radius-pill);
  background: currentColor;
  animation: formkit-spinner-pulse 0.8s ease-in-out infinite;
}

.newsletter-actions .formkit-spinner div:nth-child(2) {
  animation-delay: 0.12s;
}

.newsletter-actions .formkit-spinner div:nth-child(3) {
  animation-delay: 0.24s;
}

@keyframes formkit-spinner-pulse {
  0%,
  80%,
  100% {
    opacity: 0.35;
    transform: scale(0.75);
  }

  40% {
    opacity: 1;
    transform: scale(1);
  }
}

.related-posts {
  inline-size: var(--blog-content-width);
  max-inline-size: 100%;
  margin-inline: auto;
  padding-block: var(--blog-row-pad);
}

@media (max-width: 67rem) {
  .side-links {
    display: none;
  }

  .footer-links {
    margin-top: 5rem;
  }

  .center-shell {
    padding-inline: var(--space-8);
  }

  .hero-title {
    font-size: clamp(2.25rem, 6.3vw, 3.5rem);
  }

  .hero-description,
  .footer-copy {
    font-size: var(--text-lg);
  }

  .section-subtitle {
    font-size: 2.25rem;
  }

  .section-copy {
    font-size: var(--text-lg);
  }

  .features-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-12) var(--space-8);
  }

  .why-shell {
    gap: var(--space-16);
  }

  .audience-shell {
    padding-inline: var(--space-8);
  }
}

@media (max-width: 67rem) {
  :root {
    --text-xs: 1rem;
    --text-sm: 1.2rem;
    --text-md: 1.5rem;
  }

  .grid-row {
    grid-template-columns: 1fr;
  }

  .cell-left,
  .cell-right,
  .side-links,
  .junctions {
    display: none;
  }

  .cell-glow {
    display: none;
  }

  .center-shell {
    padding-inline: var(--space-6);
    padding-block: var(--space-10);
  }

  .hero-shell {
    padding-top: var(--space-8);
    padding-bottom: var(--space-20);
    gap: var(--space-5);
  }

  .hero-title {
    font-size: clamp(2rem, 11vw, 2.75rem);
    letter-spacing: -0.04rem;
    gap: var(--space-0);
    padding-block-end: var(--space-8);
  }

  .hero-meta {
    font-size: var(--text-sm);
  }

  .hero-description,
  .section-copy,
  .footer-copy,
  .feature-item h3,
  .prose p,
  .prose li {
    font-size: var(--text-md);
  }

  .hero-description {
    max-inline-size: 24rem;
    letter-spacing: -0.015rem;
  }

  .app-store-link img {
    block-size: 4.5rem;
  }

  .phone-stage {
    inline-size: min(21rem, 100%);
    block-size: auto;
    aspect-ratio: 402 / 874;
  }

  .phone-frame {
    inline-size: 111.9402985075%;
    block-size: 105.2631578947%;
    inset-inline-start: -5.9701492537%;
    inset-block-start: -2.6315789474%;
  }

  .section-shell {
    gap: var(--space-8);
    padding-top: var(--space-16);
    padding-bottom: var(--space-20);
  }

  .section-subtitle {
    font-size: 2.25rem;
  }

  .feature-shell {
    gap: var(--space-8);
  }

  .feature-shell .section-title {
    text-align: center;
    margin-inline: auto;
    margin: var(--space-12) var(--space-0) var(--space-10) var(--space-0);
  }

  .features-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .why-shell {
    gap: var(--space-10);
  }

  .why-grid {
    gap: var(--space-8) var(--space-4);
  }

  .why-card {
    gap: var(--space-4);
  }

  .why-card-copy {
    font-size: var(--text-sm);
    letter-spacing: -0.015rem;
  }

  .row-audience,
  .audience-shell {
    min-block-size: 56rem;
  }

  .audience-shell {
    padding: 34rem var(--space-6) var(--space-12);
  }

  .audience-copy h2 {
    font-size: 2.25rem;
    letter-spacing: -0.04rem;
  }

  .audience-copy p {
    font-size: var(--text-md);
  }

  .row-features-list .section-shell {
    gap: var(--space-10);
  }

  .row-features-list .section-title-tight {
    margin-bottom: var(--space-10);
  }

  .footer-copy {
    max-inline-size: 24rem;
    font-size: 1.375rem;
  }

  .prose h1 {
    font-size: 1.7rem;
  }

  .prose h2 {
    font-size: 1.35rem;
  }

  .prose h3 {
    font-size: 1.15rem;
  }
}

@media (max-width: 67rem) {
  .site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    min-block-size: auto;
    padding: var(--space-6);
  }

  .site-header .cell-left,
  .site-header .cell-center,
  .site-header .cell-right {
    display: flex;
    align-items: center;
    border: none;
    padding: var(--space-0);
  }

  .site-header .cell-center {
    justify-content: flex-start;
    flex: 0 0 auto;
  }

  .site-header .cell-right {
    justify-content: flex-end;
    margin-inline-start: auto;
  }

  .site-logo-link {
    inline-size: 4.75rem;
    block-size: 4.75rem;
  }

  .site-menu {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  .nav-label-full {
    display: none;
  }

  .nav-label-short {
    display: inline;
    font-size: var(--text-sm);
    letter-spacing: var(--nav-label-short-letter-spacing);
  }

  .featured-post,
  .article-cover,
  .article-image {
    inline-size: 100%;
    margin-inline-start: var(--space-0);
    transform: none;
  }

  .featured-post-image,
  .article-cover {
    padding: var(--space-6);
  }

  .featured-post-image,
  .article-cover {
    block-size: auto;
    min-block-size: 0;
    aspect-ratio: 16 / 9;
  }

  .featured-post-body,
  .blog-index-title,
  .article-title,
  .post-stack,
  .blog-section,
  .latest-posts-shell,
  .load-more-shell,
  .article-intro,
  .article-content,
  .article-author,
  .newsletter-card,
  .related-posts {
    inline-size: 100%;
    padding-inline: var(--space-6);
    gap: var(--space-10);
  }

  .featured-post h2,
  .article-title h1 {
    font-size: var(--text-2xl);
    letter-spacing: var(--article-title-mobile-letter-spacing);
  }

  .post-card h2,
  .quote-card blockquote,
  .newsletter-card h2 {
    font-size: var(--text-xl);
  }

  .blog-section h2,
  .related-posts h2,
  .article-content h2 {
    font-size: var(--article-section-title-mobile-size);
  }

  .post-grid-two {
    grid-template-columns: 1fr;
  }

  .post-card-copy > p:last-child,
  .article-content p,
  .article-sidenote,
  .article-author p,
  .article-author a {
    font-size: var(--text-md);
    line-height: var(--line-soft);
    letter-spacing: var(--blog-copy-mobile-letter-spacing);
  }

  .article-content.prose p,
  .article-content.prose li {
    font-size: var(--article-body-mobile-size);
    line-height: var(--line-soft);
    letter-spacing: var(--article-body-mobile-letter-spacing);
  }

  .article-intro > p {
    font-size: var(--article-intro-mobile-size);
    line-height: var(--line-soft);
  }

  .share-rail {
    position: static;
    margin-top: var(--space-6);
  }

  .article-sidenote {
    position: static;
    inline-size: auto;
    margin-block: var(--article-sidenote-mobile-margin);
  }

  .article-sidenote q,
  .article-sidenote .article-sidenote-text {
    font-size: var(--article-sidenote-quote-mobile-size);
    line-height: var(--line-base);
    font-weight: 600;
  }

  .article-sidenote cite {
    font-size: var(--article-sidenote-cite-mobile-size);
  }

  .article-image {
    margin-block: var(--space-12);
    padding-inline: 0;
  }

  .article-image figcaption {
    inline-size: 100%;
  }

  .article-author,
  .newsletter-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .newsletter-card form {
    padding: var(--space-8);
  }

  .newsletter-card input {
    font-size: var(--text-xl);
  }

  .newsletter-actions p {
    font-size: var(--newsletter-actions-mobile-size);
    line-height: var(--line-soft);
    letter-spacing: var(--blog-copy-mobile-letter-spacing);
  }

  .post-card h3 {
    font-size: var(--blog-card-title-mobile-size);
    letter-spacing: var(--article-body-mobile-letter-spacing);
  }

  .legal-page .article-intro {
    padding-block-end: var(--space-12);
  }

  .legal-page .article-intro > p {
    font-size: var(--text-lg);
    line-height: var(--line-soft);
  }

  .legal-page .article-content h2 {
    font-size: 1.75rem;
    line-height: 1.1;
  }
}