/* Workweek — workweek.com
   Ported from the "Workweek v2" Claude Design file. Vibe: field. Display face: Syne.
   The design file drove everything from CSS custom properties so the vibe switcher
   could repaint the page; that indirection is kept, because the switcher still works
   (see site.js, ?vibe=1) and because the tokens are the design system. */

:root {
  --bg: #0E231C;
  --surface: #14342A;
  --surfaceHi: #1B4536;
  --ink: #FFFDF5;
  --line: rgba(255, 253, 245, .16);
  --accent: #FBC504;
  --onAccent: #0E231C;
  --plate: #1B4536;
  --onPlate: #FFFDF5;
  --radius: 14px;

  --disp: 'Syne', system-ui, sans-serif;
  --dispW: 700;
  --dispTrack: -.02em;
  --dispCase: none;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --body: 'Space Grotesk', system-ui, sans-serif;
}

* { box-sizing: border-box }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}
body { overflow-x: clip }

a { color: var(--ink); text-decoration: none }
a:hover { color: var(--accent) }
::selection { background: var(--accent); color: var(--onAccent) }

img { max-width: 100% }

/* ---------------------------------------------------------------- primitives */

.wrap { max-width: 1280px; margin: 0 auto; padding-left: 28px; padding-right: 28px }

.disp {
  font-family: var(--disp);
  font-weight: var(--dispW);
  letter-spacing: var(--dispTrack);
  text-transform: var(--dispCase);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: .42;
}
.eyebrow--lg { font-size: 12.5px; letter-spacing: .16em; color: var(--accent); opacity: 1 }
.eyebrow--on { color: var(--accent); opacity: 1 }

.muted { color: color-mix(in srgb, var(--ink) 78%, transparent) }
.muted-2 { color: color-mix(in srgb, var(--ink) 72%, transparent) }
.muted-3 { color: color-mix(in srgb, var(--ink) 58%, transparent) }

/* A yellow marker sweep behind a phrase. box-decoration-break keeps the fill
   glued to every line when the phrase wraps. */
.mark {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: left center;
  color: var(--onAccent);
  padding: .1em .2em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.mark--tight { padding: .06em .16em }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15.5px;
  font-weight: 700;
  padding: 16px 26px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--onAccent);
  white-space: nowrap;
  border: none;
  cursor: pointer;
  font-family: var(--body);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
  transition: transform .16s ease, box-shadow .22s ease;
}
.btn:hover {
  color: var(--onAccent);
  transform: translateY(-2px);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 24%, transparent);
}
.btn--sq { border-radius: var(--radius); box-shadow: none; font-size: 15px; padding: 15px 24px }
.btn--sq:hover { box-shadow: none; filter: brightness(1.08); transform: none }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line) }
.btn--ghost:hover { color: var(--ink); border-color: var(--accent); filter: none }
.btn--dark { background: var(--bg); color: var(--ink) }
.btn--dark:hover { color: var(--ink) }
.btn--sm { font-size: 14.5px; padding: 13px 22px; box-shadow: none }
.btn--sm:hover { box-shadow: none }

.card {
  padding: 30px 28px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  min-width: 0;
}
.card--quiet { background: transparent; border-style: dashed; opacity: .58 }

/* ---------------------------------------------------------------- header */

.site-head {
  position: relative;
  z-index: 60;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(16px);
}
.site-head__row {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  min-height: 70px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: clamp(12px, 2vw, 28px);
}
.site-head__logo { grid-column: 2; justify-self: center; display: flex; align-items: center; gap: 11px; flex: none }

/* The wordmark is an inline <svg><use> rather than a CSS mask on purpose. A
   masked element goes invisible whenever the stylesheet and the mask file are
   not same-origin, which is exactly what happens when workweek.com is served
   through a proxy that rewrites asset URLs to the origin host. */
.brand-sprite { position: absolute; width: 0; height: 0; overflow: hidden }
.wordmark {
  width: 118px;
  height: 25px;
  display: block;
  color: var(--ink);
  fill: currentColor;
}
.wordmark--sm { width: 82px; height: 18px }
.wordmark--foot { width: 94px; height: 20px }
.w-mark {
  width: 20px;
  height: 24px;
  display: block;
  color: var(--accent);
  fill: currentColor;
}

