@font-face{font-family:Geist;src:url(assets/geist-400.ttf);font-weight:400}
@font-face{font-family:Geist;src:url(assets/geist-500.ttf);font-weight:500}
@font-face{font-family:Geist;src:url(assets/geist-600.ttf);font-weight:600}
@font-face{font-family:Montreal;src:url(assets/PPNeueMontreal-Semibold.otf);font-weight:600}
html,body{margin:0;background:#e9ebeb;color:#192220}
.art{width:1080px;height:1350px;overflow:hidden;position:relative;background:#eff1f0;font-family:Geist,sans-serif}
.art:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 80% 57%,#c5ddd4 0,transparent 52%),radial-gradient(ellipse at 42% 80%,#ded8ef 0,transparent 48%);opacity:.8}
.brandrow{position:absolute;top:68px;left:80px;right:80px;display:flex;align-items:center;justify-content:space-between}
.brandrow img{width:175px;height:52px;object-fit:contain;object-position:left center}.brandrow span{font-size:26px;color:#525b58}
h1{position:absolute;left:80px;top:186px;font:600 94px/.99 Montreal,Geist,sans-serif;letter-spacing:-3.5px;margin:0}
.ui{position:absolute;top:450px;left:90px;width:391px;transform:scale(2.3);transform-origin:top left;font-family:Geist,sans-serif;color:var(--color-grey-11)}
.scene{display:flex;flex-direction:column;gap:14px}
.copy{font-size:15px;line-height:1.45}.soft{padding:14px;background:var(--color-grey-97);border-radius:var(--r-8)}
.pad{padding:16px;display:flex;flex-direction:column;gap:14px}
.person{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500}
.muted{color:#606666;font-size:13px;font-weight:400}.split{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px}
.status{background:#e7f1eb;color:#365d48;padding:7px 10px;border-radius:var(--r-6);font-size:13px}
.ai{background:#efebf9;color:#6a548f}.panelCard{flex-shrink:0}.phead{min-height:44px}
.channel{font-size:13px;color:#57645f}.message{padding:14px 16px;border-bottom:1px solid var(--hairline);display:flex;flex-direction:column;gap:8px}.message:last-child{border:0}.message.active{background:#f3f7f4}
.message .split{font-size:15px;font-weight:500}.channels{display:flex;justify-content:space-between;gap:8px;padding:12px 3px 0;font-size:13px;color:#4e5c55}
.spacer{height:1px;background:var(--hairline)}
.footer{position:absolute;left:80px;right:80px;bottom:68px}.offer{font-size:32px;margin:0 0 28px}.bottom{display:flex;justify-content:space-between;align-items:center}.cta{display:inline-flex;align-items:center;border-radius:999px;background:#192220;color:white;padding:25px 36px;font-size:34px;font-weight:500;text-decoration:none}.domain{font-size:28px;color:#59635e}.example{position:absolute;top:1072px;left:90px;font-size:24px;color:#65716a}

.art:before{display:none}
.art{background:linear-gradient(125deg,var(--wash),#f7faf8 48%,var(--base))}
.art:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 0% 100%,var(--base),transparent 70%),radial-gradient(ellipse at 100% 0%,var(--corner),transparent 65%),radial-gradient(ellipse at 45% 28%,#ffffffb0,transparent 63%);opacity:.8;z-index:0}
.art>*{z-index:1}
.a{--wash:#fff1d6;--base:#edbca5;--corner:#eccbd6}
.b{--wash:#e9edf8;--base:#adcfEE;--corner:#b0e2df}
.c{--wash:#eef0d8;--base:#9ed7c5;--corner:#b5e2e5}
h1{font-size:88px;top:180px;line-height:1.03;letter-spacing:-3px}
.subtitle{position:absolute;left:80px;top:391px;font-size:34px;line-height:1.3;color:#48544d}
.ui{top:490px}
.a .ui{width:361px}.c .ui{width:371px}
.scene{gap:16px}.offset{margin-left:25px;width:100%}
.pad{padding:15px;gap:12px}
.warning{background:#fff1e6;color:#8b4d30;padding:8px 10px;border-radius:var(--r-6);font-size:15px}
.task{font-size:20px;line-height:1.3;font-weight:500}
.connector{height:18px;width:1px;background:#6f7c7270;margin:-6px 0 -6px 30px}
.tinylogo{width:66px}.green{color:#436453}
.channelstrip{display:flex;justify-content:space-between;gap:6px}.channelchip{background:#ffffffcc;box-shadow:var(--shadow-card);padding:10px 7px;border-radius:var(--r-8);font-size:13px;white-space:nowrap}
.join{height:29px;margin:0 32px;border:1px solid #718b8f80;border-top:0;border-radius:0 0 10px 10px;position:relative}.join:after{content:'';position:absolute;top:28px;left:50%;height:24px;border-left:1px solid #718b8f80}
.b .panelCard{margin-top:23px}.b .scene{gap:0}
.c .prompt{margin-right:42px}.c .offset{margin-left:20px}
.labelrow{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#606666}
.footnote{font-size:13px;color:#6a548f}
.actions{display:flex;justify-content:flex-end;gap:10px}.btn--secondary{box-shadow:inset 0 0 0 1px var(--ring);background:#fff;color:#303032}
.channelstrip{gap:8px}.channelchip{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:7px;padding:10px 4px}.channelchip img{width:24px;height:24px;object-fit:contain}.b .ui{top:450px}.b .message{padding-top:10px;padding-bottom:10px}.brandrow{display:none}h1{top:105px}.subtitle{top:318px}.ui{top:430px}.b .ui{top:390px}.footerlogo{width:245px;height:73px;object-fit:contain}.footer{bottom:68px}.example,.offer{display:none}
/* Composed panels: common grid, quieter surfaces, consistent spacing. */
.a .ui,.c .ui{width:391px}
.offset,.c .offset{margin-left:0;width:100%}
.c .prompt{margin-right:32px}
.scene{gap:14px}
.phead{padding:12px 16px;background:#fcfcfc;min-height:46px}
.pad{padding:16px;gap:14px}
.a .connector{height:20px;margin:-3px 0 -3px 195px;background:#9b7969}
.warning{background:#fff2e9;border-left:2px solid #c99371;padding:10px 12px}
.a .task{font-size:20px;line-height:1.4}
.a .split{padding-top:12px;border-top:1px solid var(--hairline);color:#58635d}
.green{background:#eaf3ed;padding:5px 8px;border-radius:6px;color:#426951}
.c .offset .copy{background:#f6f7f6;border-radius:8px;padding:13px;line-height:1.55}
.c .footnote{display:flex;gap:7px;align-items:center;color:#706082}
.c .footnote:before{content:'';width:5px;height:5px;border-radius:50%;background:#ac98c6}
.actions{padding-top:4px;gap:8px}
.b .channelstrip{position:relative}
.b .channelchip{position:relative;box-shadow:0 0 0 1px #1922200f,0 3px 8px #19222006}
.b .channelchip:after{content:'';position:absolute;top:100%;left:50%;height:28px;border-left:1px solid #8aa0a7}
.b .join{margin:0 37px;height:29px;border-left:0;border-right:0;border-radius:0;border-color:#8aa0a7}
.b .join:after{border-color:#8aa0a7}
.b .message{gap:10px;padding:11px 16px}
.b .message .split{align-items:center}
.b .channel{font-size:13px;font-weight:400;color:#63766f}
.b .message.active{background:#f2f7f4}
.c .ui{top:410px}.c .pad{padding:13px;gap:12px}

.bottom{flex-direction:row-reverse}

/* AI proposal: Baseline violet treatment and a reserved CTA gap. */
.c .ui{top:410px;left:90px;width:418px;transform:scale(2.15)}
.c .offset{margin-left:0;width:100%;background:#fbf9ff;box-shadow:0 0 0 1px #b4a1f355,0 9px 16px -10px #69508a33}
.c .offset .phead{background:#f1edfd;box-shadow:inset 0 -1px 0 #b4a1f333}
.c .offset .phead__title{color:var(--color-accent-dark,#69508a)}
.c .offset .copy{background:#f1edfd;color:#493b61;border-radius:8px;padding:12px;line-height:1.5}
.c .footnote{color:#69508a}
.c .footnote:before{background:#9b82d3}
.c .actions .btn--primary{background:var(--color-accent-dark,#6c53cf);color:white}
.c .actions .btn--secondary{background:#fbf9ff;color:#69508a;box-shadow:inset 0 0 0 1px #b4a1f366}

/* Minimal channel strip: icons only, no tile surfaces. */
.b .channelstrip{justify-content:space-between;padding:0 22px;gap:0}
.b .channelchip{flex:0 0 48px;width:48px;height:48px;padding:12px;gap:0;background:transparent;box-shadow:none;border-radius:0}
.b .channelchip img{width:24px;height:24px}
.b .channelchip>span{display:none}
.b .channelchip:after{border-color:#8aa0a74d;height:26px}
.b .join{margin:0 46px;border-color:#8aa0a74d;height:27px}
.b .join:after{top:26px;border-color:#8aa0a74d}

/* Landing-page flow: colored packets converge into the inbox. */
.b .channelchip:after{display:none}
.channel-flow{height:54px;width:100%;position:relative}
.channel-flow svg{display:block;width:100%;height:54px;overflow:visible}
.flow-rail{stroke:#8aa0a747;stroke-width:.65;stroke-linecap:round}
.flow-beam{stroke:var(--beam);stroke-width:1.25;stroke-linecap:round;filter:drop-shadow(0 0 2px var(--beam));opacity:.8;stroke-dasharray:16 500;stroke-dashoffset:16}
.b .panelCard{margin-top:0}
@media(prefers-reduced-motion:reduce){.flow-beam{display:none}}

/* Hero scenario: concern, interpretation, then a reviewed reply. */
.c .prompt{margin-right:0}
.c .prompt mark{background:#eee8fa;color:#493b61;border-radius:3px;padding:0 2px}
.c .ai-insight{display:flex;align-items:center;gap:8px;font-size:14px;line-height:1.4;color:#69508a;padding:0 5px}
.c .scene{gap:11px}
.c .offset .copy{padding:10px;line-height:1.4}
.c .offset .pad{gap:10px}

/* Quiet icon surfaces keep channels legible over the blue wash. */
.b .channelchip{background:rgba(255,255,255,.72);border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.9),0 3px 9px rgba(57,88,103,.08)}

/* Subtle background drift; content remains stationary and crisp. */
.art{background-size:160% 160%;background-position:0% 35%}
@media(prefers-reduced-motion:reduce){.art{background-size:100% 100%}}

.b .inbox-count{font-size:13px;font-weight:500;color:#426951;background:#eaf3ed;padding:5px 8px;border-radius:6px;white-space:nowrap}

/* AI palette from the supplied lilac-to-cream reference. */
.c .offset{background:linear-gradient(110deg,#f5effb 0%,#faf5ef 100%);box-shadow:0 0 0 1px #e7dcf2,0 9px 16px -10px #76538d20}
.c .offset .phead{background:transparent;box-shadow:inset 0 -1px 0 #e7dcf2}
.c .offset .phead__title,.c .footnote,.c .ai-insight{color:#805b98}
.c .offset .copy{background:rgba(255,255,255,.42);color:#634974}
.c .prompt mark{background:#eee3f5;color:#634974}
.c .footnote:before{background:#a78ab9}
.c .actions .btn--primary{background:#805b98;color:#fff}
.c .actions .btn--secondary{background:#ffffff66;color:#805b98;box-shadow:inset 0 0 0 1px #e0d2ec}

.b .message-person{display:flex;align-items:center;gap:9px}
.b .avatar{width:27px;height:27px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px #1922200a}

.b img.avatar{clip-path:circle(50%);display:block;flex-shrink:0}

/* Smaller, centered product illustrations with more surrounding space. */
.a .ui,.b .ui{transform:scale(2.07);left:135.315px}
.c .ui{transform:scale(1.935);left:135.585px}

/* AI banner background harmonizes with the lilac and cream cards. */
.c{--wash:#f5edfa;--base:#d8c4e6;--corner:#f1dfd1}
/* Compact inbox spacing without reducing message readability. */
.b .panelCard .phead{min-height:38px;padding:8px 14px}
.b .message{padding:9px 14px;gap:6px}
.b .avatar{width:22px;height:22px}
.b .message .copy{line-height:1.35}
.b .inbox-count{padding:4px 7px}
/* A restrained glint travels along the CTA outline only. */
.cta{position:relative;isolation:isolate}
.cta:before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--cta-angle,0deg),transparent 0deg,transparent 285deg,rgba(255,255,255,.14) 310deg,rgba(255,255,255,.72) 332deg,transparent 355deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
@property --cta-angle{syntax:'<angle>';initial-value:0deg;inherits:true}
@media(prefers-reduced-motion:reduce){.cta:before{opacity:.3}}

/* More visible but restrained edge highlight. */
.cta{font-size:30px;padding:25px 30px}
.cta:before{inset:-1px;padding:2.5px;background:conic-gradient(from var(--cta-angle,0deg),rgba(255,255,255,.12) 0deg,rgba(255,255,255,.12) 235deg,rgba(228,246,237,.55) 280deg,#fff 315deg,rgba(231,244,237,.75) 340deg,rgba(255,255,255,.12) 360deg);filter:drop-shadow(0 0 3px #ffffff80)}

.cta{box-shadow:inset 0 0 0 1px #ffffff38}.cta:before{padding:3.5px}

/* Paint the moving stroke directly on the button, without masked pseudo-elements. */
.cta:before{display:none}
.cta{border:3px solid transparent;padding:22px 27px;background:linear-gradient(#192220,#192220) padding-box,linear-gradient(110deg,#40594e 30%,#819c90 42%,#fff 49%,#dbffed 53%,#819c90 60%,#40594e 72%) border-box;background-size:100% 100%,300% 100%;background-position:0 0,100% 0;box-shadow:0 0 9px #d8ffeb20}

/* Stronger edge contrast, with a restrained shimmer on the CTA text. */
.cta{border-width:3px;background:linear-gradient(#192220,#192220) padding-box,linear-gradient(110deg,#476b5b 25%,#527e68 40%,#99efbd 47%,#ecfff3 51%,#82dbaa 56%,#476b5b 72%) border-box;background-size:100% 100%,300% 100%;box-shadow:0 0 0 1px #253f3580,0 2px 6px #19222018}
.cta-label{color:#fff;background:linear-gradient(110deg,#e1eee7 30%,#e1eee7 43%,#a4f7c5 48%,#fff 52%,#e1eee7 58%,#e1eee7 75%);background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* CTA shimmer follows each banner palette. */
.a{--cta-dark:#302724;--cta-edge:#946956;--cta-mid:#c4937a;--cta-glint:#ffcfb3;--cta-white:#fff5ec;--cta-text:#f5e8e1}
.b{--cta-dark:#232b35;--cta-edge:#587ba2;--cta-mid:#8aafd6;--cta-glint:#b9ddff;--cta-white:#f2f8ff;--cta-text:#e6eff9}
.c{--cta-dark:#2d2633;--cta-edge:#89649d;--cta-mid:#b494c8;--cta-glint:#e2c5f3;--cta-white:#fbf2ff;--cta-text:#f1e7f6}
.cta{background:linear-gradient(var(--cta-dark),var(--cta-dark)) padding-box,linear-gradient(110deg,var(--cta-edge) 25%,var(--cta-mid) 40%,var(--cta-glint) 47%,var(--cta-white) 51%,var(--cta-glint) 56%,var(--cta-edge) 72%) border-box;background-size:100% 100%,300% 100%;box-shadow:0 0 0 1px var(--cta-edge),0 2px 6px #19222018}
.cta-label{background-image:linear-gradient(110deg,var(--cta-text) 30%,var(--cta-text) 43%,var(--cta-glint) 48%,var(--cta-white) 52%,var(--cta-text) 58%,var(--cta-text) 75%)}

/* Static CTA treatment: no moving border or text highlight. */
.cta{background:var(--cta-dark);border:2px solid var(--cta-edge);padding:23px 28px;box-shadow:none}
.cta-label{background:none;color:var(--cta-text);-webkit-text-fill-color:currentColor}
.cta:before{display:none}

/* Three additional campaign stories. */
.d{--wash:#f1f1db;--base:#ccdcb7;--corner:#e8e5c7;--cta-dark:#2e3226;--cta-edge:#7b8860;--cta-text:#f4f6eb}
.e{--wash:#e6eff5;--base:#bdd1df;--corner:#e0d6e9;--cta-dark:#25323d;--cta-edge:#6c879a;--cta-text:#edf4fa}
.f{--wash:#f7eaf1;--base:#e3c8dc;--corner:#e8d7c9;--cta-dark:#382b39;--cta-edge:#a17da4;--cta-text:#f7edf6}
.e h1{font-size:80px}.e .ui{top:425px}.e .pad{gap:12px}
.dateblock{display:flex;align-items:center;gap:18px}.dateicon{width:58px;border:1px solid #d4deca;border-radius:9px;text-align:center;overflow:hidden;background:#fff}.dateicon span{display:block;background:#eaf0e1;font-size:11px;letter-spacing:1px;padding:5px}.dateicon strong{display:block;font-size:31px;line-height:1.35;font-weight:500}.dateblock .muted{margin-top:5px}
.d .connector{background:#8d9b76}.e .connector{background:#8ba2b3}.handoff-note{background:#f2f5f8;border-radius:8px;padding:11px;display:flex;flex-direction:column;gap:5px}.handoff-note span{font-size:12px;color:#75828c}.handoff-note strong{font-size:14px;line-height:1.4;font-weight:400;color:#465560}.handoff-people{display:flex;align-items:center;justify-content:center;gap:25px;font-size:17px}.handoff-people>span{display:flex;align-items:center;gap:9px}.handoff-people i{font-style:normal;font-size:12px;display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:#e8eff5;color:#56748a}.handoff-arrow{color:#7f99ab}.stars{color:#ac8857;font-size:13px;letter-spacing:1px}.f .ui{top:425px}
.d .ui{transform:scale(1.9);left:168.55px}
.e .ui{transform:scale(1.8);left:188.1px}

.receptionist{--wash:#f1ebf8;--base:#cfc5e5;--corner:#e7d8eb;--cta-dark:#302937;--cta-edge:#937ca5;--cta-text:#f3ebfa}
.receptionist .soon{display:inline-block;vertical-align:middle;margin-left:12px;padding:6px 15px;border:1px solid #bca8ce;border-radius:99px;color:#76598c;background:#f4edf9;font-size:25px;line-height:1.2}
.receptionist .ui{top:430px}.receptionist .actions .btn{font-size:13px}