/* /confidential-computing-customer-data: page-local drawing parts, set in HTML from the system's tokens only.
   Two vessels, HS-CC-01 (three states + who is shut out), HS-CC-02 (the sealed path), the conventional trade,
   the attestation comparator, the four control cards, network immunity. */

.split > .aside{margin-top:0}
.actions .more{margin-top:0}
.fnd>.fnd-hl{border-top:2px solid var(--ok)}

/* ── two vessels take the same flaw ── */
.vs-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.vs-p{display:flex;flex-direction:column;gap:16px;padding:18px 20px 20px;border-radius:12px;border:1px solid var(--nd-bd)}
.vs-a{border-color:var(--warn);border-style:dashed}
.vs-b{border:1.5px solid var(--seal);box-shadow:inset 0 0 0 4px var(--plate),inset 0 0 0 5px color-mix(in srgb,var(--seal) 35%,transparent)}
.vs-v{position:relative;display:flex;align-items:flex-start;gap:14px}
.vs-held{flex:1}
.vs-held i{display:block;height:9px;margin-top:10px;border-radius:5px;background:color-mix(in srgb,var(--warn) 28%,transparent)}
.vs-held i + i{width:70%;margin-top:7px}
.vs-held.open{display:flex;align-items:center;min-height:86px}
.vs-flaw{display:flex;align-items:center;gap:6px;font:600 14px/1.3 var(--f-sans);color:var(--warn)}
.vs-flaw svg{width:16px;height:22px;flex:none;fill:var(--warn)}
.vs-out{display:flex;align-items:center;gap:10px;font:600 15px/1.35 var(--f-sans)}
.vs-out.warn{color:var(--warn)}
.vs-out.ok{color:var(--ok)}
.vs-ln{position:relative;flex:0 0 64px;height:1.5px;background:var(--warn)}
.vs-ln::after{content:"";position:absolute;right:-1px;top:-4.5px;border:5.25px solid transparent;border-left:8px solid var(--warn);border-right:0}
.vs-out svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6}
@container (max-width: 620px){ .vs-g{grid-template-columns:1fr} }

/* ── HS-CC-01: the three states of data ── */
.st3-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:16px;row-gap:12px}
.st3-br{padding-bottom:10px;border-bottom:1.5px solid var(--line-c);text-align:center;position:relative}
.st3-br::before,.st3-br::after{content:"";position:absolute;bottom:-1.5px;width:1.5px;height:9px;background:inherit;border-left:1.5px solid var(--line-c)}
.st3-br::before{left:0} .st3-br::after{right:0}
.st3-br-a{grid-column:1 / 3}
.st3-br-b{grid-column:3;border-bottom-color:var(--seal)}
.st3-br-b::before,.st3-br-b::after{border-left-color:var(--seal)}
.st3-e{margin-top:12px;padding-top:10px;border-top:1px solid var(--rule);font:600 14px/1.35 var(--f-sans);letter-spacing:.02em;color:var(--label)}
.st3-e.seal{color:var(--seal)}
.sh3{margin-top:34px;padding-top:22px;border-top:1px solid var(--rule)}
.sh3-h{margin-bottom:14px}
.sh3-g{display:grid;grid-template-columns:minmax(0,1.35fr) 48px minmax(0,1fr);column-gap:18px;align-items:stretch}
.sh3-cap{margin-bottom:10px}
.sh3-rows{display:grid;gap:10px}
.sh3-rows li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(24px,1fr) 20px;align-items:center;column-gap:10px}
.sh3-rows .nd{padding:12px 14px;font:600 16px/1.35 var(--f-sans);color:var(--head)}
.sh3-rows i{height:0;border-top:1.5px dashed var(--line-c)}
.sh3-rows svg{width:20px;height:20px;fill:none;stroke:var(--warn);stroke-width:1.6}
.sh3-w{position:relative;display:flex;align-items:center;justify-content:center;border-left:1.5px solid var(--seal);border-right:1.5px solid var(--seal);background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--seal) 16%,transparent) 0 1.5px,transparent 1.5px 8px)}
.sh3-w p{padding:10px 2px;background:var(--plate);writing-mode:vertical-rl;transform:rotate(180deg);font:600 14px/1.25 var(--f-sans);letter-spacing:.02em;color:var(--seal);text-align:center}
.sh3-in{align-self:center}
.sh3-adm{margin-top:12px}
@container (max-width: 700px){
  .st3-g{grid-template-columns:1fr}
  .st3-br-a{grid-column:1;order:0}
  .st3-g>.nd:nth-of-type(1){order:1} .st3-g>.nd:nth-of-type(2){order:2}
  .st3-br-b{grid-column:1;order:3;margin-top:10px}
  .st3-g>.nd.seal{order:4;margin-top:6px}
  .sh3-g{grid-template-columns:1fr;row-gap:14px}
  .sh3-w{height:40px;border:0;border-top:1.5px solid var(--seal);border-bottom:1.5px solid var(--seal)}
  .sh3-w p{writing-mode:horizontal-tb;transform:none;padding:2px 10px}
  .sh3-rows li{grid-template-columns:minmax(0,1fr) 28px 20px}
}

