/* DetoxDroid landing page. Loaded with ?v=<hash> by the generated pages, see
   tools/detoxdroid/build.js. */

/* Karla is a variable font, so one file per subset covers every weight. */
@font-face {
  font-family: "Karla";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fonts/karla-2.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

@font-face {
  font-family: "Karla";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fonts/karla-1.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 {
  --bg: #0c0f26;
  --bg-2: #11153a;
  --card: #171c47;
  --line: rgba(255, 255, 255, 0.1);
  --tx: #f4f5fc;
  --mu: #aab0d2;
  /* The six stripes of the launcher icon. */
  --c1: #dc2863;
  --c2: #e86942;
  --c3: #ffbf0b;
  --c4: #00af64;
  --c5: #0b85ff;
  --c6: #6642ad;
  --stripes: linear-gradient(90deg, var(--c1) 0 16.66%, var(--c2) 0 33.33%, var(--c3) 0 50%, var(--c4) 0 66.66%, var(--c5) 0 83.33%, var(--c6) 0);
  --ease: cubic-bezier(0.5, 0.02, 0.3, 1); }

*,
*::before,
*::after {
  box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  font: 400 1.125rem/1.6 "Karla", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; }

h1,
h2,
h3,
h4,
p,
ul,
dl,
dd {
  margin: 0; }

h1,
h2 {
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1; }

h1 {
  font-size: clamp(2.9rem, 6.1vw, 5.1rem);
  line-height: 0.96;
  text-wrap: balance; }

h2 {
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  text-wrap: balance; }

h3 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25; }

a {
  color: inherit;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-underline-offset: 0.18em; }

a:hover {
  text-decoration-color: currentColor; }

button {
  font: inherit;
  color: inherit;
  cursor: pointer; }

:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 6px; }

svg {
  fill: currentColor; }

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden; }

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

.skip {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 10px;
  background: #fff;
  color: #111; }

.skip:focus {
  top: 12px; }

/* Without JavaScript the page is a page: no switches that do nothing and no
   empty phones. */
html:not(.js) .js-only {
  display: none !important; }

.wrap {
  width: min(1120px, 100% - 48px);
  margin: 0 auto; }

.small {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--mu); }

/* ------------------------------------------------------------------ veil */

/* A fixed circle with a backdrop filter, grown from wherever the switch was
   thrown. It is a layer over the page and not a filter on it, which is what
   lets the header and the phones sit above it and keep their colour, the way
   an app on the exception list does. 300vmax across, because the origin can be
   anywhere in the viewport and the far corner is at most 1.42vmax away.
   The two states carry their own timings: arriving, it is opaque before it
   grows; leaving, it stays opaque until it has closed. */
#veil {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 50;
  width: 300vmax;
  height: 300vmax;
  margin: -150vmax 0 0 -150vmax;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  -webkit-backdrop-filter: grayscale(1);
  backdrop-filter: grayscale(1);
  transform: scale(0);
  transition: opacity 0.3s ease 0.95s, transform 1.15s var(--ease); }

/* The emergency brake: no exceptions, so the veil goes over the header and
   the phones as well. Only the chip and the messages stay above it. */
.dd-brake #veil {
  z-index: 105; }

#veil.on {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.18s ease, transform 1.15s var(--ease); }

/* The wave on the edge of the wipe, in the icon's six colours. Drawn small and
   scaled up, so the stroke thickens as it travels. */
