/* ===========================================================================
   Meetowt — the homepage. 24 September 2026.

   Bold on purpose: the headline as big as a phone allows, the product drawn
   beside it at different depths, a band of words that drifts, a sentence that
   lights as it is read, three promises that stack like cards, and the price
   comparison drawn as bars. On top of styles.css and site.css; everything
   here is new markup, so nothing in those two is fought, only added to.

   EVERY MOVEMENT HAS A STILL VERSION. styles.css already stops every
   animation and transition for somebody whose system asks for less motion,
   and site.js does none of its scroll work for them either; the page they get
   is the finished page, all at once.
   =========================================================================== */

/* ── Shared pieces ────────────────────────────────────────────────────── */

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1rem;
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.kicker::before {
  content: "";
  width: 1.6rem;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
}
.kicker--night {
  color: #fdba8c;
}

.grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* The descenders of "person." sit below the line box; without this the
     gradient's clip cuts them off in Safari. */
  padding-bottom: 0.08em;
}

.head2 {
  max-width: 44rem;
  margin-bottom: clamp(2rem, 5vw, 3.25rem);
}
.head2__title {
  font-size: clamp(2.3rem, 5.2vw, 4.2rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.head2__lede {
  margin: 1.1rem 0 0;
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  color: var(--ink-soft);
  max-width: 36rem;
}

.btn--lg {
  padding: 1rem 1.7rem;
  font-size: 1.02rem;
}
.btn--glass {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: none;
}
.btn--glass:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.hero2 {
  position: relative;
  overflow: clip;
  padding: clamp(2.5rem, 7vw, 5.5rem) 0 clamp(3rem, 7vw, 6rem);
  /* The fixed-height top bar floats over this section; its first line has to
     clear it, which the padding above does. */
}
.hero2__light {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 120%;
  pointer-events: none;
  z-index: 0;
}
.orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(70px);
  opacity: 0.5;
}
.orb--a {
  width: 38rem;
  height: 38rem;
  left: -8rem;
  top: -6rem;
  background: radial-gradient(circle, rgba(251, 124, 86, 0.9), transparent 65%);
  animation: orb-a 24s ease-in-out infinite alternate;
}
.orb--b {
  width: 34rem;
  height: 34rem;
  right: -6rem;
  top: 4rem;
  background: radial-gradient(circle, rgba(179, 155, 251, 0.95), transparent 65%);
  animation: orb-b 28s ease-in-out infinite alternate;
}
.orb--c {
  width: 30rem;
  height: 30rem;
  left: 38%;
  bottom: -4rem;
  background: radial-gradient(circle, rgba(86, 190, 250, 0.7), transparent 65%);
  animation: orb-c 32s ease-in-out infinite alternate;
}
@keyframes orb-a { to { transform: translate(7rem, 5rem) scale(1.1); } }
@keyframes orb-b { to { transform: translate(-6rem, 6rem) scale(0.92); } }
@keyframes orb-c { to { transform: translate(4rem, -6rem) scale(1.08); } }

.hero2__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1.4rem;
  padding: 0.45rem 0.95rem 0.45rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(22, 20, 15, 0.1);
  box-shadow: var(--lift-1);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  backdrop-filter: blur(8px);
}
.pill-tag__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: #047857;
  box-shadow: 0 0 0 4px rgba(4, 120, 87, 0.18);
  animation: breathe 2.4s ease-in-out infinite;
}
@keyframes breathe {
  50% {
    box-shadow: 0 0 0 7px rgba(4, 120, 87, 0.06);
  }
}

.hero2__title {
  font-size: clamp(2.6rem, 5.2vw, 5.4rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.05em;
  text-wrap: balance;
}
/* Each line rises into place once, from where it already is: the words are
   on screen in the very first frame, a few pixels low and nearly opaque, so a
   still capture reads the finished headline. */
.hero2__title .line {
  display: block;
  animation: line-in 0.9s var(--ease-out) both;
}
.hero2__title .line:nth-child(2) { animation-delay: 0.07s; }
.hero2__title .line:nth-child(3) { animation-delay: 0.14s; }
.hero2__title .line:nth-child(4) { animation-delay: 0.21s; }
@keyframes line-in {
  from {
    transform: translateY(0.35em);
    opacity: 0.35;
  }
}
.hero2__lede {
  margin: 1.6rem 0 0;
  max-width: 34rem;
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  color: var(--ink-soft);
}
.hero2__lede strong {
  color: var(--ink);
}
.hero2__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}
.hero2__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.hero2__trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.hero2__trust li::before {
  content: "";
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 70% no-repeat,
    #047857;
}

/* The product, in shapes. aria-hidden in the markup — a picture of the
   product, never a claim of what anybody's inbox holds. */
