/* Layout adapted from AstroWind at 14e1a691f80548dcc36370847b1a02c0d0b12821. See ../third-party/astrowind-MIT.txt. */
@font-face { font-family: "IBM Plex Sans"; src: url("./assets/fonts/ibm-plex-sans-latin-400-normal.3b646991d300.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("./assets/fonts/ibm-plex-sans-latin-500-normal.0717336fb31f.woff2") format("woff2"); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("./assets/fonts/ibm-plex-sans-latin-400-italic.6de912e531b6.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("./assets/fonts/source-serif-4-latin-400-normal.02194deb92d3.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("./assets/fonts/ibm-plex-mono-latin-400-normal.08949f728dc5.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }

:root {
  /* One motion vocabulary: entrances decelerate; moves use one standard curve. */
  --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-move: cubic-bezier(.2, 0, 0, 1);
  color-scheme: light;
  /* Shared palette and typefaces come from the brand tokens in ./assets/brand/tokens.css. */
  --ink: var(--memand-ink); --base: var(--memand-base); --raised: var(--memand-raised); --sunken: var(--memand-sunken);
  --muted: var(--memand-muted); --border: var(--memand-border);
  --action: var(--memand-action); --action-hover: var(--memand-action-hover); --accent-on-dark: var(--memand-accent-on-dark);
  --knowledge: var(--memand-knowledge); --knowledge-text: var(--memand-knowledge-text);
  --dark-muted: var(--memand-dark-muted); --dark-body: var(--memand-dark-body);
  --sans: var(--memand-font-sans); --serif: var(--memand-font-serif); --mono: var(--memand-font-mono);
  --border-strong: var(--memand-border-strong); --danger: var(--memand-danger);
  /* Tints of base for rules on dark surfaces, as the brand conformance rule allows. */
  --base-tint-10: rgb(247 248 245 / .1); --base-tint-12: rgb(247 248 245 / .12);
  --base-tint-25: rgb(247 248 245 / .25); --base-tint-35: rgb(247 248 245 / .35);
  --page-gutter: clamp(20px, 4.2vw, 64px);
}
* { box-sizing: border-box; }
html { scroll-padding-top: 16px; }
body { margin: 0; background: var(--base); color: var(--ink); font: 400 clamp(16px, 1.2vw, 17px)/1.6 var(--sans); }
h1, h2, h3, p, figure { margin: 0; }
h1, h3 { font-weight: 500; }
a { color: var(--action); }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--action); outline-offset: 4px; }
.surface-dark :focus-visible { outline-color: var(--accent-on-dark); }
.wrap { width: min(100%, 1440px); margin-inline: auto; padding-inline: var(--page-gutter); }
.section { padding-block: clamp(80px, 10vw, 160px); }
.eyebrow { margin-bottom: 24px; color: var(--action); font: 400 12px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.brand-name { text-transform: none; }
.surface-dark .eyebrow { color: var(--accent-on-dark); }
h2 { max-width: 1100px; font: 400 clamp(44px, 6vw, 92px)/1 var(--serif); letter-spacing: -.035em; }
h3 { font-size: clamp(23px, 2vw, 29px); line-height: 1.2; letter-spacing: -.025em; }
.lede { max-width: 640px; color: var(--muted); font: 400 clamp(20px, 1.8vw, 25px)/1.45 var(--serif); text-wrap: pretty; }

.button { display: inline-flex; min-height: 56px; align-items: center; gap: 26px; padding: 13px 24px; border: 1px solid var(--action); border-radius: 5px; background: var(--action); color: var(--raised); font: 500 17px/1.3 var(--sans); text-decoration: none; cursor: pointer; }
.button:hover { border-color: var(--action-hover); background: var(--action-hover); color: var(--raised); }
.button span { font-size: 21px; line-height: 1; }
.button-small { min-height: 44px; gap: 12px; padding: 9px 16px; font-size: 14px; }
.button-small span { font-size: 17px; }
.button:disabled, .button:disabled:hover { border-color: var(--border-strong); background: transparent; color: var(--muted); cursor: not-allowed; transform: none; }
.text-link { padding-bottom: 2px; border-bottom: 1px solid var(--base-tint-35); color: var(--dark-body); font-size: 16px; text-decoration: none; }
.text-link:hover { border-color: var(--raised); color: var(--raised); }
.skip-link { position: absolute; z-index: 5; top: 12px; left: 12px; padding: 9px 16px; background: var(--raised); transform: translateY(-180%); }
.skip-link:focus { transform: none; }

.header-band, .hero-scene { background: var(--ink); color: var(--base); }
.site-header { display: flex; min-height: clamp(76px, 6.4vw, 92px); align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--base-tint-12); }
.header-actions { display: flex; align-items: center; gap: 28px; }
/* On phones, the main waitlist action sits below the header. */
@media (max-width: 479px) { .header-actions .header-waitlist { display: none; } }
.site-logo { display: block; width: clamp(128px, 12vw, 176px); height: auto; }