.ring {
  position: fixed;
  z-index: 51;
  width: 260px;
  height: 260px;
  margin: -130px 0 0 -130px;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(var(--c1), var(--c2), var(--c3), var(--c4), var(--c5), var(--c6), var(--c1));
  -webkit-mask-image: radial-gradient(circle, transparent 58%, #000 73%, #000 87%, transparent 97%);
  mask-image: radial-gradient(circle, transparent 58%, #000 73%, #000 87%, transparent 97%);
  filter: blur(1px);
  animation: ring 1.15s var(--ease) forwards; }

.ring.back {
  animation-name: ring-back; }

@keyframes ring {
  from { transform: scale(0.08); opacity: 0; }
  16% { opacity: 0.95; }
  to { transform: scale(14); opacity: 0; } }

@keyframes ring-back {
  from { transform: scale(14); opacity: 0; }
  16% { opacity: 0.95; }
  to { transform: scale(0.08); opacity: 0; } }

/* ---------------------------------------------------------------- header */

.top {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 22px;
  height: 64px;
  padding: 0 max(24px, 50vw - 620px);
  background: rgba(12, 15, 38, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line); }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  text-decoration: none; }

.brand img {
  display: block;
  border-radius: 9px; }

.top-nav {
  display: flex;
  gap: 22px;
  font-size: 0.98rem; }

.top-nav a,
.lang {
  color: var(--mu);
  text-decoration: none; }

.top-nav a:hover,
.lang:hover {
  color: #fff; }

.lang {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 8px; }

/* ---------------------------------------------------------------- switch */

.sw {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  -webkit-tap-highlight-color: transparent; }

.sw-track {
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
  border-radius: 13px;
  background: #3b4070;
  transition: background 0.3s ease; }

.sw-knob {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s cubic-bezier(0.3, 1.4, 0.5, 1); }

.sw[aria-checked="true"] .sw-track {
  background: var(--c4); }

.sw[aria-checked="true"] .sw-knob {
  transform: translateX(18px); }

.sw-text {
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  color: var(--mu); }

.top .sw-text {
  min-width: 4.2em; }

.sw.no {
  animation: no 0.4s ease; }

@keyframes no {
  20% { transform: translateX(-6px); }
  45% { transform: translateX(5px); }
  70% { transform: translateX(-3px); }
  to { transform: none; } }

/* The one in the hero. Off, its track carries the six stripes and a slow
   pulse, because it is the thing on the page that wants to be pressed. */
.sw-big {
  gap: 18px; }

.sw-big .sw-track {
  width: 92px;
  height: 52px;
  border-radius: 26px;
  background: var(--stripes); }

.sw-big .sw-track::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 33px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  opacity: 0;
  animation: nudge 2.6s ease-out infinite; }

.sw-big[aria-checked="true"] .sw-track::after {
  animation: none; }

@keyframes nudge {
  from { opacity: 0.7; transform: scale(0.94); }
  70%, to { opacity: 0; transform: scale(1.16); } }

.sw-big .sw-knob {
  left: 5px;
  top: 5px;
  width: 42px;
  height: 42px; }

.sw-big[aria-checked="true"] .sw-track {
  background: var(--c4); }

.sw-big[aria-checked="true"] .sw-knob {
  transform: translateX(40px); }

.sw-big .sw-text {
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--mu); }

.sw-big .sw-text b {
  display: block;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tx); }

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: none;
  color: var(--tx);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.2;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }

.btn:hover {
  border-color: #fff;
  transform: translateY(-1px); }

.btn-solid {
  background: #fff;
  border-color: #fff;
  color: #10132e; }

.btn-solid:hover {
  background: #e6e8f7; }

.btn-small {
  padding: 10px 18px;
  font-size: 0.95rem; }

.btn[disabled] {
  opacity: 0.5;
  cursor: default;
  transform: none; }

.link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--tx);
  font-size: 0.95rem;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-underline-offset: 0.18em; }

/* ------------------------------------------------------------------ hero */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: 40px;
  width: min(1240px, 100% - 48px);
  min-height: min(100vh, 900px);
  margin: 0 auto;
  padding: 110px 0 60px; }

.eyebrow {
  margin-bottom: 22px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--mu); }

.lead {
  max-width: 34em;
  margin-top: 26px;
  font-size: clamp(1.12rem, 1.5vw, 1.3rem);
  line-height: 1.5;
  color: var(--mu); }

.hero-switch {
  margin-top: 38px; }

.hero-hint {
  min-height: 3em;
  margin-top: 14px;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--mu); }

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px; }

.hero-facts {
  margin-top: 26px;
  font-size: 0.9rem;
  color: #8087b2; }

.hero-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 690px; }

/* The launcher icon at poster size: six stripes and the droid asleep at the
   bottom. It sits under the veil, so it drains with the page. */
.poster {
  position: absolute;
  inset: 30px 0 30px 16%;
  display: flex;
  border-radius: 64px;
  overflow: hidden; }

.poster i {
  flex: 1;
  animation: throb 3.2s ease-in-out infinite alternate; }

