/* Summitsoft modern design system (scoped to #ssx). Shared by front page + product landing template. */
#ssx{
  --ink:#141310; --ink2:#1e1c17; --gold:#f5a300; --gold-dk:#d98a00; --amber:#ffc247;
  --paper:#ffffff; --mist:#f7f6f3; --slate:#615c54; --line:#e9e7e2; --dline:#302c24;
  --dtext:#eee9df; --dmute:#a79f92;
  --shadow:0 1px 2px rgba(20,18,15,.05),0 18px 40px -22px rgba(20,18,15,.28);
  --shadow-lg:0 40px 90px -44px rgba(20,18,15,.55);
  --disp:"Archivo",Impact,system-ui,sans-serif; --body:"Figtree",system-ui,-apple-system,sans-serif;
  --serif:"Fraunces",Georgia,serif; --r:16px;
  font-family:var(--body); color:var(--ink); background:var(--paper);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
#ssx *{box-sizing:border-box}
#ssx .wrap{max-width:1220px;margin:0 auto;padding:0 26px}
#ssx h1,#ssx h2,#ssx h3,#ssx h4{font-family:var(--disp);font-weight:800;line-height:1.03;letter-spacing:-.02em;margin:0;text-wrap:balance;color:var(--ink)}
#ssx a{color:inherit;text-decoration:none}
#ssx img{max-width:100%}
#ssx .ey{font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-dk);display:inline-block}
#ssx .btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--body);font-weight:700;font-size:16px;border-radius:11px;padding:14px 24px;border:2px solid transparent;cursor:pointer;transition:.18s;line-height:1}
#ssx .btn-p{background:var(--gold);color:#1a1710;box-shadow:0 12px 26px -12px rgba(245,163,0,.75)}
#ssx .btn-p:hover{background:var(--gold-dk);color:#1a1710}
#ssx .btn-o{background:transparent;color:var(--ink);border-color:var(--line)}
#ssx .btn-o:hover{border-color:var(--ink);color:var(--ink)}
#ssx .btn-ghost{background:transparent;color:var(--dtext);border-color:rgba(255,255,255,.22)}
#ssx .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06);color:#fff}
#ssx .btn.csm{padding:10px 18px;font-size:14px}
#ssx section{padding:80px 0}
#ssx .center{text-align:center;margin-left:auto;margin-right:auto}
/* hero */
#ssx .hero{background:var(--ink);color:var(--dtext);position:relative;overflow:hidden}
#ssx .hero::before{content:"";position:absolute;top:-30%;left:-10%;width:55%;height:160%;background:radial-gradient(closest-side,rgba(245,163,0,.10),transparent);pointer-events:none}
#ssx .hgrid{display:grid;grid-template-columns:1fr 1.12fr;gap:56px;align-items:center;padding:66px 0 74px;position:relative}
#ssx .hero h1{font-size:clamp(40px,5.4vw,64px);font-weight:900;color:#fff}
#ssx .hero h1 em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--gold);letter-spacing:-.01em}
#ssx .hero p.lead{font-size:20px;color:var(--dmute);max-width:42ch;margin:24px 0 32px}
#ssx .cta{display:flex;gap:14px;flex-wrap:wrap}
#ssx .rate{display:flex;align-items:center;gap:10px;margin-top:30px;flex-wrap:wrap;font-size:14.5px;color:var(--dmute)}
#ssx .stars{color:var(--gold);letter-spacing:1px}
#ssx .rate b{color:#fff}
#ssx .mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;align-items:start}
#ssx .mcol{display:flex;flex-direction:column;gap:13px}
#ssx .mcol.mid{margin-top:38px}
#ssx .tile{position:relative;border-radius:14px;overflow:hidden;box-shadow:0 20px 40px -24px rgba(0,0,0,.7);background:var(--ink2);margin:0}
#ssx .tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
#ssx .tile:hover img{transform:scale(1.05)}
#ssx .tile.tall{aspect-ratio:3/4}#ssx .tile.sq{aspect-ratio:1/1}#ssx .tile.wide{aspect-ratio:4/3}
#ssx .tile .cap{position:absolute;left:10px;bottom:10px;background:rgba(20,18,15,.72);color:#fff;font-size:11px;font-weight:700;padding:5px 10px;border-radius:20px}
#ssx .hsingle img{width:100%;border-radius:var(--r);box-shadow:0 30px 70px -34px rgba(0,0,0,.8);border:1px solid var(--dline);display:block}
/* section heads */
#ssx .shead{max-width:680px}
#ssx .shead h2{font-size:clamp(30px,4.3vw,46px);font-weight:900;margin:12px 0 0}
#ssx .shead p{color:var(--slate);font-size:18.5px;margin:14px 0 0}
/* brands strip */
#ssx .brands{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--mist)}
#ssx .brands .in{padding:24px 0;display:flex;align-items:center;gap:32px;flex-wrap:wrap;justify-content:center}
#ssx .brands .lbl{font-size:13px;color:var(--slate);font-weight:600}
#ssx .brands img{height:32px;width:auto;opacity:.85;filter:grayscale(1);transition:.2s}
#ssx .brands img:hover{filter:none;opacity:1}
#ssx .brands .txt{font-family:var(--disp);font-weight:800;font-size:18px;color:rgba(20,18,15,.42)}
/* pillars */
#ssx .trio{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:42px}
#ssx .pcard{position:relative;border-radius:var(--r);overflow:hidden;min-height:260px;display:flex;flex-direction:column;justify-content:flex-end;padding:26px;color:#fff;border:1px solid var(--dline)}
#ssx .pcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
#ssx .pcard.boxed img{object-fit:contain;background:#101010;padding:22px}
#ssx .pcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,15,.25),rgba(20,18,15,.86));z-index:1}
#ssx .pcard>*{position:relative;z-index:2}
#ssx .pcard .num{font-family:var(--disp);font-weight:800;font-size:12px;letter-spacing:.14em;color:var(--amber)}
#ssx .pcard h3{color:#fff;font-size:25px;margin:8px 0 6px}
#ssx .pcard p{color:rgba(255,255,255,.82);font-size:14.5px;margin:0 0 14px}
#ssx .pcard .go{font-weight:700;font-size:14px;color:var(--amber)}
/* product cards */
#ssx .prods{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:42px}
#ssx .prods.cols2{grid-template-columns:repeat(2,1fr);max-width:720px;margin-left:auto;margin-right:auto}
#ssx .prods.cols3{grid-template-columns:repeat(3,1fr)}
#ssx .card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.18s}
#ssx .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(245,163,0,.55)}
#ssx .card .shot{position:relative;background:var(--mist);padding:22px 22px 12px;display:grid;place-items:center;aspect-ratio:4/3}
#ssx .card .shot img{max-height:150px;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 14px 22px rgba(20,18,15,.22))}
#ssx .card .tag{position:absolute;top:12px;left:12px;font-family:var(--disp);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);background:var(--paper);border:1px solid var(--line);padding:4px 9px;border-radius:20px}
#ssx .card .body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
#ssx .card h3{font-size:16.5px;line-height:1.15}
#ssx .card p{color:var(--slate);font-size:13.5px;margin:6px 0 0;flex:1}
#ssx .card .foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px;gap:10px}
#ssx .card .pr{font-family:var(--disp);font-weight:900;font-size:19px;color:var(--ink)}
#ssx .card .pr.call{font-size:15px;color:var(--gold-dk)}
#ssx .card .pr del{font-family:var(--body);font-weight:500;font-size:13px;color:var(--slate);margin-right:6px;opacity:.9}
#ssx .card .pr ins{text-decoration:none}
#ssx .card .shop{font-size:13px;font-weight:700;color:#1a1710;background:var(--gold);padding:8px 13px;border-radius:9px;white-space:nowrap}
#ssx .card:hover .shop{background:var(--gold-dk)}
#ssx .allprod{text-align:center;margin-top:40px}
/* value band */
#ssx .band{background:var(--ink);color:var(--dtext);border-radius:24px;padding:58px;position:relative;overflow:hidden}
#ssx .band::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,transparent 0 22px,rgba(245,163,0,.05) 22px 24px);pointer-events:none}
#ssx .band>*{position:relative}
#ssx .band .ey{color:var(--amber)}
#ssx .band h2{color:#fff;font-size:clamp(28px,3.6vw,40px);max-width:18ch}
#ssx .vals{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:38px}
#ssx .val .n{font-family:var(--disp);font-weight:900;font-size:44px;color:var(--gold);line-height:1}
#ssx .val h4{font-size:16px;margin:12px 0 4px;color:#fff;font-weight:700}
#ssx .val p{color:var(--dmute);font-size:14px;margin:0}
/* landing feature cards */
#ssx .lfeats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:42px}
#ssx .lfeat{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:24px}
#ssx .lfeat .ic{width:44px;height:44px;border-radius:12px;background:rgba(245,163,0,.14);color:var(--gold-dk);display:grid;place-items:center;font-size:20px;font-weight:900;font-family:var(--disp)}
#ssx .lfeat h4{font-size:16.5px;margin:14px 0 6px}
#ssx .lfeat p{color:var(--slate);font-size:14px;margin:0}
/* landing showcase gallery */
#ssx .lgal{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:42px}
#ssx .lgal figure{margin:0;position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);aspect-ratio:4/3}
#ssx .lgal img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
#ssx .lgal figure:hover img{transform:scale(1.04)}
#ssx .lgal figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px 14px 12px;color:#fff;font-size:12.5px;font-weight:600;background:linear-gradient(transparent,rgba(0,0,0,.72))}
/* online split */
#ssx .split{display:grid;grid-template-columns:1.05fr 1fr;gap:50px;align-items:center}
#ssx .split img{width:100%;border-radius:var(--r);box-shadow:var(--shadow-lg);border:1px solid var(--line);display:block}
#ssx .chk{display:flex;gap:12px;margin:15px 0}
#ssx .chk .k{width:26px;height:26px;border-radius:8px;background:rgba(245,163,0,.16);color:var(--gold-dk);display:grid;place-items:center;flex:none;font-weight:900;font-size:14px}
#ssx .chk b{display:block;color:var(--ink)}
#ssx .chk span{color:var(--slate);font-size:14.5px}
/* comparison table */
#ssx .ctable{margin-top:40px;border:1px solid var(--line);border-radius:18px;overflow-x:auto;background:var(--paper);box-shadow:var(--shadow)}
#ssx .crow{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;align-items:center;min-width:640px}
#ssx .crow+.crow{border-top:1px solid var(--line)}
#ssx .crow .cfeat{padding:15px 22px;font-size:14.5px;color:var(--ink);font-weight:600}
#ssx .crow>div:not(.cfeat){text-align:center;padding:15px 12px;font-size:15px}
#ssx .crow .cy{color:var(--gold-dk);font-weight:800}
#ssx .crow .cn{color:#b9b3a8}
#ssx .crow .cv{color:var(--slate);font-size:13.5px;font-weight:600}
#ssx .chead{background:var(--mist)}
#ssx .chead .cplan{position:relative;padding:22px 12px}
#ssx .chead .cplan h4{font-family:var(--disp);font-weight:800;font-size:15px;margin:0}
#ssx .chead .cplan.feat{background:var(--ink);color:#fff;border-radius:14px 14px 0 0}
#ssx .chead .cplan.feat h4{color:#fff}
#ssx .cprice{font-family:var(--disp);font-weight:900;font-size:30px;margin:8px 0 0;color:var(--ink)}
#ssx .chead .cplan.feat .cprice{color:#fff}
#ssx .cprice span{font-size:14px;font-weight:700;color:var(--slate)}
#ssx .chead .cplan.feat .cprice span{color:var(--dmute)}
#ssx .csub{font-size:12.5px;color:var(--slate);margin-bottom:12px}
#ssx .chead .cplan.feat .csub{color:var(--dmute)}
#ssx .cflag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--gold);color:#1a1710;font-family:var(--disp);font-weight:800;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:4px 11px;border-radius:20px;white-space:nowrap}
/* B2B quote band */
#ssx .quote{background:var(--ink);color:var(--dtext);border-radius:24px;padding:54px;position:relative;overflow:hidden;text-align:center}
#ssx .quote::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,transparent 0 22px,rgba(245,163,0,.05) 22px 24px);pointer-events:none}
#ssx .quote>*{position:relative}
#ssx .quote .ey{color:var(--amber)}
#ssx .quote h2{color:#fff;font-size:clamp(26px,3.4vw,38px);max-width:22ch;margin:6px auto 0}
#ssx .quote h2 em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--gold)}
#ssx .quote p{color:var(--dmute);max-width:56ch;margin:16px auto 26px;font-size:16.5px}
/* final banner */
#ssx .final{position:relative;text-align:center;padding:110px 0;color:#fff;overflow:hidden;background:var(--ink)}
#ssx .final .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.42}
#ssx .final::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 120% at 50% 0,rgba(20,18,15,.5),rgba(20,18,15,.9));z-index:1}
#ssx .final .wrap{position:relative;z-index:2}
#ssx .final h2{font-size:clamp(32px,5vw,54px);font-weight:900;max-width:18ch;margin:0 auto;color:#fff}
#ssx .final h2 em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--gold)}
#ssx .final p{color:rgba(255,255,255,.85);font-size:19px;margin:18px auto 30px;max-width:44ch}
#ssx .final .cta{justify-content:center}
#ssx .final .btn-o{color:#fff;border-color:rgba(255,255,255,.35)}
#ssx .final .btn-o:hover{border-color:#fff;color:#fff}
@media(max-width:960px){#ssx .hgrid{grid-template-columns:1fr;gap:38px;padding:48px 0 56px}#ssx .mcol.mid{margin-top:0}}
@media(max-width:900px){#ssx .prods{grid-template-columns:repeat(2,1fr)}#ssx .lfeats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){#ssx .split{grid-template-columns:1fr;gap:32px}}
@media(max-width:820px){#ssx .trio{grid-template-columns:1fr}}
@media(max-width:760px){#ssx .vals{grid-template-columns:repeat(2,1fr)}#ssx .ctable{overflow-x:auto}#ssx .crow{grid-template-columns:1.4fr 90px 90px 90px;min-width:560px}#ssx .lgal{grid-template-columns:1fr 1fr}}
@media(max-width:480px){#ssx .prods,#ssx .prods.cols2,#ssx .prods.cols3{grid-template-columns:1fr}#ssx .lfeats{grid-template-columns:1fr}}

/* SSX-CFLAG-FIX: .ctable has overflow-x:auto, which clipped the badge that was
   positioned at top:-11px (outside the card). Bring it inside the card. */
#ssx .chead .cplan{padding-top:40px;}
#ssx .cflag{top:12px;}

/* retailer row: where Summitsoft software is sold. Deliberately uniform
   wordmarks rather than a mix of raster logos - the site only had Staples
   artwork, so one real logo beside two gaps looked broken. Swap any of these
   spans for an <img> when the official asset is supplied; .brands img is
   already styled (32px, grayscale, colour on hover). */
#ssx .brands .rtl{font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:-.01em;color:rgba(20,18,15,.55);transition:color .2s}
#ssx .brands .rtl:hover{color:rgba(20,18,15,.8)}
@media (max-width:640px){
  #ssx .brands .in{gap:18px}
  #ssx .brands .rtl{font-size:16px}
}