@font-face {
  font-family: 'Bricolage Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
  size-adjust: 105.5%;
  ascent-override: 88%;
  descent-override: 25.6%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/fonts/bricolage.woff2') format('woff2-variations'), url('/fonts/bricolage.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fixel';
  src: url('/fonts/fixel.woff2') format('woff2-variations'), url('/fonts/fixel.woff2') format('woff2');
  font-weight: 400 800;
  font-stretch: 87.5% 100%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fixel Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
  size-adjust: 102.1%;
  ascent-override: 88.2%;
  descent-override: 18.6%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Fixel Endonym';
  src: url('/fonts/fixel-endonym.woff2') format('woff2-variations'), url('/fonts/fixel-endonym.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0400-04FF;
}

:root {
  --ink: #26262a;
  --tray: #313137;
  --tray-raised: #3c3c43;
  --hairline: #45454d;
  --rule: #3a3a41;
  --paper: #f4f2ec;
  --text-2: #d3d1cc;
  --muted: #a2a1a7;
  --dim: #949399;
  --pencil: #f2c14e;
  --pencil-ink: #2a2208;
  --red: #e4574a;
  --red-surface: #c7392c;
  --red-text: #f58074;
  --red-ink: #fff3f1;
  --scrim: rgba(38, 38, 42, 0.78);
  --gutter: clamp(20px, 5vw, 56px);
  --radius-card: 24px;
  --font: 'Bricolage Grotesque', 'Fixel Endonym', 'Bricolage Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.36, 0.5, 1);
  color-scheme: dark;
}

html[lang='uk'] {
  --font: 'Fixel', 'Fixel Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html[lang='uk'] body {
  font-stretch: 87.5%;
}

html[lang='uk'] :is(h1, h2, .price-lead, .brand) {
  font-stretch: 100%;
}

html[lang='uk'] h1 {
  font-size: clamp(30px, 10.6vw, 80px);
}

html[lang='uk'] .phone {
  font-family: var(--system);
  font-stretch: 100%;
}

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

html {
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img,
svg {
  display: block;
  max-width: 100%;
}

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

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

strong {
  font-weight: 700;
  color: var(--paper);
}

:focus-visible {
  outline: 3px solid var(--pencil);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

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

.i {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: currentColor;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--pencil);
  color: var(--pencil-ink);
  font-weight: 700;
  text-decoration: none;
}

.skip:focus {
  top: 12px;
}

main:focus {
  outline: none;
}

.wrap {
  width: min(100% - 2 * var(--gutter), 1200px);
  margin-inline: auto;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 16px;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 160ms, border-color 160ms, filter 160ms;
}

.btn:active {
  transform: scale(0.985);
}

.btn .i {
  width: 20px;
  height: 20px;
}

.btn-primary {
  background: var(--pencil);
  color: var(--pencil-ink);
}

.btn-primary:hover {
  filter: brightness(1.06);
}

.btn-quiet {
  border-color: var(--hairline);
  color: var(--paper);
}

.btn-quiet:hover {
  border-color: var(--muted);
}

.btn-small {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 14px;
  font-size: 15px;
}

.btn-large {
  min-height: 64px;
  padding: 0 32px;
  font-size: 19px;
  border-radius: 18px;
}

h1,
h2,
h3 {
  overflow-wrap: break-word;
}

h2 {
  max-width: 17ch;
  font-size: clamp(36px, 7.2vw, 68px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

h3 {
  font-size: 21px;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

p,
li,
dd {
  text-wrap: pretty;
}

.lede {
  max-width: 34em;
  color: var(--text-2);
  font-size: clamp(18px, 1.9vw, 21px);
  line-height: 1.5;
}

.section-title {
  margin-bottom: clamp(40px, 6vw, 72px);
}

.band {
  padding-block: clamp(64px, 12vw, 148px);
  border-top: 1px solid var(--rule);
}

.masthead {
  position: relative;
  z-index: 20;
}

.masthead-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-right: auto;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.brand img {
  border-radius: 8px;
}

.masthead-nav {
  display: flex;
  align-items: center;
}

.masthead-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 550;
  text-decoration: none;
  transition: color 160ms;
}

.masthead-nav a:hover {
  color: var(--paper);
}

.nav-wide,
.masthead-cta {
  display: none !important;
}

.lang-menu {
  position: relative;
  display: none;
}

.lang-menu summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  list-style: none;
  cursor: pointer;
  transition: border-color 160ms, color 160ms;
}

.lang-menu summary::-webkit-details-marker {
  display: none;
}

.lang-menu summary:hover,
.lang-menu[open] summary {
  border-color: var(--muted);
  color: var(--paper);
}

.lang-menu summary .i {
  width: 17px;
  height: 17px;
}

.lang-menu .lang-chevron {
  width: 13px;
  height: 13px;
  transition: transform 200ms var(--ease-out);
}

.lang-menu[open] .lang-chevron {
  transform: rotate(180deg);
}

.lang-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  display: grid;
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--tray);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}

.lang-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--text-2);
  font-size: 15px;
  font-weight: 550;
  text-decoration: none;
}

