/* ==========================================================================
   Dactyl Websites — the five questions' parts that every width shares

   Split out of asks.css (October 2026, the desktop redesign) so the wide
   layout (desk.css) can use the same pictures as the phone rather than a
   second copy of them. Nothing here places a picture on the page; each
   layout does that. What is here:

     Read more       the fold under each answer (asks.js, MORE; phones only,
                     a wide screen shows every answer whole)
     The pictures    one per question, each in its own pair of colours
                     (see "Picture colours"), and their motion
     The deed        John's "no lock-in" slip

   Loaded at every width, AFTER asks.css on a phone: the rules moved here
   kept their order among themselves, and asks.css's own rules (the
   chapters' layout) never set the same property on the same element, so
   coming later changes nothing on a phone. One exception it relies on:
   asks.css shows .ask__toggle as a block and Read more makes it inline-
   flex, which only holds because this file comes second.
   ========================================================================== */

/* --------------------------------------------------------------- Read more
   The hidden part folds to nothing in a grid row; open, the row goes to its
   full height. The negative margin takes back the body's gap while it is
   closed, so nothing hangs under the last line. Closed, it is inert
   (asks.js), so its links cannot be tabbed into. */
.ask__more {
  display: grid;
  align-self: start;
  grid-template-rows: 0fr;
  margin-top: -1.35rem;
  transition: grid-template-rows .65s var(--glide);
}
.ask__body > .ask__more:first-child { margin-top: 0; }
.ask__more-in > :first-child { margin-top: 1.35rem; }
.ask__body > .ask__more:first-child .ask__more-in > :first-child { margin-top: 0; }
.ask.is-open .ask__more { grid-template-rows: 1fr; }
.ask__more-in {
  display: grid;
  gap: 1.35rem;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.ask.is-open .ask__more-in { opacity: 1; transition-delay: .12s; }

.ask__toggle {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  align-self: flex-start;
  min-height: 44px;
  margin: 1.1rem 0 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ask__toggle-t {
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat;
  padding-bottom: 2px;
}
/* A plus in a ring; open, its upright turns flat and it reads as minus. */
.ask__toggle-i {
  position: relative;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px currentColor;
  transition: transform .5s var(--glide), background-color .3s var(--ease);
}
.ask__toggle-i::before,
.ask__toggle-i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: .7rem;
  height: 1.5px;
  margin: -.75px 0 0 -.35rem;
  border-radius: 1px;
  background: currentColor;
  transition: transform .5s var(--glide);
}
.ask__toggle-i::after { transform: rotate(90deg); }
.ask.is-open .ask__toggle-i { transform: rotate(180deg); }
.ask.is-open .ask__toggle-i::after { transform: rotate(0deg); }
.ask__toggle:active .ask__toggle-i { transform: scale(.9); }

/* A note under a picture that is made up. */
.vis-note {
  margin: .9rem 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-3);
}

/* =========================================================== 1  The phone
   mobile-phone.mp4 is the phone cut out on white, with its matte under it
   (tools/build-phone-video.py); only the top half is shown, multiplied onto
   the linen, so the white goes and the phone floats. The multiply is on
   the box (.vis-phone__dev), so the box can move and scale freely. Behind
   it, a laptop drawn in hairlines, which draws itself in after the phone:
   first the phone, then every other screen. */
.vis-phone {
  position: relative;
  isolation: isolate;
  height: calc(70vw * 496 / 368 + 7.4rem);
  margin: 2.4rem calc(var(--gutter) * -1) 0;
  background: var(--sheet);
}
.vis-phone__dev {
  position: absolute;
  top: 4.4rem;
  right: -3vw;
  z-index: 2;
  width: 70vw;
  aspect-ratio: 368 / 496;
  overflow: hidden;
  mix-blend-mode: multiply;
}
.vis-phone__vid { display: block; width: 100%; height: auto; }
.vis-phone__laptop {
  position: absolute;
  left: calc(var(--gutter) * .4);
  bottom: 4.6rem;
  z-index: 1;
  width: 64vw;
  height: auto;
  stroke: var(--ink-3);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .7;
}
.vis-phone__laptop .vis-phone__wire { stroke: var(--accent); stroke-width: 1.2; opacity: .8; }
.vis-phone__laptop path { stroke-dasharray: 1; stroke-dashoffset: 0; }

/* The stat, set large in the top left, clear of the phone. */
.vis-phone__stat {
  position: absolute;
  top: .6rem;
  left: var(--gutter);
  z-index: 3;
  max-width: 11rem;
  margin: 0;
}
.vis-phone__stat b {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.3rem, 11vw, 2.9rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--ink);
  font-variant-numeric: lining-nums;
}
.vis-phone__stat span {
  display: block;
  margin-top: .4rem;
  font-size: .86rem;
  line-height: 1.35;
  color: var(--ink-2);
}

