/* Vicejar site. One file for every page. Colors match the app (ios/Shared/Theme.swift). */
:root {
  color-scheme: light dark;
  --paper: #F6F4FC; --card: #FFFFFF; --sunk: #ECE8F7; --line: #DDD7EE;
  --ink: #1A1626; --ink2: #5F587A; --ink3: #8E88A6;
  --red: #5B2EE0; --red-deep: #4A20CF; --coin: #F6B22E; --coin-deep: #B96C12; --good: #23805A; --glass: #B9B0EE;
  --round: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121019; --card: #1C1929; --sunk: #171421; --line: #2E2A40;
    --ink: #F3F0FA; --ink2: #A8A1C2; --ink3: #746E8E;
    --red: #9B82FF; --red-deep: #7656F0; --good: #5CC295;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 500 1.0625rem/1.55 var(--round);
  overflow-wrap: anywhere;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 0.18em; }
h1, h2, h3 { line-height: 1.08; letter-spacing: -0.015em; margin: 0; font-weight: 900; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
main, .top, .foot { width: min(100% - 2.5rem, 66rem); margin-inline: auto; }
.fine { color: var(--ink3); font-size: 0.9rem; }

/* Header and footer */
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 900; font-size: 1.3rem; text-decoration: none; letter-spacing: -0.02em; }
.brand img { border-radius: 22.5%; }
.top nav { display: flex; gap: 1.4rem; font-weight: 700; font-size: 0.98rem; }
.top nav a, .foot nav a { text-decoration: none; color: var(--ink2); }
.top nav a:hover, .foot nav a:hover { color: var(--ink); }
.foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.6rem; padding: 2.2rem 0 3rem; margin-top: 4rem; border-top: 1px solid var(--line); }
.foot .brand { font-size: 1.05rem; }
.foot nav { display: flex; gap: 1.2rem; font-weight: 700; font-size: 0.95rem; }
.foot .fine { margin-left: auto; }
@media (max-width: 34rem) {
  .top nav a:first-child { display: none; }
  .foot .fine { margin-left: 0; flex-basis: 100%; }
}

/* Store button */
.store {
  display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none;
  background: var(--ink); color: var(--paper); padding: 0.7rem 1.3rem 0.7rem 1.1rem; border-radius: 1rem;
  font-weight: 800; font-size: 1.3rem; line-height: 1.05;
}
.store small { display: block; font-size: 0.72rem; font-weight: 700; opacity: 0.8; }
.store:hover { transform: translateY(-1px); }
.soon {
  display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 800;
  background: var(--card); border: 1.5px solid var(--line); padding: 0.75rem 1.1rem; border-radius: 1rem;
}
.soon .dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--coin); box-shadow: 0 0 0 4px color-mix(in srgb, var(--coin) 30%, transparent); }

/* Phone frame around a screenshot */
.phone {
  width: min(100%, 19rem); flex: none; border-radius: 3rem; padding: 0.55rem; background: #1A1626;
  box-shadow: 0 1.5rem 3.5rem -1rem rgba(40, 20, 110, 0.35), 0 0 0 1px rgba(255,255,255,0.08) inset;
}
.phone img { border-radius: 2.5rem; width: 100%; }

/* Hero */
.hero { display: flex; align-items: center; justify-content: space-between; gap: 3rem; padding: 2.5rem 0 3.5rem; }
.hero-copy { max-width: 34rem; display: grid; gap: 1.3rem; justify-items: start; }
.hero h1 { font-size: clamp(2.7rem, 7.2vw, 4.6rem); }
.lede { font-size: clamp(1.15rem, 2.2vw, 1.4rem); color: var(--ink2); line-height: 1.45; }
.hero-phone { transform: rotate(2.5deg); }
@media (max-width: 48rem) {
  .hero { flex-direction: column; align-items: flex-start; gap: 2.5rem; padding-top: 1.2rem; }
  .hero-phone { align-self: center; transform: none; }
}

