/* /solutions: page-local drawing parts, set in HTML from the system's tokens only.
   The roadmap seam, HS-SOL-01 (five lenses, one boundary), the forks (01-03), the timeline (05), the seats. */

.split > .aside{margin-top:0}
.split .prose .actions{margin-top:28px}

/* ── the roadmap seam ── */
.road-art{height:130px}
.road-art .pt{fill:none;stroke:var(--line-c);stroke-width:5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.road-art .tick{fill:none;stroke:var(--line-c);stroke-width:1;stroke-dasharray:2 5;opacity:.7;vector-effect:non-scaling-stroke}
@media (max-width:699px){ .road-art{height:110px} }

/* the three mandates */
.mand3 h3 em{font-style:normal;color:var(--acc)}
.mand3 p a{color:var(--head);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

/* ── HS-SOL-01: five lenses, one boundary ── */
.lens{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.45fr) minmax(0,1fr);gap:10px}
.lens a{position:relative;display:flex;flex-direction:column;align-items:center;height:100%;padding:14px 8px 34px;border-radius:10px;text-align:center;text-decoration:none;color:inherit;transition:background-color .2s var(--ease)}
.lens a::after{content:"";position:absolute;left:50%;bottom:0;width:1.5px;height:26px;background:var(--line-c)}
.lens a:hover{background:color-mix(in srgb,var(--head) 5%,transparent)}
.lens a:hover .lens-t{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.lens-n{font:600 14px/1 var(--f-sans);letter-spacing:.04em;color:var(--seal)}
.lens-o{position:relative;display:block;width:64px;height:64px;margin:12px 0 14px;border-radius:50%;border:1.5px solid var(--line-c);background:var(--nd-bg)}
.lens-o::before{content:"";position:absolute;inset:10px;border-radius:50%;border:1.1px solid color-mix(in srgb,var(--seal) 50%,transparent)}
.lens-o::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--seal)}
.lens li:nth-child(4) .lens-o{border-color:var(--seal);border-width:2px}
.lens-t{font:600 16px/1.35 var(--f-sans);color:var(--head);text-wrap:balance}
.lens-m{margin-top:auto;padding-top:10px;font:600 14px/1.3 var(--f-sans);letter-spacing:.02em;color:var(--label)}
.lens-b{position:relative;padding:8px 12px;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) 14%,transparent) 0 1.5px,transparent 1.5px 8px);text-align:center}
.lens-b span{display:inline-block;padding:2px 12px;border-radius:4px;background:var(--plate);font:600 14.5px/1.3 var(--f-sans);letter-spacing:.02em;color:var(--seal)}
.lens-th{margin-top:22px;text-align:center;font:500 22px/1.35 var(--f-head);color:var(--head);text-wrap:balance}
@container (max-width: 700px){
  .lens{grid-template-columns:1fr;gap:6px}
  .lens a{display:grid;grid-template-columns:28px 40px minmax(0,1fr);grid-template-areas:"n o t" "n o m";align-items:center;column-gap:12px;row-gap:2px;padding:10px 8px;text-align:left}
  .lens a::after{display:none}
  .lens-n{grid-area:n}
  .lens-o{grid-area:o;width:40px;height:40px;margin:0}
  .lens-o::before{inset:7px}
  .lens-t{grid-area:t;align-self:end}
  .lens-m{grid-area:m;align-self:start;margin:0;padding:0}
  .lens-b{margin-top:10px}
  .lens-th{font-size:19px;text-align:left}
}