.stage {
  position: relative;
  height: clamp(22rem, 38vw, 33rem);
}
.stage__layer {
  position: absolute;
  inset: 0;
  will-change: transform;
  transform: translate3d(0, var(--shift, 0px), 0);
}
.win {
  position: absolute;
  left: 4%;
  right: 0;
  top: 8%;
  height: 78%;
  border-radius: 1.4rem;
  background: #fff;
  border: 1px solid rgba(22, 20, 15, 0.1);
  box-shadow: var(--float);
  overflow: hidden;
  animation: stage-in 1.1s var(--ease-out) both;
}
@keyframes stage-in {
  from {
    transform: translateY(2rem) rotate(-1.5deg);
    opacity: 0.4;
  }
}
.win__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 2.3rem;
  padding: 0 0.9rem;
  background: #f6f2ea;
  border-bottom: 1px solid rgba(22, 20, 15, 0.07);
}
.win__dots {
  display: inline-flex;
  gap: 0.35rem;
}
.win__dots i {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 999px;
  background: #e2d9c7;
}
.win__dots i:first-child { background: #f87171; }
.win__dots i:nth-child(2) { background: #fbbf24; }
.win__dots i:nth-child(3) { background: #34d399; }
.win__url {
  flex: 1;
  max-width: 15rem;
  margin: 0 auto;
  padding: 0.2rem 0.8rem;
  border-radius: 999px;
  background: #fff;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: #8a8373;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.win__body {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr) minmax(0, 1.25fr);
  height: calc(100% - 2.3rem);
}
.win__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 0.9rem 0;
  background: #faf7f0;
  border-right: 1px solid rgba(22, 20, 15, 0.06);
}
.tile {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 0.55rem;
  opacity: 0.9;
}
.tile--mail { background: var(--weak-mail); box-shadow: inset 0 0 0 1.5px rgba(3, 105, 161, 0.25); }
.tile--chat { background: var(--weak-chat); box-shadow: inset 0 0 0 1.5px rgba(109, 40, 217, 0.22); }
.tile--meet { background: var(--weak-meet); box-shadow: inset 0 0 0 1.5px rgba(190, 18, 60, 0.22); }
.tile--plan { background: var(--weak-plan); box-shadow: inset 0 0 0 1.5px rgba(4, 120, 87, 0.22); }
.tile--work { background: var(--weak-work); box-shadow: inset 0 0 0 1.5px rgba(138, 84, 6, 0.22); }
.tile--accent { background: var(--weak-accent); box-shadow: inset 0 0 0 1.5px rgba(194, 65, 12, 0.2); }
.tile.is-on {
  background: var(--hue-mail);
  box-shadow: 0 6px 14px -6px rgba(3, 105, 161, 0.7);
}
.win__list {
  padding: 0.6rem 0.5rem;
  border-right: 1px solid rgba(22, 20, 15, 0.06);
}
.row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.5rem;
  border-radius: 0.8rem;
}
.row.is-on {
  background: #eef5fb;
}
.row span {
  flex: 1;
  display: grid;
  gap: 0.3rem;
}
.row em,
.win__read em {
  display: block;
  height: 0.42rem;
  border-radius: 999px;
  background: #e7e0d2;
}
.row em.s,
.win__read em.s {
  width: 60%;
  background: #efe9dd;
}
.row.is-on em {
  background: #bcd6ea;
}
.av {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  flex-shrink: 0;
}
.av--1 { background: linear-gradient(135deg, #fdba8c, #fb7185); }
.av--2 { background: linear-gradient(135deg, #c4b5fd, #818cf8); }
.av--3 { background: linear-gradient(135deg, #6ee7b7, #34d399); }
.av--4 { background: linear-gradient(135deg, #fde68a, #f59e0b); }
.av--5 { background: linear-gradient(135deg, #93c5fd, #3b82f6); }
.win__read {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.55rem;
  padding: 1.1rem 1rem;
}
.win__read em.h {
  width: 70%;
  height: 0.8rem;
  margin-bottom: 0.4rem;
  background: #d9d0bf;
}
.win__send {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 4.2rem;
  height: 1.6rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #c2410c, #9a3412);
  box-shadow: 0 8px 16px -8px rgba(194, 65, 12, 0.8);
}

.float {
  position: absolute;
  border-radius: 1.2rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(22, 20, 15, 0.08);
  box-shadow: var(--float);
  padding: 0.8rem 0.9rem;
  backdrop-filter: blur(10px);
  animation: bob 7s ease-in-out infinite;
}
.float__label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.55rem;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
}
.dot--chat { background: var(--hue-chat); }
.dot--meet { background: var(--hue-meet); }
.dot--plan { background: var(--hue-plan); }
.dot--work { background: var(--hue-work); }
.live {
  margin-left: auto;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--weak-meet);
  color: var(--hue-meet);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.float--chat {
  left: -3%;
  top: 56%;
  width: 12.5rem;
  animation-delay: -1.5s;
}
.bubble {
  display: block;
  height: 1.55rem;
  border-radius: 0.9rem;
  margin-top: 0.4rem;
}
.bubble--them {
  width: 80%;
  background: #efe9dd;
  border-bottom-left-radius: 0.3rem;
}
.bubble--them.s { width: 55%; }
.bubble--me {
  width: 70%;
  margin-left: auto;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  border-bottom-right-radius: 0.3rem;
}
.float--meet {
  right: -2%;
  top: -2%;
  width: 11.5rem;
  animation-delay: -3s;
}
.faces {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
}
.faces b {
  aspect-ratio: 4 / 3;
  border-radius: 0.6rem;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.55) 0 22%, transparent 23%),
    radial-gradient(ellipse 45% 30% at 50% 95%, rgba(255, 255, 255, 0.45) 0 90%, transparent 91%),
    linear-gradient(135deg, #1f1b16, #3a2f25);
}
.faces b:nth-child(2) { background-color: #2b2130; background-image: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.55) 0 22%, transparent 23%), radial-gradient(ellipse 45% 30% at 50% 95%, rgba(255, 255, 255, 0.45) 0 90%, transparent 91%), linear-gradient(135deg, #2a1f3d, #4c2a73); }
.faces b:nth-child(3) { background-image: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.55) 0 22%, transparent 23%), radial-gradient(ellipse 45% 30% at 50% 95%, rgba(255, 255, 255, 0.45) 0 90%, transparent 91%), linear-gradient(135deg, #0f2a3a, #155e75); }
.faces b:nth-child(4) { background-image: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.55) 0 22%, transparent 23%), radial-gradient(ellipse 45% 30% at 50% 95%, rgba(255, 255, 255, 0.45) 0 90%, transparent 91%), linear-gradient(135deg, #3a1a1f, #9f1239); }
.float--cal {
  right: 4%;
  bottom: -4%;
  width: 11rem;
  animation-delay: -4.5s;
}
.cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
}
.cal i {
  aspect-ratio: 1;
  border-radius: 0.3rem;
  background: #f1ece2;
}
.cal i.on {
  background: var(--hue-plan);
  box-shadow: 0 4px 10px -4px rgba(4, 120, 87, 0.8);
}
.cal i.ev {
  background: var(--weak-plan);
  box-shadow: inset 0 0 0 1.5px rgba(4, 120, 87, 0.45);
}
.float--leave {
  left: 30%;
  bottom: -9%;
  width: 9.5rem;
  animation-delay: -2.2s;
}
.float__big {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 2.1rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--hue-work);
}
.float__big small {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-soft);
}
@keyframes bob {
  50% {
    transform: translateY(-9px);
  }
}

/* ── The drifting band ────────────────────────────────────────────────── */

.band {
  position: relative;
  overflow: hidden;
  padding: 1.4rem 0;
  background: var(--night);
  color: var(--on-night);
  transform: rotate(-1.2deg) scale(1.02);
  margin: 1rem 0 0;
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.5);
}
.band__track {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  width: max-content;
  white-space: nowrap;
  will-change: transform;
  transform: translate3d(var(--drift, 0px), 0, 0);
  /* Without the script the band still moves, slowly, on its own. */
  animation: band 60s linear infinite;
}
.js-motion .band__track {
  animation: none;
}
@keyframes band {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}
.band__track span {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.8rem, 4.6vw, 3.4rem);
  letter-spacing: -0.03em;
  line-height: 1;
}
.band__track span.o {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(244, 241, 234, 0.75);
}
.band__track i {
  font-style: normal;
  font-size: 1.4rem;
  background: var(--grad-soft);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── The customer strip, rounder ──────────────────────────────────────── */

.customers {
  background: transparent;
  border: 0;
  padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(1rem, 3vw, 2rem);
}
.customers__lede {
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
}
/* Each name on a plate of its own — the turn in customers.js still happens
   on the face inside, and the plate stays still around it. */
.customers .customer {
  height: 5.2rem;
  border-radius: var(--r);
  background: var(--raised);
  border: 1px solid rgba(22, 20, 15, 0.08);
  box-shadow: var(--lift-1);
  padding: 0 1rem;
}
.customers .customer--invite {
  background: transparent;
  border-style: dashed;
  border-color: rgba(22, 20, 15, 0.22);
  box-shadow: none;
}
.customers .customer__face {
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.customers .customer--invite .customer__face {
  color: var(--ink-soft);
  font-weight: 600;
}
.customers__stop {
  border-radius: 999px;
  padding: 0.45rem 1rem;
  font-family: var(--body);
  font-weight: 600;
  letter-spacing: 0.04em;
  border-color: rgba(22, 20, 15, 0.2);
}

/* ── What it is: the bento ────────────────────────────────────────────── */

.what2 {
  padding-top: clamp(3rem, 6vw, 5rem);
}
.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.feat {
  --tone: var(--hue-accent);
  --tone-weak: var(--weak-accent);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.6rem 1.7rem;
  border-radius: var(--r-lg);
  background: var(--raised);
  border: 1px solid rgba(22, 20, 15, 0.08);
  box-shadow: var(--lift-1);
  transition:
    transform 0.4s var(--ease-out),
    box-shadow 0.4s var(--ease-out),
    opacity 0.9s var(--ease-out);
}
.feat::after {
  /* The card's own colour, as light in a corner. */
  content: "";
  position: absolute;
  width: 16rem;
  height: 16rem;
  right: -6rem;
  top: -6rem;
  border-radius: 999px;
  background: radial-gradient(circle, var(--tone-weak), transparent 70%);
  opacity: 0.9;
  pointer-events: none;
  transition: transform 0.6s var(--ease-out);
}
.feat:hover {
  transform: translateY(-4px);
  box-shadow: var(--float);
}
.feat:hover::after {
  transform: scale(1.25);
}
.feat--mail { --tone: var(--hue-mail); --tone-weak: var(--weak-mail); }
.feat--chat { --tone: var(--hue-chat); --tone-weak: var(--weak-chat); }
.feat--meet { --tone: var(--hue-meet); --tone-weak: var(--weak-meet); }
.feat--plan { --tone: var(--hue-plan); --tone-weak: var(--weak-plan); }
.feat--work { --tone: var(--hue-work); --tone-weak: var(--weak-work); }
.feat--wide {
  grid-column: span 2;
}
/* The whole width of the bento, whatever its columns: a card that sits under
   the last full row without leaving a hole beside it. */
.feat--full {
  grid-column: 1 / -1;
}
.feat--tall {
  grid-row: span 2;
}
.feat__icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.2rem;
  border-radius: 0.95rem;
  color: #fff;
  background: var(--tone);
  box-shadow: 0 10px 20px -10px var(--tone);
}
.feat__icon svg {
  width: 1.45rem;
  height: 1.45rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feat h3 {
  position: relative;
  z-index: 1;
  font-size: clamp(1.25rem, 1.7vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 0.5rem;
}
.feat p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.99rem;
}
/* A "More about…" link inside a card. With nothing set it was the browser's own
   blue with its underline, the one thing on the page in nobody's palette. */
.feat p a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
  transition: text-decoration-color 0.2s;
}
.feat p a:hover {
  text-decoration-color: currentColor;
}
.feat__art {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: 1.5rem;
}
.feat__art--mail {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.env {
  width: 4.4rem;
  height: 3.15rem;
  flex-shrink: 0;
  fill: var(--weak-mail);
  stroke: var(--hue-mail);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 10px 14px rgba(3, 105, 161, 0.25));
}
.addr {
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid rgba(22, 20, 15, 0.08);
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--ink);
}
.feat__art--clock {
  display: flex;
  justify-content: center;
  padding-top: 2rem;
}
.dial {
  position: relative;
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 999px;
  background:
    radial-gradient(circle, #fff 0 56%, transparent 57%),
    conic-gradient(var(--hue-work) 0 62%, var(--weak-work) 62% 100%);
  box-shadow: 0 16px 32px -18px rgba(138, 84, 6, 0.8);
}
.hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 3px;
  border-radius: 3px;
  background: var(--ink);
  transform-origin: 50% 100%;
}
.hand.h {
  height: 1.5rem;
  transform: translateX(-50%) rotate(-50deg);
}
.hand.m {
  height: 2.3rem;
  transform: translateX(-50%) rotate(40deg);
  animation: tick 12s linear infinite;
}
@keyframes tick {
  to {
    transform: translateX(-50%) rotate(400deg);
  }
}
.feat__art--import {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}
.feat__art--import .from,
.feat__art--import .to {
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
}
.feat__art--import .from {
  background: var(--paper);
  border: 1px solid rgba(22, 20, 15, 0.1);
  color: var(--ink-soft);
}
.feat__art--import .to {
  color: #fff;
  background: linear-gradient(135deg, #c2410c, #be123c 55%, #6d28d9);
}
.flow {
  display: inline-flex;
  gap: 0.35rem;
}
.flow i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--hue-mail);
  animation: flow 1.4s ease-in-out infinite;
}
.flow i:nth-child(2) { animation-delay: 0.18s; }
.flow i:nth-child(3) { animation-delay: 0.36s; }
@keyframes flow {
  0%, 100% { opacity: 0.25; transform: translateX(-2px); }
  50% { opacity: 1; transform: translateX(2px); }
}

/* ── The lit sentence ─────────────────────────────────────────────────── */

.statement {
  padding: clamp(4rem, 12vw, 9rem) 0;
}
.statement__text {
  margin: 0 auto;
  max-width: 62rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 5.6vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.045em;
  text-align: center;
  text-wrap: balance;
}
.statement__text .w {
  opacity: var(--lit, 1);
  transition: opacity 0.35s ease, color 0.35s ease;
}
.js-motion .statement__text .w {
  --lit: 0.14;
}
.js-motion .statement__text .w.is-lit {
  --lit: 1;
}
.statement__text .w.hot {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── New ──────────────────────────────────────────────────────────────── */

.new2 .specs li {
  background: var(--raised);
  border: 1px solid rgba(22, 20, 15, 0.08);
  border-radius: var(--r);
  padding: 1.2rem 1.4rem;
  margin-bottom: 0.75rem;
}

/* ── Why: three stacking cards on the dark ground ─────────────────────── */

.why2 {
  position: relative;
  background: var(--night);
  color: var(--on-night);
  padding: clamp(4.5rem, 10vw, 8rem) 0;
  overflow: clip;
}
.why2::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40rem 26rem at 0% 0%, rgba(194, 65, 12, 0.25), transparent 70%),
    radial-gradient(36rem 26rem at 100% 100%, rgba(124, 58, 237, 0.22), transparent 70%);
  pointer-events: none;
}
.why2__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.why2__intro {
  position: sticky;
  top: 7rem;
}
.why2__title {
  font-size: clamp(2.3rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: #fff;
  text-wrap: balance;
}
.why2__lede {
  margin: 1.2rem 0 0;
  color: var(--on-night-soft);
  font-size: 1.1rem;
  max-width: 26rem;
}
.why2__stack {
  display: grid;
  gap: 1.5rem;
}
.why2__card {
  position: sticky;
  top: calc(7rem + var(--n) * 1.4rem);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, #221e19, #17140f);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 -12px 40px -20px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  min-height: 15rem;
}
.why2__card:nth-child(2) {
  background: linear-gradient(160deg, #2a1d27, #17130f);
}
.why2__card:nth-child(3) {
  background: linear-gradient(160deg, #1d2130, #13130f);
}
.why2__num {
  display: inline-block;
  margin-bottom: 1.4rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: 3rem;
  line-height: 1;
  background: var(--grad-soft);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.why2__card h3 {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 0.7rem;
}
.why2__card p {
  margin: 0;
  color: var(--on-night-soft);
  font-size: 1.02rem;
}

/* ── Pricing ──────────────────────────────────────────────────────────── */

.price2 {
  padding: clamp(4.5rem, 9vw, 7rem) 0 clamp(2rem, 4vw, 3rem);
}
.price2__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.price2 .tiers {
  margin: 0;
}
.price2 .tiers--one {
  max-width: none;
  display: block;
}
/* The card gets a ring of the brand's light: the one thing on the page that
   is genuinely above the ground. Drawn as a gradient BORDER — two
   backgrounds, one clipped to the padding and one to the border — rather
   than a pseudo-element behind the card: a negative z-index inside the card's
   own stacking context paints over its ground, which is how the first try
   filled the whole card with the gradient. */
.price2 .tier--pick {
  border: 2px solid transparent !important;
  background:
    linear-gradient(var(--raised), var(--raised)) padding-box,
    var(--grad) border-box !important;
}
.price2 .pricing__honest {
  margin: 1.8rem 0;
  padding: 1.3rem 1.4rem;
  border-radius: var(--r);
  background: var(--raised);
  border: 1px solid rgba(22, 20, 15, 0.08);
  max-width: none;
}
.price2 .addon-band {
  margin: 0;
  max-width: none;
}
.price2__small {
  margin-top: 1.5rem;
}
.price2__small .fineprint {
  max-width: 48rem;
  margin: 0.8rem 0 0;
  text-align: left;
}

/* ── The comparison, drawn ────────────────────────────────────────────── */

.compare2 {
  background: var(--paper-deep);
}
.compare2 .sums {
  border-radius: var(--r-lg);
  box-shadow: var(--lift-1);
}
.sums__row {
  position: relative;
  isolation: isolate;
}
/* Each row's total as a bar behind it, growing from nothing as the rows come
   into view. The number is still the thing read — the bar is the same number
   drawn, so the eye has the size of the difference before the digits. */
.sums__bar {
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  z-index: -1;
  width: var(--w, 0%);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(22, 20, 15, 0.07), rgba(22, 20, 15, 0.12));
  transform-origin: 0 50%;
  transition: transform 1.2s var(--ease-out);
}
.sums__row--ours .sums__bar {
  background: var(--grad);
  opacity: 0.35;
}
.js-motion [data-bars] .sums__bar {
  transform: scaleX(0);
}
.js-motion [data-bars].is-in .sums__bar {
  transform: scaleX(1);
}
.js-motion [data-bars].is-in .sums__row:nth-child(2) .sums__bar { transition-delay: 0.08s; }
.js-motion [data-bars].is-in .sums__row:nth-child(3) .sums__bar { transition-delay: 0.16s; }
.js-motion [data-bars].is-in .sums__row:nth-child(4) .sums__bar { transition-delay: 0.24s; }
.js-motion [data-bars].is-in .sums__row:nth-child(5) .sums__bar { transition-delay: 0.32s; }
.js-motion [data-bars].is-in .sums__row:nth-child(6) .sums__bar { transition-delay: 0.4s; }
.js-motion [data-bars].is-in .sums__row:nth-child(7) .sums__bar { transition-delay: 0.48s; }
.js-motion [data-bars].is-in .sums__row:nth-child(8) .sums__bar { transition-delay: 0.56s; }
.compare2 .cmp__wrap {
  border-radius: var(--r-lg);
  box-shadow: var(--lift-1);
}
.compare2 .coming {
  margin-top: 2rem;
}

/* ── Questions: open-and-close cards ──────────────────────────────────── */

.faq2__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.faq2__head {
  position: sticky;
  top: 7rem;
}
.faq2__head a {
  color: var(--accent);
  font-weight: 600;
}
.faq2 .qa-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
}
/* styles.css draws a rule before each question for the old flat list; the
   cards carry their own edge, and the rule pushed the words off the left. */
.faq2 .qa__q::before {
  display: none;
}
.faq2 .qa {
  margin: 0;
  padding: 0;
  border: 1px solid rgba(22, 20, 15, 0.09);
  border-radius: var(--r);
  background: var(--raised);
  box-shadow: var(--lift-1);
  overflow: hidden;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.faq2 .qa[open] {
  border-color: rgba(194, 65, 12, 0.35);
  box-shadow: var(--lift-2);
}
.faq2 .qa__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.6rem;
  padding: 1rem 1.2rem 1rem 1.4rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.faq2 .qa__q::-webkit-details-marker {
  display: none;
}
.faq2 .qa__q::after {
  content: "";
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316140f' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 6v12 M6 12h12'/%3E%3C/svg%3E") center / 55% no-repeat,
    var(--paper);
  transition: transform 0.35s var(--ease-out), background-color 0.2s ease;
}
.faq2 .qa[open] .qa__q::after {
  transform: rotate(135deg);
  background-color: #fbe3d6;
}
.faq2 .qa__q:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--r);
}
.faq2 .qa__a {
  margin: 0;
  padding: 0 1.4rem 1.3rem;
  color: var(--ink-soft);
  max-width: none;
}

/* ── The close ────────────────────────────────────────────────────────── */

.close2 {
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 7rem);
}
.close2__card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 5vw, 4rem);
  border-radius: var(--r-xl);
  background: var(--night);
  color: #fff;
  text-align: center;
}
.close2__light {
  position: absolute;
  inset: -40%;
  z-index: -1;
  background: conic-gradient(from 0deg at 50% 50%, #c2410c, #e11d48, #7c3aed, #0369a1, #047857, #c2410c);
  filter: blur(80px);
  opacity: 0.55;
  animation: spin 18s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.close2 h2 {
  font-size: clamp(2.6rem, 7vw, 5.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  color: #fff;
  text-wrap: balance;
}
.close2 p {
  margin: 1.2rem auto 2.2rem;
  max-width: 30rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.15rem;
}
.close2__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
}

/* ── Narrower screens ─────────────────────────────────────────────────── */

@media (max-width: 62rem) {
  .hero2__grid,
  .price2__grid,
  .faq2__grid,
  .why2__grid {
    grid-template-columns: 1fr;
  }
  .stage {
    height: 26rem;
    max-width: 38rem;
  }
  .why2__intro,
  .faq2__head {
    position: static;
  }
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .feat--tall {
    grid-row: auto;
  }
}
@media (max-width: 40rem) {
  .bento {
    grid-template-columns: 1fr;
  }
  .feat--wide {
    grid-column: auto;
  }
  .stage {
    height: 21rem;
  }
  /* NO DEPTH ON A PHONE. Here the drawing sits UNDER the words rather than
     beside them, and layers that rise faster than the page ride up over the
     text above. site.js leaves them alone at this width as well. */
  .stage__layer {
    transform: none;
  }
  .win__body {
    grid-template-columns: 2.8rem minmax(0, 1fr);
  }
  .win__read {
    display: none;
  }
  .float--chat {
    left: -1%;
    top: 58%;
    width: 10.5rem;
  }
  .float--meet {
    width: 9.5rem;
  }
  .float--cal {
    width: 9rem;
    right: 0;
  }
  .float--leave {
    display: none;
  }
  /* A card that sticks at the top of a phone covers the next one's words
     for as long as it takes to scroll past; on a phone they are simply a
     column. */
  .why2__card {
    position: relative;
    top: auto;
    min-height: 0;
  }
  .hero2__cta .btn {
    width: 100%;
  }
  .band {
    transform: rotate(-1.5deg) scale(1.04);
  }
}

/* ── The jobs link under the hero's buttons ──────────────────────────────
   A link, not a third button: the company path is the one the page leads
   with. 44px tall all the same, because it is the whole of somebody's reason
   for being here if they came looking for work. */
.hero2__jobs {
  margin: 1rem 0 0;
  color: var(--ink-soft);
  font-size: 0.98rem;
}
.hero2__jobs a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.75rem;
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ── Hiring: two cards, one door each ────────────────────────────────── */
.hire2__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.hire2__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border-radius: var(--r-lg);
  background: var(--raised);
  border: 1px solid rgba(22, 20, 15, 0.08);
  box-shadow: var(--lift-1);
}
.hire2__card--company {
  background: linear-gradient(160deg, var(--weak-plan), var(--raised) 60%);
}
.hire2__card--people {
  background: linear-gradient(160deg, var(--weak-accent), var(--raised) 60%);
}
.hire2__tag {
  margin: 0 0 0.6rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hire2__card h3 {
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 0.9rem;
}
.hire2__list {
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
  color: var(--ink-soft);
}
.hire2__list li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.45rem;
}
.hire2__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--grad);
}
.hire2__card .btn {
  margin-top: auto;
}
@media (max-width: 40rem) {
  .hire2__grid {
    grid-template-columns: 1fr;
  }
  .hire2__card .btn {
    width: 100%;
  }
}

