/* Approved by the owner (12 October 2026): styles for the reworked home sections in sections4.jsx. */
.s4{color:var(--mbc-navy);font-family:inherit}
.s4-wrap{max-width:1320px;margin:0 auto}
.s4-sys{background:var(--paper);padding:120px 5vw}
.s4-in{background:var(--white);padding:110px 5vw}
.s4-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:48px}
.s4 h2{font-size:clamp(48px,6vw,96px);line-height:.95;letter-spacing:-.045em;margin:0}
.s4 h2 span{font-weight:300}.s4 h2 b{font-weight:800}
.s4-intro{max-width:420px;font-size:17px;line-height:1.6;margin:0;color:var(--navy-600)}
.s4-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4vw;align-items:start}
@media (max-width:900px){.s4-grid{grid-template-columns:minmax(0,1fr);gap:12px}}

#s4-net{width:100%;height:auto;display:block;overflow:visible;position:sticky;top:96px}
#s4-net .arcline{fill:none;stroke:var(--mbc-navy);stroke-width:16;stroke-linecap:round;transition:stroke .35s}
#s4-net .archead{fill:var(--mbc-navy);transition:fill .35s}
#s4-net .arc.lit .arcline{stroke:var(--mbc-orange)}#s4-net .arc.lit .archead{fill:var(--mbc-orange)}
#s4-net.stalled .arcline{stroke:var(--border-subtle);stroke-dasharray:2 22}#s4-net.stalled .archead{fill:var(--border-subtle)}
#s4-net .node{cursor:pointer}
#s4-net .node .hit{fill:transparent}
#s4-net .node .ring{fill:none;stroke:transparent;stroke-width:3;transition:all .3s}
#s4-net .node.on .ring{fill:#FFF0D1}
#s4-net .node.broken .ring{fill:#FFF4E0;stroke:var(--mbc-orange);stroke-dasharray:8 6}
#s4-net .node .ico{transition:transform .35s var(--ease-bounce);transform-box:fill-box;transform-origin:center}
#s4-net .node:hover .ico,#s4-net .node:focus-visible .ico{transform:scale(1.1) rotate(-4deg)}
#s4-net .node:focus{outline:none}#s4-net .node:focus-visible .ring{stroke:var(--mbc-orange)}
#s4-net .node text{fill:var(--mbc-navy);text-anchor:middle;font-family:inherit}
#s4-net .nm{font-size:20px;font-weight:700}
#s4-net .node.dim .ico,#s4-net .node.dim text{opacity:.4}#s4-net .node.dim .ico{filter:grayscale(1)}
#s4-net .bang{display:none}#s4-net .node.broken .bang{display:block}
#s4-net .curve{fill:none;stroke:var(--mbc-orange);stroke-width:6;stroke-linecap:round;transition:d .6s,stroke .3s}
#s4-net.stalled .curve{d:path('M235,280 C275,280 300,280 320,280 S350,280 365,280');stroke:var(--navy-200);stroke-dasharray:8 10}
#s4-net .mid3{font-family:inherit;font-size:16px;font-weight:500;fill:var(--navy-400);text-anchor:middle}
@media (max-width:600px){#s4-net .nm{font-size:23px}#s4-net .mid3{font-size:20px}#s4-net{position:static}}

.s4-panel{min-height:560px}
.s4-panel .ph-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.s4-panel .who{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:var(--text-accent)}
.s4-panel .pips{display:flex;gap:6px}
.s4-panel .pips button{width:26px;height:6px;border-radius:3px;border:0;background:var(--border-subtle);cursor:pointer;padding:0}
.s4-panel .pips button.on{background:var(--mbc-orange)}
.s4-panel .lead{font-size:clamp(22px,2.2vw,28px);font-weight:800;letter-spacing:-.02em;line-height:1.2;margin:0 0 8px}
.s4-panel .body{font-size:16px;line-height:1.6;color:var(--navy-600);margin:0 0 22px}
.s4-panel .exbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 8px}
.s4-panel .hd{font-size:15px;font-weight:500;color:var(--navy-400);margin:0;flex:1 1 auto}
.s4-panel .seg{display:inline-flex;border:1.5px solid var(--border-default);border-radius:999px;padding:2px}
.s4-panel .seg button{border:0;background:none;border-radius:999px;padding:5px 11px;font:inherit;font-size:13px;font-weight:500;cursor:pointer;color:var(--mbc-navy)}
.s4-panel .seg button[aria-pressed=true]{background:var(--mbc-navy);color:#fff;font-weight:600}
.s4-panel .r{display:grid;grid-template-columns:14px 96px minmax(0,1fr);gap:10px;align-items:baseline;padding:6px 0}
.s4-panel .r::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mbc-orange);transform:translateY(-1px)}
.s4-panel .r b{font-size:14px;font-weight:500;color:var(--navy-400)}
.s4-panel .r .fn{display:block;font-size:16px;line-height:1.45}
.s4-panel .r .eg{display:block;font-size:14px;line-height:1.45;color:var(--text-accent);min-height:1.45em;margin-top:1px}
.s4-panel .r .eg::before{content:"e.g. ";color:var(--navy-400)}
.s4-panel .cur::after{content:"";display:inline-block;width:2px;height:1em;background:var(--mbc-orange);margin-left:2px;vertical-align:-2px;animation:s4blink .7s steps(1) infinite}
@keyframes s4blink{50%{opacity:0}}
.s4-panel .brk{margin-top:18px;background:none;border:0;padding:0;font:inherit;font-size:15px;font-weight:700;color:var(--text-accent);cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.s4-panel .k{font-size:14px;font-weight:700;color:var(--text-accent);margin:0 0 6px}
.s4-panel h3{font-size:clamp(28px,3vw,40px);font-weight:800;letter-spacing:-.035em;line-height:1.05;margin:0 0 12px}
.s4-panel .bp{font-size:17px;line-height:1.6;color:var(--navy-600);margin:0 0 12px}
.s4-panel .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.s4-panel .cta{background:var(--mbc-orange);border:0;border-radius:999px;padding:14px 22px;font:inherit;font-weight:700;font-size:16px;cursor:pointer;color:var(--mbc-navy)}
.s4-panel .ghost{background:none;border:1.5px solid var(--border-default);border-radius:999px;padding:12px 18px;font:inherit;font-weight:600;font-size:15px;cursor:pointer;color:var(--mbc-navy)}
@media (max-width:600px){.s4-panel .r{grid-template-columns:14px 84px minmax(0,1fr)}.s4-panel{min-height:0}}

.s4-teams{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:820px){.s4-teams{grid-template-columns:minmax(0,1fr)}}
.s4-team{border:1.5px solid var(--border-subtle);border-radius:28px;padding:24px;display:flex;flex-direction:column;gap:14px;background:var(--paper);transition:transform .35s var(--ease-bounce),box-shadow .3s}
.s4-team:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(41,57,81,.12)}
.s4-logo{height:120px;border:1.5px dashed var(--border-default);border-radius:18px;display:grid;place-items:center;color:var(--navy-400);font-size:14px;background:var(--white)}
.s4-team h3{font-size:26px;font-weight:800;letter-spacing:-.03em;margin:0}
.s4-team p{font-size:15px;line-height:1.5;color:var(--navy-600);margin:0}
.s4-team .s4-tbd{color:var(--navy-400);font-style:italic}
.s4-logo img{width:88px;height:88px;border-radius:50%;display:block;box-shadow:0 0 0 1.5px var(--border-subtle)}
.s4-chip{align-self:flex-start;font-size:13px;font-weight:700;color:var(--mbc-navy);background:var(--orange-50);border-radius:999px;padding:5px 11px}