.viewtabs-rail { border-top: 1px solid var(--line) }
.viewtabs {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 12px;
  white-space: nowrap;
  padding: 12px 20px;
}
.viewtabs__lead {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: .55;
}
.viewtabs a {
  font-family: var(--disp);
  font-weight: var(--dispW);
  font-size: 18px;
  letter-spacing: var(--dispTrack);
  color: var(--ink);
  opacity: .42;
  transition: opacity .18s ease, color .18s ease;
}
.viewtabs a:hover { opacity: 1 }
.viewtabs a[aria-current="page"] { color: var(--accent); opacity: 1 }
.viewtabs__sep { opacity: .3; font-size: 14px }

/* Sticky utility bar: appears once the hero is behind you. */
.utilbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 70;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(-108%);
  pointer-events: none;
  transition: opacity .28s ease, transform .28s cubic-bezier(.22, 1, .36, 1);
}
.utilbar.is-on { opacity: 1; transform: translateY(0); pointer-events: auto }
.utilbar__row {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.utilbar__cta {
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  padding: 9px 16px;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--onAccent);
}
.utilbar__cta:hover { color: var(--onAccent); filter: brightness(1.08) }

/* ---------------------------------------------------------------- hero */

.hero { position: relative }
.hero__inner {
  min-height: clamp(470px, 66vh, 770px);
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  padding: 26px 0 40px;
}
.hero__cols {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  gap: 48px;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hero__col { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center }

.hero__h1 {
  font-family: var(--disp);
  font-weight: var(--dispW);
  font-size: clamp(24px, 4.52vw, 78px);
  line-height: 1.06;
  letter-spacing: var(--dispTrack);
  text-transform: var(--dispCase);
  margin: 0;
  white-space: nowrap;
}
.hero__lead { display: block; opacity: .9 }
.hero__slot { display: block; min-height: 1.12em; padding-top: .04em }
.hero__title {
  display: block;
  color: var(--accent);
  will-change: transform, opacity, filter;
  transform-origin: center;
}
.hero__say {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 26px;
  opacity: 0;
  transition: opacity .35s linear;
}
.hero__say.is-on { opacity: 1 }
.hero__say h2 {
  font-family: var(--disp);
  font-weight: var(--dispW);
  font-size: clamp(21px, 2.5vw, 38px);
  line-height: 1.12;
  letter-spacing: var(--dispTrack);
  text-transform: var(--dispCase);
  margin: 0;
}
.hero__sub {
  font-size: clamp(15.5px, 1.4vw, 19px);
  line-height: 1.5;
  margin: 0;
  max-width: 48ch;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}

/* Advertiser hero */
.adhero__h1 {
  font-family: var(--disp);
  font-weight: var(--dispW);
  font-size: clamp(34px, 8.4vw, 146px);
  line-height: .94;
  margin: 0;
  text-transform: var(--dispCase);
  max-width: 15ch;
  letter-spacing: var(--dispTrack);
}
.adhero__h1 span { display: block }
.adhero__word { color: var(--accent) }
a.adhero__word { width: fit-content; border-bottom: .06em solid transparent }
a.adhero__word:hover { color: var(--accent); border-bottom-color: var(--accent) }

/* ---------------------------------------------------------------- bands */

/* Full-bleed colour band inside a max-width section. */
.band {
  position: relative;
  overflow: hidden;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
}
.band--surface { background: var(--surface) }
.band--plate { background: var(--plate) }
.band--accent { background: var(--accent); color: var(--onAccent); text-align: center }
.band--accent h2, .band--accent p { color: var(--onAccent) }

.band__hatch {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(-52deg, transparent 0 11px,
    color-mix(in srgb, var(--onAccent) 5%, transparent) 11px,
    color-mix(in srgb, var(--onAccent) 5%, transparent) 12px);
}
.field { position: absolute; inset: 0; pointer-events: none }
.field--acro { color: color-mix(in srgb, var(--ink) 6%, transparent); font-family: var(--mono); font-weight: 700; letter-spacing: .08em }
.field--who { color: color-mix(in srgb, var(--onAccent) 10%, transparent) }
.field span { position: absolute }

/* ---------------------------------------------------------------- sections */

.sec { max-width: 1280px; margin: 0 auto; padding: 20px 28px 40px }
.sec--top { padding-top: 80px }
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.h2 {
  font-family: var(--disp);
  font-weight: var(--dispW);
  font-size: clamp(28px, 3.6vw, 54px);
  line-height: 1.02;
  letter-spacing: var(--dispTrack);
  text-transform: var(--dispCase);
  margin: 0;
}
.h2--xl { font-size: clamp(34px, 4.6vw, 68px); line-height: .98 }
.h2--sm { font-size: clamp(23px, 2.5vw, 36px); line-height: 1.46 }
.h2--page {
  font-size: clamp(44px, 7vw, 116px);
  line-height: .94;
}
.lede { font-size: 17px; line-height: 1.6; margin: 0; color: color-mix(in srgb, var(--ink) 78%, transparent) }

/* Rooms grid — the five networks */
.rooms { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px }
.room {
  min-width: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
  text-align: left;
  padding: 0;
  font: inherit;
  color: inherit;
}
.room:hover { transform: translateY(-3px); color: inherit }
.room:hover .room__name { color: var(--ink) }
.room.is-on { border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 11%, transparent) }
.room__plate {
  position: relative;
  height: 122px;
  background: var(--plate);
  color: var(--onPlate);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  overflow: hidden;
  /* The unselected rooms used to sit at .62, which read as a broken render once
     these were real logos rather than placeholder slots. The selected room is
     already carrying a yellow ring and a tinted ground; it does not need the
     others knocked back this far to stand out. */
  opacity: .82;
  transition: opacity .18s ease;
}
.room.is-on .room__plate { opacity: 1 }
.room__plate img { max-width: 78%; max-height: 66%; width: auto; height: auto; object-fit: contain }
.room__body { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 5px; min-width: 0 }
.room__name {
  font-family: var(--disp);
  font-weight: var(--dispW);
  font-size: 15.5px;
  letter-spacing: var(--dispTrack);
  text-transform: var(--dispCase);
  color: var(--ink);
}
.room__who { font-size: 13px; line-height: 1.4; color: color-mix(in srgb, var(--ink) 58%, transparent) }


