/* Hallmark · macrostructure: Workbench · tone: professional-approachable workshop · anchor hue: workshop green
 * theme: custom (VASE workspace language) · paper #ffffff / room plate · accent #14844e→#117042 (Export fill)
 * fonts: Jost (display) + Schibsted Grotesk (UI) + Plex Mono (live readouts only)
 * nav: N5 floating pill · footer: Ft5 statement
 * Provenance: the --ws-* tokens are copied 2026-10-09 from web/landing-claude-20261006/v/workspace/workspace.css
 * (themselves read from the VASE Studio source, file:line there). Fonts copied from web/landing-claude-20261006/fonts/ (OFL).
 */
@font-face { font-family: "Jost"; src: url("../fonts/jost-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fonts/jost-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fonts/jost-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("../fonts/schibsted-grotesk-wght.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("../fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* workspace tokens (workspace.css :8-73) */
  --ws-accent: #1fbf72;
  --ws-accent-text: #0e4329;
  --ws-icon-ink: #0c5234;
  --ws-cta-a: #14844e;
  --ws-cta-b: #117042;
  --ws-ink: #2a2438;
  --ws-ink-3: #413b4d;
  --ws-ink-4: #4d4759;
  --ws-panel-ink: #17131f;
  --ws-surface-2: rgba(255,255,255,.72);
  --ws-surface-3: rgba(255,255,255,.95);
  --ws-line: rgba(34,24,66,.13);
  --ws-line-2: rgba(34,24,66,.30);
  --ws-chrome-card: rgba(255,255,255,.90);
  --ws-chrome-shadow: 0 18px 48px rgba(38,28,78,.14);
  --ws-chrome-inset: inset 0 1px 0 rgba(255,255,255,.9), inset 1px 0 0 rgba(74,126,224,.11), inset -1px -1px 0 rgba(206,116,56,.10);
  --ws-chrome-edge: color-mix(in srgb, #1fbf72 22%, rgba(34,24,66,.13));
  --ws-blur-glass: blur(28px) saturate(1.3);
  --ws-e1: 0 2px 8px; --ws-e3: 0 9px 26px; --ws-e4: 0 18px 48px;
  --ws-ease: cubic-bezier(.22,.61,.21,1);
  --ws-ease-material: cubic-bezier(.16,1,.3,1);
  /* the Moldy wordmark slash (workshop src/moldy-studio.css:54, --accent-warm) */
  --brand-cut: #14794a;
  /* page */
  --paper: #ffffff;
  --ink: #17131f;
  --ink-2: #3b3547;
  --muted: #5d5768;            /* 6.4:1 on white */
  --font-display: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --font-ui: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "Plex Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --gutter: clamp(16px, 5vw, 72px);
  --r-panel: 18px; --r-pill: 14px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; scrollbar-color: rgb(23 19 31 / .28) transparent; }
body { margin: 0; overflow-x: clip; background: var(--paper); color: var(--ink); font: 450 17px/1.5 var(--font-ui); letter-spacing: -.012em; -webkit-font-smoothing: antialiased; }
img, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .18em; }
button { font: inherit; color: inherit; }
::selection { background: rgb(31 191 114 / .26); color: var(--ink); }
html { caret-color: var(--ws-accent-text); accent-color: var(--ws-cta-a); }
:focus-visible { outline: 3px solid var(--ws-accent-text); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.035em; margin: 0; color: var(--ink); text-wrap: balance; overflow-wrap: anywhere; min-width: 0; }
p { margin: 0; text-wrap: pretty; }
.skip { position: fixed; left: 12px; top: -64px; z-index: 60; padding: 10px 16px; border-radius: 12px; background: var(--ink); color: #fff; text-decoration: none; font-weight: 650; }
.skip:focus { top: 12px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ wordmark (workshop .wordmark, moldy-studio.css:53) */
.wordmark { font: 500 26px/1 var(--font-display); letter-spacing: -.04em; color: #0d0c10; white-space: nowrap; }
.wordmark-cut { color: var(--brand-cut); margin-left: 1px; }
.wordmark--sm { font-size: 20px; }
/* MOLDY_GO 2026-10-17 (owner: flag Moldy as beta in many places): ONE calm mark, same everywhere. Quiet outline, no fill. */
.beta-mark { display: inline-flex; align-items: center; flex: none; height: 19px; padding: 0 6px; border: 1px solid rgba(13,12,16,.2);
  border-radius: 5px; font: 650 10.5px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ws-ink-3);
  white-space: nowrap; }
.beta-line { display: flex; align-items: center; gap: 9px; margin-top: 14px; max-width: 30em; font: 450 13px/1.4 var(--font-ui); color: var(--ink-2); }
.plan-brand-name, .foot-mark { display: inline-flex; align-items: center; gap: 8px; }
/* owner 2026-10-17: a prominent way back to VASE 3D, visible at every width (the page links hide under 1100 px) */
.nav-vase { flex: none; font: 650 14px/1 var(--font-ui); color: var(--ink); text-decoration: none; padding: 12px 13px; border-radius: 11px;
  border: 1px solid var(--ws-line); }
@media (hover: hover) and (pointer: fine) { .nav-vase:hover { background: rgba(0,0,0,.05); } }
@media (max-width: 1100px) { .nav .nav-vase { margin-left: auto; } .nav .nav-vase + .nav-go { margin-left: 0; } }
@media (max-width: 760px) { .nav .nav-vase { padding: 0 12px; height: 44px; display: inline-flex; align-items: center; font-size: 13px; } }
.foot .foot-vase { font-weight: 600; color: var(--ink); }

/* ------------------------------------------------------------------ pills (workspace .ws-pill / .ws-pill--cta) */
.pill { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  height: 46px; padding: 0 22px; border-radius: var(--r-pill); border: 1px solid var(--ws-chrome-edge);
  font: 650 14px/1 var(--font-ui); letter-spacing: .01em; color: var(--ws-ink); text-decoration: none;
  background: var(--ws-chrome-card);
  /* W3_HERO: one depth language, the defined edge plus a short, close shadow (detector: hairline + 48 px blur) */
  box-shadow: 0 1px 2px rgba(38,28,78,.06), 0 4px 12px rgba(38,28,78,.09);
  transition: transform .14s var(--ws-ease), box-shadow .2s var(--ws-ease); }
@media (hover: hover) and (pointer: fine) { .pill:hover { transform: translateY(-1px); } }
.pill:active { transform: translateY(1px) scale(.99); }
.pill--go { border: 1px solid transparent; color: #fff; font-weight: 700; isolation: isolate;
  background: linear-gradient(135deg, var(--ws-cta-a), var(--ws-cta-b));
  box-shadow: var(--ws-e3) rgba(0,194,107,.30), var(--ws-e1) rgba(20,16,30,.06); }
.pill--go::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: .9;
  background: linear-gradient(180deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,0) 14%),
    radial-gradient(120% 46% at 50% -6%, rgba(255,255,255,.34) 0%, rgba(255,255,255,.12) 46%, rgba(255,255,255,0) 100%),
    radial-gradient(140% 48% at 50% 118%, rgba(7,213,125,.62) 0%, rgba(7,213,125,.30) 46%, transparent 86%),
    linear-gradient(180deg, rgba(0,92,3,.74) 0%, rgba(0,92,3,.42) 62%, transparent 100%); }
@media (hover: hover) and (pointer: fine) { .pill--go:hover { box-shadow: var(--ws-e4) rgba(0,194,107,.38), var(--ws-e1) rgba(20,16,30,.06); } }
.doors { display: flex; flex-wrap: wrap; gap: 12px; }
.doors--center { justify-content: center; }

/* ------------------------------------------------------------------ floating nav (N5) */
.nav { position: fixed; z-index: 30; top: 14px; left: var(--gutter); right: var(--gutter); height: 60px;
  display: flex; align-items: center; gap: 18px; padding: 0 8px 0 18px; border-radius: var(--r-panel);
  background: rgba(255,255,255,.80); border: 1px solid var(--ws-line); box-shadow: 0 10px 30px rgba(38,28,78,.08), var(--ws-chrome-inset);
  -webkit-backdrop-filter: var(--ws-blur-glass); backdrop-filter: var(--ws-blur-glass); }
.nav-mark { display: inline-flex; align-items: baseline; gap: 10px; text-decoration: none; min-height: 44px; align-items: center; }
.nav-with { font: 500 13px/1 var(--font-ui); color: var(--muted); letter-spacing: 0; }
.nav-links { display: flex; gap: 2px; margin-left: auto; }
.nav-links a { font: 550 14px/1 var(--font-ui); color: var(--ws-ink-3); text-decoration: none; padding: 12px 13px; border-radius: 11px; }
@media (hover: hover) and (pointer: fine) { .nav-links a:hover { background: rgba(0,0,0,.05); color: var(--ink); } }
.nav-go { height: 44px; padding: 0 18px; }