/* Shared visual identity for service, account and information pages. */
:root{--paper:#f6f9f8;--ink:#101716;--text:#101716;--muted:#44534d;--accent:#101716;--green:#101716;--line:#10171626;--hero-on:#101716;--hero-sub:#44534d;--service-tint:#a4d9fa;--on-dark:#fff;--bg:#f6f9f8}
html[data-brand-page],html[data-brand-page] body{background:#f6f9f8;background-image:none;color:#101716}
html[data-brand-page] header{background:#f6f9f8;color:#101716}
html[data-brand-page] .detail-intro{background:var(--service-tint);border-radius:28px;padding:40px;margin-top:24px}
html[data-brand-page] .detail-intro h1,html[data-brand-page] .detail-intro p{color:#101716}
html[data-brand-page] .detail-box{background:#fff!important;border-color:#10171626}
html[data-brand-page] .button,html[data-brand-page] button.primary,html[data-brand-page] #lookup{background:#101716;color:white;border-color:#101716}
html[data-brand-page] .button.outline{background:transparent;color:#101716}
html[data-brand-page] .logo{color:#101716}
html[data-brand-page] footer{background:transparent;color:#44534d}
html[data-brand-page="payments"]{--service-tint:#ffcf88}
html[data-brand-page="email"]{--service-tint:#85e4ca}
html[data-brand-page="account"] body{background:radial-gradient(ellipse at 5% 0%,#a4d9fa,transparent 55%),radial-gradient(ellipse at 95% 10%,#85e4ca,transparent 55%),#f6f9f8}
html[data-brand-page="account"] header{background:transparent}
html[data-brand-page="account"] .card{background:#ffffffed;border:1px solid #10171620;color:#101716}
html[data-brand-page="account"] .access-options{background:#eaf0ed}
html[data-brand-page="account"] .access-options button{background:transparent;color:#44534d}
html[data-brand-page="account"] .access-options button[aria-pressed="true"]{background:#101716;color:#fff}
html[data-brand-page="account"] input{background:white;color:#101716;border-color:#80978c}
@media(max-width:650px){html[data-brand-page] .detail-intro{padding:28px 22px}}
/* A continuous animated surface behind the logo, navigation and service intro. */
html[data-brand-page] .detail-main{padding-top:0}
html[data-brand-page] .service-surface{position:relative;isolation:isolate;overflow:hidden;background:#81dcf2;margin-bottom:48px}
html[data-brand-page] .service-surface:before{content:"";position:absolute;inset:-35%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 12% 16%,#65c7ff 0,transparent 48%),radial-gradient(ellipse at 90% 18%,#53e3ba 0,transparent 48%),radial-gradient(ellipse at 85% 85%,#ffbc63 0,transparent 48%),radial-gradient(ellipse at 12% 85%,#e9a4ec 0,transparent 50%),linear-gradient(120deg,#83dcec,#e2cefa);animation:service-colors 24s ease-in-out infinite alternate}
html[data-brand-page] .service-surface header{background:transparent;padding-top:env(safe-area-inset-top,0px)}
html[data-brand-page] .service-surface .detail-intro{background:transparent;border-radius:0;margin-top:0;padding:55px 0 65px}
@keyframes service-colors{from{transform:translate(-5%,-3%) rotate(-9deg)}50%{transform:translate(4%,-1%) rotate(5deg) scale(1.06)}to{transform:translate(0,6%) rotate(16deg) scale(1.02)}}
@media(max-width:650px){html[data-brand-page] .service-surface .detail-intro{padding:36px 0 44px}}
@media(prefers-reduced-motion:reduce){html[data-brand-page] .service-surface:before{animation:none}}
/* Confirmed direction: full-page service color; mixed animation only on homepage. */
html[data-brand-page="marketing"],html[data-brand-page="payments"],html[data-brand-page="email"]{--ink:#101716;--muted:#101716;--hero-on:#101716;--hero-sub:#101716;--accent:#101716;background:var(--service-tint)}
html[data-brand-page="marketing"] body,html[data-brand-page="payments"] body,html[data-brand-page="email"] body{background:var(--service-tint);color:#101716}
html[data-brand-page="marketing"] header,html[data-brand-page="payments"] header,html[data-brand-page="email"] header,
html[data-brand-page="marketing"] footer,html[data-brand-page="payments"] footer,html[data-brand-page="email"] footer,
html[data-brand-page="marketing"] .service-surface,html[data-brand-page="payments"] .service-surface,html[data-brand-page="email"] .service-surface{background:var(--service-tint);color:#101716}
html[data-brand-page="marketing"] .service-surface:before,html[data-brand-page="payments"] .service-surface:before,html[data-brand-page="email"] .service-surface:before{display:none;animation:none}
html[data-brand-page="marketing"] .detail-box,html[data-brand-page="payments"] .detail-box,html[data-brand-page="email"] .detail-box,
html[data-brand-page="marketing"] .plan,html[data-brand-page="marketing"] .pricing,html[data-brand-page="marketing"] .trial,html[data-brand-page="marketing"] .end{background:transparent!important;color:#101716;border-color:#10171640}
html[data-brand-page="marketing"] p,html[data-brand-page="payments"] p,html[data-brand-page="email"] p{color:#101716}
html[data-brand-page="marketing"] .button,html[data-brand-page="payments"] .button,html[data-brand-page="email"] .button{background:#101716;color:var(--service-tint)}
html[data-brand-page="marketing"] .button.outline,html[data-brand-page="payments"] .button.outline,html[data-brand-page="email"] .button.outline{background:transparent;color:#101716}
html[data-brand-page="marketing"] .detail-main,html[data-brand-page="payments"] .detail-main,html[data-brand-page="email"] .detail-main,
html[data-brand-page="marketing"] .detail-main .faq-layout{background:var(--service-tint)}
html[data-brand-page="whatsapp"]{--service-tint:#b9e78a;--ink:#101716;--muted:#101716;--accent:#101716;background:#b9e78a}
html[data-brand-page="whatsapp"] body,html[data-brand-page="whatsapp"] header,html[data-brand-page="whatsapp"] footer,html[data-brand-page="whatsapp"] .detail-main,html[data-brand-page="whatsapp"] .service-surface{background:#b9e78a;color:#101716}
html[data-brand-page="whatsapp"] .service-surface:before{display:none;animation:none}
html[data-brand-page="whatsapp"] .detail-box{background:transparent!important;color:#101716;border-color:#10171640}
html[data-brand-page="whatsapp"] p{color:#101716}
html[data-brand-page="whatsapp"] .button{background:#101716;color:#b9e78a}
html[data-brand-page="whatsapp"] .button.outline{background:transparent;color:#101716}
html[data-brand-page="cod"]{--service-tint:#d3b9ef;--ink:#101716;--muted:#101716;--accent:#101716;background:#d3b9ef}
html[data-brand-page="cod"] body,html[data-brand-page="cod"] header,html[data-brand-page="cod"] footer,html[data-brand-page="cod"] .detail-main,html[data-brand-page="cod"] .service-surface{background:#d3b9ef;color:#101716}
html[data-brand-page="cod"] .service-surface:before{display:none;animation:none}
html[data-brand-page="cod"] .detail-box{background:transparent!important;color:#101716;border-color:#10171640}
html[data-brand-page="cod"] p{color:#101716}
html[data-brand-page="cod"] .button{background:#101716;color:#d3b9ef}
html[data-brand-page="cod"] .button.outline{background:transparent;color:#101716}
/* Keep contact dialog controls within the black/lilac/white palette. */
html[data-brand-page="cod"] #cod-dialog input{background:#fff;color:#101716;border:1px solid #101716;box-shadow:none;accent-color:#101716}
html[data-brand-page="cod"] #cod-dialog input:focus{border-color:#101716;outline:2px solid #101716;outline-offset:2px;box-shadow:none}
html[data-brand-page="cod"] #cod-dialog button{border:1px solid #101716;box-shadow:none;outline:none}
html[data-brand-page="cod"] #cod-dialog :is(button,a):focus-visible{outline:2px solid #101716;outline-offset:3px;box-shadow:0 0 0 2px #fff}
html[data-brand-page="cod"] #cod-dialog #cod-send{background:#101716;color:#fff}
html[data-brand-page="cod"] #cod-dialog #cod-close{background:transparent;color:#101716}

/* Account creation shares the homepage color mix, independent of service colors. */
html[data-brand-page="account"] body{background-color:#81dcf2;background-image:radial-gradient(ellipse at 12% 16%,#65c7ff 0,transparent 48%),radial-gradient(ellipse at 90% 18%,#53e3ba 0,transparent 48%),radial-gradient(ellipse at 85% 85%,#ffbc63 0,transparent 48%),radial-gradient(ellipse at 12% 85%,#e9a4ec 0,transparent 50%),linear-gradient(120deg,#83dcec,#e2cefa);background-attachment:fixed}
html[data-brand-page="account"] :focus-visible{outline-color:#101716}