/* Two-edged Sword: the product page (site/index.html). Dark only, like the hero screenshots. */

/* The fonts come with the site (site/fonts/, with their OFL licences), so the page paints in them at once. */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(fonts/atkinson-hyperlegible-next.woff2) format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url(fonts/atkinson-hyperlegible-next-italic.woff2) format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/eb-garamond-greek.woff2) format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/eb-garamond-greek-ext.woff2) format("woff2");
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/eb-garamond-latin.woff2) format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --page: #07090c;
  --band: #0d1117;
  --panel: #161b22;
  --line: rgba(255, 255, 255, 0.08);
  --text: #e6edf3;
  --muted: #9aa4af;
  --faint: #5b6470;
  --gold: #c6974a;
  --gold-soft: rgba(198, 151, 74, 0.18);
  --blue: #58a6ff;
  --blue-deep: #1f6feb;
  --display: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --ui: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --greek: "EB Garamond", Garamond, "Iowan Old Style", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --wrap: 1120px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: 17px/1.55 var(--ui);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img {
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
a:focus-visible,
button:focus-visible,
li:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}
h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.025em;
}
p {
  margin: 0;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

/* Top bar */
.top {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 52px;
  padding: 0 24px;
  background: rgba(7, 9, 12, 0.72);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.brand img {
  border-radius: 7px;
}
.top nav {
  display: flex;
  align-items: center;
  gap: 26px;
  color: var(--muted);
}
.top nav a:hover {
  color: var(--text);
}
.top .pill {
  color: var(--text);
  background: var(--blue-deep);
  padding: 5px 13px;
  border-radius: 999px;
}
.top .pill:hover {
  background: var(--blue);
  color: #0d1117;
}
@media (max-width: 720px) {
  .top nav a:not(.pill) {
    display: none;
  }
}

/* Hero */
.hero {
  text-align: center;
  padding: clamp(56px, 9vw, 110px) 24px 0;
  overflow: hidden;
}
.verse-ref {
  color: var(--faint);
  font-size: 13px;
  letter-spacing: 0.04em;
  margin-bottom: 26px;
  animation: rise 0.8s var(--ease) both;
}

.interlinear {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 10px 26px;
  max-width: 980px;
  margin: 0 auto;
  font-family: var(--display);
}
.interlinear span {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  animation: rise 0.8s var(--ease) both;
}
.interlinear b {
  font-family: var(--greek);
  font-weight: 400;
  font-size: clamp(26px, 3.6vw, 44px);
  color: var(--text);
}
.interlinear i {
  font-style: normal;
  font-family: var(--ui);
  font-size: 12px;
  color: var(--muted);
  margin-top: 9px;
  letter-spacing: 0.02em;
}
.interlinear u {
  text-decoration: none;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--faint);
  margin-top: 5px;
}
.interlinear .gold b {
  color: var(--gold);
}
.interlinear .gold i {
  color: var(--gold);
}
.interlinear span:nth-child(1) {
  animation-delay: 0.06s;
}
.interlinear span:nth-child(2) {
  animation-delay: 0.12s;
}
.interlinear span:nth-child(3) {
  animation-delay: 0.18s;
}
.interlinear span:nth-child(4) {
  animation-delay: 0.24s;
}
.interlinear span:nth-child(5) {
  animation-delay: 0.3s;
}
.interlinear span:nth-child(6) {
  animation-delay: 0.36s;
}
.interlinear span:nth-child(7) {
  animation-delay: 0.42s;
}
.interlinear span:nth-child(8) {
  animation-delay: 0.48s;
}
.interlinear span:nth-child(9) {
  animation-delay: 0.54s;
}
.interlinear span:nth-child(10) {
  animation-delay: 0.6s;
}
.interlinear span:nth-child(11) {
  animation-delay: 0.66s;
}
.interlinear span:nth-child(12) {
  animation-delay: 0.72s;
}
.interlinear span:nth-child(13) {
  animation-delay: 0.78s;
}
.interlinear span:nth-child(14) {
  animation-delay: 0.84s;
}

.hero h1 {
  font-size: clamp(40px, 8vw, 96px);
  line-height: 1;
  letter-spacing: -0.035em;
  margin-top: clamp(44px, 6vw, 72px);
  animation: rise 0.8s var(--ease) 0.3s both;
}
.hero .tagline {
  animation: rise 0.8s var(--ease) 0.36s both;
}
.hero .actions {
  animation: rise 0.8s var(--ease) 0.42s both;
}
.hero .fine {
  animation: rise 0.8s var(--ease) 0.48s both;
}
.tagline {
  font-size: clamp(18px, 2.2vw, 23px);
  color: var(--muted);
  max-width: 640px;
  margin: 22px auto 0;
  line-height: 1.45;
}
.actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 34px;
}
.fine {
  color: var(--faint);
  font-size: 14px;
  margin-top: 16px;
}