.poster i:nth-child(1) { background: var(--c1); }
.poster i:nth-child(2) { background: var(--c2); animation-delay: -0.5s; }
.poster i:nth-child(3) { background: var(--c3); animation-delay: -1s; }
.poster i:nth-child(4) { background: var(--c4); animation-delay: -1.5s; }
.poster i:nth-child(5) { background: var(--c5); animation-delay: -2s; }
.poster i:nth-child(6) { background: var(--c6); animation-delay: -2.5s; }

@keyframes throb {
  from { filter: brightness(0.92) saturate(1); }
  to { filter: brightness(1.12) saturate(1.25); } }

.dd-grey .poster i {
  animation-play-state: paused; }

.poster img {
  position: absolute;
  right: -6%;
  bottom: 0;
  width: 78%;
  height: auto; }

.hero-stage .phone {
  margin-right: 22%; }

/* ----------------------------------------------------------------- phone */

/* Every phone sits above the veil: what happens on its screen is decided by
   the app in front, not by the page around it. For that to hold, no ancestor
   of a phone may open a stacking context (no transform, opacity or filter on
   the sections), or the z-index stops reaching past the veil. */
.phone {
  position: relative;
  z-index: 60;
  width: min(300px, 78vw);
  aspect-ratio: 300 / 624;
  padding: 10px;
  border-radius: 46px;
  background: #05060f;
  box-shadow: 0 0 0 1.5px #30355f, 0 50px 90px -34px rgba(0, 0, 0, 0.85); }

.screen {
  position: relative;
  height: 100%;
  border-radius: 36px;
  overflow: hidden;
  isolation: isolate;
  background: #0d0d12;
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
  -webkit-user-select: none;
  user-select: none; }

.sbar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 4px 20px 0;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  pointer-events: none; }

.sbar svg {
  width: 12px;
  height: 12px;
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.4s ease; }

.dd-grey .sbar svg {
  opacity: 1; }

.sbar i {
  width: 20px;
  height: 10px;
  border: 1.5px solid #fff;
  border-radius: 3px;
  background: linear-gradient(#fff, #fff) no-repeat 1px 50% / 11px 5px; }

.view {
  position: absolute;
  inset: 0;
  padding-top: 30px; }

.view.full {
  padding-top: 0; }

.homebar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 7;
  display: grid;
  place-items: center;
  height: 24px;
  padding: 0;
  border: 0;
  background: none; }

.homebar::after {
  content: "";
  width: 96px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.8); }

div.homebar {
  pointer-events: none; }

/* The way out of an app, where a phone has a home screen to go back to. It
   floats over the view and outside the feed, so the feed's grey and blur
   leave it alone. */
.back {
  position: absolute;
  left: 9px;
  top: 33px;
  z-index: 7;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(8, 8, 12, 0.6);
  color: #fff; }

.back svg {
  width: 20px;
  height: 20px; }

.has-back .feed-top {
  padding-left: 52px; }

/* The feed: the one app that is on the list in every phone here. */
.app-feed {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #101015;
  filter: grayscale(var(--g, 0)) blur(var(--b, 0px)) brightness(var(--d, 1));
  transition: filter 0.7s ease; }

.dd-grey .phone:not(.phone-local) .app-feed {
  --g: 1;
  --b: 0.5px; }

.fx-gray .app-feed { --g: 1; }
.fx-blur .app-feed { --b: 1.2px; }
.fx-dim .app-feed { --d: 0.42; }

.feed-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 10px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em; }

.feed-live {
  padding: 2px 5px;
  border-radius: 4px;
  background: #ff2d55;
  font-size: 8px;
  letter-spacing: 0.06em; }

.feed-bell {
  position: relative;
  margin-left: auto;
  line-height: 0; }

.feed-bell svg {
  width: 20px;
  height: 20px; }

.badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #ff2d55;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  font-style: normal;
  line-height: 16px;
  letter-spacing: 0;
  text-align: center; }

.badge.bump {
  animation: bump 0.4s ease; }

@keyframes bump {
  40% { transform: scale(1.5); }
  to { transform: none; } }

.feed-scroll {
  flex: 1;
  min-height: 0;
  overflow: hidden; }

.feed-scroll.live {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-y; }

.feed-scroll.live::-webkit-scrollbar {
  display: none; }

.stories {
  display: flex;
  gap: 11px;
  padding: 3px 16px 12px;
  font-size: 9.5px;
  color: #a5a5b0;
  text-align: center; }