.lang-list a:hover {
  background: var(--tray-raised);
  color: var(--paper);
}

.lang-list a[aria-current='page'] {
  color: var(--paper);
}

.lang-list .i {
  width: 16px;
  height: 16px;
  color: var(--pencil);
}

.hero {
  position: relative;
  overflow-x: clip;
  padding: clamp(12px, 5vw, 56px) 0 clamp(72px, 10vw, 120px);
}

.hero-grid {
  display: grid;
  gap: 36px;
}

.availability {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 12px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--tray);
  color: var(--text-2);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.availability-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pencil);
  box-shadow: 0 0 0 4px rgba(242, 193, 78, 0.18);
}

h1 {
  margin: 18px 0 18px;
  max-width: 13ch;
  font-size: clamp(30px, 11.4vw, 88px);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.038em;
  text-wrap: balance;
}

.ringed {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.ring {
  position: absolute;
  max-width: none;
  left: -14%;
  top: -24%;
  width: 128%;
  height: 150%;
  overflow: visible;
  fill: none;
  stroke: var(--pencil);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.ring path {
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.js .ring path {
  stroke-dashoffset: 1;
}

.js .ringed.is-drawn .ring path {
  animation: draw-ring 900ms var(--ease-out) 150ms forwards;
}

@keyframes draw-ring {
  to {
    stroke-dashoffset: 0;
  }
}

.hero .lede {
  max-width: 30em;
}

.hero .btn-quiet {
  display: none;
}

.cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.assurances {
  display: grid;
  gap: 8px;
  margin-top: 22px;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 550;
  line-height: 1.4;
}

.assurances li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.assurances .i {
  width: 16px;
  height: 16px;
  color: var(--pencil);
}

.nowrap {
  white-space: nowrap;
}

.hero-demo {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  gap: 22px;
}

.ambient {
  position: absolute;
  inset: -4% -18% 12%;
  z-index: -1;
  opacity: 0.62;
  pointer-events: none;
  transition: opacity 700ms var(--ease-out);
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent);
  mask-image: radial-gradient(closest-side, #000 35%, transparent);
}

.ambient.is-dim {
  opacity: 0.26;
}

.ambient img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  filter: blur(56px) saturate(1.5);
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
  will-change: opacity;
}

.ambient img.is-shown {
  opacity: 1;
}

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

@keyframes rise-device {
  from {
    opacity: 0;
    transform: translateY(44px) scale(0.97);
  }
}

@keyframes glow-in {
  from {
    opacity: 0;
  }
}

.js .hero-copy > :nth-child(n + 3) {
  animation: rise 800ms var(--ease-out) 80ms both;
}

.js .hero-copy > :nth-child(4) {
  animation-delay: 160ms;
}

.js .hero-copy > :nth-child(5) {
  animation-delay: 240ms;
}

.js .hero-demo .device,
.js .demo-caption {
  animation: rise-device 1000ms var(--ease-out) 180ms both;
}

.js .ambient {
  animation: glow-in 1800ms ease-out 500ms both;
}

.device-hero {
  width: min(100%, 360px);
}

.demo-caption {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
}

.demo-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--paper);
  font-size: 15px;
  font-weight: 650;
}

.demo-hint .i {
  width: 16px;
  height: 16px;
  color: var(--pencil);
}

