/* Systems showcase: one diagram language used three times (and by the About loop and the offers).
   Systems are glass nodes, connections are glass conduits, the Sixlinked core holds the rules and the approval.
   Signal is used only for the live pulse and the active state. Light comes from above (D2); two-part shadows (D3). */
.systems{--sys-ink:#e9f0e4;--sys-muted:#c3d2c0;--sys-quiet:#c0d1bd;--sys-rim:#d3ecbd}
.systems-intro{container-type:inline-size;max-width:860px}
.systems h2{font-size:clamp(27px,9.5cqw,58px)}
.systems-tabs{display:flex;gap:6px;margin-top:56px;border-bottom:1px solid #b3d3bb1f}
.systems-tabs [role=tab]{position:relative;display:flex;align-items:baseline;gap:12px;padding:16px 26px 18px 2px;margin-right:30px;border:0;background:none;color:var(--muted);font:500 20px/1.2 Instrument,Arial,sans-serif;letter-spacing:-.01em;cursor:pointer;transition:color .25s}
.systems-tabs [role=tab]:hover{color:#dfe9da}
.systems-tabs [role=tab][aria-selected=true]{color:var(--sys-ink)}
.systems-tabs [role=tab]:after{content:'';position:absolute;left:0;right:26px;bottom:-1px;height:2px;border-radius:2px;background:var(--signal);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.3,.7,.2,1)}
.systems-tabs [role=tab][aria-selected=true]:after{transform:scaleX(1)}
.systems-tabs [role=tab]:focus-visible{outline:2px solid var(--sage);outline-offset:4px;border-radius:4px}
.sys-tab-n{font:500 11px/1 Inter,Arial,sans-serif;letter-spacing:.14em;color:var(--sys-quiet)}
.sys-panel{padding-top:34px;outline:none}
.sys-panel[hidden]{display:none}
.sys-panel:focus-visible{outline:2px solid #b5c9ad66;outline-offset:8px;border-radius:6px}
.sys-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px}
.sys-summary{margin:0;max-width:560px;font:450 25px/1.32 Instrument,Arial,sans-serif;letter-spacing:-.02em;color:#dce5d4}
.sys-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}.sys-control{display:flex;flex-direction:column;gap:7px}.sys-control-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#c9d6c8;padding-left:4px}
.sys-switch{display:inline-flex;gap:3px;padding:4px;border:1px solid #b3d3bb2e;border-radius:9px;background:#71a4810b}
.sys-switch button{position:relative;border:0;border-radius:6px;background:none;color:var(--muted);font-size:13px;line-height:1.4;padding:9px 16px;min-height:40px;cursor:pointer;transition:color .25s,background-color .25s}
.sys-switch button:hover{color:#dfe9da}
.sys-switch button[aria-pressed=true]{color:#eef7e9;background:#8a9d7124}
.sys-switch button:after{content:'';position:absolute;left:16px;right:16px;bottom:5px;height:1px;background:var(--signal);opacity:0;transition:opacity .25s}
.sys-switch button[aria-pressed=true]:after{opacity:1}
.sys-switch button:focus-visible{outline:2px solid var(--sage);outline-offset:2px}

/* The stage: a lit glass model. A faint measured grid gives the plane; everything sits a few px above it. */
.sys-stage{position:relative;margin-top:34px;height:600px;display:none;--px:0;--py:0;transition:height .6s cubic-bezier(.3,.7,.2,1)}
.sys-still.sys-stage,.sys-stage.sys-still{transition:none}
html.js .sys-stage{display:block}
.sys-stage:before{content:'';position:absolute;inset:-24px -12px;border-radius:24px;pointer-events:none;
 background:radial-gradient(ellipse 60% 70% at 50% 42%,#a8d0b00a,transparent 70%),radial-gradient(circle,#b9d6be1c 1px,transparent 1.3px) 0 0/24px 24px;
 -webkit-mask:radial-gradient(ellipse 72% 78% at 50% 50%,#000 40%,transparent 100%);mask:radial-gradient(ellipse 72% 78% at 50% 50%,#000 40%,transparent 100%);
 transform:translate(calc(var(--px)*-3px),calc(var(--py)*-2px))}
.sys-scene{position:absolute;inset:0;transform:translate(calc(var(--px)*3px),calc(var(--py)*2px))}
.sys-zones,.sys-nodes{position:absolute;inset:0}
.sys-zones{transform:translate(calc(var(--px)*-2px),calc(var(--py)*-1.5px))}
.sys-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sys-zone{position:absolute;left:0;top:0;border-radius:18px;border:1px solid #b9d9c01c;background:linear-gradient(180deg,#a7cdb00d,#a7cdb004);box-shadow:inset 0 1px #e4f4e40d;will-change:transform}
.sys-zone span{position:absolute;left:18px;top:11px;font-size:10.5px;line-height:1;letter-spacing:.16em;text-transform:uppercase;color:var(--sys-quiet)}

/* Conduits: an outer glass wall and a darker bore make a hollow tube with two thin bright edges. */
.sys-tube-wall{fill:none;stroke:#b6d6be;stroke-opacity:.26;stroke-width:7;stroke-linecap:round}
.sys-tube-bore{fill:none;stroke:#0a130f;stroke-opacity:.82;stroke-width:4.6;stroke-linecap:round}
.sys-tube-core{fill:none;stroke:#cfe8d2;stroke-opacity:.08;stroke-width:1}
.sys-tube.is-live .sys-tube-wall{stroke-opacity:.46}
.sys-tube.is-live .sys-tube-core{stroke:#c6f27c;stroke-opacity:.22}
.sys-port{fill:#0b1510;stroke:#cfe5d2;stroke-opacity:.5;stroke-width:1.2}
.sys-pulse-tail{fill:none;stroke:#c6f27c;stroke-width:2.4;stroke-linecap:round;stroke-opacity:.75}
.sys-pulse-glow{fill:url(#sys-glow)}
.sys-pulse-head{fill:#f3ffe1}

/* Nodes: an outer element carries position and shadow, the inner glass face carries the material and content. */
.sys-node{position:absolute;left:0;top:0;border-radius:13px;--answer:0;will-change:transform,opacity;
 box-shadow:0 1px 2px #02060466,0 14px 30px -10px #020604b3}
.sys-node[data-state=out]{visibility:hidden}
.sys-glass{position:relative;width:100%;height:100%;border-radius:13px;display:flex;align-items:center;gap:12px;padding:10px 14px 10px 12px;overflow:hidden;
 box-shadow:inset 0 0 0 1px rgb(211 236 189/calc(var(--answer)*.75)),inset 0 1px 0 rgb(240 250 230/calc(.05 + var(--answer)*.5)),inset 0 0 26px rgb(198 242 124/calc(var(--answer)*.10))}
.sys-icon{position:relative;flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,#c9e2cc1f,#0a130f33 70%);box-shadow:inset 0 0 0 1px #c3dcc72e,inset 0 1px 0 #eef8ec1a}
.sys-icon svg{width:19px;height:19px;fill:none;stroke:color-mix(in srgb,#f6fcef calc(var(--answer)*100%),#a9bea6);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.sys-icon:after{content:'';position:absolute;right:-1px;top:-1px;width:8px;height:8px;border-radius:50%;background:var(--signal);box-shadow:0 0 8px #c6f27c;opacity:0;transform:scale(.4);transition:opacity .3s,transform .3s}
.sys-node.is-active .sys-icon:after{opacity:1;transform:scale(1)}
.sys-text{display:grid;min-width:0;gap:3px}
.sys-label{font-size:14px;line-height:1.25;font-weight:500;color:var(--sys-ink)}
.sys-label[data-placement]{display:none}
.sys-stage[data-placement=on-site] .sys-label[data-placement=on-site],.sys-stage[data-placement=hybrid] .sys-label[data-placement=hybrid],.sys-stage[data-placement=cloud] .sys-label[data-placement=cloud]{display:block}
.sys-action{display:none;align-items:flex-start;gap:5px;font-size:11px;line-height:1.3;color:var(--sys-muted);opacity:0;transform:translateY(3px);transition:opacity .35s,transform .35s}
.sys-stage[data-variant=starter] .sys-action[data-variant=starter],.sys-stage[data-variant=mover] .sys-action[data-variant=mover],.sys-stage[data-variant=leaver] .sys-action[data-variant=leaver],.sys-stage[data-variant=default] .sys-action[data-variant=default]{display:flex}
.sys-node.is-done .sys-action{opacity:1;transform:none}
.sys-node[data-node=hr] .sys-action{opacity:1;transform:none}
.sys-tick{flex:none;width:12px;height:12px;margin-top:1px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sys-node.is-idle .sys-glass{opacity:.5}
/* Needs a person: the node keeps its light ink, gains an inner outline and a flag line. No warning colour. */
.sys-node:not(.is-manual) .sys-manual{display:none!important}
.sys-node.is-manual .sys-action:not(.sys-manual){display:none!important}
.sys-node.is-manual .sys-glass{outline:1px dashed #e3ecdfb3;outline-offset:-5px}
.sys-node.is-manual .sys-manual{color:#eef5ea}
.sys-flag{stroke-width:1.4}
/* Approval wording per variant, the urgent option and the Finance exception tray. */
.sys-stage:not([data-variant=starter]) .sys-approval [data-variant=starter],.sys-stage:not([data-variant=mover]) .sys-approval [data-variant=mover],.sys-stage:not([data-variant=leaver]) .sys-approval [data-variant=leaver],.sys-stage:not([data-variant=default]) .sys-approval [data-variant=default]{display:none!important}
.sys-urgent{margin-left:2px;padding:1px 7px;border-radius:999px;font-size:10.5px;line-height:1.5;color:#dfe9da;box-shadow:inset 0 0 0 1px #c3dcc766;white-space:nowrap}
.sys-approval{position:relative}
.sys-approval:has(.sys-exception){grid-template-columns:auto 1fr 30px auto}
.sys-approval:has(.sys-exception) .sys-approval-state{grid-column:4}
.sys-exception{position:relative;grid-column:3;grid-row:1/3;display:block;width:20px;height:24px;margin:4px 0 0 2px;pointer-events:none;opacity:0;transform:translateY(calc((1 - var(--ex,1))*-10px)) scale(calc(.6 + var(--ex,1)*.4));transition:opacity .25s}
.sys-exception[data-on=true]{opacity:1}
.sys-exception i{position:absolute;inset:0;border-radius:4px;background:#0f1a14;box-shadow:inset 0 0 0 1px #e3ecdfcc}
.sys-exception i:first-child{transform:translate(4px,-4px);opacity:.7}
.sys-exception i:last-child:after{content:'';position:absolute;left:5px;right:5px;top:8px;height:6px;border-top:1px solid #e3ecdf99;border-bottom:1px solid #e3ecdf99}
.sys-dash-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;color:var(--sys-muted)}
.sys-provisional{padding:1px 7px;border-radius:999px;color:#eef5ea;box-shadow:inset 0 0 0 1px #e3ecdfb3;opacity:0;transition:opacity .3s}
.sys-dash.is-provisional .sys-provisional{opacity:1}
.sys-sample{margin-left:auto;align-self:flex-start;padding:2px 8px;border-radius:999px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#d2ddcf;box-shadow:inset 0 0 0 1px #c3dcc74d;white-space:nowrap}
.sys-node[data-role=bridge] .sys-glass{justify-content:center;padding:6px 12px;gap:8px}
.sys-node[data-role=bridge] .sys-icon{width:26px;height:26px}.sys-node[data-role=bridge] .sys-icon svg{width:15px;height:15px}
.sys-node[data-role=bridge] .sys-label{font-size:12px;color:var(--sys-muted)}
.sys-node[data-role=source] .sys-glass{padding:14px 16px}

/* The core: the one element that is not a node. Lifted further, a brighter top edge, rules and the approval. */
.sys-core{border-radius:18px;box-shadow:0 2px 3px #02060480,0 26px 50px -14px #020604d9,0 0 0 1px #d9eed00f}
.sys-core .sys-glass{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:18px 20px 16px;border-radius:18px;
 box-shadow:inset 0 1px 0 #f2fbe92e,inset 0 0 0 1px rgb(211 236 189/calc(.10 + var(--answer)*.6)),inset 0 0 40px rgb(198 242 124/calc(var(--answer)*.08))}
.sys-core-head{display:flex;align-items:center;gap:8px;padding-bottom:14px;border-bottom:1px solid #c3dcc71f}
.sys-core-mark svg{display:block;width:21px;height:21px;color:var(--ink)}
.sys-core-brand{font:560 16px/1 Instrument,Arial,sans-serif;letter-spacing:-.01em;color:var(--ink)}
.sys-core-title{margin-left:auto;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--sys-quiet)}
.sys-rules{display:none;margin:12px 0 0;flex:1}
.sys-stage[data-variant=starter] .sys-rules[data-variant=starter],.sys-stage[data-variant=mover] .sys-rules[data-variant=mover],.sys-stage[data-variant=leaver] .sys-rules[data-variant=leaver],.sys-stage[data-variant=default] .sys-rules[data-variant=default]{display:block}
.sys-rule{position:relative;padding:6px 0 6px 12px}
.sys-rule:before{content:'';position:absolute;left:0;top:9px;bottom:9px;width:2px;border-radius:2px;background:#c3dcc733;transition:background-color .3s,box-shadow .3s}
.sys-rule.is-set:before{background:#d8e8d2b3}
.sys-rule.is-lit:before{background:var(--signal);box-shadow:0 0 8px #c6f27c80}
.sys-rule dt{font-size:10px;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:#d2ddcf;margin-bottom:4px}
.sys-rule dd{margin:0;font-size:13.5px;line-height:1.4;color:#dbe6d6;display:flex;flex-wrap:wrap;gap:5px}
.sys-chip{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;line-height:1.5;color:#dfe9da;background:#9fc4a612;box-shadow:inset 0 0 0 1px #c3dcc72e}
.sys-approval{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px 10px;margin-top:10px;padding:10px 12px;border-radius:10px;background:#0a130f59;box-shadow:inset 0 0 0 1px #c3dcc724}
.sys-approval-icon{position:relative;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px #c3dcc740}
.sys-approval-icon svg{width:16px;height:16px;fill:none;stroke:#d7e5d2;stroke-width:1.3;stroke-linecap:round}
.sys-approval-icon:after{content:'';position:absolute;inset:-4px;border-radius:50%;box-shadow:0 0 0 1.5px var(--signal);opacity:0;transform:scale(.85)}
.sys-approval[data-state=wait] .sys-approval-icon:after{animation:sys-wait 1.1s ease-in-out infinite}
.sys-still .sys-approval[data-state=wait] .sys-approval-icon:after{animation:none;opacity:1;transform:none}
@keyframes sys-wait{0%{opacity:0;transform:scale(.85)}45%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.15)}}
.sys-approval-label{font-size:13px;line-height:1.35;color:#dbe6d6}
.sys-approval-icon{grid-row:1/3}
.sys-approval-state{grid-column:3;grid-row:1/3}
.sys-urgent{grid-column:2;grid-row:2;justify-self:start}
.sys-approval-state{margin-left:auto;display:grid;justify-items:end;font-size:12px;color:var(--sys-muted)}
.sys-approval-state>span{grid-area:1/1;display:flex;align-items:center;gap:5px;opacity:0;transition:opacity .3s}
.sys-approval[data-state=wait] [data-state=wait],.sys-approval[data-state=done] [data-state=done]{opacity:1}
.sys-approval[data-state=wait] [data-state=wait]{color:#e6f2dc}
.sys-approval[data-state=done] [data-state=done]{color:#dfe9da}

/* Panels drawn as small real interfaces: the reporting dashboard and the employee form. */
.sys-dash .sys-glass,.sys-form .sys-glass{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:12px;padding:12px 14px 14px}
.sys-node-top{display:flex;align-items:center;gap:12px}
.sys-dash-grid{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sys-widget{display:flex;flex-direction:column;gap:6px;padding:8px 9px;border-radius:8px;background:#0a130f4d;box-shadow:inset 0 0 0 1px #c3dcc71c;min-width:0}
.sys-widget>span{font-size:10px;letter-spacing:.06em;color:var(--sys-quiet);white-space:nowrap}
.sys-widget svg{width:100%;height:34px;overflow:visible}
.sys-line{fill:none;stroke:#d6ecc8;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.sys-line-area{fill:#c9e6b014}
.sys-widget-wide{grid-column:1/-1}
.sys-bars{display:flex;align-items:flex-end;gap:4px;height:34px}
.sys-bars i{flex:1;border-radius:2px 2px 0 0;background:linear-gradient(#d6ecc8b3,#d6ecc84d);height:calc(var(--h,.3)*100%);transition:height .9s cubic-bezier(.3,.7,.2,1)}
.sys-bars.across{flex-direction:column;align-items:stretch;justify-content:center;gap:4px;height:auto}
.sys-bars.across i{flex:none;height:5px;border-radius:0 2px 2px 0;width:calc(var(--h,.3)*100%);transition:width .9s cubic-bezier(.3,.7,.2,1)}
.sys-form-body{display:grid;gap:8px}
.sys-field{display:grid;gap:3px;--typed:1}
.sys-field-label{font-size:10.5px;color:var(--sys-muted);letter-spacing:.04em}
.sys-field-box{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;height:28px;padding:0 9px;border-radius:6px;background:#0a130f66;box-shadow:inset 0 0 0 1px #c3dcc724}
.sys-field-value{font-size:12.5px;color:#e3ecdf;white-space:nowrap;clip-path:inset(0 calc((1 - var(--typed))*100%) 0 0)}
.sys-field .sys-tick{color:#dfe9da;opacity:0;transition:opacity .3s}
.sys-field.is-ok .sys-tick{opacity:1}
.sys-field.is-active .sys-field-box{box-shadow:inset 0 0 0 1px var(--signal)}
.sys-wrong{display:none}.sys-field[data-flag] .sys-wrong{display:inline;text-decoration:underline wavy #dfe9da99 1px;text-underline-offset:3px}.sys-field[data-flag] .sys-right{display:none}
.sys-field-flag{display:none;margin-left:auto;font-size:10.5px;line-height:1;color:#eef5ea;white-space:nowrap}
.sys-field[data-flag] .sys-field-flag{display:block}
.sys-field[data-flag] .sys-tick{display:none}
.sys-field[data-flag] .sys-field-box{box-shadow:inset 0 0 0 1px #e3ecdf99}
.sys-submit{justify-self:end;margin-top:2px;padding:4px 12px;border-radius:5px;font-size:11.5px;color:#dfe9da;box-shadow:inset 0 0 0 1px #c3dcc740}
.sys-exit{position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;font-size:12.5px;color:#dfe9da;box-shadow:inset 0 0 0 1px #c3dcc74d;background:#0a130f80;cursor:pointer;will-change:transform,opacity}
.sys-exit svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sys-exit:hover{color:#f0f8ea;box-shadow:inset 0 0 0 1px #c6f27c99}
.sys-exit.is-active{box-shadow:inset 0 0 0 1px var(--signal)}

/* Caption and steps. The active step is marked in Signal and fills over its length. */
.sys-foot{margin-top:24px}
.sys-caption-line{margin:0 0 18px;font-size:13px;color:var(--sys-muted)}
.sys-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,6),minmax(0,1fr));gap:14px}
.sys-steps[hidden]{display:none}
.sys-steps:has(>li:nth-child(5):last-child){--n:5}
.sys-step{position:relative;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;width:100%;height:100%;padding:16px 4px 4px 0;border:0;background:none;text-align:left;color:#b9c8b6;font-size:13px;line-height:1.5;cursor:pointer;transition:color .3s}
.sys-step:before{content:'';position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px;background:#b3d3bb24}
.sys-step:after{content:'';position:absolute;left:0;top:0;height:2px;width:calc(var(--p,0)*100%);border-radius:2px;background:var(--signal);opacity:0}
.sys-step[aria-current=step]{color:#eef5ea}
.sys-step[aria-current=step]:after{opacity:1}
.sys-step:hover{color:#e3ecdf}
.sys-step:focus-visible{outline:2px solid var(--sage);outline-offset:3px;border-radius:4px}
.sys-step-n{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:11px;color:#c9d6c6;box-shadow:inset 0 0 0 1px #c3dcc74d}
.sys-step[aria-current=step] .sys-step-n{color:#eef5ea;box-shadow:inset 0 0 0 1.5px var(--signal)}
.sys-handoff{margin-top:20px;padding:0;border:0;background:none;color:#dfe9da;font-size:13px;text-decoration:underline;text-decoration-color:#c6f27c99;text-underline-offset:5px;cursor:pointer}
.sys-handoff:hover{color:#f0f8ea}
.sys-handoff:focus-visible{outline:2px solid var(--sage);outline-offset:4px}
.sys-note{margin:34px 0 0;font-size:12px;color:#97ab98}

@media(max-width:899px){.sys-steps{grid-template-columns:1fr;gap:4px}.sys-step{padding:10px 0 10px 0}.sys-step:before,.sys-step:after{top:auto;bottom:0}}
@media(max-width:699px){
 .systems-tabs{margin-top:36px;gap:0;justify-content:space-between}
 .systems-tabs [role=tab]{flex:1;flex-direction:column;align-items:flex-start;gap:6px;margin:0;padding:12px 6px 14px 0;font-size:16px;min-height:48px}
 .systems-tabs [role=tab]:after{right:10px}
 /* Four flows: two rows of two, so no name breaks mid-phrase. */
 .systems-tabs{display:grid;grid-template-columns:1fr 1fr}
 .systems-tabs [role=tab]{text-align:left;flex-direction:row;align-items:baseline;gap:10px;white-space:nowrap}
 .sys-summary{font-size:19px}
 .sys-controls{width:100%}
 .sys-switch{width:100%}.sys-switch button{flex:1;padding:9px 6px;font-size:12.5px;min-height:44px}
 .sys-glass{gap:9px;padding:8px 10px 8px 9px}
 .sys-icon{width:30px;height:30px}.sys-icon svg{width:16px;height:16px}
 .sys-label{font-size:12.5px}
 .sys-action{font-size:10.5px}
 .sys-core .sys-glass{padding:14px 14px 12px}
 .sys-approval{gap:8px;padding:9px 10px}.sys-approval-label{font-size:12px;min-width:0}.sys-approval-state{font-size:11px;white-space:nowrap}
 .sys-rule{padding:5px 0 5px 10px}.sys-rule dd{font-size:12.5px}.sys-chip{font-size:11px;padding:1px 7px}
 .sys-step{font-size:12.5px}
}
@media(min-width:900px){
 .layout-larger .systems h2{font-size:clamp(33.75px,9.5cqw,72.5px);margin-bottom:35px}
 .layout-larger .systems-intro{max-width:1020px}
 .layout-larger .systems-tabs [role=tab]{font-size:24px}
 .layout-larger .sys-summary{font-size:29px;max-width:640px}.sys-head:has(.sys-control+.sys-control) .sys-summary{max-width:580px}
 .layout-larger .sys-switch button{font-size:15px;padding:10px 18px}
 .layout-larger .sys-step{font-size:14px;line-height:1.45}
 .layout-larger .sys-caption-line{font-size:15px}
 .layout-larger .sys-note{font-size:13.5px}
 .layout-larger .sys-handoff{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.sys-action,.sys-rule:before,.sys-bars i,.sys-bars.across i,.systems-tabs [role=tab]:after{transition:none}.sys-approval .sys-approval-icon:after{animation:none!important}}

/* The offers in the same language: three glass panels joined by a conduit through their number coins. A pulse runs
   review, build, care; each coin and panel answers as it arrives. Copy unchanged. */
.offers{--coin:40px;--gap:45px;--drop:20px;gap:var(--gap)}
.layout-larger .offers{gap:var(--gap)}
.offers>li{position:relative;--answer:0}
.offers>li>span{align-self:flex-start;margin-top:var(--drop);box-shadow:0 1px 2px #02060466,0 10px 22px -8px #020604b3,inset 0 0 0 1px rgb(211 236 189/calc(var(--answer)*.8)),inset 0 0 14px rgb(198 242 124/calc(var(--answer)*.18))}
.offers>li:not(:last-child):before{content:'';position:absolute;z-index:0;left:calc(var(--coin)/2 - 3.5px);top:calc(var(--drop) + var(--coin));height:calc(100% - var(--coin) + var(--gap));width:7px;border-radius:4px;
 background:linear-gradient(90deg,#b6d6be47 0 1px,#0a130fd6 1px 6px,#b6d6be47 6px 7px)}
/* A short conduit joins each coin to its panel. */
.offers>li:after{content:'';position:absolute;z-index:0;left:var(--coin);top:calc(var(--drop) + var(--coin)/2 - 3.5px);width:var(--join,27px);height:7px;border-radius:4px;background:linear-gradient(#b6d6be47 0 1px,#0a130fd6 1px 6px,#b6d6be47 6px 7px)}
@media(max-width:699px){.offers>li:after{--join:18px}}
@media(min-width:900px){.layout-larger .offers>li:after{--join:27.5px}}
.offer-panel{flex:1;min-width:0;padding:22px 26px 24px;border-radius:13px;
 box-shadow:inset 0 0 0 1px rgb(211 236 189/calc(var(--answer)*.6)),inset 0 1px 0 rgb(240 250 230/calc(.05 + var(--answer)*.4)),0 1px 2px #02060440}
.offer-panel h3{margin-top:0}
.offer-panel p{max-width:none}
.offer-pulse{position:absolute;z-index:3;left:calc(var(--coin)/2 - 17px);top:calc(var(--drop) + var(--coin)/2 - 17px);width:34px;height:34px;border-radius:50%;pointer-events:none;opacity:0;
 background:var(--signal-ball)}
/* The systems pulse's tail: 2.4 px of Signal behind the ball, fading over 72 px. */
.offer-pulse:before{content:'';position:absolute;left:calc(50% - 1.2px);bottom:50%;width:2.4px;height:var(--tail,0px);border-radius:2px;background:linear-gradient(#c6f27c00,#c6f27cbf)}
.offers.is-running .offer-pulse{opacity:1}
.offers>li.is-active>span:after{content:'';position:absolute;z-index:2;inset:2px;border-radius:50%;box-shadow:0 0 0 1.5px var(--signal)}
@media(max-width:699px){.offers{--coin:34px;--gap:28px;--drop:16px}.offer-panel{padding:16px 18px 18px}}
@media(min-width:900px){.layout-larger .offers{--coin:50px;--gap:40px;--drop:24px}.layout-larger .offer-panel{padding:26px 30px 28px}}

/* Hero diagram in the same language: its glass nodes answer the pulses with a brightening rim. */


/* Hybrid gating: the cloud zone and its conduits are held, calm and dim, until the account sync lands; then they wake.
   Transitions are slow on purpose: a clear change, not a flash. */
.sys-zone{transition:border-color .9s ease,background .9s ease}
.sys-zone span{transition:color .9s ease,opacity .9s ease}
.sys-zone-tag{position:absolute;right:16px;top:9px;padding:1px 8px;border-radius:999px;font-style:normal;font-size:10.5px;line-height:1.5;color:#dfe9da;box-shadow:inset 0 0 0 1px #c3dcc766;opacity:0;transition:opacity .6s ease}
/* Waiting reads as an open line: the zone outline and its held conduits are dashed until the sync lands, then
   close to solid on the wake. Text keeps its contrast. */
.sys-zone.is-held{border-style:dashed;border-color:#c6e6cc5c;background:linear-gradient(180deg,#a7cdb008,#a7cdb002)}
.sys-zone.is-held span{opacity:.78}
.sys-zone.is-held .sys-zone-tag{opacity:1}
.sys-zone.is-awake{border-color:#c6e6cc3d;background:linear-gradient(180deg,#a7cdb012,#a7cdb005)}
.sys-zone.is-awake span{color:#dfe9da}
.sys-node .sys-glass{transition:opacity .9s ease}
.sys-node.is-held .sys-glass{opacity:.64}
.sys-tube-wall,.sys-tube-core{transition:stroke-opacity .9s ease}
.sys-tube.is-held .sys-tube-wall{stroke-opacity:.3;stroke-dasharray:3 6}
.sys-tube.is-held .sys-tube-core{stroke-opacity:.03}
/* The account sync: its label over one state at a time. */
.sys-node[data-role=bridge] .sys-text{display:grid;gap:1px}
.sys-sync-state{display:none;align-items:center;gap:4px;font-size:11px;line-height:1.3;color:#dfe9da}
.sys-sync-state .sys-tick{margin-top:0}
.sys-stage[data-variant=starter] .sys-node[data-sync="0"] .sys-sync-state[data-variant=starter][data-k="0"],.sys-stage[data-variant=starter] .sys-node[data-sync="1"] .sys-sync-state[data-variant=starter][data-k="1"],.sys-stage[data-variant=starter] .sys-node[data-sync="2"] .sys-sync-state[data-variant=starter][data-k="2"],
.sys-stage[data-variant=mover] .sys-node[data-sync="0"] .sys-sync-state[data-variant=mover][data-k="0"],.sys-stage[data-variant=mover] .sys-node[data-sync="1"] .sys-sync-state[data-variant=mover][data-k="1"],.sys-stage[data-variant=mover] .sys-node[data-sync="2"] .sys-sync-state[data-variant=mover][data-k="2"],
.sys-stage[data-variant=leaver] .sys-node[data-sync="0"] .sys-sync-state[data-variant=leaver][data-k="0"],.sys-stage[data-variant=leaver] .sys-node[data-sync="1"] .sys-sync-state[data-variant=leaver][data-k="1"],.sys-stage[data-variant=leaver] .sys-node[data-sync="2"] .sys-sync-state[data-variant=leaver][data-k="2"]{display:inline-flex}
.sys-node[data-role=bridge].is-syncing .sys-glass{box-shadow:inset 0 0 0 1px #d3ecbdb3,inset 0 0 18px #c6f27c1f}
.sys-steps:has(>li:nth-child(7):last-child){--n:7}

/* One ball everywhere: the systems pulse (3 px head, soft glow to 17 px) as a CSS ground for the About loop and the
   hero offers; systems.mjs draws the same ball in SVG. */
:root{--signal-ball:radial-gradient(circle,#f3ffe1 0 3px,#e9ffc4f2 3px,#c6f27c73 6px,#c6f27c00 17px)}
/* Row flows (Customer work). Variant wording, the person carrying by hand, and the carry labels. */
.sys-stage[data-variant=connected] .sys-action[data-variant=connected],.sys-stage[data-variant=by-hand] .sys-action[data-variant=by-hand]{display:flex}
.sys-stage:not([data-variant=connected]) .sys-approval [data-variant=connected],.sys-stage:not([data-variant=by-hand]) .sys-approval [data-variant=by-hand]{display:none!important}
.sys-stage:not([data-variant=by-hand]) .sys-hop{display:none!important}
.sys-hop{position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;gap:5px;font-size:11.5px;line-height:1;color:#d5e0d1;white-space:nowrap;pointer-events:none;will-change:transform}
.sys-hop svg{flex:none;width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sys-tube.is-hand .sys-tube-wall{stroke-dasharray:3 6;stroke-opacity:.34}
.sys-tube.is-hand .sys-tube-bore{stroke-opacity:.5}
.sys-tube.is-hand.is-live .sys-tube-core{stroke:#e3ecdf;stroke-opacity:.18}
.sys-pulse-person{display:none}
.sys-pulse.is-carry .sys-pulse-person{display:inline}
.sys-pulse.is-carry .sys-pulse-head,.sys-pulse.is-carry .sys-pulse-glow,.sys-pulse.is-carry .sys-pulse-tail{display:none}
.sys-pulse-person circle{fill:#101b15;stroke:#e3ecdfcc;stroke-width:1}
.sys-pulse-person path{fill:none;stroke:#e3ecdf;stroke-width:2.2;stroke-linecap:round}
.sys-anchor{position:relative;top:-20px;display:block;height:0}

.sys-stage[data-variant=by-hand] .sys-icon:after{display:none}

/* Hero: how we start. The three offers beside the headline as one linked sequence in the stage language: glass
   panels on a conduit through their coins, the Signal ball travelling review -> build -> care. Supporting
   material: smaller type than the headline, no fills. */
.hero-offers{justify-self:end;width:min(100%,452px);margin:0;position:relative}
.hero-offers-label{margin:0 0 18px;font-size:11px;line-height:1.4;letter-spacing:.15em;text-transform:uppercase;color:#a9bda6}
.hero-offers .offers{list-style:none;margin:0;padding:0;display:grid;--coin:34px;--gap:14px;--drop:14px;gap:var(--gap)}
.hero-offers .offers>li{display:flex;gap:16px;--join:16px}
.hero-offers .offers>li>span{width:var(--coin);height:var(--coin);font-size:10px;padding:0}
.hero-offers .offer-panel{padding:17px 24px 18px;border-radius:12px}
.hero-offers .offer-panel h3{margin:0 0 5px;font-size:17px;font-weight:500;line-height:1.3;letter-spacing:-.01em;color:#dce5d4}
.hero-offers .offer-panel p{margin:0;font-size:13px;line-height:1.55;color:#b9c8b6}
.hero-offers-close{margin:18px 0 0 calc(var(--coin,34px) + 16px);font-size:13px;line-height:1.5;color:#b3c3b0}
.layout-larger .hero-offers{width:min(100%,480px)}
.layout-larger .hero-offers-label{font-size:12.5px}
.layout-larger .hero-offers .offers{--coin:40px;--gap:16px}
.layout-larger .hero-offers .offers>li>span{font-size:11px}
.layout-larger .hero-offers .offer-panel h3{font-size:19px}
.layout-larger .hero-offers .offer-panel p{font-size:14.5px}
.layout-larger .hero-offers-close{margin-left:56px;font-size:14.5px}
@media(max-width:1100px) and (min-width:700px){.hero-offers{justify-self:start}}
@media(max-width:699px){.hero-offers{width:100%;margin-top:48px}.hero-offers .offers{--coin:32px}.layout-larger .hero-offers .offers{--coin:34px}.hero-offers .offer-panel h3,.layout-larger .hero-offers .offer-panel h3{font-size:17px}.hero-offers .offer-panel p,.layout-larger .hero-offers .offer-panel p{font-size:13.5px}.hero-offers-close,.layout-larger .hero-offers-close{margin-left:48px;font-size:13.5px}}