.button {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  transition:
    background 0.2s,
    border-color 0.2s;
}
.button:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.16);
}
.button.primary {
  background: var(--blue-deep);
  border-color: transparent;
  color: #fff;
}
.button.primary:hover {
  background: var(--blue);
  color: #0d1117;
}

.stage {
  perspective: 1600px;
  margin: clamp(48px, 7vw, 88px) auto 0;
  max-width: 1180px;
}
.hero-shot {
  transform-origin: 50% 0;
  animation: settle 1.2s var(--ease) 0.55s both;
}
@keyframes settle {
  from {
    opacity: 0;
    transform: rotateX(14deg) translateY(30px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.hero-shot img {
  display: block;
}
.hero .stage::after {
  content: "";
  display: block;
  height: 1px;
}
.hero {
  background:
    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(31, 111, 235, 0.14), transparent 70%),
    radial-gradient(ellipse 40% 30% at 50% 36%, rgba(198, 151, 74, 0.08), transparent 70%);
}

/* Screenshots */
.shot {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: var(--band);
  border: 1px solid var(--line);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 30px 90px -30px rgba(0, 0, 0, 0.9),
    0 10px 30px -10px rgba(0, 0, 0, 0.6);
}
.shot:not(.loaded)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.06) 50%, transparent 70%) 0 0 / 220% 100%;
  animation: shimmer 1.6s linear infinite;
  pointer-events: none;
}
@keyframes shimmer {
  from {
    background-position: 120% 0;
  }
  to {
    background-position: -120% 0;
  }
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
}
.shot.swap {
  aspect-ratio: 1400 / 875;
}
.shot.swap img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}
.shot.swap img.on {
  opacity: 1;
}
.tour .shot:not(.swap) img {
  transition: transform 1.6s var(--ease);
  will-change: transform;
}

/* Sections */
.feature {
  padding: clamp(80px, 11vw, 150px) 0;
}
.band {
  background: var(--band);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.band + .band {
  border-top: 0;
}

.lede {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(40px, 5vw, 64px);
}
.lede h2 {
  font-size: clamp(32px, 4.4vw, 54px);
  line-height: 1.08;
}
.text h2 {
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.12;
}
.lede p {
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--muted);
  margin-top: 22px;
  line-height: 1.5;
}

.split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.split.flip {
  grid-template-columns: 7fr 5fr;
}
.split.flip > .text {
  order: 2;
}
.split .text p {
  color: var(--muted);
  font-size: clamp(16px, 1.4vw, 18px);
  margin-top: 18px;
}
.split .text h3 {
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.15;
}
.note {
  color: var(--faint) !important;
  font-size: 15px !important;
  border-left: 2px solid var(--gold-soft);
  padding-left: 14px;
}
@media (max-width: 860px) {
  .split,
  .split.flip {
    grid-template-columns: 1fr;
  }
  .split.flip > .text {
    order: 0;
  }
}