/* Estimator */
.est { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; align-items: stretch }
.est__panel { padding: 32px 30px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; gap: 24px; min-width: 0 }
.est__out {
  padding: 32px 30px;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--onAccent);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}
.est__num {
  font-family: var(--disp);
  font-weight: var(--dispW);
  font-size: clamp(38px, 5vw, 72px);
  line-height: .94;
  letter-spacing: var(--dispTrack);
  overflow-wrap: anywhere;
}
.chip {
  font-family: var(--body);
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 15px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
}
.chip.is-on { background: var(--accent); color: var(--onAccent); border-color: var(--accent) }
input[type="range"] { width: 100%; accent-color: var(--accent); cursor: ew-resize }

/* CTA band */
.cta-band {
  position: relative;
  overflow: hidden;
  max-width: 1280px;
  margin: 0 auto;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 64px 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: center;
  justify-content: space-between;
}
.cta-band__texture {
  position: absolute;
  inset: -30px;
  display: flex;
  flex-wrap: wrap;
  gap: 38px;
  transform: rotate(-9deg);
  opacity: .07;
  color: var(--ink);
  pointer-events: none;
  z-index: 0;
}
.cta-band > *:not(.cta-band__texture) { position: relative; z-index: 1 }
.cta-band__h {
  font-family: var(--disp);
  font-weight: var(--dispW);
  font-size: clamp(32px, 4vw, 60px);
  line-height: 1;
  text-transform: var(--dispCase);
  max-width: 16ch;
  letter-spacing: var(--dispTrack);
}
.cta-band--accent { background: var(--accent); color: var(--onAccent); display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding: 56px 48px }
.cta-band--accent input {
  font-family: var(--body);
  font-size: 15px;
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(14, 35, 28, .25);
  background: transparent;
  color: var(--onAccent);
  outline: none;
  width: 100%;
}
.cta-band--accent input::placeholder { color: color-mix(in srgb, var(--onAccent) 55%, transparent) }
.cta-band--accent input:focus { border-color: var(--onAccent) }

/* ---------------------------------------------------------------- footer */

.site-foot { border-top: 1px solid var(--line) }
.site-foot__row {
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
  align-items: flex-start;
}
.site-foot__cols { display: flex; gap: 52px; font-size: 14.5px }
.site-foot__col { display: flex; flex-direction: column; gap: 11px }
.site-foot__col span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  opacity: .45;
}
.site-foot__col a { opacity: .72 }
.site-foot__legal { font-family: var(--mono); font-size: 11.5px; opacity: .45; letter-spacing: .05em }