.stories i {
  display: block;
  width: 42px;
  height: 42px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--a), var(--b));
  box-shadow: 0 0 0 2px #101015, 0 0 0 4px var(--a); }

.post header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px; }

.ava {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--a), var(--b)); }

.post header b {
  display: block;
  font-size: 12.5px; }

.post header span {
  font-size: 10px;
  color: #8d8d9a; }

.post .follow {
  margin-left: auto;
  padding: 4px 11px;
  border-radius: 12px;
  background: #2f7cff;
  color: #fff;
  font-size: 10px;
  font-weight: 700; }

.media {
  position: relative;
  height: 172px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--a), var(--b)); }

.media::before {
  content: "";
  position: absolute;
  left: var(--sx, 62%);
  top: var(--sy, 26%);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55); }

.media::after {
  content: "";
  position: absolute;
  inset: 45% -10% 0;
  background: rgba(10, 10, 30, 0.34);
  clip-path: polygon(0 60%, 18% 28%, 34% 52%, 52% 8%, 70% 44%, 84% 22%, 100% 50%, 100% 100%, 0 100%); }

.media.m1::after {
  clip-path: polygon(0 30%, 22% 44%, 40% 20%, 60% 50%, 78% 30%, 100% 46%, 100% 100%, 0 100%); }

.media.m2::before {
  width: 96px;
  height: 96px;
  border-radius: 28px;
  transform: rotate(18deg); }

.media.m2::after {
  display: none; }

.media.m3::after {
  inset: 62% 0 0;
  clip-path: none;
  background: rgba(10, 10, 30, 0.3); }

.tag {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 1;
  padding: 4px 9px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.74);
  font-size: 9.5px;
  font-weight: 700; }

.playb {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6); }

.playb svg {
  width: 22px;
  height: 22px; }

.acts {
  display: flex;
  gap: 15px;
  padding: 10px 16px 4px;
  font-size: 11px;
  font-weight: 700; }

.acts svg {
  width: 15px;
  height: 15px;
  margin-right: 4px;
  vertical-align: -3px; }

