/* getstack.to — Stack's own small site.
   Colours are the app's tokens (stack-app src/styles/base.css, generated hex),
   the same ones the landing page uses; dark is the app's dark theme.
   Type is the landing page's: the system face (SF on Apple devices). The
   wordmark is drawn as outlines, so it never depends on a font. */

:root {
  --canvas: #f4f1ea;
  --card: #fffdf9;
  --tint: #edeae4;
  --line: #e4e1db;
  --ink: #0a0e14;
  --on-ink: #f4f1ea;
  --ink-soft: #5f6470;
  --ink-faint: #686d78;
  --body: #2b2f38;
  --steel: #3d6584;
  --coral: #ff5a45;
  --bar: rgba(244, 241, 234, .8);
  --hairline: rgba(10, 14, 20, .10);
  --tile-ring: transparent;
  --tile-shadow: rgba(10, 14, 20, .35);
  --footer: #edeae4;
  color-scheme: light;
}


*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--canvas); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--canvas); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 1.0625rem; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
main { flex: 1; }
h1, h2, h3, p, ul { margin: 0; }
a { color: var(--steel); text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--steel); outline-offset: 3px; border-radius: 8px; }
.lockup { display: block; flex: none; }

.wrap {
  width: 100%; max-width: 1180px; margin: 0 auto;
  padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
}
@media (min-width: 640px) { .wrap { padding: 0 32px; } }

/* The bar: the landing page's frosted bar, the lockup on the left. */
.bar {
  position: sticky; top: 0; z-index: 10; background: var(--bar);
  -webkit-backdrop-filter: saturate(1.6) blur(30px); backdrop-filter: saturate(1.6) blur(30px);
  border-bottom: 1px solid var(--hairline); padding-top: env(safe-area-inset-top);
}
.bar .wrap { display: flex; align-items: center; height: 56px; }
.brand { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; min-height: 44px; }

/* HOME: the icon, the name, the line. */
.hero { text-align: center; padding: 88px 0 112px; }
@media (min-width: 900px) { .hero { padding: 144px 0 176px; } }
.tile { display: block; width: 96px; height: 96px; margin: 0 auto 32px; border-radius: 26%;
  box-shadow: 0 0 0 1px var(--tile-ring), 0 18px 40px -18px var(--tile-shadow); }
.hero h1 { font-size: clamp(2.25rem, 7.4vw, 4rem); line-height: 1.04; letter-spacing: -.035em; font-weight: 800;
  max-width: 16ch; margin: 0 auto; text-wrap: balance; }
.hero .line { font-size: clamp(1.25rem, 2.3vw, 1.5rem); line-height: 1.4; color: var(--ink-soft);
  max-width: 32ch; margin: 24px auto 0; text-wrap: balance; }
.hero .soon { margin-top: 32px; color: var(--ink-faint); font-size: 1rem; font-weight: 600; }

/* TEXT PAGES: privacy, support, 404. A comfortable reading measure. */
.page { width: 100%; max-width: 680px; margin: 0 auto; padding: 56px 16px 96px; }
@media (min-width: 640px) { .page { padding: 80px 32px 128px; } }
.page h1 { font-size: clamp(2rem, 6vw, 2.75rem); line-height: 1.08; letter-spacing: -.03em; font-weight: 800; }
.page .sub { margin-top: 16px; color: var(--ink-soft); }
.page p, .page li { color: var(--body); }
.page h2 { font-size: 1.25rem; letter-spacing: -.01em; font-weight: 800; margin: 48px 0 16px; color: var(--ink); }
.page h3 { font-size: 1.0625rem; font-weight: 700; margin: 28px 0 8px; color: var(--ink); }
.page p + p, .page p + ul, .page ul + p { margin-top: 14px; }
.page ul { padding-left: 22px; }
.page li + li { margin-top: 10px; }
.page strong { color: var(--ink); font-weight: 650; }

/* Support: three short lines, then the privacy link. */
.support p { font-size: 1.1875rem; line-height: 1.5; }
.support h1 + p { margin-top: 28px; }
.support .more { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--hairline); font-size: 1rem; }

/* Privacy: the short version, then each section closed until tapped. */
.privacy .short { padding-left: 0; list-style: none; }
.privacy .short li { padding-left: 16px; border-left: 2px solid var(--line); }
.privacy .hint { color: var(--ink-soft); font-size: 1rem; margin-bottom: 16px; }
.privacy details { border-top: 1px solid var(--hairline); }
.privacy details:last-of-type { border-bottom: 1px solid var(--hairline); }
.privacy summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 56px; padding: 14px 2px; font-size: 1.0625rem; font-weight: 700; color: var(--ink); }
.privacy summary::-webkit-details-marker { display: none; }
.privacy summary svg { flex: none; color: var(--ink-faint); transition: transform .2s ease; }
.privacy details[open] summary svg { transform: rotate(45deg); }
.privacy details > :not(summary) { margin-left: 2px; margin-right: 2px; }
.privacy details[open] { padding-bottom: 24px; }
.privacy .updated { margin-top: 40px; font-size: 1rem; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .privacy summary svg { transition: none; } }
@media print { .privacy details > :not(summary) { display: block !important; } .bar { position: static; } }

/* 404 */
.lost { text-align: center; padding-top: 112px; }
.lost p { margin-top: 20px; }

/* FOOTER: the landing page's: the lockup and the links, a hairline, the fine print. */
footer { background: var(--footer); padding: 40px 0 calc(40px + env(safe-area-inset-bottom)); color: var(--ink-faint); }
footer .foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--hairline); }
footer .foot-links { display: flex; gap: 24px; font-size: .9375rem; font-weight: 600; }
footer .foot-links a { color: var(--ink-soft); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
footer .foot-links a[aria-current="page"] { color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  footer .foot-links a:hover { color: var(--ink); }
  a:hover { text-decoration-thickness: 2px; }
}
footer .fine-print { padding-top: 20px; font-size: .9375rem; line-height: 1.5; }