/* ---------------------------------------------------------------- motion */

@keyframes ww-reveal { from { opacity: 0; transform: translateY(30px) } to { opacity: 1; transform: translateY(0) } }
@keyframes ww-rise { from { opacity: 0; transform: translateY(60px) rotate(-2deg) } to { opacity: 1; transform: translateY(0) rotate(0) } }
@keyframes ww-pop { 0% { transform: scale(.86); opacity: 0 } 60% { transform: scale(1.04) } 100% { transform: scale(1); opacity: 1 } }
@keyframes ww-swipe { from { background-size: 0% 100% } to { background-size: 100% 100% } }

/* Page-flip hinge. Every frame stays legible: the extremes are a tilt and a dim,
   never edge-on or transparent, so a paused or dropped animation can never leave
   the section blank. */

/* Entry animations.
   These used scroll-driven `animation-timeline: view()` in the design file. In a
   real page — outside the design tool's iframe — the timeline never activated and
   every subject froze on the animation's backwards fill: `data-reveal` cards sat
   at opacity 0 forever and the marker sweep stopped part-way, leaving dark text on
   a dark ground. An observer cannot fail that way, and the resting state here is
   the visible one, so anything that goes wrong leaves the page readable.
   The `.anim` class is added by script, and only when it is going to be removed. */
[data-reveal], [data-rise] {
  transition: opacity .62s cubic-bezier(.2, .8, .3, 1), transform .62s cubic-bezier(.2, .8, .3, 1);
}
[data-reveal].anim { opacity: 0; transform: translateY(30px) }
[data-rise].anim { opacity: 0; transform: translateY(60px) rotate(-2deg) }
[data-reveal].anim.is-in, [data-rise].anim.is-in { opacity: 1; transform: none }

[data-mark] { transition: background-size .72s cubic-bezier(.2, .8, .3, 1) }
[data-mark].anim { background-size: 0% 100% }
[data-mark].anim.is-in { background-size: 100% 100% }

@media (prefers-reduced-motion: reduce) {
  [data-mark], [data-reveal], [data-rise] { transition: none !important }
  .hero__title { animation: none !important; transition: none !important }
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1180px) { .rooms { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
@media (max-width: 760px) { .rooms { grid-template-columns: repeat(2, minmax(0, 1fr)) } }

@media (max-width: 900px) {
  .ad-steps { grid-template-columns: 1fr !important }
  .ad-steps__sticky { position: static !important }
  .adproofs { grid-template-columns: 1fr !important }
  .two-col { grid-template-columns: 1fr !important }
  .acro-grid { grid-template-columns: 1fr !important }
  .acro-grid blockquote { justify-self: start !important }
  .est { grid-template-columns: 1fr }
  .cta-band--accent { grid-template-columns: 1fr; gap: 30px }
  .adprods { grid-template-columns: repeat(2, minmax(0, 1fr)) !important }
}

@media (max-width: 720px) {
  .wrap, .sec, .site-head__row, .site-foot__row, .hero__cols { padding-left: 16px !important; padding-right: 16px !important }
  .sec { padding-top: 44px !important; padding-bottom: 28px !important }
  .sec--top { padding-top: 44px !important }
  .site-head__row { min-height: 60px !important }
  .viewtabs { padding-left: 16px; padding-right: 16px }
  .rooms { grid-template-columns: 1fr }
  .adprods { grid-template-columns: 1fr !important }
  .site-foot__row { gap: 26px !important; padding-top: 36px !important; padding-bottom: 36px !important }
  .site-foot__cols { gap: 28px; flex-wrap: wrap }
  .cta-band { padding: 34px 22px !important }
  .cta-band--accent { padding: 34px 22px !important }
  /* On a phone the hero owns the whole first screen, so the section under it
     starts below the fold rather than peeking. svh is the viewport with the
     browser chrome showing, which is the state a page loads in. */
  .hero__inner { min-height: 100vh; min-height: 100svh; align-items: center !important; padding: 24px 0 !important }
  .hero__h1 { font-size: 40px !important; line-height: 1 !important; white-space: normal !important }
  .hero__h1 span { white-space: normal !important }
  .hero__lead { font-size: .45em !important; line-height: 1.15 !important; letter-spacing: 0 !important; opacity: .6 !important; margin-bottom: .34em !important }
  .hero__slot { min-height: 2.12em !important }
  .hero__say h2 { font-size: 23px !important; line-height: 1.16 !important }
  .adhero__h1 { font-size: 40px !important; line-height: 1 !important; max-width: none }
  .acro-h { white-space: normal !important }
  .acro-word { min-width: 0 !important }
  .mobile-hide { display: none !important }
  .lede { font-size: 16px }
  .h2--page { font-size: clamp(34px, 11vw, 52px) }
}

/* ---------------------------------------------------------------- advertiser */

.adprods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
.adprod {
  padding: 28px 26px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background .18s ease, transform .18s ease;
}
.adprod:hover { background: var(--surfaceHi); transform: translateY(-4px) }
.adprod__name {
  font-family: var(--disp);
  font-weight: var(--dispW);
  font-size: 26px;
  line-height: 1.02;
  text-transform: var(--dispCase);
  letter-spacing: var(--dispTrack);
}
.adprod__body { font-size: 14.5px; line-height: 1.5; opacity: .7 }

.ad-steps { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: start }
.ad-steps__sticky { position: sticky; top: 120px }
/* The four steps read as one run down a spine rather than four separate cards,
   with a node per step instead of a number. */
.tl { list-style: none; margin: 0; padding: 0 }
.tl__step { position: relative; padding: 0 0 34px 34px; border-left: 1px solid var(--line) }
.tl__step:last-child { border-left-color: transparent; padding-bottom: 0 }
.tl__step::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--bg);
}
.tl__t {
  font-family: var(--disp);
  font-weight: var(--dispW);
  font-size: clamp(21px, 2.1vw, 27px);
  line-height: 1.06;
  text-transform: var(--dispCase);
  letter-spacing: var(--dispTrack);
  margin: 0 0 9px;
}
.tl__b { font-size: 15.5px; line-height: 1.58; opacity: .7; max-width: 48ch; margin: 0 }

