/* 7Stock public site — sub-page CSS (/site/lp.css, loaded with the first sub-page). Scoped under #pp; tokens come from the inline critical CSS. */
#pp .lp-ph{padding:56px 0 40px;background:linear-gradient(180deg,var(--card),var(--bg));border-bottom:1px solid var(--line)}
#pp .lp-ph h1{font-size:clamp(26px,3.2vw,38px);line-height:1.35;font-weight:800;letter-spacing:-.015em;max-width:800px;text-wrap:balance}
#pp .lp-ph p{margin-top:12px;color:var(--ink2);font-size:16px;max-width:680px}
#pp .lp-crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mut);margin-bottom:14px;flex-wrap:wrap}
#pp .lp-crumb a:hover{color:var(--brand);text-decoration:underline;text-underline-offset:4px}
#pp .lp-ph.has-ph{border-bottom:0;padding-bottom:28px}
#pp .sol-hero{padding:0 0 24px;background:linear-gradient(180deg,var(--bg),var(--bg))}
#pp .sol-hero .ph{box-shadow:var(--sh2)}
@media (max-width:760px){#pp .lp-ph{padding:36px 0 28px}}

#pp .two{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center}
#pp .two h2{margin-bottom:8px}
#pp .two>div>p{color:var(--ink2);font-size:15px}
#pp .two .lp-acts{margin-top:26px}
#pp .two .ph{box-shadow:var(--sh2)}
#pp .two:has(.side-card){align-items:start}
@media (max-width:860px){#pp .two{grid-template-columns:1fr;gap:30px}}

#pp .side-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;box-shadow:var(--sh);align-self:start}
#pp .side-card h3{font-size:16px;font-weight:700;margin-bottom:12px}
#pp .side-card h3+p,#pp .side-card p{color:var(--ink2);font-size:14px;margin-bottom:14px}
#pp .side-card>h3:not(:first-child){margin-top:26px}
#pp .side-card>.lp-btn{width:100%}
#pp .zatca-side{text-align:center}
#pp .zatca-side b{display:block;font-size:16px}
#pp .zatca-side small{color:var(--mut)}

#pp .chips{display:flex;flex-wrap:wrap;gap:8px}
#pp .chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:var(--brand-s);color:var(--brand);font-size:13px;font-weight:600;transition:background .15s,color .15s}
#pp .chip:hover{background:var(--brand);color:#fff}
#pp .chips.big .chip{padding:11px 18px;font-size:14.5px}

#pp .sol-list{display:grid;gap:64px}
#pp .sol{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
#pp .sol.rev .ph{order:2}
#pp .sol .ph{box-shadow:var(--sh2)}
#pp .sol h2{display:flex;align-items:center;gap:10px;margin-bottom:10px}
#pp .sol h2 .i{color:var(--brand)}
#pp .sol p{color:var(--ink2)}
#pp .sol .lp-acts{margin-top:24px}
@media (max-width:860px){#pp .sol{grid-template-columns:1fr;gap:24px}#pp .sol.rev .ph{order:0}#pp .sol-list{gap:48px}}

/* a real sequence: a day of work / the two ZATCA phases */
#pp .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;counter-reset:s}
#pp .steps li{position:relative;padding:22px 18px 18px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);counter-increment:s}
#pp .steps li::before{content:counter(s);position:absolute;top:-12px;inset-inline-start:16px;width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;font-size:12.5px;font-weight:700;display:grid;place-items:center}
#pp .steps b{display:block;font-size:15px;margin-bottom:6px}
#pp .steps p{color:var(--ink2);font-size:13.5px;line-height:1.65}
#pp .steps.two-s{grid-template-columns:1fr 1fr;max-width:900px}
#pp .steps.two-s li{padding:26px 24px 22px}
@media (max-width:1000px){#pp .steps{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){#pp .steps,#pp .steps.two-s{grid-template-columns:1fr}}

/* contact */
#pp .contact{align-items:start}
#pp .lp-form{display:grid;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;box-shadow:var(--sh)}
#pp .lp-form .g2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#pp .lp-form label{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--ink)}
#pp .lp-form input,#pp .lp-form select,#pp .lp-form textarea{width:100%;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);font-weight:400;font-size:14px;transition:border-color .15s,box-shadow .15s}
#pp .lp-form textarea{height:auto;padding:10px 12px;resize:vertical;min-height:110px}
#pp .lp-form input:focus,#pp .lp-form select:focus,#pp .lp-form textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 20%,transparent)}
#pp .lp-form input[aria-invalid=true]{border-color:var(--err)}
#pp .lp-form .hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
#pp .lp-form button{justify-self:start;min-width:160px}
#pp .lp-form button:disabled{opacity:.65;cursor:progress}
#pp .lp-msg{display:none;padding:10px 14px;border-radius:10px;font-size:13.5px;line-height:1.6}
#pp .lp-msg.ok{display:block;background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok)}
#pp .lp-msg.err{display:block;background:color-mix(in srgb,var(--err) 10%,transparent);color:var(--err)}
#pp .lp-msg a{text-decoration:underline;text-underline-offset:3px;font-weight:600}
#pp .form-note{color:var(--mut);font-size:12.5px}
#pp .cl{display:grid;gap:10px;margin-bottom:8px}
#pp .cl li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink2)}
#pp .cl .i{color:var(--brand)}
#pp .cl a:hover{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
@media (max-width:560px){#pp .lp-form .g2{grid-template-columns:1fr}#pp .lp-form{padding:20px 16px}#pp .lp-form button{width:100%}}