.demo-hint.is-tally {
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.demo-hint.is-tally .i {
  display: none;
}

.demo-hint strong {
  color: var(--pencil);
  font-weight: 750;
}

.demo-note {
  max-width: 30ch;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.device {
  container-type: inline-size;
  width: 100%;
  margin-inline: auto;
}

.phone {
  --u: calc(100cqw / 414);
  position: relative;
  aspect-ratio: 414 / 868;
  border-radius: calc(var(--u) * 66);
  background: #0c0c0e;
  box-shadow:
    0 0 0 calc(var(--u) * 1.5) #4b4b53,
    0 calc(var(--u) * 30) calc(var(--u) * 60) calc(var(--u) * -20) rgba(0, 0, 0, 0.55),
    0 calc(var(--u) * 70) calc(var(--u) * 120) calc(var(--u) * -40) rgba(0, 0, 0, 0.5);
  font-family: var(--font);
  color: var(--paper);
  line-height: 1.2;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.phone::before {
  content: '';
  position: absolute;
  inset: calc(var(--u) * 12);
  border-radius: calc(var(--u) * 54);
  background: var(--ink);
}

.phone .i {
  width: 1em;
  height: 1em;
}

.phone p {
  margin: 0;
}

.status {
  position: absolute;
  top: calc(var(--u) * 12);
  left: calc(var(--u) * 12);
  right: calc(var(--u) * 12);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--u) * 54);
  padding: 0 calc(var(--u) * 30) 0 calc(var(--u) * 48);
  font-size: calc(var(--u) * 17);
  font-weight: 600;
  letter-spacing: calc(var(--u) * -0.3);
}

.island {
  position: absolute;
  top: calc(var(--u) * 11);
  left: 50%;
  width: calc(var(--u) * 124);
  height: calc(var(--u) * 36);
  border-radius: calc(var(--u) * 20);
  background: #000;
  transform: translateX(-50%);
}

.status-icons svg {
  width: calc(var(--u) * 66);
  height: calc(var(--u) * 12);
  fill: var(--paper);
  color: var(--paper);
}

.home-indicator {
  position: absolute;
  bottom: calc(var(--u) * 20);
  left: 50%;
  z-index: 4;
  width: calc(var(--u) * 134);
  height: calc(var(--u) * 5);
  border-radius: calc(var(--u) * 3);
  background: rgba(244, 242, 236, 0.9);
  transform: translateX(-50%);
  pointer-events: none;
}

.screen {
  position: absolute;
  top: calc(var(--u) * 66);
  left: calc(var(--u) * 12);
  right: calc(var(--u) * 12);
  bottom: calc(var(--u) * 12);
  z-index: 2;
  overflow: hidden;
  border-radius: 0 0 calc(var(--u) * 54) calc(var(--u) * 54);
  background: var(--ink);
  font-size: calc(var(--u) * 16);
}

.t-number {
  font-size: calc(var(--u) * 64);
  line-height: calc(var(--u) * 68);
  font-weight: 800;
  letter-spacing: calc(var(--u) * -2.4);
}

.t-display {
  font-size: calc(var(--u) * 38);
  line-height: calc(var(--u) * 42);
  font-weight: 800;
  letter-spacing: calc(var(--u) * -1.2);
}

.t-title {
  font-size: calc(var(--u) * 28);
  line-height: calc(var(--u) * 33);
  font-weight: 700;
  letter-spacing: calc(var(--u) * -0.7);
}

.t-heading {
  font-size: calc(var(--u) * 20);
  line-height: calc(var(--u) * 26);
  font-weight: 600;
  letter-spacing: calc(var(--u) * -0.3);
}

.t-body {
  font-size: calc(var(--u) * 16);
  line-height: calc(var(--u) * 23);
  font-weight: 400;
}

.t-label {
  font-size: calc(var(--u) * 16);
  line-height: calc(var(--u) * 20);
  font-weight: 600;
  letter-spacing: calc(var(--u) * -0.1);
}

.t-caption {
  font-size: calc(var(--u) * 13);
  line-height: calc(var(--u) * 18);
  font-weight: 500;
}

.phone .muted {
  color: var(--muted);
}

.phone .pencil {
  color: var(--pencil);
}

.screen-deck {
  display: flex;
  flex-direction: column;
  padding: 0 calc(var(--u) * 24) calc(var(--u) * 34);
}

.app-topbar {
  display: grid;
  grid-template-columns: calc(var(--u) * 96) 1fr calc(var(--u) * 96);
  align-items: center;
  height: calc(var(--u) * 56);
  flex: none;
}

.screen-review .app-topbar {
  padding: 0 calc(var(--u) * 24);
}

.app-topbar-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  white-space: nowrap;
}

.app-iconbtn {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tray);
  color: var(--paper);
  font-size: calc(var(--u) * 22);
}

button.app-iconbtn {
  cursor: pointer;
}

.app-trashpill {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 6);
  height: calc(var(--u) * 36);
  padding: 0 calc(var(--u) * 12);
  border: 0;
  border-radius: 999px;
  background: var(--tray);
  color: var(--paper);
  font-size: calc(var(--u) * 13);
  line-height: 1;
  font-weight: 700;
}

.app-trashpill .i {
  font-size: calc(var(--u) * 16);
  color: var(--red);
}

button.app-trashpill {
  cursor: pointer;
}

.app-rule {
  display: block;
  flex: none;
  height: calc(var(--u) * 3);
  border-radius: calc(var(--u) * 1.5);
  background: var(--tray-raised);
  overflow: hidden;
}

.app-rule > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--pencil);
  transition: width 320ms var(--ease-out);
}

.app-stage {
  position: relative;
  flex: 1;
  margin: calc(var(--u) * 16) 0;
}

.app-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(var(--u) * 28);
  background: var(--tray);
  transform-origin: 50% 50%;
}

.app-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

.app-card.is-contain img {
  object-fit: contain;
}

.app-card.is-next {
  transform: translateY(calc(var(--u) * 16)) scale(0.94);
}

.app-card.is-top {
  touch-action: pan-y;
  cursor: grab;
}

.app-card.is-dragging {
  cursor: grabbing;
}

.app-dim {
  position: absolute;
  inset: 0;
  background: var(--ink);
  opacity: 0.35;
  transition: opacity 260ms;
}

