/*
 * consiliaia.com.br. The tokens are the app's (src/app/globals.css); the frame,
 * the panes and the Congresso drawing are the login page's (spec UI.2); the
 * product fragments copy the app's components; the step panels follow Granola's
 * before/during/after layout and the principles follow Hebbia's bento (M.100).
 */
:root {
  --navy: #0b1f33;
  --teal: #00a6a6;
  --grey: #64748b;
  --offwhite: #f7f9fa;
  --mist: #eaf0f2;
  --slate: #56657a;
  --line: #e3e8ec;
  --edge: #c9d3da;
  --bubble: #dfe6eb;
  --teal-pale: #d6f1ef;
  --nav: #b8c4cf;
  --sem: #9a3b2e;
  --pronto: #2f6b3a;
  --pronto-bg: #e6f1e7;
  --fonte-gabinete: #0b1f33;
  --fonte-gabinete-bg: #e3eaf2;
  --fonte-gabinete-edge: #b3c2d3;
  --fonte-publico: #077f7f;
  --fonte-publico-bg: #e0f4f3;
  --fonte-publico-edge: #a8dfdc;
  --fonte-sugerido: #64748b;
  --fonte-sugerido-edge: #b4bfca;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --chegar: cubic-bezier(0.16, 1, 0.3, 1);
  /* design-tells: acknowledged. The one card shadow is Granola's floating card (graft G4). */
  --sombra: 0 20px 40px -20px rgba(11, 31, 51, 0.55);
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --pad: 20px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--navy);
  color: var(--navy);
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px; }

/* The navy ground and the rounded frames on it. Under 400px the frame drops, as on the login page. */
.ground { display: flex; flex-direction: column; }
/* clip, not hidden: hidden would make each frame a scroll container and break the sticky rail. */
.frame { overflow: clip; }
.pane { padding: 40px var(--pad); }
.mist { background: var(--mist); }
.offwhite { background: var(--offwhite); }

@media (min-width: 400px) {
  .ground { padding: 12px; gap: 12px; }
  .frame { border-radius: 24px; }
  :root { --pad: 32px; }
}
@media (min-width: 640px) {
  .ground { padding: 24px; gap: 24px; }
  :root { --pad: 56px; }
  .pane { padding-block: 56px; }
}
@media (min-width: 1024px) {
  .ground { padding: 40px; gap: 40px; }
  .frame { border-radius: 32px; }
}
@media (min-width: 1280px) {
  :root { --pad: 88px; }
  .pane { padding-block: 80px; }
}

