/* ==========================================================================
   Adovvy — the playful version (V2)
   The paper mascot joins the homepage. Same sections, same words; the hero
   is the approved Concept B paper hero, "If you don't answer" is the night
   band where sleepy characters wake up and clear the backlog, How it works
   is four big colour cards in a zig-zag (after the OpenAI dots page), and
   every feature card gets a small character of its own.

   The colour rule: a character never stands on its own colour. On a tinted
   card it takes a colour from the other side of the wheel; the indigo one
   (Adovvy itself) works on yellow, mint, pink and peach cards.
   ========================================================================== */

/* --- Headlines: the emphasised words are Adovvy indigo again ------------ */
.h1 em, .h2 em, .split .w.em { color: var(--accent); }
.section--deep .h1 em,
.section--deep .h2 em,
.section--deep .split .w.em { color: var(--accent-lift); }

/* --- The character, wherever it appears --------------------------------- */
.m-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.m-dot { transform-box: fill-box; transform-origin: center; animation: mDot 1s ease-in-out infinite; }
.m-dot:nth-of-type(2) { animation-delay: .15s; }
.m-dot:nth-of-type(3) { animation-delay: .3s; }
@keyframes mDot { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-6px); } }
.m-zz { opacity: 0; animation: mZz 2.7s ease-in infinite; }
.m-zz:nth-of-type(2) { animation-delay: .9s; }
.m-zz:nth-of-type(3) { animation-delay: 1.8s; }
@keyframes mZz { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(16px, -30px); } }
/* Still characters blink by themselves; live ones are blinked by script. */
[data-mascot] .m-eyes { transform-box: fill-box; transform-origin: center; animation: mBlink 4.8s infinite; }
@keyframes mBlink { 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
@keyframes mBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes mHop {
  0% { transform: translateY(0) scale(1, 1); }
  18% { transform: translateY(0) scale(1.08, .9); }
  45% { transform: translateY(-9px) scale(.95, 1.06); }
  72% { transform: translateY(0) scale(1.05, .94); }
  100% { transform: translateY(0) scale(1, 1); }
}

/* ==========================================================================
   HERO: the Concept B paper hero
   The promise on the left; on the right the character hops from channel to
   channel, taking each one's colour mid-air: a WhatsApp message, a call,
   an Instagram DM, then a new order and confetti.
   ========================================================================== */
.mhero { overflow: hidden; padding-block: clamp(28px, 5vw, 64px) clamp(48px, 6vw, 88px); background: var(--white); }
.mhero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.mhero__title { font-size: clamp(38px, 4.3vw, 62px); line-height: 1.03; letter-spacing: -.045em; }
.mhero__promise { margin: 24px 0 0; font: 500 clamp(17px, 1.45vw, 20px)/1.5 var(--font); color: var(--ink-2); }
.mhero__promise b { color: var(--ink); font-weight: 700; }
.mhero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.mhero__chans { list-style: none; margin: 36px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: 520px; }
.mhero__chans li {
  --cc: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px 0 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: #fff;
  font: 600 13.5px/1 var(--font);
  color: var(--ink-2);
  transition: background-color .4s, border-color .4s, color .4s, box-shadow .4s, transform .4s cubic-bezier(.3, 1.5, .5, 1);
}
.mhero__chans img { width: 18px; height: 18px; flex: none; }
.mhero__chans .icon { font-size: 17px; color: var(--cc); }
.mhero__chans li.is-on { background: color-mix(in srgb, var(--cc) 13%, #fff); border-color: var(--cc); color: var(--ink); transform: translateY(-3px); box-shadow: 0 10px 22px -14px var(--cc); }

.mstage { --c: #22C08F; position: relative; aspect-ratio: 1 / 1.02; }
.mstage__halo { position: absolute; left: 50%; top: 63%; width: 84%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 22%, transparent), color-mix(in srgb, var(--c) 7%, transparent) 64%, transparent); }
.mstage__halo::before { content: ''; position: absolute; inset: 11%; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }
.mstage__halo::after { content: ''; position: absolute; inset: -3%; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--c) 22%, transparent); animation: mOrbit 80s linear infinite; }
@keyframes mOrbit { to { transform: rotate(360deg); } }
.mstage__bot { position: absolute; left: 50%; top: 63%; width: 45%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.mslot { position: absolute; z-index: 2; width: min(312px, 62%); display: grid; }
.mslot--a { left: 0; top: 1%; }
.mslot--b { right: 0; top: 9%; }
.mconv { grid-area: 1 / 1; display: grid; gap: 8px; align-content: start; }
/* Only the first conversation shows until the script takes over. */
.mconv[data-conv="wa"], .mconv[data-conv="call"], .msale { visibility: hidden; opacity: 0; }
.mmsg {
  --cc: var(--accent);
  display: grid;
  gap: 6px;
  padding: 12px 15px 13px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--line-2);
  box-shadow: 0 1px 1px rgba(21, 20, 43, .03), 0 16px 36px -16px rgba(21, 20, 43, .24);
}
.mmsg__head { display: flex; align-items: center; gap: 8px; min-width: 0; font: 400 12.5px/1.2 var(--font); color: var(--muted); white-space: nowrap; }
.mmsg__head b { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.mmsg p { margin: 0; font: 500 15px/1.42 var(--font); color: var(--ink); }
.mmsg--out { margin-left: 28px; background: var(--accent-tint); border-color: transparent; }
.mmsg__ic, .mmsg__av { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.mmsg__ic { background: var(--cc); font-size: 14px; }
.mmsg__ic img { width: 24px; height: 24px; }
.mmsg__ic:has(img) { background: none; }
.mmsg__av { background: var(--accent); }
.mmsg__av svg { width: 14px; height: 10px; fill: #fff; }
.mchip {
  --cc: #22C08F;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px 0 7px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  font: 600 13px/1 var(--font);
  white-space: nowrap;
  box-shadow: 0 10px 24px -12px rgba(21, 20, 43, .6);
}
.mchip i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--cc); font-size: 13px; }
.mwave { display: flex; align-items: center; gap: 3px; height: 26px; }
.mwave i { flex: 1; max-width: 4px; height: 100%; border-radius: 2px; background: var(--cc); transform: scaleY(.22); transform-origin: center; }
.mmsg.is-live .mwave i { animation: mWave .8s ease-in-out infinite alternate; }
@keyframes mWave { 0% { transform: scaleY(.18); } 100% { transform: scaleY(.95); } }
.msale { position: absolute; right: 2%; top: 3%; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px 20px 12px 12px; border-radius: 20px; background: #fff; border: 1px solid var(--line-2); box-shadow: 0 1px 1px rgba(21, 20, 43, .03), 0 16px 36px -16px rgba(21, 20, 43, .24); }
.msale__ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 20px; }
.msale div b { display: block; font: 700 15.5px/1.3 var(--font); letter-spacing: -.01em; color: var(--ink); }
.msale div span { display: block; font-size: 13px; color: var(--muted); }
.mconfetti { position: absolute; left: 50%; top: 58%; width: 0; height: 0; z-index: 3; pointer-events: none; }
.mconfetti i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; opacity: 0; }
.mconfetti i.r { width: 7px; height: 14px; border-radius: 3px; }