/* The jar you can play with */
.play { display: flex; align-items: center; justify-content: space-between; gap: 2.5rem; padding: 2.5rem; margin-top: 0.5rem;
  background: var(--sunk); border: 1px solid var(--line); border-radius: 2rem; }
.play-copy { display: grid; gap: 1rem; max-width: 30rem; }
.play h2 { font-size: clamp(1.9rem, 4.5vw, 2.8rem); }
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.3rem; }
.chips button { font: inherit; font-weight: 800; color: var(--ink); background: var(--card); border: 1.5px solid var(--line);
  border-radius: 999px; padding: 0.6rem 1rem; cursor: pointer; min-height: 2.9rem; transition: transform 0.12s ease, border-color 0.12s ease; }
.chips button b { color: var(--red); font-weight: 900; margin-left: 0.25rem; font-variant-numeric: tabular-nums; }
.chips button:hover { border-color: var(--red); transform: translateY(-2px); }
.chips button:active { transform: translateY(1px) scale(0.97); }
.chips button:focus-visible, .open-jar:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.chips button.pop { animation: pop 0.28s ease; }
@keyframes pop { 40% { transform: scale(1.08) rotate(-2deg); } }
.play-note { color: var(--ink2); font-weight: 700; min-height: 3.2em; }
.play-jar { display: grid; justify-items: center; gap: 0.4rem; flex: none; width: min(100%, 23.75rem); }
.play-jar canvas { touch-action: pan-y; cursor: grab; max-width: 100%; }
@keyframes burst { 20% { transform: scale(1.12) rotate(-3deg); } 45% { transform: scale(0.94) rotate(2deg); } 70% { transform: scale(1.04); } }
.play-jar canvas.burst { animation: burst 0.5s ease; }
.play-total { font-weight: 900; font-size: 3.2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.play-total small { font-size: 1rem; font-weight: 700; color: var(--ink2); }
.open-jar { font: inherit; font-weight: 800; background: none; border: 0; color: var(--ink2); cursor: pointer; padding: 0.6rem 1rem; border-radius: 0.8rem; visibility: hidden; }
.has-coins .open-jar { visibility: visible; }
.open-jar:hover { color: var(--ink); background: var(--card); }
@media (max-width: 52rem) { .play { flex-direction: column; align-items: stretch; padding: 1.5rem 1.25rem; gap: 1.5rem; } .play-jar { align-self: center; } }
@media (prefers-reduced-motion: reduce) { .chips button, .chips button.pop { transition: none; animation: none; } }

/* Sections */
section > h2 { font-size: clamp(1.9rem, 4.5vw, 2.8rem); }
.steps, .who, .money, .price, .cta { padding-top: 4.5rem; }
.step { display: flex; align-items: center; justify-content: center; gap: clamp(2rem, 7vw, 6rem); padding-top: 3rem; }
.step.flip { flex-direction: row-reverse; }
.step-copy { max-width: 27rem; display: grid; gap: 0.8rem; }
.step-copy p { color: var(--ink2); }
.step h3 { font-size: 1.75rem; }
.num {
  width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 50%;
  background: color-mix(in srgb, var(--coin) 32%, transparent); color: var(--coin-deep) !important; font-weight: 900; font-size: 1.2rem;
}
.step .phone { width: min(100%, 16.5rem); }
@media (max-width: 48rem) {
  .step, .step.flip { flex-direction: column; align-items: flex-start; gap: 1.8rem; }
  .step .phone { align-self: center; }
}

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; padding-top: 1.8rem; }
.cards article, .plans article {
  background: var(--card); border: 1px solid var(--line); border-radius: 1.4rem; padding: 1.3rem 1.4rem; display: grid; gap: 0.5rem; align-content: start;
}
/* Masking tape with marker on it: how a jar or a kind of group is named. Emoji are kept for habits. */
.tape { position: relative; z-index: 0; display: inline-block; justify-self: start; color: #2A2320;
  font-family: "Permanent Marker", "Marker Felt", var(--round); font-weight: 400; letter-spacing: 0.02em; line-height: 1.15;
  padding: 0.42rem 1.25rem 0.36rem; margin: 0.15rem 0 0.6rem; transform: rotate(-2.5deg);
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.28)); }
.tape::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #F4E6BC, #E9D49A);
  opacity: 0.97;
  /* torn ends */
  clip-path: polygon(4px 0, calc(100% - 1px) 0, calc(100% - 5px) 11%, 100% 22%, calc(100% - 4px) 34%, calc(100% - 1px) 46%, calc(100% - 6px) 58%, 100% 70%, calc(100% - 4px) 84%, calc(100% - 1px) 100%,
    3px 100%, 0 88%, 5px 76%, 1px 63%, 6px 50%, 0 38%, 4px 25%, 1px 12%); }