/* ── HS-CC-02: the sealed path ── */
.sp-out{margin-bottom:12px}
.sp-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,.9fr) minmax(0,1fr);align-items:center}
.sp-sig b{display:flex;align-items:baseline;gap:8px;max-width:13em;text-align:left}
.sp-n{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:28px;height:24px;padding:0 6px;border-radius:12px;border:1px solid var(--seal);font:600 14px/1 var(--f-sans);color:var(--seal);font-variant-numeric:tabular-nums;margin-right:8px}
.sp-sig b .sp-n{margin-right:0}
.sp-drops{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px}
.sp-drop{display:flex;align-items:stretch;gap:14px;padding:12px 0 12px 26px}
.sp-drop.ok{justify-content:flex-end;padding:12px 26px 12px 0;flex-direction:row-reverse}
.sp-drop i{position:relative;flex:none;width:1.5px;min-height:58px;background:var(--line-c)}
.sp-drop.ok i{background:var(--ok)}
.sp-drop i::after{content:"";position:absolute;bottom:-1px;left:-4.5px;border:5.25px solid transparent;border-top:8px solid var(--line-c);border-bottom:0}
.sp-drop.ok i::after{border-top-color:var(--ok)}
.sp-drop>div{align-self:center}
.sp-drop.ok>div{text-align:right}
.sp-drop .dg-k{display:flex;align-items:center;flex-wrap:wrap;row-gap:4px}
.sp-drop.ok .dg-k{justify-content:flex-end}
.sp-seam{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px;padding:8px 14px;border-top:1.5px solid var(--seal);border-bottom:1.5px solid var(--seal);background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--seal) 12%,transparent) 0 1.5px,transparent 1.5px 8px)}
.sp-seam p{padding:0 6px;background:var(--plate)}
.sp-ch{margin-top:22px;padding:22px 22px 20px}
.sp-join{display:flex;align-items:center;flex-wrap:nowrap;gap:0;margin-top:18px}
.sp-join .chips{flex-direction:column;flex-wrap:nowrap;margin-top:0}
.sp-join .cx{min-width:44px;padding:0 6px}
.sp-join .cx b{order:-1}
.sp-join .cx .sp-n{margin:0}
.sp-join>.nd{flex:0 1 auto;padding:12px 14px}
.sp-eg{flex:0 0 auto;min-width:8.5em;padding:10px 12px;border:1px dashed var(--seal);border-radius:8px}
.sp-eg p{text-wrap:balance}
.sp-join>.chips:first-child li{white-space:nowrap}
.sp-eg .nd-s{margin-top:2px}
.sp-keys{display:flex;align-items:center;gap:10px;margin-top:18px}
.sp-keys svg{width:18px;height:18px;flex:none;stroke:var(--seal);stroke-width:1.5;fill:none}
@container (max-width: 760px){
  .sp-join{flex-direction:column;align-items:flex-start}
  .sp-join .chips{flex-direction:row;flex-wrap:wrap}
  .sp-join .cx{flex-direction:row;justify-content:flex-start;min-height:40px;padding:4px 0 4px 18px}
  .sp-join .cx i{width:1.5px;min-width:0;height:30px;order:-1}
  .sp-join .cx i::after{right:auto;top:auto;bottom:-1px;left:-4.5px;border:5.25px solid transparent;border-top:8px solid var(--line-c);border-bottom:0}
}
/* Phones: two lanes under the website, so every arrow keeps its origin.
   Left lane: 01 PII drops straight from Your website to the attested port, past HiveSilo.
   Right lane: 02 the non-PII signal goes down to HiveSilo, and 03 the sealed result goes down from HiveSilo to the port. */
