/* Craft-style homepage skin, applied last in the homepage bundle (tools/home-styles.mjs).
   Same markup, scripts and scroll scenes; only color, backgrounds, type and surfaces change.
   Light follows craft.do: warm beige paper, near-black ink, a sky hero card, pastel frames,
   serif display type with Inter body, black pill buttons and a grainy black footer.
   Dark is the same page at dusk: warm near-black paper, a night-sky hero, deep muted frames,
   cream ink and cream pill buttons. Like the rest of the site it follows the device setting
   unless the footer toggle stores a choice (scripts/theme.js).
   Every color is a token below; `:not(#craft-skin)` outranks the adaptive theme blocks.
   The homepage gets this file inside styles/home.bundle.css; every other public page links it
   last through the shared assets block in tools/site-chrome.mjs. Homepage-only rules target its
   own markup (#foldStage, .courwrap, .home-light …); "Other pages" below styles the shared
   feature, workflow, company and legal page parts (.g-root).
   The pre-redesign homepage is kept at classic/ with styles/home-classic.bundle.css. */

@font-face { font-family: "Source Serif 4"; src: url("../assets/fonts/source-serif-4-latin.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../assets/fonts/source-serif-4-italic-latin.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root:not(#craft-skin) {
  color-scheme: light;
  --cs-beige: #fcf9f7;
  --cs-ink: #030302;
  --cs-ink-2: #3b3a37;
  --cs-ink-3: #6a6863;
  --cs-on-ink: #ffffff;
  --cs-hair: #0303021a;
  --cs-hair-soft: #0303020f;
  --cs-surface: #ffffff;
  --cs-surface-glass: #ffffffeb;
  --cs-nav: #ffffffd6;
  --cs-glass-tint: oklch(100% 0 0 / .12);
  --cs-glass-core: oklch(100% 0 0 / .42);
  --cs-glass-edge: oklch(100% 0 0 / .88);
  --cs-glass-shade: oklch(20% .015 250 / .22);
  --cs-glass-glint: oklch(100% 0 0 / .60);
  --cs-glass-shadow: 0 8px 28px oklch(20% .015 250 / .12), 0 2px 6px oklch(20% .015 250 / .06);
  --cs-link-pill: #ffffffb3;
  --cs-link-pill-hover: #ffffff;
  --cs-link-pill-rim: #ffffffcc;
  --cs-sky-1: #8ccbeb;
  --cs-sky-2: #aedcf2;
  --cs-sky-3: #e2f2fa;
  --cs-sky-4: #f3f9fc;
  --cs-cloud: #ffffffe6;
  --cs-cloud-2: #ffffffcc;
  --cs-cloud-dots: #e8f0fa;
  --cs-stars: none;
  --cs-lav: #bbccf5;
  --cs-butter: #fdea9e;
  --cs-sky: #a6d8ef;
  --cs-mint: #8ed39e;
  --cs-mint-soft: #d8f2dd;
  --cs-peach: #fbdcc9;
  --cs-blue: #2f7cf6;
  --cs-cta-stripe: #ffffff2e;
  --cs-cta-ink: #1d3b25;
  --cs-inv-bg: #030302;
  --cs-inv-ink: #fcf9f7;
  --cs-inv-ink-2: #ffffffc2;
  --cs-inv-ink-3: #ffffff99;
  --cs-inv-hair: #ffffff2e;
  --cs-foot-bg: #070706;
  --cs-foot-rim: transparent;
  --cs-logo-filter: none;
  --cs-shadow: 0 50px 40px #00000003, 0 50px 40px #00000005, 0 20px 40px #0000000d, 0 3px 10px #00000014;
  --cs-shadow-sm: 0 10px 24px #0000000d, 0 2px 6px #00000012;
  --cs-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --theme-bg: var(--cs-beige);
  --theme-bg-raised: #f6f2ee;
  --theme-card: var(--cs-surface);
  --theme-card-2: #f4efe9;
  --theme-chip: #efece8;
  --theme-border: #0303022e;
  --theme-border-soft: #03030214;
  --theme-text: var(--cs-ink);
  --theme-text-2: var(--cs-ink-2);
  --theme-text-3: var(--cs-ink-3);
  --theme-blue: var(--cs-blue);
  --theme-blue-soft: #2f7cf61f;
  --theme-red: #d8443a;
  --theme-red-soft: #d8443a1f;
  --theme-amber: #b8860b;
  --theme-amber-soft: #fdea9e80;
  --theme-green: #2f8a4c;
  --theme-green-soft: #8ed39e33;
  --theme-action: var(--cs-ink);
  --theme-action-strong: #1a1a18;
  --theme-action-ink: var(--cs-on-ink);
  --theme-active-text: var(--cs-ink);
  --theme-focus: var(--cs-blue);
  --theme-orb: var(--cs-blue);
  --theme-orb-ink: #ffffff;
  --theme-visual-sky: var(--cs-sky);
  --theme-overlay: #03030266;
  --theme-glass: #ffffffd9;
  --theme-glass-rule: #0303021a;
  --theme-shadow-soft: #0000001a;
  --theme-shadow-strong: #0000002e;
  --cs-serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --cs-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cs-grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --g-sans: var(--cs-sans);
  --fp-font-display: var(--cs-serif);
  --fp-font-body: var(--cs-sans);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]):not(#craft-skin) {
    color-scheme: dark;
    --cs-beige: #121110;
    --cs-ink: #f3efe9;
    --cs-ink-2: #cbc6bd;
    --cs-ink-3: #968f85;
    --cs-on-ink: #121110;
    --cs-hair: #f3efe91f;
    --cs-hair-soft: #f3efe912;
    --cs-surface: #1c1b19;
    --cs-surface-glass: #1c1b19eb;
    --cs-nav: #1c1b19d1;
    --cs-glass-tint: oklch(20% .015 250 / .24);
    --cs-glass-core: oklch(20% .015 250 / .55);
    --cs-glass-edge: oklch(100% 0 0 / .32);
    --cs-glass-shade: oklch(8% .015 250 / .65);
    --cs-glass-glint: oklch(100% 0 0 / .16);
    --cs-glass-shadow: 0 8px 28px oklch(0% 0 0 / .22), 0 2px 6px oklch(0% 0 0 / .14);
    --cs-link-pill: #26252299;
    --cs-link-pill-hover: #2e2d29;
    --cs-link-pill-rim: #f3efe914;
    --cs-sky-1: #0d1a2c;
    --cs-sky-2: #1c3352;
    --cs-sky-3: #3d4a70;
    --cs-sky-4: #5a5878;
    --cs-cloud: #c7d3ea17;
    --cs-cloud-2: #c7d3ea10;
    --cs-cloud-dots: #b9c7e22b;
  --cs-stars: radial-gradient(1.2px 1.2px at 18% 12%, #f3efe9cc 50%, transparent 51%), radial-gradient(1px 1px at 33% 22%, #f3efe999 50%, transparent 51%), radial-gradient(1.4px 1.4px at 57% 9%, #f3efe9bf 50%, transparent 51%), radial-gradient(1px 1px at 71% 27%, #f3efe980 50%, transparent 51%), radial-gradient(1.2px 1.2px at 44% 31%, #f3efe973 50%, transparent 51%), radial-gradient(1px 1px at 82% 6%, #f3efe999 50%, transparent 51%), radial-gradient(1.3px 1.3px at 9% 21%, #f3efe98c 50%, transparent 51%), radial-gradient(1px 1px at 64% 38%, #f3efe966 50%, transparent 51%);
    --cs-lav: #2b3461;
    --cs-butter: #4a3e1a;
    --cs-sky: #1c3f56;
    --cs-mint: #1f4a2e;
    --cs-mint-soft: #1b3326;
    --cs-peach: #4c2f23;
    --cs-blue: #78a8ff;
    --cs-cta-stripe: #ffffff0d;
    --cs-cta-ink: #bfe3c9;
    --cs-inv-bg: #f3efe9;
    --cs-inv-ink: #121110;
    --cs-inv-ink-2: #121110c2;
    --cs-inv-ink-3: #12111099;
    --cs-inv-hair: #1211102e;
    --cs-foot-bg: #080807;
    --cs-foot-rim: #f3efe91a;
    --cs-logo-filter: invert(1);
    --cs-shadow: 0 50px 40px #00000014, 0 20px 40px #00000040, 0 3px 10px #00000059;
    --cs-shadow-sm: 0 10px 24px #00000033, 0 2px 6px #00000040;
    --cs-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --theme-bg-raised: #181715;
    --theme-card-2: #24221f;
    --theme-chip: #262522;
    --theme-border: #f3efe92e;
    --theme-border-soft: #f3efe914;
    --theme-blue-soft: #78a8ff24;
    --theme-red: #ff8076;
    --theme-red-soft: #ff807624;
    --theme-amber: #e6bb52;
    --theme-amber-soft: #e6bb5229;
    --theme-green: #74d392;
    --theme-green-soft: #74d39224;
    --theme-action-strong: #ffffff;
    --theme-overlay: #000000a3;
    --theme-glass: #1c1b19d9;
    --theme-glass-rule: #f3efe91a;
    --theme-shadow-soft: #00000066;
    --theme-shadow-strong: #0000008c;
  }
}

:root[data-theme="dark"]:not(#craft-skin) {
  color-scheme: dark;
  --cs-beige: #121110;
  --cs-ink: #f3efe9;
  --cs-ink-2: #cbc6bd;
  --cs-ink-3: #968f85;
  --cs-on-ink: #121110;
  --cs-hair: #f3efe91f;
  --cs-hair-soft: #f3efe912;
  --cs-surface: #1c1b19;
  --cs-surface-glass: #1c1b19eb;
  --cs-nav: #1c1b19d1;
  --cs-glass-tint: oklch(20% .015 250 / .24);
  --cs-glass-core: oklch(20% .015 250 / .55);
  --cs-glass-edge: oklch(100% 0 0 / .32);
  --cs-glass-shade: oklch(8% .015 250 / .65);
  --cs-glass-glint: oklch(100% 0 0 / .16);
  --cs-glass-shadow: 0 8px 28px oklch(0% 0 0 / .22), 0 2px 6px oklch(0% 0 0 / .14);
  --cs-link-pill: #26252299;
  --cs-link-pill-hover: #2e2d29;
  --cs-link-pill-rim: #f3efe914;
  --cs-sky-1: #0d1a2c;
  --cs-sky-2: #1c3352;
  --cs-sky-3: #3d4a70;
  --cs-sky-4: #5a5878;
  --cs-cloud: #c7d3ea17;
  --cs-cloud-2: #c7d3ea10;
  --cs-cloud-dots: #b9c7e22b;
  --cs-stars: radial-gradient(1.2px 1.2px at 18% 12%, #f3efe9cc 50%, transparent 51%), radial-gradient(1px 1px at 33% 22%, #f3efe999 50%, transparent 51%), radial-gradient(1.4px 1.4px at 57% 9%, #f3efe9bf 50%, transparent 51%), radial-gradient(1px 1px at 71% 27%, #f3efe980 50%, transparent 51%), radial-gradient(1.2px 1.2px at 44% 31%, #f3efe973 50%, transparent 51%), radial-gradient(1px 1px at 82% 6%, #f3efe999 50%, transparent 51%), radial-gradient(1.3px 1.3px at 9% 21%, #f3efe98c 50%, transparent 51%), radial-gradient(1px 1px at 64% 38%, #f3efe966 50%, transparent 51%);
  --cs-lav: #2b3461;
  --cs-butter: #4a3e1a;
  --cs-sky: #1c3f56;
  --cs-mint: #1f4a2e;
  --cs-mint-soft: #1b3326;
  --cs-peach: #4c2f23;
  --cs-blue: #78a8ff;
  --cs-cta-stripe: #ffffff0d;
  --cs-cta-ink: #bfe3c9;
  --cs-inv-bg: #f3efe9;
  --cs-inv-ink: #121110;
  --cs-inv-ink-2: #121110c2;
  --cs-inv-ink-3: #12111099;
  --cs-inv-hair: #1211102e;
  --cs-foot-bg: #080807;
  --cs-foot-rim: #f3efe91a;
  --cs-logo-filter: invert(1);
  --cs-shadow: 0 50px 40px #00000014, 0 20px 40px #00000040, 0 3px 10px #00000059;
  --cs-shadow-sm: 0 10px 24px #00000033, 0 2px 6px #00000040;
  --cs-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --theme-bg-raised: #181715;
  --theme-card-2: #24221f;
  --theme-chip: #262522;
  --theme-border: #f3efe92e;
  --theme-border-soft: #f3efe914;
  --theme-blue-soft: #78a8ff24;
  --theme-red: #ff8076;
  --theme-red-soft: #ff807624;
  --theme-amber: #e6bb52;
  --theme-amber-soft: #e6bb5229;
  --theme-green: #74d392;
  --theme-green-soft: #74d39224;
  --theme-action-strong: #ffffff;
  --theme-overlay: #000000a3;
  --theme-glass: #1c1b19d9;
  --theme-glass-rule: #f3efe91a;
  --theme-shadow-soft: #00000066;
  --theme-shadow-strong: #0000008c;
}

html body { background: var(--cs-beige); color: var(--cs-ink); font-family: var(--cs-sans); -webkit-font-smoothing: antialiased; }

/* ---------- serif display type ---------- */
.hero-copy h1, #foldStage .hero-copy h1,
.sec-head h2, .cat-h, .uc-copy h2, .cta h2, .hero-demo h2, .graph-sec h2 {
  font-family: var(--cs-serif);
  font-weight: 440;
  font-optical-sizing: auto;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
#foldStage .hero-copy h1 { font-size: clamp(44px, 5vw, 76px); line-height: 1.02; }
.sec-head h2 { font-size: clamp(30px, 2.6vw, 40px); line-height: 1.1; letter-spacing: -0.022em; }
.cat-h { font-size: clamp(40px, 5.2vw, 72px); line-height: 1.04; }
.uc-copy h2 { font-size: clamp(42px, 4vw, 62px); }
.cta h2 { font-size: clamp(42px, 5vw, 68px); font-style: italic; line-height: 1.05; }
.hero-demo h2 { font-size: 30px; line-height: 1.08; }

/* utility labels: mono → Inter caps, like Craft eyebrows */
.kicker, .cat-kick, .hero-eyebrow, .hero-demo__eyebrow, .fc-head, .gsn__category {
  font-family: var(--cs-sans) !important;
  font-weight: 600;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  color: var(--cs-ink-2) !important;
}
.kicker { font-size: 13px; }
.cat-rule { opacity: 0; }

/* rotating verb: italic serif in ink */
.uc-verb span { color: var(--cs-ink); font-family: var(--cs-serif); font-style: italic; font-weight: 440; }
.uc-tab.on { background: var(--cs-ink); border-color: var(--cs-ink); color: var(--cs-on-ink); }
.uc-tab { border-radius: 999px; }
.uc-panel { background: var(--cs-surface); border: 0; border-radius: 22px; box-shadow: var(--cs-shadow); }
.uc-dots span.on { background: var(--cs-ink); }

/* ---------- liquid-glass navigation ----------
 * Hallmark · component: navigation · theme: existing Craft
 * States: default, hover, focus-visible, active, current, expanded/collapsed.
 * Links have no loading/error/success state. Native disclosures remain usable.
 * The lens is behind the content; never filter or clip the interactive nav.
 * Pre-emit critique: P5 H5 E4 S5 R4 V4. */
html body .g-site-header { background: transparent; border-bottom: 0; top: calc(14px + env(safe-area-inset-top, 0px)); padding-inline: 16px; pointer-events: none; }
html body .g-site-header .gsn, html body.home-light .g-site-header .gsn {
  --nav-glass-enabled: 1;
  --nav-glass-radius: 28px;
  --nav-glass-light-x: 24%;
  --nav-glass-light-y: 0%;
  --nav-glass-scale-x: 1;
  --nav-glass-scale-y: 1;
  position: relative;
  z-index: 0;
  pointer-events: auto;
  max-width: 960px;
  min-height: 54px;
  margin: 0 auto;
  padding-inline: 20px 10px;
  border-radius: var(--nav-glass-radius);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.g-site-header .gsn::before, .g-site-header .gsn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--nav-glass-radius);
  pointer-events: none;
  transform: scale(var(--nav-glass-scale-x), var(--nav-glass-scale-y));
  transition: transform var(--fp-dur-short) var(--fp-ease-out), border-radius var(--fp-dur-short) var(--fp-ease-out);
}
.g-site-header .gsn::before {
  z-index: -1;
  background: var(--cs-nav);
  box-shadow: var(--cs-glass-shadow);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .g-site-header .gsn::before {
    background: linear-gradient(180deg, transparent, var(--cs-glass-core) 25% 75%, transparent), var(--cs-glass-tint);
    -webkit-backdrop-filter: blur(10px) saturate(1.25);
    backdrop-filter: blur(10px) saturate(1.25);
  }
  .g-site-header .gsn[data-glass-lens]::before {
    backdrop-filter: var(--nav-glass-filter) saturate(1.18);
  }
}
.g-site-header .gsn::after {
  z-index: 1;
  border: 1px solid var(--cs-glass-edge);
  background: radial-gradient(180px 64px at var(--nav-glass-light-x) var(--nav-glass-light-y), var(--cs-glass-glint), transparent 76%);
  box-shadow: inset 0 1px 1px var(--cs-glass-glint), inset 0 -1px 1px var(--cs-glass-glint), inset 1px 0 2px var(--cs-glass-shade), inset -1px 0 2px var(--cs-glass-shade);
}
.g-site-header .gsn a, .g-site-header .gsn summary { color: var(--cs-ink); }
.g-site-header .gsn__desktop > a, .g-site-header .gsn__features > summary { border-radius: 8px; }
@media (hover: hover) {
  .g-site-header .gsn__desktop > a:hover, .g-site-header .gsn__features > summary:hover { background: var(--cs-hair-soft); }
}
.g-site-header .gsn__desktop > a:active, .g-site-header .gsn__features[open] > summary { background: var(--cs-hair); }
.gsn__dropdown { border-radius: 18px !important; box-shadow: var(--cs-shadow) !important; border-color: var(--cs-hair-soft) !important; background: var(--cs-surface) !important; }
.gsn__sheet { top: calc(78px + env(safe-area-inset-top, 0px)); max-height: calc(100dvh - 90px - env(safe-area-inset-top, 0px)); margin-inline: 16px; border: 1px solid var(--cs-hair); border-radius: 22px; box-shadow: var(--cs-shadow); background: var(--cs-surface); }
.steer-nav-wordmark, .hero-eyebrow__logo { filter: var(--cs-logo-filter) !important; }
@media (prefers-reduced-motion: reduce) {
  .g-site-header .gsn::before, .g-site-header .gsn::after { transform: none; transition: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .g-site-header .gsn::before { background: var(--cs-surface); backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .g-site-header .gsn::after { background: none; border-color: var(--cs-ink-3); box-shadow: none; }
}
@media (forced-colors: active) {
  .g-site-header .gsn::before { background: Canvas; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none; }
  .g-site-header .gsn::after { background: none; border-color: CanvasText; box-shadow: none; }
}

/* ---------- hero: sky card with clouds ---------- */
#foldStage { isolation: isolate; }
#foldStage::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 28px;
  z-index: -2;
  background:
    var(--cs-grain-light),
    var(--cs-stars),
    radial-gradient(22% 16% at 8% 36%, var(--cs-cloud) 0 45%, transparent 72%),
    radial-gradient(18% 12% at 14% 31%, var(--cs-cloud-2) 0 45%, transparent 72%),
    radial-gradient(20% 14% at 91% 14%, var(--cs-cloud) 0 45%, transparent 72%),
    radial-gradient(14% 10% at 84% 10%, var(--cs-cloud-2) 0 45%, transparent 72%),
    linear-gradient(180deg, var(--cs-sky-1) 0%, var(--cs-sky-2) 45%, var(--cs-sky-3) 85%, var(--cs-sky-4) 100%);
  box-shadow: var(--cs-shadow);
}
#foldStage::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 12px;
  border-radius: 28px;
  pointer-events: none;
  background:
    radial-gradient(24% 18% at 8% 37%, var(--cs-cloud-dots) 0 55%, transparent 74%),
    radial-gradient(22% 16% at 91% 15%, var(--cs-cloud-dots) 0 55%, transparent 74%),
    radial-gradient(16% 12% at 62% 94%, var(--cs-cloud-dots) 0 55%, transparent 74%);
  -webkit-mask: radial-gradient(circle, #000 1.1px, transparent 1.7px) 0 0 / 4px 4px;
  mask: radial-gradient(circle, #000 1.1px, transparent 1.7px) 0 0 / 4px 4px;
}
.hero-eyebrow { border-color: var(--cs-hair) !important; }
.hero-features li svg, .hero-features svg { color: var(--cs-ink); }
.hero-more { color: var(--cs-ink); }

/* live meeting demo card */
#heroMeetingDemo, .hero-demo {
  background: var(--cs-surface-glass) !important;
  border: 0 !important;
  border-radius: 24px !important;
  box-shadow: var(--cs-shadow) !important;
}
.hero-demo__person input, .hero-demo__record { border-radius: 12px !important; }
.hero-demo__primary { background: var(--cs-ink) !important; color: var(--cs-on-ink) !important; border-radius: 999px !important; border: 0 !important; }
.hero-demo__add { color: var(--cs-ink) !important; }

/* ---------- buttons ---------- */
.platform-mark {
  border-radius: 999px !important;
  border: 0 !important;
  background: var(--cs-surface) !important;
  padding-inline: 16px !important;
  box-shadow: var(--cs-shadow-sm) !important;
  font-weight: 600;
}
.hero-downloads__copy b { font-weight: 600; }
.feature-deep-link {
  font-family: var(--cs-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--cs-ink);
  background: var(--cs-link-pill);
  padding: 0 22px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 8px 20px #0000000f, inset 0 1px 0 var(--cs-link-pill-rim), 0 0 0 1px var(--cs-hair-soft);
  transition: transform .25s cubic-bezier(.16,1,.3,1), background-color .2s;
}
.feature-deep-link:hover { transform: translateY(-1px); background: var(--cs-link-pill-hover); }
.feature-deep-link u, .feature-deep-link span { text-decoration: none; }

/* ---------- feature demos in pastel frames ---------- */
.courwrap {
  padding: 14px;
  border-radius: 26px;
  background: var(--cs-grain), var(--cs-frame, var(--cs-lav));
  box-shadow: var(--cs-shadow);
}
.home-light #meetings { --cs-frame: var(--cs-lav); }
.home-light #todos { --cs-frame: var(--cs-butter); }
.home-light #notes { --cs-frame: var(--cs-sky); }
.home-light #mtglib { --cs-frame: var(--cs-mint-soft); }
.home-light #mac { --cs-frame: var(--cs-peach); }
.home-light #browser { --cs-frame: var(--cs-lav); }
.home-light #sandboxes { --cs-frame: var(--cs-mint); }
.home-light #heartbeat { --cs-frame: var(--cs-butter); }
.home-light #scheduled { --cs-frame: var(--cs-sky); }
.home-light #more { --cs-frame: var(--cs-peach); }
.home-light #security { --cs-frame: var(--cs-mint-soft); }
.home-light #pricing { --cs-frame: var(--cs-butter); }
.gcard {
  border-radius: 16px;
  border-color: var(--cs-hair-soft);
  box-shadow: var(--cs-shadow-sm);
}
.courwrap .gcard { box-shadow: var(--cs-shadow-sm); }

/* memory graph section: lavender stage */
#how .mem-list { background: var(--cs-grain), var(--cs-surface); }
#how > .wrap { position: relative; isolation: isolate; }
#how > .wrap::before {
  content: "";
  position: absolute;
  inset: -40px -20px;
  z-index: -1;
  border-radius: 28px;
  background: var(--cs-grain), var(--cs-lav);
  box-shadow: var(--cs-shadow);
}

/* Pricing: calm sage accents, with Pro as the only highlighted plan. */
.pcard { border-radius: 18px; }
.pcard.p1 { background: var(--cs-surface); }
.price-stack { --g-blue: var(--cs-cta-ink); }
.price-stack .pcard .pr .pr-off { color: var(--cs-cta-ink); }
.price-swap .pcard.hl {
  background: color-mix(in srgb, var(--cs-mint-soft) 55%, var(--cs-beige));
  border-color: color-mix(in srgb, var(--cs-cta-ink) 35%, var(--cs-surface));
  box-shadow: var(--cs-shadow-sm);
}

/* ---------- closing call to action: mint panel ---------- */
section.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 1080px;
  margin: 100px auto 0;
  padding: 72px 32px;
  border-radius: 28px;
  background:
    var(--cs-grain),
    repeating-linear-gradient(-28deg, transparent 0 70px, var(--cs-cta-stripe) 70px 120px, transparent 120px 200px),
    var(--cs-mint);
  border: 1px solid var(--cs-hair);
  box-shadow: var(--cs-shadow);
}
section.cta p { color: var(--cs-cta-ink); font-family: var(--cs-serif); font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.015em; }
section.cta .hero-downloads__copy { color: var(--cs-ink); }