.app-card.is-top .app-dim {
  opacity: 0;
}

.app-card-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 32) calc(var(--u) * 24) calc(var(--u) * 24);
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.55));
  color: #fff;
}

.app-card-caption .t-caption {
  color: rgba(255, 255, 255, 0.75);
}

.app-badges {
  position: absolute;
  top: calc(var(--u) * 16);
  left: calc(var(--u) * 16);
  display: flex;
  gap: calc(var(--u) * 8);
}

.app-badge {
  padding: calc(var(--u) * 4) calc(var(--u) * 10);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
}

.app-swipehint {
  position: absolute;
  top: 66%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  padding: calc(var(--u) * 6) calc(var(--u) * 14);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--paper);
  font-size: calc(var(--u) * 13);
  line-height: calc(var(--u) * 18);
  font-weight: 500;
  transform: translateX(-50%);
  pointer-events: none;
  transition: opacity 200ms;
}

.app-swipehint .i {
  font-size: calc(var(--u) * 16);
}

.app-mute {
  position: absolute;
  top: calc(var(--u) * 16);
  right: calc(var(--u) * 16);
  display: grid;
  place-items: center;
  width: calc(var(--u) * 36);
  height: calc(var(--u) * 36);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  font-size: calc(var(--u) * 18);
}

.app-stamp {
  position: absolute;
  top: calc(var(--u) * 28);
  padding: calc(var(--u) * 4) calc(var(--u) * 16);
  border: calc(var(--u) * 4) solid currentColor;
  border-radius: calc(var(--u) * 12);
  font-size: calc(var(--u) * 34);
  line-height: calc(var(--u) * 40);
  font-weight: 800;
  letter-spacing: calc(var(--u) * -0.5);
  opacity: 0;
  pointer-events: none;
}

.app-stamp-keep {
  left: calc(var(--u) * 22);
  color: var(--pencil);
  transform: rotate(-12deg) scale(0.7);
}

.app-stamp-toss {
  right: calc(var(--u) * 22);
  color: var(--red);
  transform: rotate(12deg) scale(0.7);
}

.app-card.is-posed-keep {
  transform: translateX(calc(var(--u) * 92)) translateY(calc(var(--u) * 8)) rotate(3.6deg);
}

.app-card.is-posed-keep .app-stamp-keep {
  opacity: 1;
  transform: rotate(-12deg);
}

.app-controls {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 32);
  height: calc(var(--u) * 84);
}

.app-roundbtn {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 76);
  height: calc(var(--u) * 76);
  padding: 0;
  border: 0;
  border-radius: 50%;
  font-size: calc(var(--u) * 38);
  transition: transform 140ms var(--ease-out), opacity 140ms;
}

button.app-roundbtn {
  cursor: pointer;
}

button.app-roundbtn:active {
  transform: scale(0.94);
  opacity: 0.82;
}

.app-toss {
  background: var(--red);
  color: var(--red-ink);
}

.app-keep {
  background: var(--pencil);
  color: var(--pencil-ink);
}

.app-undo {
  position: absolute;
  left: calc(var(--u) * 8);
  top: 50%;
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 52);
  margin-top: calc(var(--u) * -26);
  background: var(--tray);
  color: var(--paper);
  font-size: calc(var(--u) * 26);
}

.app-roundbtn[disabled] {
  opacity: 0.45;
  cursor: default;
}

.app-finished {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 16);
  padding: 0 calc(var(--u) * 8);
  text-align: center;
}

.app-finished-mark {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 84);
  height: calc(var(--u) * 84);
  margin-bottom: calc(var(--u) * 8);
  border-radius: 50%;
  background: var(--pencil);
  color: var(--pencil-ink);
  font-size: calc(var(--u) * 40);
}

.app-finished-actions {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
  align-self: stretch;
  margin-top: calc(var(--u) * 16);
}

.app-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 8);
  width: 100%;
  min-height: calc(var(--u) * 56);
  padding: calc(var(--u) * 12) calc(var(--u) * 24);
  border: 0;
  border-radius: calc(var(--u) * 16);
  font-size: calc(var(--u) * 16);
  line-height: calc(var(--u) * 20);
  font-weight: 600;
  letter-spacing: calc(var(--u) * -0.1);
  text-align: center;
}

.app-btn .i {
  font-size: calc(var(--u) * 20);
}

button.app-btn {
  cursor: pointer;
  transition: transform 140ms var(--ease-out), opacity 140ms;
}

button.app-btn:active {
  transform: scale(0.985);
  opacity: 0.82;
}

.app-btn-md {
  min-height: calc(var(--u) * 46);
  padding-block: calc(var(--u) * 8);
}

.app-btn-primary {
  background: var(--pencil);
  color: var(--pencil-ink);
}

.app-btn-secondary {
  background: var(--tray-raised);
  color: var(--paper);
}

