/* Ember's website (/home, /features, /pricing, /faq, /about, /privacy, /terms, the 404 page): one look, lit by
   Ember. The header and footer are web/_header.html and web/_footer.html, put into each page by the server. */
:root {
  --night: #1b120c; --char: #2a1d15; --char2: #34251b; --edge: #43322560; --edge2: #4a372a;
  --flame: #ff9a4d; --glow: #ffcf8a; --ash: #b49d88; --cream: #f6e9da; --btn: #ffa862; --you: #4a2f1c;
  --round: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "Arial Rounded MT Bold", system-ui, sans-serif;
  --text: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wide: 72rem; --read: 40rem; --navh: 64px;
}
* { box-sizing: border-box; }
html { background: var(--night); color-scheme: dark; scroll-padding-top: calc(var(--navh) + 16px); }
html, body { overflow-x: clip; }      /* the phones' glow may reach past the edge; the page never gets wider than the screen */
body { margin: 0; color: var(--cream); font: 17px/1.6 var(--text); -webkit-font-smoothing: antialiased;
  /* the only light on the page is Ember's: a warm pool near the top that fades as you read down */
  background: radial-gradient(80rem 50rem at 50% 12rem, #ff8a3a26, #ff8a3a0a 45%, transparent 70%) no-repeat, var(--night); }
a { color: var(--glow); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; border-radius: 10px; }
img { max-width: 100%; display: block; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--btn); color: #2a1a0c; padding: 8px 14px; border-radius: 10px; z-index: 50; }
.skip:focus { left: 12px; }

/* ---------------------------------------------------------------- the header */
.nav { position: sticky; top: 0; z-index: 20; background: #1b120ce6; border-bottom: 1px solid transparent; transition: border-color .2s;
  padding-top: env(safe-area-inset-top); }
.nav.scrolled { border-bottom-color: var(--edge2); }
.navin { max-width: var(--wide); margin: 0 auto; height: var(--navh); display: flex; align-items: center; gap: 28px; padding: 0 22px; }
.brand { display: flex; align-items: center; gap: 9px; color: var(--cream); text-decoration: none; font: 800 25px/1 var(--round); letter-spacing: -.02em; padding-bottom: 3px; }
.brand svg { width: 32px; height: 38px; overflow: visible; }
.brand { text-transform: none; }
.navlinks { display: flex; gap: 6px; }
.navlinks a { color: var(--ash); text-decoration: none; font: 600 15.5px/1 var(--round); padding: 10px 12px; border-radius: 999px; }
.navlinks a:hover { color: var(--cream); }
.navlinks a[aria-current="page"] { color: var(--cream); background: var(--char); }
.navend { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.login { color: var(--cream); text-decoration: none; font: 600 15.5px/1 var(--round); padding: 10px 12px; }
.cta { background: var(--btn); color: #2a1a0c; text-decoration: none; font: 700 15.5px/1 var(--round); padding: 11px 18px; border-radius: 999px; white-space: nowrap; }
.cta:hover { background: #ffb57a; }
.menubtn { display: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--edge2); background: var(--char); color: var(--cream); cursor: pointer; padding: 0; }
.menubtn svg { width: 20px; height: 20px; display: block; margin: auto; stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; }
.menubtn[aria-expanded="true"] .open, .menubtn[aria-expanded="false"] .shut { display: none; }
.navmenu { display: none; }
@media (max-width: 860px) {
  .navlinks, .navend .login { display: none; }
  .navin { gap: 12px; padding: 0 16px; }
  .menubtn { display: block; }
  .navmenu { position: fixed; inset: calc(var(--navh) + env(safe-area-inset-top)) 0 auto 0; background: var(--night); border-bottom: 1px solid var(--edge2);
    padding: 8px 16px 20px; flex-direction: column; box-shadow: 0 24px 40px #00000066; }
  .navmenu.on { display: flex; }
  .navmenu a { color: var(--cream); text-decoration: none; font: 650 19px/1 var(--round); padding: 15px 6px; border-bottom: 1px solid var(--edge); }
  .navmenu a[aria-current="page"] { color: var(--glow); }
  .navmenu a:last-child { border-bottom: 0; }
}

/* ---------------------------------------------------------------- shared pieces */
.wrap { max-width: var(--wide); margin-left: auto; margin-right: auto; padding-left: 22px; padding-right: 22px; }
.read { max-width: var(--read); margin-left: auto; margin-right: auto; padding-left: 22px; padding-right: 22px; }
h1, h2, h3 { font-family: var(--round); text-wrap: balance; }
h1 { font-weight: 800; font-size: clamp(36px, 6.4vw, 62px); line-height: 1.04; letter-spacing: -.025em; margin: 0 0 18px; }
h2 { font-weight: 800; font-size: clamp(27px, 4.2vw, 38px); line-height: 1.12; letter-spacing: -.015em; margin: 0 0 12px; }
h3 { font-weight: 750; font-size: 20px; line-height: 1.25; margin: 0 0 6px; }
.lede { color: var(--ash); font-size: 19px; line-height: 1.55; margin: 0 0 28px; text-wrap: pretty; max-width: 34em; }
.intro { color: var(--ash); margin: 0 0 28px; max-width: 34em; }
.pagehead { padding-top: 64px; padding-bottom: 24px; }
.pagehead .lede { margin-bottom: 0; }
section { padding-top: 56px; padding-bottom: 56px; }
.go { display: inline-flex; align-items: center; gap: 11px; background: var(--btn); color: #2a1a0c; text-decoration: none;
  font: 700 17px/1 var(--text); padding: 16px 26px; border-radius: 999px; box-shadow: 0 10px 30px #ff8a3a40; }
.go svg { background: #fff; border-radius: 50%; padding: 4px; width: 26px; height: 26px; flex: none; }
.go:hover { background: #ffb57a; }
.small { color: var(--ash); font-size: 14.5px; margin: 14px 0 0; }
.more { font: 650 16px var(--round); text-decoration: none; }
.more:hover { text-decoration: underline; }

/* a phone with a real screenshot of the app in it */
.phone { position: relative; width: min(300px, 78vw); margin: 0 auto; flex: none; }
.phone::before { content: ""; position: absolute; inset: -18% -30%; pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, #ff9a4d40, #ff8a3a14 60%, transparent); }
.phone .screen { border-radius: 42px; border: 9px solid #0d0806; outline: 1px solid #5a432f; background: #0d0806; overflow: hidden;
  box-shadow: 0 30px 60px #00000080, 0 0 0 1px #ffffff0d inset; aspect-ratio: 390 / 844; }
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.phone figcaption { text-align: center; color: var(--ash); font-size: 14px; margin-top: 16px; }

/* a conversation, as chat bubbles */
.week { list-style: none; margin: 0; padding: 0; position: relative; }
.week::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 26px; width: 2px; background: linear-gradient(var(--flame), #ff9a4d00); opacity: .55; }
.day { position: relative; padding: 0 0 30px 34px; }
.day::before { content: ""; position: absolute; left: 0; top: 5px; width: 16px; height: 16px; border-radius: 50%; background: var(--night); border: 3px solid var(--flame); }
.when { font: 700 15px/1.3 var(--round); color: var(--glow); margin: 0 0 12px; }
.when span { color: var(--ash); font: 400 14px var(--text); margin-left: 6px; }
.msg { max-width: min(30em, 86%); padding: 10px 15px; border-radius: 20px; margin: 0 0 8px; width: fit-content; font-size: 16px; line-height: 1.5; }
.msg.you { margin-left: auto; background: var(--you); border-bottom-right-radius: 6px; }
.msg.ember { background: var(--char); border: 1px solid var(--edge); border-bottom-left-radius: 6px; }
.goal { display: inline-block; margin: 2px 0 8px; padding: 9px 14px; border-radius: 14px; border: 1px dashed #ff9a4d88; color: var(--glow); font-size: 15px; }
.goal b { color: var(--cream); }
.checks { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 10px; }
.checks span { padding: 8px 15px; border-radius: 999px; background: var(--char); border: 1px solid var(--edge); font-size: 15px; color: var(--ash); }
.checks .on { background: var(--btn); color: #2a1a0c; border-color: var(--btn); font-weight: 650; }
.xp { display: inline-block; font: 700 14px var(--round); color: #2a1a0c; background: var(--glow); border-radius: 999px; padding: 3px 11px; margin-left: 4px; vertical-align: 1px; }

/* a story beside a phone (two columns on wide screens) */
.split { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 64px; align-items: center; }
.split.flip { grid-template-columns: auto minmax(0, 1fr); }
.split.flip > :first-child { order: 2; }
@media (max-width: 860px) { .split, .split.flip { grid-template-columns: 1fr; gap: 40px; } .split.flip > :first-child { order: 0; } }

/* questions that open */
.faq { border-top: 1px solid var(--edge2); }
.faq details { border-bottom: 1px solid var(--edge2); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; font: 700 18px/1.35 var(--round); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 26px; width: 10px; height: 10px; border-right: 2px solid var(--glow); border-bottom: 2px solid var(--glow); transform: rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translate(0, 4px) rotate(225deg); }
.faq details > div { color: var(--ash); padding: 0 0 20px; max-width: 38em; }
.faq details > div p { margin: 0 0 10px; }
.faq h2 { font-size: 22px; margin: 44px 0 4px; color: var(--glow); }
.faq h2:first-child { margin-top: 0; }

/* plans */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 54rem; }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } }
.plan { background: var(--char); border: 1px solid var(--edge2); border-radius: 28px; padding: 28px; display: flex; flex-direction: column; }
.plan.plus { border-color: #ff9a4d99; box-shadow: 0 20px 50px #ff8a3a1f; }
.plan h3 { font-size: 22px; margin: 0 0 4px; }
.plan .for { color: var(--ash); margin: 0 0 18px; font-size: 15.5px; }
.price { font: 800 44px/1 var(--round); letter-spacing: -.02em; margin: 0 0 4px; }
.price small { font: 500 16px var(--text); color: var(--ash); letter-spacing: 0; margin-left: 4px; }
.priceNote { color: var(--ash); font-size: 14.5px; margin: 0 0 20px; min-height: 1.6em; }
.plan ul { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; }
.plan li { padding: 7px 0 7px 30px; position: relative; }
.plan li::before { content: ""; position: absolute; left: 4px; top: 14px; width: 12px; height: 7px; border-left: 2.5px solid var(--flame); border-bottom: 2.5px solid var(--flame); transform: rotate(-45deg); }
.plan .go { align-self: flex-start; }
.plan .ghost { display: inline-flex; align-self: flex-start; color: var(--cream); text-decoration: none; font: 700 17px/1 var(--text); padding: 16px 24px; border-radius: 999px; border: 1px solid var(--edge2); }
.plan .ghost:hover { border-color: var(--ash); }
.toggle { display: inline-flex; align-self: flex-start; background: var(--night); border: 1px solid var(--edge2); border-radius: 999px; padding: 4px; margin: 0 0 18px; }
.toggle button { border: 0; background: none; color: var(--ash); font: 650 15px/1 var(--round); padding: 9px 14px; border-radius: 999px; cursor: pointer; }
.toggle button[aria-pressed="true"] { background: var(--btn); color: #2a1a0c; }
.toggle .save { font-size: 12.5px; opacity: .85; margin-left: 4px; }

/* the last call: Ember itself */
.end { text-align: center; padding: 72px 0 40px; }
.end h2 { margin-bottom: 10px; }
.end p { color: var(--ash); margin: 0 auto 26px; max-width: 30em; }
.creature { width: 150px; height: 150px; margin: 0 auto 22px; display: block; background: none; border: 0; padding: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent; position: relative; }
.creature::before { content: ""; position: absolute; inset: -50px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, #ffb36b55, #ff8a3a22 55%, transparent); }
.creature svg { position: relative; width: 100%; height: 100%; overflow: visible; }
.body { transform-origin: 50% 90%; transform-box: view-box; animation: breathe 4.2s ease-in-out infinite; }
.eyes { transform-origin: center; transform-box: fill-box; animation: blink 5.6s 1s infinite; }
.creature.hop .body { animation: hop .55s cubic-bezier(.3, 1.6, .5, 1); }
.creature.hop .smile { d: path("M214 330 Q256 372 298 330"); }
.smile { transition: d .3s; }
@keyframes blink { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.025, .985); } }
@keyframes hop { 0% { transform: none; } 35% { transform: translateY(-26px) scale(.97, 1.04); } 70% { transform: translateY(2px) scale(1.04, .96); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .body, .eyes, .creature.hop .body { animation: none; } }

/* long reading pages: privacy and terms */
.doc { max-width: 44rem; margin: 0 auto; padding: 48px 22px 40px; }
.doc h1 { font-size: clamp(32px, 5vw, 44px); margin-bottom: 6px; }
.doc h2 { font-size: 21px; color: var(--glow); margin: 34px 0 6px; }
.doc h3 { font-size: 17px; margin: 20px 0 4px; }
.doc p, .doc li { color: var(--cream); }
.doc .dim { color: var(--ash); }
.doc ul { padding-left: 20px; }
.doc .plus { background: var(--char); border: 1px solid var(--edge2); border-radius: 20px; padding: 4px 22px 12px; margin-top: 28px; }

/* ---------------------------------------------------------------- the footer */
.foot { border-top: 1px solid var(--edge2); margin-top: 40px; padding: 48px 0 calc(36px + env(safe-area-inset-bottom)); color: var(--ash); font-size: 15px; }
.footin { max-width: var(--wide); margin: 0 auto; padding: 0 22px; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.foot .brand { margin-bottom: 12px; color: var(--cream); }
.foot .brand:hover { text-decoration: none; }
.foot p { margin: 0; max-width: 22em; }
.foot h2 { font: 700 14px/1 var(--round); color: var(--cream); margin: 4px 0 14px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin: 0 0 10px; }
.foot a { color: var(--ash); text-decoration: none; }
.foot a:hover { color: var(--cream); text-decoration: underline; }
.foot .copy { max-width: var(--wide); margin: 36px auto 0; padding: 20px 22px 0; border-top: 1px solid var(--edge); font-size: 13.5px; }
@media (max-width: 760px) { .footin { grid-template-columns: 1fr 1fr; } .footin > :first-child { grid-column: 1 / -1; } }