/* th-idemo2.css — /instant-demo V2 (V13, 2026-09-28). Built by _thbuild/v13/instant_demo.js; behaviour th-idemo2.js.
   Our brand around it (paper, mint, deep, Satoshi/Switzer); THEIR colour only inside the stand-in site and the widget. */

/* ── hero ── */
.id2-hero{position:relative;overflow:hidden;background:var(--void);color:#fff;padding:clamp(118px,17vh,168px) var(--pad) clamp(44px,7vh,76px)}
.id2-hero::before{content:"";position:absolute;right:-18%;top:-40%;width:70vmax;height:70vmax;border-radius:50%;
  background:radial-gradient(closest-side,rgba(79,216,166,.22),rgba(79,216,166,0));pointer-events:none}
.id2-hero__in{position:relative;max-width:1180px;margin:0 auto}
.id2-hero h1{margin:.9rem 0 0;color:#fff}
.id2-hero__p{margin:1.1rem 0 0;max-width:34rem;font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.5;color:rgba(255,255,255,.74)}
.id2-hero__pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.4rem}

/* ── the builder ── */
.id2{position:relative;background:var(--paper);color:var(--on-paper);padding:clamp(28px,5vh,64px) var(--pad) clamp(56px,9vh,110px)}
.id2__in{max-width:1320px;margin:0 auto;display:grid;gap:28px;align-items:start}
@media (min-width:1000px){.id2__in{grid-template-columns:minmax(380px,470px) 1fr;gap:40px}.id2-stage{position:sticky;top:92px}}
.id2-form{margin:0}
.id2-form .core{padding:clamp(18px,2.6vw,28px);display:grid;gap:26px;background:#fff}
.id2-step{margin:0;padding:0;border:0;min-width:0;display:grid;gap:14px}
.id2-step legend{display:flex;align-items:baseline;gap:12px;padding:0;margin:0 0 14px;
  font:900 clamp(1.3rem,2.4vw,1.6rem)/1.1 Satoshi,ui-sans-serif,system-ui,sans-serif;letter-spacing:-.03em;color:var(--on-paper)}
.id2-n{font:900 .95rem/1 "Cabinet Grotesk",Satoshi,ui-sans-serif,sans-serif;color:#0B8059;letter-spacing:0}
.id2-step[data-step="2"],.id2-step[data-step="3"]{transition:opacity .35s var(--e-out)}
.id2[data-ready="0"] .id2-step[data-step="2"],.id2[data-ready="0"] .id2-step[data-step="3"],.id2[data-ready="0"] .id2-go{opacity:.42}

.id2-in{width:100%;height:52px;padding:0 16px;border-radius:14px;border:1.5px solid rgba(2,36,25,.2);background:var(--paper);
  color:var(--on-paper);font:600 16px/1 Switzer,ui-sans-serif,system-ui,sans-serif;outline:0;transition:border-color .2s,background .2s}
.id2-in:focus{border-color:#0B8059;background:#fff}
.id2-in::placeholder{color:rgba(4,36,26,.42);font-weight:500}

/* search */
.id2-search{position:relative}
.id2-search__i{height:58px;padding-left:48px;font-size:17px;border-radius:16px}
.id2-search__ic{position:absolute;left:16px;top:17px;width:24px;height:24px;color:rgba(4,36,26,.55);pointer-events:none}
.id2-search__ic svg{width:24px;height:24px}
.id2-search__x{position:absolute;right:6px;top:5px;width:48px;height:48px;border:0;border-radius:12px;background:none;color:rgba(4,36,26,.6);cursor:pointer}
.id2-search__x svg{width:18px;height:18px}
.id2-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;list-style:none;margin:0;padding:6px;max-height:min(360px,52vh);overflow:auto;
  background:#fff;border:1px solid rgba(2,36,25,.14);border-radius:16px;box-shadow:0 24px 60px -24px rgba(2,36,25,.45)}
.id2-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:0 12px;border-radius:10px;cursor:pointer;font-size:1rem}
.id2-list li b{font-weight:800}
.id2-list li small{font-size:.8rem;color:rgba(4,36,26,.55);white-space:nowrap}
.id2-list li[aria-selected=true],.id2-list li:hover{background:var(--paper-2)}
.id2-list__none{color:rgba(4,36,26,.62);cursor:default}
.id2-chips{display:flex;flex-wrap:wrap;gap:8px}
.id2-chip{min-height:40px;padding:0 14px;border-radius:999px;border:1.5px solid rgba(2,36,25,.16);background:transparent;
  color:var(--on-paper);font:600 .92rem/1 Switzer,ui-sans-serif,system-ui,sans-serif;cursor:pointer;transition:background .2s,border-color .2s}
.id2-chip:hover{border-color:#0B8059}
.id2-chip.is-on{background:var(--on-paper);border-color:var(--on-paper);color:#fff}

/* name, colour, tone */
.id2-row{display:grid;gap:12px}
@media (min-width:560px){.id2-row{grid-template-columns:1.4fr 1fr}}
.id2-f{display:grid;gap:7px}
.id2-f span{font-size:.86rem;font-weight:700;color:rgba(4,36,26,.72)}
.id2-look{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.id2-sws{display:flex;flex-wrap:wrap;gap:8px}
.id2-sw{position:relative;width:40px;height:40px;border-radius:50%;border:0;padding:0;background:var(--sw);cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:transform .2s var(--e-out)}
.id2-sw.is-on{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--on-paper)}
.id2-sw:active{transform:scale(.94)}
.id2-sw--own{display:inline-flex;align-items:center;justify-content:center;background:conic-gradient(#F2643D,#E0B84C,#10B981,#1F7A8C,#B83268,#F2643D);overflow:hidden}
.id2-sw--own input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.id2-sw--own span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;color:var(--on-paper);pointer-events:none}
.id2-sw--own span svg{width:14px;height:14px}
.id2-tone{display:inline-flex;padding:4px;border-radius:999px;background:var(--paper-2)}
.id2-tone button{min-height:40px;min-width:72px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:rgba(4,36,26,.7);font:700 .92rem/1 Switzer,ui-sans-serif,system-ui,sans-serif;cursor:pointer}
.id2-tone button.is-on{background:#fff;color:var(--on-paper);box-shadow:0 2px 8px -2px rgba(2,36,25,.25)}

/* plans */
.id2-plans{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.id2-plan{position:relative;display:grid;gap:4px;align-content:center;min-height:68px;padding:12px 14px;border-radius:14px;border:1.5px solid rgba(2,36,25,.16);
  background:transparent;color:var(--on-paper);text-align:left;cursor:pointer;transition:border-color .2s,background .2s}
.id2-plan b{font:900 1.05rem/1.1 Satoshi,ui-sans-serif,system-ui,sans-serif;letter-spacing:-.02em}
.id2-plan span{font-size:.88rem;color:rgba(4,36,26,.66)}
.id2-plan em{position:absolute;top:-9px;right:10px;padding:3px 8px;border-radius:999px;background:var(--mint);color:var(--on-mint);font:800 .78rem/1 Switzer,ui-sans-serif,sans-serif;font-style:normal;letter-spacing:.02em}
.id2-plan.is-on{border-color:var(--on-paper);background:var(--on-paper);color:#fff}
.id2-plan.is-on span{color:rgba(255,255,255,.72)}
.id2-plan__d{margin:2px 0 0;font-size:.94rem;line-height:1.45;color:rgba(4,36,26,.7)}

.id2-go{display:grid;gap:10px;padding-top:18px;border-top:1px solid rgba(2,36,25,.12)}
.id2-go .btn{justify-self:start;max-width:100%}
.id2-go__n{margin:0;font-size:.92rem;line-height:1.45;color:rgba(4,36,26,.66)}
.id2-go__n a{color:#0B8059;font-weight:700}

/* ── the stage: a browser window with THEIR site and the real widget ── */
.id2-stage{display:grid;gap:12px}
.id2-win{border-radius:22px;background:#0B0F0D;padding:0 0 10px;box-shadow:0 40px 90px -40px rgba(2,36,25,.55)}
.id2-win__bar{display:flex;align-items:center;gap:7px;height:44px;padding:0 16px}
.id2-win__bar i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.18)}
.id2-win__url{margin-left:12px;flex:1;max-width:340px;height:28px;display:flex;align-items:center;padding:0 12px;border-radius:999px;
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.62);font:500 .8rem/1 Switzer,ui-sans-serif,sans-serif;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.id2-win__view{position:relative;margin:0 10px;height:clamp(560px,72vh,720px);border-radius:14px;overflow:hidden;background:#fff}
.id2-stage__n{margin:0;font-size:.9rem;line-height:1.45;color:rgba(4,36,26,.66);text-align:center}
@media (max-width:999px){.id2-stage{display:none}}

/* the widget slot: the renderer's preview mode lays out INSIDE the slot, so the slot needs a size */
.id2-slot{position:absolute;right:0;bottom:0;width:min(400px,100%);height:100%;pointer-events:none}
.id2-slot > *{pointer-events:auto}
.id2-slot.dd-render-slot{position:absolute}

/* ── the stand-in site: the ten layouts are th-sites.css (S8, shared with /demos); the box's size + this page's room ── */
.id2-site{position:absolute;inset:0}
.id2-win__view .dms-links,.id2-win__view .dms-navcta{display:none}
.id2-site--full .dms-links,.id2-site--full .dms-menu,.id2-site--full .dms-navcta{display:none}
.id2-site--full .dms-h{font-size:clamp(1.9rem,8.4vw,2.6rem)}

/* ── full-screen demo ── */
.id2-full{position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;background:#0B0F0D;color:#fff}
.id2-full[hidden]{display:none}
.id2-full__top{display:flex;align-items:center;justify-content:space-between;gap:12px;height:56px;padding:0 8px 0 18px;padding-top:env(safe-area-inset-top)}
.id2-full__top b{font:900 1.05rem/1 Satoshi,ui-sans-serif,sans-serif;letter-spacing:-.02em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.id2-full__x{width:48px;height:48px;border:0;border-radius:14px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer}
.id2-full__x svg{width:18px;height:18px}
.id2-full__view{position:relative;flex:1;margin:0 8px;border-radius:18px;overflow:hidden;background:#fff}
.id2-slot{z-index:3}
.id2-full__foot{padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
.id2-full__foot .btn{width:100%;justify-content:space-between}
.id2-slot--full{width:100%}
html.id2-locked,html.id2-locked body{overflow:hidden}

/* ── the phone's "View my demo" bar ── */
.id2-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,rgba(242,247,244,1) 60%,rgba(242,247,244,0));transform:translateY(0);transition:transform .35s var(--e-out)}
.id2-bar[hidden]{display:none}
.id2-bar .btn{width:100%;justify-content:space-between}
@media (min-width:1000px){.id2-bar{display:none!important}}
html.id2-bar-on #ddb,html.id2-bar-on #ddw{display:none}

/* ── after ── */
.id2-after{background:var(--mint);color:var(--on-mint);padding:clamp(64px,11vh,130px) var(--pad)}
.id2-after__in{max-width:1180px;margin:0 auto}
.id2-after h2{margin:.8rem 0 0}
.id2-after__l{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:16px;max-width:760px}
.id2-after__l li{display:grid;grid-template-columns:28px 1fr;gap:14px;font-size:1.05rem;line-height:1.5}
.id2-after__l svg{width:24px;height:24px;margin-top:2px}
.id2-after .cta-row{margin-top:30px}
.id2-after__n{margin:18px 0 0;font-size:.92rem;color:rgba(2,36,25,.72)}
@media (prefers-reduced-motion:reduce){.id2-step,.id2-bar,.id2-sw{transition:none}}

/* ── measured on the first render (2026-09-28): the chat covered their hero on desktop, and on a phone it hid the site ── */
.id2-win__view .id2-slot{width:380px;height:min(100%,620px)}
@media (min-width:1000px){.id2-win__view .dms-hero,.id2-win__view .dms-menu{margin-right:calc(380px + 3%)}.id2-win__view .dms-h{font-size:clamp(1.9rem,3.2vw,2.8rem)}}
.id2-full__view .id2-slot--full{top:auto;height:72%}
/* shortcuts: ONE compact row (Duval 09-25 "next to each other"; 09-28 "the shortcuts for pro+ must not be so big").
   Pro+ puts them under the first message as a grid of fat pills; here they keep their natural width on one line,
   scroll sideways if they must, and fade at the edge when they do (th-idemo2.js fitRows). Same rules as /demos. */
.id2-slot .dd-host .dd-chips,.id2-slot .dd-host .dd-below-chips{display:flex;flex-wrap:nowrap!important;justify-content:flex-start!important;overflow-x:auto;scrollbar-width:none;gap:6px}
/* no !important on display: the demo hides the row after the first message with an inline display:none */
.id2-slot .dd-chips::-webkit-scrollbar,.id2-slot .dd-below-chips::-webkit-scrollbar{display:none}
.id2-slot .dd-chip{flex:0 0 auto!important;max-width:none!important;white-space:nowrap;font-size:12.5px!important;line-height:1.2;padding:7px 12px!important;min-height:32px;border-radius:999px}
/* S9 (Duval: "shortcuts must fit … 1 or 2 words"): Pro+'s row under the first message spans the chat's full width (the
   bot row is 90% and the column sits beside the avatar: 196px of 256 at 320), so three short words fit on a phone */
.id2-slot .dd-row-bot:has(.dd-below-chips){max-width:100%}
.id2-slot .dd-msg-col:has(> .dd-below-chips){flex:1 1 auto;min-width:0}
.id2-slot .dd-msg-col:has(> .dd-below-chips) > .dd-msg{align-self:flex-start;max-width:calc(90% - 34px)}
.id2-slot .dd-msg-col > .dd-below-chips{margin-left:-34px;width:calc(100% + 34px)}
@media (max-width:380px){.id2-slot .dd-chip{font-size:12px!important;padding:6px 9px!important}}
.id2-slot .dd-chips[data-more],.id2-slot .dd-below-chips[data-more]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
/* one chat button on this page: the demo's */
main[data-v13="instant-demo"] ~ #ddb,main[data-v13="instant-demo"] ~ #ddw,html:has(main[data-v13="instant-demo"]) #ddb,html:has(main[data-v13="instant-demo"]) #ddw{display:none}
/* S9: a new trade, colour or tone lays the stand-in site in again (nav, hero, menu, info in turn) */
@keyframes id2Swap{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.id2-site[data-swap] > *{animation:id2Swap .55s cubic-bezier(.16,1,.3,1) both}
.id2-site[data-swap] > :nth-child(2){animation-delay:.07s}
.id2-site[data-swap] > :nth-child(3){animation-delay:.14s}
.id2-site[data-swap] > :nth-child(4){animation-delay:.2s}
@media (prefers-reduced-motion:reduce){.id2-site[data-swap] > *{animation:none}}