/* ===========================================================================
   AI Suite demos (ai-demos.js): one call into Northside Dental, a part of it
   in each pane of the tour (below). Under the tour's call bar, what's said,
   as lines of the call's transcript; the builder's own block
   (builder-real.css) with its thinking drawn round it; and what it saved,
   as the builder draws a variable. --c1 is the block's colour.
   =========================================================================== */
.ad{--c1:#8B5CF6;position:absolute;inset:0;box-sizing:border-box;z-index:1;
  display:flex;flex-direction:column;padding:0 clamp(14px,4.5cqw,22px);text-align:left}
.ad > *{flex-shrink:0}
/* the call fills in one column under the call bar: from the top, then
   gliding down to what's newest (ai-demos.js
   follow). Pieces not there yet take no room, and open out as they arrive;
   the column's padding is the room their glow needs */
.ad-col{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden;
  margin:0 calc(-1 * clamp(14px,4.5cqw,22px));padding:18px clamp(14px,4.5cqw,22px) 22px}
.ad-col.cut{-webkit-mask-image:linear-gradient(180deg,transparent,#000 30px);mask-image:linear-gradient(180deg,transparent,#000 30px)}
.ad-col > *{flex-shrink:0}
.ad-col > * + *{margin-top:14px}
.ad-said,.ad-var,.ad-bw,.ad-doc{max-height:320px;transition:opacity .45s ease,transform .55s cubic-bezier(.16,1,.3,1),max-height .6s cubic-bezier(.16,1,.3,1),margin-top .6s cubic-bezier(.16,1,.3,1)}
.ad-col > .past{opacity:.38}
.ad-col > .ad-bw.past.think{opacity:1}
.ad .hid{opacity:0;transform:translateY(8px);max-height:0;margin-top:0!important;overflow:hidden}


/* ---- the call: the business, its mark, how long, what's happening ---- */
.ad-call{display:flex;align-items:center;gap:11px;padding:8px 10px 8px 8px;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(147,197,253,.14)}
.ad-cm{flex:none;display:inline-flex}
.ad-cm .bzm{--sz:30px;box-shadow:0 0 0 2px rgba(8,12,29,.9),0 6px 16px -6px rgba(0,0,0,.7)}
.ad-ct{flex:1;min-width:0;line-height:1.25}
.ad-ct b{display:block;font-weight:600;color:#F3F5FF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-num{flex:none;font:500 .9em/1 'Geist',system-ui,sans-serif;letter-spacing:0;color:#7F8AB3;white-space:nowrap}
.ad-ct small{display:block;margin-top:1px;font-size:.86em;color:#8E99C4;font-variant-numeric:tabular-nums}

/* ---- what's said: a line of the call's transcript, who said it above it ---- */
.ad-said{position:relative;padding:11px 14px 12px;border-radius:14px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(147,197,253,.12)}
.ad-said::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:2px;border-radius:2px;background:rgba(147,197,253,.45)}
.ad-said.biz{background:color-mix(in srgb,var(--c1) 9%,rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c1) 30%,transparent)}
.ad-said.biz::before{background:var(--c1)}
.ad-sl{display:flex;align-items:center;gap:8px;margin-bottom:6px;font:600 .84em/1 'Geist',sans-serif;letter-spacing:.01em;color:#C9D0EA}
.ad-said.biz .ad-sl{color:color-mix(in srgb,var(--c1) 55%,#fff)}
/* the caller: nobody we know, under the default picture of a private profile (as on /achievements) */
.ad-si{display:block;flex:none;width:20px;height:20px;border-radius:50%;overflow:hidden;
  background:linear-gradient(180deg,rgba(147,197,253,.12),rgba(147,197,253,.04));box-shadow:inset 0 0 0 1.5px rgba(147,197,253,.28)}
.ad-si img{display:block;width:100%;height:100%;margin-top:9%;opacity:.6}
.ad-sl .bzm{--sz:20px;border-radius:6px}
.ad-words{margin:0;font-size:1.08em;line-height:1.45;color:#F1F3FC;text-wrap:pretty}
.ad-words .w,.ad-v .w{opacity:0}
.ad-words .w.on,.ad-v .w.on{opacity:1;animation:adWord .35s ease both}
@keyframes adWord{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}
/* the caller's voice while they talk */
.ad-wave{display:inline-flex;align-items:center;gap:2px;height:12px;margin-left:2px;opacity:0;transition:opacity .3s}
.ad-wave i{width:2px;height:100%;border-radius:2px;background:#93C5FD;transform:scaleY(.25)}
.ad-said.talking .ad-wave{opacity:1}
.ad-said.talking .ad-wave i{animation:adWave .7s ease-in-out infinite alternate}
.ad-wave i:nth-child(2){animation-delay:-.2s!important}.ad-wave i:nth-child(3){animation-delay:-.45s!important}.ad-wave i:nth-child(4){animation-delay:-.1s!important}.ad-wave i:nth-child(5){animation-delay:-.3s!important}
@keyframes adWave{to{transform:scaleY(1)}}

/* ---- the block: the middle of the card, the builder's own ---- */
.ad-bw{position:relative;align-self:center;max-width:100%}
.ad .bdx.sk-blk{position:relative;display:block;min-height:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;--nd:5px}
.ad .sk-blk .bx-blk{margin:0;transition:box-shadow .5s ease,filter .5s ease}
/* it comes in the way the next block of a flow pops in */
.ad-bw.hid{transform:translateY(12px) scale(.94)}
.ad-bw.ad-in{animation:adIn .6s cubic-bezier(.34,1.4,.64,1) both}
@keyframes adIn{from{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:none}}
/* and while it works, a light in its own colour (--glc, from ai-demos.js
   glow) runs round it: along its own outline and down into the notch on
   its top left (.ad-ring, drawn by ring()). A faint steady edge, and one
   soft, slightly blurred run travelling round it at an even pace, with a
   wider haze behind; no breathing. Under it all, a faint still glow. */
.ad .bdx.sk-blk{filter:drop-shadow(0 0 0 transparent);transition:filter .5s ease}
.ad-bw.think .sk-blk{filter:drop-shadow(0 0 8px var(--gl,transparent))}
.ad-ring{position:absolute;left:0;top:0;z-index:3;overflow:visible;pointer-events:none;opacity:0;transition:opacity .4s ease}
.ad-ring path{fill:none;stroke-linejoin:round;stroke-linecap:round}
.ad-rg{stroke:rgb(var(--glc,167,139,250));stroke-width:1.2;stroke-opacity:.45}
.ad-rh,.ad-rl{stroke-dasharray:calc(var(--len,400) * .22) calc(var(--len,400) * .78)}
.ad-rh{stroke:rgb(var(--glc,167,139,250));stroke-width:6;stroke-opacity:.55;filter:blur(3.5px)}
.ad-rl{stroke:color-mix(in srgb,rgb(var(--glc,167,139,250)) 40%,#fff);stroke-width:2.2;filter:blur(.9px)}
.ad-bw.think .ad-ring{opacity:1}
.ad-bw.think :is(.ad-rh,.ad-rl){animation:adRun 2.6s linear infinite}
/* in px: a unitless end won't interpolate, and the run would sit still */
@keyframes adRun{from{stroke-dashoffset:0px}to{stroke-dashoffset:calc(var(--len,400) * -1px)}}
/* the field it saves to lights as the value goes out of it */
.ad .sk-blk input.ad-saving{animation:adSave .9s ease}
/* (inert, never focused: so not the 16px touch screens give text boxes, base.css) */
.ad .sk-blk .bx-blk input{font-size:12px!important}
@keyframes adSave{20%,55%{box-shadow:0 0 0 2px #fff}}

/* ---- what it saved: the variable as the builder draws it (the dotted
   pill), lifted out of the block's field and set to what was heard ---- */
.ad-var{align-self:center;display:inline-flex;align-items:center;gap:9px;max-width:100%;padding:7px 8px 7px 7px;border-radius:12px;
  background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(147,197,253,.14);overflow:visible}
.ad-var.hid{transform:translateY(-6px)}
.ad-vk{position:relative;z-index:2;flex:none;padding:6px 10px;border-radius:8px;font:500 .86em/1.15 'IBM Plex Mono',ui-monospace,monospace;
  color:#C7D2FE;background:rgba(30,36,72,.92);outline:2px dotted rgba(147,197,253,.9);outline-offset:-2px;
  transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .2s ease}
.ad-var.fly .ad-vk{opacity:0}
.ad-veq{flex:none;font:500 .9em/1 'IBM Plex Mono',ui-monospace,monospace;color:#5B6592}
.ad-vf{min-width:0;padding:6px 10px;border-radius:8px;background:#fff;color:#1a1a2e;font-weight:600;font-size:.92em;line-height:1.15}
.ad-veq,.ad-vf{opacity:0;transform:translateX(-6px);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.ad-var.set .ad-veq,.ad-var.set .ad-vf{opacity:1;transform:none}
.ad-var.set .ad-vf{transition-delay:.08s}
.ad-v{color:inherit}

/* ---- the knowledge base: what the business wrote, searched ---- */
.ad-doc{position:relative;overflow:hidden;padding:11px 14px;border-radius:12px;font-size:.93em;color:#8F99C4;
  background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(147,197,253,.14)}
.ad-doc b{display:block;margin-bottom:6px;font:600 .8em/1 'Geist',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#7882AE}
.ad .ad-doc p{margin:0 0 5px;max-width:none;font:inherit;color:inherit;transition:color .3s}
.ad .ad-doc p:last-child{margin:0}
.ad-doc mark{color:inherit;border-radius:4px;padding:1px 0;transition:background-size .6s ease,color .3s;
  background:linear-gradient(color-mix(in srgb,var(--c1) 34%,transparent),color-mix(in srgb,var(--c1) 34%,transparent)) 0 0/0% 100% no-repeat}
.ad .ad-doc p.hit{color:#E9ECFA}
.ad-doc p.hit mark{color:#fff;background-size:100% 100%}
.ad-doc::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;opacity:0;
  background:rgba(255,255,255,.7)}
.ad-doc.scan::after{animation:adScan 1.2s ease-in-out both}
@keyframes adScan{0%{opacity:1;top:0}90%{opacity:1}100%{opacity:0;top:100%}}


/* the business's mark, when bizmark.js isn't there */
.ad-bzm{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;font:700 13px/1 'Geist',sans-serif;color:#fff;background:linear-gradient(145deg,#4F46E5,#0E1840)}

/* a narrow picture (a phone): tighter */
@container (max-width:440px){
  .ad-col > * + *{margin-top:11px}
  .ad-doc [data-more]{display:none}
  .ad-call{padding:6px 8px 6px 6px;gap:9px}
  .ad-cm .bzm{--sz:26px}
  .ad-said{padding:9px 12px 10px}
}

@media(prefers-reduced-motion:reduce){
  .ad-words .w.on,.ad-v .w.on,.ad-said .ad-wave i,.ad-bw.think :is(.ad-rh,.ad-rl),.ad-bw.ad-in,.ad .sk-blk input.ad-saving,.ad-doc.scan::after{animation:none}
  .ad-vk,.ad-veq,.ad-vf{transition:none}
}

/* ===========================================================================
   The tour (ai-demos.js tour), on /ai and /business.

   The head: the section's title on the left, and on the right the plan
   (first month free, its price, the button). Under it, one panel. On the
   left, the four AI blocks as a script in the builder: the builder's own
   blocks (builder-real.css), stacked as it stacks them, each notch holding
   the bump of the block above, each wearing its number. The running one
   is in full colour with a faint glow traced round its own outline (into
   its notch and round its bump); the ones the call has been through are a
   step back, the ones still to come further back. Under the script, the
   running block's caption: what it does, what it costs, and how far
   through its part the call is. On the right, the call itself, in one
   window running off the panel's edge, under one call bar whose clock
   carries on from part to part.
   =========================================================================== */
.adt-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:22px 56px;margin-bottom:clamp(28px,3.4vw,40px)}
.adt-k{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;background:var(--ai-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.adt-k .ai-mark{width:17px;height:17px}
.adt-head h2{margin:0;font-size:clamp(28px,3.6vw,44px);line-height:1.06;letter-spacing:-.04em;text-wrap:balance}
.adt-buy{display:flex;flex-direction:column;align-items:flex-start;max-width:500px}
.adt-offer{display:flex;align-items:center;flex-wrap:wrap;gap:14px 20px}
.adt-offer .spf-btn svg.arr{width:15px;height:15px}
.adt-plan{display:flex;flex-direction:column;gap:4px;font-size:13px;line-height:1.25;color:var(--muted,#9AA3C7)}
.adt-plan .ai-trial{font:700 14px/1.2 'Geist',system-ui,sans-serif;letter-spacing:-.01em;background:var(--ai-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.adt-plan .ai-trial[hidden]{display:none}
.adt-plan .crd{font-size:15px;font-weight:700;color:var(--ink,#EEF1FA)}
.adt-head .adt-fine{margin:14px 0 0;max-width:none;font-size:12.5px;line-height:1.55;color:var(--faint,#7F8AB3)}
.adt-fine::first-letter{text-transform:uppercase}
.adt-fine a{color:#C4B5FD;font-weight:600;white-space:nowrap}
.adt-fine a:hover{color:#DDD6FE}

/* the panel */
.adt{position:relative;display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);height:clamp(580px,46vw,640px);overflow:hidden;isolation:isolate;
  border-radius:var(--card-r,22px);border:1px solid var(--card-brd,rgba(147,197,253,.14));background:var(--card-bg,#0b1022)}
.adt::before{content:"";position:absolute;top:0;left:10%;right:10%;height:1px;z-index:3;background:linear-gradient(90deg,transparent,rgba(196,181,253,.55),transparent)}

/* the script: the builder's own blocks */
.adt-rail{display:flex;flex-direction:column;min-height:0;padding:26px 28px 26px 30px}
/* the site's small label (as Place a call's "Step 1 of 3"): Geist, caps, spaced */
.adt-label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:650 12px/1 'Geist',system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#7F8BB5}
.adt-label span:last-child{letter-spacing:0;text-transform:none;font-weight:500;font-size:12.5px;color:#6B76A3}
.bdx.adt-script{--nd:5px;display:flex;flex:none;flex-direction:column;align-items:flex-start;min-height:0;margin-top:24px;padding:0;
  border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
.adt-script > *{flex:none}
.adt-script > .bx-blk.bx-hat{position:relative;z-index:0}
.adt-b{position:relative;max-width:100%;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;
  filter:saturate(.35) brightness(.5) drop-shadow(0 0 0 transparent) drop-shadow(0 0 0 transparent);
  transition:filter .5s ease}
.adt-b .bx-blk{pointer-events:none;margin-bottom:calc(-1 * var(--nd));padding-bottom:calc(9px + var(--nd));
  /* the bump under each block, the shape the next block's notch is cut for */
  clip-path:polygon(0 0,13px 0,16px var(--nd),28px var(--nd),31px 0,100% 0,100% calc(100% - var(--nd)),31px calc(100% - var(--nd)),28px 100%,16px 100%,13px calc(100% - var(--nd)),0 calc(100% - var(--nd)))}
.adt-b:last-child .bx-blk{margin-bottom:0;padding-bottom:9px;clip-path:polygon(0 0,13px 0,16px var(--nd),28px var(--nd),31px 0,100% 0,100% 100%,0 100%)}
.adt-script .bx-blk input{font-size:12px!important}
.adt-b .bx-blk .bx-q-optwrap,.adt-b .bx-blk .bx-blk-cost,.adt-b .bx-blk .bx-x{display:none}
.adt-b.ran{filter:saturate(.7) brightness(.74) drop-shadow(0 0 0 transparent) drop-shadow(0 0 0 transparent)}
.adt-b:hover{filter:saturate(.85) brightness(.88) drop-shadow(0 0 0 transparent) drop-shadow(0 0 0 transparent)}
.adt-b:focus-visible{filter:saturate(.9) brightness(.92) drop-shadow(0 0 0 #fff) drop-shadow(0 0 1.5px #fff)}
/* the running block: its glow follows its own outline, into the notch and round the bump */
.adt-b.on{z-index:2;filter:saturate(1) brightness(1) drop-shadow(0 0 1px rgba(255,255,255,.25)) drop-shadow(0 0 7px var(--gl,transparent))}

/* the running block's caption */
.adt-caps{display:grid;margin-top:auto;padding-top:22px;border-top:1px solid rgba(147,197,253,.1)}
.adt-cap{grid-area:1/1;min-width:0;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .25s ease,transform .4s cubic-bezier(.16,1,.3,1),visibility 0s .4s}
.adt-cap.on{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease .1s,transform .6s cubic-bezier(.16,1,.3,1) .1s,visibility 0s}
.adt-cap h3{display:flex;align-items:center;gap:11px;margin:0;font-size:22px;line-height:1.15;letter-spacing:-.025em;font-weight:600;color:#fff}
/* its number, as the block wears it */
.adt-n{display:inline-grid;place-items:center;flex:none;min-width:24px;height:24px;padding:0 6px;border-radius:7px;
  font:700 13px/1 'Geist',system-ui,sans-serif;letter-spacing:0;color:#fff;background:var(--c1);box-shadow:inset 0 1px 0 rgba(255,255,255,.25);font-variant-numeric:tabular-nums}
.adt-cap p{margin:8px 0 0;max-width:none;font-size:14px;line-height:1.55;color:var(--muted,#9AA3C7);text-wrap:pretty}
.adt-meta{display:flex;align-items:center;gap:14px;margin-top:16px}
.adt-meta .crd{flex:none;font-size:12.5px;font-weight:600;color:var(--ink,#EEF1FA)}
.adt-bar{flex:1;height:3px;border-radius:3px;overflow:hidden;background:rgba(147,197,253,.12)}
.adt-bar i{display:block;height:100%;border-radius:inherit;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,color-mix(in srgb,var(--c1) 70%,#fff),#fff)}
.adt-cap.run .adt-bar i{animation:adtFill var(--dur,12s) linear forwards}
.adt-cap.full .adt-bar i{animation:none;transform:scaleX(1);transition:transform .35s ease}
@keyframes adtFill{to{transform:scaleX(.96)}}

/* the call: one window, running off the panel's right and bottom edges */
.adt-window{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;margin-top:26px;container-type:inline-size;
  border:1px solid rgba(255,255,255,.08);border-right:0;border-bottom:0;border-top-left-radius:18px;
  background:linear-gradient(180deg,#0D1230,#080B1C 55%);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),-24px 0 48px -36px rgba(0,0,0,.9);
  font-family:'Geist',system-ui,sans-serif;font-size:clamp(13px,2.35cqw,15px);line-height:1.45;color:#E9ECFA}
.adt-window > .ad-call{flex:none;margin:20px 22px 0}
.adt-panes{position:relative;flex:1;min-height:0}
.adt-pane{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s ease,transform .5s cubic-bezier(.16,1,.3,1),visibility 0s .5s}
.adt-pane.on{opacity:1;visibility:visible;transform:none;transition:opacity .5s ease .15s,transform .7s cubic-bezier(.16,1,.3,1) .15s,visibility 0s}
/* in the wide window, what's said reads as a conversation: the caller from the left, the business from the right */
.adt .ad .ad-said.caller{margin-right:16%}
.adt .ad .ad-said.biz{margin-left:16%}

@media(max-width:900px){
  .adt-head{grid-template-columns:minmax(0,1fr);align-items:start}
  .adt{grid-template-columns:minmax(0,1fr);height:auto}
  .adt-rail{padding:22px 20px 0}
  .adt-label span:last-child{display:none}
  .bdx.adt-script{margin-top:18px}
  .adt-caps{margin-top:22px;padding-top:18px}
  .adt-window{height:440px;margin:22px 0 0 16px}
}
@media(max-width:520px){
  .adt-head{margin-bottom:28px}
  .adt-offer .spf-btn{flex:1 1 100%;justify-content:center}
  .adt-buy{max-width:none;align-items:stretch}
  .adt .ad .ad-said.caller{margin-right:8%}
  .adt .ad .ad-said.biz{margin-left:8%}
  .adt-rail{padding:20px 16px 0}
  .adt-cap h3{font-size:20px}
  .adt-window{height:420px;margin-left:12px}
  .adt-window > .ad-call{margin:14px 14px 0}
}
@media(prefers-reduced-motion:reduce){
  .adt-b,.adt-cap,.adt-cap.on,.adt-pane,.adt-pane.on{transition:none}
  .adt-bar{display:none}
}