/* Home page: nav, board, offer panels, packages, new prototypes. */

/* ---------- Nav ---------- */
.sitenav { display: none; gap: 2px; }
.sitenav a { padding: 8px 12px; border-radius: 999px; font-size: var(--text-body-small); font-weight: 500; text-decoration: none; color: var(--fg-2); transition: background-color var(--d-state), color var(--d-state); }
.sitenav a:hover { background: var(--bg-elev); color: var(--fg); }
.sitenav a[aria-current="page"] { color: var(--fg); background: var(--bg-elev); }
@media (min-width: 820px) { .sitenav { display: flex; } }
.sitenav__cta { margin-left: 6px; }
@media (max-width: 480px) { .sitenav__cta { display: none; } }
.mnav { display: flex; gap: 4px; overflow-x: auto; padding: 0 0 10px; scrollbar-width: none; }
@media (min-width: 820px) { .mnav { display: none; } }

/* ---------- Hero tweaks ---------- */
.hero__title { max-width: 15ch; }
.hero__sub { margin: 22px 0 30px; max-width: 38rem; font-size: var(--text-body-large); line-height: 1.6; color: var(--color-neutral-100); }
.hero__meta { margin: 28px 0 0; }

/* ---------- What you told me ---------- */
.told__grid { display: grid; gap: 28px; }
@media (min-width: 960px) { .told__grid { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 64px; } }
.told h2 { margin-top: 12px; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 640px) { .facts { grid-template-columns: 1fr 1fr; column-gap: 32px; } }
.facts li { padding: 16px 0; border-top: 1px solid var(--line); font-size: var(--text-body); line-height: 1.55; }
.facts__k { display: block; font-size: var(--text-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 6px; }
.kept { margin-top: 24px; padding: 20px; border-radius: var(--radius-lg); background: var(--bg-elev); --fg-3: var(--fg-3-elev); }
.kept__h { margin: 0 0 12px; font-weight: 600; }
.kept__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: var(--text-body-small); }
.kept__list li { display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; }
.kept__list li > :nth-child(n+3) { grid-column: 2; }
.kept__list a, .kept__list .muted { grid-column: 2; font-size: var(--text-caption); }
.kept__tick { width: 18px; height: 18px; border-radius: 50%; margin-top: 1px; background: var(--signal-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A9D8F' stroke-width='3'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; }

/* ---------- Board ---------- */
.board { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .board { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.ocard-wrap.is-small { }
@media (min-width: 1100px) { .ocard-wrap.is-small { grid-column: 1 / -1; } .ocard-wrap.is-small .ocard { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 32px; align-content: start; } .ocard-wrap.is-small .ocard > * { grid-column: 1; } .ocard-wrap.is-small .ocard__pv { grid-column: 2; grid-row: 1 / span 5; height: 100%; min-height: 160px; } .ocard-wrap.is-small .pv-social { grid-template-columns: repeat(6, 1fr); align-content: center; } }
.ocard { position: relative; display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 20px; border-radius: 18px; border: 1px solid var(--line); background: var(--bg); color: inherit; text-decoration: none;
  transition: transform var(--d-move) var(--ease-out), box-shadow var(--d-move) var(--ease-out), border-color var(--d-state); }
.ocard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--line-strong); text-decoration: none; }
.ocard:active { transform: translateY(-1px) scale(0.995); }
.ocard__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ocard__in { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--signal-soft); color: var(--fg); }
.ocard__in--line { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--fg-2); }
.ocard__title { font-size: 1.375rem; line-height: 1.22; font-weight: 600; letter-spacing: -0.02em; }
.ocard__said { font-size: var(--text-body-small); color: var(--fg-2); line-height: 1.5; }
.ocard__said--note { color: var(--fg-3); }
.ocard__pv { display: block; height: 132px; border-radius: 12px; background: var(--bg-elev); overflow: hidden; position: relative; --fg-3: var(--fg-3-elev); }
.ocard__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.ocard__price { font-size: var(--text-h4); font-weight: 600; }
.ocard__note { display: block; font-size: var(--text-caption); color: var(--fg-3); line-height: 1.4; }
.ocard__go { font-size: var(--text-body-small); font-weight: 600; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.ocard__go span { transition: transform var(--d-state) var(--ease-out); }
.ocard:hover .ocard__go span { transform: translateX(4px); }

/* previews: small, decorative, looping only on hover/visible */
.pv-inbox, .pv-table, .pv-tasks, .pv-wiki, .pv-onboard, .pv-karbon, .pv-social { position: absolute; inset: 14px; display: grid; gap: 7px; align-content: start; }
.pv-row { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 8px; height: 20px; padding: 0 8px; border-radius: 6px; background: var(--bg); }
.pv-row i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.pv-row b { white-space: nowrap; font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 4px; background: var(--sel-bg); color: var(--sel-fg); justify-self: start; }
.pv-row em { width: 46px; height: 6px; border-radius: 3px; background: var(--line); }
.pv-tr { display: grid; grid-template-columns: 1.4fr 0.5fr 0.8fr; gap: 6px; height: 14px; }
.pv-tr i { border-radius: 3px; background: var(--bg); }
.pv-tr i.late { background: color-mix(in srgb, var(--bad) 30%, var(--bg)); }
.pv-tr i.ext { background: var(--signal-soft); }
.pv-chips { display: flex; gap: 5px; margin-bottom: 3px; }
.pv-chips i { font-style: normal; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--bg); color: var(--fg-2); }
.pv-chips i.on { background: var(--sel-bg); color: var(--sel-fg); }
.pv-chips b { font-family: var(--font-mono); font-weight: 500; margin-left: 3px; }
.pv-onboard { grid-template-columns: 1fr 20px 1fr; align-items: center; align-content: center; }
.pv-notes { display: grid; gap: 6px; padding: 10px; border-radius: 8px; background: var(--bg); }
.pv-notes i { height: 6px; border-radius: 3px; background: var(--line); }
.pv-notes i:nth-child(2) { width: 70%; background: var(--mark); }
.pv-notes i:nth-child(4) { width: 55%; }
.pv-arrow { color: var(--fg-3); text-align: center; }
.pv-docs { display: grid; gap: 5px; }
.pv-docs b { font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: var(--bg); border-left: 3px solid var(--signal); }
.pv-task { display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px; background: var(--bg); }
.pv-task i { width: 12px; height: 12px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--signal); }
.pv-task em { height: 6px; border-radius: 3px; background: var(--line); }
.pv-task b { font: 500 10px/1 var(--font-mono); color: var(--fg-3); }
.pv-wiki { grid-template-columns: 70px 1fr; gap: 10px; }
.pv-side { display: grid; gap: 6px; align-content: start; }
.pv-side i { height: 8px; border-radius: 3px; background: var(--line); }
.pv-side i.on { background: var(--sel-bg); }
.pv-page { display: grid; gap: 6px; align-content: start; padding: 10px; border-radius: 8px; background: var(--bg); }
.pv-page b { font-size: 11px; }
.pv-page i { height: 6px; border-radius: 3px; background: var(--line); }
.pv-page i:nth-of-type(3) { width: 75%; }
.pv-karbon { inset: 14px; }
.pv-k { position: absolute; inset: 0; transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.pv-k--board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pv-k--board span { display: grid; gap: 6px; align-content: start; }
.pv-k--board i { height: 34px; border-radius: 6px; background: var(--bg); position: relative; }
.pv-k--board i.late::after { content: ""; position: absolute; right: 6px; top: 6px; width: 16px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--bad) 60%, transparent); }
.pv-k--table { display: grid; gap: 6px; align-content: start; opacity: 0; transform: translateY(6px); }
.pv-k--table i { height: 18px; border-radius: 5px; background: var(--bg); }
.pv-social { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pv-social i { aspect-ratio: 4 / 5; border-radius: 6px; background: var(--bg); }
.pv-social i.dark { background: var(--color-secondary); }
@media (prefers-reduced-motion: no-preference) {
  .ocard:hover .pv-row, .ocard:focus-visible .pv-row { animation: pv-pop 2.4s var(--ease-out) infinite; animation-delay: calc(var(--i) * 120ms); }
  .ocard:hover .pv-tr, .ocard:focus-visible .pv-tr { animation: pv-pop 2.4s var(--ease-out) infinite; animation-delay: calc(var(--i) * 90ms); }
  .ocard:hover .pv-docs b, .ocard:focus-visible .pv-docs b { animation: pv-slide 2.4s var(--ease-out) infinite; animation-delay: calc(var(--i) * 140ms); }
  .ocard:hover .pv-task, .ocard:focus-visible .pv-task { animation: pv-pop 2.4s var(--ease-out) infinite; animation-delay: calc(var(--i) * 160ms); }
  .ocard:hover .pv-social i, .ocard:focus-visible .pv-social i { animation: pv-pop 2.4s var(--ease-out) infinite; animation-delay: calc(var(--i) * 80ms); }
  .ocard:hover .pv-k--board, .ocard:focus-visible .pv-k--board { opacity: 0; transform: translateY(-6px); }
  .ocard:hover .pv-k--table, .ocard:focus-visible .pv-k--table { opacity: 1; transform: none; }
}
@keyframes pv-pop { 0% { opacity: 0; transform: translateY(6px); } 18%, 85% { opacity: 1; transform: none; } 100% { opacity: 0.4; } }
@keyframes pv-slide { 0% { opacity: 0; transform: translateX(-10px); } 20%, 85% { opacity: 1; transform: none; } 100% { opacity: 0.4; } }
::view-transition-group(offer) { animation-duration: 460ms; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
::view-transition-old(offer), ::view-transition-new(offer) { height: 100%; width: 100%; object-fit: cover; overflow: clip; }
html[data-vt="card"] dialog.panel, html[data-vt="card"] dialog.panel::backdrop { transition: none; animation: none; }
html[data-vt="swap"]::view-transition-old(root) { animation: 160ms ease-out both vt-out; }
html[data-vt="swap"]::view-transition-new(root) { animation: 260ms var(--ease-out) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Panel (full-screen dialog) ---------- */
html.panel-open { overflow: hidden; }
dialog.panel { border: 0; padding: 0; margin: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; background: var(--bg); color: var(--fg); overflow: hidden; display: none; flex-direction: column; }
dialog.panel[open] { display: flex; }
@media (min-width: 900px) { dialog.panel { margin: 16px auto; width: calc(100vw - 32px); max-width: 1360px; height: calc(100dvh - 32px); max-height: calc(100dvh - 32px); border-radius: 22px; box-shadow: var(--shadow-lift); } }
dialog.panel::backdrop { background: rgb(10 10 10 / 0.55); backdrop-filter: blur(4px); }
@media (prefers-reduced-motion: no-preference) {
  dialog.panel[open] { animation: panel-in 380ms var(--ease-out); }
}
@keyframes panel-in { from { opacity: 0; transform: translateY(14px) scale(0.99); } }
.panel__bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 90%, transparent); flex: none; }
.panel__bar .btn--quiet svg { width: 16px; height: 16px; }
.panel__name { font-weight: 600; font-size: var(--text-body-small); flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel__nav { display: inline-flex; gap: 2px; }
.panel__scroll { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 24px 16px 56px; }
@media (min-width: 720px) { .panel__scroll { padding: 40px 40px 72px; } }
.pv { max-width: 1240px; margin: 0 auto; display: grid; gap: 32px; }
.pv__head { max-width: 46rem; }
.pv__head .label { margin-bottom: 10px; }
.pv__title { font-size: clamp(1.75rem, 2.6vw + 0.9rem, 2.75rem); line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 14px; }
.pv__said { font-size: var(--text-body-large); color: var(--fg-2); margin: 0; padding-left: 16px; border-left: 2px solid var(--signal); }
.pv__proto { min-width: 0; }
.pv__hint { font-size: var(--text-body-small); color: var(--fg-2); margin: 0 0 12px; }
.pv__sub { margin: 40px 0 16px; max-width: 44rem; }
.pv__sub h3 { margin: 8px 0 6px; }
.pv__grid { display: grid; gap: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
@media (min-width: 960px) { .pv__grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; } .pv__side { position: sticky; top: 0; } }
.pv__main { display: grid; gap: 24px; max-width: 46rem; }
.pv__main .label { margin-bottom: 8px; }
.pv__main p { margin: 0; color: var(--fg-2); }
.pv__side { display: grid; gap: 14px; padding: 22px; border-radius: var(--radius-lg); border: 1px solid var(--line-strong); }
.pv__price { display: grid; gap: 4px; }
.pv__price .num { font-size: 2rem; letter-spacing: -0.02em; line-height: 1.1; }
.pv__facts { margin: 0; display: grid; gap: 12px; font-size: var(--text-body-small); }
.pv__facts dt { font-size: var(--text-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }
.pv__facts dd { margin: 2px 0 0; }
.pv__side .btn { width: 100%; }
.pv__next { display: flex; align-items: baseline; gap: 14px; padding: 24px 0 0; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.pv__next .t-h3 { flex: 1; }
.pv__next:hover .t-h3 { text-decoration: underline; text-underline-offset: 4px; }
.pv .compare { margin-top: 8px; }
.pv .compare .label { margin-bottom: 10px; }
.pv .compare > p { margin-top: 10px; }

/* ---------- Packages ---------- */
.pkgs { display: grid; gap: 14px; }
@media (min-width: 960px) { .pkgs { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.pkg { position: relative; display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: 18px; border: 1px solid var(--line-strong); background: var(--bg); transition: border-color var(--d-state), box-shadow var(--d-move) var(--ease-out), transform var(--d-move) var(--ease-out); }
.pkg--lead { border-color: var(--fg); }
.pkg.is-on { box-shadow: 0 0 0 2px var(--fg), var(--shadow-lift); transform: translateY(-2px); }
.pkg__pick { position: absolute; inset: 0; border: 0; background: transparent; border-radius: inherit; cursor: pointer; z-index: 0; }
.pkg__pick:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.pkg > *:not(.pkg__pick) { position: relative; z-index: 1; pointer-events: none; }
.pkg a { pointer-events: auto; }
.pkg__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pkg__price { font-size: 2.25rem; line-height: 1.05; letter-spacing: -0.03em; margin: 0; }
.pkg__line { margin: 0; color: var(--fg-2); font-size: var(--text-body-small); }
.pkg__inc { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: var(--text-body-small); }
.pkg__inc li { position: relative; padding-left: 22px; }
.pkg__inc li::before { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--signal-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A9D8F' stroke-width='3.5'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 9px no-repeat; }
.pkg__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pkg__chip { font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line-strong); text-decoration: none; color: var(--fg-2); background: var(--bg); }
.pkg__chip:hover { border-color: var(--fg); color: var(--fg); }
.pkg__more { font-size: var(--text-body-small); font-weight: 600; }
.pkg-plan { margin-top: 32px; }
.pkg-plan__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; align-items: baseline; margin-bottom: 12px; }
.pkg-plan__head p { margin: 0; }
.pkg-more { margin-top: 24px; color: var(--fg-2); }
.rm__dot--soft { opacity: 0.45; }
.rm__lg-dot { width: 10px !important; height: 10px !important; border-radius: 50% !important; background: var(--fg); }

.data__note { margin-top: 16px; max-width: 46rem; }

/* ---------- Handbook prototype ---------- */
.hb { display: grid; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg); }
@media (min-width: 900px) { .hb { grid-template-columns: 240px minmax(0, 1fr) 260px; min-height: 480px; } }
.hb__side { padding: 14px; background: var(--bg-elev); --fg-3: var(--fg-3-elev); border-right: 1px solid var(--line); }
.hb__search { position: relative; margin-bottom: 12px; }
.hb__search svg { position: absolute; left: 10px; top: 50%; translate: 0 -50%; width: 15px; height: 15px; color: var(--fg-3); pointer-events: none; }
.hb__search .input { width: 100%; padding-left: 32px; }
.hb__sec { font-size: var(--text-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); margin: 12px 0 4px; }
.hb__side ul { list-style: none; margin: 0; padding: 0; }
.hb__side button { width: 100%; text-align: left; border: 0; background: transparent; padding: 6px 8px; border-radius: 8px; font-size: var(--text-body-small); color: var(--fg-2); }
.hb__side button:hover { background: var(--bg); color: var(--fg); }
.hb__side button[aria-current="true"] { background: var(--bg); color: var(--fg); font-weight: 600; box-shadow: inset 2px 0 0 var(--signal); }
.hb__page { padding: 22px 24px 28px; min-width: 0; }
.hb__crumb { font-size: var(--text-caption); color: var(--fg-3); margin: 0 0 6px; }
.hb__page h3 { margin-bottom: 2px; }
.hb__body { margin-top: 14px; font-size: var(--text-body-small); line-height: 1.65; max-width: 40rem; }
.hb__body h4 { font-size: var(--text-body); margin: 16px 0 6px; }
.hb__body ol, .hb__body ul { padding-left: 20px; margin: 0 0 8px; display: grid; gap: 4px; }
.hb__rel { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.hb__rel span { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; padding: 4px 10px; border-radius: 8px; background: var(--bg-elev); }
.hb__rel svg { width: 14px; height: 14px; }
.hb__ask { padding: 16px; border-top: 1px solid var(--line); display: grid; gap: 8px; align-content: start; font-size: var(--text-body-small); }
@media (min-width: 900px) { .hb__ask { border-top: 0; border-left: 1px solid var(--line); } }
.hb__ask p { margin: 0; }
.hb__q { justify-self: end; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: var(--sel-bg); color: var(--sel-fg); }
.hb__a { padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: var(--bg-elev); }
.hb__src { display: block; margin-top: 6px; font-size: 11px; color: var(--fg-3-elev); }

/* ---------- Karbon before/after ---------- */
.kb-demo__bar { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.kb-demo__count { margin: 0; font-size: var(--text-body-small); color: var(--fg-2); }
.kb-demo__count .num { font-size: var(--text-h4); color: var(--fg); margin-right: 4px; }
.kb-grid { display: grid; gap: 8px; padding: 12px; border-radius: var(--radius-lg); background: var(--bg-elev); min-height: 300px; --fg-3: var(--fg-3-elev); }
.is-board .kb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; align-content: start; }
.is-table .kb-grid { grid-template-columns: 1fr; align-content: start; gap: 0; background: var(--bg); border: 1px solid var(--line); }
.kb-colh { grid-column: var(--col); grid-row: 1; font-size: var(--text-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); padding: 2px 4px 4px; }
.is-table .kb-colh { display: none; }
.kb-th { display: none; }
.is-table .kb-th { display: grid; grid-template-columns: 1.4fr 0.5fr 0.9fr 1.3fr; gap: 12px; padding: 8px 12px; font-size: var(--text-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); border-bottom: 1px solid var(--line-strong); }
.kb-item { font-size: 13px; background: var(--bg); border-radius: 10px; padding: 10px 12px; display: grid; gap: 4px; border: 1px solid var(--line); }
.is-board .kb-item { grid-column: var(--col); }
.is-board .kb-item__status { display: none; }
.is-table .kb-item { grid-column: 1; grid-template-columns: 1.4fr 0.5fr 0.9fr 1.3fr; gap: 12px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; align-items: center; }
.kb-item__client { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-item__form { font: 500 11px/1.6 var(--font-mono); color: var(--fg-3); }
.kb-item__status { color: var(--fg-2); }
.kb-item__due { font-size: 12px; color: var(--fg-2); }
.kb-item__due b { font-weight: 600; font-size: 11px; padding: 1px 6px; border-radius: 999px; background: var(--bad-bg); color: var(--bad); margin-left: 4px; }
.kb-after { display: none; }
.is-table .kb-before { display: none; }
.is-table .kb-after { display: inline; }
.is-board .kb-item.was-late { border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }
.is-table .kb-item.is-late { box-shadow: inset 3px 0 0 var(--bad); }
.kb-demo__why { margin-top: 12px; max-width: 48rem; }
@media (max-width: 640px) {
  .is-board .kb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .is-board .kb-item, .is-board .kb-colh { grid-column: auto; }
  .is-board .kb-colh { display: none; }
  .is-table .kb-item, .is-table .kb-th { grid-template-columns: 1.3fr 1fr; }
  .is-table .kb-item__form, .is-table .kb-item__status, .is-table .kb-th span:nth-child(2), .is-table .kb-th span:nth-child(3) { display: none; }
}

/* ---------- Starter panel extras ---------- */
.after-starter { margin-top: 36px; }
.after-starter .label { margin-bottom: 12px; }
.after-starter__grid { display: grid; gap: 12px; }
@media (min-width: 720px) { .after-starter__grid { grid-template-columns: 1fr 1fr; } }
.after-starter .plan__price { font-size: 1.75rem; }

/* onboarding demo: client-request rows */
.ob-owner[data-owner="Request"] { background: var(--signal-soft); color: var(--fg); }

/* social calendar entrance */
@media (prefers-reduced-motion: no-preference) {
  .ig-post { animation: pv-pop-once 520ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 50ms); }
}
@keyframes pv-pop-once { from { opacity: 0; transform: translateY(8px); } }
.panel__scroll:focus { outline: none; }
.pv { grid-template-columns: minmax(0, 1fr); } .pv > * { min-width: 0; }
.pv__grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .pv__grid { grid-template-columns: minmax(0, 1fr) 320px; } }
.pv__main, .pv__side, .pv__main > * { min-width: 0; }
.mp { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .mp { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.mp > * { min-width: 0; }
.mp__outh { flex-wrap: wrap; }

.mnav-wrap { display: none; }
@media (max-width: 819px) { .mnav-wrap { display: block; } }
.mnav .chip { min-height: 32px; font-size: 13px; text-decoration: none; flex: none; }