/* ── The hero film, and a card for the person half (26 September 2026) ──

   The film replaces the drawn mail window: four seconds of a real room, a
   team at the long table and one person on her own at the window, with the
   product's cards floating over it. Its poster is its own first frame, so the
   page is whole before any video arrives; site.js fetches the film only on a
   wide screen, with motion allowed and data saving off, and cross-fades it
   back to that first frame instead of jumping when it ends. */
.film {
  position: absolute;
  left: 4%;
  right: 0;
  top: 8%;
  height: 78%;
  border-radius: 1.4rem;
  overflow: hidden;
  background: #e9e1d2;
  border: 1px solid rgba(22, 20, 15, 0.1);
  box-shadow: var(--float);
  animation: stage-in 1.1s var(--ease-out) both;
}
.film__poster,
.film__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}
.film__video {
  opacity: 0;
  transition: opacity 0.9s ease;
}
.film.is-playing .film__video {
  opacity: 1;
}
.film.is-resting .film__video {
  opacity: 0;
}
/* A warm wash at the foot, so the floating cards sit on the picture rather
   than on a hole in it. */
.film::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(244, 240, 230, 0) 55%, rgba(244, 240, 230, 0.3));
  pointer-events: none;
}

.float--you {
  left: -5%;
  top: 1%;
  width: 11rem;
  animation-delay: -5.2s;
}
.dot--you { background: var(--accent); }
.you {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.you__av {
  flex: none;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.6) 0 22%, transparent 23%),
    radial-gradient(ellipse 45% 30% at 50% 96%, rgba(255, 255, 255, 0.5) 0 90%, transparent 91%),
    linear-gradient(135deg, #e8814f, #a83a17);
}
.you span {
  flex: 1;
  display: grid;
  gap: 0.3rem;
}
.you em {
  display: block;
  height: 0.5rem;
  border-radius: 999px;
  background: #ece5d7;
}
.you em.s { width: 60%; }
.you__chip {
  display: inline-block;
  margin: 0.6rem 0 0;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  background: var(--weak-accent);
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ── Two ways in ─────────────────────────────────────────────────────────
   The company and the person, side by side under the hero. The cards are the
   jobs section's cards with a picture on top that bleeds to their edges and
   drifts, very slowly. */
.ways2__card {
  --pad: clamp(1.5rem, 3vw, 2.2rem);
  padding: var(--pad);
  overflow: hidden;
}
.ways2__pic {
  align-self: stretch;
  margin: calc(var(--pad) * -1) calc(var(--pad) * -1) 1.4rem;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.ways2__pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 40%;
  animation: ways-drift 16s ease-in-out infinite alternate;
}
/* The second picture drifts out of step with the first. */
.hire2__card--people.ways2__card .ways2__pic img {
  transform-origin: 62% 30%;
  animation-delay: -8s;
}
@keyframes ways-drift {
  from { transform: scale(1.03); }
  to { transform: scale(1.12) translate3d(-1.5%, -1%, 0); }
}
.ways2__price {
  margin: -0.6rem 0 1.4rem;
  font-weight: 700;
  color: var(--ink);
}

/* ── The close, over the end of a working day ─────────────────────────── */
.close2__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.close2__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 55%;
  transform-origin: 25% 45%;
  animation: close-drift 26s ease-in-out infinite alternate;
}
.close2__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 14, 11, 0.6), rgba(16, 14, 11, 0.8));
}
@keyframes close-drift {
  from { transform: scale(1.04); }
  to { transform: scale(1.14) translate3d(2%, -1.5%, 0); }
}
.close2__light {
  opacity: 0.32;
}
.close2 .close2__in {
  margin: 1.4rem auto 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.75);
}
.close2 .close2__in a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 40rem) {
  .float--you {
    left: -1%;
    top: 0;
    width: 9.5rem;
  }
  .film {
    left: 0;
  }
}

