@font-face {
  font-family:Newsreader;
  src:url('./assets/fonts/newsreader-medium.ttf') format('truetype');
  font-weight:500;
  font-display:swap
}
@font-face {
  font-family:Newsreader;
  src:url('./assets/fonts/newsreader-italic.ttf') format('truetype');
  font-style:italic;
  font-weight:400;
  font-display:swap
}
@font-face {
  font-family:Hanken;
  src:url('./assets/fonts/hanken-regular.ttf') format('truetype');
  font-weight:400;
  font-display:swap
}
@font-face {
  font-family:Hanken;
  src:url('./assets/fonts/hanken-semibold.ttf') format('truetype');
  font-weight:600;
  font-display:swap
}
:root {
  --paper:#f3efe6;
  --surface:#fffdf8;
  --ink:#1a1c19;
  --secondary:#33372f;
  --muted:#62675c;
  --green:#1f5d4c;
  --deep:#1a3a30;
  --tint:#e7efe9;
  --line:#ddd8cb;
  --serif:Newsreader,Georgia,serif;
  --sans:Hanken,Arial,sans-serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:28px
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 17px/1.55 var(--sans);
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-underline-offset:5px
}
img {
  max-width:100%;
  height:auto;
  display:block
}
button, a {
  -webkit-tap-highlight-color:transparent
}
a:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline:3px solid var(--green);
  outline-offset:6px
}
::selection {
  background:#cbe0d4;
  color:var(--deep)
}
h1, h2, h3, p, figure {
  margin:0
}
h1, h2, h3 {
  font-family:var(--serif);
  font-weight:500
}
em {
  font-weight:400
}
h2 {
  font-size:clamp(38px,4.1vw,60px);
  line-height:1.05;
  letter-spacing:-1.8px
}
h3 {
  font-size:29px;
  line-height:1.2;
  letter-spacing:-.6px
}
.wrap {
  width:min(1280px,calc(100% - 104px));
  margin-inline:auto
}
.skip {
  position:absolute;
  top:-100px;
  left:20px;
  background:var(--surface);
  padding:12px 20px;
  z-index:10
}
.skip:focus {
  top:16px
}
.preview-notice {
  background:var(--deep);
  color:var(--paper);
  padding:8px 20px;
  text-align:center;
  font-size:12px;
  letter-spacing:.02em
}
.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:30px;
  border-bottom:1px solid var(--line);
  gap:24px
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none
}
.brand img {
  border-radius:10px;
  width:38px;
  height:38px
}
.wordmark {
  font:500 32px/1 var(--serif);
  letter-spacing:-1px
}
.site-header nav {
  display:flex;
  align-items:center;
  gap:34px;
  font-size:14px
}
.site-header nav a {
  text-decoration:none;
  min-height:44px;
  display:inline-flex;
  align-items:center
}
.site-header nav a:hover, .site-footer a:hover {
  text-decoration:underline
}
.nav-link {
  color:var(--green)
}
.eyebrow {
  text-transform:uppercase;
  font-size:11px;
  line-height:1.5;
  letter-spacing:.15em;
  font-weight:600;
  color:var(--green)
}
.cta-row {
  display:flex;
  gap:24px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:31px
}
.button {
  background:var(--green);
  color:var(--surface);
  min-height:55px;
  padding:16px 23px;
  border-radius:16px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  font-size:15px;
  font-weight:600;
  line-height:1.35;
  transition:background .18s,transform .18s
}
.button:hover {
  background:var(--deep);
  transform:translateY(-2px)
}
.availability {
  font-size:15px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--green);
  padding:16px 19px;
  border:1px solid #b8c7b9;
  border-radius:16px;
  background:var(--tint)
}
.availability:before {
  content:'';
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--green)
}
.text-link {
  font-weight:600;
  font-size:14px;
  display:inline-flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  min-height:44px
}
.text-link:hover {
  text-decoration:underline
}
.text-link span {
  font-size:19px;
  font-weight:400
}
.small-note {
  font-size:12px;
  color:var(--muted);
  margin-top:17px
}
.media-slot {
  aspect-ratio:390/844;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:25px;
  text-align:center;
  background:var(--surface);
  color:var(--green);
  gap:14px;
  border:1px dashed #b6c2b3;
  border-radius:27px;
  margin:6px
}
.media-slot .slot-index {
  font:500 44px/1 var(--serif)
}
.slot-title {
  font:500 26px/1.1 var(--serif)
}
.slot-status {
  font-size:11px;
  line-height:1.5;
  max-width:130px;
  color:var(--muted)
}
.slot-rule {
  width:28px;
  height:1px;
  background:#b6c2b3
}
.brand-glyph {
  font:22px/1 var(--sans)
}
.section {
  padding-block:90px;
  border-top:1px solid var(--line)
}
.section-heading .eyebrow {
  margin-bottom:24px
}
.section-heading>p:last-child:not(.eyebrow) {
  color:var(--muted);
  margin-top:23px;
  max-width:320px
}
.examples {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px
}
.example-list article {
  padding:30px 0;
  border-bottom:1px solid var(--line)
}
.example-list article:first-child {
  padding-top:0
}
.example-list article:last-child {
  border:0;
  padding-bottom:0
}
.example-context {
  display:block;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--green);
  font-weight:600;
  margin-bottom:15px
}
.example-list h3 {
  font-size:34px
}
.example-list p {
  color:var(--muted);
  font-size:15px;
  margin-top:13px;
  max-width:370px
}
.trust {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px
}
.trust h2 {
  font-size:46px;
  margin-top:24px
}
.trust-copy p {
  color:var(--muted);
  font-size:15px;
  margin-top:18px;
  max-width:440px
}
.trust-copy .lead {
  font-size:20px;
  line-height:1.5;
  color:var(--secondary);
  margin-top:0
}
.trust-links {
  display:flex;
  gap:25px;
  margin-top:18px;
  color:var(--green)
}
.final-cta {
  text-align:center;
  background:var(--tint);
  padding:78px 0 72px
}
.final-cta img {
  margin:0 auto 25px;
  border-radius:18px
}
.final-cta h2 {
  font-size:clamp(62px,6vw,84px);
  margin:23px 0 30px;
  color:var(--green);
  letter-spacing:-2.6px
}
.final-cta .availability {
  border-color:#afc2b3
}
.site-footer {
  padding-block:38px 25px
}
.footer-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px
}
.site-footer nav {
  display:flex;
  gap:25px;
  flex-wrap:wrap
}
.site-footer nav a {
  font-size:13px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  text-decoration:none
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:30px;
  padding-top:22px;
  border-top:1px solid var(--line);
  font-size:11px;
  color:var(--muted)
}
.legal-layout {
  display:grid;
  grid-template-columns:240px minmax(0,760px);
  gap:72px;
  padding-block:66px 100px;
  justify-content:space-between
}
.legal-aside .eyebrow {
  margin-bottom:20px
}
.legal-aside nav {
  display:flex;
  flex-direction:column;
  gap:3px
}
.legal-aside a {
  font-size:14px;
  text-decoration:none;
  display:block;
  padding:10px 0
}
.legal-aside a[aria-current=page] {
  color:var(--green);
  font-weight:600
}
.legal-aside .contents {
  border-top:1px solid var(--line);
  margin-top:25px;
  padding-top:25px
}
.contents a {
  font-size:12px;
  line-height:1.45;
  padding-block:6px
}
.legal-body {
  min-width:0
}
.legal-body h1 {
  font-size:clamp(47px,5vw,68px);
  line-height:1.05;
  letter-spacing:-2px
}
.legal-body .updated {
  color:var(--muted);
  font-size:13px;
  margin:18px 0 36px
}
.legal-body p, .legal-body li {
  font-size:16px;
  line-height:1.75
}
.legal-body p {
  margin-block:18px
}
.legal-body h2 {
  font-size:30px;
  line-height:1.2;
  letter-spacing:-.5px;
  margin:42px 0 17px
}
.legal-body h3 {
  font-size:23px;
  line-height:1.3;
  margin:29px 0 12px
}
.legal-body li+li {
  margin-top:9px
}
.legal-body ul {
  padding-left:22px
}
.legal-body a {
  color:var(--green);
  overflow-wrap:anywhere
}
.legal-body .note {
  background:var(--tint);
  padding:22px 25px;
  border-radius:16px;
  margin-block:27px;
  overflow-wrap:anywhere
}
.table-scroll {
  overflow:auto;
  border:1px solid var(--line);
  border-radius:12px;
  margin-block:25px
}
.legal-body table {
  border-collapse:collapse;
  width:100%;
  font-size:14px;
  line-height:1.55
}
.legal-body th, .legal-body td {
  text-align:left;
  border-bottom:1px solid var(--line);
  padding:15px 17px;
  vertical-align:top;
  min-width:145px
}
.legal-body th {
  background:var(--tint);
  font-weight:600
}
.legal-body tr:last-child td {
  border-bottom:0
}
.not-found {
  padding-block:100px;
  min-height:60vh
}
.not-found h1 {
  font-size:65px
}
.not-found p {
  margin:24px 0
}
@media(max-width:1100px) {
.wrap {
    width:calc(100% - 64px)
  }
.examples, .trust {
    gap:48px
  }
.cta-row {
    gap:10px 20px
  }
.legal-layout {
    grid-template-columns:180px minmax(0,1fr);
    gap:40px
  }

}
@media(max-width:760px) {
.wrap {
    width:calc(100% - 44px)
  }
.preview-notice {
    font-size:10px;
    padding:7px 18px
  }
.site-header {
    padding-block:18px;
    gap:16px
  }
.wordmark {
    font-size:29px
  }
.brand img {
    width:33px;
    height:33px;
    border-radius:9px
  }
.site-header nav {
    gap:22px;
    font-size:13px
  }
.site-header .desktop-nav {
    display:none
  }
.cta-row {
    margin-top:25px;
    gap:8px 20px
  }
.small-note {
    margin-top:13px
  }
.media-slot {
    padding:16px;
    gap:11px;
    border-radius:22px;
    margin:4px
  }
.slot-title {
    font-size:21px
  }
.media-slot .slot-index {
    font-size:32px
  }
.slot-status {
    font-size:9px
  }
.section {
    padding-block:54px
  }
.examples, .trust {
    grid-template-columns:1fr;
    gap:36px
  }
.section-heading .eyebrow {
    margin-bottom:20px
  }
h2 {
    font-size:43px;
    letter-spacing:-1.4px
  }
.example-list h3 {
    font-size:30px
  }
.example-list p {
    font-size:15px
  }
.example-list article {
    padding-block:25px
  }
.trust h2 {
    font-size:41px
  }
.trust-copy .lead {
    font-size:18px
  }
.final-cta {
    padding-block:55px
  }
.final-cta h2 {
    font-size:clamp(48px,15vw,62px)
  }
.footer-top {
    align-items:flex-start;
    gap:20px
  }
.site-footer nav {
    flex-direction:column;
    gap:0
  }
.site-footer nav a {
    min-height:37px
  }
.footer-bottom {
    flex-direction:column;
    gap:5px;
    margin-top:22px
  }
.site-footer {
    padding-block:30px 22px
  }
.legal-layout {
    display:flex;
    flex-direction:column;
    gap:32px;
    padding-block:35px 60px
  }
.legal-aside .contents {
    display:none
  }
.legal-aside .eyebrow {
    margin-bottom:8px
  }
.legal-aside nav {
    flex-direction:row;
    flex-wrap:wrap;
    gap:20px
  }
.legal-body h1 {
    font-size:49px
  }
.legal-body h2 {
    font-size:29px;
    margin-top:34px
  }
.legal-body p, .legal-body li {
    font-size:16px
  }
.legal-body .note {
    padding:20px
  }
.legal-body ul {
    padding-left:19px
  }

}
@media(max-width:370px) {
.wrap {
    width:calc(100% - 32px)
  }
.site-header nav {
    gap:14px
  }
.slot-title {
    font-size:18px
  }
.slot-status {
    font-size:8px
  }
.media-slot {
    gap:8px;
    padding:10px
  }
.trust h2 {
    font-size:36px
  }
.text-link {
    font-size:13px
  }
.legal-body h1 {
    font-size:43px
  }

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

}

