/* Hourally website: same look as the app. Blue → purple gradient, white type, soft glass. */

:root {
  --blue: #3b78ff;
  --indigo: #5c59f7;
  --violet: #8f59f5;
  --ink: #171a45;
  --white-80: rgba(255, 255, 255, 0.8);
  --white-65: rgba(255, 255, 255, 0.65);
  --glass: rgba(255, 255, 255, 0.13);
  --glass-line: rgba(255, 255, 255, 0.22);
  --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "New York", ui-serif, Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html { background: var(--indigo); }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--text);
  color: #fff;
  background: linear-gradient(135deg, var(--blue) 0%, var(--indigo) 50%, var(--violet) 100%) fixed;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}

/* The two soft glows from the app background. */
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(110px);
  pointer-events: none;
}
body::before { top: -220px; left: -200px; background: rgba(255, 255, 255, 0.22); }
body::after { bottom: -220px; right: -200px; background: rgba(191, 115, 255, 0.45); }

a { color: inherit; }

/* ---------- Wordmark ---------- */

/* "Hourally" is drawn from the app's own font (SF Pro Rounded Semibold, with the clock as the "o"),
   so it looks exactly like the app in every browser. The margins keep it the size of one line of text. */
.wordmark {
  line-height: 1;
  margin: 0;
  white-space: nowrap;
}
.wm, .wm-small {
  display: inline-block;
  vertical-align: top;
  width: auto;
}
.wm { height: 1.1016em; margin: -0.0156em -0.0156em -0.0860em -0.0156em; }
.wm-small { height: 1.1473em; margin: -0.0385em -0.0385em -0.1088em -0.0385em; }

/* ---------- Header ---------- */

.nav {
  max-width: 1040px;
  margin: 0 auto;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav .wordmark { font-size: 26px; text-decoration: none; }
.nav nav { display: flex; gap: 22px; }
.nav nav a {
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  color: var(--white-80);
}
.nav nav a:hover, .nav nav a[aria-current="page"] { color: #fff; }

/* ---------- Home ---------- */

.hero {
  max-width: 760px;
  margin: 0 auto;
  padding: 72px 24px 40px;
  text-align: center;
}
.hero .wordmark { font-size: clamp(64px, 14vw, 116px); }
.tagline {
  font-size: clamp(20px, 3.4vw, 26px);
  font-weight: 500;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, 0.9);
}
.lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--white-80);
  max-width: 540px;
  margin: 18px auto 0;
}
/* Apple's own "Download on the App Store" badge, loaded from Apple and used as Apple asks:
   never changed, tilted or animated, with at least a quarter of its height clear around it. */
.appstore {
  display: inline-block;
  vertical-align: top;
  border-radius: 13px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.appstore img { display: block; height: 60px; width: auto; }
.appstore:active { opacity: 0.8; }
/* If Apple's badge ever fails to load, the link still shows as a plain black button. */
.appstore.no-badge img { display: none; }
.appstore.no-badge::after {
  content: "Download on the App Store";
  display: block;
  padding: 0 24px;
  line-height: 56px;
  border-radius: 14px;
  background: #000;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
}
.get { margin-top: 34px; }
.get .note {
  margin: 16px 0 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--white-80);
}

