@font-face { font-family: Newsreader; src: url('/fonts/newsreader-regular.ttf') format('truetype'); font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: Mulish; src: url('/fonts/mulish-regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Mulish; src: url('/fonts/mulish-bold.ttf') format('truetype'); font-weight: 600 800; font-style: normal; font-display: swap; }
body { font-family: Mulish, -apple-system, BlinkMacSystemFont, sans-serif; }
h1, h2, h3, .brand { font-family: Newsreader, Georgia, serif; }
.brand { display: inline-flex; align-items: center; gap: .4rem; }
.brand img { display: block; }
.skip-link { position: absolute; z-index: 10; top: -100px; left: 12px; padding: 8px 16px; background: var(--white); }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--clay-700); outline-offset: 5px; }
.nav { flex-wrap: wrap; justify-content: flex-end; }
.nav a:first-child { display: initial; }
.product-hero { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(2rem, 7vw, 6rem); align-items: center; padding: 5rem 0; }
.hero-copy h1 { margin: 1rem 0 1.4rem; font-size: clamp(3.4rem, 6.5vw, 5.5rem); line-height: 1.02; }
.hero-copy .lede { margin: 0; font-size: 1.25rem; color: var(--plum-700); }
.hero-copy > p:not(.eyebrow) { max-width: 34rem; }
.actions { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; margin: 1.75rem 0 1rem; }
.quiet, figcaption, .byline { color: #695a60; font-size: .875rem; line-height: 1.6; }
.phone-demo { max-width: 19rem; justify-self: end; margin: 0; }
.phone-demo video { display: block; width: 100%; height: auto; border: 1px solid var(--linen-200); border-radius: 1.7rem; box-shadow: 0 8px 26px rgba(61,46,53,.08); }
figcaption { margin-top: .85rem; }
.section { padding-top: 4rem; padding-bottom: 4rem; border-top: 1px solid var(--linen-200); }
.section h2 { margin-top: .65rem; max-width: 40rem; }
.workflow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; margin: 2.7rem 0 1.5rem; padding: 0; list-style: none; }
.workflow h3 { margin: .7rem 0; font-size: 1.7rem; }
.workflow p { margin: .65rem 0; }
.step-number { color: var(--clay-700); font-size: .9rem; font-weight: 700; }
.example { font-family: Newsreader, Georgia, serif; font-size: 1.45rem; color: #4e6b3c; }
.fit-section { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
.fit-section p:first-child { margin-top: 0; }
details { border-bottom: 1px solid var(--linen-200); padding: 1rem 0; }
summary { cursor: pointer; font-weight: 700; padding: .25rem 0; }
details p { margin-bottom: .5rem; }
.reading-list { margin-top: 2rem; }
.reading-list > a { display: grid; grid-template-columns: 1fr 1fr; align-items: baseline; column-gap: 2rem; padding: 1rem 0; text-decoration: none; border-bottom: 1px solid var(--linen-200); }
.reading-list h3 { margin: .35rem 0; font-size: 1.55rem; }
.reading-list p { margin: .35rem 0; color: #695a60; }
.reading-list a:hover h3 { text-decoration: underline; text-underline-offset: .2em; }
.site-footer { font-size: .875rem; }
.site-footer .shell { flex-wrap: wrap; }
.site-footer a { display: inline-block; padding: .4rem 0; }
.fact-list { display: grid; grid-template-columns: 9rem 1fr; gap: .7rem 1.5rem; margin: 2rem 0; }
.fact-list dt { font-weight: 700; }
.fact-list dd { margin: 0; }
.status-note { border-left: 3px solid var(--moss-700); padding: .3rem 0 .3rem 1.25rem; margin: 2rem 0; }
.walkthrough { margin: 2rem 0; padding-left: 1.3rem; border-left: 2px solid var(--linen-200); }
.walkthrough .example { margin-bottom: .25rem; }
.byline { margin: -.2rem 0 1.6rem; }
.article table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.article th, .article td { text-align: left; vertical-align: top; border-bottom: 1px solid var(--linen-200); padding: .8rem .65rem .8rem 0; }
.article th { font-size: .95rem; }
@media (max-width: 760px) {
  .product-hero { grid-template-columns: 1fr; padding: 3rem 0; }
  .hero-copy h1 { font-size: clamp(3rem, 12vw, 4.5rem); }
  .phone-demo { justify-self: center; max-width: 17rem; }
  .workflow, .fit-section, .reading-list > a { grid-template-columns: 1fr; gap: 1.5rem; }
  .reading-list > a { gap: 0; }
  .section { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .fact-list { grid-template-columns: 1fr; gap: .2rem; }
  .fact-list dd { margin-bottom: .9rem; }
  .site-header .shell { gap: 1rem; padding-top: .65rem; padding-bottom: .65rem; }
  .nav { column-gap: .9rem; row-gap: .4rem; font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }