/* Clario24 client-space mockup, sharing the page's outlined art direction. */
#monthly.monthly-summary{padding:56px 28px;background:#fff;color:#0b2349;scroll-margin-top:90px;font-family:'DM Sans',Arial,sans-serif}
#monthly .monthly-inner{max-width:1220px;margin:auto}
#monthly .monthly-heading{max-width:860px;margin:0 auto 32px;text-align:center}
#monthly .monthly-heading>h2,#monthly .monthly-heading>p{width:100%;max-width:none;text-align:center;margin-inline:auto;box-sizing:border-box}
#monthly .monthly-heading .eyebrow{display:flex;align-items:center;justify-content:center;gap:10px;color:#0b2349;font-size:12px;letter-spacing:.07em;margin:0 0 18px}
#monthly .monthly-heading .eyebrow::before{content:'';width:9px;height:9px;flex-shrink:0;background:#ff742b;border:1px solid #0b2349;border-radius:50%;box-shadow:0 0 0 4px #ff742b19}
#monthly .monthly-heading h2{font:600 clamp(30px,3.2vw,44px)/1.14 'Bricolage Grotesque',Arial,sans-serif;letter-spacing:-.035em;color:#0b2349;margin:0 0 20px;text-wrap:balance}
#monthly .monthly-heading h2 span{color:#194bea;background-image:linear-gradient(#ffac78,#ffac78);background-repeat:no-repeat;background-position:0 96%;background-size:100% 5px;box-decoration-break:clone;-webkit-box-decoration-break:clone;padding-bottom:3px}
#monthly .monthly-heading>p:not(.eyebrow){font-size:17px;line-height:1.6;color:#526580;margin:0}
#monthly .monthly-heading p.monthly-promise{color:#0b2349;font-weight:600;margin-top:14px}
#monthly .monthly-overview{margin:0;border:1.3px solid #0b2349;border-radius:18px 18px 30px 18px;box-shadow:6px 7px 0 #dbe6fb;background:#fff;overflow:hidden}
#monthly .client-dashboard{display:grid;grid-template-columns:190px minmax(0,1fr)}
#monthly .client-sidebar{padding:24px 14px;background:#e9effd;border-right:1px solid #c5d2e8}
#monthly .client-brand{padding:0 10px 24px}
#monthly .client-brand .original-logo-crop{width:133px}
#monthly .client-brand>span:last-child{display:block;margin-top:12px;color:#526580;font-size:13px}
#monthly .client-menu{list-style:none;margin:0;padding:0;display:grid;gap:7px}
#monthly .client-menu li{display:flex;align-items:center;gap:9px;padding:10px 9px;font-size:14px;line-height:1.4;color:#526580;border:1px solid transparent;border-radius:7px 7px 12px 7px}
#monthly .client-menu li>span{width:17px;flex-shrink:0;text-align:center;font-size:19px;line-height:1;color:#194bea}
#monthly .client-menu .is-selected{background:white;color:#0b2349;font-weight:600;border-color:#0b2349;box-shadow:3px 3px 0 #cedcf6}
#monthly .client-main{min-width:0;padding:24px;background:#f8faff}
#monthly .client-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px}
#monthly .client-header h3{font:600 27px/1.2 'Bricolage Grotesque',Arial,sans-serif;letter-spacing:-.025em;margin:0 0 7px;color:#0b2349}
#monthly .client-header p{font-size:14px;line-height:1.5;color:#526580;margin:0;max-width:470px}
#monthly .monthly-example-badge{font-size:12px;line-height:1.4;color:#526580;background:#fff;border:1px solid #c5d2e8;border-radius:7px;padding:6px 8px;white-space:nowrap}
#monthly .client-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
#monthly .client-panel{min-width:0;padding:18px;background:#fff;border:1px solid #c5d2e8;border-radius:11px 11px 19px 11px}
#monthly .client-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
#monthly .client-panel h4{font:600 17px/1.3 'DM Sans',Arial,sans-serif;color:#0b2349;margin:0;letter-spacing:-.015em}
#monthly .monthly-icon{display:block;flex:0 0 35px;height:35px;background-image:url('assets/signals-icons.png');background-size:200% 200%;background-repeat:no-repeat;mix-blend-mode:multiply}
#monthly .icon-opportunity{background-position:100% 0}
#monthly .icon-follow{background-position:100% 100%}
#monthly .icon-visibility{background-position:0 0}
#monthly .client-opportunities{border-color:#0b2349;box-shadow:3px 4px 0 #dbe6fb}
#monthly .client-main-value{display:flex;align-items:baseline;gap:8px 12px;flex-wrap:wrap;color:#526580;font-size:14px;line-height:1.4;margin:6px 0 14px}
#monthly .client-main-value>strong{font:600 52px/1 'Bricolage Grotesque',Arial,sans-serif;letter-spacing:-.04em;color:#194bea}
#monthly .client-main-value .client-reminder{margin-left:auto;padding:5px 7px;background:#fff1e5;color:#994314;border-radius:5px;font-size:12px}
#monthly .client-statuses{display:flex;gap:12px 18px;flex-wrap:wrap;font-size:14px;line-height:1.5;color:#526580;margin-top:25px}
#monthly .client-statuses b{color:#0b2349}
#monthly .client-contacts,#monthly .client-action-list,#monthly .client-positions,#monthly .client-google-metrics{list-style:none;margin:0;padding:0}
#monthly .client-contacts li{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid #e5ebf5;font-size:13px;line-height:1.4;color:#0b2349}
#monthly .client-contacts li>span:last-child{color:#526580}
#monthly .client-trend{font:600 22px/1.25 'Bricolage Grotesque',Arial,sans-serif;color:#194bea;margin:8px 0 18px}
#monthly .client-trend>span{color:#c25816}
#monthly .client-google-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;font-size:13px;line-height:1.5;color:#526580}
#monthly .client-google-metrics li{padding-left:9px;border-left:2px solid #d0ddf4}
#monthly .client-priorities{background:#fff5ec;border-color:#dfa87d;box-shadow:3px 4px 0 #ffdec4}
#monthly .client-action-count{display:grid;place-items:center;width:30px;height:30px;border:1px solid #0b2349;border-radius:48% 43% 45% 39%;transform:rotate(-7deg);background:#ff742b;font-size:13px;color:#0b2349;box-shadow:2px 2px 0 #0b2349}
#monthly .client-action-list{display:grid;gap:10px}
#monthly .client-action-list li{display:flex;gap:9px;font-size:14px;line-height:1.4;color:#0b2349}
#monthly .client-action-list li>span{font-size:13px;flex:0 0 19px;height:19px;display:grid;place-items:center;border:1px solid #d0a17f;border-radius:5px;color:#ae5118;background:#fff}
#monthly .client-action-total{font-size:13px;font-weight:600;color:#994314;border-top:1px solid #f0d5c0;padding-top:12px;margin:14px 0 0}
#monthly .client-secondary{background:#fff}
#monthly .client-secondary h4{font-size:15px}
#monthly .client-small-label{font-size:12px;line-height:1.4;color:#687a93}
#monthly .client-site-trend{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:13px;color:#526580}
#monthly .client-site-trend svg{width:45%;max-width:170px;height:36px;fill:none;flex-shrink:0}
#monthly .client-chart-base{stroke:#d5dfef;stroke-width:1}
#monthly .client-chart-line{stroke:#194bea;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#monthly .client-site-row{display:flex;justify-content:space-between;border-block:1px solid #e5ebf5;padding:7px 0;color:#526580;font-size:13px}
#monthly .client-site-mark{color:#194bea}
#monthly .client-pages{display:grid;gap:4px;margin:9px 0 0;font-size:13px;line-height:1.4;color:#526580}
#monthly .client-pages strong{font-weight:500;color:#0b2349}
#monthly .client-positions li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #e5ebf5;font-size:13px;line-height:1.4;color:#526580}
#monthly .client-positions li:last-child{border-bottom:0}
#monthly .client-positions li>span:last-child{color:#194bea;font-size:17px;line-height:1}
#monthly .monthly-overview figcaption{padding:14px 24px;border-top:1px solid #c5d2e8;font-size:13px;line-height:1.5;color:#526580;background:#fff}
#monthly .monthly-observation{max-width:880px;text-align:center;margin:28px auto 0}
#monthly .monthly-observation h3{font:600 24px/1.25 'Bricolage Grotesque',Arial,sans-serif;color:#0b2349;margin:0 0 12px;letter-spacing:-.025em}
#monthly .monthly-observation p{font-size:16px;line-height:1.6;color:#526580;margin:0}
#monthly .monthly-conclusion{max-width:880px;margin:24px auto 0;padding:14px 18px;border-left:3px solid #ff742b;background:#f6f8fc;font-size:17px;line-height:1.6;color:#526580}
#monthly .monthly-conclusion strong{color:#0b2349}
@media(prefers-reduced-motion:no-preference){
 #monthly .monthly-overview.is-visible .client-main-value{animation:monthly-arrive .55s both}
 #monthly .monthly-overview.is-visible .client-follow .client-main-value{animation-delay:.15s}
 #monthly .monthly-overview.is-visible .client-action-list{animation:monthly-arrive .55s .3s both}
}
@keyframes monthly-arrive{from{opacity:.3;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1050px){
 #monthly .client-dashboard{grid-template-columns:160px minmax(0,1fr)}
 #monthly .client-sidebar{padding:20px 10px}
 #monthly .client-brand{padding-inline:4px}
 #monthly .client-menu li{font-size:13px;padding-inline:6px;gap:6px}
 #monthly .client-main{padding:18px}
 #monthly .client-header{flex-wrap:wrap}
 #monthly .client-main-value .client-reminder{margin-left:0}
}
@media(max-width:760px){
 #monthly .client-dashboard{grid-template-columns:1fr}
 #monthly .client-sidebar{padding:16px;border-right:0;border-bottom:1px solid #c5d2e8}
 #monthly .client-brand{display:flex;justify-content:space-between;align-items:center;padding:0 0 14px;gap:10px}
 #monthly .client-brand>span:last-child{margin:0}
 #monthly .client-menu{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
 #monthly .client-menu li{font-size:12px;padding:7px 5px;gap:5px}
 #monthly .client-menu li>span{font-size:15px;width:14px}
 #monthly .client-grid{gap:12px}
 #monthly .client-panel{padding:16px}
}
@media(max-width:600px){
 #monthly.monthly-summary{padding:40px 20px 40px 16px}
 #monthly .monthly-heading{text-align:center;margin-bottom:26px}
 #monthly .monthly-heading .eyebrow{justify-content:center}
 #monthly .monthly-heading h2{font-size:32px}
 #monthly .monthly-heading>p:not(.eyebrow){font-size:16px}
 #monthly .client-grid{grid-template-columns:1fr}
 #monthly .client-main{padding:16px}
 #monthly .client-header h3{font-size:25px}
 #monthly .client-panel-head h4{font-size:16px}
 #monthly .client-main-value .client-reminder{margin-left:auto}
 #monthly .client-statuses{margin-top:14px}
 #monthly .monthly-overview figcaption{padding:14px 16px}
 #monthly .monthly-observation{text-align:left}
 #monthly .monthly-observation h3{font-size:23px}
 #monthly .monthly-conclusion{font-size:16px;padding:12px 14px}
}
@media(max-width:380px){
 #monthly .client-menu{grid-template-columns:repeat(2,minmax(0,1fr))}
 #monthly .client-main{padding:12px}
 #monthly .client-panel{padding:14px}
 #monthly .client-main-value .client-reminder{margin-left:0}
}

/* Clickable overview navigation: retain all six cards and highlight the selection. */
#monthly .client-menu li{display:block;padding:0;border:0;background:none;box-shadow:none}
#monthly .client-menu-button{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:10px 8px;border:1px solid transparent;border-radius:7px 7px 12px 7px;background:transparent;color:#526580;font:500 14px/1.4 'DM Sans',Arial,sans-serif;text-align:left;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
#monthly .client-menu-button svg{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:#194bea;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
#monthly .client-menu-button .menu-accent{fill:#ff742b;stroke:#0b2349}
#monthly .client-menu-button:hover{background:#fff;color:#194bea}
#monthly .client-menu-button:hover svg{transform:rotate(-6deg) translateY(-1px)}
#monthly .client-menu-button[aria-pressed=true]{background:#194bea;color:white;border-color:#0b2349;box-shadow:3px 3px 0 #c4d5fb}
#monthly .client-menu-button[aria-pressed=true] svg{stroke:white}
#monthly .client-menu-button:focus-visible{outline:3px solid #ff742b;outline-offset:3px}
#monthly .client-panel{scroll-margin-top:110px;transition:border-color .25s,background .25s,box-shadow .25s}
#monthly .monthly-overview{scroll-margin-top:110px}
#monthly .has-selection .client-panel:not(.is-selected){background:#f4f7fc;box-shadow:none}
#monthly .client-panel.is-selected{border-color:#0b2349;box-shadow:inset 4px 0 #ff742b,4px 5px 0 #dbe6fb}
#monthly .client-panel:focus-visible{outline:3px solid #194bea;outline-offset:3px}
#monthly .monthly-icon{transition:transform .25s}
#monthly .client-panel:hover .monthly-icon{transform:translateY(-3px) rotate(-5deg)}
#monthly .client-signal-dots{display:flex;gap:8px;margin-top:16px}
#monthly .client-signal-dots i{display:block;width:11px;height:11px;border:1px solid #a8b9d5;border-radius:50%;background:#e9effd}
#monthly .client-signal-dots i:nth-child(-n+3){background:#ff742b;border-color:#0b2349}
@media(prefers-reduced-motion:no-preference){
 #monthly .is-animating .client-main-value{animation:monthly-arrive .45s both}
 #monthly .is-animating .client-signal-dots i{animation:client-dot-in .4s var(--item-delay,0ms) both}
 #monthly .is-animating .client-action-list li,
 #monthly .is-animating .client-positions li,
 #monthly .is-animating .client-contacts li{animation:monthly-arrive .4s var(--item-delay,0ms) both}
 #monthly .is-animating .client-chart-line{stroke-dasharray:200;animation:client-draw 1.1s ease-out both}
 #monthly .is-animating .client-trend>span{display:inline-block;animation:client-arrow .6s ease-out both}
}
@keyframes client-dot-in{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes client-draw{from{stroke-dashoffset:200}to{stroke-dashoffset:0}}
@keyframes client-arrow{from{opacity:.3;transform:translate(-4px,4px)}to{opacity:1;transform:translate(0,0)}}
@media(max-width:1050px){#monthly .client-menu-button{font-size:13px;padding:9px 5px;gap:6px}#monthly .client-menu-button svg{width:18px;height:18px;flex-basis:18px}}
@media(max-width:760px){#monthly .client-menu-button{font-size:12px;min-height:48px;padding:7px 5px;gap:5px}#monthly .client-menu-button svg{width:16px;height:16px;flex-basis:16px}}
@media(prefers-reduced-motion:reduce){#monthly .client-menu-button,#monthly .client-menu-button svg,#monthly .client-panel,#monthly .monthly-icon{transition:none}#monthly .client-menu-button:hover svg,#monthly .client-panel:hover .monthly-icon{transform:none}}

/* Illustrative monthly figures: keep totals and changes clearly distinct. */
#monthly .client-google-metrics li{display:grid;gap:3px}
#monthly .client-google-metrics strong{font:600 24px/1.15 'Bricolage Grotesque',Arial,sans-serif;color:#194bea;font-variant-numeric:tabular-nums}
#monthly .client-visitors{display:grid;gap:3px;padding:3px 0 12px}
#monthly .client-visitors strong{font:600 32px/1.1 'Bricolage Grotesque',Arial,sans-serif;color:#194bea;font-variant-numeric:tabular-nums}
#monthly .client-visitors small{font-size:12px;line-height:1.4;color:#526580}
#monthly .client-site-trend svg{width:35%}
#monthly .client-site-row{align-items:center}
#monthly .client-site-row strong{font-size:20px;font-weight:600}
#monthly .client-pages>div{display:flex;justify-content:space-between;gap:10px}
#monthly .client-pages>div>span{flex-shrink:0;color:#526580}
#monthly .client-rank-context{font-size:12px;line-height:1.4;color:#687a93;margin:0 0 8px}
#monthly .client-positions li{align-items:center}
#monthly .client-positions .client-rank{display:grid;gap:4px;text-align:right;flex-shrink:0;line-height:1.3}
#monthly .client-rank strong{font:600 22px/1.1 'Bricolage Grotesque',Arial,sans-serif;color:#0b2349;font-variant-numeric:tabular-nums}
#monthly .client-rank sup{font-size:12px}
#monthly .client-rank small{font-size:12px;color:#194bea;line-height:1.4}
#monthly .client-rank small.is-stable{color:#526580}