/* The zoom tour: a screenshot and its steps; the current step zooms the picture or swaps it */
.tour.tabs-above {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.steps {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.steps li {
  position: relative;
  cursor: pointer;
  padding: 12px 14px 14px;
  border-radius: 10px;
  color: var(--faint);
  font-size: 14.5px;
  line-height: 1.4;
  transition:
    color 0.3s,
    background 0.3s;
}
.steps li:hover {
  color: var(--muted);
}
.steps li.on {
  color: var(--text);
  background: rgba(255, 255, 255, 0.035);
}
.steps li::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.steps li.on::after {
  animation: bar var(--dur, 4s) linear forwards;
}
.tour.paused .steps li.on::after {
  animation-play-state: paused;
}
@keyframes bar {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.steps.tabs {
  margin: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
}
.steps.tabs li {
  padding: 9px 18px 11px;
  border-radius: 999px;
  font-size: 15px;
}
.steps.tabs li.on {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}
.steps.tabs li::after {
  left: 18px;
  right: 18px;
  bottom: 4px;
}
.tabcap {
  text-align: center;
  color: var(--muted);
  font-size: 15.5px;
  max-width: 680px;
  margin: 0 auto;
  min-height: 3.2em;
  transition: opacity 0.4s;
}
.tabcap.fading {
  opacity: 0;
}

.split .tour .steps {
  grid-template-columns: 1fr;
}

/* The spoken verse beside Listen */
.spoken {
  margin: 30px 0 0;
  padding: 22px 24px 18px;
  border-radius: 14px;
  background: var(--page);
  border: 1px solid var(--line);
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.55;
  color: var(--muted);
}
.spoken span {
  border-radius: 4px;
  padding: 0 3px;
  margin: 0 -3px;
  transition:
    background 0.25s,
    color 0.25s;
}
.spoken span.said {
  color: var(--text);
}
.spoken span.now {
  background: rgba(88, 166, 255, 0.28);
  color: #fff;
}
.spoken cite {
  display: block;
  font-family: var(--ui);
  font-style: normal;
  font-size: 13px;
  color: var(--faint);
  margin-top: 14px;
}

/* Facts under Ask, and the pillars */
.facts {
  list-style: none;
  margin: 56px auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 28px 36px;
  max-width: 1040px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.5;
}
.facts strong {
  display: block;
  color: var(--text);
  font-weight: 500;
  margin-bottom: 4px;
}

.pillars {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}
.pillars li {
  background: var(--band);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 26px 30px;
}
.pillars h3 {
  font-size: 22px;
  line-height: 1.2;
}
.pillars p {
  color: var(--muted);
  font-size: 15.5px;
  margin-top: 12px;
  line-height: 1.5;
}

/* The menu bar part of Quiet time */
.split.tray {
  margin-top: clamp(64px, 8vw, 110px);
  grid-template-columns: 4fr 7fr;
}
.split.tray figure {
  margin: 0;
  display: flex;
  justify-content: center;
}
.tray-shot {
  width: min(100%, 340px);
  border-radius: 16px;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9);
}
@media (max-width: 860px) {
  .split.tray {
    grid-template-columns: 1fr;
  }
}

/* Download */
.download {
  text-align: center;
  padding: clamp(80px, 11vw, 150px) 0;
}
.big-icon {
  border-radius: 22px;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.9);
}
.download h2 {
  font-size: clamp(36px, 5vw, 60px);
  margin-top: 26px;
  letter-spacing: -0.03em;
}
.firstrun {
  text-align: left;
  max-width: 560px;
  margin: 44px auto 0;
  padding: 0 0 0 22px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.5;
}
.firstrun li {
  margin-top: 10px;
  padding-left: 6px;
}
.firstrun li::marker {
  color: var(--gold);
}

footer {
  padding: 48px 0 56px;
  color: var(--faint);
  font-size: 14px;
  line-height: 1.6;
}
footer p {
  max-width: 720px;
}
footer a {
  color: var(--muted);
}
footer a:hover {
  color: var(--text);
}
footer .links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 22px;
}
footer .small {
  margin-top: 18px;
  font-size: 13px;
}

/* Entrances: screenshots rise as they come into view */
.js .rise {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 1s var(--ease),
    transform 1.1s var(--ease);
}
.js .rise.in {
  opacity: 1;
  transform: none;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .interlinear span,
  .verse-ref,
  .hero h1,
  .hero .tagline,
  .hero .actions,
  .hero .fine,
  .hero-shot,
  .shot:not(.loaded)::before {
    animation: none;
  }
  .js .rise {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .tour .shot:not(.swap) img,
  .shot.swap img,
  .spoken span {
    transition: none;
  }
  .steps li.on::after {
    animation: none;
    transform: scaleX(1);
  }
}