/* Storefront home page (pm-site) and the parts every page shares with it: the four template heroes (A live demo, B
   registration, C paper playground, D shop window), the ask box, the why-us bar, the flow, the reveal on scroll.
   [data-only="<template>"] shows a block in one template only, [data-not="<template>"] in every other one. */
html:not([data-template="live_demo"]) [data-only="live_demo"],
html:not([data-template="registration"]) [data-only="registration"],
html:not([data-template="paper_playground"]) [data-only="paper_playground"],
html:not([data-template="shop_window"]) [data-only="shop_window"],
html[data-template="shop_window"] [data-not="shop_window"] { display: none; }

.eyebrow { display: inline-flex; align-items: center; gap: var(--space-2xs); border-radius: var(--radius-pill); padding: 0.375rem 0.875rem; background: var(--color-accent-soft); color: var(--color-accent-text); font-size: var(--text-sm); font-weight: 650; }
a.eyebrow { min-height: 44px; }
.lead { color: var(--color-muted); font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.65; max-width: 34ch; }

/* The ask box: the advisor's first question, on the home page. */
.ask-wrap { display: grid; gap: var(--space-xs); width: min(100%, 36rem); }
.ask {
  display: flex; align-items: center; gap: var(--space-2xs); min-height: 4rem; padding: 0.375rem 0.375rem 0.375rem var(--space-md);
  border: 2px solid var(--color-ink); border-radius: var(--radius-pill); background: var(--color-surface);
  box-shadow: 0 10px 30px color-mix(in oklch, var(--color-ink) 12%, transparent);
  transition: box-shadow var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.ask:focus-within { transform: translateY(-2px); box-shadow: 0 16px 40px color-mix(in oklch, var(--color-accent) 25%, transparent); border-color: var(--color-accent); }
.ask input { flex: 1; width: 100%; min-width: 0; min-height: 48px; border: 0; background: none; color: var(--color-ink); font: inherit; font-size: var(--text-md); outline: none; }
.ask input::placeholder { color: var(--color-muted); }
.ask button {
  display: inline-flex; min-width: 52px; min-height: 52px; align-items: center; justify-content: center; gap: var(--space-2xs); border: 0; border-radius: var(--radius-pill);
  padding-inline: var(--space-md); background: var(--color-accent); color: var(--color-accent-ink); font: inherit; font-weight: 700; cursor: pointer;
}
.ask button svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-short) var(--ease-out); }
.ask button:hover svg { transform: translateX(4px); }
@media (max-width: 30rem) { .ask button span { display: none; } .ask button { padding-inline: var(--space-sm); } }
.ask-chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.ask-chips:empty { display: none; }
.ask-chips button { min-height: 44px; border: 1px solid var(--color-rule-2); border-radius: var(--radius-pill); padding-inline: var(--space-sm); background: var(--color-surface); color: var(--color-ink-2); font: inherit; font-size: var(--text-sm); cursor: pointer; transition: border-color var(--dur-micro), color var(--dur-micro), transform var(--dur-micro); }
.ask-chips button:hover { border-color: var(--color-accent); color: var(--color-accent-text); transform: translateY(-1px); }

/* ---------- A: live demo ---------- */
.va { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 1.5rem + 5vw, 6rem);
  background-image: radial-gradient(color-mix(in oklch, var(--color-ink) 9%, transparent) 1px, transparent 1.5px); background-size: 22px 22px; }
.va-grid { display: grid; gap: var(--space-2xl); align-items: center; }
@media (min-width: 60rem) { .va-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.va-copy { display: grid; gap: var(--space-md); justify-items: start; }
.va h1 { font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem); line-height: 1.12; letter-spacing: -0.02em; }
.mark { text-decoration: underline; text-decoration-color: var(--color-process-yellow); text-decoration-thickness: 0.28em; text-underline-offset: -0.12em; text-decoration-skip-ink: none;
  animation: mark-in 1200ms 400ms var(--ease-out) both; }
@keyframes mark-in { from { text-decoration-color: transparent; } }
.live-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 0 var(--color-success); animation: live 1.8s infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 0.5rem transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.demo { display: grid; gap: var(--space-sm); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch;
  border: 1px solid var(--color-rule); border-radius: 1.25rem; padding: var(--space-sm); background: var(--color-surface); box-shadow: var(--shadow-md); }