.hero-scene { overflow: hidden; }
.hero { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(48px, 4.5vw, 80px); padding-top: clamp(48px, 6vw, 96px); padding-bottom: clamp(72px, 8vw, 120px); }
.hero-content { flex: .85 1 320px; }
.hero .eyebrow { margin-bottom: 28px; color: var(--dark-muted); }
h1 { max-width: 620px; font-size: clamp(44px, 6vw, 90px); line-height: .98; letter-spacing: -.055em; text-wrap: balance; }
.accent { color: var(--accent-on-dark); }
.hero-statement { max-width: 540px; margin: clamp(24px, 2.2vw, 32px) 0 clamp(32px, 2.8vw, 40px); color: var(--dark-body); font: 400 clamp(21px, 1.9vw, 27px)/1.36 var(--serif); text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.hero-visual { position: relative; flex: 1.15 1 320px; min-width: 0; height: clamp(340px, 36vw, 520px); display: grid; }
.graph-stage { position: relative; min-height: 0; }
.graph-stage canvas { display: block; width: 100%; height: 100%; visibility: hidden; touch-action: pan-y; cursor: grab; }
.graph-stage canvas:active { cursor: grabbing; }
.graph-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.hero-visual.is-ready canvas { visibility: visible; }
.hero-visual.is-ready .graph-poster { visibility: hidden; }

.problem .lede { margin: clamp(24px, 2.4vw, 36px) 0 clamp(56px, 6vw, 96px); }
.items { display: grid; }
.items-problem { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 40px clamp(32px, 4vw, 64px); }
.items-why { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 48px clamp(40px, 6vw, 100px); margin-top: clamp(56px, 6vw, 96px); }
.item { display: grid; grid-template-columns: auto 1fr; align-content: start; gap: 4px 20px; padding-top: 24px; border-top: 1px solid var(--ink); }
.item:hover { box-shadow: inset 0 3px 0 var(--action); }
.item-number { grid-row: span 2; color: var(--action); font: 400 clamp(44px, 4.4vw, 64px)/.9 var(--serif); }
.item p { max-width: 460px; margin-top: 8px; color: var(--muted); }

.how { padding-block: clamp(80px, 10vw, 152px); background: var(--sunken); }
.how-heading { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px clamp(40px, 6vw, 100px); margin-bottom: clamp(56px, 6vw, 88px); }
.how-heading h2 { flex: 1 1 420px; text-wrap: balance; }
.how-heading .lede { flex: .7 1 300px; max-width: 480px; }
/* The kinds of team share one grid cell, so the heading keeps the width of the longest and never reflows. */
.every { display: inline-grid; color: var(--action); white-space: nowrap; }
.every > span { grid-area: 1 / 1; opacity: 0; transform: translateY(.18em); }
.every > .is-active { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .every > span { transition: opacity .45s ease, transform .45s cubic-bezier(.2, .7, .2, 1); }
}
.cycle { margin: 0; }
.cycle svg { display: block; width: 100%; height: auto; overflow: visible; }
.cycle .cycle-tall { display: none; }
.cycle text { font-family: var(--sans); }
.cycle-title { fill: var(--ink); font-weight: 500; letter-spacing: -.02em; }
.cycle .cycle-label { fill: var(--muted); font: 400 14px var(--mono); }
.cycle-wide .cycle-label { font-size: 16px; }
/* Tools and agents share one card style: a title over the kinds they cover. The Library is the one filled shape. */
.cycle-node rect { fill: var(--raised); stroke: var(--border-strong); }
.cycle-sub { fill: var(--muted); }
.cycle-library circle { fill: var(--action); }
.cycle .cycle-library .cycle-title { fill: var(--raised); font: 400 30px var(--serif); letter-spacing: -.01em; }
.cycle-wide .cycle-library .cycle-title { font-size: 34px; }
/* Every line and label is muted, one style for all, so the Library is the only teal. The arrows' direction and labels carry the meaning. */
.cycle-arrow { fill: none; stroke: var(--muted); stroke-width: 1.75; stroke-linecap: round; }
.cycle-head-flow, .cycle-head-muted { fill: var(--muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 899px) {
  .cycle .cycle-wide { display: none; }
  .cycle .cycle-tall { display: block; max-width: 400px; margin-inline: auto; }
}

.connectors { display: grid; gap: 32px; margin-top: clamp(72px, 8vw, 120px); padding-top: 32px; border-top: 1px solid var(--border-strong); }
.connector-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 28px clamp(28px, 3vw, 48px); margin: 0; }
.connector-group dt { margin-bottom: 12px; color: var(--action); font: 400 12px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.connector-group dd { margin: 0; }
.connector-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.connector-list li { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid var(--border-strong); border-radius: 3px; background: var(--base); font-size: 15px; line-height: 1.4; }
/* Third-party logos are shown in one color. Sources and licenses: ../THIRD_PARTY_NOTICES.md. */
.connector-logo { flex: none; width: 16px; height: 16px; background: var(--ink); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.logo-asana { --logo: url("./assets/connectors/asana.svg"); }
.logo-confluence { --logo: url("./assets/connectors/confluence.svg"); }
.logo-dropbox { --logo: url("./assets/connectors/dropbox.svg"); }
.logo-github { --logo: url("./assets/connectors/github.svg"); }
.logo-gmail { --logo: url("./assets/connectors/gmail.svg"); }
.logo-googlecalendar { --logo: url("./assets/connectors/googlecalendar.svg"); }
.logo-googledrive { --logo: url("./assets/connectors/googledrive.svg"); }
.logo-googlemeet { --logo: url("./assets/connectors/googlemeet.svg"); }
.logo-hubspot { --logo: url("./assets/connectors/hubspot.svg"); }
.logo-jira { --logo: url("./assets/connectors/jira.svg"); }
.logo-linear { --logo: url("./assets/connectors/linear.svg"); }
.logo-notion { --logo: url("./assets/connectors/notion.svg"); }
.logo-zoom { --logo: url("./assets/connectors/zoom.svg"); }
.logo-claude { --logo: url("./assets/connectors/claude.svg"); }
.logo-deepseek { --logo: url("./assets/connectors/deepseek.svg"); }
.logo-kimi { --logo: url("./assets/connectors/kimi.svg"); }
.logo-qwen { --logo: url("./assets/connectors/qwen.svg"); }
.logo-braintrust { --logo: url("./assets/connectors/braintrust.png"); }
.logo-claudecode { --logo: url("./assets/connectors/claudecode.svg"); }
.logo-langchain { --logo: url("./assets/connectors/langchain.svg"); }
.logo-arize { --logo: url("./assets/connectors/arize.svg"); }
.logo-langfuse { --logo: url("./assets/connectors/langfuse.svg"); }
.logo-grok { --logo: url("./assets/connectors/grok.svg"); }
.logo-codex { --logo: url("./assets/connectors/codex.svg"); }
.logo-microsoftcopilot { --logo: url("./assets/connectors/microsoftcopilot.svg"); }
.logo-antigravity { --logo: url("./assets/connectors/antigravity.svg"); }
.logo-opencode { --logo: url("./assets/connectors/opencode.svg"); }
.logo-meta { --logo: url("./assets/connectors/meta.svg"); }
.logo-cursor { --logo: url("./assets/connectors/cursor.svg"); }
.logo-githubcopilot { --logo: url("./assets/connectors/githubcopilot.svg"); }
.logo-googlegemini { --logo: url("./assets/connectors/googlegemini.svg"); }
.logo-openai { --logo: url("./assets/connectors/openai.svg"); }
.logo-fireflies { --logo: url("./assets/connectors/fireflies.png"); }
.logo-gong { --logo: url("./assets/connectors/gong.svg"); }
.logo-granola { --logo: url("./assets/connectors/granola.svg"); }
.logo-microsoftonedrive { --logo: url("./assets/connectors/microsoftonedrive.svg"); }
.logo-microsoftoutlook { --logo: url("./assets/connectors/microsoftoutlook.svg"); }
.logo-microsoftsharepoint { --logo: url("./assets/connectors/microsoftsharepoint.svg"); }
.logo-microsoftteams { --logo: url("./assets/connectors/microsoftteams.svg"); }
.logo-otter { --logo: url("./assets/connectors/otter.png"); }
.logo-salesforce { --logo: url("./assets/connectors/salesforce.svg"); }
.logo-slack { --logo: url("./assets/connectors/slack.svg"); }




/* Why mem&: low risk */
.why h2 { text-wrap: balance; }
.why .risk { margin-top: clamp(56px, 6vw, 96px); }
.risk-points { display: grid; gap: clamp(56px, 7vw, 112px); margin: 0; padding: 0; list-style: none; }
.risk-point { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: center; gap: 32px clamp(40px, 6vw, 96px); padding-top: 28px; border-top: 1px solid var(--ink); }
.risk-point > *, .risk-visual > * { min-width: 0; }
.risk-copy h3 { font: 400 clamp(32px, 3.6vw, 52px)/1.05 var(--serif); letter-spacing: -.03em; }
.risk-copy p { max-width: 460px; margin-top: 16px; color: var(--muted); font-size: clamp(17px, 1.3vw, 19px); text-wrap: pretty; }
.risk-visual { display: grid; place-items: center; min-height: 300px; margin: 0; padding: clamp(24px, 3vw, 44px); border-radius: 6px; background: var(--sunken); }
.risk-visual { --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.4 5.2l1.8 1.8L7.8 3.2' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 22'%3E%3Cpath d='M1.5 1.5v15.5l4.1-3.7 2.7 6 2.9-1.3-2.7-5.8h5.6z' fill='%2318211C' stroke='white' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.rv-kicker { color: var(--muted); font: 400 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.rv-title { font-size: 17px; font-weight: 500; }
.rv-pill { justify-self: center; padding: 6px 14px; border-radius: 999px; background: var(--action); color: var(--raised); font: 400 12px/1.4 var(--mono); letter-spacing: .06em; }
.rv-start { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 16px; width: 100%; max-width: 520px; }
.rv-card { display: grid; grid-template-rows: auto 1fr auto; gap: 14px; padding: 20px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--raised); }
.rv-docs { display: grid; grid-template-columns: repeat(5, 1fr); align-items: start; gap: 6px; }
.rv-docs span { aspect-ratio: 3 / 4; border: 1px solid var(--border-strong); border-radius: 2px; background: var(--base); }
.rv-agents { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-height: 58px; }
.rv-agents .connector-logo { width: 28px; height: 28px; }
/* You hardly lift a finger: tick the tools to connect, and each ticked one feeds the Library. */
.rv-hub { position: relative; container-type: inline-size; width: 100%; max-width: 460px; height: 300px; }
.rv-hub-list { position: relative; z-index: 1; display: grid; grid-template-rows: repeat(6, 1fr); width: 58%; height: 100%; margin: 0; padding: 0; list-style: none; }
.rv-hub-list li { position: relative; display: flex; align-items: center; gap: min(10px, 2.6cqw); min-width: 0; margin: 4px 0; padding: 0 min(12px, 3cqw); border: 1px solid var(--border-strong); border-radius: 6px; background: var(--raised); color: var(--muted); font-size: min(15px, 4.6cqw); white-space: nowrap; }
.rv-hub-list .connector-logo { background: var(--muted); }
.rv-hub-list .is-on { color: var(--ink); }
.rv-hub-list .is-on .connector-logo { background: var(--ink); }
.rv-check { position: relative; flex: none; width: 16px; height: 16px; border: 1.5px solid var(--memand-control-border); border-radius: 4px; background: var(--raised); }
.is-on .rv-check { border-color: var(--action); background: var(--action) var(--check) center / 12px no-repeat; }
.rv-hub-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rv-hub-lines path { fill: none; stroke: var(--action); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
/* With motion allowed, the pointer clicks Gmail each time the visual becomes active: its box ticks and its line draws to the Library. */
@media (prefers-reduced-motion: no-preference) {
  .rv-hub-animated li.rv-hub-click { color: var(--muted); }
  .rv-hub-animated li.rv-hub-click .connector-logo { background: var(--muted); }
  .rv-hub-animated li.rv-hub-click .rv-check { border-color: var(--memand-control-border); background: var(--raised); }
  .rv-hub-animated path.rv-hub-click { clip-path: inset(-4px 100% -4px -4px); }
  .rv-hub-animated li.rv-hub-click .rv-check::after { content: ""; position: absolute; left: 7px; top: 7px; width: 14px; height: 19px; background: var(--cursor) center / contain no-repeat; opacity: 0; transform-origin: 0 0; }
  .is-active .rv-hub-animated li.rv-hub-click { animation: hub-row 2.4s .4s both; }
  .is-active .rv-hub-animated li.rv-hub-click .connector-logo { animation: hub-logo 2.4s .4s both; }
  .is-active .rv-hub-animated li.rv-hub-click .rv-check { animation: hub-check 2.4s .4s both; }
  .is-active .rv-hub-animated li.rv-hub-click .rv-check::after { animation: hub-pointer 2.4s .4s both; }
  .is-active .rv-hub-animated path.rv-hub-click { animation: hub-line 2.4s .4s both; }
}
@keyframes hub-pointer {
  0% { opacity: 0; transform: translate(150px, 46px); }
  12% { opacity: 1; }
  42% { transform: none; animation-timing-function: ease-in; }
  48% { transform: scale(.82); }
  54% { transform: none; }
  78% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translate(6px, 8px); }
}
@keyframes hub-check {
  0%, 48% { border-color: var(--memand-control-border); background: var(--raised); }
  49%, 100% { border-color: var(--action); background: var(--action) var(--check) center / 12px no-repeat; }
}
@keyframes hub-row { 0%, 48% { color: var(--muted); } 49%, 100% { color: var(--ink); } }
@keyframes hub-logo { 0%, 48% { background: var(--muted); } 49%, 100% { background: var(--ink); } }
/* The Library circle covers the last half of the line, so the wipe reaches its edge at 80% and then clears the hidden rest. */
@keyframes hub-line { 0%, 50% { clip-path: inset(-4px 100% -4px -4px); animation-timing-function: ease-out; } 80% { clip-path: inset(-4px 45% -4px -4px); } 81%, 100% { clip-path: inset(-4px -4px -4px -4px); } }
.rv-hub-library { position: absolute; top: 50%; left: 84%; z-index: 1; display: grid; place-items: center; width: min(116px, 28cqw); aspect-ratio: 1; border-radius: 50%; background: var(--action); color: var(--raised); font: 400 min(22px, 5.6cqw)/1 var(--serif); transform: translate(-50%, -50%); }
/* It just works: you edit the levels and give each person one; their agents read at that level. */
.rv-clear { container-type: inline-size; display: grid; grid-template-columns: 40% 12% 32% 4% 12%; row-gap: 12px; width: 100%; max-width: 460px; }
.rv-clear > .rv-kicker:nth-of-type(2) { grid-column: 3; }
.rv-clear > .rv-kicker:nth-of-type(3) { grid-column: 4 / 6; justify-self: end; }
.rv-clear-map { position: relative; grid-column: 1 / -1; height: min(280px, 76cqw); }
.rv-clear-map ul { position: absolute; top: 0; bottom: 0; z-index: 1; display: grid; grid-template-rows: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; }
.rv-clear-map li { display: flex; align-items: center; min-width: 0; margin: 5px 0; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--raised); white-space: nowrap; }
.rv-clear-levels { left: 0; width: 40%; }
.rv-clear-levels li { gap: min(10px, 2.4cqw); padding: 0 min(14px, 3cqw); font-size: min(15px, 4.2cqw); font-weight: 500; }
.rv-clear-levels li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--lv); }
.rv-clear-levels .rv-clear-add { position: relative; border-style: dashed; background: none; color: var(--muted); font-weight: 400; }
.rv-clear-levels .rv-clear-add::before { content: "+"; width: 9px; height: auto; background: none; text-align: center; }
.rv-clear-people { left: 52%; width: 32%; }
.rv-clear-people li { gap: min(10px, 2.4cqw); padding: 0 min(10px, 2cqw); }
.rv-avatar { display: grid; flex: none; place-items: center; width: min(26px, 6.4cqw); aspect-ratio: 1; border: 1.5px solid var(--lv); border-radius: 50%; font: 500 min(12px, 3.2cqw)/1 var(--sans); }
.rv-person { display: grid; min-width: 0; font-size: min(14px, 3.8cqw); font-weight: 500; line-height: 1.2; }
.rv-person small { color: var(--muted); font: 400 11px/1.3 var(--mono); }
.rv-clear-agents { right: 0; width: 12%; }
.rv-clear-agents li { justify-content: center; gap: min(6px, 1.2cqw); border-color: var(--lv); }
.rv-clear-agents .connector-logo { width: min(16px, 3.6cqw); height: min(16px, 3.6cqw); }
.rv-clear-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rv-clear-lines path { fill: none; stroke: var(--lv); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.lv-public { --lv: var(--knowledge); }
.lv-confidential { --lv: var(--action); }
.lv-secret { --lv: var(--ink); }
@container (max-width: 380px) { .rv-person small { display: none; } }
/* No lock-in: each rented part of the AI stack builds an asset the team should own. mem& is the rented context engine, and the Library is the one owned asset it claims. */
.rv-own { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 34%); gap: 10px 22px; width: 100%; max-width: 540px; }
.rv-own-head { grid-column: 2; }
.rv-rent { position: relative; display: grid; align-content: center; gap: 8px; min-width: 0; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--raised); }
.rv-rent-label { color: var(--muted); font-size: 13px; }
.rv-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rv-chips .connector-logo { width: 20px; height: 20px; }
.rv-own-none { display: flex; align-items: center; padding: 0 14px; color: var(--muted); }
/* mem& needs no category label: the full color logo sits centred in its card. */
.rv-rent-memand { justify-items: center; }
.rv-memand { width: 136px; max-width: 100%; height: auto; }
/* A short line joins each rented part to what it builds; models build nothing to own. */
.rv-rent::after { content: ""; position: absolute; top: 50%; left: 100%; width: 23px; border-top: 1px solid var(--border-strong); }
.rv-rent-solo::after { display: none; }
.rv-rent-memand::after { border-top: 1.5px solid var(--action); }
.rv-owned-cell { display: flex; align-items: center; padding: 0 14px; border: 1px dashed var(--border-strong); border-radius: 6px; color: var(--ink); font-size: 14px; font-weight: 500; }
.rv-owned { container-type: inline-size; display: grid; align-content: center; gap: 10px; padding: 14px; border-radius: 6px; background: var(--action); color: var(--raised); }
.rv-owned-name { font: 400 clamp(19px, 1.8vw, 22px)/1.1 var(--serif); }
.rv-owned .rv-pill { justify-self: start; padding: 6px 10px; background: var(--raised); color: var(--action); letter-spacing: .02em; white-space: nowrap; }
/* The pill names the format when the block has room, and shortens to Export when it does not. */
@container (max-width: 150px) { .rv-pill-more { display: none; } }
/* On phones the logos are a little smaller, and a long row wraps. */
@media (max-width: 429px) {
  .rv-own { column-gap: 14px; grid-template-columns: minmax(0, 1fr) minmax(0, 40%); }
  .rv-rent::after { width: 15px; }
  .rv-chips { gap: 7px; }
  .rv-chips .connector-logo { width: 18px; height: 18px; }
}
@media (max-width: 359px) {
  .rv-own { column-gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 36%); }
  .rv-rent::after { width: 13px; }
  .rv-rent, .rv-owned { padding: 12px; }
  .rv-owned-cell, .rv-own-none { padding: 0 9px; }
  .rv-owned-cell { font-size: 12px; }
  .rv-chips { gap: 4px; }
  .rv-owned .rv-pill { padding: 4px 9px; letter-spacing: .02em; }
}
/* Wide screens with the script: the list and its visual pin in place while scrolling moves through the points. */
@media (min-width: 1000px) {
  .risk-pinned { height: calc(var(--risk-steps, 4) * 40vh + 76vh); }
  .risk-pin { position: sticky; top: 12vh; display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; column-gap: clamp(40px, 6vw, 96px); height: 76vh; }
  .risk-pinned .risk-points { gap: 0; }
  .risk-pinned .risk-point { position: relative; display: block; padding: 22px 0; border-top: 1px solid var(--border-strong); }
  /* A rail beside the list fills as scrolling moves through the points; each point has a dot on it. */
  .risk-pinned .risk-points { position: relative; padding-left: 36px; }
  .risk-pinned .risk-points::before, .risk-pinned .risk-points::after { content: ""; position: absolute; top: 0; left: 4px; width: 2px; }
  .risk-pinned .risk-points::before { bottom: 0; background: var(--border); }
  .risk-pinned .risk-points::after { height: var(--rail-fill, 0px); background: var(--action); }
  .risk-pinned .risk-point::before { content: ""; position: absolute; top: 36px; left: -38px; box-sizing: border-box; width: 14px; height: 14px; border: 2px solid var(--border-strong); border-radius: 50%; background: var(--base); }
  .risk-pinned .risk-point.is-active::before, .risk-pinned .risk-point.is-done::before { border-color: var(--action); background: var(--action); }
  .risk-pinned .risk-point:last-child { border-bottom: 1px solid var(--border-strong); }
  .risk-pinned .risk-point.is-active { border-top-color: var(--ink); }
  .risk-pinned .risk-copy h3 { font-size: clamp(28px, 2.8vw, 40px); }
  .risk-pinned .risk-point:not(.is-active) .risk-copy h3 { opacity: .35; }
  .risk-pinned .risk-copy h3 { cursor: pointer; }
  .risk-heading { padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
  .risk-pinned .risk-point:not(.is-active) .risk-copy h3:hover { opacity: .6; }
  /* Only the active point shows its text; the row opens to the text's own height. */
  .risk-pinned .risk-copy { display: grid; grid-template-rows: auto 0fr; }
  .risk-pinned .risk-point.is-active .risk-copy { grid-template-rows: auto 1fr; }
  .risk-pinned .risk-copy p { min-height: 0; margin-top: 0; overflow: hidden; opacity: 0; }
  .risk-pinned .risk-point.is-active .risk-copy p { margin-top: 12px; opacity: 1; }
  .risk-frame { display: grid; height: 100%; }
  .risk-frame .risk-visual { grid-area: 1 / 1; min-height: 0; opacity: 0; }
  .risk-frame .risk-visual.is-active { opacity: 1; }
}
@media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
  .risk-frame .risk-visual, .risk-pinned .risk-copy h3 { transition: opacity .35s ease; }
  .risk-pinned .risk-copy { transition: grid-template-rows .5s cubic-bezier(.4, 0, .2, 1); }
  .risk-pinned .risk-copy p { transition: margin-top .5s cubic-bezier(.4, 0, .2, 1), opacity .35s ease; }
  .risk-pinned.risk-measuring :is(.risk-copy, .risk-copy h3, .risk-copy p) { transition: none; }
}

