:root{--fb-accent:#dfff45;--fb-accent-contrast:#ffffff;--fb-code-surface:rgba(20,30,50,.06);--fb-hover:rgba(20,30,50,.05);--fb-danger:#c0392b;--fb-font-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--fb-ink:#172033;--fb-paper:#f5f7fb;--fb-muted:#667085;--fb-line:#dce2ed;--fb-surface:#ffffff;--fb-radius:13px;--fb-font-family:Inter, ui-sans-serif, system-ui, sans-serif;--fb-font-body:Inter, ui-sans-serif, system-ui, sans-serif;--fb-font-heading:Inter, ui-sans-serif, system-ui, sans-serif;--fb-text-xs:12px;--fb-text-sm:14px;--fb-text-md:16px;--fb-text-lg:20px;--fb-text-xl:25px;--fb-text-2xl:31px;--fb-text-3xl:39px;--fb-space-1:4px;--fb-space-2:8px;--fb-space-3:12px;--fb-space-4:16px;--fb-space-5:24px;--fb-space-6:32px;--fb-space-7:48px;--fb-space-8:64px;--fb-measure:68ch;--fb-focus:#dfff45;--fb-shadow-1:0 1px 3px color-mix(in srgb, #172033 10%, transparent);--fb-shadow-2:0 4px 12px color-mix(in srgb, #172033 14%, transparent);--fb-shadow-3:0 12px 32px color-mix(in srgb, #172033 20%, transparent);--accent:var(--fb-accent);--ink:var(--fb-ink);--paper:var(--fb-paper);--muted:var(--fb-muted);--line:var(--fb-line);--surface:var(--fb-surface);font-family:var(--fb-font-body)}h1,h2,h3,h4,h5,h6{font-family:var(--fb-font-heading)}:focus-visible{outline:2px solid var(--fb-focus);outline-offset:2px}html[data-fb-theme="default"]{--fb-ink:#18251f;--fb-line:#e7e9e5;--fb-muted:#788079;--fb-paper:#f7f8f5;--fb-accent:#dfff45;--fb-surface:#ffffff;--fb-accent-contrast:#18251f;}@media (prefers-color-scheme:light){html:not([data-fb-theme]){--fb-ink:#18251f;--fb-line:#e7e9e5;--fb-muted:#788079;--fb-paper:#f7f8f5;--fb-accent:#dfff45;--fb-surface:#ffffff;--fb-accent-contrast:#18251f;}}@media (prefers-color-scheme:dark){html:not([data-fb-theme]){--fb-ink:#18251f;--fb-line:#e7e9e5;--fb-muted:#788079;--fb-paper:#f7f8f5;--fb-accent:#dfff45;--fb-surface:#ffffff;--fb-accent-contrast:#18251f;}}
.fb-block{grid-column:1/-1;flex-basis:100%}
.sc-nav-item{position:relative;display:inline-flex;align-items:center}.sc-nav-sub{position:absolute;left:0;top:100%;z-index:50;display:flex;flex-direction:column;min-width:max-content;gap:1px;padding:5px;margin-top:6px;background:var(--fb-paper,#fff);border:1px solid color-mix(in srgb, var(--fb-line,rgba(20,30,50,.18)) 55%, transparent);border-radius:calc(var(--fb-radius,12px) * .4);box-shadow:var(--fb-shadow-1,0 1px 3px rgb(15 23 42 / 10%)),var(--fb-shadow-2,0 4px 12px rgb(15 23 42 / 14%));visibility:hidden;opacity:0;transform:translateY(-4px);transition:opacity 140ms ease,transform 140ms ease,visibility 0s linear 140ms}.sc-nav-sub::before{content:"";position:absolute;left:0;right:0;top:-7px;height:7px}.sc-nav-sub .sc-nav-sub{top:18px;left:100%;margin:0 0 0 6px}.sc-nav-sub .sc-nav-sub::before{left:-7px;right:auto;top:-26px;bottom:0;width:7px;height:auto}.sc-nav .sc-nav-has-children>a{display:flex;align-items:center;gap:6px}.sc-nav .sc-nav-has-children>a::after{content:"";display:inline-block;flex:none;width:0;height:0;vertical-align:middle;border:4px solid transparent;border-top-color:currentColor;border-bottom-width:0;margin-top:1px;opacity:.6}.sc-nav-sub .sc-nav-has-children>a{justify-content:space-between}.sc-nav-sub .sc-nav-has-children>a::after{border:4px solid transparent;border-left-color:currentColor;border-right-width:0;margin:0 0 0 6px}.sc-nav-has-children:hover>.sc-nav-sub,.sc-nav-has-children:focus-within>.sc-nav-sub{visibility:visible;opacity:1;transform:translateY(0);transition:opacity 140ms ease,transform 140ms ease,visibility 0s}.sc-nav-sub>a,.sc-nav-sub .sc-nav-item>a{display:block;padding:7px 11px;border-radius:calc(var(--fb-radius,12px) * .28);transition:background-color 120ms ease,color 120ms ease}.sc-nav-sub>a:hover,.sc-nav-sub>a:focus-visible{background:var(--fb-hover,rgba(20,30,50,.06))}@media (prefers-reduced-motion:reduce){.sc-nav-sub{transform:none;transition:none}.sc-nav-has-children:hover>.sc-nav-sub,.sc-nav-has-children:focus-within>.sc-nav-sub{transform:none;transition:none}}.sc-page-index a[data-depth="1"]{margin-left:var(--fb-space-4,16px)}.sc-page-index a[data-depth="2"]{margin-left:var(--fb-space-6,32px)}.sc-page-index a[data-depth="3"]{margin-left:var(--fb-space-7,48px)}
/* styles/site.css */
:root {
  --ink: var(--fb-ink);
  --muted: var(--fb-muted);
  --line: var(--fb-line);
  --paper: var(--fb-paper);
  --surface: var(--fb-surface);
  --accent: var(--fb-accent);
  --radius: var(--fb-radius);
  --font: var(--fb-font-family);
  --lime: var(--fb-accent);
  --sidebar: #fcfdfb;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); }
a { color: inherit; text-decoration: none; }

.cp-shell {
  display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh;
}
.cp-sidebar {
  display: flex; flex-direction: column; min-height: 100vh;
  padding: 30px 17px 18px; border-right: 1px solid var(--line); background: var(--sidebar);
}
.cp-brand {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 70px; padding: 0 10px;
  color: var(--ink); letter-spacing: -1.2px; font-size: 22px; font-weight: 800;
}
.cp-brand-mark { display: inline-flex; align-items: end; gap: 2px; height: 23px; }
.cp-brand-mark i {
  display: block; width: 5px; border-radius: 5px; background: var(--ink);
}
.cp-brand-mark i:first-child { height: 10px; }
.cp-brand-mark i:nth-child(2) { height: 22px; }
.cp-brand-mark i:nth-child(3) { height: 15px; }

.cp-eyebrow {
  margin: 0 0 9px; color: #858d86;
  letter-spacing: .14em; text-transform: uppercase; font-size: 10px; font-weight: 700;
}
.cp-nav .cp-eyebrow { padding: 0 10px; }
.cp-nav .sc-nav, .cp-nav {
  display: grid; gap: 3px;
}
.cp-nav .sc-nav { display: grid; gap: 3px; }
.cp-nav .sc-nav a {
  display: flex; align-items: center; gap: 13px;
  height: 44px; padding: 0 10px; border-radius: 10px;
  color: #667069; font-size: 13px; text-decoration: none;
}
.cp-nav .sc-nav a:hover {
  color: var(--ink); background: #eef0ec; font-weight: 700;
}

.cp-sidebar-bottom { margin-top: auto; }
.cp-support {
  margin: 0 0 14px; padding: 17px; border-radius: 13px; background: #eeefea;
}
.cp-support-orb {
  float: right; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid #bcc1b9; color: #667069; font-size: 14px;
}
.cp-support strong { font-size: 12px; }
.cp-support p {
  max-width: 130px; margin: 6px 0 12px; color: #7c837d;
  font-size: 11px; line-height: 1.45;
}
.cp-support a {
  color: var(--ink); font-size: 11px; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
}
.cp-user {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 8px 9px; border-radius: 10px;
}
.cp-avatar {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 9px; font-weight: 800;
}
.cp-avatar-client { color: #eff4e3; background: #243a34; }
.cp-avatar.is-peach { color: #a95848; background: #ffe0d7; }
.cp-avatar.is-blue { color: #5271a5; background: #dce8ff; }
.cp-avatar.is-lime { color: #63812a; background: #e4f89c; }
.cp-user span:nth-child(2) { display: grid; gap: 2px; }
.cp-user b { font-size: 11px; }
.cp-user small { color: #858d86; font-size: 10px; }
.cp-user em { margin-left: auto; color: #8b928d; font-style: normal; }

.cp-main { min-width: 0; display: flex; flex-direction: column; }
.cp-topbar {
  display: flex; justify-content: space-between; align-items: center;
  height: 79px; padding: 0 56px;
  border-bottom: 1px solid var(--line); background: #fbfcfa;
}
.cp-crumb { display: flex; gap: 11px; color: #909790; font-size: 12px; }
.cp-crumb strong { color: var(--ink); }
.cp-header-actions { display: flex; gap: 9px; }
.cp-icon-btn {
  position: relative; width: 35px; height: 35px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: #fff; color: #4d5750;
  font-size: 20px; line-height: 1;
}
.cp-notify { font-size: 16px; }
.cp-notify i {
  position: absolute; top: 4px; right: 3px;
  width: 6px; height: 6px; border-radius: 50%;
  border: 1px solid var(--ink); background: var(--lime);
}
.cp-mobile-brand { display: none; letter-spacing: -1px; font-size: 20px; font-weight: 800; }

.cp-page { flex: 1; max-width: 1280px; width: 100%; margin: 0 auto; padding: 53px 56px 74px; }

.cp-welcome {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 25px; margin-bottom: 34px;
}
.cp-welcome h1 {
  margin: 0; letter-spacing: -2.5px;
  font-size: clamp(32px, 4vw, 42px); font-weight: 800; line-height: 1.05;
}
.cp-welcome h1 span { color: #98b622; }
.cp-subtitle { margin: 13px 0 0; color: #7c847d; font-size: 14px; }
.cp-button {
  display: inline-block; vertical-align: middle; white-space: nowrap;
  padding: 13px 18px; border-radius: 99px;
  background: var(--ink); color: #fff; font-size: 12px; font-weight: 700;
}
.cp-button b { margin-left: 8px; font-size: 17px; line-height: 0; }
.cp-button-dark { background: #1e2b22; padding: 12px 16px; }
.cp-button-dark b { color: var(--lime); margin-left: 15px; font-size: 16px; }

.cp-spotlight {
  display: grid; grid-template-columns: 1.1fr .9fr; min-height: 316px;
  margin-bottom: 17px; border-radius: 18px; background: var(--lime); overflow: hidden;
}
.cp-spotlight-copy { padding: 36px 40px; }
.cp-spotlight-copy .cp-eyebrow { color: #637510; }
.cp-spotlight-copy h2 {
  margin: 0 0 15px; letter-spacing: -2px;
  font-size: clamp(28px, 3vw, 34px); line-height: .98; font-weight: 800;
}
.cp-spotlight-copy > p:not(.cp-eyebrow) {
  max-width: 350px; margin: 0; color: #4e5e12; font-size: 13px; line-height: 1.45;
}
.cp-meeting-meta {
  display: flex; align-items: center; gap: 6px;
  margin: 22px 0; color: #4c5b15; font-size: 11px; font-weight: 700;
}
.cp-meeting-meta i {
  width: 1px; height: 13px; margin: 0 3px; background: #a4be2d;
}
.cp-art {
  position: relative; overflow: hidden; min-height: 260px; background: #203229;
}
.cp-paper {
  position: absolute; top: 58px; right: 67px;
  width: 250px; height: 172px; background: #f5f4e8;
  transform: rotate(-19deg); box-shadow: 9px 12px #dde0be;
}
.cp-paper-two {
  top: 83px; right: -12px; background: #cad7ac;
  box-shadow: none; transform: rotate(17deg);
}
.cp-orbit {
  position: absolute; top: -65px; right: -30px;
  width: 245px; height: 245px; border-radius: 50%;
  border: 19px solid #e9ff74; opacity: .95;
}
.cp-orbit-two {
  top: 178px; right: 183px; width: 188px; height: 188px; border-color: #ffb9a8;
}
.cp-art-word {
  position: absolute; z-index: 2; top: 106px; right: 90px;
  color: #22372b; letter-spacing: -5px; font-size: 61px; font-weight: 900;
  transform: rotate(-19deg);
}
.cp-art-dot {
  position: absolute; z-index: 3; bottom: 37px; right: 43px;
  width: 33px; height: 33px; border-radius: 50%; background: #ff7f61;
}

.cp-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; margin-bottom: 43px;
}
.cp-metric {
  min-height: 122px; padding: 20px 22px;
  border: 1px solid var(--line); border-radius: 13px; background: var(--surface);
}
.cp-metric p { margin: 0; color: #818982; font-size: 12px; }
.cp-metric strong {
  display: block; margin: 10px 0 7px; letter-spacing: -1.5px; font-size: 30px;
}
.cp-metric span { color: #929991; font-size: 10px; }
.cp-metric .is-positive { color: #6a8b1e; }

.cp-lower {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px;
}
.cp-section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 18px;
}
.cp-section-head h2, .cp-section-head h3 {
  margin: 0; letter-spacing: -1px; font-size: 21px; font-weight: 700;
}
.cp-section-link {
  color: #56615a; font-size: 11px; font-weight: 700;
}
.cp-section-link b { margin-left: 7px; font-size: 15px; }

.cp-project-list, .cp-activity-list, .cp-file-list { border-top: 1px solid var(--line); }
.cp-project-row {
  display: grid; grid-template-columns: 50px minmax(135px, 1fr) 105px 16px;
  align-items: center; gap: 13px; width: 100%;
  padding: 13px 1px; border-bottom: 1px solid var(--line); color: inherit;
}
.cp-project-row:hover { background: #fafbf7; }
.cp-project-art {
  width: 49px; height: 43px; border-radius: 8px;
  display: grid; place-items: center;
  letter-spacing: -1px; font-size: 14px; font-weight: 800;
}
.cp-art-lime { background: #dfff45; }
.cp-art-peach { background: #ffc9b6; }
.cp-art-blue { background: #c9ddff; }
.cp-project-info { display: grid; gap: 4px; }
.cp-project-info b { font-size: 12px; }
.cp-project-info small { color: #818981; font-size: 10px; }
.cp-progress { display: flex; align-items: center; gap: 8px; }
.cp-progress i {
  display: block; overflow: hidden; width: 66px; height: 5px;
  border-radius: 5px; background: #e9ece5;
}
.cp-progress i em {
  display: block; height: 100%; border-radius: 5px; background: #839c39;
}
.cp-progress small { color: #89918a; font-size: 10px; }
.cp-arrow { color: #778078; font-size: 17px; }

.cp-activity-row {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.cp-activity-row p {
  margin: 1px 0 0; color: #667067; font-size: 11px; line-height: 1.4;
}
.cp-activity-row p b { color: var(--ink); }
.cp-activity-row small {
  display: block; margin-top: 4px; color: #9aa09a; font-size: 10px;
}

.cp-page-intro { margin-bottom: 34px; max-width: 640px; }
.cp-page-intro h1 {
  margin: 0; letter-spacing: -2.5px;
  font-size: clamp(32px, 4vw, 42px); font-weight: 800; line-height: 1.05;
}
.cp-file-row {
  display: grid; grid-template-columns: 50px 1fr auto;
  align-items: center; gap: 14px;
  padding: 16px 1px; border-bottom: 1px solid var(--line);
}
.cp-file-row small { color: #818981; font-size: 11px; }
.cp-file-meta { color: #89918a; font-size: 11px; text-align: right; }

@media (max-width: 880px) {
  .cp-shell { grid-template-columns: 1fr; }
  .cp-sidebar { display: none; }
  .cp-topbar { height: 65px; padding: 0 24px; }
  .cp-mobile-brand { display: block; }
  .cp-crumb { display: none; }
  .cp-page { padding: 38px 24px; }
  .cp-lower { gap: 36px; }
  .cp-art { min-height: 220px; }
  .cp-art-word { font-size: 46px; right: 58px; }
  .cp-paper { right: 35px; }
  .cp-metrics { gap: 10px; }
  .cp-metric { padding: 16px; }
  .cp-project-row { grid-template-columns: 48px minmax(105px, 1fr) 90px 14px; }
}

@media (max-width: 620px) {
  .cp-page { padding: 30px 17px 50px; }
  .cp-welcome { flex-direction: column; align-items: flex-start; }
  .cp-welcome h1, .cp-page-intro h1 { font-size: 35px; }
  .cp-spotlight { grid-template-columns: 1fr; }
  .cp-art { min-height: 170px; }
  .cp-spotlight-copy { padding: 29px 24px; }
  .cp-spotlight-copy h2 { font-size: 30px; }
  .cp-paper { width: 190px; height: 130px; top: 26px; right: 58px; }
  .cp-paper-two { top: 42px; right: -22px; }
  .cp-art-word { font-size: 46px; top: 55px; right: 86px; }
  .cp-orbit { border-width: 13px; width: 170px; height: 170px; }
  .cp-orbit-two { display: none; }
  .cp-art-dot { bottom: 20px; }
  .cp-metrics { grid-template-columns: 1fr; }
  .cp-metric { min-height: 100px; }
  .cp-lower { grid-template-columns: 1fr; gap: 35px; }
  .cp-project-row { grid-template-columns: 48px minmax(120px, 1fr) 75px 14px; }
  .cp-progress i { width: 40px; }
  .cp-button { width: 100%; text-align: center; }
}

/* Priority issue */
.cp-pain {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 19px;
  margin: 0 0 43px;
  padding: 23px 25px;
  border: 1px solid #d9e29d;
  border-radius: 13px;
  background: #f7f9e9;
}
.cp-pain-marker {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #dfff45;
  color: #243a34;
  font-size: 22px;
  font-weight: 800;
}
.cp-pain-copy { min-width: 0; }
.cp-pain .cp-eyebrow { margin-bottom: 5px; color: #728427; }
.cp-pain h2 {
  margin: 0;
  letter-spacing: -0.8px;
  font-size: 17px;
  line-height: 1.2;
}
.cp-pain-copy > p:not(.cp-eyebrow) {
  margin: 5px 0 0;
  color: #67715c;
  font-size: 12px;
  line-height: 1.45;
}
.cp-pain-link {
  min-width: 44px;
  padding: 10px 0;
  color: #34442a;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.cp-pain-link b { margin-left: 7px; font-size: 16px; }
.cp-pain-link:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 620px) {
  .cp-pain {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px;
    padding: 20px;
  }
  .cp-pain-marker { width: 40px; height: 40px; }
  .cp-pain h2 { font-size: 16px; }
  .cp-pain-link { grid-column: 2; padding: 1px 0; }
}

/* Spotlight artwork */
.cp-cube-image {
  grid-column: 2;
  grid-row: 1;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 316px;
  display: block;
  object-fit: cover;
}
.cp-spotlight:has(.cp-cube-image) .cp-art { display: none; }

@media (max-width: 620px) {
  .cp-cube-image {
    grid-column: 1;
    grid-row: 2;
    min-height: 220px;
  }
}

/* Cube spotlight treatment */
.cp-spotlight:has(.cp-cube-image) {
  position: relative;
  isolation: isolate;
  background: #dfff45;
}
.cp-spotlight:has(.cp-cube-image)::before {
  content: "";
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  width: 45%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(223, 255, 69, .04), rgba(21, 35, 28, .22));
  mix-blend-mode: multiply;
}
.cp-spotlight:has(.cp-cube-image)::after {
  content: "";
  position: absolute;
  z-index: 3;
  right: clamp(18px, 3vw, 36px);
  bottom: 26px;
  width: 68px;
  height: 68px;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 50%;
  box-shadow: inset 0 0 0 12px rgba(223, 255, 69, .82);
  pointer-events: none;
}
.cp-spotlight:has(.cp-cube-image) .cp-spotlight-copy {
  position: relative;
  z-index: 4;
}
.cp-spotlight:has(.cp-cube-image) .cp-cube-image {
  position: relative;
  z-index: 1;
  object-position: center;
  filter: saturate(.96) contrast(1.04);
}
.cp-spotlight:has(.cp-cube-image) .cp-button-dark {
  box-shadow: 0 8px 18px rgba(31, 48, 38, .18);
}
.cp-spotlight:has(.cp-cube-image) .cp-button-dark:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(31, 48, 38, .25);
}
@media (max-width: 620px) {
  .cp-spotlight:has(.cp-cube-image)::before { width: 100%; height: 44%; }
  .cp-spotlight:has(.cp-cube-image)::after { right: 18px; bottom: 18px; width: 54px; height: 54px; box-shadow: inset 0 0 0 9px rgba(223, 255, 69, .82); }
}