/* Readable brand text (WCAG AA 4.5:1 for small text).
   The brand indigo (#3f5ec2) stays for buttons, borders and large shapes.
   On the black background, small indigo text was approximately 3.7:1, so
   text uses a lighter indigo there (approximately 7:1). Light sections keep
   the original indigo, which already reads well on white. */
html.dark {
    --brand-text: oklch(0.72 0.12 267);
}

html.dark .section--light,
html.dark .philosophy,
html.dark .pricing-industries,
html.dark .edu-workflow,
html.dark .industry-workflow,
html.dark .industry-outcomes,
html.dark .product-architecture,
html.dark .product-industries,
html.dark .hc-workflow,
html.dark .re-workflow {
    --brand-text: var(--brand-primary);
}

/* Mock-up screens use sample data: say so. */
.sample-data-tag {
    display: inline-block;
    margin-top: 10px;
    padding: 2px 8px;
    border: 1px solid var(--border, #26303a);
    border-radius: 999px;
    color: var(--text-secondary, #9ca7b4);
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    letter-spacing: .04em;
}

/* Hero mock-ups: a small corner badge (no layout change). */
.dashboard,
.re-dashboard,
.edu-dashboard,
.hc-dashboard,
.industry-dashboard {
    position: relative;
}

.dashboard::after,
.re-dashboard::after,
.edu-dashboard::after,
.hc-dashboard::after,
.industry-dashboard::after {
    content: "Sample data";
    position: absolute;
    right: 14px;
    bottom: 10px;
    padding: 2px 8px;
    border: 1px solid var(--border, #26303a);
    border-radius: 999px;
    background: rgba(0, 0, 0, .55);
    color: #b5bfcb;
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    letter-spacing: .05em;
    pointer-events: none;
}

/* Features that are not in the product yet. */
.coming-soon-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: oklch(0.72 0.12 267 / .16);
    color: oklch(0.85 0.08 267);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    vertical-align: middle;
}

/* Comfortable tap targets for footer links on phones. */
@media (max-width: 640px) {
    .footer a {
        display: inline-block;
        padding-block: 8px;
    }
}

/* "Live in Sugarcoat today": only features that exist in the product now */
.live-today { padding: 72px 0; border-top: 1px solid var(--border, #e4e4e4); }
.live-today h2 { margin: 8px 0 12px; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15; }
.live-today__intro { max-width: 60ch; color: var(--muted-foreground, #525252); margin: 0 0 28px; }
.live-today__grid { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.live-today__grid li { display: flex; flex-direction: column; gap: 4px; padding: 16px;
  border: 1px solid var(--border, #e4e4e4); border-radius: 12px; background: var(--card, #fff); }
.live-today__grid strong { font-weight: 600; }
.live-today__grid span { color: var(--muted-foreground, #525252); font-size: 0.95rem; line-height: 1.45; }
.live-today__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.live-today__note { color: var(--muted-foreground, #525252); font-size: 0.9rem; }
html.dark .live-today__grid li { background: var(--card, #181818); border-color: var(--border, #242424); }
html.dark .live-today__intro, html.dark .live-today__grid span, html.dark .live-today__note { color: #a4a4a4; }
@media (max-width: 640px) { .live-today { padding: 48px 0; } }