.app-btn-danger {
  background: var(--red-surface);
  color: var(--red-ink);
}

.app-btn-ghost {
  width: auto;
  align-self: center;
  padding-inline: calc(var(--u) * 12);
  background: transparent;
  color: var(--muted);
}

.screen-review {
  display: flex;
  flex-direction: column;
}

.app-topbar-spacer {
  display: block;
}

.app-summary {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
  padding: calc(var(--u) * 8) calc(var(--u) * 24) calc(var(--u) * 24);
}

.app-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: calc(var(--u) * 4);
  padding: 0 calc(var(--u) * 24);
}

.app-tile {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: calc(var(--u) * 10);
  background: var(--tray-raised);
}

button.app-tile {
  cursor: pointer;
}

.app-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.app-size,
.app-duration {
  position: absolute;
  bottom: calc(var(--u) * 6);
  padding: calc(var(--u) * 1) calc(var(--u) * 5);
  border-radius: calc(var(--u) * 6);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: calc(var(--u) * 11);
  line-height: calc(var(--u) * 14);
  font-weight: 500;
}

.app-size {
  left: calc(var(--u) * 6);
}

.app-duration {
  right: calc(var(--u) * 4);
  bottom: calc(var(--u) * 4);
}

.app-tile.is-marked::after {
  content: '';
  position: absolute;
  inset: 0;
  border: calc(var(--u) * 3) solid var(--pencil);
  border-radius: inherit;
  pointer-events: none;
}

.app-keepmark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--scrim);
}

.app-keepmark > span {
  padding: calc(var(--u) * 2) calc(var(--u) * 8);
  border: calc(var(--u) * 3) solid var(--pencil);
  border-radius: calc(var(--u) * 8);
  color: var(--pencil);
  font-size: calc(var(--u) * 16);
  line-height: calc(var(--u) * 20);
  font-weight: 600;
  transform: rotate(-10deg);
}

.app-tile:not(.is-marked) .app-keepmark {
  display: none;
}

.app-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
  padding: calc(var(--u) * 16) calc(var(--u) * 24) calc(var(--u) * 34);
  background: var(--ink);
}

.screen-done {
  display: flex;
  flex-direction: column;
  padding: 0 calc(var(--u) * 24) calc(var(--u) * 34);
}

.app-done-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--u) * 32);
  padding: calc(var(--u) * 16) 0;
}

.app-done-hero {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.app-tip {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--u) * 12);
  padding: calc(var(--u) * 16);
  border-radius: calc(var(--u) * 24);
  background: var(--tray);
}

.app-tip > .i {
  flex: none;
  font-size: calc(var(--u) * 22);
}

.app-tip > div {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}

.app-tip .app-btn {
  width: auto;
  align-self: flex-start;
}

.app-actions {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
}

.app-sheet {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--u) * 16) calc(var(--u) * 16) calc(var(--u) * 34);
  background: var(--scrim);
}

.app-sheet-card {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
  width: 100%;
  padding: calc(var(--u) * 24);
  border-radius: calc(var(--u) * 24);
  background: var(--tray);
}

.screen-home {
  padding: 0 calc(var(--u) * 24);
}

.app-brandrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--u) * 56);
}

.app-brandrow .t-title {
  letter-spacing: calc(var(--u) * -1);
}

.app-brandactions {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.app-propill {
  display: inline-flex;
  align-items: center;
  height: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 12);
  border-radius: 999px;
  background: var(--pencil);
  color: var(--pencil-ink);
  font-size: calc(var(--u) * 13);
  font-weight: 700;
}

.app-freed {
  margin-top: calc(var(--u) * 24);
}

.app-numberrow {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 8);
}

.app-numberrow .t-title {
  padding-bottom: calc(var(--u) * 6);
}

.app-meter {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
  margin-top: calc(var(--u) * 24);
}

.app-meter-track {
  position: relative;
  display: block;
  height: calc(var(--u) * 10);
  overflow: hidden;
  border-radius: calc(var(--u) * 5);
  background: var(--tray-raised);
}

.app-meter-used,
.app-meter-freed {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.app-meter-used {
  border-radius: calc(var(--u) * 5);
  background: var(--paper);
  opacity: 0.55;
}

.app-meter-freed {
  background: var(--pencil);
  opacity: 0.9;
}

.app-quick {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
  margin-top: calc(var(--u) * 24);
}

.app-chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

.app-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 16);
  border-radius: 999px;
  background: var(--tray);
}

.app-chip .i {
  font-size: calc(var(--u) * 17);
}

.app-year {
  padding: calc(var(--u) * 32) 0 calc(var(--u) * 4);
}

.app-month {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
  padding: calc(var(--u) * 16) 0;
  border-bottom: max(1px, calc(var(--u) * 0.5)) solid var(--hairline);
}

.app-month-top {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
}

