/* The pages that aren't the desktop: pricing, the privacy policy and the terms. The same wallpaper,
   menu bar and widget surfaces as the desktop, on an ordinary page that scrolls and fits a phone. The
   glass here is a CSS backdrop blur, the desktop's look without WebGL: it moves with the page as it
   scrolls, where a WebGL lens on a canvas of its own would trail a frame behind */

html { background: #0e3a4a; }

body {
  margin: 0;
  min-height: 100vh;
  font: 400 15px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #fff;
}

a { color: inherit; }
h1, h2, h3, p, ul, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.wallpaper {
  position: fixed;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  object-fit: cover;
}

/* The privacy policy and the terms are for reading: behind them the lake is blurred into its colors, as a
   window's backdrop is. Drawn a little bigger, so the blur's soft edges stay off screen */
body:has(main.doc) .wallpaper {
  filter: blur(28px) saturate(1.15);
  transform: scale(1.08);
}

/* A shade over the top of the wallpaper, so white text on it reads where the lake is bright */
body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  background: linear-gradient(rgba(0, 20, 30, 0.34), rgba(0, 20, 30, 0.1) 55%, rgba(0, 20, 30, 0));
  pointer-events: none;
}

/* MARK: menu bar */

/* The desktop's, menus and all. Here the page scrolls under it, so it has the frosted background macOS
   gives the menu bar when asked to, and white cards passing beneath don't wash out its text */
.menubar {
  position: sticky;
  z-index: 10;
  top: 0;
  height: 28px;
  padding: 0 14px 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 500;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.14);
  white-space: nowrap;
}

/* The frosting is a layer of its own: blurred on the bar itself, it would keep the LiquidType menu's
   own blur from seeing past the bar */
.menubar::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: rgba(16, 22, 26, 0.42);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
}

.menubar-menus, .menubar-app, .menubar-status {
  display: flex;
  align-items: center;
}

/* The LiquidType menu (menu.css), then the frontmost app's menus, as on the desktop */
.menubar-menus { gap: 22px; }
.menubar-app { gap: 19px; }
.menubar-app strong { font-weight: 700; }
.menubar-status { gap: 16px; }

.menubar-status svg {
  height: 16px;
  fill: currentColor;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.2));
}

.menubar-status .status-battery { height: 15px; }
.menubar-status time { margin-left: 2px; }

/* MARK: page */

main {
  max-width: 1040px;
  margin: 0 auto;
  padding: 72px 24px 32px;
}

/* A document reads best narrower */
main.doc { max-width: 808px; }

/* Big and bold straight on the wallpaper, like the time on the lock screen */
.intro {
  text-align: center;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.32), 0 1px 2px rgba(0, 0, 0, 0.2);
}

