/* ==========================================================================
   Snaparo page

   The app's own moments, drawn in HTML and CSS instead of screenshots: the
   Scan screen in the hero, then one small scene per feature. No script (the
   site's policy forbids it) and no inline style.

   How every scene loops, so nothing ever jumps:
     1. it fades in from nothing,
     2. plays its moment,
     3. rests on the finished picture,
     4. fades out, and only then, while nothing can be seen, resets.
   Sizes inside a scene are in cqi, a share of the scene's own width, so the
   picture is the same at every screen size.

   The base styles are the still picture. Under reduced motion styles.css
   turns every animation off, and that still is what shows.
   ========================================================================== */

:root {
  --doc: #FFFFFF;
  --doc-ink: #1D1D1F;
  --mark: #FFE45C;
  --mark-edge: #E8590C;
  --sig: #23398A;
}


/* Hero ==================================================================== */

.sn-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 600px at 78% 100%, var(--glow), transparent 70%),
    radial-gradient(700px 420px at 8% -10%, rgba(34, 181, 126, .14), transparent 70%),
    var(--stage);
  color: var(--stage-ink);
  padding-block: 64px 72px;
}

@media (min-width: 900px) {
  .sn-hero {
    padding-block: 96px 104px;
  }
}

.sn-hero__grid {
  display: grid;
  gap: 56px;
  align-items: center;
}

@media (min-width: 900px) {
  .sn-hero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 64px;
  }
}

/* Centred on phones and tablets, beside the phone from 900px up. */
.sn-hero__copy {
  display: grid;
  justify-items: center;
  text-align: center;
}

@media (min-width: 900px) {
  .sn-hero__copy {
    justify-items: start;
    text-align: left;
  }
}

.sn-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}

.sn-brand .app-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}

.sn-brand .wm {
  height: 38px;
  width: auto;
  color: var(--stage-ink);
}

.sn-hero h1 {
  max-width: 12ch;
  color: var(--stage-ink);
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.sn-lead {
  margin-top: 24px;
  max-width: 48ch;
  color: var(--stage-soft);
  font-size: 1.125rem;
}

.sn-hero .chips {
  margin-top: 28px;
  justify-content: center;
}

@media (min-width: 900px) {
  .sn-hero .chips {
    justify-content: flex-start;
  }
}

.sn-hero .soon {
  margin-top: 28px;
  padding: 10px 18px;
  font-size: .9375rem;
}

.sn-hero .store-badge {
  margin-top: 28px;
}

.sn-hero .store-badge img {
  height: 56px;
  width: auto;
}

.sn-hero .phone {
  margin-inline: auto;
}


/* Promise strip =========================================================== */

.sn-promise {
  border-bottom: 1px solid var(--hairline);
  padding-block: 40px;
}

.sn-promise__row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 28px;
}

@media (min-width: 768px) {
  .sn-promise__row {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}

.sn-promise li {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
  font-size: .9375rem;
  color: var(--ink-soft);
}

.sn-promise .icon-badge {
  margin-bottom: 6px;
}

.sn-promise strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
}


/* Feature rows ============================================================ */

.sn-row {
  display: grid;
  gap: 28px;
  align-items: center;
}

.sn-row + .sn-row {
  margin-top: 72px;
}

.sn-row__copy {
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
}

@media (min-width: 900px) {
  .sn-row {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 72px;
  }

  .sn-row.flip {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  }

  .sn-row.flip .sn-row__copy {
    order: 2;
  }

  .sn-row + .sn-row {
    margin-top: 112px;
  }

  .sn-row__copy {
    justify-items: start;
    text-align: left;
  }
}

.sn-row__copy .num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .875rem;
  color: var(--accent);
  letter-spacing: .06em;
}

.sn-row__copy h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.sn-row__copy p {
  color: var(--ink-soft);
  max-width: 44ch;
}


/* Scenes ================================================================== */

.scene {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  background:
    radial-gradient(70% 70% at 50% 112%, var(--glow), transparent 70%),
    var(--stage-2);
  border: 1px solid var(--stage-line);
  color: var(--stage-ink);
}

/* Anything that moves is promoted once, so its edges stay steady while it
   moves instead of being redrawn on every frame. */
.scene .mv {
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* A paper inside a scene. */
.paper {
  position: absolute;
  background: var(--doc);
  color: var(--doc-ink);
  border-radius: 1.6cqi;
  box-shadow: 0 3cqi 7cqi rgba(0, 0, 0, .45);
  padding: 3.6cqi 4cqi;
  font-size: 2cqi;
  line-height: 1.5;
}

.paper p + p {
  margin-top: .6em;
}

.paper .title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3em;
  line-height: 1.25;
}