.acts span:first-child svg {
  fill: #ff2d55; }

.cap {
  padding: 2px 16px 16px;
  font-size: 11.5px;
  color: #cfcfd8; }

.feed-nav {
  display: flex;
  justify-content: space-around;
  padding: 9px 8px 26px;
  border-top: 1px solid #23232c;
  background: #101015; }

.feed-nav span {
  position: relative;
  line-height: 0; }

.feed-nav svg {
  width: 21px;
  height: 21px; }

/* Heads-up notifications in the hero phone, for as long as nothing stops
   them. */
.hun {
  position: absolute;
  left: 9px;
  right: 9px;
  top: 34px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  background: #fff;
  color: #14141c;
  font-size: 11.5px;
  line-height: 1.3;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  transform: translateY(-170%);
  transition: transform 0.5s cubic-bezier(0.3, 1.3, 0.5, 1); }

.hun.in {
  transform: none; }

.hun i {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: linear-gradient(135deg, #ff7a59, #ff2d78); }

.hun b {
  display: block;
  font-size: 10px;
  color: #6a6a78; }

.pill {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 20px;
  background: rgba(8, 8, 12, 0.92);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none; }

.pill.in {
  opacity: 1;
  transform: translate(-50%, 0); }

.pill svg {
  width: 15px;
  height: 15px; }

.pill-top {
  top: 40px; }

/* Camera and maps: the two exceptions. */
.app-scene {
  position: relative;
  height: 100%; }

.app-scene > svg {
  display: block;
  width: 100%;
  height: 100%; }

.shutter {
  position: absolute;
  left: 50%;
  bottom: 44px;
  width: 58px;
  height: 58px;
  margin-left: -29px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: rgba(255, 255, 255, 0.35); }

/* Home screen. */
.home {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 34px 20px 30px;
  background: linear-gradient(165deg, #3a2a78, #151a44 55%, #0d1030); }

.home-clock {
  font-size: 46px;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums; }

.home-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px 6px;
  margin-top: 34px; }

.ico {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font-size: 10.5px;
  -webkit-tap-highlight-color: transparent; }

.ico i {
  position: relative;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--a), var(--b));
  transition: transform 0.15s ease, filter 0.4s ease; }

.ico:active i {
  transform: scale(0.92); }

.ico svg {
  width: 25px;
  height: 25px; }

.ico.locked i {
  filter: grayscale(1) brightness(0.55); }

.ico.no {
  animation: no 0.4s ease; }

/* The text-only launcher widget, where a home screen has room for it. */
.home-list {
  margin-top: 30px;
  padding: 0;
  list-style: none;
  font-size: 17px;
  line-height: 2;
  color: rgba(255, 255, 255, 0.72); }

.home-list li:first-child {
  font-weight: 700;
  color: #fff; }

.home-msg {
  margin-top: auto;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(8, 8, 14, 0.62);
  font-size: 12px;
  color: #d8d8e2; }

.home-msg b {
  display: block;
  margin-bottom: 3px;
  font-size: 13.5px;
  color: #fff; }

.home-msg:empty {
  display: none; }

/* What the app puts in front of another app: the wait, the wake-up call, the
   lock. */
.ov {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 30px 24px;
  background: rgba(9, 9, 13, 0.96);
  text-align: center;
  animation: ov 0.35s ease both; }

.ov.glass {
  background: rgba(9, 9, 13, 0.8);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px); }

@keyframes ov {
  from { opacity: 0; transform: scale(1.04); } }

.ov-icon {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin-bottom: 6px;
  border: 1px solid #3a3a46;
  border-radius: 50%;
  background: #1c1c24; }

.ov-icon svg {
  width: 30px;
  height: 30px; }

.ov h3 {
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -0.01em; }

.ov p {
  font-size: 12.5px;
  line-height: 1.45;
  color: #d6d6df; }

.ov-bar {
  width: 124px;
  height: 3px;
  margin: 4px 0;
  border-radius: 2px;
  background: #3a3a46;
  overflow: hidden; }

.ov-bar i {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left; }

.ov-btn {
  padding: 11px 24px;
  border: 0;
  border-radius: 24px;
  background: #fff;
  color: #14141c;
  font-size: 13px;
  font-weight: 700; }

.ov-link {
  padding: 6px;
  border: 0;
  background: none;
  color: #c9c9d4;
  font-size: 12px; }

.ov-link[disabled] {
  opacity: 0.38;
  cursor: default; }

/* -------------------------------------------------------------- sections */

section {
  padding: clamp(70px, 11vw, 140px) 0; }

.idea {
  background: var(--bg-2); }

.idea-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 44px;
  margin-top: 34px;
  color: var(--mu); }

/* One day, twice. Bright is loud, dark is calm, and the two stay apart in
   grey as well, which is how most people will see this chart. */
.days {
  margin-top: 60px;
  padding: 30px 32px 22px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--bg); }

.day {
  display: grid;
  grid-template-columns: 8.5em minmax(0, 1fr);
  align-items: center;
  gap: 6px 18px;
  margin-bottom: 22px; }

.day-name {
  font-weight: 700; }

.day-bar {
  position: relative;
  height: 22px;
  border-radius: 11px;
  overflow: hidden; }

.day-bar i {
  position: absolute;
  top: 0;
  bottom: 0; }

.day-loud {
  background: var(--stripes) 0 0 / 12% 100%; }

.day-loud i,
.day-calm {
  background: #242a57; }

.day-calm i {
  background: var(--stripes); }

.day-note {
  grid-column: 2;
  font-size: 0.9rem;
  color: var(--mu); }

.day-scale {
  display: flex;
  justify-content: space-between;
  margin-left: calc(8.5em + 18px);
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: #7c83ae;
  font-variant-numeric: tabular-nums; }

.demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  align-items: center;
  gap: 40px 60px;
  width: min(1120px, 100% - 48px);
  margin: 0 auto; }

.demo.flip .demo-text {
  order: 2; }

.demo-stage {
  display: grid;
  place-items: center; }

.demo-text > p:not(.num):not(.small) {
  margin-top: 22px;
  color: var(--mu); }

.demo-text .small {
  margin-top: 18px; }

.num {
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: 8px;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  padding: 7px 12px;
  border-radius: 10px;
  background: var(--stripes);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }

.panel {
  margin-top: 28px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--card); }

.panel-note {
  min-height: 2.9em;
  margin-top: 14px;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--mu); }

.seg {
  display: inline-flex;
  max-width: 100%;
  padding: 4px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08); }

.seg button {
  padding: 8px 16px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--mu);
  font-size: 0.95rem;
  font-weight: 700; }

.seg button.on {
  background: #fff;
  color: #10132e; }

.toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  margin-top: 8px; }

.toggles .sw-text {
  color: var(--tx); }

.toggles.off {
  opacity: 0.4; }

.meter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px; }

.meter div {
  display: flex;
  flex-direction: column-reverse; }

.meter dt {
  font-size: 0.85rem;
  color: var(--mu); }

.meter dd {
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums; }

.budget-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--mu); }