/* Why mem&: high reward */
.reward { border-bottom: 1px solid var(--base-tint-12); background: var(--ink); color: var(--base); }
.reward h2 { max-width: 1000px; text-wrap: balance; }
.reward .lede { margin-top: clamp(24px, 2.4vw, 36px); color: var(--dark-body); }
/* Powerful: four points in a grid, each with a small diagram of the one action it names. */
.power { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(16px, 2vw, 24px); margin: clamp(48px, 6vw, 88px) 0 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .power { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.power li { display: grid; align-content: start; gap: 10px; padding: clamp(24px, 2.6vw, 36px); border: 1px solid var(--base-tint-25); border-radius: 8px; }
.power figure { margin: 0 0 clamp(16px, 2vw, 24px); }
.power svg { display: block; height: auto; overflow: visible; }
.power strong { font: 400 clamp(26px, 2.4vw, 36px)/1.1 var(--serif); letter-spacing: -.02em; }
.power span { max-width: 460px; color: var(--dark-body); font-size: clamp(16px, 1.2vw, 18px); }
.power figure { display: grid; place-items: center; overflow: hidden; aspect-ratio: 16 / 10; margin: 0 0 clamp(20px, 2.4vw, 32px); border-radius: 6px; background: var(--base-tint-12); }
.power svg { width: 82%; max-width: 480px; }
.pv-eye { fill: var(--ink); }
.pv-library { fill: var(--accent-on-dark); }
/* Powerful pictures rest on their end state. A play adds .is-playing: each picture holds its start for 0.8s, plays one cause and its effect on a 400ms grid, and ends back on the resting picture. */
.power li { transition: border-color .2s ease; }
.power li.is-playable { cursor: default; }
@media (hover: hover) and (pointer: fine) { .power li.is-playable:hover { border-color: var(--base-tint-35); } }
.power svg[data-play] { transition: opacity .15s ease; }
.power svg.is-dipping { opacity: 0; }
/* All work builds knowledge: the team surrounds the Library. One after another, people send a small wave into it, the same wave the leader sends in You adapt faster. Each wave lands, wraps around the Library as a ring, and the Library pulses and fills out over it, so the contribution stays inside as a growth ring in the waves' off-white. At rest it shows every ring and a trace of every wave. */
.pv-person { fill: var(--raised); transform-box: fill-box; transform-origin: center; }
.pv-trace { fill: none; stroke: var(--raised); stroke-width: 2; stroke-linecap: round; stroke-opacity: .6; }
.pv-give-wave { fill: none; stroke: var(--raised); stroke-width: 2; stroke-linecap: round; opacity: 0; }
.pv-asset, .pv-mass { transform-box: fill-box; transform-origin: center; }
.pv-growth-ring { fill: none; stroke: var(--raised); stroke-width: 1.5; stroke-opacity: .6; }
@media (prefers-reduced-motion: no-preference) {
  .pv-build.is-playing .pv-person.is-giver { animation: pv-pulse .4s calc(0.7999999999999999s + var(--k) * 0.6s) both var(--ease-move); }
  .pv-build.is-playing .pv-give-wave { animation: pv-give 0.6s calc(0.95s + var(--k) * 0.6s) both linear; }
  .pv-build.is-playing .pv-wrap { stroke-dasharray: 1; animation: pv-wrap 0.3s calc(1.45s + var(--k) * 0.6s) both var(--ease-out); }
  .pv-build.is-playing .pv-asset { animation: pv-library-swell 2.2s 1.40s both var(--ease-move); }
  .pv-build.is-playing .pv-mass { animation: pv-absorb 2.10s 1.60s both var(--ease-out); }
  .pv-build.is-playing .pv-trace { animation: pv-fade .4s 3.45s both var(--ease-out); }
}
@keyframes pv-absorb { 0% { transform: scale(0.459); } 14.3% { transform: scale(0.595); } 28.6% { transform: scale(0.595); } 42.9% { transform: scale(0.730); } 57.1% { transform: scale(0.730); } 71.4% { transform: scale(0.865); } 85.7% { transform: scale(0.865); } 100.0% { transform: scale(1.000); } }
@keyframes pv-library-swell { 0.0% { transform: scale(1); } 8.2% { transform: scale(1.294); } 18.2% { transform: scale(1); } 27.3% { transform: scale(1); } 35.5% { transform: scale(1.227); } 45.5% { transform: scale(1); } 54.5% { transform: scale(1); } 62.7% { transform: scale(1.185); } 72.7% { transform: scale(1); } 81.8% { transform: scale(1); } 90.0% { transform: scale(1.156); } 100.0% { transform: scale(1); } }
/* The wave reaches the edge at full strength, then hands over to the ring. */
@keyframes pv-give { 0% { opacity: 0; transform: none; } 8% { opacity: 1; } 83% { opacity: 1; transform: translateX(var(--dx)); } 100% { opacity: 0; transform: translateX(var(--dx)); } }
@keyframes pv-wrap { 0% { opacity: 0; stroke-dashoffset: 1; stroke-opacity: 1; } 1% { opacity: 1; } 100% { stroke-dashoffset: 0; stroke-opacity: .6; } }
/* Your knowledge compounds: the same team and Library as All work builds knowledge, but nobody sends anything. A ring forms at the Library's core and moves out to its edge, and the Library grows when it arrives, on the same beats. The ring is off-white like the team's waves and stays inside as a growth ring, so the resting picture matches the team's picture without the traces. */
.pv-bloom { vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .pv-grow.is-playing .pv-bloom { animation: pv-bloom 0.8s calc(0.8s + var(--k) * 0.6s) both linear; }
  .pv-grow.is-playing .pv-asset { animation: pv-library-swell 2.2s 1.25s both var(--ease-move); }
  .pv-grow.is-playing .pv-mass { animation: pv-absorb 2.10s 1.30s both var(--ease-out); }
}
@keyframes pv-bloom { 0% { opacity: 0; transform: scale(.08); stroke-opacity: 1; } 6% { opacity: 1; } 62.5% { transform: scale(1); stroke-opacity: 1; } 100% { opacity: 1; transform: scale(1); stroke-opacity: .6; } }
/* Everyone sees the whole picture: the pieces lie scattered. The Library reaches out to every one, takes in the ones that matter, which brighten as they travel, leaves the rest, and assembles the whole part by part: body, head, ear, legs, trunk, tail. */
.pv-frag, .pv-travel, .pv-noise { fill: var(--dark-muted); color: var(--dark-muted); }
.pv-frag { opacity: .45; }
.pv-noise { opacity: .2; }
.pv-frag .is-stroke, .pv-travel .is-stroke, .pv-whole .is-stroke { fill: none; stroke: currentColor; stroke-width: 15; stroke-linecap: round; }
.pv-frag .is-thin, .pv-travel .is-thin, .pv-whole .is-thin { stroke-width: 4; }
.pv-travel { opacity: 0; transform-box: fill-box; transform-origin: center; }
.pv-seek { fill: none; stroke: var(--accent-on-dark); stroke-width: 1.2; stroke-opacity: .6; }
.pv-seek.is-noise { stroke-opacity: .12; }
.pv-whole { fill: var(--raised); color: var(--raised); }
.pv-part { stroke: var(--accent-on-dark); stroke-width: 4; paint-order: stroke; transform-box: fill-box; transform-origin: center; }
.pv-part.is-stroke { stroke: currentColor; }
.pv-whole .pv-eye { fill: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .pv-truth.is-playing .pv-frag { animation: pv-dim .4s 1.6s both var(--ease-out); }
  .pv-truth.is-playing .pv-noise { animation: pv-leave .4s 1.6s both var(--ease-out); }
  .pv-truth.is-playing .pv-seek { animation: pv-reach .4s calc(.8s + var(--i) * .05s) both var(--ease-out); stroke-dasharray: 1; }
  .pv-truth.is-playing .pv-seek.is-noise { animation-name: pv-reach-noise; }
  .pv-truth.is-playing .pv-travel { animation: pv-travel .5s calc(1.6s + var(--i) * .12s) both var(--ease-move); }
  .pv-truth.is-playing .pv-hit { animation: pv-library-pulse .4s 2.8s both var(--ease-move); }
  .pv-truth.is-playing .pv-part { animation: pv-assemble .5s calc(3.2s + var(--i) * .07s) both var(--ease-out); }
  .pv-truth.is-playing .pv-part.is-stroke { animation-name: pv-assemble-line; }
  .pv-truth.is-playing .pv-whole .pv-eye { animation: pv-fade .2s 3.8s both var(--ease-out); }
}
@keyframes pv-dim { from { opacity: 1; } to { opacity: .45; } }
@keyframes pv-leave { from { opacity: 1; } to { opacity: .2; } }
@keyframes pv-reach { from { stroke-dashoffset: 1; stroke-opacity: .9; } to { stroke-dashoffset: 0; stroke-opacity: .6; } }
@keyframes pv-reach-noise { from { stroke-dashoffset: 1; stroke-opacity: .9; } 60% { stroke-opacity: .6; } to { stroke-dashoffset: 0; stroke-opacity: .12; } }
@keyframes pv-travel { from { opacity: 1; transform: none; fill: var(--dark-muted); color: var(--dark-muted); } 40% { fill: var(--raised); color: var(--raised); } 70% { opacity: 1; transform: translate(calc(var(--tx) * .8), calc(var(--ty) * .8)) scale(.7); } to { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(.4); fill: var(--raised); color: var(--raised); } }
@keyframes pv-assemble-line { from { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(.3); } to { opacity: 1; transform: none; } }
@keyframes pv-assemble { from { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(.3); stroke-opacity: 0; } 80% { stroke-opacity: 0; } to { opacity: 1; transform: none; stroke-opacity: 1; } }
/* You adapt faster: the leader sends one small wave into the Library. The Library keeps sending the same wave, larger, across the team: three waves 0.6s apart, each with the Library's pulse, while the leader stays still. Each member pulses whenever a wave crosses it. The waves keep the leader's colour, so the direction passes through the teal Library unchanged. */
.pv-member { fill: var(--raised); transform-box: fill-box; transform-origin: center; }
.pv-leader { fill: var(--raised); transform-box: fill-box; transform-origin: center; }
.pv-halo { fill: none; stroke: var(--raised); stroke-width: 1.5; stroke-opacity: .55; }
.pv-ring-faint { fill: none; stroke: var(--raised); stroke-width: 2; stroke-linecap: round; stroke-opacity: .6; }
.pv-wave, .pv-lead-wave { fill: none; stroke: var(--raised); stroke-width: 2; stroke-linecap: round; opacity: 0; }
.pv-hit { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .pv-spread.is-playing .pv-leader { animation: pv-pulse .4s .8s both var(--ease-move); }
  .pv-spread.is-playing .pv-lead-wave { animation: pv-travel-arc .5s 1.05s both linear; }
  .pv-spread.is-playing .pv-hit { animation: pv-library-pulse-repeat 0.6s 1.60s 3 both var(--ease-move); }
  .pv-spread.is-playing .pv-wave { animation: pv-travel-arc 1.3s calc(1.75s + var(--k) * 0.6s) both linear; }
  .pv-spread.is-playing .pv-member { animation: pv-nudge-repeat 0.6s var(--d) 3 both var(--ease-out); }
  .pv-spread.is-playing .pv-ring-faint { animation: pv-fade .4s 4.25s both var(--ease-out); }
}
@keyframes pv-pulse { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.3); } }
/* One Library pulse for every card: up to 1.3 and back in 0.4 s. The repeating form keeps that shape and rests for the rest of each period. */
@keyframes pv-library-pulse { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.3); } }
@keyframes pv-library-pulse-repeat { 0% { transform: scale(1); } 30% { transform: scale(1.3); } 67%, 100% { transform: scale(1); } }
@keyframes pv-travel-arc { 0% { opacity: 0; transform: none; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(var(--dx)); } }
@keyframes pv-nudge-repeat { 0% { transform: scale(1); } 25% { transform: scale(1.45); } 58%, 100% { transform: scale(1); } }
@keyframes pv-fade { from { opacity: 0; } to { opacity: 1; } }

