/* SSFD card FRONT. Same geometry as the NSL reference card: landscape 1.72, container units (cqw) so the
   layout scales with the card and stays correct when the card is turned sideways on portrait phones.
   Colours from the SSFD site; the card ground matches the lockup image's own navy. */
.ssfd-front{--ssfd-blue:#0067fc;--ssfd-blue-lit:#2f86ff;--ssfd-ink:#ffffff;--ssfd-muted:rgba(255,255,255,.72);--ssfd-line:rgba(255,255,255,.14);--ssfd-wa:#25d366;
  --ssfd-font:"Open Sans",system-ui,"Segoe UI",sans-serif;
  --w:min(760px,calc(100vw - 32px),calc((100svh - 32px) * 1.72));
  position:relative;box-sizing:border-box;width:var(--w);aspect-ratio:1.72;container-type:inline-size;overflow:hidden;
  display:flex;flex-direction:column;color:var(--ssfd-ink);font-family:var(--ssfd-font);border-radius:clamp(18px,3.4cqw,30px);
  border:1px solid var(--ssfd-line);
  background:
    linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,0) 38%),
    repeating-linear-gradient(112deg,rgba(255,255,255,.018) 0 1px,rgba(255,255,255,0) 1px 7px),
    radial-gradient(120% 90% at 100% 100%,#0a1a3a,#010818 62%);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 30px 60px -30px rgba(0,0,0,.8)}
.ssfd-front *{box-sizing:border-box}
/* SSFD blue edge, the accent the site uses under headings */
.ssfd-front::before{content:"";position:absolute;left:0;top:0;bottom:0;width:max(.7cqw,4px);background:var(--ssfd-blue)}
.ssfd-front-body{position:relative;z-index:1;flex:1;min-height:0;display:grid;grid-template-columns:max(42%,calc(176px + 4.2cqw + 2px)) 1fr;gap:3.4cqw;padding:3.6cqw 4.6cqw 3.6cqw 5.4cqw}
.ssfd-front-left{display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;align-items:center;min-width:0;min-height:0;gap:2cqw}
.ssfd-front-logo{display:block;max-width:100%;max-height:100%;width:auto;height:auto;
  /* the JPG carries its own slightly lighter ground: fade its edges into the card */
  -webkit-mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 90%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 90%,transparent);
  mask-composite:intersect}
.ssfd-front-actions{display:grid;grid-template-columns:repeat(4,max(7.4cqw,40px));gap:max(1.4cqw,6px);justify-content:center}
.ssfd-act{display:grid;place-items:center;width:100%;aspect-ratio:1;padding:0;border-radius:max(1.8cqw,10px);
  border:1.5px solid rgba(47,134,255,.6);background:rgba(0,103,252,.1);color:var(--ssfd-blue-lit);cursor:pointer;text-decoration:none}
.ssfd-act svg{width:48%;height:48%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ssfd-act:active{transform:scale(.95)}
.ssfd-act:focus-visible,.ssfd-front a:focus-visible{outline:2px solid var(--ssfd-blue-lit);outline-offset:3px}
.ssfd-front-right{display:flex;flex-direction:column;justify-content:center;min-width:0}
.ssfd-front-name{margin:0;font:800 max(6.2cqw,24px)/1.05 var(--ssfd-font);letter-spacing:.01em}
.ssfd-front-phone{display:flex;align-items:center;gap:1.6cqw;margin:3cqw 0 0;font:700 max(4.2cqw,18px)/1 var(--ssfd-font);letter-spacing:.01em;white-space:nowrap}
.ssfd-front-phone a{color:inherit;text-decoration:none}
.ssfd-front-phone-ico{display:inline-grid;color:var(--ssfd-blue-lit)}
.ssfd-front-phone-ico svg{width:max(3.4cqw,16px);height:max(3.4cqw,16px);fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ssfd-front .ssfd-front-wa{display:grid;place-items:center;flex-shrink:0;width:max(6cqw,40px);height:max(6cqw,40px);border-radius:50%;margin-left:.6cqw;
  background:radial-gradient(circle at 35% 30%,#5cf08f,var(--ssfd-wa) 60%,#139a48);color:#062b14;box-shadow:0 0 2.4cqw rgba(37,211,102,.45)}
.ssfd-front-wa svg{width:56%;height:56%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ssfd-front-line{margin:1.8cqw 0 0;font:400 max(2.3cqw,12px)/1.2 var(--ssfd-font);letter-spacing:.02em;white-space:nowrap}
.ssfd-front-line a{color:var(--ssfd-muted);text-decoration:none}
.ssfd-front-toast{position:absolute;z-index:2;left:50%;bottom:5cqw;margin:0;padding:1.2cqw 2.4cqw;border-radius:99px;background:#ffffff;color:#010818;
  font:600 max(1.9cqw,12px)/1 var(--ssfd-font);transform:translateX(-50%);opacity:0;transition:opacity .25s;pointer-events:none}
.ssfd-front-toast.is-on{opacity:1}
/* Portrait phones: turn the landscape card sideways. Put .ssfd-front inside .ssfd-front-host. */
.ssfd-front-host{position:fixed;inset:0;display:grid;place-items:center;overflow:hidden}
@media (orientation:portrait) and (max-width:760px){
  .ssfd-front-host .ssfd-front{--w:min(760px,calc(100svh - 36px),calc((100vw - 24px) * 1.72));position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%) rotate(90deg)}
}