/* bipagents.com — no tracker, no third party: fonts and media are served from here. */

@font-face {
  font-family: "Nunito";
  src: url("/assets/nunito.ttf") format("truetype");
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  --ground: #F6F4F1; --ground2: #EFECE7; --card: #FFFFFF; --ink: #16181D; --ink2: #4A5163; --muted: #858B9A; --line: #E6E2DC;
  --coral: #FF7B5C; --coral-deep: #C9472A; --coral-tint: #FFE8E0;
  --green: #3CC37A; --green-deep: #1D8A4F; --green-tint: #E2F5EA;
  --gold: #F6B826; --gold-deep: #9A6A00; --gold-tint: #FFF3D1;
  --blue: #4F7CFF; --blue-deep: #2B55D4; --blue-tint: #E4EBFF;
  --violet: #8E6CF5; --violet-deep: #6142D2; --violet-tint: #EDE7FF;
  --teal: #1FB2C1; --teal-deep: #0D7F8B; --teal-tint: #DDF4F6;
  --pink: #F2649E; --pink-tint: #FDE4EE;
  --night: #15172B;
  --radius: 28px;
  --shadow: 0 1px 2px rgba(22, 24, 29, .04), 0 12px 32px -8px rgba(22, 24, 29, .12);
  --shadow-big: 0 2px 6px rgba(22, 24, 29, .06), 0 40px 90px -20px rgba(22, 24, 29, .35);
  --font: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #101217; --ground2: #15181F; --card: #1A1D25; --ink: #F2F3F6; --ink2: #B9BECB; --muted: #8A90A0; --line: #2A2E38;
    --coral-tint: #3A231D; --green-tint: #17301F; --gold-tint: #352B12; --blue-tint: #1C2440; --violet-tint: #261F40;
    --teal-tint: #142F33; --pink-tint: #3A1C29;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -8px rgba(0, 0, 0, .5);
    --shadow-big: 0 2px 6px rgba(0, 0, 0, .3), 0 40px 90px -20px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.5;
  font-weight: 600; overflow-x: clip; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
a { color: inherit; }
main { overflow-x: clip; }
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; font-weight: 900; letter-spacing: -.03em; }
h2 { font-size: clamp(34px, 5.2vw, 64px); line-height: 1.02; }
h3 { font-size: 21px; letter-spacing: -.01em; }
p { margin: 0; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; z-index: 99; background: var(--ink); color: var(--ground); padding: 10px 14px; border-radius: 12px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 10px; }

/* -- Bips ----------------------------------------------------------------------------------------------------- */
.bip { position: relative; display: block; touch-action: none; user-select: none; -webkit-user-select: none; }
.bip[role="button"] { cursor: grab; }
.bip[role="button"]:active { cursor: grabbing; }
.bip-svg, .bip-svg svg { width: 100%; height: 100%; display: block; overflow: visible; }
.bip-bubble {
  position: absolute; left: 50%; top: -6px; transform: translate(-50%, -100%) scale(.6); opacity: 0; z-index: 3;
  background: var(--card); color: var(--ink); font-weight: 900; font-size: 15px; padding: 7px 13px; border-radius: 999px;
  white-space: nowrap; box-shadow: var(--shadow); pointer-events: none;
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), opacity .2s;
}
.bip-bubble.show { opacity: 1; transform: translate(-50%, -100%) scale(1); }
.bip-particle { position: absolute; top: 30%; pointer-events: none; font-size: 20px; animation: float-up 1.5s ease-out forwards; }
@keyframes float-up { from { opacity: 1; transform: translate(-50%, 0) scale(.6); } to { opacity: 0; transform: translate(-50%, -90px) scale(1.2); } }

/* -- Header ---------------------------------------------------------------------------------------------------- */
.top {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 20px; padding: 14px max(20px, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--ground) 78%, transparent); backdrop-filter: saturate(1.6) blur(18px);
  -webkit-backdrop-filter: saturate(1.6) blur(18px); border-bottom: 1px solid transparent; transition: border-color .3s;
}
.top.scrolled { border-bottom-color: var(--line); }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: 21px; letter-spacing: -.02em; }
.brand-bip { width: 34px; height: 34px; display: inline-block; }
.brand-name { font-weight: 800; }
.brand-name b { font-weight: 1000; }
.top-links { display: none; gap: 26px; margin-left: 18px; }
.top-links a { text-decoration: none; color: var(--ink2); font-weight: 800; font-size: 15px; }
.top-links a:hover { color: var(--ink); }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
@media (max-width: 520px) { .brand { font-size: 19px; } }
@media (max-width: 360px) { .brand-name { display: none; } }
section[id] { scroll-margin-top: 72px; }
.lang { position: relative; }
.lang summary {
  list-style: none; cursor: pointer; height: 38px; min-width: 50px; padding: 0 12px; border-radius: 999px; display: grid;
  place-items: center; font-weight: 900; font-size: 14px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line);
}
.lang summary::-webkit-details-marker { display: none; }
.lang-menu {
  position: absolute; right: 0; top: 46px; background: var(--card); border-radius: 18px; padding: 6px; box-shadow: var(--shadow-big);
  display: grid; min-width: 160px;
}
.lang-menu a { text-decoration: none; padding: 9px 12px; border-radius: 12px; font-weight: 800; font-size: 15px; }
.lang-menu a:hover, .lang-menu a[aria-current] { background: var(--ground2); }
@media (min-width: 900px) { .top-links { display: flex; } }

/* -- Buttons --------------------------------------------------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 54px; padding: 0 24px; border-radius: 999px;
  text-decoration: none; font-weight: 900; font-size: 16px; border: 0; cursor: pointer; font-family: inherit; white-space: nowrap;
  transition: transform .2s cubic-bezier(.3, 1.5, .5, 1), box-shadow .2s;
}
.pill:hover { transform: translateY(-2px); }
.pill.small { height: 38px; padding: 0 16px; font-size: 14px; }
.pill-ink { background: var(--ink); color: var(--ground); }
.pill-soft { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.store {
  display: inline-flex; flex-direction: column; justify-content: center; height: 58px; padding: 0 22px; border-radius: 18px;
  background: var(--ink); color: var(--ground); line-height: 1.05; min-width: 150px;
}
.store-kicker { font-size: 12px; font-weight: 800; opacity: .7; }
.store-name { font-size: 20px; font-weight: 1000; letter-spacing: -.01em; }

/* -- Hero ------------------------------------------------------------------------------------------------------ */
.hero {
  position: relative; display: grid; gap: 30px; padding: 40px 20px 80px; max-width: 1240px; margin: 0 auto; align-items: center;
}
@media (min-width: 1040px) { .hero { grid-template-columns: 1.05fr .95fr; padding: 64px 32px 110px; min-height: calc(100svh - 70px); } }
.aurora { position: absolute; inset: -120px calc(50% - 50vw) 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; animation: drift 22s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { width: 520px; height: 520px; background: var(--coral); left: 52%; top: 0; opacity: .32; }
.aurora i:nth-child(2) { width: 460px; height: 460px; background: var(--green); left: 70%; top: 40%; opacity: .26; animation-delay: -7s; }
.aurora i:nth-child(3) { width: 420px; height: 420px; background: var(--violet); left: 38%; top: 55%; opacity: .2; animation-delay: -14s; }
@keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-80px, 60px) scale(1.15); } }
@media (prefers-color-scheme: dark) { .aurora i { opacity: .2 !important; } }

