/* The Cowork V2 designs (2026-10-15, Figma "Cowork (Revamp)"): dark at all hours, built fresh, not Webflow ports.
   Shared by hero/cowork-v2-hero, featureGrid/cowork-v2-ops, statement/cowork-v2-brain, featureGrid/cowork-v2-usecase and
   ctaBanner/cowork-v2-cta (COWORK_V2_LAYOUTS in components/PageView.astro), and linked only on pages that use one of
   them, so no other page loads it. Pages using them should be "Always dark" (the nav and footer follow the clock). */
.cw2 {
  --cw2-bg: #111111;
  --cw2-card: #161616;
  --cw2-line: #ffffff17;
  --cw2-line-strong: #ffffff2e;
  --cw2-orange: #ec6b2d;
  --cw2-text: #f5f3f0;
  --cw2-muted: #b5b3b0;
  font-family: 'Forma DJR Text', Arial, sans-serif;
  color: var(--cw2-text);
  background: var(--cw2-bg);
  position: relative;
  overflow: hidden;
}
.cw2 *, .cw2 *::before, .cw2 *::after { box-sizing: border-box; }
/* the page grid: thin lines down both sides of the content and between sections */
.cw2-wrap { position: relative; z-index: 1; max-width: 80rem; margin: 0 auto; padding: 7.5rem 2.5rem; border-inline: 1px solid var(--cw2-line); }
.cw2 + .cw2 > .cw2-wrap { border-top: 1px solid var(--cw2-line); }
.cw2-stars { position: absolute; inset: 0; z-index: 0; }
.cw2-glow { position: absolute; left: 50%; bottom: -30%; width: 70rem; height: 40rem; transform: translateX(-50%); background: radial-gradient(closest-side, #ec6b2d26, transparent); filter: blur(40px); pointer-events: none; z-index: 0; }
.cw2-glow.is-low { bottom: -45%; opacity: .7; }

.cw2-eyebrow { font-family: var(--_font---font-secondary), 'JetBrains Mono', monospace; color: var(--cw2-orange); text-transform: uppercase; font-size: .875rem; letter-spacing: .06em; line-height: 1; }
.cw2-h1 { font-size: 4.5rem; line-height: 1.05; font-weight: 400; letter-spacing: -.02em; margin: 1.5rem auto 0; max-width: 13em; color: var(--cw2-text); }
.cw2-h2 { font-size: 3.5rem; line-height: 1.08; font-weight: 400; letter-spacing: -.015em; margin: 0; color: var(--cw2-text); }
.cw2-h3 { font-size: 1.75rem; line-height: 1.2; font-weight: 400; margin: 0; color: var(--cw2-text); }
.cw2-lead { font-size: 1.125rem; line-height: 1.5; color: var(--cw2-muted); margin: 1.5rem auto 0; max-width: 42rem; }
.cw2-body { font-size: 1rem; line-height: 1.55; color: var(--cw2-muted); margin: 1.5rem 0 0; max-width: 28rem; }
.cw2-btns { display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; margin-top: 2.25rem; }
.cw2-ops-tab:focus-visible { outline: 2px solid var(--cw2-orange); outline-offset: 3px; }
.cw2-head { text-align: center; margin: 0 auto 4rem; max-width: 48rem; }
.cw2-head .cw2-eyebrow + .cw2-h2 { margin-top: 1.5rem; }

/* a dark rounded frame around a screenshot */
.cw2-frame { position: relative; border: 1px solid var(--cw2-line-strong); border-radius: 2.25rem; padding: 1.5rem; background: linear-gradient(180deg, #232323, #151515); box-shadow: 0 2rem 6rem #00000080; }
.cw2-frame-img { display: block; width: 100%; height: auto; border-radius: 1rem; }

/* hero / cowork-v2-hero */
.cw2-hero { background: radial-gradient(ellipse 55% 42% at 50% 0, #2b1715, #1c1312 45%, #11111100), var(--cw2-bg); }
.cw2-hero .cw2-wrap { padding-top: 12.5rem; padding-bottom: 6rem; text-align: center; }
.cw2-hero-frame { max-width: 65.5rem; margin: 5rem auto 0; }

/* featureGrid / cowork-v2-ops */
.cw2-ops-card { max-width: 56rem; margin: 0 auto; border: 1px solid var(--cw2-line-strong); border-radius: 1.75rem; padding: 2.5rem 2.5rem 0; background: linear-gradient(180deg, #1c1c1c, #121212 70%); text-align: center; overflow: hidden; }
.cw2-ops-menu { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .5rem; padding: .5rem; border: 1px solid var(--cw2-line-strong); border-radius: 6.25rem; background: #ffffff05; }
/* tab pills: the Home page's tabs (tabs/teammate, .teammate-tab-link) */
.cw2-ops-tab { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 30px; border: 1px solid #0000; border-radius: 100px; background: #0000000a; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); box-shadow: -1px -1px #c9c9c980, 1px 1px #c2c2c2c2; color: #fff6; font-family: 'Parabolica Text Test', Arial, sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5rem; cursor: pointer; transition: color .3s ease, border-color .3s ease, box-shadow .3s ease; }
.cw2-ops-tab:hover { color: #f6f4f1; box-shadow: -1px -1px #ffffffbd, 1px 1px #a5a5a5; }
.cw2-ops-tab.is-active { color: #f66719; border-color: #ffffff69; box-shadow: -1px -1px #f6671980, 1px 1px #f66719b3; }
.cw2-ops-icon { display: inline-flex; width: 1rem; height: 1rem; }
.cw2-ops-icon svg { width: 100%; height: 100%; }
.cw2-ops-pane.is-active { animation: cw2-fade .3s ease; }
.cw2-ops-caption { margin: 2rem auto 0; max-width: 40rem; font-size: 1.125rem; line-height: 1.5; color: var(--cw2-text); }
.cw2-ops-shot { margin: 2.5rem -1rem 0; border-radius: 1rem 1rem 0 0; overflow: hidden; background: linear-gradient(180deg, #2a2838, #3c3b4b); }
.cw2-ops-img { display: block; width: 100%; height: auto; }
@keyframes cw2-fade { from { opacity: 0; } to { opacity: 1; } }

/* statement / cowork-v2-brain */
.cw2-brain-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; gap: 4rem; }
/* the brain image brings its own starry backdrop and border */
.cw2-brain-frame { padding: 0; border: 0; border-radius: 0; overflow: hidden; background: none; }
.cw2-brain-frame .cw2-frame-img { border-radius: 0; }

/* featureGrid / cowork-v2-usecase */
.cw2-usecase .cw2-wrap { padding-bottom: 5rem; }
.cw2-usecase-swiper { position: relative; overflow: hidden; }
.cw2-usecase-swiper .swiper-wrapper { display: flex; transition-property: transform; box-sizing: content-box; }
.cw2-usecase-card { flex-shrink: 0; width: min(61rem, 88%); height: auto; display: grid; grid-template-columns: 23rem minmax(0, 1fr); gap: 1.5rem; padding: 1.5rem; border: 1px solid var(--cw2-line-strong); background: #000; }
/* card images are full square frames (starry backdrop and border included) */
.cw2-usecase-img { aspect-ratio: 1; overflow: hidden; background: #0b0b0d; }
.cw2-usecase-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cw2-usecase-content { padding-top: .5rem; }
.cw2-usecase-content .cw2-h3 { padding-bottom: 1.25rem; border-bottom: 1px solid var(--cw2-line-strong); }
.cw2-usecase-summary { margin: 1.25rem 0 0; font-size: 1rem; line-height: 1.5; color: var(--cw2-text); }
.cw2-usecase-list { margin: 1rem 0 0; padding-left: 1.25rem; display: grid; gap: .75rem; font-size: .95rem; line-height: 1.5; color: var(--cw2-muted); }
.cw2-usecase-list li::marker { color: var(--cw2-text); }
.cw2-usecase-bar.swiper-scrollbar { display: block; position: relative; height: 1px; margin-top: 3.5rem; background: var(--cw2-line-strong); cursor: pointer; }
.cw2-usecase-bar .swiper-scrollbar-drag { position: absolute; left: 0; top: -1px; height: 3px; background: var(--cw2-orange); border-radius: 3px; cursor: grab; }

/* ctaBanner / cowork-v2-cta */
.cw2-cta .cw2-wrap { padding-top: 9rem; padding-bottom: 9rem; text-align: center; }
.cw2-cta .cw2-h2 { max-width: 12em; margin: 0 auto; }

/* scroll-in animations (components/Cw2Reveal.astro; html.cw2-anim is set only when they will run) */
.cw2-anim [data-cw2-anim="up"] { opacity: 0; transform: translateY(30px); }
.cw2-anim [data-cw2-anim="fade"], .cw2-anim [data-cw2-anim="alien"] { opacity: 0; }
.cw2-anim [data-cw2-anim="slideup"] > * { opacity: 0; transform: translateY(60px); }
.cw2-anim [data-cw2-anim].is-in { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.215, .61, .355, 1) var(--cw2-delay, 0s), transform .8s cubic-bezier(.215, .61, .355, 1) var(--cw2-delay, 0s); }
.cw2-anim [data-cw2-anim="fade"].is-in { transition-duration: .6s; }
.cw2-anim [data-cw2-anim="alien"].is-in { transition: opacity .2s; }
.cw2-anim [data-cw2-anim="slideup"].is-in > * { opacity: 1; transform: none; transition: opacity .9s cubic-bezier(.165, .84, .44, 1), transform .9s cubic-bezier(.165, .84, .44, 1); transition-delay: var(--cw2-delay, 0s); }
.cw2-anim [data-cw2-anim="slideup"].is-in > :nth-child(2) { transition-delay: calc(var(--cw2-delay, 0s) + .12s); }
.cw2-anim [data-cw2-anim="slideup"].is-in > :nth-child(3) { transition-delay: calc(var(--cw2-delay, 0s) + .24s); }
.cw2-anim [data-cw2-anim="slideup"].is-in > :nth-child(n+4) { transition-delay: calc(var(--cw2-delay, 0s) + .36s); }

@media (prefers-reduced-motion: reduce) {
  .cw2-ops-pane.is-active { animation: none; }
  .cw2-ops-tab { transition: none; }
}
@media (max-width: 991px) {
  .cw2-wrap { padding: 6rem 2rem; }
  .cw2-h1 { font-size: 3.75rem; }
  .cw2-h2 { font-size: 3rem; }
  .cw2-hero .cw2-wrap { padding-top: 11rem; }
  .cw2-brain-grid { grid-template-columns: 1fr; gap: 3rem; }
  .cw2-body { max-width: 36rem; }
  .cw2-usecase-card { grid-template-columns: 16rem minmax(0, 1fr); }
  .cw2-ops-tab { padding: .5rem 1.5rem; }
}
@media (max-width: 767px) {
  .cw2-wrap { padding: 4.5rem 1.25rem; border-inline: 0; }
  .cw2-h1 { font-size: 2.75rem; }
  .cw2-h2 { font-size: 2.25rem; }
  .cw2-h3 { font-size: 1.375rem; }
  .cw2-lead { font-size: 1rem; }
  .cw2-hero .cw2-wrap { padding-top: 11.5rem; padding-bottom: 3.5rem; }
  .cw2-hero-frame { margin-top: 3rem; border-radius: 1.25rem; padding: .75rem; }
  .cw2-hero-frame .cw2-frame-img { border-radius: .5rem; }
  .cw2-head { margin-bottom: 2.5rem; }
  .cw2-ops-card { padding: 1.25rem 1rem 0; border-radius: 1.25rem; }
  .cw2-ops-menu { border-radius: 1.25rem; }
  .cw2-ops-tab { padding-left: .75rem; padding-right: .75rem; }
  .cw2-ops-caption { font-size: 1rem; margin-top: 1.5rem; }
  .cw2-ops-shot { margin: 1.5rem -.25rem 0; }
  .cw2-usecase-card { width: 88%; grid-template-columns: 1fr; padding: 1rem; }
  .cw2-cta .cw2-wrap { padding-top: 6rem; padding-bottom: 6rem; }
}
@media (max-width: 479px) {
  .cw2-ops-tab { gap: .35rem; padding: .45rem .675rem .45rem .5rem; }
}