.paper .head {
  display: flex;
  align-items: center;
  gap: .6em;
  margin-bottom: .9em;
  padding-bottom: .6em;
  border-bottom: .3cqi solid #00897B;
  font-family: var(--font-display);
  font-weight: 700;
}

.paper .logo {
  display: grid;
  place-items: center;
  width: 1.8em;
  height: 1.8em;
  border-radius: .45em;
  background: #00897B;
  color: #fff;
  font-size: .9em;
}

.paper .rows {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .35em 1em;
  margin-top: .9em;
  padding-top: .6em;
  border-top: 1px solid #E3E3E6;
}

.paper .foot {
  color: #8A8A90;
  font-size: .85em;
}

.serif {
  font-family: Georgia, 'Times New Roman', serif;
}

/* The small status pill a scene ends on ("Scanned", "Signed"). */
.done {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 1.2cqi;
  padding: 1.2cqi 2.6cqi 1.2cqi 1.6cqi;
  border-radius: 999px;
  background: #E9FBF2;
  color: #0B5E3E;
  box-shadow: 0 1.4cqi 4cqi rgba(0, 0, 0, .35);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.3cqi;
  white-space: nowrap;
}

.done::before {
  content: '';
  width: 3cqi;
  height: 3cqi;
  border-radius: 50%;
  background: #0F9D6A url('../img/check-white.svg') center / 100% no-repeat;
}


/* 1. Scan: the corners lock on, the page straightens ---------------------- */

.sc-doc {
  position: absolute;
  left: 33cqi;
  top: 12cqi;
  width: 34cqi;
  height: auto;
  border-radius: .6cqi;
  box-shadow: 0 3cqi 7cqi rgba(0, 0, 0, .5);
  animation: sc-doc 7s var(--ease) infinite;
}

@keyframes sc-doc {
  0% { opacity: 0; transform: translate(6cqi, 3cqi) rotate(-11deg) scale(.86); }
  8%, 22% { opacity: 1; transform: translate(6cqi, 3cqi) rotate(-11deg) scale(.86); }
  44%, 86% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  95%, 100% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(1); }
}

.sc-c {
  position: absolute;
  width: 6cqi;
  height: 6cqi;
  border: 0 solid var(--mint);
  animation: sc-corner 7s var(--ease) infinite;
}

.sc-c.k-tl { left: 31cqi; top: 10cqi; border-top-width: .8cqi; border-left-width: .8cqi; border-top-left-radius: 1.4cqi; --dx: -3cqi; --dy: -3cqi; }
.sc-c.k-tr { right: 31cqi; top: 10cqi; border-top-width: .8cqi; border-right-width: .8cqi; border-top-right-radius: 1.4cqi; --dx: 3cqi; --dy: -3cqi; }
.sc-c.k-bl { left: 31cqi; top: 56.1cqi; border-bottom-width: .8cqi; border-left-width: .8cqi; border-bottom-left-radius: 1.4cqi; --dx: -3cqi; --dy: 3cqi; }
.sc-c.k-br { right: 31cqi; top: 56.1cqi; border-bottom-width: .8cqi; border-right-width: .8cqi; border-bottom-right-radius: 1.4cqi; --dx: 3cqi; --dy: 3cqi; }

@keyframes sc-corner {
  0%, 14% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.25); }
  34%, 86% { opacity: 1; transform: translate(0, 0) scale(1); }
  95%, 100% { opacity: 0; transform: translate(0, 0) scale(1); }
}

.sc-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  animation: sc-flash 7s ease-out infinite;
}

@keyframes sc-flash {
  0%, 44% { opacity: 0; }
  47% { opacity: .3; }
  60%, 100% { opacity: 0; }
}

.scene-scan .done {
  left: 50%;
  bottom: 3.6cqi;
  translate: -50% 0;
  animation: sc-done 7s var(--ease) infinite;
}

@keyframes sc-done {
  0%, 50% { opacity: 0; transform: translateY(1.6cqi); }
  58%, 86% { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: none; }
}


/* 2. Search: the word typed, then lit across the page ---------------------- */

