/* /talk-to-humphrey — the website-builder ad landing page (Jerryll, 2026-10-30: "make it very visual …
   don't just talk about it, show it animated … for every feature", with his own site,
   webuyhousesinconnecticut.com, as the mock-up). Apple-like: system type at weight 500, one blue
   accent, white / light grey / near-black sections. No borders, stripes or outlines as decoration
   (the blue drop line and the selection glow are editor UI, shown because the real editor shows them).
   Every animated "stage" is drawn at a fixed design size (.cv, data-w × data-h) and scaled to fit by
   assets/js/talk-to-humphrey-scenes.js, so the scenes look identical on a phone and a desktop. */

.th{--ink:#1d1d1f;--ink2:#6e6e73;--grey:#f5f5f7;--blue:#0B6BF5;--night:#000;--orange:#F26B21;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;overflow-x:clip}
.th *{box-sizing:border-box}
.th .wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.th .copy{max-width:780px}
.th section{position:relative;padding:120px 0 128px;transition:opacity .5s ease}
.th h1,.th h2,.th h3{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",Inter,system-ui,sans-serif;font-weight:500;letter-spacing:-.032em;margin:0;color:var(--ink)}
.th p{margin:0;line-height:1.5;color:var(--ink2);text-align:left;font-size:19px;letter-spacing:-.012em}
.th .eyebrow{display:block;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-bottom:18px}
.th .eyebrow .st{color:var(--ink2);font-weight:500;letter-spacing:.12em}
.th h2{font-size:clamp(30px,3.6vw,48px);line-height:1.08;margin-bottom:20px}
.th h2 .soft{color:var(--ink2)}
.th .lead{font-size:21px;color:var(--ink2)}
.th .stack > * + *{margin-top:16px}
.th .alt{background:var(--grey)}
.th .night{isolation:isolate;overflow:hidden;background-color:#0E0E11;
  /* The graphite of the Apex homepage (#humphrey): near-black with light from the top edge, plus grain. */
  background-image:radial-gradient(112% 86% at 50% -12%,rgba(255,255,255,.115) 0%,rgba(255,255,255,.055) 28%,rgba(255,255,255,.018) 52%,transparent 76%),
    radial-gradient(150% 128% at 50% -22%,#4A4A50 0%,#34343A 24%,#232328 48%,#16161A 72%,#0E0E11 100%);background-repeat:no-repeat}
.th .night::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.13;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.55'/></svg>")}
.th .night > *{position:relative;z-index:1}
.th .night h1,.th .night h2,.th .night h3{color:#F2F3F6}
.th .night p,.th .night .lead{color:rgba(242,243,246,.66)}
.th .night h2 .soft{color:#86868b}
.th .night .eyebrow{color:#8FB8FF}
.th .night .eyebrow .st{color:#86868b}

/* buttons + ask box */
.th-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;align-items:center}
.th-btn{display:inline-flex;align-items:center;gap:10px;border:0;border-radius:980px;padding:15px 28px;font:500 17px/1 -apple-system,BlinkMacSystemFont,Inter,system-ui,sans-serif;letter-spacing:-.01em;cursor:pointer;text-decoration:none;transition:background .2s ease,transform .15s ease}
.th-btn.play{background:var(--blue);color:#fff}
.th-btn.play:hover{background:#0a5fd9}
.th-btn.light{background:var(--grey);color:var(--ink)}
.th-btn.light:hover{background:#e8e8ed}
.th .night .th-btn.light{background:#1d1d1f;color:#f5f5f7}
.th .night .th-btn.light:hover{background:#2c2c2e}
.th-btn.link{background:none;color:var(--blue);padding:15px 6px}
.th .night .th-btn.link{color:#4c9bff}
.th-btn:focus-visible{outline:3px solid rgba(11,107,245,.45);outline-offset:3px}
.th-ask{margin-top:20px;display:flex;gap:10px;max-width:560px}
.th-ask input{flex:1;min-width:0;border:0;border-radius:14px;padding:15px 18px;font:400 16px -apple-system,BlinkMacSystemFont,Inter,system-ui,sans-serif;background:var(--grey);color:var(--ink)}
.th .night .th-ask input{background:#1d1d1f;color:#f5f5f7}
.th-ask input::placeholder{color:#86868b}
.th-ask input:focus{outline:2px solid rgba(11,107,245,.55)}
.th-ask button{border:0;border-radius:14px;width:54px;background:var(--grey);color:var(--ink);font-size:18px;cursor:pointer}
.th .night .th-ask button{background:#1d1d1f;color:#f5f5f7}

/* hero */
.th-hero{padding:120px 0 100px!important}
.th-hero .mark{width:92px;height:92px;margin:0 0 22px -10px}
.th-hero .mark .hface-host,.th-cta .mark .hface-host{width:100%!important;height:100%!important}
.th .ttb-inline{height:26px;width:auto;vertical-align:-5px;margin-left:4px}
.th-hero h1{font-size:clamp(32px,3.6vw,52px);line-height:1.08;max-width:980px}
.th-hero h1 .blue{background:linear-gradient(112deg,#9B86FF 0%,#8A80FF 42%,#5FA6FF 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.th-hero .lead{font-size:clamp(18px,1.6vw,21px);max-width:660px;margin-top:22px}
.th-hero .real{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-size:15px;color:#a1a1a6}
.th-hero .real b{color:#f5f5f7;font-weight:500}
.th-hero .real i{width:8px;height:8px;border-radius:50%;background:#30d158;box-shadow:0 0 0 4px rgba(48,209,88,.18);display:inline-block}

/* stage = a scaled canvas */
.stage{position:relative;margin-top:56px;width:100%}
.stage .cv{position:absolute;left:0;top:0;transform-origin:0 0}
.stage.tall{margin-top:64px}
/* Wide stages: the editor window reads as a real widescreen website, so these run past the column to the
   right, up to 24px from the edge of the screen (Jerryll: "make it rectangular, bigger to the right"). */
@media (min-width:1000px){.stage.wide{width:calc(100% + max(0px, (100vw - 1180px) / 2 - 24px))}}
/* On a phone the chat panel is cropped off (data-mx), so his lines show here instead. */
.mcap{display:none}
@media (max-width:699px){.stage[data-mx]{overflow-x:clip}.mcap{display:block;margin-top:18px;min-height:66px;font-size:16px!important;line-height:1.4!important;color:var(--ink)!important}
.mcap b{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:4px}}

/* a browser window */
.win{position:absolute;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.45),0 12px 30px -12px rgba(0,0,0,.25)}
.night .win{box-shadow:0 50px 120px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06)}
.win .bar{height:40px;background:#f2f2f4;display:flex;align-items:center;gap:8px;padding:0 14px;position:relative;z-index:3}
.win .bar i{width:11px;height:11px;border-radius:50%;background:#ff5f57}
.win .bar i:nth-child(2){background:#febc2e}.win .bar i:nth-child(3){background:#28c840}
.win .bar .url{position:absolute;left:50%;transform:translateX(-50%);background:#e4e4e8;border-radius:8px;padding:5px 16px;font-size:12.5px;color:#5c5c62;white-space:nowrap;display:flex;align-items:center;gap:6px}
.win .bar .url svg{width:10px;height:10px}
.win .bar .tool{margin-left:auto;display:flex;gap:8px;align-items:center}
.win .vp{position:absolute;left:0;right:0;top:40px;bottom:0;overflow:hidden;background:#fff}
.win .site{position:absolute;left:0;top:0;width:100%;transition:transform 1.1s cubic-bezier(.65,0,.35,1)}
.win .site.fast{transition:transform .7s cubic-bezier(.65,0,.35,1)}
.sl{display:block;position:relative;overflow:hidden;transition:height .9s cubic-bezier(.65,0,.35,1),opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease}
.sl img{display:block;width:100%;height:auto}
.sl.pre{opacity:0;transform:translateY(26px) scale(.985)}
.sl.glow{box-shadow:inset 0 0 0 3px #0B6BF5,0 0 0 6px rgba(11,107,245,.18);z-index:2}
.sl.out{opacity:.35;filter:grayscale(1)}
.sl.out::after{content:"";position:absolute;inset:0;background:rgba(255,59,48,.16);box-shadow:inset 0 0 0 3px #ff3b30}
.sl.mv{box-shadow:inset 0 0 0 3px #0B6BF5,0 18px 40px -10px rgba(11,107,245,.55)}
/* TalkToBuild overview: the page pulled back to a stack of sections while a change happens */
.vp.ov{background:#dfe2e8;transition:background .6s ease}
.vp.ov .sl{box-shadow:0 30px 70px -30px rgba(0,0,0,.45)}
.vp.ov .tagx{font-size:40px;padding:18px 30px;top:30px;right:30px;border-radius:980px}
.sl.slot{background:#0B6BF5!important;box-shadow:0 0 0 14px rgba(11,107,245,.25),0 0 60px 10px rgba(11,107,245,.5)!important;transition:height .8s cubic-bezier(.65,0,.35,1)}
.sl.slot img{opacity:0}
.sl.big{box-shadow:inset 0 0 0 10px #30d158,0 0 0 18px rgba(48,209,88,.28)!important}
.sl.mv.big{box-shadow:inset 0 0 0 10px #0B6BF5,0 0 0 18px rgba(11,107,245,.28)!important}
.sl.lift{z-index:5;scale:1.05;box-shadow:0 90px 140px -30px rgba(0,0,0,.6),inset 0 0 0 10px #0B6BF5!important;transition:scale .6s ease,box-shadow .6s ease,transform 1.4s cubic-bezier(.65,0,.35,1)}
.sl.slowmv{transition:transform 1.4s cubic-bezier(.65,0,.35,1)!important;z-index:5}
.sl.slowcl{transition:height 1.2s cubic-bezier(.65,0,.35,1),opacity .6s ease!important}
.vp.ov .sl.out::after{background:rgba(255,59,48,.28);box-shadow:inset 0 0 0 10px #ff3b30}

/* labels on the mock site: what just changed, so nobody misses it */
.tagx{position:absolute;right:18px;top:16px;z-index:8;padding:9px 15px;border-radius:980px;font:700 14px/1 -apple-system,BlinkMacSystemFont,Inter,sans-serif;color:#fff;letter-spacing:-.005em;
  box-shadow:0 12px 26px -8px rgba(0,0,0,.45);transform:translateY(-8px) scale(.8);opacity:0;transition:transform .45s cubic-bezier(.2,1.4,.4,1),opacity .3s ease}
.tagx.on{transform:none;opacity:1}
.tagx.add{background:#30d158}.tagx.move{background:#0B6BF5}.tagx.del{background:#ff3b30}

/* editor chrome inside a window */
.edbar{position:absolute;left:0;right:0;top:40px;height:46px;background:#1d1d1f;display:flex;align-items:center;padding:0 14px;gap:10px;z-index:4;color:#f5f5f7;font-size:13px}
.edbar .nm{font-weight:500;opacity:.9}
.edbar .sp{flex:1}
.edbar .ghost{padding:7px 12px;border-radius:8px;background:#2c2c2e;color:#d1d1d6;font-size:12.5px}
.edbar .upd{padding:8px 16px;border-radius:8px;background:var(--blue);color:#fff;font-weight:600;font-size:12.5px;transition:transform .2s ease,box-shadow .3s ease}
.edbar .upd.pulse{box-shadow:0 0 0 6px rgba(11,107,245,.35);transform:scale(1.06)}
.win.ed .vp{top:86px}

/* side panels (Humphrey chat, blocks) */
.panel{position:absolute;background:#fff;border-radius:16px;box-shadow:0 30px 70px -28px rgba(0,0,0,.35),0 8px 24px -10px rgba(0,0,0,.18);overflow:hidden}
.night .panel{background:#1c1c1e}
.panel .ph{display:flex;align-items:center;gap:10px;padding:16px 18px 10px}
.panel .ph svg{width:34px;height:34px}
.panel .ph b{font-weight:600;font-size:15px;color:var(--ink)}
.panel .ph small{display:block;font-size:12px;color:var(--ink2);font-weight:400}
.night .panel .ph b{color:#f5f5f7}
.chat{padding:6px 16px 16px;display:flex;flex-direction:column;gap:10px}
.panel>.chat.fill{position:absolute;left:0;right:0;top:66px;bottom:72px;overflow:hidden;justify-content:flex-end}
.msg{max-width:88%;padding:11px 14px;border-radius:18px;font-size:14.5px;line-height:1.42;letter-spacing:-.01em;transition:opacity .35s ease,transform .35s ease}
.msg.me{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:6px}
.msg.hu{align-self:flex-start;background:#f0f0f3;color:var(--ink);border-bottom-left-radius:6px}
.night .msg.hu{background:#2c2c2e;color:#f5f5f7}
.msg.pre{opacity:0;transform:translateY(8px)}
.msg .ok{display:inline-flex;align-items:center;gap:6px;color:#1a8f3c;font-weight:600}
.night .msg .ok{color:#30d158}
.typing{display:inline-flex;gap:4px;padding:4px 2px}
.typing i{width:6px;height:6px;border-radius:50%;background:#9a9aa0;animation:thDot 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes thDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.inputrow{position:absolute;left:14px;right:14px;bottom:14px;background:#f0f0f3;border-radius:14px;padding:12px 14px;font-size:14px;color:#86868b;display:flex;align-items:center;gap:10px}
.night .inputrow{background:#2c2c2e}
.inputrow .mic{margin-left:auto;width:28px;height:28px;border-radius:50%;background:var(--blue);display:grid;place-items:center}
.inputrow .mic svg{width:14px;height:14px}
.inputrow .mic.live{animation:thMic 1.2s infinite}
@keyframes thMic{0%{box-shadow:0 0 0 0 rgba(11,107,245,.5)}100%{box-shadow:0 0 0 12px rgba(11,107,245,0)}}

/* blocks panel */
.blocks{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:6px 16px 16px}
.blk{background:#f5f5f7;border-radius:12px;padding:14px 10px 12px;text-align:center;font-size:12.5px;font-weight:500;color:var(--ink);line-height:1.25;transition:transform .2s ease,background .2s ease,opacity .3s ease}
.blk .ic{width:34px;height:34px;margin:0 auto 8px;border-radius:10px;display:grid;place-items:center;background:#fff;color:var(--orange)}
.blk .ic svg{width:18px;height:18px}
.blk.press{transform:scale(.94);background:#e8f0fe}
.blk.dim{opacity:.45}
.ghostcard{position:absolute;z-index:30;width:150px;background:#fff;border-radius:12px;padding:12px;font-size:12.5px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:10px;box-shadow:0 24px 50px -12px rgba(0,0,0,.45);transform:rotate(-3deg);opacity:0;transition:opacity .25s ease,left .9s cubic-bezier(.65,0,.35,1),top .9s cubic-bezier(.65,0,.35,1),transform .3s ease}
.ghostcard .ic{width:28px;height:28px;border-radius:8px;background:#fff3ea;color:var(--orange);display:grid;place-items:center;flex:none}
.ghostcard .ic svg{width:16px;height:16px}
.dropline{position:absolute;left:24px;right:24px;height:6px;border-radius:6px;background:var(--blue);box-shadow:0 0 0 6px rgba(11,107,245,.18);opacity:0;transform:scaleX(.6);transition:opacity .25s ease,transform .3s ease,top .4s ease;z-index:6}
.dropline.on{opacity:1;transform:scaleX(1)}

/* the cursor */
.cur{position:absolute;z-index:40;width:28px;height:28px;left:0;top:0;transition:left .9s cubic-bezier(.65,0,.35,1),top .9s cubic-bezier(.65,0,.35,1),opacity .3s ease;pointer-events:none;filter:drop-shadow(0 3px 5px rgba(0,0,0,.35))}
.cur svg{width:100%;height:100%;transition:transform .15s ease}
.cur.down svg{transform:scale(.82)}
.cur .ring{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;background:rgba(11,107,245,.35);transform:scale(0);opacity:0}
.cur.click .ring{animation:thRing .55s ease-out}
@keyframes thRing{0%{transform:scale(.2);opacity:1}100%{transform:scale(2.2);opacity:0}}

/* Humphrey prompt pill (hero) */
.pill{position:absolute;z-index:8;display:flex;align-items:center;gap:14px;background:rgba(28,28,30,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:#f5f5f7;border-radius:22px;padding:12px 20px 12px 12px;font-size:19px;letter-spacing:-.015em;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .5s ease}
.pill .orb{width:52px!important;height:52px!important;flex:none}
.pill .caret{display:inline-block;width:2px;height:20px;background:#4c9bff;margin-left:2px;vertical-align:-3px;animation:thCaret 1s steps(1) infinite}
@keyframes thCaret{50%{opacity:0}}
.pill.hide{opacity:0;transform:translateY(20px) scale(.96)}
.status{position:absolute;z-index:8;display:flex;align-items:center;gap:10px;background:#fff;color:var(--ink);border-radius:980px;padding:10px 18px 10px 12px;font-size:15px;font-weight:500;box-shadow:0 20px 50px -18px rgba(0,0,0,.45);transition:opacity .4s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.status.hide{opacity:0;transform:translateY(10px)}
.status .spin{width:18px;height:18px;border-radius:50%;background:conic-gradient(#0B6BF5 0 30%,#e5e5ea 30% 100%);-webkit-mask:radial-gradient(circle,transparent 5px,#000 6px);mask:radial-gradient(circle,transparent 5px,#000 6px);animation:thSpin .9s linear infinite}
@keyframes thSpin{to{transform:rotate(360deg)}}
.status .chk{width:20px;height:20px;border-radius:50%;background:#30d158;display:grid;place-items:center}
.status .chk svg{width:12px;height:12px}
.bar2{position:absolute;height:6px;border-radius:6px;background:rgba(255,255,255,.12);overflow:hidden;z-index:8}
.bar2 i{display:block;height:100%;width:0;background:#4c9bff;border-radius:6px;transition:width .6s ease}

/* blog scene */
.post{position:absolute;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 30px 70px -28px rgba(0,0,0,.35)}
.post .fi{position:relative;height:250px;background:#eef0f4;overflow:hidden}
.post .fi img{width:100%;height:100%;object-fit:cover;filter:blur(18px) saturate(.6);transform:scale(1.12);opacity:0;transition:filter 1.6s ease,opacity .8s ease,transform 1.6s ease}
.post .fi.on img{filter:none;opacity:1;transform:none}
.post .fi .shim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.65) 50%,rgba(255,255,255,0) 70%);background-size:220% 100%;animation:thShim 1.3s linear infinite}
.post .fi.on .shim{display:none}
.post .fi .lab{position:absolute;left:14px;bottom:14px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;padding:6px 10px;border-radius:8px;transition:opacity .4s ease}
@keyframes thShim{from{background-position:120% 0}to{background-position:-120% 0}}
.post .bd{padding:22px 26px}
.post h4{margin:0 0 14px;font:600 25px/1.18 -apple-system,BlinkMacSystemFont,Inter,system-ui,sans-serif;letter-spacing:-.025em;color:var(--ink);min-height:60px}
.post .ln{height:11px;border-radius:6px;background:#ececf0;margin:10px 0;position:relative;overflow:hidden}
.post .ln i{position:absolute;inset:0;width:0;background:#c9c9d0;border-radius:6px;transition:width .5s ease}
.post .pub{position:absolute;right:18px;top:196px;z-index:2;box-shadow:0 10px 24px -8px rgba(0,0,0,.4);padding:9px 18px;border-radius:980px;background:var(--blue);color:#fff;font-weight:600;font-size:14px;transition:transform .2s ease,background .3s ease}
.post .pub.done{background:#30d158}
.cards{position:absolute;display:flex;gap:18px;transition:transform .8s cubic-bezier(.65,0,.35,1)}
.bcard{width:250px;flex:none;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 16px 40px -20px rgba(0,0,0,.35);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.bcard img{display:block;width:100%;height:131px;object-fit:cover}
.bcard b{display:block;padding:12px 14px 14px;font-size:13.5px;font-weight:600;line-height:1.3;color:var(--ink);letter-spacing:-.01em}
.bcard.pre{opacity:0;transform:translateY(-30px) scale(.9)}
.bcard .new{display:inline-block;margin:0 14px 12px;font-size:11px;font-weight:700;letter-spacing:.08em;color:#1a8f3c}

/* blog: two pages in one window */
.win .pg{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.win .pg.on{opacity:1}
.win .pg .site img{display:block;width:100%}
.pg .site{transition:transform 1.1s cubic-bezier(.65,0,.35,1)}
.pg .rev{clip-path:inset(0 0 100% 0)}
.pg .pen{position:absolute;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#9B86FF 20%,#5FA6FF 80%,transparent);box-shadow:0 0 18px 4px rgba(155,134,255,.55);opacity:0;z-index:4}
.pg .mkpic{position:absolute;z-index:5;border-radius:12px;overflow:hidden;background:rgba(236,232,250,.92);display:grid;place-items:center;transition:opacity .6s ease}
.pg .mkpic b{position:relative;z-index:1;font:700 13px/1 -apple-system,Inter,sans-serif;color:#4B15AC;background:#fff;padding:8px 12px;border-radius:980px}
.pg .mkpic .shim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 70%);background-size:220% 100%;animation:thShim 1.2s linear infinite}
.pg .mkpic.done{opacity:0}
.pg .newtag{right:auto}

/* city pages */
.city{position:absolute;width:250px;height:170px;border-radius:12px;overflow:hidden;background:#111;box-shadow:0 20px 44px -18px rgba(0,0,0,.5);transition:left .9s cubic-bezier(.65,0,.35,1),top .9s cubic-bezier(.65,0,.35,1),opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.city .cb{height:22px;background:#f2f2f4;display:flex;align-items:center;gap:5px;padding:0 9px}
.city .cb i{width:6px;height:6px;border-radius:50%;background:#d1d1d6}
.city .cb span{margin-left:8px;font-size:9.5px;color:#6e6e73;white-space:nowrap;overflow:hidden}
.city .ci{position:absolute;left:0;right:0;top:22px;bottom:0;background-size:auto 250%;background-position:96% 14%}
.city .ci::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.08))}
.city .ct{position:absolute;left:14px;bottom:16px;z-index:2;color:#fff;font-family:Anton,"Bebas Neue",Impact,sans-serif;font-size:21px;line-height:1.02;text-transform:uppercase;letter-spacing:.01em}
.city .ct small{display:block;font:600 9px/1.2 -apple-system,Inter,sans-serif;letter-spacing:.12em;color:#ffb07f;margin-bottom:5px}
.city .bt{position:absolute;right:10px;top:32px;z-index:2;background:#F26B21;color:#fff;border-radius:980px;font:600 9px/1 -apple-system,Inter,sans-serif;padding:6px 9px}
.city.pre{opacity:0;transform:scale(.6)}
.counter{position:absolute;font:500 120px/1 -apple-system,BlinkMacSystemFont,"SF Pro Display",Inter,sans-serif;letter-spacing:-.05em;color:var(--ink)}
.counter small{display:block;font-size:20px;letter-spacing:-.01em;color:var(--ink2);margin-top:8px}

/* designs */
.dz{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .9s ease,transform 1.6s ease;transform:scale(1.04)}
.dz.on{opacity:1;transform:none}
.dz .ov{position:absolute;inset:0}
.dz .tx{position:absolute;left:56px;top:50%;transform:translateY(-50%);max-width:470px;color:#fff}
.dz .tx small{display:block;font:600 12px/1 -apple-system,Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px;opacity:.9}
.dz .tx b{display:block;font-size:48px;line-height:1.02;letter-spacing:-.02em}
.dz .tx span{display:inline-block;margin-top:22px;padding:13px 22px;border-radius:980px;font:600 14px/1 -apple-system,Inter,sans-serif;color:#fff}
.thumbs{position:absolute;display:flex;gap:14px}
.thumb{width:150px;transition:transform .3s ease,opacity .3s ease;opacity:.55}
.thumb .im{height:96px;border-radius:12px;background-size:cover;background-position:center;box-shadow:0 12px 26px -14px rgba(0,0,0,.6);transition:box-shadow .3s ease}
.thumb b{display:block;margin-top:10px;font-size:13px;font-weight:600;color:#f5f5f7}
.thumb small{display:block;font-size:12px;color:#86868b;margin-top:2px}
.thumb.on{opacity:1;transform:translateY(-6px)}
.thumb.on .im{box-shadow:0 0 0 3px #4c9bff,0 16px 30px -12px rgba(76,155,255,.6)}

/* phone */
.phone{position:absolute;width:300px;height:620px;border-radius:50px;background:#0b0b0d;padding:12px;box-shadow:0 50px 100px -30px rgba(0,0,0,.6),inset 0 0 0 2px #2c2c2e}
.phone .scr{position:relative;width:100%;height:100%;border-radius:39px;overflow:hidden;background:#fff}
.phone .isl{position:absolute;left:50%;top:10px;transform:translateX(-50%);width:92px;height:26px;border-radius:20px;background:#000;z-index:9}
.phone .msite{position:absolute;left:0;top:0;width:100%;transition:transform 1s cubic-bezier(.65,0,.35,1)}
.phone .msite img{width:100%;display:block}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:5;background:#fff;border-radius:24px 24px 0 0;padding:22px 18px 26px;box-shadow:0 -20px 40px -10px rgba(0,0,0,.25);transform:translateY(105%);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.sheet.up{transform:none}
.sheet h5{margin:0 0 4px;font:700 19px/1.15 -apple-system,Inter,sans-serif;letter-spacing:-.02em;color:#14161a}
.sheet p{font-size:12.5px!important;color:#6e6e73;margin-bottom:12px!important}
.fld{background:#f2f2f4;border-radius:12px;padding:12px 13px;font-size:13.5px;color:#1d1d1f;margin-bottom:9px;min-height:42px;display:flex;align-items:center}
.fld em{font-style:normal;color:#9a9aa0}
.fld.focus{background:#fff;box-shadow:0 0 0 2px #F26B21}
.sbtn{margin-top:6px;background:#F26B21;color:#fff;border-radius:980px;text-align:center;padding:13px;font:700 14px/1 -apple-system,Inter,sans-serif;transition:transform .15s ease}
.sbtn.press{transform:scale(.96)}
.thanks{position:absolute;inset:0;z-index:6;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:30px;opacity:0;transition:opacity .5s ease}
.thanks.on{opacity:1}
.thanks .big{width:64px;height:64px;border-radius:50%;background:#30d158;display:grid;place-items:center}
.thanks .big svg{width:30px;height:30px}
.thanks b{font:700 20px/1.2 -apple-system,Inter,sans-serif;color:#14161a}
.thanks span{font-size:13.5px;color:#6e6e73;line-height:1.4}
.notif{position:absolute;z-index:12;width:330px;background:rgba(245,245,247,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:20px;padding:13px 15px;display:flex;gap:12px;align-items:flex-start;box-shadow:0 24px 50px -16px rgba(0,0,0,.45);transform:translateY(-30px);opacity:0;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .4s ease}
.notif.on{transform:none;opacity:1}
.notif .ap{width:36px;height:36px;border-radius:9px;background:#30d158;display:grid;place-items:center;flex:none}
.notif .ap svg{width:20px;height:20px}
.notif b{display:block;font-size:13px;color:#1d1d1f}
.notif span{display:block;font-size:13px;color:#3a3a3c;line-height:1.35;margin-top:2px}
.notif small{position:absolute;right:14px;top:13px;font-size:11.5px;color:#86868b}

/* the homepage rewriting itself for the seller's situation, as it scrolls (real captures of both versions) */
.phone .msite .fcw{position:absolute;left:0;right:0;top:0;clip-path:inset(0 0 100% 0)}
.phone .msite .fcw img{width:100%;display:block}
.phone .rwline{position:absolute;left:-10%;right:-10%;height:4px;top:0;opacity:0;background:linear-gradient(90deg,transparent,#9B86FF 20%,#F26B21 50%,#5FA6FF 80%,transparent);box-shadow:0 0 22px 6px rgba(242,107,33,.45);z-index:2}
.phone .rwchip{position:absolute;left:50%;top:44px;z-index:7;transform:translate(-50%,-10px);opacity:0;white-space:nowrap;background:#1d1d1f;color:#fff;font:700 11.5px/1 -apple-system,Inter,sans-serif;padding:8px 12px;border-radius:980px;box-shadow:0 10px 24px -8px rgba(0,0,0,.5);transition:opacity .4s,transform .4s}
.phone .rwchip.on{opacity:1;transform:translate(-50%,0)}

/* the same rewrite, big, on the desktop site in the window beside the phone */
.vp.dsite{z-index:3;background:#fff;opacity:0;transition:opacity .6s ease;pointer-events:none}
.vp.dsite.on{opacity:1}
.dsite .dpg{position:absolute;left:0;top:0;width:100%}
.dsite .dpg img{width:100%;display:block}
.dsite .fcw{position:absolute;left:0;right:0;top:0;clip-path:inset(0 0 100% 0)}
.dsite .rwline{position:absolute;left:0;right:0;height:5px;top:0;opacity:0;background:linear-gradient(90deg,transparent,#9B86FF 15%,#F26B21 50%,#5FA6FF 85%,transparent);box-shadow:0 0 26px 8px rgba(242,107,33,.45);z-index:2}
.dsite .rwchip{position:absolute;left:50%;top:16px;z-index:4;transform:translate(-50%,-10px);opacity:0;white-space:nowrap;background:#1d1d1f;color:#fff;font:700 14px/1 -apple-system,Inter,sans-serif;padding:10px 16px;border-radius:980px;box-shadow:0 12px 28px -8px rgba(0,0,0,.5);transition:opacity .4s,transform .4s}
.dsite .rwchip.on{opacity:1;transform:translate(-50%,0)}

/* SmartForm situation picker on the phone */
.sit{position:absolute;left:0;right:0;bottom:0;z-index:6;background:#fff;border-radius:24px 24px 0 0;padding:22px 16px 24px;box-shadow:0 -20px 40px -10px rgba(0,0,0,.25);transform:translateY(105%);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.sit.up{transform:none}
.sit h5{margin:0 0 12px;font:700 17px/1.2 -apple-system,Inter,sans-serif;color:#14161a}
.sit span{display:block;padding:10px 12px;border-radius:12px;background:#f5f5f7;margin-bottom:7px;font-size:13px;font-weight:600;color:#1d1d1f;transition:background .25s,color .25s}
.sit span.pick.on{background:#F26B21;color:#fff}
.sitv{position:absolute;left:12px;right:12px;top:150px;z-index:4;background:#1d1d1f;color:#fff;border-radius:16px;padding:16px;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s}
.sitv.on{opacity:1;transform:none}
.sitv small{display:block;font:700 10px/1 -apple-system,Inter,sans-serif;letter-spacing:.12em;color:#FFB07F;margin-bottom:8px}
.sitv b{display:block;font-size:17px;line-height:1.2}
.sitv span{display:block;font-size:12.5px;color:#d1d1d6;margin-top:8px;line-height:1.4}

/* CRM board */
.crm{position:absolute;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:18px}
.col h6{margin:0 0 12px;font:600 12px/1 -apple-system,Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#6e6e73;display:flex;justify-content:space-between}
.col h6 em{font-style:normal;background:#e5e5ea;color:#3a3a3c;border-radius:980px;padding:3px 8px;letter-spacing:0}
.lc{background:#fff;border-radius:12px;padding:12px 13px;margin-bottom:10px;max-height:130px;overflow:hidden;box-shadow:0 6px 16px -10px rgba(0,0,0,.35);transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .5s ease,box-shadow .5s ease,max-height .6s ease,padding .6s ease,margin .6s ease}
.lc b{display:block;font-size:13.5px;color:#1d1d1f}
.lc span{display:block;font-size:12px;color:#6e6e73;margin-top:3px}
.lc .tg{display:inline-block;margin-top:8px;font-size:10.5px;font-weight:600;border-radius:6px;padding:3px 7px;background:#fff3ea;color:#c2510f}
.lc.pre{opacity:0;transform:scale(.9);max-height:0;padding-top:0;padding-bottom:0;margin-bottom:0}
.lc.hot{box-shadow:0 0 0 3px #0B6BF5,0 14px 30px -12px rgba(11,107,245,.5)}

/* Humphrey Live bubble on the site */
.live{position:absolute;z-index:9;width:380px;background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 40px 80px -24px rgba(0,0,0,.5);transform-origin:100% 100%;transform:scale(.4);opacity:0;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .4s ease}
.live.on{transform:none;opacity:1}
.live .lh{display:flex;align-items:center;gap:12px;padding:16px 18px;background:linear-gradient(135deg,#6d3fd6,#4B15AC);color:#fff}
.live .lh svg{width:46px;height:46px}
.live .lh b{display:block;font-size:15.5px}
.live .lh small{display:block;font-size:12px;opacity:.8}
.live .chat{padding:14px 16px 18px;min-height:250px}
.live .msg.me{background:#efe9fb;color:#2b1d4f}
.live .msg.hu{background:#f3f3f6}
.live .tm{align-self:center;font-size:11px;color:#9a9aa0}
.livelaunch{position:absolute;z-index:8;width:74px;height:74px;border-radius:50%;background:#fff;box-shadow:0 18px 40px -12px rgba(0,0,0,.5);display:grid;place-items:center;transition:transform .4s ease,opacity .4s ease}
.livelaunch svg{width:62px;height:62px}

/* live tool overlays on the screenshots */
.lv{position:absolute;z-index:3;pointer-events:none}
.lv svg{display:block;width:100%;height:100%}
.lv.pcard{overflow:hidden;border-radius:16px}
/* the real block's scan (apex-instant-offer.js .rio-scan): a band 40% tall runs down each photo */
.lv .pscan{position:absolute;left:0;right:0;top:0;height:40%;transform:translateY(-100%);background:linear-gradient(180deg,transparent,rgba(242,107,33,.35) 85%,#F26B21 100%);opacity:.75;animation:thRioScan 3.4s ease-in-out infinite}
@keyframes thRioScan{0%{transform:translateY(-100%)}60%,100%{transform:translateY(250%)}}
/* the repair prices pop up as the band finishes passing over the photo (same 3.4 s cycle, same delay) */
.lv .pprice{position:absolute;z-index:4;transform:translate(-50%,0) scale(.4);opacity:0;white-space:nowrap;background:#1d1d1f;color:#fff;font:700 11px/1 -apple-system,Inter,sans-serif;padding:5px 8px;border-radius:980px;box-shadow:0 10px 22px -8px rgba(0,0,0,.55);animation:thPrice 3.4s ease-in-out infinite}
.lv .pprice b{color:#FFB07F;margin-left:4px}
@keyframes thPrice{0%,52%{opacity:0;transform:translate(-50%,0) scale(.4)}58%{opacity:1;transform:translate(-50%,0) scale(1.12)}62%,94%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,0) scale(.9)}}

/* Humphrey Live: a spoken conversation */
.vfeat{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:12px 26px;margin-top:28px}
.vfeat b{display:block;font-size:16px;font-weight:600;color:var(--ink)}
.vfeat span{display:block;font-size:15px;color:var(--ink2);margin-top:3px;line-height:1.4}
.live{width:420px}
.live .lh{position:relative}
.live .lh .lst{transition:color .3s}
.live[data-st="talk"] .lst{color:#E6DCFF}.live[data-st="listen"] .lst{color:#9EF0B2}
.lwv{position:absolute;right:18px;top:50%;transform:translateY(-50%);display:flex;gap:3px;align-items:center;height:26px}
.lwv i{width:4px;height:4px;border-radius:4px;background:#fff;opacity:.6}
.live[data-st="talk"] .lwv i{animation:thWave .8s ease-in-out infinite}
.live[data-st="listen"] .lwv i{background:#9EF0B2;animation:thWave 1.1s ease-in-out infinite}
.lwv i:nth-child(2){animation-delay:.1s!important}.lwv i:nth-child(3){animation-delay:.2s!important}.lwv i:nth-child(4){animation-delay:.05s!important}.lwv i:nth-child(5){animation-delay:.25s!important}
.live .chat{max-height:430px;min-height:300px;overflow:hidden;justify-content:flex-end}
.msg.voice .tx{display:block}
.vw{display:flex;gap:3px;align-items:center;height:22px}
.vw i{width:3px;height:4px;border-radius:3px;background:currentColor;opacity:.65}
.msg.me.voice .vw{color:#6d3fd6}
.msg.voice.speaking .vw i,.msg.voice.talking .vw i{animation:thWave .7s ease-in-out infinite}
.vw i:nth-child(3n){animation-delay:.12s!important}.vw i:nth-child(3n+1){animation-delay:.24s!important}.vw i:nth-child(4n){animation-delay:.06s!important}
.msg.voice:not(.speaking) .vw{height:10px}.msg.voice:not(.speaking):not(.talking) .vw i{height:3px!important;animation:none}
.msg.hu.voice .spk .vw{color:#6d3fd6}
.msg.hu.cut{opacity:.55}
.msg.hu.cut .tx::after{content:" (interrupted)";font-size:12px;color:#9a9aa0}
.lbar{display:flex;align-items:center;gap:10px;margin:0 16px 16px;padding:10px 10px 10px 16px;border-radius:16px;background:#f3f3f6;font-size:13.5px;color:#6e6e73}
.lbar span{flex:1}
.lmic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#6d3fd6,#4B15AC);font-style:normal}
.lmic svg{width:18px;height:18px}
.live[data-st="listen"] .lmic{background:#30d158;animation:thMic 1.1s infinite}

/* SEO */
.fields{padding:8px 20px 20px}
.fields label{display:block;font-size:12px;font-weight:600;color:#6e6e73;margin:14px 0 7px;letter-spacing:.02em}
.fields .fld{font-size:14px}
.fields .cnt{float:right;font-weight:500;color:#1a8f3c}
.serp{position:absolute;background:#fff;border-radius:16px;padding:24px 26px;box-shadow:0 30px 70px -28px rgba(0,0,0,.35);font-family:Arial,Helvetica,sans-serif}
.serp .src{display:flex;align-items:center;gap:10px;font-size:13px;color:#202124}
.serp .src i{width:28px;height:28px;border-radius:50%;background:#f1f3f4 url("/assets/images/talk-to-humphrey/nav-v1.webp") no-repeat 16% 50%/auto 140%;flex:none}
.serp .src small{display:block;font-size:12px;color:#4d5156}
.serp .t{font-size:20px;line-height:1.3;color:#1a0dab;margin:10px 0 5px;min-height:26px}
.serp .d{font-size:14px;line-height:1.58;color:#4d5156;min-height:44px}
.serp .lbl{position:absolute;right:20px;top:-12px;background:#1d1d1f;color:#fff;font:600 11px/1 -apple-system,Inter,sans-serif;padding:7px 10px;border-radius:980px;font-family:-apple-system,Inter,sans-serif}
.rings{position:absolute;display:flex;gap:40px}
.ring{text-align:center}
.ring .rg{width:150px;height:150px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#30d158 calc(var(--p,0)*1%),#e5e5ea 0);-webkit-mask:radial-gradient(circle,transparent 61px,#000 62px);mask:radial-gradient(circle,transparent 61px,#000 62px)}
.ring .num{position:relative;margin-top:-150px;height:150px;display:grid;place-items:center;font:500 46px/1 -apple-system,BlinkMacSystemFont,"SF Pro Display",Inter,sans-serif;letter-spacing:-.03em;color:#1a8f3c}
.ring b{display:block;margin-top:14px;font-size:15px;font-weight:500;color:var(--ink)}

/* AI search */
.aichat{position:absolute;background:#fff;border-radius:18px;box-shadow:0 30px 70px -28px rgba(0,0,0,.35);overflow:hidden;padding:0 0 20px}
.aih{display:flex;align-items:center;gap:10px;padding:16px 20px;background:#f7f7f9}
.aih .aio{width:26px;height:26px;border-radius:8px;background:conic-gradient(from 200deg,#10a37f,#5FA6FF,#9B86FF,#F26B21,#10a37f)}
.aih b{font-size:15px;color:#1d1d1f}.aih em{font-style:normal;font-size:12px;color:#6e6e73}
.aih small{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6e6e73;background:#ececf0;border-radius:980px;padding:5px 9px}
.aiq{margin:22px 22px 0 auto;max-width:72%;background:#0B6BF5;color:#fff;border-radius:20px 20px 6px 20px;padding:13px 16px;font-size:16px;min-height:46px;width:max-content;opacity:0;transition:opacity .3s}
.aiq.on{opacity:1}
.aia{margin:18px 22px 0}
.aia .ans{font-size:16px!important;line-height:1.55!important;color:#1d1d1f!important;min-height:120px}
.aia .ans b{font-weight:700}
.aia .src{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px 14px;border-radius:14px;background:#f5f5f7;max-width:360px;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.aia .src.on{opacity:1;transform:none}
.aia .srcd{width:34px;height:34px;border-radius:50%;background:#fff url(/assets/images/talk-to-humphrey/nav-v1.webp) no-repeat 16% 50%/auto 140%;flex:none}
.aia .src b{display:block;font-size:13.5px}.aia .src small{font-size:12px;color:#6e6e73}
.aibars{padding:4px 20px 16px}
.aibars div{display:grid;grid-template-columns:86px 1fr 34px;align-items:center;gap:10px;margin:10px 0;font-size:13px;color:#3a3a3c}
.aibars i{display:block;height:10px;border-radius:6px;background:linear-gradient(90deg,#9B86FF,#5FA6FF);width:0;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.aibars b{text-align:right;font-size:13px}
.aifl{padding:4px 20px 16px}
.aifl span{display:flex;gap:10px;align-items:center;padding:9px 0;font-size:14px;color:#1d1d1f;opacity:0;transform:translateX(10px);transition:opacity .4s,transform .4s}
.aifl span::before{content:"✓";width:22px;height:22px;border-radius:50%;background:#30d158;color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center;flex:none}
.aifl span.on{opacity:1;transform:none}
.aib .ph small,.aif .ph small{max-width:330px;white-space:normal;line-height:1.35}

/* show me how */
.dim{position:absolute;inset:0;z-index:20;pointer-events:none;transition:opacity .4s ease}
.spot{position:absolute;z-index:21;border-radius:14px;box-shadow:0 0 0 2000px rgba(0,0,0,.55),0 0 0 4px rgba(76,155,255,.9);transition:left .8s cubic-bezier(.65,0,.35,1),top .8s cubic-bezier(.65,0,.35,1),width .8s cubic-bezier(.65,0,.35,1),height .8s cubic-bezier(.65,0,.35,1),opacity .4s ease}
.tip{position:absolute;z-index:22;width:300px;background:#fff;border-radius:16px;padding:16px 18px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);transition:left .8s cubic-bezier(.65,0,.35,1),top .8s cubic-bezier(.65,0,.35,1),opacity .4s ease}
.tip .st{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.tip p{font-size:15px!important;color:#1d1d1f!important;margin-top:6px!important;line-height:1.4!important}
.tip .wv{display:flex;gap:3px;align-items:center;height:20px;margin-top:10px}
.tip .wv i{width:3px;border-radius:3px;background:#7c5cf0;animation:thWave 1s ease-in-out infinite}
@keyframes thWave{0%,100%{height:4px}50%{height:18px}}
.modes{position:absolute;display:flex;gap:6px;background:#1d1d1f;border-radius:980px;padding:5px}
.modes span{padding:10px 20px;border-radius:980px;font-size:14px;font-weight:600;color:#a1a1a6;cursor:pointer;pointer-events:auto;transition:background .3s ease,color .3s ease}
.modes span:hover{color:#fff}.modes span.on:hover{color:#1d1d1f}
.modes{pointer-events:auto;z-index:5}
.modes span.on{background:#f5f5f7;color:#1d1d1f}

/* a settings panel sliding into the editor (Show me how) */
.setp{position:absolute;left:0;top:86px;bottom:0;width:300px;z-index:5;background:#fff;padding:18px 18px;box-shadow:12px 0 30px -14px rgba(0,0,0,.35);transform:translateX(-105%);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.setp.on{transform:none}
.setp b{display:block;font-size:16px;color:#1d1d1f}
.setp small{display:block;font-size:12px;color:#6e6e73;margin-top:2px}
.setp label{display:block;font-size:11.5px;font-weight:600;color:#6e6e73;margin:14px 0 6px}
.setp .fld{font-size:13px;min-height:38px;padding:10px 12px}
.setp .ph3{height:84px;border-radius:10px;background-size:cover;background-position:center}
.setp .sw3{display:flex;gap:8px}.setp .sw3 i{width:28px;height:28px;border-radius:50%}
.setp .secs{margin-top:16px}
.setp .secs span{display:flex;justify-content:space-between;align-items:center;padding:9px 2px;font-size:12.5px;font-weight:600;color:#1d1d1f;box-shadow:inset 0 -1px 0 #ececf0}
.setp .secs span::after{content:"\203A";color:#9a9aa0;font-size:15px}
.setp .sw3 i:first-child{box-shadow:0 0 0 2px #fff,0 0 0 4px #F26B21}

/* evaluate */
.scan{position:absolute;left:0;right:0;height:140px;z-index:7;background:linear-gradient(180deg,rgba(76,155,255,0),rgba(76,155,255,.28) 85%,rgba(76,155,255,.9) 100%);opacity:0;transition:opacity .3s ease}
.pin{position:absolute;z-index:8;width:34px;height:34px;border-radius:50%;background:#30d158;color:#fff;font:700 15px/34px -apple-system,Inter,sans-serif;text-align:center;box-shadow:0 0 0 6px rgba(48,209,88,.25),0 10px 20px -6px rgba(0,0,0,.4);transform:scale(0);transition:transform .45s cubic-bezier(.2,1.4,.4,1)}
.pin.fix{background:#ff9f0a;box-shadow:0 0 0 6px rgba(255,159,10,.25),0 10px 20px -6px rgba(0,0,0,.4)}
.pin.on{transform:none}
.report{padding:6px 18px 18px}
.ri{display:flex;gap:12px;padding:9px 0;opacity:0;transform:translateX(16px);transition:opacity .45s ease,transform .45s ease}
.ri.on{opacity:1;transform:none}
.ri .n{width:26px;height:26px;border-radius:50%;background:#30d158;color:#fff;font:700 12px/26px -apple-system,Inter,sans-serif;text-align:center;flex:none}
.ri .n.fix{background:#ff9f0a}
.ri b{display:block;font-size:14px;color:#1d1d1f}
.ri span{display:block;font-size:13px;color:#6e6e73;margin-top:2px;line-height:1.4}
.night .ri b{color:#f5f5f7}.night .ri span{color:#a1a1a6}
.report .reading{display:flex;align-items:center;gap:10px;padding:12px 0;font-size:14px;font-weight:600;color:#3a3a3c;transition:opacity .3s}
.report .reading .spin{width:18px;height:18px;border-radius:50%;background:conic-gradient(#0B6BF5 0 30%,#e5e5ea 30% 100%);-webkit-mask:radial-gradient(circle,transparent 5px,#000 6px);mask:radial-gradient(circle,transparent 5px,#000 6px);animation:thSpin .9s linear infinite;flex:none}
.report .reading.off{display:none}
.ri .n.you{background:#8e8e93}
.ri .st{display:inline-block;margin-top:6px;font-style:normal;font-size:12px;font-weight:700;border-radius:980px;padding:0;transition:all .3s}
.ri .st.busy{padding:4px 9px;background:#fff3d6;color:#a15c00}
.ri .st.ok{padding:4px 9px;background:#e8f8ee;color:#1a8f3c}
.ri .st.you{padding:4px 9px;background:#f0f0f3;color:#3a3a3c}
.panel .evchat{padding:4px 18px 0;gap:8px}
.evbtns{display:flex;gap:8px;padding:10px 18px 0;opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease}
.evbtns.on{opacity:1;transform:none}
.eb{padding:10px 16px;border-radius:980px;background:#f0f0f3;font-size:13.5px;font-weight:600;color:#1d1d1f}
.eb.yes{background:#0B6BF5;color:#fff}.eb.yes.done{background:#30d158}

/* 12. the laptop: the Apex homepage's own device (index.php .jr-shell / .jr-view / .jr-refl, the same
   images and the same screen inset), flashing through every tool in the app's own look. */
.lap2{position:absolute}
.lap2 .shell{width:100%;aspect-ratio:2480/1409;background:url(/assets/home/833cadd538cb.webp) center/100% 100% no-repeat;filter:drop-shadow(0 26px 46px rgba(0,0,0,.45))}
.lap2 .refl{width:100%;aspect-ratio:2480/174;background:url(/assets/home/a7bcdc22eb8e.webp) center/100% 100% no-repeat;opacity:.5}
.lap2 .shell{position:relative}
.lap2 .lview{position:absolute;left:11.22%;top:3.23%;width:77.44%;height:69.5%;overflow:hidden;background:#F4F5F7}
.lap2 .app{position:absolute;left:0;top:0;width:871px;height:444px;transform:scale(.8);transform-origin:0 0;display:flex;background:#F4F5F7}
.app .side{width:142px;flex:none;background:#1a1c1e;padding:10px 0;display:flex;flex-direction:column;gap:0}
.app .side .logo{color:#fff;font:800 13px/1 -apple-system,Inter,sans-serif;letter-spacing:.04em;padding:0 14px 10px}
.app .side .logo i{font:italic 500 13px/1 -apple-system,Inter,sans-serif;color:#B9A6F5;letter-spacing:0}
.app .side span{display:block;padding:3.6px 14px;font-size:10.5px;color:#a1a1a6;white-space:nowrap;border-radius:0;transition:background .2s,color .2s}
.app .side span.grp{color:#6e6e73;font-weight:700;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;margin-top:4px}
.app .side span.sub{padding-left:24px}
.app .side span.on{background:#0B6BF5;color:#fff}
.app .main{flex:1;display:flex;flex-direction:column;min-width:0}
.app .ah{padding:12px 18px 10px;background:#fff;display:flex;align-items:baseline;gap:12px;box-shadow:0 1px 0 rgba(0,0,0,.06)}
.app .ah .t{font:700 17px/1.1 -apple-system,Inter,sans-serif;color:#1d1d1f;letter-spacing:-.02em;white-space:nowrap}
.app .ah .s{font-size:11.5px;color:#6e6e73;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .body{flex:1;padding:14px 18px;overflow:hidden;position:relative}
.app .body.in > *{animation:thIn .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes thIn{from{opacity:0;transform:translateY(10px) scale(.985)}}
.m-site{position:relative;border-radius:10px;overflow:hidden;height:100%;box-shadow:0 10px 24px -14px rgba(0,0,0,.35)}
.m-site img{width:100%;display:block}
.m-say{position:absolute;left:16px;bottom:16px;background:#1d1d1f;color:#fff;border-radius:14px;padding:10px 14px;font-size:14px}
.m-heat{position:absolute;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;background:radial-gradient(circle,rgba(255,40,0,.75),rgba(255,180,0,.45) 35%,rgba(0,200,255,.18) 60%,transparent 72%);mix-blend-mode:multiply;animation:thHeat 1.6s ease-in-out infinite alternate}
@keyframes thHeat{to{filter:brightness(1.2);opacity:.85}}
.m-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.m-city{height:120px;border-radius:10px;background-size:auto 240%;background-position:96% 14%;position:relative;overflow:hidden}
.m-city::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.65),rgba(0,0,0,.05))}
.m-city b{position:absolute;left:12px;bottom:12px;z-index:1;color:#fff;font:400 16px/1.05 Anton,Impact,sans-serif;text-transform:uppercase;max-width:60%}
.m-blog{background:#fff;border-radius:12px;padding:0 0 14px;overflow:hidden}.m-blog img{width:100%;height:190px;object-fit:cover;display:block}.m-blog b{display:block;margin:14px 16px 10px;font-size:18px;color:#1d1d1f}.m-blog i,.m-doc i{display:block;height:9px;margin:8px 16px;border-radius:6px;background:#e5e5ea}
.m-kan{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.m-kan h6{margin:0 0 8px;font:700 11px/1 -apple-system,Inter,sans-serif;color:#6e6e73;text-transform:uppercase;letter-spacing:.05em}.m-kan span{display:block;height:54px;border-radius:10px;background:#fff;margin-bottom:8px;box-shadow:0 4px 12px -8px rgba(0,0,0,.4)}
.m-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}.m-kpis div{background:#fff;border-radius:12px;padding:14px}.m-kpis small{display:block;font-size:12px;color:#6e6e73}.m-kpis b{font:700 24px/1.2 -apple-system,Inter,sans-serif;color:#1d1d1f}.m-kpis em{font-style:normal;margin-left:8px;font-size:12px;font-weight:700;color:#1a8f3c}
.m-rows div{display:flex;justify-content:space-between;gap:12px;background:#fff;border-radius:10px;padding:12px 14px;margin-bottom:8px;font-size:14px;color:#3a3a3c}.m-rows .f{font-weight:600;color:#1d1d1f}
.m-prof{display:grid;grid-template-columns:200px 1fr;gap:14px}.m-prof .m-ph{grid-row:span 2;border-radius:12px;background-size:cover;background-position:center;min-height:200px}.m-prof .m-kpis{grid-template-columns:repeat(3,1fr);margin:0}
.m-chat{display:flex;flex-direction:column;gap:10px;max-width:520px}.m-chat p{margin:0;padding:12px 15px;border-radius:18px;font-size:15px;max-width:75%}.m-chat .l{background:#fff;color:#1d1d1f;align-self:flex-start}.m-chat .r{background:#0B6BF5;color:#fff;align-self:flex-end}.m-chat .sys{align-self:center;background:#ffe5e3;color:#c4261d;font-size:13px;font-weight:600}
.m-bars{display:flex;align-items:flex-end;gap:6px;height:120px;margin-bottom:12px}.m-bars i{flex:1;border-radius:5px 5px 0 0}
.m-line{width:100%;height:180px;display:block;background:#fff;border-radius:12px}
.m-seq{display:flex;flex-direction:column;gap:10px}.m-seq span{background:#fff;border-radius:12px;padding:12px 14px;font-weight:600;font-size:14px;color:#1d1d1f;box-shadow:inset 4px 0 0 #0B6BF5}
.m-doc{background:#fff;border-radius:12px;padding:18px 0;max-width:460px}.m-doc b{display:block;margin:0 16px 10px;font-size:18px}.m-doc span{display:inline-block;margin:12px 16px 0;padding:8px 14px;border-radius:980px;background:#e8f8ee;color:#1a8f3c;font-weight:700}
.m-ads{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.m-ads div{background:#fff;border-radius:12px;overflow:hidden}.m-ads img{width:100%;height:120px;object-fit:cover;display:block}.m-ads b{display:block;margin:10px 12px 0;font-size:18px;color:#1a8f3c}.m-ads small{display:block;margin:2px 12px 12px;color:#6e6e73}
.m-post{background:#fff;border-radius:12px;padding:14px;max-width:480px}.m-post .h{display:flex;align-items:center;gap:10px}.m-post .h img{width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:16% 50%}.m-post p{font-size:14px;color:#1d1d1f;margin:10px 0!important}.m-post .pi{width:100%;height:150px;object-fit:cover;border-radius:8px;display:block}.m-post .ok{display:inline-block;margin-top:10px;font-size:12px;font-weight:700;color:#1a8f3c}
.m-gbp{background:#fff;border-radius:12px;padding:16px;max-width:520px}.m-gbp b{font-size:26px;color:#f5a623}.m-gbp small{display:block;color:#6e6e73;margin-bottom:10px}.m-gbp .m-rows div{background:#f5f5f7}
.m-fun div{position:relative;height:40px;margin-bottom:9px}.m-fun span{position:absolute;left:0;top:0;bottom:0;border-radius:10px;background:linear-gradient(90deg,#0B6BF5,#5FA6FF)}.m-fun b{position:relative;line-height:40px;margin-left:14px;color:#fff;font-size:14px}
.m-jour{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.m-jour span{background:#fff;border-radius:980px;padding:10px 14px;font-weight:600;font-size:14px}.m-jour i{color:#0B6BF5;font-style:normal}
.m-ab{display:grid;grid-template-columns:1fr 1fr;gap:14px}.m-ab div{background:#fff;border-radius:12px;overflow:hidden;opacity:.7}.m-ab .win{opacity:1;box-shadow:0 0 0 3px #30d158}.m-ab img{width:100%;height:190px;object-fit:cover;object-position:top;display:block}.m-ab b{display:block;padding:10px 12px;font-size:16px}
.m-rings{display:flex;gap:40px}.m-rings div{width:150px;height:150px;border-radius:50%;display:grid;place-items:center;text-align:center;font-size:13px;color:#6e6e73;background:radial-gradient(circle,#fff 60%,transparent 61%),conic-gradient(#30d158 calc(var(--p)*1%),#e5e5ea 0)}.m-rings b{display:block;font-size:40px;color:#1a8f3c}
.m-wave{background:#fff;border-radius:12px;padding:14px 14px 0;margin-bottom:12px}
.m-pin{display:inline-block;margin-top:10px;padding:8px 12px;border-radius:980px;background:#fff3ea;color:#c2510f;font-weight:700;font-size:13px}
.tlist{position:absolute;width:250px;columns:1}
.tlist .tg{margin-bottom:9px}
.tlist .gh{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8FB8FF;margin-bottom:5px}
.tlist .ti{display:block;font-size:12.5px;line-height:1.42;color:rgba(242,243,246,.4);transition:color .2s,transform .2s}
.tlist .ti.done{color:rgba(242,243,246,.72)}
.tlist .ti.on{color:#fff;font-weight:600;transform:translateX(6px)}
.tlist .ti.on::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#5FA6FF;margin:0 8px 2px -14px;box-shadow:0 0 10px #5FA6FF}

/* new screens: ad creator, cockpit, social, voicemail */
.m-adc{display:grid;grid-template-columns:330px 1fr;gap:16px;align-items:start}
.m-fbad{background:#fff;border-radius:10px;box-shadow:0 8px 20px -12px rgba(0,0,0,.4);overflow:hidden}
.m-fbad .h{display:flex;gap:8px;align-items:center;padding:10px 12px 0}.m-fbad .h img{width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:16% 50%}
.m-fbad .h b{display:block;font-size:12px}.m-fbad .h small{font-size:10.5px;color:#6e6e73}
.m-fbad p{font-size:12px!important;color:#1d1d1f!important;margin:8px 12px!important;line-height:1.35!important}
.m-fbad .pi{width:100%;height:150px;object-fit:cover;display:block}
.m-fbad .cta{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;background:#f0f2f5}
.m-fbad .cta span{font-size:10px;color:#65676b}.m-fbad .cta b{display:block;font-size:12px;color:#1d1d1f}
.m-fbad .cta em{font-style:normal;font-size:11px;font-weight:600;background:#e4e6eb;border-radius:6px;padding:6px 10px}
.m-btn{display:inline-block;margin-top:8px;padding:9px 16px;border-radius:9px;background:#0B6BF5;color:#fff;font-weight:700;font-size:12.5px}
.m-mc small{display:block;font-size:12px;font-weight:700;color:#3a3a3c;margin:4px 0 8px}
.m-mc .m-ads img{height:88px}
.m-soc .tabs{display:flex;gap:6px;margin-bottom:10px}.m-soc .tabs span{padding:6px 11px;border-radius:980px;background:#e8e8ed;font-size:11.5px;font-weight:600;color:#3a3a3c}.m-soc .tabs span.on{background:#1d1d1f;color:#fff}
.m-soc .m-post{max-width:420px}.m-soc .pi{height:120px}
.m-post .acts{display:flex;gap:6px;margin-top:8px}.m-post .acts span{padding:6px 12px;border-radius:8px;background:#f0f0f3;font-size:11.5px;font-weight:600}.m-post .acts .ok{background:#30d158;color:#fff;margin:0}
.m-chat .vm{align-self:flex-start;background:#fff3d6;color:#7a4b00;font-size:13px}

/* Humphrey Ads screens */
.m-adside .m-k{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6e6e73;margin-bottom:6px}
.m-adside .m-rows div{padding:8px 11px;margin-bottom:5px;font-size:12px}
.m-chk{display:block;margin-top:4px;padding:8px 11px;border-radius:9px;background:#e8f8ee;color:#1a8f3c;font-size:11.5px;font-weight:700}
.m-acts{display:flex;gap:6px}.m-btn2{display:inline-block;margin-top:8px;padding:9px 16px;border-radius:9px;background:#e8e8ed;color:#1d1d1f;font-weight:700;font-size:12.5px}
.m-tbl{background:#fff;border-radius:10px;overflow:hidden;margin-bottom:12px}
.m-tbl div{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr 1.2fr;padding:9px 12px;font-size:12px;color:#3a3a3c;box-shadow:inset 0 -1px 0 #f0f0f3}
.m-tbl .hd{background:#f7f7f9;font-weight:700;color:#6e6e73;font-size:11px}
.m-tbl .f{font-weight:600;color:#1d1d1f}

/* everything grid */
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:16px;margin-top:52px}
.ft{background:#fff;border-radius:22px;padding:30px 28px 32px;transition:transform .3s ease,box-shadow .3s ease}
.ft:hover{transform:translateY(-4px);box-shadow:0 24px 50px -28px rgba(0,0,0,.35)}
.ft .ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:#eef4ff;color:var(--blue);margin-bottom:20px}
.ft .ico svg{width:24px;height:24px}
.ft h3{font-size:21px;margin-bottom:8px}
.ft p{font-size:16px}
.rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:16px;margin-top:44px}
.rule{background:var(--grey);border-radius:22px;padding:30px 28px}
.rule h3{font-size:21px;margin-bottom:8px}
.rule p{font-size:16px}

/* TalkToBuild: its own logo and colours (the bubble's blue to violet) */
.th .ttb{background:radial-gradient(70% 70% at 0% 0%,rgba(22,164,247,.16),transparent 62%),radial-gradient(60% 70% at 100% 10%,rgba(90,30,227,.16),transparent 64%),radial-gradient(60% 60% at 60% 100%,rgba(168,85,247,.10),transparent 70%),#fbfaff}
.th .ttb-logo{display:block;height:58px;width:auto;margin:0 0 22px}
.th .ttb .eyebrow{color:#5A1EE3}
.th .ttb h2 .soft{background:linear-gradient(100deg,#16A4F7,#3D49EE 45%,#5A1EE3 80%);-webkit-background-clip:text;background-clip:text;color:transparent}
.th .ttb .panel .ph img{height:22px;width:auto;display:block}
.th .ttb .panel .ph.ph-ttb{justify-content:center;padding:24px 18px 10px}
.th .ttb .panel .ph.ph-ttb img{height:58px;max-width:100%}   /* TalkToBuild is the feature here (Jerryll: "remove the word Humphrey and make TalkToBuild a lot larger") */
.th .ttb .msg.me{background:linear-gradient(120deg,#3D49EE,#5A1EE3)}
.th .ttb .inputrow .mic{background:linear-gradient(135deg,#16A4F7,#5A1EE3)}
.th .stchip{display:inline-flex;align-items:center;gap:8px;margin-left:12px;padding:6px 12px;border-radius:980px;background:rgba(90,30,227,.10);color:#4611DB;font-size:12px;font-weight:600;letter-spacing:.02em;vertical-align:middle}
.th .stchip i{width:7px;height:7px;border-radius:50%;background:#A855F7}

/* While Humphrey presents, the section he is on moves over so his dock (humphrey-presenter.js) sits
   beside it and covers nothing; --hpdk is set by the presenter from the screen width. */
.th section .wrap{transition:padding .6s cubic-bezier(.65,0,.35,1)}
@media (min-width:1000px){
  .th.presenting.hp-dock-left section.hp-on .wrap{padding-left:calc(22px + var(--hpdk,0px))}
  .th.presenting.hp-dock-right section.hp-on .wrap{padding-right:calc(22px + var(--hpdk,0px))}}

/* the motto */
.th .motto{padding:150px 0 150px}
.th .motto h2.big{font-size:clamp(40px,5.6vw,76px);line-height:1.02;letter-spacing:-.04em}
.th .motto .grad{background:linear-gradient(112deg,#9B86FF 0%,#8A80FF 42%,#5FA6FF 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.th .motto .lead{margin-top:26px;max-width:640px}

/* presenting: the section he is on stays, the rest recede */
.th.presenting section{opacity:.32}
.th.presenting section.hp-on{opacity:1}
@media (max-width:720px){.th section{padding:80px 0 88px}.th-hero{padding:120px 0 72px!important}.th .lead,.th-hero .lead,.th p{font-size:18px}.stage{margin-top:40px}}
@media (prefers-reduced-motion:reduce){.th *{animation:none!important;transition:none!important}}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:100000;background:#fff;color:#1d1d1f;padding:8px 12px;border-radius:8px}.skip-link:focus{left:12px}
/* On this page the presenter IS Humphrey: hide the site-wide orb so there are never two. */
body.av-talk-to-humphrey .hmp-orb,body.av-talk-to-humphrey .hmp-nudge,body.av-talk-to-humphrey .hmp-panel{display:none!important}

/* ---- No templates (2026-10-31): the cookie-cutter template vs the interview, the photos and the rebuilt site ---- */
.nt-tpl{transition:filter .6s ease,opacity .6s ease}
.nt-tpl.dim{filter:grayscale(1);opacity:.5}
.nt-tpl .vp{background:#eceef1}
.nt-tpl .tn{height:46px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 18px}
.nt-tpl .tn b{font-weight:800;font-size:12.5px;color:#9aa0a8;letter-spacing:.14em}
.nt-tpl .tn span{display:flex;gap:10px}.nt-tpl .tn span i{width:38px;height:7px;border-radius:4px;background:#d5d8de}
.nt-tpl .th{margin:14px;height:240px;border-radius:12px;background:linear-gradient(135deg,#c9ced6,#b6bcc7);position:relative;display:flex;flex-direction:column;justify-content:center;padding:0 22px;color:#fff}
.nt-tpl .th h4{font-weight:800;font-size:24px;line-height:1.15;margin:0;max-width:220px}
.nt-tpl .th p{margin:8px 0 14px;font-size:13px;opacity:.92}
.nt-tpl .th em{font-style:normal;align-self:flex-start;background:#8d949e;padding:9px 16px;border-radius:8px;font-weight:700;font-size:13px}
.nt-tpl .ph-img{position:absolute;right:18px;top:44px;width:132px;height:152px;border-radius:10px;background:#a9b0ba;display:grid;place-items:center}
.nt-tpl .tf{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 14px}
.nt-tpl .tf div{height:130px;border-radius:10px;background:#fff;padding:16px 14px}
.nt-tpl .tf i{display:block;height:7px;border-radius:4px;background:#e0e3e8;margin-bottom:9px}
.nt-badge{position:absolute;z-index:5;background:#fff;color:#16181d;font-weight:800;font-size:20px;padding:13px 20px;border-radius:14px;box-shadow:0 20px 44px -16px rgba(0,0,0,.38);opacity:0;transform:scale(.6) rotate(-3deg);transition:transform .45s cubic-bezier(.3,1.6,.5,1),opacity .3s}
.nt-badge.on{opacity:1;transform:scale(1) rotate(-3deg)}
.nt-stamp{position:absolute;z-index:6;font-weight:800;font-size:36px;line-height:1;color:#F26B21;background:#fff;padding:16px 24px;border-radius:16px;box-shadow:0 26px 54px -18px rgba(0,0,0,.45);opacity:0;transform:rotate(-8deg) scale(1.5);transition:transform .35s cubic-bezier(.3,1.4,.5,1),opacity .2s}
.nt-stamp.on{opacity:1;transform:rotate(-8deg) scale(1)}
.nt-int .chat .msg{font-size:15px}
.nt-photos{position:absolute;background:#fff;border-radius:16px;box-shadow:0 30px 70px -28px rgba(0,0,0,.35),0 8px 24px -10px rgba(0,0,0,.18);padding:20px 20px 0}
.nt-photos h5{margin:0 0 3px;font-weight:600;font-size:16px;color:var(--ink)}
.nt-photos>small{color:var(--ink2);font-size:12.5px}
.nt-grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:186px;gap:12px;margin-top:16px}
.nt-tile{position:relative;border-radius:12px;background:#f2f2f5;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:10px 12px}
.nt-tile.body{grid-row:span 2}
.nt-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 50%,rgba(0,0,0,.6));opacity:0;transition:opacity .4s;z-index:1}
.nt-tile b{position:relative;z-index:2;font-size:13.5px;font-weight:700;color:var(--ink);transition:color .3s}
.nt-tile small{position:relative;z-index:2;font-size:11.5px;color:var(--ink2);transition:color .3s}
.nt-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%;opacity:0;transform:scale(1.08);transition:opacity .45s ease,transform .7s ease}
.nt-tile.side img{object-position:50% 0;background:#e9e5f6}
.nt-tile.logo img{object-fit:contain;padding:16px 50px 44px;background:#fff}
.nt-tile.body img{object-position:50% 30%}
.nt-tile .bar{position:absolute;left:12px;right:12px;top:12px;height:5px;border-radius:5px;background:rgba(0,0,0,.08);overflow:hidden;z-index:2;opacity:0;transition:opacity .2s}
.nt-tile .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#9B86FF,#5FA6FF);transition:width .38s ease}
.nt-tile.up .bar{opacity:1}.nt-tile.up .bar i{width:100%}
.nt-tile .ck{position:absolute;right:10px;top:10px;z-index:3;width:26px;height:26px;border-radius:50%;background:#30d158;display:grid;place-items:center;transform:scale(0);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.nt-tile.in img{opacity:1;transform:scale(1)}.nt-tile.in::after{opacity:1}.nt-tile.in .bar{opacity:0}.nt-tile.in .ck{transform:scale(1)}
.nt-tile.in b{color:#fff}.nt-tile.in small{color:rgba(255,255,255,.85)}
.nt-tile.logo.in::after{opacity:.55}
.nt-build{position:absolute;z-index:7;border-radius:16px;background:linear-gradient(140deg,#2a1760,#4B15AC);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:0 130px;opacity:0;transition:opacity .45s ease;pointer-events:none}
.nt-build.on{opacity:1}
.nt-build h5{margin:0 0 26px;font-weight:700;font-size:34px;letter-spacing:-.02em}
.nt-build ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.nt-build li{display:flex;align-items:center;gap:14px;font-size:20px;color:rgba(255,255,255,.55);transition:color .3s}
.nt-build li::before{content:"";width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.16);flex:0 0 22px;transition:background .3s}
.nt-build li.ok{color:#fff}.nt-build li.ok::before{background:#30d158 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat}
.nt-done{z-index:8;opacity:0;transform:translateY(26px) scale(.98);transition:opacity .5s ease,transform .6s cubic-bezier(.3,1.1,.4,1)}
.nt-done.on{opacity:1;transform:none}
.nt-site{transition:transform 1.5s cubic-bezier(.45,0,.25,1)}
.nt-site img{display:block;width:100%}
.nt-chip{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:4;background:#16181d;color:#fff;font-weight:700;font-size:15.5px;padding:12px 20px;border-radius:999px;white-space:nowrap;box-shadow:0 16px 36px -14px rgba(0,0,0,.5)}

/* Designs as real websites (2026-10-31): the picked one scrolls slowly down its page */
.dz.dzs{background:#fff;overflow:hidden}
.dz.dzs img{position:absolute;left:0;top:0;width:100%;display:block;will-change:transform}
.dz.dzs.on img:not(.dzsf){animation:dzScroll 11s cubic-bezier(.45,0,.4,1) .9s infinite alternate}
@keyframes dzScroll{0%,8%{transform:translateY(0)}100%{transform:translateY(calc(-100% + 660px))}}
.dz .dzn{position:absolute;left:18px;bottom:16px;z-index:2;background:rgba(22,24,29,.88);color:#fff;font:600 13px/1 -apple-system,Inter,sans-serif;padding:9px 13px;border-radius:999px}

/* the punchline: the template's to-do list */
.nt-todo{position:absolute;z-index:6;background:#fff;border-radius:16px;padding:16px 18px 14px;box-shadow:0 26px 54px -18px rgba(0,0,0,.42);opacity:0;transform:translateY(16px);transition:opacity .35s ease,transform .45s cubic-bezier(.3,1.2,.4,1)}
.nt-todo.on{opacity:1;transform:none}
.nt-todo b{display:block;font-weight:800;font-size:15px;color:#16181d;margin-bottom:8px}
.nt-todo ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.nt-todo li{display:flex;align-items:center;gap:10px;font-size:15px;color:#2b2e35;opacity:0;transform:translateX(-10px);transition:opacity .25s ease,transform .3s ease}
.nt-todo li::before{content:"";width:16px;height:16px;border-radius:5px;background:#e6e7eb;flex:0 0 16px}
.nt-todo li.on{opacity:1;transform:none}
.nt-todo li:last-child{color:#F26B21;font-weight:700}.nt-todo li:last-child::before{background:none}
.dz.dzs img.dzsf{left:10px;top:10px;width:224px;z-index:2;box-shadow:0 18px 40px -18px rgba(0,0,0,.35);border-radius:12px}
.dz .dzn{left:auto;right:18px}

/* ---- Laptop screens rebuilt (2026-10-31, Jerryll: "not even good visuals … no polish"): dense, app-like ---- */
.app .av{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;color:#fff;font:700 10.5px/1 -apple-system,Inter,sans-serif;font-style:normal;flex:none}
.app .ch{display:inline-block;width:14px;height:14px;border-radius:4px;margin-right:5px;vertical-align:-2px;background:#0B6BF5 center/9px no-repeat}
.app .ch.sms{background-color:#30a46c;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M4 4h16v12H8l-4 4z'/%3E%3C/svg%3E")}
.app .ch.call{background-color:#0B6BF5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M6.6 10.8a15 15 0 006.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 013 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z'/%3E%3C/svg%3E")}
.app .ch.mail{background-color:#e0742c;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M3 5h18v14H3zm2 2v.5l7 4.5 7-4.5V7z'/%3E%3C/svg%3E")}
.app .ch.vm{background-color:#7c5cf0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M6.5 16a4.5 4.5 0 110-9 4.5 4.5 0 013.5 7.3h4a4.5 4.5 0 113.5 1.7z'/%3E%3C/svg%3E")}
.app .wv2{display:flex;align-items:center;gap:2px;height:22px}.app .wv2 i{width:3px;border-radius:2px;background:#7c5cf0;opacity:.75}
/* pipeline */
.m-kan2{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;height:100%}
.m-kan2 .kc{background:#ebecef;border-radius:10px;padding:8px}
.m-kan2 h6{display:flex;justify-content:space-between;margin:0 2px 7px;font:700 10.5px/1 -apple-system,Inter,sans-serif;color:#3a3a3c;text-transform:uppercase;letter-spacing:.04em}
.m-kan2 h6 em{font-style:normal;color:#8e8e93}
.m-kan2 .lc2{background:#fff;border-radius:8px;padding:8px 9px;margin-bottom:6px;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.m-kan2 .lc2 b{display:block;font-size:11.5px;color:#1d1d1f}.m-kan2 .lc2 span{display:block;font-size:10px;color:#6e6e73;margin:2px 0 5px}
.m-kan2 .lc2 small{display:inline-block;font-size:9.5px;font-weight:700;padding:3px 6px;border-radius:5px;background:#f0f0f3;color:#3a3a3c}
.m-kan2 small.w{background:#fff1dc;color:#9a5b00}.m-kan2 small.h{background:#ffe1dd;color:#b4231a}.m-kan2 small.g{background:#dcf5e3;color:#16743a}
/* inbox */
.m-inbox{display:grid;grid-template-columns:230px 1fr;gap:10px;height:100%}
.m-inbox .il{background:#fff;border-radius:10px;overflow:hidden}
.m-inbox .ii{display:flex;gap:8px;align-items:center;padding:9px 10px;box-shadow:inset 0 -1px 0 #f0f0f3}
.m-inbox .ii.on{background:#eef4ff}
.m-inbox .ii div{flex:1;min-width:0}.m-inbox .ii b{display:block;font-size:11.5px;color:#1d1d1f}
.m-inbox .ii span{display:block;font-size:10.5px;color:#6e6e73;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-inbox .ii small{font-size:10px;color:#8e8e93;text-align:right}.m-inbox .ii u{display:block;width:7px;height:7px;border-radius:50%;background:#0B6BF5;margin:4px 0 0 auto}
.m-inbox .th{background:#fff;border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:7px;position:relative}
.m-inbox .tt b{display:block;font-size:12.5px;color:#1d1d1f}.m-inbox .tt span{font-size:10.5px;color:#6e6e73}
.m-inbox p{margin:0;padding:8px 11px;border-radius:14px;font-size:11.5px;line-height:1.35;max-width:78%}
.m-inbox p.l{background:#f0f0f3;color:#1d1d1f;align-self:flex-start}.m-inbox p.r{background:#0B6BF5;color:#fff;align-self:flex-end}
.m-inbox .cl{display:flex;align-items:center;gap:8px;background:#f5f3ff;border-radius:10px;padding:7px 10px}
.m-inbox .cl div{flex:1}.m-inbox .cl b{display:block;font-size:11px}.m-inbox .cl span{font-size:10.5px;color:#5b4b9a}
.m-inbox .rb{margin-top:auto;display:flex;justify-content:space-between;align-items:center;background:#f5f5f7;border-radius:10px;padding:8px 11px;font-size:11px;color:#8e8e93}
.m-inbox .rb b{color:#fff;background:#0B6BF5;border-radius:7px;padding:5px 10px;font-size:10.5px}
/* missed call */
.m-missed{display:grid;grid-template-columns:1fr 1fr;gap:12px;height:100%}
.m-missed .ph2{background:#fff;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px}
.m-missed .sb b{display:block;font-size:13px;color:#1d1d1f}.m-missed .sb span{font-size:10.5px;color:#d93025;font-weight:600}
.m-missed p{margin:0;padding:8px 11px;border-radius:14px;font-size:11.5px;line-height:1.35;max-width:88%}
.m-missed p.sys{align-self:center;background:none;color:#16743a;font-weight:700;font-size:10.5px;padding:2px}
.m-missed p.r{background:#0B6BF5;color:#fff;align-self:flex-end}.m-missed p.l{background:#f0f0f3;color:#1d1d1f;align-self:flex-start}
.m-missed .vmc{background:#fff;border-radius:12px;padding:12px}
.m-missed .vh{display:flex;align-items:center;gap:6px}.m-missed .vh b{font-size:12px;color:#1d1d1f;margin-right:auto}
.m-missed small{display:block;margin-top:9px;font-size:10px;font-weight:700;color:#7c5cf0;text-transform:uppercase;letter-spacing:.06em}
.m-missed .vmc p{background:#f7f5ff;color:#2b2541;max-width:none;margin-top:5px;font-style:italic}
.m-missed .tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}.m-missed .tags span{font-size:10px;font-weight:600;background:#f0f0f3;border-radius:6px;padding:4px 7px;color:#3a3a3c}
.m-missed .act b{display:block;margin-top:9px;font-size:11px;color:#16743a;background:#dcf5e3;border-radius:8px;padding:7px 9px}
/* Humphrey Ads builder */
.m-ads2{display:grid;grid-template-columns:150px 230px 1fr;gap:10px;align-items:start}
.m-ads2 .st2{display:flex;flex-direction:column;gap:6px}
.m-ads2 .st2 span{font-size:11px;font-weight:600;color:#3a3a3c;background:#fff;border-radius:8px;padding:8px 9px 8px 26px;position:relative}
.m-ads2 .st2 span::before{content:"";position:absolute;left:8px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:#d1d1d6}
.m-ads2 .st2 .ok::before{background:#30d158}.m-ads2 .st2 .cur{background:#1d1d1f;color:#fff}.m-ads2 .st2 .cur::before{background:#0B6BF5}
.m-ads2 .fb2{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 8px 20px -12px rgba(0,0,0,.35)}
.m-ads2 .fb2 .h{display:flex;gap:7px;align-items:center;padding:8px 9px 0}.m-ads2 .fb2 .h img{width:26px;height:26px;border-radius:50%;object-fit:cover}
.m-ads2 .fb2 .h b{display:block;font-size:10.5px}.m-ads2 .fb2 .h small{font-size:9.5px;color:#65676b}
.m-ads2 .fb2 p{margin:6px 9px;font-size:10.5px;line-height:1.35;color:#1d1d1f}
.m-ads2 .fb2 .pi{width:100%;height:118px;object-fit:cover;display:block}
.m-ads2 .fb2 .cta{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:7px 9px;background:#f0f2f5}
.m-ads2 .fb2 .cta span{display:block;font-size:8.5px;color:#65676b}.m-ads2 .fb2 .cta b{font-size:10.5px}.m-ads2 .fb2 .cta em{font-style:normal;font-size:10px;font-weight:600;background:#e4e6eb;border-radius:6px;padding:5px 8px}
.m-ads2 .ck2{background:#fff;border-radius:10px;padding:10px 11px;display:flex;flex-direction:column;gap:6px}
.m-ads2 .ck2 h6{margin:0 0 2px;font:700 10.5px/1.2 -apple-system,Inter,sans-serif;color:#6e6e73;text-transform:uppercase;letter-spacing:.05em}
.m-ads2 .ck2 span{font-size:11px;color:#1d1d1f;padding-left:18px;position:relative}
.m-ads2 .ck2 span::before{content:"✓";position:absolute;left:0;top:0;color:#16743a;font-weight:800}
.m-ads2 .aud{margin-top:4px;background:#f5f5f7;border-radius:8px;padding:7px 9px}.m-ads2 .aud small{display:block;font-size:9.5px;color:#8e8e93}.m-ads2 .aud b{font-size:11px}
.m-ads2 .go{margin-top:4px;text-align:center;background:#0B6BF5;color:#fff;font-weight:700;font-size:11.5px;border-radius:9px;padding:9px;animation:thPulse 1.6s ease-in-out infinite}
@keyframes thPulse{0%,100%{box-shadow:0 0 0 0 rgba(11,107,245,.45)}50%{box-shadow:0 0 0 7px rgba(11,107,245,0)}}
/* social calendar */
.m-cal .tabs{display:flex;gap:6px;margin-bottom:10px}.m-cal .tabs span{padding:5px 10px;border-radius:980px;background:#e8e8ed;font-size:10.5px;font-weight:600;color:#3a3a3c}.m-cal .tabs span.on{background:#1d1d1f;color:#fff}
.m-cal .wk{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.m-cal .dy h6{margin:0 0 6px;font:700 10.5px/1 -apple-system,Inter,sans-serif;color:#6e6e73;text-transform:uppercase;letter-spacing:.05em}
.m-cal .pc{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.m-cal .pc img{width:100%;height:92px;object-fit:cover;display:block}
.m-cal .pc b{display:block;font-size:10.5px;line-height:1.3;color:#1d1d1f;padding:7px 8px 4px;min-height:40px}
.m-cal .pc em{display:inline-block;margin:0 8px 8px;font-style:normal;font-size:9.5px;font-weight:700;padding:3px 6px;border-radius:5px}
.m-cal em.ok{background:#dcf5e3;color:#16743a}.m-cal em.sc{background:#e5efff;color:#0b57c4}.m-cal em.rv{background:#fff1dc;color:#9a5b00}
.m-cal .note{margin-top:12px;font-size:11.5px;color:#3a3a3c;background:#fff;border-radius:10px;padding:9px 12px}
/* attribution table */
.m-tbl .g{color:#16743a;font-weight:700}
.nt-site .ns{position:relative}
.nt-lbl{position:absolute;z-index:3;background:#16181d;color:#fff;font-weight:700;font-size:17px;padding:11px 16px;border-radius:12px;box-shadow:0 16px 36px -12px rgba(0,0,0,.55);opacity:0;transform:translateY(10px) scale(.96);transition:opacity .35s ease,transform .45s cubic-bezier(.3,1.3,.4,1);white-space:nowrap}
.nt-lbl::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:#30d158;margin-right:9px;vertical-align:1px}
.nt-lbl.on{opacity:1;transform:none}
/* Jerryll's own site as a visitor sees it on desktop: the SmartForm docked on the left, the site beside it */
.vp.sfd .ctsf{position:absolute;left:10px;top:9px;width:250px;height:auto;z-index:4;border-radius:12px;box-shadow:0 18px 40px -18px rgba(0,0,0,.35)}
.vp.sfd>.site,.vp.sfd>.nt-site{margin-left:270px;width:calc(100% - 270px)!important;left:auto!important;right:auto!important}
/* the motto: Humphrey steps out of his card and stands next to the words (assets/js/humphrey-presenter.js breakout) */
.th .motto .wrap{position:relative}
.th .motto .hp-spot{position:absolute;right:2%;top:50%;width:min(440px,34vw);aspect-ratio:1;transform:translateY(-50%);pointer-events:none}
@media (max-width:999px){.th .motto .hp-spot{display:none}}
.edbar .upd.is-live{background:#30d158;transition:background .25s ease}

/* ---- EstiMate Mobile (2026-10-31): the real new-design sandbox in an iframe, steps beside it ---- */
.em-sb{position:absolute;width:352px;height:722px;border:0;background:transparent;border-radius:44px;box-shadow:0 34px 70px -26px rgba(15,23,42,.48)}
.em-steps{position:absolute;width:560px;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px;counter-reset:em}
.em-steps li{counter-increment:em;position:relative;padding:18px 22px 18px 74px;border-radius:18px;background:#fff;box-shadow:0 12px 30px -18px rgba(15,23,42,.3);opacity:.45;transform:scale(.98);transition:opacity .35s ease,transform .45s cubic-bezier(.3,1.3,.4,1),box-shadow .35s}
.em-steps li::before{content:counter(em);position:absolute;left:20px;top:50%;margin-top:-19px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:16px;color:#fff;background:#94a3b8}
.em-steps li b{display:block;font-size:20px;letter-spacing:-.02em;color:#0f172a}
.em-steps li span{display:block;margin-top:4px;font-size:15px;line-height:1.4;color:#64748b}
.em-steps li.on{opacity:1;transform:none;box-shadow:0 22px 46px -20px rgba(14,165,233,.45)}
.em-steps li.on::before{background:linear-gradient(135deg,#0ea5e9,#156ab8)}
.em-steps li.done{opacity:.85;transform:none}
.em-steps li.done::before{background:#10b981}
/* Show me how: the task as the Powerup Room draws it (#goal-workspace .howto), with apex-demos.js's Watch how button */
.taskc{position:absolute;z-index:3;width:380px;background:#fff;border-radius:12px;padding:18px 20px;box-shadow:0 24px 54px -18px rgba(0,0,0,.55);font-family:Inter,system-ui,-apple-system,sans-serif;transition:opacity .35s ease,transform .45s cubic-bezier(.3,1.2,.4,1)}
.taskc.away{opacity:0;transform:translateY(14px) scale(.97);pointer-events:none}
.taskc .hth{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#7C5FC0}
.taskc .hti{font-size:12px}
.taskc .tw{margin-left:auto;padding:4px 10px;border-radius:9px;background:#F0ECE6;color:#565F6C;font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;box-shadow:inset 0 0 0 1px #E7E3DD;transition:transform .15s ease}
.taskc .tw.press{transform:scale(.94)}
.taskc ol{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.taskc li{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:#20242C}
.taskc li i{font-style:normal;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#EEEAF7;color:#7C5FC0;font-size:11.5px;font-weight:700}
.taskc li em{font-style:normal;color:#9aa0ab;font-size:12px;margin-top:-6px}

/* Show me how window: the app's demo card (reilink-demo.js .rld-card / .rld-*), values read from the live app 2026-10-31 */
.dw{position:absolute;z-index:23;width:410px;background:#1b1e24;color:#e8edf5;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px 16px;box-shadow:0 18px 48px rgba(0,0,0,.55);font:400 14px/1.5 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;text-align:left;transition:opacity .35s ease,transform .45s cubic-bezier(.3,1.2,.4,1)}
.dw.away{opacity:0;transform:translateY(14px) scale(.97);pointer-events:none}
.dw .dk{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7C5FC0;margin:0 0 4px}
.dw .dm{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:4px;background:rgba(255,255,255,.08);color:#c9d3e0;letter-spacing:.04em}
.dw .dbar{height:8px;border-radius:4px;background:#E6E1EF;margin:6px 0 10px;overflow:hidden}
.dw .dbar i{display:block;height:100%;width:0;background:#7C5FC0;transition:width .5s ease}
.dw .dt{margin:0 0 8px!important;font-size:14px!important;line-height:21px!important;color:#fff!important}
.dw .dt b{color:#fff}
.dw .dsafe{display:none;margin:0 0 10px!important;font-size:12px!important;line-height:1.5!important;color:#9fe3b4!important}
.dw.end .dsafe{display:block}.dw.end .dbar,.dw.end .dpause,.dw.end .dback,.dw.end .dvoice{display:none}
.dw .drow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.dw .drow .sp{flex:1}
.dw .db{border-radius:8px;padding:7px 12px;font-size:13px;font-weight:700;border:1px solid rgba(255,255,255,.16);color:#e8edf5;transition:transform .15s ease}
.dw .db.pri{background:#7C5FC0;border-color:#7C5FC0;color:#fff}
.dw .db.lk{border:0;padding:7px 4px;color:#8ea0b8;font-weight:600}
.dw .db.press{transform:scale(.94)}
.dw .db.hl{box-shadow:0 0 0 3px #1b1e24,0 0 0 6px #7C5FC0;animation:dwPulse 1.4s ease-in-out infinite}
@keyframes dwPulse{50%{box-shadow:0 0 0 3px #1b1e24,0 0 0 9px rgba(124,95,192,.55)}}
/* the demo's spotlight: purple ring, page dimmed (.rld-spot) */
.th [data-scene="show"] .spot{border-radius:10px;box-shadow:0 0 0 3px #7C5FC0,0 0 0 2000px rgba(8,10,14,.56)}
.dw.dw-ring{box-shadow:0 0 0 3px #7C5FC0,0 18px 48px rgba(0,0,0,.55)}
/* Show me how happens in the real Apex editor (isolated-apex-editor.php): values read from the live editor 2026-10-31 */
.win.aed{background:#0F172A}
.aebar{position:absolute;left:0;right:0;top:40px;height:50px;background:#0F172A;display:flex;align-items:center;gap:7px;padding:0 14px 0 60px;z-index:4;color:#F7FAFC;font-family:Roboto,system-ui,-apple-system,sans-serif}
.aebar .aet b{display:block;font-size:14px;font-weight:600;color:#F7FAFC}
.aebar .aet em{font-style:normal;color:#FBBF24}
.aebar .aet b span{color:#94A3B8;font-weight:400;font-size:12.5px}
.aebar .aet small{display:block;font-size:10.5px;color:#94A3B8;margin-top:1px}
.aebar .sp{flex:1}
.aebar .aeb{padding:5px 10px;border-radius:6px;background:rgba(255,255,255,.1);color:#F7FAFC;font-size:11.5px;white-space:nowrap}
.aebar .aeb.upd{background:#FF4757}
.aerail{position:absolute;left:0;top:40px;bottom:0;width:46px;background:#0B1120;z-index:6;display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:10px}
.aerail i{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:#94A3B8}
.aerail i.on{background:#0EA5E9;color:#fff}
.aerail svg{width:17px;height:17px}
.win.aed .vp{top:90px;left:46px;background:#fff}
.setp.aeinsp{left:46px;top:90px;width:262px;background:#1A2232;color:#F7FAFC;padding:0;box-shadow:12px 0 30px -14px rgba(0,0,0,.6);font-family:Roboto,system-ui,-apple-system,sans-serif}
.aeinsp .aeih{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;font-size:14px;font-weight:600}
.aeinsp .aeih i{font-style:normal;color:#94A3B8;font-size:12px}
.aeinsp .ais{display:flex;justify-content:space-between;padding:10px 16px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#94A3B8}
.aeinsp .ais.op{color:#F7FAFC}
.aeinsp .ais em{font-style:normal}
.aeinsp label{display:block;margin:4px 16px 6px;font-size:11.5px;font-weight:500;color:#CBD5E1}
.aeinsp .fld{margin:0 16px 10px;padding:9px 11px;min-height:0;border-radius:6px;background:#0F172A;color:#E2E8F0;font-size:12.5px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}

/* ---- the welcome: a big Start in Humphrey purple before anything plays ---- */
.hp-welcome{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:16px;background:rgba(14,8,32,.62);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);opacity:0;transition:opacity .35s ease}
.hp-welcome[hidden]{display:none}
.hp-welcome.on{opacity:1}
.hp-welcome .hw-card{width:min(460px,100%);padding:36px 34px 26px;border-radius:28px;background:#fff;box-shadow:0 40px 100px rgba(40,10,110,.45);text-align:center;transform:translateY(18px) scale(.96);transition:transform .5s cubic-bezier(.2,1.3,.4,1)}
.hp-welcome.on .hw-card{transform:none}
.hp-welcome .hw-face{width:150px;height:150px;margin:-96px auto 6px}
.hp-welcome .hw-face svg,.hp-welcome .hw-face .hface-host{width:150px!important;height:150px!important}
.hp-welcome h2{margin:0 0 10px;font:700 30px/1.15 -apple-system,BlinkMacSystemFont,Inter,system-ui,sans-serif;letter-spacing:-.02em;color:#1d1d1f}
.hp-welcome p{margin:0 auto 24px;max-width:360px;font:400 16px/1.5 -apple-system,BlinkMacSystemFont,Inter,system-ui,sans-serif;color:#515154;text-align:left}
.hp-welcome .hw-start{display:inline-flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:20px 28px;border:0;border-radius:980px;cursor:pointer;background:linear-gradient(135deg,#803FEC,#4B15AC);color:#fff;font:700 22px/1 -apple-system,BlinkMacSystemFont,Inter,system-ui,sans-serif;letter-spacing:-.01em;box-shadow:0 14px 34px rgba(91,30,200,.45);animation:hwPulse 2.4s ease-in-out infinite;transition:transform .15s ease}
.hp-welcome .hw-start:hover{transform:translateY(-1px) scale(1.015)}
.hp-welcome .hw-start:active{transform:scale(.98)}
.hp-welcome .hw-start:focus-visible{outline:3px solid rgba(128,63,236,.5);outline-offset:4px}
@keyframes hwPulse{0%,100%{box-shadow:0 14px 34px rgba(91,30,200,.45),0 0 0 0 rgba(128,63,236,.45)}50%{box-shadow:0 14px 34px rgba(91,30,200,.45),0 0 0 14px rgba(128,63,236,0)}}
.hp-welcome .hw-sound{display:flex;align-items:center;justify-content:center;gap:7px;margin:14px 0 4px;font:500 13px/1 -apple-system,BlinkMacSystemFont,Inter,system-ui,sans-serif;color:#6e6e73}
.hp-welcome .hw-skip{margin-top:10px;border:0;background:none;padding:8px 10px;cursor:pointer;font:500 14px/1 -apple-system,BlinkMacSystemFont,Inter,system-ui,sans-serif;color:#86868b}
.hp-welcome .hw-skip:hover{color:#1d1d1f}
@media (prefers-reduced-motion:reduce){.hp-welcome .hw-start{animation:none}.hp-welcome,.hp-welcome .hw-card{transition:none}}
/* the hero's own start button in the same purple, so it is never black on black */
.th .th-hero .th-btn#hp-start{background:linear-gradient(135deg,#803FEC,#4B15AC);color:#fff}
.th .th-hero .th-btn#hp-start:hover{filter:brightness(1.08)}

/* Conversion (2026-10-31, ad landing page): who/price line, terms under every signup button, sticky phone button. */
.th .th-who{margin:18px 0 0;font-size:15px;font-weight:600;letter-spacing:.01em;color:#c9b8ff}
.th .th-terms{display:flex;flex-wrap:wrap;gap:8px 18px;margin:18px 0 0;font-size:14px;line-height:1.35;color:#a1a1a6;max-width:780px}
.th .th-terms span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.th .th-terms span::before{content:"";width:14px;height:14px;flex:none;background:#30d158;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.th .th-terms b{color:#f5f5f7;font-weight:600}
@media (max-width:520px){.th .th-terms{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;font-size:13px}.th .th-terms span{white-space:normal}}
.th .th-cta .th-terms{margin-left:auto;margin-right:auto;justify-content:center}
.th-sticky{display:none}
@media (max-width:820px){
  .th-sticky{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:9000;align-items:center;gap:12px;padding:10px 14px 10px 10px;border-radius:999px;background:rgba(20,20,24,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(0,0,0,.35);transform:translateY(140%);transition:transform .35s cubic-bezier(.2,.9,.3,1.2)}
  .th-sticky.on{transform:none}
  .th-sticky .th-btn{padding:12px 20px;font-size:16px;white-space:nowrap}
  .th-sticky span{font-size:13px;line-height:1.3;color:#d2d2d7}
  .th.presenting .th-sticky{display:none}
}
.th .th-skip{display:inline-block;margin-top:14px;font-size:14px;color:#8FB8FF;text-decoration:none}
.th .th-skip:hover{text-decoration:underline}

/* The review wall (includes/review_wall.php) while Humphrey presents: room for his dock, and the post he names lit up. */
@media (min-width:1000px){.th.presenting.hp-dock-right section.apex-wall.hp-on .grid{padding-right:calc(24px + var(--hpdk,0px))}}
.th .apex-wall .fb{transition:transform .5s cubic-bezier(.2,1.3,.4,1),box-shadow .5s ease}
.th .apex-wall .fb.hp-pick{transform:scale(1.025);box-shadow:0 0 56px rgba(157,107,255,.6),0 24px 60px rgba(128,63,236,.35);position:relative;z-index:2}

/* FAQ (takes over "The rules Humphrey keeps"). */
.th .fq-list{display:grid;gap:12px;margin-top:36px;max-width:820px}
.th .fq{background:#f5f5f7;border-radius:18px;padding:0 24px}
.th .fq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:18px;align-items:center;padding:20px 0;font-size:18px;font-weight:600;color:var(--ink)}
.th .fq summary::-webkit-details-marker{display:none}
.th .fq summary::after{content:"+";flex:none;font-size:24px;font-weight:400;color:#5A1EE3;transition:transform .25s ease}
.th .fq[open] summary::after{transform:rotate(45deg)}
.th .fq p{margin:0 0 22px;font-size:17px;line-height:1.55;color:var(--ink2)}

/* Finale: the deal tools light up one by one, then the price lands. */
.th .th-finale{text-align:left}
.th .th-finale .copy{max-width:880px}
.th .ft-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.th .ft{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;row-gap:4px;align-items:center;padding:22px;border-radius:20px;background:rgba(255,255,255,.05);opacity:.18;transform:translateY(14px) scale(.97);transition:opacity .5s ease,transform .6s cubic-bezier(.2,1.3,.4,1),background .6s ease}
.th .ft-ic{grid-row:1/3;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(128,63,236,.18);color:#C9B2FF}
.th .ft-ic svg{width:24px;height:24px}
.th .ft b{font-size:19px;font-weight:700;color:#fff;letter-spacing:-.01em}
.th .ft > span:last-child{font-size:15px;line-height:1.4;color:#a1a1a6}
.th .th-finale.go .ft{opacity:1;transform:none;background:rgba(128,63,236,.12);transition-delay:calc(var(--i) * var(--ftd,.14s))}
.th.presenting .th-finale{--ftd:1.5s}
.th .ft-more{margin:26px 0 0;font-size:17px;line-height:1.5;color:#a1a1a6;max-width:760px}
.th .ft-price{margin-top:72px;text-align:center}
.th .ft-all{display:block;font-size:20px;font-weight:600;color:#f5f5f7}
.th .ft-num{display:inline-flex;align-items:flex-start;margin-top:10px;font-size:clamp(96px,14vw,168px);line-height:.9;font-weight:800;letter-spacing:-.04em;color:#9D6BFF;opacity:0;transform:scale(.3)}
.th .ft-cur{font-size:.42em;margin:.12em .04em 0 0;color:#C9B2FF}
.th .ft-per{align-self:flex-end;font-size:.17em;font-weight:600;letter-spacing:0;margin:0 0 .5em .3em;color:#a1a1a6}
.th .th-finale.go .ft-num{animation:ftPop .9s cubic-bezier(.2,1.6,.35,1) forwards;animation-delay:calc(6 * var(--ftd,.14s) + .3s)}
@keyframes ftPop{0%{opacity:0;transform:scale(.3)}55%{opacity:1;transform:scale(1.12)}75%{transform:scale(.95)}100%{opacity:1;transform:scale(1)}}
.th .ft-price .th-actions{justify-content:center;margin-top:28px}
.th .th-btn.big{padding:19px 40px;font-size:19px;font-weight:600;background:linear-gradient(135deg,#803FEC,#4B15AC);box-shadow:0 14px 40px rgba(128,63,236,.45)}
.th .th-btn.big:hover{background:linear-gradient(135deg,#8f52f2,#5419bd)}
.th .ft-price .th-terms{justify-content:center;margin-left:auto;margin-right:auto}
.th .ft-price .th-ask{margin:26px auto 0}
@media (max-width:900px){.th .ft-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.th .ft-grid{grid-template-columns:1fr;gap:10px}.th .ft{padding:16px}.th .ft-ic{width:42px;height:42px}.th .ft-price{margin-top:52px}}
@media (prefers-reduced-motion:reduce){.th .ft,.th .ft-num{opacity:1!important;transform:none!important;animation:none!important}}
/* Scenes with made-up people and numbers say so (2026-10-31). */
.th .stage[data-ex]{position:relative}
.th .stage[data-ex]::after{content:"Example data";position:absolute;right:10px;bottom:10px;z-index:5;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.55);color:#f5f5f7;font-size:11px;font-weight:600;letter-spacing:.04em;pointer-events:none}