:root {
  color-scheme: light;
  --ink: #171211;
  --muted: #756d68;
  --line: #eee4de;
  --paper: #fffaf7;
  --soft: #f6ede8;
  --red: #e60023;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.site-locked {
  height: 100svh;
  overflow: hidden;
}

a {
  color: inherit;
}

img,
a,
button {
  -webkit-user-drag: none;
  user-drag: none;
}

.landing-screen,
.pricing-screen,
.utility-screen {
  height: 100svh;
  overflow: hidden;
  position: relative;
}

.landing-screen,
.pricing-screen {
  background: var(--paper);
}

.waterfall {
  display: flex;
  gap: 22px;
  height: max(1760px, 190svh);
  justify-content: center;
  left: 50%;
  opacity: 0.92;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(1.05);
  width: max(1360px, 132vw);
  z-index: 0;
}

.fall-column {
  flex: 0 0 clamp(150px, 17vw, 250px);
  height: 100%;
  overflow: hidden;
}

.fall-track {
  animation: waterfall-scroll 42s linear infinite;
  display: grid;
  gap: 18px;
}

.fall-set {
  display: grid;
  gap: 18px;
}

.fall-a,
.fall-d {
  margin-top: -140px;
}

.fall-b {
  margin-top: 70px;
}

.fall-c {
  margin-top: -260px;
}

.fall-e {
  margin-top: 160px;
}

.fall-b .fall-track,
.fall-e .fall-track {
  animation-duration: 48s;
}

.fall-c .fall-track {
  animation-duration: 54s;
}

@keyframes waterfall-scroll {
  from { transform: translateY(0); }
  to { transform: translateY(calc(-50% - 9px)); }
}

.canvas {
  border-radius: clamp(18px, 2.2vw, 34px);
  box-shadow: 0 22px 60px rgba(58, 32, 20, 0.13);
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.canvas::after {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.44), transparent 48%);
  content: "";
  inset: 0;
  position: absolute;
}

.canvas.small { height: clamp(128px, 13vw, 190px); }
.canvas.medium { height: clamp(190px, 22vw, 310px); }
.canvas.tall { height: clamp(300px, 34vw, 480px); }