.search-pill {
  position: absolute;
  top: 6cqi;
  left: 12cqi;
  right: 12cqi;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1.6cqi;
  height: 8.4cqi;
  padding-inline: 2.6cqi;
  border-radius: 999px;
  border: .35cqi solid #4FD39B;
  background: #1A201D;
  font-size: 2.7cqi;
}

.search-pill .ic {
  width: 3.4cqi;
  height: 3.4cqi;
  color: #9DB5A9;
}

.typed {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 9ch;
  border-right: .3cqi solid #4FD39B;
  animation: typing 8s steps(9, end) infinite, typed-fade 8s ease infinite;
}

@keyframes typing {
  0%, 8% { width: 0; }
  30%, 100% { width: 9ch; }
}

@keyframes typed-fade {
  0% { opacity: 0; }
  3%, 88% { opacity: 1; }
  95%, 100% { opacity: 0; }
}

.scene-search .paper {
  left: 12cqi;
  right: 12cqi;
  top: 19cqi;
  bottom: -4cqi;
}

.scene-search mark {
  color: inherit;
  border-radius: .5cqi;
  padding: 0 .15em;
  background-color: var(--mark);
  box-shadow: 0 0 0 .3cqi var(--mark-edge);
  animation: lit-1 8s ease-out infinite;
}

.scene-search mark.m2 { box-shadow: none; animation-name: lit-2; }
.scene-search mark.m3 { box-shadow: none; animation-name: lit-3; }

@keyframes lit-1 {
  0%, 34% { background-color: rgba(255, 228, 92, 0); box-shadow: 0 0 0 .3cqi rgba(232, 89, 12, 0); }
  38%, 88% { background-color: rgba(255, 228, 92, 1); box-shadow: 0 0 0 .3cqi rgba(232, 89, 12, 1); }
  95%, 100% { background-color: rgba(255, 228, 92, 0); box-shadow: 0 0 0 .3cqi rgba(232, 89, 12, 0); }
}

@keyframes lit-2 {
  0%, 38% { background-color: rgba(255, 228, 92, 0); }
  42%, 88% { background-color: rgba(255, 228, 92, 1); }
  95%, 100% { background-color: rgba(255, 228, 92, 0); }
}

@keyframes lit-3 {
  0%, 42% { background-color: rgba(255, 228, 92, 0); }
  46%, 88% { background-color: rgba(255, 228, 92, 1); }
  95%, 100% { background-color: rgba(255, 228, 92, 0); }
}


/* 3. Sign: the signature writes itself -------------------------------------- */

.scene-sign .paper {
  left: 9cqi;
  right: 9cqi;
  top: 9cqi;
  bottom: 9cqi;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 2.2cqi;
}

.sig-lines {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6cqi;
  margin-top: 1.6em;
}

.sig-lines div {
  display: grid;
}

.sig-lines span {
  border-top: .25cqi solid #1D1D1F;
  padding-top: .3em;
  font-size: .9em;
  color: #55554E;
}

.sig {
  width: 100%;
  height: auto;
}

.sig path {
  fill: none;
  stroke: var(--sig);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* pathLength="1" on the path makes a dash of 1 exactly the whole signature. */
.sig.draw path {
  stroke-dasharray: 1 2;
  stroke-dashoffset: 0;
  animation: sg-write 8s ease-in-out infinite;
}

@keyframes sg-write {
  0%, 14% { stroke-dashoffset: 1.05; opacity: 1; }
  58%, 86% { stroke-dashoffset: 0; opacity: 1; }
  95% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 1.05; opacity: 0; }
}

.scene-sign .done {
  right: 11cqi;
  top: 11cqi;
  animation: sg-done 8s var(--ease) infinite;
}

@keyframes sg-done {
  0%, 58% { opacity: 0; transform: scale(.8); }
  64%, 86% { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: none; }
}


/* 4. Vault: papers in, the folder locks --------------------------------------- */

/* The folder stays about twice a paper's width, so the papers read as the
   subject and the folder as their place (Chris, 24 Oct: it looked oversized). */
.folder {
  position: absolute;
  left: 30cqi;
  right: 30cqi;
  top: 12cqi;
  bottom: 9cqi;
}

.folder::before {
  content: '';
  position: absolute;
  inset: 4cqi 0 0 0;
  border-radius: 2.2cqi;
  background: #0F6E4C;
}

.folder::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 15cqi;
  height: 6cqi;
  border-radius: 1.8cqi 1.8cqi 0 0;
  background: #0F6E4C;
  z-index: 0;
}

