/* Infokey design system — forked from the Wabmate site, re-tokened to the amber/blue Infokey palette.
   Colors resolve at build time from config/brand.json. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-400.woff2) format("woff2")}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-500.woff2) format("woff2")}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-600.woff2) format("woff2")}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/poppins-500.woff2) format("woff2")}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/poppins-600.woff2) format("woff2")}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/poppins-700.woff2) format("woff2")}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/poppins-800.woff2) format("woff2")}
:root{ --g:#F59E0B; --gd:#D97706; --ink:#161006; --mut:#6B6255;
  --soft:#FFF7EA; --line:#EDE4D3; --blue:#2563EB; --blued:#1D4ED8; --dark:#170F03;
  /* bright theme surfaces */
  --sun:#FFC63E; --org:#FB9A28; --orgd:#E9700F;
  --iris:#6D5AE6; --irisd:#4B3FBE; --night:#241C4D;
  /* aurora surface for text-light sections (hero, CTA): deep violet on the left (text sits here → crisp
     white), flowing through magenta into warm orange on the right where the motif lives */
  --aurora:linear-gradient(118deg, #24084F 0%, #3B1178 22%, #6D28D9 45%, #B0308C 70%, #EC5F2C 92%, #FF8A3D 100%);
  --nightwash:linear-gradient(150deg, var(--iris) 0%, var(--irisd) 55%, var(--night) 100%); }
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:#fff}
h1,h2,h3,.pop{font-family:'Poppins',sans-serif}
h1{font-size:clamp(30px,4.8vw,48px);line-height:1.13;margin:12px 0 14px;font-weight:800}
h2{font-size:clamp(23px,3.4vw,32px);margin:0 0 10px}
.sec{max-width:1080px;margin:0 auto;padding:68px 20px}
.kicker{color:var(--gd);font-weight:700;font-size:13px;letter-spacing:1.2px;text-transform:uppercase}
.kicker.b{color:var(--blue)}
.lead{color:var(--mut);font-size:16.5px;line-height:1.65;max-width:660px}
.gtext{background:linear-gradient(90deg,var(--gd),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
/* on the bright orange hero, amber→blue text would wash out — use a white→lilac sheen instead */
.hero .gtext,.fhero .gtext{background:linear-gradient(92deg,#fff 0%,#EFE9FF 55%,#D9CEFF 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn{display:inline-block;font-family:'Poppins';font-weight:600;font-size:15px;border-radius:999px;padding:14px 28px;text-decoration:none;transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease,border-color .16s ease;border:none;cursor:pointer}
/* unified hover: gentle lift + soft glow, keeping each button's own identity */
.btn:hover{transform:translateY(-2px)}
.btn.g{background:var(--g);color:#241300}.btn.g:hover{background:var(--gd);color:#fff;box-shadow:0 10px 24px rgba(217,119,6,.30)}
.btn.b{background:var(--blue);color:#fff}.btn.b:hover{background:var(--blued);box-shadow:0 10px 24px rgba(37,99,235,.28)}
.btn.w{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn.w:hover{border-color:var(--g);color:var(--gd);box-shadow:0 10px 24px rgba(245,158,11,.22)}
.btn.o{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55)}.btn.o:hover{border-color:#fff;background:rgba(255,255,255,.14)}
/* primary CTA on an orange surface: solid white pill so it stands out (amber-on-orange would blend) */
.hero .btn.g,.fhero .btn.g,.ctaband .btn.g{background:#fff;color:var(--orgd)}
.hero .btn.g:hover,.fhero .btn.g:hover,.ctaband .btn.g:hover{background:#fff;color:var(--orgd);box-shadow:0 12px 30px rgba(20,8,50,.30)}
[data-r]{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
[data-r].in{opacity:1;transform:none}
/* header */
header{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.93);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:22px;padding:12px 20px}
.logo{display:flex;align-items:center;gap:9px;font-family:'Poppins';font-weight:700;font-size:19px;color:var(--ink);text-decoration:none}
.logo svg{height:28px;width:auto}
.logo img{height:28px;width:auto}
.nav a.lnk{position:relative;color:var(--ink);text-decoration:none;font-weight:500;font-size:14.5px;transition:color .2s}
.nav a.lnk::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--g),var(--blue));transform:scaleX(0);transform-origin:left;transition:transform .26s ease}
.nav a.lnk:hover{color:var(--gd)}
.nav a.lnk:hover::after{transform:scaleX(1)}
.nav a.lnk.active{color:var(--gd);font-weight:600}
.nav a.lnk.active::after{transform:scaleX(1)}
.nav .sp{flex:1}
#menuBtn{display:none;background:none;border:none;font-size:26px;cursor:pointer;color:var(--ink)}
/* nav dropdowns (Softwares, Services) — hover/focus on desktop */
.navitem{position:relative;display:flex;align-items:center}
.lnk-drop{display:inline-flex;align-items:center;gap:3px}
.lnk-drop .cv{width:13px;height:13px;transition:transform .2s}
.navitem:hover .lnk .cv,.navitem:focus-within .lnk .cv{transform:rotate(180deg)}
.navitem:hover>.lnk,.navitem:focus-within>.lnk{color:var(--gd)}
.navitem:hover>.lnk::after,.navitem:focus-within>.lnk::after{transform:scaleX(1)}
.navdrop{position:absolute;top:100%;left:-12px;padding-top:14px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s,visibility .16s}
.navitem:hover .navdrop,.navitem:focus-within .navdrop{opacity:1;visibility:visible;pointer-events:auto}
.navdrop-panel{min-width:246px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 44px rgba(20,10,40,.15);padding:7px;transform:translateY(7px);transition:transform .16s}
.navitem:hover .navdrop-panel,.navitem:focus-within .navdrop-panel{transform:none}
.navdrop-panel a{display:block;padding:9px 12px;border-radius:9px;text-decoration:none;color:var(--ink);transition:background .14s}
.navdrop-panel a::after{display:none}
.navdrop-panel a b{display:block;font-size:14px;font-weight:600}
.navdrop-panel a span{display:block;font-size:12px;color:var(--mut);margin-top:1px}
.navdrop-panel a:hover{background:var(--soft);color:var(--gd)}
.navdrop-panel a.navdrop-all{color:var(--gd);font-weight:600;font-size:13px;border-top:1px solid var(--line);border-radius:0 0 8px 8px;margin-top:5px;padding-top:11px}
.navdrop-panel a.navdrop-all:hover{background:transparent;color:var(--orgd)}
@media(max-width:920px){
  .nav{gap:14px}
  .nav .lnk,.nav .btn.w,.navitem{display:none} #menuBtn{display:block;margin-left:auto}
  .nav.open .lnk,.nav.open .btn.w{display:block}.nav.open .navitem{display:block}.nav.open{flex-wrap:wrap}
  /* #menuBtn is last in the DOM; give the expanding items a higher flex order so the
     first row stays logo … ☰ and the links wrap BELOW the button, not above it */
  .nav.open .lnk,.nav.open .btn.w,.nav.open .navitem{order:2}
  .nav.open .lnk{width:100%;padding:11px 2px;border-top:1px solid var(--line)}
  .nav.open .lnk::after{display:none}
  .nav.open .btn.w{width:100%;text-align:center;margin-top:12px}
  /* dropdowns become an inline indented list inside the mobile menu */
  .nav.open .navitem{width:100%}
  .navitem .cv{display:none}
  .nav.open .navdrop{position:static;padding:0;opacity:1;visibility:visible;pointer-events:auto}
  .nav.open .navdrop-panel{min-width:0;background:none;border:none;box-shadow:none;border-radius:0;padding:0 0 6px;transform:none}
  .nav.open .navdrop-panel a{padding:8px 2px 8px 20px}
  .nav.open .navdrop-panel a span{display:none}
  .nav.open .navdrop-panel a.navdrop-all{border-top:none;padding:8px 2px 8px 20px;margin-top:0}
}
/* hero (aurora) */
.hero,.fhero{position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(58% 90% at 84% 12%, rgba(56,189,248,.22), transparent 60%),
    radial-gradient(46% 78% at 96% 88%, rgba(244,114,182,.22), transparent 62%),
    var(--aurora)}
.hero h1,.fhero h1{text-shadow:0 2px 22px rgba(20,8,50,.35)}
.hero::before,.fhero::before{content:'';position:absolute;width:540px;height:540px;left:-180px;bottom:-280px;border-radius:50%;
  background:radial-gradient(circle,rgba(56,189,248,.34),transparent 66%);filter:blur(34px);animation:drift 11s ease-in-out infinite alternate}
.hero::after{content:'';position:absolute;width:460px;height:460px;right:-140px;top:-220px;border-radius:50%;
  background:radial-gradient(circle,rgba(251,191,36,.30),transparent 66%);filter:blur(32px);animation:drift 13s ease-in-out infinite alternate-reverse}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(40px,-30px) scale(1.12)}}
.hero .sec,.fhero .sec{position:relative;z-index:1}
.fhero .sec{padding:56px 20px 60px}
.hero p.hlead,.fhero p.lead{color:rgba(255,255,255,.9)}
.fhero .crumb{font-size:13px;color:rgba(255,255,255,.82)}
.fhero .crumb a{color:rgba(255,255,255,.82);text-decoration:none}
.fhero .crumb a:hover{color:#fff}
.chip{display:inline-block;font-size:12.5px;font-weight:600;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:6px 13px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
/* hero heading: typewriter + entrance */
.hero .tline{display:block;min-height:2.26em}
@media(max-width:640px){.hero .tline{min-height:4.6em}}
.type-caret{display:inline-block;width:3px;height:.78em;margin-left:7px;border-radius:2px;background:#fff;box-shadow:0 0 10px rgba(255,255,255,.6);vertical-align:-.06em;animation:caret 1.1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
@media(prefers-reduced-motion:no-preference){
  .hero .sec>.chip,.hero h1,.hero .hlead,.hero .cta-row,.hero .chips{opacity:0;animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards}
  .hero h1{animation-delay:.12s}.hero .hlead{animation-delay:.24s}.hero .cta-row{animation-delay:.36s}.hero .chips{animation-delay:.48s}
}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.type-caret{display:none}}
/* marquee */
.mq{overflow:hidden;border-top:1px solid rgba(255,255,255,.22);border-bottom:1px solid rgba(255,255,255,.22);padding:13px 0;background:rgba(255,255,255,.12);min-height:44px;position:relative;z-index:1}
.mq-in{display:inline-flex;gap:42px;white-space:nowrap;animation:mq 26s linear infinite;font-family:'Poppins';font-weight:600;font-size:14px}
.mq:hover .mq-in{animation-play-state:paused}
.mq-in span{color:rgba(255,255,255,.78)}.mq-in span:nth-child(odd){color:#fff}.mq-in span:nth-child(3n){color:#E9E3FF}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* counters */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px}
@media(max-width:820px){.nums{grid-template-columns:repeat(2,1fr)}}
.num{border:1px solid var(--line);border-radius:16px;padding:22px;text-align:center}
.num .v{font-family:'Poppins';font-weight:800;font-size:clamp(26px,3.6vw,38px);background:linear-gradient(90deg,var(--gd),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.num p{margin:6px 0 0;color:var(--mut);font-size:13.5px}
/* flow pipeline */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:34px}
@media(max-width:760px){.flow{grid-template-columns:1fr}}
.fnode{position:relative;text-align:center;padding:0 14px}
.fnode .dot{width:56px;height:56px;border-radius:16px;margin:0 auto 12px;display:grid;place-items:center;font-size:24px;background:var(--soft);border:1.5px solid #F2E3C2;animation:pulse 2.4s ease-in-out infinite}
.fnode:nth-child(2) .dot{animation-delay:.6s}.fnode:nth-child(3) .dot{animation-delay:1.2s;background:#EFF5FF;border-color:#D8E6FB}.fnode:nth-child(4) .dot{animation-delay:1.8s}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.25)}50%{box-shadow:0 0 0 12px rgba(245,158,11,0)}}
.fnode h3{font-size:15px;margin:0 0 5px}
.fnode p{color:var(--mut);font-size:13px;line-height:1.5;margin:0}
.fnode:not(:last-child)::after{content:'';position:absolute;top:27px;right:-11px;width:22px;height:2px;background:linear-gradient(90deg,var(--g),var(--blue))}
.fnode:not(:last-child)::before{content:'';position:absolute;top:24px;right:-8px;width:8px;height:8px;border-radius:50%;background:var(--blue);animation:travel 2.4s linear infinite}
@keyframes travel{0%{transform:translateX(-16px);opacity:0}30%{opacity:1}100%{transform:translateX(10px);opacity:0}}
@media(max-width:760px){.fnode:not(:last-child)::after,.fnode:not(:last-child)::before{display:none}.fnode{margin-bottom:26px}}
/* cards / grids */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.grid.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid,.grid.g2{grid-template-columns:1fr}}
.card{border:1px solid var(--line);border-radius:16px;padding:22px;background:#fff;transition:transform .18s,border-color .18s,box-shadow .18s}
.card:hover{transform:translateY(-3px);border-color:var(--g);box-shadow:0 14px 30px rgba(245,158,11,.10)}
.card .ic{width:42px;height:42px;border-radius:12px;background:var(--soft);display:grid;place-items:center;font-size:20px;margin-bottom:12px}
.card h3{margin:0 0 7px;font-size:16.5px}
.card p,.card li{color:var(--mut);font-size:14px;line-height:1.6}
.card ul{padding-left:18px;margin:8px 0 0}
.card .badge{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.6px;color:var(--gd);background:var(--soft);border-radius:99px;padding:3px 9px;margin-left:6px;vertical-align:2px}
.card.blue{border-top:3px solid var(--blue)}.card.blue:hover{border-color:var(--blue);box-shadow:0 14px 30px rgba(37,99,235,.12)}
.card.blue .ic{background:#EFF5FF}.card.blue .badge{color:var(--blue);background:#EFF5FF}
a.tcard{display:block;text-decoration:none;color:inherit}
.tcard .topen{display:inline-block;margin-top:10px;color:var(--gd);font-weight:600;font-size:14px}
/* ---- blog cards (hub listing) ---- */
a.bcard{display:flex;flex-direction:column;padding:0;overflow:hidden;text-decoration:none;color:inherit}
/* height:auto is required — the img carries a height="576" attribute, which is a
   presentational hint that wins over aspect-ratio unless height is explicitly reset. */
.bcard .bcardimg{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--soft)}
.bcard .bmeta{font-size:11.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--gd);padding:18px 20px 0}
.bcard h3{margin:6px 20px 0;font-size:16.5px;line-height:1.35}
.bcard p{margin:8px 20px 0;color:var(--mut);font-size:14px;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bcard .topen{margin:12px 20px 20px}
/* ---- article body (cloned blog posts) ---- */
.post{max-width:74ch;font-size:16.5px;line-height:1.75;color:#2C2519}
.post>*:first-child{margin-top:0}
.post h2{font-size:clamp(21px,3vw,27px);line-height:1.25;margin:38px 0 12px}
.post h3{font-size:clamp(17.5px,2.4vw,20px);line-height:1.3;margin:28px 0 9px}
.post h4{font-size:17px;margin:22px 0 8px}
.post p{margin:0 0 17px}
.post ul,.post ol{margin:0 0 18px;padding-left:22px}
.post li{margin-bottom:8px}
.post li::marker{color:var(--g)}
.post a{color:var(--gd);text-decoration:underline;text-underline-offset:2px}
.post a:hover{color:var(--orgd)}
/* Many cloned posts carry square artwork (512² and 1024²). Unconstrained, a 1024² image
   fills the column and renders ~700px tall — taller than most viewports. Cap the height
   and let width follow the aspect ratio. No object-fit crop: several of these are designed
   banners with text baked in, so cropping would cut words off. */
.post img{max-width:100%;max-height:45vh;width:auto;height:auto;border-radius:14px;display:block;margin:24px auto;border:1px solid var(--line)}
.post .posthero{margin:0 auto 30px}
.post blockquote{margin:22px 0;padding:14px 20px;border-left:3px solid var(--g);background:var(--soft);border-radius:0 12px 12px 0}
.post blockquote p:last-child{margin-bottom:0}
.post table{width:100%;border-collapse:collapse;margin:22px 0;font-size:15px}
.post th,.post td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.post th{background:var(--soft);font-weight:700}
.postnav{margin-top:34px}
.postnav a{color:var(--gd);font-weight:600;text-decoration:none}
/* ---- tools hub: per-category colour theming + sticky scroll-spy nav ---- */
/* accent palette (shared by the sticky chips and the category panels) */
.acc-green{--acc:#1FA855;--tint:#F1FBF5;--icbg:#DEF4E8}
.acc-blue{--acc:#2563EB;--tint:#EEF3FF;--icbg:#DFE9FF}
.acc-amber{--acc:#C77A08;--tint:#FFF7EA;--icbg:#FBE8C6}
.acc-iris{--acc:#5044C0;--tint:#F3F1FF;--icbg:#E5E1FB}

/* each category is a soft tinted panel so the sections feel distinct */
.toolcats{padding-top:28px}
.tcat{background:var(--tint);border:1px solid rgba(20,10,40,.05);border-radius:22px;padding:28px 26px;margin-top:22px;scroll-margin-top:calc(var(--hh,54px) + 68px)}
.tcat:first-child{margin-top:0}
.tcat>.kicker{color:var(--acc)}
.tcat>h2{margin:4px 0 6px}
.tcat>.lead{max-width:640px;margin-bottom:22px}
.tcat .card{background:#fff}
.tcat .card .ic{background:var(--icbg)}
.tcat .card:hover{border-color:var(--acc);box-shadow:0 14px 30px rgba(20,10,40,.09)}
.tcat .tcard .topen{color:var(--acc)}

/* sticky category bar — sticks below the header while you're in the tools area */
.toolwrap{position:relative}
.toolnav{position:sticky;top:var(--hh,54px);z-index:70;background:rgba(255,255,255,.9);backdrop-filter:blur(9px);border-bottom:1px solid var(--line)}
.toolnav-in{max-width:1080px;margin:0 auto;display:flex;gap:9px;padding:11px 20px;overflow-x:auto;scrollbar-width:none}
.toolnav-in::-webkit-scrollbar{display:none}
.toolnav-chip{flex:none;display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--mut);font-family:'Poppins';font-weight:600;font-size:13.5px;text-decoration:none;white-space:nowrap;transition:background .16s,border-color .16s,color .16s}
.toolnav-chip::after{display:none}
.toolnav-chip .ce{font-size:15px;line-height:1}
.toolnav-chip:hover{border-color:var(--acc);color:var(--ink)}
.toolnav-chip.on{background:var(--tint);border-color:var(--acc);color:var(--acc)}
.more{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}
.more span,.more a{font-size:12.5px;font-weight:600;color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:6px 13px;text-decoration:none}
.more a:hover{border-color:var(--g);color:var(--gd)}
.tickline{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-size:14.5px;color:var(--mut);line-height:1.55}
.tickline b{color:var(--ink)}
.tickline::before{content:'✓';color:var(--gd);font-weight:700}
.pill{display:inline-block;background:var(--soft);color:var(--gd);font-weight:600;font-size:11px;border-radius:99px;padding:3px 9px}
.pill.b{background:#EFF5FF;color:var(--blue)}
/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.step{border:1px solid var(--line);border-radius:16px;padding:22px}
.step .snum{font-family:'Poppins';font-weight:700;color:#fff;background:linear-gradient(135deg,var(--g),var(--blue));width:32px;height:32px;border-radius:50%;display:grid;place-items:center;margin-bottom:12px}
.step h3{font-size:16px;margin:0 0 6px}
.step p{color:var(--mut);font-size:14px;line-height:1.6;margin:0}
/* indigo band */
.band{background:var(--nightwash);color:#fff;position:relative;overflow:hidden}
.band::before{content:'';position:absolute;width:460px;height:460px;right:-150px;top:-210px;border-radius:50%;background:radial-gradient(circle,rgba(251,154,40,.34),transparent 66%);filter:blur(30px)}
.band .sec{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;position:relative;z-index:1}
@media(max-width:820px){.band .sec{grid-template-columns:1fr}}
.band p{color:rgba(255,255,255,.9);line-height:1.65}
.band ul{color:#fff;line-height:1.9;padding-left:20px;margin:14px 0 0}
/* on the indigo band, amber→blue gradient text goes low-contrast — warm it to sun→white */
.band .gtext,.band .num .v{background:linear-gradient(92deg,#FFD37A 0%,#fff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* white cards sitting on the indigo band keep dark text */
.band .card h3{color:var(--ink)}
.band .card p,.band .card li{color:var(--mut)}
/* faq */
.ik-faq{border:1px solid var(--line);border-radius:12px;padding:4px 18px;margin-top:12px;background:#fff}
.ik-faq summary{font-weight:600;font-size:15px;padding:13px 0;cursor:pointer;list-style:none;position:relative;padding-right:26px}
.ik-faq summary::after{content:'+';position:absolute;right:2px;color:var(--gd);font-size:20px;font-weight:600}
.ik-faq[open] summary::after{content:'–'}
.ik-faq p{color:var(--mut);line-height:1.6;margin:0 0 15px}
/* cta band + footer */
.ctaband{color:#fff;text-align:center;position:relative;overflow:hidden;
  background:
    radial-gradient(50% 120% at 12% 20%, rgba(56,189,248,.20), transparent 60%),
    radial-gradient(48% 120% at 92% 90%, rgba(251,191,36,.20), transparent 62%),
    var(--aurora)}
.ctaband h2{text-shadow:0 2px 22px rgba(20,8,50,.35)}
.ctaband::before{content:'';position:absolute;width:520px;height:520px;left:50%;top:-280px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(244,114,182,.28),transparent 66%);filter:blur(30px)}
.ctaband .sec{padding:56px 20px;position:relative;z-index:1}
.ctaband p{color:rgba(255,255,255,.9);max-width:560px;margin:8px auto 22px}
footer{background:var(--nightwash);color:rgba(255,255,255,.72);font-size:14px}
footer .fsec{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;padding:56px 20px 30px}
@media(max-width:760px){footer .fsec{grid-template-columns:1fr 1fr}}
footer h4{color:#fff;font-size:12.5px;letter-spacing:.8px;text-transform:uppercase;margin:0 0 12px}
footer a{color:rgba(255,255,255,.72);text-decoration:none;display:block;padding:4px 0}
footer a:not(.logo){position:relative;width:fit-content;transition:color .2s}
footer a:not(.logo)::after{content:'';position:absolute;left:0;bottom:2px;height:1.5px;width:100%;background:var(--sun);transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
footer a:hover{color:var(--sun)}
footer a:not(.logo):hover::after{transform:scaleX(1)}
.fbrand .flogo{margin-bottom:14px}
.fbrand .ftag{color:rgba(255,255,255,.82);line-height:1.55;margin:0 0 20px;font-size:13.5px;max-width:300px}
.fbrand address{font-style:normal;line-height:1.7;color:rgba(255,255,255,.72)}
.fbrand address .fname{color:#fff;font-weight:600;display:block;margin-bottom:2px}
.fbrand .fcontact{margin-top:12px}
.fbrand .fcontact a{display:inline-block;color:var(--sun);font-weight:500}
.legal{border-top:1px solid rgba(255,255,255,.16);text-align:center;padding:18px;font-size:12.5px}
.fsocial{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
/* scoped under `footer` so width/height win over footer a:not(.logo){width:fit-content} */
footer .fsocial a{flex:none;width:34px;height:34px;padding:0;box-sizing:border-box;border-radius:50%;display:inline-grid;place-items:center;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);transition:.18s}
footer .fsocial a::after{display:none}
footer .fsocial a svg{width:17px;height:17px}
footer .fsocial a:hover{color:#241300;background:var(--g);border-color:var(--g);transform:translateY(-2px)}
#stick{position:fixed;left:0;right:0;bottom:0;z-index:80;background:#fff;border-top:1px solid var(--line);padding:10px 14px;display:none;align-items:center;gap:10px;transform:translateY(110%);transition:transform .3s}
#stick.show{transform:none}
#stick .btn{flex:1;text-align:center;padding:12px}
#stick .x{background:none;border:none;font-size:18px;color:var(--mut);cursor:pointer;padding:6px}
@media(max-width:720px){#stick{display:flex}}
#toTop{position:fixed;right:20px;bottom:22px;z-index:85;width:44px;height:44px;border-radius:50%;border:none;background:var(--irisd);color:#fff;display:grid;place-items:center;cursor:pointer;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .25s,transform .25s,background .18s;box-shadow:0 10px 24px rgba(75,63,190,.34)}
#toTop.show{opacity:1;transform:none;pointer-events:auto}
#toTop:hover{background:var(--orgd)}
#toTop svg{width:20px;height:20px}
@media(max-width:720px){#toTop{bottom:76px}}
/* free-tools shortcut (left) */
/* bottom-left floating stack: two matching pills — Follow us (secondary) on top,
   Free tools (primary) below. Same shape + size; warm palette so they read as a set. */
#fabStack{position:fixed;left:18px;bottom:22px;z-index:85;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
#toolsFab,.sfab-toggle{display:flex;align-items:center;gap:8px;border-radius:999px;padding:12px 18px;font-family:inherit;font-weight:700;font-size:14.5px;line-height:1;cursor:pointer;text-decoration:none;transition:transform .2s,box-shadow .18s,border-color .18s,color .18s}
#toolsFab .t,.sfab-toggle .t{white-space:nowrap}
/* primary: Free tools */
#toolsFab{background:linear-gradient(135deg,var(--sun),var(--orgd));border:1.5px solid transparent;color:#241300;box-shadow:0 12px 28px rgba(233,112,15,.42);animation:fabpulse 2.6s ease-in-out infinite}
#toolsFab .i{font-size:19px}
#toolsFab:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(233,112,15,.5);animation:none}
@keyframes fabpulse{0%,100%{box-shadow:0 12px 28px rgba(233,112,15,.42)}50%{box-shadow:0 12px 28px rgba(233,112,15,.42),0 0 0 9px rgba(245,158,11,.14)}}
@media(prefers-reduced-motion:reduce){#toolsFab{animation:none}}
/* secondary: Follow us (click to reveal platform icons above) */
#socialFab{position:relative}
.sfab-toggle{background:#fff;border:1.5px solid var(--line);color:var(--ink);box-shadow:0 10px 24px rgba(22,16,6,.13)}
.sfab-toggle svg{width:19px;height:19px;color:var(--orgd);transition:color .18s}
.sfab-toggle:hover{transform:translateY(-2px);border-color:var(--g);box-shadow:0 14px 30px rgba(22,16,6,.17)}
#socialFab.open .sfab-toggle{border-color:var(--g);color:var(--gd)}
#socialFab.open .sfab-toggle svg{color:var(--gd)}
.sfab-list{position:absolute;left:6px;bottom:calc(100% + 10px);display:flex;flex-direction:column-reverse;gap:10px;opacity:0;transform:translateY(10px) scale(.9);transform-origin:bottom left;pointer-events:none;transition:opacity .2s,transform .2s}
#socialFab.open .sfab-list{opacity:1;transform:none;pointer-events:auto}
.sfab-list a{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#241300;background:linear-gradient(135deg,var(--sun),var(--orgd));box-shadow:0 8px 20px rgba(233,112,15,.34);transition:transform .16s,box-shadow .16s}
.sfab-list a::after{display:none}
.sfab-list a svg{width:21px;height:21px}
.sfab-list a:hover{transform:translateY(-2px) scale(1.06);box-shadow:0 12px 26px rgba(233,112,15,.46)}
@media(max-width:720px){#fabStack{bottom:76px;left:14px}#toolsFab,.sfab-toggle{padding:11px 15px}}
/* footer registrations block */
.freg{margin-top:18px;font-size:12px;line-height:1.75;color:rgba(255,255,255,.55);max-width:250px}
.freg b{display:block;color:rgba(255,255,255,.72);font-size:11px;letter-spacing:.6px;text-transform:uppercase;margin-bottom:4px;font-weight:600}
.freg span{display:block}
/* footer ghost wordmark */
/* Footer watermark: mark + wordmark, both white, fading out toward the bottom.
   align-items:baseline sits the mark's bottom edge exactly on the wordmark's baseline
   (a replaced element's baseline IS its bottom margin edge), so the two line up and
   only the 'y' descender drops below.
   The fade is one mask on the container, not one per child: the mark and the wordmark
   have different box heights, so per-element gradients drift out of step and the mark
   reads faint next to the text at the same height. Masking the parent fades both
   against a single vertical axis. */
.fwm{display:flex;align-items:baseline;justify-content:center;gap:2.5vw;padding:26px 20px 0;overflow:hidden;user-select:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 28%,rgba(0,0,0,.12) 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 28%,rgba(0,0,0,.12) 100%)}
/* gold PNG -> flat white; brightness(0) blacks the RGB, invert(1) lifts it to white,
   and alpha is untouched by both, so the glyph's shape survives. */
.fwm img{height:clamp(54px,10vw,140px);width:auto;opacity:.26;filter:brightness(0) invert(1)}
.fwm span{font-family:Poppins,sans-serif;font-weight:800;font-size:clamp(62px,13.5vw,185px);line-height:.82;letter-spacing:-.02em;color:rgba(255,255,255,.26);margin-bottom:-.1em}
/* lead form */
.leadform{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:0 18px 44px rgba(22,16,6,.08)}
.leadform h3{margin:0 0 4px}
.leadform .fsub{color:var(--mut);margin:0 0 10px}
.leadform label{display:block;font-weight:600;font-size:14px;margin:16px 0 6px}
.leadform label .opt{font-weight:400;color:var(--mut)}
.leadform input[type=text],.leadform input[type=tel],.leadform input[type=email],.leadform textarea{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font:inherit;font-size:15px;background:#fff;color:var(--ink)}
.leadform input:focus,.leadform textarea:focus,.leadform select:focus{outline:2px solid var(--g);outline-offset:1px;border-color:var(--g)}
.leadform .phonewrap{display:flex;gap:8px}
.leadform .phonewrap input{flex:1;min-width:0}
.leadform select{flex:0 0 auto;box-sizing:border-box;border:1px solid var(--line);border-radius:12px;padding:12px 10px;font:inherit;font-size:15px;background:#fff;color:var(--ink);cursor:pointer}
.leadform textarea{min-height:120px;resize:vertical}
.leadform .frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.leadform .frow{grid-template-columns:1fr}}
.leadform .fchecks{display:flex;flex-wrap:wrap;gap:8px}
.leadform .fchecks label{display:inline-flex;align-items:center;gap:7px;margin:0;border:1px solid var(--line);border-radius:999px;padding:8px 13px;font-weight:500;font-size:13.5px;cursor:pointer}
.leadform .fchecks label:has(input:checked){border-color:var(--gd);background:var(--soft);font-weight:600}
.leadform .fchecks input,.leadform .fconsent input{accent-color:var(--gd);width:16px;height:16px}
.leadform .fconsent{display:flex;align-items:flex-start;gap:9px;margin-top:14px;font-size:13.5px;color:var(--mut);font-weight:400}
.leadform .fconsent input{margin-top:2px;flex:none}
.leadform button{width:100%;margin-top:18px;cursor:pointer;border:none;font:inherit}
.leadform .fnote{font-size:12.5px;color:var(--mut);margin-top:10px;text-align:center}
.leadform .fstatus{display:none;margin-top:12px;padding:11px 14px;border-radius:12px;font-size:14px;line-height:1.5}
.leadform .fstatus.ok{display:block;background:#E9F9EF;border:1px solid #A7E9C1;color:#0F7A3D}
.leadform .fstatus.err{display:block;background:#FDECEC;border:1px solid #F6B9B9;color:#B42318}
.leadform .fstatus a{color:inherit;font-weight:600;text-decoration:underline}
/* contact page map */
.map iframe{width:100%;height:300px;border:0;border-radius:18px;display:block;filter:saturate(.92)}
.csocial{display:flex;gap:10px;margin-top:8px}
.csocial a{width:38px;height:38px;border-radius:10px;display:inline-grid;place-items:center;color:var(--ink);background:#fff;border:1px solid var(--line);transition:.18s}
.csocial a svg{width:18px;height:18px}
.csocial a:hover{color:#241300;background:var(--g);border-color:var(--g);transform:translateY(-2px)}
.csocial a .exti{display:none}
/* external-link marker */
.exti{display:inline-block;font-size:.82em;margin-left:3px;vertical-align:1px;opacity:.7;font-weight:600}
a:hover .exti{opacity:1}
/* animated section backgrounds */
/* right-aligned line-art motif over a faint dot grid. Each section/page gets its own
   motif so no single illustration repeats across the site. Kept upright (gentle translate). */
.bgfx,.fhero::after{
  content:'';position:absolute;inset:-4%;z-index:0;pointer-events:none;
  background-repeat:no-repeat,repeat;
  background-position:right -20px center,0 0;
  background-size:auto 94%,30px 30px;
  background-image:url(/assets/hero-motif.svg),radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.6px);
  animation:bgfloat 24s ease-in-out infinite alternate;will-change:transform}
/* interior-page heroes: default motif + per-family overrides */
.fhero::after{background-image:url(/assets/motif-spark.svg),radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.6px)}
.fhero.mv-rings::after{background-image:url(/assets/motif-rings.svg),radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.6px)}
.fhero.mv-nodes::after{background-image:url(/assets/motif-nodes.svg),radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.6px)}
.fhero.mv-docs::after{background-image:url(/assets/motif-docs.svg),radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.6px)}
.fhero.mv-contact::after{background-image:url(/assets/motif-contact.svg),radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.6px)}
@keyframes bgfloat{from{transform:translate3d(-1.2%,-.6%,0)}to{transform:translate3d(1.2%,1.2%,0)}}
@media(max-width:760px){
  .bgfx,.fhero::after,.fhero.mv-rings::after,.fhero.mv-nodes::after,.fhero.mv-docs::after,.fhero.mv-contact::after{
    background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.6px)}}
/* CTA band + indigo band keep a subtle dot grid only */
.band::after,.ctaband::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.6px) 0 0 / 30px 30px}
/* product & software logos (brand artwork lives in /assets/logos — SVGs need a viewBox to scale)
   Optical balance: matching logos on height alone makes wide wordmarks tower over compact
   square marks. The card slot stays a fixed 42px — same box as .card .ic, so headings line up
   across a grid row — and per-logo padding insets the artwork inside it. Hero logos are one
   per page with nothing to align against, so those just set height. Tuned by eye. */
.cardlogo{height:42px;width:auto;max-width:160px;object-fit:contain;object-position:left center;display:block;margin-bottom:12px}
.cardlogo[src$="busy.svg"]{padding:9px 0}                              /* wide black wordmark — heaviest */
.cardlogo[src$="yatter.svg"]{padding:4px 0}                            /* solid-fill app icon */
.cardlogo[src$="wabm.svg"],.cardlogo[src$="wabmate.svg"]{padding:2px 0}/* light outline mark */
/* hero brand lockup — .hero-logo is always followed by .kicker, so the two sit on one
   line, optically centred, reading as a single badge. (Left to default baseline
   alignment the kicker hangs off the chip's bottom corner.) The white chip is a fixed
   56px on every page so all six product/software heroes match; per-logo padding balances
   the mark inside that constant box, same trick as .cardlogo above. */
.hero-logo{height:56px;width:auto;max-width:180px;object-fit:contain;object-position:center;display:inline-block;vertical-align:middle;margin:14px 13px 16px 0;background:#fff;padding:11px 15px;border-radius:14px;box-shadow:0 8px 22px rgba(20,8,50,.22)}
.hero-logo+.kicker{display:inline-block;vertical-align:middle}
.hero-logo[src$="busy.svg"]{padding:17px 16px}                              /* wide black wordmark */
.hero-logo[src$="yatter.svg"]{padding:12px 14px}                            /* solid app icon */
.hero-logo[src$="wabm.svg"],.hero-logo[src$="wabmate.svg"]{padding:10px 14px}
.hero-logo[src$="tally.svg"],.hero-logo[src$="vyapar.svg"]{padding:8px 13px}/* lockups w/ small sub-text */
/* ===================== tool UI kit (React islands mount into .tool) ===================== */
.tool{border:1.5px solid var(--line);border-radius:20px;background:#fff;padding:26px;margin-top:26px;box-shadow:0 12px 34px rgba(22,16,6,.05)}
.tool label{display:block;font-weight:600;font-size:13px;margin:14px 0 5px}
.tool label:first-child{margin-top:0}
.tool input[type=text],.tool input[type=tel],.tool input[type=number],.tool input[type=date],.tool input[type=email],.tool select,.tool textarea{
  width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;font:inherit;font-size:15px;background:#fff}
.tool textarea{resize:vertical;min-height:80px}
.tool input:focus,.tool select:focus,.tool textarea:focus{outline:2px solid var(--g);outline-offset:1px}
.tool input[type=color]{width:46px;height:38px;padding:2px;border:1.5px solid var(--line);border-radius:9px;background:#fff;cursor:pointer}
.tool input[type=range]{width:100%;accent-color:var(--g)}
.trow{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.trow3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 14px}
@media(max-width:600px){.trow,.trow3{grid-template-columns:1fr}}
.tsplit{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:start}
@media(max-width:820px){.tsplit{grid-template-columns:1fr}}
.seg{display:inline-flex;gap:3px;background:var(--soft);border:1px solid #F2E3C2;border-radius:999px;padding:3px;flex-wrap:wrap}
.seg button{border:none;background:transparent;font-family:'Poppins';font-weight:600;font-size:13.5px;color:var(--mut);padding:7px 16px;border-radius:999px;cursor:pointer;transition:.15s}
.seg button[aria-pressed=true]{background:#fff;color:var(--gd);box-shadow:0 1px 3px rgba(22,16,6,.14)}
.seg button:hover{color:var(--gd)}
.tout{background:#FBF7EE;border:1.5px dashed #E4D5B5;border-radius:12px;padding:14px;font-family:ui-monospace,Menlo,monospace;font-size:13px;line-height:1.55;overflow-x:auto;white-space:pre-wrap;word-break:break-all;margin-top:14px}
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
@media(max-width:600px){.tres{grid-template-columns:1fr 1fr}}
.tres .r{background:var(--soft);border:1px solid #F2E3C2;border-radius:13px;padding:14px;text-align:center}
.tres .r.hi{background:linear-gradient(135deg,var(--soft),#EFF5FF)}
.tres .r b{display:block;font-family:'Poppins';font-size:clamp(17px,2.4vw,23px);color:var(--ink)}
.tres .r span{font-size:12px;color:var(--mut)}
.tbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.tbtn{font-family:'Poppins';font-weight:600;font-size:14px;border-radius:999px;padding:11px 22px;border:none;cursor:pointer;transition:.15s;background:var(--g);color:#241300}
.tbtn:hover{background:var(--gd);color:#fff}
.tbtn.alt{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.tbtn.alt:hover{border-color:var(--g);color:var(--gd)}
.tbtn:disabled{opacity:.45;cursor:not-allowed}
.tnote{font-size:12.5px;color:var(--mut);margin-top:10px;line-height:1.5}
/* saved-business-profile control bar (Invoice Generator; reusable by other tools) */
.bizbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding:12px 14px;background:var(--soft);border:1px solid #F2E3C2;border-radius:12px}
.bizbar .tbtn{padding:8px 15px;font-size:13px}
.bizbar-note{flex:1;min-width:220px;font-size:12.5px;color:var(--mut);line-height:1.45}
.qrbox{display:grid;place-items:center;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:20px;min-height:220px}
/* the qrcode lib writes inline width/height:<size>px onto the canvas after render, which
   caps to the column width but keeps full height → vertical stretch. !important + a square
   aspect-ratio overrides that inline height so the code always stays square. */
.qrbox canvas,.qrbox img{width:100%!important;max-width:280px;height:auto!important;aspect-ratio:1/1;display:block}
.amort{overflow-x:auto;margin-top:14px}
.amort table{width:100%;border-collapse:collapse;font-size:13px;min-width:480px}
.amort th,.amort td{padding:8px 10px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
.amort th:first-child,.amort td:first-child{text-align:left}
.amort th{color:var(--ink);font-weight:600;background:var(--soft)}
.loshu{display:grid;grid-template-columns:repeat(3,76px);gap:6px;margin:14px 0}
.loshu .c{position:relative;height:76px;display:grid;place-items:center;border:1.5px solid var(--line);border-radius:12px;font-family:'Poppins';font-weight:700;font-size:15.5px;color:var(--ink);background:#fff}
.loshu .c.on{background:var(--soft);border-color:var(--g)}
.loshu .c.off{color:#CBBFA8}
.loshu .c.sp{box-shadow:inset 0 0 0 1.5px var(--g)}
.loshu .c sup{position:absolute;top:4px;right:7px;font-size:10px;color:var(--mut);letter-spacing:1px}
.loshu .lsvals{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;padding:4px 6px;line-height:1.2}
/* injected-number colours: Moolank ¹ amber · Bhagyank ² blue · Name ³ iris
   (repeated selectors so they also beat `.tres .r b` in the result tiles) */
.lsm,.tres .r b.lsm{color:var(--gd)}
.lsb,.tres .r b.lsb{color:var(--blue)}
.lsn,.tres .r b.lsn{color:var(--iris,#6D5AE6)}
.lslegend{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--mut);margin:2px 0 0}
.lslegend i{font-style:normal;margin-right:4px}
.lchips{display:flex;gap:7px;flex-wrap:wrap}
.lchips span{border:1px solid var(--line);border-radius:9px;padding:6px 9px;font-size:13px;font-weight:600;background:#fff}
.lchips span b{color:var(--gd);margin-left:5px}
.ptable-wrap{overflow-x:auto}
.ptable{width:100%;border-collapse:collapse;font-size:14px}
.ptable th,.ptable td{border:1px solid var(--line);padding:8px 11px;text-align:left}
.ptable th{background:var(--soft);font-weight:700}
.ptable tr.dim td{color:var(--mut);opacity:.62}
.numcard{border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-top:12px}
.numcard .nv{font-family:'Poppins';font-weight:800;font-size:26px;background:linear-gradient(90deg,var(--gd),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent;margin-right:10px}
.numcard h4{display:inline;font-size:15.5px;margin:0}
.numcard p{color:var(--mut);font-size:14px;line-height:1.6;margin:8px 0 0}
.items-tbl{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:6px}
.items-tbl th,.items-tbl td{padding:6px 6px 6px 0;text-align:left;vertical-align:top}
.items-tbl input{padding:9px 10px!important;font-size:14px!important}
.items-tbl .del{background:none;border:none;color:#C0392B;font-size:17px;cursor:pointer;padding:8px 4px}
/* invoice preview + print */
.inv{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px;margin-top:18px;font-size:13.5px;line-height:1.55}
.inv h2{font-size:22px;margin:0}
.inv table{width:100%;border-collapse:collapse;margin-top:14px}
.inv th{background:var(--soft);text-align:left;padding:8px;font-size:12.5px}
.inv td{padding:8px;border-bottom:1px solid var(--line)}
.inv .tr{text-align:right}
.inv .tot td{border:none;padding:4px 8px}
/* ===== mobile spacing refinements ===== */
@media(max-width:600px){
  .sec{padding:46px 18px}
  .fhero .sec{padding:36px 18px 42px}
  .ctaband .sec{padding:46px 18px}
  h1{font-size:clamp(26px,7.6vw,34px)}
  .lead,.hero p.hlead,.fhero p.lead{font-size:15.5px}
  .card{padding:18px}
  .leadform{padding:20px}
  .mq-in{gap:26px;font-size:13px}
  .cta-row{gap:10px}
  .cta-row .btn{flex:1 1 100%;text-align:center}
}
@media(max-width:480px){
  footer .fsec{grid-template-columns:1fr;gap:24px}
  .fwm{gap:3vw}
}
@media print{
  body *{visibility:hidden}
  header,footer,#stick,#toTop,#toolsFab,#fabStack{display:none!important}
  .inv,.inv *{visibility:visible}
  .inv{position:absolute;left:0;top:0;width:100%;border:none;border-radius:0;padding:0;margin:0}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}[data-r]{opacity:1;transform:none}}