.app-month-top > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.app-sorted {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 4);
}

.app-sorted .i {
  font-size: calc(var(--u) * 14);
}

.app-strip {
  display: flex;
  gap: calc(var(--u) * 6);
}

.app-strip img {
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 52);
  border-radius: calc(var(--u) * 8);
  object-fit: cover;
  background: var(--tray-raised);
}

.phone button:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 2px;
}

.screen-enter {
  animation: screen-in 280ms var(--ease-out);
}

@keyframes screen-in {
  from {
    opacity: 0;
    transform: translateX(calc(var(--u) * 24));
  }
}

.fade-enter {
  animation: fade-in 260ms var(--ease-out);
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

.problem-grid {
  display: grid;
  gap: 48px;
}

.problem h2 {
  max-width: 11ch;
}

.problem-copy .lede {
  margin-top: 24px;
}

.problem-copy p:not(.lede) {
  max-width: 34em;
  margin-top: 16px;
  color: var(--text-2);
}

.roll {
  position: relative;
  isolation: isolate;
  width: min(100%, 440px);
  margin-inline: auto;
  overflow: hidden;
  border-radius: 28px;
  background: #000;
  -webkit-mask-image: linear-gradient(#000 72%, transparent);
  mask-image: linear-gradient(#000 72%, transparent);
}

.roll-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
}

.roll-grid img,
.roll-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.roll-video {
  position: relative;
}

.roll-video img {
  height: 100%;
}

.roll-video span {
  position: absolute;
  right: 6px;
  bottom: 5px;
  color: #fff;
  font: 600 11px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.roll::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  transition: opacity 500ms var(--ease-out);
}

.roll-alert {
  position: absolute;
  top: 42%;
  left: 50%;
  z-index: 1;
  width: min(270px, 76%);
  overflow: hidden;
  border-radius: 14px;
  background: rgba(44, 44, 46, 0.78);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  text-align: center;
  transform: translate(-50%, -50%);
  transition: opacity 240ms ease-out, transform 460ms cubic-bezier(0.2, 1.15, 0.3, 1);
}

.roll-alert-title {
  padding: 19px 16px 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: -0.4px;
}

.roll-alert-body {
  padding: 3px 16px 19px;
  font-size: 13px;
  line-height: 17px;
  letter-spacing: -0.1px;
}

.roll-alert-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 0.5px solid rgba(255, 255, 255, 0.22);
}

.roll-alert-actions span {
  padding: 11px 0;
  color: #0a84ff;
  font-size: 17px;
  line-height: 22px;
}

.roll-alert-actions span + span {
  border-left: 0.5px solid rgba(255, 255, 255, 0.22);
  font-weight: 600;
}

.js .roll:not(.is-shown) .roll-alert {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.16);
}

.js .roll:not(.is-shown)::after {
  opacity: 0;
}

.steps {
  display: grid;
  gap: 72px;
}

.step {
  display: grid;
  gap: 32px;
}

.step-num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 20px;
  border: 2.5px solid var(--pencil);
  border-radius: 50%;
  color: var(--pencil);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.step-copy h3 {
  max-width: 16ch;
  font-size: clamp(28px, 4.2vw, 40px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.step-copy p:not(.step-num) {
  max-width: 30em;
  margin-top: 16px;
  color: var(--text-2);
}

.step-screen .device {
  width: min(100%, 300px);
}

.chances {
  margin-top: clamp(64px, 9vw, 112px);
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
}

.chances h3 {
  text-wrap: balance;
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 800;
  letter-spacing: -0.025em;
}

.chances ol {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}

.chances li {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  column-gap: 14px;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.5;
}

.chances strong {
  font-weight: 750;
}

.chance-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--tray);
  color: var(--pencil);
}

.chance-mark .i {
  width: 20px;
  height: 20px;
}

.mono {
  color: var(--pencil);
  font-weight: 800;
}

.quick-grid {
  display: grid;
  gap: 56px;
}

.quick-copy .lede {
  margin-top: 24px;
}

.quick-list {
  display: grid;
  gap: 26px;
  margin-top: 40px;
}

.quick-list dt {
  display: flex;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -0.015em;
}

.chip .i {
  width: 20px;
  height: 20px;
  color: var(--pencil);
}

.quick-list dd {
  max-width: 28em;
  margin-top: 6px;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.55;
}