/* Calm (approved by the owner, 12 October 2026): the same content with fewer competing parts.
   One accent: orange marks the system in focus; the examples sit in a quiet second column; more air between rows. */
.s4-calm .s4-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:5vw}
.s4-calm #s4-net{max-width:520px}
.s4-calm .s4-panel .ph-row{margin-bottom:18px}
.s4-calm .s4-panel .pips button{width:18px;height:4px}
.s4-calm .s4-panel .lead{margin-bottom:10px}
.s4-calm .s4-panel .body{margin-bottom:30px;max-width:560px}
.s4-calm .s4-panel .exbar{padding-bottom:12px;border-bottom:1px solid var(--border-subtle);margin-bottom:4px}
.s4-calm .s4-panel .seg{border:0;padding:0;gap:4px}
.s4-calm .s4-panel .seg button{padding:4px 10px;color:var(--navy-400);background:transparent}
.s4-calm .s4-panel .seg button[aria-pressed=true]{background:var(--navy-50);color:var(--mbc-navy)}
.s4-calm .s4-panel .r{grid-template-columns:14px 92px minmax(0,1fr);padding:11px 0;border-bottom:1px solid var(--border-subtle)}
.s4-calm .s4-panel .r>span{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 20px;align-items:baseline}
.s4-calm .s4-panel .r .fn{font-size:15px}
.s4-calm .s4-panel .r .eg{font-size:14px;color:var(--navy-400);margin:0}
.s4-calm .s4-panel .r .eg::before{content:""}
.s4-calm .s4-panel .brk{margin-top:22px;font-weight:600}
@media (max-width:700px){.s4-calm .s4-panel .r>span{grid-template-columns:minmax(0,1fr)}.s4-calm .s4-panel .r .eg::before{content:"e.g. "}}
@media (max-width:900px){.s4-calm .s4-grid{grid-template-columns:minmax(0,1fr);gap:12px}.s4-calm #s4-net{max-width:none}}

/* The kind-of-business switch (approved by the owner, 12 October 2026): three looks to choose from, a (default), b and c. */
.s4-panel .kinds{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 18px}
.s4-panel .kinds .kl{font-size:14px;font-weight:600;color:var(--navy-500)}
.s4-panel .kinds .seg button{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font:inherit}
.s4-panel .kinds .seg svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* a: tabs with an orange underline */
.s4-tabs-a .s4-panel .kinds .seg{display:inline-flex;gap:22px;border:0;border-radius:0;padding:0;border-bottom:1.5px solid var(--border-subtle)}
.s4-tabs-a .s4-panel .kinds .seg button{background:none;border:0;border-radius:0;padding:8px 2px 10px;margin-bottom:-1.5px;border-bottom:3px solid transparent;font-size:15px;font-weight:600;color:var(--navy-400)}
.s4-tabs-a .s4-panel .kinds .seg button:hover{color:var(--mbc-navy);border-bottom-color:var(--border-default)}
.s4-tabs-a .s4-panel .kinds .seg button[aria-pressed=true]{color:var(--mbc-navy);font-weight:800;border-bottom-color:var(--mbc-orange);background:none}
/* b: one pill, the chosen part solid navy */
.s4-tabs-b .s4-panel .kinds .seg{display:inline-flex;gap:0;border:2px solid var(--mbc-navy);border-radius:999px;padding:3px}
.s4-tabs-b .s4-panel .kinds .seg button{background:none;border:0;border-radius:999px;padding:8px 16px;font-size:15px;font-weight:700;color:var(--mbc-navy)}
.s4-tabs-b .s4-panel .kinds .seg button:hover{background:var(--navy-50)}
.s4-tabs-b .s4-panel .kinds .seg button[aria-pressed=true]{background:var(--mbc-navy);color:#fff}
/* c: three outlined buttons, the chosen one solid orange */
.s4-tabs-c .s4-panel .kinds .seg{display:inline-flex;gap:8px;border:0;padding:0}
.s4-tabs-c .s4-panel .kinds .seg button{background:var(--white);border:2px solid var(--border-default);border-radius:14px;padding:9px 16px;font-size:15px;font-weight:700;color:var(--mbc-navy);transition:all .2s}
.s4-tabs-c .s4-panel .kinds .seg button:hover{border-color:var(--mbc-navy);transform:translateY(-2px)}
.s4-tabs-c .s4-panel .kinds .seg button[aria-pressed=true]{background:var(--mbc-orange);border-color:var(--mbc-orange);color:var(--mbc-navy)}
@media (max-width:600px){.s4-tabs-a .s4-panel .kinds .seg{gap:16px}.s4-panel .kinds .seg button{font-size:14px}.s4-tabs-b .s4-panel .kinds .seg button,.s4-tabs-c .s4-panel .kinds .seg button{padding:8px 11px}}

/* The example business, named under the switch (approved by the owner, 12 October 2026). */
.s4-panel .exwho{margin:-6px 0 20px;font-size:15px;line-height:1.5;color:var(--mbc-navy);font-weight:600}
.s4-panel .exwho span{font-weight:500;color:var(--navy-400)}
/* One line for each "what we do" line (approved by the owner, 12 October 2026): on desktop the text side is wider and the line takes the larger column;
   on phones the label sits above its line so the line has the full width. Examples may still wrap. */
@media (min-width:901px){
  .s4-calm .s4-grid{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:4vw}
  .s4-calm .s4-panel .r{grid-template-columns:14px 84px minmax(0,1fr)}
  .s4-calm .s4-panel .r>span{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:4px 18px}
}
@media (max-width:700px){
  .s4-calm .s4-panel .r{grid-template-columns:14px minmax(0,1fr);row-gap:2px}
  .s4-calm .s4-panel .r b{grid-column:2;font-size:13px}
  .s4-calm .s4-panel .r>span{grid-column:2}
  .s4-calm .s4-panel .r::before{grid-row:1;align-self:center}
}

/* "Night" (approved by the owner, 13 October 2026): "Four systems. One curve." with the hero's feel. The section is a navy
   sheet with curved corners and the hero's glow, each system is a white story ring, and the words sit on a glass card with
   four bars across its top, as on a story. Product / Service / Creator is one pill; the five lines are rounded rows; "What we
   find:" is picked out in white; "What if … breaks?" is a button that lifts on hover. No word was changed.
   Written as a layer over the rules above, in two parts: the shape first, then Night's colours. */
/* The sheet, and the stack behind it. */
.s4-sys{position:relative;z-index:0;background:var(--paper);padding:104px 3vw 120px}
.s4-sys .s4-wrap{position:relative;max-width:1360px;background:var(--white);border-radius:56px;padding:72px 4.5vw 64px;box-shadow:0 34px 80px rgba(41,57,81,.10)}
.s4-sys .s4-wrap::before,.s4-sys .s4-wrap::after{content:"";position:absolute;height:160px;border-radius:52px;z-index:-1}
.s4-sys .s4-wrap::before{left:76px;right:76px;top:-36px;background:var(--mbc-navy);transform:rotate(.6deg)}
.s4-sys .s4-wrap::after{left:34px;right:34px;top:-18px;background:var(--mbc-orange);transform:rotate(-.5deg)}
.s4-sys .s4-top{margin-bottom:40px}

/* The loop: each system is a story ring; the one in focus has the orange ring. */
.s4-sys #s4-net .node .ring{fill:var(--paper);stroke:var(--navy-100);stroke-width:3}
.s4-sys #s4-net .node:hover .ring{stroke:var(--navy-300)}
.s4-sys #s4-net .node.on .ring{fill:#FFF0D1;stroke:var(--mbc-orange);stroke-width:5}
.s4-sys #s4-net .arcline{stroke-width:12}

/* The words: a card, with the brand's offset shadow. */
.s4-sys .s4-panel{background:var(--paper);border:2px solid var(--mbc-navy);border-radius:36px;padding:26px 28px 28px;box-shadow:8px 8px 0 var(--mbc-orange);min-height:0}
/* The four bars across the top of the card, as on a story. */
.s4-sys .s4-panel .ph-row{flex-direction:column-reverse;align-items:stretch;gap:18px;margin-bottom:16px}
.s4-sys .s4-panel .pips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.s4-sys .s4-panel .pips button{width:auto;height:5px;border-radius:99px;background:var(--navy-100);transition:background .3s}
.s4-sys .s4-panel .pips button.on{background:var(--mbc-orange)}
.s4-sys .s4-panel .who{align-self:flex-start;background:var(--white);border:1.5px solid var(--border-subtle);border-radius:999px;padding:6px 14px 6px 8px;color:var(--mbc-navy)}
.s4-sys .s4-panel .body{margin-bottom:24px}

/* The kind of business: one pill, the chosen part lifted. */
.s4-sys.s4-tabs-a .s4-panel .kinds{margin-bottom:14px}
.s4-sys.s4-tabs-a .s4-panel .kinds .seg{gap:2px;border:0;border-radius:999px;padding:4px;background:var(--navy-100)}
.s4-sys.s4-tabs-a .s4-panel .kinds .seg button{margin:0;border:0;border-radius:999px;padding:8px 16px;font-size:14px;font-weight:600;color:var(--navy-500)}
.s4-sys.s4-tabs-a .s4-panel .kinds .seg button:hover{color:var(--mbc-navy)}
.s4-sys.s4-tabs-a .s4-panel .kinds .seg button[aria-pressed=true]{background:var(--white);color:var(--mbc-navy);font-weight:800;box-shadow:0 2px 8px rgba(41,57,81,.16)}
.s4-sys .s4-panel .exwho{margin:0 0 18px}

/* The five lines: each its own rounded row. */
.s4-sys.s4-calm .s4-panel .exbar{border-bottom:0;padding-bottom:4px;margin-bottom:6px}
.s4-sys .s4-panel .hd{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--navy-400)}
.s4-sys.s4-calm .s4-panel .r{background:var(--white);border:1.5px solid var(--border-subtle);border-radius:18px;padding:13px 16px;margin-bottom:8px;transition:transform .25s var(--ease-bounce),border-color .2s}
.s4-sys.s4-calm .s4-panel .r:hover{transform:translateX(4px);border-color:var(--navy-300)}
.s4-sys .s4-panel .r b{font-weight:700;color:var(--mbc-navy)}

/* "What if … breaks?": a button, not a link. */
.s4-sys.s4-calm .s4-panel .brk{margin-top:14px;display:inline-flex;align-items:center;background:var(--mbc-navy);color:var(--white);border-radius:999px;padding:13px 22px;font-size:15px;font-weight:700;text-decoration:none;transition:transform .25s var(--ease-bounce),box-shadow .25s}
.s4-sys.s4-calm .s4-panel .brk:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--mbc-orange)}

/* Phones: the sheet keeps a rim of the page around it, so its curved edges show. */
@media (max-width:700px){
  .s4-sys{padding:64px 10px 72px}
  .s4-sys .s4-wrap{border-radius:34px;padding:44px 12px 18px}
  .s4-sys .s4-top{padding:0 8px}
  .s4-sys .s4-wrap::before,.s4-sys .s4-wrap::after{height:110px;border-radius:30px}
  .s4-sys .s4-wrap::before{left:36px;right:36px;top:-24px}
  .s4-sys .s4-wrap::after{left:16px;right:16px;top:-12px}
  .s4-sys .s4-top{margin-bottom:20px}
  .s4-sys .s4-panel{border-radius:28px;padding:18px 14px 18px;box-shadow:5px 5px 0 var(--mbc-orange);margin-right:5px}
  /* The three kinds share the card's width, so none runs off its edge. */
  .s4-sys.s4-tabs-a .s4-panel .kinds{gap:8px}
  .s4-sys.s4-tabs-a .s4-panel .kinds .seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  .s4-sys.s4-tabs-a .s4-panel .kinds .seg button{justify-content:center;gap:6px;padding:9px 4px;font-size:13.5px}
  .s4-sys.s4-tabs-a .s4-panel .kinds .seg svg{width:15px;height:15px}
  .s4-sys.s4-calm .s4-panel .r{padding:12px 14px;border-radius:16px}
}

