/* Landing-page layout, loaded on top of docs.css.

   docs.css owns the palette, the type stack, the brand mark and the footer. It is
   the site's base, and the document pages (privacy, support, acknowledgements) use
   it on its own. This file adds only what a marketing page needs and the documents
   do not: a nav, a hero, a feature grid and the call to action.

   Mobile first throughout, deliberately: this is a page about an iPhone app, so the
   phone layout is the real one and the desktop rules are the afterthought. */

/* The documents are a 680px column; the landing page needs room for two columns. */
.wrap.wide{max-width:1080px;}

/* ---------- nav ---------- */
.nav{
  display:flex; align-items:center; gap:13px;
  margin-bottom:34px; flex-wrap:wrap;
}
@media (min-width:520px){ .nav{gap:18px;} }
.nav .brand{margin-right:auto;}
.nav a:not(.brand){
  color:var(--muted); text-decoration:none; font-size:13.5px; font-weight:500;
}
@media (min-width:520px){ .nav a:not(.brand){font-size:14.5px;} }
.nav a:not(.brand):hover{color:var(--text);}
.nav .cta{display:none;}
@media (min-width:720px){ .nav .cta{display:inline-block;} }

/* ---------- the call to action ---------- */
/* One button style, used in the hero, at the foot of every page, and in the nav.
   The beta link is the only thing on this site worth clicking, so it never has to
   compete with a second button of equal weight. */
.cta{
  display:inline-block; text-decoration:none; text-align:center;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color:#fff; font-weight:700; font-size:16.5px;
  padding:15px 26px; border-radius:99px;
  box-shadow:0 8px 30px rgba(255,45,120,.28);
}
.cta:hover{color:#fff; filter:brightness(1.08);}
.cta.small{font-size:14px; padding:9px 18px; box-shadow:none;}
.cta-note{color:var(--muted); font-size:14px; margin:12px 0 0;}
.cta-note strong{color:var(--text);}

/* A full-width band that closes a page: the same offer, where the reader stops. */
.closer{
  background:var(--panel); border:1px solid #ffffff12; border-radius:var(--r);
  padding:28px 24px; margin:46px 0 0; text-align:center;
}
.closer h2{margin:0 0 8px;}
.closer p{color:#d8d8e4; margin:0 0 20px;}

/* ---------- hero ---------- */
/* Text only, and centred on anything wider than a phone. There is no screenshot
   here: the App Store captures are dense light-theme lyric screens that read as
   plain against this page, so the words carry the hero until there is a shot worth
   leading with. Body copy stays left aligned on a phone, where four centred lines
   are harder to read than they are handsome. */
.hero{margin:10px 0 0; max-width:820px;}
@media (min-width:640px){
  .hero{margin:26px auto 0; text-align:center;}
  .hero .sub{margin-left:auto; margin-right:auto;}
}
.hero h1{
  font-family:'Unbounded', 'Outfit', sans-serif; font-weight:800;
  font-size:clamp(31px, 7.6vw, 56px); line-height:1.12; letter-spacing:-.02em;
  margin:0 0 18px;
  /* Evens the line lengths so the last line is never one orphaned word. Ignored
     where unsupported, which costs nothing. */
  text-wrap:balance;
}
.hero h1 em{
  font-style:normal;
  /* Three stops, not two: pink straight to cyan passes through grey, and a word
     landing on the midpoint comes out washed out. */
  background:linear-gradient(100deg, #ff2d78 0%, #a15cff 52%, #36e0e0 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .sub{font-size:17.5px; color:#d8d8e4; margin:0 0 28px; max-width:33em;}

/* ---------- feature grid ---------- */
.grid{display:grid; gap:14px; margin:22px 0 0;}
@media (min-width:640px){ .grid{grid-template-columns:1fr 1fr;} }
.feat{
  background:var(--panel); border:1px solid #ffffff10; border-radius:var(--r);
  padding:18px 20px;
}
.feat h3{margin:0 0 6px; color:var(--text); font-size:16.5px;}
.feat p{margin:0; font-size:15px; color:#c9c9d8;}
/* Drawn rather than set in emoji: half the emoji that fitted these six meanings
   are grey in Apple's set, which on this background reads as a smudge, and the
   other platforms draw them differently again. */
.feat .ic{display:block; width:23px; height:23px; margin-bottom:11px; color:var(--accent-3);}

/* ---------- numbered steps ---------- */
.steps{list-style:none; counter-reset:step; padding:0; margin:22px 0 0;}
.steps li{
  counter-increment:step; position:relative;
  padding:0 0 20px 50px; margin:0; color:#d8d8e4;
}
.steps li::before{
  content:counter(step);
  position:absolute; left:0; top:-2px;
  width:32px; height:32px; border-radius:50%;
  background:var(--panel-2); border:1px solid #ffffff1f;
  color:var(--accent-3); font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center;
}
.steps li b{color:var(--text); display:block; margin-bottom:3px;}

/* ---------- odds and ends ---------- */
.section{margin-top:52px;}
.section > h2:first-child{margin-top:0;}
.plain{list-style:none; padding:0;}
.plain li{padding-left:26px; position:relative;}
.plain li::before{content:'·'; position:absolute; left:8px; color:var(--accent-3); font-weight:700;}

/* Footer columns, so the content pages are actually reachable from every page,
   which is the whole point of having written them. */
.foot{
  display:grid; gap:26px; margin-top:64px; padding-top:30px;
  border-top:1px solid #ffffff14; font-size:14.5px;
}
@media (min-width:640px){ .foot{grid-template-columns:repeat(3, 1fr);} }
.foot h4{margin:0 0 10px; font-size:13px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--muted); font-weight:600;}
.foot ul{list-style:none; margin:0; padding:0;}
.foot li{margin-bottom:8px;}
.foot .fine{color:var(--muted); margin:0;}