.vp {
  position: absolute;
  top: 6.5cqi;
  width: 19cqi;
  height: auto;
  border-radius: .6cqi;
  box-shadow: 0 1cqi 3cqi rgba(0, 0, 0, .3);
  z-index: 1;
}

.vp.p1 {
  left: 3.5cqi;
  transform: rotate(-7deg);
  animation: vt-p1 8s var(--ease) infinite;
}

.vp.p2 {
  left: 17cqi;
  transform: rotate(6deg);
  animation: vt-p2 8s var(--ease) infinite;
}

@keyframes vt-p1 {
  0%, 6% { opacity: 1; transform: translateY(-46cqi) rotate(-7deg); }
  30%, 86% { opacity: 1; transform: translateY(0) rotate(-7deg); }
  95% { opacity: 0; transform: translateY(0) rotate(-7deg); }
  100% { opacity: 0; transform: translateY(-46cqi) rotate(-7deg); }
}

@keyframes vt-p2 {
  0%, 14% { opacity: 1; transform: translateY(-46cqi) rotate(6deg); }
  38%, 86% { opacity: 1; transform: translateY(0) rotate(6deg); }
  95% { opacity: 0; transform: translateY(0) rotate(6deg); }
  100% { opacity: 0; transform: translateY(-46cqi) rotate(6deg); }
}

