/* #safe: "Safe for internal systems". USP 2. Text + data-flow plate on top, six commitment tiles below
 * (base .card .lift .tc, one accent per tile, the first one is the headline commitment).
 * The plate plays one process once revealed, then holds: 1 the boundary closes around Validator + our team,
 * 2 test data flows in and the testers light up, 3 the reviewed report goes out to you.
 * The drawn end state is the default: without the shell, without JS and with reduced motion it is static. */
#safe .sf-top{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:56px;align-items:center}
#safe .sf-lead{margin-top:16px;max-width:44ch}
#safe .sf-sub{margin-top:12px;font-size:15.5px;line-height:1.6;color:var(--body);max-width:44ch}
#safe .sf-cta{margin-top:26px}

/* ---------- Plate ---------- */
#safe .sf-plate{position:relative;isolation:isolate;padding:22px 26px 24px;border-radius:20px;border:1px solid #e6ebf1;box-shadow:var(--sh-lg);overflow:hidden;
  background:radial-gradient(60% 70% at 50% 45%,rgba(91,185,140,.10),transparent 70%),radial-gradient(50% 60% at 100% 0%,rgba(82,168,212,.08),transparent 70%),#fff}
#safe .sf-plate::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--grad);z-index:2}
#safe .sf-plate::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(12,21,41,.07) 1px,transparent 1.3px) 0 0/24px 24px;
  -webkit-mask-image:radial-gradient(75% 75% at 50% 50%,#000,transparent);mask-image:radial-gradient(75% 75% at 50% 50%,#000,transparent)}
#safe .sf-cap{font-size:12px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;color:var(--muted)}

#safe .sf-flow{margin-top:26px;display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1.3fr) 28px minmax(0,1fr);gap:8px;align-items:center}
#safe .sf-n{position:relative;display:grid;gap:4px;align-content:start;padding:16px;border-radius:14px;border:1px solid var(--line);background:#fff;min-width:0}
#safe .sf-ic{display:grid;place-items:center;width:32px;height:32px;margin-bottom:6px;border-radius:10px;background:color-mix(in srgb,var(--c) 14%,#fff)}
#safe .sf-ic svg,#safe .sf-ti svg{width:18px;height:18px;fill:none;stroke:var(--ci);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#safe .sf-n small{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);line-height:1.4}
#safe .sf-n b{font-size:15px;font-weight:600;line-height:1.3;letter-spacing:-.01em;overflow-wrap:anywhere}
#safe .sf-d{font-size:13px;line-height:1.45;color:var(--body)}

/* the boundary: our controlled environment around Validator + our team */
#safe .sf-vault{position:relative;padding:22px 10px 10px;border-radius:18px;border:1.5px dashed color-mix(in srgb,var(--green) 60%,#fff);
  background:color-mix(in srgb,var(--green) 6%,transparent)}
#safe .sf-tag{position:absolute;left:50%;top:0;translate:-50% -50%;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px 0 8px;border-radius:999px;
  background:#fff;border:1px solid color-mix(in srgb,var(--green) 40%,#fff);box-shadow:0 6px 14px -10px rgba(43,127,87,.45);
  font-size:12px;font-weight:600;line-height:1;color:var(--green-ink);white-space:nowrap}
#safe .sf-tag svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--green-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
#safe .sf-mid{border-color:color-mix(in srgb,var(--green) 45%,#fff);box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 12%,transparent)}

/* connectors: a grey track, the spectrum fill and an arrow head */
#safe .sf-l{position:relative;height:2px;border-radius:2px;background:#e3e9f0}
#safe .sf-l::after{content:"";position:absolute;inset:0;border-radius:inherit;transform-origin:0 50%}
#safe .sf-l::before{content:"";position:absolute;right:-1px;top:-4px;width:8px;height:8px;border-top:2px solid var(--ah);border-right:2px solid var(--ah);transform:rotate(45deg)}
#safe .sf-l1{--ah:var(--green)}#safe .sf-l1::after{background:linear-gradient(90deg,var(--orange),var(--green))}
#safe .sf-l2{--ah:var(--blue)}#safe .sf-l2::after{background:linear-gradient(90deg,var(--green),var(--blue))}

#safe .sf-ok{position:absolute;top:-9px;right:-9px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px #fff}
#safe .sf-ok svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
#safe .sf-out{border-color:color-mix(in srgb,var(--blue) 38%,#fff)}

#safe .sf-agree{margin-top:22px;padding-top:16px;border-top:1px solid var(--line-soft);display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
#safe .sf-agree > span{font-size:13px;font-weight:500;color:var(--body)}
#safe .sf-agree ul{display:flex;flex-wrap:wrap;gap:6px}
#safe .sf-agree li{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px 0 10px;border-radius:999px;background:#fff;
  border:1px solid color-mix(in srgb,var(--green) 34%,#fff);font-size:12.5px;font-weight:500;line-height:1;color:var(--green-ink);white-space:nowrap}
#safe .sf-agree li::before{content:"";width:8px;height:4px;margin-top:-3px;border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg)}

/* ---------- Commitment tiles ---------- */
#safe .sf-grid{margin-top:56px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
#safe .sf-tile .tc-body{flex:1 1 auto;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:14px;padding:24px 26px 26px;
  background:radial-gradient(120% 90% at 0% 0%,var(--tint),transparent 55%)}
#safe .sf-ti{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:color-mix(in srgb,var(--c) 15%,#fff);border:1px solid color-mix(in srgb,var(--c) 28%,#fff)}
#safe .sf-ti svg{width:21px;height:21px}
#safe .sf-tile h3{margin:0;font-size:18.5px;line-height:1.3}
#safe .sf-tile p{grid-column:1 / -1;margin-top:14px;font-size:15px;line-height:1.6}
/* the headline commitment is only a size accent; the gradient border shows on hover like every card */
#safe .sf-tile.is-key h3{font-size:19.5px}

