/* cvo: classic website vs twelvebell website, side by side (js/cvo.js). The two mock pages size off the
   window width (container units), so the same picture reads at 360 px and at 600 px. */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/instrument-serif-display.woff2') format('woff2')}

.cvo-in{max-width:1180px;margin:0 auto}
/* under a chapter header the comparison keeps the same gap as every other chapter's stage (.b-stage): without it
   the WEBSITE 1 / 2 pills sat 1px under the subhead (Luis, 2026-10-11) */
.b-chapter-head + .cvo{margin-top:clamp(40px,4.5vw,64px)}
.cvo-head{text-align:center;margin:0 auto clamp(28px,4vw,48px)}
.cvo-sub{margin:14px auto 0;max-width:46ch;font-size:clamp(16px,1.6vw,19px);line-height:1.45;color:var(--text-2);text-wrap:balance}
.cvo-grid{display:grid;grid-template-columns:1fr;gap:clamp(40px,5vw,56px)}
@media (min-width:900px){.cvo-grid{grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,36px)}}

.cvo-side{margin:0;display:grid;gap:14px;align-content:start}
.cvo-cap{display:grid;gap:4px}
.cvo-tag{justify-self:start;font:600 12px/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:99px;background:var(--bg-2);color:var(--text-2);border:1px solid var(--line)}
.cvo-new .cvo-tag{background:var(--accent-tint);color:var(--accent);border-color:transparent}
.cvo-name{margin:6px 0 0;font-size:clamp(22px,2.4vw,30px);font-weight:600;letter-spacing:-.03em;line-height:1.1;color:var(--ink)}
.cvo-what{margin:0;font-size:15px;line-height:1.45;color:var(--text-2);max-width:44ch}