.tape.tilt-r { transform: rotate(2deg); }
.cards h3 { font-size: 1.35rem; }
.cards p { color: var(--ink2); font-size: 1rem; }

.money { max-width: 44rem; display: grid; gap: 1rem; }
.money p { color: var(--ink2); font-size: 1.15rem; }

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; padding-top: 1.8rem; max-width: 46rem; }
.plans h3 { font-size: 1.2rem; }
.plans .amount { font-weight: 900; font-size: 2.4rem; line-height: 1; font-variant-numeric: tabular-nums; }
.plans .amount small { font-size: 1rem; font-weight: 700; color: var(--ink2); }
.plans ul { margin: 0.4rem 0 0; padding-left: 1.15rem; color: var(--ink2); display: grid; gap: 0.3rem; font-size: 1rem; }
.plans .plus { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }

.cta { display: grid; justify-items: center; gap: 1.3rem; text-align: center; padding-bottom: 1rem; }
.cta img { border-radius: 22.5%; box-shadow: 0 1rem 2rem -0.8rem rgba(60, 30, 160, 0.55); }

/* Documents: privacy, terms, support, 404 */
.doc { max-width: 42rem; padding: 2rem 0 1rem; display: grid; gap: 1rem; }
.doc h1 { font-size: clamp(2.2rem, 6vw, 3.2rem); }
.doc h2 { font-size: 1.35rem; margin-top: 1.4rem; }
.doc p, .doc li { color: var(--ink2); }
.doc b { color: var(--ink); }
.doc ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.45rem; }
.doc a { color: var(--red-deep); font-weight: 700; }
@media (prefers-color-scheme: dark) { .doc a { color: var(--red); } }
.doc details { background: var(--card); border: 1px solid var(--line); border-radius: 1rem; padding: 0.9rem 1.1rem; }
.doc summary { font-weight: 800; color: var(--ink); cursor: pointer; }
.doc details p { margin-top: 0.6rem; }
.doc.center { justify-items: start; }

/* Invite page */
.invite { max-width: 30rem; margin-inline: auto; padding: 1.5rem 0; display: grid; gap: 1.4rem; }
.eyebrow { font-weight: 800; color: var(--ink2); }
.invite-card { background: var(--card); border: 1px solid var(--line); border-radius: 1.6rem; padding: 1.5rem; display: grid; gap: 0.35rem; }
.invite h1.tape { font-size: 2.2rem; margin-bottom: 0.8rem; }
.invite h1 { font-size: 2.4rem; }
.keeper, .purpose { color: var(--ink2); }
.invite h2 { font-size: 0.8rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink2); font-weight: 800; margin-top: 1.2rem; }
.habits { list-style: none; padding: 0; margin: 0.4rem 0 0.6rem; }
.habits li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); font-weight: 800; font-size: 1.1rem; }
.habits li:last-child { border-bottom: 0; }
.habit-name > span { margin-right: 0.45rem; }
.habit-price { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 900; }
.join-steps ol { margin: 0.8rem 0 0; padding-left: 1.3rem; display: grid; gap: 1.2rem; }
.join-steps li > * { margin-top: 0.6rem; }
.join-steps b { display: inline; }
.code { font: 900 2.6rem/1.1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.16em; user-select: all; }
.open {
  display: inline-block; text-decoration: none; background: var(--red-deep); color: #fff !important; font-weight: 800;
  padding: 0.8rem 1.2rem; border-radius: 1rem;
}