.badge {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px 8px 10px; border-radius: 999px; text-decoration: none;
  background: var(--card); box-shadow: var(--shadow); font-size: 14px; font-weight: 900; color: var(--ink2);
}
.badge-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-tint); }
h1 { font-size: clamp(46px, 5.6vw, 84px); line-height: .96; letter-spacing: -.045em; margin: 26px 0 26px; }
.h-line { display: block; }
.h-mark { position: relative; width: fit-content; z-index: 0; }
.h-mark::after {
  content: ""; position: absolute; left: -.06em; right: -.08em; bottom: .06em; height: .32em; z-index: -1; border-radius: .2em;
  transform-origin: left; transform: scaleX(0); transition: transform .9s cubic-bezier(.2, .9, .2, 1) .35s;
}
.mark-green::after { background: color-mix(in srgb, var(--green) 45%, transparent); }
.mark-coral::after { background: color-mix(in srgb, var(--coral) 45%, transparent); transition-delay: .6s; }
.in .h-mark::after { transform: scaleX(1); }
.lede { font-size: clamp(18px, 1.6vw, 21px); color: var(--ink2); max-width: 560px; line-height: 1.5; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; align-items: center; }
.cta-row.center { justify-content: center; }
.trust { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--muted); font-size: 15px; font-weight: 800; }
.trust li::before { content: "✓"; color: var(--green-deep); margin-right: 7px; font-weight: 1000; }