@container (max-width: 620px){
  .sp-flow{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);column-gap:12px}
  .sp-top,.sp-drops{display:contents}
  .sp-top>.sp-web{grid-column:1 / -1;grid-row:1}
  .sp-top>.sp-sig{grid-column:2;grid-row:2;flex-direction:row;justify-content:flex-start;align-items:center;gap:12px;min-width:0;min-height:0;padding:0 0 0 22px;text-align:left}
  .sp-top>.sp-sig b{flex-direction:column;align-items:flex-start;gap:6px;max-width:none;padding:14px 0}
  .sp-top>.sp-sig i{align-self:stretch;width:1.5px;min-width:0;height:auto;min-height:44px;order:-1}
  .sp-top>.sp-sig i::after{right:auto;top:auto;bottom:-1px;left:-4.5px;border:5.25px solid transparent;border-top:8px solid var(--line-c);border-bottom:0}
  .sp-top>.sp-hs{grid-column:2;grid-row:3}
  .sp-drops>.sp-pii{grid-column:1;grid-row:2 / 5;gap:10px;padding:0 0 0 16px}
  .sp-drops>.sp-pii>div{align-self:start;padding:14px 0}
  .sp-drops>.sp-drop.ok{grid-column:2;grid-row:4;flex-direction:row;justify-content:flex-start;gap:12px;padding:0 0 0 22px}
  .sp-drop.ok>div{text-align:left;padding:14px 0}
  .sp-drop.ok .dg-k{justify-content:flex-start}
  .sp-drop .sp-n{margin-right:6px}
  .sp-ch{padding:20px 14px 16px}
}

/* ── the conventional trade vs zero-PII intelligence ── */
.trade-g{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:40px}
.trade-a{padding-right:40px;border-right:1px dashed var(--rule)}
.trade-h{margin-bottom:18px}
.trade-f{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.trade-f>.nd{position:relative}
.trade-f>.nd::after{content:"";position:absolute;right:-24px;top:50%;width:24px;height:1.5px;background:var(--warn)}
.trade-c{display:grid;gap:10px;margin-left:24px;padding-left:18px;border-left:1.5px solid var(--warn)}
.trade-c li{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:8px;border:1px solid var(--nd-bd);background:var(--nd-bg);font:600 15.5px/1.3 var(--f-sans);color:var(--head)}
.trade-c li::before{content:"";position:absolute;left:-19px;top:50%;width:18px;height:1.5px;background:var(--warn)}
.trade-c svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--warn);stroke-width:1.5}
.trade-foot{margin-top:18px}
.trade-up{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.trade-up i{position:relative;flex:none;width:1.5px;height:30px;background:var(--ok)}
.trade-up i::after{content:"";position:absolute;top:-1px;left:-4.5px;border:5.25px solid transparent;border-bottom:8px solid var(--ok);border-top:0}
.trade-b .chips li{display:inline-flex;align-items:center;gap:8px}
.trade-b .chips svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--seal);stroke-width:1.5}
@container (max-width: 700px){
  .trade-g{grid-template-columns:1fr;row-gap:28px}
  .trade-a{padding:0 0 26px;border-right:0;border-bottom:1px dashed var(--rule)}
}
@container (max-width: 420px){
  .trade-f{grid-template-columns:1fr;row-gap:14px}
  .trade-f>.nd::after{display:none}
  .trade-c{margin-left:10px}
}

/* ── the attestation comparator ── */
.cmpx-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,.6fr) minmax(0,1fr);align-items:center}
.cmpx-m{display:grid;grid-template-columns:minmax(12px,1fr) auto minmax(12px,1fr);align-items:center}
.cmpx-m i{position:relative;height:1.5px;background:var(--line-c)}
.cmpx-l::after,.cmpx-r::after{content:"";position:absolute;top:-4.5px;border:5.25px solid transparent}
.cmpx-l::after{right:-1px;border-left:8px solid var(--line-c);border-right:0}
.cmpx-r::after{left:-1px;border-right:8px solid var(--line-c);border-left:0}
.cmpx-p{padding:10px 12px;border-radius:8px;border:1px solid var(--seal);font:600 14.5px/1.3 var(--f-sans);color:var(--seal);text-align:center;max-width:7em}
.cmpx-ok{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:14px;text-align:center}
.cmpx-ok svg{width:44px;height:44px;fill:none;stroke:var(--ok);stroke-width:1.8}
.cmpx-ok svg .in{opacity:.35}
.cmpx-f{align-items:flex-start}
.cmpx-f>div{display:grid;gap:4px}
.cmpx-f .r{text-align:right}
@container (max-width: 620px){
  .cmpx-g{grid-template-columns:1fr;row-gap:0}
  .cmpx-m{grid-template-columns:1fr;justify-items:start;padding:8px 0 8px 22px;row-gap:6px}
  .cmpx-m i{width:1.5px;height:18px}
  .cmpx-l::after{right:auto;top:auto;bottom:-1px;left:-4.5px;border:5.25px solid transparent;border-top:8px solid var(--line-c);border-bottom:0}
  .cmpx-r::after{left:-4.5px;top:-1px;border:5.25px solid transparent;border-bottom:8px solid var(--line-c);border-top:0}
  .cmpx-p{max-width:none}
  .cmpx-ok{align-items:flex-start;text-align:left}
  .cmpx-f .r{text-align:left}
}