/* Type */
.wordmark { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.wordmark span { color: var(--teal); }

h1 {
  font-size: clamp(34px, min(3.8vw, 6.6vh), 72px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  max-width: 14em;
}
h2 {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
h3 { font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }

.lead { font-size: 18px; color: var(--slate); max-width: 34em; }
.prose p { font-size: 17px; max-width: 62ch; }
.prose p + p { margin-top: 1em; }
.prose a { text-decoration-color: var(--teal); text-underline-offset: 3px; }

/* The login page's button: a navy pill. The only button the site has. */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 28px; }
.pill {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 150ms var(--ease);
}
.pill:hover { background: #1a3550; }
.quiet { color: var(--slate); font-size: 15px; text-decoration: none; }
.quiet:hover { text-decoration: underline; text-underline-offset: 3px; }

/*
 * Hero. Wide: two panes, as on the login page; the mist pane stacks from the
 * top and the briefing rises from its bottom, cut by the frame. Narrow: one
 * column on mist, the line right after the wordmark, the briefing after the
 * call, and the drawing closing the frame on off-white.
 */
.hero { display: flex; flex-direction: column; background: var(--mist); }
.hero-a, .hero-b { display: contents; }
.hero .wordmark { order: 1; padding: 32px var(--pad) 0; }
.hero .nav { order: 2; padding: 12px var(--pad) 0; }
.hero h1 { order: 3; padding: 40px var(--pad) 0; }
.hero-call { order: 4; padding: 20px var(--pad) 32px; }
.hero-frag { order: 5; padding-inline: var(--pad); max-height: 300px; overflow: hidden; }
.hero .art { order: 6; background: var(--offwhite); height: 240px; }

.nav { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; }
.nav a { color: var(--slate); text-decoration: none; }
.nav a:hover { color: var(--navy); }

@media (min-width: 900px) {
  /* A fixed height, so the briefing is cut by the frame instead of growing it. */
  .hero { flex-direction: row; height: max(600px, min(840px, calc(100dvh - 80px))); }
  .hero-a, .hero-b { display: flex; flex-direction: column; }
  .hero-a { width: 44%; max-width: 600px; flex: none; padding: 48px var(--pad) 0; overflow: hidden; }
  .hero-b { flex: 1; background: var(--offwhite); min-width: 0; padding: 0; }
  .hero .wordmark, .hero .nav, .hero h1, .hero-call, .hero-frag { padding: 0; }
  .hero-call { margin-top: 46px; }
  .hero-frag { flex: 1; min-height: 0; max-height: none; margin-top: 48px; }
  .hero .nav { justify-content: flex-end; padding: 52px var(--pad) 0; }
  .hero h1 { padding: clamp(40px, 8vh, 120px) var(--pad) 0; }
  .hero .art { flex: 1; height: auto; min-height: 240px; margin-top: 24px; }
}
@media (min-width: 1280px) {
  .hero-a { padding-inline: 88px; }
  .hero .nav, .hero h1 { padding-inline: 72px; }
}

/* The Congresso drawing, drawn in once like the login page's. */
.art { position: relative; overflow: hidden; }
.art svg { position: absolute; inset-inline: 0; bottom: 0; width: 100%; height: 100%; max-height: 440px; overflow: visible; }
.art path {
  stroke-width: 3;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  fill-opacity: 0;
  animation:
    tracar var(--d) var(--ease) var(--t) forwards,
    encher 300ms var(--ease) calc(var(--t) + var(--d) * 0.75) forwards;
}
.art path.j { stroke-width: 2; }
@keyframes tracar { to { stroke-dashoffset: 0; } }
@keyframes encher { to { fill-opacity: 1; } }

/* Sections */
.pane > h2 + * { margin-top: 32px; }
@media (min-width: 900px) {
  .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 48px; }
  .split > h2 + * { margin-top: 0; }
}

/*
 * The product, in the app's own type: the fragments copy the components'
 * sizes (Tag.tsx, MensagemCard.tsx, the briefing and Hoje), not the site's.
 */
.window, .card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--navy);
}
.window { padding: 20px; }
.card { padding: 18px; box-shadow: var(--sombra); }
@media (max-width: 639px) { .window, .card { font-size: 13px; } }

.ui-meta { font-size: 12px; color: var(--grey); }
.ui-title { margin-top: 6px; font-size: 16px; font-weight: 600; line-height: 1.3; }
.ui-sub { margin-top: 4px; font-size: 13px; color: var(--grey); }
.ui-head { margin-top: 18px; font-size: 15px; font-weight: 600; }
.ui-head:first-child { margin-top: 0; }
.ui-head span { margin-left: 8px; font-size: 12px; font-weight: 400; color: var(--grey); }
.ui-line { margin-top: 10px; }
.ui-strong { font-weight: 600; }
.ui-link { margin-top: 12px; font-size: 13px; color: var(--slate); }
.ui-falta { margin-top: 6px; font-size: 13px; color: var(--sem); }
.rotulo {
  margin-top: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}
.rotulo.dir { text-align: right; }
.chip {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  vertical-align: 1px;
}
.chip.pronto { color: var(--pronto); background: var(--pronto-bg); }

.ui-linhas { counter-reset: linha; }
.ui-linhas[start="2"] { counter-reset: linha 1; }
.ui-linhas li { counter-increment: linha; position: relative; margin-top: 8px; padding-left: 22px; }
.ui-linhas li::before {
  content: counter(linha);
  position: absolute;
  left: 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--grey);
  line-height: 21px;
}
.ui-linhas.fone li { margin-top: 6px; }