/* Still, for anybody who asked for less motion. site.js never fetches the
   film for them either; the poster is the whole of it. */
@media (prefers-reduced-motion: reduce) {
  .ways2__pic img,
  .close2__photo img {
    animation: none;
    transform: none;
  }
  .film__video {
    display: none;
  }
}

/* ── The mark arriving, once, in the top bar (the House, 5 October) ───────
   Every keyframe ENDS on the resting mark and the base styles ARE the resting
   mark, so a crawler, a screenshot or reduced motion gets the finished logo.
   `both` holds the start only for the moment of each piece's delay. */
.wordmark__mark--live {
  background-image: none;
  display: inline-flex;
}
.wordmark__mark--live svg {
  width: 100%;
  height: 100%;
  display: block;
}
.mk-dot,
.mk-ring {
  transform-box: fill-box;
  transform-origin: center;
}
/* The House (5 October): the room draws itself, then the person steps in. */
.mk-l {
  stroke-dasharray: 1 1;
  animation: mk-join 0.8s ease-in-out 0.15s both;
}
.mk-dot {
  animation: mk-on 0.5s cubic-bezier(0.2, 0.8, 0.3, 1.35) 0.9s both;
}
.mk-ring {
  opacity: 0;
  animation: mk-ring 0.9s ease-out 1.2s both;
}
@keyframes mk-on {
  from { transform: scale(0.2); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
@keyframes mk-join {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}
@keyframes mk-ring {
  0%   { transform: scale(1);   opacity: 0.9; }
  100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-l, .mk-dot, .mk-ring { animation: none; }
}

/* ── The feature cards, made calmer and more alive (11 October 2026) ──────
   Mina: "I don't like this view, make it more modern". Twenty-two cards of a
   paragraph each read as a wall of text. Now: on a device with a pointer each
   card shows three lines and opens the rest when you point at it or tab into
   it; a phone (no hover) still shows everything, because there is nothing to
   point with. A soft light follows the pointer across the card (--mx/--my,
   set by the script at the foot of index.html), the edge lights in the card's
   own colour, the icon tips and the "More" link is a pill that slides its
   arrow. Reduced motion: no movement, the light stays where it is. */
.feat {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--raised), var(--raised)) padding-box,
    linear-gradient(150deg,
      color-mix(in srgb, var(--tone) 28%, transparent),
      rgba(22, 20, 15, 0.06) 40%,
      rgba(22, 20, 15, 0.04) 70%,
      color-mix(in srgb, var(--tone) 18%, transparent)) border-box;
  box-shadow: 0 1px 2px rgba(22, 20, 15, 0.04), 0 12px 32px -22px rgba(22, 20, 15, 0.35);
}
.feat::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(22rem circle at var(--mx, 85%) var(--my, 0%),
    color-mix(in srgb, var(--tone) 14%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
  pointer-events: none;
}
.feat:hover::before,
.feat:focus-within::before {
  opacity: 1;
}
.feat:hover {
  transform: translateY(-6px);
  box-shadow: 0 2px 4px rgba(22, 20, 15, 0.04), 0 28px 50px -26px color-mix(in srgb, var(--tone) 55%, rgba(22, 20, 15, 0.5));
}
.feat__icon {
  border-radius: 1rem;
  background: linear-gradient(145deg, color-mix(in srgb, var(--tone) 78%, #fff), var(--tone) 55%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 12px 22px -12px var(--tone);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.feat:hover .feat__icon {
  transform: rotate(-8deg) scale(1.08);
}
.feat h3 {
  line-height: 1.2;
  text-wrap: balance;
}
.feat p {
  line-height: 1.6;
}
@media (hover: hover) {
  .feat p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }
  .feat:hover p,
  .feat:focus-within p {
    -webkit-line-clamp: unset;
    line-clamp: unset;
  }
}
.feat__more {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  margin-top: 1.1rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--tone);
  background: color-mix(in srgb, var(--tone) 10%, transparent);
  text-decoration: none;
  transition: background-color 0.25s, color 0.25s;
}
.feat__more span {
  display: inline-block;
  margin-left: 0.3em;
  transition: transform 0.3s var(--ease-out);
}
.feat__more:hover,
.feat__more:focus-visible {
  color: #fff;
  background: var(--tone);
}
.feat__more:hover span {
  transform: translateX(4px);
}
/* "New", as a glowing pill with a live dot — on the cards and wherever else. */
.new {
  position: relative;
  padding: 0.12rem 0.55rem 0.12rem 1.15rem;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #f59e0b));
  box-shadow: 0 6px 14px -8px var(--accent);
}
.new::before {
  content: "";
  position: absolute;
  left: 0.45rem;
  top: 50%;
  width: 0.38rem;
  height: 0.38rem;
  margin-top: -0.19rem;
  border-radius: 999px;
  background: #fff;
  animation: new-pulse 1.8s ease-in-out infinite;
}
@keyframes new-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
  50% { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .feat, .feat__icon, .feat__more span { transition: none; }
  .feat:hover { transform: none; }
  .feat:hover .feat__icon { transform: none; }
  .new::before { animation: none; }
}

/* ── The explorer (12 October 2026) ───────────────────────────────────────
   Mina, of the grid above: "I don't like this view, find a modern way with
   animations". Everything here applies only once site.js has added .is-explorer
   to the section, so without the script the cards are shown whole as before.
   Short even cards (icon, title, a plus that turns), chips that filter by part
   of the company with a sliding light behind the chosen one, cards that move
   to their new places rather than jump, and a panel with the whole story that
   grows out of the card you pressed and steps to the next with the arrows. */
.xchips[hidden] { display: none; }
.xchips {
  position: relative;
  display: flex;
  gap: 0.35rem;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 1.8rem;
  padding: 0.35rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(22, 20, 15, 0.08);
  box-shadow: 0 10px 30px -22px rgba(22, 20, 15, 0.45);
  backdrop-filter: blur(10px);
  overflow-x: auto;
  scrollbar-width: none;
}
.xchips::-webkit-scrollbar { display: none; }
.xchips__glow {
  position: absolute;
  top: 0.35rem;
  bottom: 0.35rem;
  left: 0;
  width: 0;
  border-radius: 999px;
  background: var(--ink);
  box-shadow: 0 8px 18px -10px rgba(22, 20, 15, 0.6);
  transition: transform 0.45s cubic-bezier(0.34, 1.3, 0.64, 1), width 0.45s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.xchip {
  position: relative;
  z-index: 1;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.6rem;
  padding: 0 1.05rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.3s;
}
.xchip b {
  font-weight: 600;
  font-size: 0.75rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: rgba(22, 20, 15, 0.07);
  transition: background-color 0.3s;
}
.xchip:hover { color: var(--ink); }
.xchip[aria-pressed="true"] { color: var(--paper); }
.xchip[aria-pressed="true"] b { background: rgba(255, 255, 255, 0.18); }
.xchip--new b { background: var(--accent); color: #fff; }
.xchip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.is-explorer .bento {
  grid-auto-flow: dense;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
}
.is-explorer .feat--tall { grid-row: auto; }
.is-explorer .feat--wide { grid-column: span 2; }
.is-explorer .feat[hidden] { display: none; }
.is-explorer .feat {
  min-height: 14rem;
  padding: 1.35rem 1.35rem 1.4rem;
  cursor: pointer;
  outline: none;
}
.is-explorer .feat > p,
.is-explorer .feat > .feat__more,
.is-explorer .feat__art { display: none; }
.is-explorer .feat--wide .feat__art { display: block; }
.is-explorer .feat h3 {
  font-size: 1.12rem;
  margin: auto 2.4rem 0 0;
}
.is-explorer .feat__icon { margin-bottom: 1rem; }
/* The plus that says there is more, and turns when you point at the card. */
.is-explorer .feat::after {
  content: "+";
  width: 2rem;
  height: 2rem;
  right: 1.1rem;
  top: auto;
  bottom: 1.1rem;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
  color: var(--tone);
  background: color-mix(in srgb, var(--tone) 11%, transparent);
  opacity: 1;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s, color 0.3s;
}
.is-explorer .feat:hover::after,
.is-explorer .feat:focus-visible::after {
  transform: rotate(90deg);
  color: #fff;
  background: var(--tone);
}
.is-explorer .feat:focus-visible {
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--tone);
}
/* On a short card the badge sits on its own line above the title, so a title
   never breaks around it. */
.is-explorer .feat h3 .new { display: table; margin-bottom: 0.45rem; font-size: 0.7rem; }

/* The panel. */
.xsheet {
  width: min(40rem, calc(100vw - 2rem));
  max-height: min(85vh, 46rem);
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.xsheet::backdrop {
  background: rgba(22, 20, 15, 0.42);
  backdrop-filter: blur(6px);
  animation: xfade 0.3s ease-out;
}
.xsheet__card {
  --tone: var(--hue-accent);
  --tone-weak: var(--weak-accent);
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: min(85vh, 46rem);
  overflow: hidden;
  border-radius: 1.6rem;
  background:
    radial-gradient(30rem circle at 100% 0%, var(--tone-weak), transparent 60%),
    var(--raised);
  box-shadow: 0 40px 80px -30px rgba(22, 20, 15, 0.55);
}
.xsheet[open] .xsheet__card { animation: xpop 0.45s cubic-bezier(0.22, 1.2, 0.36, 1); }
.xsheet__body {
  overflow-y: auto;
  padding: 2rem 2rem 1rem;
}
.xsheet__body.is-left { animation: xslide-l 0.35s var(--ease-out); }
.xsheet__body.is-right { animation: xslide-r 0.35s var(--ease-out); }
.xsheet__body .feat__icon { width: 3.4rem; height: 3.4rem; margin-bottom: 1.1rem; }
.xsheet__body h3 {
  font-size: clamp(1.45rem, 3vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 2.5rem 0.9rem 0;
  text-wrap: balance;
}
.xsheet__body p { margin: 0 0 0.8rem; color: var(--ink-soft); font-size: 1.04rem; line-height: 1.65; }
.xsheet__body .feat__art { padding-top: 0.5rem; }
.xsheet__body .feat__more {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.55rem 1rem;
  color: #fff;
  background: var(--tone);
}
.xsheet__close {
  position: absolute;
  z-index: 2;
  top: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 999px;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink);
  background: rgba(22, 20, 15, 0.06);
  cursor: pointer;
  transition: transform 0.3s var(--ease-out), background-color 0.2s;
}
.xsheet__close:hover { transform: rotate(90deg); background: rgba(22, 20, 15, 0.12); }
.xsheet__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.2rem 1.1rem;
  border-top: 1px solid rgba(22, 20, 15, 0.07);
}
.xsheet__count { font-size: 0.85rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.xsheet__step {
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 999px;
  font-size: 1.15rem;
  color: var(--tone);
  background: color-mix(in srgb, var(--tone) 11%, transparent);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, transform 0.2s;
}
.xsheet__step:hover { color: #fff; background: var(--tone); }
.xsheet__step:active { transform: scale(0.92); }

@keyframes xfade { from { opacity: 0; } }
@keyframes xpop { from { opacity: 0; transform: translateY(24px) scale(0.94); } }
@keyframes xslide-l { from { opacity: 0; transform: translateX(-28px); } }
@keyframes xslide-r { from { opacity: 0; transform: translateX(28px); } }
@keyframes xrise { from { transform: translateY(100%); } }

@media (max-width: 64rem) {
  .is-explorer .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 48rem) {
  .is-explorer .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xchips { margin-left: 0; }
}
/* On a phone the cards become rows (icon, title, plus) and the panel rises
   from the bottom of the screen like the phone's own sheets. */
@media (max-width: 40rem) {
  .is-explorer .bento { grid-template-columns: 1fr; gap: 0.6rem; }
  .is-explorer .feat--wide { grid-column: auto; }
  .is-explorer .feat--wide .feat__art { display: none; }
  .is-explorer .feat {
    min-height: 0;
    flex-direction: row;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 3.4rem 0.9rem 0.9rem;
  }
  .is-explorer .feat__icon { flex: none; width: 2.6rem; height: 2.6rem; margin: 0; }
  .is-explorer .feat h3 { margin: 0; font-size: 1.02rem; }
  .is-explorer .feat::after { top: 50%; bottom: auto; margin-top: -1rem; }
  .xsheet { width: 100vw; max-width: 100vw; margin: auto 0 0; }
  .xsheet__card { border-radius: 1.6rem 1.6rem 0 0; max-height: 88vh; }
  .xsheet[open] .xsheet__card { animation: xrise 0.42s cubic-bezier(0.22, 1, 0.36, 1); }
  .xsheet__body { padding: 1.6rem 1.25rem 0.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .xchips__glow, .is-explorer .feat::after, .xsheet__close, .xsheet__step { transition: none; }
  .xsheet[open] .xsheet__card, .xsheet::backdrop, .xsheet__body.is-left, .xsheet__body.is-right { animation: none; }
}

/* ── A small scene on every card (12 October 2026) ────────────────────────
   Mina circled the two cards that had a picture (the address, the mail coming
   across) and said "add pictures or animation like this". Each card now has a
   few made-up pieces of the real screen in its own colour: a chat bubble, a
   ticked list, a signature being written. They come in one after another as
   the card arrives (.is-in, set by site.js), the drawings play again when you
   point at the card, and a handful keep a small live movement — a typing dot,
   a clock hand. Nothing moves for somebody who asked for less motion, and on
   a phone, where the cards are rows, the scenes are left out. */
.mini {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.4rem;
  margin: 0 0 0.9rem;
}
.mini > * { flex: none; }
.mini__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--tone);
  background: color-mix(in srgb, var(--tone) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--tone) 16%, transparent);
}
.mini__pill--solid { color: #fff; background: var(--tone); border-color: transparent; }
.mini__pill--rec { color: #b91c1c; background: #fee2e2; border-color: #fecaca; }
.mini__live {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: currentColor;
  animation: mini-live 1.6s ease-in-out infinite;
}
.mini__face {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--tone) 65%, #fff), var(--tone));
  box-shadow: 0 0 0 2px var(--raised);
}
.mini__face + .mini__face { margin-left: -0.75rem; }
.mini__bubble {
  padding: 0.32rem 0.65rem;
  border-radius: 0.9rem 0.9rem 0.9rem 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink);
  background: #efebe1;
}
.mini__bubble--me { color: #fff; background: var(--tone); border-radius: 0.9rem 0.9rem 0.25rem 0.9rem; }
.mini__typing { display: inline-flex; gap: 0.18rem; padding: 0.45rem 0.55rem; border-radius: 0.9rem; background: #efebe1; }
.mini__typing i { width: 0.3rem; height: 0.3rem; border-radius: 999px; background: var(--ink-faint); animation: mini-bounce 1.2s ease-in-out infinite; }
.mini__typing i:nth-child(2) { animation-delay: 0.15s; }
.mini__typing i:nth-child(3) { animation-delay: 0.3s; }
.mini__week { display: inline-flex; gap: 0.2rem; align-items: flex-end; height: 1.8rem; }
.mini__week i { width: 0.55rem; height: 100%; border-radius: 0.2rem; background: color-mix(in srgb, var(--tone) 14%, #fff); }
.mini__week i.on { background: var(--tone); }
.mini__doc {
  display: inline-flex;
  flex-direction: column;
  gap: 0.22rem;
  width: 2.6rem;
  padding: 0.4rem;
  border-radius: 0.35rem;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--tone) 18%, transparent);
}
.mini__doc i { height: 0.18rem; width: var(--w); border-radius: 999px; background: color-mix(in srgb, var(--tone) 45%, #fff); transform-origin: left; }
.mini__clock {
  position: relative;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 999px;
  border: 2px solid var(--tone);
  background: #fff;
}
.mini__clock i {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 2px;
  height: 0.6rem;
  margin-left: -1px;
  border-radius: 2px;
  background: var(--tone);
  transform-origin: bottom center;
  animation: mini-spin 6s linear infinite;
}
.mini__stack { position: relative; width: 2.2rem; height: 1.8rem; }
.mini__stack i {
  position: absolute;
  inset: 0;
  border-radius: 0.3rem;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--tone) 25%, transparent);
}
.mini__stack i:nth-child(1) { transform: rotate(-9deg) translateX(-3px); }
.mini__stack i:nth-child(2) { transform: rotate(5deg) translateX(3px); }
.mini__stack i:nth-child(3) { background: color-mix(in srgb, var(--tone) 14%, #fff); }
.mini__list { display: inline-flex; flex-direction: column; gap: 0.2rem; }
.mini__tick {
  position: relative;
  width: 3.4rem;
  height: 0.5rem;
  padding-left: 0.75rem;
}
.mini__tick::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 0.15rem;
  border: 1.5px solid var(--tone);
  box-sizing: border-box;
}
.mini__tick.on::before { background: var(--tone); }
.mini__tick::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  top: 0.15rem;
  width: 2.6rem;
  height: 0.2rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tone) 22%, #fff);
}
.mini__phone {
  position: relative;
  width: 1.15rem;
  height: 1.9rem;
  border-radius: 0.3rem;
  border: 2px solid var(--tone);
  background: #fff;
}
.mini__phone i {
  position: absolute;
  top: -0.3rem;
  right: -0.35rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--raised);
  animation: mini-live 1.8s ease-in-out infinite;
}
.mini__stars { display: inline-flex; gap: 0.1rem; }
.mini__stars i {
  width: 0.7rem;
  height: 0.7rem;
  background: #f59e0b;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.mini__switch {
  position: relative;
  width: 2.1rem;
  height: 1.2rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tone) 20%, #fff);
  transition: background-color 0.3s;
}
.mini__switch i {
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(22, 20, 15, 0.3);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mini__switch.on { background: var(--tone); }
.mini__switch.on i { transform: translateX(0.9rem); }
.mini__swap { position: relative; display: inline-grid; min-width: 4.6rem; }
.mini__swap b {
  grid-area: 1 / 1;
  justify-self: start;
  padding: 0.28rem 0.75rem;
  border-radius: 999px;
  font-size: 0.85rem;
  color: #fff;
  background: var(--tone);
  animation: mini-swap 4s ease-in-out infinite;
}
.mini__swap b + b { animation-delay: -2s; }
.mini__toast {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  border-radius: 0.7rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 8px 18px -10px rgba(22, 20, 15, 0.45);
  border: 1px solid rgba(22, 20, 15, 0.06);
}
.mini__toast .mini__live { color: var(--tone); }
.mini__progress { width: 4.5rem; height: 0.45rem; border-radius: 999px; background: color-mix(in srgb, var(--tone) 14%, #fff); overflow: hidden; }
.mini__progress i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--tone); transform-origin: left; }
.mini__stamp {
  padding: 0.15rem 0.5rem;
  border: 2px solid #15803d;
  border-radius: 0.3rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #15803d;
  transform: rotate(-8deg);
}
.mini__drop { position: relative; width: 1.5rem; height: 1.8rem; }
.mini__drop i {
  position: absolute;
  left: 0;
  top: 0;
  font-style: normal;
  font-size: 1rem;
  line-height: 1;
  color: var(--tone);
  animation: mini-drop 2.8s ease-in infinite;
}
.mini__bars { display: inline-flex; align-items: flex-end; gap: 0.2rem; height: 1.9rem; }
.mini__bars i { width: 0.45rem; height: var(--h); border-radius: 0.15rem 0.15rem 0 0; background: var(--tone); transform-origin: bottom; }
.mini__bars i:nth-child(odd) { background: color-mix(in srgb, var(--tone) 55%, #fff); }
.mini__tree { position: relative; width: 2.2rem; height: 1.8rem; }
.mini__tree i { position: absolute; width: 0.55rem; height: 0.55rem; border-radius: 0.15rem; background: var(--tone); }
.mini__tree i:nth-child(1) { left: 0.82rem; top: 0; }
.mini__tree i:nth-child(2) { left: 0; bottom: 0; background: color-mix(in srgb, var(--tone) 55%, #fff); }
.mini__tree i:nth-child(3) { right: 0; bottom: 0; background: color-mix(in srgb, var(--tone) 55%, #fff); }
.mini__tree::before {
  content: "";
  position: absolute;
  left: 0.27rem;
  right: 0.27rem;
  top: 0.55rem;
  height: 0.55rem;
  border: 1.5px solid color-mix(in srgb, var(--tone) 40%, transparent);
  border-bottom: 0;
  border-radius: 0.2rem 0.2rem 0 0;
}
.mini__flow { position: relative; width: 1.8rem; height: 2px; background: color-mix(in srgb, var(--tone) 30%, transparent); }
.mini__flow i {
  position: absolute;
  top: -0.17rem;
  left: 0;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 999px;
  background: var(--tone);
  animation: mini-travel 1.8s ease-in-out infinite;
}
.mini__sign { width: 6.5rem; height: 2.1rem; }
.mini__sign path {
  fill: none;
  stroke: var(--tone);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 260;
}

/* The arrival: each piece of the scene rises in after the one before. */
.is-explorer .feat.is-in .mini > * { animation: mini-in 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) backwards; }
.is-explorer .feat.is-in .mini > :nth-child(1) { animation-delay: 0.15s; }
.is-explorer .feat.is-in .mini > :nth-child(2) { animation-delay: 0.27s; }
.is-explorer .feat.is-in .mini > :nth-child(3) { animation-delay: 0.39s; }
.is-explorer .feat.is-in .mini > :nth-child(4) { animation-delay: 0.51s; }
/* The drawings draw, and draw again when you point at the card. */
.is-explorer .feat.is-in .mini__sign path { animation: mini-write 1.6s 0.3s ease-in-out backwards; }
.is-explorer .feat.is-in:hover .mini__sign path { animation: mini-write2 1.6s ease-in-out; }
.is-explorer .feat.is-in .mini__bars i,
.is-explorer .feat.is-in .mini__progress i,
.is-explorer .feat.is-in .mini__doc i { animation: mini-grow 0.9s 0.35s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.is-explorer .feat.is-in .mini__bars i { transform-origin: bottom; animation-name: mini-rise; }
.is-explorer .feat.is-in .mini__bars i:nth-child(2) { animation-delay: 0.45s; }
.is-explorer .feat.is-in .mini__bars i:nth-child(3) { animation-delay: 0.55s; }
.is-explorer .feat.is-in .mini__bars i:nth-child(4) { animation-delay: 0.65s; }
.is-explorer .feat.is-in .mini__bars i:nth-child(5) { animation-delay: 0.75s; }
.is-explorer .feat.is-in:hover .mini__bars i { animation: mini-rise2 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.is-explorer .feat.is-in:hover .mini__doc i,
.is-explorer .feat.is-in:hover .mini__progress i { animation: mini-grow2 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.is-explorer .feat:hover .mini__switch:not(.on) { background: var(--tone); }
.is-explorer .feat:hover .mini__switch:not(.on) i { transform: translateX(0.9rem); }
.is-explorer .feat:hover .mini__stamp { animation: mini-stamp 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes mini-in { from { opacity: 0; transform: translateY(10px) scale(0.85); } }
@keyframes mini-live { 50% { opacity: 0.35; transform: scale(0.75); } }
@keyframes mini-bounce { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-3px); } }
@keyframes mini-spin { to { transform: rotate(360deg); } }
@keyframes mini-swap { 0%, 40% { opacity: 1; transform: none; } 50%, 90% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 1; transform: none; } }
@keyframes mini-drop { 0% { transform: translateY(-4px); opacity: 0; } 20% { opacity: 1; } 70% { transform: translateY(14px); opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } }
@keyframes mini-travel { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 0.38rem); opacity: 0; } }
@keyframes mini-write { from { stroke-dashoffset: 260; } to { stroke-dashoffset: 0; } }
@keyframes mini-write2 { from { stroke-dashoffset: 260; } to { stroke-dashoffset: 0; } }
@keyframes mini-grow { from { transform: scaleX(0); } }
@keyframes mini-grow2 { from { transform: scaleX(0); } }
@keyframes mini-rise { from { transform: scaleY(0); } }
@keyframes mini-rise2 { from { transform: scaleY(0); } }
@keyframes mini-stamp { from { transform: rotate(-8deg) scale(1.6); opacity: 0; } }

@media (max-width: 40rem) {
  .is-explorer .mini { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mini *, .mini *::before, .mini *::after { animation: none !important; transition: none !important; }
}

/* ── Four sizes, not one (12 October 2026) ────────────────────────────────
   Mina: "don't make them just blocks sitting to each other, change the size
   and randomize them". The explorer's grid now has rows of a fixed height and
   four kinds of card: big (two by two: the scene drawn large and the whole
   description), tall (one by two: the description under the scene), wide (two
   by one: the description beside the title) and small (the rest). The sizes are
   set in index.html per card and the grid packs them densely, so a chip that
   filters the list still leaves no holes worth noticing. On a phone every card
   is a row again. */
.is-explorer .bento {
  grid-auto-rows: minmax(13.5rem, auto);
}
.is-explorer .feat--big { grid-column: span 2; grid-row: span 2; }
.is-explorer .feat--tall { grid-column: span 1; grid-row: span 2; }
.is-explorer .feat--wide { grid-column: span 2; grid-row: span 1; }
.is-explorer .feat--big > p,
.is-explorer .feat--tall > p,
.is-explorer .feat--wide > p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative;
  z-index: 1;
  margin-top: 0.6rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.is-explorer .feat--big > p { -webkit-line-clamp: 5; line-clamp: 5; font-size: 1rem; }
.is-explorer .feat--tall > p { -webkit-line-clamp: 7; line-clamp: 7; }
.is-explorer .feat--wide > p { -webkit-line-clamp: 2; line-clamp: 2; max-width: 34rem; padding-right: 3rem; }
.is-explorer .feat--big > p, .is-explorer .feat--tall > p { padding-right: 2.6rem; }
.is-explorer .feat--big h3,
.is-explorer .feat--tall h3,
.is-explorer .feat--wide h3 { margin-top: auto; }
.is-explorer .feat--big h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); letter-spacing: -0.03em; }
.is-explorer .feat--tall h3 { font-size: 1.25rem; }
/* The big cards' scene, drawn larger, and their own picture back when they have one. */
.is-explorer .feat--big .mini { transform: scale(1.25); transform-origin: left top; margin-bottom: 2rem; }
.is-explorer .feat--big .feat__art { display: block; }
.is-explorer .feat--tall .feat__art { display: none; }
.is-explorer .feat--big .feat__icon { width: 3.6rem; height: 3.6rem; }
/* A soft wash of the card's own colour on the larger ones, so the sizes read at a glance. */
.is-explorer .feat--big,
.is-explorer .feat--tall {
  background:
    radial-gradient(28rem circle at 100% 0%, color-mix(in srgb, var(--tone) 14%, transparent), transparent 65%) padding-box,
    linear-gradient(var(--raised), var(--raised)) padding-box,
    linear-gradient(150deg, color-mix(in srgb, var(--tone) 34%, transparent), rgba(22, 20, 15, 0.06) 45%, color-mix(in srgb, var(--tone) 22%, transparent)) border-box;
}
@media (max-width: 64rem) {
  .is-explorer .feat--big { grid-column: span 2; }
}
@media (max-width: 48rem) {
  .is-explorer .feat--big, .is-explorer .feat--wide { grid-column: span 2; }
  .is-explorer .feat--tall { grid-row: span 1; }
  .is-explorer .feat--tall > p { -webkit-line-clamp: 3; line-clamp: 3; }
}
@media (max-width: 40rem) {
  .is-explorer .feat--big, .is-explorer .feat--wide, .is-explorer .feat--tall { grid-column: auto; grid-row: auto; }
  .is-explorer .feat--big > p, .is-explorer .feat--tall > p, .is-explorer .feat--wide > p { display: none; }
  .is-explorer .feat--big .mini { transform: none; margin-bottom: 0; }
  .is-explorer .feat--big h3 { font-size: 1.02rem; }
}
/* Without the script the old three-column bento holds: a big card spans two of its columns. */
.feat--big { grid-column: span 2; }

/* ── Phones: a grid of tiles, not a column of empty boxes (13 October 2026) ─
   Mina, with a phone screenshot: "Landing page on phones looks very bad, make
   it cool and modern". The desktop's fixed row height and its big cards were
   reaching the phone: every card a tall empty box, the mail card's title one
   word to a line beside its picture. On a phone now: two columns of compact
   tiles that size to what is in them; the big and wide cards span both
   columns and keep their little scene; the plus sits in the corner. This block
   comes last on purpose, so it wins over everything above at this width. */
@media (max-width: 40rem) {
  .is-explorer .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 0.65rem;
  }
  .is-explorer .feat,
  .is-explorer .feat--tall {
    grid-column: span 1;
    grid-row: auto;
    min-height: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 1rem 1rem 1.05rem;
    border-radius: 1.25rem;
  }
  .is-explorer .feat--big,
  .is-explorer .feat--wide {
    grid-column: span 2;
    grid-row: auto;
  }
  .is-explorer .feat__icon {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 0 0.75rem;
    border-radius: 0.8rem;
  }
  .is-explorer .feat__icon svg { width: 1.2rem; height: 1.2rem; }
  .is-explorer .feat h3,
  .is-explorer .feat--big h3,
  .is-explorer .feat--tall h3 {
    margin: auto 1.6rem 0 0;
    font-size: 0.95rem;
    line-height: 1.25;
    letter-spacing: -0.015em;
  }
  .is-explorer .feat h3 .new { margin-bottom: 0.35rem; }
  /* The scene only where there is room for it: the cards that span both columns. */
  .is-explorer .mini { display: none; }
  .is-explorer .feat--big .mini,
  .is-explorer .feat--wide .mini {
    display: flex;
    transform: none;
    margin: 0 0 0.75rem;
  }
  .is-explorer .feat--big > p,
  .is-explorer .feat--wide > p,
  .is-explorer .feat--tall > p { display: none; }
  .is-explorer .feat__art,
  .is-explorer .feat--big .feat__art,
  .is-explorer .feat--wide .feat__art { display: none; }
  /* The plus: small, in the top corner, out of the title's way. */
  .is-explorer .feat::after {
    top: 0.85rem;
    bottom: auto;
    right: 0.85rem;
    margin: 0;
    width: 1.6rem;
    height: 1.6rem;
    font-size: 1rem;
  }
  [dir="rtl"] .is-explorer .feat::after { right: auto; left: 0.85rem; }
  .is-explorer .feat--big,
  .is-explorer .feat--tall { background-clip: padding-box, padding-box, border-box; }
}