@media (max-width: 34rem) { .demo { grid-template-columns: 1fr; } .demo-chat { min-height: 15rem; } }
.demo-chat { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-2xs); min-height: 20rem; padding: var(--space-xs); border-radius: 0.875rem; background: var(--color-paper-2); overflow: hidden; }
.db, .db-chips { max-width: 88%; display: none; }
.db.is-in, .db-chips.is-in { display: block; animation: pop 360ms var(--ease-out); }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
.db { align-self: flex-start; border-radius: 1rem 1rem 1rem 0.25rem; padding: 0.5rem 0.875rem; background: var(--color-surface); box-shadow: var(--shadow-sm); font-size: var(--text-sm); }
.db--me { align-self: flex-end; border-radius: 1rem 1rem 0.25rem 1rem; background: var(--color-accent); color: var(--color-accent-ink); }
.db--typing.is-in { display: inline-flex; gap: 4px; }
.db--typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-muted); animation: typing 900ms infinite; }
.db--typing i:nth-child(2) { animation-delay: 150ms; }
.db--typing i:nth-child(3) { animation-delay: 300ms; }
@keyframes typing { 50% { transform: translateY(-4px); opacity: 0.4; } }
.db-chips.is-in { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; align-self: flex-end; max-width: 100%; }
.db-chips span { white-space: nowrap; border: 1px solid var(--color-rule-2); border-radius: var(--radius-pill); padding: 0.25rem 0.75rem; background: var(--color-surface); font-size: var(--text-xs); }
.db-chips .on { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent-text); font-weight: 700; }