.folder__front {
  position: absolute;
  inset: 27cqi 0 0 0;
  display: grid;
  align-content: end;
  gap: .4cqi;
  padding: 3cqi;
  border-radius: 2.2cqi;
  background: linear-gradient(180deg, #19A774, #128A5F);
  font-family: var(--font-display);
  z-index: 2;
}

.folder__name {
  font-weight: 700;
  font-size: 3.2cqi;
}

.folder__state {
  position: relative;
  height: 1.5em;
  font-size: 2.3cqi;
  color: #CFF5E4;
}

.folder__state span {
  position: absolute;
  left: 0;
  top: 0;
}

.st-open {
  opacity: 0;
  animation: vt-open 8s ease infinite;
}

.st-locked {
  animation: vt-locked 8s ease infinite;
}

@keyframes vt-open {
  0%, 46% { opacity: 1; }
  52%, 90% { opacity: 0; }
  98%, 100% { opacity: 1; }
}

@keyframes vt-locked {
  0%, 46% { opacity: 0; }
  52%, 90% { opacity: 1; }
  98%, 100% { opacity: 0; }
}

.lock {
  position: absolute;
  right: 3cqi;
  bottom: 3cqi;
  display: grid;
  place-items: center;
  width: 8cqi;
  height: 8cqi;
  border-radius: 50%;
  background: #F1F6F3;
  color: #0F6E4C;
  z-index: 3;
  animation: vt-lock 8s var(--ease) infinite;
}

.lock .ic {
  width: 52%;
  height: 52%;
}

@keyframes vt-lock {
  0%, 44% { opacity: 0; transform: scale(.3); }
  52% { opacity: 1; transform: scale(1.12); }
  58%, 86% { opacity: 1; transform: scale(1); }
  95%, 100% { opacity: 0; transform: scale(.6); }
}


/* 5. Translate: English, then Spanish --------------------------------------- */

.lang-row {
  position: absolute;
  top: 6cqi;
  left: 10cqi;
  right: 10cqi;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2cqi;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.5cqi;
}

.lang-row span {
  padding: 1cqi 2.6cqi;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
}

.lang-row .to {
  background: rgba(34, 181, 126, .30);
  color: #EAF7F0;
}

.lang-row .ic {
  width: 3cqi;
  height: 3cqi;
  color: var(--mint);
}

.tr-box {
  position: absolute;
  left: 10cqi;
  right: 10cqi;
  top: 17cqi;
  bottom: 8cqi;
  overflow: hidden;
  border-radius: 2.4cqi;
  background: #1C2420;
  border: 1px solid rgba(255, 255, 255, .07);
}

.tr {
  position: absolute;
  inset: 0;
  padding: 4.4cqi 5cqi;
  font-size: 2.6cqi;
  line-height: 1.55;
}

.tr p + p {
  margin-top: .6em;
}

.tr.en {
  opacity: 0;
  animation: tr-en 9s ease-in-out infinite;
}

.tr.es {
  animation: tr-es 9s ease-in-out infinite;
}

@keyframes tr-en {
  0%, 36% { opacity: 1; }
  46%, 86% { opacity: 0; }
  96%, 100% { opacity: 1; }
}

@keyframes tr-es {
  0%, 36% { opacity: 0; }
  46%, 86% { opacity: 1; }
  96%, 100% { opacity: 0; }
}

/* A band of light passes down the page as the language changes. */
.tr-sweep {
  position: absolute;
  left: 0;
  right: 0;
  top: -12cqi;
  height: 12cqi;
  background: linear-gradient(180deg, transparent, rgba(127, 227, 184, .22), transparent);
  opacity: 0;
  animation: tr-sweep 9s ease-in-out infinite;
}

@keyframes tr-sweep {
  0%, 32% { opacity: 0; transform: translateY(0); }
  34% { opacity: 1; transform: translateY(0); }
  48% { opacity: 1; transform: translateY(62cqi); }
  50%, 100% { opacity: 0; transform: translateY(62cqi); }
}


/* 6. Accountant: the month's receipts into one package ---------------------- */

.rc {
  position: absolute;
  width: 15cqi;
  height: auto;
  border-radius: .5cqi;
  box-shadow: 0 1.6cqi 4cqi rgba(0, 0, 0, .45);
}

.rc.r1 { left: 7cqi; top: 15cqi; transform: rotate(-8deg); animation: ac-r1 8s var(--ease) infinite; }
.rc.r2 { left: 21cqi; top: 26cqi; transform: rotate(5deg); animation: ac-r2 8s var(--ease) infinite; }
.rc.r3 { left: 35cqi; top: 17cqi; transform: rotate(-3deg); animation: ac-r3 8s var(--ease) infinite; }

@keyframes ac-r1 {
  0% { opacity: 0; transform: translate(0, 0) rotate(-8deg) scale(.92); }
  8%, 16% { opacity: 1; transform: translate(0, 0) rotate(-8deg) scale(1); }
  34% { opacity: 1; transform: translate(60.5cqi, 5.6cqi) rotate(0deg) scale(.24); }
  37%, 100% { opacity: 0; transform: translate(60.5cqi, 5.6cqi) rotate(0deg) scale(.24); }
}

@keyframes ac-r2 {
  0% { opacity: 0; transform: translate(0, 0) rotate(5deg) scale(.92); }
  8%, 22% { opacity: 1; transform: translate(0, 0) rotate(5deg) scale(1); }
  40% { opacity: 1; transform: translate(46.5cqi, -3.9cqi) rotate(0deg) scale(.24); }
  43%, 100% { opacity: 0; transform: translate(46.5cqi, -3.9cqi) rotate(0deg) scale(.24); }
}

@keyframes ac-r3 {
  0% { opacity: 0; transform: translate(0, 0) rotate(-3deg) scale(.92); }
  8%, 28% { opacity: 1; transform: translate(0, 0) rotate(-3deg) scale(1); }
  46% { opacity: 1; transform: translate(32.5cqi, 6.7cqi) rotate(0deg) scale(.24); }
  49%, 100% { opacity: 0; transform: translate(32.5cqi, 6.7cqi) rotate(0deg) scale(.24); }
}

.pack {
  position: absolute;
  right: 7cqi;
  top: 20cqi;
  width: 36cqi;
  display: grid;
  gap: 1.6cqi;
  padding: 3.6cqi;
  border-radius: 2.6cqi;
  background: linear-gradient(180deg, #1E7C59, #145E43);
  box-shadow: 0 3cqi 7cqi rgba(0, 0, 0, .35);
  font-size: 2.4cqi;
  animation: ac-pack 8s ease-out infinite;
}

.pack .ic {
  width: 6cqi;
  height: 6cqi;
  color: #CFF5E4;
}

.pack span {
  display: grid;
  gap: .3em;
  color: #CFF5E4;
}

.pack b {
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.2em;
}

@keyframes ac-pack {
  0%, 46% { transform: none; }
  50% { transform: scale(1.05); }
  56%, 100% { transform: none; }
}

.scene-acct .done {
  right: 7cqi;
  bottom: 9cqi;
  animation: ac-done 8s var(--ease) infinite;
}

@keyframes ac-done {
  0%, 52% { opacity: 0; transform: translateY(1.6cqi); }
  60%, 86% { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: none; }
}


/* 7. Reminders: the notification arrives ------------------------------------ */

.rm-doc {
  position: absolute;
  left: 33cqi;
  top: 24cqi;
  width: 34cqi;
  height: auto;
  border-radius: .6cqi;
  opacity: .5;
  box-shadow: 0 3cqi 7cqi rgba(0, 0, 0, .5);
}

.note {
  position: absolute;
  left: 9cqi;
  right: 9cqi;
  top: 7cqi;
  display: flex;
  align-items: center;
  gap: 2.4cqi;
  padding: 2.6cqi 3cqi;
  border-radius: 3.4cqi;
  background: #222A26;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 3cqi 6cqi rgba(0, 0, 0, .45);
  font-size: 2.6cqi;
  animation: rm-note 8s infinite;
}

@keyframes rm-note {
  0%, 12% { opacity: 0; transform: translateY(-22cqi); animation-timing-function: cubic-bezier(.2, .9, .3, 1.12); }
  28%, 86% { opacity: 1; transform: none; animation-timing-function: ease-in; }
  95%, 100% { opacity: 0; transform: translateY(-5cqi); }
}

.note .ic {
  flex: none;
  width: 6cqi;
  height: 6cqi;
  padding: 1.2cqi;
  border-radius: 50%;
  background: rgba(34, 181, 126, .25);
  color: var(--mint);
  transform-origin: 50% 20%;
  animation: rm-ring 8s ease-in-out infinite;
}

@keyframes rm-ring {
  0%, 28% { transform: none; }
  31% { transform: rotate(14deg); }
  34% { transform: rotate(-12deg); }
  37% { transform: rotate(8deg); }
  40% { transform: rotate(-4deg); }
  43%, 100% { transform: none; }
}

.note span {
  display: grid;
  gap: .15em;
  color: var(--stage-soft);
}

.note b {
  color: var(--stage-ink);
  font-family: var(--font-display);
}


/* The rest of the toolbox ================================================== */

.sn-cloud {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 900px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 10px;
}

.sn-cloud li {
  font-family: var(--font-display);
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--ink);
  padding: 10px 18px;
  font-size: .95rem;
}

.sn-cloud .t1 {
  font-size: 1.2rem;
  padding: 13px 24px;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.sn-cloud .t3 {
  font-size: .85rem;
  color: var(--ink-soft);
}


/* Free and premium ========================================================== */

.plans {
  display: grid;
  gap: 20px;
  max-width: 920px;
  margin-inline: auto;
}

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

.plan {
  display: grid;
  align-content: start;
  gap: 20px;
  padding: 32px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
}

.plan--premium {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

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

.plan__top h3 {
  font-size: 1.375rem;
}

.plan__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 1;
  letter-spacing: -0.02em;
}

.plan__price small {
  display: block;
  margin-top: 8px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .9375rem;
  letter-spacing: 0;
  color: var(--ink-soft);
}

.prices {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.prices li {
  display: grid;
  gap: 2px;
  padding: 12px 10px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface-2);
  text-align: center;
}

.prices-note {
  margin: 10px 0 0;
  font-size: .875rem;
  color: var(--ink-soft);
}

.prices b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
}

.prices span {
  font-size: .8125rem;
  color: var(--ink-soft);
}

.ticks {
  list-style: none;
  margin: 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: 12px;
  font-size: .9375rem;
}

.ticks li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: start;
}