/* The two steps: the first over the phone, the second under the laptop. */
.vis-phone__k {
  position: absolute;
  bottom: .4rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.vis-phone__k i {
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  font-family: var(--display);
  font-size: .85rem;
  font-style: normal;
  letter-spacing: 0;
}
.vis-phone__k--1 { top: 2.2rem; right: var(--gutter); bottom: auto; }
.vis-phone__k--1 i { background: var(--accent); color: #fff; }       /* 4.65:1 */
.vis-phone__k--2 { left: var(--gutter); bottom: .4rem; }
.vis-phone__k--2 i { box-shadow: inset 0 0 0 1.25px var(--ink-3); color: var(--ink-2); }

/* ====================================================== 2  Getting found
   A search, as a stylised result for a made-up florist, then the AI answer
   that quotes it. White, because they are screens. As it plays (asks.js)
   the query types itself, the result comes up, the parts we write for it
   are marked one after another, and the AI answer arrives and types. */
.vis-search { display: grid; gap: .75rem; margin-top: 2.4rem; }
.vis-search__bar {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: 3.1rem;
  padding: .55rem 1.15rem;
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(40, 24, 8, .06), 0 14px 28px -18px rgba(40, 24, 8, .35);
  font-size: .98rem;
  color: var(--ink);
}
.vis-search__bar svg {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 2;
  stroke-linecap: round;
}
.vis-search__q { white-space: nowrap; overflow: hidden; text-overflow: clip; }
[data-type].is-typing::after {
  content: "";
  display: inline-block;
  width: 1.5px;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: -.15em;
  background: currentColor;
  animation: asks-caret 1s steps(1) infinite;
}
@keyframes asks-caret { 50% { opacity: 0; } }

.vis-search__res {
  padding: 1.1rem 1.15rem 1.15rem;
  border-radius: 22px;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(40, 24, 8, .06), 0 22px 40px -26px rgba(40, 24, 8, .4);
}
.vis-search__site { display: flex; align-items: center; gap: .65rem; margin: 0 0 .75rem; }
.vis-search__fav {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  background: var(--sand);
  font-family: var(--display);
  font-size: 1rem;
  color: var(--accent-ink);
}
.vis-search__site b { display: block; font-size: .86rem; font-weight: 600; line-height: 1.2; color: var(--ink); }
.vis-search__site i { display: block; font-size: .76rem; font-style: normal; line-height: 1.3; color: var(--ink-3); }
.vis-search__line { margin: 0; }
.vis-search__line + .vis-search__line { margin-top: .5rem; }
.vis-search__title { font-size: 1.12rem; font-weight: 500; line-height: 1.28; letter-spacing: -.01em; color: var(--ink); }
.vis-search__desc { font-size: .9rem; line-height: 1.5; color: var(--ink-2); }
.vis-search__line mark {
  padding: .05em 0;
  color: inherit;
  background: linear-gradient(var(--accent-haze), var(--accent-haze)) 0 0 / 100% 100% no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size .8s var(--glide);
}
.vis-search__links { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding-top: .35rem; }
.vis-search__links > span:not(.vis-tag) {
  padding: .35rem .7rem;
  border-radius: 999px;
  background: var(--linen);
  font-size: .78rem;
  color: var(--ink-2);
}
.vis-search__links > span:nth-child(3) { box-shadow: inset 0 0 0 1.5px var(--accent-haze); }
/* What each marked part is, in the section label's mono. */
.vis-tag {
  display: inline-block;
  margin-left: .45rem;
  padding: .18rem .45rem;
  border-radius: 6px;
  vertical-align: .12em;
  background: var(--accent);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 1.3;
  text-transform: uppercase;
  color: #fff;                                   /* 4.65:1 */
  transition: opacity .35s var(--ease), transform .5s var(--glide);
}

/* The AI answer: an ink bubble, overlapping the result's foot, its tail
   corner pointing back at it. */
.vis-search__ai {
  position: relative;
  z-index: 1;
  width: 88%;
  margin: -1.5rem 0 0 auto;
  padding: 1rem 1.1rem 1.05rem;
  border-radius: 22px 22px 22px 6px;
  background: var(--ink);
  color: var(--ivory);
  box-shadow: 0 26px 44px -24px rgba(20, 17, 13, .6);
}
.vis-search__ai-k {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 .5rem;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-lit-ink);
}
.vis-search__ai-k svg { width: 1rem; height: 1rem; fill: var(--accent-lit); }
.vis-search__ai-t { min-height: 4.05em; margin: 0; font-size: .95rem; line-height: 1.42; color: var(--ivory); }
.vis-search__src {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: .7rem 0 0;
  padding: .25rem .65rem .25rem .25rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  font-size: .75rem;
  color: var(--on-navy);
}
.vis-search__src img { width: 1.5rem; height: 1.5rem; border-radius: 50%; object-fit: cover; }

.vis-form { position: relative; display: grid; margin-top: 2.6rem; }
.vis-form__plain {
  display: grid;
  gap: .42rem;
  width: 54%;
  padding: .95rem .9rem 1rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  transform: rotate(-4deg);
  transform-origin: 0 0;
}
.vis-form__k {
  margin: 0 0 .15rem;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .13em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--on-navy-2);
}
.vis-form__f {
  display: block;
  padding: .42rem .6rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, .07);
  font-size: .72rem;
  line-height: 1.3;
  color: var(--on-navy-2);
}
.vis-form__f--msg { min-height: 3.3rem; }
.vis-form__f--msg i { display: block; margin-top: .15rem; font-style: normal; color: var(--ivory); }
.vis-form__send {
  justify-self: start;
  margin-top: .15rem;
  padding: .32rem .8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  font-size: .72rem;
  color: var(--ivory);
}

.vis-form__smart {
  position: relative;
  z-index: 1;
  justify-self: end;
  width: 86%;
  margin-top: -2.4rem;
  padding: 1.05rem 1.1rem 1.2rem;
  border-radius: 24px;
  background: var(--linen);
  color: var(--ink);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25), 0 40px 70px -30px rgba(0, 0, 0, .75);
}
.vis-form__top { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.vis-form__smart .vis-form__k { color: var(--accent-ink); }
.vis-form__count { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.vis-form__count b { font-weight: 400; }
.vis-form__bar { height: 3px; margin: .6rem 0 1rem; overflow: hidden; border-radius: 3px; background: var(--sand-2); }
.vis-form__bar i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
  transform: scaleX(var(--p, .334));
  transform-origin: left center;
  transition: transform .7s var(--glide);
}
/* Every step in one grid cell, so the card is always as tall as its tallest
   step and never jumps as they change. */
.vis-form__stage { display: grid; }
.vis-form__step {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transform: translateX(16px);
  transition: opacity .35s var(--ease), transform .55s var(--glide), visibility 0s linear .55s;
}
.vis-form__step.is-on { visibility: visible; opacity: 1; transform: none; transition-delay: .12s, .12s, 0s; }
.vis-form__step.is-off { transform: translateX(-16px); }
.vis-form__h { margin: 0 0 .8rem; font-family: var(--display); font-size: 1.18rem; line-height: 1.15; letter-spacing: -.012em; color: var(--ink); }
.vis-form__opts { display: flex; flex-wrap: wrap; gap: .4rem; }
.vis-form__opts span {
  padding: .5rem .75rem;
  border-radius: 999px;
  background: var(--sand);
  font-size: .8rem;
  line-height: 1.2;
  color: var(--ink-2);
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .25s var(--ease);
}
.vis-form__opts--rows { flex-direction: column; }
.vis-form__opts--rows span { border-radius: 12px; padding: .6rem .8rem; }
.vis-form__opts span.is-picked { background: var(--ink); color: var(--linen); }
.vis-form__opts span.is-press { transform: scale(.95); }
.vis-form__input {
  display: block;
  min-height: 2.5rem;
  padding: .62rem .8rem;
  border-radius: 12px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--accent);
  font-size: .88rem;
  color: var(--ink);
}
.vis-form__input i { font-style: normal; }
.vis-form__go {
  display: inline-block;
  margin-top: .65rem;
  padding: .5rem 1.1rem;
  border-radius: 999px;
  background: var(--ink);
  font-size: .8rem;
  font-weight: 600;
  color: var(--linen);
  transition: transform .25s var(--ease);
}
.vis-form__go.is-press { transform: scale(.94); }
/* The email the business gets: the Smart Form's own enquiry email, in
   small (dactyl-smart-form/email-templates/client.html). */