.budget-head b {
  color: var(--tx);
  font-variant-numeric: tabular-nums; }

.budget-bar {
  height: 10px;
  margin-top: 10px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden; }

.budget-bar i {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: var(--c4);
  transition: width 0.6s var(--ease), background 0.6s ease; }

.budget-bar i.low {
  background: var(--c2); }

.panel .link {
  margin-top: 6px; }

/* ----------------------------------------------------------------- cards */

.more {
  background: var(--bg-2); }

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

.card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px 26px 28px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--bg); }

.card-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08); }

.card > p {
  margin-top: 10px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--mu); }

.card > h3 + p {
  margin-bottom: 20px; }

.card > .btn,
.card > form,
.card > .live,
.card > .launcher {
  margin-top: auto; }

.card .live {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.95rem;
  color: var(--tx);
  font-variant-numeric: tabular-nums;
  align-self: stretch; }

.card .live[hidden] {
  display: none; }

.card > .small {
  margin-top: 10px;
  font-size: 0.85rem; }

.pass-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-self: stretch;
  padding-top: 0; }

.pass-form[hidden] {
  display: none; }

input[type="text"] {
  flex: 1 1 100%;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--tx);
  font: inherit;
  font-size: 1rem; }

input::placeholder {
  color: #7d84ae; }

/* A text field that hides what is typed without being a password field: a
   browser offers to save those, and this passphrase is for one visit. */
.masked:not(:placeholder-shown) {
  -webkit-text-security: disc; }

.pass-form .btn {
  margin-top: 0; }

.launcher {
  align-self: stretch;
  padding: 16px 20px;
  border-radius: 18px;
  background: linear-gradient(165deg, #3a2a78, #151a44 70%);
  list-style: none;
  font-size: 1.05rem;
  line-height: 1.75;
  color: #cfd2ee; }

.launcher li:nth-child(-n+2) {
  font-weight: 700;
  color: #fff; }

/* --------------------------------------------------------------- install */

.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 30px 0 16px; }

.setup {
  margin-top: 60px;
  padding: 34px 36px 36px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--bg-2); }

.setup h3 {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em; }

.setup > p {
  max-width: 44em;
  margin-top: 12px;
  color: var(--mu); }

.tabs {
  margin-top: 26px; }

.way {
  margin-top: 18px;
  color: var(--mu); }

.way h4 {
  font-size: 1rem;
  color: var(--tx); }

.js .way h4,
.js .way[hidden] {
  display: none; }

.way p + p,
.way pre + p {
  margin-top: 12px; }

pre {
  margin: 14px 0 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: #080a1c;
  overflow-x: auto;
  font: 0.86rem/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: #d9dcf5; }

/* ------------------------------------------------------ limits and source */

.limits-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 44px;
  margin-top: 34px;
  padding: 0;
  list-style: none;
  color: var(--mu); }

.limits-list li {
  padding: 20px 0;
  border-top: 1px solid var(--line); }

.source {
  background: var(--bg-2); }

.source-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 36px;
  font-weight: 700; }

.source-links svg {
  width: 15px;
  height: 15px;
  margin-left: 5px;
  vertical-align: -1px;
  opacity: 0.6; }

/* The tip jar is on the exception list: above the veil, like the phones. */
.tip {
  position: relative;
  z-index: 60;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: 28px 56px;
  margin-top: 44px;
  padding: 40px 40px 36px;
  border-radius: 28px;
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--line), 0 30px 60px -30px rgba(0, 0, 0, 0.7);
  overflow: hidden; }

.tip::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 7px;
  background: var(--stripes); }

.tip-head {
  display: flex;
  align-items: center;
  gap: 16px; }

.tip-head img {
  display: block;
  border-radius: 14px; }

.tip h3 {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em; }

.tip-note {
  font-size: 0.92rem;
  color: var(--mu); }

.tip-calc {
  margin-top: 26px; }

