/* ===========================================================================
   ourworkshop.io — public marketing / explainer page.
   Self-contained on purpose: this page renders OUTSIDE the app chrome (apex host,
   no tenant) and the design kit's generic class names (.rail, .btn, .portal)
   collide with the back-office stylesheet — so the landing page links ONLY this
   file, never application.css. It carries the house design tokens at the fixed
   house tangerine (no per-tenant knob here) so it stays in sync with the system
   by construction. Recreated from design/design-system/ui_kits/ourworkshop-site.
   =========================================================================== */

@font-face { font-family:'Bricolage Grotesque'; font-weight:400 800; font-display:swap; src:url("/assets/bricolage-grotesque-7bec0498.woff2") format('woff2'); }
@font-face { font-family:'Hanken Grotesk'; font-weight:400 700; font-display:swap; src:url("/assets/hanken-grotesk-62d0893d.woff2") format('woff2'); }
@font-face { font-family:'Space Mono'; font-weight:400; font-display:swap; src:url("/assets/space-mono-400-2fb0d22d.woff2") format('woff2'); }
@font-face { font-family:'Space Mono'; font-weight:700; font-display:swap; src:url("/assets/space-mono-700-27e084bd.woff2") format('woff2'); }

:root {
  --bg: #f7f2e9; --surface: #fffdf8; --surface-2: #efe7d6;
  --ink: #1f1b16; --sub: #6f6655; --line: #e4dac6; --line-2: #d0c4ab;
  --accent-l: 0.70; --accent-c: 0.165; --accent-h: 52;
  --accent:      oklch(var(--accent-l) var(--accent-c) var(--accent-h));
  --accent-soft: oklch(min(calc(var(--accent-l) + 0.30), 0.96) calc(var(--accent-c) * 0.38) var(--accent-h));
  --accent-deep: oklch(max(calc(var(--accent-l) - 0.14), 0.30) var(--accent-c) var(--accent-h));
  --on-accent: #fffdf8;
  --spine: oklch(0.64 0.095 196); --spine-deep: oklch(0.46 0.080 196);
  --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-label: 'Space Mono', ui-monospace, 'SFMono-Regular', monospace;
  --w-display: 700; --track-display: -0.02em; --track-label: 0.16em;
  --radius: 10px; --radius-lg: 18px;
  --shadow-3: 0 14px 38px rgba(40, 30, 15, 0.12);
  --container: 1180px; --header-h: 64px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--w-display); letter-spacing: var(--track-display); margin: 0; }
p { margin: 0; }
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 28px; }
.eyebrow { font-family: var(--font-label); font-size: 11px; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent-deep); }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 9px; padding: 14px 24px;
  font-family: var(--font-label); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  border-radius: var(--radius); border: none; cursor: pointer; white-space: nowrap; transition: filter .12s, transform .12s; }
.btn:hover { filter: brightness(.95); }
.btn:active { transform: translateY(1px); }
.btn-solid { background: var(--accent); color: var(--on-accent); }
.btn-ink { background: var(--ink); color: var(--bg); }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn-sm { padding: 9px 16px; font-size: 12px; }

/* nav */
header { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--bg) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
.mark { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -.03em; }
.mark b { color: var(--accent); }
.nav-links { display: flex; gap: 28px; font-family: var(--font-label); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--sub); }
.nav-links a:hover { color: var(--ink); }

/* hero */
.hero { padding: 84px 0 64px; }
.hero h1 { font-size: clamp(40px, 7vw, 72px); line-height: 1.0; max-width: 16ch; }
.hero .lede { font-size: clamp(17px, 2.2vw, 21px); color: var(--sub); max-width: 56ch; margin-top: 22px; line-height: 1.5; }
.hero-cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.hero-meta { margin-top: 18px; font-family: var(--font-label); font-size: 12px; color: var(--sub); letter-spacing: .03em; }

