/* Officaid homepage: "Your Daily Command Center" interactive demo.
   Self-contained: no framework, no external requests. Every class is prefixed .cc so nothing on the page leaks in or out.
   Brand tokens: brand/brand.json 1.0.0 (primary #BC08B0, slate #233C46, Inter / Inter Tight, Material Symbols Rounded). */

.cc {
  --cc-primary: #BC08B0;
  --cc-primary-hover: #8F2C88;
  --cc-primary-tint: #F8E6F7;
  --cc-slate: #233C46;
  --cc-ink: #1A1A1C;
  --cc-body: #324148;
  --cc-muted: #5F6B70;
  --cc-line: #E0E3E4;
  --cc-page: #F5F8FA;
  --cc-section: #F4F5F8;
  --cc-white: #FFFFFF;
  --cc-sticky-top: 96px;            /* below the site's fixed header; override on the section if the header changes */
  --cc-nav-w: 208px;
  --cc-gap: 32px;
  --cc-radius: 14px;
  --cc-shadow: 0 24px 60px rgba(20, 20, 40, .14), 0 6px 18px rgba(20, 20, 40, .08);
  --cc-fade: 380ms;
  font-family: "Inter", "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--cc-ink);
  -webkit-font-smoothing: antialiased;
}
.cc *, .cc *::before, .cc *::after { box-sizing: border-box; }

.cc__head { text-align: center; max-width: 780px; margin: 0 auto 40px; padding: 0 16px; }
.cc__title { font-family: "Inter Tight", "Inter", system-ui, sans-serif; font-weight: 400; font-size: clamp(32px, 4.2vw, 52px); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 14px; color: var(--cc-ink); }
.cc__sub { font-size: clamp(16px, 1.6vw, 20px); line-height: 1.5; color: var(--cc-muted); margin: 0; }