.adproofs { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 12px; align-items: stretch }
.adproofs img { border-radius: 10px }

.blend-panel {
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 44px 44px 36px;
}
.blend-panel__line {
  font-family: var(--disp);
  font-weight: var(--dispW);
  font-size: clamp(28px, 3.6vw, 56px);
  line-height: 1.02;
  text-transform: var(--dispCase);
  min-height: 2em;
  max-width: 22ch;
  letter-spacing: var(--dispTrack);
}
@media (max-width: 720px) { .blend-panel { padding: 26px 22px 22px } }

/* ---------------------------------------------------------------- inner pages */

.vert-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 52px }
.vert {
  padding: 36px 34px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: background .18s ease;
}
.vert:hover { background: var(--surfaceHi) }
.vert__head { margin-bottom: 18px }
.vert__name {
  font-family: var(--disp);
  font-weight: var(--dispW);
  font-size: 38px;
  line-height: 1;
  text-transform: var(--dispCase);
  letter-spacing: var(--dispTrack);
}
.tag {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  white-space: nowrap;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  opacity: .75;
}

.plat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 34px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: background .18s ease;
}
.plat:hover { background: var(--surfaceHi) }
.plat__name {
  margin-top: 4px;
  font-family: var(--disp);
  font-weight: var(--dispW);
  font-size: 40px;
  line-height: 1.02;
  text-transform: var(--dispCase);
  margin-bottom: 12px;
  letter-spacing: var(--dispTrack);
}
@media (max-width: 760px) { .plat { padding: 26px 22px } .vert-grid { grid-template-columns: 1fr } .vert { padding: 28px 22px } .vert__name { font-size: 30px } }

.role {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 26px 8px;
  border-bottom: 1px solid var(--line);
  transition: padding-left .18s ease, color .18s ease;
}
.role:hover { padding-left: 20px; color: var(--accent) }
.role__t {
  font-family: var(--disp);
  font-weight: var(--dispW);
  font-size: 30px;
  line-height: 1;
  text-transform: var(--dispCase);
  flex: 1;
  letter-spacing: var(--dispTrack);
}
.role__m { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; opacity: .55 }
.role__m--place { width: 140px; text-align: right }
@media (max-width: 760px) {
  .role { flex-wrap: wrap; gap: 8px 16px }
  .role__t { font-size: 22px; flex: 1 0 100% }
  .role__m--place { width: auto; text-align: left }
  .role__arrow { margin-left: auto }
}