.hero-stage { position: relative; height: 640px; display: grid; place-items: center; }
@media (max-width: 1039px) { .hero-stage { height: 600px; margin-top: 10px; } }
@media (max-width: 520px) { .hero-stage { height: 540px; } }
.halo { position: absolute; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--coral) 30%, transparent), transparent 65%); filter: blur(10px); }
.phone {
  position: relative; border-radius: 56px; padding: 11px; background: #0D0E11;
  box-shadow: var(--shadow-big), inset 0 0 0 2px #2A2C33;
}
.phone::before { content: ""; position: absolute; left: 50%; top: 22px; width: 34%; height: 30px; transform: translateX(-50%);
  background: #000; border-radius: 20px; z-index: 2; }
.phone-screen { border-radius: 46px; overflow: hidden; background: var(--ground); }
.phone-screen img { width: 100%; height: auto; }
.phone-hero { width: min(300px, 70vw); transform: rotate(-4deg); animation: phone-float 7s ease-in-out infinite; }
@keyframes phone-float { 50% { transform: rotate(-3deg) translateY(-12px); } }
.float-bip { position: absolute; width: 130px; height: 130px; z-index: 3; animation: bob 6s ease-in-out infinite; }
.fb-1 { left: 2%; top: 13%; width: 150px; height: 150px; }
.fb-2 { right: 1%; top: 30%; animation-delay: -2s; }
.fb-3 { left: 6%; bottom: 10%; width: 120px; height: 120px; animation-delay: -4s; }
.fb-4 { right: 8%; bottom: 4%; width: 110px; height: 110px; animation-delay: -1s; }
@keyframes bob { 50% { translate: 0 -14px; } }
@media (max-width: 520px) {
  .float-bip { width: 92px !important; height: 92px !important; }
  .fb-1 { left: -2%; } .fb-2 { right: -3%; }
}
.toasts { position: absolute; top: 6%; left: 50%; width: min(360px, 88vw); translate: -50% 0; z-index: 4; height: 90px; }
.toast {
  position: absolute; inset: 0 auto auto 0; width: 100%; display: flex; gap: 12px; align-items: center; padding: 12px 14px;
  border-radius: 24px; background: color-mix(in srgb, var(--card) 82%, transparent); backdrop-filter: blur(22px) saturate(1.8);
  -webkit-backdrop-filter: blur(22px) saturate(1.8); box-shadow: var(--shadow-big); opacity: 0; transform: translateY(-30px) scale(.94);
  transition: opacity .5s, transform .6s cubic-bezier(.25, 1.4, .4, 1);
}
.toast.show { opacity: 1; transform: none; }
.toast.leave { opacity: 0; transform: translateY(16px) scale(.96); }
.toast-bip { flex: 0 0 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; }
.toast[data-cat="daily"] .toast-bip { background: var(--coral-tint); }
.toast[data-cat="finance"] .toast-bip { background: var(--gold-tint); }
.toast[data-cat="wellness"] .toast-bip { background: var(--green-tint); }
.toast[data-cat="home"] .toast-bip { background: var(--teal-tint); }
.toast-bip svg { width: 38px; height: 38px; }
.toast > span:last-child { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; font-size: 14px; line-height: 1.3; min-width: 0; }
.toast b { font-weight: 900; }
.toast small { color: var(--muted); font-weight: 700; font-size: 12px; }
.toast em { grid-column: 1 / -1; font-style: normal; color: var(--ink2); font-weight: 700; }

/* -- Marquee --------------------------------------------------------------------------------------------------- */
.marquee { overflow: hidden; padding: 22px 0; background: var(--ink); color: var(--ground); transform: rotate(-1.5deg); margin: 0 -10px; }
.marquee-track { display: flex; gap: 40px; width: max-content; animation: marquee 38s linear infinite; font-size: clamp(26px, 3.4vw, 40px); font-weight: 1000; letter-spacing: -.02em; }
.marquee-track span { display: inline-flex; align-items: center; gap: 40px; white-space: nowrap; }
.marquee-track i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* -- Sections -------------------------------------------------------------------------------------------------- */
.section { max-width: 1240px; margin: 0 auto; padding: 88px 20px 0; }
@media (min-width: 900px) { .section { padding: 96px 32px 0; } }
.section-head { text-align: center; max-width: 820px; margin: 0 auto 42px; }
.section-head.left { text-align: left; margin: 0 0 40px; }
.kicker { font-size: 14px; font-weight: 1000; letter-spacing: .12em; text-transform: uppercase; color: var(--coral-deep); margin-bottom: 14px; }
.sub { font-size: clamp(18px, 1.5vw, 20px); color: var(--ink2); margin-top: 18px; line-height: 1.55; }
.checks { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.checks li { display: flex; gap: 12px; font-weight: 800; color: var(--ink2); }
.checks li::before { content: "✓"; flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 14px;
  background: var(--green-tint); color: var(--green-deep); font-weight: 1000; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .9s cubic-bezier(.2, .9, .2, 1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* -- Demo chat ------------------------------------------------------------------------------------------------- */
.demo-grid { display: grid; gap: 50px; align-items: center; }
@media (min-width: 1000px) { .demo-grid { grid-template-columns: .9fr 1.1fr; gap: 70px; } }
.tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.tab {
  display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 18px 0 8px; border-radius: 999px; border: 0; cursor: pointer;
  font: inherit; font-weight: 900; font-size: 15px; background: var(--card); color: var(--ink2); box-shadow: inset 0 0 0 1.5px var(--line);
}
.tab.active { background: var(--ink); color: var(--ground); box-shadow: none; }
.tab-bip { width: 36px; height: 36px; }
.tab-bip svg { width: 100%; height: 100%; }
.chat-wrap { position: relative; }
.chat-wrap::before { content: ""; position: absolute; inset: 8% -6% -6% 10%; border-radius: 40px; background: var(--chat-tint, var(--coral-tint)); z-index: -1; transform: rotate(3deg); transition: background .5s; }
.chat {
  border-radius: 34px; background: var(--ground); box-shadow: var(--shadow-big); overflow: hidden; height: 640px; display: flex; flex-direction: column;
  border: 1px solid var(--line);
}
.chat-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px; background: var(--card); border-bottom: 1px solid var(--line); }
.chat-avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--chat-tint, var(--coral-tint)); }
.chat-avatar svg { width: 36px; height: 36px; }
.chat-title { display: grid; line-height: 1.25; }
.chat-head small { color: var(--muted); font-size: 13px; font-weight: 700; }
.ai { font-size: 10px; font-weight: 1000; padding: 2px 6px; border-radius: 6px; background: var(--chat-tint, var(--coral-tint)); color: var(--chat-deep, var(--coral-deep)); vertical-align: 2px; }
.replay { margin-left: auto; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--ground2); color: var(--ink); font-size: 18px; font-weight: 900; cursor: pointer; }
.chat-body { flex: 1; overflow: hidden; padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; }
.chat-body > :first-child { margin-top: auto; }   /* the thread sits at the bottom; what no longer fits leaves at the top */
.chat-input { margin: 0 14px 14px; height: 48px; border-radius: 24px; background: var(--card); display: flex; align-items: center; padding: 0 6px 0 18px; color: var(--muted); font-size: 15px; box-shadow: inset 0 0 0 1px var(--line); }
.chat-input .mic { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; background: var(--chat-main, var(--coral)); }
.msg { max-width: 86%; animation: pop-in .45s cubic-bezier(.25, 1.4, .4, 1) both; font-size: 15.5px; line-height: 1.45; }
@keyframes pop-in { from { opacity: 0; transform: translateY(12px) scale(.96); } }
.msg.you { align-self: flex-end; background: var(--ink); color: var(--ground); padding: 10px 16px; border-radius: 22px 22px 6px 22px; font-weight: 700; }
.msg.bot { align-self: flex-start; display: flex; gap: 9px; }
.msg.bot .av { flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--chat-tint, var(--coral-tint)); display: grid; place-items: center; margin-top: 2px; }
.msg.bot .av svg { width: 26px; height: 26px; }
.msg.bot .txt { color: var(--ink); font-weight: 600; }
.msg.bot .txt b { font-weight: 900; }
.think { align-self: flex-start; font-size: 14px; color: var(--muted); font-style: italic; padding: 8px 14px; border-radius: 16px; background: var(--ground2); max-width: 88%; animation: pop-in .4s both; }
.think::before { content: "💭 "; font-style: normal; }
.tool { align-self: flex-start; display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 10px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; max-width: 92%; animation: pop-in .4s both; }
.tool .ic { flex: 0 0 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; background: var(--ground2); }
.tool b { font-weight: 900; font-size: 13px; color: var(--ink2); display: block; line-height: 1.2; }
.tool span { color: var(--muted); font-weight: 700; font-size: 13px; }
.tool .st { margin-left: 4px; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--line); border-top-color: var(--chat-main, var(--coral)); animation: spin .8s linear infinite; flex: 0 0 18px; }
.tool.done .st { animation: none; border: 0; background: var(--green); position: relative; }
.tool.done .st::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 1000; }
@keyframes spin { to { transform: rotate(360deg); } }
.card-q, .card-a { align-self: stretch; border-radius: 22px; background: var(--card); box-shadow: var(--shadow); padding: 16px; animation: pop-in .45s both; }
.card-q p, .card-a p { font-weight: 900; margin-bottom: 12px; }
.card-q .opts { display: grid; gap: 8px; }
.card-q .opt { padding: 11px 14px; border-radius: 14px; background: var(--ground2); font-weight: 800; font-size: 14.5px; transition: background .3s, color .3s, transform .3s; }
.card-q .opt.chosen { background: var(--chat-main, var(--coral)); color: #fff; transform: scale(1.02); }
.card-a { border: 2px solid var(--chat-main, var(--coral)); }
.card-a code { display: block; white-space: pre-wrap; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; background: var(--ground2); padding: 10px 12px; border-radius: 12px; margin-bottom: 12px; color: var(--ink2); }
.card-a .btns { display: flex; gap: 8px; flex-wrap: wrap; }
.card-a .btns span { flex: 1; text-align: center; padding: 10px 8px; border-radius: 999px; font-weight: 900; font-size: 13.5px; background: var(--ground2); transition: all .3s; white-space: nowrap; }
.card-a .btns span.chosen { background: var(--ink); color: var(--ground); transform: scale(1.04); }
.typing { align-self: flex-start; display: flex; gap: 5px; padding: 12px 16px; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: dot 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 30% { transform: translateY(-5px); opacity: .5; } }

/* -- Play glyph, rings (the story's podcast button and Live call) ---------------------------------------------- */
.i-play { width: 0; height: 0; border-left: 14px solid #1B1D3A; border-top: 8.5px solid transparent; border-bottom: 8.5px solid transparent; margin-left: 4px; }
.playing .i-play { width: 14px; height: 16px; border: 0; margin: 0; background: linear-gradient(90deg, #1B1D3A 0 35%, transparent 35% 65%, #1B1D3A 65%); }
.rings { position: absolute; inset: 0; display: grid; place-items: center; }
.rings i { position: absolute; width: 120px; height: 120px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--coral) 45%, transparent); animation: ring 3s ease-out infinite; }
.rings i:nth-child(2) { animation-delay: 1s; } .rings i:nth-child(3) { animation-delay: 2s; }
@keyframes ring { from { transform: scale(.7); opacity: 1; } to { transform: scale(2); opacity: 0; } }

/* -- Install --------------------------------------------------------------------------------------------------- */
.windows { max-width: 940px; margin: 16px auto 0; color: var(--ink2); font-size: 15px; text-align: center; }
.windows code { display: inline-block; margin-top: 4px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13.5px; background: var(--card);
  padding: 4px 10px; border-radius: 10px; box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink); word-break: break-all; user-select: all; }
.terminal { position: relative; border-radius: 26px; background: #0F1116; color: #E7E9EF; overflow: hidden; box-shadow: var(--shadow-big); }
.term-bar { display: flex; align-items: center; gap: 7px; padding: 14px 16px; background: #171A21; }
.term-bar i { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; } .term-bar i:nth-child(2) { background: #FEBC2E; } .term-bar i:nth-child(3) { background: #28C840; }
.term-bar span { margin-left: 10px; color: #6B7280; font-size: 13px; font-weight: 800; }
.terminal pre { margin: 0; padding: 22px 22px 76px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 14px; line-height: 1.7; white-space: pre-wrap; word-break: break-all; min-height: 300px; }
.prompt { color: #3CC37A; }
.caret { display: inline-block; width: 9px; height: 18px; background: #E7E9EF; vertical-align: -3px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.out { display: block; color: #9AA3B2; opacity: 0; transition: opacity .4s; }
.out.show { opacity: 1; }
.out.o3 { color: #9FE4BC; }
.out.qr { color: #E7E9EF; line-height: 1.1; margin-top: 8px; }
.copy { position: absolute; right: 16px; bottom: 16px; height: 42px; padding: 0 18px; border-radius: 999px; border: 0; background: #fff; color: #0F1116; font: inherit; font-weight: 900; font-size: 14px; cursor: pointer; }
/* -- FAQ ------------------------------------------------------------------------------------------------------- */
.faq { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { background: var(--card); border-radius: 24px; box-shadow: var(--shadow); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 64px 22px 26px; font-weight: 900; font-size: 18px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; translate: 0 -50%; width: 32px; height: 32px; border-radius: 50%; background: var(--ground2); display: grid; place-items: center; font-weight: 900; transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 26px 24px; color: var(--ink2); }

/* -- Footer ---------------------------------------------------------------------------------------------------- */
.foot { border-top: 1px solid var(--line); padding: 56px 20px 40px; max-width: 1240px; margin: 0 auto; }
.foot-grid { display: grid; gap: 34px; }
@media (min-width: 800px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot-grid p { color: var(--ink2); margin-top: 12px; max-width: 420px; font-size: 15px; }
.foot nav { display: grid; gap: 8px; align-content: start; }
.foot nav b { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 4px; }
.foot nav a { text-decoration: none; font-weight: 800; color: var(--ink2); }
.foot nav a:hover { color: var(--ink); }
.foot-fine { margin-top: 40px; color: var(--muted); font-size: 13.5px; font-weight: 700; line-height: 1.6; }

/* Why it's private: a usual assistant above BipAgents (the apps' PrivacyDiagram). */
.compare { max-width: 720px; margin: 0 auto; display: grid; gap: 14px; }
.cmp-row { border-radius: 26px; padding: 16px; background: var(--card); border: 1px solid var(--line); }
.cmp-bip { background: var(--green-tint); border: 1.5px solid rgba(60, 195, 122, .5); }
.cmp-title { display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 16px; margin: 0 0 12px; }
.cmp-dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: #fff; }
.cmp-grey { background: #6B7489; } .cmp-green { background: var(--green); }
.cmp-flow { display: flex; align-items: flex-start; }
.cmp-node { display: grid; justify-items: center; text-align: center; gap: 4px; }
.cmp-node > :first-child { height: 62px; display: grid; place-items: center; }
.cmp-node b { font-size: 13.5px; font-weight: 1000; }
.cmp-node small { font-size: 12px; font-weight: 700; color: var(--ink2); line-height: 1.25; }
.cmp-small { width: 54px; flex: none; } .cmp-wide { flex: 1; min-width: 0; } .cmp-side { width: 92px; flex: none; }
.cmp-pic { display: block; margin: auto; max-width: 100%; }
.cmp-badge { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; }
.cmp-violet { background: var(--violet-tint); border: 2.5px solid var(--violet); }
.cmp-pink { background: var(--pink-tint); border: 2.5px solid var(--pink); color: #C23774; font-weight: 900; }
.cmp-house { position: relative; width: 70px; }
.cmp-house svg { position: absolute; left: 0; top: 2px; }
.cmp-house i { position: absolute; left: 15px; top: 22px; width: 34px; height: 34px; }
.cmp-house i svg { position: static; width: 100%; height: 100%; }
.cmp-house em { position: absolute; right: -2px; bottom: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--gold-deep); font-size: 10px; display: grid; place-items: center; font-style: normal; border: 2px solid var(--card); }
/* An arrow: its line, its head (and a second one when there and back), a dot running along it. */
.cmp-arrow { flex: none; width: 30px; height: 62px; position: relative; }
.cmp-arrow::before { content: ""; position: absolute; left: 4px; right: 4px; top: 30px; height: 2.5px; border-radius: 2px; background: currentColor; opacity: .75; }
.cmp-arrow::after { content: ""; position: absolute; right: 4px; top: 27px; width: 7px; height: 7px; border-top: 2.5px solid currentColor; border-right: 2.5px solid currentColor; transform: rotate(45deg); }
.cmp-both i::before { content: ""; position: absolute; left: 4px; top: 27px; width: 7px; height: 7px; border-bottom: 2.5px solid currentColor; border-left: 2.5px solid currentColor; transform: rotate(45deg); }
.cmp-arrow i { position: absolute; inset: 0; }
.cmp-arrow i::after { content: ""; position: absolute; top: 28px; left: 4px; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: cmp-run 1.8s linear infinite; }
.cmp-both i::after { animation: cmp-back 3.6s linear infinite; }
.cmp-arrow-grey { color: #6B7489; } .cmp-arrow-green { color: var(--green-deep); } .cmp-arrow-pink { color: #C23774; }
.cmp-arrow-pink::before { height: 1.6px; }
@keyframes cmp-run { from { left: 4px; } to { left: calc(100% - 11px); } }
@keyframes cmp-back { 0%, 100% { left: 4px; } 50% { left: calc(100% - 11px); } }
@media (prefers-reduced-motion: reduce) { .cmp-arrow i::after { display: none; } }
@media (prefers-color-scheme: dark) { .cmp-arrow-green { color: var(--green); } .cmp-arrow-pink, .cmp-pink { color: var(--pink); } }
.cmp-kerfy { margin: 12px 0 0; padding: 8px 12px; border: 1.2px dashed rgba(127, 133, 150, .5); border-radius: 14px; font-size: 13px; font-weight: 700; color: var(--ink2); }
.cmp-kerfy b { font-weight: 1000; }
.cmp-lines { list-style: none; max-width: 720px; margin: 26px auto 0; padding: 0; display: grid; gap: 12px; }
.cmp-lines li { display: flex; align-items: flex-start; gap: 12px; font-weight: 800; font-size: 16.5px; line-height: 1.45; }
.cmp-lines span { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--card); font-size: 15px; }
.cmp-note { max-width: 720px; margin: 18px auto 0; font-size: 13.5px; color: var(--muted); font-weight: 700; line-height: 1.5; }
.cmp-note a { color: var(--ink); font-weight: 900; }

/* ================================================================================================================
   Selling the offer: buy buttons, store badges, the day with the Bips, the pages in the chat, the plan picker.
   ================================================================================================================ */
mark.todo { background: #FFE58A; color: #5A4300; border-radius: 4px; padding: 0 3px; font-weight: 900; }

/* -- Buy buttons, badges ---------------------------------------------------------------------------------------- */
.pill-buy {
  background: linear-gradient(135deg, #FF8A5C, var(--coral) 45%, #F2649E); color: #fff; height: 58px; padding: 0 28px; font-size: 17px;
  box-shadow: 0 10px 28px -10px rgba(242, 100, 158, .7), inset 0 -2px 0 rgba(0, 0, 0, .12);
}
.pill-buy:hover { box-shadow: 0 16px 34px -10px rgba(242, 100, 158, .8), inset 0 -2px 0 rgba(0, 0, 0, .12); }
.pill-buy.small { height: 42px; padding: 0 18px; font-size: 15px; }
.store { flex-direction: row; align-items: center; gap: 10px; text-decoration: none; min-width: 168px; padding: 0 18px; }
.store-text { display: grid; line-height: 1.05; }
.store-glyph { display: grid; place-items: center; }
a.store { transition: transform .2s; }
a.store:hover { transform: translateY(-2px); }
.hero-price { margin-top: 18px; font-weight: 900; color: var(--ink2); font-size: 15.5px; }
.trust { margin-top: 18px; }

/* -- Header progress, phone tilt --------------------------------------------------------------------------------- */
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none; }
.progress i { display: block; height: 100%; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--coral), var(--gold), var(--green), var(--teal), var(--violet)); }
.phone-hero { --rx: 0deg; --ry: 0deg; transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) rotate(-4deg);
  animation: phone-bob 7s ease-in-out infinite; transition: transform .25s ease-out; }
@keyframes phone-bob { 50% { translate: 0 -12px; } }
@media (prefers-reduced-motion: reduce) { .phone-hero, .float-bip { animation: none; } }

/* -- Pages in the chat: the walk's map, the page kit's page ------------------------------------------------------ */
.page-card { align-self: stretch; margin-left: 39px; border-radius: 20px; background: var(--card); box-shadow: var(--shadow); padding: 12px; animation: pop-in .5s both; flex: none; }
.pc-title { font-weight: 1000; font-size: 16px; }
.pc-sub, .pc-src { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.pc-tip { font-size: 13px; font-weight: 700; color: var(--ink2); margin-top: 8px; }
.map { position: relative; margin-top: 8px; border-radius: 14px; overflow: hidden; aspect-ratio: 3 / 2; background: var(--ground2); }
.map img { width: 100%; height: 100%; object-fit: cover; }
.pin { position: absolute; width: 30px; height: 30px; translate: -50% -50%; border-radius: 50%; border: 0; background: transparent; cursor: pointer; padding: 0; }
.pin::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--c); opacity: 0; transform: scale(.6); }
.pin.on::after { animation: ping 1.4s ease-out infinite; }
@keyframes ping { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.8); } }
.stops { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.stops li { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; cursor: pointer; border-radius: 8px; padding: 2px 4px; }
.stops li.on { background: var(--ground2); }
.stops i { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--c); color: #fff; font-style: normal; font-size: 11px; display: grid; place-items: center; font-weight: 1000; }
.kit-card { padding: 0; overflow: hidden; }
.frame { height: 330px; overflow: hidden; }
.frame iframe { width: 100%; height: 100%; border: 0; display: block; background: #F3F4F7; }
.pc-open { display: block; padding: 10px 14px; font-size: 13px; font-weight: 900; text-decoration: none; color: var(--chat-deep, var(--coral-deep)); border-top: 1px solid var(--line); }
.chat { height: 680px; }
@media (max-width: 520px) { .chat { height: 620px; } .page-card { margin-left: 0; } .frame { height: 300px; } }

/* -- A day with the Bips ------------------------------------------------------------------------------------------ */
.day { display: grid; gap: 30px; }
@media (min-width: 1000px) { .day { grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } }
.day-stage { display: none; }
@media (min-width: 1000px) {
  .day-stage { display: grid; place-items: center; position: sticky; top: 90px; height: calc(100vh - 120px); max-height: 760px; }
  .day-stage::before { content: ""; position: absolute; width: 440px; height: 440px; border-radius: 50%; background: var(--day-tint, var(--coral-tint)); transition: background .6s; z-index: -1; }
}
.phone-day { width: 300px; transform: rotate(-2deg); }
.day-screen { position: relative; height: 560px; background: linear-gradient(180deg, var(--ground), var(--ground2)); }
.day-status { display: flex; justify-content: space-between; padding: 20px 28px 0; font-size: 13px; font-weight: 1000; position: relative; z-index: 3; }
.day-sig { display: flex; align-items: flex-end; gap: 2px; } .day-sig i { width: 3px; border-radius: 1px; background: var(--ink); height: 5px; } .day-sig i:nth-child(2) { height: 7px; } .day-sig i:nth-child(3) { height: 9px; } .day-sig i:nth-child(4) { height: 11px; }
.day-bip { position: absolute; width: 110px; height: 110px; right: 6%; bottom: 8%; z-index: 4; }
.day-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; }
.day-step { border-radius: 30px; padding: 22px 22px 26px; background: var(--card); box-shadow: var(--shadow); transition: transform .5s, opacity .5s, box-shadow .5s; }
.day-step h3 { font-size: clamp(22px, 2.2vw, 28px); margin-top: 8px; }
.day-step p { color: var(--ink2); margin-top: 8px; }
.day-time { display: inline-block; font-weight: 1000; font-size: 14px; padding: 4px 12px; border-radius: 999px; background: var(--ground2); font-variant-numeric: tabular-nums; }
.day-step.on .day-time { background: var(--ink); color: var(--ground); }
@media (min-width: 1000px) {
  .day-steps { padding: 4vh 0 8vh; gap: 10vh; }
  .day-step { opacity: .42; transform: scale(.97); }
  .day-step.on { opacity: 1; transform: none; box-shadow: var(--shadow-big); }
  .day-inline { display: none; }
}
.day-inline { position: relative; padding: 14px; border-radius: 24px; overflow: hidden; margin-bottom: 18px; background: linear-gradient(180deg, var(--ground), var(--ground2)); box-shadow: inset 0 0 0 1px var(--line); }
.day-inline .scene { position: static; opacity: 1; transform: none; }
.day-inline .s-approve { margin-top: 0; }

/* The screens of the story. */
.scene { position: absolute; left: 14px; right: 14px; top: 56px; display: grid; gap: 10px; opacity: 0; transform: translateY(24px) scale(.97);
  transition: opacity .45s, transform .6s cubic-bezier(.2, 1.2, .3, 1); font-size: 13.5px; line-height: 1.35; }
.scene.on { opacity: 1; transform: none; }
.scene b { font-weight: 1000; }
.scene small, .s-small { color: var(--muted); font-weight: 700; font-size: 12px; }
.s-ic { flex: none; width: 34px; height: 34px; border-radius: 11px; background: var(--coral-tint); display: grid; place-items: center; }
.s-ic svg { width: 30px; height: 30px; }
.s-notif { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 20px; background: color-mix(in srgb, var(--card) 85%, transparent); box-shadow: var(--shadow); }
.s-notif > span:last-child { display: grid; }
.s-notif em { font-style: normal; color: var(--ink2); font-weight: 700; }
.s-pod { border-radius: 22px; padding: 16px; color: #fff; display: grid; justify-items: center; text-align: center; gap: 4px;
  background: radial-gradient(120% 90% at 85% 110%, #FF9D6E 0%, #E8638A 30%, #6B4BC4 62%, #1B1D3A 95%); }
.s-pod small { color: rgba(255, 255, 255, .75); }
.s-pod-bips { display: flex; gap: 6px; } .s-pod-bips span { width: 64px; height: 64px; } .s-pod-bips svg { width: 100%; height: 100%; }
.s-pod-bar { display: flex; align-items: center; gap: 3px; width: 100%; height: 34px; margin-top: 8px; }
.s-play { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; margin-right: 6px; }
.s-pod-bar i { flex: 1; border-radius: 3px; background: rgba(255, 255, 255, .7); height: 30%; animation: eq 1.1s ease-in-out infinite alternate; }
.s-pod-bar i:nth-child(3n) { animation-delay: -.4s; } .s-pod-bar i:nth-child(3n+1) { animation-delay: -.8s; }
@keyframes eq { to { height: 95%; } }
.s-head { display: flex; align-items: center; gap: 10px; }
.s-mail { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.s-mail > span:last-child { display: grid; }
.s-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; }
.s-dot.coral { background: var(--coral); } .s-dot.violet { background: var(--violet); } .s-dot.teal { background: var(--teal); }
.s-rest { font-size: 12px; color: var(--muted); font-weight: 800; padding: 0 4px; }
.s-chip { justify-self: start; padding: 8px 12px; border-radius: 999px; background: var(--green-tint); color: var(--green-deep); font-weight: 900; font-size: 12.5px; }
.s-carnet { border-radius: 20px; background: var(--card); padding: 14px; box-shadow: var(--shadow); display: grid; gap: 4px; }
.s-carnet h4 { margin: 0 0 4px; font-size: 19px; font-weight: 1000; letter-spacing: -.02em; }
.s-kind { font-size: 11.5px; font-weight: 900; color: var(--violet-deep); text-transform: uppercase; letter-spacing: .06em; }
.s-status { background: var(--violet-tint); border-radius: 12px; padding: 8px 10px; font-weight: 700; }
.s-sec { margin-top: 6px; font-size: 11.5px; font-weight: 1000; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.s-task { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.s-task i { width: 16px; height: 16px; border-radius: 5px; border: 2px solid var(--line); flex: none; }
.s-task.done { color: var(--muted); text-decoration: line-through; }
.s-task.done i { background: var(--green); border-color: var(--green); }
.s-budget { height: 9px; border-radius: 99px; background: var(--ground2); overflow: hidden; }
.s-budget span { display: block; height: 100%; width: var(--w); border-radius: 99px; background: linear-gradient(90deg, var(--violet), var(--pink)); }
.s-docs { display: flex; flex-wrap: wrap; gap: 6px; } .s-docs span { font-size: 12px; font-weight: 800; padding: 5px 9px; border-radius: 10px; background: var(--ground2); }
.s-desk { border-radius: 18px; overflow: hidden; background: var(--card); box-shadow: var(--shadow); }
.s-desk-bar { display: flex; align-items: center; gap: 5px; padding: 9px 10px; background: var(--ground2); }
.s-desk-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.s-desk-bar span { margin-left: 6px; font-size: 11px; color: var(--muted); font-weight: 800; background: var(--card); padding: 2px 8px; border-radius: 999px; }
.s-desk-page { position: relative; padding: 12px 14px; display: grid; gap: 8px; height: 150px; align-content: start; }
.s-desk-page b { height: 12px; border-radius: 6px; background: color-mix(in srgb, var(--blue) 25%, var(--card)); }
.s-desk-page b.w2 { width: 60%; }
.s-field { height: 30px; border-radius: 9px; box-shadow: inset 0 0 0 1.5px var(--line); position: relative; overflow: hidden; }
.s-field::after { content: ""; position: absolute; left: 8px; top: 10px; height: 10px; border-radius: 5px; background: var(--ink2); opacity: .5; width: 0; animation: typein 6s steps(12) infinite; }
.s-field + .s-field::after { animation-delay: 1.2s; }
@keyframes typein { 0%, 10% { width: 0; } 45%, 100% { width: 60%; } }
.s-btn { height: 32px; border-radius: 999px; background: var(--blue); width: 50%; }
.s-cursor { position: absolute; width: 16px; height: 16px; background: var(--ink); clip-path: polygon(0 0, 100% 60%, 55% 62%, 75% 100%, 60% 100%, 42% 66%, 0 90%); animation: cursor2 6s ease-in-out infinite; }
@keyframes cursor2 { 0% { left: 70%; top: 15%; } 25% { left: 40%; top: 46%; } 50% { left: 45%; top: 66%; } 75% { left: 22%; top: 86%; transform: scale(.85); } 85% { transform: scale(1); } 100% { left: 70%; top: 15%; } }
.s-live { display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 12.5px; }
.s-approve.late { margin-top: 2px; padding: 13px; gap: 8px; }
.scene.on .s-approve.late { animation: pop-in .6s 1.6s both; }
.s-rec { width: 10px; height: 10px; border-radius: 50%; background: #E5484D; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.s-take { margin-left: auto; white-space: nowrap; background: var(--blue); color: #fff; font-weight: 900; font-size: 12.5px; padding: 8px 12px; border-radius: 999px; }
.s-approve { border-radius: 22px; background: var(--card); box-shadow: var(--shadow-big); padding: 16px; display: grid; gap: 10px; border: 2px solid var(--coral); margin-top: 30px; }
.s-approve b { font-size: 16px; }
.s-approve code { white-space: pre-line; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; background: var(--ground2); padding: 9px 10px; border-radius: 11px; color: var(--ink2); }
.s-btns { display: flex; gap: 6px; } .s-btns span { flex: 1; text-align: center; padding: 9px 4px; border-radius: 999px; background: var(--ground2); font-size: 12px; font-weight: 900; white-space: nowrap; }
.s-btns .on { background: var(--ink); color: var(--ground); animation: press 3.2s ease-in-out infinite; }
@keyframes press { 0%, 60%, 100% { transform: scale(1); } 70% { transform: scale(.94); } 80% { transform: scale(1.04); } }
.s-task-card { border-radius: 20px; background: var(--card); box-shadow: var(--shadow); padding: 14px; display: grid; gap: 8px; }
.s-progress { height: 10px; border-radius: 99px; background: var(--ground2); overflow: hidden; }
.s-progress span { display: block; height: 100%; width: 60%; border-radius: 99px; background: linear-gradient(90deg, var(--gold), var(--coral)); animation: grow 4s ease-in-out infinite alternate; }
@keyframes grow { from { width: 35%; } to { width: 62%; } }
.s-budget-line { font-weight: 900; font-size: 12.5px; color: var(--gold-deep); }
.s-list { border-radius: 20px; background: var(--card); box-shadow: var(--shadow); padding: 4px 12px; }
.s-list p { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-weight: 800; border-bottom: 1px solid var(--line); }
.s-list p:last-child { border: 0; }
.s-list i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); flex: none; }
.s-list i.tick { background: var(--green); border-color: var(--green); }
.s-list span { margin-left: auto; width: 28px; height: 28px; } .s-list span svg { width: 100%; height: 100%; }
.scene.on .s-list .new { animation: pop-in .6s .5s both; }
@media (prefers-reduced-motion: reduce) { .s-pod-bar i, .s-field::after, .s-cursor, .s-rec, .s-progress span, .s-btns .on, .rings i, .scene.on .s-approve.late { animation: none; } .s-field::after { width: 60%; } }
@media (prefers-color-scheme: dark) { .s-kind { color: var(--violet); } .s-budget-line { color: var(--gold); } .s-chip { color: var(--green); } }

/* -- Why it's private: the message travels ------------------------------------------------------------------------ */
.compare-section .sub { max-width: 640px; margin-left: auto; margin-right: auto; }
.compare.go .cmp-bip { animation: glow 1.4s 2.8s both; }
@keyframes glow { 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--green) 22%, transparent); } }
.packet { position: absolute; top: 25px; left: 0; width: 12px; height: 12px; border-radius: 4px; background: var(--blue); opacity: 0; z-index: 2; }
.compare.go .packet { animation: packet 1.1s ease-in-out both; }
.compare.go .cmp-usual .cmp-arrow ~ .cmp-arrow .packet { animation-delay: 1.1s; }
.compare.go .cmp-bip .packet { animation-delay: 1.5s; background: var(--green); }
.compare.go .cmp-bip .cmp-arrow ~ .cmp-arrow .packet { animation-delay: 2.6s; background: var(--pink); }
@keyframes packet { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 12px); opacity: 0; } }
.compare.go .cmp-crowd .crowd { animation: crowd .9s 1s both; transform-origin: center; }
@keyframes crowd { 40% { transform: translateY(-2px); } }
.cmp-house em { transition: transform .5s 2.3s cubic-bezier(.3, 1.8, .5, 1); transform: scale(0); }
.compare.go .cmp-house em { transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .packet { display: none; } .cmp-house em { transform: none; transition: none; } }

/* -- Pricing ---------------------------------------------------------------------------------------------------- */
.pricing-section { position: relative; }
.pricing { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; justify-items: center; }
.period { position: relative; display: inline-flex; padding: 5px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow), inset 0 0 0 1.5px var(--line); }
.period button { position: relative; z-index: 1; border: 0; background: none; font: inherit; font-weight: 900; font-size: 15.5px; height: 46px; padding: 0 20px; border-radius: 999px; cursor: pointer; color: var(--ink2); transition: color .3s, background .3s; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.period button[aria-checked="true"] { color: var(--ground); background: var(--ink); }
.period-knob { display: none; }
.pricing-bar { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.currency { position: relative; display: inline-flex; }
.currency-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.currency select {
  appearance: none; -webkit-appearance: none; font: inherit; font-weight: 900; font-size: 15.5px; color: var(--ink); height: 56px;
  padding: 0 42px 0 20px; border: 0; border-radius: 999px; cursor: pointer; background: var(--card);
  box-shadow: var(--shadow), inset 0 0 0 1.5px var(--line);
}
.currency::after { content: ""; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border: solid var(--ink2); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); pointer-events: none; }
.currency select:focus-visible { outline: 3px solid var(--coral, #FF7B5C); outline-offset: 2px; }
.plus-tax { font-size: .8em; font-weight: 900; color: var(--ink2); white-space: nowrap; }
.gift { font-size: 11.5px; padding: 3px 8px; border-radius: 999px; background: var(--green); color: #fff; }
.plans { width: 100%; display: grid; gap: 14px; }
@media (min-width: 860px) { .plans { grid-template-columns: repeat(3, 1fr); align-items: stretch; margin-top: 10px; } }
.plan {
  position: relative; text-align: left; font: inherit; color: var(--ink); cursor: pointer; border: 0; border-radius: 30px; padding: 22px 22px 24px;
  background: var(--card); box-shadow: var(--shadow), inset 0 0 0 2px var(--line); display: grid; gap: 4px; align-content: start;
  transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), box-shadow .3s, background .3s;
}
.plan:hover { transform: translateY(-4px); }
.plan[aria-checked="true"] { background: linear-gradient(180deg, var(--tint), var(--card) 70%); box-shadow: var(--shadow-big), inset 0 0 0 3px var(--main); transform: translateY(-6px); }
.plan[aria-checked="true"]::after { content: "✓"; position: absolute; right: 18px; top: 18px; width: 30px; height: 30px; border-radius: 50%; background: var(--main); color: #fff; display: grid; place-items: center; font-weight: 1000; }
.plan-flag { position: absolute; top: -13px; left: 22px; background: var(--ink); color: var(--ground); font-size: 12.5px; font-weight: 1000; padding: 5px 12px; border-radius: 999px; }
.plan-bips { display: flex; height: 52px; margin-bottom: 6px; }
.plan-bips i { width: 52px; height: 52px; margin-right: -14px; } .plan-bips svg { width: 100%; height: 100%; }
.plan-name { font-size: 26px; font-weight: 1000; letter-spacing: -.02em; }
.plan-who { color: var(--ink2); font-weight: 800; font-size: 15px; }
.plan-price { margin-top: 12px; display: flex; align-items: baseline; gap: 4px; }
.plan-price b { font-size: clamp(34px, 3.6vw, 44px); font-weight: 1000; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.plan-price small { font-size: 16px; font-weight: 900; color: var(--ink2); }
.plan-equiv { font-weight: 900; color: var(--green-deep); font-size: 15px; min-height: 1.4em; }
.plan-store { font-size: 13.5px; color: var(--muted); font-weight: 800; }
.plan-blurb { margin-top: 10px; color: var(--ink2); font-size: 15px; font-weight: 700; }
@media (prefers-color-scheme: dark) { .plan-equiv { color: var(--green); } }
@media (max-width: 859px) {   /* on a phone: compact rows */
  .plan { grid-template-columns: auto 1fr auto; column-gap: 12px; padding: 18px 16px; }
  .plan-bips { grid-row: 1 / span 2; height: 44px; margin: 0; align-self: center; } .plan-bips i { width: 44px; height: 44px; margin-right: -18px; }
  .plan-name { font-size: 22px; grid-column: 2; } .plan-who { grid-column: 2; font-size: 14px; }
  .plan-price { grid-column: 3; grid-row: 1 / span 2; margin: 0; flex-direction: column; align-items: flex-end; gap: 0; align-self: center; }
  .plan-price b { font-size: 26px; }
  .plan-equiv, .plan-store, .plan-blurb { grid-column: 1 / -1; }
  .plan-equiv { margin-top: 8px; min-height: 0; } .plan-blurb { margin-top: 2px; font-size: 14px; }
  .plan[aria-checked="true"]::after { display: none; }
  .plan-flag { top: -11px; }
  .plans { gap: 18px; margin-top: 8px; }
}
.checkout { width: 100%; display: grid; gap: 18px; align-items: center; border-radius: 30px; padding: 24px; background: var(--ink); color: var(--ground); box-shadow: var(--shadow-big); }
@media (min-width: 860px) { .checkout { grid-template-columns: 1fr auto; padding: 28px 34px; } }
.sum { font-size: clamp(22px, 2.4vw, 30px); font-weight: 1000; letter-spacing: -.02em; }
.save { color: #9FE4BC; font-weight: 900; margin-top: 4px; min-height: 1.5em; }
.trial { color: color-mix(in srgb, var(--ground) 72%, transparent); font-size: 14.5px; font-weight: 700; margin-top: 8px; }
.checkout-act { display: grid; gap: 10px; justify-items: center; min-width: 0; }
.checkout-copy { min-width: 0; }
@media (max-width: 859px) {   /* a long « Subscribe · Family, yearly » wraps inside the card on a phone */
  .checkout { grid-template-columns: minmax(0, 1fr); }
  .checkout-act .pill-buy { max-width: 100%; white-space: normal; text-align: center; line-height: 1.2; height: auto; min-height: 58px; padding: 10px 24px; }
}
.checkout-act .cta-row { margin-top: 0; }
.soon-web { font-size: 14.5px; font-weight: 700; max-width: 420px; text-align: center; color: color-mix(in srgb, var(--ground) 85%, transparent); }
.soon-web b { color: var(--ground); }
.checkout .store { background: var(--ground); color: var(--ink); }
.included { width: 100%; border-radius: 30px; padding: 24px; background: var(--card); box-shadow: var(--shadow); }
.included h3 { font-size: 18px; }
.included ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 12px; }
@media (min-width: 760px) { .included ul { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .included ul { grid-template-columns: repeat(3, 1fr); } }
.included li { display: flex; gap: 10px; align-items: flex-start; font-weight: 800; color: var(--ink2); font-size: 15.5px; }
.included li span { flex: none; width: 30px; height: 30px; border-radius: 10px; background: var(--ground2); display: grid; place-items: center; font-size: 15px; }
.fine-print { max-width: 860px; text-align: center; font-size: 13px; color: var(--muted); font-weight: 700; line-height: 1.55; }
.fine-print a { color: var(--ink2); font-weight: 900; }

/* -- Prices: all included, or on my computer (one switch, two panels; the height follows) ---------------------------- */
.mode-anchor { position: absolute; top: 0; left: 0; scroll-margin-top: 72px; }
.mode-head { text-align: center; max-width: 820px; margin: 0 auto 40px; }
.mode { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 700px; margin: 0 auto; padding: 6px;
  border-radius: 30px; background: var(--card); box-shadow: var(--shadow), inset 0 0 0 1.5px var(--line); }
.mode-thumb { position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc(50% - 6px); border-radius: 24px; background: var(--ink);
  box-shadow: 0 12px 26px -12px rgba(22, 24, 29, .55); transition: transform .5s cubic-bezier(.3, 1.25, .5, 1); }
.pricing-section[data-mode="self"] .mode-thumb { transform: translateX(100%); }
.mode button { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 12px 16px; border: 0;
  border-radius: 24px; background: none; font: inherit; color: var(--ink2); text-align: left; cursor: pointer; transition: color .3s; }
.mode button:hover { color: var(--ink); }
.mode button[aria-selected="true"] { color: var(--ground); }
.mode button:focus-visible { outline-offset: 2px; border-radius: 24px; }
.mode-ic { flex: none; width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center; font-size: 21px; background: var(--ground2); transition: background .3s; }
.mode button[aria-selected="true"] .mode-ic { background: color-mix(in srgb, var(--ground) 16%, transparent); }
.mode-txt { display: grid; gap: 2px; min-width: 0; }
.mode-txt b { font-weight: 1000; font-size: 17.5px; line-height: 1.2; letter-spacing: -.01em; }
.mode-txt small { font-size: 13.5px; font-weight: 700; line-height: 1.3; opacity: .78; }
@media (max-width: 560px) {
  .mode { border-radius: 26px; }
  .mode-thumb { border-radius: 20px; }
  .mode button { justify-content: center; text-align: center; min-height: 66px; padding: 9px 6px; border-radius: 20px; }
  .mode-ic { display: none; }
  .mode-txt b { font-size: 15px; letter-spacing: -.02em; } .mode-txt small { font-size: 12px; line-height: 1.25; }
}
.mode-stage { position: relative; }
.mode-stage.moving { overflow: hidden; transition: height .45s cubic-bezier(.3, .8, .3, 1); }
.mode-panel.enter { animation: panel-in .5s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { .mode-thumb, .mode button, .mode-ic, .mode-stage.moving { transition: none; } .mode-panel.enter { animation: none; } }

/* -- Your own computer -------------------------------------------------------------------------------------------- */
.own { max-width: 1080px; margin: 0 auto; display: grid; gap: 22px; }
.own-cards { display: grid; gap: 14px; }
@media (min-width: 860px) { .own-cards { grid-template-columns: 1fr 1fr; gap: 18px; } }
.own-card { border-radius: 30px; padding: 24px; background: var(--card); box-shadow: var(--shadow); }
@media (min-width: 860px) { .own-card { padding: 28px 30px; } }
.own-card h3, .own-steps h3 { font-size: 18px; }
.own-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 12px; }
.own-list li { display: flex; gap: 10px; align-items: flex-start; font-weight: 800; color: var(--ink2); font-size: 15.5px; line-height: 1.45; }
.own-list li span { flex: none; width: 30px; height: 30px; border-radius: 10px; background: var(--ground2); display: grid; place-items: center; font-size: 15px; }
.own-install { display: grid; gap: 24px; align-items: center; border-radius: 30px; padding: 24px; background: var(--card); box-shadow: var(--shadow); }
@media (min-width: 960px) { .own-install { grid-template-columns: .85fr 1.15fr; gap: 36px; padding: 34px; } }
.own-steps ol { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 14px; }
.own-steps li { display: flex; gap: 14px; align-items: flex-start; }
.own-steps li > span { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--ground); font-weight: 1000; display: grid; place-items: center; }
.own-steps li p { color: var(--ink2); font-weight: 700; padding-top: 4px; line-height: 1.45; }
.own-steps li b { color: var(--ink); font-weight: 1000; }
.own .terminal { min-width: 0; box-shadow: var(--shadow); }
.own .terminal pre { min-height: 220px; }
.own .windows { margin-top: -4px; }
.own-yourself { background: var(--gold-tint); box-shadow: none; }
.own-yourself-head p { color: var(--ink2); font-weight: 800; margin-top: 4px; }
.own-yourself .own-list li span { background: var(--card); }
@media (min-width: 760px) { .own-yourself .own-list { grid-template-columns: 1fr 1fr; } }
.own .install-more { margin-top: 0; }
.h2-small { font-size: clamp(28px, 3.4vw, 42px); }
.hermes-line { margin-top: 18px; color: var(--ink2); font-weight: 700; font-size: 15.5px; }
.windows a { color: var(--ink); font-weight: 900; }

/* -- End, footer, sticky buy bar ---------------------------------------------------------------------------------- */
.foot-company { font-size: 13.5px !important; color: var(--muted) !important; max-width: 520px !important; }
.foot-company a { color: var(--ink2); font-weight: 900; }
.sticky-buy {
  position: fixed; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 60; display: flex; align-items: center; gap: 12px;
  padding: 8px 8px 8px 18px; border-radius: 999px; background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: blur(20px) saturate(1.8); -webkit-backdrop-filter: blur(20px) saturate(1.8); box-shadow: var(--shadow-big), inset 0 0 0 1px var(--line);
  transform: translateY(140%); transition: transform .45s cubic-bezier(.3, 1.3, .5, 1), visibility 0s .45s; visibility: hidden;
}
.sticky-buy.show { transform: none; visibility: visible; transition: transform .45s cubic-bezier(.3, 1.3, .5, 1); }
.sb-copy { display: grid; line-height: 1.2; min-width: 0; }
.sb-plan { font-weight: 1000; } .sb-price { font-size: 13.5px; font-weight: 800; color: var(--ink2); }
.sticky-buy .pill { margin-left: auto; }
@media (min-width: 900px) { .sticky-buy { display: none; } }
@media (max-width: 899px) { .foot { padding-bottom: 100px; } }

/* -- The story's podcast button, its Live call, its way to the demo ------------------------------------------------ */
.listen-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 16px; }
.listen {
  display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px 0 6px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-weight: 900; font-size: 15px; color: #fff;
  background: radial-gradient(140% 120% at 90% 120%, #FF9D6E 0%, #E8638A 35%, #6B4BC4 70%, #1B1D3A 100%);
  box-shadow: 0 8px 22px -10px rgba(107, 75, 196, .8); transition: transform .2s;
}
.listen:hover { transform: translateY(-2px); }
.listen-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.listen-time { font-variant-numeric: tabular-nums; font-size: 13px; opacity: .85; }
.listen-time:empty { display: none; }
.listen-credit { color: var(--muted); font-size: 12.5px; font-weight: 700; }
.s-call { justify-items: center; text-align: center; padding-top: 6px; }
.s-call-top { display: flex; align-items: center; gap: 8px; font-weight: 1000; font-size: 13px; }
.s-call-stage { position: relative; width: 100%; height: 190px; display: grid; place-items: center; border-radius: 26px; background: var(--coral-tint); overflow: hidden; }
.s-call.speaking .rings i { animation-duration: 1.5s; border-color: color-mix(in srgb, var(--coral) 70%, transparent); }
.s-call-bip { width: 110px; height: 110px; position: relative; z-index: 1; } .s-call-bip svg { width: 100%; height: 100%; }
.s-cap { max-width: 92%; padding: 9px 13px; border-radius: 18px; font-weight: 800; font-size: 13px; line-height: 1.35; transition: opacity .4s, transform .45s cubic-bezier(.25, 1.4, .4, 1); }
.s-cap.you { justify-self: end; background: var(--ink); color: var(--ground); border-bottom-right-radius: 6px; }
.s-cap.bip { justify-self: start; background: var(--card); box-shadow: var(--shadow); border-bottom-left-radius: 6px; text-align: left; }
.s-call.anim .s-cap { opacity: 0; transform: translateY(8px); }
.s-call.anim.asking .s-cap.you, .s-call.anim.answer .s-cap.bip { opacity: 1; transform: none; }
.s-call-btns { display: flex; gap: 18px; margin-top: 4px; }
.s-call-btns span { width: 40px; height: 40px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); }
.s-call-btns .end { background: #E5484D; box-shadow: none; }
.day-more { margin: 40px auto 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; font-weight: 900; font-size: 18px; text-align: center; }
@media (min-width: 1000px) { .day-more { margin-top: 0; } }

.faq-more { text-align: center; margin-top: 22px; font-weight: 800; color: var(--ink2); }
.faq-more a { color: var(--ink); font-weight: 1000; }

/* -- The other pages: the demo, every question, the install --------------------------------------------------------- */
.page-section { padding-top: 48px; }
@media (min-width: 900px) { .page-section { padding-top: 72px; } }
.page-h1 { font-size: clamp(34px, 5vw, 60px); line-height: 1.02; letter-spacing: -.035em; margin: 0; }
.install-more { max-width: 940px; margin: 26px auto 0; text-align: center; font-weight: 800; color: var(--ink2); }
.install-more a { color: var(--ink); font-weight: 1000; }
.page-cta { padding-bottom: 96px; }
.cta-band { text-align: center; border-radius: 40px; padding: 44px 22px 48px; background: linear-gradient(160deg, var(--coral-tint), var(--gold-tint) 45%, var(--green-tint)); }
.cta-band .sub { max-width: 620px; margin-left: auto; margin-right: auto; }
.cta-band .cta-row { margin-top: 24px; }
.cta-band-bips { display: flex; justify-content: center; margin-bottom: 10px; }
.cta-band-bips i { width: 64px; height: 64px; margin: 0 -6px; } .cta-band-bips svg { width: 100%; height: 100%; }
.foot-stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.top-links a[aria-current] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }