/* SMEDAN × Zoho credits page. Everything is scoped to .szh. */

/* this page carries its own SMEDAN × Zoho bar, so the site menu steps aside */
body:has(.szh) .header-cont{display:none!important}

/* full width inside the theme's content column */
.szh{width:100vw;max-width:none!important;position:relative;left:50%;margin-left:-50vw!important;margin-right:0!important;background:#fff}
/* the smedan.gov.ng theme paints headings, text, links and buttons in its own colours and fonts */
.szh h1,.szh h2,.szh h3,.szh h4,.szh p,.szh li,.szh span,.szh a,.szh a:hover,.szh button,.szh label,.szh output,.szh strong,.szh b{color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;text-transform:none}
.szh strong,.szh b{font-weight:700}
.szh a{text-decoration:none}
.szh button{background:none;border:0;padding:0;margin:0;cursor:pointer}
.szh img,.szh svg{max-width:none}
.szh [hidden]{display:none!important}
.szh .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.szh{--g:#2DBD32;--deep:#003D20;--forest:#004C28;--sun:#FCCE1A;--ink:#1C1C24;--muted:#5F6066;--paper:#F5F7F5;--line:#E3EAE4;
  --zr:#E42527;--zg:#089949;--zb:#226DB4;--zy:#F9B21D;
  font-family:Geist,system-ui,sans-serif;color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;overflow:hidden}
.szh *,.szh *::before,.szh *::after{box-sizing:border-box}
.szh p,.szh h1,.szh h2,.szh h3,.szh ul,.szh ol,.szh li{margin:0;padding:0}
.szh ul,.szh ol{list-style:none}
.szh .wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.szh .serif{font-family:Fraunces,Georgia,serif;font-weight:700;letter-spacing:-.015em;line-height:1.08}
.szh .eyebrow{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--forest)}
.szh .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;padding:15px 24px;font-weight:600;font-size:15px;text-decoration:none;border:0;cursor:pointer;font-family:inherit}
.szh .btn-sun{background:var(--sun);color:var(--deep)}
.szh .btn-deep{background:var(--deep);color:#fff}
.szh .btn-line{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}

/* top bar */
.szh .top{background:#fff;border-bottom:1px solid var(--line)}
.szh .top .wrap{display:flex;align-items:center;gap:16px;padding-top:16px;padding-bottom:16px}
/* logos, inline so their parts can animate */
.szh .lockup{display:flex;align-items:center;gap:16px}
.szh .lockup svg{display:block;overflow:visible}
.szh .lockup .x{font-size:22px;color:#9aa39c;font-weight:300;display:inline-block}
.szh .lk-top .lg-smedan{height:38px;width:159px}
.szh .lk-top .lg-zoho{height:46px;width:105px}
.szh .lk-foot .lg-smedan{height:30px;width:126px}
.szh .lk-foot .lg-zoho{height:38px;width:86px}
.szh .lk-foot .x{font-size:18px}

/* hero */
.szh .hero{background:var(--deep);color:#fff;position:relative}
.szh .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-top:80px;padding-bottom:88px;position:relative;z-index:1}
.szh .hero .eyebrow{color:var(--sun)}
.szh .hero h1{font-size:62px;margin-top:0}
.szh .hero .lead{font-size:19px;color:rgba(255,255,255,.82);margin-top:22px;max-width:520px}
.szh .hero .body{font-size:15.5px;color:rgba(255,255,255,.66);margin-top:16px;max-width:520px}
.szh .hero .chips{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap}
.szh .hero .chip{display:inline-flex;align-items:center;gap:9px;padding:9px 14px 9px 10px;border-radius:999px;background:rgba(255,255,255,.08);font-size:14px;font-weight:500}
.szh .hero .chip i{width:12px;height:12px;border-radius:3px;transform:rotate(-12deg)}
/* Zoho's four squares, scattered faintly behind the hero */
.szh .tiles{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:.13}
.szh .tiles i{position:absolute;border-radius:22%}

/* the check card */
.szh .card{background:#fff;color:var(--ink);border-radius:24px;padding:32px;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.szh .card h2{font-size:28px}
.szh .card .sub{color:var(--muted);font-size:15px;margin-top:8px}
.szh .lbl{display:flex;justify-content:space-between;font-size:13.5px;font-weight:600;margin-top:24px}
.szh .lbl span{color:var(--muted);font-weight:500}
.szh .field{display:flex;height:52px;border:1.5px solid #d5ddd6;border-radius:12px;overflow:hidden;margin-top:8px;background:#fff}
.szh .field b{display:flex;align-items:center;padding:0 14px;background:var(--paper);border-right:1.5px solid #d5ddd6;font-weight:600;font-size:15px;color:var(--forest)}
.szh .field input{flex:1;border:0;outline:0;padding:0 14px;font:500 17px/1 Geist,system-ui,sans-serif;letter-spacing:.06em;color:var(--ink);min-width:0;background:transparent}
.szh .help{font-size:13px;color:var(--muted);margin-top:8px}
.szh .card .btn{width:100%;margin-top:20px;padding:16px 24px}
.szh .noid{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.szh .noid a{color:var(--forest);font-weight:600}
/* verified state */
.szh .field.ok{border-color:#21a336;background:#f1faf2}
.szh .field.ok b{background:#e3f4e5;border-color:#21a336}
.szh .verified{display:flex;gap:12px;align-items:flex-start;margin-top:14px;padding:14px 16px;border-radius:12px;background:#f1faf2;color:#14532d;font-size:14.5px}
.szh .verified svg{flex:none;margin-top:1px}
.szh .verified strong{display:block;font-size:16px;color:#0b3d1f}
.szh .picks{display:grid;gap:10px;margin-top:18px}
.szh .pick{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;text-decoration:none;color:inherit}
.szh .pick img{height:26px;width:auto}
.szh .pick span{margin-left:auto;font-size:14px;font-weight:600;color:var(--forest);display:inline-flex;align-items:center;gap:6px}

.szh .agree{display:flex;gap:12px;align-items:flex-start;margin-top:18px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--paper);font-size:13.5px;line-height:1.5;color:#3b4a3f;cursor:pointer}
.szh .agree .box{flex:none;width:20px;height:20px;border-radius:6px;border:1.5px solid #9fb0a3;background:#fff;margin-top:1px;display:grid;place-items:center}
.szh .agree strong{color:var(--ink)}
.szh .btn[disabled]{opacity:.4;cursor:not-allowed}
.szh .ownonly{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:13px;line-height:1.5;color:var(--muted)}
.szh .ownonly svg{flex:none;margin-top:2px}
/* products */
.szh .section{padding:96px 0}
.szh .section h2.serif{font-size:44px;margin-top:14px;max-width:760px}
.szh .intro{font-size:17px;color:var(--muted);margin-top:16px;max-width:680px}
.szh .products{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.szh .prod{border:1px solid var(--line);border-radius:22px;padding:28px;display:flex;flex-direction:column;background:#fff}
.szh .prod .logo{height:34px;display:flex;align-items:center}
.szh .prod .logo img{height:34px;width:auto}
.szh .prod h3{font-size:22px;margin-top:26px}
.szh .prod p{font-size:15px;color:var(--muted);margin-top:8px}
.szh .prod ul{margin-top:18px;display:grid;gap:8px;font-size:14.5px}
.szh .prod li{display:flex;gap:10px;align-items:flex-start}
.szh .prod li::before{content:"";flex:none;width:7px;height:7px;border-radius:2px;margin-top:8px;background:var(--c);transform:rotate(-12deg)}
.szh .prod .foot{margin-top:auto;padding-top:26px}
.szh .lock{display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:12px;background:var(--paper);font-size:14px;color:var(--muted);font-weight:500}
.szh .prod .btn{width:100%}

/* steps */
.szh .paper{background:var(--paper)}
.szh .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px;counter-reset:s}
.szh .step{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px}
.szh .step .n{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:700;color:#fff;rotate:-8deg}
.szh .step .n span{rotate:8deg}
.szh .step h3{font-size:20px;margin-top:22px}
.szh .step p{font-size:14.5px;color:var(--muted);margin-top:8px}

/* who / why */
.szh .two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.szh .panel{border-radius:24px;padding:40px}
.szh .panel h2{font-size:34px;margin-top:14px}
.szh .panel p:not(.eyebrow){font-size:16px;margin-top:14px}
.szh .panel.g{background:#E9F6EA}
.szh .panel.g p{color:#2c4a34}
.szh .panel.b{background:#EAF1FA}
.szh .panel.b .eyebrow{color:var(--zb)}
.szh .panel.b p{color:#2a3d55}

/* closing */
.szh .close{background:var(--deep);color:#fff;border-radius:28px;padding:64px;display:flex;align-items:center;justify-content:space-between;gap:40px;position:relative;overflow:hidden}
.szh .close h2{font-size:44px}
.szh .close p{color:rgba(255,255,255,.75);margin-top:14px;font-size:16.5px;max-width:560px}
.szh .close .btn{flex:none;position:relative;z-index:1}
.szh .bottom{border-top:1px solid var(--line);margin-top:96px}
.szh .bottom .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:28px;padding-bottom:28px;font-size:13.5px;color:var(--muted)}
.szh .bottom .lgs{display:flex;align-items:center;gap:14px}

@media (max-width:900px){
  .szh .hero .wrap{grid-template-columns:1fr;gap:36px;padding-top:44px;padding-bottom:56px}
  .szh .hero h1{font-size:40px}
  .szh .hero .lead{font-size:17px}
  .szh .card{padding:22px;border-radius:20px}
  .szh .section{padding:64px 0}
  .szh .section h2.serif{font-size:32px}
  .szh .products,.szh .steps,.szh .two{grid-template-columns:1fr}
  .szh .panel{padding:28px}
  .szh .panel h2{font-size:28px}
  .szh .close{flex-direction:column;align-items:flex-start;padding:36px 26px}
  .szh .close h2{font-size:32px}
  .szh .close .btn{width:100%}
  .szh .lk-top .lg-smedan{height:28px;width:117px}.szh .lk-top .lg-zoho{height:34px;width:77px}
  .szh .bottom .wrap{flex-direction:column;gap:12px;align-items:flex-start}
  .szh .wrap{padding:0 18px}
}

/* ===== motion: only switched on by the script, so nothing hides without it ===== */
.szh{--ease:cubic-bezier(.2,.7,.2,1);--spring:cubic-bezier(.34,1.56,.64,1)}
.szh.zm [data-r]{opacity:0;transform:translateY(22px);filter:blur(6px);transition:opacity .9s var(--ease) var(--d,0s),transform 1s var(--ease) var(--d,0s),filter .9s var(--ease) var(--d,0s),translate .45s var(--ease),box-shadow .45s var(--ease),border-color .3s ease}
.szh.zm [data-r="word"]{display:inline-block;transform:translateY(.42em);filter:blur(8px)}
.szh.zm [data-r="card"]{transform:translateY(40px) scale(.97);filter:none}
.szh.zm [data-r="pop"]{transform:scale(.4);filter:none;transition:opacity .6s var(--ease) var(--d,0s),transform .9s var(--spring) var(--d,0s)}
.szh.zm [data-r="left"]{transform:translateX(-28px)}
.szh.zm [data-r="right"]{transform:translateX(28px)}
.szh.zm [data-r].in{opacity:1;transform:none;filter:none}
/* Zoho's squares drift slowly once they're in */
@keyframes szh-float{0%,100%{translate:0 0}50%{translate:0 -16px}}
.szh .tiles i{animation:szh-float 9s ease-in-out infinite;animation-delay:var(--f,0s)}
/* cards lift on hover */
.szh .prod,.szh .step,.szh .pick{transition:translate .45s var(--ease),box-shadow .45s var(--ease),border-color .3s ease}
.szh .prod:hover,.szh .step:hover{translate:0 -5px;box-shadow:0 22px 44px -26px rgba(0,61,32,.35)}
.szh .pick:hover{translate:0 -2px;border-color:#bfe3c4;box-shadow:0 12px 24px -18px rgba(0,61,32,.4)}
.szh .pick span{transition:gap .3s var(--ease)}
.szh .pick:hover span{gap:10px}
.szh .btn{transition:background .25s ease,opacity .35s ease,transform .3s var(--ease),box-shadow .3s ease}
.szh .btn:not([disabled]):hover{transform:translateY(-2px);box-shadow:0 12px 24px -14px rgba(0,0,0,.45)}
/* agreement tick */
.szh .agree{position:relative;transition:background .3s ease,border-color .3s ease}
.szh .agree input{position:absolute;opacity:0;pointer-events:none}
.szh .agree .box{transition:background .25s ease,border-color .25s ease,transform .35s var(--spring)}
.szh .agree .box path{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:12;stroke-dashoffset:12;transition:stroke-dashoffset .35s var(--ease) .08s}
.szh .agree:has(input:checked){border-color:#bfe3c4;background:#f1faf2}
.szh .agree:has(input:checked) .box{background:var(--deep);border-color:var(--deep);transform:scale(1.08)}
.szh .agree:has(input:checked) .box path{stroke-dashoffset:0}
.szh .agree:has(input:focus-visible) .box{outline:2px solid var(--g);outline-offset:2px}
/* checking */
.szh #szh-check{position:relative}
.szh .spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;display:none;animation:szh-spin .7s linear infinite}
.szh #szh-check.busy .spin{display:inline-block}
@keyframes szh-spin{to{transform:rotate(360deg)}}
/* the card eases between its two heights; states cross-fade */
.szh .card{transition:height .55s var(--ease),box-shadow .6s ease}
.szh #szh-a,.szh #szh-b{transition:opacity .3s ease,transform .3s var(--ease)}
.szh .out{opacity:0;transform:translateY(-8px)}
.szh .field{transition:border-color .4s ease,background .4s ease}
.szh .card.ping{box-shadow:0 0 0 6px rgba(252,206,26,.55),0 30px 60px -30px rgba(0,0,0,.5)}

/* ---- logos build in: SMEDAN's sprout grows, Zoho's squares tumble in and link up ---- */
.szh .lockup path,.szh .lockup g{transform-box:fill-box}
.szh.zm .lockup .s-bowl{transform-origin:50% 100%;transform:scale(.2,0);opacity:0;transition:transform .7s var(--ease),opacity .3s ease}
.szh.zm .lockup .s-stem{transform-origin:50% 100%;transform:scaleY(0);transition:transform .6s var(--ease) .15s}
.szh.zm .lockup .s-l1,.szh.zm .lockup .s-l2{transform-origin:100% 100%;transform:rotate(-40deg) scale(.2);opacity:0}
.szh.zm .lockup .s-r1,.szh.zm .lockup .s-r2{transform-origin:0 100%;transform:rotate(40deg) scale(.2);opacity:0}
.szh.zm .lockup .s-leaf{transition:transform .85s var(--spring) .25s,opacity .3s ease .25s}
.szh.zm .lockup .s-l2,.szh.zm .lockup .s-r2{transition-delay:.38s}
.szh.zm .lockup .s-dot{transform-origin:50% 50%;transform:scale(0);transition:transform .5s var(--spring) calc(.6s + var(--i) * .05s)}
.szh.zm .lockup .s-ltr{opacity:0;transform:translateY(45%);transition:transform .6s var(--ease) calc(.3s + var(--i) * .05s),opacity .5s ease calc(.3s + var(--i) * .05s)}
.szh.zm .lockup .x{opacity:0;transform:scale(.3) rotate(-90deg);transition:transform .6s var(--spring) .75s,opacity .4s ease .75s}
.szh.zm .lockup .z-sq{transform-origin:50% 50%;opacity:0;transform:translateY(-70%) rotate(calc(-140deg + var(--i) * 60deg)) scale(.3);transition:transform .95s var(--spring) calc(.85s + var(--i) * .13s),opacity .35s ease calc(.85s + var(--i) * .13s)}
.szh.zm .lockup .z-ltr{opacity:0;transform:translateY(70%);transition:transform .5s var(--ease) calc(1.45s + var(--i) * .06s),opacity .4s ease calc(1.45s + var(--i) * .06s)}
.szh.zm .lockup.in .s-bowl,.szh.zm .lockup.in .s-stem,.szh.zm .lockup.in .s-leaf,.szh.zm .lockup.in .s-dot,.szh.zm .lockup.in .s-ltr,.szh.zm .lockup.in .x,.szh.zm .lockup.in .z-sq,.szh.zm .lockup.in .z-ltr{opacity:1;transform:none}
/* once landed, a ripple runs through the four squares (again on hover, and when someone's verified) */
@keyframes z-hop{0%,100%{translate:0 0;rotate:0deg}35%{translate:0 -16%;rotate:-6deg}70%{translate:0 3%;rotate:2deg}}
.szh .lockup.wave .z-sq{animation:z-hop .7s var(--ease) calc(var(--i) * .09s)}
@keyframes s-sway{0%,100%{rotate:0deg}40%{rotate:-5deg}75%{rotate:3deg}}
.szh .lockup.wave .s-leaf{transform-origin:50% 100%;animation:s-sway .8s var(--ease)}
@media (prefers-reduced-motion:reduce){.szh .tiles i{animation:none}.szh *{transition-duration:.01s!important}}

/* ---- live states ---- */
.szh .msg{font-size:13.5px;line-height:1.5;margin-top:10px;min-height:0}
.szh .msg:empty{display:none}
.szh .msg.is-warn{color:#8a5a00;background:#fff7e0;border:1px solid #f3dc9b;border-radius:10px;padding:10px 12px}
.szh .msg.is-err{color:#9b1c1c;background:#fff1f1;border:1px solid #f4c7c7;border-radius:10px;padding:10px 12px}
.szh .msg a{color:inherit;font-weight:600;text-decoration:underline}
.szh .field.warn{border-color:#e6b84a;background:#fffbef}
.szh .field.err{border-color:#e08a8a;background:#fff6f6}
.szh .field output{flex:1;display:flex;align-items:center;padding:0 14px;font:500 17px/1 Geist,system-ui,sans-serif;letter-spacing:.06em;color:var(--ink)}
.szh .note{margin-top:14px;font-size:14px;color:#8a5a00;background:#fff7e0;border-radius:10px;padding:10px 12px}
.szh .card .noid a{text-decoration:underline}
.szh .again{display:block;margin:16px auto 0;font-size:14px;font-weight:600;color:var(--forest);text-decoration:underline;text-underline-offset:3px}
.szh .prod .unlocked{width:100%}
.szh .close-copy{position:relative;z-index:1}
.szh .bottom .lockup{gap:14px}
.szh input,.szh output{box-shadow:none}
.szh .field input:focus{outline:0}
.szh .field:focus-within{border-color:var(--forest);box-shadow:0 0 0 3px rgba(0,76,40,.12)}