.system-overview{padding:60px 36px 55px;background:#f8faff;border-top:1px solid #e5ebf5;color:#10254b;scroll-margin-top:20px}
.system-heading{text-align:center;max-width:940px;margin:0 auto 30px}.system-heading .eyebrow{font-size:12px;margin:0 0 16px}.system-heading h2{font:650 clamp(30px,3vw,43px)/1.12 'DM Sans',Arial,sans-serif;letter-spacing:-.045em;margin:0 0 18px}.system-heading>p:last-child{font-size:16px;line-height:1.6;color:#63728b;margin:0}
.benefit-tabs{max-width:1120px;margin:0 auto;display:flex;justify-content:space-between;gap:18px;border-bottom:1px solid #cfdcf1;overflow-x:auto;padding:4px 4px 0}
.benefit-tabs button{flex:1;white-space:nowrap;border:0;border-bottom:3px solid transparent;background:none;padding:18px 8px;font-size:15px;font-weight:600;color:#65738c;transition:color .15s,border-color .15s}.benefit-tabs button[aria-selected=true]{color:#164bd8;border-bottom-color:#164bd8}.benefit-tabs button:focus-visible{outline:2px solid #ef8047;outline-offset:-3px;border-radius:4px}
.benefit-panels{max-width:1120px;margin:auto}.benefit-panel{display:grid;grid-template-columns: .8fr 1.2fr;gap:42px;align-items:center;min-height:425px;padding:30px 0 0}.benefit-panel[hidden]{display:none}.benefit-panel:focus-visible{outline-offset:6px}
.benefit-copy h3{font:650 34px/1.1 'DM Sans',Arial,sans-serif;letter-spacing:-.04em;margin:0 0 20px}.benefit-pillars{display:flex;flex-direction:column;gap:9px;margin-bottom:21px}.benefit-pillars span{font-size:13px;line-height:1.4;font-weight:700;color:#164bd8;border-left:3px solid #f28a51;padding-left:10px}.benefit-copy>p{font-size:17px;line-height:1.6;color:#52647e;margin:0}.benefit-copy .benefit-responsibility{font-size:13px;line-height:1.6;margin-top:20px;padding-top:15px;border-top:1px solid #dde6f4}
.benefit-demo{position:relative;min-height:365px;isolation:isolate;padding:20px 20px 35px;display:flex;align-items:center;justify-content:center}.benefit-caption{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:10px;color:#8693a8}.benefit-demo img{object-fit:cover;display:block}.benefit-demo p{margin:0}.benefit-demo .platform-logo{width:25px;height:25px}.benefit-demo-0{gap:20px;align-items:flex-start;padding-top:5px}
.benefit-source{width:40%;margin-top:22px;transform:rotate(-4deg)}.benefit-source>span{font-size:9px;color:#76869e;letter-spacing:.04em;display:block;margin-bottom:10px}.benefit-source img{width:100%;height:155px;border:6px solid white;box-shadow:0 10px 22px #19376718}.benefit-source strong{font-size:12px;display:block;margin-top:10px;line-height:1.4}
.benefit-post{width:48%;background:white;border:1px solid #dce4ef;border-radius:10px;padding:10px;box-shadow:0 14px 28px #203f7216;transform:rotate(3deg)}.benefit-post>div{display:flex;align-items:center;gap:7px;margin-bottom:10px}.benefit-post b{font-size:10px;flex:1}.benefit-post img{width:100%;height:175px;border-radius:4px}.benefit-post>strong{display:block;font-size:12px;margin:12px 0 6px}.benefit-post p{font-size:11px;color:#758299}
.benefit-google{position:absolute;bottom:40px;left:12px;right:40px;display:flex;align-items:center;gap:14px;padding:15px 20px;border:1px solid #d9e2ef;border-radius:30px;background:white;box-shadow:0 7px 18px #173d7712}.benefit-google b{font-size:13px}.benefit-google p{font-size:11px;color:#6a7c94;margin-top:5px}
.benefit-site{width:100%;border:1px solid #d6e1f1;border-radius:9px;overflow:hidden;background:white;box-shadow:0 15px 24px #203f7210}.benefit-site-nav{padding:13px 16px;background:#eef3fb;font-size:12px;font-weight:700}.benefit-site-nav>span{float:right;font-size:8px;font-weight:400}.benefit-site-body{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:18px}.benefit-site h4{font:650 21px/1.18 'DM Sans',sans-serif;letter-spacing:-.035em;margin:10px 0 18px}.benefit-site img{width:100%;height:140px;border-radius:4px}.benefit-contact-label{background:#164bd8;color:white;border-radius:5px;padding:8px 10px;font-size:10px}.benefit-contact-options{display:flex;gap:10px;padding:12px 18px;border-top:1px solid #e2e9f4}.benefit-contact-options span{font-size:10px;color:#164bd8}.benefit-contact-options span:last-child{color:#168359}
.benefit-review{position:absolute;right:4px;bottom:39px;width:200px;background:#fffaf5;border:1px solid #edd9ca;box-shadow:0 8px 20px #6642240a;padding:15px;border-radius:7px;transform:rotate(3deg)}.benefit-review b,.benefit-review>span{display:block;font-size:12px;margin-bottom:7px}.benefit-review>span{font-size:10px;line-height:1.4;color:#8b7461}.benefit-review i{display:block;background:#eddfd4;height:4px;margin:7px 0}.benefit-review i:last-of-type{width:75%}.benefit-review small{font-size:9px;color:#947d69}
.benefit-demo-2{flex-direction:column;align-items:stretch;padding:20px 22px 35px}.benefit-notification{align-self:flex-start;background:#164bd8;color:white;border-radius:8px 8px 8px 0;padding:13px 17px;font-size:13px;margin:0 0 14px -8px;box-shadow:0 6px 14px #164bd81f}.benefit-dot{display:inline-block;width:7px;height:7px;background:#f79b67;border-radius:50%;margin-right:8px}.benefit-record{background:white;border:1px solid #d9e4f5;border-left:4px solid #164bd8;padding:22px;border-radius:0 9px 9px 0}.benefit-record-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.benefit-record-heading strong{font-size:15px}.benefit-record-heading span{font-size:11px;background:#fff0e4;color:#a55c2f;padding:6px 8px;border-radius:4px}.benefit-record dl{margin:15px 0}.benefit-record dl>div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #edf0f6;padding:10px 0;font-size:12px}.benefit-record dt{color:#7a8aa0}.benefit-record dd{margin:0;text-align:right}.benefit-handoff{font-size:11px;color:#5c7291;line-height:1.5}
.benefit-dashboard{width:100%;background:white;border:1px solid #dce4f1;border-radius:8px;overflow:hidden;box-shadow:0 12px 24px #1739600c}.benefit-dashboard-top{background:#112d64;color:white;padding:19px;display:flex;justify-content:space-between;align-items:center}.benefit-dashboard-top strong{font-size:15px}.benefit-dashboard-top>span{font-size:10px;color:#b3c7ed}.benefit-dashboard-row{display:flex;align-items:center;gap:15px;margin:0 18px;padding:22px 0;border-bottom:1px solid #e5ebf4}.benefit-dashboard-row:last-child{border:0}.benefit-dashboard-row>span{font:600 20px 'DM Sans',sans-serif;color:#93acd5}.benefit-dashboard-row b{font-size:13px}.benefit-dashboard-row p{font-size:11px;color:#73849d;margin-top:6px}.benefit-dashboard-row em{margin-left:auto;font-size:9px;color:#6882a8;font-style:normal}.benefit-dashboard-row:last-child>span{color:#f28a51}
@media(max-width:850px){.system-overview{padding:45px 24px}.system-heading h2{font-size:34px}.system-heading br{display:none}.benefit-panel{grid-template-columns:1fr;gap:22px;padding-top:28px}.benefit-copy h3{font-size:29px}.benefit-pillars{flex-direction:row;flex-wrap:wrap;gap:12px}.benefit-demo{max-width:600px;width:100%;margin:auto}.benefit-tabs button{font-size:14px;padding:15px 12px}.benefit-tabs{gap:5px;justify-content:flex-start}.benefit-tabs button{flex:none}}
@media(max-width:480px){.system-heading{text-align:left}.system-heading .eyebrow{max-width:none}.system-heading h2{font-size:31px}.system-heading>p:last-child,.benefit-copy>p{font-size:15px}.benefit-demo{padding-left:0;padding-right:0;min-height:350px}.benefit-demo-0{gap:12px}.benefit-source{width:43%}.benefit-source img{height:139px}.benefit-source>span{font-size:8px}.benefit-post{width:51%;padding:7px}.benefit-post img{height:153px}.benefit-post b{font-size:8px}.benefit-post .platform-logo{width:18px;height:18px}.benefit-google{right:0;left:0;bottom:42px;padding:13px}.benefit-site h4{font-size:17px}.benefit-site-nav>span{font-size:7px}.benefit-site-body{padding:12px;gap:8px}.benefit-review{width:170px;right:0;bottom:30px}.benefit-record{padding:16px}.benefit-record-heading strong{font-size:13px}.benefit-dashboard-top{padding:14px}.benefit-dashboard-row{gap:9px;margin:0 12px}.benefit-dashboard-row em{display:none}.benefit-caption{font-size:9px}.benefit-notification{margin-left:0}}
@media(prefers-reduced-motion:reduce){.system-overview *{transition:none!important;animation:none!important}}

/* Recognisable Google review presentation; illustrative, never customer proof. */
#system .benefit-review{background:#fff;border-color:#dadce0;box-shadow:0 8px 24px #20212412;transform:none;border-radius:10px;padding:15px}
#system .benefit-review-top{display:flex;align-items:center;gap:8px;margin-bottom:14px}
#system .benefit-review-top .platform-logo{width:22px;height:22px}
#system .benefit-review-top b{font-size:13px;font-weight:600;color:#202124;margin:0}
#system .benefit-review-top>span:last-child{margin-left:auto;color:#5f6368;font-size:18px}
#system .benefit-review-profile{display:flex;align-items:center;gap:9px;margin-bottom:10px}
#system .benefit-review-avatar{display:grid;place-items:center;flex:0 0 30px;height:30px;border-radius:50%;background:#e8f0fe;color:#1967d2}
#system .benefit-review-avatar svg{width:18px;height:18px}
#system .benefit-review-profile b{font-size:12px;color:#202124;margin:0 0 3px;font-weight:600}
#system .benefit-review-profile div>span{font-size:10px;color:#5f6368}
#system .benefit-review-stars{display:flex;align-items:center;gap:8px;margin-bottom:10px}
#system .benefit-review-stars>span{color:#f9ab00;font-size:18px;letter-spacing:1px;line-height:1}
#system .benefit-review-stars small{color:#5f6368;font-size:9px}
#system .benefit-review i{background:#e8eaed;height:4px;margin:7px 0}
#system .benefit-review-note{display:block;font-size:10px;line-height:1.4;color:#5f6368;margin-top:11px}

/* A tangible enquiry file, with a distinct next-action area. */
#system .benefit-demo-2{padding:20px 16px 38px}
#system .benefit-demo-2 svg{width:20px;height:20px;flex-shrink:0}
#system .benefit-notification{display:flex;align-items:center;gap:9px;margin:0 0 16px 12px;padding:10px 14px;background:#fff;color:#234674;border:1px solid #d7e2f2;border-radius:24px;box-shadow:0 4px 12px #18376509;font-size:12px}
#system .benefit-notification svg{color:#e86e2c}
#system .benefit-record{position:relative;border:1px solid #cfdaeb;border-top:4px solid #164bd8;border-radius:12px;padding:0;background:white;box-shadow:0 14px 32px #18376510}
#system .benefit-record-heading{padding:20px;align-items:flex-start;border-bottom:1px solid #e4eaf3}
#system .request-title{display:flex;align-items:center;gap:11px;min-width:0}
#system .request-title strong{font-size:15px;line-height:1.35;max-width:210px}
#system .benefit-record-heading .request-icon{display:grid;place-items:center;padding:0;flex:0 0 38px;height:42px;background:#edf3ff;color:#164bd8;border-radius:7px}
#system .benefit-record-heading .request-status{white-space:nowrap;border:1px solid #f6d0b5;border-radius:20px;background:#fff4eb;color:#9a4616;font-size:11px;padding:5px 9px;margin-top:7px}
#system .benefit-record dl{margin:0;padding:4px 20px 18px}
#system .benefit-record dl>div{align-items:center;padding:14px 0;font-size:12px}
#system .benefit-record dt{color:#687b94}
#system .benefit-record dd{display:flex;align-items:center;justify-content:flex-end;gap:7px;color:#18365d;font-weight:500}
#system .benefit-record dd svg{width:17px;height:17px;color:#597caa}
#system .benefit-record dl>.request-next{display:block;margin-top:15px;padding:15px 17px;border:1px solid #d4e2fc;border-left:3px solid #164bd8;border-radius:7px;background:#edf3ff}
#system .request-next dt{font-size:11px;margin-bottom:7px;color:#55729b}
#system .request-next dd{justify-content:space-between;text-align:left;color:#164bd8;font-size:16px;font-weight:600}
#system .request-next dd svg{width:22px;height:22px;color:#164bd8}
#system .benefit-handoff{display:flex;align-items:center;gap:9px;background:#f8faff;border-top:1px solid #e4eaf3;border-radius:0 0 12px 12px;padding:13px 20px;font-size:11px}
#system .benefit-handoff svg{color:#6981a1}
@media(max-width:480px){#system .benefit-demo-2{padding:12px 0 42px}#system .benefit-record-heading{padding:16px 12px;gap:8px;flex-wrap:wrap}#system .request-title strong{font-size:14px;max-width:180px}#system .benefit-record dl{padding:0 12px 14px}#system .benefit-handoff{padding:12px}#system .benefit-notification{margin-left:0}}

/* Editorial work log: completed work, observation, then the next priority. */
#system .benefit-demo-3 .benefit-dashboard{overflow:visible;background:transparent;border:0;box-shadow:none}
#system .benefit-demo-3 .benefit-dashboard-top{padding:0 0 17px;background:transparent;color:#10254b;border-bottom:1px solid #d4deee;gap:12px}
#system .benefit-demo-3 .benefit-dashboard-top strong{font-size:17px}
#system .benefit-demo-3 .benefit-dashboard-top>span{color:#637b9b;font-size:11px}
#system .progress-notes{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-top:19px;position:relative}
#system .progress-note{position:relative;padding:16px;border:1px solid;border-radius:10px;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
#system .progress-done{background:#fff;border-color:#d5e7df;box-shadow:0 5px 15px #17396007}
#system .progress-observed{background:#fff8ef;border-color:#efd9b9}
#system .progress-note-label{display:flex;align-items:center;gap:8px;width:100%;color:#314c70}
#system .progress-note-label b{font-size:12px;font-weight:600}
#system .progress-symbol{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#e8f5ee;color:#22815c;flex-shrink:0}
#system .progress-symbol svg{width:16px;height:16px}
#system .progress-observed .progress-symbol{background:#ffebcc;color:#ac681e}
#system .progress-index{margin-left:auto;font-size:10px;color:#8392a5}
#system .progress-note p{font-size:15px;line-height:1.45;font-weight:500;margin:13px 0;color:#18365d}
#system .progress-note em,#system .progress-next em{font-size:10px;font-style:normal;color:#6f8398;margin-top:auto}
#system .progress-observed em{color:#986025;padding:5px 8px;border-radius:4px;background:#ffefd7}
#system .progress-page{position:relative;width:87px;height:59px;border:1px solid #dce5e0;border-radius:4px;background:white;padding:8px;margin:0 0 12px;box-shadow:3px 3px 0 #edf4f0}
#system .progress-page>span{display:block;background:#b8d7c8;height:9px;margin-bottom:6px}
#system .progress-page i{display:block;background:#e2eae6;height:3px;margin:4px 0;width:85%}
#system .progress-page i:last-of-type{width:55%}
#system .progress-page b{position:absolute;right:-7px;bottom:-5px;display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#23805c;color:white;font-size:13px;border:2px solid white}
#system .progress-next{grid-column:1/-1;display:flex;gap:13px;align-items:flex-start;padding:18px;background:#163e91;color:white;border-radius:10px;border-left:4px solid #f28a51;box-shadow:0 8px 20px #17396012}
#system .progress-next>div{flex:1;min-width:0}
#system .progress-next-icon{width:29px;height:29px;display:grid;place-items:center;border:1px solid #6e8fc6;border-radius:50%;font-size:21px;flex-shrink:0}
#system .progress-next .progress-note-label{color:#dbe7ff}
#system .progress-next .progress-index{color:#a7bee6}
#system .progress-next p{font-size:16px;line-height:1.4;font-weight:600;margin:8px 0 10px}
#system .progress-next em{color:#baceef}
@media(max-width:480px){#system .benefit-demo-3{padding:10px 0 40px}#system .progress-notes{gap:10px}#system .progress-note{padding:12px}#system .progress-note-label{flex-wrap:wrap;gap:6px}#system .progress-note p{font-size:13px}#system .progress-note-label b{font-size:11px}#system .progress-index{display:none}#system .progress-next{padding:15px 12px}#system .progress-next p{font-size:14px}}
/* Keep every benefit tab visible and touch-accessible on mobile. */
@media(max-width:700px){
 #system .benefit-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:visible;border:0;padding:4px}
 #system .benefit-tabs button{min-width:0;min-height:48px;white-space:normal;line-height:1.35;font-size:14px;padding:12px 8px;border:1px solid #cfdcf1;border-radius:9px;background:#fff;color:#52647e;cursor:pointer}
 #system .benefit-tabs button[role=tab][aria-selected=true]{background:#164bd8;border-color:#164bd8;color:#fff}
}