.ui-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ui-btn, .ui-btn-teal, .ui-btn-navy {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.ui-btn { border: 1px solid var(--edge); background: #fff; }
.ui-btn-teal { background: var(--teal); color: #fff; font-weight: 600; }
.ui-btn-navy { margin-top: 12px; padding: 8px 14px; border-radius: 999px; background: var(--navy); color: #fff; }
.window > .ui-btn { margin-top: 14px; }

/* The origin tag (Tag.tsx). */
.tag {
  display: inline-block;
  max-width: 100%;
  padding: 2px 7px;
  border: 1px solid;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.3;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}
.window .tag, .card .tag { margin-top: 6px; }
.tag.gabinete { color: var(--fonte-gabinete); background: var(--fonte-gabinete-bg); border-color: var(--fonte-gabinete-edge); }
.tag.publico { color: var(--fonte-publico); background: var(--fonte-publico-bg); border-color: var(--fonte-publico-edge); }
.tag.sugerido { color: var(--fonte-sugerido); background: transparent; border-style: dashed; border-color: var(--fonte-sugerido-edge); }

/* Hoje's agenda rows. */
.ag-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ag-hora { font-weight: 600; }
.ag-kind { display: block; font-size: 11px; color: var(--grey); }
.ag-row .chip { margin: 2px 0 0; }

/* The phone message (MensagemCard.tsx), without its author. */
.ui-fone-titulo { margin-top: 4px; font-size: 16px; font-weight: 600; line-height: 1.3; }
.ui-pergunta { margin-top: 8px; font-weight: 500; }
.ui-resposta { font-size: 13px; color: var(--grey); }
.ui-quote { margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--edge); font-size: 13px; }

/* Ensaio. */
.ui-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ui-pill { padding: 4px 10px; border: 1px solid var(--edge); border-radius: 999px; font-size: 12px; }
.ui-pill.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.bolha { margin-top: 6px; max-width: 78%; padding: 10px 14px; border-radius: 12px; background: var(--mist); }
.bolha.sua { margin-left: auto; background: var(--teal-pale); }
.ui-input { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding: 8px 8px 8px 14px; border: 1px solid var(--edge); border-radius: 999px; }
.ui-send { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--grey); color: #fff; font-size: 14px; }

/* Revisão. */
.ui-box { margin-top: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; }
.ui-doc { color: var(--fonte-publico); font-weight: 600; }
.ui-usada { margin-top: 4px; font-size: 13px; }
.ui-usada span { color: var(--grey); }

/* Chat. */
.bolha.pergunta { margin-left: auto; font-size: 13px; background: var(--bubble); }
.ui-resp { margin-top: 12px; }
.marca {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border: 1px solid var(--fonte-gabinete-edge);
  border-radius: 50%;
  background: var(--fonte-gabinete-bg);
  font-family: var(--mono);
  font-size: 10px;
  vertical-align: 1px;
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.ui-trecho { margin-top: 8px; font-size: 13px; }

/*
 * Um compromisso de cada vez. Granola's anatomy: a sticky rail of the four
 * stages, and one navy panel per stage holding an app window that runs off the
 * panel's edge and a floating card over the window's lower left.
 */
.rail { display: none; }
.passo { counter-increment: passo; }
.passos { counter-reset: passo; }
.passo + .passo { margin-top: 72px; }
.passos > h2 + .passo { margin-top: 40px; }
.passo::before {
  content: counter(passo);
  display: block;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--grey);
}
.passo > h3 { font-size: 22px; }
.passo > p { margin-top: 8px; max-width: 46ch; color: var(--slate); }
.legenda { margin-top: 14px; font-size: 14px; }

.painel {
  position: relative;
  margin-top: 24px;
  padding: 16px;
  border-radius: 16px;
  background: var(--navy);
  overflow: clip;
}
.painel .card { margin-top: -24px; position: relative; margin-inline: 8px; }

@media (min-width: 900px) {
  .painel { height: 520px; padding: 0; }
  /*
   * The window runs off the panel's right and bottom (Linear, Granola). Its
   * text keeps to a 440px column and the floating card sits over the empty
   * right side, so no card ever covers a line of evidence.
   */
  .painel .window { position: absolute; left: 64px; top: 48px; right: -24px; bottom: -200px; padding: 24px; }
  .painel .window > * { max-width: 440px; }
  .painel .window > .bolha.sua { margin-left: 60px; max-width: 380px; }
  .painel .card { position: absolute; right: 40px; width: 300px; margin: 0; }
  .painel .c-baixo { bottom: 32px; }
  .painel .c-fone { top: 72px; }
  .w-solta { overflow: hidden; }
}

@media (min-width: 1024px) {
  .passos-sec { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 64px; }
  .rail {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 48px;
    align-self: start;
    margin-top: 120px;
  }
  .rail a {
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    color: var(--slate);
    font-size: 15px;
    text-decoration: none;
    transition: color 150ms var(--ease), border-color 150ms var(--ease);
  }
  .rail a[aria-current='step'] { color: var(--navy); border-bottom: 2px solid var(--navy); padding-bottom: 9px; }
  .passo { scroll-margin-top: 48px; }
}

/*
 * Do que a gente não abre mão. Hebbia's bento: a wide and a narrow tile, then
 * a narrow and a wide, the product inside a tile cut by its bottom edge.
 */
.bento { display: grid; gap: 16px; }
.tile {
  display: flex;
  flex-direction: column;
  min-height: 260px;
  padding: 28px;
  border-radius: 16px;
  background: var(--mist);
  overflow: clip;
}
.tile > p { margin-top: 8px; max-width: 52ch; color: var(--slate); font-size: 15px; }
.tile .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 24px; }
.tile .tags .tag { font-size: 12px; padding: 3px 8px; }
.tile-prod { position: relative; margin: 24px -28px -28px; padding: 0 28px; }
.w-chat { border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: 28px; }
.c-trecho { position: relative; margin: -40px 12px 0; }
@media (min-width: 640px) {
  .bento { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .t-a { grid-column: span 3; }
  .t-b { grid-column: span 2; }
  .t-c { grid-column: span 2; }
  .t-d { grid-column: span 3; }
}
@media (min-width: 900px) {
  .tile { min-height: 300px; }
  .tile-prod { margin-top: auto; padding-top: 24px; }
  .w-chat { margin-right: -52px; padding: 20px 76px 168px 20px; }
  .w-chat > * { max-width: 560px; }
  .c-trecho { position: absolute; right: 28px; bottom: 24px; width: 340px; margin: 0; }
}

/* The tiles that carry one piece of the app's chrome rather than a window. */
.tile > .tile-ui { margin-top: auto; padding-top: 24px; max-width: none; }
.tile > .shell { margin-top: auto; padding: 12px 16px; color: #fff; font-size: 14px; }
.shell {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--navy);
  color: #fff;
  font-size: 14px;
}
.shell-marca { font-weight: 600; letter-spacing: -0.02em; }
.shell-marca span { color: #36c7c1; }
.shell-gab { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 999px; font-size: 13px; }
.shell-ini { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: var(--navy); font-size: 10px; font-weight: 600; }
.tile .ui-btns { margin-top: auto; }

/* Quem faz */
.team { display: grid; gap: 32px 40px; }
.team li { border-top: 1px solid var(--edge); padding-top: 18px; }
.team p { margin-top: 8px; color: var(--slate); }
@media (min-width: 640px) { .team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Footer, on the navy ground. */
.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 20px var(--pad);
  color: var(--nav);
  font-size: 14px;
}
.foot a { color: #fff; text-decoration: none; }
.foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 400px) { .foot { padding: 4px 8px 8px; } }

/*
 * Motion, once each, in the app's tokens: chegar for a thing landing, the
 * 300 ms curve for a tag arriving or a passage opening. site.js adds .in when
 * a [data-in] block is seen. Without JS, or with reduced motion, every element
 * renders in its final state.
 */
@keyframes chegar { from { opacity: 0; transform: translateY(-16px); } }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } }
@keyframes rise8 { from { opacity: 0; transform: translateY(8px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes ring { to { outline-color: var(--teal); } }

@media (prefers-reduced-motion: no-preference) {
  .js [data-in]:not(.in).a-chegar,
  .js [data-in]:not(.in) :is(.a-chegar, .a-rise, .a-rise8, .a-fade) { opacity: 0; }
  .js .in.a-chegar,
  .js .in .a-chegar { animation: chegar 400ms var(--chegar) var(--d, 0ms) both; }
  .js .in.a-chegar .a-rise,
  .js .in .a-rise { animation: rise 300ms var(--ease) var(--d, 0ms) both; }
  .js .in .a-rise8 { animation: rise8 300ms var(--ease) var(--d, 0ms) both; }
  .js .in .a-fade { animation: fade 300ms var(--ease) var(--d, 0ms) both; }
  .js .in .a-ring { animation: ring 150ms var(--ease) 600ms both; }
}
.no-js .a-ring, .a-ring { outline-color: var(--teal); }
@media (prefers-reduced-motion: no-preference) {
  .js .a-ring { outline-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .art path { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; fill-opacity: 1; }
}