.coral { background: linear-gradient(145deg, #f8ad98, #f5d3c5); }
.cream { background: linear-gradient(145deg, #fff0d5, #f9d9a8); }
.sky { background: linear-gradient(145deg, #c5defa, #eef4fb); }
.sage { background: linear-gradient(145deg, #cad9bd, #edf0dd); }
.blush { background: linear-gradient(145deg, #f2c3d1, #f9e8e8); }
.clay { background: linear-gradient(145deg, #c88770, #e8c0aa); }
.sand { background: linear-gradient(145deg, #efe2c8, #fff8e9); }
.blue { background: linear-gradient(145deg, #8eb5df, #dcecf7); }
.rose { background: linear-gradient(145deg, #e7a3ac, #f7d8da); }
.cocoa { background: linear-gradient(145deg, #a97864, #e3b8a1); }
.linen { background: linear-gradient(145deg, #f4eee2, #d9c6b9); }
.green { background: linear-gradient(145deg, #b9d5be, #edf5e6); }
.peach { background: linear-gradient(145deg, #ffc1a1, #f9e1d3); }
.mint { background: linear-gradient(145deg, #a7d8c5, #e4f3ea); }
.stone { background: linear-gradient(145deg, #cfc8c2, #f0e9e3); }

.home-lockup,
.pricing-lockup,
.utility-card {
  position: relative;
  z-index: 1;
}

.home-lockup {
  align-items: center;
  display: flex;
  flex-direction: column;
  inset: 50% auto auto 50%;
  padding: 24px;
  position: absolute;
  text-align: center;
  transform: translate(-50%, -50%);
  width: min(92vw, 620px);
}

.hero-logo {
  filter: drop-shadow(0 18px 34px rgba(78, 42, 25, 0.16));
  height: clamp(132px, 22vw, 230px);
  object-fit: contain;
  width: clamp(132px, 22vw, 230px);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  font-size: clamp(56px, 11vw, 118px);
  letter-spacing: -0.08em;
  line-height: 0.88;
  margin-bottom: 12px;
}

.home-lockup p {
  color: #5e5651;
  font-size: clamp(20px, 3vw, 32px);
  font-weight: 760;
  letter-spacing: -0.04em;
  margin-bottom: 0;
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: clamp(18px, 3svh, 34px);
}

.button {
  align-items: center;
  background: var(--ink);
  border: 1px solid rgba(23, 18, 17, 0.08);
  border-radius: 999px;
  box-shadow: 0 16px 34px rgba(23, 18, 17, 0.13);
  color: #fff;
  display: inline-flex;
  font-size: 15px;
  font-weight: 850;
  justify-content: center;
  min-height: 48px;
  min-width: 136px;
  padding: 0 22px;
  text-decoration: none;
}

.button[disabled],
.button.dead-button {
  cursor: default;
  font: inherit;
  opacity: 0.9;
}

.button.secondary {
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
}

.tiny-links {
  display: flex;
  gap: 18px;
  justify-content: center;
  margin-top: 14px;
}

.tiny-links a {
  color: #8a817c;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.corner-home {
  border-radius: 999px;
  left: clamp(16px, 3vw, 34px);
  position: absolute;
  top: clamp(14px, 3vw, 30px);
  z-index: 2;
}

.corner-home img {
  display: block;
  height: clamp(42px, 6vw, 58px);
  width: clamp(42px, 6vw, 58px);
}

.pricing-lockup {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  margin: 0 auto;
  max-width: 1180px;
  padding: clamp(18px, 4svh, 44px) clamp(14px, 4vw, 44px);
  text-align: center;
}

.pricing-lockup h1 {
  font-size: clamp(34px, 6vw, 72px);
  margin-bottom: clamp(12px, 2.5svh, 24px);
  max-width: 780px;
}

.pricing-story {
  color: #514a46;
  font-size: clamp(13px, 1.45vw, 17px);
  font-weight: 620;
  line-height: 1.45;
  margin-bottom: clamp(16px, 3svh, 30px);
  max-width: 760px;
}

.prices {
  display: grid;
  gap: clamp(10px, 1.8vw, 18px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1020px;
  width: 100%;
}

.utility-card,
.card {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: clamp(24px, 3vw, 34px);
  box-shadow: 0 24px 70px rgba(66, 37, 24, 0.12);
  backdrop-filter: blur(18px);
}

.price {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-height: 0;
  padding: clamp(16px, 2.8vw, 28px);
  text-align: center;
}

.price h2 {
  font-size: clamp(22px, 3vw, 34px);
  letter-spacing: -0.05em;
  line-height: 1;
  margin-bottom: 14px;
}

.amount {
  font-size: clamp(36px, 5vw, 58px);
  font-weight: 950;
  letter-spacing: -0.08em;
  line-height: 0.95;
  margin: 18px 0 10px;
}

.amount span {
  color: var(--muted);
  font-size: clamp(13px, 1.5vw, 16px);
  letter-spacing: -0.03em;
  margin-left: 4px;
}

.price p {
  color: var(--muted);
  font-weight: 750;
  margin-bottom: 0;
}

.compact-actions {
  margin-top: clamp(14px, 2.4svh, 24px);
}

.utility-screen {
  align-items: center;
  background:
    radial-gradient(circle at 20% 15%, rgba(230, 0, 35, 0.11), transparent 28%),
    radial-gradient(circle at 84% 78%, rgba(142, 181, 223, 0.24), transparent 32%),
    linear-gradient(180deg, #fffdfb, #f8eee8);
  display: flex;
  justify-content: center;
  padding: clamp(16px, 5vw, 44px);
}

.utility-card {
  max-width: 640px;
  padding: clamp(22px, 5vw, 46px);
  text-align: center;
  width: min(100%, 640px);
}

.utility-card.wide {
  max-width: 900px;
}

.utility-logo {
  height: clamp(76px, 14vw, 130px);
  margin-bottom: 14px;
  object-fit: contain;
  width: clamp(76px, 14vw, 130px);
}

.utility-card h1 {
  font-size: clamp(38px, 7vw, 70px);
}

.utility-card p {
  color: var(--muted);
  font-size: clamp(15px, 2vw, 20px);
  margin-left: auto;
  margin-right: auto;
  max-width: 560px;
}

.utility-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 18px;
  text-align: left;
}

.utility-grid article {
  background: rgba(255, 255, 255, 0.64);
  border-radius: 22px;
  padding: 16px;
}

.utility-grid h3 {
  margin-bottom: 8px;
}

.utility-grid p {
  font-size: 14px;
  margin-bottom: 0;
}

.wrap {
  margin: 0 auto;
  max-width: 1120px;
  padding: 32px 24px 64px;
}

.legal-wrap {
  margin: 0 auto;
  max-width: 720px;
  padding: 34px 22px 72px;
}

.legal-wrap .brand {
  margin-bottom: 54px;
}

.legal-wrap h1 {
  font-size: clamp(42px, 9vw, 76px);
  margin-bottom: 28px;
}

.legal-wrap p {
  color: #3d3734;
  font-size: 17px;
  line-height: 1.65;
  margin-bottom: 18px;
}

.nav {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.brand {
  align-items: center;
  display: inline-flex;
  font-weight: 850;
  gap: 10px;
  letter-spacing: -0.04em;
  text-decoration: none;
}

.mark {
  display: block;
  height: 34px;
  object-fit: contain;
  width: 34px;
}

.navlinks {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.navlinks a,
.muted,
.footer {
  color: var(--muted);
}

.navlinks a {
  font-weight: 700;
  text-decoration: none;
}

.hero {
  display: grid;
  gap: 42px;
  grid-template-columns: 1fr;
  padding: 72px 0 24px;
}

.hero h1 {
  font-size: clamp(48px, 8vw, 88px);
  max-width: 780px;
}

.lead {
  color: var(--muted);
  font-size: 20px;
  max-width: 680px;
}

.grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 28px;
}

.card {
  padding: 24px;
}

.footer {
  margin-top: 64px;
}

@media (max-width: 820px) {
  .waterfall {
    gap: 12px;
    height: max(1420px, 190svh);
    width: max(660px, 156vw);
  }

  .fall-column { flex-basis: 132px; }

  .canvas.small { height: 128px; }
  .canvas.medium { height: 190px; }
  .canvas.tall { height: 284px; }

  .fall-e {
    display: none;
  }

  .home-lockup {
    width: 96vw;
  }

  .prices {
    grid-template-columns: 1fr;
    max-width: 480px;
  }

  .pricing-story {
    font-size: 13px;
    line-height: 1.32;
    margin-bottom: 12px;
    max-width: 520px;
  }

  .price {
    align-items: center;
    column-gap: 12px;
    display: grid;
    grid-template-columns: auto 1fr;
    min-height: 0;
    padding: 14px 16px;
  }

  .amount {
    margin: 0;
    text-align: right;
  }

  .price p { grid-column: 1 / -1; }

  .utility-grid,
  .grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .button {
    min-height: 44px;
    min-width: 122px;
    padding: 0 18px;
  }

  .pricing-lockup {
    padding: 12px;
  }

  .pricing-lockup h1 {
    font-size: clamp(30px, 9vw, 42px);
  }

  .utility-grid {
    display: none;
  }
}

@media (max-height: 720px) {
  .hero-logo {
    height: clamp(94px, 19svh, 150px);
    width: clamp(94px, 19svh, 150px);
  }

  .home-lockup h1 {
    font-size: clamp(46px, 10vw, 86px);
  }

  .home-lockup p {
    font-size: clamp(18px, 3vw, 26px);
  }

  .home-actions {
    margin-top: 16px;
  }

  .pricing-lockup h1 {
    font-size: clamp(30px, 5.4vw, 56px);
  }

  .price {
    padding: 12px 14px;
  }

  .amount {
    font-size: clamp(32px, 4.6vw, 46px);
  }

  .utility-logo {
    height: 76px;
    width: 76px;
  }
}

@media (max-height: 620px) {
  .tiny-links {
    display: none;
  }

  .utility-grid {
    display: none;
  }
}