@font-face{font-family:"Manrope";src:url(/fonts/manrope-bold.woff2) format("woff2");font-weight:500 700;font-display:swap}
@font-face{font-family:"Manrope";src:url(/fonts/manrope-extrabold.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Inter";src:url(/fonts/inter-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
/* Layout: photo-led marketing page. Dave's trail photography sets the mood; real recorded app clips play in phones set on top of it. */
:root{
  --paper:#F9FAF7; --paper-2:#F2F4F1; --rule:#E2E6E1; --ink:#1B201C; --ink-2:#4F5651; --ink-3:#767C78;
  --sage:#526354; --sage-light:#C6DAC6; --amber:#F8E3BE; --xc:#D8343A;
  --night:#141814; --night-ink:#EEF1EC;
  --display:"Manrope",system-ui,sans-serif; --body:"Inter",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#171B18; --paper-2:#1E231F; --rule:#2C332D; --ink:#EEF1EC; --ink-2:#B3BAB4; --ink-3:#8A918B;
  --sage:#A9C5AA; --sage-light:#34443A; --amber:#4A3F2A; --xc:#F0787B; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#171B18; --paper-2:#1E231F; --rule:#2C332D; --ink:#EEF1EC; --ink-2:#B3BAB4; --ink-3:#8A918B;
  --sage:#A9C5AA; --sage-light:#34443A; --amber:#4A3F2A; --xc:#F0787B; color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:var(--display);text-wrap:balance}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
:focus-visible{outline:2px solid var(--sage);outline-offset:3px}
img,video{display:block;max-width:100%}
img{height:auto}
a,button{-webkit-tap-highlight-color:transparent}
[id]{scroll-margin-top:16px}

/* ---------- phone ---------- */
.phone{position:relative;width:var(--w,300px);max-width:100%;aspect-ratio:1206/2622;border-radius:calc(var(--w,300px) * .16);padding:calc(var(--w,300px) * .033);
  background:#0D0F0D;box-shadow:0 0 0 1.5px #3A403B inset,0 40px 80px -30px rgba(8,12,9,.6),0 12px 24px -12px rgba(8,12,9,.35)}
.phone > *{width:100%;height:100%;object-fit:cover;border-radius:calc(var(--w,300px) * .13);background:#E9ECE6}

/* ---------- hero ---------- */
.hero{position:relative;height:clamp(640px,94vh,960px);color:#fff;overflow:hidden;background:#3a4450}
.hero picture{display:contents}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(10,14,12,.45) 0%,rgba(10,14,12,0) 22%),
  linear-gradient(270deg,rgba(10,14,12,.62) 0%,rgba(10,14,12,.25) 40%,rgba(10,14,12,0) 60%),
  linear-gradient(0deg,rgba(10,14,12,.7) 0%,rgba(10,14,12,.2) 35%,rgba(10,14,12,0) 55%)}
.nav{position:absolute;top:0;left:0;right:0;z-index:3}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;padding-block:calc(22px + env(safe-area-inset-top,0px)) 22px}
.logo{font:800 22px/1 var(--display);letter-spacing:-.02em;color:#fff;text-decoration:none;display:flex;align-items:center;gap:7.75px}
.logo svg{width:26px;height:26px}
.nav nav{display:flex;align-items:center;gap:28px}
.nav nav a{color:rgba(255,255,255,.88);text-decoration:none;font:500 15px var(--body)}
.nav nav a.pill{background:#F9FAF7;color:#1B201C;padding:10px 18px;border-radius:999px;font-weight:600}
.hero .copy{position:absolute;left:0;right:0;bottom:0;z-index:2}
.hero .copy .wrap{padding-block:0 64px;display:grid;grid-template-columns:auto minmax(0,680px);justify-content:space-between;gap:32px;align-items:end}
.hero .copy .wrap > div{order:2}
.hero h1{font-size:clamp(44px,6.4vw,92px);font-weight:800;line-height:.96;letter-spacing:-.035em;max-width:14ch}
.hero .lede{font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:rgba(255,255,255,.9);max-width:36ch;margin-top:22px}
.signup{display:flex;gap:8px;margin-top:30px;max-width:460px;background:rgba(249,250,247,.96);padding:6px;border-radius:14px}
.signup input{flex:1;min-width:0;width:100%;border:0;background:transparent;font:16px var(--body);color:#1B201C;padding:10px 12px}
.signup input::placeholder{color:#6B716D}
.signup button{border:0;border-radius:10px;background:#526354;color:#F9FAF7;font:700 15px var(--display);padding:0 18px;cursor:pointer;white-space:nowrap}
.signup button:hover{background:#465748}
.credit{order:1;font:500 12px var(--body);color:rgba(255,255,255,.72);line-height:1.4}

/* ---------- statement ---------- */
.statement{padding-block:120px 24px}
.statement p{font:700 clamp(30px,4.2vw,54px)/1.12 var(--display);letter-spacing:-.025em;max-width:20ch}
.statement p span{color:var(--ink-3)}

/* ---------- feature: photo stage with a live phone ---------- */
.feature{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:center;padding-block:96px}
.feature.flip{grid-template-columns:7fr 5fr}
.feature.flip .text{order:2}
.kicker{font:700 13px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--sage)}
.feature h2{font-size:clamp(28px,3.1vw,40px);line-height:1.14;letter-spacing:-.02em;margin-top:14px}
.feature .body{color:var(--ink-2);font-size:18px;max-width:42ch;margin-top:18px}
.steps{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--rule);max-width:440px}
.steps li{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:13px 0;border-bottom:1px solid var(--rule);font-size:15.5px;color:var(--ink-2)}
.steps li b{font:700 13px/1.9 var(--display);color:var(--ink-3);font-variant-numeric:tabular-nums}
.steps li strong{color:var(--ink);font-weight:600}
.stage{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:7/7.4;max-width:100%;background:#4b5560;display:grid;place-items:center}
.stage > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage::after{content:"";position:absolute;inset:0;background:rgba(10,14,12,.12)}
.stage .phone{--w:clamp(220px,21vw,290px);z-index:1}
.stage .where{position:absolute;left:20px;bottom:18px;z-index:1;font:500 12px var(--body);color:rgba(255,255,255,.85);text-shadow:0 1px 2px rgba(0,0,0,.4)}
.legend{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px;color:var(--ink-2);font-size:15px}
.legend span{display:flex;align-items:center;gap:8px}
.legend svg{width:30px;height:8px}

/* ---------- screens strip ---------- */
.screens{background:var(--paper-2);border-block:1px solid var(--rule);overflow:hidden}
.screens .wrap{padding-block:96px}
.screens .top{display:grid;grid-template-columns:5fr 6fr;gap:48px;align-items:end}
.screens h2{font-size:clamp(28px,3.1vw,40px);letter-spacing:-.02em;line-height:1.14}
.screens .top p{color:var(--ink-2);font-size:18px;max-width:44ch}
.row{display:flex;justify-content:center;align-items:flex-start;gap:clamp(16px,3vw,44px);margin-top:64px}
.row figure{margin:0;display:grid;gap:14px;justify-items:center}
.row figure:nth-child(2){margin-top:56px}
.row .phone{--w:clamp(180px,22vw,270px)}
.row figcaption{font:500 13.5px var(--body);color:var(--ink-3);text-align:center;max-width:24ch}

/* ---------- small features ---------- */
.more .wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding-block:80px}
.more div.item{padding-right:40px}
.more div.item + div.item{padding-left:40px;border-left:1px solid var(--rule)}
.more .ico{display:block;width:28px;height:28px;margin-bottom:12px;fill:none;stroke:var(--sage);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.more h3{font-size:21px;letter-spacing:-.01em}
.more p{color:var(--ink-2);margin-top:10px;font-size:16px}

/* ---------- about ---------- */
.about{border-top:1px solid var(--rule)}
.about .wrap{display:grid;grid-template-columns:5fr 6fr;gap:72px;align-items:center;padding-block:110px}
.about figure{margin:0;border-radius:24px;overflow:hidden;aspect-ratio:4/5;max-width:100%;background:#4b6a4f}
.about figure img{width:100%;height:100%;object-fit:cover}
.about blockquote{margin:16px 0 0;font:700 clamp(26px,2.8vw,36px)/1.25 var(--display);letter-spacing:-.02em}
.about .sig{margin-top:22px;color:var(--ink-2)}
.trails{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;padding:0;list-style:none}
.trails li{border:1px solid var(--rule);border-radius:999px;padding:7px 14px;font:500 14px var(--body);color:var(--ink-2)}
.creators{display:inline-flex;margin-top:36px;color:var(--sage);font-weight:600;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:2px}

/* ---------- /creators, and the home page's band that links to it ---------- */
.kicker.light{color:#C6DAC6;margin-bottom:16px}
.more.four .wrap{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.more.four div.item{padding-inline:28px}
.more.four div.item:first-child{padding-left:0}
.more.four div.item:last-child{padding-right:0}
.more.four div.item + div.item{padding-left:28px}
.formats{background:var(--paper-2);border-block:1px solid var(--rule)}
.formats .wrap{display:grid;grid-template-columns:5fr 6fr;gap:72px;padding-block:96px;align-items:start}
.formats h2{font-size:clamp(28px,3.1vw,40px);letter-spacing:-.02em;line-height:1.14;margin-top:14px}
.formats p{color:var(--ink-2);font-size:18px;max-width:46ch}
.band{border-top:1px solid var(--rule)}
.band .wrap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 32px;padding-block:56px}
.band p{font:700 clamp(22px,2.4vw,30px)/1.2 var(--display);letter-spacing:-.02em}
.band a{color:var(--sage);font-weight:600;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:2px;white-space:nowrap}

/* ---------- beta ---------- */
.beta{background:var(--night);color:var(--night-ink);border-top:1px solid var(--rule)}
.beta .wrap{display:grid;grid-template-columns:5fr 6fr;gap:72px;padding-block:110px}
.beta h2{font-size:clamp(32px,4vw,52px);letter-spacing:-.025em;line-height:1.05}
.beta .intro{color:#A9B1AA;margin-top:18px;max-width:34ch}
.beta form{display:grid;gap:14px}
.beta label{font:600 13.5px var(--body);color:#C8CFC9}
.beta input,.beta select,.beta textarea{width:100%;font:16px/1.4 var(--body);color:#EEF1EC;background:#1D221E;border:1px solid #333B35;border-radius:12px;padding:13px 14px;margin:0}
.beta input::placeholder,.beta textarea::placeholder{color:#7C847E}
.beta select{-webkit-appearance:none;appearance:none;padding-right:42px;cursor:pointer;background:#1D221E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23A9B1AA' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center/12px 8px}
.beta select:invalid{color:#7C847E}
.beta option{color:#EEF1EC;background:#1D221E}
.beta textarea{min-height:110px;resize:vertical}
.beta .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.beta .two > div,.beta .field{display:grid;gap:8px;min-width:0}
.beta button{justify-self:start;margin-top:6px;border:0;border-radius:12px;background:#C6DAC6;color:#141814;font:700 16px var(--display);padding:14px 22px;cursor:pointer}
.beta button:hover{background:#D4E8D4}
footer{background:var(--night);color:#8A918B;border-top:1px solid #262C27}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:8px 16px;flex-wrap:wrap;padding-block:20px calc(20px + env(safe-area-inset-bottom,0px));font-size:14px}
footer .wrap > span:last-child{display:flex;gap:4px 24px;flex-wrap:wrap}
footer a{color:#B3BAB4;text-decoration:none;display:inline-block;padding-block:10px}
.dock{display:none}
.dots{display:none}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.beta .fine{font-size:13.5px;color:#8A918B}
.beta .fine a{color:#C6DAC6}
.beta .status{font-weight:600;color:#C6DAC6;min-height:1.6em}
.beta .status.err{color:#F3A6A0}
.beta button[disabled]{opacity:.6;cursor:default}

@media (max-width:900px){
  .nav nav a:not(.pill){display:none}
  /* Phone and tablet portrait: headline in the sky, the hiker in the middle, the sign-up on the rocks. */
  .hero{height:100vh;height:100svh;min-height:600px;max-height:1100px}
  .hero img{object-position:50% 50%}
  .hero::after{background:
    linear-gradient(180deg,rgba(10,14,12,.6) 0%,rgba(10,14,12,.42) 28%,rgba(10,14,12,.2) 42%,rgba(10,14,12,0) 54%),
    linear-gradient(0deg,rgba(10,14,12,.82) 0%,rgba(10,14,12,.45) 26%,rgba(10,14,12,0) 46%)}
  .hero .copy{top:0}
  .hero .copy .wrap{height:100%;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding-block:calc(86px + env(safe-area-inset-top,0px)) 24px}
  .hero .copy .wrap > div{display:contents}
  .hero .copy .wrap > *{min-width:0}
  .hero h1{font-size:clamp(40px,11.2vw,76px);text-shadow:0 2px 24px rgba(10,14,12,.4)}
  .hero .lede{margin:14px 0 auto;font-size:17px;max-width:30ch;text-shadow:0 1px 2px rgba(10,14,12,.5),0 1px 16px rgba(10,14,12,.6)}
  .hero .signup{margin-top:18px}
  .credit{margin-top:14px;font-size:11.5px}
  .statement{padding-block:80px 8px}
  .feature,.feature.flip{grid-template-columns:1fr;gap:36px;padding-block:64px}
  .feature.flip .text{order:0}
  .stage{aspect-ratio:auto;padding-block:28px 52px;border-radius:22px}
  .stage .phone{--w:min(60vw,260px)}
  .stage .where{left:0;right:0;bottom:17px;text-align:center}
  .screens .top,.about .wrap,.beta .wrap{grid-template-columns:1fr;gap:28px}
  .screens .wrap{padding-block:64px}
  /* Carousel: one phone centred, its neighbours peek in at the sides. The
     padding leaves room for the phone shadow, so it is not cut off. */
  .row{--pw:min(62vw,250px);position:relative;overflow-x:auto;justify-content:flex-start;gap:14px;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin:8px calc(-1 * max(20px,env(safe-area-inset-right,0px))) -24px calc(-1 * max(20px,env(safe-area-inset-left,0px)));
    padding:24px calc((100vw - var(--pw)) / 2) 56px}
  .row::-webkit-scrollbar{display:none}
  .row figure{flex:none;width:var(--pw);scroll-snap-align:center;transition:transform .3s,opacity .3s}
  .row figure:not(.on){transform:scale(.92);opacity:.55}
  .row .phone{--w:var(--pw)}
  .dots{display:flex;justify-content:center;gap:8px}
  .dots span{width:7px;height:7px;border-radius:50%;background:var(--ink-3);opacity:.35;transition:opacity .3s,width .3s}
  .dots span.on{opacity:.9;width:20px;border-radius:4px}
  .row figure:nth-child(2){margin-top:0}
  .more .wrap{grid-template-columns:1fr;gap:28px;padding-block:56px}
  .more div.item,.more div.item + div.item{padding:0;border-left:0}
  .more div.item{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:center}
  .more .ico{width:24px;height:24px;margin:0}
  .more .item p{grid-column:1 / -1;margin-top:6px}
  .more.four .wrap{grid-template-columns:1fr;gap:28px}
  .more.four div.item,.more.four div.item + div.item{padding:0}
  .formats .wrap{grid-template-columns:1fr;gap:20px;padding-block:64px}
  .band .wrap{padding-block:44px}
  .about .wrap{padding-block:72px}
  .about figure{aspect-ratio:4/3;border-radius:20px}
  .beta .wrap{padding-block:72px}
  .beta .two{grid-template-columns:1fr}
  .beta button{justify-self:stretch;padding-block:16px}
  .dock{display:flex;position:fixed;z-index:20;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translate(-50%,calc(100% + 40px));
    align-items:center;background:#C6DAC6;color:#141814;font:700 15px var(--display);padding:14px 26px;border-radius:999px;text-decoration:none;white-space:nowrap;
    box-shadow:0 12px 28px -10px rgba(8,12,9,.55),0 0 0 1px rgba(20,24,20,.08);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .dock.show{transform:translate(-50%,0)}
}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .hero img{animation:settle 2.4s cubic-bezier(.2,.7,.2,1) both}
  @keyframes settle{from{transform:scale(1.05)}to{transform:scale(1)}}
}

/* ---------- document pages (privacy, terms, support, 404) ---------- */
.docbar{border-bottom:1px solid var(--rule);background:var(--paper)}
.docbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px}
.docbar .logo{color:var(--ink)}
.docbar nav{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.docbar nav a{color:var(--ink-2);text-decoration:none;font:500 15px var(--body)}
.docbar nav a[aria-current="page"]{color:var(--ink);font-weight:600}
.docbar nav a.pill{background:var(--sage);color:var(--paper);padding:9px 16px;border-radius:999px;font-weight:600}
.doc{max-width:760px;padding-block:72px 110px}
.doc h1{font-size:clamp(36px,5vw,56px);font-weight:800;letter-spacing:-.03em;line-height:1.05}
.doc .updated{color:var(--ink-3);margin-top:12px;font-size:15px}
.doc h2{font-size:24px;letter-spacing:-.01em;margin-top:52px;padding-top:28px;border-top:1px solid var(--rule)}
.doc h3{font-size:18px;margin-top:30px}
.doc p,.doc li{color:var(--ink-2);max-width:65ch}
.doc p{margin-top:14px}
.doc ul{margin:14px 0 0;padding-left:22px}
.doc li{margin-top:8px}
.doc a{color:var(--sage);text-underline-offset:3px}
.doc h2:target{scroll-margin-top:24px}
@media (max-width:900px){.docbar nav a:not(.pill){display:none}.doc{padding-block:48px 80px}}