.ticks li::before {
  content: '';
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--accent) url('../img/check-white.svg') center / 100% no-repeat;
}

@media (prefers-color-scheme: dark) {
  .ticks li::before {
    background-image: url('../img/check-dark.svg');
  }
}

.plans-note {
  margin: 24px auto 0;
  max-width: 60ch;
  text-align: center;
  color: var(--ink-soft);
  font-size: .9375rem;
}


/* Questions ================================================================= */

.faq {
  display: grid;
  gap: 12px;
  max-width: 760px;
  margin-inline: auto;
}

.faq details {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 4px 24px;
  transition: border-color var(--fast) var(--ease);
}

.faq details[open] {
  border-color: var(--hairline-strong);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

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

.faq summary::after {
  content: '+';
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1;
  transition: transform var(--fast) var(--ease);
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq details p {
  padding-bottom: 20px;
  color: var(--ink-soft);
  max-width: 64ch;
}


/* Privacy, in short ========================================================== */

.privacy-card {
  max-width: 760px;
  margin-inline: auto;
  display: grid;
  gap: 16px;
  padding: 36px 32px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

@media (min-width: 768px) {
  .privacy-card {
    padding: 48px 56px;
  }
}

.privacy-card p {
  color: var(--ink-soft);
}

.privacy-card .btn-row {
  margin-top: 12px;
}