.vis-form__mk {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 .35rem;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.vis-form__mk::before { content: ""; width: 1.3rem; height: 1.5px; background: var(--accent); }
.vis-form__mh { margin: 0 0 .7rem; font-family: var(--display); font-size: 1.5rem; line-height: 1.05; letter-spacing: -.02em; color: var(--ink); }
.vis-form__mh span { color: var(--accent); }
.vis-form__mail dl { margin: 0; padding: .3rem .8rem; border-radius: 12px; background: var(--sand); }
.vis-form__mail dl div { display: flex; justify-content: space-between; gap: .8rem; padding: .38rem 0; }
.vis-form__mail dl div + div { border-top: 1px solid var(--hair); }
.vis-form__mail dt { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; line-height: 1.6; text-transform: uppercase; color: var(--ink-3); }
.vis-form__mail dd { margin: 0; font-size: .82rem; color: var(--ink); text-align: right; }

.vis-pulse { margin-top: 2.4rem; }
.vis-pulse__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .8rem;
  font-family: var(--display);
  font-size: 1.2rem;
  color: var(--ink);
}
.vis-pulse__ex {
  padding: .3rem .65rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--hair-2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);                                   /* 4.9 on sand */
}
.vis-pulse__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: .6rem;
}
.vis-pulse__tile {
  position: relative;
  display: grid;
  align-content: start;
  gap: .3rem;
  min-width: 0;
  padding: 1rem 1.05rem 1.1rem;
  overflow: hidden;
  border-radius: 20px;
  background: var(--linen);
}
.vis-pulse__tile--wide {
  grid-column: span 2;
  min-height: 10rem;
  padding: 1.15rem 1.2rem 1.15rem;
  background: var(--ink);
  color: var(--ivory);
}
.vis-pulse__k { font-size: .84rem; color: var(--ink-2); }
.vis-pulse__tile--wide .vis-pulse__k { color: var(--on-navy); }
.vis-pulse__n {
  font-family: var(--display);
  font-size: 3.1rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.vis-pulse__tile--wide .vis-pulse__n { font-size: 4.4rem; color: var(--ivory); }
.vis-pulse__d { margin-top: .2rem; font-size: .8rem; color: var(--accent-lit-ink); }
.vis-pulse__spark {
  position: absolute;
  right: 1.1rem;
  top: 1.6rem;
  width: 46%;
  height: 4.2rem;
  fill: none;
  stroke: var(--accent-lit);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.vis-pulse__spark path { stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
.vis-pulse__i {
  width: 1.3rem;
  height: 1.3rem;
  margin-bottom: .55rem;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ========================================================= 5  Each month
   A linen sheet over the sand. A month of four weeks on a white card, three
   days marked, and the three things that happen on them listed under it,
   each with its day. Marked by shape and fill, not by colour: the boost a
   solid terracotta disc, the change an ink disc, the reminder a ring. */
.vis-month { display: grid; gap: .65rem; margin-top: 2.4rem; }
.vis-month__cal {
  padding: 1.05rem 1rem 1.1rem;
  border-radius: 24px;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(40, 24, 8, .05), 0 22px 40px -28px rgba(40, 24, 8, .4);
}
.vis-month__h { margin: 0 0 .8rem .2rem; font-family: var(--display); font-size: 1.2rem; color: var(--ink); }
.vis-month__dow,
.vis-month__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.vis-month__dow { margin-bottom: .35rem; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--ink-3); }
.vis-month__days li {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  font-size: .82rem;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  transition: background-color .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease), transform .5s var(--glide);
}
.vis-month__days li[data-ev="1"], .vis-month__d[data-d="1"] { background: var(--accent); color: #fff; }
.vis-month__days li[data-ev="2"], .vis-month__d[data-d="2"] { background: var(--ink); color: var(--linen); }
.vis-month__days li[data-ev="3"], .vis-month__d[data-d="3"] { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent-ink); }
.vis-month__evs { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.vis-month__evs > li {
  display: grid;
  grid-template-columns: 2.3rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .85rem;
  padding: .75rem .85rem;
  border-radius: 18px;
  background: var(--paper);
  transition: opacity .5s var(--ease), transform .7s var(--glide);
}
.vis-month__d {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  font-family: var(--display);
  font-size: 1rem;
}
.vis-month__evs [data-ev="1"] .vis-month__d { background: var(--accent); color: #fff; }
.vis-month__evs [data-ev="2"] .vis-month__d { background: var(--ink); color: var(--linen); }
.vis-month__evs [data-ev="3"] .vis-month__d { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent-ink); }
.vis-month__t b { display: block; font-size: .93rem; font-weight: 600; line-height: 1.25; color: var(--ink); }
.vis-month__t i { display: block; margin-top: .1rem; font-size: .82rem; font-style: normal; line-height: 1.35; color: var(--ink-2); }
.vis-month__evs img { width: 2.9rem; height: 2.9rem; border-radius: 10px; object-fit: cover; }

/* =============================================================== The deed
   "Your website, your domain, and no lock-in" as an object, about the
   website first: your site in its browser window, in the site's own
   umber, linen and terracotta, and its key handed over on a terracotta tag
   that swings in on a string as it comes on screen (asks.js). The domain
   and the packages follow in two quiet rows. White on the tag (#a7471b)
   5.3:1; ink on the linen page 17:1. */
.deed {
  --forest: var(--umber);
  --gold: var(--accent-lit);
  --tag: var(--accent-ink);
  position: relative;
  display: block;
  margin: 2.2rem 0 2rem;
}
.deed__win {
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 17, 13, .08), 0 30px 50px -30px rgba(20, 17, 13, .5);
}
.deed__chrome { display: flex; align-items: center; gap: 5px; padding: .55rem .7rem; background: var(--forest); }
.deed__chrome > i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .3); }
.deed__url {
  display: flex;
  flex: 1;
  align-items: center;
  gap: .4rem;
  margin-left: .45rem;
  padding: .3rem .65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  font-size: .78rem;
  color: #fff;
}
.deed__url svg { flex: none; width: .85rem; height: .85rem; fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; }
.deed__page {
  display: grid;
  justify-items: start;
  gap: .5rem;
  min-height: 9.5rem;
  padding: 1.3rem 1.1rem 1.4rem;
  background: linear-gradient(160deg, var(--sand), var(--linen) 70%);
}
.deed__brand { font-family: var(--display); font-size: 1.6rem; line-height: 1.05; letter-spacing: -.02em; color: var(--ink); }
.deed__line { width: 62%; height: 7px; border-radius: 4px; background: var(--sand-2); }
.deed__line--s { width: 44%; }
.deed__cta { margin-top: .35rem; padding: .45rem .95rem; border-radius: 999px; background: var(--ink); font-size: .75rem; font-weight: 600; color: var(--linen); }
/* The key, on a gold tag, hung from a string. */
.deed__tag {
  position: absolute;
  top: 4.2rem;
  right: 1rem;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: .55rem;
  padding: .65rem .85rem .65rem .7rem;
  border-radius: 12px;
  background: var(--tag);
  color: #fff;
  box-shadow: 0 16px 26px -14px rgba(20, 17, 13, .55);
  transform: rotate(-4deg);
  transform-origin: 50% -1.4rem;
}
.deed__tag::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -1.4rem;
  width: 1.5px;
  height: 1.55rem;
  background: var(--ink-3);
}
.deed__tag::after {
  content: "";
  position: absolute;
  left: 50%;
  top: .3rem;
  width: .45rem;
  height: .45rem;
  margin-left: -.22rem;
  border-radius: 50%;
  background: var(--linen);
  box-shadow: inset 0 0 0 1.5px #7d3413;
}
.deed__tag svg { grid-row: span 2; width: 1.5rem; height: 1.5rem; margin-top: .3rem; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.deed__tag b { margin-top: .3rem; font-size: .9rem; font-weight: 700; line-height: 1.1; }
.deed__tag i { font-size: .74rem; font-style: normal; line-height: 1.2; color: #fff; }
.deed__rows { display: grid; margin: 1.1rem 0 0; }
.deed__rows div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem .1rem; border-bottom: 1px solid var(--hair-2); }
.deed__rows dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; line-height: 1.8; text-transform: uppercase; color: var(--ink-3); }
.deed__rows dd { margin: 0; font-size: .92rem; font-weight: 600; text-align: right; color: var(--ink); }
.deed__rows div:first-child dd { color: var(--accent-ink); }