.ticket { display: grid; align-content: start; gap: var(--space-xs); padding: var(--space-xs); border-radius: 0.875rem; border: 1px dashed var(--color-rule-2); }
.ticket-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2xs); font-size: var(--text-xs); font-weight: 700; color: var(--color-muted); }
.ticket-tag { border-radius: var(--radius-pill); padding: 0 0.5rem; background: var(--color-paper-2); }
.ticket-stage { position: relative; display: grid; place-items: center; height: 9.5rem; perspective: 700px; }
.cm { position: absolute; width: 14px; height: 14px; border-color: var(--color-ink); opacity: 0.55; }
.cm--tl { top: 6px; left: 12%; border-top: 1px solid; border-left: 1px solid; }
.cm--tr { top: 6px; right: 12%; border-top: 1px solid; border-right: 1px solid; }
.cm--bl { bottom: 6px; left: 12%; border-bottom: 1px solid; border-left: 1px solid; }
.cm--br { bottom: 6px; right: 12%; border-bottom: 1px solid; border-right: 1px solid; }
.sheet-wrap { filter: drop-shadow(3px 3px 0 var(--color-paper-3)) drop-shadow(3px 3px 0 var(--color-paper-3)) drop-shadow(3px 3px 0 var(--color-rule)); opacity: 0; transform: translateY(-40px) rotate(-6deg); transition: opacity 500ms var(--ease-out), transform 700ms cubic-bezier(.2,1.4,.4,1); }
.sheet-wrap.is-in { opacity: 1; transform: none; }
.sheet { position: relative; width: 5.5rem; height: 7.75rem; transform-style: preserve-3d; transition: transform 800ms var(--ease-in-out); }
.sheet.is-flipped { animation: flip 1500ms var(--ease-in-out); }
@keyframes flip { 35%, 60% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
.face { position: absolute; inset: 0; display: grid; align-content: start; gap: 5px; padding: 10px; border-radius: 3px; background: white; color: #1a2340; backface-visibility: hidden; box-shadow: 0 1px 0 rgb(0 0 0 / 0.06); }
.face b { font-size: 1.125rem; }
.face i { height: 5px; border-radius: 3px; background: #dfe6f3; }
.face i:nth-of-type(2) { width: 70%; }
.face i:nth-of-type(3) { width: 45%; background: var(--color-process-magenta); opacity: 0.6; }
.face--back { transform: rotateY(180deg); place-content: center; background: #f4f6fb; }
.ticket-specs { display: grid; gap: 2px; margin: 0; font-size: var(--text-xs); }
.ticket-specs div { display: flex; justify-content: space-between; gap: var(--space-2xs); opacity: 0.2; transition: opacity 400ms; }
.ticket-specs div.is-in { opacity: 1; animation: flash 900ms var(--ease-out); }
@keyframes flash { from { background: var(--color-accent-soft); } }
.ticket-specs dt { color: var(--color-muted); }
.ticket-specs dd { margin: 0; font-weight: 700; }
.cmyk { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; height: 6px; }
.cmyk i { border-radius: 3px; background: var(--color-paper-3); transition: background-color 500ms var(--ease-out); }
.cmyk i.is-in:nth-child(1) { background: var(--color-process-cyan); }
.cmyk i.is-in:nth-child(2) { background: var(--color-process-magenta); }
.cmyk i.is-in:nth-child(3) { background: var(--color-process-yellow); }
.cmyk i.is-in:nth-child(4) { background: var(--color-ink); }
/* An example: the price line names no amount (no price the shop never set). */
.ticket-price { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2xs); opacity: 0.25; transition: opacity 400ms; }
.ticket-price.is-in { opacity: 1; }
.ticket-price span { font-size: var(--text-xs); color: var(--color-muted); }
.ticket-price strong { font-size: var(--text-md); }

/* ---------- B: registration ---------- */
.vb { position: relative; overflow: hidden; padding-block: clamp(3rem, 2rem + 6vw, 7.5rem) clamp(4rem, 3rem + 4vw, 6rem); background: var(--color-surface); }
.crop { position: absolute; width: 2.5rem; height: 2.5rem; border-color: var(--color-ink); opacity: 0.5; }
.crop--tl { top: 1.25rem; left: 1.25rem; border-top: 1px solid; border-left: 1px solid; }
.crop--tr { top: 1.25rem; right: 1.25rem; border-top: 1px solid; border-right: 1px solid; }
.crop--bl { bottom: 2.5rem; left: 1.25rem; border-bottom: 1px solid; border-left: 1px solid; }
.crop--br { bottom: 2.5rem; right: 1.25rem; border-bottom: 1px solid; border-right: 1px solid; }
.vb-inner { display: grid; gap: var(--space-lg); }
.vb .eyebrow { justify-self: start; background: none; padding-inline: 0; color: var(--color-ink); }
.reg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.5; animation: spin 12s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.vb-title { position: relative; display: grid; font-size: clamp(2.75rem, 1.2rem + 7vw, 7.5rem); line-height: 1.04; letter-spacing: -0.035em; font-weight: 800; }
.ink { grid-area: 1 / 1; transition: transform 1100ms cubic-bezier(.2,.9,.2,1), opacity 600ms; }
.ink--c { color: var(--color-process-cyan); mix-blend-mode: multiply; transform: translate(-0.06em, 0.04em); }
.ink--m { color: var(--color-process-magenta); mix-blend-mode: multiply; transform: translate(0.05em, -0.035em); }
.ink--y { color: var(--color-process-yellow); mix-blend-mode: multiply; transform: translate(0.03em, 0.06em); }
.ink--k { color: var(--color-ink); opacity: 0; transition-delay: 900ms; }
.is-registered :is(.ink--c, .ink--m, .ink--y) { transform: none; }
.is-registered .ink--k { opacity: 1; }
:root[data-color-mode="dark"] :is(.ink--c, .ink--m, .ink--y) { mix-blend-mode: screen; }
.vb-row { display: grid; gap: var(--space-lg); align-items: end; }
@media (min-width: 60rem) { .vb-row { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); } }
.colorbar { position: absolute; inset: auto 0 0; display: grid; grid-template-columns: repeat(12, 1fr); height: 0.875rem; }
.colorbar i { transform: scaleY(0); transform-origin: bottom; animation: bar-in 500ms var(--ease-out) forwards; }
.colorbar i:nth-child(1) { background: var(--color-process-cyan); }
.colorbar i:nth-child(2) { background: var(--color-process-magenta); animation-delay: 60ms; }
.colorbar i:nth-child(3) { background: var(--color-process-yellow); animation-delay: 120ms; }
.colorbar i:nth-child(4) { background: var(--color-ink); animation-delay: 180ms; }
.colorbar i:nth-child(5) { background: color-mix(in oklch, var(--color-process-cyan) 60%, white); animation-delay: 240ms; }
.colorbar i:nth-child(6) { background: color-mix(in oklch, var(--color-process-magenta) 60%, white); animation-delay: 300ms; }
.colorbar i:nth-child(7) { background: color-mix(in oklch, var(--color-process-yellow) 60%, white); animation-delay: 360ms; }
.colorbar i:nth-child(8) { background: color-mix(in oklch, var(--color-ink) 60%, white); animation-delay: 420ms; }
.colorbar i:nth-child(9) { background: color-mix(in oklch, var(--color-process-cyan) 25%, white); animation-delay: 480ms; }
.colorbar i:nth-child(10) { background: color-mix(in oklch, var(--color-process-magenta) 25%, white); animation-delay: 540ms; }
.colorbar i:nth-child(11) { background: color-mix(in oklch, var(--color-process-yellow) 25%, white); animation-delay: 600ms; }
.colorbar i:nth-child(12) { background: color-mix(in oklch, var(--color-ink) 25%, white); animation-delay: 660ms; }
@keyframes bar-in { to { transform: none; } }
/* B's ink band: each enabled product's published name once, still, wrapping inside the window (Q12, Q13). */
.marquee { background: var(--color-ink); color: var(--color-surface); }
.marquee:not(:has(span)) { display: none; }
.marquee-track { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2xs) var(--space-lg); padding-block: var(--space-sm); font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 750; }
.marquee-track span { display: inline-flex; align-items: center; gap: var(--space-lg); }
.marquee-track span:not(:last-child)::after { content: "✦"; color: var(--color-process-yellow); }

/* ---------- C: paper playground ---------- */
.vc { position: relative; overflow: hidden; min-height: clamp(34rem, 70vh, 46rem); display: grid; align-items: center; padding-block: var(--space-3xl);
  background: color-mix(in oklch, var(--color-accent-soft) 70%, var(--color-surface)); }
.vc-copy { position: relative; z-index: 2; display: grid; justify-items: center; gap: var(--space-md); text-align: center; }
.vc h1 { max-width: 16ch; font-size: clamp(2.25rem, 1.3rem + 3.4vw, 4.25rem); line-height: 1.1; letter-spacing: -0.025em; }
.vc .lead { max-width: 30ch; }
.vc .ask-wrap { justify-items: center; }
.vc .ask-chips { justify-content: center; }
.vc-stage { position: absolute; inset: 0; --px: 0; --py: 0; pointer-events: none; }
/* Each paper's place, tilt and depth: stylesheet values, never inline styles (the content policy is style-src 'self'). */
.paper { position: absolute; left: var(--x); top: var(--y);
  transform: translate(calc(var(--px) * var(--z) * -20px), calc(var(--py) * var(--z) * -20px)) rotate(var(--r));
  transition: transform 600ms var(--ease-out); animation: float 6s ease-in-out infinite; animation-delay: calc(var(--z) * -2s); }
@keyframes float { 50% { translate: 0 -12px; } }
.p-card { --x: 2%; --y: 10%; --r: -14deg; --z: 1.4; display: grid; align-content: space-between; width: 9.5rem; height: 5.75rem; padding: 0.75rem; border-radius: 6px; background: var(--color-ink); color: white; box-shadow: 0 18px 36px rgb(15 25 60 / 0.25); }
.p-card b { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border-radius: 5px; background: var(--color-accent); font-size: 1rem; }
.p-card i { height: 5px; width: 70%; border-radius: 3px; background: rgb(255 255 255 / 0.35); }
.p-book { --x: calc(95% - 7.5rem); --y: 8%; --r: 10deg; --z: 1; width: 7.5rem; height: 9.5rem; border-radius: 4px 8px 8px 4px; background: var(--color-accent); box-shadow: inset 10px 0 0 rgb(0 0 0 / 0.18), 0 22px 40px rgb(120 20 70 / 0.28); }
.p-sticker { --x: calc(94% - 6rem); --y: 58%; --r: 16deg; --z: 1.8; width: 6rem; height: 6rem; border-radius: 50%; border: 5px solid white; background: var(--color-process-yellow); box-shadow: 0 14px 30px rgb(120 90 0 / 0.25); }
.p-flyer { --x: 5%; --y: 56%; --r: 8deg; --z: 0.8; display: grid; align-content: start; gap: 6px; width: 7rem; height: 9.75rem; padding: 0.75rem; border-radius: 3px; background: white; box-shadow: 0 18px 34px rgb(15 25 60 / 0.18); }
.p-flyer i { height: 2.5rem; border-radius: 3px; background: var(--color-process-cyan); opacity: 0.7; }
.p-flyer i + i { height: 6px; opacity: 1; background: #dfe6f3; }
.p-flyer i + i + i { width: 60%; }
.p-badge { --x: 76%; --y: 80%; --r: -8deg; --z: 1.2; width: 5rem; height: 7rem; border-radius: 8px; background: white; box-shadow: 0 16px 30px rgb(15 25 60 / 0.2); }
.p-badge i { display: block; width: 1.75rem; height: 0.3rem; margin: 0.6rem auto; border-radius: 3px; background: #d5dbe8; }
.p-dot { --x: 16%; --y: 86%; --r: 0deg; --z: 2.2; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--color-process-cyan); opacity: 0.8; }
@media (max-width: 47.99rem) {
  .vc { align-items: end; padding-block: 12rem var(--space-2xl); }
  .paper { scale: 0.62; }
  .p-card { --x: 0%; --y: 3%; }
  .p-book { --x: 64%; --y: 1%; }
  .p-sticker { --x: 38%; --y: 9%; }
  .p-flyer, .p-badge, .p-dot { display: none; }
}

/* ---------- D: shop window ---------- */
.vd-hero { padding-block: var(--space-md) var(--space-lg); }
.vd-fallback { padding-block: var(--space-2xl); background: var(--color-surface); border-block-end: 1px solid var(--color-rule); }
.vd-fallback-inner { display: grid; gap: var(--space-md); justify-items: start; }
.vd-fallback h1 { max-width: 18ch; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); }

/* The why-us bar: the template's words, or the shop's capabilities once it writes its own (Q2). */
.vd-usp { border-block: 1px solid var(--color-rule); background: var(--color-surface); }
.usp-head { display: grid; gap: var(--space-2xs); padding-block-start: var(--space-md); }
.usp-head p { color: var(--color-muted); }
.usp-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); margin-block: 0; padding: 0; list-style: none; }
.usp-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.75rem; align-items: center; padding: 1.125rem 0.5rem; }
.usp-list svg { grid-row: span 2; width: 2.5rem; height: 2.5rem; padding: 0.55rem; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent-text);
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.usp-list strong { font-size: var(--text-base); line-height: 1.3; }
.usp-list span { color: var(--color-muted); font-size: var(--text-sm); }

