/* ==========================================================================
   Hushbox: lock it where it sits.
   The page is set in the Mac's own face, because the product lives inside
   Finder. White and cool grey carry everything; the one purple is kept for
   the places where Hushbox acts: the menu highlight, the lock, the buy button.
   ========================================================================== */

/* --------------------------------------------------------------- tokens */
:root {
  --ink: #231d48;          /* headings: a violet ink, not a black */
  --text: #454061;         /* body copy */
  --muted: #6c6886;
  --faint: #9a96ae;

  --page: #ffffff;
  --mist: #f4f4f8;         /* the cool grey bands */
  --mist-2: #eaeaf1;
  --line: #e3e1ec;
  --line-2: #d3d0e1;

  --violet: #6547d8;       /* Hushbox purple, verbatim */
  --violet-deep: #5033c2;
  --violet-ink: #4c32b9;   /* purple for small text on white, 7:1 */
  --violet-tint: #f0edfc;
  --violet-soft: #cfc5f7;

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
    "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --gut: clamp(16px, 5vw, 40px);
  --section-y: clamp(72px, 10vw, 128px);
  --max: 1180px;

  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23f0edfc'/%3E%3Cpath d='m6 10.3 2.6 2.6L14 7.6' fill='none' stroke='%236547d8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden: hidden would make body a scroll container and break the sticky nav */
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2.5px solid var(--violet);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 50%; translate: -50% -120%;
  background: var(--violet); color: #fff;
  padding: 10px 18px; border-radius: 0 0 10px 10px; z-index: 1000;
  font-weight: 600; text-decoration: none; transition: translate .18s ease;
}
.skip-link:focus { translate: -50% 0; }

