/* Homepage: brand logo marquee + "Built around your brand" (from the approved /new/ design, 2026-11-05).
   Values copied from the reference CSS (new, experience, refinements, channel-polish, niche-polish,
   interactive-threads, source-conversations, stack-calculator); scoped so nothing else on the site changes. */

.dr-wrap{max-width:1240px;padding:0 40px;margin:auto;box-sizing:border-box}
@media(min-width:1600px){.dr-wrap{max-width:1350px}}
@media(max-width:1050px){.dr-wrap{padding:0 32px}}
@media(max-width:760px){.dr-wrap{padding:0 24px}}

/* ---------- Logo marquee ---------- */
.brands{border-top:1px solid #e6e8ed;padding:25px 0;background:#fff}
.brand-strip{display:flex;align-items:center;gap:34px}
.brand-strip>p{margin:0;font-size:14px;line-height:1.7;min-width:205px;color:#646c7a}
.brand-strip strong{font-weight:700;color:#182032}
.logo-window{overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,black 5%,black 95%,transparent);mask-image:linear-gradient(to right,transparent,black 5%,black 95%,transparent);flex:1}
.logo-track{display:flex;width:max-content;animation:dr-marquee 28s linear infinite}
.logo-set{display:flex;align-items:center;gap:58px;padding-right:58px}
.logo-set img{display:block;object-fit:contain;max-height:38px;width:108px;height:auto;filter:grayscale(1);opacity:.78}
.logo-set img.pridola{max-height:62px;width:105px}
.logo-set img:nth-child(2){width:145px}
.brands:hover .logo-track{animation-play-state:paused}
@keyframes dr-marquee{to{transform:translateX(-50%)}}
@media(max-width:760px){
  .brands{padding:25px 0 23px;border-top:0}
  .brand-strip{flex-wrap:wrap;gap:17px;position:relative}
  .brand-strip>p{width:100%;text-align:center;font-size:12px;line-height:1.6}
  .brand-strip>p br{display:none}
  .brand-strip>p strong{margin-left:3px}
  .logo-window{width:100%;flex:auto}
  .logo-set{gap:42px;padding-right:42px}
  .logo-set img{width:85px;max-height:31px}
  .logo-set img.pridola{width:90px;max-height:53px}
  .logo-set img:nth-child(2){width:118px}
}
@media(prefers-reduced-motion:reduce){
  .logo-track{animation:none;transform:none}
  .logo-window{overflow:auto;-webkit-mask-image:none;mask-image:none}
  .logo-set[aria-hidden]{display:none}
}

/* ---------- Built around your brand ---------- */
#conversations{padding:118px 0;background:radial-gradient(ellipse at 82% 62%,#dce8ffb5,transparent 57%),#f6f8fc;color:#182032}
#conversations h2,#conversations h3{font-weight:550;line-height:1.1;letter-spacing:-.055em;margin:0;color:#182032}
#conversations h2{font-size:clamp(40px,4.2vw,60px)}
#conversations .dr-blue{color:#265cf3}
#conversations .dr-heading{text-align:center;margin-bottom:38px}

#conversations .niche-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:min(100%,720px);gap:5px;padding:7px;margin:0 auto 48px;border:1px solid #fff;border-radius:25px;background:linear-gradient(145deg,#ffffffed,#edf3fbd9 65%,#fffffff0);box-shadow:inset 0 1px 1px #fff,inset 0 -1px 1px #cfdbec50,0 8px 28px #203e7010,0 0 0 1px #dce5f06b;box-sizing:border-box}
#conversations .niche-tabs button{min-width:0;min-height:48px;padding:12px 13px;border:1px solid transparent;border-radius:19px;background:transparent;color:#526176;font-size:15px;font-weight:550;line-height:1.35;white-space:nowrap;transition:background .18s,color .18s,box-shadow .18s}
#conversations .niche-tabs button:hover:not([aria-selected="true"]){background:#ffffffc9;color:#244c96;box-shadow:inset 0 1px 0 #fff}
#conversations .niche-tabs button[aria-selected="true"]{color:#fff;background:linear-gradient(145deg,#4b83ff,#2863ef 65%,#2260e6);border-color:#93b6ff;box-shadow:inset 0 1px 0 #ffffff70,inset 0 -1px 1px #1447a329,0 3px 9px #235cdd25}
#conversations .niche-tabs button:focus-visible{outline:3px solid #759dff;outline-offset:2px}

#conversations .niche-panel{display:grid;grid-template-areas:"context thread";grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center;max-width:1020px;margin:auto}
#conversations .brand-context{grid-area:context;min-width:0}
#conversations .brand-context h3{font-size:38px;line-height:1.16}
#conversations .brand-context>p{font-size:15px;color:#606a7b;margin:32px 0 0}
#conversations .brand-context ul{list-style:none;padding:0;margin:14px 0 0}
#conversations .brand-context li{font-size:17px;line-height:1.6;padding:14px 0;border-bottom:1px solid #e1e4eb;letter-spacing:-.015em;color:#182032}
#conversations .brand-context li:before{content:"✓";color:#265cf3;padding-right:14px;font-size:15px}

/* iMessage phone */
#conversations .niche-phone{grid-area:thread;min-width:0;width:100%;height:670px;display:flex;flex-direction:column;border:1px solid #dfe7f3;border-radius:28px;background:#fff;overflow:hidden;box-shadow:0 14px 42px #183b7010,inset 0 1px 0 #fff;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;box-sizing:border-box}
#conversations .channel-contact{position:relative;height:89px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:#f8f9fb;border-bottom:1px solid #e9edf2;font-size:12px;font-weight:500;line-height:1.5;color:#23262b}
#conversations .phone-contact-details{display:flex;flex-direction:column;align-items:center;gap:4px}
#conversations .channel-avatar{height:40px;width:40px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(#b5bcc7,#909aa9);color:#fff;font-size:22px;font-weight:400}
#conversations .channel-chevron{color:#9aa2af;margin-left:2px}
#conversations .channel-back{position:absolute;left:20px;top:32px;width:25px;height:25px;fill:none;stroke:#147bfa;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
#conversations .channel-thread{flex:1 1 auto;min-height:0;padding:18px 26px 28px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#bac8dc transparent;scrollbar-gutter:stable}
#conversations .channel-thread:focus-visible{outline:2px solid #8bb1f7;outline-offset:-3px}
#conversations .channel-thread::-webkit-scrollbar{width:5px}
#conversations .channel-thread::-webkit-scrollbar-thumb{background:#bac8dc;border-radius:5px}
#conversations .channel-system-label{display:block;text-align:center;color:#8a919b;font-size:11px;line-height:1.5;font-weight:500;margin-bottom:22px}
#conversations .channel-messages{display:flex;flex-direction:column;gap:14px}
#conversations .channel-bubble{position:relative;z-index:0;max-width:85%;width:fit-content;margin:0;padding:11px 15px;border-radius:21px;font-size:17px;line-height:1.42;letter-spacing:-.015em;font-weight:400}
#conversations .channel-bubble::before{content:"";position:absolute;bottom:0;width:17px;height:20px;z-index:-1;background:inherit}
#conversations .channel-bubble::after{content:"";position:absolute;bottom:0;width:10px;height:22px;z-index:-1;background:#fff}
#conversations .channel-bubble.outgoing{align-self:flex-end;background:#147bfa;color:#fff}
#conversations .channel-bubble.outgoing::before{right:-6px;border-bottom-left-radius:14px}
#conversations .channel-bubble.outgoing::after{right:-10px;border-bottom-left-radius:11px}
#conversations .channel-bubble.incoming{align-self:flex-start;background:#e9e9eb;color:#1d1d20}
#conversations .channel-bubble.incoming::before{left:-6px;border-bottom-right-radius:14px}
#conversations .channel-bubble.incoming::after{left:-10px;border-bottom-right-radius:11px}
#conversations .channel-messages.replaying .channel-bubble{animation:dr-phone-message-in .3s ease both;animation-delay:calc(var(--i)*.45s)}
@keyframes dr-phone-message-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
#conversations .channel-composer{display:flex;align-items:center;gap:12px;flex-shrink:0;padding:10px 20px 20px;color:#9a9fa8}
#conversations .channel-plus{display:grid;place-items:center;width:30px;height:30px;background:#f0f1f3;border-radius:50%;font-size:27px;line-height:1;font-weight:300}
#conversations .channel-compose-field{display:flex;align-items:center;justify-content:space-between;flex:1;min-width:0;height:35px;border:1px solid #dce0e6;border-radius:20px;font-size:15px;padding:0 9px 0 13px}
#conversations .channel-compose-field svg{width:22px;height:22px;fill:none;stroke:#6f7783;stroke-width:1.6;stroke-linecap:round}

@media(max-width:1050px){#conversations .niche-panel{gap:45px}}
@media(max-width:760px){
  #conversations{padding:78px 0}
  #conversations h2{font-size:clamp(33px,6.2vw,45px);line-height:1.14;letter-spacing:-.052em}
  #conversations .dr-heading{margin-bottom:28px}
  #conversations .niche-tabs{grid-template-columns:repeat(6,minmax(0,1fr));width:min(100%,430px);gap:5px;padding:6px;margin-bottom:28px;border-radius:24px}
  #conversations .niche-tabs button{grid-column:span 2;min-height:44px;padding:11px 4px;border-radius:17px;font-size:14px}
  #conversations .niche-tabs button:nth-child(4),#conversations .niche-tabs button:nth-child(5){grid-column:span 3}
  #conversations .niche-panel{grid-template-areas:"thread" "context";grid-template-columns:minmax(0,1fr);gap:34px;max-width:500px}
  #conversations .niche-phone{height:640px;border-radius:25px}
  #conversations .channel-thread{padding:18px 22px 25px}
  #conversations .channel-bubble{font-size:16px;max-width:88%;padding:10px 14px}
  #conversations .channel-system-label{margin-bottom:20px}
  #conversations .brand-context{padding:29px 2px 0;border-top:1px solid #dbe3ef}
  #conversations .brand-context h3{font-size:28px;line-height:1.2}
  #conversations .brand-context h3 br{display:none}
  #conversations .brand-context>p{margin-top:19px;font-size:15px}
  #conversations .brand-context ul{display:block;margin-top:11px}
  #conversations .brand-context li{font-size:16px;line-height:1.5;padding:12px 0}
  #conversations .brand-context li:before{font-size:12px;padding-right:11px}
}
@media(max-width:360px){
  #conversations .channel-thread{padding-inline:18px}
  #conversations .channel-bubble{font-size:16px;max-width:91%}
}
@media(prefers-reduced-motion:reduce){
  #conversations .niche-tabs button{transition:none}
  #conversations .channel-messages.replaying .channel-bubble{animation:none}
}