.tip-calc label {
  display: block;
  font-weight: 700; }

input[type="range"] {
  display: block;
  width: 100%;
  height: 28px;
  margin: 12px 0 8px;
  accent-color: var(--c3);
  cursor: pointer; }

.tip-result {
  min-height: 3.2em;
  color: var(--mu); }

.tip-ask {
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.01em; }

.tip-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px; }

.tip-buttons .btn {
  border: 0;
  color: #14141c; }

.tip-a { background: var(--c3); }
.tip-b { background: #ff9d5c; }
.tip-c { background: #ff7fa6; }

.tip-buttons .btn:hover {
  filter: brightness(1.08); }

.tip-monthly {
  margin-top: 16px;
  font-size: 0.95rem;
  color: var(--mu); }

.foot {
  padding: 46px 0 110px;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--mu); }

.foot-note {
  margin-top: 6px;
  color: #7c83ae; }

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 22px; }

/* ------------------------------------------- what floats above the veil */

.chip {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 110;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px 11px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: #05060f;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  animation: rise 0.45s ease both; }

.chip[hidden] {
  display: none; }

.chip svg {
  width: 17px;
  height: 17px; }

.chip.waiting {
  color: #9ca2c8;
  cursor: default; }

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

.say {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 120;
  max-width: min(440px, 100% - 40px);
  padding: 13px 20px;
  border-radius: 16px;
  background: #fff;
  color: #10132e;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translate(-50%, 16px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none; }

.say.in {
  opacity: 1;
  transform: translate(-50%, 0); }

.ask {
  width: min(400px, 100% - 40px);
  padding: 30px 28px 26px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--card);
  color: var(--tx); }

.ask::backdrop {
  background: rgba(5, 6, 15, 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px); }

.ask h2 {
  font-size: 1.6rem;
  letter-spacing: -0.02em; }

.ask p {
  margin-top: 10px;
  color: var(--mu); }

.ask input {
  width: 100%;
  margin-top: 18px; }

.ask-error {
  min-height: 1.5em;
  font-size: 0.92rem;
  color: #ffb4a0 !important; }

.ask-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; }

.ask .small {
  margin-top: 18px; }

/* ---------------------------------------------------------------- reveal */

.js .rv {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease; }

.js .rv.in {
  opacity: 1;
  transform: none; }

/* ----------------------------------------------------------------- small */

@media (max-width: 980px) {
  .hero,
  .demo {
    grid-template-columns: minmax(0, 1fr); }

  .hero {
    padding-top: 104px;
    min-height: 0; }

  .hero-stage {
    min-height: 640px; }

  .poster {
    inset: 20px 4% 20px 4%; }

  .hero-stage .phone {
    margin-right: 0; }

  .poster img {
    display: none; }

  .demo.flip .demo-text {
    order: 0; }

  .tip {
    grid-template-columns: minmax(0, 1fr); }

  .tip-result {
    min-height: 4.8em; }

  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 680px) {
  body {
    font-size: 1.06rem; }

  .top {
    gap: 14px;
    padding: 0 16px; }

  .top-nav {
    display: none; }

  .brand span {
    display: none; }

  .wrap,
  .hero,
  .demo {
    width: calc(100% - 40px); }

  .idea-cols,
  .limits-list,
  .cards {
    grid-template-columns: minmax(0, 1fr); }

  .days {
    padding: 22px 18px 16px; }

  .day {
    grid-template-columns: minmax(0, 1fr); }

  .day-note {
    grid-column: 1; }

  .day-scale {
    margin-left: 0; }

  .setup {
    padding: 26px 22px 28px; }

  .tip {
    padding: 30px 22px 24px; }

  .seg button {
    padding: 8px 12px; }

  .sw-big .sw-track {
    width: 80px;
    height: 46px; }

  .sw-big .sw-knob {
    width: 36px;
    height: 36px; }

  .sw-big[aria-checked="true"] .sw-knob {
    transform: translateX(34px); }

  .chip {
    right: 12px;
    bottom: 12px; }

  .say {
    bottom: 70px; } }

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto; }

  #veil,
  #veil.on,
  .app-feed,
  .hun,
  .js .rv {
    transition: none; }

  .js .rv {
    opacity: 1;
    transform: none; }

  .poster i,
  .sw-big .sw-track::after,
  .chip,
  .ov {
    animation: none; } }