/* One stylesheet, mobile first. Brand color comes from --brand. */
:root { --ink: #1f2933; --muted: #616e7c; --line: #e4e7eb; --bg: #fff; }
* { box-sizing: border-box; }
body { margin: 0; font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--pattern, none) 0 0 / 640px repeat, var(--bg); }
/* Links: the brand color darkened enough to read on white and on the tinted bands */
a { color: color-mix(in srgb, var(--brand, #264653) 75%, black); }
.page { max-width: 42rem; margin: 0 auto; padding: 1.25rem; }
.site-header, .admin-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); display: flex; gap: 1rem; align-items: center; justify-content: space-between; }
.wordmark { display: flex; } .wordmark img { height: 2.5rem; width: auto; }
/* Hero: a full-width band tinted with the brand color */
.hero { margin: -1.25rem 0 2rem; padding: 2.5rem 0 2rem; background: var(--tint); box-shadow: 0 0 0 100vmax var(--tint); clip-path: inset(0 -100vmax); }
.page { --tint: color-mix(in srgb, var(--brand) 9%, white); }
.hero h1 { font-size: clamp(2.2rem, 7vw, 3rem); line-height: 1.1; margin: 0 0 .75rem; color: var(--brand); letter-spacing: -.02em; }
.lead { font-size: 1.2rem; color: var(--ink); margin: 0 0 1.25rem; }
.store-note { margin: 0; color: var(--muted); font-size: .9rem; }
/* How it works: three numbered cards */
.steps { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: .75rem; counter-reset: step; }
.steps li { counter-increment: step; display: flex; gap: 1rem; align-items: center; padding: 1rem; border: 1px solid var(--line); border-radius: .75rem; font-weight: 600; }
.steps li::before { content: counter(step); flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 700; }
@media (min-width: 40rem) { .steps { grid-template-columns: repeat(3, 1fr); } .steps li { flex-direction: column; align-items: flex-start; } }
.section-title { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 .75rem; }
.safety { padding: 1rem 1.25rem; border-radius: .75rem; background: var(--tint); }
.safety p { margin: 0; }
.small { color: var(--muted); font-size: .9rem; }
/* Company site */
.site-header { flex-wrap: wrap; }
.company-nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .95rem; font-weight: 600; }
.company-nav a { color: var(--ink); text-decoration: none; }
.header-end { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-left: auto; }
/* On phones: the logo and the button on one line, the links on the next */
@media (max-width: 48rem) { .header-end { display: contents; } .site-header > .header-end > .button { margin-left: auto; } .site-header :is(.company-nav, .brand-nav) { order: 1; flex-basis: 100%; justify-content: space-between; gap: .25rem .75rem; margin-left: 0; font-size: .8rem; } }
.steps--stacked li { align-items: flex-start; font-weight: normal; }
.steps--stacked p { margin: .25rem 0 0; color: var(--muted); }
@media (min-width: 40rem) { .steps--stacked { grid-template-columns: 1fr; } .steps--stacked li { flex-direction: row; } }
.doctrine { padding: 1.25rem 0; }
.doctrine h2 { margin: 0 0 .25rem; color: var(--brand); }
.belief { font-weight: 600; margin: 0 0 .5rem; }
.constraints { list-style: none; padding: 0; display: grid; gap: .5rem; }
.constraints li { display: grid; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: .5rem; }
.constraints span { color: var(--muted); font-size: .95rem; }
.site-footer { border-top: 1px solid var(--line); padding: 1.25rem; color: var(--muted); font-size: .85rem; text-align: center; }
.site-footer .languages { margin-top: .5rem; } .site-footer .languages [aria-current] { color: inherit; text-decoration: none; }
/* The page a shared link opens (pitch 136): the plan, then Open in the app */
.shared { display: grid; gap: 1.5rem; }
.shared-head { display: grid; gap: .5rem; justify-items: start; }
/* A shared activity: a hero on the faces, and a ticket with what decides it and how to join */
.ticket { display: grid; gap: .85rem; padding: 1.5rem; text-align: center; }
.ticket p { margin: 0; }
.ticket-facts { display: grid; gap: .9rem; margin: 0 0 .5rem; padding: 0; list-style: none; text-align: left; }
.ticket-facts > li { display: grid; grid-template-columns: 1.75rem 1fr; gap: .5rem; align-items: start; font-size: 1.05rem; }
.ticket-facts > li > span:last-child { display: grid; gap: .3rem; justify-items: start; }
.fill { display: block; width: 100%; height: .5rem; border-radius: 999px; background: var(--sunken); overflow: hidden; }
.fill > span { display: block; height: 100%; border-radius: inherit; background: var(--action); }
.shared-links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; font-weight: 600; }
.ticket .shared-open { width: 100%; max-width: none; }
/* Becoming a tester: the text, and a big button in the ticket's column above */
/* The company home's hero on black: the chat stays readable */
.band--feature .bubble--not { border-color: rgb(255 255 255 / .35); color: #d9d6ce; text-decoration-color: rgb(255 255 255 / .5); }
.band--feature .is-playing.is-struck .bubble--not { text-decoration-color: rgb(255 255 255 / .5); }
.band--feature .bubble--mine { background: #fff; color: #121212; }
.band--feature .bubble:not(.bubble--mine, .bubble--not) { color: #121212; }
/* On an app's coloured hero, the second button in white */
.band--feature .button--outline { color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
.tester-cta .button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 3.5rem; font-size: 1.1rem; }
.link-button { padding: 0; border: 0; background: none; color: var(--link); font: inherit; text-decoration: underline; cursor: pointer; }
.shared-head h1 { margin: 0; font-size: clamp(1.8rem, 6vw, 2.4rem); line-height: 1.15; letter-spacing: -.015em; }
.shared-head .small { margin: 0; }
.shared-tile { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 1rem; background: var(--tint, var(--sunken)); font-size: 2.4rem; line-height: 1; }
.shared--canceled .shared-tile, .shared--past .shared-tile, .shared--full .shared-tile { opacity: .5; }
.shared .kind { margin: .25rem 0 0; color: var(--muted); font-weight: 600; }
.shared-facts { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: .75rem; }
.shared-facts li { display: grid; gap: .1rem; padding: .85rem 1rem; }
.shared-facts li + li { border-top: 1px solid var(--line); }
.shared-facts span { color: var(--muted); font-size: .95rem; }
.shared-marks { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.shared-marks span { padding: .2rem .7rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: .85rem; font-weight: 600; }
.shared-note { margin: 0; padding: .85rem 1rem; border-radius: .75rem; background: var(--tint); }
.shared > p { margin: 0; }
.shared-actions { display: grid; gap: .75rem; justify-items: center; text-align: center; }
.shared-actions .small { margin: 0; }
.shared-open { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; border-radius: 1rem; background: color-mix(in srgb, var(--brand) 80%, black); color: #fff; font-weight: 700; text-decoration: none; }
@media (min-width: 40rem) { .shared-open { max-width: 22rem; } }
.copy-box { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.ai-step { align-content: start; } .ai-step :is(ol, p) { margin: 0; } .ai-step ol { padding-left: 1.25rem; display: grid; gap: .4rem; }
.ai-step code { overflow-wrap: anywhere; font-size: .85em; }
.copy-box code { padding: .35rem .6rem; border-radius: .5rem; background: var(--sunken); font-size: .95rem; }
.device-code { font: 700 2rem/1.2 ui-monospace, monospace; letter-spacing: .12em; margin: 1rem 0; }
/* A connected tool's link (pitch 162): the button on a phone, the QR code on a computer */
.hand-off-link .on-computer { display: none; }
.hand-off-link .qr-code { width: 220px; max-width: 100%; padding: 12px; background: #fff; border-radius: 12px; }
.hand-off-link .qr-code svg { display: block; width: 100%; height: auto; }
@media (hover: hover) and (pointer: fine) {
  .hand-off-link .on-phone { display: none; }
  .hand-off-link .on-computer { display: block; }
}

/* The public sites (pitch: website v2). Each brand's tokens come from its design
   system in Claude Design (company/doc/5-design), set on [data-site]. A brand
   card on the company home sets its own data-site, so it takes that brand's look. */
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/ibm-plex-sans-400-90cc55e6.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/ibm-plex-sans-600-5326bafa.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/poppins-400-b1120285.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/poppins-600-47e0853c.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/poppins-700-c5453e90.woff2") format("woff2"); font-weight: 700 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/inter-400-14a9d9e2.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/inter-600-5f190ea5.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/inter-800-d2dd0dd6.woff2") format("woff2"); font-weight: 800; font-display: swap; }

[data-site] { --gutter: clamp(1rem, 4vw, 2.5rem); --bg: var(--surface); color: var(--ink); }
/* The font only where a whole brand shows (the page, a brand card, a drawn phone). A small mark (an app's
   name in the footer, a dot, a count) takes the colours alone, so a page never loads the other apps' fonts */
:is(body, div, li)[data-site] { font-family: var(--font); font-size: var(--size); }
[data-site=irl] {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --size: 17px;
  --surface: #fafaf7; --raised: #fff; --sunken: #f2f0ea; --ink: #121212; --muted: #5b5a55; --line: #e5e2da;
  --action: #121212; --link: #121212; --feature: #121212; --on-feature-muted: #d9d6ce;
  --accent-soft: #eceae4; --on-accent-soft: #3e3d39; --success: #166534; --success-soft: #e5f2e8;
  --r-control: 12px; --r-card: 16px; --r-tile: 10px; --r-badge: 999px; --edge: 0 0 0 1px #e5e2da;
  --display-weight: 700; --title-weight: 700; --tracking: -0.03em; --eyebrow-case: uppercase; --eyebrow-tracking: .06em; --logo-h: 1.9rem;
}
[data-site=bondable] {
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --size: 16px;
  --surface: #fafaf6; --raised: #fff; --sunken: #f3f1ea; --ink: #0c0f1a; --muted: #555a6b; --line: #e1ddd0;
  --action: #1d3557; --link: #1d3557; --action-soft: #eef2f8; --feature: #1d3557; --on-feature-muted: #b8c4d6; --accent: #d4a84b;
  --accent-soft: #f7eac9; --on-accent-soft: #735318; --success: #166534; --success-soft: #e5f2e8;
  --r-control: 12px; --r-card: 12px; --r-tile: 8px; --r-badge: 8px; --edge: 0 0 0 1px #e1ddd0;
  --display-weight: 600; --title-weight: 600; --tracking: -0.015em; --eyebrow-case: uppercase; --eyebrow-tracking: .1em; --logo-h: 1.75rem;
}
[data-site=hangout] {
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; --size: 16px;
  --surface: #fbfdfc; --raised: #fff; --sunken: #ecf6f3; --ink: #0c1d23; --muted: #557078; --line: #d8ece7;
  --action: #238378; --link: #1e7268; --action-soft: #e3f3ef; --feature: #238378; --on-feature-muted: #fff; --accent: #e76f51;
  --accent-soft: #fff1eb; --on-accent-soft: #a84c35; --success: #137a3a; --success-soft: #e6f4ea;
  --r-control: 16px; --r-card: 16px; --r-tile: 12px; --r-badge: 999px; --edge: 0 0 0 1px #d8ece7;
  --display-weight: 700; --title-weight: 700; --tracking: -0.025em; --eyebrow-case: none; --eyebrow-tracking: 0; --logo-h: 2.75rem;
}
[data-site=flirtify] {
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --size: 17px;
  --surface: #fffaf8; --raised: #fff; --sunken: #fef1ed; --ink: #1a0b0c; --muted: #6b5054; --line: #f1dcd9;
  --action: #df313e; --link: #c1121f; --action-soft: #fff0f1; --feature: #df313e; --on-feature-muted: #fff; --accent: #8a0e16;
  --accent-soft: #ffe0e2; --on-accent-soft: #8a0e16; --success: #137a3a; --success-soft: #e3f6e9;
  --r-control: 16px; --r-card: 12px; --r-tile: 12px; --r-badge: 999px; --edge: 0 1px 2px rgba(26, 11, 12, .06), 0 4px 16px rgba(26, 11, 12, .06);
  --display-weight: 800; --title-weight: 800; --tracking: -0.035em; --eyebrow-case: none; --eyebrow-tracking: 0; --logo-h: 2.6rem;
}
/* Activity tiles: a tint per category, behind the emoji only */
[data-site=bondable] [data-kind=workshop] { --tile: #e2e8f1; } [data-site=bondable] [data-kind=roundtable] { --tile: #ebe6d6; }
[data-site=bondable] [data-kind=skill_share] { --tile: #f7eac9; } [data-site=bondable] [data-kind=meetup] { --tile: #e3ecee; }
[data-site=bondable] [data-kind=working_session] { --tile: #e9e8ef; } [data-site=bondable] [data-kind=other] { --tile: #f0eee6; }
[data-site=hangout] [data-kind=dinner] { --tile: #fde9cf; } [data-site=hangout] [data-kind=drinks] { --tile: #fde1d6; }
[data-site=hangout] [data-kind=coffee] { --tile: #efe3d3; } [data-site=hangout] [data-kind=active] { --tile: #d4eee8; }
[data-site=hangout] [data-kind=games] { --tile: #dde7f1; } [data-site=hangout] [data-kind=events] { --tile: #fbe0e8; }
[data-site=hangout] [data-kind=other] { --tile: #e6f1ee; }
[data-site=flirtify] [data-kind=dinner] { --tile: #ffe0e2; } [data-site=flirtify] [data-kind=drinks] { --tile: #ece3f4; }
[data-site=flirtify] [data-kind=events] { --tile: #fbe2ee; } [data-site=flirtify] [data-kind=other] { --tile: #fff0d6; }
[data-site=flirtify] [data-kind=coffee] { --tile: #f4e7da; } [data-site=flirtify] [data-kind=active] { --tile: #e0f1e8; }

:where([data-site]) a { color: var(--link); }
.home :is(h1, h2, h3, p, ul, ol, figure), .site-footer :is(h2, p) { margin: 0; }

/* Header and footer: the brand's colour edge to edge, the company's on white */
[data-site] .site-header { padding: 1rem max(var(--gutter), (100% - 67rem) / 2); gap: 1rem 2rem; }
[data-site] .wordmark img { height: var(--logo-h); }
.site-header--feature { position: relative; color: #fff; border-bottom: 0; }
.brand-nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-left: auto; font-size: .85rem; font-weight: 500; }
.brand-nav a { color: #fff; text-decoration: none; }
@media (min-width: 48rem) { .brand-nav { gap: 1.75rem; font-size: .95rem; } }
[data-site] .site-footer { display: grid; gap: 1rem; padding: 2.25rem max(var(--gutter), (100% - 67rem) / 2) 1.5rem; border-top: 0; text-align: left; font-size: .875rem; }
.footer-cols a, .footer-legal a { color: var(--ink); text-decoration: none; }
/* Each group is a bubble over the faces, like the page above it */
.footer-cols { display: flex; flex-wrap: wrap; gap: 1rem; }
.footer-cols > *, .footer-cols > .patch { display: grid; gap: .5rem; align-content: start; flex: 1 1 12rem; padding: 1.25rem 1.5rem; }
.footer-cols > .footer-brand { flex: 1.6 1 18rem; gap: 1rem; }
.footer-cols h2 { font-size: inherit; color: var(--ink); }
.footer-apps { display: flex; gap: .75rem; }
.footer-apps a { display: grid; justify-items: center; gap: .3rem; font-size: .75rem; font-weight: 600; color: var(--feature); }
/* An app's name in its own colour, where a page mixes the three apps */
.app-logo { display: inline-block; height: calc(var(--logo-h) * .5); width: auto; vertical-align: middle; }
.footer-apps img { display: block; border-radius: 22.5%; }
.footer-legal { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.site-footer .footer-bottom { width: auto; padding: .85rem 1.5rem; border-top: 0; }
/* On phones the last line centres: the legal pages, then the copyright, then the languages */
@media (max-width: 40rem) { .site-footer .footer-bottom { flex-direction: column; align-items: center; text-align: center; } .footer-legal { justify-content: center; } .footer-legal > span { order: 1; flex-basis: 100%; } }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; padding-top: 1rem; border-top: 1px solid var(--line); }
[data-site] .site-footer .languages { margin: 0; }

/* Home pages: full-width bands instead of the narrow .page column */
.home { overflow-x: clip; }
.wrap { width: min(100% - 2 * var(--gutter), 67rem); margin-inline: auto; }
.band { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
/* Bands off screen skip layout until scrolled near (their drawn phones are costly); the feature band's
   background blends with the page, which this would cut */
.band:not(.band--feature) { content-visibility: auto; contain-intrinsic-size: auto 25rem; }
.band--tight { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.band--feature { position: relative; color: #fff; padding-block: clamp(2.5rem, 7vw, 6rem) clamp(3.5rem, 8vw, 7rem); }
/* A text page's hero has no side: its words take the whole width */
.band--feature > .wrap.stack .lede { max-width: none; }
@media (min-width: 48rem) { .band--feature > .wrap.stack > h1 { max-width: 75%; } }
/* The brand color laid over the page's faces, not hiding them: the faces run on through the header and band */
:is(.site-header--feature, .band--feature)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--feature); mix-blend-mode: multiply; }
.band--sunken { background: var(--sunken); }
.band--raised { background: var(--raised); border-block: 1px solid var(--line); }
.split { display: flex; flex-wrap: wrap; align-items: center; gap: 2.5rem clamp(2.5rem, 6vw, 5.5rem); }
.split > * { flex: 1 1 22rem; min-width: 0; }
.split > .side { flex: 1 1 20rem; max-width: 28rem; }
.split--top { align-items: flex-start; }
.stack { display: grid; gap: 1rem; align-content: start; }
.stack--lg { gap: 1.5rem; } .stack--sm { gap: .5rem; }
.display { font-size: clamp(2.6rem, 6.4vw, 4.75rem); line-height: 1.02; letter-spacing: var(--tracking); font-weight: var(--display-weight); }
.title { font-size: clamp(1.8rem, 3.6vw, 2.75rem); line-height: 1.1; letter-spacing: var(--tracking); font-weight: var(--title-weight); }
.title--xl { font-size: clamp(2.1rem, 4.8vw, 3.75rem); line-height: 1.04; }
.lede { font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.5; max-width: 30em; }
.quiet { color: var(--muted); }
/* Text over the faces: each line on its own rounded patch of the band color, hugging the words, so the group reads as one stepped bubble */
.backed, .ruled .backed { gap: 0; justify-items: start; }
.backed > *, .patch { width: fit-content; margin: 0; padding: .5rem 1rem; background: color-mix(in srgb, var(--raised) 98%, transparent); border-radius: 1.25rem; }
.backed > * + * { border-top-left-radius: 0; }
.backed > :not(:last-child) { border-bottom-left-radius: 0; }
.backed.center > * { border-radius: 1.25rem; }
/* A step's number: white in a black circle, centred above its title (the how page) */
.backed > .step-head { display: grid; justify-items: center; gap: .6rem; padding: .25rem 0 0; background: none; }
.step-head > .patch { border-bottom-left-radius: 0; }
.step-num { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: 0; border-radius: 50%; background: var(--ink); color: #fff; font-size: 1.25rem; font-weight: 700; }
/* On a brand-colored hero the patch is the hero's own color, so the white text stays white */
/* Text pages sit on the faces too: every block gets its patch, joined into one bubble from heading to heading */
:where([data-site]) :is(.page, .page > section) > :not(section, article, .phones) { width: fit-content; max-width: 100%; margin: 0; padding: .5rem 1rem; background: color-mix(in srgb, var(--raised) 98%, transparent); border-radius: 1.25rem; }
:where([data-site]) :is(.page, .page > section) > :is(h1, h2, h3):not(:first-child) { margin-top: 1.5rem; }
:where([data-site]) :is(.page, .page > section) > * + :not(h1, h2, h3) { border-top-left-radius: 0; }
:where([data-site]) :is(.page, .page > section) > :has(+ :not(h1, h2, h3)) { border-bottom-left-radius: 0; }
:where([data-site]) :is(.page, .page > section, .backed) > :is(ul, ol):not([class]) { padding-inline-start: 2.25rem; }
.band--feature .split > div.stack .quiet { color: var(--on-feature-muted); }
.small-text { font-size: .9rem; }
.strong { font-weight: 600; }
.eyebrow { font-size: .78rem; font-weight: 600; letter-spacing: var(--eyebrow-tracking); text-transform: var(--eyebrow-case); color: var(--muted); }
.band--feature .eyebrow { color: var(--accent, #fff); }
.cols { list-style: none; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col, 14rem)), 1fr)); }
.panel { display: grid; gap: .6rem; align-content: start; padding: clamp(1rem, 2vw, 1.4rem); border-radius: var(--r-card); background: var(--raised); box-shadow: var(--edge); color: var(--ink); }
.panel--sunken { background: var(--sunken); box-shadow: none; }
.panel--action { background: var(--action); color: #fff; box-shadow: none; }
.panel--action .quiet { color: #fff; }
.panel--soft { background: var(--accent-soft); box-shadow: none; padding: clamp(1.75rem, 5vw, 4rem); border-radius: calc(var(--r-card) * 2); }
.panel--brand { background: var(--action-soft, var(--accent-soft)); }
.panel.split { display: flex; }
.panel h3 { font-size: 1.15rem; font-weight: 600; line-height: 1.3; }
/* A card's points, one per line with a thin rule between: easier to read than bullets */
.lines { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; line-height: 1.45; }
.lines li { padding-block: .55rem; }
.lines li + li { border-top: 1px solid var(--line); }
.lines li:first-child { padding-top: .2rem; }
/* Short facts as tags: one line each, side by side when they fit */
.fact-tags { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.fact-tags li { display: flex; align-items: center; gap: .5rem; padding: .55rem 1rem; border-radius: 99px; background: var(--raised); box-shadow: var(--edge); font-weight: 500; }
.num { font-weight: 700; color: var(--on-accent-soft); }
.tile { flex: none; display: inline-grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: var(--r-tile); background: var(--tile, var(--sunken)); font-size: 1.75rem; line-height: 1; }
.tile--s { width: 2.5rem; height: 2.5rem; font-size: 1.25rem; border-radius: calc(var(--r-tile) * .75); }
.tile--l { width: 4.5rem; height: 4.5rem; font-size: 2.25rem; border-radius: calc(var(--r-tile) * 1.25); }
.chip { display: inline-block; justify-self: start; padding: .2rem .65rem; border-radius: var(--r-badge); background: var(--sunken); color: var(--ink); font-size: .75rem; font-weight: 600; line-height: 1.4; }
.chip--success { background: var(--success-soft); color: var(--success); }
.chip--accent { background: var(--accent-soft); color: var(--on-accent-soft); }
.chip--joined { background: var(--action-soft, var(--sunken)); color: var(--link); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 1.4rem; border-radius: var(--r-control); background: var(--action); color: #fff; font-weight: 600; text-decoration: none; }
.button--light { background: #fff; color: var(--link); }
.button--small { min-height: 44px; padding: 0 1rem; font-size: .95rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.band--feature .store-note { color: var(--on-feature-muted); }
.row { display: flex; align-items: center; gap: .75rem 1rem; }
.row > .grow { flex: 1 1 14rem; min-width: 0; display: grid; }
.wrap-row { flex-wrap: wrap; }
.spread { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: .5rem 1.5rem; }
.rows { list-style: none; padding: 0; border-radius: var(--r-card); background: var(--raised); box-shadow: var(--edge); overflow: hidden; }
.rows > * { padding: .85rem 1rem; }
.rows > * + * { border-top: 1px solid var(--line); }
.rows a { color: var(--ink); text-decoration: none; }
.day { padding-block: .55rem; background: var(--sunken); font-size: .75rem; font-weight: 600; letter-spacing: var(--eyebrow-tracking); text-transform: var(--eyebrow-case); color: var(--muted); }
/* How it works on the brand homes: the app's own screens, one per step; a sideways row on phones */
.phones { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.phones li { display: grid; gap: .5rem; align-content: start; }
.phones > li > img { display: block; width: 100%; height: auto; border: .4rem solid #111; border-radius: 1.6rem; background: #111; box-shadow: var(--edge); }
.phones h3 { font-size: 1rem; }
/* The company home's sets of phones, one app at a time, on top of each other */
.step-sets { display: grid; }
.step-set { grid-area: 1 / 1; }
/* Every rotation changes the same way: a wipe from left to right, the new one uncovered as the old one is
   cleared at the same edge, so the two never overlap (the margins keep the shadows) */
.step-set, .app-page, .rotate-page { visibility: hidden; clip-path: inset(-2rem 100% -2rem -2rem); }
:is(.step-set, .app-page, .rotate-page):is(.is-shown, .is-leaving) { visibility: visible; transition: clip-path .7s cubic-bezier(.65, 0, .35, 1); }
:is(.step-set, .app-page, .rotate-page).is-shown { clip-path: inset(-2rem); }
:is(.step-set, .app-page, .rotate-page).is-leaving { clip-path: inset(-2rem -2rem -2rem 100%); }
@media (prefers-reduced-motion: reduce) { :is(.step-set, .app-page, .rotate-page):is(.is-shown, .is-leaving) { transition: none; } }
/* The hero's chat and the AI band: three plans stacked in the same place */
.rotating { display: grid; grid-template-columns: minmax(0, 1fr); }
.rotate-page { grid-area: 1 / 1; } ul.rotate-page { margin: 0; padding: 0; }
/* The company home's drawn phones: everything in em, sized from the phone's width, so they scale like a screenshot */
.phone { display: flex; container-type: inline-size; aspect-ratio: 600 / 1235; overflow: hidden; border: .4rem solid #111; border-radius: 1.6rem; background: var(--surface); box-shadow: var(--edge); }
.ph { flex: 1; display: flex; flex-direction: column; gap: .65em; min-width: 0; padding: .5em .9em .9em; font-size: 4.6cqi; line-height: 1.3; color: var(--ink); }
:where(.ph p) { margin: 0; }
.ph .app-status { display: flex; padding: 0 .3em; font-size: 1em; }
.ph .app-island { width: 5.5em; height: 1.5em; }
.ph .app-battery { width: 1.7em; height: .8em; }
.ph-muted { display: block; color: var(--muted); font-size: .85em; }
.ph-card strong, .ph-plan strong { display: block; }
.ph-where { font-size: 1.15em; }
.ph-chips { display: flex; flex-wrap: wrap; gap: .4em; }
.ph-chip { display: inline-block; padding: .25em .7em; border: 1px solid var(--line); border-radius: 99px; font-size: .8em; font-weight: 600; }
.ph-chip--dark { background: #111; border-color: #111; color: #fff; }
.ph-chip--soft { background: color-mix(in srgb, var(--feature) 14%, #fff); border-color: transparent; color: var(--feature); }
.ph-day { margin-top: .3em; font-weight: 700; }
.ph-card { display: flex; gap: .7em; align-items: center; padding: .7em; border-radius: .9em; background: var(--raised); box-shadow: var(--edge); }
.ph-card--col { flex-direction: column; align-items: stretch; gap: .2em; }
.ph-tile { flex: none; display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: .7em; background: color-mix(in srgb, var(--feature) 14%, #fff); font-size: 1.15em; }
.ph-going { display: flex; align-items: center; gap: .4em; margin-top: .2em; font-size: .85em; font-weight: 600; }
.ph-blur { width: 1.1em; height: 1.1em; border-radius: 50%; background: #666; filter: blur(1.5px); }
.ph .ph-tabs { display: block; width: 100%; height: auto; margin-top: auto; }
.ph-big { font-size: 1.6em; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.ph-steps { border-radius: .9em; background: var(--raised); box-shadow: var(--edge); }
.ph-steps p { display: grid; grid-template-columns: 40% 1fr; gap: .5em; padding: .55em .7em; font-size: .8em; }
.ph-steps p + p { border-top: 1px solid var(--line); }
.ph-steps p > :first-child { color: var(--feature); font-weight: 600; }
.ph-label { font-weight: 700; }
.ph-face { width: 2.4em; height: 2.4em; border-radius: 50%; background: #f4efe6; }
.ph-button { display: block; padding: .75em; border-radius: .7em; background: color-mix(in srgb, var(--feature) 80%, #fff); color: #fff; text-align: center; font-weight: 700; }
.ph-button--outline { margin-top: .4em; padding: .5em; border: 1px solid var(--line); background: none; color: var(--ink); }
.ph-link { color: var(--feature); text-align: center; font-weight: 600; }
.ph-split { display: flex; justify-content: space-between; align-items: center; gap: .5em; }
.ph-plan { display: flex; gap: .6em; align-items: center; font-size: 1.15em; }
.ph-progress { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; font-size: .7em; text-align: center; color: var(--muted); }
.ph-progress li::before { content: ""; display: block; width: 1.3em; height: 1.3em; margin: 0 auto .3em; border: 2px solid var(--feature); border-radius: 50%; background: #fff; }
.ph-progress :is(.is-done, .is-now)::before { background: var(--feature); }
.ph-progress .is-now { color: var(--ink); font-weight: 700; }
.ph-map { display: block; width: 100%; height: auto; border-radius: .9em; }
.ph-mapbox { position: relative; }
.ph-directions { position: absolute; right: .5em; bottom: .5em; padding: .4em .7em; border-radius: .6em; background: color-mix(in srgb, var(--feature) 80%, #fff); color: #fff; font-size: .8em; font-weight: 700; }
.ph-faces { position: absolute; left: 22%; top: 22%; display: flex; }
.ph-faces img { width: 1.9em; height: 1.9em; margin-right: -.5em; border: 2px solid #fff; border-radius: 50%; background: #f4efe6; }
.ph-toggle { position: relative; width: 2.4em; height: 1.4em; border-radius: 99px; background: #d5d2ca; }
.ph-toggle::after { content: ""; position: absolute; top: .15em; left: .15em; width: 1.1em; height: 1.1em; border-radius: 50%; background: #fff; }
.ph .ph-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; margin-top: auto; }
.ph-actions span { padding: .6em .2em; border: 1px solid var(--line); border-radius: .6em; text-align: center; font-size: .75em; font-weight: 600; }
.ph .ph-push { margin-top: auto; }
.ph .ph-center { margin-top: auto; text-align: center; }
.phones--two { grid-template-columns: repeat(2, minmax(0, 14rem)); margin-block: 1rem; }
@media (max-width: 48rem) {
  .phones { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; }
  .phones li { scroll-snap-align: start; }
}
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.facts > div { padding: .65rem .8rem; border-radius: calc(var(--r-card) * .75); border: 1px solid var(--line); background: var(--raised); }
.facts .eyebrow { font-size: .72rem; }
.avatar { flex: none; display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--line); color: var(--muted); }
.avatar img { width: 100%; height: 100%; border-radius: 50%; }
.faces { flex: none; display: flex; }
.faces > span { width: 2.25rem; height: 2.25rem; margin-left: -.6rem; border: 2px solid var(--raised); border-radius: 50%; overflow: hidden; background: var(--sunken); }
.faces > span:first-child { margin-left: 0; }
.faces img { display: block; width: 100%; height: 100%; }
.avatar--blurred { overflow: hidden; }
.faces--blurred img, .avatar--blurred img { filter: blur(4px); transform: scale(1.15); }
/* The hero plays one tap (hero_controller): cards rise in, the button says you're in, faces sharpen */
[data-controller~="hero"] > li { animation: hero-rise .8s ease both; }
[data-controller~="hero"] > li:nth-child(2) { animation-delay: .25s; }
[data-controller~="hero"] > li:nth-child(3) { animation-delay: .5s; }
[data-controller~="hero"] img { transition: filter 1.6s ease, transform 1.6s ease; }
[data-controller~="hero"] .button { transition: background-color .6s ease, color .6s ease; }
.hero--in .faces--blurred img, .hero--in .avatar--blurred img { filter: none; transform: none; }
.hero--in .button[data-hero-target] { background: var(--action-soft, var(--sunken)); color: var(--link); }
@keyframes hero-rise { from { opacity: 0; transform: translateY(.75rem); } }
@media (prefers-reduced-motion: reduce) { [data-controller~="hero"] > li { animation: none; } [data-controller~="hero"] * { transition: none; } }
.mock { max-width: 27rem; justify-self: end; }
.mock .title { font-size: clamp(1.4rem, 2.4vw, 1.75rem); }
.ruled { list-style: none; padding: 0; display: grid; gap: 1.5rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.ruled li { display: grid; gap: .3rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.ruled--plain li { padding-top: 0; border-top: 0; }
.ruled strong { font-size: 1.1rem; }
/* Lists of what's in (a check in the brand's colour) and what's not (a muted cross), drawn so every font shows the same mark */
.ticks { list-style: none; padding: 0; display: grid; gap: .75rem; }
.ticks li { display: flex; gap: .7rem; }
.ticks li::before { content: ""; flex: none; width: 1.2rem; height: 1.2rem; margin-top: calc((1lh - 1.2rem) / 2); background: var(--link); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E") center / contain no-repeat; }
.ticks--no li::before { background: var(--muted); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
/* The pricing hero's free list: small cards rising in a loop, two copies so it never ends; still on reduced motion */
.ticker { height: 23rem; overflow: hidden; }
.ticker-track { animation: ticker-up 5s linear infinite; }
.ticker-track > ul { list-style: none; padding: 0 0 .75rem; gap: .75rem; }
.ticker .panel { padding-block: .7rem; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker-up { to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker { height: auto; } .ticker-track { animation: none; } .ticker-track > ul + ul { display: none; } }
.bubble { justify-self: start; max-width: 24em; padding: .9rem 1.1rem; border-radius: 1.25rem 1.25rem 1.25rem .4rem; background: var(--accent-soft); font-size: 1.1rem; line-height: 1.45; }
.bubble--not { background: none; border: 1px dashed #c9c5ba; color: var(--muted); font-size: 1rem; text-decoration: line-through; text-decoration-color: #a9a59b; }
.bubble--mine { justify-self: end; border-radius: 1.25rem 1.25rem .4rem 1.25rem; background: #34332f; color: #fff; font-size: 1rem; }
/* The company hero plays once (bubbles_controller): struck through, then a friend's plan, then you're in */
[data-controller~="bubbles"] { max-width: 26rem; }
/* Sections rise in once as they come on screen (reveal_controller); the AI band's chat plays in turn */
.is-waiting { opacity: 0; transform: translateY(1.5rem); }
.is-revealed { transition: opacity .6s ease, transform .6s ease; }
.is-revealed .dark-panel > * { animation: hero-rise .7s ease both; }
.is-revealed .dark-panel > :nth-child(2) { animation-delay: .9s; }
.is-revealed .dark-panel > :nth-child(3) { animation-delay: 1.8s; }
.is-revealed .icebreaker > :first-child { animation: icebreaker-fade .8s ease 1.2s both; }
.is-revealed .icebreaker > :last-child { animation: hero-rise .8s ease 1.4s both; }
@keyframes icebreaker-fade { to { opacity: .5; transform: scale(.97); } }
[data-controller~="bubbles"] .bubble:not(.bubble--mine) { justify-self: stretch; max-width: none; }
.is-playing .bubble--not { text-decoration-color: transparent; }
.is-playing.is-struck .bubble--not { text-decoration-color: #a9a59b; transition: text-decoration-color .8s ease; }
.is-playing :is(.scene-said, .scene-reply) { opacity: 0; transform: translateY(.6rem); }
.is-playing.is-said .scene-said, .is-playing.is-answered .scene-reply { opacity: 1; transform: none; transition: opacity .8s ease, transform .8s ease; }
.center { text-align: center; justify-items: center; }
.dark { background: #121212; color: #fff; }
.on-dark { color: #d9d6ce; }
.dark > .wrap a { color: #fff; }
.dark > .wrap .button--light { color: var(--ink); }
.dark-panel { display: grid; gap: .75rem; padding: 1.5rem; border-radius: 16px; background: #1f1f1e; border: 1px solid #34332f; }
/* On InRealLife the hero is already black, so the dark band right under it turns light */
[data-site=irl] .band--feature + .dark { background: var(--sunken); color: var(--ink); }
[data-site=irl] .band--feature + .dark .on-dark { color: var(--muted); }
[data-site=irl] .band--feature + .dark .dark-panel { background: var(--accent-soft); border-color: transparent; }
[data-site=irl] .band--feature + .dark > .wrap .button--light { background: var(--action); color: #fff; }
/* Company home: the three apps, each in its own look */
.brands { list-style: none; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.brands > li { display: grid; border-radius: var(--r-card); overflow: hidden; background: var(--surface); box-shadow: var(--edge); }
.brands > li > a { display: grid; grid-template-rows: auto 1fr; color: var(--ink); text-decoration: none; height: 100%; }
.brands .shot { position: relative; display: block; padding: 1.25rem 1.5rem 0; background: var(--feature); }
/* The phone slips into the card: a slot across its bottom, a little shade just above it */
.brands .shot::before, .brands .shot::after { content: ""; position: absolute; inset: auto 10px 0; pointer-events: none; }
.brands .shot::before { height: .7rem; background: linear-gradient(to top, rgb(0 0 0 / .18), transparent); mask-image: linear-gradient(to right, transparent, #000 2rem, #000 calc(100% - 2rem), transparent); }
.brands .shot::after { height: 2px; border-radius: 2px; background: rgb(0 0 0 / .35); }
.brands .brand-logo { height: calc(var(--logo-h) * .8); width: auto; justify-self: start; margin-block: .15rem .35rem; }
/* Below the drawn screen, the card stays in the app's colour, its text in white */
.brands .shot + .body { display: flex; flex-direction: column; background: var(--feature); color: #fff; }
/* Each card's link at its bottom, level with the others' */
.brands .shot + .body .visit { margin-top: auto; padding-top: .5rem; }
.brands .shot + .body .brand-logo { align-self: flex-start; }
.brands .shot + .body :is(.eyebrow, .quiet) { color: rgb(255 255 255 / .8); }
.brands .shot + .body :is(.title, .visit) { color: #fff; }
/* An app's Home drawn in HTML: framed in its colour on three sides, cut at the bottom like a screenshot */
.app-screen { display: grid; align-content: start; height: 20.5rem; overflow: hidden; padding: .5rem .8rem .8rem; border: .45rem solid #111; border-bottom: 0; border-radius: 2.2rem 2.2rem 0 0; background: var(--surface); color: var(--ink); font-size: .8rem; line-height: 1.35; }
/* Its pages sit on top of each other, the shown one fading in */
.app-page { grid-area: 1 / 1; display: grid; gap: .6rem; align-content: start; }
.app-page > span { display: flex; }
/* The phone's top: the time, the camera pill, the battery */
.app-status { justify-content: space-between; align-items: center; padding: 0 .6rem .2rem; font-size: .72rem; font-weight: 600; }
.app-island { width: 4.5rem; height: 1.15rem; border-radius: 99px; background: #111; }
.app-battery { width: 1.4rem; height: .65rem; border: 1.5px solid currentColor; border-radius: .2rem; background: linear-gradient(90deg, currentColor 70%, transparent 0) content-box; padding: 1px; }
.app-screen strong { display: block; font-weight: 600; }
.app-screen small { display: block; font-size: .7rem; color: var(--muted); }
.app-next { flex-direction: column; gap: .6rem; padding: .85rem; border-radius: .9rem; background: color-mix(in srgb, var(--feature) 14%, #fff); color: var(--ink); }
.app-next small { color: var(--muted); }
.app-next-top { display: flex; justify-content: space-between; align-items: center; font-size: .7rem; }
.app-pill { padding: .1rem .55rem; border-radius: 99px; background: color-mix(in srgb, var(--feature) 80%, #fff); color: #fff; font-weight: 600; }
.app-plan { display: flex; gap: .6rem; align-items: center; }
.app-plan strong { font-size: .95rem; }
.app-next .tile { --tile: #fff; }
.app-going { display: flex; align-items: center; gap: .55rem; font-size: .72rem; font-weight: 600; }
.app-faces { display: flex; }
.app-faces img { width: 1.2rem; height: 1.2rem; margin-inline-end: -.35rem; border-radius: 50%; border: 1.5px solid #fff; background: #f4efe6; }
.app-button { display: block; padding: .55rem; border-radius: .65rem; background: color-mix(in srgb, var(--feature) 80%, #fff); color: #fff; text-align: center; font-weight: 600; }
.app-label { font-weight: 600; padding-top: .2rem; }
.app-row { align-items: center; gap: .6rem; padding: .6rem; border-radius: .75rem; background: var(--raised); box-shadow: var(--edge); }
.app-row .grow { flex: 1; min-width: 0; }
.app-row .chip { font-size: .65rem; }
.brands > li:has(> .cover) { grid-template-rows: auto 1fr; }
.brands .cover { display: flex; align-items: center; height: 5.5rem; padding: 0 1.75rem; background: var(--feature); }
.brands .cover img { height: var(--logo-h); width: auto; }
.brands .body { display: grid; gap: .6rem; align-content: start; padding: 1.5rem 1.75rem 1.75rem; }
.brands .body .title { font-size: 1.65rem; }
/* One case for the three side by side, whatever each brand's own */
.brands .eyebrow { text-transform: uppercase; letter-spacing: .08em; }
/* The Challenges on the activities page: the app's colour and logo on top, the date beside it, the numbers below */
.brands--challenges .cover { justify-content: space-between; height: 3.75rem; padding: 0 1.25rem; color: #fff; }
.brands--challenges .cover img { height: calc(var(--logo-h) * .8); }
.brands--challenges .body { gap: .75rem; padding: 1.1rem 1.25rem 1.25rem; }
/* Before the Challenges title: 🤳 rests, then a quick burst of the others, one at a time, and back to 🤳 */
.emoji-cycle { display: inline-grid; vertical-align: baseline; }
.emoji-cycle > span { grid-area: 1 / 1; opacity: 0; animation: 5.1s steps(1, end) infinite; }
.emoji-cycle > span:nth-child(1) { animation-name: emoji-rest; }
@keyframes emoji-rest { 0% { opacity: 1; } 41.18% { opacity: 0; } }
.emoji-cycle > span:nth-child(2) { animation-name: emoji-1; }
@keyframes emoji-1 { 0% { opacity: 0; } 41.18% { opacity: 1; } 47.06% { opacity: 0; } }
.emoji-cycle > span:nth-child(3) { animation-name: emoji-2; }
@keyframes emoji-2 { 0% { opacity: 0; } 47.06% { opacity: 1; } 52.94% { opacity: 0; } }
.emoji-cycle > span:nth-child(4) { animation-name: emoji-3; }
@keyframes emoji-3 { 0% { opacity: 0; } 52.94% { opacity: 1; } 58.82% { opacity: 0; } }
.emoji-cycle > span:nth-child(5) { animation-name: emoji-4; }
@keyframes emoji-4 { 0% { opacity: 0; } 58.82% { opacity: 1; } 64.71% { opacity: 0; } }
.emoji-cycle > span:nth-child(6) { animation-name: emoji-5; }
@keyframes emoji-5 { 0% { opacity: 0; } 64.71% { opacity: 1; } 70.59% { opacity: 0; } }
.emoji-cycle > span:nth-child(7) { animation-name: emoji-6; }
@keyframes emoji-6 { 0% { opacity: 0; } 70.59% { opacity: 1; } 76.47% { opacity: 0; } }
.emoji-cycle > span:nth-child(8) { animation-name: emoji-7; }
@keyframes emoji-7 { 0% { opacity: 0; } 76.47% { opacity: 1; } 82.35% { opacity: 0; } }
.emoji-cycle > span:nth-child(9) { animation-name: emoji-8; }
@keyframes emoji-8 { 0% { opacity: 0; } 82.35% { opacity: 1; } 88.24% { opacity: 0; } }
.emoji-cycle > span:nth-child(10) { animation-name: emoji-9; }
@keyframes emoji-9 { 0% { opacity: 0; } 88.24% { opacity: 1; } 94.12% { opacity: 0; } }
.emoji-cycle > span:nth-child(11) { animation-name: emoji-10; }
@keyframes emoji-10 { 0% { opacity: 0; } 94.12% { opacity: 1; } 100.00% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .emoji-cycle > span { animation: none; } .emoji-cycle > span:first-child { opacity: 1; } }
.challenge-numbers { display: flex; flex-wrap: wrap; gap: .25rem 1rem; color: var(--muted); font-size: .9rem; }
.challenge-numbers strong { color: var(--ink); font-size: 1.15rem; }
/* Four cards in a row on the pricing page: narrower, a little tighter inside */
.brands--four { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1rem; }
.brands--four .cover { padding: 0 1.25rem; } .brands--four .body { padding: 1.25rem 1.25rem 1.5rem; }
.brands .visit { margin-top: .5rem; color: var(--link); font-weight: 600; }
.brand-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.page .brand-buttons { justify-content: flex-start; }
.brand-buttons a { font-family: var(--font); }
.brand-logo { display: block; height: calc(var(--logo-h) * .85); width: auto; }
.app-icon { display: block; width: 3rem; height: 3rem; border-radius: 22.5%; }
/* Legal pages: the text in one white container on the left, a plain "In short" bubble level with each section on the right */
.legal-doc { display: grid; grid-template-columns: minmax(0, 44rem) minmax(0, 1fr); grid-auto-flow: dense; column-gap: 2.5rem; }
.legal-text { grid-column: 1; display: grid; gap: .75rem; align-content: start; padding: 1.25rem 2rem; background: var(--raised); }
.legal-text--first { padding-top: 2rem; border-radius: var(--r-card) var(--r-card) 0 0; }
.legal-text--last { padding-bottom: 2rem; border-radius: 0 0 var(--r-card) var(--r-card); }
.legal-text :is(ul, ol) { margin: 0; padding-left: 1.25rem; display: grid; gap: .4rem; }
/* Privacy's tables. On a phone each row stacks: the item, what it's for, then the basis or how long, quieter */
.legal-text table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.legal-text :is(th, td) { padding: .6rem .75rem .6rem 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
@media (max-width: 40rem) {
  .legal-text :is(table, tbody, tr, td) { display: block; }
  .legal-text tr:has(th) { display: none; }
  .legal-text tr { padding: .75rem 0; border-bottom: 1px solid var(--line); }
  .legal-text td { padding: 0; border: 0; }
  .legal-text td:first-child { font-weight: 600; }
  .legal-text td:last-child:not(:first-child) { margin-top: .25rem; color: var(--muted); font-size: .9rem; }
}
/* Statistics on or off, on Privacy (pitch 204): the line for the browser's state, and its button */
.statistics-choice p { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin: 0; padding: 1rem 1.25rem; border-radius: var(--r-card); background: var(--sunken); }
.statistics-choice p[hidden] { display: none; }

/* The statistics banner (pitch 204): a bubble in the corner, a card at the bottom on a phone. The page works behind it */
.statistics-banner { position: fixed; z-index: 10; left: 1.5rem; bottom: 1.5rem; box-sizing: border-box; width: min(24rem, calc(100% - 3rem)); max-height: calc(100dvh - 3rem); overflow: auto;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem .875rem; padding: 1.25rem 1.375rem 1.125rem;
  border-radius: 1.25rem; background: var(--raised); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 12px 32px rgb(0 0 0 / .12); }
.statistics-banner[hidden] { display: none; }
.statistics-banner svg { width: 1.875rem; height: 1.875rem; margin-top: .125rem; color: var(--action); }
.statistics-banner h2 { margin: 0 0 .375rem; font-size: 1.125rem; line-height: 1.25; font-weight: var(--title-weight); }
.statistics-banner p { margin: 0; font-size: .9375rem; line-height: 1.45; color: var(--muted); }
.statistics-banner a { color: var(--link); font-weight: 500; }
.statistics-banner-answers { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
.statistics-banner button { min-height: 46px; padding: .5rem .75rem; border: 0; border-radius: var(--r-control); background: var(--raised); box-shadow: inset 0 0 0 1.5px var(--action);
  color: var(--action); font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer; }
@media (max-width: 40rem) { .statistics-banner { left: .75rem; bottom: .75rem; width: calc(100% - 1.5rem); max-height: calc(100dvh - 1.5rem); } }
.legal-text pre { overflow-x: auto; margin: 0; padding: 1rem 1.1rem; border-radius: .75rem; background: #121212; color: #f2f0ea; font-size: .82rem; line-height: 1.55; }
.legal-text :not(pre) > code { padding: .05rem .3rem; border-radius: .3rem; background: var(--sunken); font-size: .9em; }
.button--outline { background: transparent; color: var(--link); box-shadow: inset 0 0 0 1.5px currentColor; }
.legal-note { grid-column: 2; align-self: start; margin-top: 1.25rem; max-width: 24rem; }
@media (max-width: 56rem) { .legal-doc { grid-template-columns: minmax(0, 1fr); } .legal-text, .legal-note { grid-column: 1; } .legal-text { border-radius: var(--r-card); margin-bottom: .75rem; padding: 1.25rem; } .legal-note { margin: .25rem 0 .5rem; } }
.portrait { float: left; width: 6.3rem; height: auto; margin: 0 1rem .25rem 0; }
.mock { margin: 0; }
.title-2 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
.cols--wide { --col: 18rem; } .cols--mid { --col: 16rem; } .cols--narrow { --col: 10rem; }
.chip--raised { background: var(--raised); }
.accent-text { color: var(--on-accent-soft); } .link-text { color: var(--link); }
.panel-link { height: 100%; text-decoration: none; }
.button, .chip { white-space: nowrap; }
/* Long addresses in running text wrap instead of pushing the page wider than a phone */
:not(pre) > code { overflow-wrap: anywhere; }
@media (max-width: 48rem) { .split > .side { max-width: none; } }

/* The activities map: a dot per country on the site's feature colour, its cities in a popover */
.activity-map { display: grid; gap: 1.5rem; margin-bottom: 2rem; }
.activity-map :is(h2, h3, p, ul), .map-sheet :is(h3, p, ul) { margin: 0; }
.map { --map-dot: #fff; --map-glow: rgb(255 255 255 / .25); padding: clamp(.5rem, 2vw, 1.5rem); border-radius: var(--r-card, 16px); background: var(--feature, var(--brand)); }
[data-site=bondable] .map { --map-dot: var(--accent); --map-glow: rgb(212 168 75 / .3); }
.map-area { position: relative; }
.map-land { display: block; width: 100%; height: auto; opacity: .2; }
.map-dot { position: absolute; left: var(--x); top: var(--y); display: grid; place-items: center; width: max(44px, calc(var(--size) * 2)); aspect-ratio: 1; translate: -50% -50%; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.map-dot::before, .map-dot::after { content: ""; grid-area: 1 / 1; border-radius: 50%; }
.map-dot::before { width: calc(var(--size) * var(--dot-scale, 1) * 2.2); aspect-ratio: 1; background: var(--map-glow); animation: map-breathe 3.2s ease-in-out infinite; }
.map-dot::after { width: calc(var(--size) * var(--dot-scale, 1)); aspect-ratio: 1; background: var(--map-dot); box-shadow: 0 0 18px 4px var(--map-glow); }
.map-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@keyframes map-breathe { 50% { scale: 1.35; opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .map-dot::before { animation: none; } }
@media (max-width: 40rem) { .map { --dot-scale: .55; } }
/* A centred card, a sheet from the bottom on phones */
.map-sheet { width: min(100% - 2rem, 28rem); max-height: min(85vh, 40rem); padding: 0; border: 0; border-radius: var(--r-card, 16px); background: var(--raised, #fff); color: var(--ink); box-shadow: 0 12px 48px rgb(0 0 0 / .22); }
.map-sheet:popover-open { display: flex; flex-direction: column; }
.map-sheet::backdrop { background: rgb(0 0 0 / .45); }
@media (max-width: 40rem) { .map-sheet { width: 100%; max-width: none; max-height: 80vh; margin: auto 0 0; border-radius: var(--r-card, 16px) var(--r-card, 16px) 0 0; } }
.map-sheet-head { display: flex; align-items: flex-start; gap: .75rem; padding: 1.25rem 1.25rem 1rem; }
.map-sheet-head > .stack { flex: 1 1 auto; }
.map-close { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -.5rem -.6rem 0 0; padding: 0; border: 0; border-radius: 50%; background: var(--sunken, #f2f0ea); color: var(--ink); cursor: pointer; }
.map-cities { list-style: none; padding: 0 .5rem; overflow-y: auto; flex: 1 1 auto; }
.map-cities li { border-top: 1px solid var(--line); }
.map-cities a { display: flex; align-items: center; gap: .75rem; min-height: 56px; padding: .5rem .75rem; color: var(--ink); text-decoration: none; }
.map-cities .grow { flex: 1 1 auto; display: grid; }
.map-host { display: grid; gap: .75rem; padding: 1rem 1.25rem 1.25rem; border-top: 1px solid var(--line); background: var(--sunken, #f2f0ea); }


/* The activities and city pages, in the home layout */
.stack--xl { gap: clamp(2rem, 5vw, 3rem); }
.section-head { align-items: baseline; padding-bottom: .75rem; border-bottom: 1px solid var(--line); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .875rem; color: var(--muted); }
.crumbs a { color: var(--muted); }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.chip--strong { background: var(--action); color: #fff; }
.city-card { gap: .1rem; width: 13rem; padding: .55rem .85rem; color: var(--ink); text-decoration: none; }
/* A long city name stays on one line, cut short; the full name shows on hover */
.city-card > .strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.city-row { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; padding: .25rem 0; list-style: none; }
@media (max-width: 40rem) { .city-row { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); } .city-row > li { flex: none; } }
/* A country's cities on two rows: the second scrolls the other way */
.strip--reverse .strip-track { animation-direction: reverse; }
.strip + .strip { margin-top: -.25rem; }
/* The plans scrolling under the map (strip_controller): a seamless loop, still while hovered or held */
.strip { overflow: hidden; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent); }
.strip-track { display: flex; gap: .75rem; width: max-content; margin: 0; padding: .25rem 0; list-style: none; animation: strip-scroll calc(var(--strip-count) * 1.5s) linear infinite; }
.strip:hover .strip-track, .strip.is-held .strip-track, .strip:focus-within .strip-track { animation-play-state: paused; }
.strip-card { width: 20rem; height: 100%; padding: .6rem .85rem; color: var(--ink); text-decoration: none; }
.strip-card .grow { gap: 0; }
.strip-card .grow > * { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.strip-cta { margin-top: 1rem; }
.strip-cta .button { max-width: 100%; white-space: normal; text-align: center; }
.strip-tag { font-weight: 600; color: var(--link); }
.app-dot { flex: none; align-self: start; width: .6rem; height: .6rem; border-radius: 50%; background: var(--feature); }
@keyframes strip-scroll { to { transform: translateX(calc(-50% - .375rem)); } }
@media (prefers-reduced-motion: reduce) {
  .strip { overflow-x: auto; }
  .strip-track { animation: none; }
  .strip-track > [aria-hidden] { display: none; }
}
/* On the company site, a city's plans by app: a dot in each app's colour */
.app-counts { display: flex; gap: .75rem; font-size: .8rem; color: var(--muted); }
.app-counts > span { display: inline-flex; align-items: center; gap: .3rem; }
.app-counts > span::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--feature); }
.city-layout > .city-main { flex: 999 1 34rem; }

/* Back IRL (pitch 141): the checked amount shows its own payment link, no script */
.back > input { position: absolute; opacity: 0; pointer-events: none; }
.back-amounts { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.back-amount { display: inline-flex; align-items: center; justify-content: center; min-width: 72px; min-height: 44px; padding: 0 1rem;
  border-radius: var(--r-control); border: 1.5px solid var(--line); background: var(--raised); color: var(--ink); font-weight: 600; cursor: pointer; }
.back-pay { display: none; }
#amount-5:checked ~ .back-amounts [for="amount-5"],
#amount-10:checked ~ .back-amounts [for="amount-10"],
#amount-25:checked ~ .back-amounts [for="amount-25"],
#amount-50:checked ~ .back-amounts [for="amount-50"],
#amount-100:checked ~ .back-amounts [for="amount-100"],
#amount-250:checked ~ .back-amounts [for="amount-250"],
#amount-500:checked ~ .back-amounts [for="amount-500"] { border-color: var(--action); color: var(--link); }
#amount-5:checked ~ .back-pay[data-amount="5"],
#amount-10:checked ~ .back-pay[data-amount="10"],
#amount-25:checked ~ .back-pay[data-amount="25"],
#amount-50:checked ~ .back-pay[data-amount="50"],
#amount-100:checked ~ .back-pay[data-amount="100"],
#amount-250:checked ~ .back-pay[data-amount="250"],
#amount-500:checked ~ .back-pay[data-amount="500"] { display: inline-flex; }
.back > input:focus-visible ~ .back-amounts { outline: 2px solid var(--action); outline-offset: 4px; }

/* The week's Challenge (pitch 196): the name and its numbers, the videos by city, then the stores */
.challenge-hero > .stack { flex: 999 1 28rem; }
.challenge-eyebrow { color: var(--link); }
.challenge-stats { list-style: none; margin: 0; padding: 0; flex: 1 1 18rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.challenge-stats .panel { gap: 0; }
.challenge-stats strong.display, .challenge-countdown strong.display { font-size: clamp(2.2rem, 4.5vw, 3.5rem); }
.challenge-countdown { flex: 0 1 auto; min-width: 16rem; gap: .25rem; align-content: center; }
.challenge-countdown strong { white-space: nowrap; }
.challenge-links .panel { gap: .35rem; }
.challenge-links .chips { margin-top: .25rem; }
.challenge-links { --col: 15rem; }
.challenge-platform { color: var(--link); }
.button--outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--muted); }
.challenge-band { justify-content: space-between; }
.challenge-band > .stack { flex: 999 1 20rem; }
.challenge-band > .chips { flex: 0 1 auto; }
/* Form controls take the page's font */
input, select, textarea, button { font: inherit; padding: .4rem .5rem; }

/* The press kit: bands like the home page, each brand in its own color over the faces, files shown before they're downloaded */
.press-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1rem; margin: 0; }
.press-facts .backed > dd { margin: 0; }
.press-size { font-weight: 400; opacity: .7; margin-left: .3em; }
.press-copies { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.press-copy--long { grid-column: 1 / -1; }
.press-copy-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.copy-icon { display: inline-grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: var(--r-control); background: transparent; color: var(--muted); cursor: pointer; }
.copy-icon:hover { background: var(--raised); color: var(--ink); }
.copy-icon svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.copy-icon .copy-icon-done, .copy-icon.is-copied .copy-icon-copy { display: none; }
.copy-icon.is-copied .copy-icon-done { display: block; color: var(--success); }
.press-copies h3, .press-band h2, .press-band p, .press-copies p { margin: 0; }
.press-band a:not(.button) { color: #fff; }
.press-band .lede { color: var(--on-feature-muted); }
.press-band-logo { display: block; height: clamp(3rem, 6vw, 4.5rem); width: auto; }
.press-colors { display: flex; flex-wrap: wrap; gap: .5rem; }
.press-color { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem .3rem .35rem; border: 0; border-radius: 999px; background: #fff; color: #121212; font-size: .9rem; font-variant-numeric: tabular-nums; cursor: pointer; }
.press-color::before { content: ""; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .15); }
.press-tiles, .press-screens, .press-photos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.press-tiles { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.press-tiles p { margin-top: .6rem; font-size: .9rem; }
.press-tile { display: grid; place-items: center; aspect-ratio: 16 / 9; padding: 1.25rem; border-radius: var(--r-tile); background: var(--tile-bg, #fff); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); overflow: hidden; }
.press-tile img { max-width: 100%; max-height: 4.5rem; }
.press-tile--icon img { width: auto; height: 4.5rem; border-radius: 22%; }
.press-tile--photo { padding: 0; } .press-tile--photo img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.press-screens { grid-auto-flow: column; grid-auto-columns: minmax(9rem, 1fr); overflow-x: auto; padding-bottom: .5rem; }
.press-screens a { display: grid; gap: .5rem; text-decoration: none; font-size: .9rem; }
.press-screens img { width: 100%; height: auto; border-radius: 1.1rem; box-shadow: 0 8px 24px rgb(0 0 0 / .25); }
.press-photos { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.press-photos img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-tile); }
.press-photos p { margin: .5rem 0 0; font-size: .9rem; }
.press-band .eyebrow { color: rgb(255 255 255 / .8); }
/* A command with its copy icon in the corner (pages/developers/_code) */
.code-copy { position: relative; min-width: 0; }
.code-copy pre { padding-right: 3rem; }
.code-copy .copy-icon { position: absolute; top: .4rem; right: .4rem; color: #bdbab2; }
.code-copy .copy-icon:hover { background: rgb(255 255 255 / .1); color: #fff; }
/* A legal section in its own card, apart from the main text (privacy: cookies, changes) */
.legal-text--alone { margin-top: 1.5rem; padding-block: 2rem; border-radius: var(--r-card); }
.legal-note:has(+ .legal-text--alone) { margin-top: 2.75rem; }
/* Cookie names in the privacy table stay on one line */
.legal-text td:first-child code { white-space: nowrap; }