/* Night's colours. */
.s4-sys .s4-wrap{background:radial-gradient(60% 55% at 92% 0%,rgba(255,165,0,.30),transparent 70%),radial-gradient(55% 60% at 0% 100%,rgba(74,91,118,.95),transparent 70%),var(--mbc-navy);box-shadow:0 12px 26px rgba(20,29,42,.16)}
.s4-sys h2 span{color:var(--white)}.s4-sys h2 b{color:var(--mbc-orange)}
.s4-sys .s4-intro{color:var(--navy-100)}
.s4-sys #s4-net .arcline{stroke:rgba(255,255,255,.3)}.s4-sys #s4-net .archead{fill:rgba(255,255,255,.3)}
.s4-sys #s4-net .arc.lit .arcline{stroke:var(--mbc-orange)}.s4-sys #s4-net .arc.lit .archead{fill:var(--mbc-orange)}
.s4-sys #s4-net .node text{fill:var(--white)}
.s4-sys #s4-net .node .ring{fill:var(--white);stroke:rgba(255,255,255,.25);stroke-width:8}
.s4-sys #s4-net .node.on .ring{fill:#FFF0D1;stroke:var(--mbc-orange);stroke-width:6}
.s4-sys #s4-net .mid3{fill:var(--navy-200)}
.s4-sys .s4-panel{background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.18);box-shadow:0 24px 60px rgba(8,12,18,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--white)}
.s4-sys .s4-panel .pips button{background:rgba(255,255,255,.22)}
.s4-sys .s4-panel .who{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:var(--white)}
.s4-sys .s4-panel .who svg{background:var(--white);border-radius:50%;padding:3px;box-sizing:border-box}
.s4-sys .s4-panel .lead{color:var(--white)}
.s4-sys .s4-panel .body{color:var(--navy-100)}
.s4-sys .s4-panel .kinds .kl{color:var(--navy-200)}
.s4-sys.s4-tabs-a .s4-panel .kinds .seg{background:rgba(255,255,255,.1)}
.s4-sys.s4-tabs-a .s4-panel .kinds .seg button{color:var(--navy-100)}
.s4-sys.s4-tabs-a .s4-panel .kinds .seg button:hover{color:var(--white)}
.s4-sys.s4-tabs-a .s4-panel .kinds .seg button[aria-pressed=true]{background:var(--mbc-orange);color:var(--mbc-navy);box-shadow:none}
.s4-sys .s4-panel .exwho{color:var(--white)}.s4-sys .s4-panel .exwho span{color:var(--navy-200)}
.s4-sys .s4-panel .hd{color:var(--navy-200)}
.s4-sys.s4-calm .s4-panel .r{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12)}
.s4-sys.s4-calm .s4-panel .r:hover{border-color:rgba(255,255,255,.4)}
.s4-sys .s4-panel .r b{color:var(--mbc-orange)}
.s4-sys .s4-panel .r .fn{color:var(--white)}
.s4-sys.s4-calm .s4-panel .r .eg{color:var(--navy-200)}
.s4-sys.s4-calm .s4-panel .brk{background:var(--mbc-orange);color:var(--mbc-navy)}
/* The button lifts on hover, with no second layer behind it (the owner, 13 October 2026). */
.s4-sys.s4-calm .s4-panel .brk:hover{box-shadow:none}
.s4-sys .s4-panel h3{color:var(--white)}.s4-sys .s4-panel .bp{color:var(--navy-100)}.s4-sys .s4-panel .k{color:var(--mbc-orange)}
.s4-sys .s4-panel .ghost{color:var(--white);border-color:rgba(255,255,255,.4)}
@media (max-width:700px){.s4-sys .s4-panel{box-shadow:0 16px 40px rgba(8,12,18,.35);margin-right:0}}