/* ============================================================ type roles */
h1, h2, h3 { color: var(--ink); font-weight: 700; margin: 0; }
h1 {
  font-size: clamp(46px, 6.4vw, 86px);
  line-height: 0.98;
  letter-spacing: -0.045em;
}
h2 {
  font-size: clamp(32px, 4.3vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.035em;
}
h3 { font-size: 19px; line-height: 1.3; letter-spacing: -0.012em; }

.lede {
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.55;
  color: var(--text);
  max-width: 46ch;
  margin: 0;
}
.lede a:not(.btn), .faq__body a, .escape a, .thanks__note a, .doc-page a:not(.btn) {
  color: var(--violet-ink);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* a file name, set the way Finder sets it */
.fname {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

/* ================================================================== nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--page) 84%, transparent);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
.nav.is-stuck { border-bottom-color: var(--line); }
.nav__in { display: flex; align-items: center; gap: 12px; height: 64px; }
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-right: auto;
}
.wordmark img { width: 28px; height: 28px; }
.nav__links { display: flex; align-items: center; gap: 26px; margin-right: 14px; }
.nav__links a { font-size: 15px; text-decoration: none; color: var(--muted); transition: color .15s ease; }
.nav__links a:hover { color: var(--ink); }
@media (max-width: 760px) { .nav__links { display: none; } }
@media (max-width: 400px) { .nav__download { display: none; } }

/* ============================================================== buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 12px;
  border: 0;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, box-shadow .15s ease, color .15s ease;
}
.btn--violet {
  background: var(--violet);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 8px 20px -10px rgba(80, 51, 194, .75);
}
.btn--violet:hover { background: var(--violet-deep); }
.btn--line {
  background: var(--page);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line-2);
}
.btn--line:hover { box-shadow: inset 0 0 0 1.5px var(--violet); color: var(--violet-ink); }
.btn--sm { padding: 9px 15px; font-size: 15px; border-radius: 10px; }
.btn__price { font-weight: 600; opacity: .72; font-variant-numeric: tabular-nums; }

.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.cta--center { justify-content: center; margin-top: clamp(48px, 6vw, 72px); }
@media (max-width: 560px) {
  .hero .cta .btn, .pricing .cta .btn, .cta--center .btn { flex: 1 1 100%; }
}

/* ================================================================= hero */
.hero { padding-block: clamp(36px, 6vw, 72px) clamp(64px, 8vw, 104px); }
.hero__grid {
  display: grid;
  gap: 26px;
  grid-template-areas: "head" "copy" "stage" "actions";
}
@media (min-width: 1000px) {
  .hero__grid {
    grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "head head"
      "copy stage"
      "actions stage";
    column-gap: clamp(40px, 5vw, 72px);
    row-gap: 30px;
  }
  .hero__head { margin-bottom: 14px; }
  .hero__copy { padding-top: 6px; }
}
/* one line on a desktop, the whole sentence at once */
.hero__head { grid-area: head; font-size: clamp(46px, 6.6vw, 94px); }
.hero__copy { grid-area: copy; min-width: 0; }
.hero__stage { grid-area: stage; min-width: 0; }
.hero__actions { grid-area: actions; align-self: start; min-width: 0; }
.hero__fine { margin: 18px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); }

/* ------------------------------------------------ the demo (signature) */
/* Everything inside the desk is sized in em, and the desk's font size follows
   the figure's width, so the whole Mac scales as one piece. */
.demo { margin: 0; container-type: inline-size; }
.desk {
  position: relative;
  font-size: clamp(8.6px, 1.95cqw, 13.5px);
  aspect-ratio: 16 / 11.2;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(60% 75% at 104% 108%, #c9befa 0%, rgba(201, 190, 250, 0) 62%),
    radial-gradient(70% 80% at -6% -10%, #3c24a8 0%, rgba(60, 36, 168, 0) 66%),
    linear-gradient(150deg, #5638cf 0%, #6b50dc 44%, #8f7cec 100%);
  box-shadow: 0 34px 70px -34px rgba(58, 36, 160, .6), 0 0 0 1px rgba(35, 29, 72, .06);
}
/* two soft arcs, the way a Mac wallpaper folds light */
.desk::before, .desk::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
.desk::before {
  width: 120%; aspect-ratio: 1;
  left: -38%; top: 34%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0) 88%, rgba(255, 255, 255, .16) 96%, rgba(255, 255, 255, 0) 100%);
}
.desk::after {
  width: 90%; aspect-ratio: 1;
  right: -46%; top: -52%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0) 84%, rgba(255, 255, 255, .13) 95%, rgba(255, 255, 255, 0) 100%);
}
@container (max-width: 540px) {
  .desk { aspect-ratio: 1 / .94; border-radius: 16px; }
}

.menubar {
  display: flex;
  align-items: center;
  gap: 1.35em;
  height: 2.1em;
  padding-inline: 1.3em;
  font-size: 1em;
  color: #fff;
  background: rgba(255, 255, 255, .16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.menubar__app { font-weight: 700; }
.menubar__m { opacity: .92; }
.menubar__right { margin-left: auto; display: inline-flex; align-items: center; gap: 1em; }
.menubar__lock { width: 1.15em; height: 1.15em; }
@container (max-width: 540px) { .menubar__m--wide { display: none; } }

.lights { display: inline-flex; gap: .55em; }
/* window buttons in the neutral grey macOS gives an inactive window: no warm yellow anywhere */
.lights i { width: .95em; height: .95em; border-radius: 50%; background: #d9d8e0; box-shadow: inset 0 0 0 .5px rgba(35, 29, 72, .16); }

.finder {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 4.1em;
  bottom: 7%;
  background: #fff;
  border-radius: 1em;
  box-shadow: 0 2.2em 4em -1.2em rgba(22, 10, 84, .55), 0 0 0 .5px rgba(0, 0, 0, .22);
  color: #1d1d1f;
}
.finder__bar {
  display: flex;
  align-items: center;
  gap: 1.1em;
  height: 3.5em;
  padding-inline: 1.1em;
  background: #f6f6f8;
  border-bottom: 1px solid #e2e2e7;
  border-radius: 1em 1em 0 0;
}
.finder__nav, .finder__tools { display: inline-flex; gap: .9em; color: #6e6e76; }
.finder__nav svg, .finder__tools svg { width: 1.2em; height: 1.2em; }
.finder__nav .is-dim { opacity: .35; }
.finder__title { font-weight: 650; font-size: 1.05em; }
.finder__tools { margin-left: auto; }
.finder__body {
  display: grid;
  grid-template-columns: 11em minmax(0, 1fr);
  height: calc(100% - 3.5em);
  overflow: hidden;
  border-radius: 0 0 1em 1em;
}
.finder__side { background: #f2f1f6; padding: 1.1em .7em; border-right: 1px solid #e6e5ec; }
.finder__side b { display: block; font-size: .8em; font-weight: 650; color: #9d9ca6; margin: .1em .6em .6em; }
.finder__side span { display: block; padding: .38em .7em; border-radius: .45em; color: #2c2c31; }
.finder__side .is-on { background: #e1dff0; }
@container (max-width: 540px) {
  .finder__body { grid-template-columns: minmax(0, 1fr); }
  .finder__side { display: none; }
}

.finder__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 8.6em);
  justify-content: start;
  align-content: start;
  gap: 1.3em .5em;
  padding: 1.7em 1.4em;
}
.fi { display: flex; flex-direction: column; align-items: center; gap: .45em; text-align: center; }
.fi__icon {
  position: relative;
  display: block;
  width: 5em;
  height: 5em;
  border-radius: .55em;
  transition: background .12s ease;
}
.fi__icon > svg, .fi__icon > img {
  position: absolute;
  inset: .25em;
  width: calc(100% - .5em);
  height: calc(100% - .5em);
}
.fi__doc { transition: opacity .35s ease, scale .45s cubic-bezier(.3, .7, .3, 1); }
.fi__lock { opacity: 0; scale: .55; transition: opacity .3s ease, scale .5s cubic-bezier(.3, 1.5, .5, 1); }
.fi__name {
  font-size: .95em;
  line-height: 1.3;
  padding: .08em .45em;
  border-radius: .35em;
  color: #1d1d1f;
  max-width: 100%;
  transition: background .12s ease, color .12s ease;
}
.fi__ext {
  display: inline-block;
  max-width: 2.4em;
  overflow: hidden;
  vertical-align: bottom;
  white-space: nowrap;
  transition: max-width .5s ease .15s, opacity .3s ease .15s;
}
.fi.is-selected .fi__icon { background: rgba(0, 0, 0, .085); }
.fi.is-selected .fi__name { background: var(--violet); color: #fff; }
.fi.is-checking .fi__doc { opacity: .45; }
.fi.is-locked .fi__doc { opacity: 0; scale: .7; }
.fi.is-locked .fi__lock { opacity: 1; scale: 1; }
.fi.is-locked .fi__ext { max-width: 0; opacity: 0; }

/* the right-click menu */
.ctx {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 6;
  min-width: 13.2em;
  padding: .38em;
  background: rgba(247, 247, 249, .97);
  border-radius: .75em;
  box-shadow: 0 .9em 2.4em rgba(20, 10, 60, .26), 0 0 0 .5px rgba(0, 0, 0, .2);
  opacity: 0;
  scale: .96;
  transform-origin: 0 0;
  transition: opacity .12s ease, scale .12s ease;
  pointer-events: none;
}
.ctx.is-open { opacity: 1; scale: 1; }
.ctx__i {
  display: flex;
  align-items: center;
  gap: .55em;
  padding: .34em .75em;
  border-radius: .42em;
  white-space: nowrap;
  color: #1d1d1f;
}
.ctx__i svg { width: 1em; height: 1em; flex: none; }
.ctx__sep { display: block; height: 1px; background: rgba(0, 0, 0, .12); margin: .32em .7em; }
.ctx__i.is-hot { background: var(--violet); color: #fff; }
.ctx__i.is-blink { animation: menu-blink .2s steps(1) 1; }
@keyframes menu-blink { 50% { background: transparent; color: #1d1d1f; } }

/* the check, worded as the app words it */
.hud {
  position: absolute;
  left: 50%;
  bottom: 1.4em;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: .8em;
  padding: .85em 1.25em;
  background: rgba(250, 250, 252, .98);
  border-radius: .8em;
  box-shadow: 0 .8em 2em rgba(20, 10, 60, .2), 0 0 0 .5px rgba(0, 0, 0, .16);
  white-space: nowrap;
  opacity: 0;
  translate: -50% .6em;
  transition: opacity .2s ease, translate .25s ease;
}
.hud.is-on { opacity: 1; translate: -50% 0; }
.spin { position: relative; width: 1.25em; height: 1.25em; flex: none; animation: spin 1s steps(8) infinite; }
.spin i {
  position: absolute;
  left: calc(50% - .07em);
  top: 0;
  width: .14em;
  height: .36em;
  border-radius: .1em;
  background: #85858e;
  transform-origin: 50% .625em;
}
.spin i:nth-child(1) { rotate: 0deg; opacity: 1; }
.spin i:nth-child(2) { rotate: 45deg; opacity: .88; }
.spin i:nth-child(3) { rotate: 90deg; opacity: .76; }
.spin i:nth-child(4) { rotate: 135deg; opacity: .64; }
.spin i:nth-child(5) { rotate: 180deg; opacity: .52; }
.spin i:nth-child(6) { rotate: 225deg; opacity: .4; }
.spin i:nth-child(7) { rotate: 270deg; opacity: .3; }
.spin i:nth-child(8) { rotate: 315deg; opacity: .2; }
@keyframes spin { to { rotate: 360deg; } }

/* the unlock prompt */
.touch {
  position: absolute;
  left: 50%;
  top: 56%;
  z-index: 7;
  width: 17.5em;
  display: grid;
  justify-items: center;
  gap: .3em;
  padding: 1.5em 1.2em 1.4em;
  text-align: center;
  background: #f7f7f9;
  border-radius: 1em;
  box-shadow: 0 1.4em 3em rgba(20, 10, 60, .3), 0 0 0 .5px rgba(0, 0, 0, .18);
  opacity: 0;
  translate: -50% -46%;
  scale: .94;
  transition: opacity .18s ease, scale .25s cubic-bezier(.3, 1.3, .5, 1);
}
.touch.is-on { opacity: 1; scale: 1; }
.touch__print { width: 3.2em; height: 3.2em; color: #a9a6b8; margin-bottom: .45em; transition: color .3s ease; }
.touch.is-ok .touch__print { color: var(--violet); }
.touch b { font-size: 1.05em; font-weight: 650; }
.touch span { font-size: .9em; color: #75727f; }

/* the file, opened in its app */
.doc {
  position: absolute;
  z-index: 4;
  right: 7%;
  top: 4.6em;
  width: 16em;
  background: #fff;
  border-radius: .8em;
  overflow: hidden;
  box-shadow: 0 1.4em 3em rgba(20, 10, 60, .3), 0 0 0 .5px rgba(0, 0, 0, .2);
  opacity: 0;
  scale: .5;
  transform-origin: 30% 30%;
  transition: opacity .25s ease, scale .4s cubic-bezier(.25, .9, .3, 1);
}
.doc.is-on { opacity: 1; scale: 1; }
.doc__bar { display: flex; align-items: center; gap: .9em; height: 2.4em; padding-inline: .8em; background: #f4f4f7; border-bottom: 1px solid #e6e6ea; font-size: .88em; font-weight: 600; color: #3a3a40; }
.doc__bar .lights i { width: .8em; height: .8em; }
.doc__page { padding: 1.3em 1.4em 1.6em; }
.doc__page i { display: block; height: .5em; margin-bottom: .7em; border-radius: .25em; background: #e7e6ee; }
.doc__page i:first-child { width: 45%; height: .8em; background: #d6d3e4; margin-bottom: 1em; }
.doc__page i.s { width: 62%; }

/* between loops the scene fades out and back, so a reset never reads as an unlock */
.finder__grid, .cursor { transition-property: opacity; transition-duration: .45s; }
.finder.is-fading .finder__grid,
.finder.is-fading .doc,
.finder.is-fading .cursor { opacity: 0; transition: opacity .45s ease; }

.cursor {
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
  width: 1.35em;
  height: 1.9em;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35));
  transition: left .85s cubic-bezier(.45, .05, .25, 1), top .85s cubic-bezier(.45, .05, .25, 1), scale .1s ease;
  pointer-events: none;
}
.cursor.is-click { scale: .86; }
.cursor.is-still { transition: none; }
.finder.no-anim *, .finder.no-anim { transition: none !important; }

.demo__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 16px;
  margin-top: 16px;
}
.demo__caption { font-size: 15.5px; line-height: 1.5; font-weight: 500; color: var(--ink); min-height: 1.5em; transition: opacity .2s ease; }
/* on a phone a caption can take two lines; reserve them so nothing below jumps */
@container (max-width: 540px) { .demo__caption { min-height: 3em; } .demo__foot { align-items: start; } }
.demo__caption.is-out { opacity: 0; }
.demo__replay {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 6px 4px;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
}
.demo__replay:hover { color: var(--violet-ink); }
.demo__bar { grid-column: 1 / -1; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.demo__bar i { display: block; height: 100%; width: 100%; background: var(--violet); transform-origin: 0 50%; scale: 0 1; }
.demo__bar i.is-running { animation: fill var(--loop, 15s) linear forwards; }
@keyframes fill { to { scale: 1 1; } }

/* ====================================================== section shell */
.section { padding-block: var(--section-y); }
.section--mist { background: var(--mist); }
.section__head { max-width: 640px; margin-bottom: clamp(40px, 5vw, 64px); }
.section__head h2 { margin-bottom: 18px; }

/* ======================================================== how it works */
/* a real cycle, so the steps sit on one line: lock, unlock, lock again, remove */
.cycle {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 40px 36px;
  position: relative;
}
@media (min-width: 900px) {
  .cycle { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cycle::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 17px;
    height: 1px;
    background: var(--line-2);
  }
}
@media (max-width: 899px) {
  .cycle { padding-left: 22px; }
  .cycle::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 12px;
    width: 1px;
    background: var(--line-2);
  }
  .step::before {
    content: "";
    position: absolute;
    left: -26px;
    top: 14px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--violet);
    box-shadow: 0 0 0 4px var(--mist);
  }
}
.step { position: relative; min-width: 0; }
/* on a wide screen the four steps share rows, so every note starts on one line */
@media (min-width: 900px) {
  .cycle { row-gap: 0; grid-template-rows: repeat(4, auto); }
  .step { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; }
  .step .chip { justify-self: start; }
  .step__note { align-self: start; }
}
.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 13px 0 11px;
  border-radius: 8px;
  background: var(--violet);
  color: #fff;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  box-shadow: 0 0 0 7px var(--mist), 0 6px 14px -8px rgba(80, 51, 194, .8);
}
.chip svg { width: 14px; height: 14px; }
.step h3 { margin: 22px 0 8px; font-size: 21px; }
.step p { margin: 0; font-size: 16px; line-height: 1.58; }
.step__note { margin-top: 12px !important; padding-top: 12px; border-top: 1px solid var(--line-2); color: var(--muted); font-size: 15px !important; }

/* ============================================================ privacy */
.trust { display: grid; gap: clamp(44px, 6vw, 88px); align-items: center; }
@media (min-width: 960px) { .trust { grid-template-columns: minmax(0, 1fr) 430px; } }
.trust__copy h2 { margin-bottom: 18px; max-width: 15ch; }

.ticks { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 18px; max-width: 58ch; }
.ticks li {
  position: relative;
  padding-left: 34px;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--text);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  background: var(--tick) center / contain no-repeat;
}
.ticks b { color: var(--ink); font-weight: 650; }
.ticks--tight { gap: 12px; margin: 26px 0 32px; }

.escape {
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(24px, 3vw, 32px);
  box-shadow: 0 24px 50px -36px rgba(35, 29, 72, .35);
}
.escape h3 { font-size: 21px; }
.escape__lede { margin: 6px 0 0; color: var(--muted); font-size: 15.5px; }
.escape__art {
  margin: 22px 0 22px;
  padding: 30px 16px 28px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 1px 1px, rgba(35, 29, 72, .09) 1px, transparent 1.4px) 0 0 / 14px 14px,
    var(--mist);
  display: flex;
  justify-content: center;
}
.rename { display: grid; justify-items: center; gap: 10px; }
.rename img { width: 64px; height: 64px; }
.rename__field {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 3px 7px;
  border-radius: 5px;
  background: #fff;
  font-size: 14.5px;
  color: #1d1d1f;
  white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(101, 71, 216, .55), 0 0 0 4px rgba(101, 71, 216, .2);
}
.rename__typed { color: var(--violet-ink); font-weight: 600; }
.rename__caret { display: inline-block; width: 1.5px; height: 1.1em; margin-left: 1px; background: var(--violet); animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.escape__steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 10px; }
.escape__steps li {
  counter-increment: s;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  align-items: baseline;
  font-size: 16px;
}
.escape__steps li::before {
  content: counter(s);
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--violet-tint);
  color: var(--violet-ink);
  font-size: 12.5px;
  font-weight: 700;
  translate: 0 -1px;
}
.escape__end { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15.5px; color: var(--text); }
.escape__end a { font-weight: 600; margin-left: 4px; }

/* ============================================================ details */
.details {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}
@media (min-width: 680px) { .details { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .details { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.detail { background: var(--page); padding: clamp(24px, 3vw, 32px); }
.detail__icon { width: 26px; height: 26px; color: var(--violet); margin-bottom: 16px; }
.detail h3 { font-size: 18px; margin-bottom: 8px; }
.detail p { margin: 0; font-size: 15.5px; line-height: 1.58; color: var(--text); }

.duo {
  display: grid;
  gap: clamp(40px, 5vw, 64px);
  align-items: center;
  margin-top: clamp(56px, 7vw, 96px);
}
@media (min-width: 960px) { .duo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.duo__copy h3 { font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -0.028em; line-height: 1.15; margin-bottom: 12px; }
.duo__copy > p { margin: 0 0 28px; max-width: 44ch; }

/* the app's own Auto-Lock group, recreated */
.prefs { max-width: 440px; }
.prefs__head { margin: 0 0 8px 2px; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.prefs__group {
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px 16px 14px;
}
.prefs__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 12px 0;
  font-size: 15px;
  color: var(--ink);
}
.prefs__pop { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--mist-2); }
.prefs__pop span { padding: 4px 9px; border-radius: 6px; font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.prefs__pop .is-on { background: var(--page); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(35, 29, 72, .16), 0 0 0 .5px rgba(35, 29, 72, .1); }
.prefs__note { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.5; color: var(--muted); }

.window {
  margin: 0;
  background: var(--page);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 34px 60px -34px rgba(35, 29, 72, .4), 0 0 0 1px rgba(35, 29, 72, .08);
}
.window__bar { display: flex; align-items: center; height: 30px; padding-inline: 12px; background: #ececec; font-size: 9px; }
.window img { width: 100%; height: auto; }
.window figcaption { padding: 12px 16px; font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); }

/* ============================================================ pricing */
.pricing__in { display: grid; gap: clamp(28px, 5vw, 80px); align-items: center; }
@media (min-width: 900px) { .pricing__in { grid-template-columns: 380px minmax(0, 1fr); } }
.pricing__copy h2 { margin-bottom: 18px; max-width: 14ch; }
.pricing__note { margin: 16px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 52ch; }

/* a key tag: the price hangs off the thing it opens */
.tag-stage {
  position: relative;
  display: grid;
  justify-items: center;
  padding-top: 8px;
}
.tag-hang { display: grid; justify-items: center; rotate: -5deg; transform-origin: 50% 0; }
.tag-string { display: block; width: 90px; height: 118px; margin-top: -5px; margin-bottom: -44px; position: relative; z-index: 2; }
.tag-pin { width: 12px; height: 12px; border-radius: 50%; background: var(--line-2); box-shadow: inset 0 -2px 2px rgba(35, 29, 72, .18), 0 1px 1px rgba(255, 255, 255, .8); position: relative; z-index: 3; }
.tag {
  position: relative;
  width: 256px;
  display: grid;
  justify-items: center;
  padding: 70px 28px 34px;
  border-radius: 44px 44px 26px 26px;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 60%),
    var(--violet);
  color: #fff;
  text-align: center;
  box-shadow: 0 34px 60px -26px rgba(80, 51, 194, .7), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.tag__hole {
  position: absolute;
  top: 24px;
  left: 50%;
  translate: -50% 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--page);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .28), inset 0 2px 3px rgba(35, 29, 72, .25);
}
.tag__brand { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
.tag__brand img { width: 26px; height: 26px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25)); }
.tag__price { margin-top: 14px; font-size: 104px; font-weight: 700; letter-spacing: -0.06em; line-height: .9; font-variant-numeric: tabular-nums; }
.tag__once { font-size: 18px; font-weight: 500; opacity: .85; margin-top: 6px; }
.tag__rule { width: 100%; margin: 22px 0 16px; border-top: 1.5px dashed rgba(255, 255, 255, .35); }
.tag__line { font-size: 15px; line-height: 1.85; opacity: .94; }
@media (max-width: 899px) {
  .tag-stage { order: 2; }
  .tag { width: 236px; padding-top: 64px; }
  .tag__price { font-size: 92px; }
}

/* ================================================================ faq */
.faq-wrap { display: grid; gap: 36px; }
@media (min-width: 960px) {
  .faq-wrap { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 72px; align-items: start; }
  .faq-wrap__head { position: sticky; top: 104px; }
}
.faq-wrap__head h2 { margin-bottom: 18px; max-width: 12ch; }
.faq-wrap__head .lede { font-size: 17px; }
.faq { border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 20px 2px;
  cursor: pointer;
  list-style: none;
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background:
    linear-gradient(var(--violet), var(--violet)) center / 10px 1.8px no-repeat,
    linear-gradient(var(--violet), var(--violet)) center / 1.8px 10px no-repeat,
    var(--violet-tint);
  transition: rotate .2s ease;
}
.faq details[open] summary::after { rotate: 45deg; }
.faq summary:hover { color: var(--violet-ink); }
.faq__body { padding: 0 2px 22px; font-size: 16px; line-height: 1.62; color: var(--text); max-width: 64ch; }
.faq__body p { margin: 0 0 12px; }
.faq__body p:last-child { margin-bottom: 0; }

/* ============================================================= footer */
.footer { border-top: 1px solid var(--line); padding-block: 52px 40px; }
.footer__in { display: flex; flex-wrap: wrap; gap: 28px 40px; justify-content: space-between; align-items: flex-start; }
.footer__brand { display: grid; gap: 10px; max-width: 32ch; }
.footer__brand p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.footer__links { display: flex; flex-wrap: wrap; gap: 10px 28px; padding-top: 4px; }
.footer__links a { color: var(--text); text-decoration: none; font-size: 15px; }
.footer__links a:hover { color: var(--violet-ink); text-decoration: underline; text-underline-offset: 3px; }
.footer__sign {
  width: 100%;
  margin: 8px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--muted);
}
.footer__sign a { color: var(--text); text-underline-offset: 3px; }

/* ========================================================= other pages */
.doc-page { padding-block: clamp(44px, 7vw, 84px) var(--section-y); }
.doc-page__in { max-width: 720px; }
.doc-page h1 { font-size: clamp(38px, 5.4vw, 56px); margin-bottom: 12px; }
.doc-page__stamp { margin: 0 0 36px; font-size: 14px; color: var(--muted); }
.doc-page__lede { font-size: 19px; color: var(--text); margin: 0 0 8px; }
.doc-page h2 { font-size: clamp(22px, 2.6vw, 26px); letter-spacing: -0.025em; margin: 44px 0 12px; scroll-margin-top: 90px; }
.doc-page p, .doc-page li { font-size: 16.5px; line-height: 1.65; color: var(--text); }
.doc-page p { margin: 0 0 16px; }
.doc-page ul, .doc-page ol { padding-left: 22px; margin: 0 0 16px; display: grid; gap: 8px; }
.doc-page strong { color: var(--ink); }
.doc-page code { font-family: var(--mono); font-size: .88em; color: var(--ink); background: var(--mist); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; overflow-wrap: anywhere; }
.doc-page__back { display: inline-block; margin-bottom: 26px; font-size: 15px; color: var(--muted) !important; text-decoration: none; }
.doc-page__back:hover { color: var(--violet-ink) !important; }
.callout { margin: 0 0 16px; padding: 16px 18px; border-radius: 12px; background: var(--violet-tint); color: var(--ink); font-size: 16px; line-height: 1.6; }

/* thank-you page */
.thanks { padding-block: clamp(48px, 8vw, 96px) var(--section-y); }
.thanks__in { max-width: 600px; margin-inline: auto; display: grid; justify-items: center; gap: 22px; text-align: center; }
.thanks__icon { width: 104px; height: 104px; }
.thanks h1 { font-size: clamp(40px, 6vw, 62px); }
.thanks p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--text); }
.thanks__steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; width: 100%; text-align: left; counter-reset: t; }
.thanks__steps li {
  counter-increment: t;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--page);
  font-size: 16px;
  line-height: 1.55;
}
.thanks__steps li::before {
  content: counter(t);
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--violet-tint);
  color: var(--violet-ink);
  font-size: 13px;
  font-weight: 700;
  translate: 0 -1px;
}
.thanks__steps b { color: var(--ink); }
.thanks .cta { justify-content: center; }
.thanks__note { font-size: 14.5px !important; color: var(--muted) !important; }

/* ============================================================== motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .demo__replay, .demo__bar { display: none; }
}