.intro h1 {
  font-size: 68px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.intro p {
  margin-top: 12px;
  font-size: 19px;
  color: rgba(255, 255, 255, 0.9);
}

.intro .updated { margin-top: 8px; font-size: 14px; color: rgba(255, 255, 255, 0.78); }

/* A segmented control, as in a macOS toolbar. Radio buttons underneath, so it works without script */
.billing {
  margin: 28px 0 0;
  padding: 3px;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  background: rgba(12, 15, 22, 0.32);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  text-shadow: none;
}

.billing label {
  position: relative;
  height: 30px;
  padding: 0 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.billing input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.billing em { font-style: normal; color: #32d74b; }
.billing label:has(:checked) { background: #fff; color: #1d1d1f; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); }
.billing label:has(:checked) em { color: #248a3d; }
.billing label:has(:focus-visible) { outline: 2px solid #fff; outline-offset: 2px; }

/* Yearly unless monthly is picked */
.monthly { display: none; }
body:has(#billing-monthly:checked) .monthly { display: inline; }
body:has(#billing-monthly:checked) .yearly { display: none; }

/* MARK: widget surfaces */

/* The desktop's widgets, at the colors its no-WebGL fallback gives them */
.glass {
  box-sizing: border-box;
  border-radius: 24px;
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 9px 18px rgba(0, 0, 0, 0.21), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.glass[data-glass="dark"] {
  background: rgba(12, 15, 22, 0.74);
  /* Light from the upper left catches the edge, as on the desktop's glass */
  box-shadow: 0 9px 18px rgba(0, 0, 0, 0.21), inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 1px 1px 0 rgba(255, 255, 255, 0.22);
}

.glass[data-glass="white"] { background: rgba(255, 255, 255, 0.95); color: #1d1d1f; }

/* MARK: plans */

.plans {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.plan {
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.plan h2 { font-size: 17px; font-weight: 650; }
.plan-for { margin-top: 2px; font-size: 13.5px; color: #6e6e73; }

.price {
  margin-top: 18px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.price b {
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.price span, .price-note { font-size: 13.5px; color: #6e6e73; }
.price-note { margin-top: 6px; }

.plan ul { margin: 20px 0 24px; }

/* A row each, the way the desktop's Notes widget lists things */
.plan li {
  padding: 9px 0;
  border-top: 1px solid rgba(60, 60, 67, 0.13);
  display: flex;
  gap: 10px;
  font-size: 14px;
  line-height: 1.35;
}

.plan li::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  background: #0a84ff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4 6.6 11.4 12.5 4.8' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4 6.6 11.4 12.5 4.8' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The desktop's Download button, dark on white glass */
.plan .button {
  margin-top: auto;
  height: 40px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: #1d1d1f;
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
}

.plan .button:hover { background: #3a3a3c; }
.plan .button:focus-visible { outline: 2px solid #0a84ff; outline-offset: 2px; }
.plan .button svg { width: 15px; height: 15px; }

/* Pro: the dark glass of the desktop's LiquidType widget, white on it */
.plan[data-glass="dark"] .plan-for,
.plan[data-glass="dark"] .price span,
.plan[data-glass="dark"] .price-note { color: rgba(255, 255, 255, 0.62); }
.plan[data-glass="dark"] li { border-top-color: rgba(255, 255, 255, 0.12); }
.plan[data-glass="dark"] li::before { background: #64d2ff; }
.plan[data-glass="dark"] .button { background: #fff; color: #10161a; }
.plan[data-glass="dark"] .button:hover { background: #e7ecef; }
.plan[data-glass="dark"] .button:focus-visible { outline-color: #fff; }

/* MARK: Notes cards */

/* The desktop's Notes widget, grown: a yellow heading, then a title and what it means, a row each.
   The questions under the plans, and the privacy policy at a glance */
.notes-card {
  margin-top: 20px;
  padding: 20px 24px 12px;
}

.notes-card h2 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 650;
  color: #d99a00;
}

.notes-card h2 svg { width: 16px; height: 16px; fill: currentColor; }
.notes-card dl { margin-top: 8px; }

.notes-card dl div {
  padding: 11px 0;
  border-top: 1px solid rgba(60, 60, 67, 0.13);
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: 4px 16px;
  font-size: 14px;
}

.notes-card dt { font-weight: 650; }
.notes-card dd { color: #6e6e73; }

/* MARK: documents */

/* The privacy policy and the terms: one white sheet */
.sheet {
  margin-top: 20px;
  padding: 34px 44px 40px;
  color: #3a3a3c;
  font-size: 15px;
  line-height: 1.6;
}

.sheet h2 {
  margin-top: 30px;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.3;
  color: #1d1d1f;
}

.sheet h2:first-child { margin-top: 0; }

.sheet h3 {
  margin-top: 18px;
  font-size: 15px;
  font-weight: 650;
  color: #1d1d1f;
}

.sheet h2 + p, .sheet h3 + p, .sheet h2 + ul { margin-top: 8px; }
.sheet p + p, .sheet ul + p, .sheet p + ul { margin-top: 10px; }
.sheet ul { padding-left: 20px; list-style: disc; }
.sheet li + li { margin-top: 4px; }
.sheet b { font-weight: 650; color: #1d1d1f; }
.sheet a { color: #0066cc; }

/* Facts only the people behind LiquidType can give: they're filled in before the page goes out */
.todo {
  padding: 0 2px;
  border-radius: 3px;
  background: rgba(255, 214, 10, 0.42);
  color: inherit;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Says so, under the title, until they are */
.draft {
  margin: 22px auto 0;
  width: fit-content;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(12, 15, 22, 0.5);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font-size: 13px;
  text-shadow: none;
}

.draft .todo { color: #fff; }
.intro .updated .todo { background: #ffd60a; color: #1d1d1f; text-shadow: none; }

/* MARK: footer */

footer {
  padding: 30px 24px 40px;
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
}

footer a { text-decoration: none; }
footer a:hover, footer a[aria-current="page"] { text-decoration: underline; }
footer p { max-width: 560px; font-size: 11.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.72); }

/* MARK: phones */

@media (max-width: 820px) {
  .menubar-app, .menubar-status svg { display: none; }
  main { padding: 48px 16px 24px; }
  .intro h1 { font-size: 48px; }
  .intro p { font-size: 17px; }
  .plans { grid-template-columns: 1fr; gap: 16px; }
  .notes-card { padding: 18px 20px 10px; }
  .notes-card dl div { grid-template-columns: 1fr; }
  .sheet { padding: 26px 22px 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .billing label, .plan .button { transition: none; }
}