.waitlist { padding-block: clamp(80px, 10vw, 152px); background: var(--sunken); color: var(--ink); }
.waitlist-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(40px, 8vw, 140px); }
.waitlist-heading { flex: 1 1 380px; }
.waitlist-heading h2 { max-width: 600px; }
.waitlist-heading .lede { max-width: 440px; margin-top: 28px; }
.waitlist-form { display: grid; flex: .9 1 340px; max-width: 580px; gap: 22px; padding-top: 24px; border-top: 1px solid var(--ink); }
label { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 500; line-height: 1.4; }
.optional { color: var(--muted); font-size: 13px; font-weight: 400; }
.field input, .field select { display: block; width: 100%; min-height: 52px; padding: 11px 0; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); font: 400 20px/1.4 var(--serif); }
.field input:focus, .field select:focus { padding-bottom: 10px; border-bottom: 2px solid var(--action); }
.field input::placeholder { color: var(--muted); opacity: 1; }
.field select { color-scheme: light; }
.submit-button { justify-self: start; }
.waitlist-form[hidden], .waitlist-confirmed[hidden], .form-notice[hidden], .waitlist-form .field[hidden], .submit-button[hidden], .details-thanks[hidden] { display: none; }
/* After the app's joined redirect (s5, s6): the confirmation and address head the form, the email field gives way to
   them, and the two optional fields stay. While the token is redeemed, the form waits unseen. */