/* ── the four control cards ── */
.ctl-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}
.ctl-g>.dg{margin-top:0}
.mini{padding:14px 0 4px;border-top:1px solid var(--rule)}
.mini>.dg-k:first-child{margin-bottom:12px}
.mini .chain{margin-top:2px}
.mini .bd-cross{padding-bottom:0}
.jur{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);gap:10px;align-items:end;padding-bottom:22px;position:relative}
.jur::after{content:"";position:absolute;left:8px;right:8px;bottom:6px;height:1.5px;background:var(--line-c)}
.jur li{position:relative;text-align:center}
.jur li::after{content:"";position:absolute;left:50%;bottom:-22px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;border:1.5px solid var(--line-c);background:var(--plate);z-index:1}
.jur li.seal::after{border-color:var(--ok);background:var(--ok)}
.rtbf{display:grid;gap:6px;margin-top:10px}
.rtbf b{display:block;height:8px;border-radius:4px;background:color-mix(in srgb,var(--seal) 26%,transparent)}
.rtbf b.x{width:78%;background:color-mix(in srgb,var(--seal) 10%,transparent);position:relative}
.rtbf b.x::after{content:"";position:absolute;left:-4px;right:-4px;top:3px;height:1.5px;background:var(--warn)}
@media (max-width:999px){ .ctl-g{grid-template-columns:1fr} }

/* ── network immunity without data sharing ── */
.imm-back{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.imm-back i{position:relative;flex:0 0 80px;height:1.5px;background:var(--ok)}
.imm-back i::after{content:"";position:absolute;left:-1px;top:-4.5px;border:5.25px solid transparent;border-right:8px solid var(--ok);border-left:0}
.imm-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) 22px minmax(0,1fr);align-items:center}
.imm-t{display:grid;gap:10px}
.imm-t .nd{padding:12px 14px}
.imm-t .nd-t{font-size:16.5px}
.imm-lanes{display:grid;gap:26px;padding:0 0 0 16px;border-left:1.5px solid var(--line-c);margin-left:16px}
.imm-l{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;row-gap:8px}
.imm-l .dg-k{grid-column:1 / -1}
.imm-l i{position:relative;height:1.5px}
.imm-l.no i{border-top:1.5px dashed var(--warn);height:0}
.imm-l.no svg{width:20px;height:20px;fill:none;stroke:var(--warn);stroke-width:1.6;margin-left:6px}
.imm-l.ok{grid-template-columns:1fr}
.imm-l.ok i{background:var(--ok);margin-right:-22px}
.imm-w{align-self:stretch;border-left:1.5px solid var(--seal);border-right:1.5px solid var(--seal);background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--seal) 16%,transparent) 0 1.5px,transparent 1.5px 8px)}
.imm-d{margin-left:14px}
@container (max-width: 700px){
  .imm-g{grid-template-columns:1fr;row-gap:16px}
  .imm-lanes{margin-left:0}
  .imm-l.ok i{margin-right:0}
  .imm-w{height:12px;border:0;border-top:1.5px solid var(--seal);border-bottom:1.5px solid var(--seal)}
  .imm-d{margin-left:0}
}
.jur li.nd{padding:12px 8px 14px}
@container (max-width: 440px){
  .jur{grid-template-columns:1fr;gap:8px;padding:0 0 0 22px}
  .jur::after{left:6px;right:auto;top:10px;bottom:10px;width:1.5px;height:auto}
  .jur li{text-align:left}
  .jur li::after{left:-21px;bottom:auto;top:50%;margin:-4.5px 0 0}
}
.imm-l.ok i{margin-right:-36px}
.imm-l.ok i::after{content:"";position:absolute;right:-1px;top:-4.5px;border:5.25px solid transparent;border-left:8px solid var(--ok);border-right:0}
@container (max-width: 700px){ .imm-l.ok i{margin-right:0} }

/* page-local workaround (listed for the lead): under 700px .tbl.stack makes the table a block, which leaves the caption
   as a shrink-to-fit table-caption about one word wide. Set it as a plain block line instead. */
@media (max-width:699px){ .tbl.stack caption{display:block;width:auto} }