.cvo-status{margin:0;min-height:22px;display:flex;align-items:center;gap:8px;font:500 14px/1.3 var(--font-mono,ui-monospace,monospace);color:var(--text-2)}
.cvo-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--text-3,#9aa0a6);flex:none}
.cvo-status.is-live::before{background:#1f9d55;box-shadow:0 0 0 4px rgba(31,157,85,.15)}
.cvo-status:empty{visibility:hidden}

.cvo-result{margin:0;padding:14px 16px;border-radius:14px;font-size:16px;line-height:1.45;background:var(--bg-2);color:var(--ink);border:1px solid var(--line)}
.cvo-result b{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px;color:var(--text-2)}
.cvo-old .cvo-result{color:var(--text-2)}
.cvo-new .cvo-result{border-color:color-mix(in srgb,var(--accent) 35%,transparent);background:var(--accent-tint)}
.cvo-new .cvo-result b{color:var(--accent)}
.cvo-js .cvo-result{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.cvo-js .is-done .cvo-result{opacity:1;transform:none}
.cvo-again{justify-self:center;margin-top:clamp(20px,3vw,32px)}
.cvo-again[hidden]{display:none}
.cvo-foot{display:grid;justify-items:center}

/* the browser window */
.cvo-win{position:relative;container-type:inline-size;height:clamp(420px,56svh,560px);border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 18px 50px -24px rgba(10,14,30,.35);background:#fff;display:flex;flex-direction:column;isolation:isolate}
.cw-bar{flex:none;display:flex;align-items:center;gap:10px;height:34px;padding:0 12px;background:#eef0f3;border-bottom:1px solid #dfe2e7}
.cw-dots{display:flex;gap:5px}.cw-dots i{width:9px;height:9px;border-radius:50%;background:#cdd1d8}
.cw-url{flex:1;max-width:260px;margin:0 auto;padding:3px 10px;border-radius:6px;background:#fff;font:12px/1.4 var(--font-sans);color:#59606b;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cw-view{position:relative;flex:1;overflow:hidden}
.cw-page{position:absolute;inset:0 0 auto 0;transition-property:transform;transition-timing-function:cubic-bezier(.45,.05,.25,1);will-change:transform}
.cw-page img{display:block;width:100%;object-fit:cover}
.co-cards img,.cn-cards img{height:auto}
.cw-cursor{position:absolute;left:50%;top:60%;z-index:5;width:18px;height:18px;margin:-2px 0 0 -2px;opacity:0;pointer-events:none;transition:left .65s cubic-bezier(.45,.05,.25,1),top .65s cubic-bezier(.45,.05,.25,1),opacity .3s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l16 10-7 1.5L9.5 21z' fill='%23111' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain}
.cw-cursor.is-on{opacity:1}
.cw-cursor::after{content:"";position:absolute;left:-10px;top:-10px;width:24px;height:24px;border-radius:50%;background:rgba(40,110,255,.35);transform:scale(0);opacity:0}
.cw-cursor.is-click::after{animation:cw-click .45s ease-out}
@keyframes cw-click{0%{transform:scale(.2);opacity:1}100%{transform:scale(1.4);opacity:0}}

/* classic template page: tidy, centred, stock serif headings */
.co{background:#fff;color:#3a3a3a;font:clamp(10px,2.5cqw,14px)/1.55 Arial,Helvetica,sans-serif}
.co-head{display:flex;align-items:center;justify-content:space-between;gap:3cqw;padding:3cqw 4cqw;border-bottom:1px solid #eee}
.co-logo{font:600 clamp(9px,2.3cqw,13px)/1 Georgia,serif;letter-spacing:.16em;color:#222}
.co-head nav{display:flex;gap:3cqw;font-size:clamp(8px,2.1cqw,12px);color:#555}
.co-book{padding:1.4cqw 2.6cqw;background:#2e5e6e;color:#fff;font-size:clamp(8px,2.1cqw,12px)}
@container (max-width:430px){.co-head nav{display:none}}
.co-hero{position:relative;height:62cqw;overflow:hidden}
.co-hero img{position:absolute;inset:0;height:100%}
.co-hero>div{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:2cqw;text-align:center;color:#fff;background:rgba(0,0,0,.38);padding:0 6cqw}
.co-hero p{margin:0}
.co-hero-h{font:400 clamp(20px,7cqw,40px)/1.1 Georgia,serif}
.co-btn{display:inline-block;padding:1.8cqw 4.5cqw;background:#2e5e6e;color:#fff;font-size:clamp(9px,2.2cqw,13px);letter-spacing:.04em}
.co-btn-light{background:#fff;color:#2e5e6e}
.co-sec{padding:7cqw 7cqw;text-align:center}
.co-grey{background:#f5f6f7}
.co-h{margin:0 0 2.4cqw;font:400 clamp(16px,4.6cqw,26px)/1.15 Georgia,serif;color:#222}
.co-p{margin:0 auto;max-width:58ch;color:#666}
.co-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:3cqw;margin-top:4cqw;text-align:left}
.co-cards div{background:#fff;padding-bottom:2cqw;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.co-cards img{aspect-ratio:4/3;margin-bottom:2cqw}
.co-cards b,.co-cards span{display:block;padding:0 2.4cqw;font-size:clamp(8px,2.2cqw,13px)}
.co-cards span{color:#2e5e6e}
.co-quote{margin:0 auto 2cqw;max-width:34ch;font:italic 400 clamp(13px,3.6cqw,20px)/1.4 Georgia,serif;color:#333}
.co-form{text-align:left;padding-bottom:10cqw}
.co-form .co-h,.co-form>.co-p{text-align:center}
.co-fields{display:grid;gap:1.2cqw;margin:5cqw auto 0;max-width:84cqw}
.co-fields[hidden]{display:none}
.co-l{font-size:clamp(9px,2.2cqw,12px);color:#555;margin-top:1.6cqw}
.co-f{display:block;min-height:clamp(26px,7.4cqw,40px);padding:1.8cqw 2.4cqw;background:#fff;border:1px solid #cfd3d8;color:#222;font-size:clamp(10px,2.5cqw,14px);line-height:1.4}
.co-f-big{min-height:clamp(52px,16cqw,86px)}
.co-f.is-typing{border-color:#2e5e6e;box-shadow:0 0 0 2px rgba(46,94,110,.18)}
.co-f.is-typing::after,.cn-in span.is-typing::after{content:"";display:inline-block;width:1px;height:1em;margin-left:1px;vertical-align:-2px;background:currentColor;animation:cw-caret .8s steps(1) infinite}
@keyframes cw-caret{50%{opacity:0}}
.co-submit{margin-top:3cqw;text-align:center;transition:transform .12s,filter .12s}
.co-submit.is-press{transform:scale(.97);filter:brightness(.85)}
.co-thanks{display:none;margin:4cqw auto 0;max-width:84cqw;padding:4cqw;text-align:center;color:#2f7d4f;border:1px solid #cfe6d7;background:#f3faf5;font-size:clamp(11px,2.8cqw,15px)}
.co-thanks.is-on{display:block}
.co-foot{padding:5cqw;text-align:center;font-size:clamp(8px,2cqw,11px);color:#888;background:#222}

/* twelvebell page: the Nyholt design, dark, with its agent */
.cvo-new .cvo-win{background:#171311}
.cn{background:#171311;color:#efe7df;font:clamp(10px,2.5cqw,14px)/1.5 var(--font-sans)}
.cn-head{position:absolute;z-index:2;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:3cqw;padding:3cqw 4cqw}
.cn-logo{font:400 clamp(13px,3.6cqw,20px)/1 'Instrument Serif',Georgia,serif;color:#fff}
.cn-head nav{display:flex;gap:3.4cqw;font-size:clamp(8px,2.2cqw,12px);color:#d9cfc6}
@container (max-width:430px){.cn-head nav{display:none}}
.cn-start{padding:1.4cqw 3cqw;border-radius:99px;background:#a4502a;color:#fff;font-size:clamp(8px,2.2cqw,12px);font-weight:600}
.cn-hero{position:relative;height:86cqw;overflow:hidden}
.cn-hero img{position:absolute;inset:0;height:100%}
.cn-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,19,17,.35),rgba(23,19,17,.1) 40%,rgba(23,19,17,.85))}
.cn-hero>div{position:absolute;z-index:1;left:6cqw;right:6cqw;bottom:7cqw}
.cn-eyebrow{margin:0 0 2cqw;font-size:clamp(8px,2cqw,11px);letter-spacing:.14em;text-transform:uppercase;color:#d9cfc6}
.cn-h{margin:0;max-width:12ch;font:400 clamp(26px,9.6cqw,54px)/.98 'Instrument Serif',Georgia,serif;letter-spacing:-.01em;color:#fff}
.cn-p{margin:2.6cqw 0 0;max-width:40ch;color:#e4dad1}
.cn-sec{padding:8cqw 6cqw 40cqw}
.cn-h2{margin:0 0 4cqw;font:400 clamp(18px,6cqw,34px)/1.05 'Instrument Serif',Georgia,serif;color:#fff}
.cn-cards{display:grid;grid-template-columns:1fr 1fr;gap:3cqw}
.cn-cards img{aspect-ratio:4/5;border-radius:2cqw;margin-bottom:2cqw}
.cn-cards b{display:block;font-weight:600;color:#fff}
.cn-cards span{display:block;color:#b9ada2;font-size:clamp(9px,2.2cqw,12px)}

.cn-launch{position:absolute;z-index:3;right:12px;bottom:12px;padding:10px 16px;border-radius:99px;background:#a4502a;color:#fff;font:600 13px/1 var(--font-sans);box-shadow:0 10px 24px -8px rgba(0,0,0,.5);transition:opacity .25s,transform .25s}
.cn-launch.is-gone{opacity:0;transform:scale(.9)}
.cn-chat{position:absolute;z-index:4;right:10px;bottom:10px;width:min(360px,calc(100% - 20px));height:min(72%,400px);display:flex;flex-direction:column;border-radius:16px;background:#fbf8f5;color:#231d19;box-shadow:0 24px 60px -18px rgba(0,0,0,.6);opacity:0;transform:translateY(14px) scale(.97);transform-origin:100% 100%;pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.cn-chat.is-open{opacity:1;transform:none}
.cn-chat-h{flex:none;display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid #ece4dc}
.cn-chat-h span:last-child{display:grid;gap:1px}
.cn-chat-h b{font-size:14px}
.cn-chat-h small{font-size:12px;color:#1f7a45}
.cn-av{width:28px;height:28px;border-radius:50%;background:#c96a3b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 15a6 6 0 0 1 12 0'/%3E%3Ccircle cx='12' cy='17.5' r='1.2' fill='%23fff'/%3E%3C/svg%3E") no-repeat center/18px}
.cn-log{flex:1;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:8px;padding:12px;scroll-behavior:smooth}
.cn-log::-webkit-scrollbar{display:none}
.cn-b{margin:0;max-width:86%;padding:9px 12px;border-radius:14px;font-size:14px;line-height:1.4;animation:cn-in .3s var(--ease) both}
.cn-bot{align-self:flex-start;background:#fff;border:1px solid #ece4dc;border-bottom-left-radius:4px}
.cn-you{align-self:flex-end;background:#a4502a;color:#fff;border-bottom-right-radius:4px}
.cn-dots{display:flex;gap:4px;padding:12px}
.cn-dots i{width:6px;height:6px;border-radius:50%;background:#b9ada2;animation:cn-dot 1s infinite}
.cn-dots i:nth-child(2){animation-delay:.15s}.cn-dots i:nth-child(3){animation-delay:.3s}
@keyframes cn-dot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-3px);opacity:1}}
@keyframes cn-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cn-booked{align-self:center;margin:4px 0 2px;padding:7px 12px;border-radius:99px;background:#e5f4ea;color:#1f6b3d;font:600 13px/1 var(--font-sans);animation:cn-in .35s var(--ease) both}
.cn-booked::before{content:"✓ "}
.cn-in{flex:none;display:flex;align-items:center;gap:8px;margin:0 10px 10px;padding:9px 12px;min-height:40px;border-radius:12px;border:1px solid #e4dbd2;background:#fff;font-size:14px;color:#231d19}
.cn-in span{flex:1;min-height:1.3em}
.cn-send{width:22px;height:22px;border-radius:50%;background:#c96a3b;flex:none}

@media (prefers-reduced-motion:reduce){.cw-page,.cn-chat,.cn-b,.cn-booked,.cvo-js .cvo-result{transition:none;animation:none}}