/* ---------------------------------------------------------------- coverage + CRM */

.verified {
  margin: 40px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-family: var(--disp);
  font-weight: var(--dispW);
  letter-spacing: var(--dispTrack);
  font-size: clamp(19px, 2.1vw, 30px);
  line-height: 1.2;
  max-width: 30ch;
}
.verified strong { color: var(--accent); font-weight: inherit }

.coverage { display: flex; align-items: center; gap: 26px }
.coverage__pct {
  flex: none;
  font-family: var(--disp);
  font-weight: var(--dispW);
  letter-spacing: var(--dispTrack);
  font-size: clamp(56px, 7vw, 92px);
  line-height: .9;
  color: var(--accent);
}
.coverage__pct span { font-size: .5em }
.coverage__lead { font-size: 17px; line-height: 1.4; font-weight: 700 }
.coverage__sub {
  font-size: 14.5px;
  line-height: 1.5;
  margin-top: 10px;
  color: color-mix(in srgb, var(--ink) 66%, transparent);
}
.coverage__bar {
  margin-top: 18px;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  overflow: hidden;
}
.coverage__bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px }
.coverage__note {
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}

.crm { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 12px 48px; align-items: center }
.crm__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px }
.crm__steps { counter-reset: crm }
.crm__steps li {
  padding: 15px 20px 15px 52px;
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 16px;
}
/* The count is the headline ("4 clicks"), so the sequence has to read, but a
   printed 01/02/03/04 column was the same pattern as everywhere else on the page. */
.crm__steps li::before {
  counter-increment: crm;
  content: counter(crm);
  position: absolute;
  left: 20px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
}
.crm__demo {
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  position: relative;
}
.crm__demo img { max-width: 100%; border-radius: 10px; display: block }
/* Shown only while the demo artwork is absent; the image removes itself and this
   sits behind it, so the section never renders as a broken frame. */
.crm__pending {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 34%, transparent);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 54px 26px;
  text-align: center;
  width: 100%;
}
.crm__demo img + .crm__pending { display: none }

@media (max-width: 900px) {
  .crm { grid-template-columns: 1fr; gap: 26px }
  .coverage { flex-direction: column; align-items: flex-start; gap: 14px }
}

/* ---------------------------------------------------------------- pick a community */

/* The room cards on the home page are a picker. Here they are destinations, so
   they get an action line and a real hover, and five across is too tight to read
   a call to action in. */
.rooms--pick { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
.rooms--pick .room { cursor: pointer }
.rooms--pick .room:hover { border-color: var(--accent) }
.rooms--pick .room:hover .room__plate { opacity: 1 }
.rooms--pick .room__body { padding: 16px 18px 18px; gap: 6px }
.rooms--pick .room__plate { height: 148px }

.room__go {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.room--waiting .room__go { color: color-mix(in srgb, var(--ink) 52%, transparent) }
.room--waiting .room__plate { opacity: .5 }
.room--waiting:hover .room__plate { opacity: .7 }

.formfield {
  font-family: var(--body);
  font-size: 15px;
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  outline: none;
  width: 100%;
}
.formfield::placeholder { color: color-mix(in srgb, var(--ink) 45%, transparent) }
.formfield:focus { border-color: var(--accent) }

@media (max-width: 1000px) { .rooms--pick { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 640px) { .rooms--pick { grid-template-columns: 1fr } }

/* The easter egg overlay. Class names are neutral on purpose: site.css is
   served to every visitor, and naming the game here would give it away to
   anyone who opens the stylesheet before they have found it on the page. */
.egg {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: color-mix(in srgb, #000 78%, transparent);
  backdrop-filter: blur(6px);
}
.egg__panel {
  position: relative;
  width: min(1040px, 100%);
  max-height: 100%;
  overflow: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #000;
}
.egg__x {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 9px 14px;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  background: color-mix(in srgb, #000 55%, transparent);
  color: #fff;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.egg__x:hover { background: var(--accent); color: var(--onAccent); border-color: var(--accent) }
.egg__wait {
  margin: 0;
  padding: 90px 20px;
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: color-mix(in srgb, #fff 55%, transparent);
}

@media (max-width: 720px) {
  .egg { padding: 0 }
  .egg__panel { border-radius: 0; border: 0; height: 100% }
}