/* ListenFox marketing site. One stylesheet for every page; icon classes are appended by build.py.
   Language of the site: paper page, rounded inset panels (never full-bleed bands), ONE charcoal panel per page,
   speech bubbles + timestamps + waveforms as the visual vocabulary, fox stickers as the characters.
   Motion is CSS only and lives in the last block; with reduced motion the page is complete and static. */

@font-face { font-family: "Funnel Display"; src: url(/fonts/display.woff2) format("woff2"); font-weight: 300 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20B9, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Funnel Display"; src: url(/fonts/display-ext.woff2) format("woff2"); font-weight: 300 800; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B8, U+20BA-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Funnel Sans"; src: url(/fonts/sans.woff2) format("woff2"); font-weight: 300 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20B9, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Funnel Sans"; src: url(/fonts/sans-ext.woff2) format("woff2"); font-weight: 300 800; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B8, U+20BA-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Mono"; src: url(/fonts/mono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
/* Non-Latin scripts used on the site (sample transcripts, the greetings wall). Subset files, fetched only
   when a page actually contains those characters. */
@font-face { font-family: "Noto Scripts"; src: url(/fonts/noto-deva.woff2) format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20F0, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "Noto Scripts"; src: url(/fonts/noto-cyrl.woff2) format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0400-04FF; }
@font-face { font-family: "Noto Scripts"; src: url(/fonts/noto-jp.woff2) format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+3000-30FF, U+4E00-9FFF, U+FF00-FFEF; }
@font-face { font-family: "Noto Scripts"; src: url(/fonts/noto-arab.woff2) format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }

:root {
  --paper: #FAF4EC; --paper-2: #F4EADD; --tint: #F7E3CF; --chest: #FFFCF8;
  --ink: #241D1A; --ink-2: #4E423B; --muted: #6B5D54;
  --fox: #E0621F; --rust: #AE3F14; --apricot: #F5AD78; --fox-wash: #FCE6D6;
  --ok: #2E7048; --ok-wash: #E2EFE3; --sky: #2F5F8A; --sky-wash: #E2EBF3;
  --line: rgba(36, 29, 26, .11); --line-2: rgba(36, 29, 26, .22);
  --on-ink: #FFFCF8; --on-ink-2: #CDBFB4;
  --shadow-1: 0 1px 2px rgba(90, 42, 14, .06), 0 8px 22px -10px rgba(90, 42, 14, .2);
  --shadow-2: 0 2px 4px rgba(90, 42, 14, .05), 0 30px 70px -24px rgba(90, 42, 14, .34);
  --sans: "Funnel Sans", "Noto Scripts", system-ui, sans-serif;
  --display: "Funnel Display", "Funnel Sans", "Noto Scripts", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;
  --r-xl: 40px; --r-card: 22px; --r-tile: 14px; --r-pill: 999px;
  --wrap: 1220px; --gut: clamp(20px, 4vw, 44px); --sec: clamp(4.5rem, 9vw, 8rem);
  --ease: cubic-bezier(.16, 1, .3, 1); --spring: cubic-bezier(.34, 1.4, .5, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--sans); overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
b, strong { font-weight: 650; }
mark { background: none; color: inherit; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--chest); padding: 8px 14px; border-radius: 8px; z-index: 90; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2.5px solid var(--fox); outline-offset: 3px; border-radius: 8px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.narrow { max-width: 820px; }
.sec { padding-block: var(--sec); }
.sec-s { padding-block: clamp(3rem, 6vw, 5rem); }
.center { text-align: center; margin-inline: auto; }

/* type */
.d1 { font: 720 clamp(2.6rem, 6.4vw, 5.4rem)/.98 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.d2 { font: 700 clamp(2rem, 4.2vw, 3.4rem)/1.04 var(--display); letter-spacing: -.03em; text-wrap: balance; }
.d3 { font: 680 clamp(1.4rem, 2.2vw, 1.85rem)/1.15 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.d1 em, .d2 em, .d3 em { font-style: normal; }
.d1 em { color: var(--fox); }  /* the colour shift is rationed: page titles, plus the one dark panel per page */
.lede { font-size: clamp(1.08rem, 1.5vw, 1.28rem); line-height: 1.55; color: var(--ink-2); max-width: 40em; text-wrap: pretty; }
.sub { color: var(--ink-2); max-width: 38em; margin-top: 1rem; text-wrap: pretty; }
.kicker { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: var(--rust); margin-bottom: 1rem; }
.kicker .ic { color: var(--fox); }
.small { font-size: .9rem; color: var(--muted); }
.note { font-size: .86rem; color: var(--muted); }
.mono { font-family: var(--mono); font-size: .86em; }
.head-row { display: flex; align-items: end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(2rem, 4vw, 3.4rem); }
.head-row .sub { margin-top: .8rem; }
.more { display: inline-flex; align-items: center; gap: .4rem; font-weight: 620; color: var(--rust); text-decoration: none; }
.more:hover { text-decoration: underline; }
.more .ic { transition: transform .4s var(--ease); }
.more:hover .ic { transform: translateX(4px); }

/* icons: mask-tinted Phosphor glyphs, classes generated from /icons by build.py */
.ic { display: inline-block; width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 50px; padding: .7rem 1.5rem; border: 0; border-radius: var(--r-pill);
  background: var(--fox); color: var(--ink); font: 680 1rem/1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: inset 0 -3px 0 rgba(120, 40, 8, .25), 0 10px 24px -12px rgba(224, 98, 31, .8); transition: transform .35s var(--spring), box-shadow .35s var(--ease), background .3s; }
.btn:hover { transform: translateY(-2px); background: #E86C2A; box-shadow: inset 0 -3px 0 rgba(120, 40, 8, .25), 0 16px 30px -12px rgba(224, 98, 31, .9); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn .ic { transition: transform .4s var(--ease); }
.btn:hover .ic { transform: translateX(3px); }
.btn-line { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--chest); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-sm { min-height: 42px; padding: .55rem 1.15rem; font-size: .94rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.btn-row.center { justify-content: center; }

/* small shared parts */
.sticker { filter: drop-shadow(0 10px 16px rgba(90, 42, 14, .2)); pointer-events: none; user-select: none; }
.card { background: var(--chest); border-radius: var(--r-card); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); }
.shell { padding: 7px; border-radius: calc(var(--r-card) + 7px); background: rgba(36, 29, 26, .045); box-shadow: inset 0 0 0 1px rgba(36, 29, 26, .06); }
.ts { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 6px; border-radius: var(--r-pill); background: var(--fox-wash); color: var(--rust); font: 400 12.5px/1.1 var(--mono); white-space: nowrap; text-decoration: none; }
.ts .ic { color: var(--fox); width: 13px; height: 13px; vertical-align: 0; }
.eg { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 560; color: var(--muted); }
.eg::before { flex: none; }
.eg::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px dashed currentColor; }
.chip { display: inline-flex; align-items: center; gap: 5px; font: 600 13px/1 var(--sans); padding: 7px 11px; border-radius: var(--r-pill); white-space: nowrap; background: var(--paper-2); color: var(--ink-2); }
.chip-fox { background: var(--fox-wash); color: var(--rust); }
.chip-ok { background: var(--ok-wash); color: var(--ok); }
.chip-sky { background: var(--sky-wash); color: var(--sky); }
.chip-ink { background: var(--ink); color: var(--chest); }
/* status badges: the only three states anything on this site can be in */
.st { display: inline-flex; align-items: center; gap: 5px; font: 650 12px/1 var(--sans); padding: 5px 9px; border-radius: var(--r-pill); white-space: nowrap; }
.st-live { background: var(--ok-wash); color: var(--ok); }
.st-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-beta { background: var(--fox-wash); color: var(--rust); }
.st-road { color: var(--muted); box-shadow: inset 0 0 0 1.2px var(--line-2); background: transparent; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 50; padding: 12px var(--gut) 0; }
.island { position: relative; max-width: calc(var(--wrap) - 2 * var(--gut) + 28px); margin-inline: auto; display: flex; align-items: center; gap: 1.5rem; height: 64px; padding: 0 10px 0 20px;
  border-radius: 22px; background: rgba(255, 252, 248, .86); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 0 0 1px var(--line), 0 12px 30px -18px rgba(90, 42, 14, .35); }
.logo { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; font: 760 1.26rem/1 var(--display); letter-spacing: -.03em; color: var(--ink); }
.mark { width: 30px; height: 36px; overflow: visible; }
.mark .ear { transition: transform .5s var(--spring); }
.mark .ear-l { transform-origin: 760px 960px; }
.mark .ear-r { transform-origin: 1290px 960px; }
.logo:hover .ear-l { transform: rotate(-10deg) translateY(-34px); }
.logo:hover .ear-r { transform: rotate(10deg) translateY(-34px); }
.mainnav { margin-left: auto; }
.mainnav > ul { display: flex; gap: .2rem; }
.mainnav > ul > li > a { display: block; padding: .55rem .85rem; border-radius: 12px; text-decoration: none; font-weight: 560; font-size: .97rem; color: var(--ink-2); transition: background .25s, color .25s; }
.mainnav > ul > li > a:hover, .mainnav > ul > li:focus-within > a { background: var(--paper-2); color: var(--ink); }
.mainnav a[aria-current] { color: var(--rust); }
.mm { position: relative; }
.mm > a::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 7px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: translateY(-3px) rotate(45deg); opacity: .6; }
.mm-panel { position: absolute; top: calc(100% + 14px); left: -24px; width: 600px; padding: 10px; border-radius: 24px; background: var(--chest);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-2); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s var(--ease), transform .35s var(--ease), visibility 0s .3s; }
.mm-panel::before { content: ""; position: absolute; inset: -16px 0 100% 0; }
.mm:hover .mm-panel, .mm:focus-within .mm-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mm-product ul { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.mm-product a { display: flex; gap: .8rem; padding: .8rem .9rem; border-radius: 16px; text-decoration: none; }
.mm-product a:hover { background: var(--paper); }
.mm-ic { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; background: var(--fox-wash); color: var(--rust); font-size: 1.15rem; }
.mm-product b { display: block; font-size: .96rem; }
.mm-product small { display: block; font-size: .83rem; line-height: 1.35; color: var(--muted); margin-top: 2px; }
.mm-ind { width: 520px; }
.mm-ind ul { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.mm-ind a { display: flex; align-items: center; gap: .7rem; padding: .55rem .8rem; border-radius: 16px; text-decoration: none; font-size: .95rem; }
.mm-ind a:hover { background: var(--paper); }
.mm-ind img { width: 34px; height: 40px; object-fit: contain; }
.mm-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding: .8rem 1rem; border-radius: 16px; background: var(--paper); text-decoration: none; font-size: .9rem; font-weight: 600; color: var(--rust); }
.nav-cta { margin-left: .4rem; }
.mobnav { display: none; }
.crumbs { padding-top: 1.6rem; font-size: .88rem; color: var(--muted); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .3rem; }
.crumbs li + li::before { content: "/"; margin-right: .3rem; opacity: .5; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--rust); text-decoration: underline; }

@media (max-width: 1080px) {
  .mainnav, .nav-cta { display: none; }
  .island { padding-right: 8px; }
  .mobnav { display: block; margin-left: auto; }
  .mobnav summary { list-style: none; display: flex; align-items: center; gap: .55rem; height: 46px; padding: 0 1rem; border-radius: 14px; background: var(--ink); color: var(--chest); font-weight: 620; cursor: pointer; }
  .mobnav summary::-webkit-details-marker { display: none; }
  .burger { position: relative; width: 16px; height: 10px; }
  .burger i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .35s var(--ease), top .35s var(--ease); }
  .burger i:first-child { top: 0; } .burger i:last-child { top: 8px; }
  .mobnav[open] .burger i:first-child { top: 4px; transform: rotate(45deg); }
  .mobnav[open] .burger i:last-child { top: 4px; transform: rotate(-45deg); }
  .mob-sheet { position: absolute; left: 0; right: 0; top: calc(100% + 10px); max-height: calc(100dvh - 100px); overflow: auto; padding: 1.2rem 1.4rem 1.4rem; border-radius: 24px; background: var(--chest); box-shadow: 0 0 0 1px var(--line), var(--shadow-2); }
  .mob-h { font-size: .84rem; font-weight: 650; color: var(--muted); margin: .9rem 0 .3rem; }
  .mob-h:first-child { margin-top: 0; }
  .mob-sheet ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
  .mob-sheet li a { display: block; padding: .5rem 0; text-decoration: none; font-weight: 560; }
  .mob-sheet .btn { width: 100%; margin-top: 1.2rem; }
}
@media (max-width: 520px) { .mob-sheet ul { grid-template-columns: 1fr; } .mob-label { display: none; } .mobnav summary { width: 46px; justify-content: center; padding: 0; } }

/* ---------- panels: rounded, inset from the page edge ---------- */
.panel { margin-inline: clamp(8px, 1.4vw, 20px); border-radius: var(--r-xl); }
.panel-tint { background: var(--tint); }
.panel-paper2 { background: var(--paper-2); }
.panel-ink { background: var(--ink); color: var(--on-ink); position: relative; overflow: hidden; }
.panel-ink .lede, .panel-ink .sub { color: var(--on-ink-2); }
.panel-ink .d1 em, .panel-ink .d2 em { color: var(--apricot); }
.panel-ink .card { background: #2F2724; box-shadow: inset 0 0 0 1px rgba(255, 252, 248, .1); color: var(--on-ink); }
.panel-ink .kicker { color: var(--apricot); }
.panel-ink .more { color: var(--apricot); }
.panel-fox { background: var(--fox); color: var(--ink); }

/* ---------- page heads ---------- */
.ph { padding-block: clamp(2.4rem, 5vw, 4.4rem) clamp(2.8rem, 6vw, 5rem); }
.ph .lede { margin-top: 1.3rem; }
.ph-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.ph-art { position: relative; justify-self: center; }
@media (max-width: 860px) { .ph-split { grid-template-columns: 1fr; } }

/* ---------- HOME: hero ---------- */
.hero { position: relative; padding-top: clamp(3rem, 7vw, 5.5rem); text-align: center; }
.hero .d1 { max-width: 13em; margin-inline: auto; }
.hero .lede { margin: 1.4rem auto 0; max-width: 34em; }
.hero .btn-row { justify-content: center; }
.ripples { position: absolute; left: 50%; top: -40px; width: min(1100px, 140vw); transform: translateX(-50%); pointer-events: none; z-index: -1; opacity: .9; }
.ripples circle { fill: none; stroke: rgba(224, 98, 31, .13); stroke-width: 1.2; }
.callstrip { position: relative; max-width: 1080px; margin: clamp(3rem, 6vw, 4.5rem) auto 0; text-align: left; }
.callstrip .card { padding: clamp(18px, 2.4vw, 28px) clamp(18px, 2.6vw, 32px) clamp(20px, 2.6vw, 30px); }
.cs-top { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cs-who { display: flex; align-items: center; gap: .8rem; }
.cs-av { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--fox-wash); color: var(--rust); font-size: 1.3rem; }
.cs-who b { display: block; font-size: 1.02rem; }
.cs-who span { font-size: .88rem; color: var(--muted); }
.cs-top .chip { margin-left: auto; }
.cs-play { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; margin-top: 1.3rem; }
.cs-btn { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: var(--chest); }
.cs-time { font: 400 13px/1 var(--mono); color: var(--muted); }
.wf { position: relative; display: flex; align-items: center; gap: 3px; height: 64px; }
.wf i { flex: 1; min-width: 2px; height: calc(var(--h) * 100%); border-radius: 3px; background: var(--fox); }
@media (max-width: 640px) { .wf i:nth-child(even) { display: none; } }
.wf .head { position: absolute; top: -6px; bottom: -6px; left: var(--at, 100%); width: 2px; border-radius: 2px; background: var(--ink); }
/* two-lane call waveform: your team above the line, the caller below. --f = position in the call (0..1) */
.wf2 { --team: var(--fox); --caller: var(--ink); --team-dim: #F1C6A6; --caller-dim: #CDBFB4;
  position: relative; display: flex; align-items: stretch; gap: 2px; height: 76px; }
.wf2::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line-2); }
.wf2 > i { position: relative; flex: 1; min-width: 2px; }
.wf2 > i::before { content: ""; position: absolute; left: 0; right: 0; height: calc(var(--h, 0) * 46%); border-radius: 2px; }
.wf2 > i.t::before { bottom: calc(50% + 2px); background: var(--team); }
.wf2 > i.c::before { top: calc(50% + 2px); background: var(--caller); }
.wf2 .head { position: absolute; top: -6px; bottom: -6px; left: calc(var(--f, 1) * 100%); width: 2px; border-radius: 2px; background: var(--ink); }
.wf-mark { position: absolute; top: -14px; left: calc(var(--f) * 100%); transform: translateX(-50%); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--fox); color: var(--chest); box-shadow: 0 0 0 3px var(--chest); }
.wf-mark .ic { width: 12px; height: 12px; }
.wf-legend { display: flex; gap: .9rem; font-size: .82rem; font-weight: 600; color: var(--muted); }
.wf-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.wf-legend span::before { content: ""; width: 14px; height: 6px; border-radius: 3px; }
.wf-legend .lt::before { background: var(--fox); }
.wf-legend .lc::before { background: var(--ink); }
.panel-ink .wf2, .card .wf2.on-ink { --caller: #CDBFB4; --caller-dim: #5A4D46; --team-dim: #7A4129; }
.panel-ink .wf2 .head { background: var(--chest); }
.panel-ink .wf-legend .lc::before { background: #CDBFB4; }
.cs-top .wf-legend { margin-left: auto; }
.cs-top .chip { margin-left: 0; }
@media (max-width: 640px) { .wf2 > i:nth-child(even) { display: none; } .wf2 { height: 64px; } }
.pins { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 1.2rem; }
.pin { position: relative; padding: 12px 14px 13px; border-radius: 16px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.pin::before { content: ""; position: absolute; top: -9px; left: 22px; width: 14px; height: 14px; background: inherit; box-shadow: inset 1px 1px 0 var(--line); transform: rotate(45deg); }
.pin .ts { margin-bottom: .5rem; }
.pin b { display: block; font-size: .8rem; font-weight: 620; color: var(--muted); }
.pin p { font-weight: 600; font-size: .98rem; line-height: 1.3; margin-top: 2px; }
.pin.hot { background: var(--fox-wash); }
.cs-fox { position: absolute; width: 118px; right: 64px; top: -158px; z-index: 0; }
.callstrip .shell { position: relative; z-index: 1; }
.cs-note { margin-top: .9rem; text-align: right; }
@media (max-width: 860px) {
  .pins { grid-template-columns: 1fr 1fr; }
  .cs-fox { width: 84px; top: -110px; right: 12px; }
  .cs-top .chip { margin-left: 0; }
}
@media (max-width: 480px) { .pins { grid-template-columns: 1fr; } .pin::before { display: none; } .cs-play { grid-template-columns: auto 1fr; } .cs-time { display: none; } }

/* HOME: sources switchboard */
.board { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.board-copy .count-row { display: flex; gap: 2rem; margin-top: 2rem; flex-wrap: wrap; }
.count-row div { min-width: 7rem; }
.count-row b { display: block; font: 720 2.6rem/1 var(--display); letter-spacing: -.03em; }
.count-row span { font-size: .92rem; color: var(--ink-2); }
.plugs { position: relative; display: flex; flex-wrap: wrap; gap: 8px; }
.plug { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 7px; border-radius: 12px; background: var(--chest); box-shadow: inset 0 0 0 1px var(--line); font-size: .92rem; font-weight: 560; white-space: nowrap; }
.mg { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font: 700 11px/1 var(--sans); letter-spacing: -.02em; color: #fff; background: var(--c, #6B5D54); flex: none; }
.board .st-fox { position: absolute; width: 110px; right: -10px; bottom: -150px; }
@media (max-width: 900px) { .board { grid-template-columns: 1fr; } .board .st-fox { position: static; width: 96px; margin: 1rem 0 0 auto; } }
@media (max-width: 600px) { .board .plug:nth-child(n+15) { display: none; } }

/* bubbles: a call shown as a conversation */
.convo { display: grid; gap: 14px; }
.bub { position: relative; max-width: 88%; padding: 13px 16px 14px; border-radius: 20px; background: var(--chest); box-shadow: inset 0 0 0 1px var(--line); }
.bub.us { justify-self: end; background: var(--tint); border-bottom-right-radius: 6px; box-shadow: none; }
.bub.them { border-bottom-left-radius: 6px; }
.bub-meta { display: flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.bub-meta .ts { font-size: 11.5px; }
.bub p { line-height: 1.5; }
.bub mark { background: linear-gradient(transparent 58%, rgba(245, 173, 120, .55) 58%); padding: 0 1px; }
.bub .gloss { display: block; margin-top: 6px; font-size: .84rem; color: var(--muted); }
.panel-ink .bub { background: #332A26; box-shadow: none; }
.panel-ink .bub.us { background: #4A3328; }

/* HOME: one call read (bubbles + findings) */
.read { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.findings { position: sticky; top: 110px; padding: 24px 26px 26px; }
.findings h3 { display: flex; align-items: center; gap: .6rem; font: 680 1.1rem/1.2 var(--display); }
.findings h3 img { width: 44px; }
.fl { margin-top: 1rem; display: grid; }
.fl li { display: grid; grid-template-columns: 8.2rem 1fr auto; gap: .8rem; align-items: baseline; padding: .7rem 0; border-top: 1px solid var(--line); }
.fl li:first-child { border-top: 0; }
.fl .k { font-size: .86rem; font-weight: 600; color: var(--muted); }
.fl .v { font-weight: 560; line-height: 1.4; }
.fl li.hot .v { color: var(--rust); }
.dots5 { display: inline-flex; gap: 3px; vertical-align: middle; margin-left: 4px; }
.dots5 i { width: 8px; height: 8px; border-radius: 50%; background: var(--fox); }
.dots5 i.off { background: var(--line-2); }
@media (max-width: 900px) { .read { grid-template-columns: 1fr; } .findings { position: static; } }
@media (max-width: 480px) { .fl li { grid-template-columns: 1fr auto; } .fl .k { grid-column: 1 / -1; } }

/* industry switcher (radio inputs + :has, no JS) */
.switch-tabs { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 2.4rem 0 2rem; }
.switch-tabs label { display: inline-flex; align-items: center; gap: .55rem; padding: 6px 16px 6px 8px; border-radius: var(--r-pill); background: var(--chest); box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; cursor: pointer; transition: background .25s, box-shadow .25s, transform .3s var(--spring); }
.switch-tabs label:hover { transform: translateY(-2px); }
.switch-tabs img { height: 40px; width: auto; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
/* all panels share one grid cell, so the stage is always as tall as the tallest panel: switching never moves the page */
.stage { display: grid; }
.switch-panel { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .35s var(--ease), visibility 0s .35s; }
.switch:has(#s1:checked) [data-s="1"], .switch:has(#s2:checked) [data-s="2"], .switch:has(#s3:checked) [data-s="3"],
.switch:has(#s4:checked) [data-s="4"], .switch:has(#s5:checked) [data-s="5"], .switch:has(#s6:checked) [data-s="6"] { visibility: visible; opacity: 1; transition: opacity .35s var(--ease); }
.switch:has(#s1:checked) label[for="s1"], .switch:has(#s2:checked) label[for="s2"], .switch:has(#s3:checked) label[for="s3"],
.switch:has(#s4:checked) label[for="s4"], .switch:has(#s5:checked) label[for="s5"], .switch:has(#s6:checked) label[for="s6"] { background: var(--ink); color: var(--chest); box-shadow: none; }
.switch:has(input:focus-visible) .switch-tabs label:has(+ input:focus-visible), .switch input:focus-visible + label { outline: 2.5px solid var(--fox); outline-offset: 3px; }
.trade { display: grid; grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2.4rem); align-items: center; padding: clamp(20px, 3vw, 34px); }
.trade > img { height: 210px; width: auto; max-width: 100%; object-fit: contain; justify-self: center; align-self: center; }
.trade h3 { font: 700 1.5rem/1.15 var(--display); letter-spacing: -.02em; }
.trade .sub { margin-top: .6rem; font-size: .98rem; }
.trade .more { margin-top: 1.2rem; }
.trade-out { display: grid; gap: 8px; }
.trade-out li { display: flex; gap: .7rem; align-items: baseline; padding: 10px 14px; border-radius: 14px; background: var(--paper); }
.trade-out li b { min-width: 7.5rem; font-size: .84rem; font-weight: 620; color: var(--muted); }
@media (max-width: 900px) { .trade { grid-template-columns: 1fr; align-content: start; } .trade > img { height: 130px; } }

/* greetings wall (languages) */
.hello { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .2rem 1.4rem; max-width: 1000px; margin: 0 auto; }
.hello span { font: 700 clamp(1.6rem, 4.4vw, 3.6rem)/1.2 var(--display); letter-spacing: -.02em; color: var(--ink); }
.hello span:nth-child(3n+2) { color: var(--fox); }
.hello span:nth-child(4n+3) { font-weight: 400; color: var(--ink-2); }
.hello span:nth-child(5n) { color: var(--rust); font-weight: 500; }

/* dark Ask panel */
.ask-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.askbox { padding: clamp(18px, 2.4vw, 26px); border-radius: 26px; }
.askq { display: flex; gap: .7rem; align-items: center; padding: 14px 16px; border-radius: 16px; background: rgba(255, 252, 248, .07); font-weight: 560; }
.askq .ic { color: var(--apricot); font-size: 1.2rem; }
.aska { margin-top: 14px; padding: 4px 4px 0; }
.aska p { color: var(--on-ink); }
.aska .refs { margin-top: 14px; display: grid; gap: 8px; }
.aska .refs li { display: grid; grid-template-columns: 6.4rem 1fr auto; gap: .7rem; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(255, 252, 248, .05); font-size: .92rem; }
.aska .refs .d { color: var(--on-ink-2); font-size: .84rem; }
.panel-ink .ts { background: rgba(245, 173, 120, .16); color: var(--apricot); }
.panel-ink .ts .ic { color: var(--apricot); }
.ask-steps { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.ask-steps span { font-size: .78rem; color: var(--on-ink-2); padding: 4px 9px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px rgba(255, 252, 248, .14); }
.ask-fox { position: absolute; width: 150px; left: clamp(20px, 5vw, 80px); bottom: -14px; opacity: .95; }
@media (max-width: 900px) { .ask-grid { grid-template-columns: 1fr; } .ask-fox { position: static; width: 110px; margin-top: 1.5rem; } .aska .refs li { grid-template-columns: 1fr auto; } .aska .refs .d { grid-column: 1 / -1; } }

/* follow-up week (calendar strip) */
.week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.day { min-height: 230px; padding: 12px; border-radius: 20px; background: var(--chest); box-shadow: inset 0 0 0 1px var(--line); }
.day > p { display: flex; justify-content: space-between; font-weight: 650; font-size: .92rem; margin-bottom: 10px; }
.day > p span { color: var(--muted); font-weight: 500; }
.day.today { box-shadow: inset 0 0 0 2px var(--fox); }
.task { padding: 9px 10px; border-radius: 12px; font-size: .86rem; line-height: 1.35; background: var(--paper); margin-top: 8px; }
.task small { display: block; color: var(--muted); font-size: .76rem; margin-top: 3px; }
.task.late { background: #FBE0D3; }
.task.done { opacity: .6; }
.task.done span { text-decoration: line-through; }
@media (max-width: 900px) { .week { grid-template-columns: 1fr; } .day { min-height: 0; } }

/* digest message preview */
.msg { max-width: 420px; padding: 16px 18px; border-radius: 20px 20px 20px 6px; background: var(--chest); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); }
.msg-from { display: flex; align-items: center; gap: .55rem; font-weight: 650; font-size: .92rem; }
.msg-from .mark { width: 22px; height: 26px; }
.msg-from span { margin-left: auto; font-size: .8rem; color: var(--muted); font-weight: 500; }
.msg ul { margin-top: .6rem; display: grid; gap: .35rem; font-size: .93rem; }
.msg li { padding-left: 1.1rem; position: relative; }
.msg li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 2px; background: var(--fox); }
.channels { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }

/* feature index (editorial two-column list) */
.findex { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2rem, 5vw, 4.5rem); }
.findex a { display: grid; grid-template-columns: 44px 1fr auto; gap: 1rem; align-items: center; padding: 1.15rem 0; border-top: 1px solid var(--line); text-decoration: none; }
.findex a:hover h3, .findex a:hover .t { color: var(--rust); }
.findex a .ic-arrow-right { color: var(--fox); transition: transform .4s var(--ease); }
.findex a:hover .ic-arrow-right { transform: translateX(4px); }
.findex .fi { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--tint); color: var(--rust); font-size: 1.25rem; }
.findex h3, .findex .t { font: 650 1.08rem/1.25 var(--sans); transition: color .2s; }
.findex p { font-size: .92rem; color: var(--muted); line-height: 1.45; margin-top: 2px; }
@media (max-width: 800px) { .findex { grid-template-columns: 1fr; } }

/* CTA panel (fox orange) */
.cta { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; padding: clamp(2.4rem, 5vw, 4rem) clamp(1.6rem, 5vw, 4.4rem); overflow: hidden; }
.cta .d2 { max-width: 15em; }
.cta p { margin-top: .9rem; font-size: 1.1rem; max-width: 34em; }
.cta .btn { background: var(--ink); color: var(--chest); box-shadow: 0 14px 30px -14px rgba(36, 29, 26, .8); }
.cta .btn:hover { background: #000; }
.cta .btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.cta .btn-line:hover { background: var(--ink); color: var(--chest); }
.cta-fox { width: 180px; margin-bottom: calc(-1 * clamp(2.4rem, 5vw, 4rem) - 30px); align-self: end; }
@media (max-width: 760px) { .cta { grid-template-columns: 1fr; } .cta-fox { width: 120px; margin: 0 0 -3rem auto; } }

/* footer with the tail */
.foot { position: relative; margin-top: clamp(4rem, 8vw, 6rem); padding-block: 3.2rem 1.6rem; border-top: 1px solid var(--line); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 2rem; }
.foot-brand p { margin-top: 1rem; font-size: .93rem; color: var(--ink-2); max-width: 26em; }
.foot-mail { display: inline-block; margin-top: .9rem; font-weight: 600; color: var(--rust); }
.f-h { font-weight: 680; font-size: .92rem; margin-bottom: .7rem; }
.foot li a { display: inline-block; padding: .22rem 0; font-size: .93rem; color: var(--ink-2); text-decoration: none; }
.foot li a:hover { color: var(--rust); text-decoration: underline; }
.foot-base { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-top: 2.6rem; }
.foot-base p { font-size: .84rem; color: var(--muted); max-width: 46em; }
.foot-fox { width: 104px; opacity: .95; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }

/* ---------- integrations directory ---------- */
.dir-tools { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 1.6rem; }
.dir-tools fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.dir-tools legend { float: left; margin-right: .6rem; padding-top: .45rem; font-size: .88rem; font-weight: 600; color: var(--muted); }
.fchip { position: relative; }
.fchip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.fchip span { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border-radius: var(--r-pill); background: var(--chest); box-shadow: inset 0 0 0 1px var(--line); font-weight: 580; font-size: .92rem; transition: background .2s, color .2s; }
.fchip span small { font-weight: 500; color: var(--muted); }
.fchip input:checked + span { background: var(--ink); color: var(--chest); }
.fchip input:checked + span small { color: var(--on-ink-2); }
.fchip input:focus-visible + span { outline: 2.5px solid var(--fox); outline-offset: 2px; }
.dir-search { margin-left: auto; position: relative; }
.dir-search input { width: 240px; min-height: 44px; padding: .5rem 1rem .5rem 2.4rem; border-radius: var(--r-pill); border: 0; background: var(--chest); box-shadow: inset 0 0 0 1px var(--line-2); font: inherit; font-size: .95rem; }
.dir-search .ic { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--muted); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.tile { display: grid; grid-template-columns: 1fr; gap: 4px; align-content: start; padding: 10px 10px 16px; border-radius: 20px; background: var(--chest); box-shadow: inset 0 0 0 1px var(--line); transition: transform .35s var(--spring), box-shadow .3s; outline-offset: 2px; }
.tile > b, .tile > .meta, .tile > p { padding-inline: 8px; }
.tile > b { margin-top: 8px; }
.tile > b.vh + .meta { margin-top: 10px; }
@media (max-width: 600px) { .tiles { grid-template-columns: 1fr 1fr; gap: 8px; } .tile p { display: none; } .tl { height: 60px; } .wm { font-size: .92rem; } }
.tl { display: flex; align-items: center; justify-content: center; gap: 14px; height: 74px; border-radius: 14px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); transition: background .3s; }
.tile:is(:hover, :focus-visible, :focus-within) .tl { background: #fff; }
/* real marks, one tone (charcoal) until hover/focus brings back the brand colour */
.lg { display: inline-block; width: 34px; height: 34px; flex: none; background: var(--ink); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; transition: background .3s; }
.lg.wide { width: 82px; }
.tile:is(:hover, :focus-visible) .lg, .plug:hover .lg { background: var(--brand); }
.lg.sm { width: 18px; height: 18px; }
.lg.sm.wide { width: 44px; }
.wm { font: 700 1.05rem/1 var(--display); letter-spacing: -.02em; color: var(--ink-2); text-align: center; padding: 0 10px; }
.tile:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-1); }
.tile b { font-size: 1rem; line-height: 1.2; }
.tile .meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: .8rem; color: var(--muted); }
.tile p { font-size: .87rem; color: var(--ink-2); margin-top: 6px; line-height: 1.45; }
.tile[data-status="soon"] { background: transparent; box-shadow: inset 0 0 0 1.2px var(--line-2); }
.tile[data-status="soon"] .tl { background: transparent; }
.tile[data-status="soon"] .lg, .tile[data-status="soon"] .wm { opacity: .6; }
.dir-empty { display: none; padding: 2rem; text-align: center; color: var(--muted); }
/* filters: category radios + status radios, all CSS */
.dir:has(#c-track:checked) .tile:not([data-cat="track"]), .dir:has(#c-phone:checked) .tile:not([data-cat="phone"]),
.dir:has(#c-cpaas:checked) .tile:not([data-cat="cpaas"]), .dir:has(#c-voice:checked) .tile:not([data-cat="voice"]),
.dir:has(#c-crm:checked) .tile:not([data-cat="crm"]), .dir:has(#c-files:checked) .tile:not([data-cat="files"]),
.dir:has(#c-chat:checked) .tile:not([data-cat="chat"]), .dir:has(#c-out:checked) .tile:not([data-cat="out"]),
.dir:has(#t-on:checked) .tile:not([data-status="on"]), .dir:has(#t-soon:checked) .tile:not([data-status="soon"]),
.dir:has(#m-in:checked) .tile:not([data-mk~="in"]), .dir:has(#m-us:checked) .tile:not([data-mk~="us"]),
.dir:has(#m-gb:checked) .tile:not([data-mk~="gb"]), .dir:has(#m-gl:checked) .tile:not([data-mk~="gl"]),
.tile.hide { display: none; }
@media (max-width: 760px) { .dir-search { margin-left: 0; width: 100%; } .dir-search input { width: 100%; } }

/* ---------- misc page components ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split.flip > :first-child { order: 2; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split.flip > :first-child { order: 0; } }
.ticks { display: grid; gap: .7rem; margin-top: 1.4rem; }
.ticks li { display: flex; gap: .7rem; align-items: baseline; }
.ticks .ic { color: var(--fox); flex: none; transform: translateY(2px); }
.panel-ink .ticks .ic { color: var(--apricot); }
.zig { display: grid; gap: clamp(3.5rem, 7vw, 6rem); }

/* stat line: a number + a label, used once per page at most */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; }
.fact { padding: 1.2rem 1.3rem; border-radius: 20px; background: var(--chest); box-shadow: inset 0 0 0 1px var(--line); }
.fact b { display: block; font: 720 2rem/1 var(--display); letter-spacing: -.03em; }
.fact span { display: block; margin-top: .45rem; font-size: .9rem; color: var(--ink-2); line-height: 1.4; }

/* roadmap list */
.road { display: grid; gap: 10px; }
.road li { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: 14px 18px; border-radius: 16px; box-shadow: inset 0 0 0 1.2px var(--line-2); }
.road li p { font-weight: 560; }
.road li small { display: block; color: var(--muted); font-weight: 400; font-size: .88rem; }
.panel-ink .road li { box-shadow: inset 0 0 0 1.2px rgba(255, 252, 248, .16); }
.panel-ink .road small { color: var(--on-ink-2); }
.panel-ink .st-road { color: var(--on-ink-2); box-shadow: inset 0 0 0 1.2px rgba(255, 252, 248, .3); }

/* trail of paw prints between steps (how it works) */
.trail { position: relative; display: grid; gap: clamp(2.4rem, 6vw, 4.5rem); }
.step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center; }
.step:nth-child(even) > :first-child { order: 2; }
.step h2 { font: 700 clamp(1.6rem, 3vw, 2.3rem)/1.1 var(--display); letter-spacing: -.025em; }
.step .who { display: inline-flex; gap: .4rem; align-items: center; font-weight: 620; font-size: .92rem; color: var(--rust); margin-bottom: .8rem; }
.paws { display: flex; justify-content: center; gap: 22px; padding: 0; color: var(--apricot); }
.paws i { font-size: 1.3rem; }
.paws i:nth-child(odd) { transform: translateY(-8px) rotate(-14deg); }
.paws i:nth-child(even) { transform: translateY(8px) rotate(14deg); }
@media (max-width: 860px) { .step { grid-template-columns: 1fr; } .step:nth-child(even) > :first-child { order: 0; } }

/* plan ruler (pricing) */
.ruler { position: relative; padding: 2.4rem 0 1rem; }
@media (max-width: 900px) { .ruler, .ruler-label { display: none; } }
.ruler-track { position: relative; height: 14px; border-radius: 99px; background: linear-gradient(90deg, var(--apricot), var(--fox) 60%, var(--rust)); }
.ruler-marks { position: relative; height: 2.4rem; margin-top: .4rem; font: 400 12.5px/1 var(--mono); color: var(--muted); }
.ruler-marks span { position: absolute; transform: translateX(-50%); top: .6rem; white-space: nowrap; }
.ruler-marks span::before { content: ""; position: absolute; left: 50%; top: -1rem; width: 1.5px; height: .6rem; background: var(--line-2); }
.plans { display: grid; grid-template-columns: 1fr 1.12fr 1fr; gap: 14px; align-items: stretch; margin-top: 1.6rem; }
.plan { position: relative; display: flex; flex-direction: column; padding: 26px 26px 24px; border-radius: 26px; background: var(--chest); box-shadow: inset 0 0 0 1px var(--line); }
.plan h3 { font: 700 1.35rem/1.1 var(--display); }
.plan .for { color: var(--muted); font-size: .94rem; margin-top: .4rem; min-height: 2.8em; }
.plan .price { margin-top: 1.2rem; font: 720 3rem/1 var(--display); letter-spacing: -.04em; }
.plan .price small { font: 500 1rem/1 var(--sans); letter-spacing: 0; color: var(--muted); }
.plan dl { margin-top: 1.3rem; display: grid; gap: .5rem; }
.plan dl div { display: flex; justify-content: space-between; gap: 1rem; font-size: .95rem; padding-bottom: .5rem; border-bottom: 1px dashed var(--line-2); }
.plan dt { color: var(--ink-2); }
.plan dd { font-weight: 650; text-align: right; }
.plan .btn { margin-top: 1.6rem; }
.plan.mid { background: var(--ink); color: var(--on-ink); box-shadow: var(--shadow-2); }
.plan.mid .for, .plan.mid .price small, .plan.mid dt { color: var(--on-ink-2); }
.plan.mid dl div { border-color: rgba(255, 252, 248, .16); }
.plan .tagline { position: absolute; top: -12px; right: 22px; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }
.costs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.cost { display: flex; align-items: center; gap: .9rem; padding: 14px 16px; border-radius: 18px; background: var(--chest); box-shadow: inset 0 0 0 1px var(--line); }
.coin { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFD3AE, var(--apricot) 60%, #E89A60); color: var(--ink); font: 720 1.05rem/1 var(--display); box-shadow: inset 0 -3px 0 rgba(150, 70, 20, .25); }
.cost p { font-size: .94rem; line-height: 1.35; }
.cost small { display: block; color: var(--muted); font-size: .82rem; }
.packs { display: flex; gap: 10px; flex-wrap: wrap; }
.pack { padding: 14px 18px; border-radius: 18px; box-shadow: inset 0 0 0 1.2px var(--line-2); }
.pack b { font: 700 1.3rem/1 var(--display); }
.pack span { display: block; color: var(--muted); font-size: .88rem; margin-top: .3rem; }

/* chat FAQ */
.faq-index { display: flex; flex-wrap: wrap; gap: .5rem; }
.faq-index a { text-decoration: none; }
.faq-group { scroll-margin-top: 110px; }
.faq-group + .faq-group { margin-top: clamp(3rem, 6vw, 4.5rem); }
.faq-group h2 { display: flex; align-items: center; gap: .8rem; }
.faq-group h2 img { width: 52px; }
.qa { display: grid; gap: 12px; margin-top: 1.6rem; max-width: 860px; }
.qa .bub.them p { font-weight: 620; }
.qa .bub.us { max-width: 80%; }
.qa .bub.us p + p { margin-top: .5rem; }

/* legal prose */
.draft { display: flex; gap: .8rem; align-items: flex-start; padding: 14px 18px; border-radius: 16px; background: var(--fox-wash); color: var(--ink); font-size: .95rem; }
.draft .ic { color: var(--rust); font-size: 1.25rem; transform: translateY(2px); }
.prose { max-width: 760px; }
.wrap.prose { max-width: 820px; }
.prose h2 { font: 700 1.5rem/1.2 var(--display); letter-spacing: -.02em; margin: 2.6rem 0 .8rem; scroll-margin-top: 110px; }
.prose h3 { font: 650 1.1rem/1.3 var(--sans); margin: 1.6rem 0 .5rem; }
.prose p, .prose li { color: var(--ink-2); }
.prose p + p { margin-top: .9rem; }
.prose ul { list-style: disc; padding-left: 1.3rem; display: grid; gap: .4rem; margin-top: .6rem; }
.prose table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: .93rem; }
.prose th { text-align: left; font-weight: 650; padding: .6rem .7rem; background: var(--paper-2); }
.prose td { padding: .6rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.toc { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.6rem; }
.toc a { text-decoration: none; }
@media (max-width: 600px) { .prose table, .prose thead, .prose tbody, .prose tr, .prose td { display: block; } .prose thead { display: none; } .prose tr { padding: .6rem 0; border-bottom: 1px solid var(--line); } .prose td { border: 0; padding: .1rem 0; } .prose td:first-child { font-weight: 650; color: var(--ink); } }

/* changelog */
.log { display: grid; gap: 0; }
.log-day { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 2rem; padding: 1.8rem 0; border-top: 1px solid var(--line); }
.log-date b { display: block; font: 720 2.4rem/1 var(--display); letter-spacing: -.03em; }
.log-date span { color: var(--muted); font-size: .92rem; }
.log-day ul { display: grid; gap: .8rem; }
.log-day li { display: flex; gap: .8rem; align-items: baseline; }
.log-day li .ic { color: var(--fox); flex: none; transform: translateY(2px); }
.log-day.big { grid-template-columns: 9rem minmax(0, 1fr); }
@media (max-width: 640px) { .log-day { grid-template-columns: 1fr; gap: .8rem; } }

/* demo form */
.form { display: grid; gap: 14px; padding: clamp(22px, 3vw, 32px); }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: .93rem; }
.field input, .field select, .field textarea { min-height: 50px; padding: .7rem .95rem; border: 0; border-radius: 14px; background: var(--paper); box-shadow: inset 0 0 0 1.2px var(--line-2); font: inherit; color: var(--ink); }
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--fox); }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .f2 { grid-template-columns: 1fr; } }
.form-note { display: none; gap: .7rem; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--fox-wash); font-size: .95rem; }
.form-note:target, .form-note.show { display: flex; }
.form-note .ic { color: var(--rust); font-size: 1.2rem; transform: translateY(2px); }

/* security layers */
.layers { display: grid; gap: 10px; }
.layer { display: grid; grid-template-columns: 48px 1fr; gap: 1rem; align-items: start; padding: 18px 20px; border-radius: 20px; background: var(--chest); box-shadow: inset 0 0 0 1px var(--line); }
.layer .fi { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: var(--ok-wash); color: var(--ok); font-size: 1.3rem; }
.layer h3, .layer .t { font: 650 1.05rem/1.3 var(--sans); }
.layer p { font-size: .94rem; color: var(--ink-2); margin-top: .25rem; }
.roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.role { padding: 16px; border-radius: 18px; background: rgba(255, 252, 248, .06); box-shadow: inset 0 0 0 1px rgba(255, 252, 248, .12); }
.role b { font: 700 1.2rem/1 var(--display); }
.role p { font-size: .9rem; color: var(--on-ink-2); margin-top: .5rem; line-height: 1.45; }
@media (max-width: 860px) { .roles { grid-template-columns: 1fr 1fr; } }

/* data table (sub-processors etc) */
.dt { width: 100%; border-collapse: collapse; font-size: .95rem; }
.dt th { text-align: left; font-weight: 650; padding: .7rem .9rem; color: var(--muted); font-size: .86rem; }
.dt td { padding: .85rem .9rem; border-top: 1px solid var(--line); vertical-align: top; }
.dt tr:hover td { background: rgba(245, 173, 120, .1); }
@media (max-width: 640px) { .dt, .dt tbody, .dt tr, .dt td { display: block; } .dt thead { display: none; } .dt tr { padding: .7rem 0; border-top: 1px solid var(--line); } .dt td { border: 0; padding: .15rem 0; } .dt td:first-child { font-weight: 650; } }

/* product page blocks */
.anat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.anat > * { grid-column: span 4; }
.anat .w6 { grid-column: span 6; } .anat .w8 { grid-column: span 8; } .anat .w12 { grid-column: span 12; } .anat .w3 { grid-column: span 3; } .anat .w5 { grid-column: span 5; } .anat .w7 { grid-column: span 7; }
.box { padding: 20px 22px; border-radius: 22px; background: var(--chest); box-shadow: inset 0 0 0 1px var(--line); }
.box h3, .box .t { display: flex; gap: .55rem; align-items: center; font: 660 1.06rem/1.25 var(--sans); }
.box h3 .ic, .box .t .ic { color: var(--fox); }
.box p { margin-top: .45rem; font-size: .94rem; color: var(--ink-2); line-height: 1.5; }
.box.tint { background: var(--tint); box-shadow: none; }
.box.ink { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.box.ink p { color: var(--on-ink-2); }
.box.ink h3 .ic { color: var(--apricot); }
.box .eg-line { margin-top: .9rem; }
@media (max-width: 900px) { .anat > *, .anat .w3, .anat .w5, .anat .w6, .anat .w7, .anat .w8 { grid-column: span 12; } }

/* mini widgets inside boxes */
.bars { display: flex; align-items: end; gap: 6px; height: 110px; margin-top: 1rem; }
.bars i { flex: 1; height: calc(var(--v) * 100%); border-radius: 6px 6px 3px 3px; background: #EBCFB8; }
.bars i.pk { background: var(--fox); }
.axis { display: flex; justify-content: space-between; font: 400 12px/1 var(--mono); color: var(--muted); margin-top: 6px; }
.meter { display: flex; align-items: baseline; gap: .5rem; margin-top: .8rem; }
.meter b { font: 720 2.8rem/1 var(--display); letter-spacing: -.04em; }
.meter span { color: var(--muted); }
.lead-reasons { margin-top: .7rem; display: grid; gap: .35rem; font-size: .9rem; }
.lead-reasons li::before { content: "+ "; color: var(--ok); font-weight: 700; }
.lead-reasons li.neg::before { content: "- "; color: var(--rust); }
.kv { display: grid; gap: .45rem; margin-top: .9rem; }
.kv div { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; padding: .45rem .7rem; border-radius: 10px; background: var(--paper); }
.kv dt { color: var(--muted); }
.kv dd { font-weight: 620; text-align: right; }
.panel-ink .kv div { background: rgba(255, 252, 248, .06); }
.panel-ink .kv dt { color: var(--on-ink-2); }

/* industries index */
.inds { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.ind { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: end; min-height: 250px; padding: 24px; border-radius: 28px; background: var(--chest); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; overflow: hidden; grid-column: span 2; transition: transform .4s var(--spring), box-shadow .3s; }
.ind:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-2); }
.ind.big { grid-column: span 3; background: var(--tint); box-shadow: none; }
.ind h2 { font: 700 1.5rem/1.1 var(--display); letter-spacing: -.02em; }
.ind p { margin-top: .5rem; color: var(--ink-2); font-size: .95rem; max-width: 24em; }
.ind img { width: 110px; align-self: end; transition: transform .5s var(--spring); }
.ind:hover img { transform: translateY(-6px) rotate(-3deg); }
.ind.big img { width: 140px; }
@media (max-width: 900px) { .inds { grid-template-columns: 1fr; } .ind, .ind.big { grid-column: auto; min-height: 0; } .ind img, .ind.big img { width: 90px; } }

/* languages page */
.lang-switch .switch-tabs { justify-content: flex-start; margin-top: 0; }
.lang-switch .switch-tabs label { padding: 8px 16px; }
.lang-panel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 1.5rem; align-items: start; }
.lang-panel .card { padding: 22px; }
@media (max-width: 860px) { .lang-panel { display: grid; grid-template-columns: 1fr; } }
.markets { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; align-items: start; }
.market { padding: 20px 22px; border-radius: 22px; background: var(--chest); box-shadow: inset 0 0 0 1px var(--line); }
.market h3 { font: 700 1.2rem/1.2 var(--display); display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.market h3 span { font: 400 12.5px/1 var(--mono); color: var(--muted); }
.market .plugs { margin-top: .9rem; }
.market .plug { font-size: .86rem; padding: 5px 10px 5px 5px; }
.market .plug .mg { width: 22px; height: 22px; font-size: 10px; border-radius: 7px; }

/* 404 */
.lost { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-block: clamp(3rem, 8vw, 6rem); }
.lost img { width: clamp(160px, 22vw, 260px); }
@media (max-width: 700px) { .lost { grid-template-columns: 1fr; } }

/* colour sticker icons (from the icon sheet) replace the line glyphs wherever an icon is a feature mark */
:is(.fi, .mm-ic, .box h3, .box .t, .kicker, .log-day li, .cs-av, .layer .fi) > .ic { width: 1.7em; height: 1.7em; }
.fi, .mm-ic, .layer .fi, .cs-av { background: var(--paper) !important; box-shadow: inset 0 0 0 1px var(--line); }
.box h3 > .ic, .box .t > .ic { width: 1.55em; height: 1.55em; }
.log-day li > .ic { width: 1.5em; height: 1.5em; transform: translateY(4px); }

/* how one call flows (how it works) */
.flow { display: grid; grid-template-columns: 1fr 60px 1fr 60px 1fr 60px 1fr; align-items: center; gap: 0; padding: clamp(18px, 3vw, 30px); border-radius: var(--r-card); background: var(--chest); box-shadow: inset 0 0 0 1px var(--line); }
.fl-node { display: grid; justify-items: center; gap: .7rem; text-align: center; }
.fl-node p { font-size: .9rem; font-weight: 600; color: var(--ink-2); }
.fl-node .tl { width: 100%; max-width: 150px; height: 84px; }
.fl-card { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 6px; width: 100%; max-width: 190px; min-height: 84px; padding: 12px; border-radius: 14px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.fl-card .b { display: block; height: 9px; width: var(--w); border-radius: 5px; }
.fl-card .b.t { background: var(--fox); margin-right: auto; } .fl-card .b.c { background: var(--ink); margin-left: auto; }
.fl-task { flex-direction: column; align-items: flex-start; font-size: .88rem; box-shadow: inset 0 0 0 2px var(--fox); }
.fl-task b { font-size: .8rem; color: var(--rust); }
.fl-pipe { position: relative; height: 4px; margin: 0 6px; border-radius: 2px; background: var(--line); align-self: center; margin-bottom: 2.2rem; }
.fl-pipe i { position: absolute; inset: 0; border-radius: 2px; background: var(--fox); transform-origin: left; }
@media (max-width: 860px) { .flow { grid-template-columns: 1fr; gap: 6px; } .fl-pipe { width: 4px; height: 26px; justify-self: center; margin: 0 0 .2rem; } .fl-pipe i { transform-origin: top; } }

/* a promise becoming a dated to-do (home) */
.promise { display: flex; flex-direction: column; align-items: flex-end; margin-bottom: 4px; }
.promise .bub { max-width: 340px; font-weight: 560; }
.promise-drop { width: 2px; height: 34px; margin-right: calc(10% - 1px); background: repeating-linear-gradient(var(--fox) 0 5px, transparent 5px 9px); transform-origin: top; }
.day.fri { position: relative; }
@media (max-width: 900px) { .promise { align-items: stretch; } .promise-drop { align-self: center; margin-right: 0; } }

/* the brief landing in Telegram */
.tg { max-width: 440px; border-radius: 22px; background: #E8EEF3; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.tg-bar { display: flex; align-items: center; gap: .55rem; padding: 10px 16px; background: var(--chest); border-bottom: 1px solid var(--line); font-size: .9rem; }
.tg-bar span:last-child { margin-left: auto; font-size: .8rem; color: var(--muted); }
.tg .msg { margin: 16px; box-shadow: var(--shadow-1); }
.tg .lg { background: #26A5E4; }

/* typing dots (idea ported from originkit's Live Chat, rebuilt in CSS) */
.aska, .ask-demo .bub.them { position: relative; }
.typing { display: none; position: absolute; left: 12px; top: 12px; gap: 5px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 252, 248, .1); }
.ask-demo .typing { background: var(--paper); }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .5; }

/* recommended plan: a slow light running round the border (idea ported from originkit's Glow Border) */
@property --a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.plan.mid::before { content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--a), transparent 0 70%, var(--apricot) 88%, var(--fox) 95%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }

/* ---------- motion (all of it) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* hero: ONE timeline. --d0 = start, --dur = length of the sweep. The playhead moves linearly, so a bar, a mark
     or a finding at position --f lights up at exactly --d0 + --f * --dur, the moment the head reaches it. */
  .callstrip { --d0: .8s; --dur: 7s; }
  .callstrip .head { animation: sweep var(--dur) linear var(--d0) both; }
  .callstrip .wf2 > i::before { animation: lit-t .06s linear both; animation-delay: calc(var(--d0) + var(--f) * var(--dur)); }
  .callstrip .wf2 > i.c::before { animation-name: lit-c; }
  .callstrip .wf-mark, .callstrip .pin { animation: pop .6s var(--spring) both; animation-delay: calc(var(--d0) + var(--f) * var(--dur)); }
  @keyframes sweep { from { left: 0; } to { left: 100%; } }
  @keyframes lit-t { from { background: var(--team-dim); } to { background: var(--team); } }
  @keyframes lit-c { from { background: var(--caller-dim); } to { background: var(--caller); } }
  .cs-fox { animation: perch 1.1s var(--spring) .2s both; }
  @keyframes sweep { from { left: 0; } to { left: 100%; } }
  @keyframes lit { from { background: #E8CDB6; } to { background: var(--fox); } }
  @keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }
  @keyframes perch { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
  .ripples circle { animation: ring 3.4s var(--ease) both; transform-origin: center; transform-box: fill-box; }
  .ripples circle:nth-child(2) { animation-delay: .25s; } .ripples circle:nth-child(3) { animation-delay: .5s; } .ripples circle:nth-child(4) { animation-delay: .75s; }
  @keyframes ring { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
  .mm-panel li { transition: transform .4s var(--ease), opacity .4s; }

  .plan.mid::before { animation: orbit 7s linear infinite; }
  .plan.mid:hover::before { animation-duration: 2.6s; }
  @keyframes orbit { to { --a: 360deg; } }
  /* Ask page: question, typing, then the answer (once, on load) */
  .ask-demo .typing { display: flex; animation: fade-out .3s linear 2.1s both; }
  .ask-demo .typing i { animation: bounce .9s ease-in-out infinite; }
  .ask-demo .typing i:nth-child(2) { animation-delay: .15s; } .ask-demo .typing i:nth-child(3) { animation-delay: .3s; }
  .ask-demo > .bub.them { animation: pop .5s var(--spring) .5s both; }
  .ask-demo > .bub.them > :not(.typing) { animation: fade-in .4s linear 2.1s both; }
  .ask-demo > .bub.us:last-child { animation: pop .6s var(--spring) 3s both; }
  @keyframes fade-out { to { opacity: 0; visibility: hidden; } }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes bounce { 0%, 100% { transform: none; opacity: .4; } 50% { transform: translateY(-4px); opacity: 1; } }

  @supports (animation-timeline: view()) {
    /* how one call flows: nodes light up left to right as the strip scrolls into view */
    .flow { view-timeline: --flow; }
    .fl-node { animation: node linear both; animation-timeline: --flow; }
    .fl-pipe i { animation: pipe linear both; animation-timeline: --flow; }
    .n1 { animation-range: entry 20% entry 45%; } .p1 i { animation-range: entry 40% entry 60%; }
    .n2 { animation-range: entry 55% entry 75%; } .p2 i { animation-range: entry 70% entry 90%; }
    .n3 { animation-range: entry 85% cover 50%; } .p3 i { animation-range: cover 45% cover 55%; }
    .n4 { animation-range: cover 52% cover 62%; }
    @keyframes node { from { opacity: .25; transform: scale(.94); } to { opacity: 1; transform: none; } }
    @keyframes pipe { from { transform: scale(0, 1); } to { transform: none; } }
    @media (max-width: 860px) { @keyframes pipe { from { transform: scale(1, 0); } to { transform: none; } } }
    /* the promise drops into Friday */
    .promise-wrap { view-timeline: --promise; }
    .promise .bub { animation: rise linear both; animation-timeline: --promise; animation-range: entry 5% entry 35%; }
    .promise-drop { animation: drop linear both; animation-timeline: --promise; animation-range: entry 35% entry 55%; }
    .task.new { animation: land linear both; animation-timeline: --promise; animation-range: entry 55% entry 80%; }
    .day.fri { animation: ring linear both; animation-timeline: --promise; animation-range: entry 70% cover 40%; }
    @keyframes drop { from { transform: scaleY(0); } to { transform: none; } }
    @keyframes land { from { opacity: 0; transform: translateY(-46px) scale(.9); } 70% { opacity: 1; transform: translateY(4px); } to { opacity: 1; transform: none; } }
    @keyframes ring { from { box-shadow: inset 0 0 0 1px var(--line); } 40% { box-shadow: inset 0 0 0 2px var(--fox), 0 0 0 6px rgba(224, 98, 31, .18); } to { box-shadow: inset 0 0 0 1px var(--line); } }
    /* the brief lands in Telegram */
    .tg { view-timeline: --tg; }
    .tg .msg.land { animation: land linear both; animation-timeline: --tg; animation-range: entry 40% cover 35%; }
    /* home Ask: steps tick through, the fox types, then the answer and its cited calls arrive */
    .askbox { view-timeline: --ask; }
    .askbox .typing { display: flex; animation: typing-scroll linear both; animation-timeline: --ask; animation-range: entry 60% cover 36%; }
    .askbox .typing i { animation: bounce .9s ease-in-out infinite; }
    .askbox .typing i:nth-child(2) { animation-delay: .15s; } .askbox .typing i:nth-child(3) { animation-delay: .3s; }
    .ask-steps span { animation: rise linear both; animation-timeline: --ask; }
    .ask-steps span:nth-child(1) { animation-range: entry 30% entry 45%; } .ask-steps span:nth-child(2) { animation-range: entry 40% entry 55%; } .ask-steps span:nth-child(3) { animation-range: entry 50% entry 65%; }
    .aska > p:first-of-type { animation: rise linear both; animation-timeline: --ask; animation-range: cover 35% cover 45%; }
    .aska .refs li { animation: talk linear both; animation-timeline: --ask; }
    .aska .refs li:nth-child(1) { animation-range: cover 40% cover 48%; } .aska .refs li:nth-child(2) { animation-range: cover 44% cover 52%; } .aska .refs li:nth-child(3) { animation-range: cover 48% cover 56%; }
    @keyframes typing-scroll { 0% { opacity: 0; } 15%, 75% { opacity: .9; } 100% { opacity: 0; } }

    .rv { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
    .bub { animation: talk linear both; animation-timeline: view(); animation-range: entry 10% entry 60%; }
    .bub.us { animation-name: talk-r; }
    .fl li { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 50%; }
    .peek { animation: peek linear both; animation-timeline: view(); animation-range: entry 10% entry 70%; }
    .paws i { animation: step linear both; animation-timeline: view(); }
    .paws i:nth-child(1) { animation-range: entry 0% entry 30%; } .paws i:nth-child(2) { animation-range: entry 15% entry 45%; }
    .paws i:nth-child(3) { animation-range: entry 30% entry 60%; } .paws i:nth-child(4) { animation-range: entry 45% entry 75%; }
    .paws i:nth-child(5) { animation-range: entry 60% entry 90%; }
    .bars i { animation: grow linear both; animation-timeline: view(); animation-range: entry 20% entry 80%; transform-origin: bottom; }
    .task { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    .hello span { animation: hi linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    @keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
    @keyframes talk { from { opacity: 0; transform: translateX(-18px) scale(.97); } to { opacity: 1; transform: none; } }
    @keyframes talk-r { from { opacity: 0; transform: translateX(18px) scale(.97); } to { opacity: 1; transform: none; } }
    @keyframes peek { from { transform: translateY(60px) rotate(-4deg); opacity: 0; } to { transform: none; opacity: 1; } }
    @keyframes step { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }
    @keyframes grow { from { transform: scaleY(.08); } to { transform: none; } }
    @keyframes hi { from { opacity: 0; transform: translateY(.4em); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
  }
}

/* icon classes, generated by build.py from /icons (line) and /icons/c (colour sticker) */
.ic-arrow-right { --i: url(/icons/arrow-right.svg); }
.ic-arrow-up-right { --i: url(/icons/arrow-up-right.svg); }
.ic-bell-ringing { --i: url(/icons/bell-ringing.svg); }
.ic-book-open-text { --i: url(/icons/book-open-text.svg); }
.ic-calendar-check { --i: url(/icons/calendar-check.svg); }
.ic-caret-down { --i: url(/icons/caret-down.svg); }
.ic-chart-bar { --i: url(/icons/chart-bar.svg); }
.ic-chat-circle-text { --i: url(/icons/chat-circle-text.svg); }
.ic-check { --i: url(/icons/check.svg); }
.ic-clock { --i: url(/icons/clock.svg); }
.ic-cookie { --i: url(/icons/cookie.svg); }
.ic-currency-dollar { --i: url(/icons/currency-dollar.svg); }
.ic-download-simple { --i: url(/icons/download-simple.svg); }
.ic-ear { --i: url(/icons/ear.svg); }
.ic-envelope-simple { --i: url(/icons/envelope-simple.svg); }
.ic-eye { --i: url(/icons/eye.svg); }
.ic-file-csv { --i: url(/icons/file-csv.svg); }
.ic-fingerprint { --i: url(/icons/fingerprint.svg); }
.ic-flag { --i: url(/icons/flag.svg); }
.ic-funnel { --i: url(/icons/funnel.svg); }
.ic-globe-hemisphere-east { --i: url(/icons/globe-hemisphere-east.svg); }
.ic-google-drive-logo { --i: url(/icons/google-drive-logo.svg); }
.ic-graduation-cap { --i: url(/icons/graduation-cap.svg); }
.ic-hard-drives { --i: url(/icons/hard-drives.svg); }
.ic-house { --i: url(/icons/house.svg); }
.ic-identification-card { --i: url(/icons/identification-card.svg); }
.ic-key { --i: url(/icons/key.svg); }
.ic-lightning { --i: url(/icons/lightning.svg); }
.ic-link-simple { --i: url(/icons/link-simple.svg); }
.ic-list-checks { --i: url(/icons/list-checks.svg); }
.ic-lock-simple { --i: url(/icons/lock-simple.svg); }
.ic-magnifying-glass { --i: url(/icons/magnifying-glass.svg); }
.ic-map-pin { --i: url(/icons/map-pin.svg); }
.ic-megaphone { --i: url(/icons/megaphone.svg); }
.ic-microphone { --i: url(/icons/microphone.svg); }
.ic-paw-print { --i: url(/icons/paw-print.svg); }
.ic-phone-incoming { --i: url(/icons/phone-incoming.svg); }
.ic-phone-x { --i: url(/icons/phone-x.svg); }
.ic-play { --i: url(/icons/play.svg); }
.ic-plugs-connected { --i: url(/icons/plugs-connected.svg); }
.ic-plus { --i: url(/icons/plus.svg); }
.ic-quotes { --i: url(/icons/quotes.svg); }
.ic-scales { --i: url(/icons/scales.svg); }
.ic-share-network { --i: url(/icons/share-network.svg); }
.ic-shield-check { --i: url(/icons/shield-check.svg); }
.ic-slack-logo { --i: url(/icons/slack-logo.svg); }
.ic-squares-four { --i: url(/icons/squares-four.svg); }
.ic-star { --i: url(/icons/star.svg); }
.ic-table { --i: url(/icons/table.svg); }
.ic-tag { --i: url(/icons/tag.svg); }
.ic-target { --i: url(/icons/target.svg); }
.ic-telegram-logo { --i: url(/icons/telegram-logo.svg); }
.ic-thumbs-up { --i: url(/icons/thumbs-up.svg); }
.ic-timer { --i: url(/icons/timer.svg); }
.ic-tooth { --i: url(/icons/tooth.svg); }
.ic-translate { --i: url(/icons/translate.svg); }
.ic-trash { --i: url(/icons/trash.svg); }
.ic-upload-simple { --i: url(/icons/upload-simple.svg); }
.ic-user-circle-check { --i: url(/icons/user-circle-check.svg); }
.ic-users-three { --i: url(/icons/users-three.svg); }
.ic-warning { --i: url(/icons/warning.svg); }
.ic-waveform { --i: url(/icons/waveform.svg); }
.ic-webhooks-logo { --i: url(/icons/webhooks-logo.svg); }
.ic-wrench { --i: url(/icons/wrench.svg); }
.ic-x { --i: url(/icons/x.svg); }
:is(.fi, .mm-ic, .box h3, .box .t, .kicker, .log-day li, .cs-av, .layer .fi) > .ic-bell-ringing { background: url(/icons/c/bell-ringing.svg) center / contain no-repeat; -webkit-mask: none; mask: none; }
:is(.fi, .mm-ic, .box h3, .box .t, .kicker, .log-day li, .cs-av, .layer .fi) > .ic-book-open-text { background: url(/icons/c/book-open-text.svg) center / contain no-repeat; -webkit-mask: none; mask: none; }
:is(.fi, .mm-ic, .box h3, .box .t, .kicker, .log-day li, .cs-av, .layer .fi) > .ic-calendar-check { background: url(/icons/c/calendar-check.svg) center / contain no-repeat; -webkit-mask: none; mask: none; }
:is(.fi, .mm-ic, .box h3, .box .t, .kicker, .log-day li, .cs-av, .layer .fi) > .ic-chart-bar { background: url(/icons/c/chart-bar.svg) center / contain no-repeat; -webkit-mask: none; mask: none; }
:is(.fi, .mm-ic, .box h3, .box .t, .kicker, .log-day li, .cs-av, .layer .fi) > .ic-chat-circle-text { background: url(/icons/c/chat-circle-text.svg) center / contain no-repeat; -webkit-mask: none; mask: none; }
:is(.fi, .mm-ic, .box h3, .box .t, .kicker, .log-day li, .cs-av, .layer .fi) > .ic-clock { background: url(/icons/c/clock.svg) center / contain no-repeat; -webkit-mask: none; mask: none; }
:is(.fi, .mm-ic, .box h3, .box .t, .kicker, .log-day li, .cs-av, .layer .fi) > .ic-currency-dollar { background: url(/icons/c/currency-dollar.svg) center / contain no-repeat; -webkit-mask: none; mask: none; }
:is(.fi, .mm-ic, .box h3, .box .t, .kicker, .log-day li, .cs-av, .layer .fi) > .ic-ear { background: url(/icons/c/ear.svg) center / contain no-repeat; -webkit-mask: none; mask: none; }
:is(.fi, .mm-ic, .box h3, .box .t, .kicker, .log-day li, .cs-av, .layer .fi) > .ic-envelope-simple { background: url(/icons/c/envelope-simple.svg) center / contain no-repeat; -webkit-mask: none; mask: none; }
:is(.fi, .mm-ic, .box h3, .box .t, .kicker, .log-day li, .cs-av, .layer .fi) > .ic-file-csv { background: url(/icons/c/file-csv.svg) center / contain no-repeat; -webkit-mask: none; mask: none; }
:is(.fi, .mm-ic, .box h3, .box .t, .kicker, .log-day li, .cs-av, .layer .fi) > .ic-flag { background: url(/icons/c/flag.svg) center / contain no-repeat; -webkit-mask: none; mask: none; }
:is(.fi, .mm-ic, .box h3, .box .t, .kicker, .log-day li, .cs-av, .layer .fi) > .ic-globe-hemisphere-east { background: url(/icons/c/globe-hemisphere-east.svg) center / contain no-repeat; -webkit-mask: none; mask: none; }
:is(.fi, .mm-ic, .box h3, .box .t, .kicker, .log-day li, .cs-av, .layer .fi) > .ic-hard-drives { background: url(/icons/c/hard-drives.svg) center / contain no-repeat; -webkit-mask: none; mask: none; }
:is(.fi, .mm-ic, .box h3, .box .t, .kicker, .log-day li, .cs-av, .layer .fi) > .ic-house { background: url(/icons/c/house.svg) center / contain no-repeat; -webkit-mask: none; mask: none; }
:is(.fi, .mm-ic, .box h3, .box .t, .kicker, .log-day li, .cs-av, .layer .fi) > .ic-key { background: url(/icons/c/key.svg) center / contain no-repeat; -webkit-mask: none; mask: none; }
:is(.fi, .mm-ic, .box h3, .box .t, .kicker, .log-day li, .cs-av, .layer .fi) > .ic-lightning { background: url(/icons/c/lightning.svg) center / contain no-repeat; -webkit-mask: none; mask: none; }
:is(.fi, .mm-ic, .box h3, .box .t, .kicker, .log-day li, .cs-av, .layer .fi) > .ic-list-checks { background: url(/icons/c/list-checks.svg) center / contain no-repeat; -webkit-mask: none; mask: none; }
:is(.fi, .mm-ic, .box h3, .box .t, .kicker, .log-day li, .cs-av, .layer .fi) > .ic-lock-simple { background: url(/icons/c/lock-simple.svg) center / contain no-repeat; -webkit-mask: none; mask: none; }
:is(.fi, .mm-ic, .box h3, .box .t, .kicker, .log-day li, .cs-av, .layer .fi) > .ic-magnifying-glass { background: url(/icons/c/magnifying-glass.svg) center / contain no-repeat; -webkit-mask: none; mask: none; }
:is(.fi, .mm-ic, .box h3, .box .t, .kicker, .log-day li, .cs-av, .layer .fi) > .ic-microphone { background: url(/icons/c/microphone.svg) center / contain no-repeat; -webkit-mask: none; mask: none; }
:is(.fi, .mm-ic, .box h3, .box .t, .kicker, .log-day li, .cs-av, .layer .fi) > .ic-phone-incoming { background: url(/icons/c/phone-incoming.svg) center / contain no-repeat; -webkit-mask: none; mask: none; }
:is(.fi, .mm-ic, .box h3, .box .t, .kicker, .log-day li, .cs-av, .layer .fi) > .ic-phone-x { background: url(/icons/c/phone-x.svg) center / contain no-repeat; -webkit-mask: none; mask: none; }
:is(.fi, .mm-ic, .box h3, .box .t, .kicker, .log-day li, .cs-av, .layer .fi) > .ic-plugs-connected { background: url(/icons/c/plugs-connected.svg) center / contain no-repeat; -webkit-mask: none; mask: none; }
:is(.fi, .mm-ic, .box h3, .box .t, .kicker, .log-day li, .cs-av, .layer .fi) > .ic-quotes { background: url(/icons/c/quotes.svg) center / contain no-repeat; -webkit-mask: none; mask: none; }
:is(.fi, .mm-ic, .box h3, .box .t, .kicker, .log-day li, .cs-av, .layer .fi) > .ic-share-network { background: url(/icons/c/share-network.svg) center / contain no-repeat; -webkit-mask: none; mask: none; }
:is(.fi, .mm-ic, .box h3, .box .t, .kicker, .log-day li, .cs-av, .layer .fi) > .ic-shield-check { background: url(/icons/c/shield-check.svg) center / contain no-repeat; -webkit-mask: none; mask: none; }
:is(.fi, .mm-ic, .box h3, .box .t, .kicker, .log-day li, .cs-av, .layer .fi) > .ic-squares-four { background: url(/icons/c/squares-four.svg) center / contain no-repeat; -webkit-mask: none; mask: none; }
:is(.fi, .mm-ic, .box h3, .box .t, .kicker, .log-day li, .cs-av, .layer .fi) > .ic-tag { background: url(/icons/c/tag.svg) center / contain no-repeat; -webkit-mask: none; mask: none; }
:is(.fi, .mm-ic, .box h3, .box .t, .kicker, .log-day li, .cs-av, .layer .fi) > .ic-target { background: url(/icons/c/target.svg) center / contain no-repeat; -webkit-mask: none; mask: none; }
:is(.fi, .mm-ic, .box h3, .box .t, .kicker, .log-day li, .cs-av, .layer .fi) > .ic-thumbs-up { background: url(/icons/c/thumbs-up.svg) center / contain no-repeat; -webkit-mask: none; mask: none; }
:is(.fi, .mm-ic, .box h3, .box .t, .kicker, .log-day li, .cs-av, .layer .fi) > .ic-translate { background: url(/icons/c/translate.svg) center / contain no-repeat; -webkit-mask: none; mask: none; }
:is(.fi, .mm-ic, .box h3, .box .t, .kicker, .log-day li, .cs-av, .layer .fi) > .ic-trash { background: url(/icons/c/trash.svg) center / contain no-repeat; -webkit-mask: none; mask: none; }
:is(.fi, .mm-ic, .box h3, .box .t, .kicker, .log-day li, .cs-av, .layer .fi) > .ic-user-circle-check { background: url(/icons/c/user-circle-check.svg) center / contain no-repeat; -webkit-mask: none; mask: none; }
:is(.fi, .mm-ic, .box h3, .box .t, .kicker, .log-day li, .cs-av, .layer .fi) > .ic-users-three { background: url(/icons/c/users-three.svg) center / contain no-repeat; -webkit-mask: none; mask: none; }
:is(.fi, .mm-ic, .box h3, .box .t, .kicker, .log-day li, .cs-av, .layer .fi) > .ic-warning { background: url(/icons/c/warning.svg) center / contain no-repeat; -webkit-mask: none; mask: none; }
:is(.fi, .mm-ic, .box h3, .box .t, .kicker, .log-day li, .cs-av, .layer .fi) > .ic-waveform { background: url(/icons/c/waveform.svg) center / contain no-repeat; -webkit-mask: none; mask: none; }