@media (max-width: 960px) {
  .mhero__grid { grid-template-columns: minmax(0, 1fr); }
  /* On phones and tablets the words come first, the character under them (22 Oct: text first
     in every hero; was character first since 1 Oct). */
  .mstage { aspect-ratio: auto; width: 100%; max-width: 640px; height: clamp(470px, 126vw, 640px); justify-self: center; }
}
@media (max-width: 600px) {
  .mslot { width: 84%; }
  .mslot--b { top: 1%; }
  .mstage__bot, .mstage__halo { top: 70%; }
  .mstage__bot { width: 50%; }
  .mstage__halo { width: 98%; }
  .mmsg p { font-size: 14px; }
  .msale { right: 0; top: 2%; }
  .mconfetti { top: 64%; }
  .mhero__chans li { height: 34px; font-size: 13px; }
  .mhero__ctas .btn { width: 100%; }
}

/* ==========================================================================
   IF YOU DON'T ANSWER: the night band
   Four inboxes, each with a grey character asleep on it. "Adovvy is on"
   wakes them: each one takes its channel's colour and the counts fall to
   zero.
   ========================================================================== */
.night { overflow: hidden; }
.night__head { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 20px 56px; align-items: end; }
.night__head .lede { margin: 0; max-width: 46ch; color: rgba(255, 255, 255, .7); }
.night__board { margin-top: 52px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.un {
  --cc: #22C08F;
  position: relative;
  display: grid;
  gap: 18px;
  align-content: start;
  padding: 22px 22px 20px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
  border: 1px solid rgba(255, 255, 255, .09);
  transition: border-color .6s, box-shadow .6s;
}
.un.is-done { border-color: color-mix(in srgb, var(--cc) 60%, transparent); box-shadow: 0 24px 60px -24px color-mix(in srgb, var(--cc) 70%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--cc) 22%, transparent); }
.un__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-height: 78px; }
.un__id { display: grid; gap: 12px; justify-items: start; padding-top: 2px; }
.un__logo { width: 30px; height: 30px; flex: none; }
.un__logo--icon { display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; font-size: 16px; }
.un__label { margin: 0; font: 700 12px/1.35 var(--font); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.un__bot { position: relative; width: 92px; aspect-ratio: 1; flex: none; margin: -16px -12px 0 0; }
.un__zz { position: absolute; right: -4%; top: -10%; width: 34%; height: 44%; pointer-events: none; }
.un__zz i { position: absolute; left: 0; bottom: 0; font: 700 14px/1 var(--font); font-style: normal; color: rgba(255, 255, 255, .72); opacity: 0; animation: mZz 2.7s ease-in infinite; }
.un__zz i:nth-child(2) { animation-delay: .9s; font-size: 12px; }
.un__zz i:nth-child(3) { animation-delay: 1.8s; font-size: 10px; }
.un__zz.is-off { display: none; }
.un__row { margin: 0; display: flex; align-items: center; gap: 14px; }
.un__n { min-width: 1.15em; font: 600 clamp(44px, 4.6vw, 62px)/1 var(--font); letter-spacing: -.045em; font-variant-numeric: tabular-nums; color: #fff; }
.un__u { font-size: 15px; line-height: 1.3; color: rgba(255, 255, 255, .74); }
.un__ok { margin: 0; display: inline-flex; align-items: center; gap: 8px; font: 600 13.5px/1.2 var(--font); color: #fff; }
.un__ok i { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--cc); font-size: 13px; }
/* Only the switch shows it: until then every inbox is still waiting. */
.un__ok { visibility: hidden; opacity: 0; }
.night__ctl { margin-top: 56px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.switch { display: inline-flex; align-items: center; gap: 12px; padding: 5px 16px 5px 5px; border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r-pill); background: rgba(255, 255, 255, .05); font: 600 15px/1 var(--font); color: #fff; cursor: pointer; }
.switch:focus-visible { outline: 2px solid var(--accent-lift); outline-offset: 3px; }
.switch__track { position: relative; width: 60px; height: 34px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .14); transition: background-color .45s; }
.switch__knob { position: absolute; left: 4px; top: 4px; width: 26px; height: 26px; border-radius: 50%; background: #B7BACB; transition: transform .55s cubic-bezier(.3, 1.5, .45, 1), background-color .45s; }
.switch__knob i { position: absolute; top: 12px; width: 4px; height: 2px; border-radius: 2px; background: var(--deep); transition: height .3s, top .3s; }
.switch__knob i:first-child { left: 7.5px; }
.switch__knob i:last-child { right: 7.5px; }
.switch[aria-checked="true"] .switch__track { background: var(--accent); }
.switch[aria-checked="true"] .switch__knob { transform: translateX(26px); background: #fff; }
.switch[aria-checked="true"] .switch__knob i { top: 9.5px; height: 7px; }
.night__sum { margin: 0; font-size: 15px; color: rgba(255, 255, 255, .66); font-variant-numeric: tabular-nums; }
.night__sum b { color: #fff; }
.night__ctas { margin-left: auto; display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 960px) {
  .night__board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .night__ctas { margin-left: 0; width: 100%; }
}
@media (max-width: 760px) {
  .night__head { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .night__board { gap: 10px; margin-top: 36px; }
  .un { padding: 16px 14px; gap: 12px; border-radius: 22px; }
  .un__top { min-height: 66px; }
  .un__id { gap: 9px; }
  .un__logo { width: 24px; height: 24px; }
  .un__logo--icon { font-size: 13px; }
  .un__label { font-size: 10.5px; letter-spacing: .08em; }
  .un__bot { width: 58px; margin: -8px -6px 0 0; }
  .un__row { gap: 10px; }
  .un__n { font-size: 40px; }
  .un__u { font-size: 13px; }
  .un__ok { font-size: 12px; }
  .night__ctas .btn { flex: 1 1 auto; }
}

/* ==========================================================================
   HOW IT WORKS: four colour cards in a zig-zag
   Each card holds a white panel from the product; the indigo character
   drives a cursor through it and its face follows the job.
   ========================================================================== */
.flow2 .flow__head .h2 { color: var(--on-deep); }
.zz { list-style: none; margin: clamp(44px, 6vw, 80px) auto 0; padding: 0; max-width: 1120px; display: grid; gap: clamp(36px, 6vw, 88px); }
.zz__step { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.zz__step:nth-child(even) { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.zz__step:nth-child(even) .zz__card { order: 2; }
.zz__card {
  position: relative;
  min-height: 470px;
  border-radius: 32px;
  display: grid;
  place-items: center;
  /* Extra room below: the character hangs under its cursor. */
  padding: 44px 28px 80px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 28% 8%, var(--g0) 0%, transparent 58%),
    linear-gradient(160deg, var(--g1) 0%, var(--g2) 100%);
}
.zz__panel {
  position: relative;
  width: min(392px, 88%);
  display: grid;
  gap: 2px;
  padding: 10px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 30px 60px -28px rgba(21, 20, 43, .45);
}
.zz__phead { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.zz__phead b { display: block; font: 700 14px/1.2 var(--font); color: var(--ink); }
.zz__phead small { display: block; font: 500 12px/1.3 var(--font); color: var(--muted); }
.zz__phead .zz__count { margin-left: auto; white-space: nowrap; font: 700 12px/1 var(--font); color: var(--ink-2); background: var(--paper); padding: 6px 9px; border-radius: var(--r-pill); font-variant-numeric: tabular-nums; }
.zz__mark { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); flex: none; }
.zz__mark svg { width: 17px; height: 11px; fill: #fff; }
.zrow { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 14px; transition: background-color .3s, opacity .4s; }
.zrow.is-hot { background: #EEF0F4; }
.zrow b { display: block; font: 600 14.5px/1.25 var(--font); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zrow small { display: block; font: 400 12px/1.35 var(--font); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zrow small i { font-style: normal; font-weight: 600; color: var(--muted); transition: color .3s; }
.zrow.is-on small i { color: var(--green-ink); }
.zic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--ic, var(--accent)); color: #fff; font-size: 18px; }
.zic img { width: 22px; height: 22px; }
.zic--logo { background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
.ztg { position: relative; width: 36px; height: 22px; border-radius: var(--r-pill); background: #D9DCE5; transition: background-color .35s; }
.ztg::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.zrow.is-on .ztg { background: #22C08F; }
.zrow.is-on .ztg::after { transform: translateX(14px); }
.zst { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: var(--r-pill); background: var(--paper); font: 700 11.5px/1 var(--font); color: var(--muted); white-space: nowrap; transition: background-color .3s, color .3s; }
.zst .icon { font-size: 12px; }
.zrow.is-on .zst { background: var(--green-tint); color: var(--green-ink); }
.zbar { height: 6px; margin-top: 6px; border-radius: 3px; background: #E6E8EE; overflow: hidden; }
.zbar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: #22C08F; transform: scaleX(0); transform-origin: 0 50%; }
/* Engage: a short chat, the reply typed into the box by the character. */
.zchat { display: grid; gap: 8px; padding: 6px 6px 4px; height: 240px; align-content: end; overflow: hidden; }
.zb.is-pending { display: none; }
.zb { max-width: 88%; margin: 0; padding: 10px 13px; border-radius: 16px; font: 500 14px/1.42 var(--font); text-wrap: pretty; }
.zb--in { justify-self: start; background: var(--paper); color: var(--ink); border-bottom-left-radius: 6px; }
.zb--out { justify-self: end; background: var(--accent); color: #fff; border-bottom-right-radius: 6px; }
.zb--done { justify-self: center; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 8px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font: 600 12.5px/1 var(--font); }
.zb--done i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #22C08F; font-size: 12px; }
.zin { display: grid; grid-template-columns: minmax(0, 1fr) 36px; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 6px 6px 14px; border-radius: 16px; background: var(--paper); }
.zin span { min-height: 20px; font: 500 13.5px/1.45 var(--font); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zin span:empty::before { content: 'Reply…'; color: var(--muted); }
.zin button { width: 36px; height: 36px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 16px; pointer-events: none; }
.zz__bot { position: absolute; left: 0; top: 0; z-index: 3; width: 92px; pointer-events: none; will-change: transform; }
.zz__cursor { position: absolute; left: -6px; top: -4px; width: 26px; height: auto; z-index: 2; overflow: visible; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .18)); }
.zz__m { position: relative; width: 100%; aspect-ratio: 1; margin: 6px 0 0 8px; }
.zz__text { display: grid; gap: 14px; align-content: center; }
.zz__k { font: 700 12px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--g1); }
.zz__stat { margin: 0; }
.zz__stat b { display: block; font: 600 clamp(48px, 5.4vw, 76px)/1 var(--font); letter-spacing: -.045em; color: #fff; font-variant-numeric: tabular-nums; }
.zz__stat span { display: block; margin-top: 12px; font: 600 clamp(21px, 1.9vw, 27px)/1.2 var(--font); letter-spacing: -.02em; color: #fff; }
.zz__line { margin: 0; max-width: 38ch; font: 400 var(--fs-lede)/1.6 var(--font); color: var(--on-deep-2); }
.flow2 .flow__note { margin-top: clamp(48px, 7vw, 88px); color: var(--on-deep-2); }
.flow2 .flow__note::before, .flow2 .flow__note::after { background: var(--line-deep); }
@media (max-width: 900px) {
  .zz__step, .zz__step:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .zz__step:nth-child(even) .zz__card { order: 0; }
  .zz__card { min-height: 0; padding: 32px 14px 84px; border-radius: 26px; }
  .zz__panel { width: min(372px, 92%); }
  .zz__bot { width: 76px; }
}
/* On a phone the card has no room at its sides, so the character walks
   under and to the left of its cursor, and a finished row keeps only its
   green tick. */
@media (max-width: 600px) {
  .zz__m { margin: 6px 0 0 -56px; }
  .zrow { gap: 10px; padding-inline: 8px; }
  .zrow.is-on .zst { width: 24px; padding: 0; justify-content: center; }
  .zrow.is-on .zst span { display: none; }
}

/* ==========================================================================
   FEATURE CARDS: the same 24 cards, each with a small character on the
   white of the card, in a colour that stands apart from the card's own.
   ========================================================================== */
.feat__top .feat__title { flex: 1 1 auto; min-width: 0; }
.feat__mascot { flex: none; width: 58px; height: 58px; margin: -8px -8px -8px auto; animation: mBob 3.4s ease-in-out infinite; }
.feat__mascot .m-svg { transition: transform .3s var(--ease-out); }
.feat__card:hover .feat__mascot .m-svg { animation: mHop .62s var(--ease-out); }
@media (max-width: 700px) {
  .feat__top { gap: 12px; }
  .feat__mascot { width: 48px; height: 48px; margin: -6px -6px -6px auto; }
}
/* Small phones: a touch smaller all round, so "Recommendations" still fits
   beside its icon and its character. */
@media (max-width: 420px) {
  .feat__top { gap: 10px; }
  .feat__top .feat__icon { width: 42px; height: 42px; font-size: 21px; }
  .feat__top .feat__title { font-size: 16.5px; }
  .feat__mascot { width: 42px; height: 42px; margin: -4px -6px -4px auto; }
}

@media (prefers-reduced-motion: reduce) {
  .m-dot, .m-zz, [data-mascot] .m-eyes, .feat__mascot, .un__zz i, .mstage__halo::after { animation: none; }
  .feat__card:hover .feat__mascot .m-svg { animation: none; }
}

/* ==========================================================================
   SECOND ROUND, 1 Oct
   ========================================================================== */

/* --- Spacing: 128px above and below every section (third pass, 1 Oct) --- */
.page-home .section--pad { padding-block: 128px; }
/* The hero stands a little taller. */
.page-home .mhero { padding-block: 104px 128px; }
.page-home .integ { padding-block: 128px; }
.page-home .logos { padding-block: 96px 104px; }
/* The feature cards: more air from the board above and from How it works. */
.page-home #meet .feat { margin-top: 128px; }
.page-home #meet.section--pad { padding-bottom: 140px; }
@media (max-width: 700px) {
  .page-home .section--pad { padding-block: 88px; }
  .page-home .mhero { padding-block: 48px 88px; }
  .page-home .integ { padding-block: 88px; }
  .page-home .logos { padding-block: 64px 72px; }
  .page-home #meet .feat { margin-top: 88px; }
  .page-home #meet.section--pad { padding-bottom: 96px; }
}

/* --- Feature cards: the icon tile is gone, the character is a size up ---- */
.feat__mascot { width: 64px; height: 64px; margin: -10px -10px -10px auto; }
@media (max-width: 700px) {
  .feat__mascot { width: 54px; height: 54px; margin: -8px -8px -8px auto; }
}
@media (max-width: 420px) {
  .feat__mascot { width: 50px; height: 50px; margin: -6px -6px -6px auto; }
}

/* --- The platform section: the crew instead of the dotted face ----------
   Six characters, one per channel colour, each with its prop; Adovvy's own
   indigo stands in the middle of the front row. */
.meet__visual.crew6 { aspect-ratio: 1.1 / 1; max-width: 600px; }
.crew6__glow {
  position: absolute;
  inset: 4% 0 0;
  border-radius: 50%;
  background:
    radial-gradient(38% 36% at 20% 66%, rgba(34, 192, 143, .16), transparent 70%),
    radial-gradient(38% 36% at 80% 66%, rgba(242, 101, 154, .15), transparent 70%),
    radial-gradient(42% 38% at 50% 30%, rgba(155, 123, 255, .16), transparent 70%),
    radial-gradient(46% 40% at 50% 74%, rgba(72, 87, 194, .12), transparent 72%);
}
.crew6__m { position: absolute; width: var(--s); aspect-ratio: 1; left: calc(var(--x) - var(--s) / 2); top: calc(var(--y) - var(--s) * .55); cursor: pointer; }
.crew6__m--b1 { --x: 24%; --y: 31%; --s: 27%; z-index: 1; }
.crew6__m--b2 { --x: 50%; --y: 24%; --s: 27%; z-index: 1; }
.crew6__m--b3 { --x: 76%; --y: 31%; --s: 27%; z-index: 1; }
.crew6__m--f1 { --x: 15%; --y: 67%; --s: 30%; z-index: 2; }
.crew6__m--f2 { --x: 50%; --y: 70%; --s: 35%; z-index: 3; }
.crew6__m--f3 { --x: 85%; --y: 67%; --s: 30%; z-index: 2; }

/* --- "With Adovvy": a fresh mint card, and a character sitting on it ---- */
.page-home .vs { margin-top: 140px; }
.page-home .vs__lift {
  background: linear-gradient(160deg, #E3FAF1 0%, #EEF7FF 55%, #F2EEFF 100%);
  border-color: #BDEAD8;
  box-shadow: 0 30px 60px -32px rgba(34, 192, 143, .55), 0 2px 6px rgba(21, 20, 43, .04);
}
.page-home .vs__mark--new { background: #22C08F; box-shadow: 0 8px 16px -8px rgba(34, 192, 143, .85); }
.page-home .vs__rows .vs__row + .vs__row .vs__cell--new { border-top-color: rgba(34, 192, 143, .2); }
.vs__sit { position: absolute; z-index: 3; right: 64px; top: -104px; width: 116px; aspect-ratio: 1; cursor: pointer; }
@media (max-width: 900px) {
  .page-home .vs { margin-top: 124px; }
  .page-home .vs__cell--new { background: linear-gradient(160deg, #E3FAF1, #EEF7FF); border-top-color: #BDEAD8; }
  .vs__sit { right: 16px; top: -82px; width: 100px; }
}

/* --- Built to scale, in pastels --------------------------------------- */
.page-home #scale .scale__card--sky { background: linear-gradient(160deg, #EAF6FF 0%, #EFEBFF 100%); border-color: transparent; }
.page-home #scale .scale__card--pink { background: linear-gradient(160deg, #FFEEF5 0%, #F2EEFF 100%); border-color: transparent; }
.page-home #scale .scale__card .itile { background: #fff; box-shadow: 0 10px 22px -14px rgba(72, 87, 194, .6); }
/* Each brand in its own colour. */
.page-home #scale .layers__row--brands { gap: 10px; }
.page-home #scale .layers__brand { display: inline-flex; align-items: center; padding: 9px 16px; border-radius: var(--r-pill); background: #fff; border: 1px solid color-mix(in srgb, var(--cc) 30%, transparent); box-shadow: 0 10px 24px -18px rgba(21, 20, 43, .35); font: 600 13.5px/1 var(--font); color: var(--ink); }
/* The shared layer glows; a light runs down each connector. */
.page-home #scale .layers__arrow { height: 26px; width: 2px; background: repeating-linear-gradient(to bottom, rgba(72, 87, 194, .45) 0 4px, transparent 4px 8px); }
.page-home #scale .layers__arrow::before { content: ''; position: absolute; left: 50%; top: 0; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgba(72, 87, 194, .7); animation: lFlow 1.8s ease-in infinite; }
@keyframes lFlow { 0% { transform: translateY(-4px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(24px); opacity: 0; } }
.page-home #scale .layers__core { background: linear-gradient(115deg, #4857C2 0%, #6A46C8 50%, #4857C2 100%); background-size: 200% 100%; animation: lCore 6s ease-in-out infinite alternate; box-shadow: 0 18px 34px -16px rgba(72, 87, 194, .7); }
@keyframes lCore { to { background-position: 100% 0; } }
.page-home #scale .layers__row--out span { display: inline-flex; align-items: center; gap: 7px; background: color-mix(in srgb, var(--cc) 12%, #fff); border-color: color-mix(in srgb, var(--cc) 34%, transparent); color: var(--ink); font-weight: 600; }
/* The persona: its chips in four pastels. */
.page-home #scale .persona__traits li { background: var(--pt); border-color: color-mix(in srgb, var(--pc) 26%, transparent); }

/* --- Robots: the character's own humanoid, kiosk and display ------------- */
.bots3 { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.bots3__card { display: grid; align-content: start; padding: 26px 28px 30px; border-radius: 28px; background: linear-gradient(165deg, var(--g1), var(--g2)); }
.bots3__art { height: 260px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 24px; }
.bots3__art .m-svg { flex: none; width: auto; height: 100%; overflow: visible; }
.bots3__art--wide .m-svg { width: 100%; height: auto; max-height: 100%; }
.bots3__card h3 { margin: 0; font: 600 var(--fs-h3)/1.25 var(--font); letter-spacing: -.02em; color: var(--ink); }
.bots3__card p { margin: 8px 0 0; font: 400 var(--fs-p)/1.55 var(--font); color: var(--body); }
.bots3__film { margin-top: clamp(40px, 5vw, 64px); aspect-ratio: 2.2 / 1; }
/* The three devices are the user's own renders, cut out of their
   backgrounds; each stands on a soft shadow of its own. */
.bots3__art { position: relative; }
.bots3__art img { position: relative; z-index: 1; display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; }
.bots3__art::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 62%; height: 18px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(42, 50, 144, .2), rgba(42, 50, 144, 0)); }
/* On the dark band: the closing line turns white, its rule goes quiet. */
.page-home #robots .robots__ask { color: var(--on-deep); }
.page-home #robots .robots__cta { border-top-color: var(--line-deep); }
.bots3__film img { height: 100%; object-fit: cover; }
[data-device] .m-eyes { transform-box: fill-box; transform-origin: center; animation: mBlink 4.8s infinite; }
.m-dev-bob { animation: mBob 3.2s ease-in-out infinite; }
.m-dev-wave { transform-box: view-box; transform-origin: 162px 126px; animation: mDevWave 1.8s ease-in-out infinite; }
@keyframes mDevWave { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-14deg); } 50% { transform: rotate(5deg); } 75% { transform: rotate(-10deg); } }
.m-chip { transform-box: fill-box; transform-origin: 0% 50%; animation: mChip 6s cubic-bezier(.3, 1.4, .5, 1) infinite both; }
.m-chip:nth-child(2) { animation-delay: .35s; }
.m-chip:nth-child(3) { animation-delay: .7s; }
.m-chip:nth-child(4) { animation-delay: 1.05s; }
@keyframes mChip { 0% { opacity: 0; transform: scale(.6); } 8%, 86% { opacity: 1; transform: scale(1); } 94%, 100% { opacity: 0; transform: scale(.9); } }
@media (max-width: 900px) {
  .bots3 { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; }
  .bots3__art { height: 220px; }
  .bots3__film { aspect-ratio: 16 / 10; }
}

@media (prefers-reduced-motion: reduce) {
  .m-dev-bob, .m-dev-wave, .m-chip, [data-device] .m-eyes,
  .page-home #scale .layers__arrow::before, .page-home #scale .layers__core { animation: none; }
}

/* ==========================================================================
   INDUSTRIES: moving pills (the user's pick, 1 Oct)
   Three rows of big pastel pills glide past in opposite directions, each
   with a small character in a colour away from its pill; they pause under
   the pointer. Below, one character says which industry it is trained for.
   ========================================================================== */
.ipills {
  display: grid;
  gap: 20px;
  margin-top: clamp(40px, 5vw, 64px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ipills__row { overflow: hidden; padding-block: 4px; }
.ipills__track { display: flex; gap: 20px; width: max-content; animation: ipMove 64s linear infinite; will-change: transform; }
.ipills__row:nth-child(2) .ipills__track { animation-direction: reverse; animation-duration: 70s; }
.ipills__row:nth-child(3) .ipills__track { animation-duration: 76s; }
.ipills:hover .ipills__track { animation-play-state: paused; }
/* Four copies of each row; a quarter of the track plus a quarter of a gap
   is one full turn, and three copies always cover even a very wide screen. */
@keyframes ipMove { to { transform: translate3d(calc(-25% - 5px), 0, 0); } }
.ipill {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 76px;
  padding: 0 34px;
  border-radius: var(--r-pill);
  background: var(--t);
  font: 600 18px/1 var(--font);
  letter-spacing: -.01em;
  color: var(--ink);
  white-space: nowrap;
}
.ipills__say { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: clamp(36px, 4.5vw, 56px); }
.ipills__bot { flex: none; width: 104px; aspect-ratio: 1; }
.ipills__bubble { position: relative; margin: 0; padding: 15px 22px; border-radius: 20px; background: var(--ink); color: #fff; font: 600 18px/1.3 var(--font); }
.ipills__bubble::before { content: ''; position: absolute; left: -7px; top: 50%; width: 15px; height: 15px; margin-top: -7.5px; border-radius: 3px; background: var(--ink); transform: rotate(45deg); }
.ipills__bubble b { font-weight: 700; color: #AEB7FF; }
@media (max-width: 700px) {
  .ipills { gap: 14px; }
  .ipills__track { gap: 14px; }
  @keyframes ipMove { to { transform: translate3d(calc(-25% - 3.5px), 0, 0); } }
  .ipill { height: 58px; padding: 0 24px; font-size: 15.5px; }
  .ipills__bot { width: 84px; }
  .ipills__bubble { padding: 12px 16px; font-size: 15px; }
}
/* Without motion the rows stand still and wrap, every industry in view. */
@media (prefers-reduced-motion: reduce) {
  .ipills { -webkit-mask-image: none; mask-image: none; padding-inline: var(--gutter); }
  .ipills__track { width: auto; flex-wrap: wrap; justify-content: center; animation: none; }
  .ipill.is-copy { display: none; }
}

/* ==========================================================================
   V4: the feedback round of 2 Oct
   ========================================================================== */

/* --- Hero: the headline on three set lines -------------------------------
   "AI Customer Experience." / "Powered by an Industry-Trained" / "AI
   Workforce". The middle line is the longest (14 times the font size), so
   the size follows the column: it always fits on one line. On a phone the
   set breaks give way and the headline wraps on its own. */
.mhero__grid { grid-template-columns: minmax(0, 1.36fr) minmax(0, .84fr); }
.mhero__title { font-size: clamp(30px, 3.25vw, 47px); line-height: 1.06; }
.mslot { width: min(300px, 72%); }
@media (max-width: 960px) {
  .mhero__grid { grid-template-columns: minmax(0, 1fr); }
  .mhero__title { font-size: min(50px, calc((100vw - 2 * var(--gutter)) / 14.4)); }
  .mslot { width: min(340px, 84%); }
}
/* On a phone the first line still fits whole ("AI Customer Experience." is
   11 times the font size); the middle line breaks once, after "an". */
@media (max-width: 600px) {
  .mhero__title { font-size: min(36px, calc((100vw - 2 * var(--gutter)) / 11.1)); }
}

/* --- V5 (5 Oct): the chats sit just above the character -------------------
   On a two-column screen the stage is the character's own space, centred on
   the words beside it, so the character lines up with the headline block.
   The chats are anchored a small, even gap above its head and grow upwards,
   whatever their length; the order card sits a little higher, clear of the
   spin the character does when it cheers. Only one chat shows at a time, so
   a chat can take most of the stage's width. */
@media (min-width: 961px) {
  .mstage { --head: 44.2%; aspect-ratio: 1 / .9; }
  .mstage__bot, .mstage__halo { top: 62%; }
  .mstage__bot { width: 42%; }
  .mslot, .mslot--a, .mslot--b { width: min(330px, 88%); top: auto; bottom: calc(100% - var(--head) + 14px); }
  .mconv { align-content: end; }
  .msale { top: auto; bottom: calc(100% - var(--head) + 72px); }
  /* The chats rise above the stage, so the hero starts a little lower to
     keep the tallest one clear of the menu. */
  .page-home .mhero { padding-top: 128px; }
}
@media (min-width: 961px) and (max-width: 1100px) {
  .page-home .mhero { padding-top: 144px; }
}
@media (min-width: 961px) and (max-width: 1240px) {
  .mhero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}

/* --- Logos: closer to the hero, and closer to each other ---------------- */
.page-home .mhero { padding-bottom: 64px; }
.page-home .logos { padding-block: 16px 96px; }
.page-home .logos__head { margin-bottom: 24px; }
.logos__slots { max-width: 860px; gap: clamp(16px, 2.4vw, 32px); }
@media (max-width: 700px) {
  .page-home .mhero { padding-bottom: 40px; }
  .page-home .logos { padding-block: 12px 72px; }
}

/* --- Platform: the feature belt now follows the copy directly ----------- */
.page-home #meet .feat { margin-top: 112px; }
@media (max-width: 700px) {
  .page-home #meet .feat { margin-top: 72px; }
}

/* --- YANA on a light ground ------------------------------------------- */
.page-home #yana .yana__glow {
  background:
    radial-gradient(46% 40% at 84% 8%, rgba(155, 123, 255, .14), transparent 70%),
    radial-gradient(50% 50% at 6% 92%, rgba(72, 87, 194, .1), transparent 70%);
}
.page-home #yana .h2 { color: var(--ink); }
.page-home #yana .h2 em, .page-home #yana .split .w.em { color: var(--accent); }
.page-home #yana .lede { color: var(--body); }
.page-home #yana .yana__poster { box-shadow: 0 40px 80px -40px rgba(21, 20, 43, .35); }
.page-home #yana .yana__stats { border-color: var(--line-2); }
.page-home #yana .yana__stats .stat { border-color: var(--line-2); }
.page-home #yana .stat b { color: var(--ink); }
.page-home #yana .stat span { color: var(--muted); }
.page-home #yana .yana__quote { color: var(--ink); }
.page-home #yana .yana__source { color: var(--muted); }
.page-home #yana .yana__article { box-shadow: 0 30px 60px -24px rgba(21, 20, 43, .4); }
.page-home #yana .yana__collage { box-shadow: 0 30px 60px -36px rgba(21, 20, 43, .3); }

/* --- One infrastructure ---------------------------------------------------
   Your brands on top, one Adovvy intelligence layer in the middle, what is
   beyond the screen on its left, your systems on its right, and every
   channel along the bottom, as on the first site. infra.js draws the wires. */
.infra-sec { overflow: hidden; }
/* The diagram takes more of a wide screen than the other sections. */
#scale > .shell { max-width: 1600px; }
@media (min-width: 1181px) { #scale > .shell { padding-inline: clamp(20px, 3vw, 48px); } }
.infra {
  position: relative;
  margin-top: clamp(48px, 6vw, 72px);
  display: grid;
  /* Both side panels share one width, so the layer sits in the middle of the
     page. Up to 400px wide the systems pills stay in five rows, level with
     the three pictures in the panel on the left. */
  --side: clamp(350px, 27vw, 400px);
  grid-template-columns: var(--side) minmax(0, var(--core, 560px)) var(--side);
  grid-template-areas: "brands brands brands" "beyond core integ" "channels channels channels";
  justify-content: center;
  column-gap: clamp(32px, 3vw, 48px);
  row-gap: 76px;
  align-items: center;
}
.infra__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.infra__wire { fill: none; stroke: #9DA7EE; stroke-width: 1.8; stroke-dasharray: 5 6; stroke-linecap: round; }
.infra__wire--dot { stroke: #B9C0EE; stroke-width: 1.6; stroke-dasharray: 1.5 5; }
.infra > :not(.infra__wires) { position: relative; z-index: 1; }
.infra__label { margin: 0 0 14px; font: 700 11.5px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.infra__label--center { margin: 22px 0 0; text-align: center; }

/* Brands: proper brand pills, each with its own mark and colour. */
.infra__brands { grid-area: brands; text-align: center; }
.infra__brandList { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.infra__brandList li { display: inline-flex; align-items: center; gap: 11px; padding: 7px 20px 7px 7px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--line-2); box-shadow: 0 14px 28px -20px rgba(21, 20, 43, .4); text-align: left; }
.bpill__mark { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--bc); color: #fff; font-size: 19px; }
.bpill__txt b { display: block; font: 700 15px/1.15 var(--font); letter-spacing: -.01em; color: var(--ink); }
.bpill__txt small { display: block; margin-top: 2px; font: 500 12px/1.2 var(--font); color: var(--muted); }

/* Panels either side of the layer. */
.infra__panel { padding: 22px 22px 24px; border-radius: 28px; }
.infra__panel--beyond { grid-area: beyond; background: linear-gradient(165deg, #F4F1FF 0%, #ECE7FF 100%); }
.infra__panel--integ { grid-area: integ; background: linear-gradient(165deg, #EDFAF4 0%, #E1F5EC 100%); }
.infra__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.infra__rows li { display: flex; align-items: center; gap: 14px; padding: 8px 12px 8px 8px; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(23, 23, 43, .05); }
.infra__rows b { display: block; font: 700 14.5px/1.25 var(--font); color: var(--ink); }
.infra__rows small { display: block; margin-top: 2px; font: 500 12.5px/1.35 var(--font); color: var(--muted); }
.infra__thumb { width: 96px; height: 72px; flex: none; border-radius: 12px; object-fit: cover; background: #EEF0FC; }
.infra__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.infra__chips li { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 13px 0 6px; border-radius: var(--r-pill); background: #fff; box-shadow: 0 1px 2px rgba(23, 23, 43, .06); font: 600 13.5px/1 var(--font); color: var(--ink); }
.infra__lmark { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--lc) 12%, #fff); color: var(--lc); font-size: 15px; }
.infra__lmark .ilogo { width: 16px; height: 16px; display: block; }
.infra__chips .is-more { background: transparent; box-shadow: inset 0 0 0 1px rgba(23, 23, 43, .14); color: var(--muted); --lc: #6B6B78; }
/* The last pill opens the Integrations page. */
.infra__chips .is-more { padding: 0; transition: box-shadow .25s, color .25s; }
.infra__chips .is-more a { display: inline-flex; align-items: center; gap: 8px; height: 100%; padding: 0 12px 0 6px; color: inherit; text-decoration: none; }
.infra__chips .is-more .infra__go { font-size: 14px; transition: transform .3s var(--ease-soft); }
.infra__chips .is-more:hover { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }
.infra__chips .is-more:hover .infra__go { transform: translateX(3px); }
/* "Book a demo" has no page yet, so its buttons go nowhere for now. */
a.btn:not([href]) { cursor: default; }
.infra__panelNote { margin: 16px 0 0; font: 400 14px/1.55 var(--font); color: var(--body); }

/* The layer: a quiet dashboard in the site's own colours. */
.infra__core { grid-area: core; margin: 0; }
.infra__caption { margin: 16px auto 0; max-width: 34ch; text-align: center; font: 600 14px/1.5 var(--font); color: var(--ink-2); text-wrap: balance; }
.dashb { padding: 20px 22px 18px; border-radius: 26px; background: #fff; box-shadow: 0 44px 90px -44px rgba(72, 87, 194, .55), 0 0 0 1px rgba(72, 87, 194, .1); }
.dashb__top { display: flex; align-items: center; gap: 12px; }
.dashb__mark { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--accent); color: #fff; }
.dashb__mark svg { width: 20px; height: 13px; }
.dashb__name { min-width: 0; }
.dashb__name b { display: block; font: 700 15px/1.25 var(--font); color: var(--ink); }
.dashb__name small { display: block; font: 500 12.5px/1.35 var(--font); color: var(--muted); }
.dashb__kpis { margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dashb__kpis div { padding: 13px 12px 14px; border-radius: 14px; background: #F7F8FC; }
.dashb__kpis small { display: block; font: 600 11.5px/1.3 var(--font); color: var(--muted); }
.dashb__kpis b { display: block; margin-top: 8px; font: 700 clamp(17px, 1.55vw, 22px)/1 var(--font); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.dashb__chart { position: relative; margin-top: 12px; padding: 12px 12px 6px; border-radius: 14px; background: #F7F8FC; }
.dashb__legend { display: flex; gap: 14px; font: 600 11.5px/1 var(--font); color: var(--muted); }
.dashb__legend span { display: inline-flex; align-items: center; gap: 6px; }
.dashb__legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.dashb__chart svg { display: block; width: 100%; height: 120px; margin-top: 8px; overflow: visible; }
.dashb__grid line { stroke: rgba(23, 23, 43, .07); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dashb__area { fill: url(#dashb-fill); }
.dashb__line { fill: none; stroke-width: 2.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.dashb__line--a { stroke: #4857C2; }
.dashb__line--b { stroke: #22C08F; }
.dashb__insight { margin: 12px 0 0; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: linear-gradient(120deg, #EEF0FC, #F3EEFF); font: 600 13px/1.4 var(--font); color: var(--ink-2); }
.dashb__spark { width: 26px; height: 26px; flex: none; border-radius: 8px; display: grid; place-items: center; background: #fff; color: var(--accent); font-size: 15px; }

/* V5: the layer is one Adovvy card inside a dashed frame. infra.js draws the
   frame, and one point on each side of it where the lines meet the layer. */
.infra { --core: 420px; }
.infra__core--hub { width: 100%; max-width: 440px; justify-self: center; padding: 18px; }
.hubcard {
  display: grid; justify-items: center; align-content: center;
  min-height: 204px; padding: 28px 24px;
  border-radius: 22px;
  text-align: center; color: #fff;
  background: radial-gradient(120% 100% at 24% 6%, #3B3484 0%, #2A2464 44%, #1B1742 100%);
  box-shadow: 0 36px 70px -38px rgba(42, 36, 100, .75), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.hubcard__mark { width: 64px; color: #fff; }
.hubcard__mark svg { display: block; width: 100%; height: auto; }
.hubcard__title { margin-top: 16px; font: 700 clamp(20px, 1.6vw, 24px)/1.2 var(--font); letter-spacing: -.02em; text-wrap: balance; }
.hubcard__sub { margin-top: 8px; max-width: 30ch; font: 500 14.5px/1.45 var(--font); color: rgba(255, 255, 255, .78); text-wrap: balance; }
.infra__frame { fill: rgba(72, 87, 194, .035); stroke: #A9B1EC; stroke-width: 1.6; stroke-dasharray: 6 6; }
.infra__knot { fill: #A3ACEB; }

/* Every channel, along the bottom: round marks with their names, as on the
   first site, each wired up to the layer. */
.infra__channels { grid-area: channels; margin-top: -8px; }
.infra__chanList { list-style: none; margin: 0 auto; padding: 0; max-width: 940px; display: flex; justify-content: space-between; gap: 12px; }
.infra__chanList li { display: grid; justify-items: center; gap: 10px; font: 600 13.5px/1.2 var(--font); color: var(--ink); text-align: center; }
.infra__dot { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--line-2); box-shadow: 0 14px 26px -18px rgba(21, 20, 43, .4); color: var(--ic, var(--accent)); font-size: 22px; }
.infra__dot img { width: 24px; height: 24px; }

.infra__cta { margin-top: clamp(64px, 8vw, 96px); }

/* Stacked: brands, the layer, then the channels, what is beyond the screen
   and the systems, each hanging off one line down the left. */
@media (max-width: 1180px) {
  .infra { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brands" "core" "channels" "beyond" "integ"; row-gap: 56px; max-width: 620px; margin-inline: auto; }
  .infra__channels, .infra__panel { margin-left: 30px; }
  .infra__channels { margin-top: 0; padding: 22px 16px 18px; border-radius: 28px; background: #F7F8FC; }
  .infra__chanList { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 8px; }
  .infra__label--center { margin-top: 18px; }
}
@media (max-width: 600px) {
  .infra { row-gap: 44px; }
  .infra__brandList { gap: 8px; }
  .infra__brandList li { padding: 6px 14px 6px 6px; gap: 9px; }
  .bpill__mark { width: 32px; height: 32px; font-size: 16px; }
  .bpill__txt b { font-size: 14px; }
  .dashb { padding: 16px 14px 14px; border-radius: 22px; }
  .dashb__kpis { gap: 6px; }
  .dashb__kpis div { padding: 10px 8px; }
  .dashb__kpis small { font-size: 10.5px; }
  .dashb__chart svg { height: 96px; }
  .infra__dot { width: 46px; height: 46px; }
  .infra__thumb { width: 80px; height: 60px; border-radius: 10px; }
  .infra__core--hub { padding: 14px; }
  .hubcard { min-height: 188px; padding: 26px 18px; border-radius: 20px; }
  .hubcard__mark { width: 56px; }
  .hubcard__title { margin-top: 14px; }
}

/* --- FAQ, in the same card language as the rest of the page -------------- */
/* A set width: auto margins alone would size the list to its content, and
   it would grow and shrink as answers open and close. */
.page-home #faq .faq__list { width: 100%; max-width: 900px; margin-inline: auto; gap: 12px; }
.page-home #faq .faq__item { border-radius: 24px; background: #fff; border: 1px solid transparent; box-shadow: 0 1px 2px rgba(23, 23, 43, .04); transition: background-color .35s var(--ease-out), border-color .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.page-home #faq .faq__item:hover { border-color: var(--accent-soft); }
.page-home #faq .faq__item[open] { background: linear-gradient(165deg, #F3F4FF 0%, #ECEEFF 100%); border-color: transparent; box-shadow: 0 30px 60px -40px rgba(72, 87, 194, .45); }
.page-home #faq .faq__q { align-items: center; padding: 22px 24px; }
.page-home #faq .faq__q:hover { color: var(--ink); }
.page-home #faq .faq__a { padding: 0 24px 26px; }
.page-home #faq .faq__a p { color: var(--body); }
/* The toggle: a plus in a soft indigo circle that turns into a cross. */
.page-home #faq .faq__chev { position: relative; width: 36px; height: 36px; background: var(--accent-tint); transition: transform .4s var(--ease-out), background-color .3s; }
.page-home #faq .faq__chev svg { display: none; }
.page-home #faq .faq__chev::before,
.page-home #faq .faq__chev::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px; background: var(--accent); transition: background-color .3s; }
.page-home #faq .faq__chev::after { transform: rotate(90deg); }
.page-home #faq .faq__item:hover .faq__chev { background: #E2E5FA; }
.page-home #faq .faq__item[open] .faq__chev { transform: rotate(45deg); background: var(--accent); }
.page-home #faq .faq__item[open] .faq__chev::before,
.page-home #faq .faq__item[open] .faq__chev::after { background: #fff; }
@media (max-width: 600px) {
  .page-home #faq .faq__q { padding: 18px 18px; }
  .page-home #faq .faq__a { padding: 0 18px 20px; }
  .page-home #faq .faq__chev { width: 32px; height: 32px; }
}

/* --- Footer, on the same dark as the page's dark bands ------------------ */
.page-home .footer { background: var(--deep); }
.page-home .footer__col a:hover { color: #fff; text-decoration-color: var(--accent-lift); }
.page-home .footer__newsRow input { border-radius: var(--r-pill); }
.page-home .footer__newsRow .btn { height: 50px; }
.page-home .footer__phones a { border-radius: var(--r-pill); }
.page-home .footer__social a { transition: transform .3s var(--ease-out), background-color .3s; }

/* --- Feature cards, even spacing (2 Oct, second round) -------------------- */
.page-home #meet .feat { margin-top: 44px; }
.page-home .feat__card { padding: 24px; }
.page-home .feat__top { min-height: 0; }
.page-home .feat__stage { margin-top: 24px; }
.page-home .feat__line { margin-top: 16px; }
@media (max-width: 700px) {
  .page-home #meet .feat { margin-top: 32px; }
  .page-home .feat__card { padding: 20px; }
  .page-home .feat__stage { margin-top: 20px; }
}