/* ---------- footer: black grain card ---------- */
html body .g-site-footer {
  --g-text: #fcf9f7; --g-text-2: #ffffffc7; --g-text-3: #ffffff94;
  --g-border: #ffffff2e; --g-border-soft: #ffffff1f; --g-bg: var(--cs-foot-bg); --g-link: #fcf9f7;
  margin: 110px 16px 16px;
  border: 1px solid var(--cs-foot-rim);
  border-radius: 28px;
  background: var(--cs-grain-light), var(--cs-foot-bg);
  color: #fcf9f7;
  overflow: hidden;
}
.g-site-footer a { color: inherit; }
.steer-footer-wordmark { filter: invert(1) !important; }

/* pinned stages share the page paper */
.graph-sec, .pin-stage, .story-track, .pin-track { background-color: var(--cs-beige) !important; }

/* scroll hint + misc accents */
.scroll-hint { font-family: var(--cs-sans) !important; letter-spacing: .08em; }
::selection { background: var(--cs-butter); color: var(--cs-ink); }
:focus-visible { outline-color: var(--cs-blue); }

/* ---------- other pages: feature, workflow, company and legal (body.g-root) ---------- */
.g-root { background: var(--cs-beige); }
.g-root main h1, .g-root main h2 {
  font-family: var(--cs-serif);
  font-weight: 440;
  font-optical-sizing: auto;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.g-root main h1 { line-height: 1.02; }
.g-root main h2 { letter-spacing: -0.022em; line-height: 1.1; }
.g-root main :is(.amn-cta, .gf-cta, .gw-cta) h2 { font-style: italic; }

/* hero: the same sky card as the homepage */
.g-root :is(.amn-hero, .gf-hero, .gw-hero, .ga-hero, .gsec-hero, .gi-hero, .ant-hero) {
  position: relative;
  isolation: isolate;
  margin: 12px;
  border-radius: 28px;
  overflow: hidden;
  background:
    var(--cs-grain-light),
    var(--cs-stars),
    radial-gradient(18% 22% at 94% 18%, var(--cs-cloud) 0 45%, transparent 72%),
    radial-gradient(14% 16% at 88% 10%, var(--cs-cloud-2) 0 45%, transparent 72%),
    radial-gradient(20% 18% at 4% 88%, var(--cs-cloud-2) 0 45%, transparent 72%),
    linear-gradient(180deg, var(--cs-sky-1) 0%, var(--cs-sky-2) 45%, var(--cs-sky-3) 85%, var(--cs-sky-4) 100%);
  box-shadow: var(--cs-shadow);
}
.g-root :is(.gf-hero, .gw-hero, .ga-hero, .gsec-hero, .gi-hero) { padding-top: clamp(96px, 11vw, 132px); }
.g-root :is(.amn-hero, .gf-hero, .gw-hero, .ga-hero, .gsec-hero, .gi-hero, .ant-hero) + * { margin-top: clamp(40px, 5vw, 72px); }
.g-root :is(.amn-hero, .ant-hero) { padding-top: clamp(96px, 10vw, 124px); }

/* buttons and links */
.g-root .amn-button {
  border-radius: 999px;
  background: var(--cs-ink);
  border-color: var(--cs-ink);
  color: var(--cs-on-ink);
  font-weight: 600;
  box-shadow: var(--cs-shadow-sm);
}
.g-root .amn-button--secondary { background: var(--cs-surface); border-color: var(--cs-hair); color: var(--cs-ink); }
.g-root :is(.gf-link, .gw-link, .amn-text-link) { color: var(--cs-ink); }

/* labels: mono → Inter caps */
.g-root :is(.amn-kicker, .amn-label, .gp-eyebrow, .gf-eyebrow, .gw-eyebrow) {
  font-family: var(--cs-sans);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cs-ink-2);
}

