/* ===== multipage additions ===== */
:root{--oe:cubic-bezier(.2,.7,.2,1)}
/* nav */
.links{align-items:center}
.dd{position:relative;padding:22px 0;margin:-22px 0}
.dd>a:after{content:"";display:inline-block;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg);margin-left:8px}
.ddm{position:absolute;top:100%;left:-14px;min-width:240px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh);padding:8px;display:grid;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s var(--oe),transform .2s var(--oe),visibility 0s .2s}
.dd:hover .ddm,.dd:focus-within .ddm{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.ddm a{padding:9px 12px;border-radius:8px;color:var(--ink);font-size:15px}.ddm a:hover{background:var(--alt)}
.nr{display:flex;align-items:center;gap:8px}
.mmenu{display:none;position:relative}
.mmenu summary{list-style:none;cursor:pointer;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center;background:#fff}
.mmenu summary::-webkit-details-marker{display:none}
.mmenu summary svg{width:20px;height:20px;stroke:var(--ink);stroke-width:2;fill:none;stroke-linecap:round}
.mmenu .mp{position:absolute;right:0;top:calc(100% + 12px);width:min(280px,calc(100vw - 32px));background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh);padding:8px;display:grid}
.mmenu .mp a{padding:11px 12px;border-radius:8px;font-size:15px;color:var(--ink)}.mmenu .mp a:hover{background:var(--alt)}
@media(max-width:900px){.mmenu{display:block}}
@media(max-width:480px){nav .wrap{padding:0 14px;gap:8px}.logo{font-size:19px;gap:7px}.logo img{width:24px;height:24px}nav .btn{padding:9px 12px;font-size:13px}}
/* sub hero */
.phero{padding:72px 0 64px}
.phero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.phero h1{font-size:clamp(40px,5vw,64px);margin:10px 0 14px}
.pimg{border-radius:14px;overflow:hidden;aspect-ratio:16/10;box-shadow:var(--sh)}
.pimg img{width:100%;height:100%;object-fit:cover;display:block}
.pimg.rv{clip-path:inset(0 0 100% 0 round 14px);transition:clip-path .9s var(--oe)}.pimg.rv.in,.static .pimg.rv{clip-path:inset(0 0 0 0 round 14px)}
@media(max-width:900px){.phero{padding:44px 0 48px}.phero .wrap{grid-template-columns:1fr;gap:28px}}
/* section 2: one visitor list folded in */
.onel{margin-top:56px}.onel h3.s{font-size:clamp(26px,3vw,36px);margin:8px 0 10px}
.pil.lite{grid-template-columns:repeat(3,1fr);margin:26px 0 22px}.pil.lite h3{color:var(--ink)}.pil.lite p{color:var(--mute)}
@media(max-width:900px){.pil.lite{grid-template-columns:1fr;gap:16px}}
/* section 3 */
.howg .steps.build3{grid-column:1/-1}
.s3cap{margin:44px 0 4px}
.hlink{margin-top:26px}
@media(max-width:900px){.howg .steps.build3{display:grid;gap:14px}.howg .steps.build3 .st{padding:22px;grid-template-columns:56px 1fr;gap:16px}.howg .steps.build3 .st .n{display:none}.howg .steps.build3 .st .ic{width:56px;height:56px}.howg .steps.build3 .st h3{font-size:22px}}
/* section 4: tabs + panel / mobile carousel */
.wtabs{position:relative;display:inline-flex;gap:4px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:99px;margin-top:26px}
.wtabs button{position:relative;z-index:1;border:0;background:none;font:600 15px Inter,system-ui,sans-serif;color:var(--mute);padding:10px 20px;border-radius:99px;cursor:pointer;transition:color .25s var(--oe)}
.wtabs button[aria-selected=true]{color:var(--ink)}
.wtabs button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.uline{position:absolute;left:0;bottom:5px;width:100px;height:2px;border-radius:2px;background:var(--teal);transform-origin:0 0;transform:scaleX(0);transition:transform .35s var(--oe)}
.wpanels{position:relative;margin-top:24px;transition:height .25s ease-out}
.wp{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:40px;box-shadow:var(--sh);position:absolute;top:0;left:0;right:0;opacity:0;visibility:hidden;transition:opacity .25s ease-out,visibility 0s linear .25s}
.wp.on{position:relative;opacity:1;visibility:visible;transition:opacity .25s ease-out,visibility 0s}
.wp>*{min-width:0}
.wpt h3.s{font-size:clamp(26px,2.6vw,34px);margin:8px 0 12px}.wpt p{color:var(--mute);margin-bottom:18px}
.wpv .cm,.wpv .mini{box-shadow:none}
.retv{padding:18px}.retv svg{width:100%;height:auto;display:block}
.hubd{background:var(--alt);border-radius:12px;padding:10px}.hubd .hub svg{width:100%;height:auto;max-height:340px}
.wdots{display:none}
@media(max-width:900px){
.wtabs{display:none}
.wpanels{display:flex;align-items:flex-start;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:22px -20px 0;padding:4px 20px 10px;scroll-padding:0 20px;height:auto!important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.wpanels::-webkit-scrollbar{display:none}
.wp,.wp.on{position:relative;top:auto;opacity:1;visibility:visible;flex:0 0 86%;scroll-snap-align:start;grid-template-columns:1fr;gap:18px;padding:22px;align-content:start}
.wdots{display:flex;justify-content:center;gap:10px;margin-top:12px}
.wdots i{width:8px;height:8px;border-radius:50%;background:var(--grey);opacity:.45;transition:transform .25s var(--oe),opacity .25s var(--oe)}
.wdots i.on{background:var(--teal);opacity:1;transform:scale(1.3)}
.wpv .cmg{grid-template-columns:1fr 28px 1fr}.wpv .cm{padding:14px}.wpv .cmr span{font-size:11px;word-break:break-all}
}
/* section 5: honest, short */
.tshort{margin-top:22px;max-width:900px}.tshort .split{margin-top:0}
.hlines{list-style:none;margin:22px 0 20px;display:grid;gap:10px;max-width:860px}.hlines li{color:var(--mute)}.hlines b{color:var(--ink)}
/* FAQ */
.acc button{align-items:center;-webkit-tap-highlight-color:transparent}
.acc button:after{content:none!important}
.acc .chev{width:22px;height:22px;flex:none;stroke:var(--teal);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--oe)}
.acc.open .chev{transform:rotate(180deg)}
.acc .pn{transition:grid-template-rows .3s var(--oe)}
.acc .pn>div{opacity:0;transition:opacity .3s var(--oe)}
.acc.open .pn>div{opacity:1}
.more{text-align:center;margin-top:28px}
/* integrations */
.works .card{padding:28px}.works h3{font:500 24px Newsreader,serif;margin:6px 0 8px}.works p{color:var(--mute);font-size:15px}
.works .chips{margin-top:14px}
.static .wp,.static .wpanels,.static .uline{transition:none}
/* r1 review fixes */
@media(min-width:901px){.howg .steps.build3{display:grid;grid-template-columns:repeat(3,minmax(240px,1fr));gap:24px}
.howg .steps.build3 .st{display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:left}
.howg .steps.build3 .st>*{min-width:240px;max-width:100%}
.howg .steps.build3 .st .n{order:1;display:block;position:static}
.howg .steps.build3 .st h3{order:2}.howg .steps.build3 .st p{order:3}
.howg .steps.build3 .st .ic{order:4;min-width:0;margin-top:auto}}
@media(max-width:900px){
#features,#how,#sample{scroll-margin-top:64px}
.wpanels{align-items:stretch;scroll-padding-top:64px;padding-bottom:4px}
.wp,.wp.on{flex:0 0 85%;display:flex;flex-direction:column;scroll-margin-top:64px}
.wp .wpv{margin-top:auto}
.wdots{margin-top:10px}
.plans .plan.hot{order:-1}}
.ovr{text-align:center;color:var(--mute);margin-top:20px;font-size:15px}
.alerts{margin-top:28px}
#ptext{white-space:pre-wrap}
@media(min-width:901px){.howg .steps.build3 .st>:not(.n):not(.ic){order:2}.howg .steps.build3 .st .n{order:1;margin:0}.howg .steps.build3 .st .ic{order:4;min-width:0;width:44px}}
/* polish: hbar legend */
.hbar{height:16px;margin-bottom:10px}
.hleg{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;margin:0 0 14px;padding:0;font-size:13px;font-weight:600;color:var(--ink)}
.hleg li{display:flex;align-items:center;gap:7px;margin:0}
.hleg li::before{display:none}
.hleg i{width:10px;height:10px;border-radius:50%;flex:none}
.hleg i.a{background:var(--teal)}.hleg i.b{background:var(--grey)}.hleg i.c{background:var(--alt);box-shadow:inset 0 0 0 1px var(--line)}
.plan li.nop{color:#8a8f84;font-style:italic}.laconsent{font-size:13px;color:#6b7065;margin-top:8px}

.plans .plan.sel{outline:3px solid var(--teal);outline-offset:2px}
.canceled-note{text-align:center;margin:0 0 14px;color:var(--mute);font-size:15px}

/* ===== mobile layout fixes 2026-11-05 ===== */
/* Header: keep logo + short CTA + hamburger visible; no overlap */
@media(max-width:900px){
nav .wrap{gap:8px;min-width:0}
.logo{flex:1 1 auto;min-width:0;max-width:calc(100% - 168px)}
.nr{flex:0 0 auto;gap:6px;max-width:100%}
.mmenu{display:block!important;flex:none;position:relative;z-index:40}
.mmenu summary{flex:none;background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(0,0,0,.06)}
nav .btn{flex:none;max-width:100%}
}
@media(max-width:640px){
nav .btn .lg{display:none}
.logo{font-size:18px;gap:6px;max-width:calc(100% - 148px)}
.logo img{width:22px;height:22px}
nav .btn{padding:8px 10px;font-size:12.5px}
.mmenu summary{width:38px;height:38px}
}
@media(max-width:390px){
.logo{font-size:16.5px;max-width:calc(100% - 136px)}
nav .wrap{padding:0 12px;gap:6px}
}
/* Live feed visitor rows: no clipped timestamps / cramped name+title */
@media(max-width:900px){
.jt{white-space:normal}
.feed{overflow:hidden;min-width:0;max-width:100%}
.feed .top{flex-wrap:wrap}
.vc{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:6px 8px;padding:12px;overflow:hidden;min-width:0}
.vc h4{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;min-width:0;font-size:14px;line-height:1.35}
.vc .t{white-space:nowrap;font-size:11px;line-height:1.3;padding-top:1px;justify-self:end}
.vc .m{grid-column:1/-1;min-width:0;overflow-wrap:anywhere;word-break:break-word}
.vc .ph{min-width:0}
/* Sample visitor contact cards */
.sample{padding:18px 14px;overflow:hidden;min-width:0}
.sample .hd{flex-wrap:wrap;gap:6px}
.slides{min-height:0}
.sl{min-width:0}
.sl h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 8px;font-size:22px;line-height:1.25;min-width:0}
.sl .em{min-width:0}
.sl .row,.sample .row{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:6px 10px;min-width:0}
.sl .row>span:last-child,.sample .row>span:last-child{min-width:0;flex:1 1 12rem;text-align:left;overflow-wrap:anywhere}
.sl .chk,.sample .chk{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-start}
.sl .tag,.sample .tag,.vc .tag{flex:none;max-width:100%;white-space:normal}
/* Follow-up + digest cards that also use .jt */
.fuc .who b{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:baseline;min-width:0}
.fuc .rows li{flex-wrap:wrap}
.emsl h5{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;min-width:0}
.emc .row{flex-wrap:wrap;gap:6px 10px}
.emc .chk{display:inline-flex;flex-wrap:wrap;gap:6px}
}