.is-redeeming .waitlist-form { visibility: hidden; }
.waitlist-form .waitlist-confirmed { border-top: 0; padding-top: 0; }
.details-thanks { font: 400 20px/1.4 var(--serif); }
/* A failed join: the message sits above the fields, where focus moves, and the entries stay. */
.form-notice { color: var(--danger); font-size: 16px; font-weight: 500; line-height: 1.5; }
/* People never see the trap field; bots that fill every input do. */
.trap-field { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* While the join is pending the arrow gives way to a spinner of the same size, and the button keeps its width. */
.submit-button[aria-busy="true"] { cursor: progress; }
.submit-button.is-pending span[aria-hidden] { position: relative; color: transparent; }
.submit-button.is-pending span[aria-hidden]::after { content: ""; position: absolute; inset: 0; margin: auto; width: .8em; height: .8em; border: 2px solid currentColor; border-color: var(--raised) var(--raised) var(--raised) transparent; border-radius: 50%; animation: pending-spin .8s linear infinite; }
@keyframes pending-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .submit-button.is-pending span[aria-hidden]::after { animation-timing-function: steps(8); animation-duration: 1.6s; } }
/* After a join, the form gives way to the confirmation and the address (s5, s6). */
.waitlist-confirmed { display: grid; flex: .9 1 340px; max-width: 580px; gap: 8px; padding-top: 24px; border-top: 1px solid var(--ink); }
.waitlist-confirmed h3 { font: 400 36px/1.1 var(--serif); letter-spacing: -.02em; }
.confirmed-address { color: var(--muted); font: 400 12px/1.4 var(--mono); letter-spacing: .08em; overflow-wrap: anywhere; }
@media (max-width: 599px) { .waitlist-confirmed h3 { font-size: 30px; } }
/* The unsubscribe page: the waitlist section's surface, heading and lede, then the button. */
.unsubscribe-page { background: var(--sunken); }
.unsubscribe h1 { max-width: 760px; font: 400 clamp(44px, 6vw, 92px)/1 var(--serif); letter-spacing: -.035em; text-wrap: balance; }
.unsubscribe .lede { margin-top: 28px; }
.unsubscribe form { margin-top: 40px; }
/* While pending, a spinner takes the label's place and the button keeps its size. */
.unsubscribe .button[aria-busy="true"] { cursor: progress; }
.unsubscribe .button.is-pending { position: relative; color: transparent; }
.unsubscribe .button.is-pending::after { content: ""; position: absolute; inset: 0; margin: auto; width: 17px; height: 17px; border: 2px solid var(--raised); border-left-color: transparent; border-radius: 50%; animation: pending-spin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .unsubscribe .button.is-pending::after { animation-timing-function: steps(8); animation-duration: 1.6s; } }

.site-footer { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; padding-block: clamp(40px, 4vw, 56px); }
.footer-logo { display: block; width: clamp(150px, 13vw, 200px); height: auto; }
.footer-contact { color: var(--muted); font: 400 12px/1.4 var(--mono); letter-spacing: .08em; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .button { transition: background-color .2s, border-color .2s, transform .2s; }
  .button-hero:hover { transform: translateY(-1px); }
  .text-link { transition: color .2s, border-color .2s; }
  .item { transition: box-shadow .35s ease; }
}

@media (max-width: 380px) {
  .site-header { gap: 12px; }
  .button-small { gap: 6px; padding-inline: 12px; }
}
@media (max-width: 339px) {
  .button-small span { display: none; }
}