/* Relay's product story: one centred phone, three native-scroll chapters. */
.hero {
  text-align: center;
  padding-block: 64px 54px;
}
.hero h1 {
  font-size: clamp(62px, 6.8vw, 98px);
  line-height: 1.02;
  letter-spacing: -3.4px;
  margin-top: 25px;
}
.hero h1 em { color: var(--green); }
.hero-description {
  max-width: 590px;
  margin: 23px auto 0;
  color: var(--secondary);
  font-size: 18px;
  line-height: 1.6;
}
.hero .cta-row { justify-content: center; margin-top: 27px; }
.demo-section {
  display:grid;
  grid-template-columns:minmax(0, .9fr) minmax(280px, 1.1fr);
  align-items:center;
  gap:clamp(42px, 9vw, 150px);
  padding:76px 0 92px;
  border-top:1px solid var(--line);
}
.demo-intro .eyebrow { margin-bottom:22px; }
.demo-intro h2 { color:var(--green); }
.demo-intro > p:last-child { max-width:355px; margin-top:24px; color:var(--muted); }
.demo-media { display:grid; justify-items:center; gap:17px; }
.demo-video-frame {
  width:min(100%, 356px);
  overflow:hidden;
  border:7px solid #21302b;
  border-radius:39px;
  background:#21302b;
  box-shadow:0 25px 58px -31px #1a3a3099, inset 0 0 0 2px #5b7367;
}
.demo-video-frame video {
  display:block;
  width:100%;
  aspect-ratio:1206 / 2622;
  background:var(--surface);
}
.demo-media figcaption {
  width:min(100%, 405px);
  color:var(--muted);
  font-size:12px;
  line-height:1.55;
  text-align:center;
}
.demo-media figcaption strong { color:var(--secondary); }
.journey {
  background: #e8e8dc;
  color: var(--green);
  transition: background-color .45s, color .35s;
}
.journey-heading { text-align: center; padding: 35px 22px 0; }
.journey-heading h2 { font-size: 27px; letter-spacing: -.6px; margin-top: 10px; }
.journey-heading .eyebrow { color: inherit; }
.journey-stage { position: relative; }
.journey-chapter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 300px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(30px, 5vw, 80px);
  padding-block: 55px;
  outline: none;
}
.chapter-copy h3 {
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.04;
  letter-spacing: -1.8px;
  margin-top: 23px;
}
.chapter-copy > p:last-child { margin-top: 22px; max-width: 295px; font-size: 16px; line-height: 1.65; }
.chapter-copy .eyebrow, .chapter-note .eyebrow { color: inherit; }
.chapter-phone {
  width: 100%;
  aspect-ratio: 390 / 844;
  padding: 2px;
  border: 1px solid #567466;
  border-radius: 40px;
  background: #21302b;
  box-shadow: 0 22px 42px -25px #1a3a3066, inset 0 0 0 2px #5b7367;
}
.chapter-phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 37px; background: var(--surface); }
.chapter-phone .media-slot {
  width: 100%; height: 100%; margin: 0; aspect-ratio: auto;
  border-radius: 32px; border: 0; padding: 20px; color: var(--green);
}
.chapter-phone .slot-index { font-size: 48px; }
.chapter-phone .slot-title { font-size: 31px; }
.chapter-phone .slot-status { font-size: 12px; max-width: 160px; }
.chapter-note { padding-left: 12px; max-width: 270px; }
.chapter-note .brand-glyph { display: block; font-size: 28px; margin-bottom: 43px; }
.chapter-note > p:not(.eyebrow) { font: 500 29px/1.25 var(--serif); letter-spacing: -.6px; margin-top: 20px; }
.chapter-caption { display: block; border-top: 1px solid currentColor; padding-top: 18px; margin-top: 30px; font-size: 12px; }
.journey-nav { display: flex; justify-content: center; gap: 5px; padding: 6px; border: 1px solid #b6c3b4; border-radius: 18px; width: max-content; max-width: calc(100% - 32px); margin: 10px auto 0; background: var(--paper); color: var(--green); }
.journey-nav a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 20px; border-radius: 12px; text-decoration: none; font-size: 13px; font-weight: 600; }
.journey-nav a span { font: 500 16px/1 var(--serif); }
.journey-nav a[aria-current] { background: var(--green); color: var(--surface); }
.journey-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.journey-hint { text-align: center; font-size: 10px; padding: 13px 0 22px; letter-spacing: .03em; }
.journey-hint span { margin-left: 8px; }
.journey.is-enhanced { height: 340svh; }
.is-enhanced .journey-sticky { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; }
.is-enhanced .journey-stage { display: grid; flex: 1; min-height: 0; }
.is-enhanced .journey-chapter {
  grid-area: 1 / 1;
  grid-template-columns: minmax(0, 1fr) min(300px, calc((100svh - 260px) * .462)) minmax(0, 1fr);
  opacity: 0; visibility: hidden; pointer-events: none;
  padding-block: 22px;
  transition: opacity .3s, visibility .3s;
}
.is-enhanced .journey-chapter[data-active] { opacity: 1; visibility: visible; pointer-events: auto; }
.journey.is-enhanced[data-stage="call"] { background: var(--deep); color: var(--paper); }
.journey.is-enhanced[data-stage="outcome"] { background: #dce6dc; }
.journey.is-enhanced[data-stage="call"] .journey-nav { background: #21302b; color: var(--paper); border-color: #5b7a6c; }
.journey.is-enhanced[data-stage="call"] .journey-nav a[aria-current] { background: var(--paper); color: var(--deep); }
.journey.is-enhanced[data-stage="call"] a:focus-visible { outline-color: var(--paper); }
@media(max-width:1100px) {
  .journey-chapter { gap: 32px; }
  .chapter-copy h3 { font-size: 43px; }
  .chapter-note > p:not(.eyebrow) { font-size: 25px; }
  .chapter-copy > p:last-child { font-size: 15px; }
}
@media(max-width:760px) {
  .hero { padding-block: 43px 38px; }
  .hero h1 { font-size: clamp(55px, 12vw, 80px); letter-spacing: -2.3px; line-height: 1.01; }
  .hero-description { font-size: 16px; margin-top: 22px; max-width: 390px; }
  .hero-description br { display: none; }
  .hero .cta-row { gap: 10px 20px; margin-top: 24px; }
  .demo-section { grid-template-columns:1fr; gap:30px; padding:55px 0 63px; text-align:center; }
  .demo-intro .eyebrow { margin-bottom:15px; }
  .demo-intro > p:last-child { margin:17px auto 0; font-size:15px; }
  .demo-video-frame { width:min(100%, 300px); border-radius:32px; border-width:6px; }
  .demo-media figcaption { font-size:11px; }
  .journey-heading { padding-top: 23px; }
  .journey-heading h2 { font-size: 23px; }
  .journey-heading h2 em { display: block; margin-top: 3px; }
  .journey-chapter { display: flex; flex-direction: column; gap: 24px; text-align: center; padding-block: 35px; }
  .chapter-copy h3 { font-size: 36px; letter-spacing: -1.1px; margin-top: 12px; }
  .chapter-copy > p:last-child { font-size: 14px; line-height: 1.5; max-width: 310px; margin: 13px auto 0; }
  .chapter-phone { width: min(245px, 70vw); border-radius: 32px; padding: 2px; }
  .chapter-phone img, .chapter-phone .media-slot { border-radius: 29px; }
  .chapter-note { padding: 0; max-width: 300px; }
  .chapter-note .brand-glyph { display: none; }
  .chapter-note > p:not(.eyebrow) { font-size: 23px; }
  .chapter-caption { display: none; }
  .journey-nav a { padding: 10px 12px; font-size: 12px; gap: 7px; }
  .journey-nav a span { font-size: 13px; }
  .journey.is-enhanced { height: 330svh; }
  .is-enhanced .journey-heading { padding-top: 20px; }
  .is-enhanced .journey-heading h2 { display: none; }
  .is-enhanced .journey-chapter { display: flex; justify-content: center; gap: 21px; padding-block: 15px; }
  .is-enhanced .chapter-phone { width: min(230px, calc((100svh - 365px) * .462)); flex-shrink: 0; }
  .is-enhanced .chapter-note { display: none; }
  .is-enhanced .chapter-copy .eyebrow { font-size: 10px; }
  .is-enhanced .chapter-copy h3 { font-size: 34px; }
  .is-enhanced .chapter-copy h3 br { display: none; }
  .is-enhanced .chapter-copy h3 em { display: block; }
  .is-enhanced .chapter-copy > p:last-child { margin-top: 10px; }
  .journey-hint { padding: 11px 0 17px; }
  .chapter-phone .slot-title { font-size: 25px; }
  .chapter-phone .slot-status { font-size: 10px; }
  .chapter-phone .slot-index { font-size: 38px; }
}
@media(max-width:370px) {
  .hero h1 { font-size: 52px; }
  .journey-nav a { padding-inline: 9px; font-size: 11px; }
  .is-enhanced .chapter-copy h3 { font-size: 30px; }
  .is-enhanced .chapter-copy > p:last-child { font-size: 13px; }
}
@media(prefers-reduced-motion:reduce) {
  .journey { transition: none; }
  .journey-hint { display: none; }
}
.journey-chapter:focus-visible { outline: none; }
.journey-chapter:focus-visible .chapter-copy { outline: 2px solid currentColor; outline-offset: 12px; border-radius: 4px; }