/* ---------- Shared sections ---------- */
.home-products .product-grid { gap: var(--space-xl) var(--space-md); }
.product-tile > a { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 300ms var(--ease-out); }
.product-tile .product-photo { transition: box-shadow 300ms var(--ease-out); }
.product-tile > a:hover .product-photo { box-shadow: 0 20px 40px color-mix(in oklch, var(--color-ink) 18%, transparent); }

/* Reveal on scroll (storefront.js marks [data-reveal] and adds .is-in); siblings follow one another by their place. */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
[data-reveal]:nth-child(2) { transition-delay: 70ms; }
[data-reveal]:nth-child(3) { transition-delay: 140ms; }
[data-reveal]:nth-child(4) { transition-delay: 210ms; }
[data-reveal]:nth-child(5) { transition-delay: 280ms; }
[data-reveal]:nth-child(n+6) { transition-delay: 350ms; }
[data-reveal].is-in { opacity: 1; transform: none; }

.flow-track { position: relative; display: grid; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
@media (min-width: 56rem) { .flow-track { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.flow-track::before, .flow-track::after { content: ""; position: absolute; top: 1.75rem; left: 1.75rem; right: 1.75rem; height: 2px; background: var(--color-rule); }
.flow-track::after { background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform 1600ms var(--ease-in-out) 300ms; }
.flow-track.is-in::after { transform: scaleX(1); }
@media (max-width: 55.99rem) {
  .flow-track::before, .flow-track::after { bottom: 1.75rem; right: auto; width: 2px; height: auto; transform-origin: top; }
  .flow-track::after { transform: scaleY(0); }
  .flow-track.is-in::after { transform: scaleY(1); }
  .flow-track li { grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: var(--space-sm); }
  .flow-track li > :not(.flow-icon) { grid-column: 2; }
  .flow-track .flow-icon { grid-row: span 2; margin: 0; }
}
.flow-track li { position: relative; display: grid; gap: var(--space-3xs); align-content: start; }
.flow-icon { position: relative; z-index: 1; display: grid; width: 3.5rem; height: 3.5rem; place-items: center; margin-block-end: var(--space-xs); border: 2px solid var(--color-rule-2); border-radius: 50%; background: var(--color-surface); color: var(--color-muted);
  transition: border-color 400ms, color 400ms, background-color 400ms, transform 400ms cubic-bezier(.2,1.5,.4,1); }
.flow-icon svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.flow-track.is-in .flow-icon { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-accent-ink); transform: scale(1.06); }
.flow-track.is-in li:nth-child(2) .flow-icon { transition-delay: 500ms; }
.flow-track.is-in li:nth-child(3) .flow-icon { transition-delay: 1000ms; }
.flow-track.is-in li:nth-child(4) .flow-icon { transition-delay: 1500ms; }
.flow-track strong { font-size: var(--text-md); }
.flow-track span:not(.flow-icon) { color: var(--color-muted); }
/* The shop's price note, one line under the flow (Q2). */
.flow-notice { display: grid; gap: var(--space-3xs); margin-block-start: var(--space-xl); padding-block-start: var(--space-md); border-block-start: 1px solid var(--color-rule); }
.flow-notice strong { font-size: var(--text-base); }
.flow-notice p { max-width: 62ch; color: var(--color-muted); }

/* The ask strip above the footer of every inner page */
.ask-strip { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
.ask-strip-inner { display: grid; gap: var(--space-md); align-items: center; }
@media (min-width: 56rem) { .ask-strip-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); } }
.ask-strip h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); }
.ask-strip p { color: var(--color-muted); }