/* ── the forks: one input, a gate, two outcomes ── */
.fk-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,.7fr) minmax(0,1.5fr);align-items:center}
.fk-in{display:flex;flex-direction:column;gap:10px}
.fk-in i{position:relative;display:block;height:10px;background:radial-gradient(circle,var(--acc) 0 3.2px,transparent 3.8px) 0 50%/26px 10px repeat-x}
.fk-in i::after{content:"";position:absolute;right:-1px;top:.5px;border:4.5px solid transparent;border-left:8px solid var(--line-c);border-right:0}
.fk-in.mixed i{background:radial-gradient(circle,var(--acc) 0 3.2px,transparent 3.8px) 0 50%/52px 10px repeat-x,radial-gradient(circle,transparent 0 2.6px,var(--warn) 2.8px 4.2px,transparent 4.6px) 26px 50%/52px 10px repeat-x}
.fk-gate{margin:0 14px;padding:14px 12px;text-align:center;border-style:dashed;border-color:var(--seal)}
.fk-gate.warn{border-color:var(--warn)}
.fk-gc{display:flex;flex-direction:column;align-items:center}
.fk-gc .fk-gate{align-self:stretch}
.fk-drop{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:0;font:600 14px/1.35 var(--f-sans);color:var(--warn);text-align:center}
.fk-drop i{position:relative;width:1.5px;height:24px;background:var(--warn)}
.fk-drop i::after{content:"";position:absolute;bottom:-1px;left:-4.5px;border:5.25px solid transparent;border-top:8px solid var(--warn);border-bottom:0}
.fk-out{display:grid;gap:14px;padding:6px 0;border-left:1.5px solid var(--line-c)}
.fk-out li{display:grid;grid-template-columns:36px 20px minmax(0,1fr);align-items:center;column-gap:10px}
.fk-out i{position:relative;height:1.5px;background:var(--ok)}
.fk-out li.warn i{height:0;background:none;border-top:1.5px dashed var(--warn)}
.fk-out svg{width:20px;height:20px;fill:none;stroke-width:1.6}
.fk-out li.ok svg{stroke:var(--ok)}
.fk-out li.warn svg{stroke:var(--warn)}
.fk-r{font:600 14px/1.35 var(--f-sans);letter-spacing:.02em;color:var(--label)}
.fk-o{font:600 15.5px/1.4 var(--f-sans);color:var(--head)}
.fk-out li.ok .fk-o{color:var(--ok)}
.fk-out li.warn .fk-o{color:var(--warn)}
.fk-out li.ok .fk-r{color:var(--ok)}
.fk-out li.warn .fk-r{color:var(--warn)}
@container (max-width: 620px){
  .fk-g{grid-template-columns:1fr;row-gap:14px}
  .fk-gate{margin:0}
  .fk-gc{align-items:stretch}
  .fk-drop{align-items:flex-start;flex-direction:row;padding-left:20px;margin-top:6px}
  .fk-drop i{height:18px}
  .fk-out{padding:0}
  .fk-out li{grid-template-columns:18px 20px minmax(0,1fr)}
}

/* ── the timeline: ranked before the form ── */
.tl-h{margin-bottom:12px}
.tl-g{display:grid;grid-template-columns:3fr 4.6fr 2.4fr;grid-template-rows:auto 22px auto;row-gap:6px}
.tl-l1{grid-column:1;grid-row:1;justify-self:end;margin-right:-8px}
.tl-l2{grid-column:2;grid-row:1;justify-self:end;margin-right:-8px;text-align:right}
.tl-g i{position:relative;grid-row:2;align-self:center;height:1.5px;background:var(--line-c)}
.tl-s1{grid-column:1;background:var(--ok)!important}
.tl-s1::before{content:"";position:absolute;left:-2px;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--ok)}
.tl-s1::after{content:"";position:absolute;right:-10px;top:-9.5px;width:20px;height:20px;border-radius:50%;border:1.6px solid var(--ok);background:color-mix(in srgb,var(--ok) 18%,var(--plate));z-index:1}
.tl-s2{grid-column:2}
.tl-s2::after{content:"";position:absolute;right:-7px;top:-6.5px;width:14px;height:14px;border-radius:50%;border:1.5px solid var(--line-c);background:var(--plate);z-index:1}
.tl-s3{grid-column:3;opacity:.5}
.tl-d{grid-column:2;grid-row:3;padding-top:10px;margin:0 0 0 10px;border-top:1.5px solid var(--seal);text-align:center;position:relative}
.tl-d::before,.tl-d::after{content:"";position:absolute;top:-6px;width:1.5px;height:11px;background:var(--seal)}
.tl-d::before{left:0} .tl-d::after{right:0}

/* ── the seats ── */
.seats .tt .t{font-size:20px}
.seat-t{font:600 19px/1.35 var(--f-sans)!important;color:var(--head)!important}
.seats .tt + div>p + p{margin-top:8px}
.seat-l{font-size:16px!important;color:var(--label)!important}
.seat-l a{color:var(--head);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

/* ── lists in the "what it gives you" panel ── */
.gl{margin-top:12px}
.gl li{position:relative;padding:10px 0 10px 20px;border-top:1px solid var(--rule);font-size:16.5px;line-height:1.55;color:var(--body)}
.gl li::before{content:"";position:absolute;left:2px;top:19px;width:7px;height:7px;border-radius:50%;background:var(--ok)}
.gives .small{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule)}