.quick-footnote {
  max-width: 32em;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.quick-screen .device {
  width: min(100%, 300px);
}

.paper {
  border-top: 0;
  background: var(--paper);
  color: var(--ink);
}

.paper .lede,
.paper p {
  color: #3f3d38;
}

.paper a {
  color: var(--ink);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.paper :focus-visible {
  outline-color: var(--ink);
}

.privacy-grid {
  display: grid;
  gap: 48px;
}

.privacy-copy .lede {
  margin-top: 24px;
}

.privacy-copy p:not(.lede) {
  max-width: 34em;
  margin-top: 16px;
}

.ledger {
  display: grid;
  gap: 36px;
  align-content: start;
}

.ledger-col {
  padding-top: 18px;
  border-top: 4px solid var(--ink);
}

.ledger h3 {
  margin-bottom: 8px;
  font-size: 19px;
  font-weight: 800;
}

.ledger li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(38, 38, 42, 0.14);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.45;
}

.ledger li::before {
  content: '';
  flex: none;
  width: 11px;
  height: 11px;
  margin-top: 7px;
  border-radius: 50%;
}

.ledger-col:first-child li::before {
  border: 3px solid var(--pencil);
}

.ledger-col + .ledger-col li::before {
  width: 11px;
  height: 2.5px;
  margin-top: 11px;
  border-radius: 2px;
  background: rgba(38, 38, 42, 0.55);
}

.ledger-foot {
  font-size: 15px;
  line-height: 1.55;
}

.price-panel {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
}

.price-col {
  padding: clamp(26px, 4vw, 44px);
}

.price-pro {
  border-top: 1px solid var(--hairline);
  background: var(--tray);
  box-shadow: inset 0 3px 0 var(--pencil);
}

.price-col h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 17px;
  font-weight: 750;
  letter-spacing: 0;
}

.price-pro h3 {
  color: var(--paper);
}