/* ---------- The shop's marketing images: every carousel stacks its slides in one grid cell (nothing laid out past the
   window's edge); a slide not shown is inert. Each template draws them its own way in templates.css. ---------- */
.promo-section { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.promo-row { padding-block-end: var(--space-xl); }
.promo { position: relative; display: grid; gap: var(--space-sm); }
.promo-frame { position: relative; }
.promo-track { display: grid; touch-action: pan-y; }
.promo-slide { grid-area: 1 / 1; display: block; overflow: hidden; aspect-ratio: 2 / 1; border-radius: var(--radius-photo); background: var(--color-paper-2);
  opacity: 0; transition: opacity 600ms var(--ease-out), transform 650ms var(--ease-out); }
.promo-slide.is-active { z-index: 2; opacity: 1; }
.promo-slide img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.promo-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.promo-count { margin: 0; color: var(--color-muted); font-variant-numeric: tabular-nums; font-weight: 700; }
.promo-dots { display: flex; flex-wrap: wrap; }
.promo-dots button { display: grid; width: 44px; height: 44px; padding: 0; place-items: center; border: 0; background: none; cursor: pointer; }
.promo-dots i { display: block; width: 1.75rem; height: 4px; overflow: hidden; border-radius: 2px; background: var(--color-rule-2); }
.promo-dots button[aria-current="true"] i { background: var(--color-accent); }
.promo-arrows { display: flex; gap: var(--space-2xs); }
.promo-arrows button { width: 48px; height: 48px; border: 1px solid var(--color-rule-2); border-radius: 50%; background: var(--color-surface); color: var(--color-ink); font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.promo .crop { display: none; }
.promo--compact { width: min(100%, 40rem); }
/* With the banners first among the shown sections, live_demo, registration and paper_playground show them in the hero, in
   view on arrival: live_demo in place of its example, registration beside its headline, paper_playground under its ask box. */
@media (min-width: 60rem) {
  .vb-inner:has(> .vb-promo:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-2xl); align-items: center; }
  .vb-inner:has(> .vb-promo:not([hidden])) > :not(.vb-promo) { grid-column: 1; }
  .vb-inner:has(> .vb-promo:not([hidden])) .vb-row { grid-template-columns: minmax(0, 1fr); }
  .vb-inner:has(> .vb-promo:not([hidden])) .vb-title { font-size: clamp(2.75rem, 1.2rem + 4vw, 5rem); }
  .vb-promo { grid-column: 2; grid-row: 1 / span 3; }
}
.vc-promo { width: min(100%, 30rem); }

/* ---------- About: a teaser on the home page, a page with the shop's story and work ---------- */
.about-teaser { display: grid; gap: var(--space-lg); align-items: center; }
@media (min-width: 52rem) { .about-teaser { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.about-teaser img, .about-intro img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--v-radius-lg, var(--radius-card)); }
.about-teaser > div { display: grid; gap: var(--space-sm); justify-items: start; }
.about-teaser p:not(.eyebrow) { color: var(--color-ink-2); font-size: var(--text-md); }
.about-intro { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 52rem) { .about-intro { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.about-intro > div { display: grid; gap: var(--space-sm); }
.about-intro p { color: var(--color-ink-2); font-size: var(--text-md); line-height: 1.8; }
.about-subhead { margin-block: var(--space-2xl) var(--space-md); }
.about-contacts { margin-block-start: var(--space-xl); padding-block-end: 0; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--space-md); }
@media (min-width: 52rem) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gallery figure { display: grid; gap: var(--space-2xs); margin: 0; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--v-radius-lg, var(--radius-card)); }
.gallery figcaption { color: var(--color-muted); font-size: var(--text-sm); }

/* ---------- Visit us: a drawn map, the address, opening hours and the way there ---------- */
.about-page .visit-card { margin-block-start: var(--space-2xl); }
.visit-card { display: grid; gap: var(--space-lg); align-items: center; padding: var(--space-md); border: var(--v-border, 1px solid var(--color-rule)); border-radius: var(--v-radius-lg, var(--radius-card));
  background: var(--color-surface); box-shadow: var(--v-shadow, none); }
@media (min-width: 52rem) { .visit-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.visit-info { display: grid; gap: var(--space-xs); justify-items: start; }
.visit-info :is(h2, h3) { font-size: var(--text-lg); }
.visit-address { font-size: var(--text-md); font-weight: 700; overflow-wrap: anywhere; }
.visit-hours { display: grid; gap: 2px; margin: 0; padding: 0; color: var(--color-ink-2); list-style: none; }
.visit-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding-block-start: var(--space-2xs); }
.visit-map { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--v-radius, var(--radius-input));
  background-color: color-mix(in oklch, var(--color-accent-soft) 60%, var(--color-paper));
  background-image: repeating-linear-gradient(0deg, transparent 0 46px, color-mix(in oklch, var(--color-surface) 70%, transparent) 46px 50px),
    repeating-linear-gradient(90deg, transparent 0 70px, color-mix(in oklch, var(--color-surface) 70%, transparent) 70px 74px); }
.visit-map .road { position: absolute; background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-rule); }
.road--a { left: 0; right: 0; top: 58%; height: 14px; rotate: -4deg; }
.road--b { top: 0; bottom: 0; left: 34%; width: 12px; rotate: 4deg; }
.road--c { top: 20%; left: 60%; width: 35%; height: 8px; rotate: 20deg; }
.visit-map .pin { position: absolute; left: 36%; top: 50%; width: 30px; height: 30px; translate: -50% -100%; border-radius: 50% 50% 50% 0; rotate: -45deg;
  background: var(--color-accent); box-shadow: 0 6px 12px rgb(0 0 0 / 0.25); animation: pin-drop 700ms 300ms cubic-bezier(.2,1.4,.4,1) both; }
.visit-map .pin::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--color-surface); }
@keyframes pin-drop { from { opacity: 0; translate: -50% -200%; } }
.contact-card--wide { grid-column: 1 / -1; padding: 0; border: 0 !important; box-shadow: none !important; background: none !important; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
  .ink--c, .ink--m, .ink--y { transform: none; }
  .ink--k { opacity: 1; }
  .colorbar i { transform: none; }
  .sheet-wrap.is-in { transform: none; }
  .flow-track::after { transform: none; }
}