/* No layers behind the sheet (the owner, 13 October 2026). */
.s4-sys .s4-wrap::before,.s4-sys .s4-wrap::after{display:none}

/* "What we find:" picked out from the rest of its line (the owner, 13 October 2026). */
.s4-sys .s4-panel .hd b{font-weight:800;color:var(--white)}

/* One line for each "what we do" line at 1280 and 1440 (the owner's rule of 12 October 2026): the card's edges take room,
   so the sheet and the card are a little wider, and the line takes more of its row. The examples may still wrap. */
@media (min-width:901px){
  .s4-sys{padding-left:2vw;padding-right:2vw}
  .s4-sys .s4-wrap{padding-left:3.2vw;padding-right:3.2vw}
  .s4-sys.s4-calm .s4-grid{grid-template-columns:minmax(0,.5fr) minmax(0,1fr);gap:3vw}
  .s4-sys .s4-panel{padding:24px 22px 26px}
  .s4-sys.s4-calm .s4-panel .r{grid-template-columns:14px 80px minmax(0,1fr);padding:13px 14px}
  .s4-sys.s4-calm .s4-panel .r>span{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:4px 16px}
}

/* Phones: the navy sheet runs the full width of the screen, so no strip of the page shows at its sides. Its corners stay
   curved, top and bottom. The card inside keeps its size and place: the sheet's own padding grows by exactly what the
   section's side margin was (the owner, 13 October 2026). */
@media (max-width:700px){
  section.s4-sys:not(#top){padding-left:0!important;padding-right:0!important}
  .s4-sys .s4-wrap{padding-left:22px;padding-right:22px}
}

/* Phones: "What if … breaks?" sits in the middle of the card (the owner, 13 October 2026). */
@media (max-width:700px){
  .s4-sys.s4-calm .s4-panel .brk{display:flex;width:fit-content;margin-left:auto;margin-right:auto;justify-content:center;text-align:center}
  /* And in the answer it opens, "Find which one is broken" and "Fix it" are centred too. */
  .s4-sys .s4-panel .row{justify-content:center}
}

/* "What if … breaks?" is a white outline, not solid orange (the owner, 14 October 2026, from five looks). It invites a look
   rather than asking for action: on this page solid orange means "act", as "Find which one is broken" does on the screen
   it opens, and the outline matches that screen's "Fix it". It still lifts on hover. */
.s4-sys.s4-calm .s4-panel .brk{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,.45)}
.s4-sys.s4-calm .s4-panel .brk:hover{border-color:rgba(255,255,255,.8)}