/* Generated homepage critical path. Canonical full rules remain in the source stylesheets. */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/onest-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* mkt-foundation.css */
:root {
  --accent: #3d3d3d;
  --accent-600: #4d4d4d;
  --accent-700: #272727;
  --accent-fg: #fff;
  --accent-soft: #efeff0;
  --accent-soft-strong: #e3e3e5;
  --bg: #fdfcfc;
  --bg-sidebar: #f5f5f5;
  --bg-sunken: #f3f2f1;
  --bg-hover: rgba(31, 36, 29, 0.045);
  --bg-active: rgba(31, 36, 29, 0.07);
  --surface: #fff;
  --surface-2: #fbfafa;
  --overlay: #fff;
  --ink: #1e231c;
  --ink-2: #565d50;
  --ink-3: #7e776a;
  --ink-4: #a39b8b;
  --border: rgba(31, 36, 29, 0.11);
  --border-strong: rgba(31, 36, 29, 0.17);
  --border-subtle: rgba(31, 36, 29, 0.06);
  --shadow-xs: 0 1px 0 rgba(31, 36, 29, 0.03);
  --shadow-sm: 0 1px 2px rgba(31, 36, 29, 0.05), 0 1px 0 rgba(31, 36, 29, 0.03);
  --shadow-md: 0 6px 18px rgba(31, 36, 29, 0.06), 0 1px 3px rgba(31, 36, 29, 0.05);
  --shadow-lg: 0 18px 44px rgba(31, 36, 29, 0.12), 0 3px 10px rgba(31, 36, 29, 0.06);
  --shadow-pop: 0 30px 70px rgba(31, 36, 29, 0.20), 0 6px 16px rgba(31, 36, 29, 0.10);
  --r-xs: 7px;
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-pill: 9999px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --t-fast: 120ms;
  --t-med: 200ms;
  --t-slow: 300ms;
  --t-drawer: 420ms;
  --ease: cubic-bezier(.32, .72, 0, 1);
  --font-app: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: var(--font-app);
  --font-title: var(--font-app);
  --font-ui: var(--font-app);
  --font-sans: var(--font-app);
  --font-mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --fs-body: 14px;
}
[data-accent="pine"] {
  --accent: #21564a;
  --accent-600: #286659;
  --accent-700: #173e35;
  --accent-fg: #f1f6f3;
  --accent-soft: #e0ebe7;
  --accent-soft-strong: #cee0da;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.5;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button, input, textarea, select { color: inherit; font-family: inherit; }
button { cursor: pointer; }

/* mkt.css */
html.mkt { overflow: auto !important; height: auto !important; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
.mkt body { overflow: auto !important; height: auto !important; background: var(--bg); color: var(--ink); line-height: 1.5; }
.mkt a { color: inherit; text-decoration: none; }
.mkt ::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.mkt {
  --mk-maxw: 1180px;
  --mk-maxw-wide: 1320px;
  --mk-maxw-prose: 720px;
  --mk-gutter: clamp(20px, 5vw, 40px);
  --mk-section-y: clamp(76px, 9vw, 132px);
  --mk-section-y-tight: clamp(48px, 6vw, 84px);
  --mk-dark-bg: #141417;       /* deep neutral for immersive bands */
  --mk-dark-bg-2: #0f0f12;
}
.mk-container { width: 100%; max-width: var(--mk-maxw); margin-inline: auto; padding-inline: var(--mk-gutter); }
.mk-display {
  font-weight: 500; letter-spacing: -0.035em; line-height: 1.0;
  font-size: clamp(44px, 6.6vw, 84px); margin: 0; color: var(--ink);
  text-wrap: balance;
}
.mk-lede { font-size: clamp(17px, 1.45vw, 21px); line-height: 1.55; color: var(--ink-2); margin: 0; max-width: 62ch; font-weight: 400; }
.mk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 22px; border-radius: 12px;
  font-family: inherit; font-size: 15px; font-weight: 560; letter-spacing: -0.01em;
  border: 1px solid transparent; background: transparent; color: var(--ink);
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.mk-btn.primary { background: var(--accent); color: var(--accent-fg); box-shadow: var(--shadow-sm); }
.mk-btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.mk-nav { position: sticky; top: 0; z-index: 80; }
.mk-nav-bar {
  height: 66px; display: flex; align-items: center; gap: 18px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-med) var(--ease), background var(--t-med) var(--ease);
}
.mk-nav-inner { width: 100%; max-width: var(--mk-maxw-wide); margin-inline: auto; padding-inline: var(--mk-gutter); display: flex; align-items: center; gap: 14px; }
.mk-logo { display: inline-flex; align-items: center; gap: 10px; user-select: none; flex-shrink: 0; }
.mk-logo .mark { width: 26px; height: 26px; color: #739837; }
.mk-logo .word { font-size: 21px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); }
.mk-nav-links { display: flex; align-items: center; gap: 2px; margin-left: 10px; }
.mk-nav-link {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 13px;
  border: 0; background: none; border-radius: 9px; cursor: pointer; user-select: none;
  font-family: inherit; font-size: 14.5px; font-weight: 500; color: var(--ink-2);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.mk-nav-spacer { flex: 1; }
.mk-nav-cta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mk-nav-signin { font-size: 14.5px; font-weight: 500; color: var(--ink-2); padding: 0 8px; }
.mk-drawer { position: fixed; inset: 0; z-index: 120; display: none; }
@media (max-width: 940px) {
  .mk-nav-links { display: none; }
  .mk-nav-cta .mk-nav-signin, .mk-nav-cta .mk-btn:not(.primary) { display: none; }
  /* More lives in the bottom tab bar; keep a quiet logo + primary CTA up top */
  .mk-burger { display: none; }
  .mk-nav-bar {
    height: auto;
    min-height: 56px;
    padding-top: env(safe-area-inset-top, 0px);
  }
  .mk-nav-inner { height: 56px; gap: 10px; }
  .mk-logo .mark { width: 22px; height: 22px; }
  .mk-logo .word { font-size: 18px; }
  .mk-nav-cta .mk-btn.primary.sm { height: 34px; padding: 0 13px; font-size: 13px; border-radius: 9px; }

  /* App-style bottom sheet instead of a side drawer */
  .mk-drawer-panel {
    top: auto; left: 0; right: 0; bottom: 0;
    height: min(86vh, 680px); width: 100%;
    border-left: 0; border-top: 1px solid var(--border);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -24px 64px -20px rgba(31, 36, 29, .28);
    transform: translateY(110%);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mk-drawer[data-open="true"] .mk-drawer-panel { transform: none; }
  .mk-drawer-head {
    display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px;
    height: auto; min-height: 58px; padding-top: 14px; padding-bottom: 12px;
    border-bottom-color: var(--border-subtle);
    touch-action: none; cursor: grab;
  }
  .mk-drawer-head:active { cursor: grabbing; }
  .mk-drawer-head::before {
    content: ""; grid-column: 1 / -1; justify-self: center;
    width: 36px; height: 4px; margin-bottom: 2px;
    border-radius: 999px; background: var(--border-strong); opacity: .7;
  }
  .mk-drawer-body { padding: 8px 14px calc(18px + env(safe-area-inset-bottom, 0px)); }
}
.mk-reveal { opacity: 0; transform: translateY(18px); transition: opacity .72s var(--ease), transform .72s var(--ease); transition-delay: var(--d, 0ms); will-change: opacity, transform; }
.mk-reveal-scale { opacity: 0; transform: translateY(22px) scale(.985); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); }
@media (max-width: 940px) {
  .mk-dock { display: block; }
  .mkt body {
    padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    -webkit-tap-highlight-color: transparent;
  }
  html.mkt {
    --mk-gutter: clamp(16px, 4.5vw, 28px);
    --mk-section-y: clamp(52px, 8vw, 96px);
    --mk-section-y-tight: clamp(36px, 5vw, 64px);
  }
  .mkt body { overscroll-behavior-y: contain; }
  .mk-display { font-size: clamp(34px, 9.2vw, 48px); letter-spacing: -0.032em; line-height: 1.05; }
  .mk-h1 { font-size: clamp(30px, 8vw, 42px); }
  .mk-h2 { font-size: clamp(24px, 6.4vw, 34px); }
  .mk-lede { font-size: 16.5px; line-height: 1.55; }
  .mk-btn-row { width: 100%; }
  .mk-btn-row > .mk-btn.lg,
  .mk-btn-row > .mk-btn:not(.sm):not(.link):not(.ghost) {
    flex: 1 1 100%; min-height: 48px;
  }
  .mk-head.center .mk-btn-row { justify-content: stretch; }
  .mk-cta .mk-btn-row > .mk-btn { flex: 1 1 100%; }
  .mk-shot { border-radius: var(--r-lg); }
  .mk-shot-bar { height: 32px; padding: 0 10px; }
  .mk-shot-url { max-width: none; font-size: 10px; }
  .mk-hero-pills { gap: 8px; margin-top: 20px; }
  .mk-hero-pill { height: 30px; padding: 0 11px; font-size: 12px; }
  .mk-footer { padding-block: 48px calc(28px + env(safe-area-inset-bottom, 0px)); }
  .mk-table-wrap {
    margin-inline: calc(var(--mk-gutter) * -0.35);
    border-radius: 0; border-left: 0; border-right: 0;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
  .mk-table-wrap::after {
    content: ""; position: sticky; right: 0; top: 0; float: right;
    width: 28px; height: 0; pointer-events: none;
  }
  /* sticky first column on comparison / pricing matrices */
  .mk-table th:first-child, .mk-table td:first-child,
  .pr-matrix th:first-child, .pr-matrix td:first-child {
    position: sticky; left: 0; z-index: 1;
    background: var(--surface); box-shadow: 1px 0 0 var(--border-subtle);
  }
  .mk-table thead th:first-child,
  .pr-matrix thead th:first-child { background: var(--surface-2); z-index: 2; }
  .pr-matrix-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--mk-gutter) * -0.35);
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  }
  .pr-matrix { min-width: 560px; }
  .pr-toggle-wrap {
    flex-wrap: wrap; gap: 10px; justify-content: center !important;
  }
}
:root {
  --sh-sans: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --sh-mono: var(--font-mono, 'Space Mono', ui-monospace, SFMono-Regular, monospace);

  --sh-paper:      var(--bg, #fdfdfd);
  --sh-surface:    var(--surface, #ffffff);
  --sh-sunken:     var(--bg-sunken, #f7f7f8);
  --sh-ink:        var(--ink, #202124);
  --sh-ink-2:      var(--ink-2, #5f6368);
  --sh-ink-3:      var(--ink-3, #7b8087);
  --sh-ink-4:      var(--ink-4, #9aa0a6);
  --sh-line:       var(--border, rgba(32, 33, 36, .11));
  --sh-line-soft:  var(--border-subtle, rgba(32, 33, 36, .06));
  --sh-line-firm:  var(--border-strong, rgba(32, 33, 36, .18));
  --sh-hover:      var(--bg-hover, rgba(32, 33, 36, .045));
  --sh-accent:     var(--accent, #3d3d3d);
  --sh-leaf:       #739837;

  /* rhythm — matched to mkt.css so both halves of the site align */
  --sh-maxw: 1180px;
  --sh-maxw-wide: 1320px;
  --sh-maxw-prose: 720px;
  --sh-gutter: clamp(20px, 5vw, 40px);
  --sh-section: clamp(76px, 9vw, 132px);
  --sh-section-tight: clamp(48px, 6vw, 84px);

  --sh-r-sm: 9px;
  --sh-r-md: 12px;
  --sh-r-lg: 16px;
  --sh-r-pill: 999px;

  --sh-ease: var(--ease, cubic-bezier(.32, .72, 0, 1));
  --sh-t-fast: var(--t-fast, .16s);
  --sh-t-med: var(--t-med, .26s);

  --sh-nav-h: 68px;

  /* The marketing site runs on Onest, deterministically.
     stelaah.css declares --font-app: 'Aptos', 'Onest', ... because the
     product UI prefers Aptos where it is installed. That is fine inside the
     app, but on the marketing site it means a visitor with Microsoft Office
     installed sees Aptos on the home page and Onest on every SEO page, while
     a visitor without it sees Onest everywhere. Same site, two typefaces,
     depending on the reader's machine.

     These four lines only ever land on marketing pages, because this file is
     inlined into marketing stylesheets and never into the app bundle. */
  --font-app: var(--sh-sans);
  --font-serif: var(--sh-sans);
  --font-title: var(--sh-sans);
  --font-ui: var(--sh-sans);
}
:root {
  --g-serif: var(--sh-sans) !important;
  --font-serif: var(--sh-sans) !important;
  /* guides/index.html also carries its own palette in that inline <style>:
     a green black ink and an olive eyebrow, where every other page is
     neutral graphite. Same importance trick, same reason. */
  --g-forest: var(--sh-ink) !important;
  --g-muted:  var(--sh-ink-2) !important;
  --g-rule:   var(--sh-line) !important;
  --g-moss:   var(--sh-ink-4) !important;
}
h1, h2, h3, h4, h5, h6,
.mk-display, .sh-display, .hc-h1 { font-family: var(--sh-sans) !important; }
.mk-nav { position: sticky; top: 0; z-index: 80; }
.mk-nav-bar {
  position: relative;
  min-height: var(--sh-nav-h);
  display: flex; align-items: center;
  border-bottom: 1px solid transparent;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: border-color var(--sh-t-med) var(--sh-ease);
}
.mk-nav-bar::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--sh-paper) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  transition: background var(--sh-t-med) var(--sh-ease);
}
.mk-nav-inner {
  width: 100%; max-width: var(--sh-maxw-wide); margin-inline: auto;
  padding-inline: var(--sh-gutter);
  display: flex; align-items: center; gap: 14px;
}
.mk-logo { display: inline-flex; align-items: center; gap: 10px; user-select: none; flex-shrink: 0; text-decoration: none; }
.mk-logo .mark { width: 26px; height: 26px; color: var(--sh-leaf); flex: none; }
.mk-logo .word { font-family: var(--sh-sans); font-size: 21px; font-weight: 600; letter-spacing: -.03em; color: var(--sh-ink); text-transform: none; }
.mk-nav-links { display: flex; align-items: center; gap: 2px; margin-left: 10px; }
.mk-nav-link {
  display: inline-flex; align-items: center; gap: 5px;
  height: 36px; padding: 0 11px; border: 0; background: none; cursor: pointer;
  border-radius: var(--sh-r-sm);
  font-family: var(--sh-sans); font-size: 15px; font-weight: 500;
  letter-spacing: -.011em; color: var(--sh-ink-2); text-decoration: none;
  transition: color var(--sh-t-fast) var(--sh-ease), background var(--sh-t-fast) var(--sh-ease);
}
.mk-nav-spacer { flex: 1; }
.mk-nav-cta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mk-nav-signin {
  font-family: var(--sh-sans); font-size: 14.5px; font-weight: 500;
  color: var(--sh-ink-2); padding: 0 8px; text-decoration: none;
  transition: color var(--sh-t-fast) var(--sh-ease);
}
.mk-nav-cta .mk-btn,
.sh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 17px;
  border: 1px solid var(--sh-ink); border-radius: var(--sh-r-pill);
  background: var(--sh-ink); color: var(--sh-paper);
  font-family: var(--sh-sans); font-size: 14.5px; font-weight: 600; letter-spacing: -.011em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform var(--sh-t-fast) var(--sh-ease), opacity var(--sh-t-fast) var(--sh-ease);
}
.mk-nav-toggle {
  display: none; width: 38px; height: 38px; flex: none;
  align-items: center; justify-content: center;
  border: 0; background: none; cursor: pointer; border-radius: var(--sh-r-sm);
  color: var(--sh-ink);
}
.mk-nav-toggle svg { width: 20px; height: 20px; }
@media (max-width: 940px) {
  .mk-nav-links, .mk-nav-signin { display: none; }
  .mk-nav-toggle { display: inline-flex; }
  .mk-nav-spacer { flex: 1; }
}

/* mkt-bento.css */
.mk-scrollbar { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 200; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #fff)); will-change: transform; }
@media (max-width: 560px) {
  .mk-bento { grid-template-columns: 1fr; }
  .b-2x2, .b-2x1, .b-1x2 { grid-column: auto; }
  .b-card { min-height: 0; padding: 18px 16px; }
  .mk-hero-pills { justify-content: flex-start; }
  .mk-scrollbar { top: env(safe-area-inset-top, 0px); }
}

/* connected-core.css */
html.mkt {
  /* ---- connected palette (single source; home-connected.css reads these) ---- */
  --hc-bg: #ffffff;
  --hc-bg-soft: #f8f8f5;
  --hc-bg-cta: #f5f6f0;
  --hc-ink: #14161a;
  --hc-ink-2: #5d646e;
  --hc-ink-3: #8a919b;
  --hc-line: #e9e9e4;
  --hc-line-soft: #f1f1ec;
  --hc-green: #4e7d45;
  --hc-green-deep: #3f6a38;
  --hc-leaf: #79a552;
  --hc-green-soft: #eef3e6;
  --hc-green-dot: #6fa544;
  --hc-black: #101214;
  --hc-black-hover: #23262b;
  --hc-r-card: 16px;
  --hc-r-btn: 11px;
  --hc-sh-xs: 0 1px 2px rgba(20, 22, 26, 0.05);
  --hc-sh-card: 0 1px 2px rgba(20, 22, 26, 0.04), 0 16px 40px -20px rgba(20, 22, 26, 0.12);
  --hc-sh-app: 0 2px 6px rgba(20, 22, 26, 0.05), 0 40px 80px -32px rgba(20, 22, 26, 0.22);
  --hc-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --hc-spring: cubic-bezier(0.34, 1.45, 0.5, 1);

  /* ---- retune the shared marketing tokens onto that palette ---- */
  --bg: var(--hc-bg);
  --bg-sunken: var(--hc-bg-soft);
  --surface: #ffffff;
  --border: var(--hc-line);
  --border-subtle: var(--hc-line-soft);
  --border-strong: #dcdcd5;
  --ink: var(--hc-ink);
  --ink-2: var(--hc-ink-2);
  --ink-3: var(--hc-ink-3);
  --ink-4: #a8aeb6;
  --mk-dark-bg: var(--hc-black);
  --mk-dark-bg-2: #0b0d0e;
}
.mkt body { background: var(--hc-bg); }
.mkt .mk-nav-bar { background: color-mix(in srgb, #ffffff 92%, transparent); border-bottom: 1px solid transparent; }
.mkt .mk-logo .mark { color: var(--hc-leaf); }
.mkt .mk-nav-link { color: var(--hc-ink); font-weight: 520; }
.mkt .mk-nav-signin { color: var(--hc-ink); font-weight: 520; }
.mkt .mk-btn.primary { background: var(--hc-black); color: #fff; box-shadow: var(--hc-sh-xs); border-color: transparent; }
.mkt .mk-display { letter-spacing: -0.033em; font-weight: 650; color: var(--hc-ink); }
.mkt .mk-lede { color: var(--hc-ink-2); }
.hc-ic { display: inline-flex; flex: none; }
.hc-ic svg { width: 100%; height: 100%; display: block; }
.hc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 48px; padding: 0 22px; border-radius: var(--hc-r-btn);
  font-size: 15px; font-weight: 560; letter-spacing: -0.005em; cursor: pointer;
  border: 1px solid transparent; text-decoration: none;
  transition: transform 0.24s var(--hc-ease), box-shadow 0.24s var(--hc-ease),
    background 0.24s var(--hc-ease), border-color 0.24s var(--hc-ease), color 0.24s var(--hc-ease);
}
.hc-btn.dark { background: var(--hc-black); color: #fff; box-shadow: var(--hc-sh-xs); }
.hc-btn.lite { background: #fff; color: var(--hc-ink); border-color: var(--hc-line); box-shadow: var(--hc-sh-xs); }
.hc-btn .hc-arr { width: 15px; height: 15px; transition: transform 0.24s var(--hc-ease); }
.hc-btn .hc-play { width: 14px; height: 14px; color: var(--hc-ink); transition: color 0.24s var(--hc-ease), transform 0.24s var(--hc-ease); }

/* home-connected.css */
.hc-hero { padding: clamp(36px, 5vw, 64px) 0 clamp(56px, 6.5vw, 88px); overflow: hidden; }
.hc-hero-grid {
  display: grid; grid-template-columns: minmax(0, 0.58fr) minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 56px); align-items: center;
}
.hc-hero-copy { max-width: 500px; }
.hc-hero .mk-display.hc-h1 {
  margin: 22px 0 0; text-align: left;
  font-size: clamp(34px, 3.35vw, 47px); line-height: 1.08; font-weight: 650;
  letter-spacing: -0.033em; color: var(--hc-ink); max-width: none;
}
.hc-hero .mk-display.hc-h1.lead { margin-top: 0; }
.hc-hero .mk-lede {
  margin: 20px 0 0; text-align: left; font-size: clamp(15.5px, 1.3vw, 17.5px);
  line-height: 1.62; color: var(--hc-ink-2); max-width: 46ch; font-weight: 400;
}
.hc-line { display: block; overflow: hidden; }
.hc-line > span { display: block; }
.hc-hero .mk-btn-row { margin-top: 30px; gap: 12px; }
.hc-reassure { margin: 18px 0 0; font-size: 13px; color: var(--hc-ink-3); letter-spacing: 0.002em; }
.hc-reassure b { font-weight: 500; color: var(--hc-ink-3); }
.hc-stage {
  position: relative; perspective: 1600px;
  /* bleed toward the right viewport edge on wide screens */
  margin-right: clamp(-240px, calc((var(--mk-maxw) - 100vw) / 2 + 16px), 0px);
}
.hw {
  position: relative; border-radius: 18px; background: #fff;
  border: 1px solid var(--hc-line); box-shadow: var(--hc-sh-app);
  overflow: hidden; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.55s var(--hc-ease); will-change: transform;
  font-size: 11px; color: var(--hc-ink); user-select: none;
}
.hw * { box-sizing: border-box; }
.hw-top { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--hc-line-soft); }
.hw-search {
  flex: 1; max-width: 320px; display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 9px;
  border-radius: 8px; border: 1px solid var(--hc-line); background: #fbfbf9; color: var(--hc-ink-3); font-size: 10.5px;
}
.hw-search .hc-ic { width: 11px; height: 11px; }
.hw-caret { width: 1px; height: 11px; background: var(--hc-ink-3); margin-left: -3px; }
.hw-key { margin-left: auto; height: 15px; padding: 0 4px; border-radius: 4px; border: 1px solid var(--hc-line); background: #fff; font-size: 8.5px; display: inline-flex; align-items: center; font-weight: 550; }
.hc-av {
  display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%;
  color: #34413b; background: #e8eee7; font-style: normal; font-weight: 650; line-height: 1; letter-spacing: -0.015em;
}
.hc-av.a1 { color: #32543a; background: #e2ebdf; }
.hc-av.a2 { color: #385473; background: #e3ebf4; }
.hc-av.a3 { color: #725039; background: #f1e6d9; }
.hc-av.a4 { color: #594c73; background: #e9e4f1; }
.hw-tools { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
.hw-face { display: inline-flex; align-items: center; padding-left: 2px; }
.hw-face .hc-av { width: 22px; height: 22px; font-size: 7.5px; border: 2px solid #fff; box-shadow: 0 1px 2px rgba(20,22,26,0.12); }
.hw-face .hc-av + .hc-av, .hw-face .hw-face-n { margin-left: -8px; }
.hw-face-n {
  width: 22px; height: 22px; border-radius: 50%; background: #f0f1ed; border: 2px solid #fff;
  box-shadow: 0 1px 2px rgba(20,22,26,0.1); font-size: 7.5px; font-weight: 650; color: var(--hc-ink-2);
  display: inline-flex; align-items: center; justify-content: center; font-style: normal;
}
.hw-topic {
  position: relative; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid transparent; color: #6f757e; background: #fafaf7;
}
.hw-topic .hc-ic { width: 13px; height: 13px; }
.hw-dot-n {
  position: absolute; top: -3px; right: -3px; min-width: 14px; height: 14px; padding: 0 3px; border: 2px solid #fff;
  border-radius: 999px; background: #c2504a; color: #fff; font-size: 7px; font-weight: 680;
  display: inline-flex; align-items: center; justify-content: center; font-style: normal; line-height: 1;
}
.hw-acct {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 4px;
  border-radius: 999px; border: 1px solid var(--hc-line); background: #fff; box-shadow: 0 1px 2px rgba(20,22,26,0.04);
  color: var(--hc-ink); font-size: 10px; font-weight: 590; white-space: nowrap;
}
.hw-acct .hc-av { width: 22px; height: 22px; font-size: 7.5px; box-shadow: inset 0 0 0 1px rgba(50,84,58,0.06); }
.hw-acct .hc-ic { width: 9px; height: 9px; margin-left: 1px; color: var(--hc-ink-3); }
.hw-frame { display: grid; grid-template-columns: 168px minmax(0, 1fr); min-height: 470px; }
.hw-sb { background: #fcfcfa; border-right: 1px solid var(--hc-line-soft); padding: 10px 9px 12px; display: flex; flex-direction: column; gap: 1px; }
.hw-ws { display: flex; align-items: center; gap: 7px; padding: 5px 6px 10px; }
.hw-ws-mark { width: 15px; height: 15px; color: var(--hc-leaf); }
.hw-ws-tx b { display: block; font-size: 10.5px; font-weight: 620; letter-spacing: -0.01em; line-height: 1.2; }
.hw-ws-tx span { display: block; font-size: 8.5px; color: var(--hc-ink-3); }
.hw-ws-chev { width: 9px; height: 9px; margin-left: auto; color: #b0b5bc; }
.hw-sb-label { margin: 8px 0 2px; padding: 0 7px; font-size: 8.5px; font-weight: 620; letter-spacing: 0.08em; text-transform: uppercase; color: #a2a8b0; }
.hw-sb-item {
  display: flex; align-items: center; gap: 7px; height: 25px; padding: 0 7px;
  border-radius: 7px; color: #4d545e; font-weight: 490; font-size: 10.5px;
  transition: background 0.18s var(--hc-ease), color 0.18s var(--hc-ease);
}
.hw-sb-item .hc-ic { width: 12px; height: 12px; color: #8b929c; transition: color 0.18s var(--hc-ease); }
.hw-sb-item.on { background: #eef0ea; color: var(--hc-ink); font-weight: 570; }
.hw-sb-item.on .hc-ic { color: var(--hc-green); }
.hw-badge { margin-left: auto; min-width: 15px; height: 13px; padding: 0 4px; border-radius: 999px; background: var(--hc-green-soft); color: var(--hc-green-deep); font-size: 8.5px; font-weight: 630; display: inline-flex; align-items: center; justify-content: center; }
.hw-main { display: flex; flex-direction: column; min-width: 0; background: #fff; }
.hw-tabs { display: flex; align-items: center; gap: 2px; padding: 7px 12px 0; border-bottom: 1px solid var(--hc-line-soft); }
.hw-tab {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border-radius: 8px 8px 0 0; font-size: 10px; font-weight: 520; color: var(--hc-ink-2);
}
.hw-tab .hc-ic { width: 10.5px; height: 10.5px; color: #99a0a8; }
.hw-tab.on { background: #fff; border: 1px solid var(--hc-line-soft); border-bottom-color: #fff; margin-bottom: -1px; font-weight: 590; color: var(--hc-ink); }
.hw-tab.on .hc-ic { color: var(--hc-green); }
.hw-tab-x { margin-left: 2px; color: var(--hc-ink-3); font-size: 10px; }
.hw-tab-plus { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; color: var(--hc-ink-3); font-size: 12px; }
.hw-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 12px 14px 10px; }
.hw-title strong { display: block; margin: 0; font-family: var(--font-serif); font-size: 19px; font-weight: 520; letter-spacing: -0.02em; }
.hw-title span { display: block; margin-top: 2px; font-size: 9.5px; color: var(--hc-ink-3); }
.hw-head-r { display: flex; align-items: center; gap: 8px; }
.hw-views { display: inline-flex; height: 26px; padding: 2px; border-radius: 8px; background: #f2f2ee; }
.hw-views i {
  display: inline-flex; align-items: center; padding: 0 10px; border-radius: 6px; font-size: 9.5px; font-weight: 560;
  color: var(--hc-ink-2); cursor: pointer; font-style: normal; transition: background 0.2s var(--hc-ease), color 0.2s var(--hc-ease), box-shadow 0.2s var(--hc-ease);
}
.hw-views i.on { background: #fff; color: var(--hc-ink); box-shadow: var(--hc-sh-xs); }
.hw-new { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; border-radius: 8px; background: var(--hc-black); color: #fff; font-size: 9.5px; font-weight: 570; transition: background 0.2s var(--hc-ease), transform 0.2s var(--hc-ease); }
.hw-new .hc-ic { width: 10px; height: 10px; }
.hw-body { position: relative; flex: 1; min-height: 0; }
.hw-board { position: absolute; inset: 0; display: flex; gap: 9px; padding: 4px 14px 14px; opacity: 0; visibility: hidden; transition: opacity 0.32s var(--hc-ease); }
.hw-board.on { position: relative; opacity: 1; visibility: visible; }
.hw-col { flex: 1 1 0; min-width: 0; border-radius: 12px; background: #fafaf8; border: 1px solid var(--hc-line-soft); padding: 8px; display: flex; flex-direction: column; transition: background 0.2s var(--hc-ease), border-color 0.2s var(--hc-ease); }
.hw-col-h { display: flex; align-items: center; gap: 6px; padding: 2px 4px 8px; font-size: 10px; font-weight: 610; }
.cdot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.cdot.todo { background: #a8aeb6; }
.cdot.prog { background: #d9a13e; }
.cdot.rev { background: #c98545; }
.cdot.done { background: #5f9155; }
.hw-col-n { margin-left: auto; font-weight: 560; color: var(--hc-ink-3); font-size: 9.5px; }
.hw-cards { display: flex; flex-direction: column; gap: 7px; flex: 1; }
.hw-card {
  position: relative; background: #fff; border: 1px solid var(--hc-line); border-radius: 10px;
  padding: 8px 9px 7px; cursor: grab; box-shadow: var(--hc-sh-xs);
  transition: transform 0.25s var(--hc-spring), box-shadow 0.25s var(--hc-ease), border-color 0.25s var(--hc-ease), opacity 0.2s var(--hc-ease);
}
.hw-card b { display: block; margin-top: 5px; font-size: 11px; font-weight: 590; letter-spacing: -0.01em; line-height: 1.3; }
.hw-card.pinned { background: #fdf9ef; border-color: #ecdfc2; }
.hw-pin { position: absolute; top: -1px; right: 12px; width: 8px; height: 13px; background: #d9a13e; border-radius: 0 0 3px 3px; }
.hw-pin::after { content: ""; position: absolute; left: 0; bottom: -3px; border: 4px solid transparent; border-top-color: #d9a13e; border-width: 3px 4px 0; }
.hw-proj { display: inline-flex; align-items: center; height: 15px; padding: 0 7px; border-radius: 999px; font-size: 8.2px; font-weight: 610; letter-spacing: 0.01em; }
.hw-proj.mint { background: #e3f1e2; color: #2f6a3d; }
.hw-proj.gold { background: #f8ecd4; color: #8a6420; }
.hw-proj.blue { background: #e3ecfa; color: #2f5aa8; }
.hw-proj.sky { background: #e0f0f6; color: #22687f; }
.hw-proj.green { background: #e6f1de; color: #4a7c3d; }
.hw-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.hw-tags i { display: inline-flex; align-items: center; height: 14px; padding: 0 6px; border-radius: 999px; font-size: 7.8px; font-weight: 590; font-style: normal; }
.hw-tags .t-rose { background: #f9e9e4; color: #a25b43; }
.hw-tags .t-red { background: #fbe3df; color: #b04a37; }
.hw-tags .t-teal { background: #e2f0ec; color: #34756a; }
.hw-tags .t-blue { background: #e3ecfa; color: #2f5aa8; }
.hw-tags .t-pink { background: #f7e6f0; color: #a24a7d; }
.hw-tags .t-green { background: #e6f1de; color: #4a7c3d; }
.hw-card-f { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.hw-card-f .due { font-size: 8.5px; font-weight: 590; color: var(--hc-ink-2); }
.hw-card-f .due.late { color: #b04a37; }
.hw-card-f .ck { display: inline-flex; align-items: center; gap: 3px; font-size: 8.5px; color: var(--hc-ink-3); }
.hw-card-f .ck .hc-ic { width: 9px; height: 9px; }
.hw-card-f .hc-av { width: 17px; height: 17px; font-size: 6.5px; margin-left: auto; font-style: normal; }
.hw-empty { flex: 1; display: flex; align-items: center; justify-content: center; border: 1px dashed #d8d8d0; border-radius: 9px; color: var(--hc-ink-3); font-size: 9.5px; min-height: 72px; transition: border-color 0.2s var(--hc-ease), color 0.2s var(--hc-ease); }
.hw-list { position: absolute; inset: 0; padding: 4px 14px 14px; opacity: 0; visibility: hidden; transition: opacity 0.32s var(--hc-ease); overflow: hidden; }
@media (max-width: 1060px) {
  .hc-hero-grid { grid-template-columns: 1fr; }
  .hc-hero-copy { max-width: 620px; }
  .hc-stage { max-width: 760px; margin-right: 0; }
}
@media (max-width: 700px) {
  .hw-frame { grid-template-columns: 1fr; min-height: 0; }
  .hw-sb { display: none; }
  .hw-board { flex-wrap: wrap; position: relative; }
  .hw-col { flex: 1 1 44%; }
  .hw-search { min-width: 0; max-width: none; overflow: hidden; white-space: nowrap; }
  .hw-face, .hw-key, .hw-caret, .hw-acct-name, .hw-acct-chev { display: none; }
  .hw-acct { width: 30px; padding: 0; justify-content: center; }
}
@media (max-width: 640px) {
  .hc-hero .mk-btn-row, .hc-cta .mk-btn-row { flex-direction: column; align-items: stretch; }
  .hc-hero .mk-btn-row .hc-btn, .hc-cta .mk-btn-row .hc-btn { width: 100%; }
  .hc-q .bub { font-size: 12.5px; }
  .hc-aria-mark { left: -8px; top: -14px; }
}

/* The homepage keeps this one live override from the retired legacy block. */
.hp-hero { padding-top: clamp(56px, 8vw, 104px); }

/* shell.js creates desktop mega panels before the deferred full bundle is
   ready. Keep their closed state non-visible during that short handoff. */
.mk-mega { opacity: 0; visibility: hidden; }