.price-lead {
  text-wrap: balance;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.price-sub {
  margin-top: 4px;
  color: var(--text-2);
  font-size: clamp(18px, 2vw, 21px);
  font-weight: 650;
  letter-spacing: -0.015em;
}

.fig {
  color: var(--pencil);
}

.price-detail {
  max-width: 30em;
  margin-top: 18px;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.55;
}

.price-foot {
  grid-column: 1 / -1;
  padding: 20px clamp(26px, 4vw, 44px);
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.price-foot strong {
  color: var(--paper);
}

.faq-grid {
  display: grid;
  gap: 8px;
}

.faq .section-title {
  margin-bottom: 32px;
}

.faq-list {
  border-top: 1px solid var(--rule);
}

.faq details {
  border-bottom: 1px solid var(--rule);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 68px;
  padding: 16px 0;
  font-size: clamp(18px, 2vw, 21px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary .i {
  width: 22px;
  height: 22px;
  color: var(--muted);
  transition: transform 220ms var(--ease-out);
}

.faq details[open] summary .i {
  transform: rotate(180deg);
  color: var(--pencil);
}

.faq summary:hover .i {
  color: var(--paper);
}

.faq-a {
  padding-bottom: 24px;
}

.faq-a p {
  max-width: 40em;
  color: var(--text-2);
}

.faq-a a,
.maker a {
  color: var(--pencil);
  text-underline-offset: 3px;
}

.closing {
  background: linear-gradient(180deg, var(--ink), #202024);
}

.closing-grid {
  display: grid;
  justify-items: center;
  gap: 64px;
  text-align: center;
}

.closing-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.closing-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 32px;
  border-radius: 22.5%;
  box-shadow: 0 0 0 1px var(--hairline), 0 22px 44px rgba(0, 0, 0, 0.5);
}

.closing h2 {
  max-width: 13ch;
  font-size: clamp(40px, 8vw, 80px);
}

.closing .cta-group {
  justify-content: center;
}

.closing .ringed {
  white-space: nowrap;
}

.closing .ring {
  left: -7%;
  top: -18%;
  width: 114%;
  height: 142%;
}

.closing .lede {
  max-width: 30em;
  margin-top: 26px;
}

.maker {
  max-width: 34em;
  padding-top: 36px;
  border-top: 1px solid var(--rule);
}

.maker p {
  color: var(--text-2);
  font-size: 17px;
  line-height: 1.55;
}

.maker-sign {
  margin-top: 14px;
  color: var(--muted) !important;
  font-size: 15px !important;
  font-weight: 650;
}

.maker-sign::before {
  content: '— ';
}

.footer {
  padding: 48px 0 calc(48px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 15px;
}

.footer .brand {
  color: var(--paper);
}

.footer-grid {
  display: grid;
  gap: 24px;
}

.footer-brand p {
  margin-top: 6px;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}

.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-2);
  text-decoration: none;
}

.footer-nav a:hover {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-fine {
  color: var(--dim);
  font-size: 13px;
}

.footer-langs {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--muted);
}

.footer-langs > .i {
  width: 18px;
  height: 18px;
  margin-top: 13px;
}

.footer-langs ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
}

.footer-langs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
}

.footer-langs a:hover {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-langs a[aria-current='page'] {
  color: var(--paper);
  font-weight: 650;
}

.missing {
  padding-block: clamp(48px, 10vw, 120px);
}

.missing .lede {
  margin-top: 18px;
}

.missing p:has(.btn) {
  margin-top: 28px;
}

.missing-list {
  display: grid;
  gap: 14px;
  max-width: 44em;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  color: var(--text-2);
  font-size: 15px;
}

.missing-list strong {
  margin-right: 6px;
}

.missing-list a {
  color: var(--pencil);
}

.missing-list [lang='uk'] {
  font-family: 'Fixel', 'Fixel Fallback', sans-serif;
}

.dock {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  background: rgba(49, 49, 55, 0.97);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  transform: translateY(calc(100% + 40px));
  visibility: hidden;
  transition: transform 320ms var(--ease-out), visibility 0s linear 320ms;
}

.dock.is-visible {
  transform: none;
  visibility: visible;
  transition: transform 320ms var(--ease-out), visibility 0s;
}

.dock img {
  border-radius: 8px;
}

.dock p {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  font-size: 13px;
  line-height: 1.3;
  color: var(--muted);
}

.dock strong {
  font-size: 15px;
  font-weight: 800;
}

.dock .btn {
  white-space: nowrap;
}

@media (max-width: 359px) {
  .avail-device {
    display: none;
  }
}

@media (max-height: 500px) {
  .dock {
    display: none !important;
  }
}

@media (min-width: 560px) {
  .lang-menu {
    display: block;
  }
}

@media (min-width: 640px) {
  .hero .btn-quiet {
    display: inline-flex;
  }

  .quick-list {
    grid-template-columns: 1fr 1fr;
    gap: 32px 40px;
  }

  .ledger {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .ledger-foot {
    grid-column: 1 / -1;
  }

  .chances ol {
    grid-template-columns: 1fr 1fr;
    gap: 22px 32px;
  }

  .step-screen .device,
  .quick-screen .device {
    width: min(100%, 330px);
  }
}

@media (min-width: 800px) {
  .price-panel {
    grid-template-columns: 1fr 1fr;
  }

  .price-pro {
    border-top: 0;
    border-left: 1px solid var(--hairline);
  }

  .footer-grid {
    grid-template-columns: 1fr auto;
    align-items: start;
  }

  .footer-fine {
    grid-column: 1 / -1;
  }
}

@media (min-width: 960px) {
  .masthead {
    position: sticky;
    top: 0;
    background: var(--ink);
    border-bottom: 1px solid transparent;
    transition: border-color 200ms;
  }

  .masthead.is-scrolled {
    border-bottom-color: var(--rule);
  }

  html {
    scroll-padding-top: 88px;
  }

  .nav-wide,
  .masthead-cta {
    display: inline-flex !important;
  }

  .masthead-cta {
    margin-left: 8px;
  }

  .lang-menu {
    margin-left: 4px;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 64px;
  }

  .device-hero {
    width: clamp(300px, calc((100svh - 170px) * 414 / 868), 380px);
  }

  .problem-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: 80px;
  }

  .quick-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 80px;
  }

  .privacy-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 80px;
  }

  .faq-grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
    gap: 64px;
    align-items: start;
  }

  .faq .section-title {
    position: sticky;
    top: 110px;
    margin-bottom: 0;
  }

  .chances ol {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .chances li {
    grid-template-columns: 1fr;
    row-gap: 12px;
    align-content: start;
    align-items: start;
  }

  .dock {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .steps {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    column-gap: 80px;
    row-gap: 96px;
  }

  .step {
    display: contents;
  }

  .step-copy {
    grid-column: 1;
    align-self: center;
  }

  .step-screen {
    grid-column: 2;
  }

  .step-screen .device {
    width: clamp(280px, calc((100svh - 160px) * 414 / 868), 340px);
  }

  .js .steps {
    row-gap: 0;
  }

  .js .step-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 66svh;
    opacity: 0.6;
    transition: opacity 400ms var(--ease-out);
  }

  .js .step-copy.is-active {
    opacity: 1;
  }

  .js .step[data-step='1'] .step-copy {
    grid-row: 1;
    justify-content: flex-start;
    padding-top: 8svh;
  }

  .js .step[data-step='2'] .step-copy {
    grid-row: 2;
  }

  .js .step[data-step='3'] .step-copy {
    grid-row: 3;
  }

  .js .step-screen {
    position: sticky;
    top: max(96px, calc(50svh - (clamp(280px, calc((100svh - 160px) * 414 / 868), 340px) * 868 / 414) / 2 + 36px));
    grid-row: 1 / span 3;
    align-self: start;
    opacity: 0;
    transform: translateY(16px) scale(0.985);
    transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
    pointer-events: none;
  }

  .js .step-screen.is-active {
    opacity: 1;
    transform: none;
  }
}

@supports not (width: 1cqw) {
  .device {
    width: 331px !important;
  }

  .phone {
    --u: 0.8px;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }

  .js .ring path {
    stroke-dashoffset: 0;
    animation: none;
  }
}

@media (forced-colors: active) {
  .btn,
  .app-roundbtn,
  .app-btn {
    border: 1px solid ButtonText;
  }
}