.cc__body { display: grid; grid-template-columns: var(--cc-nav-w) minmax(0, 1fr); gap: var(--cc-gap); align-items: start; max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* ---- module nav (a vertical tablist on desktop) */
.cc__nav { position: sticky; top: var(--cc-sticky-top); display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: var(--cc-radius); background: var(--cc-slate); box-shadow: var(--cc-shadow); }
.cc__tab { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 10px 14px; border: 0; border-radius: 10px; background: transparent; color: #C9D6DB; font-weight: 500; font-size: 16px; line-height: 1.2; font-family: inherit; text-align: left; cursor: pointer; transition: background-color .2s, color .2s; }
.cc__tab svg { width: 24px; height: 24px; flex: none; fill: currentColor; }
.cc__tab:hover { background: rgba(255, 255, 255, .08); color: #FFFFFF; }
.cc__tab[aria-selected="true"] { background: var(--cc-white); color: var(--cc-slate); font-weight: 600; }
.cc__tab[aria-selected="true"] svg { fill: var(--cc-primary); }
.cc__tab:focus-visible, .cc__view:focus-visible, .cc__dot:focus-visible, .cc__num:focus-visible, .cc__play:focus-visible { outline: 3px solid var(--cc-primary); outline-offset: 2px; }
.cc__nav .cc__tab:focus-visible { outline-color: #FF36F2; }
/* autoplay progress under the selected tab */
.cc__tab .cc__bar { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px; background: transparent; overflow: hidden; }
.cc__tab[aria-selected="true"] .cc__bar::after { content: ""; position: absolute; inset: 0; background: var(--cc-primary); transform-origin: 0 50%; transform: scaleX(0); }
.cc--playing .cc__tab[aria-selected="true"] .cc__bar::after { animation: cc-progress var(--cc-interval, 6000ms) linear forwards; }
@keyframes cc-progress { to { transform: scaleX(1); } }

/* ---- stage: the panels stack in one grid cell and crossfade */
.cc__stage { position: relative; display: grid; min-width: 0; }
.cc__panel { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; transition: opacity var(--cc-fade) ease, visibility 0s linear var(--cc-fade); }
.cc__panel.is-active { opacity: 1; visibility: visible; transition: opacity var(--cc-fade) ease, visibility 0s; }
.cc__panel:focus-visible { outline: 3px solid var(--cc-primary); outline-offset: 6px; border-radius: var(--cc-radius); }

/* screens inside a module (Finance: Profit & Loss / Reconcile) */
.cc__views { display: flex; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; }
.cc__view { border: 1px solid var(--cc-line); background: var(--cc-white); color: var(--cc-body); border-radius: 999px; padding: 7px 16px; font-weight: 500; font-size: 14px; line-height: 1.2; font-family: inherit; cursor: pointer; }
.cc__view[aria-pressed="true"] { background: var(--cc-primary-tint); border-color: var(--cc-primary); color: var(--cc-primary); }
.cc__views + .cc__screens { display: grid; }
.cc__screens { display: grid; }
.cc__screen { grid-area: 1 / 1; margin: 0; min-width: 0; opacity: 0; visibility: hidden; transition: opacity var(--cc-fade) ease, visibility 0s linear var(--cc-fade); }
.cc__screen.is-active { opacity: 1; visibility: inherit; transition: opacity var(--cc-fade) ease, visibility 0s; }

/* ---- the brand browser window (brand.json imagery: traffic lights + app.officaid.com) */
.cc__window { position: relative; border-radius: var(--cc-radius); background: var(--cc-white); box-shadow: var(--cc-shadow); overflow: hidden; }
.cc__chrome { position: relative; height: 40px; background: #F7F7F9; border-bottom: 1px solid rgba(0, 0, 0, .07); }
.cc__chrome i { position: absolute; top: 14px; width: 12px; height: 12px; border-radius: 50%; }
.cc__chrome i:nth-child(1) { left: 16px; background: #FF5F57; }
.cc__chrome i:nth-child(2) { left: 36px; background: #FEBC2E; }
.cc__chrome i:nth-child(3) { left: 56px; background: #28C840; }
.cc__url { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 34%; height: 26px; padding: 0 18px; border-radius: 999px; background: rgba(0, 0, 0, .06); color: #3C3C43; font-weight: 500; font-size: 13px; line-height: 1; font-family: inherit; white-space: nowrap; }
.cc__url svg { width: 10px; height: 12px; fill: #3C3C43; }
.cc__shot { position: relative; background: var(--cc-page); }
.cc__shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; }

/* ---- hotspots: numbered pulsing dots, positions in % of the screen */
.cc__dot { position: absolute; left: var(--x); top: var(--y); width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0; border: 2px solid var(--cc-white); border-radius: 50%; background: var(--cc-primary); color: var(--cc-white); font-weight: 700; font-size: 14px; line-height: 1; font-family: inherit; cursor: pointer; box-shadow: 0 2px 8px rgba(20, 20, 40, .30); display: none; align-items: center; justify-content: center; z-index: 2; }
.cc--js .cc__dot { display: flex; }
.cc__dot::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--cc-primary); opacity: 0; animation: cc-pulse 2.2s ease-out infinite; pointer-events: none; }
.cc__dot:hover, .cc__dot[aria-expanded="true"], .cc__dot.is-lit { background: var(--cc-primary-hover); transform: scale(1.12); }
@keyframes cc-pulse { 0% { transform: scale(1); opacity: .75; } 80%, 100% { transform: scale(2.1); opacity: 0; } }

.cc__tip { position: absolute; z-index: 3; width: max-content; max-width: min(320px, 60%); padding: 12px 14px; border-radius: 10px; background: var(--cc-slate); color: #FFFFFF; font-weight: 500; font-size: 14px; line-height: 1.45; font-family: inherit; box-shadow: 0 10px 30px rgba(20, 20, 40, .25); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .18s, transform .18s; }
.cc__tip.is-open { opacity: 1; transform: none; }
.cc__tip b { color: #FF36F2; font-weight: 700; margin-right: 6px; }

/* the caption list: shown on phones (and without hover), read by screen readers everywhere */
.cc__captions { list-style: none; margin: 16px 0 0; padding: 0; display: none; gap: 8px; }
.cc__captions li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--cc-white); border: 1px solid var(--cc-line); color: var(--cc-body); font-size: 15px; line-height: 1.45; transition: border-color .2s, background-color .2s; }
.cc__captions li.is-lit { border-color: var(--cc-primary); background: var(--cc-primary-tint); }
.cc__num { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--cc-primary); color: #FFFFFF; font-weight: 700; font-size: 13px; line-height: 1; font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cc__foot { display: none; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; max-width: 1200px; margin: 18px auto 0; padding: 0 16px; color: var(--cc-muted); font-size: 14px; }
.cc--js .cc__foot { display: flex; }
.cc__hint { margin: 0; }

.cc__play { display: none; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--cc-line); background: var(--cc-white); color: var(--cc-body); font-weight: 500; font-size: 13px; line-height: 1; font-family: inherit; cursor: pointer; }
.cc--js.cc--auto .cc__play { display: inline-flex; }
.cc__play svg { width: 10px; height: 10px; fill: currentColor; }

/* ---- without JavaScript: only the Insights screen and its alt text */
.cc:not(.cc--js) .cc__nav, .cc:not(.cc--js) .cc__views { display: none; }
.cc:not(.cc--js) .cc__body { grid-template-columns: minmax(0, 1fr); max-width: 1000px; }

/* ---- tablet: a narrower nav */
@media (max-width: 1023px) {
  .cc { --cc-nav-w: 168px; --cc-gap: 20px; }
  .cc__tab { gap: 10px; padding: 10px; font-size: 15px; }
}

/* ---- phone: the nav becomes a scrollable tab row; captions become a numbered list */
@media (max-width: 767px) {
  .cc__head { margin-bottom: 24px; }
  .cc__body { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cc__nav { position: static; flex-direction: row; gap: 4px; padding: 6px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-radius: 12px; }
  .cc__nav::-webkit-scrollbar { display: none; }
  .cc__tab { flex: none; width: auto; min-height: 44px; padding: 8px 14px; gap: 8px; scroll-snap-align: start; }
  .cc__tab svg { width: 20px; height: 20px; }
  .cc__tab .cc__bar { bottom: 3px; }
  .cc__chrome { height: 28px; }
  .cc__chrome i { top: 9px; width: 9px; height: 9px; }
  .cc__chrome i:nth-child(1) { left: 10px; } .cc__chrome i:nth-child(2) { left: 24px; } .cc__chrome i:nth-child(3) { left: 38px; }
  .cc__url { height: 18px; font-size: 11px; padding: 0 10px; min-width: 0; }
  .cc__dot { width: 24px; height: 24px; margin: -12px 0 0 -12px; font-size: 12px; }
  .cc__tip { display: none; }
  .cc--js .cc__captions { display: grid; }
  .cc__hint { display: none; }
}

/* ---- reduced motion: no autoplay (JS), no pulse, no crossfade */
@media (prefers-reduced-motion: reduce) {
  .cc__dot::before { animation: none; }
  .cc__panel, .cc__panel.is-active, .cc__screen, .cc__screen.is-active, .cc__tip { transition: none; }
  .cc--playing .cc__tab[aria-selected="true"] .cc__bar::after { animation: none; }
}