/* mini spine rail (hero) */
.rail { margin-top: 56px; display: flex; align-items: flex-start; gap: 0; position: relative; overflow-x: auto; padding-bottom: 6px; }
.rail-node { flex: 1; min-width: 130px; position: relative; padding-top: 30px; }
.rail-node::before { content: ""; position: absolute; top: 11px; left: 0; right: 0; height: 3px; background: var(--spine); }
.rail-node:first-child::before { left: 50%; }
.rail-node:last-child::before { right: 50%; }
.rail-dot { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 3px solid var(--spine); }
.rail-node:nth-child(4) .rail-dot { background: var(--accent); border-color: var(--accent); }
.rail-k { text-align: center; font-family: var(--font-label); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.rail-s { text-align: center; font-size: 11.5px; color: var(--sub); margin-top: 3px; }

/* section scaffold */
section { padding: 80px 0; }
.sec-head { max-width: 60ch; margin-bottom: 44px; }
.sec-head h2 { font-size: clamp(30px, 4.5vw, 46px); line-height: 1.06; margin-top: 12px; }
.sec-head p { color: var(--sub); font-size: 18px; margin-top: 16px; line-height: 1.55; }

/* problem surface — the engine + library bands reuse this warm tint */
.problem { background: var(--surface-2); }

/* challenge band */
.challenge { background: var(--ink); color: var(--bg); }
.challenge h2 { color: var(--bg); font-size: clamp(30px, 4.6vw, 50px); line-height: 1.06; max-width: 24ch; margin-top: 12px; }
.challenge h2 b { color: var(--accent); }
.challenge .ch-sub { color: color-mix(in oklab, var(--bg) 72%, transparent); font-size: 18px; margin-top: 20px; max-width: 54ch; line-height: 1.55; }
.ch-tally { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-top: 34px; font-family: var(--font-label); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in oklab, var(--bg) 58%, transparent); }
.ch-tally b { color: var(--accent); font-weight: 700; }

/* the scattered stack — the tools tossed loose on the dark bench, as evidence.
   Each chip sits at a slight tilt; hovering one straightens & warms it, a hint of
   the order the spine brings. */
.stack-scatter { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-top: 40px; max-width: 920px; }
.chip { background: color-mix(in oklab, var(--bg) 6%, var(--ink)); border: 1px solid rgba(247,242,233,.16); border-radius: var(--radius); padding: 13px 16px; min-width: 150px; transition: transform .18s ease, border-color .18s ease, background-color .18s ease; }
.chip-name { display: block; font-weight: 600; font-size: 14px; color: var(--bg); }
.chip-tag { display: inline-block; margin-top: 9px; font-family: var(--font-label); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: color-mix(in oklab, var(--bg) 50%, transparent); }
.chip:nth-child(1) { transform: rotate(-2.5deg); }
.chip:nth-child(2) { transform: rotate(1.5deg) translateY(6px); }
.chip:nth-child(3) { transform: rotate(-1deg) translateY(-3px); }
.chip:nth-child(4) { transform: rotate(2.5deg) translateY(4px); }
.chip:nth-child(5) { transform: rotate(-2deg) translateY(-2px); }
.chip:nth-child(6) { transform: rotate(1.8deg) translateY(5px); }
.chip:nth-child(7) { transform: rotate(-1.5deg) translateY(-4px); }
.chip:nth-child(8) { transform: rotate(2deg) translateY(3px); }
.stack-scatter .chip:hover { transform: rotate(0) translateY(-3px); border-color: var(--accent); background: color-mix(in oklab, var(--accent) 14%, var(--ink)); }
.stack-scatter .chip:hover .chip-tag { color: var(--accent); }
.ch-foot { margin-top: 36px; font-family: var(--font-display); font-weight: var(--w-display); font-size: clamp(20px, 3vw, 28px); letter-spacing: -.01em; line-height: 1.18; max-width: 28ch; color: var(--bg); }
.ch-foot b { color: var(--accent); }

/* the spine (centerpiece) */
.spine-flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; }
.stage { position: relative; padding: 0 14px; }
.stage-line { position: absolute; top: 27px; left: 0; right: 0; height: 3px; background: var(--spine); z-index: 0; }
.stage-num { width: 56px; height: 56px; border-radius: 50%; background: var(--surface); border: 3px solid var(--spine); display: grid; place-items: center; color: var(--spine-deep); margin: 0 auto 18px; position: relative; z-index: 2; }
.stage:nth-child(4) .stage-num { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.stage h3 { font-size: 18px; text-align: center; letter-spacing: -.01em; }
.stage p { font-size: 13.5px; color: var(--sub); text-align: center; margin-top: 8px; line-height: 1.5; }
.stage .arrow { position: absolute; top: 20px; right: -8px; color: var(--spine); z-index: 3; }
.spine-tail { margin-top: 40px; text-align: center; font-family: var(--font-label); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--sub); }
.spine-tail b { color: var(--accent-deep); }

/* spine lifecycle animation — the orange dot rides the line and gets "processed"
   by each station: dot → envelope → quote doc → gift box → delivery truck → heart. */