.steps {
  max-width: 1040px;
  margin: 40px auto 0;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.card {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: 28px;
  padding: 26px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* Step numbers are drawn in the app's rounded font too. */
.card .num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.card h3 { margin: 16px 0 6px; font-size: 20px; }
.card p { margin: 0; color: var(--white-80); line-height: 1.5; }

/* Quotes that slowly fade from one to the next. */
.quotes {
  position: relative;
  height: 90px;
  max-width: 680px;
  margin: 56px auto 0;
  padding: 0 24px;
}
.quotes p {
  position: absolute;
  inset: 0 24px;
  margin: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: rgba(255, 255, 255, 0.62);
  opacity: 0;
  animation: quote 30s infinite;
}
.quotes p:nth-child(2) { animation-delay: 5s; }
.quotes p:nth-child(3) { animation-delay: 10s; }
.quotes p:nth-child(4) { animation-delay: 15s; }
.quotes p:nth-child(5) { animation-delay: 20s; }
.quotes p:nth-child(6) { animation-delay: 25s; }
@keyframes quote {
  0% { opacity: 0; }
  4%, 13% { opacity: 1; }
  17%, 100% { opacity: 0; }
}

/* ---------- Features ---------- */

.feature {
  max-width: 1040px;
  margin: 96px auto 0;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 56px;
}
.feature.flip .feature-copy { order: 2; }
.eyebrow {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white-80);
}
.feature h2, .plus h2 {
  margin: 0;
  font-size: clamp(34px, 5vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  /* Even line breaks, so a word never sits alone on the last line. */
  text-wrap: balance;
}
.feature-copy > p:last-child {
  margin: 18px 0 0;
  max-width: 470px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--white-80);
  text-wrap: pretty;
}
.plus-pill {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff;
  color: var(--indigo);
  letter-spacing: 0.1em;
  font-size: 12px;
}

/* The time's-up screen, drawn like the real one: title, the quote, who said it, when it opens. */
.phone {
  position: relative;
  justify-self: center;
  width: 270px;
  aspect-ratio: 9 / 19.5;
  border-radius: 44px;
  padding: 9px;
  background: #0c0c1c;
  box-shadow: 0 40px 80px rgba(23, 26, 69, 0.45), inset 0 0 0 2px rgba(255, 255, 255, 0.12);
}
.phone .island {
  position: absolute;
  top: 19px;
  left: 50%;
  width: 82px;
  height: 24px;
  margin-left: -41px;
  border-radius: 12px;
  background: #000;
  z-index: 1;
}
.shield {
  height: 100%;
  border-radius: 36px;
  background: #5c59f7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 20px 64px;
  position: relative;
  text-align: center;
}
/* A real screen from the app, inside the same phone frame. */
.phone .screen {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 36px;
}
.shield-logo svg { width: 44px; height: 44px; display: block; }
.shield-title { margin: 12px 0 0; font-size: 16px; font-weight: 700; }
.shield p { color: #fff; }
.shield-quote, .shield-by, .shield-open { margin: 0; font-size: 12px; line-height: 1.4; opacity: 0.88; }
.shield-quote { margin-top: 18px; }
.shield-by { margin-top: 14px; }
.shield-open { margin-top: 14px; }
.shield-btn {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 22px;
  height: 38px;
  border-radius: 19px;
  background: #fff;
  color: #1c1a3f;
  font-size: 13px;
  font-weight: 600;
  display: grid;
  place-items: center;
}

/* The hanging "CLOSED" shop sign from the app. */
.sign-stage { justify-self: center; padding: 10px 0 30px; }
.sign { width: 260px; transform-origin: 50% 2%; }
.sign .strings { display: block; width: 100%; height: auto; }
.sign .board {
  margin-top: -2px;
  height: 140px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 50px rgba(23, 26, 69, 0.32);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
  color: var(--indigo);
  font-family: ui-rounded, "SF Pro Rounded", var(--text);
}
.sign .board::after {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 17px;
  border: 3px solid rgba(92, 89, 247, 0.35);
}
.sign .closed { font-size: 52px; font-weight: 900; letter-spacing: 0.04em; line-height: 1; }
.sign .till { font-size: 17px; font-weight: 800; letter-spacing: 0.14em; opacity: 0.75; }

/* Plus: one glass card with the download button. */
.plus {
  max-width: 760px;
  margin: 104px auto 0;
  padding: 44px 32px;
  text-align: center;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: 32px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.plus p {
  margin: 16px auto 0;
  max-width: 560px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--white-80);
}
.plus .appstore { margin-top: 30px; }
.plus .appstore img { height: 56px; }
@media (max-width: 808px) { .plus { margin-left: 24px; margin-right: 24px; } }

/* ---------- Things appearing ---------- */

/* The hero builds in on load: logo, tagline, words, then the App Store badge (which only fades). */
.intro > * { animation: rise 0.9s cubic-bezier(.2, .7, .2, 1) both; }
.intro > :nth-child(2) { animation-delay: 0.15s; }
.intro > :nth-child(3) { animation-delay: 0.3s; }
.intro > :nth-child(4) { animation-delay: 0.45s; }
.steps .card { animation: rise 0.9s cubic-bezier(.2, .7, .2, 1) both; }
.steps .card:nth-child(1) { animation-delay: 0.6s; }
.steps .card:nth-child(2) { animation-delay: 0.72s; }
.steps .card:nth-child(3) { animation-delay: 0.84s; }
.intro > .get { animation-name: fade; animation-duration: 0.8s; }
@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

/* Later sections fade up as they scroll into view (only when JavaScript can reveal them). */
.js [data-reveal] .feature-copy, .js [data-reveal] .phone, .js [data-reveal] .sign-stage,
.js .plus[data-reveal] > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s ease, transform 0.9s cubic-bezier(.2, .7, .2, 1);
}
.js [data-reveal].in .feature-copy, .js [data-reveal].in .phone, .js [data-reveal].in .sign-stage,
.js .plus[data-reveal].in > * { opacity: 1; transform: none; }
.js .plus[data-reveal] > .appstore { transform: none; }
.js [data-reveal].in .phone, .js [data-reveal].in .sign-stage { transition-delay: 0.18s; }
.js .plus[data-reveal].in > :nth-child(2) { transition-delay: 0.12s; }
.js .plus[data-reveal].in > :nth-child(3) { transition-delay: 0.24s; }
.js [data-reveal].in .sign { animation: swing 2.2s 0.35s ease-out both; }
@keyframes swing {
  0% { transform: rotate(-14deg); }
  22% { transform: rotate(9deg); }
  42% { transform: rotate(-5deg); }
  60% { transform: rotate(3deg); }
  78% { transform: rotate(-1.2deg); }
  100% { transform: rotate(0); }
}

/* ---------- Text pages (privacy, support) ---------- */

.page {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 24px 20px;
}
.page > h1 {
  font-size: clamp(34px, 6vw, 44px);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.page > .updated { color: var(--white-80); margin: 0 0 28px; }
.sheet {
  background: #fff;
  color: var(--ink);
  border-radius: 28px;
  padding: 34px;
  box-shadow: 0 20px 50px rgba(23, 26, 69, 0.22);
  line-height: 1.65;
  font-size: 17px;
}
.sheet h2 { font-size: 21px; margin: 30px 0 8px; }
.sheet h2:first-child { margin-top: 0; }
.sheet p, .sheet ul { margin: 0 0 12px; color: rgba(23, 26, 69, 0.82); }
.sheet a { color: var(--indigo); font-weight: 600; }
.contact {
  margin-top: 22px;
  text-align: center;
  font-size: 18px;
}
.contact a { font-weight: 600; }

/* ---------- Footer ---------- */

footer {
  max-width: 1040px;
  margin: 70px auto 0;
  padding: 26px 24px 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  color: var(--white-65);
  font-size: 14px;
}
footer nav { display: flex; gap: 20px; }
footer a { text-decoration: none; }
footer a:hover { color: #fff; }

/* ---------- Small screens ---------- */

@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; }
  .feature { grid-template-columns: 1fr; gap: 36px; margin-top: 72px; text-align: center; }
  .feature.flip .feature-copy { order: 0; }
  .feature-copy > p:last-child { margin-left: auto; margin-right: auto; }
  .phone { width: 240px; }
  .sign { width: 220px; }
  .sign .board { height: 118px; }
  .sign .closed { font-size: 44px; }
  .sign .till { font-size: 14px; }
  .shield-title { font-size: 14.5px; }
  .plus { margin-left: 16px; margin-right: 16px; padding: 36px 16px; }
  .hero { padding-top: 48px; }
  .sheet { padding: 24px; font-size: 16px; }
  .quotes { height: 110px; }
  .quotes p { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .quotes p { animation: none; }
  .quotes p:first-child { opacity: 1; }
  .intro > *, .steps .card, .js [data-reveal].in .sign { animation: none; }
  .js [data-reveal] .feature-copy, .js [data-reveal] .phone, .js [data-reveal] .sign-stage,
  .js .plus[data-reveal] > * { opacity: 1; transform: none; transition: none; }
}