/* ---------- Motion (only under the shell's .motion, only once the plate is in) ---------- */
@media (prefers-reduced-motion:no-preference){
  #safe .sf-vault{transition:border-color .6s ease calc(var(--rd,0s) + .3s),background-color .6s ease calc(var(--rd,0s) + .3s)}
  #safe .sf-tag{transition:opacity .45s ease calc(var(--rd,0s) + .45s),transform .5s var(--spring) calc(var(--rd,0s) + .45s)}
  #safe .sf-shackle{transition:transform .45s var(--spring) calc(var(--rd,0s) + .95s)}
  #safe .sf-l::after{transition:transform .6s var(--ease) var(--ld)}
  #safe .sf-l::before{transition:opacity .25s ease calc(var(--ld) + .5s)}
  #safe .sf-l1{--ld:calc(var(--rd,0s) + 1.45s)}#safe .sf-l2{--ld:calc(var(--rd,0s) + 2.55s)}
  #safe .sf-mid{transition:box-shadow .5s ease calc(var(--rd,0s) + 1.95s),border-color .5s ease calc(var(--rd,0s) + 1.95s)}
  #safe .sf-mid .sf-ic{transition:transform .5s var(--spring) calc(var(--rd,0s) + 1.95s)}
  #safe .sf-out{transition:border-color .5s ease calc(var(--rd,0s) + 3.05s)}
  #safe .sf-ok{transition:opacity .3s ease calc(var(--rd,0s) + 3.1s),transform .5s var(--spring) calc(var(--rd,0s) + 3.1s)}
  #safe .sf-agree li{transition:opacity .4s ease calc(var(--rd,0s) + .5s + var(--k,0) * .1s),transform .5s var(--spring) calc(var(--rd,0s) + .5s + var(--k,0) * .1s)}

  #safe:is(.motion *) .rv:not(.is-in) .sf-vault{border-color:transparent;background-color:transparent}
  #safe:is(.motion *) .rv:not(.is-in) .sf-tag{opacity:0;transform:translateY(5px) scale(.92)}
  #safe:is(.motion *) .rv:not(.is-in) .sf-shackle{transform:translateY(-3.5px)}
  #safe:is(.motion *) .rv:not(.is-in) .sf-l::after{transform:scaleX(0)}
  #safe:is(.motion *) .rv:not(.is-in) .sf-l::before{opacity:0}
  #safe:is(.motion *) .rv:not(.is-in) .sf-mid{box-shadow:none;border-color:var(--line)}
  #safe:is(.motion *) .rv:not(.is-in) .sf-mid .sf-ic{transform:scale(.8)}
  #safe:is(.motion *) .rv:not(.is-in) .sf-out{border-color:var(--line)}
  #safe:is(.motion *) .rv:not(.is-in) .sf-ok{opacity:0;transform:scale(.4)}
  #safe:is(.motion *) .rv:not(.is-in) .sf-agree li{opacity:0;transform:translateY(5px) scale(.94)}
}

/* ---------- Laptop and tablet ---------- */
@media (max-width:1240px){
  #safe .sf-top{grid-template-columns:1fr;gap:40px}
  #safe .sf-lead,#safe .sf-sub{max-width:60ch}
}
@media (max-width:900px){#safe .sf-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:40px}}

/* ---------- Phones: compact plate, tiles in one swipe row ---------- */
@media (max-width:640px){
  #safe .sf-top{gap:22px}
  #safe .sf-cta{margin-top:20px}
  #safe .sf-plate{padding:16px 12px 14px;border-radius:16px}
  #safe .sf-cap,#safe .sf-agree{display:none}
  #safe .sf-plate{padding-top:20px}
  #safe .sf-flow{margin-top:12px;grid-template-columns:minmax(0,.9fr) 12px minmax(0,1.3fr) 12px minmax(0,.9fr);gap:5px}
  #safe .sf-n{padding:10px 8px;gap:2px;border-radius:12px}
  #safe .sf-ic{width:26px;height:26px;margin-bottom:4px;border-radius:8px}
  #safe .sf-ic svg{width:15px;height:15px}
  #safe .sf-n small{font-size:12px;letter-spacing:0;text-transform:none;line-height:1.3}
  #safe .sf-n b{font-size:13px;line-height:1.25}
  #safe .sf-d,#safe .sf-x{display:none}
  #safe .sf-vault{padding:18px 5px 5px;border-radius:14px}
  #safe .sf-tag{height:24px;padding:0 9px 0 7px;gap:4px;font-size:12px}
  #safe .sf-tag svg{width:13px;height:13px}
  #safe .sf-l::before{width:6px;height:6px;top:-3px;border-width:2px}
  #safe .sf-ok{width:18px;height:18px;top:-7px;right:-7px}
  #safe .sf-ok svg{width:12px;height:12px}

  #safe .sf-grid{display:flex;gap:12px;margin:22px calc(var(--gutter) * -1) 0;padding:4px var(--gutter) 14px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  #safe .sf-grid::-webkit-scrollbar{display:none}
  #safe .sf-tile{flex:0 0 min(272px,calc(100% - 56px));scroll-snap-align:start}
  #safe .sf-tile .tc-body{padding:18px 18px 20px;column-gap:12px}
  #safe .sf-ti{width:36px;height:36px;border-radius:10px}
  #safe .sf-ti svg{width:18px;height:18px}
  #safe .sf-tile h3,#safe .sf-tile.is-key h3{font-size:16.5px}
  #safe .sf-tile p{margin-top:10px;font-size:14px;line-height:1.55}
}