.spine-fill { position: absolute; top: 27px; left: 0; width: 0; height: 3px; background: var(--accent); border-radius: 2px; z-index: 0; }
.spine-traveler { position: absolute; top: 0; left: 0; z-index: 1; opacity: 0; transition: opacity .3s ease; pointer-events: none; will-change: transform; }
.spine-traveler.shown { opacity: 1; }
.tv-bob { animation: tv-bob 1.2s ease-in-out infinite; }
.tv-scale { display: grid; place-items: center; transition: transform .26s cubic-bezier(.55,0,.7,.5), opacity .2s ease .05s; }
.spine-traveler.tucked .tv-scale { transform: scale(.15); opacity: 0; }
.tv { grid-area: 1 / 1; display: none; }
.spine-traveler.is-dot .tv-dot, .spine-traveler.is-envelope .tv-envelope, .spine-traveler.is-doc .tv-doc,
.spine-traveler.is-gift .tv-gift, .spine-traveler.is-truck .tv-truck, .spine-traveler.is-heart .tv-heart { display: block; }
.tv-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--accent); }
.tv-envelope { width: 30px; } .tv-doc { width: 26px; } .tv-gift { width: 29px; } .tv-truck { width: 50px; } .tv-heart { width: 27px; }
.tv.pop { animation: tv-pop .42s cubic-bezier(.34,1.56,.64,1) both; }
.tv-heart.pop { animation: tv-pop .42s cubic-bezier(.34,1.56,.64,1) both, tv-beat .5s ease-in-out .55s 2; }
.spine-traveler.driving .tv-bob { animation: none; }
.spine-traveler.driving .tv-truck { animation: tv-pop .42s cubic-bezier(.34,1.56,.64,1) both, tv-rumble .32s linear .45s infinite; }
.spine-traveler .wheel { transform-box: fill-box; transform-origin: center; }
.spine-traveler.driving .wheel { animation: tv-spin .5s linear infinite; }
.stage .stage-num { transition: background-color .25s, border-color .25s, color .25s, transform .25s; }
.spine-flow.spine-anim .stage:nth-child(4) .stage-num { background: var(--surface); border-color: var(--spine); color: var(--spine-deep); }
.spine-flow.spine-anim .stage.processing .stage-num { background: var(--accent); border-color: var(--accent); color: var(--on-accent); transform: scale(1.1); }
.spine-flow.spine-anim .stage.knocking .stage-num { animation: st-knock .85s ease-in-out; }
.spine-flow.spine-anim .stage .arrow { opacity: 0; }
.stage .arrow { transition: opacity .4s; }
@keyframes tv-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes tv-pop { from { transform: scale(.2); } 62% { transform: scale(1.18); } to { transform: scale(1); } }
@keyframes tv-beat { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.22); } }
@keyframes tv-rumble { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }
@keyframes tv-spin { to { transform: rotate(360deg); } }
@keyframes st-knock { 0%, 100% { transform: scale(1.1) rotate(0deg); } 16% { transform: scale(1.1) rotate(-8deg); } 34% { transform: scale(1.1) rotate(7deg); } 52% { transform: scale(1.1) rotate(-5deg); } 70% { transform: scale(1.1) rotate(4deg); } 86% { transform: scale(1.1) rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) { .spine-traveler, .spine-fill { display: none; } }

/* engine / your own site */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.engine-card { background: var(--ink); color: var(--bg); border-radius: var(--radius-lg); padding: 30px; }
.engine-card .ec-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid rgba(247,242,233,.14); font-family: var(--font-label); font-size: 12px; letter-spacing: .04em; }
.engine-card .ec-row:first-of-type { border-top: none; }
.engine-card .ec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; }
.engine-card .ec-tag { margin-left: auto; font-size: 10px; color: var(--bg); opacity: .55; }

/* portal — plain paper so the surface-2 bands (engine, library) alternate around it */
.portal { background: var(--bg); }
.portal-mock { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); overflow: hidden; max-width: 380px; }
.pm-head { padding: 18px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.pm-pin { font-family: var(--font-label); font-size: 11px; letter-spacing: .1em; color: var(--accent-deep); background: var(--accent-soft); padding: 5px 11px; border-radius: 999px; }
.pm-body { padding: 20px; }
.pm-status { background: var(--accent-soft); border-radius: var(--radius); padding: 14px 16px; margin-top: 16px; }
.pm-status .s-k { font-family: var(--font-label); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); }
.pm-status .s-v { font-family: var(--font-display); font-weight: var(--w-display); font-size: 17px; margin-top: 6px; }
.pm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.pm-grid div { aspect-ratio: 1; background: var(--surface-2); border-radius: var(--radius); }

/* library / rich content */
.lib-mock { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); overflow: hidden; }
.lib-head { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.lib-title { font-family: var(--font-display); font-weight: var(--w-display); font-size: 16px; }
.lib-count { font-family: var(--font-label); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--sub); }
.lib-row { display: flex; align-items: center; gap: 14px; padding: 13px 20px; border-bottom: 1px solid var(--line); }
.lib-ico { width: 36px; height: 36px; flex: none; border-radius: var(--radius); background: var(--surface-2); display: grid; place-items: center; color: var(--accent-deep); }
.lib-name { font-family: var(--font-label); font-size: 12.5px; }
.lib-meta { font-size: 11.5px; color: var(--sub); margin-top: 2px; }
.lib-tag { margin-left: auto; flex: none; font-family: var(--font-label); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--sub); background: var(--surface-2); border: 1px solid var(--line); padding: 4px 9px; border-radius: 999px; }
.lib-tag.accent { color: var(--accent-deep); background: var(--accent-soft); border-color: transparent; }
.lib-foot { padding: 13px 20px; font-family: var(--font-label); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-deep); background: var(--accent-soft); }
.swamp { margin-top: 24px; border: 1.5px dashed var(--line-2); border-radius: var(--radius); padding: 14px 16px; max-width: 46ch; }
.swamp .s-label { font-family: var(--font-label); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--sub); margin-bottom: 6px; }
.swamp .s-path { font-family: var(--font-label); font-size: 12px; color: var(--sub); text-decoration: line-through; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; overflow-wrap: anywhere; line-height: 1.7; }

/* marketing / repeat */
.mkt-mock { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); overflow: hidden; max-width: 420px; }
.mkt-head { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mkt-segs { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px 0; }
.mkt-seg { font-family: var(--font-label); font-size: 10.5px; letter-spacing: .04em; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); color: var(--sub); }
.mkt-seg.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.mkt-email { margin: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.mkt-brand { padding: 14px 16px 0; font-family: var(--font-display); font-weight: var(--w-display); font-size: 15px; }
.mkt-img { margin: 12px 16px 0; height: 96px; border-radius: calc(var(--radius) - 2px); border: 1px solid var(--line); background: repeating-linear-gradient(-45deg, var(--surface-2) 0 8px, var(--surface) 8px 16px); display: grid; place-items: center; font-family: var(--font-label); font-size: 10px; letter-spacing: .06em; color: var(--sub); }
.mkt-subj { padding: 14px 16px 0; font-family: var(--font-display); font-weight: var(--w-display); font-size: 17px; letter-spacing: -.01em; }
.mkt-body { padding: 6px 16px 0; font-size: 13px; color: var(--sub); line-height: 1.5; }
.mkt-btn { display: inline-block; margin: 12px 16px 16px; background: var(--accent); color: var(--on-accent); font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 9px 14px; border-radius: var(--radius); }
.mkt-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--line); }
.mkt-time { font-family: var(--font-label); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--sub); }

/* ownership payoff */
.own-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.own { border-top: 3px solid var(--accent); padding-top: 20px; }
.own h3 { font-size: 22px; letter-spacing: -.01em; }
.own p { color: var(--sub); font-size: 15px; margin-top: 10px; }

/* final cta */
.cta { text-align: center; background: var(--surface-2); }
.cta h2 { font-size: clamp(38px, 6vw, 68px); line-height: 1; }
.cta h2 b { color: var(--accent); }
.cta p { color: var(--sub); font-size: 18px; margin-top: 18px; }
.cta-btns { display: flex; gap: 12px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.cta-note { margin-top: 18px; font-family: var(--font-label); font-size: 12px; letter-spacing: .04em; color: var(--sub); }

footer { border-top: 1px solid var(--line); padding: 36px 0; }
.foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.foot .f-links { display: flex; gap: 22px; font-family: var(--font-label); font-size: 12px; letter-spacing: .04em; color: var(--sub); }

@media (max-width: 880px) {
  .nav-links { display: none; }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .spine-flow { grid-template-columns: 1fr; gap: 8px; }
  .stage { padding: 18px 0; }
  .stage-line, .stage .arrow, .spine-traveler, .spine-fill { display: none; }
  .stage-num { margin: 0 0 14px; }
  .stage h3, .stage p { text-align: left; }
  .own-grid { grid-template-columns: 1fr; gap: 28px; }
  /* straighten the tossed chips — the tilt is a desktop flourish */
  .stack-scatter { gap: 10px; }
  .stack-scatter .chip { transform: none; flex: 1 1 100%; min-width: 0; }
}