/* Home: a live chat wall (home.js) behind the hero copy and the big logo, then plain sections. */
@font-face { font-family: "Geist Mono"; src: url(fonts/geist-mono.woff2) format("woff2"); font-weight: 400; font-display: swap; }

:root { --fx-hi: #C8FBD0; --fx-mid: #31C843; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --fx-hi: #0E7A26; --fx-mid: #189E33; } }
:root[data-theme="light"] { --fx-hi: #0E7A26; --fx-mid: #189E33; }

.home .top { position: relative; z-index: 2; }
.home .foot { margin-top: 112px; }

/* hero */
.pond { position: relative; overflow: hidden; margin-top: -72px; padding-top: 72px; }
.fx { position: absolute; inset: 0; z-index: 0; }
.pond { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.fx canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.pond-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: 32px; padding-block: 72px 96px; min-height: 640px; }
.pond-copy { max-width: 34rem; position: relative; z-index: 1; } /* above the logo glow on phones (1238) */
.pond h1 { display: grid; font-size: clamp(2.6rem, 6.2vw, 4.75rem); line-height: 0.98; font-weight: 850; letter-spacing: -0.045em; margin: 0 0 22px; text-wrap: balance; }
.pond .lede { font-size: 1.1875rem; line-height: 1.5; color: var(--muted); margin: 0 0 30px; max-width: 30rem; }
.fine { margin: 18px 0 0; font-size: 0.875rem; color: var(--muted); }
.logo-big { justify-self: center; width: min(400px, 100%); aspect-ratio: 1; }
/* Holo foil card (ticket 1028): --mx/--my (0..1, pointer or idle drift) tilt the card and move a rainbow sheen and a glare,
   both masked to the frog. home.js sets the vars on pointer devices; touch and idle get the drift keyframes. */
@property --mx { syntax: "<number>"; inherits: true; initial-value: .5; }
@property --my { syntax: "<number>"; inherits: true; initial-value: .5; }
.card { position: relative; width: 100%; height: 100%; animation: drift 11s ease-in-out infinite;
  transform: perspective(900px) rotateX(calc((.5 - var(--my)) * 24deg)) rotateY(calc((var(--mx) - .5) * 28deg));
  transition: --mx .9s cubic-bezier(.3, 1.7, .5, 1), --my .9s cubic-bezier(.3, 1.7, .5, 1); }
.card.on, .card.settle { animation: none; }
.card.on { transition: --mx .08s linear, --my .08s linear; }
.card::before, .card::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: opacity .4s;
  --spot: radial-gradient(farthest-corner circle at calc(var(--mx) * 100%) calc(var(--my) * 100%), #000 10%, rgb(0 0 0 / .25) 55%, transparent 90%);
  -webkit-mask: url(logo.png) center / 100% 100% no-repeat, var(--spot); -webkit-mask-composite: source-in;
  mask: url(logo.png) center / 100% 100% no-repeat, var(--spot); mask-composite: intersect; }
/* Foil: glare, a fine diagonal shine and rainbow bands, dodged onto the green so black outlines stay black. */
.card::before { mix-blend-mode: color-dodge; filter: brightness(.65) saturate(1.5); opacity: .7;
  background:
    radial-gradient(farthest-corner circle at calc(var(--mx) * 100%) calc(var(--my) * 100%), rgb(255 255 255 / .8), rgb(255 255 255 / 0) 35%),
    repeating-linear-gradient(-50deg, rgb(255 255 255 / 0) 0 3%, rgb(255 255 255 / .5) 4.5%, rgb(255 255 255 / 0) 6% 9%),
    repeating-linear-gradient(115deg, #f0a 0%, #fd3 4%, #3f8 8%, #3cf 12%, #a6f 16%, #f0a 20%);
  background-size: 100% 100%, 300% 300%, 200% 200%;
  background-position: 0 0, calc(var(--mx) * 100%) calc(var(--my) * 100%), calc((1 - var(--mx)) * 100%) calc((1 - var(--my)) * 100%); }
/* Pastel rainbow multiplied in, so the white eyes and teeth catch the foil too. */
.card::after { mix-blend-mode: multiply; opacity: .5;
  background: repeating-linear-gradient(115deg, #ffc2e6 0%, #fff0a8 4%, #c4f7d2 8%, #bfeaff 12%, #e0c8ff 16%, #ffc2e6 20%) calc((1 - var(--mx)) * 100%) calc((1 - var(--my)) * 100%) / 200% 200%; }
.card.on::before { opacity: 1; }
.card.on::after { opacity: .8; }
@keyframes drift { 0%, 100% { --mx: .5; --my: .5; } 25% { --mx: .68; --my: .38; } 50% { --mx: .44; --my: .64; } 75% { --mx: .3; --my: .44; } }
@media (prefers-reduced-motion: reduce) { .card { animation: none; transform: none; } .card::before { opacity: .4; } .card::after { opacity: .35; } }
.logo-big img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 24px var(--bg)) drop-shadow(0 0 56px var(--bg)) drop-shadow(0 24px 40px rgb(0 0 0 / .35));
  will-change: transform; /* own layer, so the drifting foil does not re-run these shadows every frame (1274) */ }
/* Soft halo in the page color so the text sits in the wall instead of on top of it. */
.pond-copy h1, .pond-copy p { text-shadow: 0 0 2px var(--bg), 0 0 14px var(--bg), 0 0 32px var(--bg), 0 0 56px var(--bg); }
.pond-copy .ctas { width: fit-content; border-radius: 12px; background: var(--bg); box-shadow: 0 0 28px 10px var(--bg); }
.pond-copy .btn.quiet { background: var(--bg); }
@media (max-width: 820px) {
  .pond-in { grid-template-columns: minmax(0, 1fr); padding-block: 32px 64px; min-height: 0; gap: 8px; }
  .logo-big { width: 200px; order: -1; }
}
@media (max-width: 720px) { .pond { margin-top: -64px; padding-top: 64px; } }

/* Rotating headline (tickets 1055, 1088): home.js stacks hidden copies of every line in one grid cell,
   so the h1 keeps the tallest height while the visible line is typed. The caret is zero width, so it never wraps alone. */
.pond h1 > span { grid-area: 1 / 1; }
.pond h1 > .ghost { visibility: hidden; }
.pond h1 > .typed { text-wrap: wrap; }
.pond h1 .caret { display: inline-block; position: relative; left: .06em; width: 0; height: .82em; vertical-align: -.04em; box-shadow: 0 0 0 .03em currentColor; animation: caret 1s steps(1) infinite; }
.pond h1.typing .caret { animation: none; }
@keyframes caret { 50% { opacity: 0; } }

/* sections */
section.s { padding-block: 88px 8px; }
.s h2 { font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.05; font-weight: 850; letter-spacing: -0.035em; margin: 0 0 14px; text-wrap: balance; max-width: 22ch; }
.s .intro { color: var(--muted); max-width: 36rem; margin: 0 0 36px; font-size: 1.0625rem; }
.two { display: grid; align-items: start; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.two h3 { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 6px; }
.two p { color: var(--muted); margin: 0 0 18px; max-width: 30rem; }
@media (max-width: 760px) { .two { grid-template-columns: minmax(0, 1fr); gap: 36px; } }

/* why another chat platform (1053, 1063): the other app dimmed with an X, Sblurp in a green panel with the frog.
   Desktop pairs each row side by side; narrow screens list theirs, then ours. */
.vs { display: grid; gap: 56px; }
.vs-one { display: grid; align-content: start; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 40px; border-top: 1px solid var(--line); padding-top: 28px; }
.vs h3 { font-size: 1.75rem; font-weight: 850; letter-spacing: -0.03em; margin: 0 0 6px; }
.vs-about p { color: var(--muted); margin: 0; }
.vs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; align-content: start; }
.vs-grid > div { position: relative; padding: 10px 18px 10px 46px; line-height: 1.45; }
.vs-grid svg { position: absolute; left: 18px; top: 13px; width: 17px; height: 17px; }
.vs-grid .them { color: var(--muted); }
.vs-grid .them svg { color: var(--muted); opacity: .7; }
.vs-grid .us { background: var(--selected); font-weight: 600; }
.vs-grid .us svg { color: var(--fx-mid); }
.vs-grid .them.win { color: var(--ink); font-weight: 600; } /* where the other one is better, say so */
.vs-grid .them.win svg { color: var(--fx-mid); opacity: 1; }
.vs-grid .us.lose { font-weight: 400; color: var(--muted); }
.vs-grid .us.lose svg { color: var(--muted); opacity: .7; }
.vs-grid .vs-h { padding-block: 12px 8px; padding-left: 18px; font-weight: 800; font-size: 1.0625rem; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
.vs-grid .vs-h.us { border-radius: 14px 14px 0 0; }
.vs-grid .vs-h img { width: 26px; height: 26px; }
.vs-grid .us:last-child { border-radius: 0 0 14px 14px; padding-bottom: 16px; }
@media (max-width: 860px) {
  .vs-one { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .vs-grid { grid-template-columns: minmax(0, 1fr); }
  .vs-grid .us { order: 1; }
  .vs-grid .them:nth-last-child(2) { padding-bottom: 20px; }
}

/* Tabbed card (1073, 1081): home.js adds the tabs. Only the active panel is in flow, so the card fits it; the others
   sit absolutely in the same grid cell while they fade. The active tab's bar fills over 7 s and its animationend advances. */
/* Nine tabs (1254): one row of equal cells, mark above name, so a long name wraps inside its own cell instead of the row wrapping. */
.vs-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin: 0 0 12px; }
.vs-tabs[hidden] { display: none; }
/* Competitor marks (1136, 1137): Simple Icons, CC0, in the text color. */
.vs-tabs .brand, .vs-about .brand, .vs .vs-h .brand { position: static; width: 1em; height: 1em; fill: currentColor; flex: none; opacity: 1; color: inherit; }
.vs-about h3 .brand { vertical-align: -0.125em; margin-right: 0.35em; }
.vs-tabs button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; position: relative; overflow: hidden; font: inherit; font-size: .875rem; line-height: 1.2; text-align: center; text-wrap: balance; font-weight: 700; color: var(--muted); background: none; border: 1px solid transparent; border-radius: 10px; padding: 10px 6px; cursor: pointer; transition: color .14s, background-color .14s, border-color .14s; }
.vs-tabs button .brand { width: 22px; height: 22px; }
.vs-tabs button:hover { color: var(--ink); background: var(--hover); }
.vs-tabs button[aria-selected="true"] { color: var(--ink); background: var(--surface); border-color: var(--line); }
.vs-tabs button::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--fx-mid); }
.why.auto .vs-tabs button[aria-selected="true"]::after { animation: vs-fill 7s linear; }
.why.paused .vs-tabs button::after { animation-play-state: paused; }
@keyframes vs-fill { to { width: 100%; } }
.why.tabbed .vs { position: relative; overflow: hidden; box-sizing: border-box; gap: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 28px; }
.why.tabbed .vs-one { grid-area: 1 / 1; border-top: 0; padding-top: 0; opacity: 0; visibility: hidden; transition: opacity .16s, visibility 0s .16s; }
.why.tabbed .vs-one:not(.on) { height: 0; } /* stays in the same cell while it fades, but the active panel alone sets the height */
.why.tabbed .vs-one.on { opacity: 1; visibility: visible; transition: opacity .16s; }
.why.tabbed .vs-about h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.why.tabbed .vs-about p { font-size: 1.125rem; color: var(--ink); font-weight: 600; }
/* Phones (1204): the tabs become one strip of brand marks (the panel names the app), and rows lose some indent. */
/* Below 960 px nine names no longer fit, so the tabs show marks only and the panel shows the name. */
@media (max-width: 960px) {
  .vs-tabs { gap: 2px; }
  .vs-tabs button { padding: 0; height: 46px; }
  .vs-tabs button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .why.tabbed .vs-about h3 { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; font-size: 1.5rem; }
}
@media (max-width: 640px) {
  .why.tabbed .vs { padding: 20px 14px 14px; }
  .why.tabbed .vs-one { gap: 14px; }
  .why.tabbed .vs-about { padding-inline: 4px; }
  .why.tabbed .vs-about p { font-size: 1rem; color: var(--muted); font-weight: 400; }
  .why.tabbed .vs-grid .vs-h.them { display: none; }
  .vs-grid > div { padding: 8px 14px 8px 38px; }
  .vs-grid svg { left: 12px; top: 11px; }
  .vs-grid .vs-h { padding-left: 14px; }
}

/* product peek */
.peek { display: grid; grid-template-columns: 64px 220px minmax(0, 1fr); height: 480px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); font-size: 0.9375rem; }
.peek-rail { background: var(--hover); display: flex; flex-direction: column; align-items: center; gap: 10px; padding-block: 14px; }
.peek-rail span { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; font-weight: 800; font-size: 0.8125rem; background: var(--surface); border: 1px solid var(--line); }
.peek-rail span.on { background: var(--green); color: var(--btn-ink); border-color: var(--green); }
/* Mockup extras (1067): server icon, unread badges, banner, presence, role colors, custom emoji, thread link. */
.peek-rail span { position: relative; }
.peek-rail span.on { background: var(--surface); border: 2px solid var(--green); overflow: hidden; }
.peek-rail span img { width: 100%; height: 100%; object-fit: cover; border-radius: 13px; }
/* Badges (1082): a circle (min-width = height) that grows into a pill; the rail one is 22 px with a 2 px ring. */
.peek-rail i, .peek-side i { box-sizing: border-box; flex: none; display: inline-block; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; font-style: normal; font-size: 0.6875rem; font-weight: 800; line-height: 20px; text-align: center; background: #E5484D; color: #FFFFFF; }
.peek-rail i { position: absolute; right: -6px; bottom: -6px; min-width: 22px; height: 22px; border-radius: 11px; line-height: 18px; padding: 0 5px; border: 2px solid var(--hover); }
.peek-side i { margin-left: auto; }
.peek-side { padding-top: 0; }
.peek-banner { margin: 0 -10px 8px; height: 92px; display: flex; align-items: flex-end; padding: 10px 14px;
  background: linear-gradient(rgb(0 0 0 / 0) 35%, rgb(0 0 0 / .6)), url(/static/forest.webp) center / cover; }
.peek-banner b { padding: 0; color: #FFFFFF; text-shadow: 0 1px 6px rgb(0 0 0 / .5); }
.peek-side span { display: flex; align-items: center; gap: 8px; }
.peek-side em { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.on-dot { background: #31C843; } .away-dot { background: #E9A23B; }
.who b { font-weight: 700; } .rc1 { color: #E5484D; } .rc2 { color: #3E9BFF; }
.cemoji { width: 20px; height: 20px; vertical-align: -4px; }
.react .cemoji { width: 16px; height: 16px; vertical-align: 0; }
.react + .react { margin-left: 6px; }
.react.mine { border-color: var(--green); background: var(--selected); color: var(--ink); }
.thread { display: inline-block; margin-top: 4px; font-size: 0.8125rem; font-weight: 700; color: var(--link); }
.peek-side { border-right: 1px solid var(--line); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.peek-side b { padding: 4px 8px 10px; font-size: 1rem; letter-spacing: -0.01em; }
.peek-side small { padding: 12px 8px 4px; color: var(--muted); font-size: 0.8125rem; font-weight: 600; }
.peek-side span { padding: 5px 8px; border-radius: 6px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.peek-side span.on { background: var(--selected); color: var(--ink); font-weight: 650; }
.peek-side span.unread { color: var(--ink); font-weight: 650; }
.peek-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.peek-main header { padding: 12px 18px; border-bottom: 1px solid var(--line); font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.peek-main header span { font-weight: 400; color: var(--muted); margin-left: 8px; font-size: 0.875rem; }
.log { flex: 1; min-height: 0; padding: 14px 18px; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; overflow: hidden; }
.msg-row, .result { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; }
.pav { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 0.8125rem; color: #FFFFFF; }
img.pav { object-fit: cover; }
.g1 { background: var(--green); color: var(--btn-ink); } .g2 { background: #2A6B3A; } .g3 { background: #8E44AD; } .g4 { background: #4D4D4D; }
.who { font-weight: 700; }
.who time { font-weight: 400; color: var(--muted); font-size: 0.75rem; margin-left: 6px; }
.tag { font-size: 0.6875rem; font-weight: 600; background: var(--green); color: var(--btn-ink); border-radius: 4px; padding: 1px 5px; margin-left: 6px; vertical-align: 2px; }
.mention { background: var(--mention-bg); color: var(--mention-ink); border-radius: 4px; padding: 0 3px; font-weight: 650; }
.react { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; font-size: 0.8125rem; color: var(--muted); }
.react svg { width: 14px; height: 14px; }
.peek-composer { margin: 0 18px 16px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px 14px; color: var(--muted); }
@media (max-width: 760px) { .peek { grid-template-columns: 56px minmax(0, 1fr); } .peek-side { display: none; } }

/* channel modes */
.ill { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 8px; display: grid; gap: 2px; }
.ill.chat { gap: 14px; padding: 14px; }
.ill-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; }
.ill-row + .ill-row { border-top: 1px solid var(--line); }
.ill-row .ch { font-weight: 650; white-space: nowrap; }
.ill-row .ct { color: var(--muted); font-size: 0.875rem; margin-left: auto; white-space: nowrap; }
.ill .btn.small { margin-left: 8px; min-height: 0; padding: 7px 14px; font-size: 0.875rem; box-shadow: none; }
.role { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 650; border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px 2px 8px; white-space: nowrap; }
.role i { width: 9px; height: 9px; border-radius: 50%; }
.r1 i { background: #C0392B; } .r2 i { background: #8E44AD; }
.lock { color: var(--muted); font-size: 0.875rem; margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .rc1 { color: #C62D3A; } :root:not([data-theme="dark"]) .rc2 { color: #1F6FD1; } }
:root[data-theme="light"] .rc1 { color: #C62D3A; } :root[data-theme="light"] .rc2 { color: #1F6FD1; }