/* ======================================================= Picture colours
   The pictures are the one place the page steps outside its own palette,
   the way a photograph or a portfolio piece would. Each gets one pair of
   colours of its own, so no two look alike, and nothing else on the page
   uses them:
     1  a cobalt stage; the stat and the two steps in the site's own
        terracotta and sand
     2  as two screenshots would look: a search result in the search
        engine's own blue and grey on white, and a chat app's AI answer in
        dark mode, with our pink highlighter marking what we write
     3  the steps in the site's terracotta; the thread in the phone's own
        message blue and green; the Smart Form in hi-vis yellow and black,
        the colours of a tradie's van and tools
     4  the site's own umber and terracotta
     5  fuchsia into violet          the Marketing Boost, the month's star
     the deed  the site's own colours: your website, handed over
   Measured: white on cobalt #1a2b8f 10.4:1; search blue #1a0dab on white
   12.6:1, grey #4d5156 7.6:1; #ececec on #212121 13.9:1; white on message
   blue #0b66d8 5.0:1 and message green #1b7f3a 5.1:1; ink on hi-vis
   #ffcc00 13.2:1, hi-vis on ink 12.9:1; white on #c41f72 5.4:1 and on
   #4d2fd6 7.4:1; forest on key gold 8.8:1. */

/* The two new pictures sit beside the ones they replace; one attribute on
   the question picks which shows (index.html says how to go back). */
.ask[data-q1="grow"] .vis-phone,
.ask:not([data-q1="grow"]) .vis-grow,
.ask[data-q3="story"] .vis-form,
.ask:not([data-q3="story"]) .vis-story { display: none; }

/* ============================================== 1  The layout, phone first
   A cobalt stage with one device in it. A small studio site builds itself on
   the phone, block by block (asks.js); then the device opens out into a
   wide screen and every block moves to its place in the wider layout, and
   back again, while it is on screen. The two chips under it say which. */
.vis-grow {
  --cob: #1a2b8f;
  --cob-deep: #0b1350;
  --peri: #aebfff;
  --peri-2: #e1e7ff;
  margin-top: 2.4rem;
}
.vis-grow__stat { display: flex; align-items: center; gap: .75rem; margin: 0 0 1rem; }
.vis-grow__stat b {
  flex: none;
  font-family: var(--display);
  font-size: clamp(2.3rem, 11vw, 2.9rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--accent);                   /* a large figure: 3.6 on sand */
  font-variant-numeric: lining-nums;
}
.vis-grow__stat span { max-width: 10rem; font-size: .9rem; line-height: 1.35; color: var(--ink-2); }
.vis-grow__stage {
  position: relative;
  height: 23rem;
  overflow: hidden;
  border-radius: 26px;
  background: radial-gradient(120% 90% at 28% 8%, #4656a6 0%, #2e3c84 48%, #1c2659 100%);   /* a softer cobalt */
}
.vis-grow__dev {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44%;
  height: 88%;
  padding: 6px;
  border-radius: 24px;
  background: #060a24;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 60px -22px rgba(3, 6, 28, .75);
  transform: translate(-50%, -50%);
  transition: width .95s var(--glide), height .95s var(--glide), border-radius .95s var(--glide), padding .95s var(--glide);
}
.vis-grow[data-at="wide"] .vis-grow__dev { width: 92%; height: 64%; padding: 18px 6px 6px; border-radius: 12px; }
.vis-grow__notch {
  position: absolute;
  top: 11px;
  left: 50%;
  z-index: 2;
  width: 26%;
  height: 7px;
  margin-left: -13%;
  border-radius: 4px;
  background: #060a24;
  transition: opacity .3s var(--ease);
}
.vis-grow__dots { position: absolute; top: 6px; left: 9px; display: flex; gap: 4px; opacity: 0; transition: opacity .4s var(--ease); }
.vis-grow__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .32); }
.vis-grow[data-at="wide"] .vis-grow__notch { opacity: 0; }
.vis-grow[data-at="wide"] .vis-grow__dots { opacity: 1; transition-delay: .5s; }
.vis-grow__screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  transition: border-radius .95s var(--glide);
}
.vis-grow[data-at="wide"] .vis-grow__screen { border-radius: 6px; }
.vis-grow .g {
  position: absolute;
  display: block;
  border-radius: 6px;
  background: var(--peri-2);
  transition:
    left .95s var(--glide), top .95s var(--glide), width .95s var(--glide), height .95s var(--glide),
    opacity .4s var(--ease), transform .55s var(--glide);
}
.vis-grow .g--nav { background: none; }
.vis-grow .g--nav b, .vis-grow .g--nav i { position: absolute; top: 18%; height: 64%; border-radius: 3px; }
.vis-grow .g--nav b { left: 0; width: 30%; background: var(--cob); }
.vis-grow .g--nav i { right: 0; width: 14%; background: var(--peri-2); }
.vis-grow .g--img { overflow: hidden; border-radius: 8px; }
.vis-grow .g--img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.vis-grow .g--h1 { background: var(--cob); }
.vis-grow .g--h2 { background: #c8d2ff; }
.vis-grow .g--btn {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  background: var(--peri);
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--cob-deep);
}
/* On the phone: one column. */
.vis-grow .g--nav { left: 6%; top: 5%; width: 88%; height: 5%; }
.vis-grow .g--img { left: 6%; top: 13%; width: 88%; height: 29%; }
.vis-grow .g--h1  { left: 6%; top: 46%; width: 72%; height: 4.5%; }
.vis-grow .g--h2  { left: 6%; top: 53%; width: 52%; height: 3%; }
.vis-grow .g--btn { left: 6%; top: 59.5%; width: 50%; height: 6.5%; }
.vis-grow .g--c1  { left: 6%; top: 70%; width: 88%; height: 8%; }
.vis-grow .g--c2  { left: 6%; top: 80%; width: 88%; height: 8%; }
.vis-grow .g--c3  { left: 6%; top: 90%; width: 88%; height: 8%; }
/* Wide: words left, picture right, three cards across. */
.vis-grow[data-at="wide"] .g--nav { left: 4%; top: 5%; width: 92%; height: 7%; }
.vis-grow[data-at="wide"] .g--img { left: 52%; top: 18%; width: 44%; height: 46%; }
.vis-grow[data-at="wide"] .g--h1  { left: 4%; top: 22%; width: 42%; height: 7%; }
.vis-grow[data-at="wide"] .g--h2  { left: 4%; top: 33%; width: 30%; height: 4.5%; }
.vis-grow[data-at="wide"] .g--btn { left: 4%; top: 43%; width: 20%; height: 9%; }
.vis-grow[data-at="wide"] .g--c1  { left: 4%; top: 72%; width: 28.7%; height: 21%; }
.vis-grow[data-at="wide"] .g--c2  { left: 35.65%; top: 72%; width: 28.7%; height: 21%; }
.vis-grow[data-at="wide"] .g--c3  { left: 67.3%; top: 72%; width: 28.7%; height: 21%; }

.vis-grow__steps { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; }
.vis-grow__step {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .8rem .42rem .42rem;
  border-radius: 999px;
  background: var(--sand-2);
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink-2);
  transition: background-color .45s var(--ease), color .45s var(--ease);
}
.vis-grow__step i {
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: rgba(20, 17, 13, .08);
  font-size: .72rem;
  font-style: normal;
}
/* The step showing: terracotta, white on it 4.65:1. */
.vis-grow[data-at="phone"] .vis-grow__step[data-s="phone"],
.vis-grow[data-at="wide"] .vis-grow__step[data-s="wide"] { background: var(--accent); color: #fff; }
.vis-grow[data-at="phone"] .vis-grow__step[data-s="phone"] i,
.vis-grow[data-at="wide"] .vis-grow__step[data-s="wide"] i { background: rgba(255, 255, 255, .22); }

/* ======================================================= 2  Two screenshots
   The search result as a search engine draws one: white, the title in its
   link blue, the address and description in its greys, the sub-links as
   blue text. The AI answer as a chat app draws one in dark mode. They are
   from two different apps, so nothing about them matches. Our pink
   highlighter and its labels are the only marks that are ours. */
.vis-search { --hl: #ffc9e4; --serp-blue: #1a0dab; --serp-grey: #4d5156; }
.vis-search__bar { box-shadow: 0 0 0 1px #dfe1e5, 0 2px 6px rgba(32, 33, 36, .12); color: #202124; }
.vis-search__bar svg { stroke: #9aa0a6; }
.vis-search__res { box-shadow: 0 0 0 1px #ebebeb, 0 18px 36px -26px rgba(32, 33, 36, .35); }
.vis-search__fav { background: #0f8b8d; color: #fff; font-family: var(--sans); font-size: .78rem; font-weight: 700; }
.vis-search__site b { color: #202124; font-weight: 400; }
.vis-search__site i { color: var(--serp-grey); }
.vis-search__title { font-family: var(--sans); font-weight: 400; color: var(--serp-blue); }
.vis-search__desc { color: var(--serp-grey); }
.vis-search__line mark { background-image: linear-gradient(var(--hl), var(--hl)); color: inherit; }
.vis-search__links > span:not(.vis-tag) {
  padding: 0;
  background: none;
  box-shadow: none;
  font-size: .82rem;
  color: var(--serp-blue);
}
.vis-search__links > span:nth-child(3) { box-shadow: none; }
.vis-search__links > span:not(.vis-tag) + span:not(.vis-tag)::before { content: "·"; margin-right: .4rem; color: var(--serp-grey); }
.vis-tag { background: #202124; color: #fff; }
.vis-search__ai {
  background: #212121;
  box-shadow: 0 0 0 1px #303030, 0 26px 44px -24px rgba(0, 0, 0, .55);
}
.vis-search__ai-k { color: #b4b4b4; }
.vis-search__ai-k svg { fill: #8ab4f8; }
.vis-search__ai-t { color: #ececec; }
.vis-search__src { background: #2f2f2f; color: #c5c5c5; }

/* ================================================ 3  The story of a form
   Three acts on the umber band, named in a row of three over the stage:
   the usual form being filled in (and all it gives you), the back and
   forth it starts, with a running count in coral, and then the Smart Form
   doing the same job in one go, in emerald (asks.js, story). */
.vis-story {
  --coral: #ff8f7a;
  --coral-ink: #b8361f;
  --msg-blue: #0b66d8;
  --msg-green: #1b7f3a;
  --hivis: #ffcc00;
  --hivis-ink: #7a5a00;
  margin-top: 2.4rem;
}
.vis-story__acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; margin-bottom: .9rem; }
.vis-story__act {
  padding: .5rem .3rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .07em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
  color: var(--on-navy-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .4s var(--ease), color .4s var(--ease), transform .2s var(--ease);
}
.vis-story__act:active { transform: scale(.95); }
/* The act playing: the site's terracotta, white on it 4.65:1. */
.vis-story[data-act="0"] .vis-story__act[data-act="0"],
.vis-story[data-act="1"] .vis-story__act[data-act="1"],
.vis-story[data-act="2"] .vis-story__act[data-act="2"] { background: var(--accent); color: #fff; }
.vis-story__stage { display: grid; }
.vis-story__scene {
  grid-area: 1 / 1;
  align-self: start;
  visibility: hidden;
  opacity: 0;
  transform: translateX(18px);
  transition: opacity .4s var(--ease), transform .6s var(--glide), visibility 0s linear .6s;
}
.vis-story__scene.is-on { visibility: visible; opacity: 1; transform: none; transition-delay: .1s, .1s, 0s; }
.vis-story__scene.is-off { transform: translateX(-18px); }
/* Before the story starts (or with no script), the first act shows. */
.vis-story:not([data-act]) .vis-story__plain { visibility: visible; opacity: 1; transform: none; }

/* Act 1: the usual form, on its own grey card. */
.vis-story__plain {
  display: grid;
  gap: .5rem;
  padding: 1.1rem 1rem 1rem;
  border-radius: 22px;
  background: #efeeeb;
  color: var(--ink);
}
.vis-story__f {
  display: grid;
  gap: .15rem;
  min-height: 3rem;
  padding: .45rem .7rem .5rem;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #dcdad5;
}
.vis-story__f--msg { min-height: 4.6rem; }
.vis-story__f em { font-family: var(--mono); font-size: 9.5px; font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.vis-story__f i { font-size: .88rem; font-style: normal; color: var(--ink); }
.vis-story__send {
  justify-self: start;
  margin-top: .2rem;
  padding: .5rem 1.1rem;
  border-radius: 999px;
  background: #3a3a3a;
  font-size: .8rem;
  font-weight: 600;
  color: #fff;
  transition: transform .25s var(--ease);
}
.vis-story__send.is-press { transform: scale(.94); }
.vis-story__sent {
  font-size: .82rem;
  font-weight: 600;
  color: var(--coral-ink);                     /* 5.1:1 on the card */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s var(--ease), transform .6s var(--glide);
}
.vis-story__plain.is-sent .vis-story__sent { opacity: 1; transform: none; }

/* Act 2: the thread it starts. */
.vis-story__thread ul { display: flex; flex-direction: column; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.vis-story__thread li {
  max-width: 84%;
  padding: .55rem .75rem .6rem;
  border-radius: 14px;
  font-size: .84rem;
  line-height: 1.35;
  color: var(--ivory);
  opacity: 0;
  transform: translateY(10px) scale(.97);
  transition: opacity .35s var(--ease), transform .55s var(--glide);
}
.vis-story__thread li.is-on { opacity: 1; transform: none; }
.vis-story__thread li b {
  display: block;
  margin-bottom: .15rem;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-navy-2);
}
/* The phone's own message colours: you in blue, Sam in green. */
.vis-story__thread .is-you { align-self: flex-end; border-radius: 16px 16px 4px 16px; background: var(--msg-blue); color: #fff; }
.vis-story__thread .is-them { align-self: flex-start; border-radius: 16px 16px 16px 4px; background: var(--msg-green); color: #fff; }
.vis-story__thread .is-you b,
.vis-story__thread .is-them b { color: rgba(255, 255, 255, .82); }
.vis-story__thread .is-miss {
  align-self: center;
  padding-left: 2.3rem;
  background: rgba(255, 143, 122, .12) no-repeat .75rem 50% / 1.05rem
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8f7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h3l1.5 4-2 1.5a12 12 0 0 0 6 6l1.5-2 4 1.5v3a2 2 0 0 1-2.2 2A16.5 16.5 0 0 1 4.5 5.7a2 2 0 0 1 2-2.2Z'/%3E%3Cpath d='m15 3 6 6M21 3l-6 6'/%3E%3C/svg%3E");
  color: var(--coral);
}
.vis-story__thread .is-miss b { color: var(--coral); }
.vis-story__tally {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .4rem;
  margin-top: .9rem;
  padding-top: .8rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.vis-story__tally span { font-size: .74rem; line-height: 1.25; color: var(--on-navy-2); }
.vis-story__tally b {
  display: block;
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 400;
  line-height: 1;
  color: var(--coral);
  font-variant-numeric: lining-nums tabular-nums;
}
.vis-story__tally i { font-style: normal; }

/* Act 3: the Smart Form, on white, in hi-vis yellow and black. Its steps
   and email are the same parts as the older picture (.vis-form__*),
   recoloured here. */
.vis-story__smart {
  padding: 1.05rem 1.1rem 1.2rem;
  border-radius: 22px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .7);
}
.vis-story .vis-form__k { color: var(--hivis-ink); }      /* 6.6:1 on white */
.vis-story .vis-form__bar { background: #fbf0c4; }
.vis-story .vis-form__bar i { background: var(--hivis); }
.vis-story .vis-form__opts span { background: #f3f2ee; }
.vis-story .vis-form__opts span.is-picked { background: var(--hivis); color: var(--ink); }
.vis-story .vis-form__input { box-shadow: inset 0 0 0 1.5px var(--ink); }
.vis-story .vis-form__go { background: var(--ink); color: var(--hivis); }
.vis-story .vis-form__mk::before { background: var(--hivis); height: 3px; }
.vis-story .vis-form__mh span { color: var(--ink); }
.vis-story .vis-form__mail dl { background: #fff7d6; }
.vis-story__win {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: .8rem 0 0;
  padding: .4rem .8rem .4rem .55rem;
  border-radius: 999px;
  background: var(--ink);
  font-size: .8rem;
  font-weight: 600;
  color: var(--hivis);
}
.vis-story__win::before {
  content: "";
  width: .55rem;
  height: .3rem;
  margin: -.15rem .15rem 0 .15rem;
  border-left: 2px solid var(--hivis);
  border-bottom: 2px solid var(--hivis);
  transform: rotate(-45deg);
}

/* ===================================================== 4  Figures, Dactyl
   The site's own materials: the wide tile on umber with its line in
   terracotta, the two small tiles on linen with terracotta icons. */
.vis-pulse__tile { background: var(--linen); }
.vis-pulse__tile--wide { background: radial-gradient(120% 140% at 100% 0%, var(--umber-lamp) 0%, var(--umber) 55%, var(--umber-deep) 100%); }
.vis-pulse__tile--wide .vis-pulse__k { color: var(--on-navy); }
.vis-pulse__spark { stroke: var(--accent-lit); }
.vis-pulse__d { color: var(--accent-lit-ink); }
.vis-pulse__i { stroke: var(--accent); }
.vis-pulse__ex { box-shadow: inset 0 0 0 1px var(--hair-2); color: var(--ink-3); }

/* ==================================== 5  The month, and its Marketing Boost
   The boost is the star, so it is the only colour on the month: its day a
   fuchsia-to-violet disc with a ring that keeps rippling out of it, and its
   row a card of that gradient with a sheen passing over it, holding a
   window that turns through what a boost can be (asks.js): an animated
   video, a social post, an article, a review email, a promo video. The
   other two days are ink. */
.vis-month { --fuch: #c41f72; --viol: #4d2fd6; }
.vis-month__days li[data-ev="1"] { position: relative; background: linear-gradient(135deg, var(--fuch), var(--viol)); color: #fff; }
.vis-month__days li[data-ev="3"],
.vis-month__evs [data-ev="3"] .vis-month__d { box-shadow: inset 0 0 0 1.5px var(--ink-3); color: var(--ink-2); }
.vis-month__days li[data-ev="1"].is-lit::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid #b53bd0;
  animation: boost-ring 2.2s var(--ease) infinite;
}
@keyframes boost-ring {
  0% { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.9); }
}
.vis-month__evs > li.vis-month__boost {
  position: relative;
  grid-template-columns: 2.3rem minmax(0, 1fr);
  row-gap: .85rem;
  padding: 1rem;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(140deg, var(--fuch) 0%, #8a2bbf 52%, var(--viol) 100%);
  color: #fff;
  box-shadow: 0 26px 44px -26px rgba(77, 47, 214, .65);
}
/* The sheen, passing over every few seconds. */
.vis-month__boost::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .28) 50%, rgba(255, 255, 255, 0) 62%);
  transform: translateX(-120%);
  animation: boost-sheen 4.2s var(--ease) 1s infinite;
  pointer-events: none;
}
@keyframes boost-sheen {
  0% { transform: translateX(-120%); }
  40%, 100% { transform: translateX(120%); }
}
.vis-month__boost > * { position: relative; z-index: 1; }
.vis-month__evs .vis-month__boost .vis-month__d { background: #fff; color: var(--viol); }
.vis-month__boost .vis-month__t b { font-size: 1.02rem; color: #fff; }
.vis-month__boost .vis-month__t i { color: rgba(255, 255, 255, .9); }
.boost { grid-column: 1 / -1; }
.boost__win {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 30px -16px rgba(20, 8, 60, .6);
}
.boost__slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .55s var(--ease), transform .9s var(--glide);
}
.boost__slide.is-on { opacity: 1; transform: none; }
.boost__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.boost__slide--video::after,
.boost__slide--promo::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(rgba(16, 4, 40, 0), rgba(16, 4, 40, .72));
}
.boost__play, .boost__cap, .boost__prog, .boost__badge { z-index: 1; }
.boost__play {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 2.8rem;
  height: 2.8rem;
  margin: -1.4rem 0 0 -1.4rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5);
}
.boost__play::after {
  content: "";
  position: absolute;
  left: 54%;
  top: 50%;
  border-left: .7rem solid var(--viol);
  border-top: .45rem solid transparent;
  border-bottom: .45rem solid transparent;
  transform: translate(-50%, -50%);
}
.boost__cap {
  position: absolute;
  left: .7rem;
  right: .7rem;
  bottom: 1.1rem;
  font-family: var(--display);
  font-size: 1.05rem;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
}
.boost__prog { position: absolute; left: .7rem; right: .7rem; bottom: .55rem; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.boost__prog i { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left center; }
.boost__slide.is-on .boost__prog i { animation: boost-prog 2.2s linear forwards; }
@keyframes boost-prog { to { transform: scaleX(1); } }
.boost__slide--post img { right: auto; width: 46%; }
.boost__post {
  position: absolute;
  left: 46%;
  top: 0;
  right: 0;
  bottom: 0;
  display: grid;
  align-content: center;
  gap: .3rem;
  padding: .7rem .8rem;
  color: var(--ink);
}
.boost__post b { font-size: .78rem; font-weight: 700; }
.boost__post i { font-size: .76rem; font-style: normal; line-height: 1.35; color: var(--ink-2); }
.boost__post em { font-size: .72rem; font-style: normal; font-weight: 600; color: var(--fuch); }
.boost__slide--article,
.boost__slide--email { padding: .9rem 1rem; background: linear-gradient(160deg, #fbf8ff, #fff); color: var(--ink); }
.boost__kick { display: block; margin-bottom: .35rem; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--viol); }
.boost__title { display: block; font-family: var(--display); font-size: 1.08rem; line-height: 1.18; letter-spacing: -.01em; color: var(--ink); }
.boost__lines { display: grid; gap: .35rem; margin-top: .7rem; }
.boost__lines i { display: block; height: 6px; border-radius: 3px; background: #ece6f8; }
.boost__lines i:nth-child(2) { width: 86%; }
.boost__lines i:nth-child(3) { width: 64%; }
.boost__stars { display: block; margin-top: .4rem; font-size: .95rem; letter-spacing: .12em; color: #c98a00; }
.boost__btn { display: inline-block; margin-top: .45rem; padding: .38rem .8rem; border-radius: 999px; background: var(--viol); font-size: .72rem; font-weight: 600; color: #fff; }
.boost__badge {
  position: absolute;
  left: .7rem;
  top: .7rem;
  display: grid;
  place-items: center;
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 50%;
  background: var(--fuch);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  color: #fff;
  transform: rotate(-10deg);
}
.boost__kinds { display: flex; flex-wrap: wrap; gap: .35rem; margin: .75rem 0 0; padding: 0; list-style: none; }
.boost__kinds li {
  padding: .32rem .6rem;
  border-radius: 999px;
  background: rgba(20, 0, 40, .22);
  font-size: .72rem;
  font-weight: 600;
  color: #fff;
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
.boost__kinds li.is-on { background: #fff; color: var(--viol); }

/* ================================================================= Motion
   Only with asks.js running and motion allowed (html.asks-motion). Each
   picture rises and settles as it comes on screen (.is-in), then its own
   parts play: in the CSS here where a transition will do, in asks.js where
   it has to be timed. */
.asks-motion .ask__vis {
  opacity: 0;
  transform: translateY(42px) scale(.95);
  transition: opacity .9s var(--ease), transform 1.3s var(--glide);
}
.asks-motion .ask__vis.is-in { opacity: 1; transform: none; }

/* 1: the laptop draws itself after the phone is up. */
.asks-motion .vis-phone__laptop path { stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.65, 0, .35, 1) .7s; }
.asks-motion .vis-phone__laptop .vis-phone__wire { transition-delay: 1.5s; }
.asks-motion .vis-phone.is-in .vis-phone__laptop path { stroke-dashoffset: 0; }
.asks-motion .vis-phone__k, .asks-motion .vis-phone__stat { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .8s var(--glide); }
.asks-motion .vis-phone.is-in .vis-phone__stat { opacity: 1; transform: none; transition-delay: .35s; }
.asks-motion .vis-phone.is-in .vis-phone__k--1 { opacity: 1; transform: none; transition-delay: .6s; }
.asks-motion .vis-phone.is-in .vis-phone__k--2 { opacity: 1; transform: none; transition-delay: 2.2s; }

/* 2: the result, the marks, the AI answer, stepped by asks.js. */
.asks-motion .vis-search__res,
.asks-motion .vis-search__ai,
.asks-motion .vis-search .vis-note { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .9s var(--glide); }
.asks-motion .vis-search.s-res .vis-search__res,
.asks-motion .vis-search.s-ai .vis-search__ai,
.asks-motion .vis-search.s-ai .vis-note { opacity: 1; transform: none; }
.asks-motion .vis-search__line mark { background-size: 0% 100%; }
.asks-motion .vis-search .vis-tag { opacity: 0; transform: translateY(4px) scale(.9); }
.asks-motion .vis-search__line.is-lit mark { background-size: 100% 100%; }
.asks-motion .vis-search__line.is-lit .vis-tag { opacity: 1; transform: none; }

/* 4: the tiles come up one after another; the line draws. */
.asks-motion .vis-pulse__tile { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .9s var(--glide); }
.asks-motion .vis-pulse.is-in .vis-pulse__tile { opacity: 1; transform: none; }
.asks-motion .vis-pulse.is-in .vis-pulse__tile:nth-child(2) { transition-delay: .12s; }
.asks-motion .vis-pulse.is-in .vis-pulse__tile:nth-child(3) { transition-delay: .24s; }
.asks-motion .vis-pulse__spark path { stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.65, 0, .35, 1) .4s; }
.asks-motion .vis-pulse.is-in .vis-pulse__spark path { stroke-dashoffset: 0; }

/* 5: the marked days and their rows, one after another (asks.js sets
   is-lit on each pair in turn). */
.asks-motion .vis-month__days li[data-ev]:not(.is-lit) { background: none; box-shadow: none; color: var(--ink-2); }
.asks-motion .vis-month__days li[data-ev].is-lit { transform: scale(1.08); }
.asks-motion .vis-month__evs > li { opacity: 0; transform: translateY(14px); }
.asks-motion .vis-month__evs > li.is-lit { opacity: 1; transform: none; }

/* The deed: the key tag swings in on its string, once, and comes to rest. */
.asks-motion .deed__tag { opacity: 0; transform: rotate(-40deg); }
.asks-motion .deed.is-in .deed__tag { animation: deed-swing 1.8s var(--ease) .45s both; }
@keyframes deed-swing {
  0% { opacity: 0; transform: rotate(-40deg); }
  12% { opacity: 1; }
  38% { transform: rotate(14deg); }
  60% { transform: rotate(-9deg); }
  80% { transform: rotate(2deg); }
  100% { opacity: 1; transform: rotate(-4deg); }
}

/* 1: the blocks build in one by one (asks.js sets is-on on each). */
.asks-motion .vis-grow .g:not(.is-on) { opacity: 0; transform: translateY(10px) scale(.94); }

@media (prefers-reduced-motion: reduce) {
  .ask__more, .ask__more-in, .ask__toggle-i, .ask__toggle-i::before, .ask__toggle-i::after,
  .vis-form__step, .vis-form__bar i, .vis-search__line mark { transition: none !important; }
  .vis-grow__dev, .vis-grow .g, .vis-story__scene { transition: none !important; }
  .vis-month__days li[data-ev="1"].is-lit::after, .vis-month__boost::before { animation: none; }
  [data-type].is-typing::after { animation: none; }
}