/* crewtale.com: the landing page (home) and the privacy and terms pages (doc). Tokens and the app icon come from /mockup.css. */
html { background: #000; -webkit-text-size-adjust: 100%; }
body { background: #000; color: var(--label); font-family: var(--font); letter-spacing: -.011em; font-optical-sizing: auto; }
img, svg { display: block; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
/* no lonely last words: headings balance their lines, text avoids a single word on the last one */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
.lockup { display: inline-flex; align-items: center; gap: 10px; color: var(--label); }
.foot { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; font-size: 14px; line-height: 19px; color: var(--label-2); }
.foot span { color: var(--label-3); }
/* every tap answers: 96% and 80% in 100 ms, and at least 44 pt to hit */
a.lockup, .foot a, a.appstore { transition: transform .1s cubic-bezier(.23, 1, .32, 1), opacity .1s; }
a.lockup:active, .foot a:active, a.appstore:active { transform: scale(.96); opacity: .8; }
.foot a { display: inline-block; padding: 12px 0; }
.foot a:hover { color: var(--label); }

/* ---------- the landing page: the app's Welcome screen, as a page ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.photo { position: absolute; left: 0; right: 0; top: 0; height: 83%; overflow: hidden; background: #000; }
.photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transform: scale(1.03); animation: drift 22s ease-in-out infinite alternate; }
@keyframes drift { to { transform: scale(1.09) translate(-6px, -6px); } }
/* the same fade as the app's Welcome photo: a little dark under the clock, clear through the middle, black at the bottom */
.photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.3) 0, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 55%, rgba(0,0,0,.6) 80%, #000 100%); }
.copy { position: relative; padding: 0 20px calc(env(safe-area-inset-bottom) + 12px); animation: rise .5s cubic-bezier(.23, 1, .32, 1) .25s both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.copy h1 { margin: 16px 0 0; font-size: 34px; line-height: 38px; font-weight: 700; letter-spacing: -.04em; }
.lede { margin: 10px 0 0; font-size: 16px; line-height: 22px; color: var(--label-2); }
.store { margin: 22px 0 0; }
/* not in the App Store yet: a quiet badge, not a button (nothing to tap); site.js makes it the white button once config.js has the store link */
.soon { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 12px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.13); color: var(--label); font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.store .appstore { margin-top: 0; }
.store svg { flex: none; }
.home .foot { margin-top: 10px; }

@media (min-width: 900px) {
  .photo { height: 100%; }
  .photo img { object-position: 50% 16%; }   /* the sunset and the first bends */
  .photo::after { background: linear-gradient(90deg, rgba(0,0,0,.82) 0, rgba(0,0,0,.45) 34%, rgba(0,0,0,0) 62%), linear-gradient(180deg, rgba(0,0,0,.3) 0, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 60%, rgba(0,0,0,.7) 100%); }
  .copy { max-width: 620px; padding: 0 72px 56px; }
  .copy h1 { margin-top: 22px; font-size: 56px; line-height: 60px; }
  .lede { margin-top: 14px; font-size: 19px; line-height: 27px; max-width: 480px; }
  .store { margin-top: 28px; }
  .home .foot { margin-top: 18px; }
}

/* ---------- privacy and terms ---------- */
.top, .legal, .end { max-width: 720px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.top { padding-top: calc(env(safe-area-inset-top) + 8px); }
.top .lockup { padding: 8px 0; }
.legal { padding-bottom: 32px; }
.legal h1 { margin: 26px 0 0; font-size: 34px; line-height: 40px; font-weight: 700; letter-spacing: -.035em; }
.legal h2 { margin: 40px 0 0; font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -.025em; scroll-margin-top: 16px; }
.legal h3 { margin: 26px 0 0; font-size: 17px; line-height: 22px; font-weight: 650; letter-spacing: -.02em; }
.legal p, .legal li { font-size: 16px; line-height: 24px; color: rgba(235,235,245,.8); }
.legal p { margin: 12px 0 0; }
.legal ul { margin: 12px 0 0; padding-left: 20px; }
.legal li { margin-top: 8px; }
.legal li::marker { color: var(--label-3); }
.legal strong { color: var(--label); font-weight: 650; }
.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.legal a:active { opacity: .6; }
.legal code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .88em; padding: 1px 5px; border-radius: 6px; background: rgba(255,255,255,.08); }
/* a gap only the operator can fill: it stays visible until it's filled in the draft */
.legal mark { padding: 1px 6px; border-radius: 6px; background: var(--accent-soft); color: #FFC4A6; font-weight: 600; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.tbl { margin: 16px -20px 0; padding: 0 20px; overflow-x: auto; }
.tbl table { width: 100%; min-width: 520px; border-collapse: collapse; }
.tbl th { padding: 0 14px 8px 0; text-align: left; vertical-align: bottom; font-size: 12px; line-height: 16px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--label-2); }
.tbl td { padding: 11px 14px 11px 0; vertical-align: top; border-top: .5px solid var(--sep); font-size: 14px; line-height: 20px; color: rgba(235,235,245,.8); }
.tbl td:first-child { color: var(--label); font-weight: 550; }
/* on a phone each row stacks: what it's about, then each column's value under its own small label */
@media (max-width: 600px) {
  .tbl { margin: 14px 0 0; padding: 0; overflow: visible; }
  .tbl table, .tbl tbody, .tbl tr, .tbl td { display: block; min-width: 0; }
  .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tbl tr { padding: 12px 0; border-top: .5px solid var(--sep); }
  .tbl td { padding: 0; border: 0; font-size: 15px; line-height: 21px; }
  .tbl td + td { margin-top: 8px; }
  .tbl td + td::before { content: attr(data-label); display: block; margin-bottom: 1px; font-size: 11.5px; line-height: 16px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--label-2); }
}
.end { padding-bottom: calc(env(safe-area-inset-bottom) + 28px); }
.end .foot { padding-top: 6px; border-top: .5px solid var(--sep); }

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