/* Scoped ManaOS Canvas product mockup (homepage). Generic class names
   (.card/.panel/.tag/.eyebrow…) are namespaced under .canvas-mock to avoid
   colliding with site classes. Ported from canvas-screen-mockup.html. */
.canvas-mock { --paper:   #F7F5F1;
    --paper-2: #F2F0EA;
    --card:    #FFFFFF;
    --fg1:     #171225;
    --fg2:     #4C4660;
    --fg3:     #8A8499;
    --hairline:#E4E0D8;
    --orange:  #FF5A1E;
    --shadow-sm: 0 1px 2px rgba(23,18,37,.04), 0 2px 6px rgba(23,18,37,.04);

    --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
    --font-sans:    'Hanken Grotesk', system-ui, sans-serif;
    --font-mono:    'IBM Plex Mono', ui-monospace, monospace; }
.canvas-mock *, .canvas-mock *::before, .canvas-mock *::after { box-sizing: border-box; }
.canvas-mock { width: 100%; background: var(--paper);
    font-family: var(--font-sans);
    color: var(--fg1);
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision; }
.canvas-mock .frame { padding: 28px 36px 0; }
.canvas-mock /* ---- top bar ---- */
  .top { display: flex; align-items: flex-start; justify-content: space-between;
    gap: 24px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--hairline); }
.canvas-mock .brand { display: flex; align-items: center; gap: 16px; }
.canvas-mock .brand__mark { height: 44px; width: auto; display: block; }
.canvas-mock .brand__sub { font-family: var(--font-sans);
    font-size: 13px;
    color: var(--fg3);
    padding-left: 14px;
    border-left: 1px solid var(--hairline);
    line-height: 1.3; }
.canvas-mock .actions { display: flex; align-items: center; gap: 10px; padding-top: 4px; flex-shrink: 0; white-space: nowrap; }
.canvas-mock .actions .pill, .canvas-mock .actions .btn-primary { white-space: nowrap; flex-shrink: 0; }
.canvas-mock .panel__head, .canvas-mock .panel__title-wrap, .canvas-mock .panel__actions { white-space: nowrap; flex-shrink: 0; }
.canvas-mock .top { flex-wrap: nowrap; }
.canvas-mock .pill { display: inline-flex; align-items: center; gap: 8px;
    height: 34px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid var(--hairline);
    background: var(--card);
    font-size: 13px;
    color: var(--fg2);
    font-weight: 500; }
.canvas-mock .pill__count { color: var(--fg3); margin-left: 2px; }
.canvas-mock .pill__icon { width: 14px; height: 14px; display: inline-block; }
.canvas-mock .btn-primary { height: 34px;
    padding: 0 16px;
    border-radius: 8px;
    background: var(--orange);
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 13px;
    border: none;
    display: inline-flex; align-items: center; gap: 6px;
    box-shadow: 0 6px 16px rgba(255,90,30,.28); }
.canvas-mock .moon { width: 34px; height: 34px;
    border-radius: 8px;
    background: var(--paper-2);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--fg3);
    font-size: 14px; }
.canvas-mock /* ---- cards grid ---- */
  .cards { display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 22px; }
.canvas-mock .card { background: var(--paper-2);
    border: 1px solid var(--hairline);
    border-radius: 12px;
    padding: 14px 16px 16px;
    min-height: 112px;
    display: flex; flex-direction: column; justify-content: space-between;
    position: relative; }
.canvas-mock .card__icon { width: 30px; height: 30px;
    border-radius: 8px;
    background: #FCE3D7;
    display: inline-flex; align-items: center; justify-content: center;
    color: #C76A3F;
    font-size: 14px; }
.canvas-mock .card__arrow { position: absolute; top: 18px; right: 18px;
    color: var(--fg3); font-size: 14px; }
.canvas-mock .card__title { font-family: var(--font-display);
    font-weight: 700;
    font-size: 14.5px;
    line-height: 1.25;
    letter-spacing: -.012em;
    color: var(--fg1);
    margin: 16px 0 0;
    text-wrap: balance; }
.canvas-mock .card__date { margin-top: 12px;
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--fg3);
    display: inline-flex; align-items: center; gap: 5px; }
.canvas-mock .card__date::before { content: "📅";
    font-size: 11px;
    filter: grayscale(.2); }
.canvas-mock /* ---- section break ---- */
  .eyebrow { margin-top: 30px;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: .28em;
    color: var(--fg3);
    text-transform: uppercase; }
.canvas-mock /* ---- inside-board panel ---- */
  .panel { margin-top: 14px;
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    overflow: hidden; }
.canvas-mock .panel__head { display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--hairline);
    background: var(--paper-2); }
.canvas-mock .panel__title-wrap { display: flex; align-items: center; gap: 12px; }
.canvas-mock .panel__mark { height: 22px; width: auto; display: block; }
.canvas-mock .panel__title { font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -.01em;
    color: var(--fg1); }
.canvas-mock .panel__meta { font-family: var(--font-sans);
    font-size: 12px;
    color: var(--fg3);
    margin-left: 6px; }
.canvas-mock .panel__actions { display: flex; gap: 8px; }
.canvas-mock .ghost-btn { height: 28px; padding: 0 12px;
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: 7px;
    font-size: 12px; font-weight: 500;
    color: var(--fg1);
    display: inline-flex; align-items: center; }
.canvas-mock .add-btn { height: 28px; padding: 0 12px;
    background: var(--orange);
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 12px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 5px; }
.canvas-mock .panel__body { padding: 18px 22px 22px; }
.canvas-mock .tag { display: inline-block;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--fg2);
    background: var(--paper-2);
    border: 1px solid var(--hairline);
    padding: 4px 10px;
    border-radius: 5px; }
.canvas-mock .panel__h { font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -.018em;
    line-height: 1.2;
    color: var(--fg1);
    margin: 14px 0 0;
    text-wrap: balance; }