/* The site preview (/preview/, 2026-10-26). Two layers: the page's own steps (pv-steps, pv-packs, pv-swatches, pv-seg,
   pv-set) in the site's style, and the preview stage (.pv and its parts), a miniature site drawn in one of four theme
   packs. Each pack sets tokens on .pv; the visitor's two colours arrive as --ac (primary) and --hl (accent) on each
   copy, set by /assets/preview.js. Motion is transform and opacity only, and reduced motion turns it off. */

/* ----- the steps ----- */
.pv-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:14px}
.pv-steps li{display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid rgba(20,15,11,.12);border-radius:14px}
.pv-steps b{font-weight:600}.pv-steps span{color:rgba(20,15,11,.72);font-size:15px;line-height:1.5}
@media (min-width:760px){.pv-steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pv-build .wrap{display:flex;flex-direction:column;gap:40px}
.pv-step h2{margin-top:4px}
.pv-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:16px 0 0}
.pv-packs{border:0;padding:0;margin:16px 0 0;display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:640px){.pv-packs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.pv-packs{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pv-pack{position:relative;display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid rgba(20,15,11,.14);border-radius:16px;cursor:pointer;background:#fff;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.pv-pack:hover{transform:translateY(-2px);box-shadow:0 12px 30px -18px rgba(20,15,11,.35)}
.pv-pack input{position:absolute;opacity:0;width:1px;height:1px}
.pv-pack:has(input:checked){border-color:#140f0b;box-shadow:inset 0 0 0 1px #140f0b}
.pv-pack:has(input:focus-visible){outline:2px solid #140f0b;outline-offset:3px}
.pv-pack b{font-weight:600}.pv-pack > span:last-child{color:rgba(20,15,11,.72);font-size:14px;line-height:1.5}
.pv-pack-art{display:grid;grid-template-columns:1.2fr .8fr;grid-template-rows:14px 1fr;gap:6px;height:96px;border-radius:10px;padding:8px;border:1px solid rgba(20,15,11,.1)}
.pv-pack-art i{display:block;border-radius:4px}
.pv-pack-art i:nth-child(1){grid-column:1/3;height:10px;width:46%}
.pv-art-launch{background:#fbfbfe}.pv-art-launch i{background:#e3e2f0}.pv-art-launch i:nth-child(1){background:#b8321f}
.pv-art-carbon{background-color:#1c1d20;background-image:linear-gradient(27deg,#151618 5px,transparent 5px),linear-gradient(207deg,#151618 5px,transparent 5px),linear-gradient(27deg,#202124 5px,transparent 5px),linear-gradient(207deg,#202124 5px,transparent 5px),linear-gradient(90deg,#17181b 10px,transparent 10px),linear-gradient(#1d1e21 25%,#1a1b1e 25%,#1a1b1e 50%,transparent 50%,transparent 75%,#25262a 75%,#25262a);background-size:20px 20px;background-position:0 5px,10px 0,0 10px,10px 5px,0 0,0 0}
.pv-art-carbon i{background:#2a2c32}.pv-art-carbon i:nth-child(1){background:#d4a24c}
.pv-art-lab{background:#f6f7f9;background-image:linear-gradient(rgba(15,17,21,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(15,17,21,.06) 1px,transparent 1px);background-size:16px 16px}
.pv-art-lab i{background:#dfe3ea}.pv-art-lab i:nth-child(1){background:#1f4fd8}.pv-art-lab i:nth-child(3){background:#1c1d20}
.pv-art-heritage{background:linear-gradient(90deg,#f4efe6 55%,#1c1d20 55%)}
.pv-art-heritage i{background:#e3d9c8}.pv-art-heritage i:nth-child(1){background:#c2743a}.pv-art-heritage i:nth-child(3){background:#2a2c32}
.pv-colours{display:grid;grid-template-columns:1fr;gap:20px;margin-top:16px}
@media (min-width:760px){.pv-colours{grid-template-columns:1fr 1fr}}
.pv-swatches{border:1px solid rgba(20,15,11,.14);border-radius:16px;padding:14px 14px 10px;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.pv-swatches legend{font-weight:600;padding:0 6px}
.pv-swatch{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;width:64px;cursor:pointer;font-size:11px;color:rgba(20,15,11,.72);text-align:center}
.pv-swatch input[type=radio]{position:absolute;opacity:0;width:1px;height:1px}
.pv-swatch i{display:block;width:40px;height:40px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(20,15,11,.18);transition:transform .15s ease}
.pv-swatch:hover i{transform:scale(1.06)}
.pv-swatch:has(input[type=radio]:checked) i,.pv-swatch:has(input[type=radio]:checked) input[type=color]{box-shadow:0 0 0 2px #140f0b}
.pv-swatch:has(input:focus-visible) i,.pv-swatch:has(input[type=color]:focus-visible) input[type=color]{outline:2px solid #140f0b;outline-offset:3px}
.pv-swatch input[type=color]{width:40px;height:40px;border-radius:50%;border:2px solid #fff;padding:0;background:none;cursor:pointer;box-shadow:0 0 0 1px rgba(20,15,11,.18)}
.pv-swatch input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.pv-swatch input[type=color]::-webkit-color-swatch{border:0;border-radius:50%}
.pv-seg{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.pv-seg button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 12px;border-radius:999px;border:1px solid rgba(20,15,11,.2);background:#fff;color:#140f0b;font:600 13px/1 inherit;cursor:pointer}
.pv-seg button[aria-pressed="true"]{border-color:#140f0b;box-shadow:inset 0 0 0 1px #140f0b}
.pv-seg button:focus-visible{outline:2px solid #140f0b;outline-offset:3px}
.pv-dot{display:inline-block;width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.15);vertical-align:middle}
.pv-dot-ac{background:var(--ac)}.pv-dot-hl{background:var(--hl)}
.pv-set{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 12px;scrollbar-width:thin}
.pv-wrap{flex:0 0 88vw;max-width:560px;scroll-snap-align:start;display:flex;flex-direction:column;gap:8px;min-width:0}
@media (min-width:1000px){.pv-set{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}.pv-wrap{flex:none;max-width:none}}
.pv-label{margin:0;font-size:13px;color:rgba(20,15,11,.72);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pv-label b{color:#140f0b;font-weight:600}
.pv-label span:last-child{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}

/* ----- the stage: a miniature site ----- */
.pv{--ac:#b8321f;--hl:#ff6a1a;--bg:#fbfbfe;--surface:#fff;--alt:#f2f1fb;--ink:#0e0e16;--muted:#63637a;--border:#e3e2f0;--on-ac:#fff;
  --display:"Fraunces",ui-serif,Georgia,serif;--body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--mono:ui-monospace,Menlo,Consolas,monospace;--voice:"Fraunces",ui-serif,Georgia,serif;
  background:var(--bg);color:var(--ink);font:13px/1.5 var(--body);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 1px 2px rgba(14,14,22,.04),0 10px 24px -14px rgba(14,14,22,.18);min-width:0}
.pv *{box-sizing:border-box;min-width:0}
.pv img{max-width:100%;display:block}
.pv h3,.pv p{margin:0}
.pv-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--surface)}
.pv-brand{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-.01em;display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-brand img{height:22px;width:auto;max-width:120px}
.pv-wrap{container-type:inline-size}
.pv-nav{display:none;gap:12px;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;min-width:0}
@container (min-width: 520px){.pv-nav{display:flex}}
.pv-brand{max-width:55%}
.pv-btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:10px;font-weight:600;font-size:12px;white-space:nowrap;border:1px solid var(--border)}
.pv-btn-ac{background:var(--ac);border-color:var(--ac);color:var(--on-ac)}
.pv-btn-ghost{background:transparent;color:var(--ink)}
.pv-hero{padding:28px 16px 20px;display:flex;flex-direction:column;gap:10px}
.pv-eyebrow{font:600 10px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ac)}
.pv-h1{font-family:var(--display);font-weight:700;font-size:26px;line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
.pv-h1 .hl{color:var(--hl)}
.pv-lead{color:var(--muted);font-size:13px;max-width:52ch}
.pv-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.pv-figure{margin:0 16px 16px;border-radius:12px;overflow:hidden;background:var(--alt);position:relative;aspect-ratio:16/10;max-width:100%}
.pv-figure img{width:100%;height:100%;object-fit:cover}
.pv-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0 16px 16px}
.pv-pane{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.pv-pane img{aspect-ratio:1;object-fit:cover;width:100%}
.pv-pane span{display:block;padding:6px 8px;font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-cards{display:grid;grid-template-columns:1fr;gap:8px;padding:0 16px 16px}
@media (min-width:480px){.pv-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pv-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:6px;transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .25s}
.pv-card:hover{transform:translateY(-2px);border-color:var(--hl)}
.pv-card b{font-family:var(--display);font-weight:700;font-size:14px;line-height:1.2}
.pv-card span{color:var(--muted);font-size:11px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pv-quote{padding:20px 16px;background:var(--alt);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.pv-quote p{font-family:var(--voice);font-style:italic;font-size:15px;line-height:1.4;color:var(--ink);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.pv-doors{display:flex;gap:8px;flex-wrap:wrap;padding:16px}
.pv-foot{display:flex;justify-content:space-between;gap:10px;padding:12px 16px;font-size:10px;color:var(--muted);border-top:1px solid var(--border);flex-wrap:wrap}

/* theme packs */
.pv-carbon{--bg:#121316;--surface:#17191d;--alt:#15171b;--ink:#e8e9ec;--muted:#a9adb6;--border:#2a2c32;--on-ac:#121316;
  --display:"Syne","Sora",system-ui,sans-serif;--body:"Sora","Segoe UI",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;--voice:"Instrument Serif",Georgia,serif}
.pv-carbon .pv-head,.pv-carbon .pv-hero,.pv-carbon .pv-doors{background-color:#1c1d20;background-image:linear-gradient(27deg,#151618 5px,transparent 5px),linear-gradient(207deg,#151618 5px,transparent 5px),linear-gradient(27deg,#202124 5px,transparent 5px),linear-gradient(207deg,#202124 5px,transparent 5px),linear-gradient(90deg,#17181b 10px,transparent 10px),linear-gradient(#1d1e21 25%,#1a1b1e 25%,#1a1b1e 50%,transparent 50%,transparent 75%,#25262a 75%,#25262a);background-size:20px 20px;background-position:0 5px,10px 0,0 10px,10px 5px,0 0,0 0}
.pv-carbon .pv-btn-ghost{color:#e8e9ec;border-color:#3a3d45}
.pv-lab{--bg:#f6f7f9;--surface:#fff;--alt:#eef1f6;--ink:#0f1115;--muted:#5b6170;--border:#dfe3ea;--on-ac:#fff;
  --display:"Bricolage Grotesque","Manrope",system-ui,sans-serif;--body:"Manrope","Segoe UI",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,Consolas,monospace;--voice:"Newsreader",Georgia,serif}
.pv-lab .pv-hero{background-image:linear-gradient(rgba(15,17,21,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(15,17,21,.05) 1px,transparent 1px);background-size:40px 40px}
.pv-lab .pv-figure,.pv-lab .pv-foot{background-color:#1c1d20;background-image:linear-gradient(27deg,#151618 5px,transparent 5px),linear-gradient(207deg,#151618 5px,transparent 5px),linear-gradient(27deg,#202124 5px,transparent 5px),linear-gradient(207deg,#202124 5px,transparent 5px),linear-gradient(90deg,#17181b 10px,transparent 10px),linear-gradient(#1d1e21 25%,#1a1b1e 25%,#1a1b1e 50%,transparent 50%,transparent 75%,#25262a 75%,#25262a);background-size:20px 20px;background-position:0 5px,10px 0,0 10px,10px 5px,0 0,0 0}
.pv-lab .pv-figure{padding:10px}.pv-lab .pv-figure img{border-radius:8px}
.pv-lab .pv-foot{color:#c9ccd4;border-color:#2a2c32}
.pv-heritage{--bg:#f4efe6;--surface:#fbf8f2;--alt:#efe7d8;--ink:#2a2016;--muted:#6b5a44;--border:#e3d9c8;--on-ac:#fff;
  --display:"Fraunces",Georgia,serif;--body:"Space Grotesk","Segoe UI",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;--voice:"Fraunces",Georgia,serif}
.pv-heritage .pv-figure,.pv-heritage .pv-cards{background-color:#1c1d20;background-image:linear-gradient(27deg,#151618 5px,transparent 5px),linear-gradient(207deg,#151618 5px,transparent 5px),linear-gradient(27deg,#202124 5px,transparent 5px),linear-gradient(207deg,#202124 5px,transparent 5px),linear-gradient(90deg,#17181b 10px,transparent 10px),linear-gradient(#1d1e21 25%,#1a1b1e 25%,#1a1b1e 50%,transparent 50%,transparent 75%,#25262a 75%,#25262a);background-size:20px 20px;background-position:0 5px,10px 0,0 10px,10px 5px,0 0,0 0}
.pv-heritage .pv-figure{margin:0;border-radius:0;padding:16px;aspect-ratio:auto}
.pv-heritage .pv-figure img{border-radius:10px;aspect-ratio:16/10}
.pv-heritage .pv-cards{padding:16px}
.pv-heritage .pv-card{background:#17191d;border-color:#2a2c32;color:#e8e9ec}.pv-heritage .pv-card b{color:#fff}.pv-heritage .pv-card span{color:#a9adb6}

/* marks and motion (carbon family) */
.pv-reticle{position:relative}
.pv-carbon .pv-reticle::before,.pv-carbon .pv-reticle::after,.pv-lab .pv-reticle::before,.pv-lab .pv-reticle::after,.pv-heritage .pv-reticle::before,.pv-heritage .pv-reticle::after{content:"";position:absolute;width:16px;height:16px;border:1.5px solid var(--hl);z-index:1;animation:pv-pulse 3.2s ease-in-out infinite}
.pv-carbon .pv-reticle::before,.pv-lab .pv-reticle::before,.pv-heritage .pv-reticle::before{left:8px;top:8px;border-right:0;border-bottom:0}
.pv-carbon .pv-reticle::after,.pv-lab .pv-reticle::after,.pv-heritage .pv-reticle::after{right:8px;bottom:8px;border-left:0;border-top:0;animation-delay:1.6s}
.pv-carbon .pv-hero::after{content:"";position:absolute;inset:-60% -30%;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.05) 50%,transparent 58%);animation:pv-sweep 16s ease-in-out infinite;pointer-events:none}
.pv-carbon .pv-hero{position:relative;overflow:hidden}
@keyframes pv-pulse{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes pv-sweep{0%{transform:translateX(-35%)}100%{transform:translateX(35%)}}
.pv-in{animation:pv-rise .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes pv-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.pv *,.pv *::before,.pv *::after,.pv-in{animation:none !important;transition:none !important}}