/* ── HS-SOL-02 (the sealed path) ── */
/* Desktop: the your-side panel starts level with the HiveSilo card, "Your website" sits at the top of it with the
   signal leaving it, the HiveSilo card spans the signal and port rows, and the caption sits beside the title block. */
@media (min-width:1000px){
  .dg.bd .bd-a{grid-row:2 / 6}
  .dg.bd .bd-a>.r2{grid-row:1} .dg.bd .bd-a>.r3{grid-row:2} .dg.bd .bd-a>.r4{grid-row:3} .dg.bd .bd-a>.r5{grid-row:4}
  .dg.bd .bd-b>.r2{grid-row:2 / 4;align-self:start}
  .dg.bd{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,.72fr);column-gap:36px}
  .dg.bd>.bd-grid{grid-column:1 / -1}
  .dg.bd>.bd-foot.solo{grid-column:2;grid-row:2;display:block}
  .dg.bd>figcaption{grid-column:1;grid-row:2;align-self:start;margin:50px 0 0}
}
/* Narrow screens: every arrow keeps its origin. Your website on top; its non-PII signal runs down the left lane,
   straight through the custody boundary to HiveSilo; its form data drops beside that lane into your enclave;
   the single sealed result rises from HiveSilo through the boundary into the enclave's column. */
@media (max-width:999px){
  .dg.bd .bd-a{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:12px;position:relative;overflow:hidden;padding:18px 12px 0}
  .dg.bd .bd-a>.r2{grid-column:1 / -1;grid-row:1;align-self:start}
  .dg.bd .bd-a>.r2::after{content:"";position:absolute;left:12px;top:100%;width:1.5px;height:4000px;background:var(--line-c)}
  .dg.bd .bd-a>.r3{grid-column:2;grid-row:2;padding:12px 0 12px 22px}
  .dg.bd .bd-a>.r4{grid-column:2;grid-row:3;align-self:start}
  .dg.bd .bd-a>.r5{grid-column:2;grid-row:4;margin:14px 0 16px}
  .dg.bd .bd-w{display:grid;grid-template-columns:30px minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 44px auto;column-gap:12px;margin:0;padding:0 13px}
  .dg.bd .bd-x{display:contents}
  .dg.bd .bd-x i{grid-row:1 / 4;align-self:stretch;width:1.5px;height:auto;min-height:0}
  .dg.bd .bd-x.out i{grid-column:1;justify-self:start;margin-left:13px}
  .dg.bd .bd-x.in i{grid-column:3;justify-self:end;margin-right:14px}
  .dg.bd .bd-x b{grid-row:1;align-self:end;margin:0;padding:14px 0 10px;background:none}
  .dg.bd .bd-x.out b{grid-column:2;text-align:left}
  .dg.bd .bd-x.in b{grid-column:3;padding-right:28px;text-align:right}
  .dg.bd .bd-w>.bd-lines{grid-row:2;grid-column:1 / -1;position:relative;top:auto;align-self:center;height:8px;margin:0 -13px}
  .dg.bd .bd-w>.bd-port{grid-row:2;grid-column:2 / 4;justify-self:center;align-self:center;margin:0}
  .dg.bd .bd-w .bd-wl{grid-row:3;grid-column:2 / 4;justify-self:start;align-self:start;padding:8px 0 14px;text-align:left}
  .dg.bd .bd-b{padding:0}
}

/* the closing panel's two fine lines */
.brief-fine{margin-top:26px;font-size:15.5px;line-height:1.5;color:#cfc9dc}
.brief-note{margin-top:8px;font-size:15.5px;line-height:1.5;color:#cfc9dc}
.brief-note a{color:#f3eee4;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

/* 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} }

/* release port (SEO-15): the seat titles are <h3> again; the heading defaults they would inherit are undone */
h3.seat-t{letter-spacing:normal;text-wrap:pretty}
.seats .tt + div>h3.seat-t + p{margin-top:8px}