/* demo records: white cards with soft depth */
.g-root :is(.amn-record, .gf-record) { border-radius: 20px; border-color: var(--cs-hair-soft); box-shadow: var(--cs-shadow); }

/* closing panels: the homepage's mint panel */
.g-root .amn-cta,
.g-root :is(.gf-cta, .gw-cta) > .amn-shell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid var(--cs-hair);
  background:
    var(--cs-grain),
    repeating-linear-gradient(-28deg, transparent 0 70px, var(--cs-cta-stripe) 70px 120px, transparent 120px 200px),
    var(--cs-mint);
  box-shadow: var(--cs-shadow);
  color: var(--cs-ink);
}
.g-root .amn-cta { max-width: 1080px; margin: 60px auto 0; }
.g-root :is(.gf-cta, .gw-cta) > .amn-shell { padding: clamp(36px, 5vw, 64px) clamp(24px, 5vw, 56px); }
.g-root .gw-cta__inner { border-top: 0; padding-top: 0; }
.g-root :is(.amn-cta, .gf-cta, .gw-cta) :is(p, .amn-kicker) { color: var(--cs-cta-ink); }
.g-root .amn-cta .amn-button { background: var(--cs-ink); border-color: var(--cs-ink); color: var(--cs-on-ink); }

@media (max-width: 760px) {
  #foldStage::before, #foldStage::after { inset: 8px; border-radius: 22px; }
  .courwrap { padding: 10px; border-radius: 22px; }
  section.cta { margin: 80px 12px 0; padding: 48px 20px; border-radius: 22px; }
  html body .g-site-footer { margin: 80px 12px 12px; border-radius: 22px; }
  html body .g-site-header { padding-inline: 12px; }
  .g-root :is(.amn-hero, .gf-hero, .gw-hero, .ga-hero, .gsec-hero, .gi-hero, .ant-hero) { margin: 8px; border-radius: 22px; }
  .g-root .amn-cta { margin: 40px 12px 0; border-radius: 22px; }
  .g-root :is(.gf-cta, .gw-cta) > .amn-shell { border-radius: 22px; }
  .platform-mark { padding-inline: 10px !important; }
  #foldStage .hero-copy .hero-ctas { grid-template-columns: minmax(0, 1fr); }
  .hero-downloads { justify-content: start; column-gap: 6px; }
  #foldStage::before { background: var(--cs-grain-light), radial-gradient(60% 8% at 85% 6%, var(--cs-cloud) 0 40%, transparent 72%), linear-gradient(180deg, var(--cs-sky-1) 0%, var(--cs-sky-2) 45%, var(--cs-sky-3) 85%, var(--cs-sky-4) 100%); }
  #foldStage::after { display: none; }
}