/* Shunyata Apps, shared stylesheet.
   One place for every page. Edit here, not in the pages. */

:root {
  --bg: #FCFCFA;
  --ink: #111111;
  --body: #666666;
  --app-body: #77776F;
  --hairline: #EBEBE7;
  --faint: #B0B0AA;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Google Sans Flex", "Google Sans", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.page {
  max-width: clamp(640px, 60vw, 920px);
  margin: 0 auto;
  padding: clamp(56px, 8vh, 110px) 24px 56px;
}

/* ---- HEADINGS AND LEAD TEXT ---- */
h1 { font-size: clamp(32px, 3.2vw, 56px); font-weight: 800; letter-spacing: -1px; line-height: 1.05; }
.tagline, .intro { font-size: clamp(15px, 1.15vw, 19px); color: var(--body); line-height: 1.75; margin-top: 18px; max-width: 62ch; }
.rule { height: 1px; background: var(--ink); margin-top: 40px; }

/* ---- APP PAGE BODY ---- */
.full { font-size: clamp(14px, 1.05vw, 17px); color: var(--app-body); line-height: 1.85; margin-top: 30px; max-width: 68ch; }
h2 { font-size: clamp(17px, 1.3vw, 21px); font-weight: 700; letter-spacing: -0.2px; margin-top: 38px; }
.howto { font-size: clamp(14px, 1.05vw, 17px); color: var(--app-body); line-height: 1.85; margin-top: 10px; max-width: 68ch; }

/* ---- SPECIFICATION TABLE ---- */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 14px; }
.spec { width: 100%; border-collapse: collapse; font-size: clamp(13px, 1vw, 15px); }
.spec th { text-align: left; font-size: clamp(12px, 0.9vw, 13px); font-weight: 700; letter-spacing: 0.4px; color: var(--ink); padding: 7px 16px 7px 0; border-bottom: 1px solid var(--ink); white-space: nowrap; }
.spec td { padding: 9px 16px 9px 0; border-bottom: 1px solid var(--hairline); vertical-align: top; color: var(--app-body); line-height: 1.65; }
.spec td:first-child { color: var(--ink); white-space: nowrap; }
.spec tr:last-child td { border-bottom: none; }

/* ---- LINKS ---- */
.play { display: inline-block; font-size: clamp(13px, 1vw, 14px); font-weight: 700; color: var(--ink); text-decoration: none; border: 1px solid var(--ink); border-radius: 8px; padding: 9px 18px; margin-top: 20px; }
.play:hover { opacity: 0.55; }

/* ---- INDEX APP LIST ---- */
.app { padding: 32px 0; border-bottom: 1px solid var(--hairline); }
.app h2 { font-size: clamp(19px, 1.5vw, 24px); font-weight: 700; letter-spacing: -0.2px; margin-top: 0; }
.app p { font-size: clamp(14px, 1.05vw, 17px); color: var(--app-body); line-height: 1.85; margin-top: 12px; max-width: 68ch; }
.app .play { margin-top: 16px; }
.readmore { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.readmore:hover { opacity: 0.55; }

/* ---- FOOTERS ---- */
.promise { font-size: clamp(20px, 2vw, 26px); font-weight: 800; letter-spacing: -0.6px; line-height: 1.25; color: var(--ink); max-width: 20ch; margin-top: 56px; }
.cr { font-size: 12px; color: var(--faint); margin-top: 22px; }
.pagefoot { margin-top: 52px; font-size: 12px; color: var(--faint); }
.pagefoot a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.pagefoot a:hover { opacity: 0.55; }
.pagefoot .cr { margin-top: 10px; }

@media (max-width: 480px) {
  .page { padding: 56px 20px 48px; }
  h1 { font-size: 32px; }
}